/* ============================================================
   WINGS/CORE/LIBRARY.CSS — what all seven wings share
   ------------------------------------------------------------
   Group headings, the row/card shells, badges, stars, progress bars and the
   reader's furniture. Anything specific to one wing lives in css/wings/.
   ============================================================ */

/* ── Group headings ───────────────────────────────────────── */
.wing-group-h {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.75rem 0 0.85rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.wing-group-h:first-child { margin-top: 0; }
.wing-group-name { flex-shrink: 0; }
.wing-group-h::after { content: ''; flex: 1; height: 1px; background: var(--border-color); }
.wing-group-count {
  flex-shrink: 0;
  padding: 0.1rem 0.45rem;
  border-radius: 99px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  font-size: 0.68rem;
  color: var(--text-secondary);
}

/* ── Row shell ────────────────────────────────────────────── */
.wing-rows { display: flex; flex-direction: column; gap: 0.5rem; }

.wing-row {
  position: relative;
  display: flex;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  transition: border-color 0.15s, transform 0.15s;
}
.wing-row:hover { border-color: var(--color-primary); transform: translateX(2px); }

.wing-row-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  margin: 0 0 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wing-row-snip {
  font-size: 0.84rem;
  color: var(--text-secondary);
  margin: 0 0 0.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wing-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--text-tertiary);
}
.wing-row-meta span { display: inline-flex; align-items: center; gap: 0.25rem; }
.wing-muted { color: var(--wing-muted); font-size: 0.75rem; }
.wing-tagrow { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.wing-good { color: var(--color-primary); }

/* ── Badges ───────────────────────────────────────────────────
   The tone carries the meaning, so the same word does not have to be read
   twice to know whether it is good news. Per-wing colour sets live in the
   wing's own stylesheet; this is only the shape. ─────────── */
.wing-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  border-radius: 99px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  white-space: nowrap;
}
.wing-badge.soft { text-transform: none; letter-spacing: 0; font-weight: 600; }

.wing-stars { display: inline-flex; gap: 1px; color: #facc15; align-items: center; }

/* ── Progress ─────────────────────────────────────────────── */
.wing-prog { display: inline-flex; align-items: center; gap: 0.5rem; width: 100%; margin: 0.5rem 0; }
.wing-prog-track {
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: rgba(148, 163, 184, 0.22);
  overflow: hidden;
}
.wing-prog-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--color-primary), #4ade80);
  transition: width 0.3s ease;
}
.wing-prog-num { font-size: 0.7rem; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

/* ── The reader ───────────────────────────────────────────── */
.wing-reader-title {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  line-height: 1.25;
}

.wing-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.6rem 1.2rem;
  margin: 0 0 1.5rem;
  padding: 0.9rem 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 10px;
}
.wing-meta-row { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.wing-meta-row dt {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--wing-muted);
}
.wing-meta-row dd { margin: 0; font-size: 0.88rem; color: var(--text-primary); word-break: break-word; }

.wing-sec { margin-bottom: 1.75rem; }
.wing-sec-h {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--wing-muted);
  margin-bottom: 0.6rem;
}
.wing-sec-h .wing-prog { margin: 0; max-width: 220px; }

.wing-body { font-size: 0.95rem; line-height: 1.7; color: var(--text-secondary); }

/* ── Cross-links between wings ────────────────────────────── */
.wing-link-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.45rem;
  border-radius: 9px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.wing-link-card:hover { border-color: var(--color-primary); transform: translateX(2px); }
.wing-link-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── The rating picker in the editor ──────────────────────── */
.wing-rate-pick { display: flex; align-items: center; gap: 0.2rem; }
.wing-rate-star {
  background: transparent;
  border: 0;
  padding: 0.2rem;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color 0.12s, transform 0.12s;
}
.wing-rate-star:hover { transform: scale(1.15); }
.wing-rate-star.on { color: #facc15; }
.wing-rate-clear {
  margin-left: 0.5rem;
  background: transparent;
  border: 0;
  font-size: 0.7rem;
  color: var(--text-tertiary);
  cursor: pointer;
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .wing-row, .wing-link-card, .wing-rate-star, .wing-prog-fill { transition: none !important; }
  .wing-row:hover, .wing-link-card:hover { transform: none; }
}

/* ── The entry form ───────────────────────────────────────────
   The library's form and its admin's form are the same form, so they share
   the admin form chrome from admin.css. Only the accent differs, and that
   comes from the wing's own colour rather than from where the form is shown.
   ------------------------------------------------------------ */
.wing-form {
  max-width: 820px;
  margin: 0 auto;
  --wing-accent: #8b5cf6;
}
.wing-form .af-header-badge {
  background: color-mix(in srgb, var(--wing-accent) 18%, transparent);
  color: var(--wing-accent);
}
.wing-form .af-section-icon { color: var(--wing-accent); }

/* The footer is sticky in admin.css because there the form panel is its own
   scroll container and the actions should stay in reach. Both wing forms sit
   on a page that scrolls as a whole, so sticky pinned them to the viewport
   and they floated over the middle of the form — measured overlapping the
   section below by 31px. Here they belong at the end of the form. */
.wing-form .admin-form-footer,
.awx-form .admin-form-footer {
  position: static;
}

/* ============================================================
   THE AUDIT FIXES
   ------------------------------------------------------------
   Everything below is scoped to .wing-layout, or to classes only the wings
   use, so none of it reaches the Coding, Snippet or Notebook libraries that
   share this shell.
   ============================================================ */

/* ── A muted tone that is still readable ─────────────────────
   --text-tertiary measured 3.56:1 on a card in dark and about 2.8:1 in
   light, against the 4.5 that text this size needs. The wings lean on it
   harder than anywhere else in the app — group headings, dates, counters and
   the "by" line are all metadata — so they get a tone of their own rather
   than making the whole app brighter.
   ------------------------------------------------------------ */
:root { --wing-muted: #5b6b7f; }
[data-theme="dark"] { --wing-muted: #93a3b8; }

/* The per-wing files set their own metadata colours and load after this one,
   so they use --wing-muted at their own declarations. These are the ones this
   file owns. */
.wing-group-h,
.wing-prog-num,
.wing-count-of { color: var(--wing-muted); }

.wing-count-of { font-size: 0.72rem; }

/* The shared chips and tag badges sit at 3.5:1. They belong to every library,
   so they are lifted only inside a wing rather than changed underneath the
   three finished ones. */
.wing-layout .lib-chip { color: var(--wing-muted); }
.wing-layout .lib-chip.active { color: var(--text-primary); }
.wing-layout .badge.badge-primary,
.wing-layout .lib-tag-badge {
  color: color-mix(in srgb, var(--color-primary) 45%, var(--text-primary));
}

/* ── Text floors ──────────────────────────────────────────────
   The badge was 10.56px and the group count 10.88px, both under the 11px
   floor the rest of the app was brought up to.
   ------------------------------------------------------------ */
.wing-badge { font-size: 0.7rem; }
.wing-group-count { font-size: 0.7rem; color: var(--text-secondary); }

/* ── The sidebar is NOT narrowed here, deliberately ───────────
   The audit called 480px too wide for two rows of folders and this file used
   to cut the wings to 26%/340px. That was overruled: every library should
   open at the same width, and the Coding Library's is the one they match.
   A wing that started narrower than the library beside it read as a
   different kind of screen rather than a tidier one.

   So the base rule in layout.css owns this — 40%, 320–480px — for all ten,
   and the divider moves it from there. Nothing to override.
   ------------------------------------------------------------ */

/* ── The sidebar header ──────────────────────────────────────
   The chips fit on one row at 480px, but the divider can be dragged down to
   200px, and at that width four of them used to run off the edge and clip
   "Learning". Wrapping costs nothing when there is room and is the whole
   difference when there is not.
   ------------------------------------------------------------ */
.wing-layout .browse-mini-stats {
  flex-wrap: wrap;
  overflow: visible;
  gap: 0.3rem;
}
.wing-layout .pane-1-header .section-header-title { line-height: 1.2; }
.wing-layout .pane-1-header .section-header-subtitle { line-height: 1.3; }

/* ── Cards in grouped wings: NOT overridden, deliberately ─────
   The audit called the empty second column beside a one-entry group wasted
   space. It is not: it is how a grid keeps card widths equal between groups,
   and both cures are worse. auto-fit lets a lone card stretch to the full
   928px, and a capped track (280–460px) needs 936px for two columns in a
   928px grid, so it silently collapsed four cards into one column.

   The app's own .card-grid was right. Narrowing the sidebar above already
   widened these cards from 381px to 456px, which was the real complaint.
   ------------------------------------------------------------ */

/* ── A readable measure ──────────────────────────────────────
   The reader ran to about 103 characters a line. Comfortable is 45–75, and
   of everything in this app these are the screens meant for reading.
   ------------------------------------------------------------ */
.wing-reader .wing-body,
.wing-reader > p,
.wing-sec > p { max-width: 68ch; }

/* ── Phone ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* The toolbar fitted until something came due: "Recall 1 due" is 206px
     against "Recall" at 107, which pushed New … to x=395 in a 375 viewport
     with nowrap. It wraps now rather than putting the primary action
     off-screen. */
  .wing-layout .browse-folder-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
  }
  .wing-layout .browse-folder-header { flex-wrap: wrap; }
}

/* The reader's timestamp, out of an inline style so a stylesheet can reach it. */
.wing-updated { font-size: 0.75rem; color: var(--wing-muted); }

/* ── The wing forms' small print ──────────────────────────────
   .form-label, .af-label-hint and the footer's kbd belong to every admin form
   in the app, so they are lifted only inside the two wing forms rather than
   changed underneath the Coding, Snippet and Notebook forms that share them.
   ------------------------------------------------------------ */
.awx-form .form-label,
.wing-form .form-label { color: var(--text-secondary); }

.awx-form .af-label-hint,
.wing-form .af-label-hint,
.awx-form .af-header-text p,
.wing-form .af-header-text p,
.awx-form .wing-rate-clear,
.wing-form .wing-rate-clear { color: var(--wing-muted); }

.awx-form .af-footer-hint kbd,
.wing-form .af-footer-hint kbd {
  font-size: 0.72rem;
  color: var(--text-secondary);
}