/* ════════════════════════════════════════════════════════════════════
   ATRIUM. The client side, and only the client side.

   WHY THIS FILE EXISTS AT ALL.

   css/app.css serves the staff CRM and the client portal from one place.
   Three of the class names the new client design needs already live there
   and carry the whole internal app:

     .btn    436 uses across index.html and js/
     .card   194 uses
     .page    35 uses, and it is what gives every CRM page its padding

   Redefining any of those in app.css would resize every button Bianca
   uses, re-border every card, and strip the padding off every page. That
   is the same shape of failure as the CSS rule that removed Overview,
   Pipeline and Operations from the sidebar: one line, outside the area
   being worked on, and no line count would have caught it.

   So every rule in this file is scoped under .atrium. That class is put on
   exactly two elements and nowhere else:

     #client-portal          the signed in client shell, which sits outside
                             #main (index.html) and never renders CRM chrome
     the preview wrapper     built by renderPortalPreview() inside
                             #portal-body, so an admin previewing a client
                             sees the same thing the client sees

   A class rather than #client-portal alone, because the preview builds its
   own copy of the chrome and would otherwise drift out of step with the
   real portal, which is the exact failure the old admin preview had.

   THE ONE RULE FOR THIS FILE: no selector without .atrium in front of it.
   Not one. There is a checker for it in the commit below.

   ────────────────────────────────────────────────────────────────────
   FONT WEIGHTS. index.html loads Barlow at 300, 400, 500 and 600 only.
   700 is NOT loaded for Barlow, only for Barlow Condensed. Adding it to
   the shared font link would change how the CRM's own bold text renders,
   which is outside this work, so nothing here asks for Barlow 700.
   Condensed may use 700 and 800 freely.
   ════════════════════════════════════════════════════════════════════ */

.atrium{
  /* Brand, exact values only. Section 2 of CLAUDE.md. */
  --a-teal:#0B3A39;
  --a-coral:#E87D49;
  --a-cream:#F6F6EE;
  --a-gold:#D0942F;
  --a-yellow:#E4C700;
  --a-black:#000000;
  --a-white:#FFFFFF;

  /* Derived. Opacity against a brand value, or a brand to brand mix.
     Nothing invented. */
  --a-ink:var(--a-teal);
  --a-ink-muted:rgba(11,58,57,.70);
  --a-ink-subtle:rgba(11,58,57,.54);
  --a-hairline:rgba(11,58,57,.10);
  --a-surface-alt:rgba(11,58,57,.04);
  --a-attention:rgba(232,125,73,.10);
  --a-tint-coral:rgba(232,125,73,.12);
  --a-tint-gold:rgba(208,148,47,.12);
  --a-tint-teal:rgba(11,58,57,.08);

  /* Text on teal. */
  --a-on-teal:var(--a-cream);
  --a-on-teal-muted:rgba(246,246,238,.80);
  --a-on-teal-hairline:rgba(246,246,238,.20);

  /* DARKENED TEXT TOKENS, and why they are not the brand values.
     White on #E87D49 is 2.82:1 and fails AA. So does #D0942F on white,
     at 2.64:1. Both are taken down against black, which keeps the hue
     and is still only brand values:
       --a-coral-ink  #904E2D  6.34:1 on white, 5.34:1 on the tint
       --a-gold-ink   #89621F  5.48:1 on white, 4.93:1 on the tint
     The full brand values stay on fills, borders and large shapes,
     where the 3:1 rule applies instead. */
  --a-coral-ink:color-mix(in srgb, var(--a-coral) 62%, var(--a-black));
  --a-gold-ink:color-mix(in srgb, var(--a-gold) 66%, var(--a-black));

  /* Elevation. One radius scale, one shadow. --a-radius-pill exists
     because 12px and 8px cannot make a pill, and badges need one. */
  --a-radius:12px;
  --a-radius-sm:8px;
  --a-radius-pill:999px;
  --a-shadow:0 1px 2px rgba(11,58,57,.06);

  /* Shell. */
  --a-bar:64px;
  --a-max:1720px;
  --a-gutter:32px;
}


/* ════════════════════════════════════════════════════════════════════
   THE SHELL. App bar, nav, page frame, footer.

   The seven nav items are still painted by cpPaint() from CLIENT_TABS,
   as buttons with class .cp-tab. Only their clothes changed here, so the
   tab logic, the badges, the deep links and the admin preview all keep
   working untouched.
   ════════════════════════════════════════════════════════════════════ */

.atrium{
  background:var(--a-cream);
  color:var(--a-ink);
  font-family:'Barlow','Helvetica Neue',Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* ── app bar ── */
.atrium .a-bar{ background:var(--a-teal); flex:0 0 auto; }
.atrium .a-bar-in{
  max-width:var(--a-max); margin:0 auto; padding:0 var(--a-gutter);
  min-height:var(--a-bar); display:flex; align-items:center; gap:24px;
}
.atrium .a-brand{ flex:0 0 auto; display:flex; align-items:center; text-decoration:none; }
.atrium .a-brand img{ height:26px; width:auto; display:block; }

.atrium .a-bar-right{ margin-left:auto; display:flex; align-items:center; gap:8px; flex:0 0 auto; }

/* ── account menu. A native disclosure, so it needs no script and closes
      on Escape without one. ── */
.atrium .a-account{ position:relative; }
.atrium .a-account > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:8px;
  padding:4px 8px 4px 4px; border-radius:var(--a-radius-pill);
  color:var(--a-on-teal-muted);
  transition:background .15s ease;
}
.atrium .a-account > summary::-webkit-details-marker{ display:none; }
.atrium .a-account > summary:hover{ background:rgba(246,246,238,.10); }
.atrium .a-account-static{ display:flex; align-items:center; gap:8px;
  padding:4px 8px 4px 4px; color:var(--a-on-teal-muted); }
.atrium .a-avatar{
  width:32px; height:32px; border-radius:var(--a-radius-pill); flex:0 0 auto;
  background:var(--a-cream); color:var(--a-teal);
  display:grid; place-items:center;
  font-size:13px; font-weight:600; letter-spacing:.02em;
}
.atrium .a-who{ display:flex; flex-direction:column; line-height:1.2; text-align:left; }
.atrium .a-who b{ font-size:13px; font-weight:600; color:var(--a-on-teal); }
.atrium .a-who span{ font-size:12px; color:var(--a-on-teal-muted); }
.atrium .a-caret{ width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.atrium .a-menu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:30; min-width:170px;
  background:var(--a-white); border:1px solid var(--a-hairline);
  border-radius:var(--a-radius-sm); box-shadow:0 6px 20px rgba(11,58,57,.14);
  padding:4px;
}
.atrium .a-menu button{
  width:100%; text-align:left; font:inherit; font-size:14px; font-weight:500;
  color:var(--a-ink); background:none; border:0; cursor:pointer;
  padding:9px 12px; border-radius:6px;
}
.atrium .a-menu button:hover{ background:var(--a-surface-alt); }

/* ── nav. Restyles the tab buttons cpPaint() already writes. ── */
.atrium .cp-tabwrap{
  position:static; background:none; border-bottom:0; margin-bottom:0;
  flex:1 1 auto; min-width:0;
}
.atrium .cp-tabs{ gap:24px; padding:0; align-items:stretch; }
.atrium .cp-tab{
  min-height:var(--a-bar); padding:0; border:0; border-radius:0;
  border-bottom:2px solid transparent;
  background:none; text-transform:none; letter-spacing:0;
  font-family:'Barlow',sans-serif; font-size:14px; font-weight:500;
  color:var(--a-on-teal-muted);
  transition:color .15s ease;
}
.atrium .cp-tab:hover{ background:none; color:var(--a-on-teal); }
.atrium .cp-tab[aria-selected="true"]{
  background:none; color:var(--a-on-teal); font-weight:600;
  border-bottom-color:var(--a-gold);
}
/* Rule 8 of the brand rules: coral is never placed directly on teal. Gold is
   also the brand's "needs attention" value, so a count in the bar is gold with
   teal numerals and coral stays in the content area meaning overdue. */
.atrium .cp-tab-badge{
  background:var(--a-gold); color:var(--a-teal);
  min-width:20px; height:20px; padding:0 6px; line-height:20px;
  font-size:12px; font-weight:700; border-radius:var(--a-radius-pill);
  font-variant-numeric:tabular-nums;
}
.atrium .cp-tab[aria-selected="true"] .cp-tab-badge{
  background:var(--a-gold); color:var(--a-teal);
}

/* ── page frame ── */
.atrium .a-page{
  flex:1 0 auto;
  max-width:var(--a-max); width:100%; margin:0 auto;
  padding:24px var(--a-gutter) 64px;
}

/* ── footer ── */
.atrium .a-foot{ background:var(--a-teal); flex:0 0 auto; }
.atrium .a-foot-in{
  max-width:var(--a-max); margin:0 auto; padding:24px var(--a-gutter);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px;
  color:var(--a-on-teal-muted); font-size:14px;
}
.atrium .a-foot-in img{ height:20px; width:auto; opacity:.70; }
.atrium .a-foot-in span:nth-child(2){ text-align:center; }
.atrium .a-foot-social{ justify-self:end; }

/* The preview is a panel inside a CRM page, not a whole window, so it must
   not stretch to the viewport or pin a footer. */
#portal-body .atrium{ min-height:0; border-radius:var(--a-radius); overflow:hidden; }
#portal-body .atrium .a-page{ padding-bottom:24px; }

@media (max-width:900px){
  .atrium{ --a-gutter:16px; }
  .atrium .a-bar-in{ flex-wrap:wrap; gap:12px; padding-top:10px; }
  .atrium .cp-tabwrap{ order:3; flex-basis:100%; }
  .atrium .cp-tabs{ gap:18px; overflow-x:auto; }
  .atrium .cp-tab{ min-height:44px; }
  .atrium .a-who{ display:none; }
  .atrium .a-foot-in{ grid-template-columns:1fr; justify-items:center; gap:14px; }
  .atrium .a-foot-social{ justify-self:center; }
}

@media (prefers-reduced-motion:reduce){
  .atrium *{ transition:none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   CONTENT. The grid, the rail, and the pieces Home is built from.
   Everything below is still scoped to .atrium and cannot reach the CRM.
   ════════════════════════════════════════════════════════════════════ */

/* ── the two column grid, and the rail that rides along ── */
.atrium .a-grid{
  display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:32px; align-items:start;
}
.atrium .a-rail{
  display:flex; flex-direction:column; gap:24px; min-width:0;
  position:sticky; top:calc(var(--a-bar) + 24px);
}
#portal-body .atrium .a-rail{ position:static; }

/* ── type ── */
.atrium .a-page-t{ font-size:32px; font-weight:600; line-height:1.15; letter-spacing:-.01em; color:var(--a-ink); }
.atrium .a-h1{ font-size:20px; font-weight:600; line-height:1.3; color:var(--a-ink); }
.atrium .a-h2{ font-size:20px; font-weight:600; line-height:1.3; color:var(--a-ink); }
.atrium .a-h3{ font-size:16px; font-weight:600; line-height:1.35; color:var(--a-ink); }
.atrium .a-meta{ font-size:13px; line-height:1.4; color:var(--a-ink-muted); }
.atrium .a-eyebrow{
  font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--a-ink-muted);
}
.atrium p{ font-size:15px; line-height:1.5; }

.atrium .a-greet{ padding-bottom:16px; }
.atrium .a-greet p{ margin-top:4px; max-width:64ch; color:var(--a-ink-muted); }
.atrium .a-greet p b{ color:var(--a-ink); font-weight:600; }

/* ── blocks ── */
.atrium .a-block{ display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
.atrium .a-blockhead{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.atrium .a-link{
  font:inherit; font-size:13px; font-weight:600; color:var(--a-ink-muted);
  background:none; border:0; cursor:pointer; padding:0;
  display:inline-flex; align-items:center; gap:4px;
}
.atrium .a-link:hover{ color:var(--a-ink); }
.atrium .a-link .a-ico{ width:14px; height:14px; }

/* ── cards ── */
.atrium .a-card{
  background:var(--a-white); border:1px solid var(--a-hairline);
  border-radius:var(--a-radius); box-shadow:var(--a-shadow);
}
.atrium .a-card-pad{ padding:12px 16px; }
.atrium .a-cardhead{
  padding:12px 16px; border-bottom:1px solid var(--a-hairline);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.atrium .a-cardfoot{ padding:12px 16px; border-top:1px solid var(--a-hairline); }
.atrium .a-cardfoot button{
  font:inherit; font-size:13px; font-weight:600; color:var(--a-ink);
  background:none; border:0; cursor:pointer; padding:0;
  display:inline-flex; align-items:center; gap:4px;
}
.atrium .a-cardfoot button:hover{ color:var(--a-gold-ink); }
.atrium .a-cardfoot .a-ico{ width:14px; height:14px; }
.atrium .a-empty{ padding:20px 0; text-align:center; color:var(--a-ink-muted); }

/* ── icons ── */
.atrium .a-ico{ width:20px; height:20px; flex:0 0 auto; }

/* ── list row, one component for guides, deliverables, files ── */
.atrium .a-rows{ display:flex; flex-direction:column; }
.atrium .a-row{
  display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 16px;
  border-top:1px solid var(--a-hairline); color:inherit; text-decoration:none;
  transition:background .15s ease;
}
.atrium .a-rows > .a-row:first-child{ border-top:none; }
.atrium a.a-row:hover{ background:var(--a-surface-alt); }
.atrium .a-tile{
  width:32px; height:32px; border-radius:var(--a-radius-sm); flex:0 0 auto;
  background:var(--a-surface-alt); color:var(--a-teal);
  display:grid; place-items:center;
}
.atrium .a-tile .a-ico{ width:18px; height:18px; }
.atrium .a-row-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.atrium .a-row-t b{ font-size:15px; font-weight:500; line-height:1.35; }
.atrium .a-row-t span{ font-size:13px; color:var(--a-ink-muted); line-height:1.35; }
.atrium .a-row-e{
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--a-ink-muted); font-variant-numeric:tabular-nums;
}
.atrium .a-row-e .a-ico{ width:16px; height:16px; color:var(--a-ink-subtle); }

/* ── team ── */
.atrium .a-person{
  display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 16px;
  border-top:1px solid var(--a-hairline);
}
.atrium .a-rows > .a-person:first-child{ border-top:none; }
.atrium .a-av{
  width:36px; height:36px; border-radius:var(--a-radius-pill); flex:0 0 auto;
  background:var(--a-teal); color:var(--a-cream);
  display:grid; place-items:center; font-size:13px; font-weight:600;
}
.atrium .a-person-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.atrium .a-person-t b{ font-size:15px; font-weight:500; }
.atrium .a-person-t span{ font-size:13px; color:var(--a-ink-muted); }
.atrium .a-chip{
  display:inline-flex; align-items:center; height:20px; padding:0 8px; flex:0 0 auto;
  border-radius:var(--a-radius-pill); background:var(--a-tint-teal); color:var(--a-ink);
  font-size:12px; font-weight:600;
}

/* ── help card. Teal, and the only dark card in the rail. ── */
.atrium .a-help{
  background:var(--a-teal); border:0; box-shadow:none; padding:24px;
  display:flex; flex-direction:column; gap:12px;
}
.atrium .a-help .a-eyebrow{ font-size:14px; color:var(--a-gold); }
.atrium .a-help .a-h2{ color:var(--a-cream); }
.atrium .a-help p{ color:var(--a-on-teal-muted); }
.atrium .a-help .a-btn{ align-self:stretch; justify-content:center; margin-top:4px; }
.atrium .a-hours{ font-size:13px; color:var(--a-on-teal-muted); }

/* ── buttons ── */
.atrium .a-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:36px; padding:0 16px; border-radius:var(--a-radius-sm);
  font-family:'Barlow',sans-serif; font-size:14px; font-weight:600;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  text-decoration:none;
  /* WITHOUT THIS, a variant that sets no background of its own gets the
     browser's default buttonface grey. That is what made "See the agenda"
     unreadable on the teal card: a-btn-onteal sets a border and a colour and
     nothing else, so cream text landed on pale grey. Every other variant
     happened to set its own background and hid the hole. */
  background:transparent;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
/* Coral at full strength fails AA behind white text at 2.82:1, so the solid
   button uses the darkened token at 6.34:1. The full value stays on borders
   and tints where the 3:1 rule applies. */
.atrium .a-btn-primary{ background:var(--a-coral-ink); color:var(--a-white); }
.atrium .a-btn-primary:hover{ background:color-mix(in srgb, var(--a-coral) 50%, var(--a-black)); }
.atrium .a-btn-ghost{ background:var(--a-white); border-color:var(--a-hairline); color:var(--a-ink); }
.atrium .a-btn-ghost:hover{ border-color:var(--a-ink-subtle); }
.atrium .a-btn-cream{ background:var(--a-cream); color:var(--a-teal); }
.atrium .a-btn-cream:hover{ background:var(--a-white); }
.atrium .a-btn-onteal{ border-color:var(--a-on-teal-hairline); color:var(--a-on-teal); }
.atrium .a-btn-onteal:hover{ background:rgba(246,246,238,.12); }
.atrium .a-btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ── needs you ── */
.atrium .a-acts{ display:flex; flex-direction:column; gap:8px; }
.atrium .a-act{
  background:var(--a-attention); border-left:3px solid var(--a-coral);
  border-radius:var(--a-radius); padding:12px 16px;
  display:flex; flex-direction:column; gap:8px;
}
.atrium .a-act-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.atrium .a-act-body{ flex:1 1 300px; min-width:0; }
.atrium .a-act-body p{ margin-top:4px; max-width:60ch; }
.atrium .a-act-btns{ display:flex; gap:8px; flex:0 0 auto; }
.atrium .a-act-foot{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.atrium .a-consequence{
  font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--a-coral-ink);
}
.atrium .a-due{ font-size:13px; color:var(--a-ink-muted); }
.atrium .a-due.is-late{ color:var(--a-coral-ink); font-weight:600; }

/* ── pills ── */
.atrium .a-pill{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  height:24px; padding:0 10px; border-radius:var(--a-radius-pill);
  font-size:12px; font-weight:600; font-variant-numeric:tabular-nums;
}
.atrium .a-pill-progress{ background:var(--a-tint-gold); color:var(--a-gold-ink); }
.atrium .a-pill-client{ background:var(--a-tint-coral); color:var(--a-coral-ink); }
.atrium .a-pill-complete{ background:var(--a-tint-teal); color:var(--a-ink); }

/* ── projects, framed as one group ── */
.atrium .a-projframe{ display:flex; flex-direction:column; }
.atrium .a-proj{ padding:16px; border-top:1px solid var(--a-hairline); }
.atrium .a-projframe > .a-proj:first-child{ border-top:none; }
.atrium .a-proj-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.atrium .a-proj-head .a-meta{ margin-top:2px; }

/* ── phase tracker, one component at three scales ── */
.atrium .a-track{ display:flex; margin-top:12px; }
.atrium .a-node{ flex:1; min-width:0; position:relative; display:flex; flex-direction:column; align-items:center; }
.atrium .a-rule{ position:absolute; left:-50%; right:50%; background:var(--a-hairline); }
.atrium .a-node:first-child .a-rule{ display:none; }
.atrium .a-node.is-done .a-rule,
.atrium .a-node.is-now .a-rule{ background:var(--a-teal); }
.atrium .a-mark{
  border-radius:var(--a-radius-pill); background:var(--a-white);
  border:1px solid var(--a-hairline); display:grid; place-items:center;
  position:relative; z-index:1; flex:0 0 auto;
}
.atrium .a-node.is-done .a-mark{ background:var(--a-teal); border-color:var(--a-teal); color:var(--a-cream); }
.atrium .a-node.is-now .a-mark{ border:2px solid var(--a-gold); }
.atrium .a-node.is-now .a-mark::after{ content:""; border-radius:var(--a-radius-pill); background:var(--a-gold); }
.atrium .a-lbl{
  font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:12px;
  letter-spacing:.05em; text-transform:uppercase; text-align:center;
  line-height:1.2; color:var(--a-ink-subtle);
}
.atrium .a-node.is-done .a-lbl{ color:var(--a-ink); }
.atrium .a-node.is-now .a-lbl{ color:var(--a-gold-ink); font-weight:700; }

.atrium .a-track-compact .a-rule{ top:9px; height:2px; }
.atrium .a-track-compact .a-mark{ width:20px; height:20px; }
.atrium .a-track-compact .a-mark .a-ico{ width:12px; height:12px; stroke-width:2.4; }
.atrium .a-track-compact .a-node.is-now .a-mark::after{ width:8px; height:8px; }
.atrium .a-track-compact .a-lbl{ margin-top:4px; }

.atrium .a-track-full .a-rule{ top:13px; height:2px; }
.atrium .a-track-full .a-mark{ width:28px; height:28px; }
.atrium .a-track-full .a-mark .a-ico{ width:16px; height:16px; stroke-width:2.4; }
.atrium .a-track-full .a-node.is-now .a-mark::after{ width:10px; height:10px; }
.atrium .a-track-full .a-lbl{ margin-top:8px; }

/* Six stage names cannot sit side by side on a phone. Below 720px the labels
   give way and the caption underneath carries the same fact in words. */
.atrium .a-trackcap{ display:none; font-size:13px; color:var(--a-ink-muted); margin-top:8px; }

/* ── the weekly update ── */
.atrium .a-upd + .a-upd{ margin-top:16px; padding-top:16px; border-top:1px solid var(--a-hairline); }
.atrium .a-upd-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--a-hairline);
}
.atrium .a-lede{ margin-top:4px; max-width:64ch; }
.atrium .a-upd-segs{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--a-hairline);
}
.atrium .a-upd-segs .a-eyebrow{ display:block; margin-bottom:4px; }
.atrium .a-upd-segs .is-hold .a-eyebrow{ color:var(--a-coral-ink); }

/* ── the one dark card on the page ── */
.atrium .a-util{
  background:var(--a-teal); color:var(--a-on-teal); border-radius:var(--a-radius);
  padding:12px 16px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.atrium .a-util-tile{
  width:40px; height:40px; border-radius:var(--a-radius-sm); flex:0 0 auto;
  background:rgba(246,246,238,.10); color:var(--a-gold);
  display:grid; place-items:center;
}
.atrium .a-util-t{ flex:1 1 220px; display:flex; flex-direction:column; gap:2px; }
.atrium .a-util-t b{ font-size:16px; font-weight:600; }
.atrium .a-util-t span{ font-size:13px; color:var(--a-on-teal-muted); }

/* ── narrow. Everything that has to change lives here, after the rules it
      overrides, so nothing is lost to the cascade. ── */
@media (max-width:900px){
  .atrium .a-grid{ grid-template-columns:minmax(0,1fr); }
  .atrium .a-rail{ position:static; }
  .atrium .a-page-t{ font-size:26px; }
  .atrium .a-act-top{ flex-direction:column; }
  .atrium .a-act-btns{ width:100%; }
}
@media (max-width:720px){
  .atrium .a-lbl{ display:none; }
  .atrium .a-trackcap{ display:block; }
  .atrium .a-upd-segs{ grid-template-columns:1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   PROJECTS AND PENDING REVIEW. The two tabs that carry decisions.
   ════════════════════════════════════════════════════════════════════ */

.atrium .a-card-body{ padding:16px; }
.atrium .a-projdetail{ margin-bottom:24px; }
.atrium .a-subhead{ margin:20px 0 8px; }
.atrium .a-card-body > .a-subhead:first-child{ margin-top:0; }

/* ── an item: an episode, a video, a delivery. One shape for all three. ── */
.atrium .a-items{ display:flex; flex-direction:column; }
.atrium .a-item{ padding:16px; border-top:1px solid var(--a-hairline); }
.atrium .a-items > .a-item:first-child,
.atrium .a-rows > .a-item:first-child{ border-top:none; }
.atrium .a-item.is-waiting{ background:var(--a-attention); border-left:3px solid var(--a-coral); }
.atrium .a-item > .a-eyebrow{ display:block; color:var(--a-ink-subtle); }
.atrium .a-item .a-h3{ margin-top:2px; }
.atrium .a-item-head{ display:flex; align-items:center; gap:12px; }
.atrium .a-item-btns{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.atrium .a-item-facts{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:10px; }

/* ── decide, decided, and the thread that follows ── */
.atrium .a-decide{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;
  padding-top:12px; border-top:1px solid var(--a-hairline);
}
.atrium .a-decided{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px;
  padding-top:12px; border-top:1px solid var(--a-hairline);
}
.atrium .a-thread{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.atrium .a-note{ background:var(--a-surface-alt); border-radius:var(--a-radius-sm); padding:12px 14px; }
.atrium .a-note-w{ display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.atrium .a-note-w b{ font-size:13px; font-weight:600; }
.atrium .a-note-w span{ font-size:13px; color:var(--a-ink-muted); }
.atrium .a-versions{
  margin-top:12px; padding-top:12px; border-top:1px solid var(--a-hairline);
  display:flex; flex-direction:column; gap:8px;
}
.atrium .a-versions > .a-eyebrow{ display:block; }

@media (max-width:720px){
  .atrium .a-item-head{ flex-wrap:wrap; }
  .atrium .a-decide .a-btn{ flex:1 1 auto; }
}

/* ════════════════════════════════════════════════════════════════════
   UPDATES, MEETINGS, REQUESTS, DELIVERABLES.

   One disclosure component carries all three long lists: past meetings,
   the updates archive, and past requests. A client two years in has
   fifty of each, and three different ways of collapsing them is three
   things to keep in step.
   ════════════════════════════════════════════════════════════════════ */

.atrium .a-discs{ display:flex; flex-direction:column; }
.atrium .a-disc{ border-top:1px solid var(--a-hairline); }
.atrium .a-discs > .a-disc:first-child{ border-top:none; }
.atrium .a-disc-hd{
  width:100%; display:flex; align-items:center; gap:12px; text-align:left;
  padding:14px 16px; min-height:56px; background:none; border:0; cursor:pointer;
  font:inherit; color:inherit; transition:background .15s ease;
}
.atrium .a-disc-hd:hover{ background:var(--a-surface-alt); }
.atrium .a-disc-d{
  flex:0 0 108px; font-size:13px; color:var(--a-ink-muted);
  font-variant-numeric:tabular-nums;
}
.atrium .a-disc-s{ flex:1; min-width:0; font-size:15px; font-weight:500; }
.atrium .a-disc-x{ display:flex; color:var(--a-ink-subtle); transition:transform .15s ease; }
.atrium .a-disc-x .a-ico{ width:16px; height:16px; }
.atrium .a-disc[data-open="true"] .a-disc-x{ transform:rotate(90deg); }
.atrium .a-disc-bd{ display:none; padding:0 16px 16px; }
.atrium .a-disc[data-open="true"] .a-disc-bd{ display:block; }
.atrium .a-disc-bd > .a-eyebrow{ display:block; margin-bottom:6px; }

/* We have replied and they have not opened it. */
.atrium .a-unread{
  width:8px; height:8px; border-radius:var(--a-radius-pill);
  background:var(--a-coral); flex:0 0 auto;
  /* A state indicator, so its boundary needs 3:1 under WCAG 1.4.11. Coral on
     white is 2.82. The rim is the darkened coral at 6.34, which carries the
     edge while the fill stays the brand value. */
  border:1px solid var(--a-coral-ink);
}

/* ── meetings ── */
.atrium .a-item.is-next{ background:rgba(208,148,47,.06); border-left:3px solid var(--a-gold); }
.atrium .a-mlinks{ margin-bottom:4px; }
.atrium .a-mblock{ margin-top:12px; }
.atrium .a-mblock .a-eyebrow{ display:block; margin-bottom:6px; }
.atrium .a-mblock ul{ padding-left:18px; display:flex; flex-direction:column; gap:4px; }
.atrium .a-mblock li{ font-size:15px; line-height:1.5; max-width:70ch; }

/* ── filter bar ── */
.atrium .a-filterbar{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:16px;
  border-bottom:1px solid var(--a-hairline);
}
.atrium .a-filterbar .a-input{ flex:1 1 220px; min-width:180px; }
.atrium .a-filterbar .a-select{ flex:0 1 220px; }
.atrium .a-chipbtn{
  height:38px; padding:0 14px; border-radius:var(--a-radius-sm);
  border:1px solid var(--a-hairline); background:var(--a-white);
  font:inherit; font-size:14px; font-weight:600; color:var(--a-ink-muted);
  cursor:pointer; transition:border-color .15s ease,color .15s ease;
}
.atrium .a-chipbtn:hover{ border-color:var(--a-ink-subtle); color:var(--a-ink); }

/* ── form controls ── */
.atrium .a-fieldgrid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.atrium .a-field{ display:flex; flex-direction:column; gap:4px; margin-bottom:16px; }
.atrium .a-flabel{ font-size:13px; font-weight:600; color:var(--a-ink); }
.atrium .a-hint{ font-size:13px; color:var(--a-ink-muted); }
.atrium .a-input,
.atrium .a-select,
.atrium .a-textarea{
  width:100%; font:inherit; font-size:15px; color:var(--a-ink);
  background:var(--a-white); border:1px solid rgba(11,58,57,.22);
  border-radius:var(--a-radius-sm); padding:9px 12px; min-height:38px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.atrium .a-input::placeholder,
.atrium .a-textarea::placeholder{ color:var(--a-ink-subtle); }
.atrium .a-input:focus,
.atrium .a-select:focus,
.atrium .a-textarea:focus{
  border-color:var(--a-teal); outline:none; box-shadow:0 0 0 3px rgba(11,58,57,.10);
}
.atrium .a-textarea{ resize:vertical; min-height:104px; line-height:1.5; }
.atrium .a-select{
  appearance:none; padding-right:36px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B3A39' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; background-size:18px;
}
.atrium .a-check{ display:flex; align-items:flex-start; gap:8px; font-size:15px; }
.atrium .a-check input{ width:18px; height:18px; margin-top:2px; accent-color:var(--a-teal); flex:0 0 auto; }
.atrium .a-formerr{ font-size:14px; margin-top:8px; }

/* ── deliverables footnote ── */
.atrium .a-notebar{
  padding:12px 16px; border-top:1px solid var(--a-hairline);
  font-size:13px; color:var(--a-ink-muted);
}

.atrium .a-hide-sm{ display:inline; }

@media (max-width:720px){
  .atrium .a-fieldgrid{ grid-template-columns:1fr; }
  .atrium .a-disc-hd{ flex-wrap:wrap; }
  .atrium .a-disc-d{ flex:0 0 100%; }
  .atrium .a-hide-sm{ display:none; }
  .atrium .a-filterbar .a-select,
  .atrium .a-filterbar .a-chipbtn{ flex:1 1 auto; }
}

/* ════════════════════════════════════════════════════════════════════
   PROSE A CLIENT READS

   The weekly update, a delivery description, a request and its reply all
   run through mdRender now, the same renderer the staff side uses, so a
   link Ona types arrives as a link rather than as text to copy out.

   app.css styles .md-body at 13px for a dense staff card. These override
   it for the portal only, because .atrium beats a bare class and this
   file loads second. Nothing here reaches the CRM.
   ════════════════════════════════════════════════════════════════════ */

.atrium .md-body{ font-size:15px; line-height:1.5; color:inherit; }
.atrium .md-body div{ margin-bottom:6px; }
.atrium .md-body div:last-child{ margin-bottom:0; }
.atrium .md-body .md-sp{ height:9px; }

.atrium .md-body ul,
.atrium .md-body ol{ margin:7px 0 7px 20px; padding:0; }
.atrium .md-body li{ margin-bottom:5px; padding-left:2px; }
.atrium .md-body li:last-child{ margin-bottom:0; }
.atrium .md-body ul li::marker{ color:var(--a-ink-subtle); }
.atrium .md-body ol li::marker{ color:var(--a-ink-muted); font-weight:600; }

.atrium .md-body strong,
.atrium .md-body b{ font-weight:600; color:var(--a-ink); }
.atrium .md-body em,
.atrium .md-body i{ font-style:italic; }

.atrium .md-body a{
  color:var(--a-teal);
  text-decoration:underline;
  text-decoration-color:rgba(11,58,57,.35);
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  font-weight:500;
}
.atrium .md-body a:hover{ color:var(--a-coral-ink); text-decoration-color:var(--a-coral-ink); }

.atrium .md-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--a-surface-alt); color:var(--a-teal);
  padding:1px 5px; border-radius:4px; font-size:.92em;
}

/* AN @MENTION IS INTERNAL. It is how the team tags each other and it means
   nothing to a client, so it reads as ordinary text here rather than as the
   chip the staff side shows. Not stripped in the markup, because a second
   renderer that strips things is how the two fall out of step. */
.atrium .md-body .mention{ background:none; color:inherit; font-weight:inherit; padding:0; }

/* Inside the teal help card and the dark meeting card, prose takes the
   colours of the card it sits on rather than the page. */
.atrium .a-help .md-body a,
.atrium .a-util .md-body a{ color:var(--a-cream); text-decoration-color:rgba(246,246,238,.5); }
.atrium .a-help .md-body strong,
.atrium .a-util .md-body strong{ color:var(--a-cream); }


/* ════════════════════════════════════════════════════════════════════
   THE SAME iOS ZOOM TRAP THE CRM LOST IN v8-233. Ona, 2026-08-27.

   iOS Safari zooms the page in when a client focuses a field whose
   font-size is under 16px, and it does not zoom back out when they
   leave it. Everything after that reads cut off, the fixed header
   included, because the visual viewport is now smaller than the layout
   viewport. That is what made the staff CRM look like it had lost its
   mobile layout, and the portal is one pixel short of the same thing.

   16/15 is a gentle zoom next to the 16/12 the CRM comment box was
   doing, so it looks like a slightly enlarged page rather than a broken
   one. It still traps a client on their phone until they pinch out, and
   a client is far less likely than Ona to know that is what happened.

   Phone only. On a desktop 15px is the deliberate portal size and stays.
   Recorded in ISSUES.md on 2026-08-27 and fixed the same day when Ona
   said to.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:720px){
  .atrium .a-input,
  .atrium .a-select,
  .atrium .a-textarea{ font-size:16px; }
}

/* ════════════════════════════════════════════════════════════════════
   THE CLIENT'S REPLY BOX (2026-08-28)

   Until now a client could raise a request and read our answer, and that
   was the end of the road. If the answer asked them to go and do
   something there was no way to say it was done, so it came back by
   email, outside the system, and the request sat open with no honest way
   to close it.

   Plain textarea, matching every other form in this portal. The
   formatting toolbar added to the CRM in the same change deliberately
   does not appear here.
   ════════════════════════════════════════════════════════════════════ */

.atrium .a-reply{ margin-top:14px; padding-top:14px; border-top:1px solid var(--a-hairline); }
.atrium .a-reply .a-input{ width:100%; margin-bottom:8px; resize:vertical; min-height:74px; }
.atrium .a-reply .a-btn{ margin-top:2px; }
.atrium .a-reply .a-formerr:empty{ display:none; }