/* The family styles. Night is the default (family.css as it stands). The others mimic
   designs he picked on 2026-10-03, drawn by themes/make_themes.py - no outside images.
   A style is chosen with <html data-theme="...">; every product follows the same choice. */

/* ---- Arch: dark teal page with floral line art, cream card shaped like an arch ---------- */
[data-theme=arch] {
  --bg: #1c4250; --card-a: #fdf7ea; --card-b: #faf0dc; --border: #f2c9a0;
  --ink: #23404a; --gold: #1c4250; --label: #7a6a58; --bism: #a0682e;
  --accent-a: #1f5a6a; --accent-b: #173f4c; --field: #fffaf0; --field-edge: #ecd3b4;
  --ok: #2f6a4a; --ok-bg: #eef6e8; --ok-edge: #bcd8b0; --knob: #cbbca4; --knob-on: #fff;
  --btn-ink: #fdf7ea; --card-shadow: none;
  --bg-art: url(themes/arch-bg.svg); --bg-glow: none;
}
[data-theme=arch] .frame {
  filter: drop-shadow(2px 0 0 var(--border)) drop-shadow(-2px 0 0 var(--border))
          drop-shadow(0 2px 0 var(--border)) drop-shadow(0 -2px 0 var(--border))
          drop-shadow(0 14px 24px rgba(0,0,0,.45));
}
[data-theme=arch] .card {
  border: none; border-radius: 0; padding: 7.8rem 2rem 4.2rem;
  background: url(themes/arch-ornament.svg) no-repeat 50% 46px, linear-gradient(170deg, var(--card-fill-a), var(--card-fill-b));
  clip-path: polygon(
    0 68px, 6px 67px, 12px 65px, 17px 61px, 21px 56px, 23px 50px, 24px 44px,
    calc(50% - 90px) 44px, calc(50% - 50px) 40px, calc(50% - 28px) 30px, calc(50% - 12px) 14px, 50% 0,
    calc(50% + 12px) 14px, calc(50% + 28px) 30px, calc(50% + 50px) 40px, calc(50% + 90px) 44px,
    calc(100% - 24px) 44px, calc(100% - 23px) 50px, calc(100% - 21px) 56px, calc(100% - 17px) 61px,
    calc(100% - 12px) 65px, calc(100% - 6px) 67px, 100% 68px,
    100% calc(100% - 68px), calc(100% - 6px) calc(100% - 67px), calc(100% - 12px) calc(100% - 65px),
    calc(100% - 17px) calc(100% - 61px), calc(100% - 21px) calc(100% - 56px), calc(100% - 23px) calc(100% - 50px),
    calc(100% - 24px) calc(100% - 44px),
    calc(50% + 90px) calc(100% - 44px), calc(50% + 50px) calc(100% - 40px), calc(50% + 28px) calc(100% - 30px),
    calc(50% + 12px) calc(100% - 14px), 50% 100%, calc(50% - 12px) calc(100% - 14px), calc(50% - 28px) calc(100% - 30px),
    calc(50% - 50px) calc(100% - 40px), calc(50% - 90px) calc(100% - 44px),
    24px calc(100% - 44px), 23px calc(100% - 50px), 21px calc(100% - 56px), 17px calc(100% - 61px),
    12px calc(100% - 65px), 6px calc(100% - 67px), 0 calc(100% - 68px));
}

/* ---- Lace: ivory page and card, blue lace corners and a motif at the middle of each edge -- */
[data-theme=lace] {
  --bg: #efe8de; --card-a: #faf6ef; --card-b: #f6f0e6; --border: #2b6a96;
  --ink: #1f3646; --gold: #24628c; --label: #6e7a84; --bism: #24628c;
  --accent-a: #2b6a96; --accent-b: #1f5274; --field: #fffdf8; --field-edge: #cdd8e0;
  --ok: #2a6a4a; --ok-bg: #edf5ec; --ok-edge: #b8d4b8; --knob: #c4ccd2; --knob-on: #fff;
  --btn-ink: #fdfaf4; --radius: 2px; --bg-art: none; --bg-glow: none;
  --card-shadow: inset 0 0 0 5px var(--card-a), inset 0 0 0 6px var(--border), 0 10px 30px rgba(0,0,0,.15);
}
[data-theme=lace] .card {
  border: 2px solid var(--border); padding: 4.4rem 3rem;
  background:
    url(themes/lace-tl.svg) no-repeat left 8px top 8px, url(themes/lace-tr.svg) no-repeat right 8px top 8px,
    url(themes/lace-bl.svg) no-repeat left 8px bottom 8px, url(themes/lace-br.svg) no-repeat right 8px bottom 8px,
    url(themes/lace-t.svg) no-repeat 50% 8px, url(themes/lace-b.svg) no-repeat 50% calc(100% - 8px),
    url(themes/lace-l.svg) no-repeat 8px 50%, url(themes/lace-r.svg) no-repeat calc(100% - 8px) 50%,
    linear-gradient(170deg, var(--card-fill-a), var(--card-fill-b));
}

/* ---- Ottoman: cream card inside a navy band of gold scrolls and red and white tulips ---- */
[data-theme=ottoman] {
  --bg: #f3ecdc; --card-a: #fdf6e4; --card-b: #fbf1dc; --border: #22327a;
  --ink: #1e2448; --gold: #22327a; --label: #7a6a50; --bism: #b08a2e;
  --accent-a: #2a3c8c; --accent-b: #22327a; --field: #fffbf0; --field-edge: #e3d3a8;
  --ok: #2a6a4a; --ok-bg: #eef5e6; --ok-edge: #c4d8b0; --knob: #d6c9a8; --knob-on: #fff;
  --btn-ink: #fdf6e4; --radius: 0px; --bg-art: none; --bg-glow: none;
  --card-shadow: 0 10px 30px rgba(0,0,0,.18);
}
[data-theme=ottoman] .card {
  border: 36px solid transparent; border-image: url(themes/ottoman-frame.svg) 36 round;
  background-clip: padding-box; padding: 1.8rem 1.6rem;
  outline: 1px solid #d8b45a; outline-offset: -40px;
}

/* ---- Paper: green leather page, cream paper card with a thin green line inside ---------- */
[data-theme=paper] {
  --bg: #1d4a40; --card-a: #efe3c8; --card-b: #e8dbbd; --border: #1d4a40;
  --ink: #22302a; --gold: #1d4a40; --label: #6e6650; --bism: #1d4a40;
  --accent-a: #1f5a4a; --accent-b: #173f36; --field: #f6eedb; --field-edge: #d4c49e;
  --ok: #2a6a4a; --ok-bg: #e6eedb; --ok-edge: #b8cca8; --knob: #cfc2a0; --knob-on: #fff;
  --btn-ink: #f6eedb; --radius: 0px; --bg-glow: none;
  --bg-art: url(themes/paper-leather.svg); --card-shadow: 0 8px 24px rgba(0,0,0,.35);
}
[data-theme=paper] .card {
  border: none; padding: 2.8rem 2.4rem;
  background: url(themes/paper-grain.svg) 0 0 / 100% 100% no-repeat, linear-gradient(170deg, var(--card-fill-a), var(--card-fill-b));
  outline: 2px solid var(--border); outline-offset: -14px;
}

/* ---- Scrolls: ivory card, dark arabesque scrolls in the corners, thin lines between ----- */
[data-theme=scrolls] {
  --bg: #e6e1d6; --card-a: #fcfaf4; --card-b: #f7f3ea; --border: #2a2622;
  --ink: #2a2622; --gold: #2a2622; --label: #77706a; --bism: #2a2622;
  --accent-a: #3a342e; --accent-b: #2a2622; --field: #fffdf8; --field-edge: #d8d2c6;
  --ok: #2a6a4a; --ok-bg: #edf3ea; --ok-edge: #c4d4bc; --knob: #cfc8bc; --knob-on: #fff;
  --btn-ink: #fcfaf4; --radius: 0px; --bg-art: none; --bg-glow: none;
  --card-shadow: 0 10px 30px rgba(0,0,0,.14);
}
[data-theme=scrolls] .card {
  border: none; padding: 5.4rem 3.2rem;
  background:
    url(themes/scroll-tl.svg) no-repeat left 10px top 10px, url(themes/scroll-tr.svg) no-repeat right 10px top 10px,
    url(themes/scroll-bl.svg) no-repeat left 10px bottom 10px, url(themes/scroll-br.svg) no-repeat right 10px bottom 10px,
    linear-gradient(var(--border), var(--border)) no-repeat 50% 22px / calc(100% - 290px) 1.5px,
    linear-gradient(var(--border), var(--border)) no-repeat 50% calc(100% - 22px) / calc(100% - 290px) 1.5px,
    linear-gradient(var(--border), var(--border)) no-repeat 22px 50% / 1.5px calc(100% - 290px),
    linear-gradient(var(--border), var(--border)) no-repeat calc(100% - 22px) 50% / 1.5px calc(100% - 290px),
    linear-gradient(170deg, var(--card-fill-a), var(--card-fill-b));
}

/* ---- Bismillah: text (default) or a calligraphy picture, chosen apart from the style ---- */
/* The words stay in the page for screen readers; only their drawing changes. Each picture is
   split in two (art/*-ink.png and art/*-colour.png): the ink is painted in the style's own
   bismillah colour through the family-tint filter, the coloured ornament keeps its colours.
   Change --bism and the calligraphy follows, on every style. */
/* font-size 0: the hidden words must take no room. On his phone the wider Arabic fallback font
   wrapped them onto two lines, making the box taller than the picture - the picture then sat
   centred with empty space above it (2026-10-07). Screen readers still read the words. */
[data-bism] .bism { color: transparent; text-shadow: none; position: relative; font-size: 0; line-height: 0; }
[data-bism] .bism::before { content: ''; position: absolute; inset: 0; filter: url(#family-tint);
  background: var(--bism-ink) center / contain no-repeat; }
[data-bism="1"] { --bism-ink: url(art/bismillah-1-ink.png?v=2); }
[data-bism="1"] .bism { height: 67px; background: url(art/bismillah-1-colour.png?v=2) center / contain no-repeat; }
[data-bism="2"] { --bism-ink: url(art/bismillah-2-ink.png); }
[data-bism="2"] .bism { height: 99px; }
#family-tint feFlood { flood-color: var(--bism); }

/* ---- Phones: the decorated styles give back room so every step fits (FIT RULE) --------- */
@media (max-width: 600px) {
  [data-theme=arch] .card { padding: 6rem 1.1rem 3.4rem;
    background: url(themes/arch-ornament.svg) no-repeat 50% 44px / 20px auto, linear-gradient(170deg, var(--card-fill-a), var(--card-fill-b)); }
  [data-theme=lace] .card { padding: 3.2rem 1.2rem;
    background:
      url(themes/lace-tl.svg) no-repeat left 6px top 6px / 44px, url(themes/lace-tr.svg) no-repeat right 6px top 6px / 44px,
      url(themes/lace-bl.svg) no-repeat left 6px bottom 6px / 44px, url(themes/lace-br.svg) no-repeat right 6px bottom 6px / 44px,
      url(themes/lace-t.svg) no-repeat 50% 6px / 42px, url(themes/lace-b.svg) no-repeat 50% calc(100% - 6px) / 42px,
      linear-gradient(170deg, var(--card-fill-a), var(--card-fill-b)); }
  [data-theme=ottoman] .card { border-width: 22px; border-image: url(themes/ottoman-frame.svg) 36 / 22px round;
    outline-offset: -26px; padding: 1rem .9rem; }
  [data-theme=paper] .card { padding: 1.9rem 1.4rem; outline-offset: -10px; }
  [data-theme=scrolls] .card { padding: 3.6rem 1.3rem;
    background:
      url(themes/scroll-tl.svg) no-repeat left 6px top 6px / 80px, url(themes/scroll-tr.svg) no-repeat right 6px top 6px / 80px,
      url(themes/scroll-bl.svg) no-repeat left 6px bottom 6px / 80px, url(themes/scroll-br.svg) no-repeat right 6px bottom 6px / 80px,
      linear-gradient(var(--border), var(--border)) no-repeat 50% 16px / calc(100% - 200px) 1.5px,
      linear-gradient(var(--border), var(--border)) no-repeat 50% calc(100% - 16px) / calc(100% - 200px) 1.5px,
      linear-gradient(170deg, var(--card-fill-a), var(--card-fill-b)); }
}
/* Short phones (iPhone SE): the frames slim down once more. */
@media (max-width: 600px) and (max-height: 700px) {
  [data-theme=arch] .card { padding: 4.4rem 1rem 3rem;
    background: url(themes/arch-ornament.svg) no-repeat 50% 40px / 12px auto, linear-gradient(170deg, var(--card-fill-a), var(--card-fill-b)); }
  [data-theme=lace] .card { padding: 2.2rem 1rem;
    background:
      url(themes/lace-tl.svg) no-repeat left 5px top 5px / 34px, url(themes/lace-tr.svg) no-repeat right 5px top 5px / 34px,
      url(themes/lace-bl.svg) no-repeat left 5px bottom 5px / 34px, url(themes/lace-br.svg) no-repeat right 5px bottom 5px / 34px,
      linear-gradient(170deg, var(--card-fill-a), var(--card-fill-b)); }
  [data-theme=ottoman] .card { border-width: 16px; border-image: url(themes/ottoman-frame.svg) 36 / 16px round;
    outline-offset: -19px; padding: .8rem .8rem; }
  [data-theme=scrolls] .card { padding: 2.4rem 1.1rem;
    background:
      url(themes/scroll-tl.svg) no-repeat left 4px top 4px / 58px, url(themes/scroll-tr.svg) no-repeat right 4px top 4px / 58px,
      url(themes/scroll-bl.svg) no-repeat left 4px bottom 4px / 58px, url(themes/scroll-br.svg) no-repeat right 4px bottom 4px / 58px,
      linear-gradient(var(--border), var(--border)) no-repeat 50% 12px / calc(100% - 150px) 1.5px,
      linear-gradient(var(--border), var(--border)) no-repeat 50% calc(100% - 12px) / calc(100% - 150px) 1.5px,
      linear-gradient(170deg, var(--card-fill-a), var(--card-fill-b)); }
}
/* iPhone SE: a shallower arch (the same shape at 60 percent depth). */
@media (max-width: 600px) and (max-height: 700px) {
  [data-theme=arch] .card { padding: 3.1rem .9rem 1.6rem; clip-path: polygon(
    0 41px, 4px 40px, 7px 39px, 10px 37px, 13px 34px, 14px 30px, 14px 26px,
    calc(50% - 54px) 26px, calc(50% - 30px) 24px, calc(50% - 17px) 18px, calc(50% - 7px) 8px, 50% 0,
    calc(50% + 7px) 8px, calc(50% + 17px) 18px, calc(50% + 30px) 24px, calc(50% + 54px) 26px,
    calc(100% - 14px) 26px, calc(100% - 14px) 30px, calc(100% - 13px) 34px, calc(100% - 10px) 37px,
    calc(100% - 7px) 39px, calc(100% - 4px) 40px, 100% 41px,
    100% calc(100% - 41px), calc(100% - 4px) calc(100% - 40px), calc(100% - 7px) calc(100% - 39px),
    calc(100% - 10px) calc(100% - 37px), calc(100% - 13px) calc(100% - 34px), calc(100% - 14px) calc(100% - 30px),
    calc(100% - 14px) calc(100% - 26px),
    calc(50% + 54px) calc(100% - 26px), calc(50% + 30px) calc(100% - 24px), calc(50% + 17px) calc(100% - 18px),
    calc(50% + 7px) calc(100% - 8px), 50% 100%, calc(50% - 7px) calc(100% - 8px), calc(50% - 17px) calc(100% - 18px),
    calc(50% - 30px) calc(100% - 24px), calc(50% - 54px) calc(100% - 26px),
    14px calc(100% - 26px), 14px calc(100% - 30px), 13px calc(100% - 34px), 10px calc(100% - 37px),
    7px calc(100% - 39px), 4px calc(100% - 40px), 0 calc(100% - 41px));
    background: url(themes/arch-ornament.svg) no-repeat 50% 27px / 10px auto, linear-gradient(170deg, var(--card-fill-a), var(--card-fill-b)); }
  [data-theme=scrolls] .card { padding: 2.3rem 1.1rem; }
}

/* ---- The bismillah is the crown of the page (his words, 2026-10-03): twice the size. ------
   The pictures take the card's full width at their own proportions; on a phone the language
   button floats over the card's corner above it, so the crown starts a little lower there. */
[data-bism="1"] .bism { height: auto; aspect-ratio: 1320 / 290; max-height: 134px; }   /* picture trimmed to its ink */
[data-bism="2"] .bism { height: auto; aspect-ratio: 1400 / 501; max-height: 198px; }
@media (max-width: 600px) {
  /* No space above the crown (his markup, 2026-10-07), at full width. The language button
     floats over the corner and stays put when the page scrolls; the crown may sit under it. */
  [data-bism] .bism { margin: 0; }
  [data-theme=arch][data-bism] .bism, [data-theme=lace][data-bism] .bism,
  [data-theme=scrolls][data-bism] .bism { margin-top: 0; }   /* their own decorated tops already clear the button */
}

/* Room the decorated frames take on a phone, so the map's leftover-height rule fits them too. */
[data-theme=arch] { --map-chrome: 610px; }
[data-theme=scrolls] { --map-chrome: 575px; }
[data-theme=lace] { --map-chrome: 565px; }