/* ═══════════════════════════════════════════════════════════════════════════
   Appearance — themes, density and text size
   ---------------------------------------------------------------------------
   Every screen takes its colours from the tokens in base.css, so a theme is
   only a new set of values for them. Chosen under Appearance (the palette
   button beside Sign out), remembered by the browser, and applied by
   /js/appearance.js before the page draws. Botswana Blue, the default, is
   base.css itself and needs nothing here.

   Every theme below sets EVERY colour token of base.css (appearance.test.js
   checks it), so no theme silently picks up a Botswana Blue value it never
   chose. Status colours (warning, stop, information) keep their meaning in
   every theme; only their shade changes where the ground does.

   The sidebar is light in Botswana Blue and dark in every theme here; its
   rules read only the --chrome-* tokens, so each theme says how its own
   sidebar hovers, divides and marks the current page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Green — the earlier PayBW look, exactly as it was when it was the default. */
:root[data-theme="green"]{
  --paper:#F4F7F5; --surface:#FFFFFF; --surface-2:#EDF3EF; --surface-3:#F7FAF8;
  --rule:#D7E0DA; --rule-strong:#BFCCC4;
  --ink:#13211C; --ink-2:#33473F; --muted-ink:#5B6E64; --faint-ink:#93A9A0; --on-primary:#FFFFFF;
  --primary:#0B6B57; --primary-dark:#085243; --primary-2:#1E7757; --primary-deep:#17392C;
  --primary-wash:#E2F0EB; --primary-wash-2:#EDF9F2; --primary-line:#CBE5DB;
  --mint:#34C792; --mint-line:#94E3C5;
  --seal:#8A5A1E; --seal-wash:#F9EFE2; --weave-strand:#C98A2B;
  --ok:#0B6B57; --ok-wash:#E2F0EB; --ok-strong:#16844A; --ok-wash-2:#E6F6EC; --ok-line:#CBE5DB;
  --warn:#9A6206; --warn-wash:#FDF2DE; --warn-line:#F0D49D; --warn-bright:#E89A22;
  --stop:#A81E13; --stop-2:#C3464B; --stop-wash:#FCE8E6; --stop-wash-2:#FFF5F5; --stop-line:#EFC5C9;
  --info:#0E7D8D; --info-wash:#E1F7F7; --info-line:#BDE4ED;
  --violet:#6E47B5; --violet-wash:#F3EFFB; --violet-line:#D7C9EE;
  --chrome:#0F2A21; --chrome-2:#183A2D; --chrome-3:#264E3E; --chrome-ink:#E8F2EE; --chrome-muted:#9FB3A9;
  --chrome-line:rgba(255,255,255,.1); --chrome-hover:rgba(255,255,255,.08); --chrome-active:#0B6B57; --chrome-active-ink:#E8F2EE; --chrome-section:#9FB3A9;
  --chrome-accent:#34C792; --chrome-sub-ink:#94E3C5; --chrome-foot:rgba(0,0,0,.08); --chrome-active-shadow:0 4px 12px rgba(0,0,0,.16);
  --focus-color:rgba(11,107,87,.28); --focus-ring:0 0 0 3px rgba(11,107,87,.28); --primary-shadow:0 4px 10px rgba(11,107,87,.18);
  --shadow-1:0 1px 2px rgba(19,33,28,.06); --shadow-2:0 4px 14px rgba(19,33,28,.10); --shadow-3:0 18px 48px rgba(19,33,28,.20);
}

/* Ocean — deep blue, for offices that want a cooler, bank-like look. */
:root[data-theme="ocean"]{
  --paper:#F3F6F9; --surface:#FFFFFF; --surface-2:#EAF0F6; --surface-3:#F6F9FB;
  --rule:#D5DEE7; --rule-strong:#BCC9D6;
  --ink:#121C27; --ink-2:#2F4152; --muted-ink:#586A7C; --faint-ink:#93A3B3; --on-primary:#FFFFFF;
  --primary:#1D5FA8; --primary-dark:#164A84; --primary-2:#2A6DB5; --primary-deep:#16304F;
  --primary-wash:#E3EDF8; --primary-wash-2:#EEF4FB; --primary-line:#C7D9EE;
  --mint:#3D9BE0; --mint-line:#A9CDEE; --ok:#1B7F5E; --ok-wash:#E1F3EC; --ok-strong:#1B7F5E; --ok-wash-2:#E4F4EC; --ok-line:#BFE3D2;
  --seal:#8A5A1E; --seal-wash:#F9EFE2; --weave-strand:#C98A2B;
  --warn:#9A6206; --warn-wash:#FDF2DE; --warn-line:#F0D49D; --warn-bright:#E89A22;
  --stop:#A81E13; --stop-2:#C3464B; --stop-wash:#FCE8E6; --stop-wash-2:#FFF5F5; --stop-line:#EFC5C9;
  --info:#0E7D8D; --info-wash:#E1F7F7; --info-line:#BDE4ED;
  --violet:#6E47B5; --violet-wash:#F3EFFB; --violet-line:#D7C9EE;
  --chrome:#0F1F33; --chrome-2:#18304C; --chrome-3:#274566; --chrome-ink:#E6EEF7; --chrome-muted:#9DB0C5;
  --chrome-line:rgba(255,255,255,.1); --chrome-hover:rgba(255,255,255,.08); --chrome-active:#1D5FA8; --chrome-active-ink:#E6EEF7; --chrome-section:#9DB0C5;
  --chrome-accent:#3D9BE0; --chrome-sub-ink:#A9CDEE; --chrome-foot:rgba(0,0,0,.08); --chrome-active-shadow:0 4px 12px rgba(0,0,0,.16);
  --focus-color:rgba(29,95,168,.28); --focus-ring:0 0 0 3px rgba(29,95,168,.28); --primary-shadow:0 4px 10px rgba(29,95,168,.18);
  --shadow-1:0 1px 2px rgba(18,28,39,.06); --shadow-2:0 4px 14px rgba(18,28,39,.10); --shadow-3:0 18px 48px rgba(18,28,39,.20);
}

/* Kalahari — warm sand and deep ochre. */
:root[data-theme="kalahari"]{
  --paper:#F7F4EF; --surface:#FFFFFF; --surface-2:#F1EBE2; --surface-3:#FAF7F2;
  --rule:#E2D9CC; --rule-strong:#CFC2B0;
  --ink:#231B12; --ink-2:#44372A; --muted-ink:#6D5F50; --faint-ink:#A79886; --on-primary:#FFFFFF;
  --primary:#8C4A12; --primary-dark:#6F3A0D; --primary-2:#9A5A20; --primary-deep:#3A2513;
  --primary-wash:#F5E8D9; --primary-wash-2:#FAF1E6; --primary-line:#E8D2B8;
  --mint:#C98A2E; --mint-line:#E9C99A; --ok:#3F7A3A; --ok-wash:#E7F1E4; --ok-strong:#3F7A3A; --ok-wash-2:#E9F2E6; --ok-line:#CFE3CB;
  --seal:#6E4C1C; --seal-wash:#F3E9D8; --weave-strand:#B57A22;
  --warn:#9A6206; --warn-wash:#FDF2DE; --warn-line:#F0D49D; --warn-bright:#E89A22;
  --stop:#A81E13; --stop-2:#C3464B; --stop-wash:#FCE8E6; --stop-wash-2:#FFF5F5; --stop-line:#EFC5C9;
  --info:#0E7D8D; --info-wash:#E1F7F7; --info-line:#BDE4ED;
  --violet:#6E47B5; --violet-wash:#F3EFFB; --violet-line:#D7C9EE;
  --chrome:#2A1D12; --chrome-2:#3B2918; --chrome-3:#553B22; --chrome-ink:#F3ECE3; --chrome-muted:#BBA88F;
  --chrome-line:rgba(255,255,255,.1); --chrome-hover:rgba(255,255,255,.08); --chrome-active:#8C4A12; --chrome-active-ink:#F3ECE3; --chrome-section:#BBA88F;
  --chrome-accent:#C98A2E; --chrome-sub-ink:#E9C99A; --chrome-foot:rgba(0,0,0,.08); --chrome-active-shadow:0 4px 12px rgba(0,0,0,.16);
  --focus-color:rgba(140,74,18,.28); --focus-ring:0 0 0 3px rgba(140,74,18,.28); --primary-shadow:0 4px 10px rgba(140,74,18,.18);
  --shadow-1:0 1px 2px rgba(35,27,18,.07); --shadow-2:0 4px 14px rgba(35,27,18,.11); --shadow-3:0 18px 48px rgba(35,27,18,.22);
}

/* Graphite — neutral greys with a teal accent; the quietest option. */
:root[data-theme="graphite"]{
  --paper:#F4F5F6; --surface:#FFFFFF; --surface-2:#ECEEF0; --surface-3:#F7F8F9;
  --rule:#D9DDE1; --rule-strong:#C3C9CF;
  --ink:#16191C; --ink-2:#363C42; --muted-ink:#5F6770; --faint-ink:#9AA2AA; --on-primary:#FFFFFF;
  --primary:#0F6E73; --primary-dark:#0B5559; --primary-2:#1A7C82; --primary-deep:#1B3033;
  --primary-wash:#E1EFF0; --primary-wash-2:#EEF6F6; --primary-line:#C4DEE0;
  --mint:#2FB3A9; --mint-line:#9ED8D3;
  --seal:#8A5A1E; --seal-wash:#F9EFE2; --weave-strand:#C98A2B;
  --ok:#0B6B57; --ok-wash:#E2F0EB; --ok-strong:#16844A; --ok-wash-2:#E6F6EC; --ok-line:#CBE5DB;
  --warn:#9A6206; --warn-wash:#FDF2DE; --warn-line:#F0D49D; --warn-bright:#E89A22;
  --stop:#A81E13; --stop-2:#C3464B; --stop-wash:#FCE8E6; --stop-wash-2:#FFF5F5; --stop-line:#EFC5C9;
  --info:#0E7D8D; --info-wash:#E1F7F7; --info-line:#BDE4ED;
  --violet:#6E47B5; --violet-wash:#F3EFFB; --violet-line:#D7C9EE;
  --chrome:#1B1F23; --chrome-2:#272C31; --chrome-3:#3A4148; --chrome-ink:#EEF0F2; --chrome-muted:#A3ABB3;
  --chrome-line:rgba(255,255,255,.1); --chrome-hover:rgba(255,255,255,.08); --chrome-active:#0F6E73; --chrome-active-ink:#EEF0F2; --chrome-section:#A3ABB3;
  --chrome-accent:#2FB3A9; --chrome-sub-ink:#9ED8D3; --chrome-foot:rgba(0,0,0,.08); --chrome-active-shadow:0 4px 12px rgba(0,0,0,.16);
  --focus-color:rgba(15,110,115,.28); --focus-ring:0 0 0 3px rgba(15,110,115,.28); --primary-shadow:0 4px 10px rgba(15,110,115,.18);
  --shadow-1:0 1px 2px rgba(19,33,28,.06); --shadow-2:0 4px 14px rgba(19,33,28,.10); --shadow-3:0 18px 48px rgba(19,33,28,.20);
}

/* Dark — for long evenings and dim offices. Buttons carry dark text on a
   bright green, so every label keeps its contrast. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0E1613; --surface:#15201B; --surface-2:#1B2823; --surface-3:#18241F;
  --rule:#273831; --rule-strong:#36493F;
  --ink:#E4EDE8; --ink-2:#C3D1CA; --muted-ink:#93A79D; --faint-ink:#6E8279; --on-primary:#07130F;
  --primary:#43C39A; --primary-dark:#2FA57F; --primary-2:#5FD1AB; --primary-deep:#BFE9D8;
  --primary-wash:#173A2F; --primary-wash-2:#16302A; --primary-line:#235446;
  --mint:#4DD9A6; --mint-line:#2E6B57;
  --ok:#43C39A; --ok-wash:#173A2F; --ok-strong:#5CCB8A; --ok-wash-2:#183626; --ok-line:#235446;
  --seal:#D9A45F; --seal-wash:#3A2A16; --weave-strand:#D9A45F;
  --warn:#E3AE4A; --warn-wash:#3A2C12; --warn-line:#6B5220; --warn-bright:#F0B04A;
  --stop:#F07C72; --stop-2:#F28B8F; --stop-wash:#3D1C1B; --stop-wash-2:#33191A; --stop-line:#6E3334;
  --info:#5CC9D6; --info-wash:#123436; --info-line:#245A60;
  --violet:#B79BEF; --violet-wash:#2A2140; --violet-line:#4A3B6E;
  --chrome:#0A120F; --chrome-2:#142019; --chrome-3:#22342B; --chrome-ink:#DDE9E3; --chrome-muted:#8AA096;
  /* The current page is a tint of the accent, not a bright pill: light text
     on the bright green pill was about 2:1. */
  --chrome-line:rgba(255,255,255,.1); --chrome-hover:rgba(255,255,255,.08); --chrome-active:rgba(67,195,154,.18); --chrome-active-ink:#DDE9E3; --chrome-section:#8AA096;
  --chrome-accent:#4DD9A6; --chrome-sub-ink:#9CC9B6; --chrome-foot:rgba(0,0,0,.08); --chrome-active-shadow:none;
  --focus-color:rgba(67,195,154,.4); --focus-ring:0 0 0 3px rgba(67,195,154,.4); --primary-shadow:0 4px 10px rgba(0,0,0,.35);
  --shadow-1:0 1px 2px rgba(0,0,0,.35); --shadow-2:0 4px 14px rgba(0,0,0,.45); --shadow-3:0 18px 48px rgba(0,0,0,.6);
}
:root[data-theme="dark"] img:not([src$=".svg"]){filter:brightness(.92)}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{background-color:var(--surface-2);color:var(--ink);border-color:var(--rule-strong)}

/* Print: paper is white. A payslip always prints in the standard Botswana
   Blue colours whatever the screen shows, and nothing prints in the Dark
   theme's light-on-dark colours (that would be pale text on white paper). */
@media print{
  :root[data-theme="dark"],#ps-content,#mp-content{
    color-scheme:light;
    --paper:#F6F8FB; --surface:#FFFFFF; --surface-2:#F1F4F8; --surface-3:#F9FAFC;
    --rule:#E3E8EF; --rule-strong:#CBD5E1;
    --ink:#111827; --ink-2:#1F2937; --muted-ink:#4B5563; --faint-ink:#8A94A6; --on-primary:#FFFFFF;
    --primary:#1A6FB5; --primary-dark:#155A93; --primary-2:#2B7FC4; --primary-deep:#0E3A61;
    --primary-wash:#E8F2FB; --primary-wash-2:#F2F7FD; --primary-line:#BFD8EF;
    --mint:#4A9BDA; --mint-line:#A9CDEE;
    --seal:#8A5A1E; --seal-wash:#F9EFE2; --weave-strand:#C98A2B;
    --ok:#1B7F5E; --ok-wash:#E3F4EC; --ok-strong:#1B7F5E; --ok-wash-2:#EEF8F2; --ok-line:#B5DEC9;
    --warn:#B45309; --warn-wash:#FEF3E2; --warn-line:#F5D8A8; --warn-bright:#E89A22;
    --stop:#B42318; --stop-2:#C3464B; --stop-wash:#FDECEA; --stop-wash-2:#FFF5F5; --stop-line:#EFC5C9;
    --info:#1A6FB5; --info-wash:#E8F2FB; --info-line:#BFD8EF;
    --violet:#6E47B5; --violet-wash:#F3EFFB; --violet-line:#D7C9EE;
  }
  :root[data-theme="dark"] img:not([src$=".svg"]){filter:none}
  :root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{background-color:var(--surface);color:var(--ink)}
}

/* Density: compact fits more rows on a screen; comfortable is the default. */
:root[data-density="compact"]{
  --control-h:2.25rem; --control-h-sm:1.75rem; --control-h-lg:2.5rem;
  --s3:10px; --s4:12px; --s5:18px; --s6:24px;
}
/* A finger still needs 44px: on touch screens and phones compact keeps the
   touch heights. Same selector as above and later in the file, so it wins
   (the plain :root touch rule in base.css would lose to compact). */
@media (pointer:coarse),(max-width:768px){
  :root[data-density="compact"]{ --control-h:2.75rem; --control-h-sm:2.5rem; }
}
:root[data-density="compact"] td,:root[data-density="compact"] th{padding-top:7px!important;padding-bottom:7px!important}

/* Text size: larger text for anyone who finds the default small. Every size
   in the product is in rem, so raising the root from 16px to 17.5px grows all
   of them together: text, controls and spacing set in rem. */
:root[data-text="large"]{font-size:109.375%}
/* Paper is fixed: Large text is for the screen and never changes an A4
   layout (the payslip is cut at one sheet). After the rule above, so it wins. */
@media print{ :root[data-text="large"]{font-size:100%} }

/* The Appearance panel. */
.appearance-themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-bottom:18px}
.appearance-theme{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:10px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);cursor:pointer;text-align:left;font:inherit;color:var(--ink)}
.appearance-theme[aria-pressed="true"]{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-wash)}
.appearance-swatch{display:flex;align-self:stretch;width:100%;height:34px;border-radius:6px;overflow:hidden;border:1px solid var(--rule)}
.appearance-swatch span{display:block!important;flex:1 1 0!important;min-width:8px;height:100%}
.appearance-theme strong{font-size:var(--fs-sm)}
.appearance-theme small{font-size:var(--fs-help);color:var(--muted-ink)}
.appearance-choices{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.appearance-choices button[aria-pressed="true"]{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.appearance-label{font-size:var(--fs-label);font-weight:600;color:var(--ink-2);margin:0 0 8px;letter-spacing:0}
.appearance-note{font-weight:400;color:var(--muted-ink);line-height:1.5}