/* ============================================================
   Mission Control — styles
   Status colours are the validated status palette. Every status is
   rendered as icon + text label, never colour alone: the light-mode
   amber sits below 3:1 on the page surface by design, and the label
   is the mitigation. Do not strip the labels.
   ============================================================ */

:root {
  color-scheme: light;

  --surface:        #fcfcfb;   /* cards */
  --plane:          #f5f5f2;   /* page */
  --surface-sunk:   #f0efec;
  --ink:            #0b0b0b;
  --ink-2:          #52514e;
  --ink-muted:      #898781;
  --hair:           #e1e0d9;
  --hair-strong:    #cfcec6;

  --accent:         #2a78d6;
  --accent-soft:    #eaf2fd;

  /* status palette (fixed, never themed) */
  --st-live:        #0ca30c;
  --st-progress:    #2a78d6;
  --st-blocked:     #d03b3b;
  --st-confirm:     #fab219;
  --st-done:        #898781;

  --st-live-bg:     #e6f5e6;
  --st-progress-bg: #eaf2fd;
  --st-blocked-bg:  #fbe9e9;
  --st-confirm-bg:  #fdf3dd;
  --st-done-bg:     #efeeeb;

  --st-live-ink:     #06630a;
  --st-progress-ink: #184f95;
  --st-blocked-ink:  #8f1f1f;
  --st-confirm-ink:  #6b4600;
  --st-done-ink:     #52514e;

  --radius:   12px;
  --radius-s: 8px;
  --shadow:   0 1px 2px rgba(11,11,11,.05), 0 4px 14px rgba(11,11,11,.045);
  --shadow-lift: 0 2px 5px rgba(11,11,11,.07), 0 12px 30px rgba(11,11,11,.09);

  --mc-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%230b0b0b'/%3E%3Ccircle cx='16' cy='16' r='6' fill='%230ca30c'/%3E%3C/svg%3E");
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface:      #1a1a19;
    --plane:        #0d0d0d;
    --surface-sunk: #232322;
    --ink:          #ffffff;
    --ink-2:        #c3c2b7;
    --ink-muted:    #898781;
    --hair:         #2c2c2a;
    --hair-strong:  #3d3d3a;

    --accent:       #3987e5;
    --accent-soft:  #16283d;

    --st-live:      #0ca30c;
    --st-progress:  #3987e5;
    --st-blocked:   #e05c5c;
    --st-confirm:   #fab219;
    --st-done:      #9d9b93;

    --st-live-bg:     #102a10;
    --st-progress-bg: #16283d;
    --st-blocked-bg:  #33191a;
    --st-confirm-bg:  #33280c;
    --st-done-bg:     #262624;

    --st-live-ink:     #7ede7e;
    --st-progress-ink: #9cc7f5;
    --st-blocked-ink:  #f3a9a9;
    --st-confirm-ink:  #fbd888;
    --st-done-ink:     #c3c2b7;

    --shadow:      0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.32);
    --shadow-lift: 0 2px 5px rgba(0,0,0,.5), 0 12px 30px rgba(0,0,0,.45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface:      #1a1a19;
  --plane:        #0d0d0d;
  --surface-sunk: #232322;
  --ink:          #ffffff;
  --ink-2:        #c3c2b7;
  --ink-muted:    #898781;
  --hair:         #2c2c2a;
  --hair-strong:  #3d3d3a;

  --accent:       #3987e5;
  --accent-soft:  #16283d;

  --st-live:      #0ca30c;
  --st-progress:  #3987e5;
  --st-blocked:   #e05c5c;
  --st-confirm:   #fab219;
  --st-done:      #9d9b93;

  --st-live-bg:     #102a10;
  --st-progress-bg: #16283d;
  --st-blocked-bg:  #33191a;
  --st-confirm-bg:  #33280c;
  --st-done-bg:     #262624;

  --st-live-ink:     #7ede7e;
  --st-progress-ink: #9cc7f5;
  --st-blocked-ink:  #f3a9a9;
  --st-confirm-ink:  #fbd888;
  --st-done-ink:     #c3c2b7;

  --shadow:      0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.32);
  --shadow-lift: 0 2px 5px rgba(0,0,0,.5), 0 12px 30px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 620; letter-spacing: -0.012em; }

/* ---------------- top bar ---------------- */

.topbar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--plane) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--hair);
}
.topbar-inner {
  max-width: 1220px; margin: 0 auto;
  padding: 13px 22px;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  /* the Mission Control mark itself — the same #0b0b0b tile and #0ca30c dot
     as the favicon and the app icon, so the app is one thing everywhere */
  background: transparent var(--mc-logo) center/contain no-repeat;
  position: relative;
}
.brand-text h1 { font-size: 17px; line-height: 1.2; }
.brand-sub { margin: 1px 0 0; font-size: 12.5px; color: var(--ink-muted); }

.tabs { display: flex; gap: 3px; flex-wrap: wrap; }
.tab {
  padding: 6px 13px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 6px;
}
.tab:hover { background: var(--surface); text-decoration: none; color: var(--ink); }
.tab[aria-current="page"] {
  background: var(--surface); color: var(--ink);
  border-color: var(--hair-strong); box-shadow: var(--shadow);
}
.tab-badge {
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--st-confirm-bg); color: var(--st-confirm-ink);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

.icon-btn {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--hair-strong); border-radius: 9px;
  background: var(--surface); color: var(--ink-2); cursor: pointer;
}
.icon-btn:hover { color: var(--ink); border-color: var(--ink-muted); }

/* ---------------- layout ---------------- */

.view { max-width: 1220px; margin: 0 auto; padding: 26px 22px 60px; }

.section { margin-bottom: 34px; }
.section-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 13px; flex-wrap: wrap;
}
.section-head h2 { font-size: 15px; }
.section-head p { margin: 0; font-size: 13px; color: var(--ink-muted); }

.footer {
  max-width: 1220px; margin: 0 auto; padding: 0 22px 40px;
}
.footer p { margin: 0; font-size: 12.5px; color: var(--ink-muted); }

/* ---------------- status chips / filter row ---------------- */

.chiprow { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 20px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px 8px 11px;
  border: 1px solid var(--hair-strong); border-radius: 10px;
  background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: 13px; cursor: pointer;
  box-shadow: var(--shadow);
}
.chip:hover { color: var(--ink); border-color: var(--ink-muted); }
.chip[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
.chip-n { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--ink); }
.chip-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent);
}

/* ---------------- status pill ---------------- */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 7px; border-radius: 999px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .005em;
  white-space: nowrap;
}
.pill-ico { font-size: 9px; line-height: 1; }

.s-live        { background: var(--st-live-bg);     color: var(--st-live-ink); }
.s-in_progress { background: var(--st-progress-bg); color: var(--st-progress-ink); }
.s-blocked     { background: var(--st-blocked-bg);  color: var(--st-blocked-ink); }
.s-needs_confirmation { background: var(--st-confirm-bg); color: var(--st-confirm-ink); }
.s-done        { background: var(--st-done-bg);     color: var(--st-done-ink); }

.dot-live        { background: var(--st-live); }
.dot-in_progress { background: var(--st-progress); }
.dot-blocked     { background: var(--st-blocked); }
.dot-needs_confirmation { background: var(--st-confirm); }
.dot-done        { background: var(--st-done); }

/* ---------------- cards ---------------- */

.grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}

.card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 17px;
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--radius); box-shadow: var(--shadow);
  text-align: left; font: inherit; color: inherit;
  cursor: pointer; position: relative;
  border-left: 3px solid var(--edge, var(--hair-strong));
  transition: box-shadow .14s ease, transform .14s ease, border-color .14s ease;
}
.card:hover {
  box-shadow: var(--shadow-lift); transform: translateY(-1px);
  border-color: var(--hair-strong); text-decoration: none;
}
.card.e-live        { --edge: var(--st-live); }
.card.e-in_progress { --edge: var(--st-progress); }
.card.e-blocked     { --edge: var(--st-blocked); }
.card.e-needs_confirmation { --edge: var(--st-confirm); }
.card.e-done        { --edge: var(--st-done); }

.card-top { display: flex; align-items: flex-start; gap: 10px; }
.card-title { font-size: 15.5px; font-weight: 640; flex: 1; min-width: 0; }
.card-kind {
  font-size: 11px; color: var(--ink-muted); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600; margin-top: 2px;
}
.card-sum { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.card-foot {
  display: flex; align-items: center; gap: 3px 13px; flex-wrap: wrap;
  margin-top: auto; padding-top: 4px;
  font-size: 12px; color: var(--ink-muted);
}
.card-url { font-family: var(--mono); font-size: 11.5px; }

.flagline {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--st-confirm-ink);
  background: var(--st-confirm-bg); padding: 3px 8px; border-radius: 6px;
}
.flagline.danger { color: var(--st-blocked-ink); background: var(--st-blocked-bg); }

/* ---------------- detail view ---------------- */

.back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink-2); margin-bottom: 16px;
}
.back:hover { color: var(--ink); text-decoration: none; }

.detail-head {
  padding: 20px 21px; margin-bottom: 20px;
  background: var(--surface); border: 1px solid var(--hair);
  border-left: 3px solid var(--edge, var(--hair-strong));
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.detail-head.e-live        { --edge: var(--st-live); }
.detail-head.e-in_progress { --edge: var(--st-progress); }
.detail-head.e-blocked     { --edge: var(--st-blocked); }
.detail-head.e-needs_confirmation { --edge: var(--st-confirm); }
.detail-head.e-done        { --edge: var(--st-done); }

.detail-title { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.detail-title h2 { font-size: 22px; }
.detail-sum { margin: 9px 0 0; font-size: 14.5px; color: var(--ink-2); max-width: 78ch; }

.cols { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 768px) { .cols { grid-template-columns: 1fr; } }

.panel {
  padding: 16px 17px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.panel > h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-muted); margin-bottom: 12px;
}

/* facts table */
.facts { display: grid; gap: 9px; }
.fact { display: grid; grid-template-columns: 128px 1fr; gap: 12px; font-size: 13.5px; }
.fact dt { color: var(--ink-muted); }
.fact dd { margin: 0; color: var(--ink); }
@media (max-width: 560px) { .fact { grid-template-columns: 1fr; gap: 2px; } }

/* open items */
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.item {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; color: var(--ink-2);
  padding-bottom: 10px; border-bottom: 1px solid var(--hair);
}
.items .item:last-child { border-bottom: 0; padding-bottom: 0; }
.item-tag {
  flex: none; margin-top: 1px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px; white-space: nowrap;
}
.tag-needs_harsh      { background: var(--st-blocked-bg); color: var(--st-blocked-ink); }
.tag-needs_confirmation { background: var(--st-confirm-bg); color: var(--st-confirm-ink); }
.tag-todo             { background: var(--surface-sunk);  color: var(--ink-2); }
.item.p-high .item-text { color: var(--ink); }

/* timeline */
.timeline { position: relative; margin: 0; padding: 0 0 0 20px; list-style: none; }
.timeline::before {
  content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px;
  width: 1px; background: var(--hair-strong);
}
.tl { position: relative; padding-bottom: 17px; }
.tl:last-child { padding-bottom: 0; }
.tl::before {
  content: ""; position: absolute; left: -20px; top: 5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--hair-strong);
}
.tl.c-verified::before { background: var(--st-live); box-shadow: 0 0 0 2px var(--surface); }
.tl.c-needs_confirmation::before { background: var(--st-confirm); box-shadow: 0 0 0 2px var(--surface); }
.tl.f-incident::before, .tl.f-problem::before { background: var(--st-blocked); box-shadow: 0 0 0 2px var(--surface); }
.tl-date {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-muted);
  display: block; margin-bottom: 2px;
}
.tl-title { font-size: 14px; font-weight: 600; }
.tl-detail { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
.tl-basis {
  margin: 5px 0 0; font-size: 11.5px; color: var(--ink-muted);
  font-family: var(--mono);
}

/* links + repos */
.linklist { display: grid; gap: 7px; }
.linkrow {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--radius-s);
  background: var(--surface-sunk); font-size: 13.5px;
  border: 1px solid transparent; cursor: pointer;
  text-align: left; font-family: inherit; color: var(--ink); width: 100%;
}
.linkrow:hover { border-color: var(--hair-strong); text-decoration: none; }
.linkrow .lk-kind {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-muted); flex: none;
}
.linkrow .lk-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.repo {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  font-size: 12.5px; padding: 7px 0; border-bottom: 1px solid var(--hair);
}
.repo:last-child { border-bottom: 0; }
.repo-path { font-family: var(--mono); color: var(--ink); }
.repo-branch {
  font-family: var(--mono); font-size: 11.5px;
  background: var(--surface-sunk); padding: 1px 6px; border-radius: 5px; color: var(--ink-2);
}
.repo-meta { color: var(--ink-muted); }

/* ---------------- comms ---------------- */

.person {
  padding: 17px 18px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.person-head {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding-bottom: 13px; margin-bottom: 13px; border-bottom: 1px solid var(--hair);
}
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  font-weight: 700; font-size: 13px;
}
.person-name { font-size: 15.5px; font-weight: 640; }
.person-meta { font-size: 12.5px; color: var(--ink-muted); }
.person-meta .mono { font-family: var(--mono); font-size: 12px; }

.comms { display: grid; gap: 0; }
.comm {
  display: grid; grid-template-columns: 74px 42px 1fr auto; gap: 11px;
  align-items: start; padding: 11px 0; border-bottom: 1px solid var(--hair);
}
.comm:last-child { border-bottom: 0; }
.comm-date { font-family: var(--mono); font-size: 12px; color: var(--ink-muted); padding-top: 1px; }
.comm-dir {
  font-size: 11px; font-weight: 700; text-align: center; padding-top: 2px;
  letter-spacing: .03em;
}
.comm-dir.out { color: var(--accent); }
.comm-dir.in  { color: var(--st-live); }
.comm-subj { font-size: 13.5px; font-weight: 600; }
.comm-sum { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-2); }
.comm-basis { margin: 4px 0 0; font-size: 11.5px; color: var(--ink-muted); font-family: var(--mono); }
.comm-round {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  background: var(--surface-sunk); color: var(--ink-2);
  padding: 2px 7px; border-radius: 6px; white-space: nowrap;
}
@media (max-width: 640px) {
  .comm { grid-template-columns: 1fr auto; }
  .comm-dir { text-align: left; padding-top: 0; }
}

.conf {
  display: inline-block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 5px; margin-left: 6px;
  vertical-align: 1px;
}
.conf-verified { background: var(--st-live-bg); color: var(--st-live-ink); }
.conf-derived  { background: var(--surface-sunk); color: var(--ink-muted); }
.conf-needs_confirmation { background: var(--st-confirm-bg); color: var(--st-confirm-ink); }

/* ---------------- gaps ---------------- */

.gap {
  padding: 15px 17px; margin-bottom: 11px;
  background: var(--surface); border: 1px solid var(--hair);
  border-left: 3px solid var(--st-confirm);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.gap-q { font-size: 14.5px; font-weight: 620; display: flex; gap: 10px; align-items: baseline; }
.gap-n {
  font-family: var(--mono); font-size: 12px; color: var(--ink-muted);
  flex: none; padding-top: 1px;
}
.gap-why { margin: 7px 0 0 27px; font-size: 13.5px; color: var(--ink-2); }
.gap-affects { margin: 8px 0 0 27px; display: flex; gap: 6px; flex-wrap: wrap; }
.gap-affects a {
  font-size: 11.5px; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-sunk); color: var(--ink-2);
}
.gap-affects a:hover { text-decoration: none; color: var(--ink); }

/* ---------------- status pages ---------------- */

.pagecard {
  display: flex; flex-direction: column; gap: 6px;
  padding: 15px 16px; text-align: left; font: inherit; color: inherit;
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--radius); box-shadow: var(--shadow); cursor: pointer;
  transition: box-shadow .14s ease, transform .14s ease;
}
.pagecard:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.pagecard h3 { font-size: 14.5px; }
.pagecard p { margin: 0; font-size: 13px; color: var(--ink-2); }
.pagecard .mono { font-size: 11.5px; color: var(--ink-muted); font-family: var(--mono); }

/* ---------------- doc overlay ---------------- */

.overlay {
  position: fixed; inset: 0; z-index: 60;
  background: color-mix(in srgb, #0b0b0b 55%, transparent);
  display: grid; place-items: center; padding: 24px;
}
.overlay[hidden] { display: none; }
.overlay-panel {
  width: min(920px, 100%); max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--hair-strong);
  border-radius: 14px; box-shadow: var(--shadow-lift); overflow: hidden;
}
.overlay-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 17px; border-bottom: 1px solid var(--hair);
}
.overlay-head h2 { font-size: 15.5px; }
.overlay-sub { margin: 2px 0 0; font-size: 11.5px; color: var(--ink-muted); }
.overlay-head .icon-btn { margin-left: auto; }
.overlay-body { padding: 18px 20px 26px; overflow: auto; }

/* rendered markdown */
.md { font-size: 14px; color: var(--ink-2); max-width: 74ch; }
.md h1, .md h2, .md h3, .md h4 { color: var(--ink); margin: 20px 0 8px; line-height: 1.3; }
.md h1 { font-size: 19px; } .md h2 { font-size: 16.5px; }
.md h3 { font-size: 14.5px; } .md h4 { font-size: 13.5px; }
.md > :first-child { margin-top: 0; }
.md p { margin: 0 0 10px; }
.md ul, .md ol { margin: 0 0 11px; padding-left: 21px; }
.md li { margin-bottom: 4px; }
.md code {
  font-family: var(--mono); font-size: 12.5px;
  background: var(--surface-sunk); padding: 1px 5px; border-radius: 4px; color: var(--ink);
}
.md pre {
  background: var(--surface-sunk); padding: 12px 13px; border-radius: var(--radius-s);
  overflow-x: auto; margin: 0 0 12px; border: 1px solid var(--hair);
}
.md pre code { background: none; padding: 0; font-size: 12px; line-height: 1.5; }
.md hr { border: 0; border-top: 1px solid var(--hair); margin: 18px 0; }
.md strong { color: var(--ink); font-weight: 650; }
.md blockquote {
  margin: 0 0 12px; padding: 2px 0 2px 13px;
  border-left: 3px solid var(--hair-strong); color: var(--ink-muted);
}
.md .tablewrap { overflow-x: auto; margin: 0 0 13px; }
.md table { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.md th, .md td {
  border-bottom: 1px solid var(--hair); padding: 6px 11px 6px 0; text-align: left;
  vertical-align: top;
}
.md th { color: var(--ink); font-weight: 620; white-space: nowrap; }

.pre-raw {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; margin: 0; color: var(--ink-2);
}

/* ---------------- misc ---------------- */

.mono { font-family: var(--mono); }
.empty {
  padding: 34px 20px; text-align: center;
  color: var(--ink-muted); font-size: 13.5px;
  background: var(--surface); border: 1px dashed var(--hair-strong);
  border-radius: var(--radius);
}
.notice {
  padding: 12px 15px; margin-bottom: 20px; font-size: 13.5px;
  background: var(--st-confirm-bg); color: var(--st-confirm-ink);
  border-radius: var(--radius-s);
}
.notice strong { font-weight: 700; }
.spinner { padding: 40px; text-align: center; color: var(--ink-muted); font-size: 13.5px; }

/* ============================================================
   Auto-refresh additions: freshness strip, conflicts, live checks,
   commits, system view.
   ============================================================ */

/* ---- freshness strip: how old each class of data is ---- */
.fresh {
  display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 18px;
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--radius); box-shadow: var(--shadow);
  font-size: 12.5px;
}
.fresh-item { display: inline-flex; align-items: baseline; gap: 7px; }
.fresh-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--st-live);
  flex: none; align-self: center;
}
.fresh-item.is-stale .fresh-dot { background: var(--st-confirm); }
.fresh-label { color: var(--ink-muted); }
.fresh-val { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.fresh-item.is-stale .fresh-val { color: var(--st-confirm-ink); }
.fresh-btn {
  margin-left: auto; padding: 4px 11px; font: inherit; font-size: 12px;
  border: 1px solid var(--hair-strong); border-radius: 7px;
  background: var(--plane); color: var(--ink-2); cursor: pointer;
}
.fresh-btn:hover { color: var(--ink); border-color: var(--ink-muted); }

/* ---- conflicts: written status vs measured reality ---- */
.conflict-strip {
  padding: 13px 16px; margin-bottom: 18px;
  background: var(--st-blocked-bg); border: 1px solid transparent;
  border-left: 3px solid var(--st-blocked); border-radius: var(--radius);
}
.conflict-head { font-size: 13.5px; font-weight: 700; color: var(--st-blocked-ink); margin-bottom: 7px; }
.conflict-strip ul { margin: 0; padding-left: 18px; }
.conflict-strip li { font-size: 13px; color: var(--st-blocked-ink); margin-bottom: 4px; }
.conflict-strip a { color: var(--st-blocked-ink); font-weight: 650; }

.conflict-inline {
  margin-top: 13px; padding: 10px 13px;
  background: var(--st-blocked-bg); border-radius: var(--radius-s);
  font-size: 13px; color: var(--st-blocked-ink); font-weight: 600;
}
.conflict-inline div + div { margin-top: 5px; }

/* ---- tone on machine-checked values ---- */
.t-good { color: var(--st-live-ink); }
.t-warn { color: var(--st-confirm-ink); }
.t-bad  { color: var(--st-blocked-ink); font-weight: 600; }
.fact dd.is-auto { font-variant-numeric: tabular-nums; }

.panel-auto {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--st-live-ink); background: var(--st-live-bg);
  padding: 2px 6px; border-radius: 5px; margin-left: 7px; vertical-align: 1px;
}
.panel-foot { margin: 11px 0 0; font-size: 11.5px; color: var(--ink-muted); }

.statussrc {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-muted); background: var(--surface-sunk);
  padding: 3px 7px; border-radius: 5px;
}

/* live-check line on the overview card */
.livechk {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-muted);
  display: block;
}

/* ---- recent commits ---- */
.commits { display: grid; gap: 0; }
.commit {
  display: grid; grid-template-columns: 74px 62px 1fr auto; gap: 10px;
  align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--hair);
  font-size: 13px;
}
.commit:last-child { border-bottom: 0; }
.commit-date, .commit-hash { font-size: 11.5px; color: var(--ink-muted); }
.commit-subj { color: var(--ink-2); min-width: 0; }
.commit-repo { font-size: 11px; color: var(--ink-muted); }
@media (max-width: 700px) {
  .commit { grid-template-columns: 74px 1fr; }
  .commit-hash, .commit-repo { display: none; }
}

/* ---- system view rows ---- */
.srclist { display: grid; gap: 0; }
.src {
  display: grid; grid-template-columns: 12px minmax(140px, auto) 1fr auto; gap: 11px;
  align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--hair);
  font-size: 13px;
}
.src:last-child { border-bottom: 0; }
.src-dot {
  width: 8px; height: 8px; border-radius: 50%; align-self: center;
  background: var(--ink-muted);
}
.src-dot.ok { background: var(--st-live); }
.src-dot.bad { background: var(--st-blocked); }
.src-dot.warn { background: var(--st-confirm); }
.src-dot.off { background: var(--hair-strong); }
.src-label { font-weight: 600; color: var(--ink); }
.src-detail { color: var(--ink-2); min-width: 0; }
.src-at { font-size: 11.5px; color: var(--ink-muted); white-space: nowrap; }
@media (max-width: 700px) {
  .src { grid-template-columns: 12px 1fr; }
  .src-detail, .src-at { grid-column: 2; }
}

/* ---- comms person strip ---- */
.person-strip {
  display: flex; gap: 7px 16px; flex-wrap: wrap; align-items: center;
  margin-bottom: 12px; font-size: 12.5px; color: var(--ink-muted);
}
.waiting {
  font-weight: 650; color: var(--st-confirm-ink);
  background: var(--st-confirm-bg); padding: 2px 8px; border-radius: 6px;
}
.waiting.overdue { color: var(--st-blocked-ink); background: var(--st-blocked-bg); }
.ball-ours {
  font-weight: 650; color: var(--st-progress-ink);
  background: var(--st-progress-bg); padding: 2px 8px; border-radius: 6px;
}
.roundbig {
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  color: var(--ink); background: var(--surface-sunk);
  padding: 4px 10px; border-radius: 7px; flex: none;
}

.notice.ok { background: var(--st-live-bg); color: var(--st-live-ink); }

/* seed banner: a container serving image-baked data must say so */
.seed-banner {
  padding: 13px 16px; margin-bottom: 18px;
  background: var(--st-blocked-bg); color: var(--st-blocked-ink);
  border-left: 3px solid var(--st-blocked); border-radius: var(--radius);
  font-size: 13.5px; line-height: 1.5;
}
.seed-banner strong { display: block; font-weight: 700; margin-bottom: 3px; }
.subtle { color: var(--ink-muted); font-size: 11.5px; }

.comm-artifact {
  margin: 4px 0 0; font-size: 12px; color: var(--ink-2);
  font-family: var(--mono);
}

/* ============================================================
   Milestones — ordered go-live checklist with live verification
   ============================================================ */

.ms-count {
  float: right; font-size: 12px; font-weight: 500; text-transform: none;
  letter-spacing: 0; color: var(--ink-2);
}
.ms-count strong { color: var(--st-live-ink); font-weight: 700; }

.ms-bar {
  display: flex; gap: 3px; margin: 2px 0 16px; height: 6px;
}
.ms-bar.sm { margin: 0; height: 5px; flex: 1; min-width: 90px; }
.ms-seg { flex: 1; border-radius: 3px; background: var(--surface-sunk); }
.ms-seg.ms-done { background: var(--st-live); }
.ms-seg.ms-in_progress { background: var(--st-progress); }

.card-ms { display: flex; align-items: center; gap: 10px; }
.card-ms-label { font-size: 11.5px; color: var(--ink-muted); white-space: nowrap; }

.ms-phase {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted); margin: 14px 0 8px;
}
.ms-phase:first-of-type { margin-top: 2px; }

.ms-list { list-style: none; margin: 0; padding: 0; }
.ms {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 8px 0; border-bottom: 1px solid var(--hair);
}
.ms-list .ms:last-child { border-bottom: 0; }

.ms-dot {
  flex: none; width: 22px; height: 22px; margin-top: 1px;
  display: grid; place-items: center;
  border-radius: 50%; font-size: 11px; font-weight: 700;
}
.ms-done .ms-dot { background: var(--st-live-bg); color: var(--st-live-ink); }
.ms-in_progress .ms-dot { background: var(--st-progress-bg); color: var(--st-progress-ink); }
.ms-pending .ms-dot { background: var(--surface-sunk); color: var(--ink-muted); }

.ms-body { flex: 1; min-width: 0; }
.ms-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ms-pending .ms-title { color: var(--ink-2); font-weight: 500; }
.ms-date {
  font-family: var(--mono); font-size: 11px; color: var(--ink-muted);
  margin-left: 7px; font-weight: 500;
}
.ms-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 5px; margin-left: 7px; vertical-align: 1px;
}
.ms-tag.t-prog { background: var(--st-progress-bg); color: var(--st-progress-ink); }
.ms-tag.t-gate { background: var(--st-confirm-bg); color: var(--st-confirm-ink); }
.ms-detail { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-2); }
.ms-meta { margin: 3px 0 0; display: flex; gap: 5px 14px; flex-wrap: wrap; }
.ms-check { font-size: 11.5px; font-family: var(--mono); }
.ms-check.ok { color: var(--st-live-ink); }
.ms-check.bad { color: var(--st-blocked-ink); font-weight: 700; }
.ms-basis { font-size: 11.5px; color: var(--ink-muted); font-family: var(--mono); }

.ms-tag.t-auto { background: var(--st-live-bg); color: var(--st-live-ink); }
.ms-tag.t-armed { background: var(--accent-soft); color: var(--st-progress-ink); }
.ms-tag.t-manual { background: var(--surface-sunk); color: var(--ink-muted); }

/* ---- Overview sections: Webapps / Review loops / Others ---- */
.ov-section { margin-bottom: 30px; }
.ov-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 13px;
}
.ov-head h2 {
  font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-2);
}
.ov-count {
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--surface-sunk); color: var(--ink-muted);
  font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center;
}
.ov-rule { flex: 1; height: 1px; background: var(--hair); }

/* ============================================================
   Team Portal (portal.html / portal.js) — pt-* namespace.
   Reuses the dashboard tokens; nothing here restyles the dashboard.
   ============================================================ */

.pt-body { display:flex; flex-direction:column; min-height:100vh; }
.pt-main { flex:1; display:flex; flex-direction:column; gap:14px; width:100%;
  max-width:1060px; margin:0 auto; padding:18px 20px 26px; }
.pt-topbar { gap:14px; }
.pt-mark { background: transparent var(--mc-logo) center/contain no-repeat; }
.pt-userbox { display:flex; align-items:center; gap:12px; margin-left:auto; }
.pt-username { font-weight:600; font-size:13px; color:var(--ink-2); }
.pt-logout { font-size:12.5px; color:var(--ink-muted); text-decoration:none; }
.pt-logout:hover { color:var(--ink); text-decoration:underline; }
.pt-loading { padding:22px; color:var(--ink-muted); }

.pt-input { width:100%; padding:10px 12px; font:inherit; border:1px solid var(--hair-strong);
  border-radius:9px; background:var(--plane); color:var(--ink); }
.pt-btn { padding:10px 16px; font:inherit; font-weight:600; cursor:pointer; white-space:nowrap;
  border:1px solid transparent; border-radius:9px; background:var(--accent); color:#fff; }
.pt-btn:disabled { opacity:.55; cursor:default; }
.pt-btn-ghost { background:transparent; color:var(--ink-2); border-color:var(--hair-strong); font-weight:500; }
.pt-btn-ok { background:var(--st-live); }
.pt-btn-no { background:var(--st-blocked); }

/* ---- chat ---- */
.pt-chat { display:flex; flex-direction:column; flex:1; min-height:0; }
.pt-chat-scroll { flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column;
  gap:14px; min-height:220px; max-height:calc(100vh - 320px); }
.pt-empty { color:var(--ink-muted); font-size:13.5px; padding:18px 6px; }
.pt-msg { max-width:78%; align-self:flex-start; }
.pt-msg.pt-mine { align-self:flex-end; text-align:right; }
.pt-msg-meta { font-size:11.5px; color:var(--ink-muted); margin:0 6px 3px; }
.pt-bubble { display:inline-block; text-align:left; padding:10px 13px; border-radius:14px;
  background:var(--surface-sunk); color:var(--ink); font-size:14px; line-height:1.45;
  border:1px solid var(--hair); overflow-wrap:anywhere; white-space:normal; }
.pt-mine .pt-bubble { background:var(--accent-soft); border-color:transparent; }
.pt-msg-claude .pt-bubble, .pt-bubble.pt-msg-claude { background:var(--surface); }
.pt-bubble.pt-msg-system { background:var(--st-confirm-bg); color:var(--st-confirm-ink);
  border-color:transparent; font-weight:500; }
.pt-attach-img { display:block; max-width:280px; max-height:220px; border-radius:9px; margin-top:8px; }
.pt-attach-link { display:inline-block; }

/* member chat sits in a panel-look wrapper */
.pt-main > .pt-chat, .pt-portal-chatcol > .pt-chat { background:var(--surface); border:1px solid var(--hair);
  border-radius:var(--radius); box-shadow:var(--shadow); }

/* the member Portal: conversation + task rail side by side, stacked when
   narrow — the whole point is seeing both without scrolling */
.pt-portal-grid { display:grid; grid-template-columns:minmax(0, 1fr) 400px;
  gap:16px; height:calc(100vh - 148px); min-height:480px; }
.pt-portal-chatcol { display:flex; flex-direction:column; gap:14px; min-height:0; }
.pt-portal-chatcol > .pt-chat { flex:1; min-height:0; }
.pt-portal-grid > .pt-taskboard { margin-top:0; min-height:0; overflow-y:auto; }
/* the two-column page needs the room the single column never did */
.pt-main:has(.pt-portal-grid) { max-width:1400px; }
@media (max-width: 1100px) {
  .pt-portal-grid { grid-template-columns:1fr; height:auto; }
  .pt-portal-chatcol > .pt-chat { min-height:420px; }
}

/* ---- composer ---- */
.pt-composer { border-top:1px solid var(--hair); padding:12px 14px; }
.pt-composer-row { display:flex; gap:10px; align-items:flex-end; }
.pt-ta { flex:1; resize:vertical; min-height:44px; max-height:180px; padding:10px 12px; font:inherit;
  border:1px solid var(--hair-strong); border-radius:9px; background:var(--plane); color:var(--ink); }
.pt-iconbtn { border:1px solid var(--hair-strong); background:var(--plane); border-radius:9px;
  font-size:16px; padding:9px 11px; cursor:pointer; }
.pt-btn-send { padding:10px 20px; }
.pt-composer-foot { display:flex; justify-content:space-between; margin-top:6px; min-height:16px; }
.pt-send-note { font-size:12px; color:var(--st-live-ink); }
.pt-hint { font-size:11px; color:var(--ink-muted); }
.pt-files { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.pt-file-chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:4px 8px;
  background:var(--surface-sunk); border:1px solid var(--hair); border-radius:7px; }
.pt-file-x { border:0; background:none; cursor:pointer; font-size:14px; color:var(--ink-muted); padding:0; }

/* ---- request chips ---- */
.pt-req-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 14px;
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); }
.pt-req-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-muted); margin-right:4px; }
.pt-chip { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600;
  padding:4px 10px; border-radius:999px; }
.pt-chip-live { background:var(--st-live-bg); color:var(--st-live-ink); }
.pt-chip-progress { background:var(--st-progress-bg); color:var(--st-progress-ink); }
.pt-chip-blocked { background:var(--st-blocked-bg); color:var(--st-blocked-ink); }
.pt-chip-confirm { background:var(--st-confirm-bg); color:var(--st-confirm-ink); }
.pt-chip-done { background:var(--st-done-bg); color:var(--st-done-ink); }

/* ---- admin split ---- */
.pt-split { display:grid; grid-template-columns:290px 1fr; gap:14px; flex:1; min-height:0; align-items:start; }
.pt-threadlist { padding:8px; max-height:calc(100vh - 200px); overflow-y:auto; }
.pt-thread-item { display:block; padding:11px 12px; border-radius:9px; text-decoration:none;
  color:var(--ink); }
.pt-thread-item:hover { background:var(--surface-sunk); }
.pt-thread-sel { background:var(--accent-soft); }
.pt-thread-top { display:flex; align-items:center; gap:6px; font-size:13.5px; }
.pt-thread-app { color:var(--ink-muted); font-size:12px; }
.pt-unread { margin-left:auto; background:var(--accent); color:#fff; font-size:11px; font-weight:700;
  border-radius:999px; padding:1px 7px; }
.pt-thread-sub { font-size:12px; color:var(--ink-muted); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pt-chatpane { display:flex; flex-direction:column; padding:0; min-height:420px; }
.pt-chatpane .pt-req-bar { border:0; border-bottom:1px solid var(--hair); border-radius:12px 12px 0 0; }
.pt-chatpane .pt-chat-scroll { max-height:calc(100vh - 360px); }

/* ---- queue ---- */
.pt-queue { padding:14px; display:flex; flex-direction:column; gap:12px; }
.pt-queue-card { border:1px solid var(--hair); border-radius:var(--radius-s); padding:13px 15px;
  display:flex; flex-direction:column; gap:7px; background:var(--surface); }
.pt-queue-head { display:flex; align-items:center; gap:10px; justify-content:space-between; }
.pt-queue-sub { font-size:12.5px; color:var(--ink-muted); }
.pt-queue-detail { font-size:13.5px; color:var(--ink-2); }
.pt-queue-ask { font-size:13px; padding:8px 11px; border-radius:8px;
  background:var(--st-confirm-bg); color:var(--st-confirm-ink); }
.pt-queue-actions { display:flex; gap:8px; align-items:center; margin-top:3px; flex-wrap:wrap; }
.pt-note { flex:1; min-width:180px; }

/* ---- people ---- */
.pt-people { padding:16px; }
.pt-h3 { font-size:14px; margin:6px 0 10px; }
.pt-h3 + .pt-h3, .pt-usertable { margin-top:6px; }
.pt-form-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.pt-form-row .pt-input { width:auto; flex:1; min-width:140px; }
.pt-invitebox { margin:4px 0 16px; padding:12px 14px; border-radius:var(--radius-s);
  background:var(--st-confirm-bg); color:var(--st-confirm-ink);
  display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.pt-invite-title { font-size:13px; font-weight:600; }
.pt-invite-url { font-family:var(--mono); font-size:12px; overflow-wrap:anywhere;
  user-select:all; }
.pt-user-row { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 4px; border-top:1px solid var(--hair); }
.pt-user-off { opacity:.5; }
.pt-user-main { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.pt-user-sub { font-size:12.5px; color:var(--ink-muted); }
.pt-user-actions { display:flex; gap:8px; }
.pt-user-actions .pt-btn { padding:6px 12px; font-size:12.5px; }
/* can this teammate be reached (Messages cards and Settings → People) */
.pt-reach { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px;
  font-size:12.5px; color:var(--ink-muted); }
.pt-user-main > .pt-reach { flex-basis:100%; }
.tp-box .pt-reach { margin-top:2px; padding-top:8px; border-top:1px solid var(--hair); gap:4px 10px; }
.pt-reach-warn { color:var(--st-blocked-ink); font-weight:600; }

/* ---- member: replies waiting, and the one-time notifications invitation ---- */
.pt-unread-banner { display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap; padding:11px 14px; border-radius:var(--radius-s);
  background:var(--accent-soft); color:var(--ink); border:1px solid var(--accent);
  font-size:14px; font-weight:600; }
.pt-unread-banner-go { padding:7px 14px; font-size:13px; }
.pt-notify-prompt { display:flex; flex-direction:column; gap:8px; padding:14px 16px; }
.pt-notify-title { font-size:14.5px; }
.pt-notify-body { font-size:13.5px; color:var(--ink-2); }
.pt-notify-actions { display:flex; gap:8px; flex-wrap:wrap; }
.pt-notify-actions[hidden] { display:none; }
.pt-notify-note { font-size:13px; color:var(--ink-muted); }
.pt-notify-note:empty { display:none; }
/* where the replies they have not read begin, inside the open chat */
.pt-newdiv { display:flex; align-items:center; gap:10px; margin:6px 0; color:var(--accent);
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.pt-newdiv::before, .pt-newdiv::after { content:''; flex:1; height:1px; background:var(--accent); opacity:.5; }
@media (max-width: 760px) {
  /* the phone chat is a fixed shell running edge to edge: keep these as
     compact cards that may shrink (and scroll) before the chat does, and
     step the invitation aside while they type */
  .pt-body:has(.pt-portal-grid) .pt-main > .pt-unread-banner,
  .pt-body:has(.pt-portal-grid) .pt-main > .pt-notify-prompt { margin:8px 10px 0; flex:0 1 auto; min-height:0; overflow:auto; }
  .pt-body:has(.pt-portal-grid) .pt-main > .pt-notify-prompt { max-height:34vh; }
  .pt-body:has(.pt-portal-grid) .pt-main > .pt-unread-banner { flex-wrap:nowrap; max-height:22vh;
    padding:8px 10px 8px 12px; font-size:13px; }
  .pt-body:has(.pt-portal-grid) .pt-main > .pt-notify-prompt + .pt-portal-grid,
  .pt-body:has(.pt-portal-grid) .pt-main > .pt-unread-banner + .pt-portal-grid { margin-top:8px; }
  .pt-body:has(.pt-composer :focus) .pt-main > .pt-notify-prompt { display:none; }
}

@media (max-width: 760px) {
  .pt-split { grid-template-columns:1fr; }
  .pt-threadlist { max-height:32vh; }
  .pt-msg { max-width:92%; }
  .pt-main { padding:12px 10px 18px; }
}

/* hidden must win over .tabs{display:flex}; empty badges disappear */
#pt-tabs[hidden] { display: none; }
.tab-badge:empty { display: none; }
.pt-invitebox[hidden] { display: none; }

/* logout: a real button, present on every portal page and the dashboard nav */
.pt-logout-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 13px;
  font-size:12.5px; font-weight:600; color:var(--ink-2); text-decoration:none;
  border:1px solid var(--hair-strong); border-radius:9px; background:var(--surface);
  white-space:nowrap; }
.pt-logout-btn:hover { color:var(--st-blocked-ink); border-color:var(--st-blocked);
  background:var(--st-blocked-bg); }
.pt-logout-tab { margin-left:6px; border:1px solid var(--hair-strong); border-radius:9px; }
.pt-logout-tab:hover { color:var(--st-blocked-ink); border-color:var(--st-blocked);
  background:var(--st-blocked-bg); }

/* The staging switcher pill used to default to the very top-left corner, so
   the topbar was padded down 46px to keep it off the brand. Since 2026-08-20
   the pill defaults BELOW the header (left 10 / top 64 — the same spot as the
   sibling apps) and is draggable, so the shove is gone: padding it now would
   push the topbar's own content down INTO the pill. `has-stgsw` stays as the
   "pill is mounted" marker on <html> for anything that needs it later. */

/* ---- member app landing ---- */
.pt-applanding { padding: 16px; }
.pt-appgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.pt-apptile { display:flex; flex-direction:column; gap:7px; padding:16px 17px; border-radius:var(--radius-s);
  border:1px solid var(--hair); background:var(--surface); text-decoration:none; color:var(--ink);
  transition:border-color .12s ease, box-shadow .12s ease; }
.pt-apptile:hover { border-color:var(--accent); box-shadow:var(--shadow-lift); }
.pt-apptile-head { display:flex; align-items:center; gap:8px; }
.pt-apptile-name { font-size:15px; }
.pt-apptile-head .pt-unread { margin-left:auto; }
.pt-apptile-sub { font-size:12.5px; color:var(--ink-muted); overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.pt-apptile-time { font-size:11px; color:var(--ink-muted); }
.pt-back { display:inline-block; font-size:12.5px; color:var(--ink-2); text-decoration:none;
  padding:2px 0; width:max-content; }
.pt-back:hover { color:var(--ink); text-decoration:underline; }

/* ---- admin: app checkboxes (create form) + grant chips (rows) ---- */
.pt-appcheck-group { display:inline-flex; gap:6px; align-items:center; flex-wrap:wrap; }
.pt-appcheck { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; padding:8px 10px;
  border:1px solid var(--hair-strong); border-radius:9px; cursor:pointer; background:var(--plane); }
.pt-appcheck input { accent-color:var(--accent); margin:0; }
.pt-user-apps { display:inline-flex; gap:4px; align-items:center; flex-wrap:wrap; }
.pt-user-apps-all { font-size:12px; color:var(--ink-muted); }
.pt-appgrant { font:inherit; font-size:11.5px; font-weight:600; padding:4px 9px; border-radius:999px;
  border:1px solid var(--hair-strong); background:transparent; color:var(--ink-muted); cursor:pointer; }
.pt-appgrant:hover { border-color:var(--accent); color:var(--accent); }
.pt-appgrant.is-on { background:var(--accent-soft); border-color:transparent; color:var(--st-progress-ink); }
.pt-appgrant.is-on:hover { background:var(--st-blocked-bg); color:var(--st-blocked-ink); }

/* ---- Team comms: per-teammate portal boxes (dashboard) ---- */
.tp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px;
  margin-bottom:22px; }
.tp-box { display:flex; flex-direction:column; gap:7px; padding:14px 16px; border-radius:var(--radius-s);
  border:1px solid var(--hair); background:var(--surface); text-decoration:none; color:var(--ink);
  box-shadow:var(--shadow); transition:border-color .12s ease, box-shadow .12s ease; }
.tp-box:hover { border-color:var(--accent); box-shadow:var(--shadow-lift); }
.tp-box-head { display:flex; align-items:center; gap:9px; }
.tp-unread { margin-left:auto; background:var(--accent); color:#fff; font-size:11px; font-weight:700;
  border-radius:999px; padding:1px 7px; }
.tp-box-apps { font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-muted); }
.tp-box-last { font-size:12.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

/* ---- portal: member activity view ---- */
.pt-member-head { padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.pt-member-title { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.pt-member-links { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pt-member-links .pt-btn { padding:6px 12px; font-size:12.5px; }
.pt-member-feed { padding:18px 16px; display:flex; flex-direction:column; gap:14px;
  max-height:calc(100vh - 300px); overflow-y:auto; }

/* ---- request lifecycle states + Claude-working animation ---- */
.pt-msg-state { font-size:11.5px; margin:4px 8px 0; display:flex; align-items:center; gap:6px;
  color:var(--ink-muted); }
.pt-mine .pt-msg-state { justify-content:flex-end; }
.pt-state-pending { color:var(--ink-muted); }
.pt-state-processing { color:var(--st-progress-ink); font-weight:600; }
.pt-state-done { color:var(--st-live-ink); }
.pt-state-check { font-size:10.5px; letter-spacing:-1px; }
.pt-working-dots { display:inline-flex; align-items:center; gap:3px; }
.pt-working-dots span { width:5px; height:5px; border-radius:999px; background:currentColor;
  animation:pt-bounce 1.2s infinite ease-in-out; }
.pt-working-dots span:nth-child(2) { animation-delay:.15s; }
.pt-working-dots span:nth-child(3) { animation-delay:.3s; }
@keyframes pt-bounce {
  0%, 60%, 100% { transform:translateY(0); opacity:.35; }
  30% { transform:translateY(-4px); opacity:1; }
}
.pt-working-bubble { display:inline-flex; align-items:center; gap:8px;
  color:var(--st-progress-ink); font-weight:500; }
.pt-working-bubble .pt-working-dots span { background:var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .pt-working-dots span { animation:none; opacity:.8; }
}

/* ---- Claude running spark (Dispatch-style) — replaces the generic dots ---- */
.pt-spark { display:inline-flex; color:#D97757; }   /* Claude coral, both themes */
.pt-spark svg { width:13px; height:13px; display:block; transform-origin:center;
  animation:pt-spark-pulse 1.4s ease-in-out infinite; }
.pt-working-bubble { color:#C15F3C; font-weight:500; }
.pt-working-bubble .pt-spark svg { width:17px; height:17px; }
.pt-state-processing { color:#C15F3C; }
@media (prefers-color-scheme: dark) {
  .pt-working-bubble { color:#E8956F; }
  .pt-state-processing { color:#E8956F; }
}
@keyframes pt-spark-pulse {
  0%, 100% { transform:scale(.85) rotate(-10deg); opacity:.65; }
  50%      { transform:scale(1.08) rotate(10deg); opacity:1; }
}
@media (prefers-reduced-motion: reduce) {
  .pt-spark svg { animation:none; opacity:.9; }
}

/* Claude-access section (People tab) */
.pt-claude-note { font-size:12.5px; color:var(--ink-2); margin-bottom:10px; max-width:70ch; }

/* thread tools (admin) + danger button */
.pt-thread-tools { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 14px; border-bottom:1px solid var(--hair); }
.pt-thread-tools-who { font-size:12.5px; font-weight:600; color:var(--ink-2); }
.pt-thread-tools .pt-btn { padding:5px 11px; font-size:12px; }
.pt-btn-danger:hover { color:var(--st-blocked-ink); border-color:var(--st-blocked);
  background:var(--st-blocked-bg); }

/* ---- Activity feed: plain-language timeline of what changed ---- */
.act { max-width: 760px; }
.act-day { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-muted); margin:22px 0 8px; }
.act-day:first-child { margin-top:4px; }
.act-row { display:flex; align-items:baseline; gap:10px; padding:9px 0;
  border-top:1px solid var(--hair); font-size:14px; line-height:1.5; }
.act-app { flex:0 0 auto; min-width:104px; font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink-muted); }
.act-what { flex:1; color:var(--ink); overflow-wrap:anywhere; }
.act-tag { flex:0 0 auto; font-size:11.5px; color:var(--st-progress-ink);
  background:var(--accent-soft); border-radius:999px; padding:2px 9px; white-space:nowrap; }
/* something reaching customers is the one thing worth a colour of its own */
.act-row-live .act-what { font-weight:600; }
.act-tag-live { color:var(--st-live-ink); background:var(--st-live-bg);
  font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.act-what-more { margin-top:5px; }
.act-what-more > summary { font-size:12.5px; font-weight:500; color:var(--ink-muted);
  cursor:pointer; list-style:none; }
.act-what-more > summary::-webkit-details-marker { display:none; }
.act-what-more > summary::before { content:'›'; display:inline-block; margin-right:6px;
  transition:transform .12s ease; }
.act-what-more[open] > summary::before { transform:rotate(90deg); }
.act-what-more ul { margin:6px 0 0; padding-left:20px; }
.act-what-more li { font-size:13px; font-weight:400; color:var(--ink-muted); padding:1px 0; }
@media (max-width:640px) {
  .act-row { flex-wrap:wrap; gap:4px 10px; }
  .act-app { min-width:0; }
}

/* ---- Needs you: the front page ---- */
.needs { max-width: 760px; display:flex; flex-direction:column; gap:12px; }
.health { display:flex; align-items:center; gap:9px; font-size:14px; padding:11px 15px;
  border-radius:var(--radius-s); border:1px solid var(--hair); background:var(--surface); }
.health-dot { width:8px; height:8px; border-radius:999px; flex:0 0 auto; }
.health-ok .health-dot { background:var(--st-live); }
.health-ok { color:var(--ink-2); }
.health-bad { background:var(--st-blocked-bg); border-color:transparent; color:var(--st-blocked-ink);
  font-weight:600; }
.health-bad .health-dot { background:var(--st-blocked); }
.needs-clear { padding:26px 4px; color:var(--ink-muted); font-size:14px; }

.need { border:1px solid var(--hair); border-left-width:3px; border-radius:var(--radius-s);
  background:var(--surface); padding:14px 16px; display:flex; flex-direction:column; gap:7px; }
.need.pr-now   { border-left-color:var(--st-blocked); }
.need.pr-soon  { border-left-color:var(--st-confirm); }
.need.pr-later { border-left-color:var(--hair-strong); }
.need-top { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.need-prio { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  padding:3px 9px; border-radius:999px; flex:0 0 auto; }
.need-prio.pr-now   { background:var(--st-blocked-bg); color:var(--st-blocked-ink); }
.need-prio.pr-soon  { background:var(--st-confirm-bg); color:var(--st-confirm-ink); }
.need-prio.pr-later { background:var(--st-done-bg);    color:var(--st-done-ink); }
.need-title { font-size:15px; font-weight:600; color:var(--ink); flex:1; min-width:0; }
.need-why { font-size:13.5px; color:var(--ink-2); line-height:1.55; margin:0; }
.need-foot { display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap; margin-top:2px; }
.need-blocks { font-size:12px; font-weight:600; color:var(--st-progress-ink);
  background:var(--accent-soft); border-radius:999px; padding:3px 10px; }
.need-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-left:auto; }
.need-btn { font:inherit; font-size:12.5px; font-weight:600; padding:6px 13px; border-radius:8px;
  border:1px solid var(--hair-strong); background:transparent; color:var(--ink-2); cursor:pointer; }
.need-btn:hover { border-color:var(--accent); color:var(--accent); }
.need-btn:disabled { opacity:.5; cursor:default; }
.need-ok:hover { border-color:var(--st-live); color:var(--st-live-ink); background:var(--st-live-bg); }
.need-no:hover { border-color:var(--st-blocked); color:var(--st-blocked-ink); background:var(--st-blocked-bg); }

/* ---- view headings ---- */
.view-h { font-size:19px; font-weight:650; letter-spacing:-.01em; margin:2px 0 14px; }
.msg-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.msg-manage { font-size:12.5px; color:var(--ink-muted); text-decoration:none; }
.msg-manage:hover { color:var(--accent); }

/* ---- activity: collapsible day groups ---- */
.act-group { border:0; }
.act-group + .act-group { margin-top:2px; }
.act-day { list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-muted); padding:9px 0; user-select:none; }
.act-day::-webkit-details-marker { display:none; }
.act-day:hover { color:var(--ink-2); }
.act-chev { display:inline-block; transition:transform .15s ease; font-size:14px; line-height:1; }
.act-group[open] > .act-day > .act-chev { transform:rotate(90deg); }
.act-count { margin-left:auto; font-weight:600; letter-spacing:0; color:var(--ink-muted);
  background:var(--plane); border-radius:999px; padding:1px 8px; font-size:11px; }
.act-group:not([open]) + .act-group { border-top:1px solid var(--hair); }

/* ---- user menu ---- */
.usermenu { position:relative; margin-left:8px; }
.usermenu-btn { display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:13px;
  font-weight:600; padding:7px 12px; border-radius:9px; border:1px solid var(--hair-strong);
  background:var(--surface); color:var(--ink-2); cursor:pointer; }
.usermenu-btn:hover { color:var(--ink); border-color:var(--accent); }
.usermenu-panel { position:absolute; right:0; top:calc(100% + 6px); z-index:60; min-width:150px;
  display:flex; flex-direction:column; padding:5px; border-radius:10px;
  border:1px solid var(--hair-strong); background:var(--surface); box-shadow:var(--shadow-lift); }
.usermenu-panel a { padding:8px 11px; border-radius:7px; font-size:13.5px; color:var(--ink-2);
  text-decoration:none; }
.usermenu-panel a:hover { background:var(--plane); color:var(--ink); }

/* ---- settings page sections ---- */
.set-block { margin-bottom:16px; }
.set-label { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-muted); margin-bottom:8px; }

.set-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-size:14px; color:var(--ink); }
.set-dim { font-size:12.5px; color:var(--ink-muted); }

/* menu items that are buttons (the theme switch) sit flush with the links */
.usermenu-item { display:block; width:100%; text-align:left; font:inherit; font-size:13.5px;
  padding:8px 11px; border:0; border-radius:7px; background:transparent; color:var(--ink-2);
  cursor:pointer; }
.usermenu-item:hover { background:var(--plane); color:var(--ink); }

/* "a newer version is ready": one line on a phone (it used to wrap to three
   and sit over an Approve button), and it can be put away */
.updatebar { position:fixed; left:16px; right:16px; margin:0 auto; width:max-content;
  max-width:calc(100vw - 32px); bottom:calc(20px + env(safe-area-inset-bottom, 0px)); z-index:200;
  display:flex; align-items:center; gap:10px; padding:8px 8px 8px 14px; border-radius:999px;
  border:1px solid var(--hair-strong); background:var(--surface); box-shadow:var(--shadow-lift);
  font-size:13.5px; color:var(--ink); white-space:nowrap; }
.updatebar button { font:inherit; font-size:13px; font-weight:600; padding:5px 13px;
  border-radius:999px; border:0; background:var(--accent); color:#fff; cursor:pointer; }
.updatebar .updatebar-x { background:transparent; color:var(--ink-2); padding:5px 9px; font-size:16px; line-height:1; }
/* on a phone the bottom is the composer and the Approve buttons: the bar
   sits at the top instead */
@media (max-width: 900px) {
  .updatebar { top:calc(8px + env(safe-area-inset-top, 0px)); bottom:auto; }
}

/* ============================================================
   Hover: one clean highlight per box.

   `a:hover { text-decoration: underline }` is right for a link inside a
   sentence, but a card is an anchor too — so hovering a teammate box was
   underlining the name and the message text as well as lighting the border.
   Card-shaped things get exactly one signal: the box itself highlights.
   ============================================================ */

.card, .tp-box, .pt-apptile, .pagecard, .linkrow, .pt-thread-item,
.tab, .usermenu-panel a, .gap-affects a, .act-day {
  text-decoration: none;
}
.card:hover, .card:hover *,
.tp-box:hover, .tp-box:hover *,
.pt-apptile:hover, .pt-apptile:hover *,
.pagecard:hover, .pagecard:hover *,
.linkrow:hover, .linkrow:hover *,
.pt-thread-item:hover, .pt-thread-item:hover *,
.tab:hover, .tab:hover *,
.usermenu-panel a:hover, .gap-affects a:hover,
.act-day:hover, .act-day:hover * {
  text-decoration: none;
}

/* One treatment for every card-shaped hover: the border picks up the accent
   and the surface lifts a shade. No transform, no shadow, nothing moving. */
.card, .tp-box, .pt-apptile, .pagecard {
  transition: border-color .14s ease, background-color .14s ease;
}
.card:hover, .tp-box:hover, .pt-apptile:hover, .pagecard:hover {
  border-color: var(--accent);
  background: var(--surface-sunk);
  box-shadow: none;
  transform: none;
}
/* the status stripe down a project card stays its own colour */
.card:hover { border-left-color: var(--edge, var(--hair-strong)); }

/* collapsible day headers highlight as a row rather than recolouring text */
.act-day { border-radius: 7px; padding-left: 8px; padding-right: 8px; }
.act-day:hover { background: var(--surface-sunk); color: var(--ink-muted); }

/* The panel sets display:flex, which beats the UA rule for [hidden] — without
   this the menu is permanently open and no amount of toggling closes it. */
.usermenu-panel[hidden] { display: none; }
.set-help { font-size:12.5px; color:var(--ink-2); line-height:1.5; margin:0 0 10px; }
.set-wide { width:100%; justify-content:center; text-align:center; text-decoration:none; }

/* the admin's own account, at the top of the team page */
.pt-account { display:flex; flex-direction:column; gap:10px; padding:14px 16px; margin-bottom:20px;
  border:1px solid var(--hair); border-radius:var(--radius-s); background:var(--surface); }
.pt-account-who { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.pt-account-pw { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pt-account-pw .pt-input { flex:1 1 200px; margin:0; }
.pt-account-pw .pt-btn { flex:0 0 auto; }
.pt-pw-note { font-size:12.5px; color:var(--ink-muted); }
.pt-pw-note.is-ok  { color:var(--st-live-ink); }
.pt-pw-note.is-bad { color:var(--st-blocked-ink); }

/* .tab sets display:inline-flex, which beats the UA rule for [hidden] — the
   same trap the user menu hit. Without this the Settings page keeps its nav. */
.tabs .tab[hidden] { display: none; }

/* ---- a person's conversation, inside the dashboard shell ---- */
.person-view { display:flex; flex-direction:column; gap:14px; }
/* the person view carries chat + a task rail now — give it the room the
   member portal gets, instead of the 860px cap from its chat-only days */
.view:has(.person-view) { max-width: 1400px; }
.pv-back { font-size:12.5px; color:var(--ink-2); text-decoration:none; width:max-content; }
.pv-back:hover { color:var(--ink); }
.pv-head { display:flex; align-items:center; gap:11px; }
.pv-name { font-size:17px; font-weight:650; }
.pv-sub { font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-muted); }
.pv-feed { display:flex; flex-direction:column; gap:14px; padding:18px 16px;
  border:1px solid var(--hair); border-radius:var(--radius-s); background:var(--surface);
  max-height:calc(100vh - 330px); overflow-y:auto; }
.pv-msg { display:flex; flex-direction:column; gap:5px; align-items:flex-start; }
.pv-msg.is-mine { align-items:flex-end; }
.pv-meta { font-size:11.5px; color:var(--ink-muted); }
.pv-bubble { max-width:80%; padding:10px 13px; border-radius:12px; font-size:14px; line-height:1.55;
  border:1px solid var(--hair); background:var(--plane); color:var(--ink); }
.pv-member { background:var(--accent-soft); border-color:transparent; }
.pv-harsh  { background:var(--accent); border-color:transparent; color:#fff; }
.pv-system { background:var(--st-confirm-bg); border-color:transparent; color:var(--st-confirm-ink); }
.pv-img { display:block; margin-top:8px; max-width:340px; width:100%; border-radius:8px; }
.pv-reply { display:flex; gap:9px; align-items:flex-start; flex-wrap:wrap; }
.pv-select, .pv-text { font:inherit; border:1px solid var(--hair-strong); border-radius:9px;
  background:var(--plane); color:var(--ink); padding:9px 11px; }
.pv-select { flex:0 0 auto; font-size:13px; }
.pv-replylabel { font-size:12.5px; color:var(--ink-muted); align-self:center; }
.pv-text { flex:1 1 320px; resize:vertical; font-size:14px; }

/* ---- settings view (team management) inside the shell ---- */
.settings-view { max-width: 980px; }
.set-sec { margin-bottom:26px; }

/* per-app tabs at the top of a person's conversation */
.pv-headmain { display:flex; flex-direction:column; gap:6px; }
.pv-apptabs { display:flex; gap:6px; }
.pv-apptab { font:inherit; font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; padding:4px 12px; border-radius:999px; cursor:pointer;
  border:1px solid var(--hair-strong); background:transparent; color:var(--ink-muted); }
.pv-apptab { display:inline-flex; align-items:center; gap:6px; }
.pv-apptab:hover { border-color:var(--accent); color:var(--accent); }
.pv-apptab.is-on { background:var(--accent); border-color:transparent; color:#fff; }
/* an app you have not opened yet still holds something unseen */
.pv-tabdot { width:6px; height:6px; border-radius:50%; background:var(--accent); }
.pv-apptab.is-on .pv-tabdot { background:#fff; }

/* composer attachments */
.pv-replywrap { display:flex; flex-direction:column; gap:8px; }
.pv-clip { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:9px; cursor:pointer; color:var(--ink-muted);
  border:1px solid var(--hair-strong); background:var(--plane); }
.pv-clip:hover { color:var(--accent); border-color:var(--accent); }
.pv-files { display:flex; gap:7px; flex-wrap:wrap; }
.pv-filepick { display:inline-flex; align-items:center; gap:7px; font-size:12.5px;
  padding:4px 10px; border-radius:999px; background:var(--accent-soft);
  color:var(--st-progress-ink); }
.pv-filepick button { font:inherit; font-size:14px; line-height:1; border:0; background:none;
  color:inherit; cursor:pointer; padding:0; }
.pv-filechip { display:inline-block; margin-top:8px; font-size:12.5px; padding:5px 11px;
  border-radius:999px; background:var(--plane); border:1px solid var(--hair-strong);
  color:var(--ink-2); text-decoration:none; }

/* the list of changes waiting on an app */
.need-changes { margin-top:2px; }
.need-changes summary { cursor:pointer; font-size:12.5px; color:var(--ink-muted); list-style:none; }
.need-changes summary::-webkit-details-marker { display:none; }
.need-changes summary::before { content:'› '; display:inline-block; transition:transform .15s ease; }
.need-changes[open] summary::before { transform:rotate(90deg); }
.need-changes summary:hover { color:var(--ink-2); }
.need-changes ul { margin:8px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:4px; }
.need-changes li { font-size:12.5px; color:var(--ink-2); line-height:1.45; }

/* ---- deploy to live ---- */
.deploys { max-width: 860px; display:flex; flex-direction:column; gap:16px; }
.dp-intro { font-size:13.5px; color:var(--ink-2); max-width:70ch; margin:0; }
.dp-queue { display:flex; flex-direction:column; gap:8px; }
.dp-queued { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px;
  padding:10px 14px; border:1px solid var(--hair); border-radius:var(--radius-s);
  background:var(--surface); color:var(--ink-2); }
.dp-qstatus { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:3px 9px; border-radius:999px; }
.dp-q-requested { background:var(--st-confirm-bg); color:var(--st-confirm-ink); }
.dp-q-running   { background:var(--accent-soft); color:var(--st-progress-ink); }
.dp-q-deployed  { background:var(--st-live-bg); color:var(--st-live-ink); }
.dp-q-failed    { background:var(--st-blocked-bg); color:var(--st-blocked-ink); }
.dp-qnote { font-size:12px; color:var(--ink-muted); }
.dp-app { border:1px solid var(--hair); border-radius:var(--radius-s); background:var(--surface);
  padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.dp-apphead { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.dp-apphead strong { font-size:15px; }

/* feature batches: each one deploys as a unit, in any order */
.dp-batch { margin-top:12px; padding:12px 14px; border:1px solid var(--hair);
  border-radius:var(--radius-s); background:var(--bg); }
.dp-batch-tangled { border-style:dashed; }
.dp-batchhead { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.dp-batchname { font-weight:700; font-size:13.5px; }
.dp-tag { font-size:11px; font-weight:600; border-radius:999px; padding:2px 9px; white-space:nowrap; }
.dp-tag-free { color:var(--st-live-ink); background:var(--st-live-bg); }
.dp-tag-tangled { color:var(--st-confirm-ink); background:var(--st-confirm-bg); cursor:help;
  overflow:hidden; text-overflow:ellipsis; max-width:340px; }
.dp-count { font-size:12px; color:var(--ink-muted); }
.dp-held { font-size:11.5px; font-weight:600; padding:2px 10px; border-radius:999px;
  background:var(--st-confirm-bg); color:var(--st-confirm-ink); }
.dp-list { display:flex; flex-direction:column; }
.dp-row { display:flex; align-items:baseline; gap:10px; padding:7px 4px; cursor:pointer;
  border-top:1px solid var(--hair); font-size:13.5px; }
.dp-row:hover { background:var(--surface-sunk); }
.dp-row input { accent-color:var(--accent); flex:0 0 auto; position:relative; top:2px; }
.dp-subject { flex:1; color:var(--ink); }
.dp-meta { flex:0 0 auto; font-size:11.5px; color:var(--ink-muted); font-family:var(--mono); }
.dp-more { font-size:12px; color:var(--ink-muted); padding:6px 4px 0; }
.dp-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.dp-picked { font-size:12.5px; color:var(--st-progress-ink); font-weight:600; }
.pt-deploylink { display:block; margin-top:14px; font-size:13px; color:var(--accent);
  text-decoration:none; }
.pt-deploylink:hover { color:var(--ink); }
.need-more { list-style:none; font-size:12.5px; color:var(--ink-muted); margin-top:4px; }

/* member chat: granted-app tabs live in the header, uncoverable */
.pt-head-tabs { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.pt-head-tabs .pt-back { margin-right:4px; }
.pt-head-tabs .pv-apptab { text-decoration:none; }

/* ---- member Task board -------------------------------------------------
   Row colour IS the status: plain = sent, yellow = Claude has it,
   blue = being built, green = ready for the member to check. */
.pt-taskboard { display:flex; flex-direction:column; gap:14px; margin-top:16px; }
.pt-tasklist { padding:16px 18px; }
.pt-task { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:9px 12px;
  margin-top:8px; border:1px solid var(--hair); border-radius:var(--radius-s); font-size:13.5px;
  background:var(--surface); transition:background .3s ease; }
/* the title owns its line; state and the ack button share the next one, so
   the row stays readable even in the narrow rail */
.pt-task-title { flex:1 1 100%; min-width:0; overflow-wrap:anywhere; }
.pt-task-state { flex:0 0 auto; font-size:11.5px; color:var(--ink-muted); white-space:nowrap; }
.pt-task-ack { margin-left:auto; }
.pt-task-received { background:var(--st-confirm-bg); border-color:transparent; }
.pt-task-received .pt-task-state { color:var(--st-confirm-ink); }
.pt-task-working  { background:var(--st-progress-bg); border-color:transparent; }
.pt-task-working .pt-task-state { color:var(--st-progress-ink); }
.pt-task-done     { background:var(--st-live-bg); border-color:transparent; }
.pt-task-done .pt-task-state { color:var(--st-live-ink); font-weight:700; }
.pt-task-acked    { opacity:.75; }
/* "not doing" is not "ready": a declined task is legible but visibly closed,
   and it never carries the Done button that the ready state does. */
.pt-task-declined { background:transparent; border-style:dashed; opacity:.7; }
.pt-task-declined .pt-task-title { text-decoration:line-through; text-decoration-thickness:1px; }
.pt-task-declined .pt-task-state { color:var(--ink-muted); font-style:italic; }
.pt-task-ack { flex:0 0 auto; font-size:12px; padding:5px 12px; }
.pt-task-count { float:right; font-size:11.5px; font-weight:400; color:var(--ink-muted); }

/* admin person view: conversation left, the member's task board right */
.pv-grid { display:grid; grid-template-columns:minmax(0, 1fr) 400px; gap:18px; align-items:start; }
.pv-left { display:flex; flex-direction:column; gap:12px; min-width:0; }
.pv-grid > .pt-taskboard { margin-top:0; }
@media (max-width: 1100px) { .pv-grid { grid-template-columns:1fr; } }

/* ---- message ticks (sent → delivered → read) ----------------------------
   Ticks ride the meta line of the sender's own bubbles. Read = the accent,
   the portal's brand colour, per Harsh — deliberately not messenger green. */
.pt-ticks { display:inline-block; vertical-align:-1px; color:var(--ink-muted); }
.pt-ticks svg { display:inline; }
.pt-ticks-sent .pt-tick2 { display:none; }
.pt-ticks-read { color:var(--accent); }

/* ---- mobile: Messages | Tasks take turns --------------------------------
   The toggle only exists on phone widths; desktop keeps both panes. */
.mc-mtoggle { display:none; }
/* ≤900 (not 768): the Samsung Fold 7 unfolded inner screen is ~840-884 CSS px —
   a phone that must still get the slim bar + drawer + Messages|Tasks toggle,
   not the tall wrapping desktop header. */
@media (max-width: 900px) {
  .mc-mtoggle { display:flex; gap:8px; padding:2px; border:1px solid var(--hair);
    border-radius:10px; background:var(--surface); }
  .mc-mtoggle-btn { flex:1; display:inline-flex; align-items:center; justify-content:center;
    gap:7px; font:inherit; font-size:13.5px; font-weight:600; color:var(--ink-2);
    padding:9px 0; border:0; border-radius:8px; background:transparent; cursor:pointer; }
  .mc-mtoggle-btn.is-on { background:var(--accent-soft); color:var(--st-progress-ink); }
  .mc-mtoggle-badge { min-width:18px; height:18px; border-radius:999px; background:var(--ink-muted);
    color:#fff; font-size:11px; font-weight:700; display:inline-flex; align-items:center;
    justify-content:center; padding:0 5px; }
  .mc-mtoggle-badge-ready { background:var(--st-live); }

  /* one pane at a time */
  .pt-portal-grid[data-mview="chat"] > .pt-taskboard,
  .pv-grid[data-mview="chat"] > .pt-taskboard { display:none; }
  .pt-portal-grid[data-mview="tasks"] > .pt-portal-chatcol,
  .pv-grid[data-mview="tasks"] > .pv-left { display:none; }
  .pt-portal-grid[data-mview="tasks"] { height:auto; }
}

/* ---- Harsh's inbox: a chat he reads, answers happen through Claude ------ */
.inbox { max-width: 860px; margin: 0 auto; }
.ib-open { margin-left:auto; font-size:12.5px; font-weight:600; color:var(--accent); text-decoration:none; }
.ib-open:hover { text-decoration:underline; }
.ib-feed { display:flex; flex-direction:column; gap:14px; }
.ib-msg { max-width: 640px; }
.ib-meta { display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-muted); margin:0 6px 3px; }
.ib-tag { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  border-radius:999px; padding:2px 8px; }
.ib-decision { background:var(--st-confirm-bg); color:var(--st-confirm-ink); }
.ib-deploy { background:var(--st-progress-bg); color:var(--st-progress-ink); }
.ib-record { background:var(--st-done-bg); color:var(--st-done-ink); }
.ib-bubble { display:block; padding:11px 14px; border-radius:14px; background:var(--surface);
  border:1px solid var(--hair); color:var(--ink); text-decoration:none; font-size:14px; line-height:1.5; }
.ib-bubble:hover { border-color:var(--accent); }
.ib-bubble strong { display:block; margin-bottom:2px; }
.ib-body { color:var(--ink-2); display:block; }

/* ---- desktop: two independent scrolls, the page itself never moves ------
   A long task list must not drag the conversation (and vice versa): each
   pane is capped to the viewport and scrolls internally; the composer is
   pinned at the bottom of the chat column. Mobile keeps the toggle. */
@media (min-width: 1101px) {
  /* admin teammate view — the body becomes the clamp, so the real heights
     of the topbar and footer never need guessing */
  body:has(.person-view) { height: 100vh; overflow: hidden;
    display: flex; flex-direction: column; }
  body:has(.person-view) .footer { display: none; }
  .view:has(.person-view) { flex: 1 1 auto; min-height: 0; box-sizing: border-box;
    padding-bottom: 18px; overflow: hidden; width: 100%; }
  .person-view { height: 100%; min-height: 0; }
  .person-view .pv-grid { flex: 1 1 auto; min-height: 0; align-items: stretch; }
  .pv-left { min-height: 0; }
  .pv-left .pv-feed { flex: 1 1 auto; min-height: 0; max-height: none; }
  .pv-grid > .pt-taskboard { min-height: 0; overflow-y: auto; }

  /* member view: the grid is already viewport-capped; make sure the page
     around it cannot scroll either */
  .pt-body:has(.pt-portal-grid) { height: 100vh; overflow: hidden; }
  .pt-body:has(.pt-portal-grid) .pt-main { min-height: 0; overflow: hidden; }
  .pt-portal-grid { height: auto; flex: 1 1 auto; min-height: 0; }
}

/* ---- mobile drawer (≤900px, covers the Fold unfolded) — the tall header collapses to a slim bar ----
   Desktop is untouched: the hamburger, drawer and backdrop live only here. */
.menu-btn { display:none; }
.drawer, .drawer-backdrop { display:none; }
/* the `hidden` attribute ALWAYS wins — otherwise the media-query display
   rules below leave an invisible backdrop over the page eating every tap */
.drawer[hidden], .drawer-backdrop[hidden] { display:none !important; }
/* belt and braces: a closed backdrop never intercepts touches */
.drawer-backdrop:not(.is-open) { pointer-events:none; }
@media (max-width: 900px) {
  /* slim bar: hamburger + compact title, nothing else */
  .topbar-inner { padding:9px 14px; gap:11px; flex-wrap:nowrap; }
  .menu-btn { display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; flex:none; border:1px solid var(--hair-strong);
    border-radius:9px; background:var(--surface); color:var(--ink); cursor:pointer; }
  .brand { margin-right:auto; gap:8px; min-width:0; }
  .brand-sub { display:none; }
  #mc-title { font-size:16px; }
  .topbar .tabs, .topbar .usermenu { display:none; }
  /* the floating STAGING pill lives in the drawer on mobile */
  html.has-stgsw .stgsw, .stgsw { display:none !important; }

  .drawer-backdrop { display:block; position:fixed; inset:0; z-index:60;
    background:rgba(11,11,11,.42); opacity:0; transition:opacity .2s ease; }
  .drawer-backdrop.is-open { opacity:1; }
  .drawer { display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0;
    z-index:61; width:min(82vw, 320px); background:var(--surface);
    border-right:1px solid var(--hair); box-shadow:var(--shadow-lift);
    transform:translateX(-100%); transition:transform .22s ease;
    overflow-y:auto; padding:14px 12px; gap:2px; }
  .drawer.is-open { transform:translateX(0); }
  .drawer-head { display:flex; align-items:center; gap:10px; padding:4px 8px 12px; }
  .drawer-head strong { font-size:16px; }
  .drawer-close { margin-left:auto; width:34px; height:34px; display:inline-flex;
    align-items:center; justify-content:center; border:0; border-radius:8px;
    background:transparent; color:var(--ink-2); cursor:pointer; }
  .drawer-link { display:flex; align-items:center; gap:8px; padding:11px 12px;
    border-radius:9px; font-size:15px; font-weight:500; color:var(--ink);
    text-decoration:none; background:transparent; border:0; width:100%;
    text-align:left; font-family:inherit; cursor:pointer; }
  .drawer-link:hover, .drawer-link.is-active { background:var(--accent-soft); color:var(--st-progress-ink); }
  .drawer-link .tab-badge { margin-left:auto; }
  .drawer-sep { height:1px; background:var(--hair); margin:8px 6px; }
  .drawer-section-title { font-size:11px; font-weight:700; text-transform:uppercase;
    letter-spacing:.06em; color:var(--ink-muted); padding:4px 12px 6px; }
  .drawer-apps { display:flex; flex-wrap:wrap; gap:7px; padding:0 8px 4px; }
  .drawer-app { padding:7px 13px; border-radius:999px; font-size:13.5px; font-weight:600;
    color:var(--ink-2); text-decoration:none; border:1px solid var(--hair-strong);
    background:var(--surface); }
  .drawer-app.is-current { background:var(--ink); color:#fff; border-color:transparent; }
}

/* ---- mobile thread view: a FIXED SHELL, only the conversation scrolls -----
   ≤900px (covers the Fold unfolded). The page itself does not scroll: the
   slim bar + back link + name/app-pills + Messages|Tasks toggle pin at the
   top, the composer pins at the bottom, and only the message list scrolls
   between them. --app-vh (from visualViewport, set in JS) tracks the visible
   area so the composer stays above the keyboard; it falls back to 100dvh. */
@media (max-width: 900px) {
  /* --- admin teammate view --- */
  body:has(.person-view) { height: var(--app-vh, 100dvh); overflow: hidden;
    display: flex; flex-direction: column; }
  body:has(.person-view) .footer { display: none; }
  body:has(.person-view) .view { flex: 1 1 auto; min-height: 0; overflow: hidden;
    padding: 10px 12px 0; display: flex; flex-direction: column; max-width: none; }
  .person-view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
  .person-view > .pv-back,
  .person-view > .pv-head,
  .person-view > .mc-mtoggle { flex: 0 0 auto; }
  .person-view > .pv-grid { flex: 1 1 auto; min-height: 0; }
  .pv-grid[data-mview="chat"] > .pv-left { display: flex; flex-direction: column;
    height: 100%; min-height: 0; }
  .pv-left > .pv-feed { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
  .pv-left > .pv-replywrap { flex: 0 0 auto; padding-bottom: 8px; }
  .pv-grid[data-mview="tasks"] > .pt-taskboard { height: 100%; min-height: 0; overflow-y: auto; }

  /* --- member chat view --- */
  .pt-body:has(.pt-portal-grid) { height: var(--app-vh, 100dvh); overflow: hidden; }
  .pt-body:has(.pt-portal-grid) .pt-main { flex: 1 1 auto; min-height: 0; overflow: hidden;
    display: flex; flex-direction: column; padding-bottom: 0; }
  .pt-body:has(.pt-portal-grid) .pt-portal-grid { flex: 1 1 auto; min-height: 0; }
  .pt-portal-grid[data-mview="chat"] > .pt-portal-chatcol { display: flex; flex-direction: column;
    height: 100%; min-height: 0; }
  .pt-portal-chatcol > .pt-chat { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .pt-chat > .pt-chat-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .pt-chat > .pt-composer { flex: 0 0 auto; }
  .pt-portal-grid[data-mview="tasks"] > #pt-taskboard { height: 100%; min-height: 0; overflow-y: auto; }
}

/* ==========================================================================
   MOBILE REDESIGN — the navy shell (Harsh's Claude Design project, Sep 2026)
   Visual skin only, ≤900px (phones + the Fold unfolded). Desktop untouched:
   every rule below lives behind the media query or on mobile-only elements.
   Behaviour, logic and the service worker are exactly as before.
   ========================================================================== */

/* mobile-only elements stay out of desktop's way */
.pt-mhead { display: none; }
.mc-mtoggle-wrap { display: contents; }   /* invisible on desktop; the navy band on mobile */
.ib-daychip, .ib-note, .pv-ack-note { display: none; }

@media (max-width: 900px) {
  :root {
    --m-navy: #01004C;
    --m-navy-soft: #e9eaf5;
    --m-bubble-mine: #eaf2fd;
    --m-bubble-peer: #efeee8;
    --m-shell-dim: rgba(255,255,255,0.82);
    /* faint Estara star tile behind conversations (two navy stars, 160px) */
    --m-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%2301004C' fill-opacity='0.045'%3E%3Cpolygon transform='translate(18 16) scale(0.3)' points='50,6 62.5,32.5 91.8,36.4 70.5,56.5 75.9,85.6 50,71.5 24.1,85.6 29.5,56.5 8.2,36.4 37.5,32.5'/%3E%3Cpolygon transform='translate(98 92) scale(0.2) rotate(20 50 50)' points='50,6 62.5,32.5 91.8,36.4 70.5,56.5 75.9,85.6 50,71.5 24.1,85.6 29.5,56.5 8.2,36.4 37.5,32.5'/%3E%3C/g%3E%3C/svg%3E");
    --m-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
    --m-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='M5 12l7-7 7 7'/%3E%3C/svg%3E");
    --m-attach: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301004C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
    --m-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23898781' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  }
  :root[data-theme="dark"] {
    --m-bubble-mine: #2a3d8f;
    --m-bubble-peer: #16165e;
    --m-navy-soft: #1e1e6a;
    --m-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%23ffffff' fill-opacity='0.035'%3E%3Cpolygon transform='translate(18 16) scale(0.3)' points='50,6 62.5,32.5 91.8,36.4 70.5,56.5 75.9,85.6 50,71.5 24.1,85.6 29.5,56.5 8.2,36.4 37.5,32.5'/%3E%3Cpolygon transform='translate(98 92) scale(0.2) rotate(20 50 50)' points='50,6 62.5,32.5 91.8,36.4 70.5,56.5 75.9,85.6 50,71.5 24.1,85.6 29.5,56.5 8.2,36.4 37.5,32.5'/%3E%3C/g%3E%3C/svg%3E");
  }

  body { font-family: 'Plus Jakarta Sans', var(--sans); }

  /* ---- the shell: every top bar is one navy block ------------------------ */
  .topbar { background: var(--m-navy); border-bottom: 0; }
  .topbar-inner { padding: max(9px, env(safe-area-inset-top)) 14px 9px; }
  .menu-btn { border: 0; background: transparent; color: #fff; width: 44px; height: 44px; }
  .brand-mark { width: 24px; height: 24px; border-radius: 6px; border: 0; box-shadow: none;
    background: transparent var(--mc-logo) center/contain no-repeat; }
  .brand-text h1, #mc-title, #pt-title { color: #fff; font-size: 16px; font-weight: 700;
    letter-spacing: -0.01em; }

  /* ---- member thread: back + Claude + app pills, all in the navy --------- */
  .pt-body:has(.pt-portal-grid) .topbar { display: none; }
  .pt-body:has(.pt-portal-grid) .pt-main { padding: 0; gap: 0; }
  .pt-mhead { display: flex; align-items: center; gap: 8px;
    background: var(--m-navy); color: #fff;
    padding: max(4px, env(safe-area-inset-top)) 16px 12px 6px; }
  .pt-mhead-back { flex: none; width: 44px; height: 44px;
    background: var(--m-chevron) center/22px no-repeat; font-size: 0; }
  .pt-mhead-avatar { flex: none; width: 40px; height: 40px; border-radius: 20px;
    background: #fff; display: flex; align-items: center; justify-content: center; }
  .pt-mhead-avatar svg { width: 18px; height: 18px; display: block; }
  .pt-mhead-main { flex: 1; min-width: 0; display: flex; flex-direction: column;
    gap: 5px; padding-left: 4px; }
  .pt-mhead-name { font-size: 17px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
  .pt-mhead-pills { display: flex; gap: 6px; }
  .pt-mhead-sub { font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: rgba(255,255,255,0.7); }

  /* app pills, shared look for the member header and Harsh's pv-apptabs */
  .pt-mhead .pv-apptab, .pv-head .pv-apptab {
    height: 20px; padding: 0 8px; display: inline-flex; align-items: center; gap: 5px;
    border-radius: 10px; border: 1px solid rgba(255,255,255,0.35); background: transparent;
    color: var(--m-shell-dim); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; text-decoration: none; }
  .pt-mhead .pv-apptab.is-on, .pv-head .pv-apptab.is-on {
    background: #fff; border-color: transparent; color: var(--m-navy); }
  .pt-mhead .pv-tabdot, .pv-head .pv-tabdot { width: 6px; height: 6px; border-radius: 3px;
    background: #fff; }
  .pt-mhead .pv-apptab.is-on .pv-tabdot, .pv-head .pv-apptab.is-on .pv-tabdot {
    background: var(--m-navy); }

  /* ---- admin thread: same navy head over pv-back / pv-head --------------- */
  body:has(.person-view) .topbar { display: none; }
  body:has(.person-view) .view { padding: 0; }
  .person-view { gap: 0; position: relative; }
  .person-view > .pv-back { position: absolute; top: max(6px, env(safe-area-inset-top));
    left: 6px; width: 44px; height: 44px; z-index: 2; font-size: 0;
    background: var(--m-chevron) center/22px no-repeat; }
  .person-view > .pv-head { background: var(--m-navy); color: #fff; margin: 0;
    padding: max(10px, env(safe-area-inset-top)) 16px 12px 58px; gap: 8px; }
  .pv-head .avatar { width: 40px; height: 40px; border-radius: 20px; flex: none;
    background: rgba(255,255,255,0.16); color: #fff; font-size: 17px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; }
  .pv-head .pv-name { color: #fff; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
  .pv-head .pv-headmain { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .pv-head .pv-sub { color: rgba(255,255,255,0.7); }
  /* the app pills wrap rather than push the unread pill (and the page) past
     the edge of a narrow screen: the Fold's cover display is 344 px */
  .pv-head .pv-apptabs { gap: 6px; flex-wrap: wrap; }

  /* ---- the Messages | Tasks toggle rides inside the navy ----------------- */
  .mc-mtoggle-wrap { display: block; background: var(--m-navy); padding: 0 16px 12px;
    flex: 0 0 auto; }
  .mc-mtoggle { background: rgba(255,255,255,0.12); border: 0; border-radius: 12px;
    padding: 3px; gap: 0; }
  .mc-mtoggle-btn { height: 36px; padding: 0; border-radius: 9px; font-size: 14px;
    font-weight: 600; color: var(--m-shell-dim); }
  .mc-mtoggle-btn.is-on { background: #fff; color: var(--m-navy);
    box-shadow: 0 1px 2px rgba(0,0,0,0.18); }
  .mc-mtoggle-badge { min-width: 20px; height: 20px; font-size: 11.5px; }

  /* ---- conversation: star tile, WhatsApp bubbles -------------------------- */
  .pt-portal-chatcol > .pt-chat { background: transparent; border: 0; border-radius: 0;
    box-shadow: none; }
  .pt-chat > .pt-chat-scroll, .pv-left > .pv-feed {
    background: var(--plane) var(--m-tile); background-size: 160px 160px;
    border: 0; border-radius: 0; margin: 0; max-height: none;
    padding: 12px max(12px, calc((100% - 720px) / 2)) 8px; gap: 6px; }
  /* the navy header's chevron is the back control; the old text link above
     the shell (single-app members) would poke out over the navy */
  .pt-body:has(.pt-portal-grid) .pt-main > .pt-back { display: none; }
  .pv-left { gap: 0; }
  .pt-msg, .pv-msg .pv-bubble { max-width: min(80%, 560px); }
  .pt-msg-meta, .pv-meta { font-size: 11px; margin: 2px 6px 1px; }

  .pt-bubble, .pv-bubble { font-size: 15px; line-height: 1.4; padding: 9px 13px 7px;
    border-radius: 16px 16px 16px 4px; border: 1px solid transparent;
    overflow-wrap: anywhere; }  /* long URLs must break, not escape the bubble */
  .pt-mine .pt-bubble, .pv-msg.is-mine .pv-bubble {
    background: var(--m-bubble-mine); border-color: transparent;
    border-radius: 16px 16px 4px 16px; box-shadow: 0 1px 1px rgba(1,0,76,0.05); }
  .pt-bubble.pt-msg-claude, .pv-bubble.pv-claude {
    background: var(--surface); border-color: var(--hair); }
  .pt-bubble.pt-msg-harsh { background: var(--m-bubble-peer); border-color: transparent; }
  .pv-bubble.pv-harsh { background: var(--m-bubble-mine); color: var(--ink); }
  .pv-bubble.pv-member { background: var(--m-bubble-mine); }

  /* request lifecycle lines: delivered → working → answered */
  .pt-msg-state { font-size: 11.5px; font-weight: 600; }
  .pt-state-done { color: #0b7a0b; }
  /* the "Claude is working…" typing bubble becomes the design's quiet line */
  #pt-working .pt-msg-meta { display: none; }
  #pt-working .pt-working-bubble { background: transparent; border: 0; box-shadow: none;
    padding: 2px; font-size: 11.5px; font-weight: 600; }

  /* ---- composer: attach circle, pill input, round navy send -------------- */
  .pt-chat > .pt-composer, .pv-left > .pv-replywrap {
    background: var(--surface); border-top: 1px solid var(--hair); margin: 0;
    padding: 8px max(12px, calc((100% - 720px) / 2))
             calc(8px + env(safe-area-inset-bottom)); }
  .pt-composer-row, .pv-reply { display: flex; flex-wrap: nowrap; gap: 8px;
    align-items: flex-end; }
  .pt-iconbtn, .pv-clip { flex: none; width: 44px; height: 44px; border-radius: 22px;
    border: 1px solid var(--hair); background: var(--surface) var(--m-attach)
    center/20px no-repeat; font-size: 0; }
  .pv-clip svg { display: none; }
  .pt-ta, .pv-text { flex: 1 1 auto; height: 44px; min-height: 44px; resize: none;
    border: 1px solid var(--hair); border-radius: 22px; background: var(--surface);
    padding: 11px 16px; font-size: 15px; line-height: 1.3; }
  .pt-ta::placeholder, .pv-text::placeholder { white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; }
  .pt-btn-send, #pv-send.pt-btn { flex: none; width: 44px; height: 44px; padding: 0;
    border-radius: 22px; font-size: 0;
    background: var(--m-navy) var(--m-send) center/20px no-repeat; }
  .pt-composer-foot { margin-top: 2px; min-height: 0; }
  .pt-hint { display: none; }

  /* ---- task board: the colour is the status ------------------------------ */
  .pt-portal-grid > .pt-taskboard, .pv-grid > .pt-taskboard {
    margin-top: 0; gap: 8px; background: var(--plane);
    padding: 14px max(12px, calc((100% - 720px) / 2)) 20px; }
  .pt-taskboard .panel { background: transparent; border: 0; box-shadow: none;
    padding: 0; border-radius: 0; }
  .pt-h3 { font-size: 11.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--ink-2); margin: 6px 4px 10px; }
  .pt-h3 .pt-task-count { font-size: 11.5px; font-weight: 600; letter-spacing: 0;
    text-transform: none; }
  .pt-task { border-radius: 12px; padding: 12px 14px; gap: 8px 12px; }
  .pt-task-title { font-size: 15px; font-weight: 500; line-height: 1.35; }
  .pt-task-state { display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700; }
  .pt-task-state::before { content: ''; width: 8px; height: 8px; border-radius: 4px;
    background: #c9c8c1; }
  .pt-task-received { border-color: #f3e2b3; }
  .pt-task-received .pt-task-state::before { background: var(--st-confirm); }
  .pt-task-working { border-color: #d3e2f7; }
  .pt-task-working .pt-task-state::before { background: var(--st-progress); }
  .pt-task-done { border-color: #cfe9cf; }
  .pt-task-done .pt-task-state { color: #0b7a0b; }
  .pt-task-done .pt-task-state::before { background: var(--st-live); }
  .pt-task-ack { flex: 1 1 100%; height: 44px; border-radius: 10px; margin: 2px 0 0;
    background: var(--m-navy); border-color: transparent; color: #fff;
    font-size: 14px; font-weight: 700; }
  .pv-ack-note { display: block; flex: 1 1 100%; font-size: 12px; color: #0b7a0b;
    opacity: 0.8; }
  .pt-task-acked { opacity: 1; background: transparent; border: 1px solid var(--hair);
    color: var(--ink-2); flex-wrap: nowrap; align-items: center; }
  .pt-task-acked::before { content: ''; flex: none; width: 16px; height: 16px;
    background: var(--m-check) center/contain no-repeat; }
  .pt-task-acked .pt-task-title { flex: 1 1 auto; font-size: 14.5px; }
  .pt-task-acked .pt-task-state::before { display: none; }
  .pt-task-acked .pt-task-state { font-weight: 500; color: var(--ink-muted); }

  /* ---- Harsh's inbox: dated stream between navy head and a read-only note - */
  body:has(.inbox) { height: var(--app-vh, 100dvh); overflow: hidden;
    display: flex; flex-direction: column; }
  body:has(.inbox) .footer { display: none; }
  body:has(.inbox) .view { flex: 1 1 auto; min-height: 0; overflow: hidden;
    padding: 0; max-width: none; display: flex; flex-direction: column; }
  .inbox { max-width: none; margin: 0; flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; }
  .inbox .msg-head { background: var(--m-navy); color: #fff; margin: 0;
    padding: 10px 16px 14px; flex: 0 0 auto; display: flex; align-items: baseline; }
  .inbox .view-h { color: #fff; margin: 0; font-size: 18px; font-weight: 700; }
  .inbox .msg-manage { color: rgba(255,255,255,0.85); }
  .ib-feed { flex: 1 1 auto; min-height: 0; overflow-y: auto;
    background: var(--plane) var(--m-tile); background-size: 160px 160px;
    padding: 12px max(12px, calc((100% - 720px) / 2)) 8px; gap: 8px; }
  .ib-msg { max-width: min(94%, 640px); }
  .ib-daychip { display: block; align-self: center; font-size: 11.5px; font-weight: 600;
    color: var(--ink-2); background: var(--surface); border: 1px solid var(--hair);
    border-radius: 999px; padding: 4px 10px; margin: 4px 0; }
  .ib-tag { border-radius: 6px; letter-spacing: 0.08em; }
  .ib-bubble { border-radius: 4px 14px 14px 14px; }
  .ib-msg:has(.ib-decision) .ib-bubble { border-color: #f3e2b3; }
  .ib-msg:has(.ib-deploy) .ib-bubble { border-color: #d3e2f7; }
  .ib-note { display: block; flex: 0 0 auto; text-align: center; font-size: 12px;
    color: var(--ink-muted); background: var(--surface); border-top: 1px solid var(--hair);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }

  /* ---- drawer: navy brand block, navy-tinted backdrop --------------------- */
  .drawer-backdrop { background: rgba(1,0,76,0.45); }
  .drawer { padding: 0 0 14px; gap: 2px; }
  .drawer > nav, .drawer > .drawer-section-title, .drawer > .drawer-apps,
  .drawer > .drawer-account { margin-left: 12px; margin-right: 12px; }
  .drawer-head { background: var(--m-navy); color: #fff;
    padding: max(14px, env(safe-area-inset-top)) 12px 14px 20px;
    gap: 12px; margin-bottom: 10px; }
  .drawer-head .brand-mark { width: 34px; height: 34px; }
  .drawer-head-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .drawer-head strong { font-size: 17px; letter-spacing: -0.01em; }
  .drawer-sub { font-size: 12px; color: rgba(255,255,255,0.7); }
  .drawer-close { color: #fff; width: 44px; height: 44px; }
  .drawer-link { height: 48px; padding: 0 14px; border-radius: 10px;
    font-size: 16px; font-weight: 600; }
  .drawer-link.is-active { background: var(--m-navy-soft); color: var(--m-navy);
    font-weight: 700; }
  .drawer-link .tab-badge { background: var(--m-navy); color: #fff; min-width: 22px;
    height: 22px; border-radius: 11px; padding: 0 7px; font-size: 12px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; }
  .drawer-link .tab-badge:empty { display: none; }
  .drawer-section-title { display: flex; align-items: center; gap: 6px;
    font-size: 11px; letter-spacing: 0.1em; color: var(--st-confirm-ink); }
  #drawer-username { color: var(--ink); font-size: 15px; font-weight: 700;
    text-transform: none; letter-spacing: 0; }
  .drawer-section-title::before { content: ''; width: 7px; height: 7px;
    border-radius: 4px; background: var(--st-confirm); }
  #drawer-username::before { display: none; }
  .drawer-apps { gap: 8px; padding: 2px 8px 4px; }
  .drawer-app { height: 34px; padding: 0 14px; display: inline-flex; align-items: center;
    border-radius: 17px; font-size: 13.5px; }
  .drawer-app.is-current { background: var(--m-navy); border-color: var(--m-navy); }
  .drawer-account .drawer-link { height: 46px; font-size: 15px; font-weight: 500; }
}

/* dark scheme fallback for the mobile skin when no explicit choice is stored */
@media (max-width: 900px) and (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --m-bubble-mine: #2a3d8f;
    --m-bubble-peer: #16165e;
    --m-navy-soft: #1e1e6a;
    --m-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%23ffffff' fill-opacity='0.035'%3E%3Cpolygon transform='translate(18 16) scale(0.3)' points='50,6 62.5,32.5 91.8,36.4 70.5,56.5 75.9,85.6 50,71.5 24.1,85.6 29.5,56.5 8.2,36.4 37.5,32.5'/%3E%3Cpolygon transform='translate(98 92) scale(0.2) rotate(20 50 50)' points='50,6 62.5,32.5 91.8,36.4 70.5,56.5 75.9,85.6 50,71.5 24.1,85.6 29.5,56.5 8.2,36.4 37.5,32.5'/%3E%3C/g%3E%3C/svg%3E");
  }
}

/* ==========================================================================
   DESKTOP REDESIGN — the navy shell at full width (Harsh's Claude Design
   desktop project, Sep 2026). Paint only, ≥901px: the mobile skin above is
   untouched, and every behaviour (two-column independent scrolls, pinned
   composer, tabs + badge, STAGING switcher, member-only Done, read-only
   inbox) keeps its exact wiring.
   ========================================================================== */
@media (min-width: 901px) {
  :root {
    /* navy-tinted neutrals from the design's token table */
    --ink: #16162a;
    --ink-2: #55556a;
    --ink-muted: #8a8a99;
    --st-live: #2eb85c;
    --dk-navy: #01004C;
    --dk-badge: #f2b632;
    --dk-btn: #01004C;
    --dk-btn-ink: #fff;
    --dk-btn-hover: #0d0d66;
    --dk-avatar: #4c4ca6;
    --dk-bubble-mine: #eaf2fd;
    --dk-bubble-mine-bd: #eaf2fd;
    --dk-bubble-third: #efeee8;
    --dk-bubble-third-bd: #efeee8;
    --dk-bubble-claude: #fcfcfb;
    --dk-bubble-claude-bd: #e1e0d9;
    --dk-input: #fff;
    --dk-tick-unread: #8a8a99;
    --dk-lifecycle: #0b7a0b;
    --dk-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%2301004C' fill-opacity='.045'%3E%3Cpath d='M40 14Q44.4 31.6 62 36Q44.4 40.4 40 58Q35.6 40.4 18 36Q35.6 31.6 40 14Z'/%3E%3Cpath d='M128 19Q130.2 27.8 139 30Q130.2 32.2 128 41Q125.8 32.2 117 30Q125.8 27.8 128 19Z'/%3E%3Cpath d='M130 94Q134.4 111.6 152 116Q134.4 120.4 130 138Q125.6 120.4 108 116Q125.6 111.6 130 94Z'/%3E%3Cpath d='M56 116Q58.4 125.6 68 128Q58.4 130.4 56 140Q53.6 130.4 44 128Q53.6 125.6 56 116Z'/%3E%3C/g%3E%3C/svg%3E");
  }
  body { font-family: 'Plus Jakarta Sans', var(--sans); }

  /* ---- the navy bar: one block, white pills -------------------------------- */
  .topbar { background: var(--dk-navy); backdrop-filter: none;
    border-bottom: 1px solid transparent; }
  .topbar-inner { max-width: 1176px; padding: 12px 0; gap: 24px; }
  /* the mark carries its own green dot, so it needs no tile and no second
     status dot bolted to its corner */
  .brand-mark { width: 34px; height: 34px; border-radius: 8px; border: 0;
    background: transparent var(--mc-logo) center/contain no-repeat;
    box-sizing: border-box; }
  .brand-text h1 { color: #fff; font-size: 16px; font-weight: 700; }
  .brand-sub { color: rgba(255,255,255,0.66); font-size: 12px; }
  .brand-sub a, .pt-head-tabs .pt-back { color: rgba(255,255,255,0.8); }
  .tab { height: 36px; padding: 0 14px; font-size: 14px; font-weight: 600;
    color: rgba(255,255,255,0.78); border: 0; }
  .tab:hover { background: rgba(255,255,255,0.1); color: #fff; }
  .tab.is-active, .tab[aria-current="page"] { background: #fff; color: var(--dk-navy);
    border-color: transparent; box-shadow: none; }
  .tab.is-active:hover, .tab[aria-current="page"]:hover { background: #fff;
    color: var(--dk-navy); }
  .tab-badge { min-width: 20px; height: 20px; padding: 0 6px;
    background: var(--dk-badge); color: var(--dk-navy); font-size: 12px;
    font-weight: 800; line-height: 20px; }
  .usermenu-btn { height: 36px; padding: 0 12px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.28); background: transparent; color: #fff;
    font-size: 14px; font-weight: 600; }
  .usermenu-btn:hover { background: rgba(255,255,255,0.1); border-color:
    rgba(255,255,255,0.28); color: #fff; }
  .usermenu-btn[aria-expanded="true"] { background: #fff; border-color: #fff;
    color: var(--dk-navy); }
  .usermenu-panel { min-width: 190px; padding: 6px; border-radius: 12px;
    border: 1px solid var(--hair); background: var(--surface);
    box-shadow: 0 16px 40px rgba(1,0,76,0.16); }
  .usermenu-panel a, .usermenu-item { padding: 10px 12px; border-radius: 8px;
    font-size: 14px; font-weight: 500; color: var(--ink); }

  /* member portal shell shares the bar */
  .pt-mark { background: transparent var(--mc-logo) center/contain no-repeat; }
  .pt-head-tabs .pv-apptab { border-color: rgba(255,255,255,0.35);
    background: transparent; color: rgba(255,255,255,0.85); }
  .pt-head-tabs .pv-apptab.is-on { background: #fff; border-color: #fff;
    color: var(--dk-navy); }
  .pt-head-tabs .pv-apptab .pv-tabdot { background: #fff; }
  .pt-head-tabs .pv-apptab.is-on .pv-tabdot { background: var(--dk-navy); }

  /* ---- chips instead of stripes -------------------------------------------
     The status colour moves off the card edge and onto the chip alone; the
     priority/status classes still drive which chip colour is used. */
  .card, .need,
  .card.e-live, .card.e-in_progress, .card.e-blocked,
  .card.e-needs_confirmation, .card.e-done,
  .need.pr-now, .need.pr-soon, .need.pr-later {
    border-left-width: 1px; border-left-color: var(--hair); border-radius: 12px; }
  .card:hover, .card:hover.e-live, .card:hover.e-in_progress,
  .card:hover.e-blocked, .card:hover.e-needs_confirmation, .card:hover.e-done {
    border-color: var(--hair-strong); border-left-color: var(--hair-strong); }
  .need-prio, .need-prio.pr-now, .need-prio.pr-soon, .need-prio.pr-later {
    border-radius: 999px; padding: 4px 8px; font-size: 11px;
    font-weight: 800; letter-spacing: 0.08em; border: 1px solid transparent; }
  .need-prio.pr-soon { background: var(--st-confirm-bg); border-color: #f3e2b3;
    color: #8a6100; }
  .need-prio.pr-now { background: var(--st-blocked-bg); border-color: #f0c4c4;
    color: var(--st-blocked-ink); }
  .need-prio.pr-later { background: var(--st-done-bg); border-color: var(--hair);
    color: var(--ink-2); }

  /* ---- the status card + Reload ------------------------------------------- */
  .fresh { background: var(--surface); border: 1px solid var(--hair);
    border-radius: 12px; padding: 10px 8px 10px 16px; }
  .fresh-dot { background: var(--st-live); }
  .fresh-btn { height: 32px; padding: 0 14px; border-radius: 10px;
    border: 1px solid var(--hair); background: var(--dk-input);
    color: var(--dk-navy); font-size: 13px; font-weight: 600; }
  .fresh-btn:hover { background: var(--plane); color: var(--dk-navy);
    border-color: var(--hair); }

  /* ---- portal: the chat pane becomes one card ------------------------------ */
  .pv-back { color: var(--ink-muted); font-size: 13px; font-weight: 500; }
  .pv-head .avatar { width: 40px; height: 40px; border-radius: 50%;
    background: var(--dk-avatar); color: #fff; font-size: 16px; font-weight: 700;
    display: grid; place-items: center; }
  .pv-name { font-size: 20px; font-weight: 700; }
  .pv-apptabs .pv-apptab, .pv-head .pv-apptab { height: 28px; padding: 0 12px;
    border-radius: 999px; border: 1px solid var(--hair); background: var(--surface);
    color: var(--ink-2); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; }
  .pv-apptabs .pv-apptab:hover { border-color: var(--dk-navy); color: var(--dk-navy); }
  .pv-apptabs .pv-apptab.is-on { background: var(--dk-navy);
    border-color: var(--dk-navy); color: #fff; }

  .pv-left { gap: 0; border: 1px solid var(--hair); border-radius: 14px;
    overflow: hidden; background: var(--surface); }
  .pv-left .pv-feed { border: 0; border-radius: 0; gap: 14px;
    background: var(--plane) var(--dk-tile); background-size: 160px 160px; }
  .pv-left .pv-replywrap { background: var(--surface);
    border-top: 1px solid var(--hair); padding: 12px 16px; }
  .pt-portal-chatcol > .pt-chat { border-radius: 14px; }
  .pt-chat > .pt-chat-scroll { background: var(--plane) var(--dk-tile);
    background-size: 160px 160px; }

  /* bubbles + meta, the shipped tokens at 72% width */
  .pv-bubble, .pt-bubble { border-radius: 16px 16px 16px 4px;
    border: 1px solid transparent; font-size: 14px; line-height: 1.5;
    max-width: 72%; overflow-wrap: anywhere; }
  .pt-msg { max-width: 72%; }
  .pt-msg .pt-bubble { max-width: none; }
  .pv-msg.is-mine .pv-bubble, .pt-mine .pt-bubble {
    background: var(--dk-bubble-mine); border-color: var(--dk-bubble-mine-bd);
    border-radius: 16px 16px 4px 16px; }
  .pv-bubble.pv-claude, .pt-bubble.pt-msg-claude {
    background: var(--dk-bubble-claude); border-color: var(--dk-bubble-claude-bd); }
  .pv-bubble.pv-harsh { background: var(--dk-bubble-mine); color: var(--ink); }
  .pv-bubble.pv-member { background: var(--dk-bubble-mine); }
  .pt-bubble.pt-msg-harsh { background: var(--dk-bubble-third);
    border-color: var(--dk-bubble-third-bd); }
  .pv-meta, .pt-msg-meta { font-size: 12px; font-weight: 500;
    color: var(--ink-muted); }
  .pt-ticks { color: var(--dk-tick-unread); }
  .pt-ticks-read { color: var(--accent); }
  .pt-state-done { color: var(--dk-lifecycle); }

  /* composer: hairline attach, navy send */
  .pv-clip, .pt-iconbtn { width: 44px; height: 44px; border-radius: 12px;
    border: 1px solid var(--hair); background: var(--dk-input);
    color: var(--ink-2); display: grid; place-items: center; }
  .pv-clip:hover, .pt-iconbtn:hover { background: var(--plane);
    color: var(--ink-2); border-color: var(--hair); }
  .pv-text, .pt-ta { border: 1px solid var(--hair); border-radius: 12px;
    background: var(--dk-input); font-size: 14px; }
  .pt-btn { background: var(--dk-btn); color: var(--dk-btn-ink);
    border-radius: 12px; font-weight: 700; }
  .pt-btn:hover { background: var(--dk-btn-hover); }
  .pt-btn-ghost { background: transparent; color: var(--ink-2); font-weight: 500; }
  .pt-btn-ok { background: var(--st-live); color: #fff; }
  .pt-btn-no { background: #d03b3b; color: #fff; }

  /* ---- task rail: cards in a card ------------------------------------------ */
  .pv-grid > .pt-taskboard, .pt-portal-grid > .pt-taskboard { gap: 16px; }
  .pt-tasklist { border-radius: 14px; padding: 16px 12px 12px; }
  .pt-h3 { font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
    text-transform: uppercase; color: #6b6b7b; margin: 0 4px 10px; }
  .pt-h3 .pt-task-count { font-weight: 600; color: var(--ink-muted);
    text-transform: none; letter-spacing: 0; }
  .pt-task { border-radius: 12px; padding: 12px 14px; font-size: 14px; }
  .pt-task-title { font-weight: 500; line-height: 1.4; }
  .pt-task-state { display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; }
  .pt-task-state::before { content: ''; width: 6px; height: 6px;
    border-radius: 50%; background: #8a8a99; }
  .pt-task-received { border-color: #f3e2b3; }
  .pt-task-received .pt-task-state { color: #8a6100; }
  .pt-task-received .pt-task-state::before { background: #e0a41c; }
  .pt-task-working { border-color: #d3e2f7; }
  .pt-task-working .pt-task-state { color: var(--accent); }
  .pt-task-working .pt-task-state::before { background: var(--accent); }
  .pt-task-done { border-color: #cfe9cf; }
  .pt-task-done .pt-task-state { color: var(--dk-lifecycle); }
  .pt-task-done .pt-task-state::before { background: var(--st-live); }
  .pt-task-acked { opacity: 1; color: var(--ink-2); }
  .pt-task-ack { flex: 1 1 100%; height: 36px; margin: 2px 0 0;
    border-radius: 10px; font-size: 13px; }
  .pv-ack-note { display: block; flex: 1 1 100%; font-size: 12px;
    font-style: italic; color: var(--ink-muted); }

  /* ---- inbox: the star tile behind a read-only stream ---------------------- */
  body:has(.inbox) .view { background: var(--dk-tile); background-size: 160px 160px; }
  .inbox .view-h { font-size: 20px; font-weight: 700; }
  .ib-tag { border-radius: 999px; padding: 3px 8px; font-size: 10.5px;
    font-weight: 800; letter-spacing: 0.07em; border: 1px solid transparent; }
  .ib-decision { border-color: #f3e2b3; color: #8a6100; }
  .ib-deploy { border-color: #d3e2f7; color: var(--accent); }
  .ib-record { background: var(--dk-bubble-third); border-color:
    var(--dk-bubble-third-bd); color: var(--ink-2); }
  .ib-bubble { border-radius: 16px 16px 16px 4px; padding: 14px 16px; }
  .ib-bubble:hover { border-color: var(--hair-strong); }
}

/* ---- desktop dark: navy planes, white primaries -------------------------- */
@media (min-width: 901px) {
  :root[data-theme="dark"] {
    --plane: #08082f;
    --surface: #0f0f42;
    --surface-sunk: #12124a;
    --hair: #26266e;
    --hair-strong: #2b2b7a;
    --ink: #f2f2f7;
    --ink-2: rgba(242,242,247,0.72);
    --ink-muted: rgba(242,242,247,0.55);
    --dk-btn: #f2f2f7;
    --dk-btn-ink: #01004C;
    --dk-btn-hover: #fff;
    --dk-avatar: #5c5cc4;
    --dk-bubble-mine: #2a3d8f;
    --dk-bubble-mine-bd: #2a3d8f;
    --dk-bubble-third: #1c1c56;
    --dk-bubble-third-bd: #2a2a70;
    --dk-bubble-claude: #16165e;
    --dk-bubble-claude-bd: #2b2b7a;
    --dk-input: #12124a;
    --dk-tick-unread: #8f8fb8;
    --dk-lifecycle: #7ad884;
    --st-confirm-bg: #33290f;
    --st-progress-bg: #14264d;
    --st-live-bg: #0f2e18;
    --st-done-bg: #12124a;
    --st-confirm-ink: #f2c25a;
    --st-progress-ink: #8dbbf5;
    --st-live-ink: #7ad884;
    --dk-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%23ffffff' fill-opacity='.07'%3E%3Cpath d='M40 14Q44.4 31.6 62 36Q44.4 40.4 40 58Q35.6 40.4 18 36Q35.6 31.6 40 14Z'/%3E%3Cpath d='M128 19Q130.2 27.8 139 30Q130.2 32.2 128 41Q125.8 32.2 117 30Q125.8 27.8 128 19Z'/%3E%3Cpath d='M130 94Q134.4 111.6 152 116Q134.4 120.4 130 138Q125.6 120.4 108 116Q125.6 111.6 130 94Z'/%3E%3Cpath d='M56 116Q58.4 125.6 68 128Q58.4 130.4 56 140Q53.6 130.4 44 128Q53.6 125.6 56 116Z'/%3E%3C/g%3E%3C/svg%3E");
  }
  :root[data-theme="dark"] .topbar { border-bottom-color: rgba(255,255,255,0.12); }
  :root[data-theme="dark"] .pt-task-received { border-color: #5c4a1c; }
  :root[data-theme="dark"] .pt-task-received .pt-task-state { color: #f2c25a; }
  :root[data-theme="dark"] .pt-task-received .pt-task-state::before { background: #f2c25a; }
  :root[data-theme="dark"] .pt-task-working { border-color: #2a4a8a; }
  :root[data-theme="dark"] .pt-task-working .pt-task-state { color: #8dbbf5; }
  :root[data-theme="dark"] .pt-task-working .pt-task-state::before { background: #8dbbf5; }
  :root[data-theme="dark"] .pt-task-done { border-color: #1f5a2c; }
  :root[data-theme="dark"] .pt-task-done .pt-task-state::before { background: #7ad884; }
  :root[data-theme="dark"] .pt-task-state::before { background: #7d7da3; }
  :root[data-theme="dark"] .ib-decision { border-color: #5c4a1c; color: #f2c25a; }
  :root[data-theme="dark"] .ib-deploy { border-color: #2a4a8a; color: #8dbbf5; }
  :root[data-theme="dark"] .need-prio { border-color: #5c4a1c; color: #f2c25a; }
}
@media (min-width: 901px) and (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --plane: #08082f;
    --surface: #0f0f42;
    --surface-sunk: #12124a;
    --hair: #26266e;
    --hair-strong: #2b2b7a;
    --ink: #f2f2f7;
    --ink-2: rgba(242,242,247,0.72);
    --ink-muted: rgba(242,242,247,0.55);
    --dk-btn: #f2f2f7;
    --dk-btn-ink: #01004C;
    --dk-btn-hover: #fff;
    --dk-avatar: #5c5cc4;
    --dk-bubble-mine: #2a3d8f;
    --dk-bubble-mine-bd: #2a3d8f;
    --dk-bubble-third: #1c1c56;
    --dk-bubble-third-bd: #2a2a70;
    --dk-bubble-claude: #16165e;
    --dk-bubble-claude-bd: #2b2b7a;
    --dk-input: #12124a;
    --dk-tick-unread: #8f8fb8;
    --dk-lifecycle: #7ad884;
    --st-confirm-bg: #33290f;
    --st-progress-bg: #14264d;
    --st-live-bg: #0f2e18;
    --st-done-bg: #12124a;
    --st-confirm-ink: #f2c25a;
    --st-progress-ink: #8dbbf5;
    --st-live-ink: #7ad884;
    --dk-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%23ffffff' fill-opacity='.07'%3E%3Cpath d='M40 14Q44.4 31.6 62 36Q44.4 40.4 40 58Q35.6 40.4 18 36Q35.6 31.6 40 14Z'/%3E%3Cpath d='M128 19Q130.2 27.8 139 30Q130.2 32.2 128 41Q125.8 32.2 117 30Q125.8 27.8 128 19Z'/%3E%3Cpath d='M130 94Q134.4 111.6 152 116Q134.4 120.4 130 138Q125.6 120.4 108 116Q125.6 111.6 130 94Z'/%3E%3Cpath d='M56 116Q58.4 125.6 68 128Q58.4 130.4 56 140Q53.6 130.4 44 128Q53.6 125.6 56 116Z'/%3E%3C/g%3E%3C/svg%3E");
  }
  :root:where(:not([data-theme="light"])) .topbar { border-bottom-color: rgba(255,255,255,0.12); }
  :root:where(:not([data-theme="light"])) .pt-task-received { border-color: #5c4a1c; }
  :root:where(:not([data-theme="light"])) .pt-task-received .pt-task-state { color: #f2c25a; }
  :root:where(:not([data-theme="light"])) .pt-task-received .pt-task-state::before { background: #f2c25a; }
  :root:where(:not([data-theme="light"])) .pt-task-working { border-color: #2a4a8a; }
  :root:where(:not([data-theme="light"])) .pt-task-working .pt-task-state { color: #8dbbf5; }
  :root:where(:not([data-theme="light"])) .pt-task-working .pt-task-state::before { background: #8dbbf5; }
  :root:where(:not([data-theme="light"])) .pt-task-done { border-color: #1f5a2c; }
  :root:where(:not([data-theme="light"])) .pt-task-done .pt-task-state::before { background: #7ad884; }
  :root:where(:not([data-theme="light"])) .pt-task-state::before { background: #7d7da3; }
  :root:where(:not([data-theme="light"])) .ib-decision { border-color: #5c4a1c; color: #f2c25a; }
  :root:where(:not([data-theme="light"])) .ib-deploy { border-color: #2a4a8a; color: #8dbbf5; }
  :root:where(:not([data-theme="light"])) .need-prio { border-color: #5c4a1c; color: #f2c25a; }
}

/* ==========================================================================
   STAGING TRACKER — what is on each test copy but not live yet.
   Base rules (every width): the navy-shell tokens already carry the look, so
   there is nothing width-specific here.
   ========================================================================== */
.stg-fresh { font-size: 12.5px; color: var(--ink-muted); margin-left: auto; }
.stg-fresh.is-stale { color: var(--st-confirm-ink); font-weight: 600; }
.msg-head .fresh-btn { margin-left: 10px; }

.stg-warn { background: var(--st-confirm-bg); color: var(--st-confirm-ink);
  border-radius: var(--radius-s); padding: 10px 14px; font-size: 13.5px; margin-bottom: 14px; }

.stg-app { background: var(--surface); border: 1px solid var(--hair);
  border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.stg-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stg-name { font-size: 16px; font-weight: 700; }
.stg-count { display: inline-flex; align-items: center; gap: 6px; height: 24px;
  padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  border: 1px solid var(--hair); background: var(--plane); color: var(--ink-2); }
.stg-count::before { content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-muted); }
.stg-waiting { background: var(--st-confirm-bg); border-color: #f3e2b3; color: var(--st-confirm-ink); }
.stg-waiting::before { background: var(--st-confirm); }
.stg-clear { background: var(--st-live-bg); border-color: #cfe9cf; color: var(--st-live-ink); }
.stg-clear::before { background: var(--st-live); }
.stg-direct::before { display: none; }
.stg-stale { font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--st-blocked-ink); }
.stg-branch { margin-left: auto; font-size: 12px; color: var(--ink-muted); }

.stg-none { margin-top: 8px; font-size: 13.5px; color: var(--ink-muted); }

.stg-batches { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 6px; }
.stg-batch { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px;
  border-radius: 999px; background: var(--accent-soft); color: var(--st-progress-ink);
  font-size: 12.5px; font-weight: 600; }
.stg-bn { font-weight: 800; opacity: .75; font-variant-numeric: tabular-nums; }

.stg-list { margin-top: 10px; display: flex; flex-direction: column; }
.stg-row { display: flex; align-items: baseline; gap: 12px; padding: 7px 0;
  border-top: 1px solid var(--hair); font-size: 13.5px; }
.stg-row:first-child { border-top: 0; }
.stg-subject { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.stg-meta { flex: none; font-size: 11.5px; color: var(--ink-muted); white-space: nowrap; }
.stg-more { margin-top: 8px; font-size: 12.5px; color: var(--ink-muted); }

@media (max-width: 900px) {
  .stg-branch { margin-left: 0; flex-basis: 100%; }
  .stg-row { flex-wrap: wrap; gap: 2px 10px; }
  /* the heading takes the first line; freshness and Reload share the next */
  .msg-head:has(.stg-fresh) { flex-wrap: wrap; row-gap: 6px; }
  .msg-head .view-h { flex-basis: 100%; }
  .stg-fresh { margin-left: 0; }
  .msg-head .fresh-btn { margin-left: auto; }
}
.stg-queue { margin-top: 18px; border: 1px solid var(--hair); border-radius: 12px;
  background: var(--surface); padding: 4px 16px; }
.stg-queue > summary { cursor: pointer; padding: 10px 0; font-size: 13.5px;
  color: var(--ink-2); }
.stg-queue[open] > summary { border-bottom: 1px solid var(--hair); margin-bottom: 6px; }

/* stalled work is the one inbox kind that means something is going wrong */
.ib-stall { background: var(--st-blocked-bg); color: var(--st-blocked-ink); }
.ib-digest { background: var(--st-done-bg); color: var(--st-done-ink); }
.ib-msg:has(.ib-stall) .ib-bubble { border-color: #f0c4c4; }
@media (min-width: 901px) {
  .ib-stall { border-color: #f0c4c4; }
}
:root[data-theme="dark"] .ib-stall,
:root:where(:not([data-theme="light"])) .ib-stall { border-color: #6b2a2a; }

/* pinned stalls: live state, above the dated stream */
.ib-pinned { background: var(--surface); border: 1px solid #f0c4c4; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 12px; }
.ib-pinned-head { font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--st-blocked-ink); }
.ib-pin { display: flex; flex-direction: column; gap: 4px; padding-top: 12px;
  border-top: 1px solid var(--hair); }
.ib-pinned .ib-pin:first-of-type { padding-top: 0; border-top: 0; }
.ib-pin strong { font-size: 14.5px; line-height: 1.35; }
.ib-pin .ib-meta { margin: 0; }

/* ---- a decision you can actually make, right here ----------------------
   The inbox used to say "read-only, answer through Claude"; a decision now
   carries its own buttons so there is nothing to go and do somewhere else. */
.ib-pin.ib-actionable { gap: 6px; }
.ib-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ib-actions .need-btn { min-height: 40px; padding: 0 16px; border-radius: 10px;
  font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; }
/* Approve is the affirmative act and reads like one; "Not now" stays quiet so
   the pair is never a coin toss at a glance. */
.ib-actions .need-ok { background: var(--st-live); border-color: transparent; color: #fff; }
.ib-actions .need-ok:hover { background: var(--st-live-ink); border-color: transparent; color: #fff; }
.ib-actions .need-no { background: var(--surface); border-color: var(--hair-strong); color: var(--ink-2); }
.ib-actions .need-no:hover { border-color: var(--st-blocked); color: var(--st-blocked-ink);
  background: var(--st-blocked-bg); }
.ib-open-thread { margin-left: auto; font-size: 12.5px; font-weight: 600;
  color: var(--ink-muted); text-decoration: none; }
.ib-open-thread:hover { color: var(--accent); }
.ib-result { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ib-done-ok { opacity: .75; }
.ib-done-ok .ib-result { color: var(--st-live-ink); }
.ib-done-no { opacity: .6; }
.ib-done-ok .ib-actions, .ib-done-no .ib-actions { display: none; }

/* the phone is where he actually taps these: full-width, thumb-sized */
@media (max-width: 900px) {
  .ib-actions { gap: 8px; }
  .ib-actions .need-btn { flex: 1 1 44%; min-height: 46px; justify-content: center; }
  .ib-open-thread { flex: 1 1 100%; margin-left: 0; text-align: center; padding-top: 2px; }
}

/* ---- a decision must always be answerable ------------------------------
   A long body used to make the card taller than the screen. The inbox shell
   does not scroll on a phone, so the buttons were simply clipped away: the
   decision was un-actionable from the device Harsh actually uses.

   Three things keep them reachable, in order of importance:
     1. the body is bounded and scrolls inside the card, so no single
        decision can grow without limit;
     2. the actions stick to the bottom of the card, so they stay on screen
        while the text is being read;
     3. the pinned region itself scrolls, so several long decisions still
        cannot push anything out of reach. */
/* the pinned region and its cards are flex children of the inbox column, so
   they must be told NOT to shrink — otherwise bounding them collapses them */
.ib-pinned { flex: 0 0 auto; }
.ib-pin { flex: 0 0 auto; }
.ib-pin.ib-actionable { display: flex; flex-direction: column; }
.ib-pin.ib-actionable .ib-body {
  display: block; min-height: 0;
  max-height: 42vh; overflow-y: auto;
  overscroll-behavior: contain;          /* reading the note never scrolls the page */
  -webkit-overflow-scrolling: touch;
}
.ib-actions {
  position: sticky; bottom: 0; z-index: 2;
  margin-top: 10px; padding-top: 10px;
  background: var(--surface);
  /* a soft lift so text passing underneath reads as "there is more above" */
  box-shadow: 0 -10px 12px -10px rgba(11, 11, 11, .25);
}
.ib-pinned { max-height: 66vh; overflow-y: auto; overscroll-behavior: contain; }

@media (max-width: 900px) {
  /* the phone has less room and a gesture bar to clear */
  .ib-pin.ib-actionable .ib-body { max-height: 34vh; }
  .ib-pinned { max-height: 62vh; }
  .ib-actions { padding-bottom: max(2px, env(safe-area-inset-bottom)); }
  /* the read-only footnote must never sit under the home indicator */
  .ib-note { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* the tracker's own re-check: a working spinner, and visibly not the service
   worker's "a newer version is ready" reload */
.stg-recheck { display: inline-flex; align-items: center; gap: 7px; }
.stg-recheck.is-working::before {
  content: ''; width: 12px; height: 12px; flex: none;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: stg-spin .7s linear infinite;
}
@keyframes stg-spin { to { transform: rotate(360deg); } }
.stg-recheck:disabled { opacity: .8; cursor: progress; }
@media (prefers-reduced-motion: reduce) {
  .stg-recheck.is-working::before { animation: none; opacity: .6; }
}

/* ---- UNREAD, PER ACCOUNT --------------------------------------------------
   A count on each app tab (this viewer's unread for that app), and a
   down-arrow that only shows itself while the reader is away from the end of
   the conversation. The count is drawn from currentColor so it is legible on
   a plain tab, on the accent-filled active tab, and on the navy portal
   header, without three sets of colours to keep in step. */

.pv-sub .pv-tabnum { margin-left: 7px; vertical-align: 1px; }
.pv-tabnum {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px;
  font-size: 10.5px; font-weight: 800; line-height: 1; letter-spacing: 0;
  background: rgba(127, 127, 127, .22);                       /* fallback */
  background: color-mix(in srgb, currentColor 20%, transparent);
}

/* the arrow floats over the conversation: a sticky layer of no height, so it
   adds nothing to the scroll and never pushes the reply box down. The
   negative margin cancels the feed's own 14px flex gap. */
.mc-jumpwrap {
  position: sticky; bottom: 0; z-index: 3;
  align-self: stretch; height: 0; margin-top: -14px;
  overflow: visible; pointer-events: none;
}
.mc-jump {
  position: absolute; right: 2px; bottom: 10px;
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hair); background: var(--surface); color: var(--ink-2);
  box-shadow: 0 8px 20px -8px rgba(11, 11, 11, .45);
  cursor: pointer; pointer-events: none;
  opacity: 0; transform: translateY(6px) scale(.94);
  transition: opacity .16s ease, transform .16s ease;
}
.mc-jumpwrap.is-on .mc-jump { opacity: 1; transform: none; pointer-events: auto; }
.mc-jump:hover { border-color: var(--accent); color: var(--accent); }
.mc-jump:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 900px) {
  .mc-jump { right: 4px; bottom: max(10px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .mc-jump { transition: none; }
}

/* ---- WHEN IT WAS SAID -----------------------------------------------------
   The day once, on a divider; the time in the corner of each bubble; and while
   a long conversation is being scrolled, the day rides along at the top. */

.mc-daysep {
  align-self: center; display: flex; justify-content: center;
  margin: 4px 0 2px; max-width: 100%;
}
.mc-daysep span {
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--hair); border-radius: 999px; padding: 4px 12px;
}

/* the float lets a short message keep the time on its own last line, the way a
   messenger does; flow-root keeps that float inside the bubble */
.pv-bubble, .pt-bubble { display: flow-root; }
.mc-time {
  float: right; margin: 5px 0 -1px 12px;
  font-size: 10.5px; line-height: 1.5; white-space: nowrap;
  color: var(--ink-muted); opacity: .9; user-select: none;
}

.mc-daystick {
  position: sticky; top: 0; z-index: 4;
  align-self: stretch; height: 0; margin-bottom: -14px;
  overflow: visible; pointer-events: none;
}
.mc-daystick-pill {
  position: absolute; left: 50%; transform: translateX(-50%); top: 6px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--hair); border-radius: 999px; padding: 4px 12px;
  box-shadow: 0 8px 18px -10px rgba(11, 11, 11, .5);
  opacity: 0; transition: opacity .18s ease;
}
.mc-daystick.is-on .mc-daystick-pill { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .mc-daystick-pill { transition: none; }
}

/* ---- THE UNREAD BEACON ----------------------------------------------------
   On while anything anywhere is unread for this account; off only when it is
   all read. It pulses to be noticed — that is its entire job — and holds
   still for people who asked motion to stop. Amber on the navy bar, the same
   colour the tab badges already use for "waiting". */
.mc-beacon {
  display: inline-flex; align-items: center; flex: none;
  height: 26px; padding: 0 12px; margin: 0 10px;
  border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 800; white-space: nowrap;
  background: var(--st-confirm-bg); color: var(--st-confirm-ink);
  animation: mc-beacon-pulse 1.5s ease-in-out infinite;
}
.mc-beacon[hidden] { display: none; }
.mc-beacon:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes mc-beacon-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 214, 90, .55); }
  50%      { transform: scale(1.07); box-shadow: 0 0 0 7px rgba(255, 214, 90, 0); }
}
@media (max-width: 900px) {
  .mc-beacon { height: 24px; padding: 0 10px; margin: 0 6px; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-beacon { animation: none; box-shadow: 0 0 0 3px rgba(255, 214, 90, .45); }
}

/* the beacon riding in a chat header (both mobile shells hide the top bar) */
.pt-mhead .mc-beacon, .pv-head .mc-beacon { margin-left: auto; margin-right: 2px; }

/* ---- build-agent alarms: the one card that means "nothing is being built" ---- */
.need.need-builder { border-left-color: var(--st-blocked-ink); border-color: var(--st-blocked-ink); }
.need.need-builder .need-title { color: var(--st-blocked-ink); font-weight: 700; }
.ib-builder { background: var(--st-blocked-ink); color: #fff; }
.ib-msg:has(.ib-builder) .ib-bubble { border-color: var(--st-blocked-ink); }