/* Fiolo's look, chosen by the owner on 15 Oct ("aku jadinya pilih penuh, cahaya madu sama warna b"): honey light over the
   whole page, palette B, and a clear header that scrolls away. Shared by index.html and app.html, and linked after each
   page's own <style> so its plain selectors win ties. The page markup carries the light's layers (<div class="hl">), and
   js/look.js centres the vial's pool on the hero vial. */

/* Honey light. Sun through the vial's honey lands on a paper counter: the slow, wavy caustic you see on a table under a
   jar of honey. Strongest around the hero vial and in the margins, calmer under the text column. Pure CSS: two tiles cut
   from one ray-traced caustic (img/bg), drifting in different directions; only transforms animate. The tiles are graded as
   light through THICK honey, not water: soft defocused cores, gold (not white) where it focuses, deep amber in the dim
   cells, and the cells drawn 1.3x wide so they read as slow pools instead of a pool-floor net. */
body { background: var(--bg) url(/img/bg/paper.webp) 0 0 / 256px 256px; }
.hl { --T: 860px; --T2: 700px; --half: 590px; --vx: 72%; --vy: 470px; --vw: 490px; --vh: 610px;
  --pool: radial-gradient(calc(var(--vw) * .72 + 60px) calc(var(--vh) * .7 + 170px) at calc(var(--vx) + var(--vw) * .2) calc(var(--vy) + var(--vh) * .14), #000 30%, rgba(0, 0, 0, .5) 66%, transparent);
  /* the light crosses the reading column too: margins at full strength (the right one, the vial's side, brighter than the
     left), the column a calmer ~40% (the honey grade's cells are deep, so 40% reads like 45% of a water grade; the vial's
     pool stays the brightest spot), and the light comes in long pools, not even stripes */
  --edge: linear-gradient(90deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .75) max(40px, calc(50% - var(--half) - 210px)), rgba(0, 0, 0, .4) calc(50% - var(--half) + 80px),
            rgba(0, 0, 0, .4) calc(50% + var(--half) - 80px), #000 min(calc(100% - 40px), calc(50% + var(--half) + 210px)), #000);
  --edge2: linear-gradient(168deg, #000 4%, rgba(0, 0, 0, .5) 38%, #000 66%, rgba(0, 0, 0, .55) 100%);
  position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: -1; pointer-events: none; }
.hl-pool, .hl-edge { overflow: hidden; mix-blend-mode: multiply; }   /* light is multiplied into the paper: text stays the only ink */
.hl-pool { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--vy) + var(--vh) + 260px); -webkit-mask-image: var(--pool); mask-image: var(--pool); }
.hl-edge { position: fixed; inset: 0; opacity: .6;   /* no scroll timeline: one steady middle strength */
  -webkit-mask-image: var(--edge), var(--edge2); mask-image: var(--edge), var(--edge2);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.hl i { position: absolute; display: block; will-change: transform; }
.hl-shade { inset: calc(var(--T) * -1) calc(var(--T) * -1.3); background: url(/img/bg/caustic-shade.webp) 0 0 / calc(var(--T) * 1.3) var(--T); animation: hl-a 140s linear infinite; }
.hl-glint { inset: calc(var(--T2) * -1) calc(var(--T2) * -1.3); background: url(/img/bg/caustic-glint.webp) 0 0 / calc(var(--T2) * 1.3) var(--T2); mix-blend-mode: screen; opacity: .28; animation: hl-b 95s linear infinite; }
.hl-wash { inset: 0; will-change: auto !important; background: radial-gradient(calc(var(--vw) * .6 + 40px) calc(var(--vh) * .55 + 80px) at calc(var(--vx) + var(--vw) * .2) calc(var(--vy) + var(--vh) * .14), rgba(232, 150, 28, .2), rgba(232, 150, 28, 0)); }
@keyframes hl-a { to { transform: translate3d(calc(var(--T) * 1.3), var(--T), 0); } }
@keyframes hl-b { to { transform: translate3d(calc(var(--T2) * -1.3), 0, 0); } }
/* the margins warm up as the vial scrolls away */
@supports (animation-timeline: scroll()) {
  .hl-edge { animation: hl-warm linear both; animation-timeline: scroll(root); animation-range: 0 900px; }
  @keyframes hl-warm { from { opacity: .45; } to { opacity: .75; } }
}
@media (max-width: 1020px) {   /* the vial sits under the copy: the pool spreads around it instead of to its right */
  .hl { --pool: radial-gradient(calc(var(--vw) * .75 + 40px) calc(var(--vh) * .62 + 60px) at var(--vx) calc(var(--vy) + var(--vh) * .2), #000 34%, rgba(0, 0, 0, .45) 68%, transparent); }
}
@media (max-width: 620px) {   /* phones: the whole screen is the column, so it gets one even light (text runs to the 16px gutter: no
     brighter rim), a smaller cell so several pools are always in view, and none of the long dark bands that hid it away from
     the vial; there are no margins to warm up either, so the light is there from the top */
  .hl { --T: 540px; --T2: 440px; --edge: linear-gradient(rgba(0, 0, 0, .33), rgba(0, 0, 0, .33));
    --edge2: linear-gradient(170deg, #000, rgba(0, 0, 0, .8) 45%, #000); }
  .hl-edge { opacity: .75; animation: none; }
}
@media (prefers-reduced-motion: reduce) { .hl i { animation: none; will-change: auto; } }
/* small grey text steps one shade darker over the light, so it keeps AA */
.trust, .mtools small, footer .row, footer .legal, .faq summary em, .faq summary::after { color: #50483d; }

/* Palette B, "Soft sand", tuned on the honey light (owner, before choosing it: "warna2 background2 putih ini ... ga bikin
   sakit mata, kayak orbio"). The page under the light reads about #eed7ba. Every surface is an OPAQUE warm sand a gentle
   step lighter than that, so cards lift off the honey the way Orbio's tinted cards do: no frost, no white, warm borders,
   warm shadows. */
:root {
  --bg: #f6ecda;           /* the paper under the honey light: warm cream, so the light pools read gold, not white */
  --paper: #f8e8cb;        /* cards: light honey cream, one gentle step above the lit paper */
  --stone: #efdab6;        /* calculator input side, tracks, tabs: deeper sand */
  --input: #f9edd6;        /* inputs and selects: the lightest sand, still never white */
  --line: #e5cb9e; --line2: #d0ab72;
  --mute: #5f5547;         /* a shade deeper so small grey text holds AA on the deeper sands */
  --amber-wash: #f3d7a2; --amber-deep: #7f4400;
  --glass: #ebcf9c; --glass-ink: #643c0d;   /* the sage tags and kickers move into the honey family */
}

/* cards resting on the light: warm contact shadow, a hairline of warm edge, the faintest top light (no white rim) */
.panel, .figs { border-color: rgba(138, 75, 0, .14); box-shadow: 0 1px 0 rgba(255, 244, 222, .5) inset, 0 20px 44px -30px rgba(120, 66, 8, .42), 0 2px 6px -3px rgba(120, 66, 8, .12); }
.figs { background: var(--line); }

/* three ways */
.way .tag { background: var(--glass); color: var(--glass-ink); }
.way.hot { background: linear-gradient(170deg, #f4d6a0, var(--paper) 62%); border-color: rgba(166, 92, 0, .24); }
.way.hot .tag { background: #eec57f; color: #6a3900; }
.way .big { border-top-color: var(--line2); }

/* calculator: fields carry a honey edge strong enough to read as a field on the sand */
.calc .in { background: var(--stone); border-color: var(--line); }
.calc select, .search { background-color: var(--input); border-color: #b9925a; }
.bar { border-color: var(--line); }
.bar .t { background: #ebd1a5; }
.bar .t i { background: #c6a26c; }
.calc .note { background: var(--amber-wash); color: #6f3b00; }

/* ledger */
.ledger .tabs { background: var(--stone); }
.ledger .tabs button.on { background: var(--input); box-shadow: 0 1px 3px rgba(120, 66, 8, .16); }
.goals .line, .float.b .track { background: #e8cb98; }

/* hero: the ghost button is a sand chip with a honey edge, so it reads as a button next to the dark one, not as an outline */
.btn.ghost { background: #f5e2c0; border-color: #a97c41; color: var(--ink); box-shadow: 0 6px 16px -10px rgba(120, 66, 8, .45); }
.btn.ghost:hover { border-color: var(--ink); background: var(--paper); }
/* the vial card: warm sand one step above the page, peachy enough that the glass and the honey in it stay warm */
#shot { --vial-card: #f2ddba; }   /* js/vial3d.js reads this; the reduced-motion photo (img/vial_*) is rendered on the same colour */
.shot { background: #f2ddba; box-shadow: 0 30px 60px -36px rgba(110, 62, 8, .45), 0 0 0 1px rgba(138, 75, 0, .13); }
.mark { color: #5d5346; }
.float { background: rgba(250, 238, 216, .95); border-color: rgba(138, 75, 0, .13); box-shadow: 0 12px 30px -18px rgba(110, 62, 8, .45); }
.pill { background: var(--amber-wash); border-color: #ddb675; }
/* "Use the AI.": honey, not brown. The light middle stop is the brightest honey that still holds 3:1 over the darkest cell
   of the light behind the line (3.1:1 on a phone); the page's own #e8961c was 2.2:1 even on bare paper */
.hero h1 .amber { background-image: linear-gradient(100deg, #93500a, #aa5e0b 55%, #9d5609); }

/* catalogue, faq, token, footer */
.maker li { border-color: var(--line); }
.faq details, .faq details:first-child { border-color: var(--line2); }
.token { background: linear-gradient(135deg, #f4d6a0, var(--paper) 58%, #eed5aa 140%); }
.ca { background: rgba(249, 237, 214, .75); border-color: var(--line2); }
footer .big { color: #d9b376; }   /* the big wordmark: a soft honey sand that still shows on the lit paper */
footer .row { border-color: var(--line2); }

/* developers: keep it dark, warm the near-black into espresso; the paper slip becomes sand */
.devB .card { background: #211910; }
.devB .diff, .devB .seg { background: #150f09; }
.devB .side { background: radial-gradient(120% 70% at 50% 0%, #2b2015, #211910 70%); }
.devB .slip { background: var(--paper); }
.devB .slip select { background-color: var(--input); }
.devB .slip .tag { border-color: #ddb675; }
.devB .slip .tag.lock { background: var(--stone); }
.search input::placeholder { color: var(--mute); opacity: 1; }   /* the UA grey was 4.1:1 on the sand input */
.devB .ln.add > span:nth-child(-n+2) { color: #a99f8e; }   /* gutter numbers on the amber add-line tint over espresso */

/* the landing page's sticky frosted header becomes clear and scrolls away, so the light runs to the top edge (the app's own
   header already is); !important beats .scrolled's border */
#hdr { position: relative; top: auto; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: transparent !important; }