/* Saria Space dashboard: one stylesheet for the prototype.
   Look (reference 05, "light, airy and blurry"): a Paper ground with soft, heavily blurred colour fields behind the
   content (light blue, green, pear, a little orange), and every surface in frosted glass floating over them: cards,
   pills, the selected day, the + button, chips and tags. No black surfaces: near-black is only for text and thin icons.
   Colour means type (js/config.js): meetings are always orange (Coral), nothing else is. Selected states use stronger
   glass or a soft tint of the item's colour. All text is 4.5:1 or more (scripts/contrast.mjs).
   Type: the site's fonts. Arabic follows /ar/: Thmanyah, no letter spacing, no capitals, titles 1.15, text 1.6, Western
   digits. Numerals and Latin words use the English page's faces (Hanken Grotesk, Archivo).
   Motion: transform and opacity only. */

@font-face { font-family: 'Thmanyah Serif Display'; src: url('/assets/fonts/thmanyahserifdisplay-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Thmanyah Serif Display'; src: url('/assets/fonts/thmanyahserifdisplay-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Thmanyah Sans'; src: url('/assets/fonts/thmanyahsans-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Thmanyah Sans'; src: url('/assets/fonts/thmanyahsans-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('/assets/fonts/hanken-grotesk-variable.woff2') format('woff2-variations'), url('/assets/fonts/hanken-grotesk-variable.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('/assets/fonts/archivo-variable.woff2') format('woff2-variations'), url('/assets/fonts/archivo-variable.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

:root {
  --paper: #F6F4F1;
  --ink: #0b0b0b;             /* near-black: text and thin icons only */
  --ink-2: #2b2723;           /* secondary text on coloured cards */
  --mute: #55514a;            /* secondary text: 4.5:1+ on the colour fields and on glass */
  --faint: #9a958c;           /* inactive thin icons only, never text */
  --accent: #2c4357;          /* small accent text (the diary date): Mist ink */
  --line: rgba(11, 11, 11, .08);
  --line-2: rgba(11, 11, 11, .16);

  /* frosted glass */
  --glass: rgba(255, 255, 255, .5);
  --glass-strong: rgba(255, 255, 255, .8);
  --glass-edge: rgba(255, 255, 255, .78);
  --glass-solid: rgba(252, 251, 249, .94);     /* fallback where backdrop-filter is unsupported */
  --blur: blur(18px) saturate(1.6);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 14px 34px -22px rgba(52, 58, 74, .42);

  /* the colour fields behind everything (reference 05's blurred band, kept faint so text stays readable) */
  --field:
    radial-gradient(62% 34% at 6% 4%, rgba(170, 196, 228, .5), transparent 72%),
    radial-gradient(46% 30% at 98% 16%, rgba(120, 182, 132, .32), transparent 72%),
    radial-gradient(54% 30% at 92% 64%, rgba(214, 222, 150, .38), transparent 72%),
    radial-gradient(40% 24% at 4% 56%, rgba(249, 128, 98, .16), transparent 72%),
    radial-gradient(72% 34% at 36% 102%, rgba(184, 206, 232, .46), transparent 72%),
    var(--paper);

  --f-ar-display: 'Thmanyah Serif Display', 'Geeza Pro', 'Noto Naskh Arabic', serif;
  --f-ar: 'Thmanyah Sans', 'Geeza Pro', 'Noto Sans Arabic', sans-serif;
  --f-num: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --f-lat: 'Archivo', 'Thmanyah Serif Display', 'Hanken Grotesk', system-ui, sans-serif; /* Arabic names fall back to Thmanyah */

  --pad: 16px;
  --hd-h: 56px;
  --tb-h: 70px;
  --safe-t: env(safe-area-inset-top);
  --safe-b: env(safe-area-inset-bottom);
  --e-std: cubic-bezier(.4, 0, .1, 1);
  --e-out: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper); }
img, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
ul, ol { list-style: none; padding: 0; }

body {
  min-height: 100svh;
  color: var(--ink);
  font: 400 16px/1.6 var(--f-ar);
  -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none;
  overscroll-behavior-y: none;
}
/* the colour fields: fixed behind the page, painted once */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--field); pointer-events: none; }
/* /ar/: no tracking, no capitals on Arabic text */
:where(:not([lang='en'], [lang='en'] *)) { letter-spacing: 0; text-transform: none; }
[lang='en'] { font-family: var(--f-num); }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
main:focus { outline: none; }
.ic { width: 24px; height: 24px; flex: none; }
::placeholder { color: #6a655d; opacity: 1; }

/* ------------------------------------------------------------------ frosted glass, one recipe for every surface */
.glass, .glass-btn, .row, .card, .task, .search, .pill-btn, .pill-group, .round-btn, .back, .x-btn, .choice, .field,
.opt, .tag, .audio, .play, .preview, .add-row, .entry, .analysis, .waiting, .mini-ev, .pill-svc, .today-pill, .seg,
.e-actions button, .composer-text, .btn-primary, .fab, .wd.sel, .rec, .p-head, .hero, .chip-p, .chip-s, .score-chip,
.cb, .ask, .toast, .avatar, .wisdom, .score-card, .t-note {
  background-color: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass-btn, .row, .card, .task, .search, .pill-btn, .pill-group, .round-btn, .back, .x-btn, .choice, .field,
  .opt, .tag, .audio, .play, .preview, .add-row, .entry, .analysis, .waiting, .mini-ev, .pill-svc, .today-pill, .seg,
  .e-actions button, .composer-text, .btn-primary, .fab, .wd.sel, .rec, .p-head, .hero, .chip-p, .chip-s, .score-chip,
  .cb, .ask, .toast, .avatar, .wisdom, .score-card { background-color: var(--glass-solid); }
}
/* stronger glass: primary controls and selected states */
.fab, .btn-primary, .wd.sel, .play, .rec, .back, .round-btn, .x-btn, .opt[aria-pressed='true'], .seg button[aria-pressed='true'],
.today-pill, .toast, .e-actions button, .score-chip, .avatar { background-color: var(--glass-strong); }
/* a soft tint of the item's colour (--tc from js/config.js) over the glass */
.tinted { background-image: linear-gradient(160deg, rgb(var(--tc) / .42), rgb(var(--tc) / .2)); border-color: rgb(var(--tc) / .5); color: var(--tc-ink); }

/* ------------------------------------------------------------------ glass header */
.hd {
  position: fixed; inset: 0 0 auto; z-index: 60;
  height: calc(var(--hd-h) + var(--safe-t));
  padding: var(--safe-t) max(var(--pad), env(safe-area-inset-right)) 0 max(var(--pad), env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(246, 244, 241, .55);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  border-bottom: 1px solid rgba(255, 255, 255, .7);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hd { background: var(--paper); } }
.hd-logo { display: block; padding: 8px 0; }
.logo {
  display: block; width: 92px; aspect-ratio: 4708 / 1747; background: var(--ink);
  -webkit-mask: url('/assets/brand/saria-space-logo.svg') center / contain no-repeat;
  mask: url('/assets/brand/saria-space-logo.svg') center / contain no-repeat;
}
.glass-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.glass-btn .ic { width: 20px; height: 20px; }

/* ------------------------------------------------------------------ page */
main {
  position: relative; min-height: 100svh;
  padding: calc(var(--hd-h) + var(--safe-t) + 14px) max(var(--pad), env(safe-area-inset-right)) calc(var(--tb-h) + var(--safe-b) + 40px) max(var(--pad), env(safe-area-inset-left));
  overflow-x: clip;
}
.view { animation: view-in .42s var(--e-out) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } }

.date-line { font: 500 15px/1.6 var(--f-ar); color: var(--mute); }
.page-title { font: 900 44px/1.15 var(--f-ar-display); }
.title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.avatar { display: block; flex: none; border-radius: 50%; padding: 3px; }
.avatar picture { display: block; width: 100%; height: 100%; }
/* Saria's square, face-centred files shown as a circle exactly as they are: no zoom, no offset */
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; margin: 30px 0 14px; }
.sec-h h2 { font: 900 24px/1.15 var(--f-ar-display); }
.sec-h .link { font: 500 14px/1.6 var(--f-ar); color: var(--mute); }
.chip-s { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font: 500 12px/1 var(--f-ar); white-space: nowrap; box-shadow: none; }
.chip-s .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-s .ic { width: 14px; height: 14px; }
.chip-p { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font: 600 11px/1 var(--f-lat); letter-spacing: .01em; box-shadow: none; }
.chip-p.ar { font: 500 11px/1 var(--f-ar); }

/* ------------------------------------------------------------------ bottom bar
   Fixed physical order, left to right, whatever the text direction: Projects · Today · + · Calendar · Diary. */
.tb {
  position: fixed; inset: auto 0 0; z-index: 60;
  height: calc(var(--tb-h) + var(--safe-b));
  padding: 0 0 var(--safe-b);
  direction: ltr;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  border-top: 1px solid rgba(255, 255, 255, .8);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .tb { background: var(--glass-solid); } }
/* Each slot is placed by its physical left edge (never by grid or flex order, which follow the text direction), so the
   order holds in every engine, in RTL and LTR: four tab slots of (width - 92px) / 4 and the + slot of 92px. */
.tb > * { position: absolute; top: 0; height: var(--tb-h); width: calc((100% - 92px) / 4); }
.tb > [data-col='1'] { left: 0; }
.tb > [data-col='2'] { left: calc((100% - 92px) / 4); }
.tb > [data-col='3'] { left: calc((100% - 92px) / 2); width: 92px; }
.tb > [data-col='4'] { left: calc((100% - 92px) / 2 + 92px); }
.tb > [data-col='5'] { left: calc((100% - 92px) * 3 / 4 + 92px); }
.tb-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 100%;
  color: var(--mute); font: 500 11px/1.2 var(--f-ar);
}
.tb-item .ic { width: 24px; height: 24px; color: var(--faint); transition: color .2s var(--e-std); }
.tb-item [lang='en'] { font: 500 11.5px/1.2 var(--f-num); }
.tb-item::after { content: ''; width: 4px; height: 4px; border-radius: 50%; margin-top: 1px; }
.tb-item[aria-current='page'] { color: var(--ink); }
.tb-item[aria-current='page'] .ic { color: var(--ink); }
.tb-item[aria-current='page']::after { background: var(--ink); }
.tb > .fab-slot { display: grid; place-items: center; }
.fab {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink);
  transform: translateY(-20px);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 6px rgba(255, 255, 255, .35), 0 18px 34px -16px rgba(52, 58, 74, .55);
  transition: transform .25s var(--e-out);
}
.fab:active { transform: translateY(-20px) scale(.94); }
.fab .ic { width: 28px; height: 28px; }

/* ------------------------------------------------------------------ Today */
.week { display: grid; grid-template-columns: repeat(7, 1fr); margin: 22px -4px 6px; }
.wd { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 13px 0 11px; margin: 0 2px; border: 1px solid transparent; border-radius: 999px; }
.wd .d { font: 500 12px/1 var(--f-ar); color: var(--mute); }
.wd .n { font: 500 19px/1 var(--f-num); width: 30px; height: 30px; margin: -6px 0; display: grid; place-items: center; border-radius: 50%; }
.wd .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink); opacity: 0; }
.wd.has .dot { opacity: .7; }
.wd.today .n { box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 700; }
.wd.sel { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(255, 255, 255, .9), 0 16px 30px -16px rgba(52, 58, 74, .55); }
.wd.sel .d { color: var(--ink); }
.wd.sel .n { font-weight: 700; }

.tl { position: relative; margin-top: 18px; padding-inline-start: 34px; }
.tl::before { content: ''; position: absolute; inset-inline-start: 10px; top: 24px; bottom: 30px; width: 1.5px; background: var(--line-2); }
.ti { position: relative; margin-bottom: 12px; }
.node {
  position: absolute; inset-inline-start: -30px; top: 21px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--ink); background: var(--glass-strong);
  display: grid; place-items: center;
}
.ti.next .node { width: 18px; height: 18px; inset-inline-start: -32px; top: 22px; border: 0; background: rgb(var(--tc)); box-shadow: 0 0 0 3px rgba(255, 255, 255, .95), 0 0 0 4.5px rgb(var(--tc) / .7); }
.ti.done .node { width: 18px; height: 18px; inset-inline-start: -32px; }
.ti.done .node .ic { width: 12px; height: 12px; stroke-width: 2.4; }
.ti.past .node { border-color: var(--faint); }

.row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 16px 18px; border-radius: 22px; }
[role='button'][data-action] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.row[role='button']:active, .mini-ev[role='button']:active { transform: scale(.985); }
.row, .mini-ev { transition: transform .2s var(--e-out); }
.row .t { font: 700 18px/1.3 var(--f-ar-display); }
.row .time { font: 500 14px/1.6 var(--f-num); color: var(--mute); }
.row .s { grid-column: 1 / -1; font: 400 14px/1.55 var(--f-ar); color: var(--mute); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.row .s .sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.row .s > .ic { width: 15px; height: 15px; }
/* upcoming rows: a light wash of the type's colour over the glass */
.row.soft-tint { background-image: linear-gradient(160deg, rgb(var(--tc) / .24), rgb(var(--tc) / .06)); border-color: rgb(var(--tc) / .32); }
.type-dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--tc)); box-shadow: 0 0 0 1px rgb(var(--tc) / .55); flex: none; }
.ti.past .row, .ti.done .row { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding-block: 12px; }
.ti.past .row .t { color: var(--mute); }
.ti.done .row .t { color: var(--mute); text-decoration: line-through; text-decoration-color: rgba(11, 11, 11, .3); text-decoration-thickness: 1px; }

/* the current or next item: a blurred card in its type's colour with glass on top (orange for a meeting) */
.ti.next .row {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 28px; padding: 22px 20px 18px; min-height: 176px; color: var(--ink);
  background-color: rgb(var(--tc) / .26);
  background-image:
    linear-gradient(165deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .12) 58%),
    radial-gradient(70% 90% at 8% 0%, rgb(var(--tc) / .8), transparent 70%),
    radial-gradient(60% 80% at 100% 100%, rgb(var(--tc) / .62), transparent 70%),
    radial-gradient(40% 60% at 70% 30%, rgb(var(--tc) / .35), transparent 70%);
  border-color: rgba(255, 255, 255, .8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 24px 44px -26px rgb(var(--tc) / .9);
}
.ti.next .row::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; background: #fff; opacity: .55;
  width: 170px; height: 170px; inset-inline-end: -46px; top: -54px;
  -webkit-mask: url('/assets/art/doodle-spiral-big.png') center / contain no-repeat; mask: url('/assets/art/doodle-spiral-big.png') center / contain no-repeat;
}
.ti.next .row .t { font-size: 22px; }
.ti.next .row .time { color: var(--ink); font-size: 15px; }
.ti.next .row .s { color: var(--ink-2); }
.next-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.next-foot .chip-s { background-color: rgba(255, 255, 255, .6); color: var(--ink); }
.next-foot .spark { width: 34px; height: 34px; object-fit: contain; margin-inline-start: auto; opacity: .7; }
.next-label { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font: 500 12px/1 var(--f-ar); color: var(--ink); }
.next-label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--tc)); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); animation: pulse 1.8s var(--e-std) infinite; }
@keyframes pulse { 50% { transform: scale(.6); opacity: .55; } }

.empty { text-align: center; padding: 40px 0 10px; }
.empty .art { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin: 0 auto 18px; box-shadow: 0 0 0 4px rgba(255, 255, 255, .7), 0 18px 36px -24px rgba(52, 58, 74, .5); }
.empty p { font: 500 17px/1.6 var(--f-ar); color: var(--mute); }

/* ------------------------------------------------------------------ Projects */
.hero {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 32px; padding: 24px 22px 62px;
  background-color: rgba(255, 255, 255, .3);
  background-image:
    linear-gradient(165deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .1) 60%),
    radial-gradient(60% 90% at 0% 0%, rgba(150, 180, 210, .75), transparent 70%),
    radial-gradient(55% 85% at 100% 100%, rgba(138, 192, 150, .6), transparent 70%),
    radial-gradient(40% 70% at 85% 10%, rgba(206, 212, 120, .55), transparent 70%);
}
.hero::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; background: #fff; opacity: .6;
  width: 210px; height: 200px; inset-inline-start: -30px; top: -26px;
  -webkit-mask: url('/assets/art/doodle-scribble-ell.png') center / contain no-repeat; mask: url('/assets/art/doodle-scribble-ell.png') center / contain no-repeat;
}
.hero .hi { font: 500 15px/1.6 var(--f-ar); color: var(--ink-2); }
.hero h1 { font: 900 30px/1.15 var(--f-ar-display); margin-top: 4px; }
/* the English greeting card (Saria's text): left to right, in the site's English faces */
.hero[lang='en'] { text-align: left; container-type: inline-size; }
.hero[lang='en'] .hi { font: 500 15px/1.5 var(--f-num); }
.hero[lang='en'] h1 { font: 800 31px/1.08 var(--f-lat); letter-spacing: -.02em; margin-top: 6px; }
/* two subtitle lines, each kept on one line: sized to the card (the longer line is about 24 font-sizes wide in Hanken
   Grotesk), up to 15 px; below the avatar, so it uses the full width */
.hero-sub { margin-top: 12px; font: 400 min(15px, calc(100cqi / 24.6))/1.5 var(--f-num); color: var(--ink-2); }
.hero .hero-sub { padding-inline-end: 0; }
.hero .hi, .hero h1 { padding-inline-end: 72px; }
.hero .avatar { position: absolute; inset-inline-end: 20px; top: 22px; width: 56px; height: 56px; }
.search {
  position: relative; z-index: 2; margin: -30px 12px 0;
  display: flex; align-items: center; gap: 10px; border-radius: 20px; padding: 8px; padding-inline-start: 16px;
  background-color: var(--glass-strong);
}
.search > .ic { color: var(--mute); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 16px/1.6 var(--f-ar); padding: 8px 0; }
.search input[lang='en'] { font-family: var(--f-num), var(--f-ar); } /* "Dive in" in English; Arabic typed in still gets Thmanyah */
.search .sq { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--ink); background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--line); }
.search .sq .ic { width: 20px; height: 20px; }

.cards { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--pad)); padding: 4px var(--pad) 22px; scrollbar-width: none; }
.cards::-webkit-scrollbar { display: none; }
.card { position: relative; flex: 0 0 222px; min-height: 292px; scroll-snap-align: start; border-radius: 32px; padding: 20px; display: flex; flex-direction: column; text-align: start; transition: transform .25s var(--e-out); }
.card.tinted { color: var(--ink); }
.card:active { transform: scale(.98); }
.card .pic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: rgba(255, 255, 255, .78); box-shadow: inset 0 1px 0 #fff, 0 6px 16px -10px rgba(52, 58, 74, .5); }
.card .cnt { position: absolute; top: 20px; inset-inline-end: 20px; text-align: center; }
.card .cnt b { display: block; font: 300 34px/1 var(--f-num); color: var(--tc-ink); }
.card .cnt small { font: 500 11px/1.4 var(--f-ar); color: var(--tc-ink); }
.card .name { margin-top: 22px; font: 700 26px/1.1 var(--f-lat); letter-spacing: -.02em; }
.card .svc { margin-top: 10px; font: 400 15px/1.5 var(--f-ar); color: var(--tc-ink); }
.card .go { margin-top: auto; align-self: flex-end; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: rgba(255, 255, 255, .78); box-shadow: inset 0 1px 0 #fff; }
.card .go .ic { width: 20px; height: 20px; }

.task { display: flex; align-items: center; gap: 14px; border-radius: 20px; padding: 15px 16px; margin-bottom: 10px; transition: opacity .35s var(--e-std), transform .35s var(--e-out); }
.cb { width: 26px; height: 26px; flex: none; border-radius: 8px; border: 1.5px solid var(--ink); box-shadow: none; display: grid; place-items: center; color: transparent; }
.cb .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.task .tt { flex: 1; min-width: 0; font: 400 16px/1.45 var(--f-ar); }
.task .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.task.done { opacity: .62; box-shadow: none; }
.task.done .cb { color: var(--ink); background-color: var(--glass-strong); }
.task.done .tt > span:first-child { color: var(--mute); text-decoration: line-through; text-decoration-color: rgba(11, 11, 11, .3); }
.task.ticking { transform: translateY(8px); opacity: .4; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 10px; font: 500 14px/1.6 var(--f-ar); color: var(--mute); }
.switch { width: 46px; height: 28px; border-radius: 999px; position: relative; flex: none; background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .2s var(--e-std); }
.switch::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .25s var(--e-out); }
.switch[aria-checked='true'] { background: rgba(138, 192, 150, .7); box-shadow: inset 0 0 0 1px rgba(36, 76, 45, .3); }
.switch[aria-checked='true']::after { transform: translateX(-18px); }
.no-results { text-align: center; color: var(--mute); padding: 18px 0; font: 400 15px/1.6 var(--f-ar); }

/* ------------------------------------------------------------------ panel (project, diary entry, composer) */
.panel {
  position: fixed; inset: 0; z-index: 50; overflow-y: auto; overscroll-behavior: contain;
  background: var(--field);
  padding: calc(var(--hd-h) + var(--safe-t) + 14px) max(var(--pad), env(safe-area-inset-right)) calc(var(--tb-h) + var(--safe-b) + 110px) max(var(--pad), env(safe-area-inset-left));
  opacity: 0; transform: translateX(-28px); visibility: hidden;
  transition: opacity .32s var(--e-out), transform .38s var(--e-out), visibility 0s linear .38s;
}
.panel.open { opacity: 1; transform: none; visibility: visible; transition: opacity .32s var(--e-out), transform .38s var(--e-out); }
.back { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; }
.panel-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.p-head { margin-top: 18px; border-radius: 32px; padding: 22px; position: relative; overflow: hidden; color: var(--ink); }
.p-head .pic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .78); }
.p-head .name { margin-top: 18px; font: 700 36px/1.05 var(--f-lat); letter-spacing: -.02em; }
.p-head .st { margin-top: 10px; display: flex; gap: 8px; }
.p-head .st .chip-s { background-color: rgba(255, 255, 255, .7); color: var(--ink); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-svc { border-radius: 999px; padding: 8px 14px; font: 500 14px/1.3 var(--f-ar); box-shadow: none; }
.mini-ev { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; border-radius: 20px; padding: 12px; margin-bottom: 10px; }
.mini-ev .dd { text-align: center; border-radius: 14px; padding: 8px 0; color: var(--tc-ink); background: rgb(var(--tc) / .32); box-shadow: inset 0 0 0 1px rgb(var(--tc) / .45); }
.mini-ev .dd b { display: block; font: 400 22px/1 var(--f-num); }
.mini-ev .dd small { font: 500 11px/1.6 var(--f-ar); }
.mini-ev .t { font: 700 16px/1.35 var(--f-ar-display); }
.mini-ev .s { font: 400 13px/1.5 var(--f-ar); color: var(--mute); display: flex; align-items: center; gap: 6px; }

/* ------------------------------------------------------------------ Calendar (reference 03) */
.cal-top { display: flex; align-items: center; justify-content: space-between; }
.pill-btn { height: 50px; padding: 0 18px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
.pill-btn .y { font: 500 21px/1 var(--f-num); }
.pill-btn .ic { width: 22px; height: 22px; }
.pill-group { display: inline-flex; gap: 4px; border-radius: 999px; padding: 5px; }
.pill-group button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.month-title { font: 900 48px/1.15 var(--f-ar-display); margin: 18px 0 12px; }
.dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font: 500 12px/1 var(--f-ar); color: var(--mute); padding: 0 6px 10px; border-bottom: 1px solid var(--line-2); margin: 0 calc(-1 * var(--pad)); }
.cal-grid { margin: 0 calc(-1 * var(--pad)); padding-inline: 4px; touch-action: pan-y; }
.cal-grid.slide-next { animation: slide-next .34s var(--e-out); }
.cal-grid.slide-prev { animation: slide-prev .34s var(--e-out); }
@keyframes slide-next { from { opacity: 0; transform: translateX(-26px); } }
@keyframes slide-prev { from { opacity: 0; transform: translateX(26px); } }
.wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-height: 112px; padding: 8px 0 10px; border-bottom: 1px solid var(--line); }
.day { min-width: 0; padding: 0 2px; text-align: center; border-radius: 12px; }
.day:active { background: rgba(255, 255, 255, .4); }
.day .n { width: 32px; height: 32px; margin: 0 auto 6px; display: grid; place-items: center; border-radius: 50%; font: 500 19px/1 var(--f-num); }
.day.we .n { color: var(--mute); font-weight: 400; }
.day.out { visibility: hidden; }
.day.today .n { background: var(--glass-strong); box-shadow: inset 0 0 0 1.5px var(--ink), 0 6px 14px -8px rgba(52, 58, 74, .5); font-weight: 700; color: var(--ink); }
/* chips: soft tints of the type's colour (no blur: there can be forty of them) */
.chip { display: block; text-align: start; border-radius: 7px; padding: 3px 4px; margin-bottom: 3px; font: 500 10.5px/1.3 var(--f-ar); overflow: hidden; color: var(--tc-ink); background: rgb(var(--tc) / .3); box-shadow: inset 0 0 0 1px rgb(var(--tc) / .45); }
.chip .ct { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.chip .cm { display: block; font: 500 10px/1.3 var(--f-num); }
.chip.task-chip { color: var(--mute); background: rgba(255, 255, 255, .4); box-shadow: inset 0 0 0 1px var(--line-2); }
.more { display: block; font: 500 10px/1.4 var(--f-num); color: var(--mute); }
.today-pill { position: fixed; z-index: 55; inset-inline-start: max(var(--pad), env(safe-area-inset-right)); bottom: calc(var(--tb-h) + var(--safe-b) + 16px); height: 48px; padding: 0 22px; border-radius: 999px; font: 500 16px/1 var(--f-ar); }

/* ------------------------------------------------------------------ Diary page (reference 04) */
.d-top { display: flex; align-items: center; justify-content: space-between; }
.round-btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; }
.d-date { text-align: center; color: var(--accent); font: 500 16px/1.6 var(--f-ar); margin-top: 6px; }
.d-title { text-align: center; font: 900 38px/1.15 var(--f-ar-display); margin-top: 2px; }
.tags { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tag { border-radius: 999px; padding: 6px 15px; font: 500 13px/1.5 var(--f-num); color: var(--ink-2); box-shadow: none; }
.wait-tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-ar); color: var(--ink-2); }
.wait-tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1.8s var(--e-std) infinite; }
.illus { margin-top: 20px; border-radius: 26px; overflow: hidden; aspect-ratio: 3 / 2; box-shadow: 0 0 0 4px rgba(255, 255, 255, .55), 0 20px 40px -26px rgba(52, 58, 74, .5); }
.illus img { width: 100%; height: 100%; object-fit: cover; }
.audio { margin-top: 14px; border-radius: 999px; padding: 10px 20px 10px 10px; display: flex; align-items: center; gap: 12px; }
.play { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.play .ic { width: 18px; height: 18px; }
.wave { flex: 1; height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.wave i { display: block; width: 2.5px; border-radius: 2px; background: rgba(11, 11, 11, .2); }
.wave i.on { background: rgba(11, 11, 11, .78); }
.audio .dur { font: 500 14px/1 var(--f-num); color: var(--ink-2); }
.preview { display: block; width: 100%; text-align: start; margin-top: 18px; border-radius: 26px; padding: 20px; }
.preview .k { font: 800 15px/1 var(--f-lat); letter-spacing: .02em; text-transform: uppercase; }
.preview .x { margin-top: 10px; font: 400 16px/1.6 var(--f-ar); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.preview .x[lang='en'] { font: 400 16px/1.7 var(--f-num); }
.preview .more-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font: 500 14px/1.6 var(--f-ar); color: var(--accent); }
.preview .more-link .ic { width: 18px; height: 18px; }
.add-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; border-radius: 26px; padding: 14px; }
.add-row .avatar { width: 56px; height: 56px; }
.add-row .q { flex: 1; font: 700 17px/1.35 var(--f-ar-display); }
.add-row .q small { display: block; font: 400 13px/1.5 var(--f-ar); color: var(--mute); }
.add-row .round-btn { width: 46px; height: 46px; }
.entry { display: grid; grid-template-columns: 58px 1fr; gap: 14px; width: 100%; text-align: start; border-radius: 24px; padding: 16px; margin-bottom: 10px; }
.entry .dd { text-align: center; }
.entry .dd b { display: block; font: 300 34px/1 var(--f-num); color: var(--mute); }
.entry .dd small { font: 500 12px/1.6 var(--f-ar); color: var(--mute); }
.entry .et { display: block; font: 700 19px/1.25 var(--f-lat); letter-spacing: -.01em; }
.entry .et.ar { font: 700 18px/1.3 var(--f-ar-display); }
.entry .ex { font: 400 14px/1.55 var(--f-num); color: var(--mute); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.entry .ex.ar { font-family: var(--f-ar); }
.entry .ef { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.score-chip { font: 600 12px/1 var(--f-num); color: var(--ink); border-radius: 999px; padding: 6px 10px; direction: ltr; box-shadow: none; }

/* ------------------------------------------------------------------ Diary entry (reference 06) */
.dear { margin-top: 26px; direction: ltr; text-align: left; }
.dear h1 { font: 900 54px/.95 var(--f-lat); letter-spacing: -.01em; text-transform: uppercase; }
.dear .when { margin-top: 10px; font: 400 14px/1.4 var(--f-num); color: var(--ink-2); }
.seg { display: inline-flex; border-radius: 999px; padding: 4px; margin-top: 22px; box-shadow: none; }
.seg button { height: 34px; padding: 0 16px; border-radius: 999px; font: 500 14px/1 var(--f-ar); color: var(--mute); border: 1px solid transparent; }
.seg button[lang='en'] { font-family: var(--f-num); }
.seg button[aria-pressed='true'] { color: var(--ink); border-color: rgba(255, 255, 255, .9); box-shadow: 0 6px 14px -8px rgba(52, 58, 74, .45); }
.seg button:disabled { color: #77726a; }
.e-title { margin-top: 26px; font: 800 32px/1.1 var(--f-lat); letter-spacing: -.015em; direction: ltr; text-align: left; }
.e-text { margin-top: 14px; color: var(--ink); }
.e-text[lang='en'] { direction: ltr; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; font: 400 18px/1.95 var(--f-num); }
.e-text[lang='ar'] { direction: rtl; text-align: start; font: 400 17px/1.6 var(--f-ar); }
.e-text p + p { margin-top: 14px; }
.t-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; border-radius: 16px; padding: 10px 14px; font: 500 14px/1.6 var(--f-ar); color: var(--ink-2); }
.t-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--ink); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.orig-note { margin-top: 14px; font: 400 13px/1.6 var(--f-ar); color: var(--mute); display: flex; align-items: center; gap: 6px; }
.orig-note .ic { width: 16px; height: 16px; }

.analysis { margin-top: 28px; border-radius: 28px; padding: 20px; direction: ltr; text-align: left; }
.analysis h3 { font: 800 20px/1.2 var(--f-lat); }
.analysis .by { font: 400 13px/1.5 var(--f-num); color: var(--mute); margin-top: 2px; }
.analysis .a-text { margin-top: 10px; font: 400 15px/1.6 var(--f-num); }
/* wisdom of the day: one highlighted line in its own glass card, over a soft green and blue wash (never orange) */
.wisdom {
  position: relative; overflow: hidden; isolation: isolate; margin-top: 12px; border-radius: 28px; padding: 18px 20px 22px;
  direction: ltr; text-align: left;
  background-image:
    linear-gradient(165deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12) 60%),
    radial-gradient(70% 90% at 0% 0%, rgba(138, 192, 150, .55), transparent 70%),
    radial-gradient(60% 80% at 100% 100%, rgba(150, 180, 210, .5), transparent 70%);
}
.wisdom h3 { font: 600 12px/1.4 var(--f-num); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.wisdom .w-line { margin-top: 8px; font: 700 22px/1.3 var(--f-lat); letter-spacing: -.01em; padding-right: 40px; }
.wisdom .w-art { position: absolute; z-index: -1; right: 16px; top: 14px; width: 42px; opacity: .8; }
.score-card { margin-top: 12px; border-radius: 28px; padding: 18px 20px; direction: ltr; text-align: left; }
.score { display: flex; align-items: flex-end; gap: 14px; }
.score .big { font: 300 58px/.85 var(--f-num); letter-spacing: -.03em; }
.score .big small { font-size: 28px; color: var(--mute); letter-spacing: 0; }
.score .why { font: 400 15px/1.5 var(--f-num); color: var(--ink-2); padding-bottom: 4px; }
.safety { margin-top: 12px; font: 400 12.5px/1.5 var(--f-num); color: var(--mute); }

.waiting { margin-top: 26px; border-radius: 28px; padding: 20px; }
.waiting .w-top { display: flex; align-items: center; gap: 14px; }
.waiting .avatar { width: 56px; height: 56px; }
.waiting h3 { font: 700 19px/1.3 var(--f-ar-display); display: flex; align-items: center; gap: 8px; }
.waiting h3::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1.8s var(--e-std) infinite; }
.waiting p { margin-top: 12px; font: 400 15px/1.6 var(--f-ar); color: var(--ink-2); }
.ask { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 18px; padding: 10px; padding-inline-start: 16px; box-shadow: none; }
.ask q { font: 500 15px/1.5 var(--f-ar); quotes: '«' '»'; }
.ask button { height: 38px; padding: 0 14px; border-radius: 999px; color: var(--ink); font: 500 13px/1 var(--f-ar); display: inline-flex; align-items: center; gap: 6px; flex: none; background: var(--glass-strong); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 6px 14px -8px rgba(52, 58, 74, .45); }
.ask button .ic { width: 16px; height: 16px; }
.title-wait { margin-top: 26px; display: flex; align-items: center; gap: 10px; color: var(--mute); font: 800 32px/1.1 var(--f-lat); direction: ltr; }
.title-wait .ic { width: 22px; height: 22px; }

.e-actions { position: fixed; z-index: 56; left: 50%; transform: translateX(-50%); bottom: calc(var(--tb-h) + var(--safe-b) + 16px); display: flex; gap: 12px; direction: ltr; }
.e-actions button { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; }
.e-actions .off { color: var(--faint); position: relative; }
.e-actions .off::after { content: ''; position: absolute; width: 26px; height: 1.6px; background: var(--faint); transform: rotate(-45deg); border-radius: 2px; }

/* composer */
.comp-head { text-align: center; margin-top: 4px; }
.rec-wrap { display: grid; place-items: center; gap: 16px; margin-top: 34px; text-align: center; }
.rec { width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); box-shadow: inset 0 1px 0 #fff, 0 0 0 10px rgba(255, 255, 255, .3), 0 22px 44px -22px rgba(52, 58, 74, .6); transition: transform .25s var(--e-out); }
.rec .ic { width: 40px; height: 40px; }
.rec.on { animation: rec 1.6s var(--e-std) infinite; }
@keyframes rec { 50% { transform: scale(1.06); } }
.rec-time { font: 300 44px/1 var(--f-num); letter-spacing: -.02em; }
.rec-hint { font: 400 14px/1.6 var(--f-ar); color: var(--mute); max-width: 18em; }
.live { display: flex; align-items: center; justify-content: center; gap: 3px; height: 40px; }
.live i { width: 3px; border-radius: 2px; background: rgba(11, 11, 11, .7); animation: bar 1s var(--e-std) infinite; transform-origin: center; }
@keyframes bar { 50% { transform: scaleY(.3); } }
.composer-text { width: 100%; min-height: 220px; margin-top: 18px; outline: 0; resize: none; border-radius: 24px; padding: 18px; font: 400 17px/1.6 var(--f-ar); background-color: var(--glass-strong); }
.save-note { margin-top: 12px; text-align: center; font: 400 13px/1.6 var(--f-ar); color: var(--mute); }

/* ------------------------------------------------------------------ + sheet */
.sheet-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(240, 238, 234, .4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .3s var(--e-std), visibility 0s linear .3s; }
.sheet-backdrop.open { opacity: 1; visibility: visible; transition: opacity .3s var(--e-std); }
.sheet {
  position: fixed; inset: auto 0 0; z-index: 71; max-height: calc(100svh - var(--safe-t) - 28px); overflow-y: auto; overscroll-behavior: contain;
  border-radius: 30px 30px 0 0;
  padding: 10px max(var(--pad), env(safe-area-inset-right)) calc(22px + var(--safe-b)) max(var(--pad), env(safe-area-inset-left));
  background: linear-gradient(rgba(248, 247, 244, .74), rgba(248, 247, 244, .74)), var(--field);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
  border-top: 1px solid rgba(255, 255, 255, .9);
  transform: translateY(104%); transition: transform .42s var(--e-out);
  box-shadow: 0 -20px 50px -30px rgba(52, 58, 74, .5);
}
.sheet.open { transform: none; }
.grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 0 auto 16px; }
.sheet-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sheet-h h2 { font: 900 28px/1.15 var(--f-ar-display); }
.x-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.x-btn .ic { width: 20px; height: 20px; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice { border-radius: 26px; padding: 18px; min-height: 148px; display: flex; flex-direction: column; justify-content: space-between; text-align: start; transition: transform .2s var(--e-out); }
.choice:active { transform: scale(.97); }
.choice .ci { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--tc-ink); background: rgb(var(--tc) / .38); box-shadow: inset 0 0 0 1px rgb(var(--tc) / .5); }
.choice b { display: block; font: 700 19px/1.3 var(--f-ar-display); margin-top: 14px; }
.choice small { display: block; font: 400 13px/1.5 var(--f-ar); color: var(--mute); }
.type-dots { display: flex; gap: 4px; margin-top: 8px; }
.form { display: grid; gap: 12px; }
.field { border-radius: 18px; padding: 10px 16px 12px; display: block; box-shadow: none; }
.field > span { display: block; font: 500 12px/1.6 var(--f-ar); color: var(--mute); }
.field input, .field select { width: 100%; border: 0; outline: 0; background: none; font: 400 17px/1.5 var(--f-ar); padding: 2px 0 0; min-height: 30px; -webkit-appearance: none; appearance: none; }
.field input[type='date'], .field input[type='time'] { font-family: var(--f-num); direction: ltr; text-align: right; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.opts-l { font: 500 12px/1.6 var(--f-ar); color: var(--mute); margin: 4px 4px -4px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { height: 38px; padding: 0 14px; border-radius: 999px; font: 500 14px/1 var(--f-ar); display: inline-flex; align-items: center; gap: 6px; box-shadow: none; }
.opt .ic { width: 16px; height: 16px; }
.opt[aria-pressed='true'] { box-shadow: inset 0 0 0 1.5px var(--ink), 0 6px 14px -8px rgba(52, 58, 74, .45); }
/* a type chip, selected: a soft tint of the type's colour */
.opt.typed[aria-pressed='true'] { color: var(--tc-ink); background-image: linear-gradient(160deg, rgb(var(--tc) / .5), rgb(var(--tc) / .26)); box-shadow: inset 0 0 0 1.5px rgb(var(--tc)), 0 6px 14px -8px rgb(var(--tc) / .7); }
.icon-pick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.icon-pick .opt { height: 48px; padding: 0; justify-content: center; border-radius: 16px; }
.icon-pick .opt .ic { width: 22px; height: 22px; }
.btn-primary { height: 56px; border-radius: 999px; color: var(--ink); font: 500 17px/1 var(--f-ar); display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; width: 100%; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(255, 255, 255, .9), 0 16px 30px -18px rgba(52, 58, 74, .55); }
.btn-primary:active { transform: scale(.98); }
.months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.months .opt { height: 52px; justify-content: center; border-radius: 18px; font-size: 15px; }
.months .opt.cur:not([aria-pressed='true']) { box-shadow: inset 0 0 0 1px var(--line-2); }
.year-sw { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 16px; }
.year-sw b { font: 400 30px/1 var(--f-num); min-width: 3.2em; text-align: center; }

/* ------------------------------------------------------------------ sign-in */
body.signed-out .tb, body.signed-out .hd .glass-btn { display: none; }
body.signed-out main { padding-bottom: calc(var(--safe-b) + 40px); }
.auth { min-height: calc(100svh - var(--hd-h) - var(--safe-t) - 60px); display: grid; place-items: center; }
.auth-card { width: 100%; max-width: 380px; border-radius: 32px; padding: 30px 22px 24px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.auth-logo { width: 120px; margin-bottom: 6px; }
.auth-avatar { margin: 6px 0 2px; }
.auth-card h1 { font: 900 32px/1.15 var(--f-ar-display); }
.auth-tag { font: 500 15px/1.6 var(--f-ar); color: var(--mute); margin-top: -6px; }
.auth-sub { font: 400 15px/1.6 var(--f-ar); color: var(--ink-2); max-width: 22em; }
.auth-card .field { width: 100%; text-align: start; }
.code-input { font: 500 22px/1.2 var(--f-num) !important; letter-spacing: .14em !important; text-align: center !important; text-transform: uppercase; }
.auth-err { font: 500 14px/1.6 var(--f-ar); color: var(--ink); background: rgba(255, 255, 255, .7); border-radius: 14px; padding: 8px 12px; box-shadow: inset 0 0 0 1px var(--line-2); }
.auth-dev { font: 500 13px/1.6 var(--f-ar); color: var(--mute); }
.auth-h { font: 900 26px/1.15 var(--f-ar-display); }
.rc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; width: 100%; padding: 14px; margin: 4px 0; list-style: decimal inside;
  background: rgba(255, 255, 255, .7); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line-2); text-align: left; }
.rc-list li { font: 600 16px/1.6 var(--f-num); letter-spacing: .06em; color: var(--ink); }
.rc-list li::marker { color: var(--mute); font-weight: 400; }
.auth-link { font: 500 14px/1.6 var(--f-ar); color: var(--accent); text-decoration: underline; text-underline-offset: 3px; padding: 6px; }
.btn-primary:disabled { opacity: .55; }

/* ------------------------------------------------------------------ settings */
.btn-ghost { height: 52px; border-radius: 999px; font: 500 16px/1 var(--f-ar); width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; color: var(--ink); }
.btn-ghost .ic { width: 18px; height: 18px; }
.set-card { border-radius: 26px; padding: 18px; margin-bottom: 12px; }
.set-card h3 { font: 700 18px/1.3 var(--f-ar-display); margin-bottom: 10px; }
.set-card .btn-primary { margin-top: 4px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 2px; border-top: 1px solid var(--line); margin-top: 12px; }
.set-row b { display: block; font: 500 15px/1.5 var(--f-ar); }
.set-row b[lang='en'] { font-family: var(--f-num); }
.set-row small { display: block; font: 400 13px/1.5 var(--f-ar); color: var(--mute); }
.set-ok { display: flex; align-items: center; gap: 8px; font: 500 15px/1.6 var(--f-ar); color: #244c2d; }
.set-ok .ic { width: 18px; height: 18px; }
.set-note { font: 400 14px/1.6 var(--f-ar); color: var(--ink-2); border-radius: 18px; padding: 12px 14px; margin-bottom: 12px; }
.set-card .seg { margin-top: 0; }
.connector-url { font: 600 15px/1.5 var(--f-num); background: rgba(255, 255, 255, .7); border-radius: 14px; padding: 10px 14px; box-shadow: inset 0 0 0 1px var(--line-2); word-break: break-all; }
.consent-list { text-align: start; width: 100%; padding-inline-start: 20px; list-style: disc; font: 500 15px/1.7 var(--f-ar); color: var(--ink); }
.consent-form { display: grid; gap: 4px; width: 100%; }
.client-name { font-family: var(--f-lat); white-space: nowrap; }

/* composer extras */
.comp-lang { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; font: 500 13px/1.6 var(--f-ar); color: var(--mute); }
.comp-lang .seg { margin-top: 0; }
.rec-done { display: flex; align-items: center; gap: 12px; margin-top: 26px; border-radius: 999px; padding: 10px 18px 10px 10px; padding-inline-start: 10px; font: 500 15px/1.5 var(--f-ar); }

/* ------------------------------------------------------------------ toast */
.toast { position: fixed; z-index: 90; left: 50%; bottom: calc(var(--tb-h) + var(--safe-b) + 18px); max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 18px; color: var(--ink); font: 500 14px/1.5 var(--f-ar); text-align: center; opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: opacity .25s var(--e-std), transform .3s var(--e-out); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}