/* Colours are the app's own, from Ui.java: its light theme, and its dark theme when the phone or
   computer asks for one, as the app does. Buttons keep #005fcc in both, as DESIGN_DOCUMENT.md sets
   for the main action. The night and the blue of the mark are the launcher icon's. */
:root{
  color-scheme:light dark;
  --bg:#f3f5f7;
  --card:#ffffff;
  --text:#17212f;
  --muted:#46556a;
  --border:#64748b;
  --line:#c9d2dd;
  --blue:#005fcc;
  --link:#005fcc;
  --tint:#dce9ff;
  --info:#00428f;--info-bg:#dce9ff;
  --success:#16642e;--success-bg:#dcf3e3;
  --warning:#7a4d00;--warning-bg:#fff0c7;
  --danger:#a01d16;--danger-bg:#fde3e1;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0a0d12;
    --card:#141c26;
    --text:#f5f7fa;
    --muted:#b8c6d8;
    --border:#8191a7;
    --line:#3a4757;
    --link:#8ab8ff;
    --tint:#16345e;
    --info:#8ab8ff;--info-bg:#16345e;
    --success:#7dd99a;--success-bg:#143521;
    --warning:#ffc857;--warning-bg:#3a2c05;
    --danger:#ff8a80;--danger-bg:#3d1412;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{margin:0;color:var(--text);background:var(--bg);font:1rem/1.6 Roboto,"Segoe UI","Helvetica Neue",Arial,sans-serif}
img{max-width:100%;height:auto}
a{color:var(--link)}
:focus-visible{outline:3px solid var(--link);outline-offset:3px}
h1,h2{line-height:1.15}
h2{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.1rem);margin:0 0 1rem}
h3{font-size:1.05rem;line-height:1.3;margin:0 0 .4rem}
p{margin:0 0 1rem}
code{font:.92em ui-monospace,Consolas,"Roboto Mono",monospace;white-space:nowrap}
.wrap{max-width:70rem;margin-inline:auto;padding-inline:1.25rem}
section{padding-block:3.5rem}
.measure{max-width:46rem}
.note{color:var(--muted);font-size:.9rem}

/* Top bar */
.bar{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:3.5rem}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--text);text-decoration:none;font-weight:700}
.brand img{border-radius:7px}
.bar nav{display:flex;gap:1.25rem}
.bar nav a{color:var(--muted);text-decoration:none;font-size:.92rem}
.bar nav a:hover{color:var(--text)}
@media (max-width:30rem){.brand span{display:none}.bar nav{gap:1rem}}

/* Hero: the words beside the app itself */
.hero{padding-block:2.5rem 3.5rem}
.hero-grid{display:grid;gap:2.5rem;align-items:center}
@media (min-width:56rem){.hero-grid{grid-template-columns:1fr 19rem;gap:4rem}}
.mark{display:block;width:4.5rem;height:4.5rem;margin-bottom:1.25rem;border-radius:1rem;border:1px solid var(--line)}
.hero h1{font-size:clamp(2.3rem,1.6rem + 3vw,3.6rem);margin:0 0 1rem;letter-spacing:-.01em}
.lede{font-size:clamp(1.15rem,1rem + .7vw,1.4rem);line-height:1.45;margin:0 0 1.75rem;max-width:40rem}
.cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.25rem}
/* The app's buttons: a solid blue main action, an outlined second one. */
.btn{
  display:inline-flex;align-items:center;min-height:3rem;padding:.6rem 1.3rem;
  background:var(--blue);color:#fff;border:1px solid var(--blue);border-radius:12px;
  text-decoration:none;font-weight:600;
}
.btn:hover{filter:brightness(1.12)}
.btn.alt{background:var(--card);color:var(--text);border-color:var(--border)}
.btn.alt:hover{filter:none;background:var(--tint)}
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;color:var(--muted);font-size:.9rem}
.phone{margin:0 auto;width:min(19rem,78vw)}
.phone img{display:block;border:1px solid var(--line);border-radius:1.4rem}

/* The short path at the weld */
.band{background:var(--card);border-block:1px solid var(--line)}
.split{display:grid;gap:2.5rem}
@media (min-width:56rem){.split{grid-template-columns:1fr 22rem;gap:4rem;align-items:start}}
.steps{list-style:none;padding:0;margin:1.5rem 0 1.5rem;counter-reset:step}
.steps li{counter-increment:step;position:relative;padding:1rem 0 1rem 3.25rem;border-top:1px solid var(--line);color:var(--muted)}
.steps li strong{color:var(--text)}
.steps li::before{
  content:counter(step);position:absolute;left:0;top:1rem;width:2.1rem;height:2.1rem;
  display:grid;place-items:center;border-radius:50%;background:var(--blue);color:#fff;font-weight:700;
}

/* The arithmetic, on a card like the app's Result */
.calc{margin:0}
.calc .card{padding:1.25rem;background:var(--bg);border:1px solid var(--line);border-radius:16px}
.calc dl{margin:.75rem 0 1rem;display:grid;gap:.6rem}
.calc dl div{display:grid;gap:.1rem}
.calc dt{font-size:.85rem;color:var(--muted)}
.calc dd{margin:0;font-size:1.25rem;font-weight:600;font-variant-numeric:tabular-nums}
.calc .example{margin:0;padding:.75rem .9rem;border-radius:10px;background:var(--success-bg);color:var(--success);border:1px solid currentColor;font-size:.9rem;font-variant-numeric:tabular-nums}
.calc .example span{white-space:nowrap}
.calc figcaption{margin-top:.9rem;font-size:.85rem;color:var(--muted)}

/* Records, documents and data: cards that balance themselves into columns */
.cards{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(min(20rem,100%),1fr))}
.cards > li{padding:1.1rem 1.25rem;background:var(--card);border:1px solid var(--line);border-radius:16px}
.band .cards > li{background:var(--bg)}
.cards p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.5}
/* States as the app shows them: a word on its tone's colour */
.states{list-style:none;padding:0;margin:.8rem 0 0;display:flex;flex-wrap:wrap;gap:.35rem}
.states li{padding:.1rem .65rem;border-radius:999px;font-size:.8rem;font-weight:600;background:var(--info-bg);color:var(--info)}
.states .ok{background:var(--success-bg);color:var(--success)}
.states .warn{background:var(--warning-bg);color:var(--warning)}
.states .bad{background:var(--danger-bg);color:var(--danger)}
.after{margin-top:1.5rem}

/* Screenshots: a swipe row on phones, four to a row from tablet up */
.shots{
  list-style:none;margin:1.5rem 0 0;padding:0 0 .5rem;
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(12rem,68%);gap:1rem;
  overflow-x:auto;scroll-snap-type:x mandatory;
}
.shots li{scroll-snap-align:start}
@media (min-width:48rem){.shots{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);gap:1.75rem 1.25rem;overflow:visible}}
.shots figure{margin:0}
.shots a{display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .2s}
.shots a:hover{border-color:var(--link)}
.shots img{display:block;width:100%}
.shots figcaption{margin-top:.6rem;font-size:.88rem;line-height:1.45;color:var(--muted)}

/* Details */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr));gap:1px;margin:1.5rem 0 0;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.facts div{padding:1.1rem 1.25rem;background:var(--card)}
.facts dt{margin-bottom:.3rem;font-size:.85rem;font-weight:700;color:var(--link)}
.facts dd{margin:0}

.get{padding:clamp(1.5rem,4vw,2.5rem);background:var(--card);border:1px solid var(--line);border-left:5px solid var(--blue);border-radius:16px}
.get h2{margin-bottom:.5rem}
.get p:last-child{margin:0}
footer{padding-block:1.5rem 2.5rem;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted)}

/* Screenshot viewer */
.viewer{padding:0;border:0;background:none;max-width:94vw;max-height:94vh;overflow:visible}
.viewer::backdrop{background:rgb(10 13 18/.9)}
.viewer img{display:block;width:auto;height:auto;max-width:94vw;max-height:94vh;border-radius:14px;cursor:zoom-out}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}