/* ============================================================================
   layout.css — TWELVE LAYOUTS AND FOUR SURFACES, AS TWO ORTHOGONAL AXES.

   THE PROBLEM THIS SOLVES. The seventeen skins were seventeen palettes wearing
   one layout. Hadi looked at them and said so: "they're all the same thing with
   just a different color scheme." He was right — `home` changed the tile
   arrangement on ONE screen, and every other tab was identical in all seventeen.

   THE FIX IS A SPLIT, NOT MORE ROWS.
     layout  = grid, density, rhythm, radius, ornament   (the twelve below)
     surface = how a container announces itself           (the four below)
     palette = the colours, which the skin table already owns
   They compose. Twelve x four x seventeen is 816 combinations from a table that
   is barely longer than the one it replaces — and, more to the point, changing
   one axis does not disturb the other two.

   HOW A LAYOUT IS EXPRESSED. Four variables plus a handful of structural rules.
   Every component in style.css already reads --lr/--lb/--lgap/--lpad, so a new
   layout is mostly four numbers. Structure that cannot be a number — an arch
   instead of a rounded corner, a margin rail, a vertical timeline — gets its own
   rules underneath. No layout may touch colour: that is the skin's job and
   no_hardcoded_color.mjs enforces it.

   THE ONE RULE NO LAYOUT MAY BREAK. عند الاحتضار keeps one instruction per
   screen, type no smaller than 20px and targets no smaller than 56px, in every
   layout. See the block at the foot of this file. The stress literature is
   unanimous and this is the tab where an experiment can do real harm.
   ========================================================================== */

:root{ --lr:16px; --lb:1px; --lgap:14px; --lpad:16px; }

/* ── 1 · المخطوط — the manuscript page ───────────────────────────────────────
   A matn column with a permanent margin rail, a jadwal rule at a fixed inset,
   and a locked line grid. Squared off: a manuscript has no rounded corners. */
body[data-layout="manuscript"]{--lr:0px;--lb:1px;--lgap:0px;--lpad:18px}
body[data-layout="manuscript"] .body{padding-inline:26px 14px;position:relative}
body[data-layout="manuscript"] .body::before{content:"";position:absolute;inset-block:2px;
  inset-inline-start:14px;border-inline-start:1px solid var(--line)}
body[data-layout="manuscript"] .card{border-block-end:1px solid var(--line);border-inline:0;
  border-block-start:0;background:none;padding-inline:0}
body[data-layout="manuscript"] .tiles{display:block}
body[data-layout="manuscript"] .tile{border:0;border-block-end:1px solid var(--line);
  background:none;border-radius:0;min-height:auto;padding:14px 0}
body[data-layout="manuscript"] .h1{font-weight:400}

/* ── 2 · المنبر — the portal ─────────────────────────────────────────────────
   border-radius is replaced outright by an arch. A pointed top edge and a flat
   foot is the pishtaq, and it is the one shape on the phone that nobody else
   ships. Long Arabic labels are the risk, so the arch is a top inset only. */
body[data-layout="portal"]{--lr:0px;--lb:2px;--lgap:14px;--lpad:18px}
body[data-layout="portal"] .card,
body[data-layout="portal"] .tile{border-start-start-radius:46%;border-start-end-radius:46%;
  border-end-start-radius:4px;border-end-end-radius:4px;padding-block-start:30px}
body[data-layout="portal"] .prayrow{gap:5px}
body[data-layout="portal"] .pray{border-start-start-radius:40%;border-start-end-radius:40%;
  border-end-start-radius:3px;border-end-end-radius:3px;padding-block-start:16px}

/* ── 3 · السجل — the register ────────────────────────────────────────────────
   Forty-two-pixel rows, edge-to-edge hairlines, figures on the far side. A debt
   is a ledger. The least emotionally loaded option in the catalogue, which is
   what a backlog a person blames themselves for actually needs. */
body[data-layout="register"]{--lr:0px;--lb:0px;--lgap:0px;--lpad:0px}
body[data-layout="register"] .card{background:none;border:0;border-block-end:1px solid var(--line);
  border-radius:0;padding:12px 0}
body[data-layout="register"] .tiles{display:block}
body[data-layout="register"] .tile,
body[data-layout="register"] .item{background:none;border:0;border-radius:0;min-height:44px;
  border-block-end:1px solid var(--line);padding:11px 0;display:flex;align-items:center;gap:12px}
body[data-layout="register"] .tile h2{font-size:15px;margin:0}
body[data-layout="register"] .tile p{display:none}      /* a register is one line */
body[data-layout="register"] .tile .ic{transform:scale(.72)}

/* ── 4 · الشبكة — bento ──────────────────────────────────────────────────────
   Designed AS two columns, not as a four-column desktop grid collapsed. Under
   16px radius a bento stops reading as a bento; 24 is the identity. */
body[data-layout="bento"]{--lr:24px;--lb:0px;--lgap:12px;--lpad:18px}
body[data-layout="bento"] .tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
body[data-layout="bento"] .tile{min-height:132px;align-content:end}
body[data-layout="bento"] .tile.a{grid-column:1/-1;min-height:150px}
body[data-layout="bento"] .card{border:0}

/* ── 5 · المجلة — editorial ──────────────────────────────────────────────────
   Air instead of boxes. Big section gaps, a display heading, a drop cap. Costs
   the most scrolling of the twelve and buys the most calm. */
body[data-layout="editorial"]{--lr:6px;--lb:0px;--lgap:34px;--lpad:0px}
body[data-layout="editorial"] .card{background:none;border:0;padding:0;margin-block-end:30px}
body[data-layout="editorial"] .card h3{font-size:25px;line-height:1.3;font-weight:600}
/* NO DROP CAP. ::first-letter is a Latin device and it is actively wrong in
   Arabic: the script is CONNECTED, so pulling the first letter out of «اسمك»
   leaves «ا» floating beside «سمك» — a broken word, not a flourish. It rendered
   as an isolated alif, which is a vertical stroke and says nothing. Islamic
   manuscript never did this; it opened a section with an unwan and a rule, which
   is what type.css gives this layout instead. */
body[data-layout="editorial"] .tiles{display:block}
body[data-layout="editorial"] .tile{background:none;border:0;border-block-start:1px solid var(--line);
  border-radius:0;padding:18px 0;min-height:auto}

/* ── 6 · الخط — the calligraphic panel ───────────────────────────────────────
   No containers at all. A dense right-aligned type mass against generous void,
   which is how a calligraphic panel is composed — and the most literal answer to
   "minimal and religiously present" in the catalogue. Interactive text carries a
   hairline, because otherwise nothing on the screen looks tappable. */
body[data-layout="khat"]{--lr:0px;--lb:0px;--lgap:26px;--lpad:0px}
body[data-layout="khat"] .body{padding-inline:30px}
body[data-layout="khat"] .card,
body[data-layout="khat"] .tile,
body[data-layout="khat"] .item{background:none;border:0;border-radius:0;padding:0;min-height:auto}
body[data-layout="khat"] .tiles{display:block}
body[data-layout="khat"] .tile{padding-block:15px;border-block-end:1px solid var(--line)}
body[data-layout="khat"] .tile h2{font-size:27px;font-weight:400}
body[data-layout="khat"] .tile p,
body[data-layout="khat"] .tile .ic{display:none}
body[data-layout="khat"] .card h3{font-size:29px;font-weight:400;margin-block-end:10px}

/* ── 7 · الحلقة — the ring ───────────────────────────────────────────────────
   One figure up top, doorways underneath. Every ring in this layout is scoped to
   a day or a week: a ring showing 2% of a lifetime debt is an accusation, and
   the research on debt repayment is blunt about what that does to people. */
body[data-layout="ring"]{--lr:22px;--lb:1px;--lgap:12px;--lpad:16px}
body[data-layout="ring"] .card:first-of-type{text-align:center;padding-block:26px}
body[data-layout="ring"] .tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
body[data-layout="ring"] .tile{min-height:104px;text-align:center;align-content:center}
body[data-layout="ring"] .tile .go{display:none}
body[data-layout="ring"] .pray{border-radius:999px}

/* ── 8 · المسار — the path ───────────────────────────────────────────────────
   A rail down the trailing edge with numbered nodes. The best semantic fit for
   اليوم in the whole catalogue, because a day genuinely is a rail with a "now"
   marker on it. Costs about 9% of the width to the gutter. */
body[data-layout="path"]{--lr:12px;--lb:0px;--lgap:0px;--lpad:14px}
body[data-layout="path"] .body{position:relative;padding-inline-end:44px}
body[data-layout="path"] .body::before{content:"";position:absolute;inset-block:14px;
  inset-inline-end:27px;width:2px;background:var(--line)}
body[data-layout="path"] .item,
body[data-layout="path"] .tile{position:relative;background:none;border:0;border-radius:0;
  padding:16px 0;min-height:auto}
body[data-layout="path"] .tiles{display:block}
body[data-layout="path"] .item::after,
body[data-layout="path"] .tile::after{content:"";position:absolute;inset-inline-end:-24px;top:20px;
  width:13px;height:13px;border-radius:50%;border:2px solid var(--acc);background:var(--bg-solid)}
body[data-layout="path"] .card{border:0;background:none;padding-inline:0}

/* ── 9 · الطبقات — sheets ────────────────────────────────────────────────────
   A fixed plane behind, content riding a sheet with rounded top corners only.
   Depth instead of outline. */
body[data-layout="sheets"]{--lr:20px;--lb:0px;--lgap:10px;--lpad:16px}
body[data-layout="sheets"] .body{background:var(--panel);border-start-start-radius:26px;
  border-start-end-radius:26px;margin-top:10px;padding-top:18px;
  box-shadow:0 -14px 34px color-mix(in srgb,var(--bg-solid) 70%,transparent)}
body[data-layout="sheets"] .body::before{content:"";display:block;width:36px;height:4px;
  border-radius:2px;background:var(--line);margin:0 auto 16px}
body[data-layout="sheets"] .card{border:0}

/* ── 10 · الحاد — neubrutalist ───────────────────────────────────────────────
   Zero radius, a 3px border and a hard offset shadow with no blur. Tonally the
   hardest of the twelve for a will and death-rites app — and the one with the
   biggest, highest-contrast targets, which is a real accessibility win. */
body[data-layout="brut"]{--lr:0px;--lb:3px;--lgap:16px;--lpad:16px}
body[data-layout="brut"] .card,
body[data-layout="brut"] .tile,
body[data-layout="brut"] .btn,
body[data-layout="brut"] .pray{box-shadow:4px 4px 0 0 var(--acc);border-width:3px;border-radius:0}
body[data-layout="brut"] .tile:active,
body[data-layout="brut"] .btn:active{transform:translate(4px,4px);box-shadow:none}
body[data-layout="brut"] .card h3,
body[data-layout="brut"] .tile h2{font-weight:700}

/* ── 11 · البطاقات — the card feed (the recommended default) ────────────────
   What shipped, and the baseline the other eleven are measured against. */
body[data-layout="cards"]{--lr:16px;--lb:1px;--lgap:14px;--lpad:16px}

/* ── 12 · الرفوف — shelves ───────────────────────────────────────────────────
   A labelled row per group, cards scrolling sideways with a deliberate peek so
   the row reads as scrollable without a dot indicator. No auto-advance, ever. */
body[data-layout="shelves"]{--lr:14px;--lb:1px;--lgap:10px;--lpad:14px}
body[data-layout="shelves"] .tiles{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:10px;
  scroll-snap-type:x proximity;padding-block-end:8px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
body[data-layout="shelves"] .tiles::-webkit-scrollbar{display:none}
body[data-layout="shelves"] .tile{flex:0 0 152px;scroll-snap-align:start;min-height:112px}
body[data-layout="shelves"] .tile p{display:none}

/* ── WHAT THE FIRST RENDER OF ALL TWELVE ACTUALLY SHOWED ─────────────────────
   Two things, and neither was visible in the code.

   ONE: four layouts were nearly indistinguishable from `cards` on اليوم, because
   they differentiate on .tiles and اليوم is mostly .card and .prayrow. A layout
   that only declares itself on المعرفة is not a layout, it is a tile arrangement
   — which is precisely the complaint that started this work. So the prayer row,
   the one component on the screen a person looks at every single day, now answers
   to the layout as well.

   TWO: the hero ornament was 200px of decoration above the first useful pixel in
   ALL twelve, including the austere ones. A manuscript page does not open with a
   medallion, and a register certainly does not. The ornament stays where it earns
   its place and goes where it contradicts the layout.                          */

body[data-layout="manuscript"] .motif,body[data-layout="manuscript"] .hero-medal,
body[data-layout="register"] .motif,body[data-layout="register"] .hero-medal,
body[data-layout="khat"] .hero-medal,body[data-layout="brut"] .hero-medal,
body[data-layout="editorial"] .hero-medal{display:none}

/* the prayer row, per layout */
body[data-layout="manuscript"] .prayrow{display:block;margin:0}
body[data-layout="manuscript"] .pray{display:flex;justify-content:space-between;width:100%;
  border:0;border-block-end:1px dotted var(--line);background:none;padding:11px 0;font-weight:400;
  border-radius:0;text-align:start}
body[data-layout="register"] .prayrow{display:block;margin:0}
body[data-layout="register"] .pray{display:block;width:100%;border:0;background:none;
  border-block-end:1px solid var(--line);padding:12px 0;text-align:start;font-weight:400}
body[data-layout="khat"] .prayrow{display:block}
body[data-layout="khat"] .pray{display:block;width:100%;background:none;border:0;padding:9px 0;
  font-size:25px;font-weight:400;text-align:start}
body[data-layout="editorial"] .prayrow{display:block;border-block-start:1px solid var(--line)}
body[data-layout="editorial"] .pray{display:flex;justify-content:space-between;width:100%;
  background:none;border:0;border-block-end:1px solid var(--line);padding:14px 0;
  font-size:19px;font-weight:400;text-align:start}
body[data-layout="bento"] .prayrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
body[data-layout="bento"] .pray{min-height:66px;display:grid;place-content:center}
body[data-layout="bento"] .pray:first-child{grid-column:1/-1}
body[data-layout="shelves"] .prayrow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:x proximity}
body[data-layout="shelves"] .prayrow::-webkit-scrollbar{display:none}
body[data-layout="shelves"] .pray{flex:0 0 108px;scroll-snap-align:start;min-height:74px}
body[data-layout="ring"] .prayrow{gap:6px}
body[data-layout="ring"] .pray{min-width:0;padding:16px 4px;font-size:13px}
body[data-layout="path"] .prayrow{display:block;position:relative}
body[data-layout="path"] .pray{display:block;width:100%;background:none;border:0;text-align:start;
  padding:13px 0;font-weight:400}

/* ── SURFACES — orthogonal to all twelve ─────────────────────────────────────
   Flat / glass / hard / none. These are how a container announces itself, which
   is a different question from how the screen is organised — and keeping them
   apart is the difference between a skin table and a skin system. */
body[data-surface="flat"] .card,body[data-surface="flat"] .tile{backdrop-filter:none;box-shadow:none}
body[data-surface="glass"] .card,body[data-surface="glass"] .tile{backdrop-filter:blur(14px);
  box-shadow:0 10px 30px color-mix(in srgb,var(--bg-solid) 64%,transparent)}
body[data-surface="hard"] .card,body[data-surface="hard"] .tile{backdrop-filter:none;
  box-shadow:3px 3px 0 0 color-mix(in srgb,var(--acc) 62%,transparent)}
body[data-surface="none"] .card,body[data-surface="none"] .tile{backdrop-filter:none;
  box-shadow:none;background:none;border-color:transparent}

/* ── THE FLOOR NO LAYOUT MAY GO THROUGH ──────────────────────────────────────
   عند الاحتضار is opened by someone standing next to a dying relative, possibly
   in the dark, possibly crying, possibly having never opened this app before.
   Acute stress collapses working memory, narrows attention and degrades fine
   motor control. So every layout above may restyle this screen and none of them
   may shrink it: 20px floor on the instruction, 56px floor on the target, and
   the rows stay separated whatever --lgap says. Last in the file on purpose, so
   it wins the cascade against all twelve. */
body [data-screen="screen-ihtidar"] .item{min-height:56px;padding-block:16px;
  margin-block-end:10px;display:flex;align-items:center;gap:14px}
body [data-screen="screen-ihtidar"] .item h3{font-size:20px;line-height:1.45}
body [data-screen="screen-ihtidar"] .item .meta{font-size:16px}
body [data-screen="screen-ihtidar"] .av{min-width:34px}

/* ── القضاء: a ledger, not a scoreboard ──────────────────────────────────────
   `.big` is a filled gradient medallion. It is right for a celebratory figure and
   wrong for every number on this screen: the count of prayers a person owes, and
   the name of the one they are about to make up, are not achievements. Rendering
   it was the only way to see that — in code it was just a class name.

   Weight and size carry the emphasis here. No fill, no gradient, no chip. */
.card.qada .figure{text-align:center;font-size:40px;line-height:1.25;font-weight:600;
  color:var(--acc);margin:6px 0 2px}
.item.qrow{justify-content:space-between;text-align:start;width:100%}
.item.qrow .meta b{font-size:16px;font-weight:600}
.item.qrow .meta small{color:var(--soft);font-size:12.5px}
/* tabular figures so a column of counts lines up instead of shimmering */
.item.qrow .left{font-size:19px;font-weight:600;color:var(--acc);
  font-variant-numeric:tabular-nums;flex:0 0 auto}