/* ==========================================================================
   omarfaruc.com · shell.css
   The app look shared by the two dashboards: your page (/my) and the admin page (/admin).
   Pages that use it set "class": "is-app" so <html> gets .is-app. Everything here is prefixed ap-.

   Hierarchy, so the eye knows where to go (the UI/UX skill's visual-hierarchy, font-scale, weight-hierarchy,
   whitespace-balance, section-spacing and primary-action rules):
   - One type scale, seven steps, nothing in between:
       large 32 (28 on phones)  the screen's title, the one line that matters now, big numbers
       title 24                 a person's name in their panel, a dialog, numbers in small tiles
       head  18                 the title inside a card
       body  16                 what you read: rows, paragraphs, fields
       small 14                 the detail under a title, hints, table text
       label 13                 small capitals over a group: what this card is about
       cap   12                 chips, tiny dates, the tab bar's words
   - Four weights, each with one job: 700 titles and numbers, 600 labels, chips and buttons,
     500 the names of things (rows, places in the nav, field labels), 400 everything you read.
   - Spacing in steps of 4, 8, 12, 16, 24, 32, 48: things that belong together sit 4 to 12 apart, cards 24 apart,
     and a screen's title sits 32 above what follows.
   - Three heights: the canvas, cards (a hairline and a whisper of shadow), and the one card that leads (lifted,
     tinted with the cohort's colour). Panels and dialogs float above all of it.
   - A card reads top to bottom: a quiet label, one bold title, then the details. No icon on every header.
   - One black button per screen. Everything else is outlined or a link.
   And every line of text is dark enough to read: 4.5:1 or better on whatever it sits on.
   ========================================================================== */

.is-app{
  --ap-bg:#F2F2F5;
  --ap-card:#FFFFFF;
  --ap-line:rgba(0,0,0,.07);
  --ap-line-2:rgba(0,0,0,.13);
  --t1:#1D1D1F;               /* 16.8:1 on white: titles and names */
  --t2:#3A3A3C;               /* 11.5:1: what you read */
  --t3:#5E5E63;               /* 6.4:1 on white, 5.8:1 on the canvas: details and labels, never lighter */
  --ink-3:#5E5E63;
  --ink-4:#6E6E73;
  --accent-ink:color-mix(in srgb,var(--accent) 82%,#000);
  --accent-soft:color-mix(in srgb,var(--accent) 10%,#fff);
  --ap-ok:#166B2E;--ap-ok-bg:#E6F4EA;
  --ap-warn:#8F5100;--ap-warn-bg:#FFF2DB;
  --ap-bad:#B3261E;--ap-bad-bg:#FCEBEA;
  --ap-mute-bg:#EDEDF0;
  /* the type scale (the visual-hierarchy skill): a screen's title (--fs-large, one per screen) is 1.5 times a big card
     title or number (--fs-title), and that is 1.5 times what you read (--fs-body). Card titles (--fs-head) sit with
     --fs-title as the second level; under that weight and colour do the work, and labels are small capitals. */
  --fs-large:36px;--fs-title:24px;--fs-head:18px;--fs-body:16px;--fs-small:14px;--fs-label:13px;--fs-cap:12px;
  /* the spacing steps */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;
  /* the heights */
  --ap-r:20px;--ap-r-s:14px;
  --ap-sh:0 0 0 1px var(--ap-line),0 1px 2px rgba(0,0,0,.04);
  --ap-sh-2:0 0 0 1px var(--ap-line),0 12px 32px -16px rgba(0,0,0,.24);
  --side-w:256px;
  --tab-h:64px;
}
@media (max-width:599px){ .is-app{--fs-large:30px;--fs-title:20px} }
.is-app body{background:var(--ap-bg)}

/* the marketing links step aside: inside the app the logo is the way back to the site */
.is-app .gnav__links,.is-app .gnav__end .btn,.is-app .gnav__menu,.is-app .gnav__login{display:none}
.is-app .gnav{background:rgba(242,242,245,.82)}

/* buttons on the scale: 16 for a button, 14 for a small one, and every one at least 40 tall */
.is-app .btn{font-size:var(--fs-body)}
.is-app .btn--lg{height:50px;padding:0 26px;font-size:var(--fs-body)}
.is-app .btn--sm{height:40px;padding:0 16px;font-size:var(--fs-small)}

/* ---------- the frame: sidebar + main, or main + tab bar ---------- */
.ap{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);gap:var(--sp-6);max-width:1240px;margin:0 auto;padding:var(--sp-6) var(--gutter) var(--sp-7);min-height:calc(100svh - var(--nav-h))}
.ap-main{min-width:0;outline:none}
.ap-side{position:sticky;top:calc(var(--nav-h) + var(--sp-6));align-self:start;display:flex;flex-direction:column;gap:var(--sp-3)}
@media (max-width:1023px){
  .ap{grid-template-columns:minmax(0,1fr);gap:0;padding:var(--sp-4) var(--sp-4) calc(var(--tab-h) + 40px + env(safe-area-inset-bottom,0px))}
  .ap-side{display:none}
}

/* who and where: the top of the sidebar */
.ap-id{padding:var(--sp-4);border-radius:var(--ap-r);background:var(--ap-card);box-shadow:var(--ap-sh)}
.ap-id__top{display:flex;align-items:center;gap:var(--sp-3)}
.ap-id__top .sym{--s:40px}
.ap-id__n{font-size:var(--fs-body);font-weight:700;letter-spacing:-.01em;line-height:1.25;color:var(--t1)}
.ap-id__s{margin-top:2px;font-size:var(--fs-small);line-height:1.35;color:var(--t3)}
.ap-id__bar{margin-top:var(--sp-4)}

/* the five places */
.ap-nav{display:flex;flex-direction:column;gap:2px;padding:var(--sp-2);border-radius:var(--ap-r);background:var(--ap-card);box-shadow:var(--ap-sh)}
.ap-nav a{position:relative;display:flex;align-items:center;gap:var(--sp-3);min-height:46px;padding:0 var(--sp-3);border-radius:12px;font-size:var(--fs-body);font-weight:500;color:var(--t2);text-decoration:none;transition:background-color .2s,color .2s}
.ap-nav a:hover{background:var(--ap-bg);color:var(--t1)}
.ap-nav a[aria-current="page"]{background:var(--accent-soft);font-weight:600;color:var(--t1)}
.ap-nav a[aria-current="page"] .ico{color:var(--accent-ink)}
.ap-nav .ico .ic,.ap-tabs .ico .ic{width:22px;height:22px}
.ap-nav__n{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--accent-ink);color:#fff;font-size:var(--fs-cap);font-weight:700;line-height:22px;text-align:center}
.ap-side__foot{display:flex;flex-direction:column;gap:2px;padding:var(--sp-1) var(--sp-2)}
.ap-side__foot a,.ap-side__foot button{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 var(--sp-3);border-radius:12px;background:none;font:inherit;font-size:var(--fs-small);font-weight:500;color:var(--t2);text-decoration:none;cursor:pointer}
.ap-side__foot a:hover,.ap-side__foot button:hover{background:rgba(0,0,0,.04);color:var(--t1)}
.ap-side__foot .ico .ic{width:20px;height:20px}

/* the tab bar on phones: the same places, icon and word */
.ap-tabs{position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 -1px 0 var(--ap-line)}
.ap-tabs a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border-radius:12px;font-size:var(--fs-cap);font-weight:500;letter-spacing:0;color:var(--t3);text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.ap-tabs a[aria-current="page"]{font-weight:600;color:var(--accent-ink)}
.ap-tabs a:active{background:rgba(0,0,0,.05)}
.ap-tabs .ap-nav__n{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;line-height:18px}
@media (max-width:1023px){
  .ap-tabs{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr))}
  .is-app .toast{bottom:calc(var(--tab-h) + 18px + env(safe-area-inset-bottom,0px))}
  .is-app .foot--min{padding-bottom:calc(var(--tab-h) + 16px)}
}

/* ---------- the label: small capitals over a group ---------- */
.ap-label,.ap-card__t,.ap-head__k{font-size:var(--fs-label);font-weight:600;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}

/* ---------- a screen's title ---------- */
.ap-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--sp-3) var(--sp-4);margin:0 0 var(--sp-2)}
.ap-head__k{display:flex;align-items:center;gap:var(--sp-2)}
.ap-head__k .sym{--s:20px}
.ap-head__h{margin-top:var(--sp-2);font-size:var(--fs-large);line-height:1.12;letter-spacing:-.03em;font-weight:700;color:var(--t1);text-wrap:balance}
.ap-head__p{margin-top:var(--sp-2);max-width:62ch;font-size:var(--fs-body);line-height:1.5;color:var(--t2)}
.ap-head__end{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
/* a quieter title, when the card below it is the point of the screen (Home's greeting) */
.ap-head--sm .ap-head__h{font-size:var(--fs-title);letter-spacing:-.02em}
.ap-back{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:40px;margin:0 0 0 -6px;padding:0 10px 0 4px;border-radius:10px;font-size:var(--fs-small);font-weight:500;color:var(--t2);text-decoration:none;background:none;cursor:pointer}
.ap-back:hover{color:var(--t1);background:rgba(0,0,0,.04)}
.ap-back .ic{width:20px;height:20px}

/* ---------- cards ---------- */
.ap-stack{display:flex;flex-direction:column;gap:var(--sp-5)}
.ap-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.ap-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){ .ap-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:699px){ .ap-grid,.ap-grid--3{grid-template-columns:minmax(0,1fr)} }
.ap-card{position:relative;min-width:0;padding:var(--sp-5);border-radius:var(--ap-r);background:var(--ap-card);box-shadow:var(--ap-sh)}
@media (max-width:599px){ .ap-card{padding:20px} }
.ap-card--flush{padding:0;overflow:hidden}
.ap-card--link{display:block;color:inherit;text-decoration:none;transition:box-shadow .25s,transform .25s var(--ease)}
.ap-card--link:hover{box-shadow:var(--ap-sh-2);transform:translateY(-1px)}
.ap-card__h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:24px;margin-bottom:var(--sp-3)}
.ap-card__t{display:flex;align-items:center;gap:var(--sp-2)}
.ap-card__t .ico{display:none}           /* the label says it; an icon on every header is noise */
.ap-card__more{display:inline-flex;align-items:center;gap:2px;min-height:36px;margin:-6px -6px -6px 0;padding:0 4px 0 10px;border-radius:10px;background:none;font:inherit;font-size:var(--fs-small);font-weight:600;color:var(--t1);text-decoration:none;white-space:nowrap;cursor:pointer}
.ap-card__more:hover{background:var(--ap-bg)}
.ap-card__more .ic{width:18px;height:18px}
.ap-title{font-size:var(--fs-head);line-height:1.3;letter-spacing:-.015em;font-weight:700;color:var(--t1);text-wrap:balance}
.ap-title--lg{font-size:var(--fs-title);line-height:1.2;letter-spacing:-.02em}
.ap-card__p{font-size:var(--fs-body);line-height:1.5;color:var(--t2)}
.ap-card__p + .ap-card__p{margin-top:var(--sp-2)}
.ap-card__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);margin-top:var(--sp-4)}
.ap-sub{font-size:var(--fs-small);line-height:1.45;color:var(--t3)}
.ap-title + .ap-sub,.ap-title + .ap-card__p{margin-top:var(--sp-1)}

/* the one card per screen that leads: lifted, and tinted with the cohort's colour */
.ap-hero{position:relative;overflow:hidden;isolation:isolate;padding:var(--sp-6);border-radius:24px;background:#fff;box-shadow:0 0 0 1px var(--ap-line),0 24px 48px -28px color-mix(in srgb,var(--accent) 55%,transparent)}
.ap-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 130% at 100% 0%,color-mix(in srgb,var(--accent-l) 50%,transparent),transparent 62%),linear-gradient(180deg,#fff 40%,color-mix(in srgb,var(--accent-l) 20%,#fff))}
.ap-hero__k{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.ap-hero__k .sym{--s:24px}
.ap-hero__t{margin-top:var(--sp-4);max-width:22ch;font-size:var(--fs-large);line-height:1.12;letter-spacing:-.03em;font-weight:700;color:var(--t1);text-wrap:balance}
.ap-hero__s{margin-top:var(--sp-3);max-width:56ch;font-size:var(--fs-body);line-height:1.5;color:var(--t2)}
.ap-hero__s strong{font-weight:600;color:var(--t1)}
.ap-hero__a{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin-top:var(--sp-5)}
.ap-hero__a .ap-sub{flex-basis:100%}
@media (max-width:599px){ .ap-hero{padding:var(--sp-5);border-radius:22px} .ap-hero__a .btn{flex:1 1 100%;justify-content:center} }

/* ---------- small things ---------- */
.ap-chip{display:inline-flex;align-items:center;gap:5px;min-height:24px;padding:2px 10px;border-radius:999px;background:var(--ap-mute-bg);font-size:var(--fs-cap);font-weight:600;line-height:1.3;letter-spacing:.01em;color:var(--t2);white-space:nowrap;text-transform:none}
.ap-chip .ic{width:14px;height:14px}
.ap-chip--ok{background:var(--ap-ok-bg);color:var(--ap-ok)}
.ap-chip--warn{background:var(--ap-warn-bg);color:var(--ap-warn)}
.ap-chip--bad{background:var(--ap-bad-bg);color:var(--ap-bad)}
.ap-chip--accent{background:var(--accent-soft);color:var(--accent-ink)}
.ap-chip--dark{background:var(--t1);color:#fff}
.ap-chip--live{background:var(--ap-bad-bg);color:var(--ap-bad)}
.ap-chip--live::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;animation:apPulse 1.6s ease-in-out infinite}
@keyframes apPulse{50%{opacity:.35}}

/* numbers in a box: the number is the loudest thing in it */
.ap-kpi{min-width:0;padding:20px;border-radius:18px;background:var(--ap-card);box-shadow:var(--ap-sh)}
.ap-kpi__l{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-small);font-weight:500;line-height:1.35;color:var(--t2)}
.ap-kpi__l .ico{display:none}
.ap-kpi__v{margin-top:var(--sp-2);font-size:var(--fs-title);line-height:1.1;letter-spacing:-.03em;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums}
.ap-kpi__v small{margin-left:3px;font-size:var(--fs-body);letter-spacing:0;font-weight:600;color:var(--t3)}
.ap-kpi__s{margin-top:var(--sp-1);font-size:var(--fs-small);line-height:1.4;color:var(--t3)}
.ap-kpi .spark{display:block;width:100%;height:40px;margin-top:var(--sp-3)}
.ap-kpis{display:grid;grid-template-columns:repeat(var(--k,3),minmax(0,1fr));gap:var(--sp-4)}
@media (max-width:699px){ .ap-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)} }

/* rows: one tappable line each, a name over its detail */
.ap-list{display:flex;flex-direction:column}
.ap-row{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:60px;padding:10px 0;border:0;border-top:1px solid var(--ap-line);background:none;font:inherit;text-align:left;color:inherit;text-decoration:none}
.ap-list > .ap-row:first-child,.ap-list > :first-child > .ap-row{border-top:0}
button.ap-row,a.ap-row{cursor:pointer;border-radius:0;transition:background-color .2s}
button.ap-row:hover,a.ap-row:hover{background:linear-gradient(90deg,transparent,rgba(0,0,0,.025) 12%,rgba(0,0,0,.025) 88%,transparent)}
.ap-row__ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;background:var(--ap-bg);font-size:var(--fs-small);font-weight:700;color:var(--t1)}
.ap-row__ic .ic{width:20px;height:20px}
.ap-row__ic--accent{background:var(--accent-soft);color:var(--accent-ink)}
.ap-row__ic--ok{background:var(--ap-ok-bg);color:var(--ap-ok)}
.ap-row__b{flex:1;min-width:0}
.ap-row__t{display:block;font-size:var(--fs-body);font-weight:500;line-height:1.35;color:var(--t1);overflow-wrap:anywhere}
.ap-row__s{display:block;margin-top:2px;font-size:var(--fs-small);line-height:1.4;color:var(--t3);overflow-wrap:anywhere}
.ap-row__end{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto;flex:none;font-size:var(--fs-small);color:var(--t3)}
.ap-row__end .ic--24{width:18px;height:18px}

/* a strip of choices, like the weeks */
.ap-seg{display:flex;gap:2px;max-width:100%;overflow-x:auto;padding:3px;border-radius:12px;background:#E6E6EB;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ap-seg::-webkit-scrollbar{display:none}
.ap-seg button{position:relative;display:inline-flex;align-items:center;gap:6px;flex:none;min-height:38px;padding:0 var(--sp-3);border-radius:9px;background:none;font:inherit;font-size:var(--fs-small);font-weight:500;color:var(--t2);white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}
.ap-seg button:hover{color:var(--t1)}
.ap-seg button[aria-selected="true"]{background:#fff;font-weight:600;color:var(--t1);box-shadow:0 1px 2px rgba(0,0,0,.08),0 2px 8px -2px rgba(0,0,0,.12)}
.ap-seg button[disabled]{color:#8E8E93;cursor:default}
.ap-seg__d{width:7px;height:7px;border-radius:50%;background:#AEAEB2}
.ap-seg__d.is-ok{background:var(--ap-ok)}
.ap-seg__d.is-now{background:var(--accent)}

/* progress */
.ap-bar{display:flex;gap:4px}
.ap-bar i{flex:1;height:6px;border-radius:999px;background:#E3E3E8}
.ap-bar i.is-past{background:var(--accent)}
.ap-bar i.is-now{background:linear-gradient(90deg,var(--accent) 50%,#E3E3E8 50%)}
.ap-bar__l{display:flex;justify-content:space-between;gap:var(--sp-2);margin-top:var(--sp-2);font-size:var(--fs-label);font-weight:500;color:var(--t3)}
.ap-meter{height:6px;border-radius:999px;background:#E3E3E8;overflow:hidden}
.ap-meter i{display:block;height:100%;border-radius:inherit;background:var(--accent);transition:width .6s var(--ease)}

/* a checklist of steps */
.ap-steps{display:flex;flex-direction:column}
.ap-step{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:64px;padding:var(--sp-3) 0;border:0;border-top:1px solid var(--ap-line);background:none;font:inherit;text-align:left;color:inherit;text-decoration:none;cursor:pointer}
.ap-step:first-child{border-top:0}
.ap-step__n{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ap-line-2);font-size:var(--fs-label);font-weight:700;color:var(--t2)}
.ap-step.is-done .ap-step__n{background:var(--ap-ok);box-shadow:none;color:#fff}
.ap-step.is-done .ap-step__n .ic{width:14px;height:14px}
.ap-step.is-next .ap-step__n{background:var(--t1);box-shadow:none;color:#fff}
.ap-step.is-done .ap-row__t{color:var(--t3)}
.ap-step.is-next .ap-row__t{font-weight:600}
.ap-step:hover .ap-row__t{text-decoration:underline;text-underline-offset:3px}

/* faces */
.ap-faces{display:flex;align-items:center}
.ap-faces .ava{width:36px;height:36px;margin-left:-6px;font-size:var(--fs-cap);box-shadow:0 0 0 2.5px #fff,inset 0 0 0 1px var(--ap-line)}
.ap-faces .ava:first-child{margin-left:0}
.ap-faces__more{display:grid;place-items:center;width:36px;height:36px;margin-left:-6px;border-radius:50%;background:var(--ap-mute-bg);box-shadow:0 0 0 2.5px #fff;font-size:var(--fs-cap);font-weight:700;color:var(--t2)}

/* nothing here yet */
.ap-empty{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-6) var(--sp-4);text-align:center}
.ap-empty .ico{display:grid;place-items:center;width:48px;height:48px;margin-bottom:var(--sp-1);border-radius:14px;background:var(--ap-bg);color:var(--t2)}
.ap-empty .ico .ic{width:24px;height:24px}
.ap-empty__t{font-size:var(--fs-head);font-weight:700;letter-spacing:-.01em;color:var(--t1)}
.ap-empty__p{max-width:42ch;font-size:var(--fs-small);line-height:1.5;color:var(--t3)}

/* a definition list: the label quiet on the left, the value plain on the right */
.ap-dl{display:flex;flex-direction:column}
.ap-dl > div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--sp-1) var(--sp-4);min-height:52px;padding:var(--sp-3) 0;border-top:1px solid var(--ap-line)}
.ap-dl > div:first-child{border-top:0}
.ap-dl dt{font-size:var(--fs-small);font-weight:400;color:var(--t3)}
.ap-dl dd{margin:0;font-size:var(--fs-body);font-weight:500;color:var(--t1);text-align:right;overflow-wrap:anywhere}

/* forms inside the app */
.is-app .lab{font-size:var(--fs-small);font-weight:500;color:var(--t1)}
.is-app .hint{font-size:var(--fs-small);color:var(--t3)}
.is-app .in{min-height:48px;background:#F7F7F9;font-size:var(--fs-body)}
.is-app .in::placeholder{color:#6E6E73}
.is-app .in:focus{box-shadow:inset 0 0 0 2px var(--accent)}
.ap-form{display:flex;flex-direction:column;gap:var(--sp-5)}
.ap-form .field{display:flex;flex-direction:column;gap:var(--sp-2)}
.ap-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3)}
.ap-actions--end{justify-content:flex-end}
.ap-danger{color:var(--ap-bad)!important}

/* bits both dashboards use */
.ap.is-bare{grid-template-columns:minmax(0,1fr);max-width:880px}
.ap.is-bare .ap-side{display:none}
.ap-head__h:focus{outline:none}
.ap-dot{flex:none;width:8px;height:8px;margin-left:auto;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px #fff}
.ap-tabs .ap-dot{position:absolute;top:7px;left:calc(50% + 8px);margin:0}
.ap-go .ic{width:20px;height:20px;color:var(--t3);transition:color .2s,transform .25s var(--ease)}
.ap-card--link:hover .ap-go .ic{color:var(--t1);transform:translateX(2px)}
.mt-xs{margin-top:var(--sp-1)}.mb-m{margin-bottom:var(--sp-4)}

/* keyboard focus: always visible, in the cohort's colour */
.is-app :is(.ap-nav a,.ap-tabs a,.ap-row,.ap-step,.ap-seg button,.ap-card__more,.ap-back,.ap-card--link,.ap-side__foot a,.ap-side__foot button):focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}

/* a screen: its title, then its parts 24 apart */
.ap-view{display:flex;flex-direction:column;gap:var(--sp-5);animation:apIn .32s var(--ease) both}
.ap-view > .ap-seg{margin:0;align-self:flex-start}
.ap-view > .ap-back{align-self:flex-start;margin-bottom:calc(var(--sp-3) * -1)}
/* a button that isn't open yet reads as waiting, not broken */
.is-app .btn[aria-disabled="true"]{opacity:1;background:#fff;color:var(--t3);box-shadow:inset 0 0 0 1.5px var(--ap-line-2)}
.is-app .btn[aria-disabled="true"]:hover{transform:none;box-shadow:inset 0 0 0 1.5px var(--ap-line-2)}
@keyframes apIn{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){ .ap-view{animation:none} .ap-chip--live::before{animation:none} .ap-card--link:hover{transform:none} }