/* Conscious website: design tokens and shared components.
   The palette and type are the product's own (app/web/src/styles/theme.css): Ledger paper and
   ink for the reading surface, light or dark as the visitor's system asks, and the Graph night
   field (.night) for the globe, the console and the close, dark in both themes as the console
   draws its heroes. One face, IBM Plex Sans, self-hosted; Plex Mono only for hash fragments. */

@font-face{font-family:"IBM Plex Sans";src:url("../fonts/IBMPlexSans-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/IBMPlexSans-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("../fonts/IBMPlexMono-Regular.ttf") format("truetype");font-weight:400;font-display:swap} /* taste-skill-ignore: hash fragments only */

:root{
  /* Ledger, light */
  --bg:#f7f6f2; --bg-2:#eeece5; --card:#ffffff; --card-2:#f3f1eb;
  --ink:#16202e; --ink-2:#2a3443; --muted:#4d5767;
  --rule:rgba(22,32,46,.1); --rule-2:rgba(22,32,46,.24);
  --accent:#3b5bdb; --accent-hover:#3350c4; --on-accent:#ffffff; --accent-soft:#eceffb;
  --link:#3b5bdb; --focus:#3b5bdb;
  --ok:#0f6b63; --ok-soft:#e1f0ec; --warn:#9a4a0b; --warn-soft:#f9ecdb; --danger:#b42318; --danger-soft:#fbe6e3;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:var(--sans);
  --mono:"Plex Mono",Consolas,monospace; /* taste-skill-ignore: hash fragments only */
  --r:8px; --r-sm:4px; --r-pill:999px;
  --max:1200px;
  --ease:cubic-bezier(.2,0,0,1);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0e141c; --bg-2:#1b2533; --card:#151d29; --card-2:#19222f;
    --ink:#e6eaf0; --ink-2:#c3ccd8; --muted:#a3aec0;
    --rule:rgba(230,234,240,.09); --rule-2:rgba(230,234,240,.2);
    --accent:#8ea2f5; --accent-hover:#a8b8f7; --on-accent:#0b1220; --accent-soft:#1f2a42;
    --link:#8ea2f5; --focus:#8ea2f5;
    --ok:#3ccfb4; --ok-soft:#13302f; --warn:#f0a847; --warn-soft:#33281a; --danger:#f98080; --danger-soft:#3a1f24;
  }
}
/* Graph: the night field, the same in both themes */
.night{
  --bg:#0b1220; --bg-2:#131d33; --card:#131d33; --card-2:#1a2640;
  --ink:#e6eaf3; --ink-2:#c9d1e0; --muted:#a2aec7;
  --rule:rgba(148,165,210,.16); --rule-2:rgba(148,165,210,.34);
  --accent:#3b5bdb; --accent-hover:#4c6be0; --on-accent:#ffffff; --accent-soft:#1f2a42;
  --link:#afc0ff; --focus:#8ea2f5;
  --ok:#3ccfb4; --ok-soft:rgba(60,207,180,.14); --warn:#f0a847; --warn-soft:rgba(240,168,71,.14); --danger:#f98080; --danger-soft:rgba(249,128,128,.14);
  color-scheme:dark; background:var(--bg); color:var(--ink);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:0;text-wrap:balance}
h1{font-size:clamp(34px,4.4vw,60px)} h2{font-size:clamp(28px,3.2vw,44px)} h3{font-size:19px;letter-spacing:-.01em;line-height:1.25}
p{margin:0}
a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--r-sm)}
::selection{background:var(--accent);color:var(--on-accent)}
.hidden{display:none!important}
.lede{font-size:clamp(17px,1.35vw,20px);color:var(--ink-2);max-width:62ch;line-height:1.55}
.muted{color:var(--muted)} .small{font-size:14px} .center{text-align:center}
.count{display:inline-block;font-size:13px;font-weight:600;color:var(--muted);background:var(--bg-2);padding:2px 8px;border-radius:var(--r-pill);vertical-align:middle;margin-left:6px}
.tag{display:inline-block;font-size:13px;font-weight:600;line-height:1.3;color:var(--muted);background:var(--bg-2);padding:3px 9px;border-radius:var(--r-pill)}
.tag.warn{color:var(--warn);background:var(--warn-soft)} .tag.bad{color:var(--danger);background:var(--danger-soft)} .tag.ok{color:var(--ok);background:var(--ok-soft)}

/* buttons: one action colour, square-cornered, flat */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule-2);background:transparent;color:var(--ink);padding:12px 20px;border-radius:var(--r-sm);font-weight:600;font-size:16px;line-height:1;text-decoration:none!important;white-space:nowrap;transition:background-color .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .15s var(--ease)}
.btn:hover{background:var(--bg-2);border-color:var(--rule-2)}
.btn:active{transform:translateY(1px)}
.btn.primary,.btn.turq{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover,.btn.turq:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.ghost{background:transparent}
.btn.sm{padding:9px 14px;font-size:14px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.link,.link{background:none;border:0;color:var(--link);padding:0;font:inherit;text-decoration:underline;cursor:pointer}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--rule-2);background:transparent;color:var(--ink-2);padding:9px 14px;border-radius:var(--r-pill);font-size:15px;line-height:1;transition:background-color .15s,border-color .15s,color .15s}
.chip:hover{border-color:var(--accent);color:var(--ink)}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chip.sm{padding:7px 11px;font-size:14px}
.chip.ghost{border-style:dashed;color:var(--muted)}
.chip small{display:block;font-size:12px;color:inherit;opacity:.8;margin-top:2px}

/* surfaces: a step of tone, not a line */
.panel{background:var(--card);border-radius:var(--r);padding:28px}
.card{background:var(--card);border-radius:var(--r);padding:20px 22px}
.note{border-radius:var(--r-sm);padding:12px 14px;font-size:15px}
.note.warn{background:var(--warn-soft);color:var(--ink-2)}

/* forms */
label{display:block;font-size:15px;color:var(--ink-2);font-weight:600}
input:not([type=checkbox]),select,textarea{display:block;width:100%;margin-top:6px;background:var(--card);border:1px solid var(--rule-2);color:var(--ink);border-radius:var(--r-sm);padding:12px 14px;font:inherit;font-size:16px;font-weight:400}
input::placeholder{color:var(--muted);opacity:1}
input:focus,select:focus{border-color:var(--accent);outline:2px solid var(--focus);outline-offset:1px}
select{appearance:none;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23808a9a' stroke-width='1.6'/%3E%3C/svg%3E");background-position:calc(100% - 14px) 50%;background-repeat:no-repeat}
.hint{display:block;font-size:14px;color:var(--muted);margin-top:6px;line-height:1.45;font-weight:400}
.hint b{color:var(--ink-2)}
.hint a,.meta a{color:inherit}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} /* taste-skill-ignore: the honeypot field, off-screen */

/* boot: the mark draws itself once, then the page is the page */
#boot{position:fixed;inset:0;z-index:100;display:grid;place-items:center;transition:opacity .45s ease,visibility .45s}
#boot.gone{opacity:0;visibility:hidden}
#boot svg{overflow:visible}
#boot .b-c,#boot .b-l{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-dasharray:900;stroke-dashoffset:900;animation:draw 1.2s var(--ease) forwards}
#boot .b-c{stroke:#8ea2f5} #boot .b-l{stroke:#3ccfb4;animation-delay:.3s;stroke-dasharray:520;stroke-dashoffset:520}
@keyframes draw{to{stroke-dashoffset:0}}

/* Reduced motion: each effect keeps its content and drops its travel; fades stay. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #boot .b-c,#boot .b-l{animation:none;stroke-dashoffset:0}
  .btn:active{transform:none}
}

/* phones: comfortable tap targets, no scaled-up text */
@media (max-width:820px){
  .btn,.btn.sm{min-height:44px}
  .chip{min-height:40px;padding:8px 14px} .chip.sm{min-height:36px;padding:6px 12px}
  .panel{padding:20px 16px} .card{padding:16px 16px}
  input:not([type=checkbox]),select,textarea{padding:12px 14px;min-height:48px}
  .lede{font-size:17px}
}