/* The reader's settings (Task 88): the attributes assets/prefs.js puts on <html>, turned into colors, sizes and fonts.
   Loaded on every page after the page's own stylesheet.  website/check_palette.py checks every color mode in both
   themes (its color_modes() reads them from this file): up and down keep 4.5:1 on the page and its panels and stay far
   apart, in normal vision and in the color-vision type each mode is tuned for.  Red and green appear only in
   "Standard", the one mode a reader picks for them; the up and down arrows stay in every mode, so color never carries
   meaning alone. */

@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/AtkinsonHyperlegible-Regular.woff2) format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/AtkinsonHyperlegible-Bold.woff2) format('woff2')}

/* The page root takes the theme's background too, so nothing shows the browser's own (black in a dark-mode browser) */
html{background:var(--bg)}

/* Up / above and down / below.  Color-blind safe (amber up / blue down) is the default.  Each mode names its dark
   theme's pair as --up-d / --down-d (the dark theme's --up / --down) and sets its light pair on [data-theme=light].
   The Plot's chart follows the theme too and reads --up / --down (assets/app/chart.js: its candles, hollow up and
   filled down, and its up and down lines; Tasks 95 and 100). */
:root{--up-d:#FFB000;--down-d:#5AA9FF;--up:var(--up-d);--down:var(--down-d)}
:root[data-theme=light]{--up:#8A5100;--down:#1D4ED8}
/* Standard: green up, red down, for readers who ask for them */
:root[data-colors=standard]{--up-d:#4ADE80;--down-d:#F87171}
:root[data-colors=standard][data-theme=light]{--up:#147A3A;--down:#B91C1C}
/* Red-weak (protan): yellow and blue, both kept bright */
:root[data-colors=protan]{--up-d:#FFD23F;--down-d:#4D9DFF}
:root[data-colors=protan][data-theme=light]{--up:#7A5A00;--down:#1E4FD8}
/* Green-weak (deutan): orange and sky blue */
:root[data-colors=deutan]{--up-d:#FF9E2C;--down-d:#6CB6FF}
:root[data-colors=deutan][data-theme=light]{--up:#8F4A00;--down:#1F55C9}
/* Blue-weak (tritan): cyan and pink, which stay apart when blue and yellow do not */
:root[data-colors=tritan]{--up-d:#2FD9E8;--down-d:#F28CE6}
:root[data-colors=tritan][data-theme=light]{--up:#006C7A;--down:#A3268F}
/* High contrast: black or white pages, full-strength text and borders, the brightest up and down */
:root[data-colors=contrast]{--up-d:#FFD60A;--down-d:#8CCBFF;
  --bg:#000000;--surf:#0A0A0A;--surf2:#121212;--text:#FFFFFF;--mu:#D4D4D8;--dim:#C4C4CC;
  --brd:rgba(255,255,255,.45);--brd2:rgba(255,255,255,.6);--acc:#FFD60A;--teal:#7FEFFF}
:root[data-colors=contrast][data-theme=light]{--up:#6B3A00;--down:#0033A0;
  --bg:#FFFFFF;--surf:#FFFFFF;--surf2:#F5F5F5;--text:#000000;--mu:#27272A;--dim:#3F3F46;
  --brd:rgba(0,0,0,.55);--brd2:rgba(0,0,0,.7);--acc:#6B3A00;--teal:#004A57}
:root[data-colors=contrast] a{text-decoration:underline}

/* Text size: the whole page scales, so tables and charts keep their proportions.  A scaled page has less room across,
   so the header row may wrap onto a second line (no sideways scroll; tests/test_settings.py b) */
:root[data-text=s] body{zoom:.9}
:root[data-text=l] body{zoom:1.15}
:root[data-text=xl] body{zoom:1.3}
:root[data-text=l] .site-hdr .wrap,:root[data-text=xl] .site-hdr .wrap,:root[data-text=l] header.top .wrap,:root[data-text=xl] header.top .wrap{flex-wrap:wrap;row-gap:8px;height:auto;min-height:64px;padding-top:8px;padding-bottom:8px}

/* Larger text on a phone: number tiles one to a row, a narrower price rail on the level ladder */
@media(max-width:520px){
  :root[data-text=l] .tiles,:root[data-text=xl] .tiles{grid-template-columns:minmax(0,1fr)}
  :root[data-text=l] .tile,:root[data-text=xl] .tile{border-right:none}
  :root[data-text=l] .lad,:root[data-text=xl] .lad{--rail:84px;--lead:12px}
}
:root[data-text=l] :is(.chip,.tag,.cmp-x,.brand-name,.wordmark .wm,.next-hook a,.src),:root[data-text=xl] :is(.chip,.tag,.cmp-x,.brand-name,.wordmark .wm,.next-hook a,.src){white-space:normal;max-width:100%}
:root[data-text=l] :is(.brand,.wordmark),:root[data-text=xl] :is(.brand,.wordmark){min-width:0}

/* The light theme on the shared header (its background was written for dark only) */
:root[data-theme=light] .site-hdr{background:rgba(241,245,249,.96)}
:root[data-theme=light] .site-ftr{background:var(--surf2)}
:root[data-colors=contrast] .site-hdr{background:var(--bg)}
:root[data-theme=light] .wm{color:var(--text)}
:root[data-theme=light] .wm-b{color:var(--teal)}
/* amber-filled buttons and banners: white text on the light theme's darker amber (black on it is under 4.5:1) */
:root[data-theme=light] .btn:not(.ghost),:root[data-theme=light] .app-banner{color:#FFFFFF}
:root[data-theme=light] .btn:not(.ghost):hover{color:var(--acc)}
/* text the stylesheets wrote in fixed light colors for the dark page: dark text on the light theme */
:root[data-theme=light] :is(.lg-msg p,.lg-local p,.article p,.article li,.legal p,.legal li,.drawer-b,.sh p,.sh li,.sh dd,.cmp td,.acct .op-panel-b p,.xp-defs dd){color:var(--text)}
:root[data-theme=light] :is(.chip.fail,.hero-checks .k-fail .g,.lg-msg.k-no-membership,.lg-msg.k-error){color:#9F1239}
:root[data-theme=light] .ch-labels :is(.lb-o,.lb-c){color:var(--mu)}
:root[data-theme=light] .ch-labels .lb-plus{color:var(--teal)}
/* small labels drawn faint on the dark page (opacity): full strength on the light one, where faint fails 4.5:1 */
:root[data-theme=light] :is(.tm-shs,.dp-mark){opacity:1}
/* The Plot page on the light theme: its amber-filled controls take white text, its dark-only panels the light surfaces */
:root[data-theme=light] :is(.ch-btn[aria-pressed=true],.ch-play,.ch-t[aria-pressed=true] .ch-ts,.ch-symtgl button[aria-pressed=true],.ch-tbl tr.now th,.ch-tbl tr.now td){color:#FFFFFF}
:root[data-theme=light] .lo-b{background:var(--surf);border-color:var(--brd2)}
:root[data-theme=light] .ch-legend{background:rgba(255,255,255,.9)}
:root[data-theme=light] .ch-foot{background:var(--surf2);border-color:var(--brd2)}
:root[data-theme=light] .ch-t:not([aria-pressed=true]) :is(.ch-tk,.ch-ts){color:var(--text)}

/* The easier-reading font (Atkinson Hyperlegible, SIL Open Font License, fonts/OFL-AtkinsonHyperlegible.txt):
   headings and text; numbers in tables stay in the mono face so their columns line up */
:root[data-font=easy]{--FH:'Atkinson Hyperlegible',system-ui,sans-serif}
:root[data-font=easy] body{word-spacing:.06em}

/* Reduce motion: no animation or smooth scrolling (assets/motion.js also skips its count-ups) */
:root[data-motion=reduce]{scroll-behavior:auto}
:root[data-motion=reduce] *,:root[data-motion=reduce] *::before,:root[data-motion=reduce] *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}