/* Situational Mindsets console — shared by all three roles.
   Tokens match the approved storyboards: navy #103A5E, gold #EFA81E, and a
   separate status palette that is never reused for anything else. */

:root{
  --navy:#103A5E; --navy-700:#0C2E4A; --navy-600:#1A4E7C;
  --gold:#EFA81E; --gold-600:#D8931A; --gold-050:#FDF3DD;
  --canvas:#F3F6F9; --surface:#fff; --surface-2:#F8FAFC; --border:#E4EAF1;
  --ink:#17222E; --ink-soft:#3D4A59; --muted:#66788B; --tint:#fff;
  --hero-a:#DCEAF6; --hero-b:#F4F9FD;
  --danger:#B0433A; --danger-600:#8E352E; --danger-tint:#FFD9D4;
  --st-available:#1B7FB8; --st-assigned:#6D5BD0; --st-progress:#E08A1E;
  /* The status slug is in_progress, and three screens build the token name
     from it at runtime — so this alias is what stops that segment of the
     license bar rendering with no colour at all. */
  --st-in_progress:#E08A1E;
  --st-consumed:#2F8F4E; --st-expired:#B0433A; --st-unassigned:#6B7A8D; --st-blocked:#A34A63;
  --r:12px; --r-sm:8px;
  --shadow-sm:0 1px 2px rgba(16,36,58,.06);
  --shadow:0 2px 4px rgba(16,36,58,.06),0 10px 30px rgba(16,36,58,.10);
  --f-head:"Poppins","Century Gothic",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:600;letter-spacing:-.01em;margin:0;text-wrap:balance}
a{color:var(--navy-600);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--gold-600);outline-offset:2px}

/* shell */
.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
/* The sidebar itself must not scroll, and so must not clip: the
   announcements panel opens out of it, and any overflow other than visible
   cuts it off at the sidebar edge — which is exactly what it did. The menu
   scrolls instead, which is the part that can actually grow. */
aside{z-index:5;background:var(--navy);color:#fff;display:flex;flex-direction:column;padding:18px 14px;position:sticky;top:0;height:100vh;overflow:visible}
.brand{display:flex;flex-direction:column;gap:9px;margin:8px 8px 18px}
.brand img{width:172px;height:auto;display:block}
.brand .role{font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.pill-admin{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;font-weight:700;color:var(--navy-700);background:var(--gold);border-radius:6px;padding:3px 9px;width:max-content;margin:0 8px 16px}
nav.side{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-height:0;overflow-y:auto}
.nav-lbl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.42);padding:14px 12px 6px;font-weight:600}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm);color:rgba(255,255,255,.72);font-size:14px;font-weight:500;border-left:3px solid transparent}
.nav-item:hover{background:rgba(255,255,255,.06);text-decoration:none;color:#fff}
.nav-item.active{background:rgba(255,255,255,.10);color:#fff;border-left-color:var(--gold);font-weight:600}
.side-foot{margin-top:0;flex:none;padding:12px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:10px}
.side-foot .idrow{display:flex;align-items:center;gap:10px;min-width:0}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--gold);color:var(--navy-700);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none;font-family:var(--f-head)}
.side-foot .who{font-size:13px;line-height:1.25;color:#fff;min-width:0}
.side-foot .who small{display:block;color:rgba(255,255,255,.55);font-size:11.5px;overflow:hidden;text-overflow:ellipsis}
.side-foot .signout{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:8px 12px;border-radius:var(--r-sm);font-size:12.5px;font-weight:600;font-family:inherit;color:var(--danger-tint);background:rgba(176,67,58,.20);border:1px solid rgba(176,67,58,.55)}
.side-foot .signout:hover{background:var(--danger);border-color:var(--danger);color:#fff;text-decoration:none}
.side-foot .signout:focus-visible{outline:2px solid var(--danger-tint);outline-offset:2px}

main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:16px;padding:16px 28px;background:var(--surface);border-bottom:1px solid var(--border)}
.topbar h1{font-size:20px}
.topbar .crumb{color:var(--muted);font-size:12.5px;margin-bottom:2px}
.topbar .btn{margin-left:auto}
/* The running license count, beside the button that sells more of them. It
   takes the auto margin so it sits with the button rather than adrift in the
   middle, and hands the button back a zero one so the pair stays together. */
.topbar .lic-left{margin-left:auto;display:flex;align-items:baseline;gap:6px;
  font-size:13px;color:var(--muted);white-space:nowrap}
.topbar .lic-left b{font-family:var(--f-head);font-size:19px;font-weight:600;color:var(--navy)}
.topbar .lic-left.none b{color:var(--st-expired)}
.topbar .lic-left~.btn{margin-left:0}
.content{padding:24px 28px 60px}

/* pieces */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:var(--r-sm);font-size:13.5px;font-weight:600;border:1px solid transparent;cursor:pointer;font-family:inherit}
.btn-gold{background:var(--gold);color:var(--navy-700)}
.btn-navy{background:var(--navy);color:#fff}
.btn-ghost{background:var(--surface);color:var(--ink-soft);border-color:var(--border)}
.btn-danger{background:var(--st-expired);color:#fff}
.btn-sm{padding:6px 11px;font-size:12.5px}
.btn:hover{text-decoration:none;filter:brightness(.97)}

.row{display:grid;gap:16px}
.kpis{grid-template-columns:repeat(4,1fr);margin-bottom:18px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow-sm)}
.kpi .k{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;margin-bottom:8px}
.kpi .v{font-family:var(--f-head);font-size:28px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.kpi .d{font-size:12px;color:var(--muted);margin-top:6px}
.two{grid-template-columns:1.6fr 1fr;align-items:start}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-sm)}
.card-h{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--border)}
.card-h h3{font-size:15px}
.card-h .right{margin-left:auto}
.card-b{padding:16px 20px}

.section-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.section-head h2{font-size:19px}
.section-head .acc{width:34px;height:4px;border-radius:2px;background:var(--gold)}
/* Actions sit together at the right-hand end. Only the first is pushed there —
   without the reset, every action carries margin-left:auto, flexbox shares the
   free space between them, and they end up strung across the middle. */
.section-head .btn,.section-head form,.section-head .pill{margin-left:auto}
.section-head .btn~.btn,.section-head .btn~form,
.section-head form~.btn,.section-head form~form{margin-left:0}

/* A heading and three actions do not fit across a phone. With nowhere to wrap,
   flexbox took the width out of the buttons instead, squeezing each label until
   it broke a word to a line — "Email all who can be (3)" stood six lines tall.
   Letting the row wrap, and taking the buttons out of the shrinking, gives each
   its own width and drops it to the next line when it will not fit. The cap
   keeps a long label inside the screen rather than pushing the page sideways. */
@media (max-width:900px){
  .section-head{flex-wrap:wrap}
  .section-head .btn,.section-head form,.section-head .pill{flex:0 0 auto;max-width:100%}
}

table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:11px 16px;border-bottom:1px solid var(--border);background:var(--surface-2);white-space:nowrap}
tbody td{padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
td.num{font-variant-numeric:tabular-nums}
td.right{text-align:right;white-space:nowrap}
.who-cell{display:flex;flex-direction:column}
.who-cell small{color:var(--muted);font-size:11.5px}
.tok{font-family:var(--f-mono);font-size:12.5px}
.pw{font-family:var(--f-mono);font-size:12.5px;color:var(--navy-600)}
.empty{padding:34px 20px;text-align:center;color:var(--muted);font-size:14px}

.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.pill i{width:9px;height:9px;border-radius:50%;flex:none}
.st-available{color:var(--st-available);background:color-mix(in srgb,var(--st-available) 13%,var(--tint))}
.st-available i{background:var(--st-available)}
.st-assigned{color:var(--st-assigned);background:color-mix(in srgb,var(--st-assigned) 13%,var(--tint))}
.st-assigned i{background:var(--st-assigned)}
.st-in_progress{color:var(--st-progress);background:color-mix(in srgb,var(--st-progress) 15%,var(--tint))}
.st-in_progress i{background:var(--st-progress)}
.st-consumed,.st-active{color:var(--st-consumed);background:color-mix(in srgb,var(--st-consumed) 14%,var(--tint))}
.st-consumed i,.st-active i{background:var(--st-consumed)}
.st-expired{color:var(--st-expired);background:color-mix(in srgb,var(--st-expired) 13%,var(--tint))}
.st-expired i{background:var(--st-expired)}
.st-archived{color:var(--st-unassigned);background:color-mix(in srgb,var(--st-unassigned) 14%,var(--tint))}
.st-archived i{background:var(--st-unassigned)}
.st-blocked{color:var(--st-blocked);background:color-mix(in srgb,var(--st-blocked) 14%,var(--tint))}
.st-blocked i{background:var(--st-blocked)}

.barchart{display:flex;align-items:flex-end;gap:10px;height:120px;padding-top:8px}
.barchart .bar{flex:1;background:linear-gradient(var(--navy-600),var(--navy));border-radius:5px 5px 0 0;position:relative;min-height:2px}
.barchart .bar span{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-size:10.5px;color:var(--muted)}
.barchart .bar b{position:absolute;top:-19px;left:0;right:0;text-align:center;font-size:11px;font-family:var(--f-head);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.statusbar{display:flex;height:12px;border-radius:6px;overflow:hidden;margin:2px 0 14px;border:1px solid var(--border)}
.statusbar i{display:block}
.legend{display:flex;flex-wrap:wrap;gap:10px 16px}
.legend span{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-soft)}
.legend i{width:9px;height:9px;border-radius:50%}

.fld{margin-bottom:14px}
.fld label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.fld .req{color:var(--gold-600)}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--ink);font-size:14px;font-family:inherit}
textarea{min-height:96px;line-height:1.55;resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hint{font-size:12px;color:var(--muted);margin:6px 0 0}

.notice{display:flex;gap:11px;align-items:flex-start;border-radius:10px;padding:12px 15px;margin-bottom:18px;font-size:13.5px}
.notice-ok{background:color-mix(in srgb,var(--st-consumed) 10%,var(--tint));border:1px solid var(--st-consumed);color:var(--ink-soft)}
.notice-error{background:color-mix(in srgb,var(--st-expired) 10%,var(--tint));border:1px solid var(--st-expired);color:var(--ink-soft)}
.notice-info{background:var(--gold-050);border:1px solid var(--gold);color:var(--ink-soft)}
.notice-info a{color:var(--navy);font-weight:600;text-decoration:underline;margin-left:4px}
.callout{display:flex;gap:11px;align-items:flex-start;background:color-mix(in srgb,var(--gold) 12%,var(--tint));border:1px solid var(--gold);border-radius:10px;padding:12px 14px;font-size:12.5px;color:var(--ink-soft)}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{padding:6px 13px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--ink-soft);font-size:12.5px;font-weight:600}
.chip.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.chip:hover{text-decoration:none}

.tier{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);margin-bottom:8px}
.tier b{font-family:var(--f-head);min-width:44px;font-variant-numeric:tabular-nums}
.tier span{color:var(--muted);font-size:12.5px;flex:1}

/* sign-in */
.loginwrap{min-height:100vh;display:grid;place-items:center;background:linear-gradient(160deg,var(--hero-a),var(--hero-b) 60%,var(--canvas));padding:24px}
.login-card{width:100%;max-width:410px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:34px 32px}
.login-card img{width:212px;height:auto;display:block;margin-bottom:20px}
.login-card h1{font-size:21px;margin-bottom:5px}
.login-card .sub{color:var(--muted);font-size:13.5px;margin-bottom:22px}
.proto-note{margin-top:16px;font-size:11.5px;color:var(--muted);text-align:center}

/* "You may be in the wrong place — here is the right one." Loud on purpose: as
   a grey footnote this was read straight past, and the cost of missing it is
   filling in a form you did not need, or hunting for a password nobody ever
   gave you. Deliberately not a second gold button — the form is still the point
   of the page, and two gold buttons make somebody stop and choose. */
.otherway{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;
  margin:0 0 22px;padding:13px 16px;border:1px solid var(--gold);border-radius:var(--r-sm);
  background:var(--gold-050);font-size:15px;font-weight:600;color:var(--ink)}
.otherway a{color:var(--navy);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.otherway a:hover{color:var(--navy-700)}
.otherway-under{margin:18px 0 0}

/* In the sign-in card it becomes the foot of the card rather than a second
   button. Sharing the gold and the rounded-box shape of the button just above
   it made the two read as competing actions, and squashed the forgotten-password
   link between them. Full width, a hairline above, and no gold: the gold belongs
   to the one thing this page is actually asking for. */
.login-card .otherway{margin:26px -32px -34px;padding:16px 20px;gap:4px 10px;
  border:0;border-top:1px solid var(--border);border-radius:0 0 16px 16px;
  background:var(--surface-2);font-size:14.5px}

/* The menu button. Only ever seen on a narrow screen — on a wide one the
   sidebar is simply there, and a button to reveal what is already visible is
   just clutter. */
.burger{display:none;flex-direction:column;justify-content:center;gap:4px;
  width:38px;height:38px;padding:0 9px;flex:none;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);cursor:pointer}
.burger span{display:block;height:2px;border-radius:2px;background:var(--navy);transition:transform .2s,opacity .2s}
.burger:hover{background:#fff}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.side-scrim{display:none}

@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .burger{display:flex}

  /* Off the left edge until asked for, then slid in over the page. Fixed
     rather than in the flow, so opening the menu does not shove the content
     down and lose the reader's place. */
  aside{position:fixed;top:0;left:0;bottom:0;width:270px;height:100dvh;
    transform:translateX(-100%);transition:transform .22s ease;z-index:60;
    box-shadow:0 0 0 100vmax rgba(0,0,0,0)}
  body.side-open aside{transform:translateX(0)}

  /* Tapping anywhere else closes it — the thing everybody tries first.

     Closed, it is hidden with visibility rather than the `hidden` attribute.
     A class beats the browser's own [hidden] rule, so `display:block` here
     left an invisible sheet stretched over the whole page — it swallowed
     every tap on the console, the menu button among them. visibility keeps
     it out of hit-testing and still fades; pointer-events covers the 220ms
     of the closing fade, when it is on its way out but still visible. */
  .side-scrim{display:block;position:fixed;inset:0;z-index:55;
    background:rgba(16,58,94,.45);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .22s ease,visibility .22s ease}
  body.side-open .side-scrim{opacity:1;visibility:visible;pointer-events:auto}

  body.side-open{overflow:hidden}

  .kpis{grid-template-columns:repeat(2,1fr)}
  .two,.grid2,.grid3{grid-template-columns:1fr}

  /* A grid item's automatic minimum size is its own content, so a card holding
     an address like dana@acmeleadership.com, or a line of fixed-width fields,
     held its track wider than the screen and took the page sideways with it
     instead of wrapping. By this width the cards are stacked one per row and
     have no use for that floor. */
  .row > *{min-width:0}
  .content{padding:18px}
  .topbar{padding:14px 18px;gap:12px}
  .topbar h1{font-size:17px}
  .table-wrap{overflow-x:auto}
}

@media (max-width:900px) and (prefers-reduced-motion:reduce){
  aside,.side-scrim{transition:none}
}

/* announcements, as read by the recipient */
.msg{padding:12px 0;border-bottom:1px solid var(--border)}
.msg:last-child{border-bottom:0}
.msg-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.msg-h strong{font-family:var(--f-head);font-size:14.5px}
.msg-when{color:var(--muted);font-size:12px}
.msg p{margin:5px 0 0;color:var(--ink-soft);font-size:14px}
.msg-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;align-self:center}
.pill-new{background:var(--gold-050);color:var(--navy-700);border:1px solid var(--gold);font-size:11.5px;padding:2px 9px;border-radius:99px;font-weight:700;margin-left:auto}
.nav-item{position:relative}
/* a count against a menu item, for work that is waiting on somebody. Gold on
   the navy sidebar, and only rendered when the count is above zero — a
   permanent "0" teaches the eye to ignore the badge. */
.nav-badge{margin-left:auto;background:var(--gold);color:var(--navy-700);font-size:11px;font-weight:700;
  line-height:1;padding:3px 7px;border-radius:99px;font-variant-numeric:tabular-nums}
.nav-item.active .nav-badge{background:#fff;color:var(--navy-700)}
.nav-count{margin-left:auto;background:var(--gold);color:var(--navy-700);font-size:11px;font-weight:700;min-width:18px;height:18px;padding:0 5px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center}

/* announcements bell — hover opens the panel, tapping the bell opens the page,
   so nothing here is reachable by hover alone */
.bell-wrap{position:relative;margin-left:auto;flex:none}
.bell{position:relative;display:grid;place-items:center;width:32px;height:32px;border-radius:8px;color:rgba(255,255,255,.7)}
.bell:hover,.bell-wrap:focus-within .bell{background:rgba(255,255,255,.10);color:#fff;text-decoration:none}
.bell.has-new{color:#fff}
.bell-count{position:absolute;top:-1px;right:-2px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;
  background:var(--gold);color:var(--navy-700);font-size:10.5px;font-weight:800;line-height:16px;text-align:center;
  border:2px solid var(--navy-700)}

.bell-panel{display:none;position:absolute;left:100%;bottom:-8px;width:306px;padding-left:10px;z-index:60}
.bell-wrap:hover .bell-panel,.bell-wrap:focus-within .bell-panel{display:block}
.bell-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow);overflow-y:auto;max-height:min(70vh,440px)}

.bell-head{padding:10px 14px;border-bottom:1px solid var(--border);font-family:var(--f-head);font-size:12px;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.bell-item{display:block;padding:10px 14px;border-bottom:1px solid var(--border);color:var(--ink)}
.bell-item:last-of-type{border-bottom:0}
.bell-item:hover{background:var(--surface-2);text-decoration:none}
.bell-item.unread{border-left:3px solid var(--gold);padding-left:11px}
.bell-subj{display:block;font-size:13.5px;font-weight:600;line-height:1.35;margin-bottom:2px}
.bell-meta{display:block;font-size:11.5px;color:var(--muted)}
.bell-foot{display:block;padding:9px 14px;background:var(--surface-2);border-top:1px solid var(--border);
  font-size:12.5px;font-weight:600;text-align:center}
.bell-empty{padding:16px 14px;color:var(--muted);font-size:13px;text-align:center}

/* no hover to speak of: the bell is a link to the full list, so hide the panel
   rather than let it flash open on a tap */
@media (hover:none),(max-width:900px){.bell-panel{display:none !important}}

/* a completed report, read from the console — same visual language as the one
   the participant saw, so the two are recognisably the same document */
.mrow{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.mrow .ml{width:104px;font-size:13px;font-weight:600;flex:none}
.mrow .mt{flex:1;height:16px;background:var(--surface-2);border-radius:5px;overflow:hidden;border:1px solid var(--border)}
.mrow .mt i{display:block;height:100%;border-radius:5px}
.mrow .mv{width:26px;text-align:right;font-family:var(--f-mono);font-size:13px;font-variant-numeric:tabular-nums;flex:none}
.prio{font-size:10px;font-weight:700;color:var(--navy-600);background:color-mix(in srgb,var(--navy) 10%,#fff);
  border-radius:5px;padding:1px 6px;flex:none}
/* A row action. Some are links and some are buttons in a form doing exactly
   the same job, and there was never a base rule here — so the links picked up
   the global anchor colour and the buttons fell back to the browser's own grey
   chrome. One rule for both, dressing the button as the link it reads as. */
.kebab{display:inline;padding:0;margin:0;border:0;background:none;font:inherit;
  color:var(--navy-600);text-decoration:none;cursor:pointer}
.kebab:hover{color:var(--navy);text-decoration:underline}
.kebab.strong{color:var(--navy-600);font-weight:600}
.kebab+.kebab{margin-left:12px}

/* A scroller only clips what it is the containing block for. The screen-reader
   labels inside the row menus are position:absolute with nothing positioned
   between them and the body, so they were not clipped: each one sat at its
   static position 600px out — off the end of a table twice the width of the
   screen — and held the whole document open there. The page then scrolled
   sideways over 200px of empty space, on a table that scrolls perfectly well by
   itself. This makes the wrapper the containing block, which settles it for any
   positioned thing that ends up in a table later. */
.table-wrap{position:relative}

/* On touch these are the row's actions — View report, Edit, Revoke, Send now —
   and as a line of text they stand 18px tall, which is a mouse's target rather
   than a finger's. The hit area is stretched out over the cell's own padding
   instead of the link being made bigger, so nothing moves and no row grows. It
   reaches 6px to each side, exactly half the 12px between neighbours, so two
   actions on one line meet without overlapping. */
@media (hover:none),(max-width:900px){
  .kebab{position:relative}
  .kebab::after{content:'';position:absolute;left:-6px;right:-6px;top:-11px;bottom:-11px}
}
/* The per-row menu on the group screen: a choice and the button that commits
   it, sitting on one line with the links beside them. */
.rowpick{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;margin-left:12px}
.rowpick select{width:auto;min-width:132px;padding:5px 26px 5px 9px;font-size:12.5px}
.rowpick .btn{flex:none}
/* Visible to a screen reader, to nobody else. Every row's menu needs a label
   of its own or they all read as the same unnamed control. */
.scr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* the row of actions that sits above a page's content: where you came from on
   the left, what you came to do on the right */
.page-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.page-actions .btn{margin-left:auto}
.back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--navy-600)}
.back:hover{text-decoration:underline}

/* password field with its show/hide control */
.pw-wrap{position:relative;display:block}
.pw-wrap input{width:100%;padding-right:64px}
.pw-toggle{position:absolute;top:50%;right:6px;transform:translateY(-50%);border:0;background:transparent;
  padding:6px 8px;border-radius:6px;font:inherit;font-size:12.5px;font-weight:600;color:var(--navy-600);cursor:pointer}
.pw-toggle:hover{background:var(--surface-2)}
.pw-toggle:focus-visible{outline:2px solid var(--gold-600);outline-offset:1px}

/* the announcement bar */
.ann-bar{display:flex;align-items:center;gap:12px;margin:0 0 18px;padding:11px 14px;border-radius:var(--r-sm);
  background:var(--gold-050);border:1px solid var(--gold)}
.ann-dot{width:7px;height:7px;border-radius:50%;background:var(--gold-600);flex:none}
.ann-text{flex:1;min-width:0;font-size:13.5px;color:var(--ink)}
.ann-text strong{font-family:var(--f-head);margin-right:8px}
.ann-text span{color:var(--ink-soft)}
.ann-more{font-size:11.5px;font-weight:700;color:var(--navy-700);background:#fff;border:1px solid var(--gold);
  border-radius:99px;padding:2px 9px;flex:none}
.ann-x{flex:none;font-size:20px;line-height:1;color:var(--muted);padding:0 2px;text-decoration:none}
.ann-x:hover{color:var(--ink);text-decoration:none}

/* copyright and trademark notice, on every page */
.smx-legal{padding:20px 24px 26px;border-top:1px solid var(--border);background:var(--surface-2)}
.smx-legal p{max-width:820px;margin:0 auto;font-size:11.5px;line-height:1.6;color:var(--muted);text-align:center}
.smx-legal a{color:var(--navy-600);text-decoration:underline}

/* Help. Long by nature, so the contents list follows you down the page and the
   measure is kept narrow enough to actually read. */
.help-wrap{display:grid;grid-template-columns:230px 1fr;gap:34px;align-items:start}
.help-toc{position:sticky;top:20px;display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 40px);
  overflow-y:auto}
.help-toc-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  margin-bottom:8px}

.help-grp{border-bottom:1px solid var(--border)}
.help-grp:last-of-type{border-bottom:0}
.help-grp > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;
  padding:9px 4px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--navy);user-select:none}
.help-grp > summary::-webkit-details-marker{display:none}
.help-grp > summary::before{content:'';flex:none;width:0;height:0;border-left:5px solid currentColor;
  border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s ease}
.help-grp[open] > summary::before{transform:rotate(90deg)}
.help-grp > summary:hover{color:var(--gold-600)}
.help-grp > summary:focus-visible{outline:2px solid var(--gold-600);outline-offset:2px;border-radius:4px}

.help-toc a{display:block;padding:8px 11px;border-radius:var(--r-sm);font-size:15px;line-height:1.4;color:var(--ink-soft);
  border-left:2px solid var(--border);margin-bottom:2px}
.help-toc a:hover{background:var(--surface);color:var(--ink);text-decoration:none;border-left-color:var(--gold)}
.help-toc a.on{background:var(--surface);color:var(--navy);font-weight:600;border-left-color:var(--gold);
  box-shadow:var(--shadow-sm)}
.help-top{margin-top:14px;font-size:12px;color:var(--muted);border-left:0 !important}

.help-main{min-width:0}
.help-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px}
.help-intro{flex:1 1 340px;font-size:18px;line-height:1.7;color:var(--ink-soft);margin:0 0 8px}
.help-downloads{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0 22px}
.help-downloads-h{flex:1 0 100%;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted)}
.help-print{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--navy-700);
  background:var(--gold);border:1px solid var(--gold);border-radius:var(--r-sm);padding:8px 14px;
  box-shadow:var(--shadow-sm)}
.help-print:hover{background:var(--gold-600);border-color:var(--gold-600);text-decoration:none}
.help-print svg{flex:none}

/* Written for people who read a manual slowly and want to get it right: 17px
   as the ordinary size, a wide line-height, and every size below in em so the
   text-size buttons in the page header can scale the whole lot at once. */
.help-main{--hs:1}
.help-main[data-size="l"]{--hs:1.18}
.help-main[data-size="xl"]{--hs:1.36}

.help-sec{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:26px 30px;margin-top:20px;scroll-margin-top:20px;font-size:calc(17px * var(--hs))}
.help-sec h2{font-family:var(--f-head);font-size:1.55em;margin:0 0 4px;padding-bottom:12px;
  border-bottom:3px solid var(--gold);display:inline-block}
.help-sec h3{font-family:var(--f-head);font-size:1.2em;margin:30px 0 8px;color:var(--navy)}
.help-sec p{margin:0 0 14px;line-height:1.75;color:var(--ink-soft)}
.help-sec .help-lede{font-size:1.08em;color:var(--ink);margin:14px 0 8px}
.help-sec ul,.help-sec ol{margin:0 0 14px;padding-left:24px;color:var(--ink-soft);line-height:1.75}
.help-sec li{margin-bottom:9px}
.help-sec strong{color:var(--ink)}
.help-sec code{font-family:var(--f-mono);font-size:.88em;background:var(--surface-2);border:1px solid var(--border);
  border-radius:5px;padding:1px 6px;color:var(--navy-600)}

.help-note{background:var(--gold-050);border:1px solid var(--gold);border-radius:var(--r-sm);
  padding:14px 18px;margin:18px 0;font-size:.95em;line-height:1.7;color:var(--ink-soft)}
.help-note strong{color:var(--ink)}

/* Numbered steps: a big number a finger could press, one action per step. */
.help-sec ol.help-steps{list-style:none;counter-reset:hs;padding:0;margin:10px 0 18px}
.help-steps > li{counter-increment:hs;position:relative;margin:0 0 14px;padding:16px 18px 16px 72px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);min-height:64px;line-height:1.7}
.help-steps > li::before{content:counter(hs);position:absolute;left:16px;top:14px;width:42px;height:42px;
  border-radius:50%;background:var(--navy);color:#fff;font:700 1.25em/42px var(--f-head);text-align:center}
.help-steps > li > strong:first-child{display:block;font-family:var(--f-head);font-size:1.1em;margin-bottom:4px;
  color:var(--navy)}
.help-skip{font-size:.9em;font-style:italic;color:var(--muted);margin:0 0 8px}
.help-steps p{margin:0 0 8px}
.help-steps p:last-child{margin-bottom:0}
.help-steps ul{margin:6px 0 4px}

.help-qr-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:8px 0 4px}
.help-qr{display:inline-block;line-height:0;padding:8px;background:#fff;border:1px solid var(--border);border-radius:var(--r-sm)}
.help-qr-cap{font-size:.82em;font-weight:600;color:var(--muted)}

/* What the screen will show, and what to press — kept visually apart from the
   explanation so a reader can find "the thing to do" again at a glance. */
.help-see{background:#fff;border:1px dashed var(--border);border-radius:var(--r-sm);padding:10px 14px;
  margin:8px 0;font-size:.95em;color:var(--ink-soft)}
.help-see b{color:var(--navy)}
.help-btn{display:inline-block;padding:1px 10px;border-radius:6px;background:var(--navy);color:#fff;
  font-weight:600;font-size:.92em;white-space:nowrap}
.help-btn.gold{background:var(--gold);color:var(--ink)}

/* Question and answer, for "what if…". <details> so it opens with a click or the
   keyboard and needs no script. */
.help-qa{border:1px solid var(--border);border-radius:var(--r-sm);margin:0 0 10px;background:var(--surface-2)}
.help-qa > summary{cursor:pointer;padding:14px 18px;font-weight:600;color:var(--navy);list-style:none;
  display:flex;gap:10px;align-items:center;line-height:1.5}
.help-qa > summary::-webkit-details-marker{display:none}
.help-qa > summary::before{content:'+';flex:none;width:26px;height:26px;border-radius:50%;background:var(--gold);
  color:var(--ink);font-weight:700;text-align:center;line-height:26px}
.help-qa[open] > summary::before{content:'\2212'}
.help-qa > div{padding:0 18px 12px 54px}
.help-qa > div p:last-child{margin-bottom:0}

/* The page a consultant can print and hand to the people they invite. */
.help-handout{border:3px solid var(--navy);border-radius:var(--r);padding:8px 26px 14px;margin:18px 0;
  background:#fff}
.help-handout h3{margin-top:18px}

/* Text size buttons. */
.help-size{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 4px}
.help-size > span{font-size:14px;font-weight:600;color:var(--muted)}
.help-size button{cursor:pointer;background:var(--surface);border:2px solid var(--border);border-radius:var(--r-sm);
  color:var(--navy);font:600 15px var(--f-head);padding:6px 14px;min-width:46px}
.help-size button[aria-pressed="true"]{border-color:var(--navy);background:var(--navy);color:#fff}
.help-size button:focus-visible{outline:3px solid var(--gold-600);outline-offset:2px}

.help-end{margin-top:20px;padding:16px 18px;border:1px dashed var(--border);border-radius:var(--r-sm);
  font-size:16px;line-height:1.6;color:var(--muted)}

@media (max-width:900px){
  .help-wrap{grid-template-columns:1fr;gap:18px}
  .help-toc{position:static;max-height:none;overflow:visible}
  .help-toc-h{width:100%;margin-bottom:2px}
  .help-toc a{background:var(--surface)}
  /* Needs to outrank `.help-toc a`, which sets display:block — hence the two
     classes. With the contents list stacked above the text rather than beside
     it, "Back to top" is a link to the line above it. */
  .help-toc a.help-top{display:none}
  .help-sec{padding:20px}
}



/* ---------------------------------------------------------------- products

   Each of the three things sold gets a block: its picture on the left, its
   settings on the right, and its own save button. One page-wide save would
   have to carry every field on the screen to avoid blanking what it did not
   show, and three small edits are easier to be sure about than one big one. */

.prod{margin-bottom:14px}
.prod-b{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.prod-set{flex:1;min-width:320px}
.prod-set h3{font-size:15px;margin:0 0 4px}
.prod-lede{margin:0 0 16px;font-size:12.5px;color:var(--muted);line-height:1.55;max-width:62ch}
.prod-sub{font-size:12px;font-weight:600;color:var(--ink-soft);margin:0 0 8px}

/* The picture, at the shape the shop card crops to — so what is uploaded is
   judged here in the proportions it will actually appear in. */
.prod-img{width:190px;flex:none}
.prod-img img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  border:1px solid var(--border);border-radius:var(--r-sm)}
.prod-img-none{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/10;
  border:1px dashed var(--border);border-radius:var(--r-sm);background:var(--surface-2);
  color:var(--muted);font-size:11.5px}
.prod-img form{margin-top:8px}
.prod-img input[type=file]{width:100%;font-size:11px;margin-bottom:6px}
.prod-img .btn{width:100%;justify-content:center}

.prod-eg{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);max-width:340px}

/* a button that reads as a link: for the quiet undo beside a real action */
.linky{background:none;border:0;padding:0;font:inherit;font-size:12px;color:var(--navy-600);
  cursor:pointer;text-decoration:underline}
.linky:hover{color:var(--navy)}
.linky.danger{color:var(--danger)}
.prod-img .linky{display:block;margin-top:7px;text-align:center;width:100%}
.section-head .linky{margin-left:auto;text-decoration:none}
.section-head .linky:hover{text-decoration:underline}

@media (max-width:760px){
  .prod-img{width:100%}
  .prod-set{min-width:0}
}

/* ------------------------------------------------------------------- print

   There is a proper printable manual behind Help, but somebody will always
   press Ctrl+P on whatever is in front of them. A navy sidebar and a top bar
   are pure ink on paper, and a contents list is no use once the page cannot
   scroll — so a printed console page is just the page. */
@media print{
  .shell{display:block}
  aside,.topbar,.help-toc,.no-print,.help-print{display:none !important}
  .help-wrap{display:block}
  .help-sec{break-inside:avoid;box-shadow:none}
  h2,h3{break-after:avoid}
}

/* page links under a long list — see views/_pager.php */
.pager{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:16px}
.pager-count{margin:0;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.pager-links{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pager-n,.pager-step{display:inline-grid;place-items:center;min-width:32px;height:32px;padding:0 9px;
  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);
  color:var(--ink-soft);font-size:13px;font-weight:600;text-decoration:none;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.pager-n:hover,.pager-step:hover{border-color:var(--navy-600);color:var(--navy-600)}
.pager-n.is-here{background:var(--navy);border-color:var(--navy);color:#fff;cursor:default}
.pager-step.is-off{color:var(--muted);opacity:.45;pointer-events:none}
.pager-gap{padding:0 2px;color:var(--muted);font-size:13px}
@media (max-width:560px){ .pager{justify-content:center} .pager-count{width:100%;text-align:center} }

/* Short rows of fixed-width fields — a discount tier, the agreement upload —
   are laid out in a line that cannot wrap, so on a narrow screen they set a
   floor under the page rather than folding. Each is only a few controls, and
   reads perfectly well over two lines. */
@media (max-width:560px){
  .tier{flex-wrap:wrap}
  .tier span{flex:none}
  .card-b form{flex-wrap:wrap}
}