/* ============================================================================ Claw Apps — the platform design system. One ground, one geometry, one set of components for every app on the platform (Hub, NutriLog, Chronos, ChoreBoard, Chat). An app declares its personality with two lines on : data-app="nutrilog" and nothing else — the accent ramp below does the rest. Dark is the platform's default. Light is a supported inversion: every color is a token defined on :root, redefined under [data-theme="light"] and under (prefers-color-scheme: light) unless the user pinned dark. ========================================================================= */ /* ---------------------------------------------------------------- tokens -- */ :root{ /* ground + surfaces (light is the default; dark is the opt-in inversion) */ --bg:#f5f7fb; --bg-glow:#e5ecfa; --surface:#ffffff; --surface-2:#f7f9fd; --surface-3:#eef2f9; --sunken:#eef2f8; --line:#dfe5f0; --line-2:#cdd6e6; --ink:#0d1526; --ink-2:#26324b; --muted:#5d6a85; --faint:#8b96ad; /* platform accent — overridden per app below */ --accent:#f97316; --accent-2:#fb923c; --accent-ink:#0b0d14; /* text that sits ON the accent */ --accent-soft:rgba(249,115,22,.14); --accent-line:rgba(249,115,22,.34); /* the Claw mark itself never changes hue, whatever app you are in */ --claw:#c85507; --claw-2:#e2620a; /* categorical chart series (see the dataviz palette) */ --chart-1:#2775d9; --chart-2:#d2650f; --chart-3:#0f9d6b; --chart-4:#7c52f0; --chart-5:#b07d05; /* semantic */ --ok:#0f9d6b; --ok-soft:rgba(15,157,107,.12); --warn:#b07d05; --warn-soft:rgba(176,125,5,.12); --bad:#d24545; --bad-soft:rgba(210,69,69,.12); --info:#2775d9; --info-soft:rgba(39,117,217,.12); /* type */ --font:"Inter",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,sans-serif; --display:"Space Grotesk","Inter",-apple-system,system-ui,sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; /* geometry — shared by web and mobile */ --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:32px; --bar-h:58px; --page:1140px; /* elevation + motion */ --sh-1:0 1px 2px rgba(13,21,38,.06); --sh-2:0 6px 18px rgba(13,21,38,.09); --sh-3:0 24px 60px rgba(13,21,38,.16); --ring:0 0 0 3px var(--accent-soft); --t:.16s cubic-bezier(.32,.72,0,1); color-scheme:light; } /* Per-app personality: only the accent ramp moves. `--accent` is the fill, `--accent-2` the text/hover tone, `--accent-ink` what sits on top of the fill. Light values here; the dark block below re-tunes them. */ [data-app="hub"] {--accent:#c85507;--accent-2:#a8460a;--accent-ink:#fff;--accent-soft:rgba(200,85,7,.10);--accent-line:rgba(200,85,7,.28)} [data-app="nutrilog"]{--accent:#4d7c0f;--accent-2:#3f680c;--accent-ink:#fff;--accent-soft:rgba(77,124,15,.10);--accent-line:rgba(77,124,15,.28)} [data-app="chronos"] {--accent:#0369a1;--accent-2:#075985;--accent-ink:#fff;--accent-soft:rgba(3,105,161,.10);--accent-line:rgba(3,105,161,.28)} [data-app="chores"] {--accent:#92620a;--accent-2:#7a5108;--accent-ink:#fff;--accent-soft:rgba(146,98,10,.10);--accent-line:rgba(146,98,10,.28)} [data-app="chat"] {--accent:#6d28d9;--accent-2:#5b21b6;--accent-ink:#fff;--accent-soft:rgba(109,40,217,.10);--accent-line:rgba(109,40,217,.28)} /* My Claw (the owner's own agent) shares Chat's violet: it is a conversation, the app is the person you talk to */ [data-app="claw"] {--accent:#6d28d9;--accent-2:#5b21b6;--accent-ink:#fff;--accent-soft:rgba(109,40,217,.10);--accent-line:rgba(109,40,217,.28)} /* Claw Developers: teal, so the portal reads as tooling rather than as one of the apps */ [data-app="dev"] {--accent:#0f766e;--accent-2:#115e59;--accent-ink:#fff;--accent-soft:rgba(15,118,110,.10);--accent-line:rgba(15,118,110,.28)} /* ------------------------------------------------------------- dark mode -- */ :root[data-theme="dark"]{ --bg:#080b14; --bg-glow:#141d3d; --surface:#111726; --surface-2:#161d30; --surface-3:#1c2438; --sunken:#0a0e1a; --line:#232c44; --line-2:#2e3852; --ink:#e8ebf4; --ink-2:#c2c9db; --muted:#8e98b2; --faint:#5d6782; --ok:#34d399; --ok-soft:rgba(52,211,153,.14); --warn:#fbbf24; --warn-soft:rgba(251,191,36,.14); --bad:#f87171; --bad-soft:rgba(248,113,113,.14); --info:#60a5fa; --info-soft:rgba(96,165,250,.14); --chart-1:#60a5fa; --chart-2:#fb923c; --chart-3:#34d399; --chart-4:#a78bfa; --chart-5:#fbbf24; --claw:#f97316; --claw-2:#fb923c; --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 6px 20px rgba(0,0,0,.36); --sh-3:0 24px 60px rgba(0,0,0,.5); color-scheme:dark; } :root[data-theme="dark"] [data-app="hub"] {--accent:#f97316;--accent-2:#fb923c;--accent-ink:#150802;--accent-soft:rgba(249,115,22,.15);--accent-line:rgba(249,115,22,.36)} :root[data-theme="dark"] [data-app="nutrilog"]{--accent:#84cc16;--accent-2:#a3e635;--accent-ink:#0d1402;--accent-soft:rgba(132,204,22,.15);--accent-line:rgba(132,204,22,.36)} :root[data-theme="dark"] [data-app="chronos"] {--accent:#38bdf8;--accent-2:#7dd3fc;--accent-ink:#021018;--accent-soft:rgba(56,189,248,.15);--accent-line:rgba(56,189,248,.36)} :root[data-theme="dark"] [data-app="chores"] {--accent:#fbbf24;--accent-2:#fcd34d;--accent-ink:#170f00;--accent-soft:rgba(251,191,36,.15);--accent-line:rgba(251,191,36,.36)} :root[data-theme="dark"] [data-app="chat"] {--accent:#a78bfa;--accent-2:#c4b5fd;--accent-ink:#0f0a1c;--accent-soft:rgba(167,139,250,.15);--accent-line:rgba(167,139,250,.36)} :root[data-theme="dark"] [data-app="claw"] {--accent:#a78bfa;--accent-2:#c4b5fd;--accent-ink:#0f0a1c;--accent-soft:rgba(167,139,250,.15);--accent-line:rgba(167,139,250,.36)} :root[data-theme="dark"] [data-app="dev"] {--accent:#2dd4bf;--accent-2:#5eead4;--accent-ink:#042f2e;--accent-soft:rgba(45,212,191,.15);--accent-line:rgba(45,212,191,.36)} /* ------------------------------------------------------------------ base -- */ *{box-sizing:border-box} [hidden]{display:none!important} html,body{min-height:100%} body{ margin:0;background:var(--bg);color:var(--ink); font:15px/1.55 var(--font); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; background-image:radial-gradient(1100px 560px at 12% -12%,var(--bg-glow) 0,transparent 62%); background-attachment:fixed; } a{color:var(--accent-2);text-decoration:none} a:hover{text-decoration:underline} button,input,select,textarea{font:inherit;color:inherit} h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.2} h1{font-size:28px}h2{font-size:19px}h3{font-size:16px}h4{font-size:14px} p{margin:0 0 10px} hr{border:0;border-top:1px solid var(--line);margin:var(--sp-5) 0} ::selection{background:var(--accent);color:var(--accent-ink)} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:3px solid transparent;background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:content-box} ::-webkit-scrollbar-track{background:transparent} /* ------------------------------------------------------- platform top bar -- */ /* Identical geometry in every app: launcher + wordmark | app nav | account. */ .top{ position:sticky;top:0;z-index:40;height:var(--bar-h); display:flex;align-items:center;gap:var(--sp-4);padding:0 var(--sp-4); background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid var(--line); } .top::after{ /* the app's accent, as a hairline signature under the bar */ content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:linear-gradient(90deg,var(--accent) 0,transparent 44%); opacity:.8;pointer-events:none; } .brand{ display:flex;align-items:center;gap:9px;flex:none; font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.02em; color:var(--ink);white-space:nowrap; } .brand:hover{text-decoration:none} .brand small{ font-family:var(--font);font-weight:600;font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:var(--accent-2); border:1px solid var(--accent-line);border-radius:var(--r-pill);padding:2px 7px; } /* the launcher button carries the Claw mark and opens the app grid */ .launcher{ width:34px;height:34px;flex:none;display:grid;place-items:center;cursor:pointer; border-radius:10px;border:1px solid var(--line-2);background:var(--surface-2); transition:border-color var(--t),background var(--t),transform var(--t); } .launcher:hover{border-color:var(--claw);background:var(--surface-3)} .launcher:active{transform:scale(.94)} .launcher svg{display:block} .launcher .c{fill:var(--muted);transition:fill var(--t)} .launcher:hover .c,.launcher[aria-expanded="true"] .c{fill:var(--claw)} .launcher[aria-expanded="true"]{border-color:var(--claw);background:var(--accent-soft)} /* app nav inside the bar */ .top nav{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none} .top nav::-webkit-scrollbar{display:none} .top nav a,.top nav button,.navlink{ display:inline-flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer; padding:7px 12px;border-radius:var(--r-sm);border:1px solid transparent;background:none; color:var(--muted);font-weight:600;font-size:14px;text-decoration:none; transition:color var(--t),background var(--t); } .top nav a:hover,.top nav button:hover,.navlink:hover{color:var(--ink);background:var(--surface-2);text-decoration:none} .top nav a.active,.top nav button.active,.navlink.active{color:var(--ink);background:var(--accent-soft);border-color:var(--accent-line)} .top .spacer{flex:1} /* account chip on the right */ .account{display:flex;align-items:center;gap:var(--sp-2);flex:none;position:relative} .who,.user{ display:flex;align-items:center;gap:8px;cursor:pointer; border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink-2); border-radius:var(--r-pill);padding:5px 12px 5px 5px;font-size:13px;font-weight:600; max-width:220px;transition:border-color var(--t),background var(--t); } .who:hover,.user:hover{border-color:var(--accent-line);background:var(--surface-3)} .who span,.user span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .account .avatar,.who .avatar,.user .avatar{ width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center; background:linear-gradient(150deg,var(--accent),var(--accent-2));color:var(--accent-ink); font-weight:800;font-size:11px;line-height:1;letter-spacing:.02em;text-transform:uppercase; object-fit:cover;background-position:center;overflow:hidden; } /* ------------------------------------------------------------- launcher -- */ .launch-sheet{ position:fixed;inset:0;z-index:60;display:none; background:color-mix(in srgb,var(--ink) 46%,transparent);backdrop-filter:blur(4px); padding:calc(var(--bar-h) + 10px) var(--sp-4) var(--sp-4); animation:fade .16s ease both; } .launch-sheet[data-open]{display:block} .launch-panel{ width:min(720px,100%);margin:0 auto;background:var(--surface);border:1px solid var(--line-2); border-radius:var(--r-xl);box-shadow:var(--sh-3);padding:var(--sp-5); animation:rise .22s cubic-bezier(.22,1,.36,1) both; } .launch-panel h2{font-size:15px;color:var(--muted);font-family:var(--font);font-weight:600;letter-spacing:.01em;margin-bottom:var(--sp-4)} .launch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(156px,1fr));gap:var(--sp-3)} .launch-tile{ --a:var(--claw); display:flex;flex-direction:column;gap:4px;text-align:left;cursor:pointer; padding:var(--sp-4);border-radius:var(--r-lg);text-decoration:none; border:1px solid var(--line);background:var(--surface-2);color:var(--ink); transition:transform var(--t),border-color var(--t),background var(--t); } .launch-tile:hover{transform:translateY(-2px);border-color:var(--a);background:var(--surface-3);text-decoration:none} .launch-tile .em{ width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:20px; background:color-mix(in srgb,var(--a) 18%,transparent);border:1px solid color-mix(in srgb,var(--a) 38%,transparent); margin-bottom:6px; } .launch-tile b{font-family:var(--display);font-size:15px;letter-spacing:-.01em} .launch-tile span{font-size:12px;color:var(--muted);line-height:1.35} .launch-tile{position:relative} .launch-tile[data-current]{border-color:var(--a);background:color-mix(in srgb,var(--a) 10%,var(--surface-2))} .launch-tile[data-current]::after{ content:"you're here";position:absolute;top:11px;right:11px; font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase; color:var(--a);background:color-mix(in srgb,var(--a) 15%,transparent); border:1px solid color-mix(in srgb,var(--a) 38%,transparent);border-radius:var(--r-pill);padding:2px 8px; } .launch-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--line);color:var(--muted);font-size:12.5px} /* account menu (same popover language as the launcher) */ .claw-menu{ position:absolute;right:0;top:calc(100% + 8px);z-index:50;min-width:216px;display:none; background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg); box-shadow:var(--sh-3);padding:6px;animation:rise .14s ease both; } .claw-menu[data-open]{display:block} .claw-menu .mi{ display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer; padding:8px 10px;border-radius:var(--r-sm);border:0;background:none;color:var(--ink-2); font-size:14px;font-weight:500;text-decoration:none; } .claw-menu .mi:hover{background:var(--surface-3);color:var(--ink);text-decoration:none} .claw-menu .mi.danger{color:var(--bad)} .claw-menu .sep{height:1px;background:var(--line);margin:5px 2px} .claw-menu .head{padding:8px 10px 4px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:700} /* appearance: the same Light / Dark / Auto choice the mobile launcher offers */ .theme-pick{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:7px 10px} .theme-pick-label{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)} .theme-pick .segmented button{padding:4px 10px;font-size:12px} .launch-foot .theme-pick{padding:0} /* ---------------------------------------------------------------- layout -- */ main{display:block} .page{width:min(var(--page),100%);margin:0 auto;padding:var(--sp-5) var(--sp-4) 72px} .page.narrow{width:min(760px,100%)} .shell{width:min(var(--page),100%);margin:0 auto;display:grid;grid-template-columns:264px 1fr;gap:var(--sp-4);padding:var(--sp-4) var(--sp-4) 60px;align-items:start} .side{display:flex;flex-direction:column;gap:var(--sp-3);position:sticky;top:calc(var(--bar-h) + 14px)} @media (max-width:920px){.shell{grid-template-columns:1fr}.side{position:static;order:2}} .grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(12,1fr)} .c3{grid-column:span 3}.c4{grid-column:span 4}.c6{grid-column:span 6}.c8{grid-column:span 8}.c9{grid-column:span 9}.c12,.span2{grid-column:span 12} @media (max-width:900px){.c3,.c4,.c6,.c8,.c9{grid-column:span 12}} .row{display:flex;gap:var(--sp-3);align-items:center} .col{display:flex;flex-direction:column;gap:var(--sp-3)} .between{justify-content:space-between}.wrap{flex-wrap:wrap}.right{margin-left:auto}.spacer{flex:1} .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)} .three{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)} .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sp-3)} @media (max-width:640px){.two,.three{grid-template-columns:1fr}} .stack>*+*{margin-top:var(--sp-3)} /* ------------------------------------------------------------------ text -- */ .muted{color:var(--muted)} .small{font-size:13px} .tiny{font-size:11.5px} .mono{font-family:var(--mono);font-variant-ligatures:none} .center{text-align:center} .display{font-family:var(--display);font-weight:700;letter-spacing:-.025em;text-wrap:balance} .lede{color:var(--muted);font-size:16.5px;line-height:1.6;max-width:60ch} .hint{color:var(--muted);font-size:13px;margin:6px 0 0} .lbl,.sub-h{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)} .sub-h{margin:var(--sp-5) 0 var(--sp-2)} .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} .empty{color:var(--muted);text-align:center;padding:34px 16px;font-size:14.5px} code,.kbd{background:var(--sunken);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-family:var(--mono);font-size:12.5px} /* ----------------------------------------------------------------- cards -- */ .card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:var(--sp-5);box-shadow:var(--sh-1); } .card>h2:first-child,.card>h3:first-child{margin-bottom:var(--sp-3)} .card.accent{ border-color:var(--accent-line); background:linear-gradient(165deg,color-mix(in srgb,var(--accent) 9%,var(--surface)),var(--surface) 62%); } .card.danger{border-color:color-mix(in srgb,var(--bad) 42%,var(--line))} .card.flat{box-shadow:none;background:var(--surface-2)} .card.center{text-align:center} .card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-3)} .card-head h2,.card-head h3{margin:0} /* --------------------------------------------------------------- buttons -- */ button,.btn{ display:inline-flex;align-items:center;justify-content:center;gap:7px; padding:9px 15px;border-radius:var(--r);cursor:pointer; border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink); font-weight:600;font-size:14px;white-space:nowrap; transition:background var(--t),border-color var(--t),transform var(--t),opacity var(--t); } button:hover,.btn:hover{background:var(--surface-3);border-color:var(--faint);text-decoration:none} button:active,.btn:active{transform:translateY(1px)} button:disabled,.btn:disabled,.btn[disabled]{opacity:.45;cursor:default;transform:none} button.primary,.btn.primary{ background:linear-gradient(170deg,var(--accent-2),var(--accent)); border-color:transparent;color:var(--accent-ink);font-weight:700; box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 4px 14px color-mix(in srgb,var(--accent) 26%,transparent); } button.primary:hover,.btn.primary:hover{filter:brightness(1.07);border-color:transparent} button.ghost,.btn.ghost{background:transparent} button.ghost:hover,.btn.ghost:hover{background:var(--surface-2)} button.danger,.btn.danger,button.red,.btn.red{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,var(--line));background:transparent} button.danger:hover,.btn.danger:hover,button.red:hover,.btn.red:hover{background:var(--bad-soft)} button.small,.btn.small{padding:5px 10px;font-size:12.5px;border-radius:var(--r-sm)} button.big,.btn.big{padding:13px 20px;font-size:15.5px;border-radius:var(--r)} button.block,.btn.block,.btn-block{width:100%} button.icon,.icon{ width:34px;height:34px;padding:0;flex:none;border-radius:10px;font-size:15px;line-height:1; display:inline-grid;place-items:center;background:transparent;border:1px solid var(--line);color:var(--muted); } button.icon:hover,.icon:hover{color:var(--ink);background:var(--surface-2);border-color:var(--line-2)} button.link,.link,.linkish{ background:none;border:0;padding:0;color:var(--accent-2);font-weight:600;font-size:inherit; cursor:pointer;text-decoration:none;border-radius:4px; } button.link:hover,.link:hover,.linkish:hover{background:none;text-decoration:underline;border-color:transparent;transform:none} .navbtn{ width:32px;height:32px;flex:none;padding:0;border-radius:50%;font-size:17px;line-height:1; display:inline-grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2); } .navbtn:hover{background:var(--surface-3);color:var(--ink)} .chip{ padding:6px 13px;border-radius:var(--r-pill);font-size:13px;font-weight:600; background:transparent;border:1px solid var(--line-2);color:var(--ink-2);cursor:pointer; } .chip:hover{border-color:var(--accent-line);background:var(--accent-soft);color:var(--ink)} .chip.on,.chip.active{background:var(--accent-soft);border-color:var(--accent-line);color:var(--ink)} /* segmented control (view switchers) */ .views,.segmented{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line)} .views button,.segmented button{ border:0;background:transparent;color:var(--muted);border-radius:var(--r-pill); padding:5px 13px;font-size:13px;font-weight:600; } .views button:hover,.segmented button:hover{background:var(--surface-3);color:var(--ink-2)} .views button.active,.segmented button.active{background:var(--accent);color:var(--accent-ink);box-shadow:var(--sh-1)} /* ----------------------------------------------------------------- forms -- */ input,select,textarea{ width:100%;padding:9px 12px;border-radius:var(--r); background:var(--sunken);border:1px solid var(--line-2);color:var(--ink); transition:border-color var(--t),box-shadow var(--t),background var(--t); } input::placeholder,textarea::placeholder{color:var(--faint)} input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:var(--ring)} input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--accent)} input[type=color]{padding:2px;height:38px;cursor:pointer} input[type=range]{padding:0;background:none;border:0;accent-color:var(--accent)} textarea{resize:vertical;min-height:84px;line-height:1.5} select{appearance:none;-webkit-appearance:none;padding-right:32px; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 16px) 17px,calc(100% - 11px) 17px;background-size:5px 5px;background-repeat:no-repeat} label{display:block;font-size:12.5px;font-weight:600;color:var(--muted)} label>input,label>select,label>textarea{margin-top:5px;font-weight:400;font-size:15px;color:var(--ink)} .form label{margin-top:var(--sp-3)} fieldset{border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-3);margin:0} legend{padding:0 6px;font-size:12px;color:var(--muted);font-weight:600} .field{display:flex;flex-direction:column;gap:5px} .copy{display:flex;gap:6px;margin-top:5px} .copy input{font-family:var(--mono);font-size:12.5px} .switch{ background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-pill); padding:6px 30px 6px 13px;font-weight:600;font-size:13.5px;max-width:250px;width:auto; background-position:calc(100% - 14px) 16px,calc(100% - 9px) 16px; } input.search,.search{border-radius:var(--r-pill);padding-left:15px} /* ------------------------------------------------------- pills / badges -- */ .pill,.badge,.tag{ display:inline-flex;align-items:center;gap:5px; padding:3px 9px;border-radius:var(--r-pill);font-size:11px;font-weight:700; letter-spacing:.055em;text-transform:uppercase; background:var(--surface-3);color:var(--muted);border:1px solid var(--line); } .pill.ok,.pill.running,.pill.on,.tag.on,.badge.v{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 32%,transparent)} .pill.warn,.pill.provisioning,.pill.queued,.pill.wait{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 32%,transparent)} .pill.bad,.pill.error,.pill.failed{background:var(--bad-soft);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 32%,transparent)} .pill.info{background:var(--info-soft);color:var(--info);border-color:color-mix(in srgb,var(--info) 32%,transparent)} .pill.accent,.badge.accent{background:var(--accent-soft);color:var(--accent-2);border-color:var(--accent-line)} .pill.stopped{background:var(--surface-3);color:var(--muted)} .badge{padding:2px 7px;letter-spacing:.04em} .dot{display:inline-block;width:9px;height:9px;border-radius:3px;flex:none} .dot.round{border-radius:50%} /* ------------------------------------------------------------------ tabs -- */ .tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:0 0 var(--sp-4)} .tabs button{ background:none;border:0;border-bottom:2px solid transparent;border-radius:0; padding:9px 14px;color:var(--muted);font-weight:600;font-size:14px; } .tabs button:hover{background:var(--surface-2);color:var(--ink-2);border-color:transparent;border-bottom-color:var(--line-2)} .tabs button.active{color:var(--ink);border-bottom-color:var(--accent)} .main-tabs{border-bottom:0;margin:0} /* ---------------------------------------------------------------- tables -- */ table{width:100%;border-collapse:collapse;font-size:14px} th{ text-align:left;padding:9px 8px;border-bottom:1px solid var(--line); font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint); } td{padding:11px 8px;border-bottom:1px solid var(--line);color:var(--ink-2)} tr:last-child td{border-bottom:0} tbody tr:hover td{background:var(--surface-2)} td.num,th.num{text-align:right;font-variant-numeric:tabular-nums} .kv{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin:var(--sp-2) 0 var(--sp-4);font-size:14px} .kv dt{color:var(--muted)} .kv dd{margin:0;color:var(--ink)} /* list rows — the shared shape for “a thing with actions on the right” */ .list{display:flex;flex-direction:column} .list-row{ display:flex;align-items:center;gap:var(--sp-3);padding:11px 4px; border-top:1px solid var(--line); } .list-row:first-child{border-top:0} .list-row .info{flex:1;min-width:0} .list-row .n{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .list-row .s{font-size:12.5px;color:var(--muted)} .list-row .act{display:flex;gap:5px;flex:none} .tappable{cursor:pointer;border-radius:var(--r-sm);transition:background var(--t)} .tappable:hover{background:var(--surface-2)} /* ------------------------------------------------------- meters / charts -- */ .bar{height:8px;border-radius:99px;background:var(--sunken);overflow:hidden} .bar>div,.bar>i{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .45s cubic-bezier(.22,1,.36,1)} .progress{height:8px;border-radius:99px;background:var(--sunken);overflow:hidden;margin:var(--sp-4) 0} .progress div{height:100%;width:5%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .8s} .log{ background:var(--sunken);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-3); font:12px/1.55 var(--mono);color:var(--ink-2);max-height:260px;overflow:auto;white-space:pre-wrap;margin:0; } .chart{position:relative;width:100%;height:240px} .chart canvas{width:100%;height:100%;display:block} .chart .tip{ position:absolute;pointer-events:none;background:var(--surface-3);color:var(--ink);border:1px solid var(--line-2); font-size:12px;padding:6px 9px;border-radius:var(--r-sm);transform:translate(-50%,-118%);white-space:nowrap;display:none; box-shadow:var(--sh-2); } .legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:8px} /* ---------------------------------------------------------------- modal -- */ .modal{ position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:var(--sp-3); background:color-mix(in srgb,var(--ink) 48%,transparent);backdrop-filter:blur(4px);animation:fade .14s ease both; } .modal-card{ width:min(640px,100%);max-height:90vh;overflow:auto;padding:var(--sp-5); background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-xl);box-shadow:var(--sh-3); animation:rise .2s cubic-bezier(.22,1,.36,1) both; } .modal-card.wide{width:min(880px,100%)} .modal-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-4)} .modal-head h3{margin:0;font-size:18px} .lightbox{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 84%,transparent);padding:var(--sp-4);cursor:zoom-out} .lightbox img{max-width:100%;max-height:92vh;border-radius:var(--r-lg);box-shadow:var(--sh-3)} /* ---------------------------------------------------------------- toast -- */ .toast{ position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:90; background:var(--surface-3);color:var(--ink);border:1px solid var(--line-2); padding:11px 18px;border-radius:var(--r-pill);font-size:14px;font-weight:600; box-shadow:var(--sh-3);animation:toast .22s cubic-bezier(.22,1,.36,1) both;max-width:min(520px,92vw); } .toast.bad{border-color:color-mix(in srgb,var(--bad) 50%,transparent);color:var(--bad)} .toast.ok{border-color:color-mix(in srgb,var(--ok) 50%,transparent);color:var(--ok)} /* --------------------------------------------------------- sign-in page -- */ /* Every app's signed-out screen is the same object: platform mark, one promise, the app's own line, and the shared auth card. */ .login{min-height:72vh;display:grid;place-items:center;padding:var(--sp-6) var(--sp-4)} .hero{width:min(560px,100%);text-align:center} .hero .mark{ width:56px;height:56px;margin:0 auto var(--sp-4);border-radius:17px;display:grid;place-items:center;font-size:27px; background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 26%,transparent),transparent); border:1px solid var(--accent-line);box-shadow:var(--sh-2); } .hero h1{font-size:34px;margin:0 0 10px;letter-spacing:-.035em} .hero>p{color:var(--muted);font-size:16.5px;line-height:1.6;margin:0 auto var(--sp-5);max-width:46ch} .auth-card{max-width:392px;margin:0 auto;text-align:left;padding:var(--sp-5)} .auth-card .tabs{margin-bottom:var(--sp-4)} .auth-card .tabs button{flex:1} .auth-card form label+label,.auth-card .form label+label{margin-top:var(--sp-3)} .auth-card .primary,.auth-form .primary,#auth-submit{width:100%;margin-top:var(--sp-4);padding:12px} .auth-form{max-width:392px;margin:0 auto;text-align:left} .sso-note{color:var(--muted);font-size:12.5px;text-align:center;margin:var(--sp-4) 0 0;line-height:1.5} /* the platform strip under the auth card: one account, every app */ .one-account{ display:flex;align-items:center;justify-content:center;gap:var(--sp-3);flex-wrap:wrap; margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--line); } .one-account .oa-apps{display:flex;gap:7px} .one-account .oa-app{ width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:16px; background:var(--surface-2);border:1px solid var(--line); } .one-account p{margin:0;color:var(--muted);font-size:12.5px;text-align:left;max-width:30ch} details{border:1px solid var(--line);border-radius:var(--r);padding:11px 15px;margin-top:var(--sp-3);background:var(--surface-2)} details[open]{background:var(--surface-2)} summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--ink-2)} summary::marker{color:var(--muted)} /* skeletons + spinners */ .skel{background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%;animation:shim 1.3s linear infinite;border-radius:var(--r-sm);height:14px} .spin{width:16px;height:16px;border:2px solid var(--line-2);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;display:inline-block} @keyframes fade{from{opacity:0}to{opacity:1}} @keyframes rise{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}} @keyframes toast{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}} @keyframes shim{to{background-position:-200% 0}} @keyframes spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}} /* ------------------------------------------------------------- responsive -- */ @media (max-width:720px){ :root{--bar-h:54px} .top{padding:0 var(--sp-3);gap:var(--sp-2)} .brand span.long{display:none} .brand small{display:none} .hero h1{font-size:27px} .card{padding:var(--sp-4)} .page{padding:var(--sp-4) var(--sp-3) 64px} .who span,.user span{display:none} .who,.user{padding:4px} }