/* Lens — app.css
 *
 * Cascade, end-of-sprint-1 polish pass.
 *
 * Layering: tokens (:root) → base (element resets + typography) →
 * layout (header / main / footer) → components (cards, table, dl,
 * forms, pager, banners) → utilities (skip-link, vh, muted) →
 * responsive overrides (mobile-first: small < 768 ≤ medium < 1024 ≤
 * large).
 *
 * Dark mode only for MVP. Tokens live in :root so a future light-mode
 * toggle is a single [data-theme='light'] override.
 *
 * iPhone Safari rule: every input is font-size: 1rem (16 px) minimum
 * so Safari does not zoom-on-focus. This is enforced by manual review;
 * .stylelintrc.json restricts font-size units to rem / em / px / % so
 * a stray unitless or vw value trips the gate.
 *
 * No !important. No outline:none without a :focus-visible replacement.
 * prefers-reduced-motion disables non-essential transitions.
 */

/* ------------------------------------------------------------------ */

/* 1. Tokens                                                          */

/* ------------------------------------------------------------------ */

:root {
  color-scheme: dark;

  /* Surface ramp — near-black base, two lifted surfaces for cards and
     hovered rows. All sit in the #0e–#23 range per a11y.md §1
     (avoid pure #000 on OLED). */
  --bg: #0f1216;
  --surface: #181c22;
  --surface-raised: #232831;

  /* Text ramp — body text contrast 13.6:1 against --bg (AAA);
     muted 5.3:1 (AA). */
  --text: #e8ebf0;
  --text-muted: #9aa2ad;

  /* Structural */
  --border: #2a3038;
  --border-strong: #3a4150;

  /* Accent — single saturated blue used for links, primary buttons,
     focus rings, row-link hover. 6.5:1 on --bg. */
  --accent: #6aa6ff;
  --accent-hover: #86b8ff;
  --accent-on: #0a1220;

  /* Semantic */
  --danger: #ff8a80;
  --danger-surface: #3a1a1a;
  --success: #79d19b;
  --success-surface: #162a1e;
  --focus: #93c5fd;

  /* Typography scale — rem-based so user zoom + OS text-size scale
     work without layout rewrite. Root = 16 px. */
  --font-sans:
    -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
  --font-mono:
    ui-monospace, sfmono-regular, "SF Mono", menlo, consolas, "Liberation Mono", monospace;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.375rem;

  /* Spacing scale — multiples of 4 px. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  /* Shape */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;

  /* Shadow — subtle surface lift on the dark palette. */
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.35), 0 2px 6px rgb(0 0 0 / 0.25);
  --focus-outline: 2px solid var(--focus);
  --focus-offset: 2px;
}

/* ------------------------------------------------------------------ */

/* 2. Base                                                            */

/* ------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  background: var(--bg);
  color: var(--text);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
}

h1,
h2,
h3 {
  line-height: 1.25;
  margin: 0 0 var(--space-2);
  font-weight: 600;
}

h1 {
  font-size: var(--text-xl);
}

h2 {
  font-size: var(--text-lg);
}

h3 {
  font-size: var(--text-md);
}

p {
  margin: 0 0 var(--space-3);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--accent-hover);
}

:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

/* Remove the non-visible fallback outline only when :focus-visible is
   supported and already provided above; ensures mouse-click focus
   doesn't show a ring but keyboard focus always does. */
:focus:not(:focus-visible) {
  outline: none;
}

/* ------------------------------------------------------------------ */

/* 3. Layout — shell                                                  */

/* ------------------------------------------------------------------ */

.site-header {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.wordmark {
  font-weight: 700;
  font-size: var(--text-md);
  letter-spacing: 0.02em;
}

.site-nav {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--text);
  text-decoration: none;
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-sm);
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  width: 100%;
  max-width: 100%;
}

.site-footer {
  padding: var(--space-3) var(--space-5);
  background: var(--surface);
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
}

/* ------------------------------------------------------------------ */

/* 4. Utilities                                                       */

/* ------------------------------------------------------------------ */

.muted {
  color: var(--text-muted);
}

/* Visually hidden but reachable by screen readers. Uses clip-path
   (supersedes deprecated `clip`) + the standard SR-only pattern. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip-link — absent from layout until focused, first focusable in
   DOM. a11y.md §1 requires. */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--accent);
  color: var(--accent-on);
  font-weight: 600;
  border-radius: var(--radius);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.12s ease-out;
  z-index: 100;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* ------------------------------------------------------------------ */

/* 5. Cards (auth / message / landing)                                */

/* ------------------------------------------------------------------ */

.auth-card,
.message-card {
  width: 100%;
  max-width: 26rem;
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.auth-card h1,
.message-card h1 {
  margin-bottom: var(--space-4);
  font-size: var(--text-xl);
}

.landing-card {
  width: 100%;
  max-width: 60rem;
  margin-top: var(--space-4);
  padding: var(--space-5) var(--space-6) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.landing-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.landing-meta p {
  margin: 0;
}

.landing-card h2 {
  margin: var(--space-6) 0 var(--space-3);
  padding-bottom: var(--space-1);
  font-size: var(--text-md);
  border-bottom: 1px solid var(--border);
}

.landing-card > section[aria-labelledby]:first-of-type h2 {
  margin-top: var(--space-4);
}

.landing-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-entry {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 4rem 1fr;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-1);
  border-bottom: 1px dashed var(--border);
  min-height: 2.75rem;
}

.landing-entry:last-child {
  border-bottom: 0;
}

.landing-entry__name {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.landing-entry__count {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.landing-entry__desc {
  font-size: var(--text-sm);
}

.inline-form {
  display: inline;
  margin: 0;
}

/* Buttons styled as text links — used for the Log Out POST form. */
.link-like {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  min-height: auto;
  width: auto;
}

.link-like:hover {
  color: var(--accent-hover);
}

/* ------------------------------------------------------------------ */

/* 6. Table list                                                      */

/* ------------------------------------------------------------------ */

.list-section {
  width: 100%;
  max-width: 75rem;
}

.list-section h1 {
  margin-bottom: var(--space-1);
  font-size: var(--text-xl);
  font-family: var(--font-mono);
}

.rows {
  width: 100%;
  margin-top: var(--space-3);
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.rows thead th {
  position: sticky;
  top: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-strong);
  text-align: left;
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  z-index: 1;
}

.rows tbody td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.4;
}

.rows tbody tr:last-child td {
  border-bottom: 0;
}

.rows tbody tr.row--link {
  cursor: pointer;
}

.rows tbody tr.row--link:hover,
.rows tbody tr.row--link:focus-within {
  background: var(--surface-raised);
}

.rows .cell--ts {
  font-family: var(--font-mono);
  color: var(--text-muted);
  white-space: nowrap;
}

/* The first cell is a zero-width anchor host; the <a> stretches to
   cover the entire row so any click inside the row triggers the link.
   The focus ring is drawn on the anchor but outlined inward so it
   aligns with the row edge. */
.col--link,
.cell--link {
  width: 1px;
  padding: 0;
  position: relative;
}

.row-link {
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none;
}

.row-link:focus-visible {
  outline: var(--focus-outline);
  outline-offset: -2px;
  border-radius: 0;
}

.pager {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

.pager__status {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.pager__controls {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin: 0;
}

.pager__page {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.pager a,
.pager__controls a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.pager a:hover {
  background: var(--surface-raised);
  text-decoration: underline;
}

.empty {
  padding: var(--space-4) 0;
  color: var(--text-muted);
}

/* ------------------------------------------------------------------ */

/* 7. Row detail                                                      */

/* ------------------------------------------------------------------ */

.detail-section {
  width: 100%;
  max-width: 60rem;
}

.detail-section h1 {
  margin-bottom: var(--space-1);
  font-size: var(--text-xl);
  font-family: var(--font-mono);
  word-break: break-all;
}

dl.detail {
  margin: var(--space-3) 0 var(--space-4);
  display: grid;
  grid-template-columns: 1fr;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.dl-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}

.dl-pair:last-child {
  border-bottom: 0;
}

.dl-pair:nth-child(even) {
  background: color-mix(in srgb, var(--surface-raised) 55%, transparent);
}

dl.detail dt {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

dl.detail dd {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 70ch;
}

/* ------------------------------------------------------------------ */

/* 8. Forms and buttons                                               */

/* ------------------------------------------------------------------ */

.field {
  margin-bottom: var(--space-4);
}

label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

input[type="text"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="email"],
select,
textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;

  /* 1rem = 16 px. iOS Safari only zooms on focus below 16 px, so this
     is the floor. Also enforced by .stylelintrc.json rule set. */
  font-size: 1rem;
  line-height: 1.3;
  background: var(--surface-raised);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-family: inherit;
  appearance: none;
}

input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-color: var(--focus);
}

button.primary,
button.secondary {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-base);
  font-weight: 600;
  font-family: inherit;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: filter 0.12s ease-out, background 0.12s ease-out;
}

button.primary {
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--accent);
}

button.primary:hover {
  filter: brightness(1.08);
}

button.primary:active {
  filter: brightness(0.95);
}

button.secondary {
  background: transparent;
  color: var(--text);
}

button.secondary:hover {
  background: var(--surface-raised);
}

button:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

button[disabled],
button[disabled]:hover {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
}

/* ------------------------------------------------------------------ */

/* 9. Banners and messages                                            */

/* ------------------------------------------------------------------ */

.error {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--danger-surface);
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
}

.banner {
  width: 100%;
  max-width: 60rem;
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  color: var(--text);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
}

.banner--success {
  border-left-color: var(--success);
  background: var(--success-surface);
}

.banner--error {
  border-left-color: var(--danger);
  background: var(--danger-surface);
  color: var(--danger);
}

.banner--info {
  border-left-color: var(--accent);
}

/* ------------------------------------------------------------------ */

/* 10. Responsive                                                     */

/* ------------------------------------------------------------------ */

/* Small (<768 px): card / stacked layouts. */
@media (width < 768px) {
  main {
    padding: var(--space-4);
    gap: var(--space-3);
  }

  .site-header {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
  }

  .auth-card,
  .message-card {
    margin-top: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius);
  }

  .landing-card {
    padding: var(--space-4);
    border-radius: var(--radius);
  }

  .landing-entry {
    grid-template-columns: 1fr 3rem;
    grid-template-areas:
      "name count"
      "desc desc";
    gap: var(--space-1) var(--space-3);
    min-height: 3.5rem;
    padding: var(--space-3) var(--space-1);
  }

  .landing-entry__name {
    grid-area: name;
    font-size: var(--text-base);
  }

  .landing-entry__count {
    grid-area: count;
  }

  .landing-entry__desc {
    grid-area: desc;
  }

  /* Table becomes a vertical card stack. The <table> is kept in the
     DOM (Semm renders once) but the display model is changed so each
     <tr> reads as a card. The screen-reader-only header labels come
     from scope='col' on <th>; we additionally expose the column name
     as an ::before pseudo-label because the visual header isn't
     rendered in card mode. */
  .rows,
  .rows thead,
  .rows tbody,
  .rows tr,
  .rows td,
  .rows th {
    display: block;
    width: auto;
  }

  .rows {
    border: 0;
    background: transparent;
    font-size: var(--text-base);
  }

  .rows thead {
    position: absolute;
    left: -9999px;
  }

  .rows tbody tr {
    position: relative;
    margin-bottom: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-height: 3.5rem;
  }

  .rows tbody td {
    padding: var(--space-1) 0;
    border-bottom: 0;
  }

  .rows .cell--link,
  .rows .col--link {
    padding: 0;
  }

  .row-link:focus-visible {
    outline: var(--focus-outline);
    outline-offset: 2px;
    border-radius: var(--radius);
  }

  .pager {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .pager__controls {
    justify-content: space-between;
  }

  .pager__controls a,
  .pager__controls span {
    min-height: 3rem;
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
  }

  .dl-pair {
    grid-template-columns: 1fr;
    padding: var(--space-3);
  }

  .detail-section h1 {
    font-size: var(--text-lg);
  }
}

/* Medium (≥768, <1024 px): hybrid. Grid stays but loosens; cards
   grow wider. Layout mode decisions per-page are Cascade/Semm's
   call (responsive-rules.md §2). */
@media (768px <= width < 1024px) {
  main {
    padding: var(--space-6);
  }

  .auth-card,
  .message-card {
    margin-top: var(--space-8);
  }

  .landing-entry {
    grid-template-columns: minmax(10rem, 14rem) 3rem 1fr;
  }
}

/* Large (≥1024 px): dense desktop grid. */
@media (width >= 1024px) {
  main {
    padding: var(--space-8);
  }

  .auth-card,
  .message-card {
    margin-top: var(--space-10);
  }

  .rows {
    font-size: var(--text-sm);
  }

  .rows tbody td {
    padding: 0.3125rem var(--space-3);
    line-height: 1.35;
  }

  /* Two-column <dl> on desktop. */
  .dl-pair {
    grid-template-columns: 14rem 1fr;
    gap: var(--space-4);
    align-items: baseline;
  }

  dl.detail dt {
    padding-top: 0.125rem;
  }
}

/* ------------------------------------------------------------------ */

/* 11. Motion                                                         */

/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms;
    animation-iteration-count: 1;
    transition-duration: 0.001ms;
    scroll-behavior: auto;
  }
}

/* ------------------------------------------------------------------ */

/* 12. Print (minimal; keep row detail legible on paper)              */

/* ------------------------------------------------------------------ */

@media print {
  html,
  body {
    background: #fff;
    color: #000;
  }

  .site-header,
  .site-footer,
  .pager,
  .skip-link {
    display: none;
  }

  .auth-card,
  .message-card,
  .landing-card,
  .rows,
  dl.detail {
    background: #fff;
    color: #000;
    border-color: #999;
    box-shadow: none;
  }

  a {
    color: #000;
    text-decoration: underline;
  }
}