/*
Tamam drawing kit, trimmed for the front page (25 Oct 2026): only the rules index.html uses, so nothing it does not draw
(phone, status bar, tab bar, sheets, switches, segmented control, award, the hero rings' drop-shadow filter, board marks)
can be switched on by a later edit. The full kit stays in arc/mocks/wayfinding-2026-10-24/kit.css (and kit.js).
Tokens on .kit and the dark scheme from prefers-color-scheme; the system faces are named with local() only, so nothing is
fetched (Chrome falls back to Plus Jakarta Sans, see index.html); the Arabic stack adds Noto Naskh Arabic and Segoe UI for
Android and Windows. Every value is copied from the app code on arc/v3, not invented:
  colours, type styles, radii, card shadow   arc/app/src/ui/fit.tsx (DAY and NIGHT, STYLES, R, shadow())
  header, rows, buttons, tick                arc/app/src/ui/fitkit.tsx (TabHead, Li, Btn, TickCircle)
  peek cards, discs, icons                   arc/app/src/ui/arc.tsx (PeekCard, Disc, ICONS)
  prayer card and prayer circles             arc/app/src/screens/summary/DayPane.tsx (NowCard), deen/PrayerCard.tsx (Cell)
  rings                                      arc/app/src/ui/Rings.tsx (100-point grid, r = 50 - sw/2 - i*(sw+gap))
Letter spacing follows arc/mocks/polish-2026-10-23/kit.css, the Chrome kit the app was measured against.
*/

/* ---------- system fonts: Safari knows ui-rounded; Chromium needs the faces named ---------- */
@font-face { font-family: "Arc Rounded"; font-weight: 100 900; src: local("SF Pro Rounded"), local(".SF NS Rounded"); }
@font-face { font-family: "Arc Arabic"; font-weight: 100 900; src: local("SF Arabic"), local("Geeza Pro"); }
@font-face { font-family: "Arc Serif"; font-style: italic; font-weight: 100 900; src: local("New York Italic"); }

/* ---------- tokens: day (cream) and night (warm dark), fit.tsx DAY / NIGHT ---------- */
.kit {
  --round: ui-rounded, "SF Pro Rounded", "Arc Rounded", "Tamam Jakarta", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --arabic: "SF Arabic", "Arc Arabic", "Geeza Pro", "Noto Naskh Arabic", "Noto Sans Arabic", "Segoe UI", serif;
  --serif: ui-serif, "New York", "Arc Serif", Georgia, serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --r-card: 24px; --r-inner: 16px; --r-sheet: 40px;
  /* fixed in both schemes */
  --deen: #F6B73C; --body: #2DD4BF; --self: #B794F6;
  --on-deen: #2A2017; --on-body: #0B2A25; --on-self: #24133F;
  /* day */
  --bg: #FBF6EE; --bg2: #FFFDF9; --bg3: #F4ECDF; --bg4: #DAD4CC; --raised: #FFFFFB; --sheet: #FBF6EE;
  --label: #2A2017; --label2: #6A5D50; --label3: #726353; --label4: rgba(42,32,23,.16); --sep: rgba(42,32,23,.09); --faint: #A0907E;
  --fill: rgba(42,32,23,.06); --press: rgba(42,32,23,.06);
  --deen-ink: #7A4F00; --body-ink: #0E6B5F; --self-ink: #5D3E9E; --danger: #A3271C;
  --w-deen: #FCE7BE; --w-body: #D3F3EC; --w-self: #ECE3FB;
  --p-deen: #FBDDA0; --p-body: #C2EFE6; --p-self: #E4D8FA;
  --track: .2;
  --glass-edge: rgba(255,255,255,.85); --scrim: rgba(42,28,12,.28);
  --capsule: #FCE7BE; --seg-thumb: #FFFFFB; --tab-fill: #FDFAF3; --glass-line: rgba(92,62,24,.10);
  --shadow-1: 0 1px 1px rgba(92,62,24,.05), 0 6px 16px -8px rgba(92,62,24,.16);
  --shadow-go: 0 1px 1px rgba(122,79,0,.14), 0 8px 18px -8px rgba(122,79,0,.5);
  --shadow-tab: 0 8px 28px -8px rgba(80,52,16,.28), 0 2px 6px rgba(80,52,16,.08);
  --shadow-knob: 0 3px 8px rgba(92,62,24,.16), 0 0 1px rgba(92,62,24,.2);
  --knob: #FFFDF9;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
.kit {
  --bg: #15100B; --bg2: #221A13; --bg3: #2C2319; --bg4: #37312B; --raised: #2A2118; --sheet: #1C1610;
  --label: #F6ECDF; --label2: #B9A996; --label3: #A3937F; --label4: rgba(246,236,223,.15); --sep: rgba(246,236,223,.08); --faint: #7F7262;
  --fill: rgba(246,236,223,.06); --press: rgba(246,236,223,.06);
  --deen-ink: #F8C25C; --body-ink: #5EE6D3; --self-ink: #CDB4FA; --danger: #FF8E80;
  --w-deen: #33240F; --w-body: #0F2B26; --w-self: #261D38;
  --p-deen: #4A3412; --p-body: #134038; --p-self: #362852;
  --track: .22;
  --glass-edge: rgba(255,236,210,.14); --scrim: rgba(5,3,1,.5);
  --capsule: rgba(246,183,60,.16); --seg-thumb: #4A3D30; --tab-fill: #221A13; --glass-line: rgba(255,236,210,.08);
  --shadow-1: 0 1px 0 rgba(255,236,210,.04) inset, 0 6px 16px -8px rgba(0,0,0,.6);
  --shadow-go: 0 1px 1px rgba(122,79,0,.14), 0 8px 18px -8px rgba(122,79,0,.5);
  --shadow-tab: 0 10px 30px -8px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.4);
  --shadow-knob: 0 3px 8px rgba(0,0,0,.5);
  --knob: #F6ECDF;
  color-scheme: dark;
}
}

.kit, .kit * { box-sizing: border-box; }
:where(.kit) :where(p, h1, h2, h3) { margin: 0; }
:where(.kit) button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }

/* ---------- header: date line and large title (fitkit TabHead) ---------- */
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 0 4px 16px; }
.head-text { flex: 1; min-width: 0; }
.dateline { display: block; font: 600 14px/17px var(--round); letter-spacing: -0.01em; color: var(--label2); }
.title { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; margin-top: 2px;
  font: 700 34px/38px var(--round); letter-spacing: -0.022em; color: var(--label); }

/* ---------- type ---------- */
.ar { font-family: var(--arabic); direction: rtl; unicode-bidi: isolate; letter-spacing: 0; }
.num { font-family: var(--round); font-variant-numeric: tabular-nums; }

/* ---------- surfaces ---------- */
.group-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 6px 8px;
  font: 600 15px/20px var(--round); letter-spacing: -0.01em; color: var(--label2); }
.group { background: var(--bg2); border-radius: var(--r-card); box-shadow: var(--shadow-1); overflow: hidden; margin-bottom: 20px; }

/* A row (fitkit Li): disc, title over sub, value, chevron. 58 tall, 16 in, hairline inset 16. */
.row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 9px 16px; width: 100%; color: var(--label); }
.row + .row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: .5px; background: var(--sep); }
.row .main { flex: 1; min-width: 0; }
.row .t { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 10px; font: 600 17px/20px var(--round); letter-spacing: -0.01em; }
.row .s { margin-top: 1px; font: 400 14px/19px var(--text); letter-spacing: -0.007em; color: var(--label2); }

/* A disc (arc Disc): an icon on a ring's paper, 34 round, icon 18 in the ring's ink. */
.disc { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--bg3); color: var(--label2); }
.disc.body { background: var(--p-body); color: var(--body-ink); }
.disc svg { width: 18px; height: 18px; }

/* ---------- buttons (fitkit Btn) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px;
  font: 600 17px/22px var(--round); letter-spacing: -0.01em; white-space: nowrap; background: var(--bg3); color: var(--label); }
.btn.go { background: var(--deen); color: var(--on-deen); box-shadow: var(--shadow-go); }   /* the one yellow primary */

/* ---------- the prayer card (DayPane NowCard): now, its Arabic, Prayed, the five as a spine ---------- */
.now { background: var(--bg2); border-radius: var(--r-card); padding: 13px 16px 8px; margin-bottom: 12px; box-shadow: var(--shadow-1); }
.now-top { display: flex; align-items: center; gap: 12px; }
.now-text { flex: 1; min-width: 0; }
.now-when { font: 600 14px/18px var(--round); letter-spacing: -0.01em; color: var(--label2); }
.now-when b { font-weight: 700; color: var(--deen-ink); }
.now-name { display: flex; align-items: center; flex-wrap: wrap; column-gap: 10px; font: 700 28px/32px var(--round); letter-spacing: -0.02em; }
.now-name .ar { font: 600 26px/32px var(--arabic); color: var(--label2); }
.now-time { font: 700 22px/26px var(--round); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.spine { display: flex; margin-top: 8px; padding-top: 4px; border-top: 1px solid var(--sep); }
.spine > span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7.5px; min-height: 44px; padding: 2px 0;
  font: 600 12px/18.5px var(--round); color: var(--label2); white-space: nowrap; }
.spine > span::before { content: ""; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--label4); }
.spine > span.cur { color: var(--label); }
.spine > span.cur::before { box-shadow: inset 0 0 0 3px var(--deen); }
.spine > span.on::before { background: var(--deen); box-shadow: none; }

/* The Deen tab's five cells (PrayerCard Cell): 30 circle, Arabic, English, time; the current one on the amber wash. */
.pcells { display: flex; gap: 2px; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--sep); }
.pcell { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 84px; padding: 6px 0 4px; border-radius: var(--r-inner); }
.pcell .ar { font: 600 16px/24px var(--arabic); }
.pcell .en { font: 600 12.5px/15px var(--round); letter-spacing: -0.02em; color: var(--label2); }

/* A prayer circle: 30 round, 2 pt hair ring; .cur amber 3 pt ring; .on filled amber with the dark check; .made a late (qada) one. */
.pc { width: 30px; height: 30px; margin-bottom: 4px; border-radius: 50%; display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 2px var(--label4); }
.pc.on { background: var(--deen); box-shadow: none; }
.pc.on::after { content: ""; width: 15px; height: 15px; background: var(--on-deen);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 7.8'/%3E%3C/svg%3E") center/15px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 7.8'/%3E%3C/svg%3E") center/15px no-repeat; }

/* The tick (fitkit TickCircle): 30 circle in a 44 target; fills with the ring colour and its dark check. */
.tick { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--label4); }
.tick.on { box-shadow: none; }
.tick.on::after { content: ""; width: 16.5px; height: 16.5px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 7.8'/%3E%3C/svg%3E") center/16.5px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 7.8'/%3E%3C/svg%3E") center/16.5px no-repeat; }
.tick.on, .tick.on.deen { background: var(--deen); } .tick.on::after, .tick.on.deen::after { background: var(--on-deen); }
.tick.on.body { background: var(--body); } .tick.on.body::after { background: var(--on-body); }

/* ---------- rings (Rings.tsx; kit.js draws the SVG) ---------- */
.rings { position: relative; flex: none; display: block; }
.rings svg { display: block; overflow: visible; }
.rings .trk { stroke-opacity: var(--track); }
.rings .deen { stroke: var(--deen); }

/* the count beside the rings (DayPane hero) */
.hero-text { flex: 1; min-width: 0; }
.hero-big { display: flex; align-items: baseline; font-family: var(--round); font-variant-numeric: tabular-nums; }
.hero-big b { font: 700 40px/42px var(--round); letter-spacing: -0.03em; }
.hero-big span { font: 600 20px/24px var(--round); color: var(--label2); margin-left: 5px; }
.hero-line { margin-top: 4px; font: 600 15px/19px var(--round); letter-spacing: -0.01em; color: var(--label2); }

/* ---------- peek cards (arc PeekCard): one per ring, on its wash ---------- */
.peeks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.peek { display: flex; flex-direction: column; gap: 2px; min-height: 112px; padding: 12px; border-radius: var(--r-card); box-shadow: var(--shadow-1); min-width: 0; }
.peek.deen { background: var(--w-deen); } .peek.body { background: var(--w-body); } .peek.self { background: var(--w-self); }
.peek .k { display: flex; align-items: center; justify-content: space-between; font: 600 14px/18px var(--round); letter-spacing: -0.01em; }
.peek .big { display: flex; align-items: baseline; margin-top: 8px; margin-bottom: -2px; font: 700 26px/28px var(--round); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.peek.deen .big { color: var(--deen-ink); } .peek.body .big { color: var(--body-ink); } .peek.self .big { color: var(--self-ink); }
.peek .big small { margin-left: 2px; font: 600 15px/20px var(--round); color: var(--label2); letter-spacing: 0; }
.peek .s { margin-top: 6px; font: 400 13px/17px var(--text); letter-spacing: -0.005em; color: var(--label2); }
.peek .s b { color: var(--label); font-weight: 600; }
.bar { height: 8px; border-radius: 4px; background: var(--label4); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: inherit; background: var(--deen); }
.bar.body > i { background: var(--body); }
.peek .bar { height: 5px; margin-top: 8px; }

/* ---------- the toast (Summary's "Asr prayed" pill) ---------- */
.toast { position: absolute; z-index: 95; top: 56px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; background: var(--tab-fill); box-shadow: var(--shadow-tab); font: 600 15px/20px var(--round); white-space: nowrap; }