/* Stark Gate: shared styles for the sign-in pages and the dashboard (gate.starktronix.com).
   Look = the ZOE dashboard language, light theme only. Tokens, sizes and type follow
   ~/Developer/decisions/research/2026-10-02-zoe-dashboard-look.md. No build step. */

/* 1. Tokens ------------------------------------------------------------------------------- */
:root{
  --bg:#f8fafd; --surface:#ffffff; --surface-2:#f0f4f9; --card-line:#e3e9f1; --field:#eaf1fb; --hover:#e9eef6;
  --red-soft:#fce8e6; --line:#dde3ea; --border-2:#c4c7c5;
  --ink:#1f1f1f; --dim:#444746; --mute:#5f6368; --navy:#041e49;
  --accent:#0b57d0; --accent-hover:#0a4fbf; --sel:#d3e3fd; --tonal:#c2e7ff;
  --emerald:#1e8e3e; --amber:#f9ab00; --amber-ink:#9a6700; --rose:#d93025; --rose-ink:#b3261e; --rose-line:#fecaca;
  --ok-bg:#ecfdf5; --warn-bg:#fffbeb; --bad-bg:#fff1f2;
  --live-bg:#e8f5ec; --live-fg:#1b6b38; --live-line:#a9d7ba;
  --gold:#c9a35a; --gold-ink:#3a2a08;
  --font:'Google Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --shadow-1:0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --shadow-2:0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --ease:cubic-bezier(.4,0,.2,1);
  color-scheme:light;
}

/* 2. Base --------------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,p,ul,ol,dl,dd,figure,fieldset{margin:0}
ul,ol{padding:0;list-style:none}
fieldset{border:0;padding:0;min-width:0}
legend{padding:0}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:default}
img,svg{display:block}
[hidden]{display:none!important}
:focus{outline:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
::selection{background:var(--sel)}
.mono{font-family:var(--mono)}
.vh{position:absolute!important;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}
.skip{position:fixed;top:8px;left:8px;z-index:200;padding:8px 14px;border-radius:8px;background:var(--ink);color:#fff;font-size:13px;transform:translateY(-200%)}
.skip:focus{transform:none;text-decoration:none}
.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.i.sm{width:18px;height:18px}
.i.xs{width:16px;height:16px}
.i.xxs{width:14px;height:14px}

/* 3. Brand -------------------------------------------------------------------------------- */
.brand{display:inline-flex;align-items:center;gap:10px;color:inherit;min-width:0}
a.brand:hover{text-decoration:none}
.logo{width:26px;height:26px;border-radius:6px;background:var(--gold);color:var(--gold-ink);display:grid;place-items:center;font:700 14px/1 var(--font);flex:0 0 auto;user-select:none}
.word{font-size:20px;font-weight:400;line-height:1;color:var(--mute);white-space:nowrap}
.build{font:700 12px/1 var(--mono);letter-spacing:-.02em;color:var(--dim);white-space:nowrap}

/* 4. Buttons ------------------------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:34px;padding:7px 16px;border:1px solid transparent;border-radius:99px;
  background:transparent;color:var(--ink);font:500 13px/1.25 var(--font);white-space:nowrap;text-decoration:none;transition:background-color .12s,box-shadow .12s,border-color .12s}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-1)}
.btn-primary:hover{background:var(--accent-hover);box-shadow:var(--shadow-2)}
.btn-outline{background:var(--surface);border-color:var(--border-2);color:var(--ink)}
.btn-outline:hover{background:var(--hover)}
.btn-danger{background:var(--rose);color:#fff;box-shadow:var(--shadow-1)}
.btn-danger:hover{background:var(--rose-ink)}
.btn-lg{min-height:40px;padding:9px 24px;font-size:14px}
.btn-block{width:100%}
.btn.wrap{white-space:normal;text-align:center}
.note .btn{margin-top:10px}
.btn:disabled:not([aria-busy="true"]){opacity:.55;box-shadow:none}
.btn[aria-busy="true"]{cursor:progress}
.btn .i{margin-left:-4px}
.link{border:0;background:none;padding:0;color:var(--accent);font:inherit;text-align:left;cursor:pointer}
.link:hover{text-decoration:underline}
.link:disabled{color:var(--mute);text-decoration:none;cursor:default}
.ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:0;background:transparent;color:var(--dim);flex:0 0 auto;position:relative;text-decoration:none;transition:background-color .12s}
.ic:hover{background:var(--hover);text-decoration:none}
.ic.sm{width:32px;height:32px}
.outline{height:34px;padding:0 12px;border-radius:8px;border:1px solid var(--border-2);background:transparent;display:inline-flex;align-items:center;gap:6px;font:500 13px var(--font);color:var(--ink);white-space:nowrap;transition:background-color .12s}
.outline:hover{background:var(--hover)}
.pill{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:99px;background:var(--accent);color:#fff;font:500 13px/1.2 var(--font);box-shadow:var(--shadow-1);white-space:nowrap;text-decoration:none;transition:background-color .12s,box-shadow .12s}
.pill:hover{background:var(--accent-hover);box-shadow:var(--shadow-2);text-decoration:none}
.sp{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;border:1px solid var(--border-2);background:var(--surface);color:var(--ink);font:500 11.5px/1.3 var(--font);white-space:nowrap;text-decoration:none;transition:background-color .12s}
.sp:hover{background:var(--hover);text-decoration:none}
.sp.solid{background:var(--accent);border-color:var(--accent);color:#fff}
.sp.solid:hover{background:var(--accent-hover)}
.sp:disabled:not([aria-busy="true"]){opacity:.55}
.item .sp{font-size:11px;padding:3px 10px}
.ra{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:6px;border:1px solid var(--border-2);background:var(--surface);color:var(--ink);font:500 11px/1.3 var(--font);white-space:nowrap;transition:background-color .12s}
.ra:hover{background:var(--hover)}
.ra.danger{color:var(--rose);border-color:var(--rose-line)}
.ra.danger:hover{background:var(--bad-bg)}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite;flex:0 0 auto}
.sp .spin,.ra .spin{width:11px;height:11px;border-width:1.5px}
@keyframes spin{to{transform:rotate(360deg)}}

/* 5. Forms -------------------------------------------------------------------------------- */
.field{display:grid;gap:5px;margin:0 0 14px;min-width:0}
.label-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.label{font:500 10.5px/1.3 var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.label-row a,.label-row .link{font-size:12px}
.input{width:100%;min-width:0;padding:9px 11px;border:1px solid var(--border-2);border-radius:8px;background:var(--surface);color:var(--ink);font:13px/1.5 var(--font);transition:border-color .12s}
.input::placeholder{color:var(--mute);opacity:1}
.input:hover{border-color:var(--mute)}
.input[readonly]{background:var(--surface-2);border-color:var(--card-line);color:var(--dim)}
.input[aria-invalid="true"]{border-color:var(--rose)}
.input.mono{font-family:var(--mono);font-size:12.5px}
.pw{position:relative}
.pw .input{padding-right:46px}
.pw .ic{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:34px;height:34px}
.hint{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--mute);line-height:1.4}
.hint .i{width:14px;height:14px}
.hint.ok{color:var(--emerald)}
.alert{display:flex;align-items:flex-start;gap:8px;margin:0 0 14px;padding:9px 12px;border-radius:8px;background:var(--red-soft);color:var(--rose-ink);font-size:12.5px;line-height:1.45}
.alert .i{width:16px;height:16px;margin-top:1px}
.alert.ok{background:var(--ok-bg);color:var(--live-fg)}
.note{padding:10px 12px;border-radius:8px;background:var(--surface-2);border:1px solid var(--card-line);color:var(--dim);font-size:12.5px;line-height:1.45}
.note b,.note strong{color:var(--ink);font-weight:500}
.note.warn{background:var(--warn-bg);border-color:#f6e2a8}
.status{display:flex;align-items:center;justify-content:center;gap:8px;min-height:20px;color:var(--dim);font-size:12.5px}
.code-f{margin:0 0 14px}
.code-f .label{display:block;margin-bottom:6px}
.code{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.code .input{height:48px;padding:0;text-align:center;font:500 20px/1 var(--mono);caret-color:var(--accent)}
.form-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* 6. Badges and tags ---------------------------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:6px;background:var(--surface);color:var(--dim);font:500 11px/1.4 var(--mono);white-space:nowrap}
.badge.ok{background:var(--ok-bg);color:var(--emerald)}
.badge.warn{background:var(--warn-bg);color:var(--amber-ink)}
.badge.bad{background:var(--bad-bg);color:var(--rose)}
.badge.sel{background:var(--sel);color:var(--navy)}
.badge.ok::before,.badge.warn::before,.badge.bad::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto}
.badge.warn::before{background:var(--amber)}
.tag{display:inline-block;padding:1px 6px;border-radius:4px;border:1px solid var(--live-line);background:var(--live-bg);color:var(--live-fg);font:500 10px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}

/* 7. Cards, tiles, rows, tables ----------------------------------------------------------- */
.card{background:var(--surface-2);border:1px solid var(--card-line);border-radius:14px;padding:12px 14px;min-width:0}
.card-h{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px;min-width:0}
.card-h .tag{margin-top:1px;flex:0 0 auto}
.card-hm{min-width:0}
.card-t{font-size:13px;font-weight:700;letter-spacing:-.005em;line-height:1.35;color:var(--navy)}
.card-s{margin-top:1px;font-size:11px;line-height:1.4;color:var(--dim)}
.card-a{margin-left:auto;display:flex;align-items:center;gap:6px;flex:0 0 auto}
.card .alert{margin:0 0 10px}
.card .note{margin:0 0 10px}
.tiles{grid-column:1/-1;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:10px}
.card-p{font-size:12.5px;line-height:1.5;color:var(--dim)}
.card-f{margin-top:12px}
.role-line{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--dim)}
.tile .lbl{margin:8px 0;font-size:11.5px;font-weight:400;line-height:1.4;color:var(--mute)}
.tile .row{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;min-height:28px}
.tile .v{font:400 28px/1 var(--font);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.item{padding:9px 11px;border-radius:9px;background:var(--surface)}
.item + .item{margin-top:8px}
.item-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.item-w{font:10.5px var(--mono);color:var(--mute)}
.item-t{font-size:12px;font-weight:500;line-height:1.3}
.item-d{margin-top:2px;font-size:10.5px;line-height:1.4;color:var(--dim)}
.item .acts{display:flex;justify-content:flex-end;gap:6px;margin-top:8px}
.rowi{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;background:var(--surface);min-width:0}
.rowi + .rowi{margin-top:6px}
.sq{width:32px;height:32px;border-radius:7px;background:var(--navy);color:#fff;display:grid;place-items:center;font:500 12px/1 var(--font);flex:0 0 auto}
.sq .i{width:17px;height:17px}
.rowi-main{flex:1 1 auto;min-width:0}
.rowi .nm{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;line-height:1.35}
.rowi .mt{margin-top:1px;font:11px/1.4 var(--mono);color:var(--mute)}
.rowi-acts{display:flex;gap:6px;flex:0 0 auto}
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.app{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--card-line);color:var(--ink);min-width:0;transition:border-color .12s}
.app:hover{border-color:var(--border-2);text-decoration:none}
.app-main{flex:1 1 auto;min-width:0}
.app .nm{display:block;font-size:13px;font-weight:500;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app .mt{display:block;font:10.5px/1.4 var(--mono);color:var(--mute)}
.app .go{color:var(--mute)}
.list > * + *{margin-top:6px}
.tw{overflow-x:auto}
.t{width:100%;border-collapse:collapse;font-size:12px}
.t th{padding:5px 8px;font:500 9.5px/1.4 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);text-align:left;white-space:nowrap}
.t td{padding:7px 8px;border-top:1px solid var(--line);vertical-align:middle}
.t td.m{font-family:var(--mono);white-space:nowrap}
.t td.r,.t th.r{text-align:right}
.t tbody tr{transition:background-color .12s}
.t tbody tr:hover{background:var(--surface)}
.t .cell{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kv{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:13px}
.kv:first-child{border-top:0}
.empty{display:flex;align-items:flex-start;gap:12px;padding:6px 2px;color:var(--dim);font-size:13px;line-height:1.5}
.empty .sq{background:var(--sel);color:var(--navy)}
.empty b{display:block;color:var(--ink);font-weight:500}
.muted{color:var(--mute)}
.loading{display:flex;align-items:center;gap:10px;color:var(--mute);font-size:13px}

/* 8. Toasts, modal, drawer, menus --------------------------------------------------------- */
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:calc(100vw - 32px);pointer-events:none}
.toast{padding:10px 18px;border-radius:999px;background:var(--ink);color:#fff;font:500 12px/1.4 var(--font);box-shadow:var(--shadow-2);text-align:center}
.modal{width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:14px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-2);overflow:auto}
.modal::backdrop{background:rgba(0,0,0,.4)}
.modal-h{padding:20px 24px 6px}
.modal-t{font-size:18px;font-weight:500;line-height:1.35}
.modal-b{padding:6px 24px 0;color:var(--dim);font-size:13.5px;line-height:1.5}
.modal-b p + p{margin-top:8px}
.modal-b .field:last-child{margin-bottom:4px}
.modal-b .alert{margin:12px 0 0}
.modal-f{display:flex;justify-content:flex-end;gap:8px;padding:18px 24px 20px}
/* The drawer is a modal <dialog> (focus stays inside, Escape closes): shown only while [open]. */
.drawer{position:fixed;inset:0 0 0 auto;z-index:250;width:min(480px,100vw);max-width:100vw;height:100%;max-height:none;margin:0;padding:0;border:0;flex-direction:column;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-2);transform:translateX(100%);transition:transform .24s var(--ease)}
.drawer[open]{display:flex}
.drawer.open{transform:none}
.drawer::backdrop{background:rgba(0,0,0,.4)}
.scrim{position:fixed;inset:0;z-index:249;background:rgba(0,0,0,.4)}
.menu{position:absolute;top:calc(100% + 6px);right:0;z-index:120;min-width:240px;max-width:320px;padding:6px 0;border-radius:12px;background:var(--surface);box-shadow:var(--shadow-2)}
.menu-h{padding:8px 16px 10px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.menu-h b{display:block;font-size:14px;font-weight:500}
.menu-h span{display:block;font:12px var(--mono);color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-i{display:flex;align-items:center;gap:12px;width:100%;padding:9px 16px;border:0;background:transparent;color:var(--ink);font:13.5px/1.35 var(--font);text-align:left;text-decoration:none}
.menu-i:hover,.menu-i:focus-visible{background:var(--hover);text-decoration:none}
.menu-i:focus-visible{outline-offset:-2px}
.menu-i .i{color:var(--dim)}
.menu-i small{display:block;margin-top:1px;font-size:11.5px;color:var(--mute)}
.menu-e{padding:8px 16px 10px;color:var(--mute);font-size:13px}

/* 9. Sign-in pages ------------------------------------------------------------------------ */
body.auth{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:clamp(20px,7vh,72px) 16px 28px}
.auth-card{width:100%;max-width:420px;padding:28px 32px 26px;border:1px solid var(--card-line);border-radius:16px;background:var(--surface)}
.auth-card h1{margin:24px 0 6px;font-size:24px;font-weight:400;line-height:1.3;letter-spacing:-.005em}
.auth-card h1:focus{outline:none}
.lede{margin:0 0 20px;color:var(--dim);font-size:14px;line-height:1.5}
.lede b{color:var(--ink);font-weight:500}
.lede .mono{font-size:13px;font-weight:500}
.or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--mute);font-size:12px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.alt{display:grid;gap:10px}
.alt .alert{margin:0}
.gsi{display:flex;justify-content:center;min-height:40px}
.gsi > div{display:flex;justify-content:center;width:100%}
.fine{margin-top:16px;color:var(--mute);font-size:12px;line-height:1.5}
.auth-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;margin-top:20px;font-size:13px;color:var(--dim)}
.auth-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-top:18px;font-size:12px;color:var(--mute)}
.auth-foot a{color:var(--mute)}
.invite{margin:0 0 20px;padding:4px 14px;border:1px solid var(--card-line);border-radius:14px;background:var(--surface-2)}
.invite .kv{font-size:13px}
.invite .kv > span:first-child{padding-top:2px}
.invite .kv > :last-child{text-align:right;min-width:0;overflow-wrap:anywhere}
.shared li + li{margin-top:3px}
.shared .k{color:var(--mute);font:11px var(--mono)}
.inapp{margin:0 0 16px}
.inapp p + p,.inapp .copy{margin-top:8px}
.copy{display:flex;gap:8px}
.copy .input{flex:1}
.offer{text-align:left}
.offer .sq{width:44px;height:44px;border-radius:12px;margin-top:22px;background:var(--sel);color:var(--navy)}
.offer .sq .i{width:22px;height:22px}
.offer h1{margin-top:14px}
.offer .note{margin:0 0 16px}
.offer .actions{display:grid;gap:10px}
.timer{font-family:var(--mono);font-size:12px}

/* 10. Dashboard shell --------------------------------------------------------------------- */
body.dash{height:100vh;height:100dvh;overflow:hidden}
.boot{position:fixed;inset:0;display:grid;place-items:center;align-content:center;gap:14px;color:var(--mute);font-size:13px}
.boot .logo{width:32px;height:32px;border-radius:8px;font-size:17px}
.is-loading .shell{visibility:hidden}
body:not(.is-loading) .boot{display:none}
.shell{position:fixed;inset:0;display:grid;grid-template-columns:70px auto minmax(0,1fr);grid-template-rows:52px minmax(0,1fr)}
.top{grid-column:1/-1;grid-row:1;display:flex;align-items:center;gap:8px;min-width:0;padding:0 12px 0 16px}
.top-l{display:flex;align-items:center;gap:8px;width:290px;flex:0 0 auto;min-width:0}
.search{flex:0 1 470px;min-width:0;display:flex;align-items:center;gap:10px;height:36px;padding:0 12px;border-radius:8px;background:var(--field);color:var(--mute)}
.search:focus-within{outline:2px solid var(--ink);outline-offset:1px}
.search input{flex:1;min-width:0;padding:7px 0;border:0;background:transparent;color:var(--ink);font:14px var(--font)}
.search input::placeholder{color:var(--mute);opacity:1}
.search input:focus-visible{outline:none}
.tools{margin-left:auto;display:flex;align-items:center;gap:6px;flex:0 0 auto}
.tools .menu-wrap{position:relative}
.bell .dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--rose);box-shadow:0 0 0 2px var(--bg)}
.ava{width:32px;height:32px;margin:0 2px 0 4px;border:0;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font:500 13px/1 var(--font);flex:0 0 auto}
.rail{grid-column:1;grid-row:2;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0 14px;min-height:0;overflow-y:auto;scrollbar-width:none}
.ri{width:64px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 0 6px;border-radius:12px;color:var(--dim);text-decoration:none;transition:background-color .12s}
.ri:hover{background:var(--hover);text-decoration:none}
.ri .box{width:52px;height:30px;border-radius:99px;display:grid;place-items:center;transition:background-color .12s}
.ri .lbl{font-size:11px;line-height:1.2;color:var(--ink);white-space:nowrap}
.ri[aria-current="page"] .box{background:var(--sel);color:var(--navy)}
.ri[aria-current="page"] .lbl{font-weight:500}
.ri.bottom{margin-top:auto}
.rail .rule{flex:0 0 auto;width:32px;height:1px;margin:6px 0;background:var(--line)}
.panel{grid-column:2;grid-row:2;width:236px;display:flex;flex-direction:column;gap:1px;padding:0 8px 14px 0;min-height:0;overflow-y:auto;scrollbar-width:none}
.shell.panel-off .panel{display:none}
.grp{padding:13px 12px 5px;font-size:12px;color:var(--mute)}
.nav{display:flex;align-items:center;gap:10px;height:32px;padding:0 12px;border-radius:0 99px 99px 0;color:var(--dim);font-size:13.5px;text-decoration:none;white-space:nowrap;transition:background-color .12s}
.nav:hover{background:var(--hover);text-decoration:none}
.nav[aria-current="page"]{background:var(--sel);color:var(--navy);font-weight:500}
.nav .n{margin-left:auto;font:500 11px var(--mono)}
.sheet{grid-column:3;grid-row:2;display:flex;flex-direction:column;min-width:0;min-height:0;border-radius:16px 0 0 0;background:var(--surface);overflow:hidden}
.sheet:focus{outline:none}
.tb{display:flex;align-items:center;gap:6px;height:40px;flex:0 0 auto;min-width:0;padding:4px 14px 0 8px;font-size:12.5px;color:var(--dim)}
.tb .ic{width:32px;height:32px}
.tb .ic[aria-busy="true"] .i{animation:spin .8s linear infinite}
.crumb{min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;font-weight:400;line-height:1.3;color:var(--dim)}
.crumb b{font-weight:500;color:var(--ink)}
.crumb .sep{margin:0 4px;color:var(--mute)}
.sum{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:12px var(--mono);color:var(--mute)}
.chips{display:flex;align-items:center;gap:7px;height:42px;flex:0 0 auto;padding:0 14px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar,.rail::-webkit-scrollbar,.panel::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;height:29px;flex:0 0 auto;padding:0 12px;border:1px solid var(--border-2);border-radius:8px;background:transparent;color:var(--ink);font:12.5px var(--font);white-space:nowrap;transition:background-color .12s}
.chip:hover{background:var(--surface-2)}
.chip.warn{border-color:transparent;background:var(--red-soft);color:var(--rose);font-weight:500}
.chip[aria-pressed="true"]{border-color:transparent;background:var(--sel);color:var(--navy);font-weight:500}
.chip .n{font:500 10px var(--mono)}
.scroll{flex:1 1 auto;min-height:0;overflow:auto;container-type:inline-size}
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:start;padding:4px 14px 14px}
.span1{grid-column:span 1}.span2{grid-column:span 2}.span3{grid-column:span 3}.span4{grid-column:1/-1}
.foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto;min-height:34px;padding:6px 16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--mute)}
.foot .mono{font-size:11px;white-space:nowrap}
.sm-meta{display:none}
.nw{white-space:nowrap}
@container (max-width:880px){
  .board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .span3,.span4,.side{grid-column:1/-1}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles > :last-child:nth-child(odd){grid-column:1/-1}
}
@container (max-width:520px){
  .board{grid-template-columns:minmax(0,1fr)}
  .span1,.span2,.span3,.span4{grid-column:1/-1}
  .tiles{grid-template-columns:minmax(0,1fr)}
}

/* 11. Responsive -------------------------------------------------------------------------- */
@media (max-width:1100px){
  .top-l{width:auto}
  .build{display:none}
  .search{margin-left:12px}
}
@media (max-width:760px){
  .tools .x{display:none}
  .outline{padding:0 10px}
  .pill{padding:8px 12px}
}
/* Phones: the rail becomes a bottom icon bar, the view list a row of pills, cards stack. */
@media (max-width:600px){
  body.dash{height:auto;overflow:visible}
  .shell{position:static;display:block;min-height:100vh;min-height:100dvh;padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .top{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand tools" "search search";gap:8px 8px;padding:8px 16px 10px}
  .top-l{grid-area:brand;width:auto}
  .top .burger{display:none}
  .word{font-size:18px}
  .tools{grid-area:tools;gap:4px}
  .search{grid-area:search;flex:none;margin:0;height:40px}
  .search input{font-size:16px}
  .outline{width:34px;padding:0;justify-content:center}
  .pill{width:34px;height:34px;padding:0;justify-content:center}
  .ic{width:36px;height:36px}
  .ava{margin:0 0 0 2px}
  .rail{position:fixed;left:0;right:0;bottom:0;z-index:40;flex-direction:row;justify-content:space-around;align-items:center;gap:0;padding:6px 8px calc(6px + env(safe-area-inset-bottom));overflow:visible;background:var(--bg);border-top:1px solid var(--line)}
  .ri.bottom{margin-top:0}
  .rail .rule{display:none}
  .panel,.shell.panel-off .panel{display:flex;flex-direction:row;gap:6px;width:auto;padding:0 16px 10px;overflow-x:auto}
  .panel .grp{display:none}
  .nav{flex:0 0 auto;height:32px;padding:0 14px;border:1px solid var(--border-2);border-radius:99px;font-size:13px}
  .nav[aria-current="page"]{border-color:transparent}
  .sheet{border-radius:16px 16px 0 0;overflow:visible;min-height:calc(100dvh - 200px)}
  .tb{flex-wrap:wrap;height:auto;row-gap:0;padding:6px 16px 4px 8px}
  .crumb{flex:1 1 auto}
  .sum{order:3;flex:1 0 100%;margin:0;padding-left:38px;white-space:normal}
  .chips{padding:0 16px}
  .scroll{overflow:visible}
  .board{grid-template-columns:minmax(0,1fr);padding:4px 16px 16px}
  .span1,.span2,.span3,.span4{grid-column:1/-1}
  .tiles{grid-template-columns:minmax(0,1fr)}
  .card-h{flex-wrap:wrap}
  .card-hm{flex:1 1 160px}
  .card-a{margin-left:auto}
  .foot{flex-direction:column;align-items:flex-start;gap:2px;padding:10px 16px}
  .toasts{bottom:calc(80px + env(safe-area-inset-bottom))}
  .menu{position:fixed;top:56px;left:16px;right:16px;max-width:none;min-width:0}
  .t .hide-sm{display:none}
  .sm-meta{display:block;margin-top:2px;font:11px/1.45 var(--mono);color:var(--mute)}
  .rowi{flex-wrap:wrap}
  .rowi-acts{width:100%;justify-content:flex-end}
  .input{font-size:16px}
  .input.mono{font-size:15px}
  .code .input{font-size:20px}
  .auth-card{padding:24px 20px 22px}
  .modal-h{padding:18px 20px 6px}
  .modal-b{padding:6px 20px 0}
  .modal-f{padding:16px 20px 18px}
}
@media (max-width:360px){
  .word{display:none}
}

/* 12. Round 2: admin modules, Apps, Preview as ---------------------------------------------- */
.why{display:flex;align-items:flex-start;gap:6px;margin:6px 0 0;font-size:11.5px;line-height:1.4;color:var(--mute)}
.why .i{margin-top:1px}
.admin-chip{flex:0 0 auto;margin-left:4px}
.admin-chip .i{width:12px;height:12px}
.preview-bar{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin:8px 14px 0;padding:7px 8px 7px 14px;border-radius:12px;background:var(--warn-bg);border:1px solid #f6e2a8;color:var(--amber-ink);font-size:12.5px;line-height:1.4}
.preview-bar .pv-t{flex:1 1 auto;min-width:0}
.preview-bar b{color:var(--ink);font-weight:500}
.preview-bar .mono{font-size:11.5px}
.preview-bar .sp{flex:0 0 auto;font-size:12px;padding:5px 14px}
.tile{position:relative}
.tile-go{position:absolute;inset:0;border-radius:14px}
.tile-go:focus-visible{outline-offset:-2px}
.tile:has(.tile-go):hover{border-color:var(--border-2)}
.card.slim{padding:10px 14px}
.card.slim .why,.card.slim .card-p{margin:0}
.lockcard{display:grid;gap:8px;justify-items:start;padding:4px 2px}
.lockcard .card-t{font-size:15px;margin-top:4px}
.status-line{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:12px;color:var(--dim)}
.status-line .spin{width:12px;height:12px}
.more{display:flex;justify-content:center;margin-top:12px}
.show-sm{display:none}
.btn.danger{color:var(--rose-ink);border-color:var(--rose-line)}
.btn.danger:hover{background:var(--bad-bg)}
.ra.hot{border-color:var(--accent);color:var(--accent)}
.ra:disabled,.btn:disabled{cursor:not-allowed}
.ra:disabled{opacity:.5}
select.input{padding-right:8px}
b.in{font-weight:500;color:var(--ink)}
.sq.big{width:44px;height:44px;border-radius:12px;background:var(--sel);color:var(--navy)}
.sq.big .i{width:22px;height:22px}
.sq.img{background:var(--sel);overflow:hidden}
.sq.img img{width:100%;height:100%;object-fit:cover}

/* the step-up sheet and the confirm prompt (a bottom sheet on phones) */
.sheet-d{width:min(420px,calc(100vw - 32px))}
.sheet-b{padding:22px 24px 2px;color:var(--dim);font-size:13.5px;line-height:1.5}
.sheet-b .modal-t{margin:12px 0 6px;color:var(--ink)}
.sheet-p{margin:0 0 10px}
.sheet-what{margin:0 0 10px;padding:10px 12px;border-radius:10px;background:var(--surface-2);border:1px solid var(--card-line);color:var(--ink);font-weight:500;overflow-wrap:anywhere}
.sheet-b .status{justify-content:flex-start;margin:2px 0 10px;text-align:left}
.sheet-b .alert{margin:2px 0 10px}
.sheet-fine{margin:-6px 24px 18px;font-size:12px;line-height:1.45;color:var(--mute)}

/* tables: people, invitations, requests, sessions, logs */
.t .who,.rowi .who{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.sq.av{width:28px;height:28px;border-radius:7px;font-size:11px;letter-spacing:.02em}
.sq.av.big{width:44px;height:44px;border-radius:12px;font-size:15px}
.who-m{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.who-m .nm{font-size:12.5px;font-weight:500;line-height:1.35}
.who-m .mt{font:10.5px/1.4 var(--mono);color:var(--mute);overflow-wrap:anywhere}
.t tr.click{cursor:pointer}
.t .sub{display:block;margin-top:1px;font-size:10.5px;line-height:1.4;color:var(--mute)}
.t .sub.mono{font-family:var(--mono)}
.t .muted{color:var(--mute)}
.acts-r{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.shares{display:inline-block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.badge.role-owner,.badge.role-admin{background:var(--sel);color:var(--navy)}
.badge.role-member{background:var(--tonal);color:var(--navy)}
.t.logs td{vertical-align:top}
.t.logs td .badge{margin-top:1px}
.t .show-sm{display:none}

/* the person drawer */
.drawer-h{display:flex;align-items:flex-start;gap:12px;flex:0 0 auto;padding:16px 10px 14px 20px;border-bottom:1px solid var(--line)}
.drawer-hm{flex:1 1 auto;min-width:0}
.drawer-t{font-size:18px;font-weight:500;line-height:1.3;overflow-wrap:anywhere}
.drawer-s{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:5px;font-size:12px;color:var(--dim)}
.drawer-s .mono{font-size:12px;overflow-wrap:anywhere}
.drawer-s .badge.role-client{background:var(--surface-2)}
.drawer-x{margin-top:-4px}
.drawer-b{flex:1 1 auto;min-height:0;overflow:auto;padding:16px 20px 28px;overscroll-behavior:contain}
.drawer-b > .note{margin:12px 0 0}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
.facts dt{font:500 10.5px/1.3 var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.facts dd{margin:2px 0 0;font-size:12.5px;color:var(--ink);overflow-wrap:anywhere}
.facts dd.mono{font-size:12px}
.dsec{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--card-line)}
.dsec-t{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--navy)}
.inline{display:flex;gap:8px;align-items:center}
.inline .input{flex:1 1 auto;min-width:0}
.inline .btn{flex:0 0 auto}
.act-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.act-row:first-child{border-top:0;padding-top:0}
.act-row:last-child{padding-bottom:0}
.act-row b{font-size:13px;font-weight:500;color:var(--ink)}
.act-row .card-p{margin-top:1px;font-size:12px}
.act-row .btn{flex:0 0 auto}
.togs{display:grid;gap:6px}
.tog{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;background:var(--surface);border:1px solid transparent;cursor:pointer}
.tog input,.pick-i input,.check input{width:16px;height:16px;flex:0 0 auto;margin:0;accent-color:var(--accent);cursor:pointer}
.tog .sq,.pick-i .sq{width:28px;height:28px;border-radius:7px}
.tog-m{flex:1 1 auto;min-width:0}
.tog .nm,.pick-i .nm{display:block;font-size:12.5px;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.tog .mt,.pick-i .mt{display:block;font:10.5px/1.4 var(--mono);color:var(--mute)}
.tog.pend{background:var(--warn-bg);border-color:#f6e2a8}
.savebar{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:12px}
.savebar .mono{margin-right:auto;font-size:11.5px;color:var(--mute)}
.savebar.sticky{position:sticky;bottom:0;z-index:2;margin:0 -14px -12px;padding:10px 14px 12px;border-top:1px solid var(--line);border-radius:0 0 14px 14px;background:var(--surface-2)}
.card.slim .savebar{margin-top:0}

/* policy, recovery codes */
.modal-b p + .field,.modal-b .note + .field{margin-top:12px}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.pnum{margin-bottom:10px}
.unit{display:flex;align-items:center;gap:8px}
.unit .input{width:96px;flex:0 0 auto}
.unit .u{font-size:12.5px;color:var(--dim)}
.check{display:flex;align-items:flex-start;gap:10px;padding:5px 0;font-size:13px;line-height:1.4;color:var(--ink);cursor:pointer}
.check input{margin-top:2px}
.check input:disabled,.check input:disabled + span{cursor:not-allowed}
.check input:disabled + span{color:var(--dim)}
.seg{margin:0 0 4px}
.seg legend{margin-bottom:2px}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;margin:12px 0;padding:14px 16px;border-radius:10px;background:var(--surface-2);border:1px solid var(--card-line)}
.codes li{font-size:15px;letter-spacing:.06em;color:var(--ink);user-select:all}
#rc-msg{margin-left:4px}

/* Apps: thumbnail cards and the prototype list */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.tcard{display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:12px;background:var(--surface);border:1px solid var(--card-line);color:var(--ink);transition:border-color .12s}
a.tcard:hover{border-color:var(--border-2);text-decoration:none}
.tthumb{display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden;background:var(--sel);color:var(--navy)}
.tthumb img{display:block;width:100%;height:100%;object-fit:cover}
.tthumb.none .i{width:26px;height:26px}
.tc-b{display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px 12px 12px}
.tcard .nm{overflow:hidden;font-size:13px;font-weight:500;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.tcard .mt{font:10.5px/1.45 var(--mono);color:var(--mute)}
.plist > * + *{margin-top:8px}
.prow{display:flex;align-items:flex-start;gap:14px;min-width:0;padding:10px;border-radius:12px;background:var(--surface)}
.tthumb.sm{width:128px;flex:0 0 auto;border-radius:8px}
.prow-m{flex:1 1 auto;min-width:0}
.prow .nm{font-size:13.5px;font-weight:500;line-height:1.35}
.prow-s{margin:2px 0 4px;font-size:12.5px;line-height:1.45;color:var(--dim)}
.prow .mt{font:10.5px/1.45 var(--mono);color:var(--mute)}
.tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.tags .badge{background:var(--surface-2)}
.prow-a{flex:0 0 auto;align-self:center}

/* the Invite dialog */
.modal.wide{width:min(640px,calc(100vw - 32px))}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;align-items:start}
.pick{margin:2px 0 4px}
.pick legend{margin-bottom:6px}
.pick-tools{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.pick-tools .input{flex:1 1 auto;padding:7px 10px}
.pick-n{flex:0 0 auto;font-size:11.5px;color:var(--mute)}
.pick-list{max-height:260px;overflow:auto;padding:4px;border:1px solid var(--card-line);border-radius:10px;background:var(--surface-2);overscroll-behavior:contain}
.pick-g + .pick-g{margin-top:6px}
.pick-h{margin:4px 6px;font:500 10.5px/1.3 var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.pick-h .mono{letter-spacing:0}
.pick-i{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;cursor:pointer}
.pick-i:hover{background:var(--surface)}

@media (max-width:600px){
  .rail .ri{flex:1 1 0;width:auto;min-width:0;padding:4px 0 6px}
  .rail .ri .box{width:min(44px,100%)}
  .rail .ri .lbl{max-width:100%;overflow:hidden;font-size:10.5px;text-overflow:ellipsis}
  .preview-bar{margin:8px 16px 0}
  .show-sm,.t .show-sm{display:block}
  /* the crumb keeps the first line; the admin chip opens the summary line under it */
  .crumb{flex:1 1 calc(100% - 40px)}
  .admin-chip{order:3;margin:3px 8px 0 38px}
  .admin-chip:not([hidden]) + .sum{flex:1 1 0;padding-left:0}
  .sheet-d{width:100%;max-width:100%;margin:auto 0 0;border-radius:16px 16px 0 0;max-height:88dvh}
  .sheet-d .modal-f{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .sheet-b{padding:20px 20px 2px}
  .sheet-fine{margin:-6px 20px calc(16px + env(safe-area-inset-bottom))}
  .sheet-d .modal-f .btn{flex:1 1 0}
  .drawer-h{padding:14px 8px 12px 16px}
  .drawer-b{padding:14px 16px 28px}
  .act-row{flex-wrap:wrap}
  .act-row .btn{margin-left:auto}
  .row2,.pgrid{grid-template-columns:minmax(0,1fr)}
  .pick-list{max-height:none}
  .codes{grid-template-columns:minmax(0,1fr)}
  .tgrid{grid-template-columns:minmax(0,1fr);gap:8px}
  .tcard{flex-direction:row;align-items:center}
  .tcard .tthumb{width:104px;flex:0 0 auto;margin:8px 0 8px 8px;border-radius:8px}
  .tc-b{padding:8px 12px}
  .tthumb.sm{width:96px}
  .prow{flex-wrap:wrap;gap:12px}
  .prow-a{width:100%;display:flex;justify-content:flex-end}
  .savebar .mono{flex:1 0 100%}
  /* tables with row actions become one block per row, the actions on their own line */
  .t.stack thead{display:none}
  .t.stack,.t.stack tbody,.t.stack tr,.t.stack td{display:block;width:100%}
  .t.stack tr{padding:9px 0;border-top:1px solid var(--line)}
  .t.stack tbody tr:first-child{padding-top:2px;border-top:0}
  .t.stack td{padding:2px 8px;border-top:0}
  .t.stack td.hide-sm{display:none}
  .t.stack td.r{text-align:left}
  .t.stack td:empty{display:none}
  .t.stack .acts-r{justify-content:flex-start;margin-top:6px}
}

/* 13. Motion ------------------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .spin{border-right-color:currentColor;opacity:.45}
}