/*
 * css/layouts/library.css
 * 17 Oct 2026 v5
 *
 * v5 - D662-2 follow-up. The tiles go to one column when the text is
 *   large enough that a long name ("Conditioning", on the Plan's Mobility
 *   & Conditioning tile) would not fit half the width: Library on the
 *   Plan at text size 2 was 428px wide on a 412px phone
 *   (chromium-text-fit). Two columns at text 1 and 1.45, as before.
 *
 * 04 Oct 2026 v4
 *
 * v4 - D-5. The category page in the LOOK cards: the title with its kind
 *   tile, each session a row card on the page ground with its tile, its
 *   line in the secondary colour, and a chevron.
 *
 * v3 - LOOK-4. The Library page shows the categories as a 2x2 grid of
 *   tiles (a kind-colour tile, the name, a line under it); Log what I did
 *   is a row card. Shared .kind-tile and .look-label are in base/global.css.
 *
 * 04 Aug 2026 v2
 *
 * v2 — Same bug as v1, wider than first found. Checked every class
 *   library.js actually uses, not just the landing screen originally
 *   reported: "Start a session"'s category grid and its per-category
 *   session sub-screen had zero CSS too. "Log what I did" confirmed
 *   already styled (reuses .library-card/.library-grid from
 *   settings-library.css) — left untouched, not re-styled
 *   unnecessarily. Added .library-view (page padding — previously
 *   relying on base .view alone, which has no padding of its own),
 *   .library-sub-header, .library-category-*, .library-session-*.
 *
 *
 * New file. Real bug found via screenshot, not a design decision: the
 * landing screen's own file comment (library.js) describes "two large
 * cards," but .library-landing-grid/-card/-icon/-label/-sub had zero
 * CSS anywhere in the codebase — confirmed before writing this, not
 * assumed. Rendered as unstyled default text, not the intended cards.
 * Fixed now at Graeme's request, given Library was just promoted to a
 * first-class Home door and its plainness became more visible as a
 * result — a contained, single-screen fix, not the full aesthetics
 * audit still logged separately for everything else.
 */

.library-landing-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.library-landing-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-5);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.library-landing-card:hover,
.library-landing-card:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-bg-elevated);
}

.library-landing-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.library-landing-icon {
  font-size: var(--text-2xl);
  line-height: 1;
}

.library-landing-label {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text);
}

.library-landing-sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* ── Page container + sub-header (04 Aug 2026, same-day extension) ──────────
   Same root cause as the landing cards above, wider than first thought —
   confirmed by checking every class library.js actually uses, not just
   the one screen originally reported. "Log what I did" turned out to
   already be styled (it reuses .library-card/.library-grid from
   settings-library.css) — left untouched, not re-styled unnecessarily.
   "Start a session" and its category sub-screens had nothing at all. */

.library-view {
  padding: var(--space-6) var(--space-4) var(--space-8);
  max-width: 480px;
  margin: 0 auto;
}

.library-sub-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.library-sub-header .btn {
  padding-left: 0;
}

.library-sub-header h1 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0;
}

/* ── "Start a session" category grid ─────────────────────────────────── */

.library-category-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.library-category-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.library-category-card:hover,
.library-category-card:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-bg-elevated);
}

.library-category-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.library-category-icon {
  font-size: var(--text-xl);
  line-height: 1;
}

.library-category-label {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.library-category-sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* ── Category sub-screen (session options within a category) ────────────── */

.library-session-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.library-session-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.library-session-card:hover,
.library-session-card:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-bg-elevated);
}

.library-session-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.library-session-icon {
  font-size: var(--text-xl);
  line-height: 1;
  flex-shrink: 0;
}

.library-session-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.library-session-label {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.library-session-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}


/* LOOK-4 — Library, 04 Oct 2026 */
.library-view .library-category-grid {
  display: grid;
  /* v5. Two columns while a tile can be at least 5.5em wide; one when the
     text is large (5.5em grows with it). */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(5.5em, calc(50% - var(--space-3) / 2))), 1fr));
  gap: var(--space-3);
  margin-top: 0;
}
.library-view .library-category-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.library-view .library-category-card {
  gap: var(--space-2);
  min-height: 132px;
  height: 100%;
  padding: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: 20px;
}
.library-view .library-category-card:hover { background: var(--color-bg-hover); border-color: var(--color-border-light); }
.library-view .library-category-icon { font-size: inherit; margin-bottom: var(--space-1); }
.library-view .library-category-sub { line-height: 1.35; }
.library-landing-card--row {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  min-height: 72px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border-color: var(--color-border-light);
  border-radius: 20px;
}
.library-landing-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.library-landing-chev { flex: none; color: var(--color-text-secondary); }

/* D-5 — the category page in the LOOK cards, 04 Oct 2026 */
.library-sub-title { display: flex; align-items: center; gap: var(--space-3); }
.library-view .library-session-card {
  min-height: 64px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: 20px;
  padding: var(--space-3) var(--space-4);
}
.library-view .library-session-icon { font-size: inherit; }
.library-view .library-session-text { flex: 1; min-width: 0; }
.library-view .library-session-note { font-size: var(--text-sm); color: var(--color-text-secondary); }
.library-session-chev { display: inline-flex; color: var(--color-text-secondary); flex-shrink: 0; }