/* Iqama Times: the printed-timetable look, the handwritten look, and four brightness levels.
   Loaded after styles.css. app.js sets on <html>:
     data-palette  paper | hand | contrast        (Settings, Display, Look)
     data-dim      0 bright, 1 soft, 2 dim, 3 darkest (the brightness button, or Auto after Isha or Maghrib)
     data-theme    light up to Dim, dark at Darkest (and from Dim in High contrast), for the rules in styles.css that only know light and dark
   Dim is a warm-light page, like an e-reader's night light: amber paper and dark ink, no blue and no white, softer contrast (about 7:1).
   A web page cannot change the screen's backlight, so the levels lower the page's own brightness and contrast. Text keeps
   4.5:1 contrast on its paper at every level except Darkest, where the muted text is kept around 4:1 on purpose so nothing glows. */

:root {
  --display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Kalam", "Segoe Print", "Bradley Hand", cursive;
  --ar: "Amiri", serif;
  --rule-w: 1px;
}

/* Printed timetable: warm paper, ink, one red */
:root, :root[data-palette="paper"] {
  --paper: #F3EDE1; --surface: #FBF8F1; --ink: #1C1914; --muted: #5F5647; --line: #CFC4AE; --clear: #A8321F; --risk: #9E1B1B;
}
:root[data-palette="paper"][data-dim="1"] { --paper: #D8CFBE; --surface: #E0D8C8; --ink: #29241C; --muted: #50483A; --line: #B3A68E; --clear: #8A2818; --risk: #7E1616; }
:root[data-palette="paper"][data-dim="2"] { --paper: #B8A07A; --surface: #C0A983; --ink: #22190F; --muted: #45351F; --line: #9A845E; --clear: #6B1D10; --risk: #6B1D10; }
:root[data-palette="paper"][data-dim="3"] { --paper: #000000; --surface: #0A0806; --ink: #A9803F; --muted: #85683A; --line: #1E1810; --clear: #C98A3A; --risk: #C96A4E; color-scheme: dark; }

/* Handwritten: blue-black pen on a ruled sheet, red pen for what matters next */
:root[data-palette="hand"] {
  --paper: #F6F1E4; --surface: #FCFAF3; --ink: #1F2B47; --muted: #4F5A74; --line: #C3CBDA; --clear: #B0302A; --risk: #9E1B1B; --margin: #E2A49C;
  --ar: "Aref Ruqaa", "Amiri", serif;
}
:root[data-palette="hand"][data-dim="1"] { --paper: #DCD6C6; --surface: #E4DECF; --ink: #22304D; --muted: #46506A; --line: #AAB2C2; --clear: #8F2520; --margin: #C98E86; }
:root[data-palette="hand"][data-dim="2"] { --paper: #BAA582; --surface: #C2AE8C; --ink: #1C2132; --muted: #3D3A38; --line: #A08B67; --clear: #6B1D10; --risk: #6B1D10; --margin: #8E4A3A; }
:root[data-palette="hand"][data-dim="3"] { --paper: #000000; --surface: #08080A; --ink: #9E9175; --muted: #7F7562; --line: #1A1A1E; --clear: #B98A5A; --risk: #C96A4E; --margin: #2A1C18; color-scheme: dark; }

/* High contrast: white and black, and black and white from Dim */
:root[data-palette="contrast"] { --paper: #FFFFFF; --surface: #FFFFFF; --ink: #000000; --muted: #262626; --line: #595959; --clear: #0037B3; --risk: #A4001D; --rule-w: 2px; }
:root[data-palette="contrast"][data-dim="1"] { --paper: #E6E6E6; --surface: #EDEDED; }
:root[data-palette="contrast"][data-dim="2"], :root[data-palette="contrast"][data-dim="3"] { --paper: #000000; --surface: #000000; --ink: #FFFFFF; --muted: #E0E0E0; --line: #9E9E9E; --clear: #FFE14D; --risk: #FF6B6B; color-scheme: dark; }
:root[data-palette="contrast"][data-dim="3"] { --ink: #D0D0D0; --muted: #B0B0B0; }

/* The weather sky stays a faint wash over the paper, and goes away at Darkest */
:root { --sky: color-mix(in srgb, var(--sky-base) 28%, var(--paper)); --board-bg: var(--surface); --board-fg: var(--ink); }
:root[data-dim="3"] .sky-tint, :root[data-dim="3"] #sky, :root[data-dim="2"]:not([data-palette="contrast"]) .sky-tint, :root[data-dim="2"]:not([data-palette="contrast"]) #sky { display: none; } /* a still, warm page at night */

/* Print, not app: square corners, hairlines, no filled pills */
:root { --radius-selector: 2px; --radius-field: 2px; --radius-box: 2px; }
body { font-feature-settings: "kern", "liga"; }
.tb-btn { border-radius: 2px; }
.d-btn { box-shadow: none; text-transform: none; font-weight: 500; letter-spacing: .005em; }
.d-btn-primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.iq-ask, .dk, .tm-card, .qp-dlg-in, .au-list li, .qp-pane { border-radius: 2px; }
.iq-ask { background: transparent; border: 0; border-top: 2px solid var(--ink); border-bottom: var(--rule-w) solid var(--line); padding-inline: 0; }
.dk { background: transparent; border: 0; border-top: 2px solid var(--ink); border-radius: 0; padding-inline: 0; }

/* Top bar: a heading set like a printed sheet */
.topbar h1 { font: 500 clamp(1.9rem, 3.6vw, 2.6rem)/1 var(--display); font-stretch: normal; letter-spacing: -.01em; }
.topbar { margin-inline: clamp(1rem, 3vw, 2.5rem); padding-inline: 0; margin-bottom: 1rem; }
#date { font-family: var(--display); font-style: italic; font-size: 1.1rem; color: var(--ink); }

/* Side bar: a column of entries, the open one marked with a rule, not a filled block */
.tabbar { background: transparent; border-right: var(--rule-w) solid var(--line); }
.tabbar .d-menu a { border-radius: 0; font-weight: 500; color: var(--muted); }
.tabbar .d-menu a:hover { background: transparent; color: var(--ink); }
.tabbar .d-menu a.d-menu-active, .tabbar .d-menu a.d-menu-active:hover { background: transparent; color: var(--ink); box-shadow: inset 3px 0 0 var(--clear); }
.brand-bg { fill: var(--ink); } .brand-sq { fill: var(--paper); } .brand-accent { fill: var(--clear); }
.dockbar { background: var(--paper); }

/* Brightness button: a sun by day, a moon at the night levels */
.dim-btn .dim-moon, :root[data-dim="2"] .dim-btn .dim-sun, :root[data-dim="3"] .dim-btn .dim-sun, :root[data-dim="1"] .dim-btn .dim-sun { display: none; }
:root[data-dim="1"] .dim-btn .dim-moon, :root[data-dim="2"] .dim-btn .dim-moon, :root[data-dim="3"] .dim-btn .dim-moon { display: inline; }
.dim-btn { display: inline-flex; align-items: center; gap: .4rem; }
.dim-btn svg { width: 1.1rem; height: 1.1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dim-range { width: 100%; max-width: 22rem; accent-color: var(--ink); }
.dim-scale { display: flex; width: 100%; justify-content: space-between; max-width: 22rem; font-size: .8rem; color: var(--muted); }
.set-group output { margin-left: .5rem; font-weight: 400; color: var(--muted); }

/* Board clock as a printed timetable: big serif time, the five prayers as ruled columns */
.ck-board { border-radius: 0; background: transparent; color: var(--ink); padding-inline: 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); --b-muted: var(--muted); }
.ck-board-hm { font: 400 clamp(4.2rem, 15vw, 7rem)/.9 var(--display); font-stretch: normal; letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; }
.ck-board-side { font: 400 1.3rem/1 var(--display); }
.ck-board-date { font-family: var(--display); font-style: italic; font-size: 1.15rem; }
.ck-tiles { gap: 0; border-top: var(--rule-w) solid var(--line); border-bottom: var(--rule-w) solid var(--line); }
.ck-tiles li { background: transparent; border-radius: 0; padding: .9rem .25rem 1rem; align-content: start; }
.ck-tiles li + li { border-left: var(--rule-w) solid var(--line); }
.ck-tiles span { font: 500 .78rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ck-tiles strong { font: 500 clamp(1.25rem, 3.6vw, 1.6rem)/1 var(--display); }
.ck-tiles small { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.ck-tiles em { font: 400 clamp(1rem, 2.9vw, 1.15rem)/1 var(--display); }
.ck-tiles li.is-next { background: transparent; color: var(--clear); }
.ck-tiles li.is-next span, .ck-tiles li.is-next small { color: var(--clear); }
.ck-tiles li.is-next strong { text-decoration: underline 2px; text-underline-offset: .3em; }
.ck-tiles li.is-jumuah { box-shadow: none; }
.ck-tiles li.is-jumuah > span { color: var(--clear); }
.ck-board-next { color: var(--muted); }
.ck-board-next strong { font: 400 2rem/1 var(--display); color: var(--ink); }
.ck-bar { height: 2px; border-radius: 0; background: var(--line); }
.ck-bar span { border-radius: 0; background: var(--ink); }
.ck-board-foot { border-top: 0; padding-top: 0; color: var(--muted); }

/* Today's table */
#today th, #today td { border-color: var(--line); }
#today tr.next th, #today tr.next td { color: var(--clear); background: transparent; }

/* Full screen */
.display { background: var(--paper); }
.dx-ar { font-family: var(--ar); }
.tm-card { background: transparent; border: 0; border-top: 2px solid var(--ink); border-radius: 0; }
.tm-time, .tm-hm, .tm-cnt, .tm-name { font-family: var(--display); font-weight: 400; }

/* Handwritten: the prayer times are written on a ruled sheet; the live clock stays printed so it reads from across the room */
:root[data-palette="hand"] .ck-board {
  border: 0; padding: clamp(1.25rem, 4vw, 2rem) clamp(1rem, 3vw, 1.75rem) clamp(1.25rem, 4vw, 2rem) clamp(2.25rem, 5vw, 3rem);
  background:
    linear-gradient(90deg, transparent calc(clamp(1.4rem, 3.6vw, 2.1rem) - 1px), var(--margin) calc(clamp(1.4rem, 3.6vw, 2.1rem) - 1px), var(--margin) clamp(1.4rem, 3.6vw, 2.1rem), transparent clamp(1.4rem, 3.6vw, 2.1rem)),
    repeating-linear-gradient(transparent 0 calc(2rem - 1px), var(--line) calc(2rem - 1px) 2rem),
    var(--surface);
}
:root[data-palette="hand"] .ck-tiles { border: 0; }
:root[data-palette="hand"] .ck-tiles li + li { border-left: 0; }
:root[data-palette="hand"] .ck-tiles span { font: 700 1.05rem/1 var(--hand); letter-spacing: 0; text-transform: none; color: var(--ink); }
:root[data-palette="hand"] .ck-tiles strong { font: 400 clamp(1.5rem, 4vw, 1.9rem)/1 var(--hand); }
:root[data-palette="hand"] .ck-tiles small { font: 400 .9rem/1 var(--hand); letter-spacing: 0; text-transform: none; }
:root[data-palette="hand"] .ck-tiles em { font: 400 clamp(1.15rem, 3.2vw, 1.4rem)/1 var(--hand); }
/* a small tilt per column, the way a hand drifts across a line */
:root[data-palette="hand"] .ck-tiles li:nth-child(2n) { transform: rotate(-.6deg); }
:root[data-palette="hand"] .ck-tiles li:nth-child(3n) { transform: rotate(.5deg) translateY(1px); }
/* the next prayer is circled in red pen */
:root[data-palette="hand"] .ck-tiles li { position: relative; }
:root[data-palette="hand"] .ck-tiles li.is-next strong { text-decoration: none; }
:root[data-palette="hand"] .ck-tiles li.is-next::after {
  content: ""; position: absolute; inset: 1.75rem -.15rem auto; height: 3.1rem; pointer-events: none; background: var(--clear);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100' preserveAspectRatio='none'%3E%3Cpath d='M64 6C30 3 6 22 7 50s27 45 57 44 50-20 49-46S88 5 52 9' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100' preserveAspectRatio='none'%3E%3Cpath d='M64 6C30 3 6 22 7 50s27 45 57 44 50-20 49-46S88 5 52 9' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
:root[data-palette="hand"] .ck-board-date, :root[data-palette="hand"] .ck-board-next > span, :root[data-palette="hand"] .ck-board-foot { font-family: var(--hand); font-style: normal; font-size: 1.1rem; }
:root[data-palette="hand"] .ck-board { border-top: 0; border-bottom: 0; }
:root[data-palette="hand"] .ck-bar { background: color-mix(in srgb, var(--ink) 18%, transparent); }
:root[data-palette="hand"] #today td, :root[data-palette="hand"] #today th, :root[data-palette="hand"] .tm-rest li span { font-family: var(--hand); font-size: 1.1em; }
:root[data-palette="hand"] .topbar h1 { font-family: var(--hand); font-weight: 700; }
:root[data-palette="hand"] [lang="ar"] { font-family: var(--ar); }

/* Hijri date beside the Gregorian one */
.iq-hijri { font-family: var(--display); font-style: italic; color: var(--muted); }

/* Adhan offsets: one short row per prayer */
.tune-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem 1.25rem; width: 100%; max-width: 40rem; }
.tune-row { display: flex; align-items: center; gap: .5rem; }
.tune-row span { min-width: 4.2rem; font-weight: 500; }
.tune-row input { width: 4.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.tune-row small { color: var(--muted); }

/* The last 15 minutes before an adhan or iqama: the countdown is marked with a highlighter that flashes once a second.
   The numbers stay dark on the mark and keep the page colour between flashes, so they can always be read. */
:root { --alert: #F2CF3A; --alert-ink: #1C1914; }
:root[data-dim="1"] { --alert: #DDB92C; }
:root[data-dim="2"] { --alert: #3A2A17; --alert-ink: #D9C39B; } /* on the warm page a dark mark stands out more than yellow */
:root[data-dim="3"] { --alert: #9C7420; --alert-ink: #000000; }
:root[data-palette="contrast"] { --alert: #FFD000; --alert-ink: #000000; }
:root[data-palette="contrast"][data-dim="2"], :root[data-palette="contrast"][data-dim="3"] { --alert: #FF9F1C; }
@keyframes ck-mark { 0%, 49% { background-color: var(--alert); color: var(--alert-ink); } 50%, 100% { background-color: transparent; } }
:root .ck-blink { display: inline-block; opacity: 1; padding: .02em .22em; margin: -.02em -.22em; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; animation: ck-mark 1s infinite; }
@media (prefers-reduced-motion: reduce) { :root .ck-blink { animation: none; background-color: var(--alert); color: var(--alert-ink); } }

/* Keep the top bar to one row on a tablet: the date line wraps under itself instead of pushing the buttons down */
@media (min-width: 48.01rem) {
  .topbar { flex-wrap: nowrap; align-items: flex-start; }
  .topbar-title { flex: 1 1 auto; }
  .topbar-actions { flex: none; flex-wrap: nowrap; }
}

/* ---- The other tabs, set like the same printed sheet ---- */

/* Segmented choices (°F/°C, Settings sections, Quran views): square, underlined when chosen, no filled pills */
.seg { background: transparent; border-bottom: var(--rule-w) solid var(--line); border-radius: 0; padding: 0; gap: 0; }
.seg .d-tab { border-radius: 0; font-weight: 500; padding-inline: .9rem; }
.seg .d-tab[aria-selected="true"] { background: transparent; box-shadow: inset 0 -2px 0 var(--clear); color: var(--ink); }
.wx-units { gap: 0; }
.wx-units .d-btn, .d-join .d-btn { border-radius: 0; box-shadow: none; }
.wx-units .d-btn[aria-pressed="true"], .d-join .d-btn:checked, .d-join input.d-btn:checked { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Weather: a forecast column from a newspaper */
.wx-temp { font: 400 3.6rem/1 var(--display); font-stretch: normal; letter-spacing: -.02em; }
.wx-cond { font: 400 1.35rem/1.2 var(--display); font-style: italic; }
.wx-now svg, .wx-hours svg { stroke: currentColor; stroke-width: 1.3; }
.wx-grid { gap: 0 1.5rem; border-top: 2px solid var(--ink); padding-top: .25rem; }
.wx-grid > div { padding: .6rem 0; border-bottom: var(--rule-w) solid var(--line); }
.wx-grid dt { font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; }
.wx-grid dd { font: 400 1.15rem/1.3 var(--display); }
.wx-aqi strong { font: 400 1.8rem/1 var(--display); }
.wx-aqi-dot { border-radius: 0; width: .8rem; height: .8rem; }
.wx-hours ol { gap: 0; border-top: var(--rule-w) solid var(--line); border-bottom: var(--rule-w) solid var(--line); padding: 0; }
.wx-hours li { border-radius: 0; padding: .7rem .2rem; }
.wx-hours li + li { border-left: var(--rule-w) solid var(--line); }
.wx-hours li.has-prayer { background: transparent; box-shadow: inset 0 3px 0 var(--clear); }
.wx-prayer { color: var(--clear); }
.wx-t { font: 400 1.05rem/1 var(--display); }
.wx-days { gap: 0; border-top: 2px solid var(--ink); }
.wx-days li { background: transparent; border-radius: 0; border-bottom: var(--rule-w) solid var(--line); padding-inline: 0; }
.wx-dn { font-weight: 500; }
.wx-dt { font-family: var(--display); font-size: 1.05rem; }

/* Adhkar: the book's table of contents; an open chapter reads like the page */
.au-list { gap: 0; border-top: 2px solid var(--ink); max-width: 40rem; }
.au-list li { border: 0; border-bottom: var(--rule-w) solid var(--line); border-radius: 0; }
.au-row { padding-right: 0; }
.au-toggle { padding-inline: 0; }
.au-no { opacity: 1; color: var(--muted); font: 400 1rem/1 var(--display); min-width: 2.4rem; }
.au-title { font-weight: 500; }
.au-body { border-top: 0; padding-inline: 2.4rem 0; }
.au-dua + .au-dua { border-top: var(--rule-w) solid var(--line); }
.au-meta { opacity: 1; color: var(--muted); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; }
.au-ar { font-family: var(--ar); font-size: 1.75rem; }
.au-tr { opacity: 1; color: var(--muted); font-family: var(--display); }
.au-en { font-family: var(--display); font-size: 1.08rem; line-height: 1.55; }
.au-row .au-play { background: transparent; color: var(--ink); border: var(--rule-w) solid var(--ink); }
.au-search, .qp-search { max-width: 40rem; }

/* Quran: sections underlined like a contents page; lists ruled, not boxed */
.qp-tabs { gap: 0; border-bottom: var(--rule-w) solid var(--line); }
.qp-tabs .d-btn, .qp-tabs .d-btn:hover { border: 0; border-radius: 0; background: transparent; color: var(--muted); font-weight: 500; }
.qp-tabs .d-btn[aria-selected="true"] { background: transparent; color: var(--ink); box-shadow: inset 0 -2px 0 var(--clear); }
.qp-pane { border: 0; border-top: 2px solid var(--ink); border-radius: 0; padding-inline: 0; background: transparent; }
.qp-panes { gap: 1.5rem; }
.qp-rows { gap: 0; }
.qp-row { border-radius: 0; border-bottom: var(--rule-w) solid var(--line); }
.qp-row:hover, .qp-row.is-open { background: transparent; }
.qp-row.is-open .qp-main b { color: var(--clear); }
.qp-main, .qp-meta { border-radius: 0; }
.qp-letter { font: 400 1.4rem/1 var(--display); color: var(--muted); padding-top: .9rem; border-bottom: 0; }
.qp-no { font: 400 1rem/1 var(--display); color: var(--muted); }
.qp-h, .iqama .tab .qp-h { background: var(--paper); font: 500 .72rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.qp-dlg-in, .qp-pick { border-radius: 0; }

/* Month: the printed salah calendar from the masjid; Fridays in red, today marked with rules */
#month { font-variant-numeric: tabular-nums; border-collapse: collapse; }
#month thead th { font: 500 .72rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--ink); }
#month tbody th { font-weight: 500; }
#month td { font-family: var(--display); font-size: 1.08rem; }
#month tbody tr { border-bottom: var(--rule-w) solid var(--line); }
#month tr.friday th, #month tr.friday .mo-hijri { color: var(--clear); }
#month tr.today { background: transparent; font-weight: inherit; box-shadow: inset 0 2px 0 var(--ink), inset 0 -2px 0 var(--ink); }
#month tr.today th { font-weight: 700; }
#month .mo-hijri { color: var(--muted); white-space: nowrap; }
#month .mo-hm { font-style: italic; font-size: .85em; }

/* Handwritten: the same tabs, with the hand only where something is written in, not on controls */
:root[data-palette="hand"] #month td, :root[data-palette="hand"] .wx-t, :root[data-palette="hand"] .wx-dt, :root[data-palette="hand"] .wx-temp, :root[data-palette="hand"] .wx-grid dd { font-family: var(--hand); }
:root[data-palette="hand"] .au-no, :root[data-palette="hand"] .qp-no, :root[data-palette="hand"] .qp-letter { font-family: var(--hand); }

/* Phones: the month table keeps every column on screen; the Hijri month name gives way to the day number */
@media (max-width: 40rem) {
  #month .mo-hm, #month .mo-ap { display: none; } /* the column order (Fajr, Sunrise, Dhuhr...) already says morning or afternoon */
  #month th, #month td { padding-inline: .2rem; }
  #month td, #month tbody th { font-size: .88rem; }
  #month thead th { font-size: .62rem; letter-spacing: .04em; }
}

/* ---- Full screen, compact layout (touch screens under 800px, such as a 7-inch tablet) ---- */
/* The same printed sheet: light serif numbers, ruled lines in place of a card, a thin ink rule for progress */
.display[data-layout="times"] .dx-meta, .display .dx-meta { font-family: var(--display); font-style: italic; color: var(--muted); }
.tm-time { font-weight: 400; }
.tm-hm { font-family: var(--display); font-weight: 400; letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; }
.tm-side { font-family: var(--display); font-weight: 400; }
.tm-card { padding-inline: 0; padding-block: calc(var(--u) * 1.6) calc(var(--u) * 2); border-bottom: var(--rule-w) solid var(--line); }
.tm-label { font-size: max(.8rem, calc(var(--u) * 1.8)); letter-spacing: .08em; text-transform: uppercase; }
.tm-lh { text-transform: none; letter-spacing: 0; }
.tm-name { font-family: var(--display); font-weight: 400; letter-spacing: -.01em; }
.tm-k { font-size: max(.8rem, calc(var(--u) * 1.7)); letter-spacing: .07em; text-transform: uppercase; }
.tm-pt b { font: 400 max(1.35rem, calc(var(--u) * 4.4))/1.1 var(--display); }
.tm-pt b.tm-hl { color: var(--clear); }
.tm-cnt { font-family: var(--display); font-weight: 400; color: var(--ink); letter-spacing: -.02em; }
.tm-sub { font-family: var(--display); font-style: italic; }
.tm-bar { height: 2px; min-height: 2px; border-radius: 0; background: var(--line); }
.tm-bar span { border-radius: 0; background: var(--ink); }
.tm-rest { gap: 0; }
.tm-rest li { padding: calc(var(--u) * .7) 0; border-bottom: var(--rule-w) solid var(--line); }
.tm-rest li:not(.tm-rh) span + span { font-family: var(--display); }
.tm-rh { font-size: max(.8rem, calc(var(--u) * 1.7)); letter-spacing: .07em; text-transform: uppercase; }
.tm-temp { font-family: var(--display); font-weight: 400; }
.tm-st b, .tm-st > span:last-child { font-family: var(--display); }
.tm-ar { font-family: var(--ar); }
.tm-en { font-family: var(--display); }

/* Handwritten: what is "written" (the prayer, its times, the rest of the day) in the hand; the live clock stays printed */
:root[data-palette="hand"] .tm-name, :root[data-palette="hand"] .tm-pt b, :root[data-palette="hand"] .tm-rest li:not(.tm-rh) span { font-family: var(--hand); font-style: normal; }
:root[data-palette="hand"] .tm-name { font-weight: 700; }
:root[data-palette="hand"] .tm-card {
  border: 0; padding-inline: calc(var(--u) * 3) calc(var(--u) * 1.5);
  background:
    linear-gradient(90deg, transparent calc(var(--u) * 1.8 - 1px), var(--margin) calc(var(--u) * 1.8 - 1px), var(--margin) calc(var(--u) * 1.8), transparent calc(var(--u) * 1.8)),
    repeating-linear-gradient(transparent 0 calc(var(--u) * 4.2 - 1px), var(--line) calc(var(--u) * 4.2 - 1px) calc(var(--u) * 4.2)),
    var(--surface);
}

/* Touch screens: a faint ink tint when something is tapped, in place of the browser's blue box */
:root { -webkit-tap-highlight-color: color-mix(in srgb, var(--ink) 12%, transparent); }

/* ---- Handwritten: the whole screen is the ruled sheet ---- */
/* The lines and red margin run behind everything (the app's page and full screen), not just behind the clock card */
:root[data-palette="hand"] { --rule-gap: 2rem; --margin-x: clamp(.9rem, 2.2vw, 1.6rem); }
:root[data-palette="hand"] .view, :root[data-palette="hand"] .display {
  background:
    linear-gradient(90deg, transparent calc(var(--margin-x) - 1px), var(--margin) calc(var(--margin-x) - 1px), var(--margin) var(--margin-x), transparent var(--margin-x)),
    linear-gradient(transparent calc(var(--margin-x) * 2.4), transparent calc(var(--margin-x) * 2.4)),
    repeating-linear-gradient(transparent 0 calc(var(--rule-gap) - 1px), var(--line) calc(var(--rule-gap) - 1px) var(--rule-gap)),
    var(--surface);
}
:root[data-palette="hand"] .tabbar, :root[data-palette="hand"] .dockbar { background: var(--paper); }
/* the writing sits right of the margin */
:root[data-palette="hand"] .topbar { margin-left: calc(var(--margin-x) + clamp(.9rem, 2.2vw, 1.6rem)); }
:root[data-palette="hand"] .tab { padding-left: calc(var(--margin-x) + clamp(.9rem, 2.2vw, 1.6rem)); }
:root[data-palette="hand"] .display { padding-left: max(calc(var(--margin-x) + clamp(.9rem, 2.2vw, 1.6rem)), env(safe-area-inset-left, 0px)); }
/* the clock card and the full screen card are now plain writing on the sheet */
:root[data-palette="hand"] .ck-board, :root[data-palette="hand"] .tm-card { background: transparent; padding-left: 0; }
:root[data-palette="hand"] .tm-card { padding-inline: 0; }
:root[data-palette="hand"] .sky-tint, :root[data-palette="hand"] #sky { display: none; }