/* ═══════════════════════════════════════════════════════════════════════════
   base.css — everything that is the same on every screen.

   🔴 WHY. Three HTML documents meant three inline stylesheets, and today every
   shared bug had to be found and fixed three times: the font-size !important,
   the theme-color var, the light palette, the no-zoom block. I missed instances
   more than once. This is step one of collapsing them into one app.

   ⛔ WHAT BELONGS HERE: the palette, the header, the nav pills, the input floor,
   reduce-motion. Anything one screen owns stays with that screen.
   ⛔ IT LOADS BEFORE each page's own <style>, so a page can still override.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── FIRST THING ──────────────────────────────────────────────────────────────
   Light is the default, on Andrei's argument and Paul's own use: the board is
   opened on waking, and a black screen at seven in the morning is a night-time
   object. Dark is kept and lives in settings.

   ⭐ THE CARD DOES NOT CHANGE BETWEEN THEMES. It was always cream with dark ink,
   because it is a physical card. So the light theme is the page around it, and
   the paper is deliberately a shade DARKER than the card so the card still lifts
   off it — which is how a real card on a real table actually reads. */
:root{
  --s0:#EFEDE6; --s1:#E8E5DC; --s2:#E1DDD2; --s3:#D9D5C8;
  --edge:#D8D4C7; --edge2:#C6C1B1; --edge3:#B0AA98;
  --dim1:#63604F; --dim2:#767261; --dim3:#8A8474;
  --txt1:#191913; --txt2:#3A382F; --txt3:#565248;
  --lime:#C8E840; --lime-hi:#B7DC00; --lime-edge:#C3D97A;
  /* lime as TEXT cannot be lime on paper. Same hue, enough weight to read. */
  --lime-txt:#5A7300; --lime-edge2:#9CBB2E;
  --ember:#D4441C; --ember-hi:#B8380F; --amber:#A9761A; --sky:#1668A8;
  --on-accent:#101008;
  --card:#f4f1e8; --card2:#e9e4d6; --ink:#16150f; --sub:#5f5c50;
  --glow:rgba(0,0,0,.05);
  color-scheme:light;
}
/* ── the night version, kept whole, chosen in settings ────────────────────── */
:root[data-theme="dark"]{
  --s0:#08080b; --s1:#0d0d13; --s2:#15151d; --s3:#1a1a24;
  --edge:#22222c; --edge2:#2e2e3b; --edge3:#3a3a48;
  --dim1:#8d8da0; --dim2:#76748a; --dim3:#4a4959;
  --txt1:#e8e6f0; --txt2:#c9c7d6; --txt3:#a9a7b8;
  --lime:#caf000; --lime-hi:#e0ff4d; --lime-edge:#3a4a1c;
  --lime-txt:#caf000; --lime-edge2:#caf000;
  --ember:#ff6a45; --ember-hi:#ff9a7d; --amber:#e0a02a; --sky:#7ad0ff;
  --on-accent:#101008;
  --card:#f4f1e8; --card2:#e9e4d6; --ink:#16150f; --sub:#5f5c50;
  --glow:rgba(255,255,255,.05);
  color-scheme:dark;
}

/* ⛔ NO ZOOM. The viewport meta asks; iOS Safari ignores user-scalable on its
   own and needs touch-action as well, or a double-tap still zooms. Between the
   two, nothing scales. */
html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* 🔴 THIS IS WHY THE TYPING SIZE WOULD NOT COME DOWN. He asked three times, I
   "fixed" it three times, and each fix lost to an `!important` sitting further
   down the same stylesheet.
   The rule existed because iOS zooms the page when an input under 16px is
   focused — but this product sets `user-scalable=no` AND `touch-action:
   manipulation`, so nothing can zoom in the first place and the floor was
   guarding against something already prevented twice over.
   ⛔ Never leave an `!important` on a property somebody will want to set later.
   It does not win an argument, it hides one. */
input,textarea,select{font-size:14px}

/* ── THE HEADER IS THE SAME OBJECT ON EVERY SCREEN ───────────────────────────
   His note: First Thing belongs in the top left everywhere. The board said
   "Your board" and settings said "Settings", so the product had three names. */
.mark{font-family:"Fraunces",Georgia,serif;font-size:18px;letter-spacing:-.01em;
  color:var(--txt1);white-space:nowrap}
.pagename{font:400 10px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim2);align-self:center;margin-left:9px}

.navpills{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.navpills .pill{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.06em;padding:0 17px;height:34px;border-radius:100px;
  background:var(--s3);border:1px solid var(--edge2);color:var(--txt2);cursor:pointer;
  transition:.16s;white-space:nowrap;flex:none;display:inline-flex;
  align-items:center;justify-content:center;gap:8px;line-height:1}
.navpills .pill:hover{background:var(--edge);border-color:var(--dim3);color:var(--txt1)}
.navpills .pill.on{background:var(--txt1);border-color:var(--txt1);color:var(--s1);font-weight:700}
.navpills .pill.go{background:var(--lime);border-color:var(--lime-txt);color:var(--on-accent);font-weight:700}
.navpills .pill.go:hover{background:var(--lime-hi);border-color:var(--lime-txt);color:var(--on-accent)}
.navpills .pill .dot{width:6px;height:6px;border-radius:2px;background:var(--lime);
  transform:rotate(45deg);opacity:.85;flex:none}
.navpills .pill.on .dot,.navpills .pill.go .dot{display:none}
.navpills .pill.gear{padding:0;width:34px;font-size:14px;background:transparent;color:var(--dim2)}
.navpills .pill.gear:hover{background:transparent;border-color:var(--txt1);color:var(--txt1)}
.navpills{gap:6px}
.navpills .pill{font-size:9.5px;padding:0 12px;height:30px}
.navpills .pill.gear{width:30px}
.navpills .gear,
  .navpills .go,
  .navpills .pill:not(.tabs .pill){display:none}
.navpills.goes{display:none}

/* ⛔ REDUCE MOTION IS A REQUEST ABOUT DECORATION, NOT ABOUT MEANING.
   The rising, floating and fly-off animations go. The FLIP stays: turning a card
   over is the one gesture that carries information, and a card that changes face
   with no motion at all reads as a bug rather than as a turn. */
@media (prefers-reduced-motion: reduce){
  .riser,.ghost,.stk,.taphint,.sheet{animation:none!important}
  .riser{transition:none!important}
  *{scroll-behavior:auto!important}
}