/* bakken.run tool pages. One stylesheet for every page; colours are the app's
   palette (mobile/theme/appPalette.ts), type is the app's Switzer. */
@font-face { font-family: "Switzer"; src: url("fonts/switzer-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --midnight: #0D1B2A; --body: #3A4655; --muted: #5A6473; --grey: #8A93A0;
  --nordic: #204A73; --sky: #E8F1F7; --white: #FFFFFF; --paper: #F6F7F8; --surface: #F0F2F6;
  --line-strong: #C9D4DF; --line: #E2E8EF; --line-faint: #F3F5F8;
  --threshold: #2C4A82; --threshold-2: #4569B8; --variation: #1A80B6; --easy: #2B8257; --easy-2: #44C182;
  --easy-tint: #EBF5EC; --x: #825FCE; --long: #E08A4B; --marathon: #7E3554; --yellow: #E9A620; --yellow-2: #F5C43D;
  --note: #8A6816; --note-tint: #FFF5D8; --red: #9A3B3B; --red-2: #E06A5F; --red-tint: #FBEAEA;
  --font: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --card-shadow: 0 1px 2px rgba(13,27,42,.05), 0 8px 24px rgba(32,74,115,.06);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--body); font: 400 16px/1.5 var(--font); font-variant-numeric: tabular-nums; }
a { color: var(--nordic); }
a:hover { color: var(--midnight); }
:focus-visible { outline: 2px solid var(--nordic); outline-offset: 2px; }
h1, h2, h3 { color: var(--midnight); margin: 0; text-wrap: balance; letter-spacing: -.02em; }
h1 { font-size: clamp(32px, 6vw, 44px); line-height: 1.05; font-weight: 700; }
h2 { font-size: clamp(22px, 4vw, 28px); line-height: 1.15; font-weight: 700; }
p { margin: 0; }
.kicker { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.wrap { max-width: 1160px; margin: 0 auto; padding: 40px max(16px, env(safe-area-inset-right, 0px)) 64px max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 48px; }
.row { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.card { background: var(--white); border-radius: 20px; padding: 28px; box-shadow: var(--card-shadow); min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.card.plain { box-shadow: none; padding: 22px; gap: 10px; }
.stack { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lede { font-size: 17px; max-width: 60ch; }
.small { font-size: 13px; color: var(--muted); }
.label { font-size: 13px; font-weight: 600; color: var(--midnight); }

/* Inputs and switches */
input.field { font: inherit; font-size: 24px; font-weight: 600; color: var(--midnight); border: 1px solid var(--line-strong); border-radius: 14px; padding: 11px 14px; background: var(--paper); width: 100%; min-width: 0; }
input.field.sm { font-size: 18px; padding: 8px 12px; border-radius: 12px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--surface); border-radius: 999px; padding: 4px; align-self: flex-start; }
.seg button { font: inherit; font-size: 14px; font-weight: 600; border: 0; border-radius: 999px; padding: 9px 14px; cursor: pointer; background: transparent; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--midnight); color: var(--white); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { font: inherit; font-size: 14px; font-weight: 600; border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; cursor: pointer; background: var(--white); color: var(--body); }
.chips button[aria-pressed="true"] { border-color: var(--threshold); background: var(--sky); color: var(--threshold); }
.example { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--note); background: var(--note-tint); border-radius: 6px; padding: 2px 6px; vertical-align: 2px; }
.note { font-size: 14px; color: var(--note); background: var(--note-tint); border-radius: 12px; padding: 12px 14px; }

/* Figures */
.big { font-size: clamp(52px, 10vw, 72px); line-height: .95; font-weight: 700; letter-spacing: -.03em; color: var(--threshold); }
.unit { font-size: 15px; font-weight: 500; color: var(--muted); }
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--line); border-radius: 16px; overflow: hidden; }
.figs > div { background: var(--paper); padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.figs .k { font-size: 12px; color: var(--muted); }
.figs .v { font-size: 24px; font-weight: 700; color: var(--midnight); }
.vdot { font-size: 76px; line-height: .9; color: var(--midnight); font-weight: 700; letter-spacing: -.03em; }

/* The Golden Zone scale */
.band { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line-faint); }
.band .top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.band .len { font-size: 17px; font-weight: 600; color: var(--midnight); }
.band .name { font-size: 12px; color: var(--muted); display: block; }
.band .range { font-size: 24px; font-weight: 700; color: var(--threshold); white-space: nowrap; }
.track { position: relative; height: 10px; border-radius: 999px; background: var(--surface); }
.track .fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--threshold), var(--threshold-2)); }
.track .t { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--grey); border-radius: 2px; }
.ruler { position: relative; height: 34px; }
.ruler .bar { position: absolute; left: 0; right: 0; top: 6px; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--sky), #BCD2E9 45%, var(--threshold-2)); }
.ruler .dot { position: absolute; top: 0; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--midnight); border: 3px solid var(--white); box-shadow: 0 1px 4px rgba(13,27,42,.35); }
.ruler .ticks { position: absolute; left: 0; right: 0; top: 18px; display: flex; justify-content: space-between; font-size: 11px; color: var(--grey); }
.easy-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: var(--easy-tint); border-radius: 16px; padding: 16px 18px; }
.easy-row .v { font-size: 24px; font-weight: 700; color: var(--easy); white-space: nowrap; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.bars > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.bars .b { width: 100%; max-width: 44px; border-radius: 8px 8px 3px 3px; background: #BCD2E9; }
.bars .b.on { background: var(--threshold); }
.bars .p { font-size: 12px; font-weight: 600; color: var(--midnight); }
.bars .l { font-size: 11px; color: var(--muted); }

/* Week */
.days { display: flex; flex-wrap: wrap; gap: 10px; }
.day { flex: 1 1 140px; min-width: 0; background: var(--white); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-height: 200px; }
.day .d { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
.day .dash { display: block; width: 28px; height: 4px; border-radius: 4px; }
.day .w { font-size: 17px; font-weight: 700; color: var(--midnight); line-height: 1.25; }
.day .x { font-size: 13px; color: var(--muted); line-height: 1.4; }
.day .pm { font-size: 13px; font-weight: 600; color: var(--midnight); border-top: 1px solid var(--line); padding-top: 8px; }
.day .p { margin-top: auto; font-size: 14px; font-weight: 700; white-space: nowrap; }
.rules { display: flex; flex-wrap: wrap; gap: 12px; }
.rules > div { flex: 1 1 240px; }

/* Traffic light */
.light-panel { display: flex; flex-wrap: wrap; gap: 24px; background: var(--midnight); border-radius: 24px; padding: 28px; color: #C6CED8; }
.lamps { display: flex; flex-direction: column; gap: 10px; background: #16202B; border-radius: 999px; padding: 12px; align-self: center; }
.lamps span { display: block; width: 38px; height: 38px; border-radius: 50%; background: #26313D; }
.strip { display: flex; gap: 10px; }
.strip > div { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; }
.strip .s { height: 6px; border-radius: 6px; background: #26313D; }
.light-panel .chips button { background: transparent; color: #C6CED8; border-color: #3A4757; font-size: 13px; padding: 7px 12px; }
.light-panel .chips button[aria-pressed="true"] { background: var(--white); color: var(--midnight); border-color: var(--white); }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opts button { font: inherit; font-size: 13px; font-weight: 600; border-radius: 999px; padding: 8px 12px; cursor: pointer; background: var(--white); color: var(--body); border: 1px solid var(--line); }
.opts button[aria-pressed="true"] { background: var(--midnight); color: var(--white); border-color: var(--midnight); }
.q { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line-faint); padding-top: 12px; }
.q .h { display: flex; justify-content: space-between; gap: 8px; }
.q .wt { font-size: 11px; font-weight: 600; color: var(--grey); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.badge { flex: 0 0 64px; align-self: flex-end; text-align: center; font-size: 14px; font-weight: 700; border-radius: 10px; padding: 9px 0; background: var(--surface); color: var(--grey); }

/* Shared blocks: header, email, product, footer */
.topbar { border-bottom: 1px solid var(--line); background: var(--white); }
.topbar .in { max-width: 1160px; margin: 0 auto; padding: 12px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.mark { text-decoration: none; display: flex; align-items: baseline; gap: 10px; }
.mark b { font-weight: 700; font-size: 24px; letter-spacing: -.55px; color: var(--midnight); }
.mark b i { font-style: normal; color: var(--nordic); }
.mark span { font-size: 13px; color: var(--muted); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; font-size: 15px; font-weight: 500; }
.nav a { text-decoration: none; color: var(--body); }
.nav a.app { color: var(--white); background: var(--midnight); font-weight: 600; border-radius: 999px; padding: 9px 16px; }
.mail { display: flex; flex-wrap: wrap; gap: 32px; background: var(--midnight); border-radius: 24px; padding: 36px; color: #C6CED8; }
.mail h2 { color: var(--white); font-size: clamp(26px, 4vw, 34px); }
.mail form { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }
.mail input[type=email] { flex: 1 1 240px; min-width: 0; font: inherit; font-size: 17px; color: var(--midnight); border: 0; border-radius: 999px; padding: 15px 20px; background: var(--white); }
.mail button { font: inherit; font-weight: 700; font-size: 16px; color: var(--midnight); background: #9CC6DE; border: 0; border-radius: 999px; padding: 15px 24px; cursor: pointer; }
.mail button[disabled] { opacity: .6; cursor: default; }
.mail .fine { font-size: 13px; line-height: 1.5; color: #98A3B1; max-width: 60ch; }
.mail .fine a { color: #9CC6DE; }
.mail .msg { font-size: 15px; font-weight: 600; color: var(--white); }
.mail .msg.err { color: #F2B8B0; }
.mail .opts { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 60ch; }
.mail .opts legend { padding: 0 0 6px; font-size: 14px; color: #C6CED8; }
.mail .opt { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--white); cursor: pointer; }
.mail .opt input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #9CC6DE; }
.series { flex: 1 1 300px; min-width: 0; border-left: 1px solid #26313D; padding-left: 28px; }
.series div { display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid #1E2C3B; }
.series .w { flex: 0 0 52px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #9CC6DE; padding-top: 2px; }
.series b { display: block; font-size: 15px; font-weight: 600; color: var(--white); }
.series span { font-size: 13px; color: #98A3B1; line-height: 1.4; }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.product { display: flex; flex-wrap: wrap; gap: 32px; background: var(--white); border-radius: 24px; padding: 36px; box-shadow: 0 1px 2px rgba(13,27,42,.05), 0 8px 24px rgba(126,53,84,.08); }
.logo100 { text-decoration: none; display: flex; align-items: center; gap: 10px; align-self: flex-start; }
.logo100 span:first-child { width: 32px; height: 32px; border-radius: 8px; background: #0C4A6E; color: var(--white); display: flex; align-items: center; justify-content: center; font-family: Georgia, serif; font-style: italic; font-weight: 700; font-size: 17px; }
.logo100 span:last-child { font-weight: 700; font-size: 19px; color: #0C4A6E; }
.plans span { font-size: 14px; font-weight: 600; border-radius: 999px; padding: 8px 14px; background: var(--paper); color: var(--muted); }
.plans span.on { background: var(--marathon); color: var(--white); }
.btn { display: inline-block; text-decoration: none; font-weight: 700; font-size: 16px; padding: 15px 24px; border-radius: 999px; }
.btn.red { background: var(--marathon); color: var(--white); }
.btn.dark { background: var(--midnight); color: var(--white); }
.btn.ghost { background: var(--white); color: var(--midnight); border: 1px solid var(--line-strong); font-weight: 600; }
.quote { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 18px; background: var(--paper); border-radius: 18px; padding: 26px; }
.quote q { font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--midnight); quotes: "\201C" "\201D"; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line-strong); padding-top: 24px; font-size: 13px; color: var(--muted); }
.foot nav { display: flex; flex-wrap: wrap; gap: 18px; }
.foot nav a { text-decoration: none; color: var(--body); }
@media (max-width: 640px) {
  .card { padding: 22px; }
  .mail, .product { padding: 26px; }
  .series { border-left: 0; padding-left: 0; }
}
@media (prefers-reduced-motion: no-preference) { .track .fill, .ruler .dot { transition: left .2s, width .2s; } }

/* The "?" in a card corner, and the glass it opens */
button.info { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--white); color: var(--muted); font: 600 13px var(--font); cursor: pointer; padding: 0; line-height: 24px; text-align: center; }
button.info:hover { color: var(--midnight); border-color: var(--midnight); }
.mail button.info, .light-panel button.info { background: transparent; color: #9CC6DE; border-color: #3A4757; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
dialog.glass { max-width: min(440px, calc(100vw - 32px)); border: 0; border-radius: 20px; padding: 26px; background: rgba(255,255,255,.96); box-shadow: 0 20px 60px rgba(13,27,42,.25); color: var(--body); font: 400 16px/1.55 var(--font); }
dialog.glass::backdrop { background: rgba(13,27,42,.35); backdrop-filter: blur(6px); }
dialog.glass h2 { font-size: 20px; margin-bottom: 10px; }
dialog.glass p { margin-bottom: 18px; }
dialog.glass .btn { border: 0; cursor: pointer; font-size: 15px; padding: 11px 20px; }
ol.series { list-style: none; margin: 0; padding: 0 0 0 28px; flex: 1 1 260px; min-width: 0; border-left: 1px solid #26313D; display: flex; flex-direction: column; }
ol.series li { padding: 10px 0; border-bottom: 1px solid #1E2C3B; font-size: 15px; font-weight: 600; color: var(--white); }
@media (max-width: 640px) { ol.series { border-left: 0; padding-left: 0; } }
.row-link { text-decoration: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 20px; padding: 16px 0; border-bottom: 1px solid var(--line-faint); }
.row-link b { font-size: 16px; color: var(--midnight); }

[hidden] { display: none !important; }