/* Shared screen identity. Game state colors and print geometry stay in their own stylesheets. */
@media screen {
  :root { --ink:#172e3c; --navy:#172e3c; --blue:#245674; --muted:#53616a; --line:#c9ced0; --paper:#fff; --bg:#f2f4f4; --accent:#ead39c; --tw-serif:Georgia,'Times New Roman',serif; }
  body { color:var(--ink); background:var(--bg); font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
  h1,h2 { font-family:var(--tw-serif); font-weight:400; letter-spacing:-.035em; }
  button,select,input,textarea,.button,.file,dialog { border-radius:2px; }
  button,.button,.file { transition:background-color .15s,border-color .15s; }
  button:hover:not(:disabled),.file:hover { background:#e8edef; border-color:#647c8a; }
  button.primary,.button.primary { background:var(--ink); border-color:var(--ink); color:#fff; }
  button.primary:hover,.button.primary:hover { background:#2c5066; color:#fff; }
  a { text-underline-offset:.22em; }
  :where(a,button,input,select,textarea,summary):focus-visible { outline:3px solid #a76c13; outline-offset:3px; }
  input[type=checkbox] { accent-color:#245674; }
  .eyebrow { color:#596970; font-size:.75rem; letter-spacing:.14em; }

  /* The homepage reads like the opening spread of a teaching journal. */
  body.home { background:#f7f8f8; }
  .home .preview { background:#172e3c; color:#fff; font-size:.75rem; }
  .home .preview span { color:#cbd5da; }
  .home header { border-bottom:3px double #89969d; padding-top:30px; padding-bottom:25px; }
  .home .brand { font-family:var(--tw-serif); font-size:30px; letter-spacing:-1.1px; font-weight:400; }
  .home .brand span { margin-left:.15em; font-style:italic; }
  .home .brand small { font-family:system-ui,sans-serif; font-size:11px; letter-spacing:.19em; font-weight:600; margin-top:12px; }
  .home nav a { font-size:14px; }
  .home .hero { grid-template-columns:1.25fr 1fr; gap:70px; padding-top:62px; padding-bottom:68px; }
  .home h1 { font-size:clamp(42px,4.8vw,65px); line-height:1.09; letter-spacing:-.045em; font-weight:400; }
  .home h1 em { color:#7e561b; font-style:italic; }
  .home h2 { font-size:36px; }
  .home h3 { font-family:var(--tw-serif); font-weight:400; font-size:25px; letter-spacing:-.025em; }
  .home .lead { font-size:18px; line-height:1.75; }
  .home .example { border-radius:0; box-shadow:none; border-top:5px solid #b38d49; padding:27px 32px; background:#172e3c; }
  .home .example h2 { font-size:37px; }
  .home .example-top { color:#ead39c; letter-spacing:.12em; }
  .home .strength strong { font-family:var(--tw-serif); font-weight:400; font-size:54px; font-variant-numeric:lining-nums tabular-nums; }
  .home .outcome { border-radius:0; background:#ead39c; }
  .home .outcome strong { font-family:var(--tw-serif); font-size:25px; font-weight:400; }
  .home .section { border-color:#bfc8cd; }
  .home .number { font:italic 27px var(--tw-serif); color:#7e561b; border-top:2px solid #ad8846; padding-top:10px; min-width:45px; }
  .home .cards { gap:0; border-top:2px solid #172e3c; border-bottom:1px solid #bfc8cd; }
  .home .card { border:0; border-right:1px solid #c9ced0; border-radius:0; background:transparent; padding:28px; }
  .home .card:first-child { padding-left:0; }
  .home .card:last-child { border-right:0; }
  .home .future { background:#edf0f1; }
  .home .tag { color:#52636c; font-size:12px; letter-spacing:.09em; }
  .home .hybrid { background:#e7edf0; border-top:3px double #89969d; }
  .home .principles h3 { font-size:23px; }
  .home footer strong { font:24px var(--tw-serif); }

  /* Tool pages share the masthead and type, while retaining their own density. */
  .tool-page>header { background:#172e3c; color:#fff; border-bottom:3px solid #b38d49; }
  .tool-page>header a,.tool-page>header h1,.tool-page>header .brand strong { color:#fff; }
  .tool-page>header small,.tool-page>header #saveStatus,.tool-page>header h1 span { color:#d0dbe0; }
  .tool-page>header .brand strong { font:25px var(--tw-serif); }
  .tool-page>header .mark { border:1px solid #8c9ca5; border-radius:0; background:transparent; }
  .tool-page>header .mark span { color:#ead39c; }
  .tool-page .panel,.tool-page .decision,.tool-page details,.tool-page .map-panel { border-radius:2px; box-shadow:none; }
  .tool-page .scope,.tool-page .notice { background:#e7edf0; }
  .tool-page .decision { border-top:3px solid #ad8846; }
  .tool-page .decision h2 { font-size:25px; }
  .tool-page .math { background:#eef2f4; border-left-color:#ad8846; }
  .tool-page .unit-option { border-radius:0; }
  .tool-page .toolbar { padding-bottom:14px; border-bottom:1px solid #c9ced0; }
  .tool-page .status h1 { font-size:29px; }
  .tool-page>header>span { font-family:var(--tw-serif); font-size:24px; }
  .tool-page>header>span small { font-family:system-ui,sans-serif; letter-spacing:.035em; }
  .tool-page aside.left { background:#edf1f3; }
  .worksheet-page main { box-shadow:none; border-top:4px solid #ad8846; }
  .worksheet-page nav { background:#172e3c; color:white; border-bottom:3px solid #b38d49; }
  .worksheet-page nav a { color:white; }
  @media(max-width:850px) {
    .home .hero { gap:32px; }
    .home .card,.home .card:first-child { padding:25px 0; border-right:0; border-bottom:1px solid #c9ced0; }
    .home .card:last-child { border-bottom:0; padding-left:20px; padding-right:20px; }
  }
  @media(max-width:650px) {
    .home .hero { grid-template-columns:1fr; padding-top:36px; padding-bottom:40px; }
    .home .brand { font-size:28px; }
    .home h1 { font-size:44px; }
    .home h2 { font-size:31px; }
    .home .example { padding:24px; }
  }
  @media(prefers-reduced-motion:reduce) { button,.button,.file { transition:none; } }
}