/* ACCOMPANY — FlourishIQ palette (maroon #8B1A1A / gold #B8860B / cream #FDF8F0) */
:root{
  --maroon:#8B1A1A; --maroon-dk:#5A0E0E; --maroon-soft:#F5E9E9;
  --gold:#B8860B;   --gold-lt:#E8C76B;
  --cream:#FDF8F0;  --cream-warm:#FAF3E3; --line:#E5DCC8;
  --ink:#2C2C2C;    --ink-soft:#6B6B6B;   --quiet:#8A8A8A;
  --good:#2E7D5B;   --warn:#B8860B;       --alert:#8B1A1A;
  --r:10px;
}
*{box-sizing:border-box}
html{font-size:18px}                      /* was 16 — everything scales from here */
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:1rem;line-height:1.6;color:var(--ink);background:var(--cream)}
a{color:var(--maroon);text-decoration:none}
a:hover{text-decoration:underline}

/* top bar */
.top{background:var(--maroon);color:#fff;padding:.9rem 1.3rem;display:flex;align-items:center;
  gap:1rem;flex-wrap:wrap;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.top .brand{font-weight:700;letter-spacing:.06em;font-size:1.2rem;color:#fff;text-decoration:none}
.top .brand:hover{color:var(--gold-lt);text-decoration:none}
/* ⛔ the strapline had no styling of its own, so it ran straight on from the
   brand: "ACCOMPANYVERGESEL · UKUKHAPHA". The admin bar had this rule; the
   member bar never did. */
.top .brand small{display:block;font-size:.55rem;letter-spacing:.18em;
  opacity:.75;font-weight:600;margin-top:.15rem}
.top .nav{color:#fff;text-decoration:none;font-size:.92rem;opacity:.9}
.top .nav:hover{color:var(--gold-lt);text-decoration:none;opacity:1}
.top .nav.on{color:var(--gold-lt);font-weight:700;opacity:1}
.top .nav.who{opacity:.65;cursor:default}
.top .spacer{flex:1}
/* ⛔ FLEX `gap` ONLY LANDED IN SAFARI 14.1. On an older iPhone every nav item
   sits flush against the next with no space at all. This margin fallback is
   switched off wherever gap is genuinely supported. */
@supports not (gap: 1rem){
  .top > *{margin-right:1rem}
  .top > *:last-child{margin-right:0}
}

.wrap{max-width:1120px;margin:0 auto;padding:1.6rem 1.3rem 5rem}

.demo{background:var(--cream-warm);border:1px solid var(--line);color:#6B5400;
  padding:.7rem 1rem;border-radius:9px;font-size:.92rem;margin-bottom:1.3rem}

h1{font-size:1.9rem;margin:.2rem 0 .35rem;line-height:1.25}
h2{font-size:1.25rem;margin:2rem 0 .8rem}
h3{margin:0 0 .6rem;font-size:1.12rem}
.sub{color:var(--ink-soft);margin:0 0 1.3rem;font-size:1.02rem}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1.2rem 1.35rem;margin-bottom:1.1rem;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.grid{display:grid;gap:1.1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

/* the question — the centrepiece */
.question{background:var(--maroon-soft);border:1px solid #E8D3D3;border-left:5px solid var(--maroon);
  border-radius:var(--r);padding:1.3rem 1.4rem;margin-bottom:1.1rem}
.question .q{font-size:1.45rem;line-height:1.4;margin:.35rem 0 .8rem;font-weight:500}
.question .why{font-size:.95rem;color:var(--ink-soft);font-style:italic}
.eyebrow{font-size:.76rem;text-transform:uppercase;letter-spacing:.13em;color:var(--maroon);font-weight:700}

/* stats */
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem}
.stat .n{font-size:2rem;font-weight:700;line-height:1.05}
.stat .l{font-size:.88rem;color:var(--ink-soft);margin-top:.2rem}
.stat.warn .n{color:var(--gold)} .stat.alert .n{color:var(--alert)} .stat.good .n{color:var(--good)}

/* lists */
.row{display:flex;align-items:center;gap:.8rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .grow{flex:1;min-width:0}
.row .nm{font-weight:600;font-size:1.02rem}
.row .meta{font-size:.9rem;color:var(--ink-soft)}

.pill{display:inline-block;font-size:.8rem;padding:.18rem .6rem;border-radius:99px;
  background:var(--cream-warm);color:var(--ink-soft);white-space:nowrap;border:1px solid var(--line)}
.pill.good{background:#E9F4EE;color:var(--good);border-color:#CFE3D8}
.pill.warn{background:#FBF3E0;color:#8A6300;border-color:#EAD9A8}
.pill.alert{background:#F7E9E9;color:var(--maroon);border-color:#E8D3D3}
.pill.assigned{background:var(--maroon-soft);color:var(--maroon);font-weight:600;border-color:#E8D3D3}

.privacy{display:flex;gap:.6rem;align-items:flex-start;background:#EDF4F0;border:1px solid #CFE3D8;
  color:#2E5C48;border-radius:9px;padding:.75rem 1rem;font-size:.94rem;margin-bottom:1.1rem}

.btn{display:inline-block;background:var(--maroon);color:#fff;border:0;border-radius:8px;
  padding:.62rem 1.05rem;font-size:1rem;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--maroon-dk);text-decoration:none;color:#fff}
.btn.ghost{background:#fff;color:var(--maroon);border:1.5px solid var(--maroon)}
.btn.ghost:hover{background:var(--maroon-soft);color:var(--maroon)}
.btn.gold{background:var(--gold)} .btn.gold:hover{background:#96700A}
.btn.sm{padding:.4rem .75rem;font-size:.9rem}

/* ⭐ PROVENANCE — every computed figure can show where it came from */
.src{margin-top:.5rem;font-size:.84rem;color:var(--quiet)}
.src summary{cursor:pointer;color:var(--maroon);list-style:none}
.src summary::-webkit-details-marker{display:none}
.src summary::before{content:"ⓘ where does this come from?";}
.src[open] summary::before{content:"ⓘ hide";}
.src .body{margin-top:.5rem;padding:.7rem .85rem;background:var(--cream-warm);
  border:1px solid var(--line);border-radius:8px;color:var(--ink-soft);line-height:1.55}
.src code{background:#fff;border:1px solid var(--line);border-radius:4px;padding:.05rem .3rem;font-size:.85em}

/* ⭐ AN ACTION DISCLOSURE — NOT a provenance block.
   ⛔ The "worried about someone" control on the group page used class="src", which
      is the PROVENANCE styling — and .src injects its own words through ::before.
      So a mentor actually read "ⓘ where does this come from? Worried about Amahle?"
      and, once open, "ⓘ hide ...". Alten: *"the maroon hide/offer a course piece is
      confusing."* It was: an action was dressed as a data-source footnote.
   ⭐ This class carries no injected text. The summary says what it says. */
.act{margin-top:.45rem;font-size:.86rem}
.act > summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.4rem;
  color:var(--maroon);font-weight:600;padding:.28rem .6rem;border:1px solid var(--line);
  border-radius:999px;background:#fff}
.act > summary:hover{border-color:var(--maroon)}
.act > summary::-webkit-details-marker{display:none}
.act > summary::before{content:"⚑";font-weight:400}
.act[open] > summary::before{content:"✕";}
.act .body{margin-top:.6rem;padding:.75rem .85rem;background:var(--cream-warm);
  border:1px solid var(--line);border-radius:8px;color:var(--ink-soft);line-height:1.55}

/* posts */
.post{border-bottom:1px solid var(--line);padding:1rem 0}
.post:last-child{border-bottom:0}
.post .who{font-weight:600;font-size:.98rem}
.post .when{font-size:.84rem;color:var(--quiet);margin-left:.45rem}
.post .body{margin:.35rem 0 0}
.post .reply{margin:.75rem 0 0 1.5rem;padding-left:.9rem;border-left:3px solid var(--line)}
.pinned{background:var(--cream-warm);border-left:4px solid var(--gold);padding-left:.9rem}

.quote{font-style:italic;color:var(--ink-soft);border-left:3px solid var(--gold-lt);
  padding-left:1rem;margin:.5rem 0;font-size:1.05rem}
.quote .attr{display:block;font-style:normal;font-size:.86rem;margin-top:.3rem}

table{width:100%;border-collapse:collapse;font-size:.96rem}
th{text-align:left;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);
   border-bottom:2px solid var(--line);padding:.55rem .55rem}
td{padding:.6rem .55rem;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------
   ⛔ `.scroll` HAD NO RULES AT ALL.
   Four live pages wrap their tables in <div class="scroll"> — group,
   engagement, the console shelf and the admin help page — a class plainly
   meant to make a wide table scrollable. The CSS was never written, so on a
   phone the table simply spilled: 585px of content in a 297px box.
   ⭐ Swiping a table sideways is what people already expect on a phone. The
   alternative — telling somebody to rotate their handset — is not a fix.
   ------------------------------------------------------------------ */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

@media (max-width:640px){
  /* ⛔ overflow-x alone is not enough. `table{width:100%}` makes the table
     shrink to the box and crush every column instead of scrolling. A floor on
     the width means it scrolls rather than becomes unreadable. Desktop is
     untouched, so nothing that fits today starts scrolling. */
  .scroll table{min-width:540px}
  .scroll th, .scroll td{padding:.5rem .45rem}
}

.spaces a{display:flex;gap:.7rem;align-items:center;padding:.7rem .25rem;
  border-bottom:1px solid var(--line);color:var(--ink)}
.spaces a:last-child{border-bottom:0}
.spaces a:hover{text-decoration:none;background:var(--cream-warm)}
.spaces .emoji{font-size:1.3rem;width:1.8rem;text-align:center}

input[type=text],input[type=password],input:not([type]),textarea,select{
  font-family:inherit;font-size:1rem;padding:.62rem .7rem;border:1.5px solid var(--line);
  border-radius:8px;background:#fff;color:var(--ink)}
input:focus,textarea:focus{outline:2px solid var(--gold-lt);border-color:var(--gold)}
label{font-size:.95rem;font-weight:600;display:block;margin-bottom:.3rem}

.muted{color:var(--ink-soft);font-size:.94rem}
.tiny{font-size:.88rem}

/* ⛔ CONSOLE — the measurement layer, deliberately a different place from the
   member interface. One tab per job; nothing is stacked. */
.conbar{display:flex;gap:.35rem;flex-wrap:wrap;border-bottom:2px solid var(--line);
  margin:0 0 1.1rem;padding-bottom:.1rem}
.conbar a{display:flex;align-items:center;gap:.4rem;padding:.55rem .85rem;color:var(--ink-soft);
  border:1px solid transparent;border-bottom:0;border-radius:9px 9px 0 0;font-size:.94rem;
  margin-bottom:-2px}
.conbar a:hover{background:var(--cream-warm);text-decoration:none;color:var(--ink)}
.conbar a.on{background:#fff;border-color:var(--line);border-bottom:2px solid #fff;
  color:var(--maroon);font-weight:700}
.conbar a span{font-size:1.05rem}

/* a prompt to accompany — never a grade. No colour ranking, no order of merit. */
.prompt{border-left:4px solid var(--gold);background:var(--cream-warm);border-radius:0 8px 8px 0;
  padding:.55rem .85rem;margin:.4rem 0;font-size:.95rem}
.who-line{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap}
.who-line .place{font-size:.86rem;color:var(--quiet)}
.ctx{display:inline-block;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.1rem .5rem;border-radius:99px;border:1px solid var(--line);color:var(--ink-soft);
  background:#fff}
.ctx.commuter{border-color:#CDDCE8;background:#EEF4F8;color:#33566E}
.ctx.residence{border-color:#E5DCC8;background:var(--cream-warm);color:#6B5400}

/* login */
.login{max-width:430px;margin:4rem auto;padding:2rem}
.login h1{text-align:center}
.login .card{padding:1.6rem}
/* ⭐ THE CAST PAGE. `.login` is a 430px column built for two form fields; the page that
   asks "Who are you today?" is a wall of people and needs the screen. Only the .wide
   variant changes — the admin sign-in, which shares .login, is untouched. */
.login.wide{max-width:1180px;margin:2.4rem auto;padding:0 1.5rem 3rem}
.login.wide h1{margin-bottom:.3rem}
.login.wide .card{padding:1.4rem 1.6rem}
/* ⛔ auto-fill, not auto-fit: a block with three people must not stretch them across the
   whole width when the block beside it has eleven. */
.chooser{display:grid;gap:.5rem}
.login.wide .chooser{grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr))}
.chooser button{text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:9px;
  padding:.75rem .9rem;cursor:pointer;font-family:inherit;font-size:.98rem;color:var(--ink)}
.chooser button:hover{border-color:var(--maroon);background:var(--maroon-soft)}
.chooser .r{display:block;font-size:.85rem;color:var(--ink-soft)}

@media (max-width:640px){
  html{font-size:17px}
  /* ⛔ NOTHING IS HIDDEN HERE. A hamburger would hide Getting help behind a tap,
     and every item in this bar is one somebody may need in a hurry. Tightened,
     not truncated: three wrapped lines become two. */
  .top{padding:.6rem .9rem;gap:.5rem .8rem}
  .top .brand{font-size:1.02rem}
  .top .nav{font-size:.86rem}
  @supports not (gap: 1rem){ .top > *{margin-right:.8rem} }
  .wrap{padding:1.1rem .9rem 4rem}
  .question .q{font-size:1.28rem}
  h1{font-size:1.62rem}
}

/* ------------------------------------------------------------------
   ⭐ NAVIGATING A PAGE THAT CARRIES SEVERAL ENVIRONMENTS.
   A cluster coordinator or a head with three communities gets three full
   reports stacked. Alten, 19 Aug 2026: "links to the reports of the various
   environments will help with navigation." Without them the second and third
   are effectively invisible.
   ------------------------------------------------------------------ */
.envnav {
  position: sticky; top: 0; z-index: 30;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: .6rem .9rem; margin: 0 0 1rem;
  display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.envnav b { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--quiet); margin-right: .2rem; }
.envnav a {
  font-size: .84rem; text-decoration: none; color: var(--maroon);
  background: var(--cream-warm, #fbf8f3); border: 1px solid var(--line);
  border-radius: 99px; padding: .15rem .7rem; white-space: nowrap;
}
.envnav a:hover { border-color: var(--maroon); }
.envnav a .n { color: var(--quiet); font-size: .74rem; margin-left: .35rem; }
.envnav a.locked { opacity: .55; }
.envnav .tools { margin-left: auto; display: flex; gap: .4rem; }
.envnav button {
  font: inherit; font-size: .78rem; cursor: pointer; background: none;
  border: 1px solid var(--line); border-radius: 99px; padding: .15rem .7rem;
  color: var(--quiet);
}
.envnav button:hover { border-color: var(--maroon); color: var(--maroon); }

details.envblock { scroll-margin-top: 66px; }
details.envblock > summary {
  cursor: pointer; list-style: none; font-weight: 650; font-size: 1.02rem;
  display: flex; align-items: center; gap: .6rem;
}
details.envblock > summary::-webkit-details-marker { display: none; }
details.envblock > summary::before {
  content: '▸'; color: var(--quiet); transition: transform .15s;
}
details.envblock[open] > summary::before { transform: rotate(90deg); }
details.envblock > summary .count { margin-left: auto; font-weight: 400;
  font-size: .8rem; color: var(--quiet); }

@media print {
  .envnav { display: none; }
  details.envblock > *:not(summary) { display: block !important; }
}


/* ------------------------------------------------------------------
   THE DEMO CHAIN PICKER — two columns, each a real line of authority.
   ⛔ Side by side on a laptop, stacked on a phone. Never a horizontal
   scroll: somebody choosing who to be should see every option at once.
   ------------------------------------------------------------------ */
.chaingrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.8rem}
/* the chains read downwards, so give each its own column and let them sit side by side */
/* ⛔ CAP THE COLUMN. auto-fit with a 1fr max stretched two chains to 522px each — a
   vertical chain of small cards reading downwards must stay a column, not become a slab. */
.login.wide .chaingrid{grid-template-columns:repeat(auto-fit,minmax(15rem,19rem));
  justify-content:center;gap:1.5rem}
.chaincol{display:flex;flex-direction:column;align-items:stretch}
.chaincol .lane{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--quiet);font-weight:700;text-align:center;margin-bottom:.45rem}
.chaincol .step{display:block;width:100%;text-align:left;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:9px;
  padding:.55rem .7rem;font:inherit;color:var(--ink)}
.chaincol .step:hover{border-color:var(--maroon);background:var(--maroon-soft)}
.chaincol .step .lvl{display:block;font-size:.66rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--maroon);font-weight:700}
.chaincol .step strong{display:block;font-size:.98rem;line-height:1.3}
.chaincol .step .r{display:block;font-size:.78rem;color:var(--ink-soft)}
.chaincol .tick{text-align:center;color:var(--quiet);font-size:.9rem;line-height:1.1;
  margin:.15rem 0}

@media (max-width:640px){
  /* ⛔ one column on a phone. Two 160px columns would truncate every name. */
  .chaingrid{grid-template-columns:1fr;gap:1.4rem}
}

/* ⛔ Data-integrity warning. Defined here as well as in admin/index.php because
   the console uses this stylesheet and had no .warnbox at all — the box rendered
   as bare unstyled text, which is not how you flag numbers nobody should trust. */
.warnbox{background:#F7E9E9;border:1px solid #E8D3D3;border-left:4px solid #8B1A1A;
  border-radius:0 8px 8px 0;padding:.9rem 1.1rem;margin-bottom:1.1rem}
.warnbox strong{color:#8B1A1A}

/* ⛔ ANCHORS MUST NOT LAND UNDER THE NAVBAR. Jumping to a card put its heading
   behind the fixed bar, so the thing you clicked for was the one thing hidden.
   The same 66px the provenance blocks already use. */
[id="own"], [id="theme"], [id="paired"], [id="browse"], [id="open"] { scroll-margin-top: 66px; }

/* ⭐ A SCORE ON ITS SCALE. Every one of these instruments reports a number and
   shows where it falls — that is how they are meant to be read, and a bar makes
   "3.4 out of 6" mean something at a glance. */
.scalebar{position:relative;height:10px;border-radius:999px;margin:.55rem 0 .2rem;
  background:linear-gradient(90deg,#E8DDC0 0%,#D8E3D8 50%,#BFD8C4 100%);border:1px solid var(--line)}
.scalebar .mark{position:absolute;top:-5px;width:4px;height:18px;border-radius:2px;
  background:var(--maroon);transform:translateX(-2px)}
.scaleends{display:flex;justify-content:space-between;font-size:.74rem;color:var(--quiet)}
.scoreline{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.scorenum{font-size:1.9rem;font-weight:700;color:var(--maroon);line-height:1}
.scoreof{font-size:.9rem;color:var(--quiet)}

/* ── POINT-OF-NEED HELP ─────────────────────────────────────────────────────
   ⭐ A "?" beside a control, and two sentences when pressed: what it does, and
      what happens when you use it. Added 25 Aug 2026, after the click-through
      films kept drifting out of step with the screens they described. Help that
      renders from the same page cannot drift.
   ⛔ The dot cannot live INSIDE a row's <a> — a button in a link navigates rather
      than expanding — so the card is the positioning context and the dot sits in
      its top-right corner.
   ⛔ Switched off entirely with help_dots = 0. No code change, no deploy. */
/* ⛔ EVERY container that can carry a ? must be here. A .privacy strip was not, so its
   dot anchored to a distant ancestor and rendered 1500px up the page. */
.card,.question,.qwrap,.hwrap,.privacy,.warnbox,details.card{position:relative}
/* a block that is not a card — a row of stat tiles, a table, a chart — but still
   needs its own ? . Extra top padding so the dot never sits over the content. */
.hwrap{padding-top:1.9rem}
.hwrap>.hdot{top:0;right:0}
/* ⛔ IT HAS TO BE FINDABLE. The first version was a pale ring in a corner and Alten
      could not see it at all. Maroon on cream, with a word beside it — an affordance
      somebody notices without being told it is there. */
/* ⛔ A PLAIN "?" — nothing else. A text label beside it crowded every card and Alten
      was right that the bare mark already did the job. Maroon on cream so it is
      visible; no wording. */
.hdot{position:absolute;top:.6rem;right:.7rem;
      display:inline-flex;align-items:center;justify-content:center;
      width:1.6rem;height:1.6rem;padding:0;flex:none;
      border:1.5px solid var(--maroon);border-radius:50%;background:var(--cream-warm);
      color:var(--maroon);font-size:.9rem;font-weight:700;line-height:1;
      cursor:pointer;z-index:2}
.hdot:hover,.hdot[aria-expanded="true"]{background:var(--maroon);color:#fff}

.hpanel{margin:.55rem 0 0;padding:.75rem .9rem;background:var(--cream-warm);
        border:1px solid var(--line);border-left:3px solid var(--maroon);
        border-radius:var(--r);font-size:.9rem;line-height:1.5}
.hpanel strong{display:block;color:var(--maroon);margin-bottom:.25rem}
.hpanel p{margin:0 0 .45rem}
.hpanel p:last-child{margin-bottom:0}
.hpanel .then span{display:block;font-size:.7rem;letter-spacing:.08em;
                   text-transform:uppercase;color:var(--quiet);font-weight:700;
                   margin-bottom:.15rem}

/* ⭐ WHOSE SCREEN THIS IS. Alten, 26 Aug 2026: the name was only in the top bar, only a first
   name, and "a more prominent place will help. Include the full identity." A staff console is
   the one place somebody can be looking at a view that is not their own — being shown the
   system, or holding two roles — so the identity is stated, not implied. */
.whoami{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .7rem;
  border-left:3px solid var(--maroon);padding:.15rem 0 .15rem .8rem;margin:.2rem 0 1rem}
.whoami .nm{font-weight:700;font-size:1.05rem;color:var(--maroon);line-height:1.3}
.whoami .rl{font-size:.86rem;color:var(--ink-soft)}