/* ============================================================================
   Courtyard at Mid-Morning — the app's palette, type and shape language.

   Until now the palette was copy-pasted into the <style> block of fifteen
   pages, which is why it had never been changed: doing so meant fifteen
   careful edits that could silently drift apart. Every one of those pages
   happens to use the SAME token names — --ink, --surface, --gold, --cream,
   --line-soft and the rest — so redefining them in one linked stylesheet
   themes the whole app, and the next change after this one is a single file.

   This is loaded AFTER each page's own <style>, so it wins on source order at
   equal specificity. The old :root blocks are left in place deliberately: they
   are the fallback if this file ever fails to load, and a half-styled page is
   better than an unreadable one.

   ---- the direction, in one line ----
   Lime plaster and shade. The emerald is the darkest saturated thing on the
   page and the only one. Clay is a seasoning that marks what is owed, never a
   surface. No drop shadows — on plaster a shadow reads as dirt.
   ============================================================================ */

/* ---- daylight, the default ---- */
:root{
  --ink:#E3E4DA;            /* plaster ground */
  --ink-2:#DBDCD0;          /* the ground, one step deeper */
  --surface:#F4F2EA;        /* card */
  --surface-2:#EDEBE1;      /* card, one step deeper (tehreek) */
  --paper:#F6F4EC;          /* the mushaf's page */
  --line:#CFD1C4;
  --line-soft:rgba(42,46,38,.14);

  --gold:#1F5D4C;           /* emerald: the accent, and the only saturated colour */
  --gold-bright:#164437;
  --gold-soft:rgba(31,93,76,.08);

  --cream:#2A2E26;          /* ink */
  --cream-dim:rgba(42,46,38,.72);
  --cream-faint:rgba(42,46,38,.60);

  --clay:#A8654A;           /* rubric: what is owed, and nothing else */
  --straw:#C2B280;          /* empty and disabled */

  --st-none:#A8654A; --st-part:#B07D16; --st-done:#1F5D4C;
  --ok:#1F5D4C; --warn:#B07D16; --bad:#A8654A;

  /* Amiri is untouched and stays where it was — it carries the Arabic, and a
     Naskh revival is the right register for it. El Messiri sits in front for
     Latin only, so Arabic never reaches it. */
  --serif:'El Messiri','Amiri',Georgia,serif;
  --sans:'IBM Plex Sans','IBM Plex Sans Devanagari',system-ui,-apple-system,sans-serif;
  --num:'IBM Plex Sans',system-ui,sans-serif;
  --quran:'Amiri',serif;

  --shadow:none;
}

/* An explicit light block, because most pages already define one and it would
   otherwise beat :root on specificity. Same values — light IS the direction. */
[data-theme="light"]{
  --ink:#E3E4DA; --ink-2:#DBDCD0; --surface:#F4F2EA; --surface-2:#EDEBE1;
  --paper:#F6F4EC; --line:#CFD1C4; --line-soft:rgba(42,46,38,.14);
  --gold:#1F5D4C; --gold-bright:#164437; --gold-soft:rgba(31,93,76,.08);
  --cream:#2A2E26; --cream-dim:rgba(42,46,38,.72); --cream-faint:rgba(42,46,38,.60);
  --clay:#A8654A; --straw:#C2B280;
  --st-none:#A8654A; --st-part:#B07D16; --st-done:#1F5D4C;
  --ok:#1F5D4C; --warn:#B07D16; --bad:#A8654A;
  --shadow:none;
}

/* ---- the same courtyard after ishā ----
   Not the palette inverted. Emerald has to lighten to hold on a dark ground:
   a colour that reads as deep on plaster reads as a hole at night. Clay lifts
   for the same reason. */
[data-theme="dark"]{
  --ink:#1A1C17; --ink-2:#20231D; --surface:#252821; --surface-2:#2B2E26;
  --paper:#22251E; --line:#333629; --line-soft:rgba(226,228,214,.13);
  --gold:#7FB09A; --gold-bright:#A8CDBB; --gold-soft:rgba(127,176,154,.10);
  --cream:#E8E9DF; --cream-dim:rgba(232,233,223,.66); --cream-faint:rgba(232,233,223,.42);
  --clay:#C98063; --straw:#8C8259;
  --st-none:#C98063; --st-part:#D6A44E; --st-done:#7FB09A;
  --ok:#7FB09A; --warn:#D6A44E; --bad:#C98063;
  --shadow:0 20px 50px -30px rgba(0,0,0,.7);
}

/* ============================================================================
   Shape — the Apple curve

   The first pass gave every surface a mihrab shoulder: 38px on the top corners
   and 12px on the bottom, so each box read faintly as an arch. It was a nice
   idea and it was wrong — asymmetric corners read as a novelty rather than as
   architecture, and you notice them every single time instead of once.

   This is the other approach: SYMMETRIC and CONTINUOUS.

   Apple's corners are not circular arcs. A plain border-radius joins a straight
   edge to a circle, and the curvature jumps at that join — the eye catches it
   even when it cannot name it. A superellipse ramps the curvature in smoothly,
   which is why an iOS icon looks settled and a rounded rectangle looks stuck
   on. `corner-shape: squircle` is that curve, and it is progressive: browsers
   without it still get a clean symmetric radius, which is the whole shape
   anyway — just a slightly harder join.

   One scale, five steps, nothing improvised per component.
   ============================================================================ */
:root{
  --r-lg:22px;    /* cards, panels, any real surface */
  --r-sheet:28px; /* bottom sheets — top corners only */
  --r-md:14px;    /* inputs, chips, list rows */
  --r-sm:12px;    /* icon buttons */
  --r-xs:10px;    /* icon tiles */
}

.today, .card, .pr, .zk, .cfg, .tile, .chart, .heat, .slip, .empty, .list,
.sheet-col, .ay, .box, .majmua, .setup, .next, .tah, .loc,
.cyc, .profile, .jummah, .mile-card, .guide,
.tehreek, .para, .tot, .sc-head{
  border-radius:var(--r-lg);
  box-shadow:none;
}
[data-theme="dark"] .today, [data-theme="dark"] .card, [data-theme="dark"] .pr,
[data-theme="dark"] .tile, [data-theme="dark"] .sheetbox{ box-shadow:var(--shadow) }

.fld, .inp, .unit, .addpr, .jum, .lang-menu, .srch, .amt-in, .hits, .hit,
.give, .ropt, .wopt, .mode, .nav, .res, .sortbtn, .tools, .range button{
  border-radius:var(--r-md);
}
.icbtn, .lang, .lang-btn, .icon-btn, .back, .pg-btn, .adj-b, .zk-skip, .pr-edit{
  border-radius:var(--r-sm);
}
/* Buttons — the controls actually pressed. Left out of the first pass, which
   put the one thing you touch most on a slightly different curve from
   everything around it. */
.tk-go, .btn, .btn-save, .btn-ghost, .today-btn, .opt, .sheet-row button,
.res-add, .give-x, .zk-edit button{
  border-radius:var(--r-sm);
}
.card-ico, .cfg-i, .row-i, .du-act, .ay-act{
  border-radius:var(--r-xs);
}

/* Sheets rise from the bottom edge, so they curve at the head and meet the
   screen square at the foot. That asymmetry is physical, not decorative. */
.sheetbox, .sheet, .ask-sheet, .cc-sheet, .sharelang-sheet{
  border-radius:var(--r-sheet) var(--r-sheet) 0 0;
}

/* The continuous curve, wherever it is understood. Everything above already
   works without this; this is the part that makes it feel drawn rather than
   rounded off. Circles, pills and progress bars are excluded by omission —
   a superellipse applied to a 50% radius is just a slightly wrong circle. */
@supports (corner-shape: squircle){
  .today, .card, .pr, .zk, .cfg, .tile, .chart, .heat, .slip, .empty, .list,
  .sheet-col, .ay, .box, .majmua, .setup, .next, .tah, .loc, .cyc, .profile,
  .jummah, .mile-card, .guide, .tehreek, .para, .tot, .sc-head,
  .sheetbox, .sheet, .ask-sheet, .cc-sheet, .sharelang-sheet,
  .fld, .inp, .unit, .addpr, .jum, .lang-menu, .srch, .amt-in, .hits, .hit,
  .give, .ropt, .wopt, .mode, .nav, .res, .sortbtn, .tools, .range button,
  .icbtn, .lang, .lang-btn, .icon-btn, .back, .pg-btn, .adj-b, .zk-skip,
  .pr-edit, .card-ico, .cfg-i, .row-i, .du-act, .ay-act,
  .tk-go, .btn, .btn-save, .btn-ghost, .today-btn, .opt, .sheet-row button,
  .res-add, .give-x, .zk-edit button{
    corner-shape:squircle;
  }
}

/* Clay is the rubric. It marks what has not been started and nothing else, so
   a glance finds the outstanding thing without reading a word. */
.st.none, .dot.none{ background:var(--clay) }
.day-h{ color:var(--clay) }

/* Depth is light falling into a courtyard, not a shadow under a card. */
.today, .tehreek, .jummah{ position:relative; overflow:hidden }
.today::before, .tehreek::before, .jummah::before{
  content:""; position:absolute; inset:0 0 auto 0; height:72px; pointer-events:none;
  background:radial-gradient(130% 100% at 50% 0, var(--gold-soft), transparent 72%);
}

/* ---- the Green Dome ----
   A daylight photograph cannot sit on plaster as a photograph; it reads as a
   window cut into the page. Filtered into the palette's own two colours it
   stays as texture. */
.dome{
  opacity:.30;
  filter:grayscale(1) sepia(.35) hue-rotate(96deg) saturate(1.5) contrast(.95) brightness(1.06);
}
.dome::after{
  background:linear-gradient(to bottom,
    rgba(227,228,218,.55) 0%, rgba(227,228,218,.18) 52%, rgba(227,228,218,.92) 100%);
}
[data-theme="dark"] .dome{
  opacity:.26;
  filter:grayscale(1) sepia(.3) hue-rotate(96deg) saturate(1.2) contrast(1.05) brightness(.7);
}
[data-theme="dark"] .dome::after{
  background:linear-gradient(to bottom,
    rgba(26,28,23,.62) 0%, rgba(26,28,23,.28) 52%, rgba(26,28,23,.94) 100%);
}

/* El Messiri sets a little wider than Cormorant did; Amiri a little smaller
   beside it. Neither Arabic nor Urdu changes face — only size. */
body[data-lang="ar"] .today-h, body[data-lang="ar"] .tk-n{ font-size:1.06em }

/* ============================================================================
   Jummah

   tehreek.html already dresses differently on a Friday — a deliberate lift,
   with its own palette at a higher specificity than the ordinary themes. That
   idea is worth keeping, so it gets a courtyard version rather than being
   overridden away. Left alone it would be the only screen in the app still
   wearing the old gold, and only on the day most people open it.

   The lift here is LIGHT, not gold: the plaster warms toward noon and the
   emerald deepens, the way a courtyard does when the sun is overhead.
   ============================================================================ */
/* Friday keeps its gold, and that is the point.

   The first attempt made the Jummah accent emerald like every other day, which
   turned the collective number mint while the falling stars, the glow and the
   JUMMAH MUBARAK banner — all hardcoded gold in tehreek.html — stayed gold.
   A clash, and the wrong fix would have been to strip the gold out.

   So the exception becomes deliberate: six days plaster and emerald, and on
   the seventh the app wears gold. The ground stays courtyard; only the accent
   changes. One day a week that looks different is a feature of the thing being
   observed, not an inconsistency in the palette. */
[data-theme="light"].is-jummah{
  --ink:#EDE9DA; --ink-2:#E6E1CE; --surface:#FAF7EC;
  --gold:#8A6A1E; --gold-bright:#6E5316;
  --gold-soft:rgba(138,106,30,.13);
  --cream:#282419; --cream-dim:rgba(40,36,25,.76); --cream-faint:rgba(40,36,25,.62);
}
.is-jummah:not([data-theme="light"]){
  --ink:#171A15; --ink-2:#1D211B; --surface:#242822;
  --gold:#E2BD68; --gold-bright:#FBF0D8;
  --gold-soft:rgba(226,189,104,.18);
  --cream:#F4F1E4; --cream-dim:rgba(244,241,228,.74); --cream-faint:rgba(244,241,228,.50);
}
/* The Friday glow was three gold radials. In daylight gold on plaster reads as
   a stain, so it becomes light itself — warm white, barely there. */
[data-theme="light"] .jm-glow{
  background:
    radial-gradient(100% 52% at 50% -8%, rgba(255,253,244,.75), rgba(255,253,244,0) 60%),
    radial-gradient(72% 44% at 50% 36%, rgba(138,106,30,.10), rgba(138,106,30,0) 70%),
    radial-gradient(95% 48% at 50% 108%, rgba(255,253,244,.5), rgba(255,253,244,0) 66%);
}
[data-theme="light"] .is-jummah .panel{
  background:rgba(138,106,30,.06); border-color:rgba(138,106,30,.30);
}