/* Shared design tokens and primitives for every page on the site.
 *
 * One stylesheet for the marketing pages and the app, so a button on the
 * landing page and a button inside /connect are the same object.  Everything
 * here is theme-aware: the light palette is the base, dark overrides only the
 * tokens.  Nothing below should hard-code a colour outside :root.
 */

:root {
  color-scheme: light dark;

  /* surfaces, back to front */
  --bg:#f6f8fb;
  --panel:#ffffff;
  --panel-2:#f1f4f9;
  --panel-3:#e7ecf3;
  --border:#e2e8f0;
  --border-strong:#cdd6e3;

  /* text */
  --text:#0b1220;
  --muted:#57626f;
  --faint:#8b95a4;

  /* accent */
  --accent:#2f6bff;
  --accent-hover:#1f56e0;
  --accent-text:#ffffff;
  --accent-soft:#e9f0ff;
  --accent-line:#c2d5ff;

  /* semantic */
  --ok:#0f7a58; --ok-bg:#e4f5ef; --ok-line:#b6e2d3;
  --warn:#8a5200; --warn-bg:#fdf2e0; --warn-line:#f0d9ac;
  --bad:#b42318; --bad-bg:#fdecea; --bad-line:#f5c7c2;

  /* the calculator's own screen, used for bubbles it sent */
  --calc-bg:#e9edf4;
  --calc-line:#d7deea;

  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;

  --shadow-xs:0 1px 2px rgba(11,18,32,.05);
  --shadow:0 1px 2px rgba(11,18,32,.05),0 2px 6px rgba(11,18,32,.06);
  --shadow-md:0 4px 12px rgba(11,18,32,.08),0 1px 3px rgba(11,18,32,.05);
  --shadow-lg:0 18px 42px rgba(11,18,32,.14),0 4px 12px rgba(11,18,32,.07);

  --r-sm:8px; --r:10px; --r-md:12px; --r-lg:16px; --r-xl:20px;
  --radius:14px;               /* kept: older pages reference it */

  --rail:296px;                /* width of the app's left rail */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0a0d13;
    --panel:#12161e;
    --panel-2:#171c26;
    --panel-3:#1f2531;
    --border:#252c39;
    --border-strong:#333c4c;

    --text:#e8edf4;
    --muted:#98a3b3;
    --faint:#6b7688;

    --accent:#4c86ff;
    --accent-hover:#6a9bff;
    --accent-soft:#152441;
    --accent-line:#27406e;

    --ok:#4ade80; --ok-bg:#0e2419; --ok-line:#1d4432;
    --warn:#fbbf24; --warn-bg:#271d0c; --warn-line:#4a380f;
    --bad:#f87171; --bad-bg:#2a1413; --bad-line:#4d2321;

    --calc-bg:#1d2331;
    --calc-line:#2a3242;

    --shadow-xs:none;
    --shadow:0 1px 2px rgba(0,0,0,.5);
    --shadow-md:0 4px 14px rgba(0,0,0,.45);
    --shadow-lg:0 18px 42px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
/* The UA rule for [hidden] is display:none at the lowest specificity, so any
   component that sets its own display wins and the element stays visible.
   Every page here toggles visibility with .hidden, so make it stick. */
[hidden]{display:none!important}
body{
  margin:0; font:16px/1.6 var(--sans); background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code{font:.87em var(--mono);background:var(--panel-2);border:1px solid var(--border);
     border-radius:6px;padding:1.5px 6px}
::selection{background:var(--accent-soft);color:var(--text)}

/* One focus treatment everywhere, and only for keyboard users. */
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ---------------------------------------------------------------- controls */

.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  font:600 15px/1 var(--sans); padding:11px 18px; border-radius:var(--r);
  border:1px solid transparent; background:var(--accent); color:var(--accent-text);
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background .13s ease, border-color .13s ease, color .13s ease,
             transform .06s ease, opacity .13s ease;
}
.btn:hover{text-decoration:none;background:var(--accent-hover)}
.btn:active{transform:translateY(.5px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.btn:disabled:hover{background:var(--accent)}

.btn.secondary{background:var(--panel);color:var(--text);border-color:var(--border-strong)}
.btn.secondary:hover{background:var(--panel-2);border-color:var(--faint)}

.btn.ghost{background:transparent;color:var(--muted);border-color:transparent;
           font-weight:500;font-size:13.5px;padding:7px 11px;border-radius:var(--r-sm)}
.btn.ghost:hover{background:var(--panel-2);color:var(--text)}
.btn.ghost.on{background:var(--accent-soft);color:var(--accent)}

.btn.danger{background:transparent;color:var(--bad);border-color:var(--border-strong)}
.btn.danger:hover{background:var(--bad-bg);border-color:var(--bad-line)}

.btn.small{font-size:13.5px;padding:8px 13px;border-radius:var(--r-sm)}
.btn.block{width:100%}

/* Square icon button. Put an <svg> inside. */
.icon-btn{
  display:inline-grid;place-items:center;width:36px;height:36px;flex:none;
  border-radius:var(--r-sm);border:1px solid transparent;background:transparent;
  color:var(--muted);cursor:pointer;transition:background .13s,color .13s;
}
.icon-btn:hover{background:var(--panel-2);color:var(--text)}
.icon-btn svg{width:18px;height:18px;display:block}

input,select,textarea{
  font:15px/1.5 var(--sans); padding:10px 12px; border-radius:var(--r);
  border:1px solid var(--border-strong); background:var(--panel); color:var(--text);
  width:100%; transition:border-color .13s, box-shadow .13s;
}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
select{
  appearance:none;cursor:pointer;padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) 51%, calc(100% - 12px) 51%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);
      margin-bottom:6px;letter-spacing:.005em}
.field{margin-bottom:15px}
.field:last-child{margin-bottom:0}
.hint{font-size:12.5px;color:var(--faint);margin-top:6px;line-height:1.55}
.hint b{color:var(--muted);font-weight:600}

/* input with a button welded to its right */
.input-row{display:flex;gap:7px;align-items:stretch}
.input-row input,.input-row select{flex:1;min-width:0}

/* iOS-style segmented control, used to pick a transport */
.seg{display:flex;gap:3px;padding:3px;background:var(--panel-2);
     border:1px solid var(--border);border-radius:var(--r-md)}
.seg button{
  flex:1;min-width:0;border:0;background:transparent;cursor:pointer;
  font:600 12.5px/1 var(--sans);color:var(--muted);padding:9px 4px;
  border-radius:var(--r-sm);display:flex;flex-direction:column;align-items:center;gap:5px;
  transition:background .13s,color .13s,box-shadow .13s;
}
.seg button svg{width:17px;height:17px}
.seg button:hover:not(.on):not(:disabled){color:var(--text)}
.seg button.on{background:var(--panel);color:var(--accent);box-shadow:var(--shadow-xs)}
.seg button:disabled{opacity:.38;cursor:not-allowed}

.chip{
  font:600 12px/1 var(--sans);padding:6px 10px;border-radius:999px;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  background:var(--panel-2);color:var(--muted);border:1px solid var(--border);
}
.chip.live{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.chip.busy{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.chip.bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.chip.live .dot{animation:pulse 2.2s ease-in-out infinite}
.chip.busy .dot{animation:pulse .9s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

.card{background:var(--panel);border:1px solid var(--border);
      border-radius:var(--radius);box-shadow:var(--shadow)}

.avatar{
  width:26px;height:26px;border-radius:50%;flex:none;object-fit:cover;
  background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;
  font:700 11px var(--sans);border:1px solid var(--border);
}

/* ------------------------------------------------------------------ layout */

.wrap{max-width:1060px;margin:0 auto;padding:0 24px}

.nav{
  position:sticky;top:0;z-index:30;backdrop-filter:saturate(150%) blur(14px);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom:1px solid var(--border);
}
.nav .wrap{display:flex;align-items:center;gap:14px;height:60px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15.5px;
       color:var(--text);letter-spacing:-.015em}
.brand:hover{text-decoration:none}
.brand .mark{
  width:25px;height:25px;border-radius:7px;color:#fff;flex:none;
  background:linear-gradient(140deg,var(--accent),#7c5cff);
  display:grid;place-items:center;font:700 11px var(--mono);
}
.nav .spacer{flex:1}
.nav a.link{color:var(--muted);font-size:14px;font-weight:500}
.nav a.link:hover{color:var(--text);text-decoration:none}
@media (max-width:640px){ .nav a.link{display:none} }

/* the account button that every page mounts into its nav */
.acct{
  display:inline-flex;align-items:center;gap:8px;padding:5px 11px 5px 6px;
  border-radius:999px;border:1px solid var(--border);background:var(--panel);
  color:var(--text);font:600 13px var(--sans);cursor:pointer;max-width:190px;
}
.acct:hover{text-decoration:none;border-color:var(--border-strong);background:var(--panel-2)}
.acct span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --------------------------------------------------------------- utilities */

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
    white-space:nowrap}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:10px}
.grow{flex:1;min-width:0}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
                       transition-duration:.01ms!important}
}