/* =====================================================================================================
   அமுது · Amudhu — food the Siddha way, an Oliyon Research tool (amudhu.oliyonresearch.com)
   The base (themes, header, flame, footer, buttons, cards, sheets, the staff page) is Vaasi's, as in Thingal, so
   every tool looks one; the second half is Amudhu's own: the hero's clay pot, the plate, the greens, cooking, safety.
   html[data-mode="light"|"dark"] is set by assets/js/boot.js before the first paint (auto = by the clock).
   Text sizes are Thoothu's (oliyonresearch docs/SHARED-SPEC.md §4 "Text sizes").
   ===================================================================================================== */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/source-sans-3-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Noto Sans Tamil"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/noto-sans-tamil-tamil-wght-normal.woff2") format("woff2"); unicode-range: U+0964-0965,U+0B82-0BFA,U+200C-200D,U+20B9,U+25CC; size-adjust: 90%; }
@font-face { font-family: "Noto Sans Tamil"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/noto-sans-tamil-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Noto Serif Tamil"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/noto-serif-tamil-tamil-wght-normal.woff2") format("woff2"); unicode-range: U+0964-0965,U+0B82-0BFA,U+200C-200D,U+20B9,U+25CC; size-adjust: 90%; }
@font-face { font-family: "Noto Serif Tamil"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/noto-serif-tamil-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  /* ---- day (default): Oliyon paper ---- */
  --bg: #f8f5ee;
  --surface: #ffffff;
  --surface-2: #f2eee4;
  --tint: rgba(0, 31, 91, .035);
  --line: #e2dccd;
  --line-strong: #c9c0aa;
  --ink: #001f5b;
  --ink-2: #33456e;
  --muted: #5d6b8a;
  --lamp: #e9a108;          /* the gold button, as .oh-cta */
  --lamp-hover: #feb001;
  --on-lamp: #001a45;
  --lamp-text: #8f5600;     /* gold that passes contrast on paper */
  --lamp-soft: rgba(233, 161, 8, .14);
  --lamp-line: rgba(233, 161, 8, .55);
  --flame: #f0a003;
  --c-in: #17809b; --c-in2: #3a9bb3; --c-hold: #b87400; --c-out: #c4553a; --c-holdout: #6a5acd;
  --c-rest: #2f8a55; --c-prep: #7a705c; --c-stroke: #c4553a; --c-meditate: #6a5acd;
  --ok: #1d6b45; --warn: #8a5a00; --bad: #a3261c;
  --seat: #fbf8f2; --dot-off: rgba(0, 31, 91, .16); --track: rgba(0, 31, 91, .08); --strip: rgba(0, 31, 91, .06);
  --nose-off: rgba(0, 31, 91, .08); --nose-line: rgba(0, 31, 91, .3);
  --pl-1: #fffdf8; --pl-2: #efe9dc;
  --navbar: rgba(255, 255, 255, .92);
  --tip: #001f5b; --tip-ink: #ffffff; --scrim: rgba(0, 20, 50, .45);
  --caution-ink: #5b3a00; --note-bg: rgba(233, 161, 8, .08); --note-line: rgba(233, 161, 8, .35);
  --heat-0: #ece6d8; --heat-1: rgba(233, 161, 8, .3); --heat-2: rgba(233, 161, 8, .5); --heat-3: rgba(233, 161, 8, .75); --heat-4: #c98a00;
  --dots: rgba(0, 31, 91, .05);
  /* texture (NK, 6 Nov 2026: "the whole tool is text — add some texture and slight patterns"): a faint pulli kolam on
     the page, a paper grain and a kolam corner on the cards */
  --kolam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23001f5b' stroke-opacity='.065' stroke-width='1.1'%3E%3Cpath d='M20 6Q34 20 20 34Q6 20 20 6ZM60 6Q74 20 60 34Q46 20 60 6ZM20 46Q34 60 20 74Q6 60 20 46ZM60 46Q74 60 60 74Q46 60 60 46Z'/%3E%3Cpath d='M14 0A14 14 0 0 1 0 14M66 0A14 14 0 0 0 80 14M0 66A14 14 0 0 1 14 80M80 66A14 14 0 0 0 66 80M54 40A14 14 0 0 1 40 54A14 14 0 0 1 26 40A14 14 0 0 1 40 26A14 14 0 0 1 54 40Z'/%3E%3C/g%3E%3Cg fill='%23001f5b' fill-opacity='.11'%3E%3Ccircle cx='20' cy='20' r='1.6'/%3E%3Ccircle cx='60' cy='20' r='1.6'/%3E%3Ccircle cx='20' cy='60' r='1.6'/%3E%3Ccircle cx='60' cy='60' r='1.6'/%3E%3Ccircle cx='40' cy='40' r='1.6'/%3E%3Ccircle cx='0' cy='0' r='1.6'/%3E%3Ccircle cx='80' cy='0' r='1.6'/%3E%3Ccircle cx='0' cy='80' r='1.6'/%3E%3Ccircle cx='80' cy='80' r='1.6'/%3E%3Ccircle cx='40' cy='0' r='1.1'/%3E%3Ccircle cx='0' cy='40' r='1.1'/%3E%3Ccircle cx='80' cy='40' r='1.1'/%3E%3Ccircle cx='40' cy='80' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23c98a00' stroke-opacity='.22' stroke-width='1'%3E%3Cpath d='M92 0A28 28 0 0 0 120 28M74 0A46 46 0 0 0 120 46M56 0A64 64 0 0 0 120 64M38 0A82 82 0 0 0 120 82'/%3E%3Cpath d='M83 7Q92 2 95 12Q86 16 83 7ZM101 14Q111 13 109 23Q99 23 101 14ZM110 30Q119 34 113 41Q105 37 110 30ZM64 12Q73 7 76 17Q67 21 64 12ZM88 30Q97 27 97 37Q88 38 88 30ZM105 48Q114 50 110 58Q101 56 105 48Z'/%3E%3C/g%3E%3Cg fill='%23c98a00' fill-opacity='.22'%3E%3Ccircle cx='74' cy='0' r='1.6'/%3E%3Ccircle cx='120' cy='46' r='1.6'/%3E%3Ccircle cx='88' cy='18' r='1.3'/%3E%3Ccircle cx='102' cy='32' r='1.3'/%3E%3Ccircle cx='70' cy='26' r='1.2'/%3E%3Ccircle cx='94' cy='50' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
  --glow: rgba(240, 160, 3, .10);

  --f-display: "Noto Serif Tamil", "Source Serif 4", Georgia, serif;
  --f-body: "Noto Sans Tamil", "Source Sans 3", system-ui, sans-serif;
  --r: 16px;
  /* Thoothu's text sizes */
  --fs-xs: 12.5px; --fs-s: 13.5px; --fs-m: 15px; --fs-h3l: 17px; --fs-l: 19px; --fs-xl: 26px; --fs-2xl: 34px; --fs-3xl: 54px;
  --oh-max: 1152px;
  color-scheme: light;
}
html[data-mode="dark"] {
  /* ---- night: the sky before dawn, a brass lamp ---- */
  --bg: #0e1322;
  --surface: #161d31;
  --surface-2: #1f2843;
  --tint: rgba(255, 255, 255, .025);
  --line: #2d3858;
  --line-strong: #44527a;
  --ink: #efe8d8;
  --ink-2: #cfd4e2;
  --muted: #9ea7c0;
  --lamp: #f2b45c;
  --lamp-hover: #f6c178;
  --on-lamp: #23170a;
  --lamp-text: #f2b45c;
  --lamp-soft: rgba(242, 180, 92, .14);
  --lamp-line: rgba(242, 180, 92, .45);
  --c-in: #8fd3e3; --c-in2: #b6e6f0; --c-hold: #f2b45c; --c-out: #f08e74; --c-holdout: #ab9ee9;
  --c-rest: #93c9a2; --c-prep: #cfc7b3; --c-stroke: #f08e74; --c-meditate: #ab9ee9;
  --ok: #86d0a0; --warn: #e8bb5a; --bad: #ec7b66;
  --seat: #090c16; --dot-off: rgba(239, 232, 216, .16); --track: rgba(255, 255, 255, .06); --strip: rgba(255, 255, 255, .05);
  --nose-off: rgba(239, 232, 216, .12); --nose-line: rgba(239, 232, 216, .3);
  --pl-1: #141b30; --pl-2: #090c16;
  --navbar: rgba(14, 19, 34, .9);
  --tip: #0a0e1a; --tip-ink: #efe8d8; --scrim: rgba(5, 8, 16, .66);
  --caution-ink: #e9dcc0; --note-bg: rgba(232, 187, 90, .07); --note-line: rgba(232, 187, 90, .25);
  --heat-0: #1f2843; --heat-1: rgba(242, 180, 92, .3); --heat-2: rgba(242, 180, 92, .52); --heat-3: rgba(242, 180, 92, .76); --heat-4: #f2b45c;
  --dots: rgba(239, 232, 216, .045);
  --kolam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23ffd890' stroke-opacity='.045' stroke-width='1.1'%3E%3Cpath d='M20 6Q34 20 20 34Q6 20 20 6ZM60 6Q74 20 60 34Q46 20 60 6ZM20 46Q34 60 20 74Q6 60 20 46ZM60 46Q74 60 60 74Q46 60 60 46Z'/%3E%3Cpath d='M14 0A14 14 0 0 1 0 14M66 0A14 14 0 0 0 80 14M0 66A14 14 0 0 1 14 80M80 66A14 14 0 0 0 66 80M54 40A14 14 0 0 1 40 54A14 14 0 0 1 26 40A14 14 0 0 1 40 26A14 14 0 0 1 54 40Z'/%3E%3C/g%3E%3Cg fill='%23ffd890' fill-opacity='.08'%3E%3Ccircle cx='20' cy='20' r='1.6'/%3E%3Ccircle cx='60' cy='20' r='1.6'/%3E%3Ccircle cx='20' cy='60' r='1.6'/%3E%3Ccircle cx='60' cy='60' r='1.6'/%3E%3Ccircle cx='40' cy='40' r='1.6'/%3E%3Ccircle cx='0' cy='0' r='1.6'/%3E%3Ccircle cx='80' cy='0' r='1.6'/%3E%3Ccircle cx='0' cy='80' r='1.6'/%3E%3Ccircle cx='80' cy='80' r='1.6'/%3E%3Ccircle cx='40' cy='0' r='1.1'/%3E%3Ccircle cx='0' cy='40' r='1.1'/%3E%3Ccircle cx='80' cy='40' r='1.1'/%3E%3Ccircle cx='40' cy='80' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23f2b45c' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M92 0A28 28 0 0 0 120 28M74 0A46 46 0 0 0 120 46M56 0A64 64 0 0 0 120 64M38 0A82 82 0 0 0 120 82'/%3E%3Cpath d='M83 7Q92 2 95 12Q86 16 83 7ZM101 14Q111 13 109 23Q99 23 101 14ZM110 30Q119 34 113 41Q105 37 110 30ZM64 12Q73 7 76 17Q67 21 64 12ZM88 30Q97 27 97 37Q88 38 88 30ZM105 48Q114 50 110 58Q101 56 105 48Z'/%3E%3C/g%3E%3Cg fill='%23f2b45c' fill-opacity='.16'%3E%3Ccircle cx='74' cy='0' r='1.6'/%3E%3Ccircle cx='120' cy='46' r='1.6'/%3E%3Ccircle cx='88' cy='18' r='1.3'/%3E%3Ccircle cx='102' cy='32' r='1.3'/%3E%3Ccircle cx='70' cy='26' r='1.2'/%3E%3Ccircle cx='94' cy='50' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
  --glow: rgba(242, 180, 92, .11);
  color-scheme: dark;
}
html[data-lang="ta"] .en { display: none !important; }
html[data-lang="en"] .ta { display: none !important; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip;
  background:
    radial-gradient(ellipse 90% 40% at 50% 0, var(--glow), transparent 62%),
    var(--kolam) 0 0 / 80px 80px,
    var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-m);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; border-radius: 8px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; margin: 0; text-wrap: balance; line-height: 1.25; }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-s); }
.xs { font-size: var(--fs-xs); }
[hidden] { display: none !important; }
.gap14 { gap: 14px !important; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--surface); color: var(--ink); padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }

/* ---------- Header ----------
   The shared Oliyon Research header (oliyon-header.css, a copy of oliyonresearch docs/brand/header/, loaded after
   this file). Here: the navy band with the kolam and the round flame badge, as in every tool (Ilakkam, Anu). */
.site-header { position: sticky; top: 0; z-index: 30; color: #fff; background: linear-gradient(100deg, #001a45 0%, #002663 55%, #0a3a8a 100%); box-shadow: 0 2px 10px rgba(0,26,69,.25); }
.site-header::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 4 Q34 28 52 28 Q34 28 28 52 Q22 28 4 28 Q22 28 28 4 Z' fill='none' stroke='%23ffffff' stroke-opacity='0.35' stroke-width='1'/%3E%3Ccircle cx='28' cy='28' r='1.3' fill='%23feb001' fill-opacity='0.5'/%3E%3C/svg%3E");
}
.oh-flame .flame-svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.oh-flame .badge { animation: badge-breathe 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.oh-flame .halo { animation: halo-pulse 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.oh-flame .flame-body { animation: flame-sway 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.oh-flame .outer { animation: flame-outer 1.35s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.oh-flame .mid { animation: flame-mid .95s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.oh-flame .core { animation: flame-core .7s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.oh-flame .blue { animation: flame-blue 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes flame-sway { 0%, 100% { transform: rotate(-2.2deg); } 35% { transform: rotate(1.6deg); } 65% { transform: rotate(2.4deg); } }
@keyframes flame-outer { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(.97, 1.05); } 60% { transform: scale(1.03, .97); } 80% { transform: scale(.99, 1.03); } }
@keyframes flame-mid { 0%, 100% { transform: scale(1, 1) translateY(0); opacity: .95; } 40% { transform: scale(.94, 1.08) translateY(-1px); opacity: 1; } 75% { transform: scale(1.05, .96) translateY(1px); opacity: .9; } }
@keyframes flame-core { 0%, 100% { transform: scale(1, 1); opacity: .95; } 50% { transform: scale(.9, 1.1); opacity: 1; } }
@keyframes flame-blue { 0%, 100% { transform: scale(1, 1); opacity: .8; } 50% { transform: scale(1.12, .9); opacity: 1; } }
@keyframes halo-pulse { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes badge-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } }
/* the day / night switch sits beside the language pill, drawn like it (a round outlined button) */
.oh-theme { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: transparent; color: #fff; cursor: pointer; flex: none; }
.oh-theme:hover { border-color: #feb001; background: rgba(255,255,255,.1); }
.oh-theme svg { width: 17px; height: 17px; }
.oh-theme .i-sun, html[data-mode="dark"] .oh-theme .i-moon { display: none; }
html[data-mode="dark"] .oh-theme .i-sun { display: block; }

/* ---------- Flame (hero, footer) ---------- */
.flame { position: relative; display: grid; place-items: center; }
.flame__glow {
  position: absolute; inset: 15% 5% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240, 160, 3, 0.38), rgba(240, 160, 3, 0) 70%);
  filter: blur(6px); animation: glow 3.2s ease-in-out infinite;
}
.flame__shape { position: relative; width: 100%; height: auto; transform-origin: 50% 100%; animation: flicker 3.2s ease-in-out infinite; }
.flame__shape path { fill: var(--flame); }
.is-paused .flame__glow, .is-paused .flame__shape { animation-play-state: paused; }
@keyframes flicker { 0%, 100% { transform: scale(1, 1) skewX(0deg); } 20% { transform: scale(0.985, 1.025) skewX(-1.2deg); } 45% { transform: scale(1.01, 0.985) skewX(0.8deg); } 70% { transform: scale(0.99, 1.03) skewX(1.4deg); } }
@keyframes glow { 0%, 100% { opacity: 0.75; transform: scale(1); } 45% { opacity: 1; transform: scale(1.06); } 70% { opacity: 0.85; transform: scale(0.97); } }

/* ---------- Hero (today): the live hearth (hearth.js), its card and time bar, then the name and what Amudhu is.
   The layout is Thingal's live sky (thingal.css "the hero"), so the family looks one. ---------- */
.hero { max-width: var(--oh-max); margin: 0 auto; padding: 14px 12px 6px; text-align: center; }
.hero__sky { display: grid; gap: 12px; text-align: left; }
.sky-head { text-align: left; margin: 2px 2px 10px; }
.sky-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; color: var(--lamp-text); text-transform: uppercase; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 0 rgba(229, 72, 77, .6); animation: livePulse 2s ease-out infinite; flex: none; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .55); } 70% { box-shadow: 0 0 0 7px rgba(229, 72, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); } }
.sky-title { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-xl); line-height: 1.25; margin-top: 2px; color: var(--ink); }
.sky-sub { color: var(--ink-2); font-size: var(--fs-s); line-height: 1.6; margin-top: 4px; max-width: 46rem; }
.sky-col { display: grid; gap: 10px; align-content: start; }
.sky { position: relative; border-radius: 18px; overflow: hidden; background: #050a1c; box-shadow: 0 6px 24px rgba(0, 20, 60, .18); }
/* the picture, then a strip under it that says what is on the fire or the leaf */
.hh-stage { position: relative; }
.hearth canvas { display: block; width: 100%; height: 264px; }
.hh-dir { position: absolute; top: calc(60% - 22px); font-size: 11px; font-weight: 600; letter-spacing: .03em; color: rgba(255, 255, 255, .82); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); pointer-events: none; }
.hh-e { left: 10px; } .hh-w { right: 10px; }
.hh-sunl { position: absolute; top: 10px; left: 10px; font-size: 11.5px; color: #fff; background: rgba(5, 10, 28, .42); border: 1px solid rgba(255, 214, 150, .28); border-radius: 999px; padding: 2px 9px; pointer-events: none; }
.hh-sunl:empty { display: none; }
.hh-cap { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; font-size: var(--fs-s); line-height: 1.45; color: #f6ecd8; background: linear-gradient(180deg, #0c1226, #0a0f20); border-top: 1px solid rgba(255, 214, 150, .18); }
.hh-cap::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #f0a003; box-shadow: 0 0 8px rgba(240, 160, 3, .8); flex: none; }
/* the time bar: earlier (1 hour, 45, 30, 15 minutes) · now · later · a whole day played in 24 s */
.sky-time { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "back fwd" "now play"; gap: 8px; align-items: stretch; }
.st-back { grid-area: back; } .st-fwd { grid-area: fwd; } .st-now { grid-area: now; } .st-play { grid-area: play; }
.st-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.st-steps button { display: grid; justify-items: center; align-content: center; gap: 0; min-height: 44px; padding: 2px 0; border: 0; border-radius: 9px; background: transparent; color: var(--ink); cursor: pointer; }
.st-steps button b { font-size: 15px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.st-steps button small { font-size: 11px; color: var(--muted); line-height: 1.2; }
.st-steps button:hover, .st-steps button:focus-visible { background: var(--lamp-soft); }
.st-steps button:active { background: var(--lamp); color: var(--on-lamp); }
.st-back b { color: var(--ink-2); }
.st-now, .st-play { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 6px 14px; border-radius: 12px; font-weight: 600; font-size: var(--fs-s); cursor: pointer; }
.st-now { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.st-now[aria-pressed="false"] { border-color: var(--lamp); background: var(--lamp-soft); color: var(--lamp-text); }
.st-now[aria-pressed="false"] .live-dot { background: var(--muted); animation: none; }
.st-play { border: 0; background: linear-gradient(135deg, #001f5b, #10347a); color: #fff; box-shadow: 0 4px 12px rgba(0, 31, 91, .25); }
.st-play svg { width: 16px; height: 16px; fill: #feb001; }
.st-play[aria-pressed="true"] { background: linear-gradient(135deg, #f0a003, #feb001); color: #001f5b; }
.st-play[aria-pressed="true"] svg { fill: #001f5b; }
/* the card beside the picture */
.sky-info { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: grid; gap: 7px; align-content: start; }
.si-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.si-top b { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-xl); line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.si-shift { color: var(--lamp-text); }
.si-shift:empty { display: none; }
.si-tamil { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-h3l); color: var(--lamp-text); }
.si-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; font-size: var(--fs-s); align-items: baseline; color: var(--ink); }
.si-l { color: var(--muted); font-size: var(--fs-xs); }
.hh-foot { margin-top: 2px; }
/* the 24-hour ring: the six parts of the day, noon at the top, the Sun (or, at night, its place) going round */
.hh-dial { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.hh-ring { display: block; width: 100%; height: auto; overflow: visible; }
.hr-track { fill: none; stroke: var(--track); stroke-width: 12; }
.hr-seg { fill: none; stroke-width: 11; opacity: .5; transition: opacity .3s, stroke-width .3s; }
.hr-seg.on { opacity: 1; stroke-width: 15; }
.hr-vaikarai { stroke: #7182c8; } .hr-kaalai { stroke: #f2b84b; } .hr-nadupagal { stroke: #eb8a2c; }
.hr-erpadu { stroke: #d6a03e; } .hr-maalai { stroke: #c76a86; } .hr-naduiravu { stroke: #34477e; }
html[data-mode="dark"] .hr-naduiravu { stroke: #5b70b4; }
.hr-tick { stroke: var(--lamp-text); stroke-width: 2; stroke-linecap: round; }
.hr-meal { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.4; }
.hr-meal.s-b, .hr-meal.s-l, .hr-meal.s-d { fill: var(--lamp); stroke: var(--on-lamp); }
.hr-hour { font-size: 8.5px; fill: var(--muted); text-anchor: middle; font-family: var(--f-body); }
.hr-hand { stroke: var(--ink-2); stroke-width: 1.4; stroke-linecap: round; opacity: .55; }
.hr-hub { fill: var(--ink-2); }
.is-day .hr-sun { fill: #ffc93c; stroke: #e08a00; stroke-width: 1; } .is-day .hr-sun-glow { fill: rgba(255, 190, 60, .35); }
.is-night .hr-sun { fill: #e8e3d2; stroke: #8a92ad; stroke-width: 1; } .is-night .hr-sun-glow { fill: rgba(190, 200, 255, .18); }
.hh-now { display: grid; gap: 2px; min-width: 0; }
.hh-per b { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-l); color: var(--lamp-text); line-height: 1.25; }
.hh-perf { font-size: var(--fs-s); color: var(--ink-2); line-height: 1.5; margin-top: 2px; }
@media (max-width: 359px) { .hh-dial { grid-template-columns: 112px minmax(0, 1fr); } }
@media (min-width: 640px) {
  .sky-time { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; grid-template-areas: "back now fwd play"; }
}
@media (min-width: 760px) { .hearth canvas { height: 300px; } }
@media (min-width: 900px) {
  .hero__sky { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); align-items: stretch; }
  .hearth canvas { height: 330px; }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none !important; } }
.hero__brand { font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; line-height: 1.3; color: var(--ink); margin: 18px auto 0; text-align: center; }
/* the brand and its tagline sit in the middle of the page, over the title (as Thingal's, NK 6 Nov 2026) */
.hero__tagline, .hero__ladder, .hero__lede { margin-left: auto; margin-right: auto; text-align: center; }
.hero__tagline { font-family: var(--f-display); font-weight: 600; font-size: .85rem; color: var(--lamp-text); margin-top: 2px; }
.hero__lockup { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; max-width: 520px; margin: 14px auto 0; }
.hero__lockup::before, .hero__lockup::after { content: ''; height: 2px; background: var(--ink); border-radius: 2px; opacity: .85; }
.hero__title { font-size: 1.55rem; color: var(--ink); line-height: 1.32; }
.hero__ladder { max-width: 34rem; margin: 8px auto 0; font-family: var(--f-display); font-weight: 600; font-size: 1rem; color: var(--lamp-text); line-height: 1.5; }
.hero__lede { max-width: 34rem; margin: 8px auto 0; font-size: 1rem; line-height: 1.8; color: var(--ink-2); }
@media (min-width: 760px) {
  .hero { padding-top: 22px; }
  .hero__brand { font-size: 1.7rem; }
  .hero__tagline { font-size: .95rem; }
  .hero__title { font-size: clamp(1.75rem, 3.6vw, 2.55rem); }
  .hero__ladder, .hero__lede { font-size: 1.08rem; }
}

/* ---------- shell ---------- */
main { flex: 1; }
.app { max-width: 580px; margin: 0 auto; padding: 18px 16px 40px; }
@media (max-width: 899px) { body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); } }
.view { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.card {
  background: var(--corner) top right / 112px 112px no-repeat, var(--grain) 0 0 / 180px 180px, var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px;
  display: grid; gap: 14px; box-shadow: 0 1px 2px rgba(0, 31, 91, .04);
}
html[data-mode="dark"] .card { background: var(--corner) top right / 112px 112px no-repeat, var(--grain) 0 0 / 180px 180px, linear-gradient(180deg, rgba(255,255,255,.018), transparent 40%), var(--surface); box-shadow: none; }
.card h2 { font-size: var(--fs-l); }
.card h3 { font-size: 15.5px; font-family: var(--f-body); font-weight: 600; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack { display: grid; gap: 8px; }
.eyebrow { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
:lang(ta) .eyebrow, :lang(ta) .section-title { letter-spacing: .02em; font-size: var(--fs-s); text-transform: none; }

/* ---------- Footer (as every Oliyon Research tool) ---------- */
.site-footer { color: #dfe6f5; padding: 26px 0 26px; margin-top: 16px; }
/* the navy, the gold kolam, the parapet edge and the gold line: the shared texture (assets/css/oliyon-texture.css) */
.site-footer .wrap { max-width: var(--oh-max); margin: 0 auto; padding: 0 16px; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.footer__brand { display: grid; gap: .6rem; align-content: start; }
.footer__brand .flame { width: 2.2rem; justify-items: start; }
.footer__brand .flame__glow { display: none; }
.footer__brand .footer__name { font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; color: #fff; line-height: 1.25; }
.footer__brand p { color: #b9c4dc; max-width: 22rem; font-size: 15px; }
.footer__col h2 { font-family: var(--f-body); font-size: 14.5px; font-weight: 700; color: var(--flame); margin-bottom: .6rem; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: 15px; }
.footer__bottom { margin-top: 2.2rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; font-size: 13.5px; color: #9fb0d0; }
.footer__note { flex-basis: 100%; }
.install { display: grid; gap: .4rem; justify-items: start; }
.install[hidden], .install__btn[hidden], .install__ios[hidden] { display: none; }
.install__btn { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid rgba(240,160,3,.6); background: transparent; color: #fff; border-radius: 999px; padding: .3rem .9rem; font-size: 13.5px; line-height: 1.5; cursor: pointer; }
.install__btn:hover { border-color: var(--flame); background: rgba(255,255,255,.08); }
.install__btn svg { width: 1rem; height: 1rem; flex: none; }
.install__ios { color: #c9d2e2; max-width: 36ch; }
@media (max-width: 56rem) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 30rem) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; } .footer__col:last-child { grid-column: 1 / -1; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink); font-size: var(--fs-s); font-weight: 500;
  transition: background .15s, border-color .15s, transform .1s;
}
.btn:hover { border-color: var(--line-strong); }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--lamp); color: var(--on-lamp); border-color: var(--lamp); font-weight: 600; }
.btn.primary:hover { background: var(--lamp-hover); border-color: var(--lamp-hover); }
.btn.big { min-height: 56px; font-size: var(--fs-m); padding: 0 26px; width: 100%; }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--bad); }
.btn.sm { min-height: 34px; padding: 0 12px; font-size: var(--fs-xs); }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); display: inline-grid; place-items: center; padding: 0; }
.icon-btn svg { width: 18px; height: 18px; }
.link { background: none; border: 0; color: var(--lamp-text); padding: 0; font-size: var(--fs-s); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- today ---------- */
.today { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.ring { width: 76px; height: 76px; position: relative; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .lbl { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-size: 22px; }
.week { display: flex; justify-content: space-between; max-width: 220px; margin-top: 6px; }
.week span { width: 22px; display: grid; justify-items: center; gap: 3px; font-size: 10px; color: var(--muted); }
.week i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--line); display: block; }
.week i.on { background: var(--lamp); border-color: var(--lamp); }
.week i.today { box-shadow: 0 0 0 2px rgba(242,180,92,.35); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.chip.lamp { color: var(--lamp-text); border-color: var(--lamp-line); }

/* ---------- fields ---------- */
.field { display: grid; gap: 6px; }
.field > label, .field > .lbl { font-size: var(--fs-s); color: var(--muted); }
.unit-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
input[type="range"] { width: 100%; accent-color: var(--lamp); height: 28px; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; }
.fact { flex: 1 1 120px; background: var(--tint); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.fact b { display: block; font-family: var(--f-display); font-weight: 400; font-size: var(--fs-l); }
.fact span { font-size: var(--fs-xs); color: var(--muted); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button {
  border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 999px;
  padding: 7px 13px; font-size: var(--fs-s); min-height: 36px;
}
.seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); border-color: var(--lamp); }
details.more { border-top: 1px solid var(--line); padding-top: 12px; }
details.more summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-s); }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: "+"; color: var(--muted); font-size: 18px; }
details.more[open] summary::after { content: "−"; }
details.more .inner { display: grid; gap: 12px; padding-top: 12px; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.switch input { appearance: none; width: 44px; height: 26px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); position: relative; flex: none; cursor: pointer; transition: background .15s; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.switch input:checked { background: var(--lamp-soft); border-color: var(--lamp); }
.switch input:checked::after { transform: translateX(18px); background: var(--lamp); }
.inline-fields { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-s); color: var(--muted); }
.inline-fields input[type="number"] { width: 64px; }
input[type="number"], input[type="text"], input[type="time"], input[type="date"], input[type="url"], input[type="search"], input[type="email"], select, textarea {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; min-height: 40px; color: var(--ink);
}
textarea { width: 100%; min-height: 70px; resize: vertical; }
select { max-width: 100%; }
.info ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.caution { border-left: 3px solid var(--warn); padding: 6px 0 6px 12px; font-size: var(--fs-s); color: var(--caution-ink); }
/* ---------- library ---------- */
.tabs2 { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.tabs2 button { flex: 1; border: 0; background: none; padding: 9px 8px; border-radius: 999px; color: var(--muted); font-size: var(--fs-s); }
.tabs2 button[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); }
.cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cats button { flex: none; }
.list { display: grid; gap: 10px; }
.item {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; text-align: left;
}
.item.current { border-color: var(--lamp); }
.item h3 { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-h3l); }
.item .alt { color: var(--muted); font-size: var(--fs-s); }
.item .desc { grid-column: 1 / -1; font-size: var(--fs-s); color: var(--muted); }
.item .meta { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.item .acts { display: flex; gap: 6px; }
.ratio-chip { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-m); color: var(--ink); padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.steps-line { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--fs-xs); color: var(--muted); }
.steps-line .arrow { opacity: .5; }
.progress-bar { grid-column: 1 / -1; height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.progress-bar i { display: block; height: 100%; background: var(--lamp); border-radius: 999px; }
.section-title { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 6px 2px -2px; }

/* ---------- progress ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.tile b { display: block; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-2xl); line-height: 1.1; }
.tile span { font-size: var(--fs-xs); color: var(--muted); }
.chart-wrap { position: relative; overflow-x: auto; }
.chart-wrap svg { display: block; width: 100%; height: auto; }
.tooltip {
  position: absolute; pointer-events: none; background: var(--tip); border: 1px solid var(--line); color: var(--tip-ink);
  font-size: var(--fs-xs); padding: 5px 9px; border-radius: 8px; white-space: nowrap; transform: translate(-50%, -110%); z-index: 3;
}
.legend { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); justify-content: flex-end; }
.legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.score { display: flex; align-items: baseline; gap: 10px; }
.score b { font-family: var(--f-display); font-weight: 400; font-size: 44px; line-height: 1; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: var(--fs-xs); border: 1px solid currentColor; }
.hist { display: grid; gap: 8px; }
.hrow { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hrow:last-child { border-bottom: 0; }
.hrow .t { font-weight: 600; }
.hrow .d { font-size: var(--fs-xs); color: var(--muted); }
.hrow .n { grid-column: 1 / -1; font-size: var(--fs-s); color: var(--muted); font-style: italic; }
.hrow .x { background: none; border: 0; color: var(--muted); font-size: var(--fs-xs); padding: 4px; }
.sync { display: flex; gap: 8px; align-items: center; font-size: var(--fs-s); color: var(--muted); }
.sync i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.sync.cloud i { background: var(--ok); }
.sync.err i { background: var(--warn); }

/* ---------- settings ---------- */
.set-group { display: grid; gap: 4px; }
.set-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; min-height: 44px; }
.set-row label { font-size: var(--fs-s); }
.set-row select, .set-row input[type="time"] { min-width: 150px; }
.vol { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; font-size: var(--fs-s); }
.note { font-size: var(--fs-s); color: var(--muted); background: var(--note-bg); border: 1px solid var(--note-line); border-radius: 12px; padding: 10px 12px; }

/* ---------- bottom tab bar (phones only; on wide screens the header carries the sections) ---------- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--navbar); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
.nav .in { max-width: 580px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nav a { color: var(--muted); padding: 9px 2px 8px; display: grid; justify-items: center; gap: 3px; font-size: 12px; text-decoration: none; text-align: center; line-height: 1.2; min-width: 0; }
:lang(ta) .nav a { font-size: 11px; }
.nav a svg { width: 22px; height: 22px; }
.nav a[aria-current="page"] { color: var(--lamp-text); }
@media (min-width: 900px) { .nav { display: none; } }

/* ---------- sheet (dialog) ---------- */
.sheet-back { position: fixed; inset: 0; background: var(--scrim); z-index: 60; display: grid; align-items: end; justify-items: center; }
.sheet {
  width: 100%; max-width: 580px; max-height: 92%; overflow-y: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: 22px 22px 0 0; padding: 20px 18px calc(22px + env(safe-area-inset-bottom)); display: grid; gap: 16px;
  animation: up .22s ease-out;
}
@media (min-width: 640px) { .sheet-back { align-items: center; } .sheet { border-radius: 22px; } }
@keyframes up { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
.sheet h2 { font-size: var(--fs-xl); }
.sheet .acts { display: flex; gap: 10px; flex-wrap: wrap; }
.sheet .acts .btn { flex: 1 1 140px; }
.moods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.moods button { border: 1px solid var(--line); background: transparent; border-radius: 12px; padding: 8px 2px; display: grid; justify-items: center; gap: 2px; color: var(--muted); font-size: 11px; line-height: 1.2; min-height: 64px; }
.moods button b { font-family: var(--f-display); font-weight: 400; font-size: 22px; color: var(--ink); }
.moods button[aria-pressed="true"] { border-color: var(--lamp); background: var(--lamp-soft); color: var(--ink); }
.big-timer { font-family: var(--f-display); font-size: 72px; text-align: center; line-height: 1; font-variant-numeric: tabular-nums; }
.rstep { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.rstep .ctl { display: flex; gap: 4px; }
.rstep .ctl button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); padding: 0; }
.rstep .fields { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--fs-s); color: var(--muted); }
.rstep .fields input[type="number"] { width: 70px; }
.toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--tip); color: var(--tip-ink); border: 1px solid var(--line); padding: 10px 16px; border-radius: 999px; font-size: var(--fs-s); z-index: 90; }

@media (min-width: 720px) {
  .tiles { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- day-theme touches ---------- */
html[data-mode="light"] .ring circle:first-child { stroke: var(--surface-2); }
html[data-mode="light"] .seg button[aria-pressed="true"] { background: var(--lamp-soft); }
html[data-mode="light"] .lang button[aria-pressed="true"] { background: var(--surface-2); }
.dim-layer { color: #6b6458; }
@media (prefers-reduced-motion: reduce) {
  .flame__glow, .flame__shape, .oh-flame * { animation: none !important; }
}

/* ---------- forms ---------- */
.check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--lamp); }
.bad { color: var(--bad); }
/* ---------- account and staff pages ---------- */
a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.tiles.mg { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); }
.chart-wrap.mg svg { max-height: 220px; width: 100%; }
.hrow .chip { margin-left: 6px; vertical-align: 2px; }
.tile .xs { display: block; margin-top: 2px; }
.visit-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 22px; }
.visit-tables h3 { margin: 14px 0 2px; }
/* the staff page's four tabs: two by two on a phone, one row when there is room */
.tabs2.mg { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); border-radius: 18px; }
.tabs2.mg button { min-width: 0; border-radius: 14px; }
/* the staff page's Security tab (admins; account.js loadSecurity): lists, not wide tables, so it reads on a phone */
.good { color: var(--ok); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.chip.good { color: var(--ok); border-color: currentColor; }
.chip.warn { color: var(--warn); border-color: currentColor; }
.chip.bad { color: var(--bad); border-color: currentColor; }
.tile.hot b { color: var(--bad); }
.sc-ip { background: none; border: 0; padding: 0; color: inherit; text-align: left; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.sc-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sc-f { display: grid; gap: 2px; min-width: 0; }
.sc-f select, .sc-f input { width: 100%; min-width: 0; }
.sc-ua { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hrow .t.mono { font-weight: 500; overflow-wrap: anywhere; }
/* share sheet */
.share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.share-row .btn { flex: 1 1 120px; }
.share-url { width: 100%; font-size: var(--fs-xs); color: var(--muted); }
/* sign-in: the Google link in the sheet, and the sign-in page */
.or-line { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: var(--fs-xs); }
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.g-link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; }
/* the sign-in form's bot trap (api/vaasi/auth.py form_check): off-screen, never seen or filled by people */
.fg-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.signin-page { max-width: 520px; margin: 0 auto; padding: 28px 16px 56px; }
.signin-card { display: grid; gap: 14px; }
.signin-card h1 { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-2xl); }
.g-btn { min-height: 44px; display: flex; justify-content: center; }



/* =====================================================================================================
   Amudhu's own pieces
   ===================================================================================================== */
:root { --clay: #b5652e; --clay-dark: #8a4a20; --leaf: #2f8a55; --leaf-dark: #1d6b45;
  --t-inippu: #c98a00; --t-pulippu: #6f9a1c; --t-uvarppu: #3a7fb0; --t-kaarppu: #c4553a; --t-kaippu: #4f6b3a; --t-thuvarppu: #8a5a7a; }
html[data-mode="dark"] { --clay: #d88a55; --clay-dark: #b5652e; --leaf: #93c9a2; --leaf-dark: #6fb486;
  --t-inippu: #f2b45c; --t-pulippu: #b9d77a; --t-uvarppu: #8fc3e8; --t-kaarppu: #f08e74; --t-kaippu: #a9c79a; --t-thuvarppu: #d6a6c6; }
.lamp-text { color: var(--lamp-text); }
.n2 { grid-column: 1 / -1; }
.alt { color: var(--muted); font-size: var(--fs-s); }
.back { justify-self: start; text-decoration: none; }
.intro h2 { font-size: var(--fs-xl); }
.h3 { font-size: var(--fs-h3l) !important; }
.check-inline { display: inline-flex; align-items: center; gap: 8px; }
.check-inline input { width: 18px; height: 18px; accent-color: var(--lamp); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip.warn { color: var(--warn); border-color: currentColor; }
.chip.good { color: var(--ok); border-color: currentColor; }
.chip.vl { color: var(--leaf-dark); border-color: var(--leaf); }
html[data-mode="dark"] .chip.vl { color: var(--leaf); }
.chip.muted { opacity: .8; }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: var(--fs-s); text-decoration: none; min-height: 34px; }
.chip-btn:hover { border-color: var(--lamp); }
.chip-btn.on, .chip-btn[aria-pressed="true"] { border-color: var(--lamp); background: var(--lamp-soft); color: var(--lamp-text); }
.warn-t { color: var(--warn); }
.badge { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; vertical-align: 1px; border: 1px solid currentColor; }
.b-text { color: #8a4a20; } .b-vallalar { color: var(--leaf-dark); } .b-kural { color: #6a5acd; } .b-research { color: #17809b; } .b-folk { color: #7a705c; } .b-ours { color: var(--lamp-text); }
html[data-mode="dark"] .b-text { color: #e7b07a; } html[data-mode="dark"] .b-vallalar { color: var(--leaf); } html[data-mode="dark"] .b-kural { color: #ab9ee9; } html[data-mode="dark"] .b-research { color: #8fd3e3; } html[data-mode="dark"] .b-folk { color: #cfc7b3; }
.taste { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; background: var(--tint); border: 1px solid var(--line); }
.taste::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.t-inippu { color: var(--t-inippu); } .t-pulippu { color: var(--t-pulippu); } .t-uvarppu { color: var(--t-uvarppu); } .t-kaarppu { color: var(--t-kaarppu); } .t-kaippu { color: var(--t-kaippu); } .t-thuvarppu { color: var(--t-thuvarppu); }
.tastes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

.hero__disc { max-width: 40rem; margin: 10px auto 0; font-size: var(--fs-s); color: var(--caution-ink); background: var(--note-bg); border: 1px solid var(--note-line); border-radius: 12px; padding: 8px 12px; text-align: center; }

/* ---------- safety, everywhere ---------- */
.disc { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-xs); color: var(--caution-ink); background: var(--note-bg); border: 1px solid var(--note-line); border-radius: 12px; padding: 8px 10px; line-height: 1.6; }
.disc svg { flex: none; margin-top: 2px; color: var(--warn); }
.disc a { color: var(--lamp-text); }
.safe-first, .safety-top { border: 1.5px solid var(--warn); box-shadow: 0 0 0 3px var(--note-bg); }
.sf-i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--note-bg); color: var(--warn); flex: none; }
.sf-i svg { width: 24px; height: 24px; }
.cautions { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cautions li { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-xs); color: var(--muted); }
.cautions li.mine { color: var(--caution-ink); font-weight: 600; }
.cautions li svg { flex: none; color: var(--warn); margin-top: 2px; }
.caution.strong { font-weight: 600; background: var(--note-bg); border-radius: 0 10px 10px 0; padding-right: 10px; }
.emergency { font-weight: 600; color: var(--bad); border: 1px solid currentColor; border-radius: 12px; padding: 8px 12px; font-size: var(--fs-s); }
.no-list, .yes-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.no-list li, .yes-list li { position: relative; padding-left: 28px; font-size: var(--fs-s); line-height: 1.6; }
.no-list li::before, .yes-list li::before { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.no-list li::before { content: "✕"; background: rgba(163, 38, 28, .12); color: var(--bad); }
.yes-list li::before { content: "✓"; background: rgba(29, 107, 69, .12); color: var(--ok); }
.flags { display: grid; gap: 10px; }
.flags .check { padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; }
.flags .check:has(input:checked) { border-color: var(--warn); background: var(--note-bg); }

/* ---------- today: the season and the plate ---------- */
.season-card h2 { font-size: var(--fs-xl); }
.town-btn { border: 1px solid var(--lamp-line); background: var(--lamp-soft); color: var(--ink); border-radius: 999px; padding: 4px 12px; font-size: var(--fs-s); min-height: 34px; }
.plate { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pl-m { border-left: 3px solid var(--line); padding: 2px 0 2px 12px; display: grid; gap: 4px; }
.pl-m.s-l { border-left-color: var(--lamp); }
.pl-m.s-b, .pl-m.s-d { border-left-color: var(--clay); }
.pl-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pl-h b { font-family: var(--f-display); font-size: var(--fs-m); }
.pl-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pl-items.one li + li::before { content: "/ "; color: var(--muted); }
.pl-items.one { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.pl-it a { color: var(--ink); text-decoration: none; }
.pl-it a:hover b { text-decoration: underline; }
.pl-it b { font-weight: 600; }
.pl-it.kee b { color: var(--leaf-dark); }
html[data-mode="dark"] .pl-it.kee b { color: var(--leaf); }
.pl-k { margin-left: 6px; font-size: var(--fs-xs); padding: 1px 8px; border-radius: 999px; background: rgba(47, 138, 85, .12); color: var(--leaf-dark); }
html[data-mode="dark"] .pl-k { color: var(--leaf); }
.feast { border: 1px dashed var(--lamp-line); background: var(--lamp-soft); border-radius: 12px; padding: 8px 12px; display: grid; gap: 6px; font-size: var(--fs-s); }
.kee-card { border-left: 4px solid var(--leaf); }
.kee-card h2 a { color: var(--ink); text-decoration: none; }
blockquote.verse { margin: 0; padding: 10px 14px; border-left: 3px solid var(--lamp); background: var(--tint); border-radius: 0 12px 12px 0; }
blockquote.verse p { font-family: var(--f-display); font-weight: 600; line-height: 1.9; }
.tcheck b { color: var(--ok); }
.up { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-s); }
.progress-bar { height: 8px; }

/* ---------- my chart ---------- */
.day-plan.is-today { border-color: var(--lamp); }
.shop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; columns: 2; column-gap: 18px; }
.shop-list li { display: flex; justify-content: space-between; gap: 8px; break-inside: avoid; font-size: var(--fs-s); padding: 3px 0; border-bottom: 1px dotted var(--line); }
.shop-list input:checked + span { text-decoration: line-through; color: var(--muted); }
@media (max-width: 520px) { .shop-list { columns: 1; } }

/* ---------- the greens, the foods, the dishes ---------- */
.kmonth { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; font-size: var(--fs-s); }
.kmonth li.on { font-weight: 700; color: var(--leaf-dark); }
a.item, .list .item { text-decoration: none; color: inherit; }
a.item:hover { border-color: var(--lamp-line); }
.item.off { opacity: .62; }
.item .chips { justify-content: flex-end; }
.item-page h2 { font-size: var(--fs-2xl); }
.kv { display: grid; gap: 10px; }
.kv p { font-size: var(--fs-s); line-height: 1.7; }
.srcs { line-height: 1.7; }
.srcs a { color: var(--lamp-text); }
.ing { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ing li { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-s); padding: 4px 0; border-bottom: 1px dotted var(--line); }
.steps { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; font-size: var(--fs-s); line-height: 1.7; }
.fact b.sm { font-size: var(--fs-m); font-family: var(--f-display); }
.dl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dl li { display: grid; gap: 2px; font-size: var(--fs-s); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.dl li:last-child { border-bottom: 0; }
.dl li b { font-family: var(--f-display); }
.dl .badge { justify-self: start; }
.eat { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; }
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.tbl th, .tbl td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }

/* ---------- seasons, body, path ---------- */
.season.now { border-color: var(--lamp); box-shadow: 0 0 0 3px var(--lamp-soft); }
.periods { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.periods li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 2px 12px; padding: 6px 8px; border-radius: 10px; }
.periods li .small { grid-column: 2; }
.periods li.on { background: var(--lamp-soft); }
.bars { display: grid; gap: 6px; }
.bar { display: grid; grid-template-columns: 110px minmax(0, 1fr) 28px; gap: 8px; align-items: center; font-size: var(--fs-s); }
.bar i { display: block; height: 10px; border-radius: 999px; background: var(--lamp); }
.quiz ol { margin: 0; padding-left: 1.3em; display: grid; gap: 14px; }
.path { margin: 0; padding-left: 1.4em; display: grid; gap: 10px; }
.path li { display: grid; gap: 2px; }
.path li.on { background: var(--lamp-soft); border-radius: 10px; padding: 6px 8px; margin-left: -8px; }
.path li.off { opacity: .6; }
.src-list { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: var(--fs-s); }
.src-list a { color: var(--ink); }

/* ---------- print: the chart and a recipe on paper ---------- */
@media print {
  .site-header, .nav, .site-footer, .hero, .xfam, .rm-hero, .row .btn, .sheet-back, .toast, .safe-first { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .card { box-shadow: none; border: 1px solid #ccc; background: #fff; break-inside: avoid; }
  .app { max-width: none; padding: 0; }
  .view { display: block !important; columns: 1 !important; }
  .view > * { margin-bottom: 10px !important; }
  a { color: #000; text-decoration: none; }
}

/* ---------- sheets and the staff editor ---------- */
.sheet { position: relative; }
.sheet-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; }
.sheet > h2:first-of-type, .sheet > .eyebrow:first-of-type { padding-right: 44px; }
.sheet.wide { max-width: 820px; }
.sheet .n2 { display: block; }
fieldset.pair { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; margin: 0; min-width: 0; }
fieldset.pair legend { padding: 0 6px; color: var(--muted); }
fieldset.pair input, fieldset.pair textarea, fieldset.pair select { width: 100%; }
.rule-f .row .field { flex: 1 1 150px; }
.ed-reason, .ed-source { display: grid; gap: 6px; padding: 8px; border: 1px dashed var(--line); border-radius: 10px; }
.ed-source { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: center; }
.ed-reason .btn, .ed-source .btn { justify-self: start; }
.diff { display: grid; gap: 10px; }
.diff pre { white-space: pre-wrap; font-family: var(--f-body); font-size: var(--fs-s); margin: 4px 0 0; padding: 8px 10px; border-radius: 8px; }
.diff .was { color: var(--muted); text-decoration: line-through; background: rgba(163, 38, 28, .06); }
.diff .now { background: rgba(29, 107, 69, .08); }
.sg-text { white-space: pre-wrap; }
.sg-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.sg-acts select { min-height: 34px; padding: 4px 8px; }

/* ---------- 5 Nov 2026 (evening): the Oliyon family cards, tonight's sky, practices, birds, close calls ---------- */
.i-sm { width: 16px; height: 16px; flex: none; }
.btn .i-sm, .btn svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }
.td-num b { font-family: var(--f-display); color: var(--lamp-text); }
/* the other tools, offered where they help: a gold-edged card with the tool's name on a navy badge */
.xfam { display: grid; gap: 10px; }
.xfam.small { margin-top: 12px; }
.xf-h { display: flex; align-items: center; gap: 8px; font-size: var(--fs-s); font-family: var(--f-body); font-weight: 700; letter-spacing: .02em; color: var(--lamp-text); margin: 0; }
.xf-h::before { content: ""; width: 10px; height: 14px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: linear-gradient(180deg, #ffe17a, #ff9a1f 60%, #ff6a00); box-shadow: 0 0 10px rgba(255, 170, 40, .6); }
.xf-list { display: grid; gap: 10px; }
@media (min-width: 720px) { .xf-list { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.xcard { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "badge go" "body go"; gap: 6px 10px; align-items: center;
  padding: 12px 14px; border-radius: 14px; text-decoration: none; color: var(--ink);
  background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, #f0a003, #ffd36b 40%, #001f5b) border-box;
  border: 1.5px solid transparent; box-shadow: 0 6px 18px rgba(0, 31, 91, .08); transition: transform .15s ease, box-shadow .15s ease; }
.xcard:hover, .xcard:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 31, 91, .16); outline: none; }
.xc-badge { grid-area: badge; justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 999px; background: #001f5b; color: #fff; font-family: var(--f-display); font-weight: 600; font-size: 13px; }
.xc-flame { width: 8px; height: 11px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: linear-gradient(180deg, #ffe17a, #ff9a1f 60%, #ff6a00); }
.xc-body { grid-area: body; display: grid; gap: 2px; }
.xc-body b { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-m); line-height: 1.35; }
.xc-body span { font-size: var(--fs-s); color: var(--ink-2); line-height: 1.5; }
.xc-go { grid-area: go; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--lamp); color: var(--on-lamp); font-weight: 700; font-size: 18px; }
html[data-mode="dark"] .xc-badge { background: #2a3a6e; }
/* reminders and the calendar subscription */
.rm-sets { display: grid; gap: 4px; margin: 4px 0 6px 4px; }
.check-inline { display: inline-flex; align-items: center; gap: 8px; }
.seg.col { flex-direction: column; align-items: stretch; }
.seg.col button { text-align: left; }
.seg [aria-checked="true"] { background: var(--lamp); color: var(--on-lamp); }
.sub-btns { flex-wrap: wrap; }

/* Thanglish and voice in the search boxes (assets/js/oliyon-typing.js, the shared copy; NK, 5 Nov 2026) */
.row > .oty-wrap { flex: 1; min-width: 0; }

/* ---------- reminders: the showcase (home, family) and the settings (extras.js remindHero / remindCard) ---------- */
.rm-hero, html[data-mode] .rm-hero { position: relative; overflow: hidden; gap: 12px;
  background: var(--corner) top right / 112px 112px no-repeat, radial-gradient(120% 90% at 100% 0%, rgba(240, 160, 3, .16), transparent 60%), var(--grain) 0 0 / 180px 180px, var(--surface);
  border: 1.5px solid transparent; background-clip: padding-box;
  box-shadow: 0 0 0 1.5px rgba(240, 160, 3, .55), 0 10px 28px rgba(0, 31, 91, .10); }
.rmh-top { display: flex; gap: 12px; align-items: center; }
.rmh-bell { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #f0a003, #feb001); color: #001f5b; box-shadow: 0 4px 12px rgba(240, 160, 3, .35); }
.rmh-bell svg { width: 26px; height: 26px; }
.rm-hero h2 { font-size: var(--fs-l); line-height: 1.3; }
.rmh-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rmh-points li { display: grid; gap: 1px; padding-left: 26px; position: relative; font-size: var(--fs-s); }
.rmh-points li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--lamp-soft); color: var(--lamp-text); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.rmh-points span { color: var(--ink-2); }
.rmh-mail { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--lamp-line); font-size: var(--fs-s); }
.rmh-mail b { font-weight: 600; }
.rmh-mail b::before { content: "✉ "; color: var(--lamp-text); }
.rmh-steps { margin: 0; padding-left: 1.3rem; display: grid; gap: 3px; font-size: var(--fs-s); color: var(--ink-2); }
.rm-card h2 svg, .btn svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }
.rm-when { display: grid; gap: 6px; }
.rm-leads { display: flex; flex-wrap: wrap; gap: 6px; }
.rm-picked { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-btn.sm { padding: 2px 10px; font-size: var(--fs-xs); min-height: 28px; }
.btn.on { border-color: var(--lamp); background: var(--lamp-soft); color: var(--lamp-text); }

/* ---------- the home page as a dashboard (views.js .dash): one column on a phone, in the o-* order ---------- */
.dash { display: flex; flex-direction: column; gap: 16px; }
.dash-main, .dash-side { display: contents; }
.o1 { order: 1; } .o2 { order: 2; } .o3 { order: 3; } .o4 { order: 4; } .o5 { order: 5; } .o6 { order: 6; } .o7 { order: 7; } .o8 { order: 8; }
.o3:empty { display: none; }

/* the header on a computer (NK, 6 Nov 2026: "all these menus can also be in the header in a web browser"): the eight
   main pages on one line; Seasons, Body type, Do's and don'ts, Sources and Settings are in the footer there,
   and in the ☰ list wherever the links fold (phones) */
@media (min-width: 900px) { .oh:not(.is-compact) .oh-links > li.oh-folded { display: none; } }
/* a wide window: a little more room, so the line never comes close to folding (Safari draws Tamil a touch wider) */
@media (min-width: 1320px) { :root { --oh-max: 1240px; } }

/* ---------- a computer screen (NK, 6 Nov 2026: "it shows like a tab view, not a full web view"): the page uses the full
   width — the home page as a dashboard, lists beside their introduction, everything else flowing in two columns ---------- */
@media (min-width: 1024px) {
  .app { max-width: var(--oh-max); padding: 22px 16px 60px; }
  .hero__brand, .hero__tagline, .hero__lockup, .hero__ladder, .hero__lede { max-width: 46rem; }
  .hero__lede { max-width: 46rem; }
  /* the default: whole cards flowing down two columns, like a newspaper page */
  .view { display: block; columns: 2; column-gap: 18px; }
  .view > * { break-inside: avoid; margin: 0 0 18px; }
  .view > .full { column-span: all; }
  /* ui.js twoCols(): the same two columns built as two stacks, so both start at the top (in Safari the CSS columns
     carried a card's bottom margin to the top of the next column, NK 6 Nov 2026: "alignment issues") */
  .view.is-mcols { columns: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .view.is-mcols > * { margin: 0; }
  .mcols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  .mcol { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; min-width: 0; }
  .mcol > * { margin: 0; }
  /* home */
  .v-today { columns: auto; }
  .dash { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  .dash-main, .dash-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .up-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* lists: the introduction (search, filters) stays at the side while the list runs beside it */
  .v-keerai, .v-foods, .v-cook { display: grid; columns: auto; grid-template-columns: minmax(300px, 370px) minmax(0, 1fr); gap: 18px; align-items: start; }
  .v-keerai > *, .v-foods > *, .v-cook > * { margin: 0; }
  /* (the introduction no longer stays put while the list scrolls: on the stars page it slid over the card below it,
     the year's months, NK 6 Nov 2026) */
  .v-keerai > .list, .v-foods > .list, .v-cook > .list { grid-column: 2; grid-row: 1 / span 12; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
  .v-keerai > :not(.list), .v-foods > :not(.list), .v-cook > :not(.list) { grid-column: 1; }
  /* a dish: the recipe, with its cards at the side */
  .v-recipe { display: grid; columns: auto; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
  .v-recipe > * { margin: 0; }
  .v-recipe > .xfam .xf-list { grid-template-columns: minmax(0, 1fr); }
  /* the chart: the week's days in two columns */
  .v-chart .day-plan .plate { font-size: var(--fs-s); }
  /* the staff pages keep one wide column */
  .v-manage, .v-account { columns: auto; }
  .nav { display: none; }
}


/* the content note (terms #content, About) and the suggestion box's places */
.legal-note { border: 1.5px solid var(--lamp-line); background: var(--lamp-soft); border-radius: 14px; padding: 14px 16px; margin: 16px 0; }
.about-note { box-shadow: inset 4px 0 0 var(--lamp); }
.fb-cta { background: radial-gradient(120% 100% at 0 0, rgba(0, 31, 91, .08), transparent 60%), var(--surface); }
.linkbtn { border: 0; padding: 0; background: none; color: var(--lamp-text); text-decoration: underline; font: inherit; cursor: pointer; }
.dp-note { border-top: 1px dashed var(--line); padding-top: 10px; }
.site-footer .ofb-open { color: #feb001; font-weight: 600; }

/* the share sheet (main.js shareSheet), as Vaasi's */
.share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.share-row .btn { flex: 1 1 120px; justify-content: center; }
.share-url { width: 100%; font-size: var(--fs-xs); color: var(--muted); padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.view a:not([class]), .legal a:not([class]) { color: var(--lamp-text); }
/* the legal pages (terms, privacy, 404, sign-in) */
main.legal { max-width: 760px; margin: 0 auto; padding: 26px 16px 56px; display: grid; gap: 12px; }
main.legal h1 { font-size: var(--fs-2xl); }
main.legal h2 { font-size: var(--fs-l); margin-top: 10px; }
main.legal .meta { color: var(--muted); font-size: var(--fs-s); }
main.legal p, main.legal li { line-height: 1.75; }
main.legal .el { color: var(--ink-2); }
main.legal section { display: grid; gap: 6px; }
main.legal ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.legal-warn { border-color: var(--warn) !important; background: var(--note-bg) !important; }