/* "Grid" theme -- the acenow.app/try/ look applied to the app, as an
   experiment (minus the page's column lines: plain paper reads better on a phone). Everything is scoped to html[data-theme="grid"], so with the
   attribute off the app renders exactly as designed (the benchmark lives in
   design/benchmark-2026-10-03/). The switch is DEFAULT_THEME in app.html.

   The language: warm-grey paper with drafting-grid column lines, ink type,
   Sometype Mono for the small print, Ace orange as the only colour, and
   rectangles -- no pills, no rounded cards, no soft shadows. */

html[data-theme="grid"]{
  --paper:#E6E4E0; --panel:#EFEDE9; --card:#F8F7F4;
  --line:#CBC7C0; --line-2:#B9B4AC; --ink-soft:#4B4741; --mute:#857F76;
  --mono:"Sometype Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --cream-1:#EFEDE9; --cream-2:#EFEDE9; --cream-3:#E6E4E0;
  --r-card:0px; --r-lg:0px; --r-pill:0px;
}

/* ---------- paper + grid everywhere the app was warm cream ---------- */
html[data-theme="grid"] body,
html[data-theme="grid"] #app{background:var(--paper)}
html[data-theme="grid"] .warm,
html[data-theme="grid"] .warm-lite,
html[data-theme="grid"] .screen[style*="gradient"]{
  background:var(--panel)!important;
  background-image:none!important;
}

/* ---------- rectangles: the one rule that changes the most ---------- */
html[data-theme="grid"] #app *:not(.lottie):not(svg):not(svg *){border-radius:0!important}

/* ---------- type ---------- */
html[data-theme="grid"] h1{font-weight:800;letter-spacing:-.04em}
html[data-theme="grid"] .sub,
html[data-theme="grid"] .mt,
html[data-theme="grid"] .meta,
html[data-theme="grid"] small{font-family:var(--mono)!important;color:var(--ink-soft)}
html[data-theme="grid"] .sub{font-size:13px;line-height:1.6}

/* ---------- buttons: flat blocks, mono caps ---------- */
html[data-theme="grid"] .btn{font-family:var(--mono)!important;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;font-size:13px;box-shadow:none!important}
html[data-theme="grid"] .btn-orange{background:var(--orange)!important;color:var(--ink)!important}
html[data-theme="grid"] .btn-black{background:var(--ink)!important;color:#fff!important}
html[data-theme="grid"] .btn-white{background:var(--card)!important;color:var(--ink)!important;
  box-shadow:inset 0 0 0 1.5px var(--ink)!important}

/* ---------- surfaces: white cards become bordered paper cells ---------- */
html[data-theme="grid"] #app [style*="background:#fff"],
html[data-theme="grid"] #app [style*="background: #fff"],
html[data-theme="grid"] #app [style*="background:white"]{
  background:var(--card)!important;box-shadow:0 0 0 1px var(--line-2)!important}
html[data-theme="grid"] #app [style*="box-shadow"]:not(.btn){box-shadow:0 0 0 1px var(--line-2)!important}
html[data-theme="grid"] .sheet{background:var(--panel)!important;border-top:6px solid var(--ink);box-shadow:none!important}
html[data-theme="grid"] .plan{background:var(--card)!important;border:1px solid var(--line-2)!important}
html[data-theme="grid"] .plan.on{border-color:var(--ink)!important;box-shadow:inset 0 0 0 1px var(--ink)!important;
  background:rgba(255,132,0,.08)!important}
html[data-theme="grid"] .filerow{background:var(--ink)!important}

/* ---------- navigation ---------- */
html[data-theme="grid"] .navbar{background:var(--panel)!important;border-top:1px solid var(--ink);box-shadow:none!important}
html[data-theme="grid"] .statusbar{font-family:var(--mono)}
html[data-theme="grid"] .tabs,
html[data-theme="grid"] .tab{font-family:var(--mono)!important;text-transform:uppercase;letter-spacing:.06em}

/* ---------- sign-up sheet: ink panel instead of the orange slab ---------- */
html[data-theme="grid"] .auth-pill{background:var(--card)!important;box-shadow:inset 0 0 0 1.5px var(--ink)!important;
  font-family:var(--mono)!important;text-transform:uppercase;letter-spacing:.05em;font-size:13px!important}
html[data-theme="grid"] .auth-field{background:var(--card)!important;box-shadow:inset 0 0 0 1px var(--line-2)!important;
  font-family:var(--mono)!important}

/* ---------- full-orange screens (calendar) become ink, orange stays the accent ---------- */
html[data-theme="grid"] .screen[style*="background:#FF8400"]{background:var(--ink)!important}
html[data-theme="grid"] .calgrid .sel{background:var(--orange)!important;color:var(--ink)!important}
html[data-theme="grid"] .calgrid .dow{font-family:var(--mono);text-transform:uppercase;font-size:10.5px!important;letter-spacing:.08em}
html[data-theme="grid"] .cal-title{background:var(--orange)!important}
html[data-theme="grid"] .durpill{background:var(--card)!important;box-shadow:inset 0 0 0 1px var(--line-2)!important;
  font-family:var(--mono)!important}
html[data-theme="grid"] .durpill.on{background:var(--ink)!important;color:#fff!important;box-shadow:none!important}

/* ---------- cream tints become paper cells ---------- */
html[data-theme="grid"] #app [style*="background:#FFF7E3"],
html[data-theme="grid"] #app [style*="background:#FFEFCB"],
html[data-theme="grid"] #app [style*="background:#FDEDC7"],
html[data-theme="grid"] #app [style*="background:#FFE5A7"]{background:var(--card)!important;box-shadow:inset 0 0 0 1px var(--line-2)!important}

/* ---------- home greeting card: paper with an ink frame ---------- */
html[data-theme="grid"] .hero{background:var(--card)!important;background-image:none!important;
  box-shadow:0 0 0 1.5px var(--ink)!important}
html[data-theme="grid"] .chip{background:var(--card)!important;box-shadow:0 0 0 1px var(--line-2)!important;font-family:var(--mono)!important}

/* ---------- home banner: the dithered lighthouse (drawn by theme-grid.js) ---------- */
html[data-theme="grid"] .swoosh{background:#EFEDE9!important;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  height:168px!important}
html[data-theme="grid"] .swoosh[data-dither] > img{display:none}

/* ---------- progress strip under the greeting (theme-grid.js) ---------- */
html[data-theme="grid"] .gx-prog{margin:12px 0 0;background:var(--card);box-shadow:0 0 0 1.5px var(--ink)}
html[data-theme="grid"] .gx-prog[hidden]{display:none}
html[data-theme="grid"] .gx-big{padding:14px 16px 12px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
html[data-theme="grid"] .gx-big b{font:800 34px/1 Poppins,sans-serif;letter-spacing:-.04em;color:var(--ink)}
html[data-theme="grid"] .gx-big b.up{color:var(--orange)}
html[data-theme="grid"] .gx-big span{font:500 11px/1.4 var(--mono);color:var(--ink-soft);flex:1;min-width:140px}
html[data-theme="grid"] .gx-cells{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-2)}
html[data-theme="grid"] .gx-cells div{padding:10px 12px;border-left:1px solid var(--line-2)}
html[data-theme="grid"] .gx-cells div:first-child{border-left:0}
html[data-theme="grid"] .gx-cells b{display:block;font:600 16px/1.2 var(--mono);color:var(--ink)}
html[data-theme="grid"] .gx-cells small{display:block;font:500 9px/1.4 var(--mono);letter-spacing:.1em;color:var(--mute);margin-top:3px}