/* Shared shell for the pages that are not the landing page: privacy, terms,
   support. Same tokens as index.html so the site reads as one thing. */

:root{
  /* index.html declares this; the stylesheet dressing every other page
     did not. Without it the browser does not know these pages have a dark
     theme and renders the native controls and the scrollbars in light
     chrome — on the seven pages that carry a <select>. */
  color-scheme: light dark;
  /* Every surface named here is navy, and every ink named here works on
     all of them — worst pair 7.15:1. The white card is NOT in this block
     on purpose: declaring a white surface beside a cream ink would put a
     pair in the palette that must never meet, and the next person to
     write `background: var(--surface)` would get invisible text. White
     lives in the card scope, which redefines the inks along with it. */
  --ground:#0A1628;
  --surface:#0F2038;
  --raised:#152740;
  --ink:#F4EFE3;
  --ink-2:#C9D2DF;
  --ink-3:#A8B4C6;
  --rule:#1E2C42;
  --rule-2:#2E3D55;
  --brand:#D4AF37;
  --brand-press:#EAC85E;
  --brand-ink:#0A1628;
  --brand-wash:#0F2038;
  --r:2px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#060A11;
    --surface:#111823;
    --raised:#0B1220;
    --ink:#F4EFE3;
    --ink-2:#C4CBD6;
    --ink-3:#BAC2CE;
    --rule:#1C2634;
    --rule-2:#2A3547;
    --brand:#D4AF37;
    --brand-press:#EAC85E;
    --brand-ink:#060A11;
    --brand-wash:#1A2331;
  }
}
:root[data-theme="dark"]{
    --ground:#060A11;
  --surface:#111823;
  --raised:#0B1220;
  --ink:#F4EFE3;
  --ink-2:#C4CBD6;
  --ink-3:#BAC2CE;
  --rule:#1C2634;
  --rule-2:#2A3547;
  --brand:#D4AF37;
  --brand-press:#EAC85E;
  --brand-ink:#060A11;
  --brand-wash:#1A2331;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:Newsreader,Georgia,"Times New Roman",serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
/* max() against the inset: on a notched phone held sideways the text
   cannot slide under the cutout, and on every screen without one the
   inset is zero and the clamp still decides. */
.wrap{max-width:1080px;margin:0 auto;
  padding-inline:max(clamp(18px,4vw,40px),env(safe-area-inset-left),env(safe-area-inset-right))}

/* The call to action jumps to #calculator, which arrived flush against
   the top edge with its own label out of frame. */
:target{scroll-margin-top:24px}
.col{max-width:66ch}

/* Tracking is size-specific. One value across three sizes is wrong at two
   of them: at 52px the letters read loose, at 19px the same value reads
   cramped. These follow the curve the app's type scale already uses. */
h1,h2,h3{font-family:Newsreader,Georgia,serif;font-weight:500;margin:0;text-wrap:balance}
h1{font-size:clamp(30px,5.4vw,52px);line-height:1.08;letter-spacing:-.025em}
h2{font-size:clamp(22px,2.8vw,28px);line-height:1.2;margin-top:44px;letter-spacing:-.014em}
h3{font-size:19px;margin-top:28px;letter-spacing:-.008em}
p{margin:14px 0;text-wrap:pretty}
a{color:var(--brand)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--r)}
strong{font-weight:600}

ul{margin:14px 0;padding-left:22px}
li{margin-bottom:9px;color:var(--ink-2)}
li::marker{color:var(--ink-3)}

/* `--surface` is white now, and a white strip across the top of a navy
   page reads as a different site above the one below it. The nav is the
   navy, lifted one step. */
nav{border-bottom:1px solid var(--rule);background:var(--raised)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:16px}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:17px;color:var(--ink);text-decoration:none}
/* The wordmark is the word. A letter in a tinted square is the same
   decoration the landing page rules forbid, wearing a different name. */
/* Padded to a real target. Measured at 25 points tall, which is a miss on
   a phone — the same fix the landing page needed for its footer links. */
.wordmark{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700;
  font-size:15px;letter-spacing:.14em;color:var(--ink);text-decoration:none;
  display:inline-block;padding:12px 0;min-height:44px}
nav a.back{font-size:15px;text-decoration:none;color:var(--ink-2)}
nav a.back:hover{color:var(--brand)}

/* The country switcher, in the nav rather than at the foot of the page.
   Somebody who lands on the wrong country should not have to read a page in
   a language they did not choose before they can leave it.

   A details element because it needs no script: it works before
   calculator.js has loaded, and it works if it never does. */
nav .switch{position:relative}
/* 48, not 44. The published floor is 44 and this project uses 48 — the
   first version of this rule shipped a 47-point target, which is exactly the
   kind of near-miss the standard exists to catch. */
nav .switch summary{list-style:none;cursor:pointer;font-size:15px;
  color:var(--ink-2);padding:14px 0;min-height:48px;display:flex;
  align-items:center;gap:7px}
nav .switch summary::-webkit-details-marker{display:none}
/* The caret is drawn rather than typed, so it cannot arrive as a glyph the
   font does not have. */
nav .switch summary::after{content:"";width:7px;height:7px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px)}
nav .switch[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
nav .switch summary:hover{color:var(--brand)}
.switch-menu{position:absolute;right:0;top:100%;z-index:20;
  background:var(--surface);border:1px solid var(--rule);border-radius:2px;
  padding:6px 0;min-width:190px;
  box-shadow:0 8px 24px rgba(0,0,0,.14)}
/* Each row is a real target rather than a line of text with a link on it. */
.switch-menu a{display:block;padding:13px 16px;min-height:48px;
  font-size:15px;color:var(--ink-2);text-decoration:none;
  display:flex;align-items:center}
.switch-menu a:hover{background:var(--raised);color:var(--brand)}

header{padding:clamp(40px,6vw,64px) 0 8px}
/* The country and the year, set in the margin the way a ledger sets a
   line reference: it says where you are rather than decorating. */
.entry-no{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px;
  letter-spacing:.08em;color:var(--ink-3);margin:0 0 14px}
/* A label for a figure, which is what this always was. */
.field-label{font-size:11px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--brand);display:block;margin:0 0 6px}
.updated{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px;
  color:var(--ink-3);margin-top:18px;
}

main{padding-bottom:80px}

.panel{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:22px 26px;margin:26px 0;
}
.panel p:first-child{margin-top:0}
.panel p:last-child{margin-bottom:0}
.panel.loud{background:var(--brand-wash);border-color:var(--brand)}

dl{margin:18px 0;display:grid;gap:16px}
dt{font-weight:600;font-size:16px}
dd{margin:4px 0 0;color:var(--ink-2);font-size:16px}

table{border-collapse:collapse;width:100%;font-size:15.5px;margin:20px 0}
th{
  text-align:left;padding:11px 14px;border-bottom:1px solid var(--rule);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
td{padding:11px 14px;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink-2)}
.table-scroll{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface)}
.table-scroll table{margin:0}
.table-scroll tbody tr:last-child td{border-bottom:none}

footer{border-top:1px solid var(--rule);padding:28px 0 48px;font-size:14px;color:var(--ink-3)}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between}
footer a{color:var(--ink-3)}

/* Touch targets.

   An inline link is exactly as tall as its line — about eighteen points,
   which is less than half of what a finger reliably hits. These two sets are
   the ones a visitor on a phone is most likely to reach for: the row of
   countries, and the footer. Inline-block plus vertical padding gives them a
   real hit area without moving anything, because the padding overlaps the
   line box rather than adding to it. */
/* Stated as a height rather than computed from padding. The arithmetic was
   correct when it was written — twelve points either side of a line box — and
   then the line height changed underneath it and these came out at 44 and 47.
   A floor that is declared cannot drift; one that is implied always can. */
.links a,
footer a{display:inline-flex;align-items:center;min-height:48px;
  padding:0 5px;margin:-13px 0}
.links{line-height:1.2}

/* The wordmark and the back link are the other two a thumb reaches for. */
nav .brand,nav .back{padding:11px 0}

/* Utilities that replace inline style attributes.

   A `style="..."` in markup is governed by style-src, and this site's policy
   deliberately has no 'unsafe-inline' — the strict policy is the
   machine-readable half of the privacy promise. So on the deployed site every
   one of those attributes was simply dropped, and the lead paragraph on each
   country page lost its size, colour and measure. Localhost never showed it,
   because localhost sends no policy. */
.is-disabled{opacity:.55;cursor:not-allowed}
.muted{color:var(--ink-2)}
.fine{font-size:14px;color:var(--ink-3)}
.lead{font-size:19px;color:var(--ink-2);max-width:56ch}
.lead-narrow{font-size:19px;color:var(--ink-2);max-width:52ch}
.tight{margin-bottom:0}
.full{width:100%}
.centered{text-align:center;margin-inline:auto;align-items:center}
.spaced{margin-top:14px}
.links{font-size:17px}

/* Off screen until focused, which is the only moment it is wanted.
   Only the landing page had one. Every generated page puts a nav with a
   six-country switcher in front of the content, so a keyboard had to walk
   the whole of it again on each page. */
.skip{position:absolute;left:-9999px;background:var(--surface);color:var(--ink);
  padding:12px 16px;border:1px solid var(--rule-2);border-radius:var(--r);
  text-decoration:none}
.skip:focus{left:16px;top:16px;z-index:30}

/* Flags in the country lists.

   The hairline is not decoration: the Dutch and American flags carry white
   at their edges and dissolve into a pale surface without it, and the
   British and Australian ones carry navy that vanishes into this one. It
   is an inset outline rather than a border, so it costs no layout, and not
   a shadow because this project bans those outright — the design check
   said so the moment the first version used one. No corner radius: a flag
   has square corners, and 1px would have been a second radius in a
   stylesheet that allows exactly one.

   `inline-flex` on the links already centres these; the margin is the only
   thing separating the mark from the name. */
.country-flag{flex:none;display:inline-block;vertical-align:-2px;margin-right:8px;
  outline:1px solid var(--rule);outline-offset:-1px}
nav .switch summary .country-flag{vertical-align:-3px}

/* Text that only a screen reader needs.

   The calculator rewrites its answer on every keystroke and said nothing
   about it — somebody typing their income heard silence while the figure
   changed underneath. A polite live region waits for a pause and then reads
   one sentence, rather than the whole result block on every character. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Long words.

   "Krankenversicherung" is one word and is wider than a 320-point screen at
   heading size, so it painted straight through the right edge of the German
   landing page. Every page declares its language, so a browser can hyphenate
   it properly — "Kranken-versicherung" — and the break rule catches the
   browsers that have no dictionary for that language. English pages are
   unaffected because English words are short enough to fit. */
h1,h2,h3,p,li{overflow-wrap:break-word;hyphens:auto}

/* Feedback on the press.

   This stylesheet had no `:active` rule at all and no transitions. The only
   feedback anywhere was `:hover`, and a phone has no hover — so a reader
   tapping the button on a country page got nothing back until the page
   moved, which reads as a page that has stopped working.

   Pressing darkens; it does not fade. A faded control is the universal sign
   for "disabled", which is the opposite of what a finger on a control means.
   The text goes to full `--ink` as the wash appears, so the label is more
   legible under the thumb rather than less: 12.46:1 light, 11.47:1 dark,
   both above the 7:1 this project holds. */
a:active,
nav .switch summary:active,
.work summary:active{background:var(--rule);color:var(--ink);border-radius:var(--r)}

/* 90ms is short enough that the wash is there before the finger registers
   it has arrived, and long enough that releasing does not snap. */
a,summary,.btn{transition:background-color 90ms ease-out,color 90ms ease-out,border-color 90ms ease-out}

/* `manipulation` drops the wait a browser keeps in case a tap is the
   first half of a double-tap zoom. The platform's grey tap box goes with
   it — deliberately, and only because the `:active` wash above already
   answers the finger. Removing it without a replacement is the bug that
   rule is written against. */
a,button,summary,select,input,.btn{touch-action:manipulation;
  -webkit-tap-highlight-color:transparent}

/* More contrast, when it is asked for: near-solid surfaces with a border that
   is actually visible rather than a hairline in the rule colour. */
@media (prefers-contrast:more){
  .panel,.calc,.switch-menu,.work{background:var(--surface);border-color:var(--ink-2)}
  a{text-decoration-thickness:2px}
}

/* Reduced motion takes the 90ms away and leaves the wash, which is the point:
   a gentler equivalent, not the absence of feedback. */
/* The white surfaces, and everything inside them changing side.

   Same token names the page already uses, given the values that belong on
   white — so every rule written against them keeps working and a surface
   changes side by joining this selector. `--raised` is here because the
   calculator's input wells are painted with it and would otherwise be navy
   holes punched through a white card. */
.calc,
.panel,
.table-scroll,
.switch-menu{
  --surface:#FFFFFF;
  --raised:#EAEDF3;
  --ink:#0E1620;
  --ink-2:#2C3644;
  --ink-3:#434D5C;
  --rule:#D3D8E1;
  --rule-2:#B5BDCA;
  --brand:#16304F;
  --brand-press:#0E2038;
  --brand-ink:#FFFFFF;
  /* The cream the store screenshots already use behind their result line. */
  --brand-wash:#F4EFE3;
  color:var(--ink);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .calc,
  :root:not([data-theme="light"]) .panel,
  :root:not([data-theme="light"]) .table-scroll,
  :root:not([data-theme="light"]) .switch-menu{
    --surface:#111823;
    --raised:#1A2331;
    --ink:#F4EFE3;
    --ink-2:#C4CBD6;
    --ink-3:#BAC2CE;
    --rule:#1C2634;
    --rule-2:#2A3547;
    --brand:#D4AF37;
    --brand-press:#EAC85E;
    --brand-ink:#060A11;
    --brand-wash:#1A2331;
  }
}

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