/* ==========================================================================
   tokens.css - v12: the consistency-training app.

   He answered the questions himself this time: "like a training app - a
   consistency training app - probably a little like Duolingo", keeping the
   unlockables, the pot, and every recorded day. So the register is the
   Duolingo school: clean light ground, white cards with soft borders, one
   heavy rounded face on everything interactive, saturated feature colours,
   and buttons with a hard bottom edge that physically press. The
   time-of-day sky - Daylight's soul - survives as one living card on
   Today instead of painting the whole world.
   ========================================================================== */

:root{
  /* the ground and the cards */
  --bg:#F7F7F4;
  --card:#FFFFFF; --card2:#F4F2EC; --sunk:#EFEDE6;
  --edge:#E5E2D9; --edge2:#D8D4C7;
  --ink:#3B3A36; --ink2:#6F6D63; --ink3:#85836F;

  /* feature colours, saturated and few */
  --green:#58CC02; --greenEdge:#46A302; --greenSoft:#E8F8DB; --greenInk:#3F8F06;
  --blue:#1CB0F6; --blueEdge:#1899D6; --blueSoft:#DDF4FF;
  --rose:#FF6B8A; --roseEdge:#E04F6E; --roseSoft:#FFE4EA;
  --gold:#FFC800; --goldEdge:#E6A800; --goldSoft:#FFF4CC; --goldInk:#7A5B00;
  --flame:#FF9600; --flameEdge:#E07E00; --flameSoft:#FFE9CC;
  --violet:#CE82FF; --violetEdge:#A855E8; --violetSoft:#F3E5FF; --violetInk:#8549BA;
  --crit:#FF4B4B; --critSoft:#FFDFDF;
  --navOn:#0E6C9E;

  /* compatibility aliases for the screens that still speak the old names */
  --panel:var(--card); --panel2:var(--card2);
  --line:var(--edge); --line2:var(--edge2);
  --cardInk:var(--ink); --cardInk2:var(--ink2); --cardInk3:var(--ink3);
  --cardLine:var(--edge); --cardLine2:var(--edge2); --cardSunk:var(--sunk);
  --outline:var(--edge2);
  --jade:var(--green); --jadeSoft:var(--greenSoft); --jadeInk:var(--greenInk);
  --gold2:var(--goldEdge); --ember:var(--flame); --emberSoft:var(--flameSoft);
  --violetInk2:var(--violetInk);

  --r:16px; --r2:20px;
  --tap:cubic-bezier(.2,.9,.3,1);
  --pop:cubic-bezier(.2,1.5,.4,1);
  --hud:60px;
}

/* the sky lives on in one card: vivid, hour-driven, watch-face sized */
:root{
  --sky1:#2C2A6E; --sky2:#1E1D52; --skyInk:#F3EFFF;
}
:root[data-sky="deepnight"]{ --sky1:#1A1B4B; --sky2:#111233; --skyInk:#E9E5FA }
:root[data-sky="dawn"]     { --sky1:#FF9F8E; --sky2:#B76BC4; --skyInk:#47204F }
:root[data-sky="morning"]  { --sky1:#8FDBFF; --sky2:#4BAEF0; --skyInk:#14456F }
:root[data-sky="day"]      { --sky1:#6FC8FF; --sky2:#2E9BE8; --skyInk:#0E3C66 }
:root[data-sky="gold"]     { --sky1:#FFB25E; --sky2:#E85D74; --skyInk:#54172E }
:root[data-sky="dusk"]     { --sky1:#A66BD8; --sky2:#4A3796; --skyInk:#FFF3E8 }
:root[data-sky="night"]    { --sky1:#2C2A6E; --sky2:#1E1D52; --skyInk:#F3EFFF }

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; height:100%; background:var(--bg)}
body{
  margin:0; min-height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:"Nunito","Instrument Sans",system-ui,-apple-system,sans-serif;
  font-size:16px; font-weight:600; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
#hud,#screen,#nav{position:relative; z-index:1}

/* ONE SHELL, EVERY TAB. The bar used to be fixed to the viewport while Today
   alone ran as a 100dvh column - so the bar answered to iOS's collapsing
   toolbar on five tabs and to the layout box on the sixth, and moved as he
   crossed between them. Now the whole app is that column on every tab: the
   HUD on top, one scroller in the middle, the bar at the bottom. Nothing is
   fixed, so nothing can drift. */
/* Pinned to the viewport by inset rather than sized by 100dvh: one source of
   truth for the height, so the bar cannot end up short of the bottom edge. */
body{position:fixed; inset:0; overflow:hidden; display:flex; flex-direction:column}
/* The scroller is a plain block. It was a flex column on Today, which is what
   broke scrolling outright: a flex child shrinks below its content by default,
   so the box never grew past the viewport, scrollHeight never exceeded
   clientHeight, and the page was clipped instead of scrollable. */
#screen{flex:1 1 auto; min-height:0; display:block;
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain; width:100%}

.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace; font-variant-numeric:tabular-nums}
.disp{font-family:"Nunito",sans-serif; font-weight:800}
.zh{font-family:"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Source Han Sans SC",
    "Microsoft YaHei",sans-serif}
h1,h2,h3{font-family:"Nunito",sans-serif; margin:0; letter-spacing:-.01em; text-wrap:balance}
h2{font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3);
  margin:24px 2px 10px}
h3{font-size:16.5px; font-weight:800}
p{margin:9px 0}
a{color:var(--blue)}
.dim{color:var(--ink2); font-size:13px}
/* the small print, which had no rule of its own and so rendered as body text */
.fine{color:var(--ink2); font-size:12.5px; font-weight:600; line-height:1.45}

/* ==========================================================================
   v37 - the night look. From dusk to dawn (or pinned, in You) the ground
   goes dark, because the 22:15 nudge opens this app in bed. The iron gym
   hero, the sealed card backs and the card faces are objects and keep their
   own light; everything that is ground, paper or ink follows the sky.
   Specificity does the work: :root[data-night] .x outranks any .x in the
   later sheets, so the hardcoded light edges below are overridden here
   rather than hunted through six files.
   ========================================================================== */
:root[data-night]{
  --bg:#14151A;
  --card:#1E2028; --card2:#232630; --sunk:#2A2D38;
  --edge:#30343F; --edge2:#3E4352;
  --ink:#ECEAE2; --ink2:#B9B6AA; --ink3:#8E8C81;

  --greenSoft:#1B3312; --greenInk:#9BE85A;
  --blueSoft:#10293A;
  --roseSoft:#3A1622;
  --goldSoft:#3A2E0C; --goldInk:#FFD35C;
  --flameSoft:#3A250C;
  --violetSoft:#2A1B3D; --violetInk:#D7A6FF;
  --critSoft:#3D1818;
  --navOn:#4CC6FF;
}
:root[data-night] html, :root[data-night] body{background:var(--bg)}
/* the light-only edges the components hardcode */
:root[data-night] .pil.on, :root[data-night] .wd.on, :root[data-night] .vc.on,
:root[data-night] .qq.on, :root[data-night] .panel.jade, :root[data-night] .lift.on,
:root[data-night] .an.on, :root[data-night] .prot.done{border-color:#2F6B1A}
:root[data-night] .gem.won, :root[data-night] .quest.qdone, :root[data-night] .warnbar,
:root[data-night] .cond.full{border-color:#7A5B00}
:root[data-night] .pil.up, :root[data-night] .wd.ice i{border-color:#1F5F86}
:root[data-night] #nav button[aria-current="true"]::before{border-color:#1F5F86}
:root[data-night] .panel.ember{border-color:#6B4A12}
:root[data-night] .panel.violet{border-color:#4C2E6E}
:root[data-night] .panel.crit{border-color:#6E2A2A}
/* dark inks that were tuned for pale tints */
:root[data-night] .qst, :root[data-night] .tag.ember{color:#FFB35C}
:root[data-night] .tag.crit{color:#FF8A80}
:root[data-night] .skycard{border-bottom-color:rgba(255,255,255,.08);
  box-shadow:0 18px 30px -22px rgba(0,0,0,.9)}
:root[data-night] #boot{background:var(--bg)}
:root[data-night] .chip.record{background:var(--goldSoft); border-color:#7A5B00}