/* Shared shell: brand tokens and the top bar every module page uses. */
:root{
  --ink:#121711;--paper:#FAF9F5;--surface:#FFFFFF;--soft:#F0EFE8;--line:#E2E1D9;--muted:#5B6055;--lime:#D9F357;
  --red:#A3261B;--red-bg:#FBE9E6;--amber:#7A5600;--amber-bg:#FBF0D3;--green:#1F6B3A;--green-bg:#E3F2E7;
  --radius:16px;--shadow:0 1px 2px rgba(18,23,17,.04),0 8px 24px rgba(18,23,17,.06)
}
.shell{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:18px;padding:12px 28px;background:rgba(250,249,245,.88);
  backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line);font:15px/1.4 Manrope,system-ui,-apple-system,sans-serif;color:var(--ink)}
.shell .brand{font-weight:800;font-size:18px;letter-spacing:-.2px;text-decoration:none;color:var(--ink)}
.shell .org{color:var(--muted);font-size:14px;padding-left:16px;border-left:1px solid var(--line)}
.shell nav{display:flex;gap:4px;margin-left:8px;flex-wrap:wrap}
.shell nav a{text-decoration:none;color:var(--muted);font-weight:700;font-size:14px;padding:7px 12px;border-radius:999px}
.shell nav a:hover{background:var(--soft);color:var(--ink)}
.shell nav a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.shell .spacer{flex:1}
.shell .viewing{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.shell select{font:inherit;border:1px solid var(--line);border-radius:10px;padding:6px 10px;background:var(--surface);color:var(--ink)}
.shell .badge{font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;background:var(--lime);color:var(--ink);padding:4px 10px;border-radius:999px}
/* Clerk's sign-in card, in a cell with sign-in. Its fields take 16-pixel text, so an iPhone doesn't zoom the page in when
   one is tapped, and fields and buttons are 44 pixels tall like every other target here. The first step drops the card's
   own title, because the page heading above it already says it. Later steps keep theirs ("Check your email"). The code
   step needs no size rule: its boxes only show the digits, and the field under them takes the row's height as its text
   size. The rules use the cl- class names Clerk gives each part of the card (shell.js pins its version), and .cl-rootBox
   in front outranks Clerk's own one-class rules. */
.cl-rootBox .cl-formFieldInput{font-size:16px}
.cl-rootBox .cl-formFieldInput,.cl-rootBox .cl-formButtonPrimary{min-height:44px}
.cl-rootBox .cl-signIn-start .cl-header{display:none}
/* Phones: two short rows that scroll away with the page, so the work gets the screen. The brand and the badge share the
   first row. The nav has the second to itself and scrolls sideways instead of wrapping, with 44-pixel tap targets. */
@media (max-width:760px){
  .shell{position:static;flex-wrap:wrap;gap:2px 10px;padding:8px 16px 4px;background:var(--paper);backdrop-filter:none}
  .shell .org,.shell .viewing span{display:none}
  .shell nav{order:9;flex:1 0 calc(100% + 32px);margin:0 -16px;padding:0 4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .shell nav::-webkit-scrollbar{display:none}
  .shell nav a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 12px}
  .shell .badge{font-size:11px;padding:3px 8px}
}