/* =========================================================================
   EMPIRIUM — MOBILE
   The desktop navy-and-porcelain system, rebuilt for a thumb.

   Not a port of the desktop CSS: that stylesheet assumes a 1400px three-column
   grid and hover states that do not exist on a touch screen. The tokens are
   shared so it reads as the same product; the layout, hit targets and density
   are designed for one hand.
   ========================================================================= */

/* The --font-* tokens below have always named these faces, but no @font-face
   ever shipped on mobile, so every screen silently fell back to Roboto. The
   woff2 files are copies of renderer/fonts/ (same variable files the desktop
   app uses); local-only, so the CSP 'self' rule still holds. */
@font-face{ font-family:'Inter'; font-style:normal; font-weight:100 900;
  font-display:swap; src:url('../fonts/Inter.woff2') format('woff2'); }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:300 700;
  font-display:swap; src:url('../fonts/SpaceGrotesk.woff2') format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:100 800;
  font-display:swap; src:url('../fonts/JetBrainsMono.woff2') format('woff2'); }

:root{
  --bg:#080A12;
  --bg-rgb:8,10,18;
  --panel:#0C1024;
  --panel-rgb:12,16,36;
  --card:#121A3A;
  --card-2:#171F45;
  --card-subtle:#070911;

  --line:rgba(147,220,240,.14);
  --line-soft:rgba(147,220,240,.07);
  --line-bright:rgba(147,220,240,.30);

  --text:#F5F3EC;
  --muted:#A8B4D6;
  --faint:#6672A0;

  --accent:#93DCF0;
  --accent-rgb:147,220,240;
  --accent-soft:#6BC3DE;
  --on-accent:#080A12;
  --good:#3FBE83;
  --good-rgb:63,190,131;
  --warn:#D99A3E;
  --warn-rgb:217,154,62;
  --danger:#D9647A;
  --danger-rgb:217,100,122;

  --r-sm:6px;
  --r-md:8px;
  --r-lg:12px;

  /* Thumb ergonomics: 48px is the Android accessibility minimum for a touch
     target, and every interactive element here meets or exceeds it. */
  --tap:48px;
  --tabbar-h:62px;

  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-display:'Space Grotesk','Inter',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'Roboto Mono',monospace;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;              /* never below 16px: iOS/Android zoom on focus otherwise */
  line-height:1.45;
  overscroll-behavior-y:none;  /* kill pull-to-refresh; it fights the scroll lists */
  height:100%;
}
body{ display:flex; flex-direction:column; }

/* ---------------- top bar ---------------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;
  background:rgba(var(--panel-rgb),.92);
  backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--line);
}
.topbar-title{
  font-family:var(--font-display);
  font-size:19px; font-weight:600; letter-spacing:.2px;
}

.sync-pill{
  display:inline-flex; align-items:center; gap:7px;
  min-height:34px; padding:0 11px;
  background:var(--card); color:var(--muted);
  border:1px solid var(--line); border-radius:var(--r-lg);
  font-size:12px; font-family:var(--font-mono); letter-spacing:.3px;
}
.sync-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--faint); flex:none;
}
.sync-dot.ok{ background:var(--good); box-shadow:0 0 4px rgba(var(--good-rgb),.3); }
.sync-dot.syncing{ background:var(--accent); animation:pulse 1s ease-in-out infinite; }
.sync-dot.error{ background:var(--danger); box-shadow:0 0 4px rgba(var(--danger-rgb),.3); }
.sync-dot.offline{ background:var(--warn); }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }

/* ---------------- screens ---------------- */
.screens{
  flex:1; min-height:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:18px 16px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 20px);
}
.screen{ display:none; }
.screen.is-active{ display:block; animation:fade .16s ease-out; }
@keyframes fade{ from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }

/* ---------------- immersive mode ----------------
   Routines is a full-bleed screen with its own chrome baked into the
   artwork (see mobile-routines.css) — the app topbar, tab bar and the
   .screens padding would all sit on top of it. mobile-app.js toggles this
   class in renderCurrent() whenever that tool is the open utility.
   Escape routes live inside the screen itself: the E emblem in the footer
   and the Android back button. */
body.is-immersive .topbar,
body.is-immersive .tabbar{ display:none; }
body.is-immersive .screens{ padding:0; }

/* ---------------- capture ---------------- */
.capture-box{
  background:var(--card-2);
  border:1px solid var(--line-bright);
  border-radius:var(--r-lg);
  padding:12px;
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.06), 0 12px 32px rgba(0,0,0,.45);
}
.capture-input{
  width:100%; resize:none;
  background:transparent; border:0; outline:none;
  color:var(--text); font-family:var(--font); font-size:17px; line-height:1.5;
  padding:4px 2px;
}
.capture-input::placeholder{ color:var(--faint); }
.capture-actions{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:10px; padding-top:10px; border-top:1px solid var(--line-soft);
}
.capture-hint{ font-size:12px; color:var(--faint); font-family:var(--font-mono); }

/* ---------------- buttons ---------------- */
.btn{
  min-height:var(--tap); padding:0 18px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--card); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r-md);
  font-family:var(--font); font-size:15px; font-weight:600;
  cursor:pointer; transition:transform .08s ease, background .12s ease;
}
.btn:active{ transform:scale(.97); }
.btn-primary{
  background:var(--accent); color:var(--on-accent); border-color:var(--accent);
  box-shadow:0 0 7px rgba(var(--accent-rgb),.15);
}
.btn-primary:disabled{ opacity:.4; box-shadow:none; }
.btn-ghost{ background:transparent; }
.btn-danger{ color:var(--danger); border-color:rgba(var(--danger-rgb),.35); }
.btn-sm{ min-height:38px; padding:0 12px; font-size:13px; }
.btn-block{ width:100%; }
.btn-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

/* ---------------- section headings ---------------- */
.section-head{
  display:flex; align-items:center; justify-content:space-between;
  margin:22px 2px 10px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--faint);
}
.section-head strong{ color:var(--accent); font-weight:600; }

/* ---------------- lists ---------------- */
.list{ display:flex; flex-direction:column; gap:12px; }

.row{
  display:flex; align-items:flex-start; gap:11px;
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:12px;
}
.row.done{ opacity:.5; }
.row-main{ flex:1; min-width:0; }
.row-title{
  font-size:15px; line-height:1.42; word-break:break-word;
  /* preserve manual line breaks typed during capture */
  white-space:pre-wrap;
}
.row.done .row-title{ text-decoration:line-through; }

/* "N/A" tick for a briefing section that did not happen today */
.na-row{
  display:flex; align-items:flex-start; gap:11px;
  padding:11px 12px; margin-bottom:12px;
  border-radius:var(--r-lg);
  border:1px solid rgba(var(--accent-rgb),.18);
  background:rgba(var(--accent-rgb),.05);
}
.na-row.is-na{ border-color:rgba(var(--accent-rgb),.4); background:rgba(var(--accent-rgb),.1); }
.na-row .row-title{ font-size:14px; }
.row-sub{ margin-top:4px; font-size:12px; line-height:1.45; color:var(--faint); }
.row-meta{
  margin-top:5px; display:flex; flex-wrap:wrap; gap:6px;
  font-size:11px; color:var(--faint); font-family:var(--font-mono);
}
.chip{
  padding:2px 7px; border-radius:var(--r-sm);
  background:var(--card-subtle); border:1px solid var(--line-soft);
  color:var(--muted);
}
.chip.accent{ color:var(--accent); border-color:rgba(var(--accent-rgb),.3); }

/* ---------------- Utilities tile grid ---------------- */
/* Two-column icon tiles replacing the old plain row list — each tile carries
   its own accent via the --tile-c/--tile-c-rgb custom props set inline per
   tile (see renderUtilitiesMenu in mobile-app.js), same pattern app.css
   already uses for --accent/--accent-rgb. */
.util-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.util-tile{
  position:relative; display:flex; align-items:flex-start; gap:9px;
  padding:10px;
  text-align:left; cursor:pointer;
  background:linear-gradient(160deg, rgba(var(--tile-c-rgb),.13), var(--card) 65%);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  color:var(--text); font-family:var(--font);
}
.util-tile:active{ border-color:rgba(var(--tile-c-rgb),.5); background:linear-gradient(160deg, rgba(var(--tile-c-rgb),.2), var(--card) 65%); }
.util-tile-icon{
  position:relative;
  width:30px; height:30px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm);
  background:rgba(var(--tile-c-rgb),.16);
  color:var(--tile-c);
}
.util-tile-icon svg{ width:16px; height:16px; }
.util-tile-badge{
  position:absolute; top:-6px; right:-6px;
  min-width:16px; height:16px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px; background:var(--good); color:#06130c;
  font-family:var(--font-mono); font-size:9px; font-weight:700;
  box-shadow:0 0 0 2px var(--card);
}
.util-tile-body{ flex:1; min-width:0; }
.util-tile-title-row{ display:flex; align-items:center; justify-content:space-between; gap:4px; }
.util-tile-title{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--font-display); font-size:13.5px; font-weight:600; line-height:1.25;
}
.util-tile-desc{
  margin-top:2px; font-size:10.5px; line-height:1.32; color:var(--faint);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.util-tile-chevron{
  flex:none; width:14px; height:14px; color:var(--muted);
}
.util-tile-chevron svg{ width:100%; height:100%; }

/* Idea Bank category picker (capture box) + collapsible group headers reuse
   .ps-head/.ps-fold/.ps-title/.ps-count from the projects & sprints folds
   below — only the chip row and color swatch are new here. */
.idea-cat-picker{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.idea-catchip{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.idea-dot{ width:8px; height:8px; border-radius:50%; flex:none; }

/* Checkbox: a real 26px box inside a 48px tap area, so it is hittable at a
   glance without making the list look chunky. */
.check{
  flex:none; width:var(--tap); height:var(--tap);
  margin:-11px 0 -11px -11px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer;
}
.check i{
  width:26px; height:26px; display:block;
  border:2px solid var(--line-bright); border-radius:var(--r-sm);
  position:relative; transition:all .12s ease;
}
.check[aria-checked="true"] i{
  background:var(--accent); border-color:var(--accent);
  box-shadow:0 0 12px rgba(var(--accent-rgb),.4);
}
.check[aria-checked="true"] i::after{
  content:''; position:absolute; left:8px; top:3px;
  width:6px; height:12px;
  border:solid var(--on-accent); border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg);
}

.row-actions{ flex:none; display:flex; gap:2px; }
.icon-btn{
  width:40px; height:40px; margin:-4px -4px -4px 0;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; color:var(--faint); cursor:pointer;
  border-radius:var(--r-md);
}
.icon-btn:active{ background:var(--card-2); color:var(--text); }
.icon-btn svg{ width:19px; height:19px; }
.icon-btn.danger:active{ color:var(--danger); }

/* ---------------- empty state ---------------- */
.empty{
  text-align:center; padding:40px 20px; color:var(--faint);
}
.empty-kicker{
  display:block; font-family:var(--font-mono); font-size:10px;
  letter-spacing:1.6px; text-transform:uppercase;
  color:rgba(var(--accent-rgb),.5); margin-bottom:10px;
}
.empty p{ margin:0; font-size:14px; }

/* ---------------- forms (sync screen) ---------------- */
.field{ margin-bottom:14px; }
.field label{
  display:block; margin-bottom:6px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:1px;
  text-transform:uppercase; color:var(--muted);
}
.field input{
  width:100%; min-height:var(--tap); padding:0 12px;
  background:var(--card-subtle); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r-md);
  font-family:var(--font-mono); font-size:14px;
}
.field input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 1px rgba(var(--accent-rgb),.3); }
.field-hint{ margin-top:6px; font-size:12px; color:var(--faint); line-height:1.45; }
.pair-copy{ margin:0 0 12px; color:var(--muted); font-size:13px; line-height:1.45; }

.pair-scan{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center;
  padding:18px;
  background:rgba(5,7,13,.88); backdrop-filter:blur(10px);
}
.pair-scan-panel{
  position:relative; width:min(100%,430px);
  background:var(--panel); border:1px solid var(--line-bright);
  border-radius:var(--r-lg); padding:12px;
  box-shadow:0 18px 54px rgba(0,0,0,.72);
}
.pair-scan-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.4px;
  color:var(--accent);
}
.pair-scan video{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  display:block; background:#000; border:1px solid var(--line-soft);
  border-radius:var(--r-md);
}
.pair-scan-reticle{
  position:absolute; inset:74px 54px 70px;
  border:1px solid rgba(var(--accent-rgb),.8);
  box-shadow:0 0 0 999px rgba(0,0,0,.18), 0 0 10px rgba(var(--accent-rgb),.14) inset;
  pointer-events:none;
}
.pair-scan p{
  margin:10px 2px 0; color:var(--muted); font-size:13px; line-height:1.4;
}

.card{
  background:var(--card); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); padding:14px; margin-bottom:20px;
}
.card h3{
  margin:0 0 10px; font-family:var(--font-display);
  font-size:15px; font-weight:600;
}
.kv{
  display:flex; justify-content:space-between; gap:12px;
  padding:7px 0; border-bottom:1px solid var(--line-soft);
  font-size:13px;
}
.kv:last-child{ border-bottom:0; }
.kv span{ color:var(--muted); }
.kv strong{ font-family:var(--font-mono); font-weight:500; font-size:12px; text-align:right; word-break:break-all; }
.kv strong.ok{ color:var(--good); }
.kv strong.bad{ color:var(--danger); }

/* ---------------- tab bar ---------------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex;
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(var(--panel-rgb),.96);
  backdrop-filter:blur(14px) saturate(120%);
  border-top:1px solid var(--line);
}
.tab{
  flex:1; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:none; border:0; cursor:pointer;
  color:var(--faint); font-family:var(--font); font-size:10.5px; font-weight:600;
  letter-spacing:.2px;
  transition:color .12s ease;
}
.tab svg{ width:21px; height:21px; }
.tab.is-active{ color:var(--accent); }
.tab.is-active::before{
  content:''; position:absolute; top:0; left:22%; right:22%; height:2px;
  background:var(--accent); box-shadow:0 0 5px rgba(var(--accent-rgb),.3);
}
.tab-badge{
  position:absolute; top:6px; left:calc(50% + 8px);
  min-width:17px; height:17px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--on-accent);
  border-radius:9px;
  font-family:var(--font-mono); font-size:10px; font-weight:700; font-style:normal;
}

/* ---------------- toast ---------------- */
.toast{
  position:fixed; left:50%; transform:translateX(-50%) translateY(20px);
  bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px);
  z-index:60;
  max-width:88vw; padding:11px 16px;
  background:var(--card-2); color:var(--text);
  border:1px solid var(--line-bright); border-radius:var(--r-lg);
  box-shadow:0 12px 32px rgba(0,0,0,.6);
  font-size:14px;
  opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.error{ border-color:rgba(var(--danger-rgb),.5); }

/* ---------------- segmented control ---------------- */
.segmented{
  display:flex; gap:2px; padding:2px; margin-bottom:14px;
  background:var(--card-subtle); border:1px solid var(--line-soft);
  border-radius:var(--r-md);
}
.seg{
  flex:1; min-height:38px;
  background:none; border:0; border-radius:var(--r-sm);
  color:var(--muted); font-family:var(--font); font-size:13px; font-weight:600;
  cursor:pointer;
}
.seg.is-active{ background:var(--card-2); color:var(--text); box-shadow:var(--sh-1); }

/* ---------------- briefing ---------------- */
.mode-switch{
  display:flex; gap:2px; padding:2px; margin-bottom:14px;
  background:var(--card-subtle); border:1px solid var(--line-soft);
  border-radius:var(--r-md);
}
.mode-btn{
  flex:1; min-height:42px;
  background:none; border:0; border-radius:var(--r-sm);
  color:var(--muted); font-family:var(--font-display); font-size:14px; font-weight:600;
  cursor:pointer;
}
.mode-btn.is-active{
  background:var(--accent); color:var(--on-accent);
  box-shadow:0 0 14px rgba(var(--accent-rgb),.25);
}

.stepper{ display:flex; gap:6px; margin-bottom:16px; }
.step-dot{
  flex:1; height:4px; padding:0;
  background:var(--card-subtle); border:1px solid var(--line-soft);
  border-radius:2px; cursor:pointer;
  /* the visual bar is 4px but the tap area must not be */
  position:relative;
}
.step-dot::after{ content:''; position:absolute; inset:-16px 0; }
.step-dot.is-done{ background:rgba(var(--accent-rgb),.4); border-color:transparent; }
.step-dot.is-active{ background:var(--accent); border-color:transparent; box-shadow:0 0 10px rgba(var(--accent-rgb),.55); }

.step-head{ margin-bottom:16px; }
.step-count{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.3px;
  text-transform:uppercase; color:var(--faint);
}
.step-head h2{
  margin:5px 0 4px; font-family:var(--font-display);
  font-size:21px; font-weight:600; line-height:1.25;
}
.step-head p{ margin:0; font-size:13.5px; color:var(--muted); line-height:1.45; }

.step-body{ min-height:120px; }

.suggestion{
  background:var(--card-2); border:1px solid var(--line-bright);
  border-left:3px solid var(--accent);
  border-radius:var(--r-lg); padding:16px;
  font-size:16px; line-height:1.65; white-space:pre-wrap;
}

/* Auto-Suggestion step head + reference images — the Briefing flow's reading
   card, sourced from the same eoAutosuggestions library document desktop's
   Today ritual reads (see mobile-briefing.js suggestionHtml()). */
.suggestion-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-bottom:8px;
}
.suggestion-head h3{
  margin:0; font-family:var(--font-display); font-size:17px; font-weight:600;
  line-height:1.3; color:var(--text);
}
.suggestion-source{
  flex:none; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.8px;
  text-transform:uppercase; color:var(--faint);
}
.suggestion-images{
  display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;
}
.suggestion-images img{
  width:100px; height:100px; object-fit:cover; border-radius:var(--r-md);
  border:1px solid var(--line-soft);
}

.scale{ margin-bottom:20px; }
.scale-head{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:8px; font-size:14px;
}
.scale-head b{ font-family:var(--font-mono); font-size:15px; color:var(--accent); }
.scale-input{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:3px;
  background:var(--card-subtle); border:1px solid var(--line-soft);
  outline:none;
}
/* A 28px thumb: comfortably draggable without looking oversized. */
.scale-input::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:28px; height:28px; border-radius:50%;
  background:var(--accent); border:3px solid var(--bg);
  box-shadow:0 0 12px rgba(var(--accent-rgb),.5); cursor:pointer;
}
.scale-input::-moz-range-thumb{
  width:28px; height:28px; border-radius:50%;
  background:var(--accent); border:3px solid var(--bg);
  box-shadow:0 0 12px rgba(var(--accent-rgb),.5); cursor:pointer;
}
.scale-ends{
  display:flex; justify-content:space-between; margin-top:7px;
  font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.6px; color:var(--faint);
}

.bfield{ margin-bottom:18px; }
.bfield label{
  display:block; margin-bottom:7px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.1px;
  text-transform:uppercase; color:var(--muted);
}
.bfield textarea, .top3, .bfield input[type="number"]{
  width:100%; padding:11px;
  background:var(--card-subtle); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r-md);
  font-family:var(--font); font-size:16px; line-height:1.5;
  resize:vertical;
}
.top3{ margin-bottom:8px; min-height:var(--tap); }
.bfield input[type="number"]{ min-height:var(--tap); }
.bfield textarea:focus, .top3:focus, .bfield input[type="number"]:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.28);
}

.summary{
  background:var(--card); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); overflow:hidden; margin-bottom:16px;
}
.summary-row{
  padding:11px 13px; border-bottom:1px solid var(--line-soft);
}
.summary-row:last-child{ border-bottom:0; }
.summary-row span{
  display:block; margin-bottom:4px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:1.1px;
  text-transform:uppercase; color:var(--faint);
}
.summary-row strong{ font-weight:500; font-size:14.5px; line-height:1.45; white-space:pre-wrap; }
.summary-row em{ color:var(--faint); font-style:normal; }

.step-nav{
  display:flex; gap:10px; margin-top:24px;
  padding-top:16px; border-top:1px solid var(--line-soft);
}
.step-nav .btn{ flex:1; }
.step-nav .btn:disabled{ opacity:.35; }

/* ---------------- projects & sprints ----------------
   A card per project/sprint: a tappable header row that folds, a meta strip
   of chips and progress, and the actions themselves when open. The header is
   one full-width button rather than a small chevron — on a phone the whole
   row should be the target, not a 20px arrow. */
.ps-card{
  background:var(--card); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); margin-bottom:10px; overflow:hidden;
}
.ps-card.is-current{ border-color:rgba(var(--accent-rgb),.34); }
.ps-card.is-done{ opacity:.62; }

.ps-head{
  width:100%; min-height:var(--tap);
  display:flex; align-items:center; gap:10px;
  padding:11px 12px;
  background:none; border:0; color:var(--text);
  font-family:var(--font); font-size:15px; font-weight:600; text-align:left;
  cursor:pointer;
}
.ps-head:active{ background:var(--card-2); }
.ps-fold{
  flex:none; display:flex; color:var(--faint);
  transform:rotate(-90deg); transition:transform .14s ease;
}
.ps-fold.is-open{ transform:none; }
.ps-fold svg{ width:17px; height:17px; }
.ps-title{ flex:1; min-width:0; word-break:break-word; }
.ps-count{
  flex:none; font-family:var(--font-mono); font-size:11px;
  color:var(--faint); letter-spacing:.5px;
}

.ps-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  padding:0 12px 11px 39px;   /* 39px lines meta up under the title, past the chevron */
  font-size:11px; font-family:var(--font-mono); color:var(--faint);
}

/* Status is a control here, not a label — tapping it cycles the status, which
   is the one project edit worth making one-handed. */
.badge{
  padding:2px 8px; border-radius:var(--r-sm);
  border:1px solid var(--line-soft); background:var(--card-subtle);
  letter-spacing:.4px;
}
.badge-todo{ color:var(--muted); }
.badge-doing{ color:var(--warn); border-color:rgba(var(--warn-rgb),.32); }
.badge-done{ color:var(--good); border-color:rgba(var(--good-rgb),.32); }
.badge-btn{
  padding:0; margin:0; background:none; border:0; cursor:pointer;
  font-family:var(--font-mono); font-size:11px;
}
.badge-btn:active .badge{ background:var(--card-2); }

.chip.current{ color:var(--good); border-color:rgba(var(--good-rgb),.34); }
.chip-btn{
  font-family:var(--font-mono); font-size:11px; cursor:pointer;
  color:var(--accent); border-color:rgba(var(--accent-rgb),.3);
}

.ps-prog{ display:flex; align-items:center; gap:7px; margin-left:auto; }
.prog{
  width:56px; height:3px; border-radius:2px;
  background:var(--line-soft); overflow:hidden;
}
.prog-bar{ display:block; height:100%; background:var(--accent); }
.prog-num{ font-size:10.5px; letter-spacing:.5px; }
.prog-none{ opacity:.55; }

.ps-kids{
  padding:2px 12px 12px;
  border-top:1px solid var(--line-soft);
}
.ps-kids .list{ margin-top:10px; }
.ps-kids .row{ background:var(--card-subtle); }
.ps-goal{
  margin:10px 0 0; font-size:13px; line-height:1.5;
  color:var(--muted); white-space:pre-wrap;
}
.ps-none{ margin:12px 0 0; font-size:13px; color:var(--faint); }

.ps-sub{
  display:flex; justify-content:space-between; align-items:center;
  margin:16px 2px 0;
  font-family:var(--font-mono); font-size:10px; letter-spacing:1.3px;
  text-transform:uppercase; color:var(--faint);
}
.ps-sub em{ font-style:normal; color:var(--accent); }

/* Quick-add: the reason to open a project on a phone at all. */
.ps-add{ display:flex; gap:8px; margin-top:12px; }
.ps-add-input{
  flex:1; min-width:0; min-height:44px; padding:0 12px;
  background:var(--card-subtle); color:var(--text);
  border:1px solid var(--line-soft); border-radius:var(--r-md);
  font-family:var(--font); font-size:16px;   /* 16px or Android zooms on focus */
}
.ps-add-input::placeholder{ color:var(--faint); }
.ps-add-input:focus{ outline:none; border-color:var(--line-bright); }
.ps-add-btn{
  flex:none; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:var(--card-2); color:var(--accent);
  border:1px solid var(--line-soft); border-radius:var(--r-md);
  cursor:pointer;
}
.ps-add-btn:active{ background:var(--accent); color:var(--on-accent); }
.ps-add-btn svg{ width:20px; height:20px; }

/* Respect the OS "reduce motion" setting. */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}