/* ============================================================
   Project Hub — app stylesheet.
   Tokens and components are the approved mockup v3 stylesheet, copied
   verbatim; the "app additions" block at the end holds only what the real
   app needs and the static mockup did not (a JS-free legend, the YAML-error
   card, the optional NEXT box).

   AMENDED 2026-09-12 (P4, approved by Csilla): five token values moved so
   every pair that carries words clears WCAG 4.5:1 — --text-3 in both themes
   and the three health colours in light. Hue and saturation are unchanged;
   only lightness moved, by the smallest step that clears the threshold. Each
   line carries its old value and its new ratio. tools/contrast_check.py is
   what keeps it true.
   Linear-style token system. 4px spacing base.
   Type scale: 12 / 13 / 14 / 16 / 18 / 22
   Hairline 1px borders, no drop shadows. Radii 6 / 8 / 12 / pill.
   One accent (#5e6ad2) reserved for focus + primary CTA.
   Exactly three semantic colours: health green / amber / red.
   Stage is a pill, never a colour band.
   Owner is a 3px left border in the owner's avatar colour — that is a
   PERSON colour, deliberately not part of the health ramp.
   The "Idea dump" orange is a SURFACE/identity tint, not a status colour.
   ============================================================ */

/* ---------- tokens: light (default) ---------- */
:root{
  --bg:            #ffffff;
  --bg-sunken:     #fafafa;
  --bg-raised:     #ffffff;
  --bg-subtle:     #f4f4f5;
  --bg-hover:      #f4f4f5;
  --border:        #e4e4e7;
  --border-strong: #d4d4d8;
  --text:          #18181b;
  --text-2:        #52525b;
  --text-3:        #75757e;   /* was #8b8b93 (3.38:1) — now 4.56:1 on --bg */
  --text-4:        #b0b0b8;
  --accent:        #5e6ad2;
  --accent-hover:  #4f5bc4;
  --accent-fg:     #ffffff;
  --accent-soft:   #eef0fb;
  --green:         #1b7d48;   /* was #1f9254 (3.53:1) — now 4.59:1 on --green-soft */
  --amber:         #9b6206;   /* was #c07908 (3.16:1) — now 4.56:1 on --amber-soft */
  --red:           #ca342f;   /* was #d03b36 (4.20:1) — now 4.53:1 on --red-soft */
  --green-soft:    #e8f5ed;
  --amber-soft:    #fbf2e0;
  --red-soft:      #fbeceb;
  --hill-line:     #c9c9d1;
  /* Ideas identity — the SAME in light and dark, on purpose: the idea box
     is a surface tint, not a status, and it must read as "ideas" wherever
     it appears (wall box, Ideas header, toggle badge).
     Deep base (round 3) carries white text at 11.9:1, so no darkening is
     needed here. Outline kept at #ff5b03 rather than the redder #ff4a03:
     against this base it separates better (3.82:1 vs 3.53:1). */
  --idea-bg:       #5a2a00;
  --idea-outline:  #ff5b03;
  --idea-fg:       #ffffff;
  --idea-fg-dim:   #fff0e6;   /* 10.7:1 on --idea-bg */
  --shadow-none:   none;
}
/* ---------- tokens: dark (system preference) ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:            #0d0e11;
    --bg-sunken:     #0a0b0d;
    --bg-raised:     #141519;
    --bg-subtle:     #1b1d22;
    --bg-hover:      #1f2128;
    --border:        #26282f;
    --border-strong: #33363f;
    --text:          #ecedee;
    --text-2:        #a1a3ab;
    --text-3:        #7c7e86;   /* was #75777f — 4.77:1 on --bg, 4.51:1 on a panel */
    --text-4:        #55575e;
    --accent:        #7d88e8;
    --accent-hover:  #8e98ef;
    --accent-fg:     #10111a;
    --accent-soft:   #1e2033;
    --green:         #43c27c;
    --amber:         #e0a63a;
    --red:           #f0736d;
    --green-soft:    #14271d;
    --amber-soft:    #2a2013;
    --red-soft:      #2c1817;
    --hill-line:     #3a3d46;
  }
}
/* ---------- tokens: dark (explicit toggle) ---------- */
:root[data-theme="dark"]{
  --bg:            #0d0e11;
  --bg-sunken:     #0a0b0d;
  --bg-raised:     #141519;
  --bg-subtle:     #1b1d22;
  --bg-hover:      #1f2128;
  --border:        #26282f;
  --border-strong: #33363f;
  --text:          #ecedee;
  --text-2:        #a1a3ab;
  --text-3:        #7c7e86;   /* was #75777f — 4.77:1 on --bg, 4.51:1 on a panel */
  --text-4:        #55575e;
  --accent:        #7d88e8;
  --accent-hover:  #8e98ef;
  --accent-fg:     #10111a;
  --accent-soft:   #1e2033;
  --green:         #43c27c;
  --amber:         #e0a63a;
  --red:           #f0736d;
  --green-soft:    #14271d;
  --amber-soft:    #2a2013;
  --red-soft:      #2c1817;
  --hill-line:     #3a3d46;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ background:var(--bg); }
body{
  background:var(--bg);
  color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; }
[hidden]{ display:none !important; }
button,select,textarea,input{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
a{ color:inherit; text-decoration:none; }

/* ---------- layout shell ---------- */
.shell{ max-width:1240px; margin:0 auto; padding-inline:16px; }
@media (min-width:900px){ .shell{ padding-inline:24px; } }

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.hdr-top{ display:flex; align-items:center; gap:10px; padding-block:12px; flex-wrap:wrap; }
.brand{ display:flex; align-items:baseline; gap:8px; min-width:0; }
.brand-mark{
  width:20px; height:20px; border-radius:6px;
  background:var(--accent); flex:none; align-self:center; position:relative;
}
.brand-mark::after{
  content:""; position:absolute; inset:6px 5px; border-radius:1px;
  background:var(--accent-fg);
  clip-path:polygon(0 100%,0 55%,28% 20%,55% 62%,78% 30%,100% 8%,100% 100%);
  opacity:.9;
}
.brand-name{
  font-size:14px; font-weight:600; letter-spacing:-0.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brand-name .muted{ color:var(--text-3); font-weight:500; }
.tag-mockup{
  font-size:12px; line-height:1; padding:4px 6px;
  border:1px solid var(--border-strong); border-radius:999px;
  color:var(--text-3); background:var(--bg-subtle);
  white-space:nowrap; letter-spacing:.02em; align-self:center;
}
.hdr-spacer{ flex:1 1 auto; }
.week{ font-size:13px; color:var(--text-2); white-space:nowrap; display:flex; align-items:center; gap:6px; }
.week .dot{ width:3px; height:3px; border-radius:50%; background:var(--text-4); }
.icon-btn{
  width:28px; height:28px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--border); border-radius:8px;
  color:var(--text-2); cursor:pointer;
}
.icon-btn:hover{ background:var(--bg-hover); color:var(--text); }
.hdr-link{
  font-size:12px; color:var(--text-3); background:transparent; border:0;
  padding:4px 2px; cursor:pointer; white-space:nowrap;
}
.hdr-link:hover{ color:var(--text); }

/* Phone: keep the controls on the brand line instead of letting them
   claim rows of their own; the tag + week wrap together below. */
@media (max-width:680px){
  /* brand does NOT grow here: the controls pack in right after it, so the
     tag + week share the second line and the sticky header costs two rows
     instead of three. */
  .brand{ flex:0 1 auto; }
  .hdr-spacer{ display:none; }
  .hdr-top{ gap:8px; }
  #langSeg{ order:1; } #themeBtn{ order:2; } #logoutBtn{ order:3; }
  .tag-mockup{ order:4; font-size:11px; } .week{ order:5; font-size:12px; }
}

.hdr-bottom{ display:flex; align-items:center; gap:12px; padding-bottom:12px; flex-wrap:wrap; }
.filters{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0; }
.filter-label{ font-size:12px; color:var(--text-3); margin-right:2px; }
.av-btn{
  background:transparent; border:0; padding:2px; cursor:pointer;
  border-radius:999px; line-height:0;
}
.av-btn[aria-pressed="true"]{ background:var(--accent); }
.av-btn:not([aria-pressed="true"]):hover .av{ filter:brightness(1.08); }
.filter-clear{
  font-size:12px; color:var(--text-2);
  background:transparent; border:1px solid var(--border); border-radius:999px;
  padding:3px 10px; cursor:pointer;
}
.filter-clear:hover{ background:var(--bg-hover); color:var(--text); }

/* health legend */
.legend-wrap{ position:relative; display:inline-flex; }
.legend-btn{
  width:20px; height:20px; flex:none; margin-left:2px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; line-height:1;
  background:transparent; color:var(--text-3);
  border:1px solid var(--border); border-radius:999px; cursor:pointer;
}
.legend-btn:hover,.legend-btn[aria-expanded="true"]{ color:var(--text); border-color:var(--border-strong); background:var(--bg-subtle); }
.legend-pop{
  position:absolute; top:calc(100% + 8px); left:-8px; z-index:60;
  background:var(--bg-raised); border:1px solid var(--border-strong); border-radius:8px;
  padding:10px 12px; min-width:max-content; max-width:min(88vw,340px);
}
.legend-pop h4{ margin:0 0 6px; font-size:12px; font-weight:600; color:var(--text-3); }
.legend-line{ display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--text-2); }
.legend-line span{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }

.seg{
  display:inline-flex; padding:2px; gap:2px;
  background:var(--bg-subtle); border:1px solid var(--border); border-radius:8px;
}
.seg button{
  font-size:13px; font-weight:500; color:var(--text-2);
  background:transparent; border:0; border-radius:6px;
  padding:4px 10px; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
}
.seg button[aria-pressed="true"]{
  background:var(--bg-raised); color:var(--text);
  border:1px solid var(--border); padding:3px 9px;
}
.seg-sm button{ font-size:12px; padding:3px 8px; }
.seg-sm button[aria-pressed="true"]{ padding:2px 7px; }
.badge{
  font-size:11px; font-weight:600; line-height:1;
  padding:2px 6px; border-radius:999px;
  background:var(--idea-bg); color:var(--idea-fg);
  border:2px solid var(--idea-outline);
  font-variant-numeric:tabular-nums;
}
/* Ideas view header: same fill + outline as the wall's idea box, so the
   colour means "ideas" in both places. */
.idea-hero{
  background:var(--idea-bg); border:2px solid var(--idea-outline);
  border-radius:12px; padding:14px 16px; margin-bottom:24px;
  color:var(--idea-fg);
}
.idea-hero h2{ margin:0 0 3px; font-size:16px; font-weight:600; letter-spacing:-0.01em; }
.idea-hero p{ margin:0; font-size:13px; color:var(--idea-fg-dim); }

.chips{ display:flex; gap:6px; overflow-x:auto; padding-bottom:12px; scrollbar-width:none; -ms-overflow-style:none; }
.chips::-webkit-scrollbar{ display:none; }
.chip{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  font-size:12px; color:var(--text-2);
  background:transparent; border:1px solid var(--border); border-radius:999px;
  padding:4px 10px; cursor:pointer;
}
.chip:hover{ background:var(--bg-hover); color:var(--text); }
.chip b{ font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }

/* ---------- avatars ---------- */
.av{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; color:#fff; font-weight:600; letter-spacing:.01em;
  flex:none; font-size:11px; width:24px; height:24px; user-select:none;
}
.av-20{ width:20px; height:20px; font-size:10px; }
.av-24{ width:24px; height:24px; font-size:11px; }
.av-28{ width:28px; height:28px; font-size:12px; }
.av-32{ width:32px; height:32px; font-size:13px; }
.av-stack{ display:inline-flex; align-items:center; margin-left:2px; }
/* -3px, not the usual -6px: these avatars carry initials, and a deeper
   overlap eats the first letter and makes the stack unreadable. */
.av-stack .av{ margin-left:-3px; box-shadow:0 0 0 2px var(--bg-raised); }
.av-stack .av:first-child{ margin-left:0; }
.av-more{ background:var(--bg-subtle) !important; color:var(--text-2) !important; font-weight:600; }

/* ---------- health + stage ---------- */
.hdot{ width:8px; height:8px; border-radius:50%; flex:none; }
.hdot.green{ background:var(--green); }
.hdot.amber{ background:var(--amber); }
.hdot.red{ background:var(--red); }
.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:500;
  border:1px solid var(--border); border-radius:999px;
  padding:3px 10px; color:var(--text-2); background:var(--bg-raised); white-space:nowrap;
}
.pill.green{ color:var(--green); background:var(--green-soft); border-color:transparent; }
.pill.amber{ color:var(--amber); background:var(--amber-soft); border-color:transparent; }
.pill.red{ color:var(--red); background:var(--red-soft); border-color:transparent; }

/* ---------- stage sections / grid ---------- */
main{ padding-block:24px 64px; }
.stage-sec{ margin-bottom:32px; }
.stage-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.stage-title{ font-size:13px; font-weight:600; letter-spacing:.01em; }
.stage-count{ font-size:12px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.stage-rule{ flex:1 1 auto; height:1px; background:var(--border); }

.grid{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:680px){ .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1040px){ .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* ---------- project card ---------- */
.card{
  display:flex; flex-direction:column; gap:10px;
  width:100%; min-width:0; text-align:left;
  background:var(--bg-raised);
  border:1px solid var(--border);
  /* owner: 3px left border in the owner's avatar colour (set inline) */
  border-left-width:3px; border-left-style:solid;
  border-radius:12px;
  padding:20px 20px 20px 18px; cursor:pointer;
  box-shadow:var(--shadow-none);
}
@media (min-width:680px){ .card{ padding:22px 22px 22px 20px; } }
.card:hover{ border-top-color:var(--border-strong); border-right-color:var(--border-strong); border-bottom-color:var(--border-strong); background:var(--bg-hover); }
.card-l1{ display:flex; align-items:center; gap:8px; min-width:0; }
.card-area{ font-size:12px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.card-l1 .hdot{ margin-left:auto; }
.card-title{ font-size:16px; font-weight:500; letter-spacing:-0.01em; line-height:1.3; overflow-wrap:anywhere; }
.card-hill{ display:flex; align-items:center; gap:10px; min-width:0; }
.card-hill svg{ flex:none; }
.card-date{ font-size:12px; color:var(--text-3); white-space:nowrap; font-variant-numeric:tabular-nums; }
.card-foot{ display:flex; flex-direction:column; gap:8px; margin-top:2px; }
.card-people{ display:flex; align-items:center; gap:6px; }
.card-update{
  font-size:12px; color:var(--text-2); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-update .who{ color:var(--text); font-weight:500; }
.card-update.stale{ color:var(--text-4); }
.card-update.stale .who{ color:var(--text-3); font-weight:500; }

/* ---------- home strip ---------- */
.home{ margin-bottom:28px; display:flex; flex-direction:column; gap:10px; }
.hbox{
  background:var(--bg-raised); border:1px solid var(--border); border-radius:12px; padding:14px 16px;
}
@media (min-width:680px){ .hbox{ padding:16px 18px; } }
/* The home strip sits above the wall, so it stays deliberately short —
   the wall is the point of the page, not the inbox above it. */
.home textarea{ min-height:62px; }
.hbox-title{
  font-size:12px; font-weight:600; color:var(--text-3);
  letter-spacing:.02em; margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
.hbox-title .av{ margin-right:2px; }
.log-row{ display:flex; align-items:center; gap:10px; min-width:0; }
.log-row .av{ flex:none; }
.log-input{ flex:1 1 auto; min-width:0; }
.log-extra{ margin-top:10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.log-hint{ font-size:12px; color:var(--text-4); }

.home-2{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:820px){ .home-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Idea dump: solid orange fill, 2px neon outline, white text. The inner
   controls keep the normal surface so what you type stays readable. */
.idea-box{
  background:var(--idea-bg);
  border:2px solid var(--idea-outline);
  color:var(--idea-fg);
  padding:13px 15px;
}
@media (min-width:680px){ .idea-box{ padding:15px 17px; } }
.idea-box .hbox-title{ color:var(--idea-fg); }
.idea-box textarea{ background:var(--bg-raised); color:var(--text); border-color:var(--idea-outline); }
.idea-box .picker-btn,.idea-box .btn{ border-color:var(--idea-outline); }

.active-row{ display:grid; grid-template-columns:1fr; gap:8px; }
@media (min-width:680px){ .active-row{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* ---------- project picker ---------- */
.picker{ position:relative; flex:none; max-width:100%; }
.picker-btn{
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  font-size:12px; font-weight:500; cursor:pointer;
  background:var(--bg-subtle); border:1px solid var(--border); border-radius:999px;
  padding:4px 10px; color:var(--text-2);
}
.picker-btn:hover{ border-color:var(--border-strong); color:var(--text); }
.picker-btn.chosen{ color:var(--text); }
.picker-btn .lbl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:230px; }
.picker-btn .caret{ color:var(--text-4); flex:none; }
.picker-pop{
  position:absolute; z-index:70; top:calc(100% + 6px); left:0;
  width:min(320px,86vw);
  background:var(--bg-raised); border:1px solid var(--border-strong); border-radius:8px;
  padding:8px; max-height:290px; overflow-y:auto;
}
.picker-search{
  width:100%; font-size:13px; margin-bottom:6px;
  background:var(--bg-sunken); color:var(--text);
  border:1px solid var(--border); border-radius:6px; padding:6px 8px;
}
.picker-search:focus{ border-color:var(--accent); outline:none; }
.picker-group{ font-size:11px; font-weight:600; color:var(--text-4); letter-spacing:.03em; padding:6px 6px 3px; }
.picker-opt{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  background:transparent; border:0; border-radius:6px; cursor:pointer;
  padding:6px; font-size:13px; color:var(--text);
}
.picker-opt:hover{ background:var(--bg-hover); }
.picker-opt .ob{ width:3px; height:16px; border-radius:2px; flex:none; }
.picker-opt .on{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.picker-empty{ font-size:12px; color:var(--text-4); padding:8px 6px; }

/* ---------- empty state ---------- */
.empty{ border:1px dashed var(--border-strong); border-radius:12px; padding:40px 20px; text-align:center; }
.empty h3{ margin:0 0 6px; font-size:14px; font-weight:600; }
.empty p{ margin:0 0 16px; font-size:13px; color:var(--text-2); }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-size:13px; font-weight:500; cursor:pointer;
  border-radius:8px; padding:7px 12px;
  background:var(--bg-raised); border:1px solid var(--border); color:var(--text);
}
.btn:hover{ background:var(--bg-hover); border-color:var(--border-strong); }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }
.btn-primary:hover{ background:var(--accent-hover); border-color:var(--accent-hover); }
.btn-sm{ font-size:12px; padding:5px 10px; }

/* ---------- by person swimlanes ---------- */
.lane{ border-top:1px solid var(--border); padding-block:20px; }
.lane:first-child{ border-top:0; padding-top:4px; }
.lane-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.lane-name{ font-size:14px; font-weight:600; letter-spacing:-0.01em; }
.lane-count{ font-size:12px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.lane-grid{ display:grid; grid-template-columns:1fr; gap:8px; }
@media (min-width:680px){ .lane-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1040px){ .lane-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.mini{
  display:flex; align-items:center; gap:10px; min-width:0;
  width:100%; text-align:left;
  background:var(--bg-raised); border:1px solid var(--border);
  border-left-width:3px; border-left-style:solid;
  border-radius:8px; padding:10px 12px 10px 10px; cursor:pointer;
}
.mini:hover{ background:var(--bg-hover); }
.mini-body{ min-width:0; flex:1 1 auto; }
.mini-title{ display:block; font-size:13px; font-weight:500; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-meta{ display:block; font-size:12px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-role{ font-size:12px; color:var(--text-4); flex:none; }
.lane-empty{ font-size:13px; color:var(--text-3); padding:2px 0 4px; }

/* ---------- ideas view ---------- */
.idea-group{ margin-bottom:28px; }
.idea-row{
  display:grid; gap:10px 12px; align-items:start;
  grid-template-columns:auto 1fr;
  border:1px solid var(--border); border-radius:8px;
  padding:14px 16px; margin-bottom:8px; background:var(--bg-raised);
}
@media (min-width:900px){
  .idea-row{ grid-template-columns:auto minmax(0,1fr) 150px 200px; align-items:center; }
}
.idea-body{ min-width:0; }
.idea-meta{ font-size:12px; color:var(--text-3); margin-bottom:2px; }
.idea-meta b{ color:var(--text); font-weight:600; font-size:13px; }
.idea-text{ font-size:13px; color:var(--text-2); overflow-wrap:anywhere; }
.idea-ctl{ grid-column:1/-1; display:flex; gap:8px; flex-wrap:wrap; }
@media (min-width:900px){ .idea-ctl{ grid-column:auto; display:block; } }
.idea-ctl .inp{ width:100%; }

/* ---------- project page ---------- */
.page{ max-width:760px; margin:0 auto; }
.back{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:var(--text-2); background:transparent;
  border:0; padding:0; cursor:pointer; margin-bottom:20px;
}
.back:hover{ color:var(--text); }
.p-title{ margin:0 0 4px; font-size:22px; font-weight:600; letter-spacing:-0.02em; line-height:1.25; overflow-wrap:anywhere; }
.p-sub{ font-size:13px; color:var(--text-3); margin-bottom:20px; }
.props{
  display:grid; grid-template-columns:1fr; gap:12px 20px;
  border:1px solid var(--border); border-left-width:3px; border-left-style:solid;
  border-radius:12px; padding:16px 20px; margin-bottom:32px; background:var(--bg-raised);
}
@media (min-width:600px){ .props{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.prop{ display:flex; align-items:center; gap:12px; min-width:0; }
.prop-k{ font-size:12px; color:var(--text-3); width:86px; flex:none; }
.prop-v{ font-size:13px; min-width:0; display:flex; align-items:center; gap:8px; }
.prop-v .txt{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sel{
  appearance:none; -webkit-appearance:none;
  font-size:12px; font-weight:500;
  border:1px solid var(--border); border-radius:999px;
  padding:3px 26px 3px 10px; cursor:pointer;
  background-color:var(--bg-subtle); color:var(--text);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' fill='none' stroke='%238b8b93' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 8px center; max-width:100%;
}
.sel.green{ color:var(--green); background-color:var(--green-soft); border-color:transparent; }
.sel.amber{ color:var(--amber); background-color:var(--amber-soft); border-color:transparent; }
.sel.red{ color:var(--red); background-color:var(--red-soft); border-color:transparent; }

.sec{ margin-bottom:32px; }
.sec-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.sec-title{ font-size:13px; font-weight:600; letter-spacing:.01em; }
.sec-note{ font-size:12px; color:var(--text-3); }
.sec-head .grow{ flex:1 1 auto; }

.panel{ border:1px solid var(--border); border-radius:12px; background:var(--bg-raised); padding:20px; }
.hill-wrap{ overflow-x:auto; }
/* The hill chart may scroll rather than shrink: below ~460px its own
   labels stop being readable, and a chart you cannot read is worse than
   one you have to nudge sideways. */
.hill-wrap svg{ display:block; width:100%; height:auto; min-width:460px; }
.hill-legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:12px; color:var(--text-3); }
.hill-legend span{ display:inline-flex; align-items:center; gap:6px; }
.lg-dot{ width:8px; height:8px; border-radius:50%; background:var(--text); }
.lg-dot.faded{ background:var(--text-4); }

.composer{ margin-bottom:16px; }
textarea{
  width:100%; display:block; resize:vertical;
  font-size:13px; line-height:1.5;
  background:var(--bg-raised); color:var(--text);
  border:1px solid var(--border); border-radius:8px;
  padding:10px 12px; min-height:76px;
}
textarea::placeholder{ color:var(--text-4); }
textarea:focus{ border-color:var(--accent); outline:none; }
.composer-row{ display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap; }
.composer-row .hint{ font-size:12px; color:var(--text-4); }
.feed{ display:flex; flex-direction:column; }
.upd{ display:flex; gap:12px; padding:14px 0; border-top:1px solid var(--border); min-width:0; }
.upd:first-child{ border-top:0; padding-top:4px; }
.upd-body{ min-width:0; flex:1 1 auto; }
.upd-meta{ font-size:12px; color:var(--text-3); margin-bottom:3px; }
.upd-meta b{ color:var(--text); font-weight:600; font-size:13px; }
.upd-text{ font-size:13px; color:var(--text-2); overflow-wrap:anywhere; }
.upd.fresh .upd-text{ color:var(--text); }
.feed-empty{ font-size:13px; color:var(--text-4); padding:2px 0; }

.chunk{ display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-top:1px solid var(--border); min-width:0; }
.chunk:first-child{ border-top:0; padding-top:2px; }
.chunk-body{ min-width:0; flex:1 1 auto; }
.chunk-title{ font-size:13px; font-weight:500; line-height:1.4; overflow-wrap:anywhere; }
.chunk-title.done{ color:var(--text-3); text-decoration:line-through; text-decoration-thickness:1px; }
.chunk-note{ font-size:12px; color:var(--text-3); margin-top:2px; overflow-wrap:anywhere; }
.st{
  flex:none; cursor:pointer;
  font-size:12px; font-weight:500; letter-spacing:.01em;
  border:1px solid var(--border); border-radius:999px;
  padding:2px 10px; background:var(--bg-subtle); color:var(--text-2);
}
.st:hover{ border-color:var(--border-strong); color:var(--text); }
.st.doing{ color:var(--accent); background:var(--accent-soft); border-color:transparent; }
.st.done{ color:var(--green); background:var(--green-soft); border-color:transparent; }
.chunk-add{ border-top:1px solid var(--border); padding-top:14px; margin-top:2px; display:grid; gap:8px; grid-template-columns:1fr; }
@media (min-width:600px){ .chunk-add{ grid-template-columns:1fr 150px auto; align-items:center; } }
.inp{
  width:100%; font-size:13px;
  background:var(--bg-raised); color:var(--text);
  border:1px solid var(--border); border-radius:8px; padding:7px 10px;
}
.inp::placeholder{ color:var(--text-4); }
.inp:focus{ border-color:var(--accent); outline:none; }
select.inp{
  appearance:none; -webkit-appearance:none; padding-right:26px; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' fill='none' stroke='%238b8b93' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 9px center;
}

/* state doc */
.doc{ font-size:14px; }
.doc h2{ font-size:16px; font-weight:600; letter-spacing:-0.01em; margin:24px 0 8px; padding-bottom:6px; border-bottom:1px solid var(--border); }
.doc h2:first-child{ margin-top:0; }
.doc h3{ font-size:14px; font-weight:600; margin:18px 0 6px; }
.doc p{ margin:0 0 10px; color:var(--text-2); }
.doc ul,.doc ol{ margin:0 0 10px; padding-left:20px; color:var(--text-2); }
.doc li{ margin-bottom:4px; }
.doc ul.check{ list-style:none; padding-left:0; }
.doc ul.check li{ display:flex; gap:8px; align-items:flex-start; }
.doc .box{
  flex:none; width:14px; height:14px; margin-top:3px;
  border:1px solid var(--border-strong); border-radius:4px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; color:var(--accent-fg);
}
.doc .box.on{ background:var(--accent); border-color:var(--accent); }
.doc code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px; background:var(--bg-subtle);
  border:1px solid var(--border); border-radius:6px; padding:1px 5px; overflow-wrap:anywhere;
}
.doc .tbl{ overflow-x:auto; margin:0 0 12px; }
.doc table{ border-collapse:collapse; width:100%; min-width:420px; font-size:13px; }
.doc th,.doc td{ border:1px solid var(--border); padding:7px 10px; text-align:left; vertical-align:top; color:var(--text-2); }
.doc th{ background:var(--bg-subtle); color:var(--text); font-weight:600; font-size:12px; }
.raw{ min-height:320px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; }

.links{ display:flex; flex-direction:column; }
.link-row{ display:flex; align-items:center; gap:10px; min-width:0; padding:11px 0; border-top:1px solid var(--border); font-size:13px; }
.link-row:first-child{ border-top:0; padding-top:2px; }
.link-row .lk{ color:var(--text); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-bottom:1px solid var(--border-strong); }
.link-row .lk:hover{ border-bottom-color:var(--accent); color:var(--accent); }
.link-row .kind{ font-size:12px; color:var(--text-4); margin-left:auto; flex:none; }
.hist{ font-size:12px; color:var(--text-3); padding-top:4px; }
.hist a{ color:var(--text-2); border-bottom:1px solid var(--border-strong); }
.hist a:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.footnote{ margin-top:48px; padding-top:16px; border-top:1px solid var(--border); font-size:12px; color:var(--text-4); }

/* ---------- login ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:32px 16px;
}
.login-card{
  width:100%; max-width:380px;
  background:var(--bg-raised); border:1px solid var(--border); border-radius:12px;
  padding:28px 24px;
}
.login-brand{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.login-brand .brand-name{ font-size:16px; }
.login-sub{ font-size:13px; color:var(--text-3); margin:0 0 22px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12px; color:var(--text-3); margin-bottom:5px; }
.login-card .inp{ padding:9px 11px; }
.login-card select.inp{ background-position:right 11px center; }
.login-actions{ display:flex; align-items:center; gap:10px; margin-top:20px; flex-wrap:wrap; }
.login-legend{ margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }
.login-legend h4{ margin:0 0 6px; font-size:12px; font-weight:600; color:var(--text-3); }
.login-note{ font-size:12px; color:var(--text-4); margin:14px 0 0; }
.login-top{ position:absolute; top:16px; right:16px; display:flex; gap:8px; align-items:center; }


/* ============================================================
   app additions — not in the static mockup
   ============================================================ */

/* Health legend as <details> so it opens with JavaScript disabled.
   Styled to be indistinguishable from the mockup's button + popover. */
details.legend-wrap{ position:relative; display:inline-flex; }
details.legend-wrap > summary{
  width:20px; height:20px; flex:none; margin-left:2px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; line-height:1;
  background:transparent; color:var(--text-3);
  border:1px solid var(--border); border-radius:999px; cursor:pointer;
  list-style:none;
}
details.legend-wrap > summary::-webkit-details-marker{ display:none; }
details.legend-wrap > summary::marker{ content:""; }
details.legend-wrap > summary:hover,
details.legend-wrap[open] > summary{
  color:var(--text); border-color:var(--border-strong); background:var(--bg-subtle);
}

/* A card whose YAML would not parse. Deliberately NOT a health colour: the file
   needs attention, the project's health is unknown — two different facts. */
.card.broken{ border-left-color:var(--border-strong) !important; }
.card-error{
  font-size:12px; color:var(--text-2); background:var(--bg-subtle);
  border:1px dashed var(--border-strong); border-radius:8px; padding:8px 10px;
  overflow-wrap:anywhere;
}
.card-error b{ color:var(--text); font-weight:600; }
.card-raw{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px; color:var(--text-3); white-space:pre-wrap; margin-top:6px;
  max-height:80px; overflow:hidden;
}
.card-owner-missing{ font-size:12px; color:var(--text-4); }
.pill.unknown,.sel.unknown{ color:var(--text-3); background:var(--bg-subtle); border-color:var(--border); }
.hdot.unknown{ background:var(--text-4); }

/* Optional NEXT box (HUB_NEXT_BOX=1). Off by default: mockup v3 renders ## NEXT
   in document order inside the state.md panel. */
.next-box{
  border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:12px; background:var(--accent-soft); padding:16px 20px; margin-bottom:32px;
}
.next-box h3{ margin:0 0 6px; font-size:12px; font-weight:600; color:var(--text-3); letter-spacing:.02em; }
.next-box .doc p:last-child,.next-box .doc ul:last-child{ margin-bottom:0; }

/* Read-only phase: controls render exactly as in the mockup but do nothing yet. */
.ro{ cursor:default; }
.banner{
  border:1px solid var(--amber); background:var(--amber-soft); color:var(--amber);
  border-radius:8px; padding:8px 12px; font-size:12px; margin-bottom:16px;
}

/* Links where the mockup used buttons (the app navigates; the mockup re-rendered).
   Same box, same type, same states — only the element changed. */
a.av-btn{ display:inline-flex; }
a.filter-clear{ display:inline-flex; align-items:center; }
a.hdr-link{ display:inline-flex; align-items:center; font-size:12px; color:var(--text-3); padding:4px 2px; }
a.hdr-link:hover{ color:var(--text); }
a.icon-btn{ text-decoration:none; }
.seg a{
  font-size:13px; font-weight:500; color:var(--text-2);
  background:transparent; border:0; border-radius:6px;
  padding:4px 10px; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
}
.seg a[aria-pressed="true"]{
  background:var(--bg-raised); color:var(--text);
  border:1px solid var(--border); padding:3px 9px;
}
.seg-sm a{ font-size:12px; padding:3px 8px; }
.seg-sm a[aria-pressed="true"]{ padding:2px 7px; }
form.seg{ margin:0; }

/* Person colours — LOCKED, EXACT. Never desaturated, never "harmonised".
   Avatars, avatar stacks, the by-person lane accent and the 3 px owner left border all
   take the colour from team.yaml at render time; these tokens exist so the palette is
   readable in one place and so a test can assert the exact bytes. The initials' ink is
   computed (render.avatar_text), never listed — a new person needs only a colour. */
:root{
  --u-csilla: #06d4cd;   /* cyan  — initials dark, 9.99:1 */
  --u-balazs: #bcd902;   /* lime  — initials dark, 11.54:1 */
  --u-vilmos: #004cff;   /* blue  — initials white, 6.04:1 */
}

/* Theme toggle without JavaScript: both buttons exist, CSS shows the one that matches
   what the viewer is actually looking at — moon in light, sun in dark — including when
   dark comes from the OS and the server therefore cannot know about it. */
.theme-to-light{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-to-dark{ display:none; }
  :root:not([data-theme="light"]) .theme-to-light{ display:inline-flex; }
}
:root[data-theme="dark"] .theme-to-dark{ display:none; }
:root[data-theme="dark"] .theme-to-light{ display:inline-flex; }
:root[data-theme="light"] .theme-to-dark{ display:inline-flex; }
:root[data-theme="light"] .theme-to-light{ display:none; }

/* The picker is a <details> so it opens without JavaScript. Same box as the mockup's
   button; `.picker-pop` is hidden by the closed <details> instead of the [hidden] attr. */
details.picker{ position:relative; flex:none; max-width:100%; }
details.picker > summary{
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  font-size:12px; font-weight:500; cursor:pointer; list-style:none;
  background:var(--bg-subtle); border:1px solid var(--border); border-radius:999px;
  padding:4px 10px; color:var(--text-2);
}
details.picker > summary::-webkit-details-marker{ display:none; }
details.picker > summary::marker{ content:""; }
details.picker > summary:hover{ border-color:var(--border-strong); color:var(--text); }
details.picker > summary.chosen{ color:var(--text); }
details.picker .picker-pop{
  position:absolute; z-index:70; top:calc(100% + 6px); left:0;
  width:min(320px,86vw);
  background:var(--bg-raised); border:1px solid var(--border-strong); border-radius:8px;
  padding:8px; max-height:290px; overflow-y:auto;
}
.idea-box details.picker > summary{ border-color:var(--idea-outline); }

/* Just-posted confirmation, and the "this changed on disk" panel. */
.posted{ font-size:12px; color:var(--green); }
.conflict{
  border:1px solid var(--amber); background:var(--amber-soft);
  border-radius:12px; padding:16px 18px; color:var(--text);
}
.conflict h3{ margin:0 0 6px; font-size:14px; font-weight:600; color:var(--amber); }
.conflict p{ margin:0 0 12px; font-size:13px; color:var(--text-2); }
.conflict code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11px;
  background:var(--bg-subtle); border:1px solid var(--border); border-radius:6px; padding:1px 5px;
}
.conflict-actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* History page */
.hist-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--border); flex-wrap:wrap; }
.hist-row:first-child{ border-top:0; padding-top:2px; }
.hist-when{ font-size:12px; color:var(--text-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.hist-who{ font-size:13px; font-weight:500; white-space:nowrap; }
.hist-subject{ font-size:13px; color:var(--text-2); min-width:0; flex:1 1 auto; overflow-wrap:anywhere; }
.hist-sha{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11px; color:var(--text-4); }
.hist-row form{ margin:0; }
.login-error{
  font-size:12px; color:var(--red); background:var(--red-soft);
  border:1px solid transparent; border-radius:8px; padding:7px 10px; margin:0 0 6px;
}
.hill-hint{ color:var(--text-4); }
button.hdr-link{ background:transparent; border:0; cursor:pointer; }

/* "Keep it one line tall until I click on it" (Balázs, feedback round 1).
   `:focus-within` does it without JavaScript: the extra row appears when the input, the
   picker or the button has focus, and stays for the confirmation after a post. */
.home .hbox .log-extra.collapsible{ display:none; }
.home .hbox:focus-within .log-extra.collapsible,
.home .hbox .log-extra.collapsible.open{ display:flex; }

/* The protocol block for Claude sessions: a <details> so it is present on the page
   without competing with the work. Same head styling as every other section. */
details.protocol > summary{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:12px; cursor:pointer; list-style:none;
}
details.protocol > summary::-webkit-details-marker{ display:none; }
details.protocol > summary::marker{ content:""; }
details.protocol > summary .sec-title::before{
  content:"▸ "; color:var(--text-4); font-weight:400;
}
details.protocol[open] > summary .sec-title::before{ content:"▾ "; }
details.protocol > summary:hover .sec-title{ color:var(--accent); }
details.protocol .doc p{ font-size:13px; }
details.protocol .doc h3{ margin-top:20px; }

/* ---------- P4: by-person lane accent ---------- */
/* The rule takes the person's colour (set inline from team.yaml, like every other use of
   it). A hairline-to-2px rule rather than a filled band: these colours are deliberately
   strong, and a band behind the cards would compete with the health dots. */
.lane-rule{ flex:1 1 auto; height:2px; border-radius:2px; opacity:.85; min-width:24px; }
.lane-only{
  font-size:12px; color:var(--text-3); white-space:nowrap;
  border-bottom:1px solid var(--border-strong); flex:none;
}
.lane-only:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.empty-sm{ padding:20px 16px; text-align:left; }
.empty-sm h3{ font-size:13px; }
.empty-sm p{ margin:0; font-size:12px; }

/* ---------- P4: keyboard focus ----------
   The mockup's one focus rule (`:focus-visible` on everything) is right but not enough
   once cards are links and the picker is a <details>: a 2 px ring drawn *inside* a card's
   rounded border is invisible against the hairline, and a ring on a `line-height:0`
   avatar button collapses. These make every control's focus state unmistakable, in both
   themes, without moving anything. */
a.card:focus-visible,
a.mini:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
  border-top-color:var(--border-strong); border-right-color:var(--border-strong);
  border-bottom-color:var(--border-strong);
}
a.chip:focus-visible,
a.filter-clear:focus-visible,
a.lane-only:focus-visible,
a.hdr-link:focus-visible,
button.hdr-link:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
a.av-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:999px; }
details.legend-wrap > summary:focus-visible,
details.picker > summary:focus-visible,
details.protocol > summary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.seg a:focus-visible,
.seg button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.st:focus-visible,
.picker-opt:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
/* Text controls show focus with the accent border (the mockup's choice) PLUS a soft ring.
   A 1 px border-colour change is a weak indicator on a hairline UI; the ring adds a 2 px
   area at 3:1 without moving anything and without touching the resting appearance — so
   the approved screenshots are unchanged, only the focused state is stronger. */
.inp:focus-visible,
textarea:focus-visible,
select.inp:focus-visible,
.sel:focus-visible,
.picker-search:focus-visible{
  border-color:var(--accent);
  outline:2px solid var(--accent);
  outline-offset:1px;
}

/* A keyboard user tabbing into the log box gets the same expansion a click gives. */
.home .hbox:focus-within .log-extra.collapsible{ display:flex; }

/* Skip link: the wall is a long page and the header is sticky, so the first Tab should
   be able to jump past it. Visible only when focused. */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--bg-raised); color:var(--text);
  border:1px solid var(--border-strong); border-radius:8px;
  padding:8px 12px; font-size:13px;
}
.skip:focus{ left:16px; top:8px; outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- P4: 390 px ----------
   The home strip stacks and the idea box is last, so on a phone the wall starts sooner.
   `home-2` already collapses below 820 px; this makes the order explicit rather than
   incidental, and trims the padding that a 390 px screen cannot spare. */
@media (max-width:430px){
  .home{ gap:8px; margin-bottom:20px; }
  .home-2{ display:flex; flex-direction:column; }
  .home-2 .hbox:not(.idea-box){ order:1; }
  .home-2 .idea-box{ order:2; }
  .hbox{ padding:12px 14px; }
  .idea-box{ padding:11px 13px; }
  main{ padding-block:16px 48px; }
  .stage-sec{ margin-bottom:24px; }
  .p-title{ font-size:20px; }
  .props{ padding:14px 16px; }
  .prop-k{ width:78px; }
  .panel{ padding:16px; }
  .log-extra{ gap:6px; }
  .picker-btn .lbl{ max-width:150px; }
  /* The history row wraps on a phone instead of squeezing the Restore button off-screen. */
  .hist-row{ gap:8px; }
  .hist-subject{ flex-basis:100%; }
}

/* ============================================================
   v5 — group chip, state box, admin, /me, group page
   ============================================================
   Copied VERBATIM from mockup v5 (the approved contract), the
   same way the mockup's own stylesheet was copied in P1. The
   "app additions" block below it holds only what a real app
   needs and a static mockup did not. */

/* ---------- v5: group chip, state box, admin, /me, group page ---------- */
.gchip{
  display:inline-flex; align-items:center; gap:5px; flex:none;
  font-size:11px; font-weight:500; color:var(--text-2);
  border:1px solid var(--border); border-radius:999px;
  padding:1px 8px 1px 6px; white-space:nowrap; max-width:130px;
}
.gchip .gdot{ width:6px; height:6px; border-radius:50%; flex:none; }
.gchip .gtxt{ overflow:hidden; text-overflow:ellipsis; }
/* the chip is noise where the heading above already names the group */
.no-chip .gchip{ display:none; }

/* state.md box — sits above the hill chart, two blocks with freshness */
.statebox{ border:1px solid var(--border); border-radius:12px; background:var(--bg-raised); overflow:hidden; }
.sb-part{ padding:16px 20px; border-top:1px solid var(--border); }
.sb-part:first-child{ border-top:0; }
.sb-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
.sb-label{ font-size:12px; font-weight:600; color:var(--text-3); letter-spacing:.02em; }
.sb-fresh{ font-size:12px; color:var(--text-4); }
.sb-part.stale .sb-fresh{ color:var(--text-3); }
.sb-stale-tag{
  font-size:11px; font-weight:500; letter-spacing:.02em;
  border:1px solid var(--text-4); color:var(--text-3);
  border-radius:999px; padding:0 7px; white-space:nowrap;
}
.sb-edit{
  margin-left:auto; font-size:12px; color:var(--text-3);
  background:transparent; border:0; padding:2px 4px; cursor:pointer; border-radius:6px;
}
.sb-edit:hover{ color:var(--accent); background:var(--bg-hover); }
.sb-body{ font-size:14px; line-height:1.55; color:var(--text); overflow-wrap:anywhere; }
.sb-part.stale .sb-body{ color:var(--text-3); }
.sb-body.empty{ color:var(--text-4); font-style:italic; }
.sb-body p{ margin:0 0 8px; }
.sb-body p:last-child{ margin:0; }
.sb-note{ font-size:12px; color:var(--text-4); margin-top:10px; }
.sb-ta{ min-height:88px; }

/* admin */
.admin-tabs{ display:flex; gap:6px; margin-bottom:20px; flex-wrap:wrap; }
.tbl-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:12px; background:var(--bg-raised); }
table.grid-tbl{ border-collapse:collapse; width:100%; min-width:820px; font-size:13px; }
table.grid-tbl th{
  font-size:11px; font-weight:600; letter-spacing:.03em; color:var(--text-3);
  text-align:left; padding:10px 14px; border-bottom:1px solid var(--border); white-space:nowrap;
}
table.grid-tbl td{ padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.grid-tbl tr:last-child td{ border-bottom:0; }
table.grid-tbl tr.retired td{ opacity:.55; }
.cell-person{ display:flex; align-items:center; gap:9px; min-width:0; }
.cell-person .nm{ font-weight:500; white-space:nowrap; }
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; color:var(--text-2); }
.swatch{
  display:inline-flex; align-items:center; gap:7px; font-size:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--text-2);
}
.swatch i{ width:14px; height:14px; border-radius:4px; border:1px solid var(--border-strong); flex:none; }
.yes{ color:var(--green); font-size:12px; }
.no{ color:var(--text-4); font-size:12px; }
/* The table scrolls horizontally on its own; letting the actions wrap instead
   just makes every row tall and mostly empty on a phone. */
.row-actions{ display:flex; gap:6px; flex-wrap:nowrap; justify-content:flex-end; }
.row-actions .btn{ white-space:nowrap; flex:none; }
.btn-xs{ font-size:12px; padding:3px 8px; border-radius:6px; }
.btn-danger{ color:var(--red); border-color:var(--border); }
.btn-danger:hover{ border-color:var(--red); background:var(--red-soft); }
.edit-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; }
.admin-note{ font-size:12px; color:var(--text-3); margin:0 0 16px; }
input[type=color].inp{ padding:2px; height:32px; cursor:pointer; }

/* token-shown-once panel */
.token-panel{
  border:2px solid var(--accent); border-radius:12px; background:var(--accent-soft);
  padding:18px 20px; margin-bottom:20px;
}
.token-panel h3{ margin:0 0 6px; font-size:14px; font-weight:600; }
.token-panel p{ margin:0 0 12px; font-size:13px; color:var(--text-2); }
.token-val{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--bg-raised); border:1px solid var(--border-strong); border-radius:8px;
  padding:10px 12px; margin-bottom:12px;
}
.token-val code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px;
  overflow-wrap:anywhere; min-width:0; flex:1 1 220px; color:var(--text);
}
/* confirm strip */
.confirm{
  border:1px solid var(--red); border-radius:12px; background:var(--red-soft);
  padding:16px 18px; margin-bottom:16px;
}
.confirm h3{ margin:0 0 4px; font-size:13px; font-weight:600; }
.confirm p{ margin:0 0 12px; font-size:13px; color:var(--text-2); }
.confirm .row-actions{ justify-content:flex-start; }

/* group page */
.ghero{ display:flex; align-items:center; gap:12px; margin-bottom:6px; flex-wrap:wrap; }
.ghero .gbar{ width:4px; height:26px; border-radius:2px; flex:none; }
.ghero h1{ margin:0; font-size:22px; font-weight:600; letter-spacing:-0.02em; }
.gagg{ font-size:13px; color:var(--text-2); margin:0 0 4px; }
.gagg .sep{ color:var(--text-4); margin:0 7px; }
.gpeople{ display:flex; align-items:center; gap:8px; margin-bottom:24px; flex-wrap:wrap; font-size:13px; color:var(--text-3); }
.feed-src{
  font-size:11px; font-weight:500; color:var(--text-3);
  border:1px solid var(--border); border-radius:999px; padding:1px 7px;
  margin-left:6px; white-space:nowrap; cursor:pointer;
}
.feed-src:hover{ color:var(--text); border-color:var(--border-strong); }
.upd-meta .feed-src{ display:inline-block; }

/* ============================================================
   app additions for v5 — not in the static mockup
   ============================================================ */

/* A saved/refused line. Reuses the pairs P4 measured to 4.5:1. */
.flash{ font-size:13px; border-radius:8px; padding:9px 12px; margin:0 0 14px; }
.flash.ok{ color:var(--green); background:var(--green-soft); }
.flash.bad{ color:var(--red); background:var(--red-soft); }
.login-warn{
  font-size:12px; color:var(--amber); background:var(--amber-soft);
  border:1px solid transparent; border-radius:8px; padding:7px 10px; margin:0 0 6px;
}
.hint{ font-size:12px; color:var(--text-3); margin:2px 0 12px; line-height:1.5; }
.shell-narrow{ max-width:720px; }
a.hdr-link.on{ color:var(--text); font-weight:600; }

/* The mockup's state box is a click-to-edit textarea in JavaScript. Here each part is a
   real form that posts, so it works with JS off — the .sb-edit control is a <summary>. */
details.sb-edit-wrap{ margin-left:auto; }
details.sb-edit-wrap > summary{
  list-style:none; font-size:12px; color:var(--text-3);
  padding:2px 4px; cursor:pointer; border-radius:6px;
}
details.sb-edit-wrap > summary::-webkit-details-marker{ display:none; }
details.sb-edit-wrap > summary:hover{ color:var(--accent); background:var(--bg-hover); }
.sb-form{ margin-top:10px; }
.sb-form textarea{ width:100%; }
.sb-form .row-actions{ margin-top:8px; }

/* "Egyéb" is collapsed by default (Csilla, feedback round 4): it is the bucket of things
   nobody has grouped yet, and on this wall it is the longest section. The toggle is a
   <details>, so it opens without JavaScript and its state is the browser's, not ours. */
details.other-sec > summary{ list-style:none; cursor:pointer; }
details.other-sec > summary::-webkit-details-marker{ display:none; }
details.other-sec > summary .stage-head{ margin-bottom:0; }
details.other-sec[open] > summary .stage-head{ margin-bottom:12px; }
.other-toggle{
  font-size:12px; color:var(--text-3); border:1px solid var(--border);
  border-radius:6px; padding:2px 8px; white-space:nowrap;
}
details.other-sec > summary:hover .other-toggle{ color:var(--text); border-color:var(--border-strong); }
details.other-sec[open] > summary .other-toggle .show{ display:none; }
details.other-sec:not([open]) > summary .other-toggle .hide{ display:none; }

/* The group picker on the property row: a select, like stage and health. */
.prop-v select.sel.group{ max-width:180px; }

/* The phone header. Five header links wrap into three rows at 390 px (mockup shot
   admin-team-400 shows exactly that), so below 560 px Admin / My account / Log out
   collapse into one ⋯ menu. Above that width nothing changes. */
/* margin-left:auto so the button sits at the right end of whatever row it wraps onto —
   the popup is anchored to it, and without this it opens off the left edge of a phone. */
form.logout{ display:inline-flex; }
details.hdr-more{ position:relative; display:none; margin-left:auto; }
details.hdr-more > summary{
  list-style:none; cursor:pointer; font-size:15px; line-height:1;
  color:var(--text-3); padding:4px 8px; border-radius:6px;
}
details.hdr-more > summary::-webkit-details-marker{ display:none; }
details.hdr-more > summary:hover{ color:var(--text); background:var(--bg-hover); }
.hdr-more-pop{
  position:absolute; right:0; top:calc(100% + 6px); z-index:40;
  background:var(--bg-raised); border:1px solid var(--border); border-radius:10px;
  padding:6px; min-width:150px; max-width:min(220px, calc(100vw - 24px));
  display:flex; flex-direction:column; gap:2px;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
}
.hdr-more-pop a,.hdr-more-pop button{
  text-align:left; font-size:13px; color:var(--text-2); background:transparent;
  border:0; padding:7px 9px; border-radius:6px; cursor:pointer; width:100%;
}
.hdr-more-pop a:hover,.hdr-more-pop button:hover{ background:var(--bg-hover); color:var(--text); }

@media (max-width:560px){
  details.hdr-more{ display:block; }
  .hdr-top > .hdr-link,.hdr-top > form.logout{ display:none !important; }
}

@media (max-width:430px){
  table.grid-tbl{ min-width:620px; }   /* the table scrolls; the page does not */
  .ghero h1{ font-size:20px; }
  .sb-part{ padding:14px 16px; }
  .token-panel{ padding:14px 16px; }
}