/* ============================================================
   Ideas of a project — the five groups, their cards, the forms
   (owner: ideas agent). Only theme variables, no hardcoded colors.

   The body of an idea is PLAIN TEXT on purpose (B-029 is open and the site
   sends no CSP): the view escapes it with Site::e() and the line breaks are
   kept HERE, by white-space: pre-wrap, instead of by <br> tags built out of
   what someone typed. If that rule is ever dropped from ideas.css, the text
   collapses into one paragraph — it does not become markup.
   ============================================================ */

/* ── Jump bar: the five groups with their counters ─────────── */
.idea-jump {
    display:       flex;
    flex-wrap:     wrap;
    gap:           var(--space-2);
    margin-bottom: var(--space-5);
}
.idea-jump__link {
    display:          inline-flex;
    align-items:      center;
    gap:              var(--space-2);
    padding:          var(--space-2) var(--space-3);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-full);
    background-color: var(--color-bg-card);
    color:            var(--color-text);
    font-size:        var(--font-size-sm);
    text-decoration:  none;
}
.idea-jump__link:hover {
    border-color: var(--color-border-strong);
    color:        var(--color-text-link);
}
.idea-jump__count {
    min-width:        1.5em;
    padding:          0 var(--space-1);
    border-radius:    var(--radius-full);
    background-color: var(--color-bg-muted);
    color:            var(--color-text-muted);
    font-size:        var(--font-size-xs);
    text-align:       center;
}

/* ── One group ────────────────────────────────────────────── */
.idea-group { margin-bottom: var(--space-6); scroll-margin-top: var(--space-16); }
.idea-group__head  { align-items: flex-start; }
.idea-group__title { display: flex; flex-direction: column; gap: var(--space-1); }
.idea-group__title h2 { display: flex; align-items: center; gap: var(--space-2); }
.idea-group__title .form-hint { margin: 0; }

/* ── The cards inside a group ─────────────────────────────── */
.idea-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-4);
    margin:         0;
    padding:        0;
    list-style:     none;
}
.idea-card {
    padding:          var(--space-4);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-md);
    background-color: var(--color-bg-muted);
    scroll-margin-top: var(--space-16);
}
.idea-card__head {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             var(--space-3);
}
.idea-card__title {
    margin:      0;
    font-size:   var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
}
.idea-card__actions {
    display:     flex;
    align-items: center;
    gap:         var(--space-1);
    flex-shrink: 0;
}
.idea-card__inline { display: inline-flex; margin: 0; }
.idea-card__icon   { padding: var(--space-1) var(--space-2); }

/* The line breaks of the text, kept by CSS instead of by generated markup. */
.idea-card__body {
    margin-top:  var(--space-3);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color:       var(--color-text);
    line-height: 1.65;
}
.idea-card__meta {
    margin-top: var(--space-3);
    margin-bottom: 0;
    color:      var(--color-text-muted);
    font-size:  var(--font-size-xs);
}

/* ── "Write an idea": collapsed until it is wanted ────────── */
.idea-add { margin-top: var(--space-4); }
.idea-add__summary {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-2);
    padding:       var(--space-2) var(--space-3);
    border:        1px dashed var(--color-border-strong);
    border-radius: var(--radius);
    color:         var(--color-text-muted);
    cursor:        pointer;
    font-size:     var(--font-size-sm);
    list-style:    none;
}
.idea-add__summary::-webkit-details-marker { display: none; }
.idea-add__summary:hover { color: var(--color-text-link); border-color: var(--color-border-focus); }
.idea-add[open] .idea-add__summary { margin-bottom: var(--space-3); }

/* ── Forms (the inline one and the edit page) ─────────────── */
.idea-form textarea { font-family: var(--font-family-mono); font-size: var(--font-size-sm); }
.idea-form__actions {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    margin-top:  var(--space-4);
}
.idea-editcard { max-width: 860px; }
.idea-delete {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    max-width:   860px;
    margin-top:  var(--space-5);
}
.idea-delete .form-hint { margin: 0; }

@media (max-width: 640px) {
    .idea-card__head    { flex-direction: column; }
    .idea-card__actions { flex-wrap: wrap; }
}