/* theme.css: the mock-up's one theme, shared with the desktop app.
   Dark is the default (the site's own tokens in arcaeon.css). Light is the
   desktop app's light token set (theme.py), switched on by data-theme="light"
   on <html>. The status ring is the symbol on every page: the outer ring is
   the record sealed on your device, the inner ring is the outside witness.
   Colour is never the only signal: every ring has its own shape and a badge
   glyph, and every ring sits next to words. */

:root{
  --attention:#FFA94D;   /* amber, from the desktop app's dark tokens */
  --brand-ring:var(--line-strong);
}
:root[data-theme="light"]{
  --navy-deep:#F7F3EA;   /* ground */
  --navy:#FFFDF8;        /* raised */
  --line:#DDD3C0;
  --line-strong:#8C7F66; /* control borders, 3.6:1 on ground */
  --ink:#13233A;
  --ink-soft:#4A5A70;
  --ink-dim:#5E6B7E;
  --gold:#7A5410;        /* links and eyebrows on paper */
  --gold-fill:#C8912E;
  --gold-hover:#E0A73C;
  --on-gold:#13233A;
  --ok:#1C7A4E;
  --bad:#B42318;
  --unknown:#5E6B7E;
  --attention:#A14A00;
  --shadow:0 24px 60px -28px rgba(19,35,58,.28);
  color-scheme:light;
}
:root[data-theme="light"] .site-head{background:rgba(255,253,248,.94)}
:root[data-theme="light"] .btn-primary{background:var(--ink);color:#F7F3EA}
:root[data-theme="light"] .btn-primary:hover{background:#1C2F4C;color:#F7F3EA}
:root[data-theme="light"] .receipt{border:1px solid var(--paper-line)}
/* the mark's pale inner chevron follows the ink, so it shows on paper too */
.arc-in{stroke:var(--ink)}
.receipt .arc-in{stroke:var(--paper-ink)}

/* ---------- the ring ---------- */
.ring{display:block;flex:none;overflow:visible}
.ring .r-track{fill:none;stroke:var(--line);stroke-width:5}
.ring .r-arc{fill:none;stroke-width:5;stroke-linecap:butt;transform:rotate(-90deg);transform-origin:32px 32px}
.ring .r-in{fill:none;stroke-width:1.6;transform:rotate(-90deg);transform-origin:32px 32px}
.ring .r-badge circle{stroke:var(--navy-deep);stroke-width:3}
.ring .r-badge path{fill:none;stroke:var(--navy-deep);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ring .r-badge .dot{fill:var(--navy-deep);stroke:none}
.ring .m-out{fill:none;stroke:#E0A73C;stroke-width:9;stroke-linejoin:miter;stroke-linecap:square}
.ring .m-in{fill:none;stroke:var(--ink);stroke-width:6.5;stroke-linejoin:miter;stroke-linecap:square}
.card .ring .r-badge circle,.chapter .ring .r-badge circle{stroke:var(--navy)}
.chapter .card .ring .r-badge circle{stroke:var(--navy-deep)}

/* each state: a colour, a shape and a glyph */
.ring.s-green{--s:var(--ok)}
.ring.s-amber{--s:var(--attention)}
.ring.s-red{--s:var(--bad)}
.ring.s-grey{--s:var(--unknown)}
.ring .r-arc{stroke:var(--s,var(--brand-ring))}
.ring .r-badge circle{fill:var(--s)}
/* green: whole */
.ring.s-green .r-arc{stroke-dasharray:100 0}
/* amber: whole up to the newest part, which is still open */
.ring.s-amber .r-arc{stroke-dasharray:72 28}
/* red: broken into pieces */
.ring.s-red .r-arc{stroke-dasharray:8.5 4}
/* grey: not looked at yet */
.ring.s-grey .r-arc{stroke-dasharray:1.5 3.5;stroke-width:3}
/* the inner ring: solid when witnessed, dotted when not */
.ring .r-in{stroke:var(--s,var(--brand-ring))}
.ring .r-in.open{stroke:var(--line-strong);stroke-dasharray:1.2 3}
.ring.s-brand .r-track{stroke:var(--brand-ring);stroke-width:4}

/* the one orchestrated moment: the home page ring draws itself once */
@media (prefers-reduced-motion:no-preference){
  .ring-draw .r-arc{animation:ring-draw 1.4s cubic-bezier(.2,.7,.2,1) .2s both}
  .ring-draw .r-in{animation:ring-draw 1s cubic-bezier(.2,.7,.2,1) 1.3s both}
  .ring-draw .r-badge{animation:ring-pop .35s ease-out 2.1s both}
}
@keyframes ring-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes ring-pop{from{opacity:0}to{opacity:1}}

/* the paper sheet uses the paper status colours */
.receipt .ring{--ok:var(--ok-paper);--bad:var(--bad-paper);--attention:#A14A00;--line:var(--paper-line);--navy-deep:var(--paper);--navy:var(--paper);--ink:var(--paper-ink)}

/* ---------- hero with its ring ---------- */
.hero-grid{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr);align-items:center}
.hero-grid .ring-fig{order:-1;justify-self:start}
@media (min-width:860px){
  .hero-grid{grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-6)}
  .hero-grid .ring-fig{order:0;justify-self:end}
}
.ring-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);text-align:center}
.ring-fig figcaption{font-size:var(--fs-2);color:var(--ink-soft);max-width:16em;line-height:1.4}
.ring-fig figcaption b{display:block;font:600 var(--fs-4)/1.25 var(--font-display);color:var(--ink);margin-bottom:2px}
.ring-xl{width:clamp(132px,30vw,232px);height:auto}
@media (max-width:859px){.hero-grid .ring-fig{flex-direction:row;text-align:left;gap:var(--sp-3)}
  .hero-grid .ring-xl{width:112px}}

/* the ring, annotated (pricing) */
.ring-key{display:grid;gap:var(--sp-3);grid-template-columns:auto minmax(0,1fr);align-items:center;max-width:34em}
.ring-key ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.ring-key li{padding-left:var(--sp-2);border-left:2px solid var(--line-strong)}
.ring-key li b{display:block;font:600 var(--fs-3)/1.3 var(--font-display);color:var(--ink)}
.ring-key li span{font-size:var(--fs-2);color:var(--ink-soft)}
.ring-key .k-in{border-left-style:dotted}

/* three states in a row */
.states{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.states li{display:flex;gap:var(--sp-2);align-items:flex-start}
.states h3{font-size:var(--fs-3);margin:2px 0 var(--sp-h)}
.states p{margin:0;font-size:var(--fs-2);color:var(--ink-soft)}

/* ---------- account: devices ---------- */
.devices{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2);grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.device{display:flex;gap:var(--sp-2);align-items:center;background:var(--navy);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2);min-width:0}
.device h3{font-size:var(--fs-4);margin:0 0 2px;display:flex;flex-wrap:wrap;gap:var(--sp-1);align-items:center}
.device h3 .tag{font-size:10px}
.device p{margin:0;color:var(--ink)}
.device .when{display:block;font-size:var(--fs-2);color:var(--ink-soft)}
.device.add{background:transparent;border-style:dashed;border-color:var(--line-strong)}
.device.add a{font:600 var(--fs-4)/1.25 var(--font-display)}
.plus{width:64px;height:64px;flex:none;border-radius:50%;border:2px dashed var(--line-strong);display:grid;place-items:center;color:var(--ink-soft);font:500 28px/1 var(--font-display)}

/* connect a device: app code on one side, the site's box on the other */
.connect{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));align-items:stretch}
.steps{margin:0;padding-left:1.4em}
.steps li{margin:0 0 var(--sp-1)}
.app-code{background:var(--navy-deep);border:1px solid var(--line-strong);border-radius:var(--r-card);padding:var(--sp-3);text-align:center}
.app-code .meta{margin:0}
.code{font:600 clamp(1.75rem,1.2rem + 2.4vw,2.5rem)/1.1 var(--font-display);letter-spacing:.16em;color:var(--ink);margin:var(--sp-1) 0;white-space:nowrap}
.code-form label{display:block;font-weight:600;margin:0 0 var(--sp-1)}
.code-input{display:block;width:100%;max-width:16ch;min-height:var(--touch);padding:0 var(--sp-2);border:1px solid var(--line-strong);border-radius:var(--r-ctl);
  background:var(--navy-deep);color:var(--ink);font:600 var(--fs-4)/1 var(--font-display);letter-spacing:.2em;text-transform:uppercase}
.code-form .btn{margin-top:var(--sp-2)}
.result-line{display:flex;gap:var(--sp-1);align-items:center;margin:var(--sp-2) 0 0;font-size:var(--fs-2);color:var(--ink-soft)}

/* explainers that follow the device you are reading on */
.how-set{display:flex;flex-direction:column;gap:var(--sp-2)}
.how{background:var(--navy);border:1px solid var(--line);border-radius:var(--r-card);padding:0 var(--sp-3)}
.how>summary{cursor:pointer;min-height:var(--touch);display:flex;align-items:center;gap:var(--sp-1);flex-wrap:wrap;
  font:600 var(--fs-4)/1.25 var(--font-display);padding:var(--sp-2) 0}
.how[open]>summary{padding-bottom:var(--sp-1)}
.how>ol{margin:0 0 var(--sp-3)}
.how.is-mine{border-color:var(--line-strong);order:-1}
.how.is-mine>summary::after{content:"Your device";font:500 var(--fs-1)/1.3 var(--font-body);color:var(--ink-soft);border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:2px 8px}
.chapter .how{background:var(--navy-deep)}

/* cloud storage card */
.store{display:grid;gap:var(--sp-3);grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){.store{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.store-now{display:flex;gap:var(--sp-2);align-items:center;margin:0 0 var(--sp-2)}
.store-now h3{margin:0 0 2px}
.store-now p{margin:0}
.store-key{list-style:none;margin:0;padding:var(--sp-2) 0 0;border-top:1px solid var(--line);display:grid;gap:var(--sp-1)}
.store-key li{display:flex;gap:var(--sp-1);align-items:flex-start;font-size:var(--fs-2);color:var(--ink-soft)}
.store-key li b{color:var(--ink)}
.picker{border:0;margin:0;padding:0;min-width:0}
.picker legend{font:600 var(--fs-4)/1.25 var(--font-display);margin:0 0 var(--sp-2);padding:0}
.pick-big{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-1)}
.pick-big label{display:flex;gap:var(--sp-2);align-items:center;min-height:64px;padding:var(--sp-2);border:1px solid var(--line-strong);
  border-radius:var(--r-card);background:var(--navy-deep);cursor:not-allowed}
.pick-big input[type=radio]{margin:0;flex:none;width:18px;height:18px;accent-color:var(--gold-fill)}
.pick-big .p-name{font:600 var(--fs-4)/1.2 var(--font-display);color:var(--ink)}
.pick-big .p-sub{display:block;font:400 var(--fs-2)/1.4 var(--font-body);color:var(--ink-soft);margin-top:2px}
details.adv{margin-top:var(--sp-2)}
details.adv>summary{display:inline-flex;align-items:center;min-height:var(--touch);cursor:pointer;color:var(--ink-soft);
  font-size:var(--fs-2);text-decoration:underline;text-underline-offset:3px}
details.adv>summary:hover{color:var(--ink)}
details.adv label{display:block;font-weight:600;margin:var(--sp-1) 0 var(--sp-h)}
details.adv .addr{display:block;width:100%;min-height:var(--touch);padding:0 var(--sp-2);border:1px solid var(--line-strong);border-radius:var(--r-ctl);
  background:var(--navy-deep);color:var(--ink);font:400 var(--fs-3)/1 var(--font-body)}
details.adv p{font-size:var(--fs-2);color:var(--ink-soft);margin:var(--sp-1) 0 0}

/* ---------- theme switch (shown only when the page script runs) ---------- */
.theme-toggle{display:none;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--line-strong);
  background:transparent;color:var(--ink-soft);font:500 var(--fs-2)/1 var(--font-body);cursor:pointer}
.theme-toggle:hover{color:var(--ink);border-color:var(--gold)}
html[data-js] .theme-toggle{display:inline-flex}
.theme-toggle::before{content:"";width:12px;height:12px;border-radius:50%;border:1.5px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.head-tools{display:flex;align-items:center;gap:var(--sp-2)}
@media print{.theme-toggle{display:none !important}}