/* The family look - ONE stylesheet for every device he sells (Athan panel, Sajda, and whatever
   comes next). His rule, 2026-10-03: "It should match the style of the Adhan. When somebody buys
   any of the products and then the other, they are already familiar with the interface."
   Taken from the Athan panel's own setup page (esp32-adhan-panel portalHTML). Change a value
   here and every product changes with it; the devices serve this same file. */

:root {
  --bg:        #0a1628;   /* the page */
  --card-a:    #12222a;   /* card gradient, top */
  --card-b:    #0e1a22;   /* card gradient, bottom */
  --border:    #2a4a3a;   /* thin green edge of the card */
  --ink:       #e0ddd0;   /* normal text */
  --gold:      #d4c080;   /* titles */
  --label:     #8a9a6a;   /* labels, small print */
  --bism:      #8aaa5a;   /* the bismillah */
  --accent-a:  #1a6a3a;   /* button gradient, start */
  --accent-b:  #2a5a3a;   /* button gradient, end */
  --field:     #12202a;   /* input background */
  --field-edge:#1a3a2a;
  --ok:        #7aaa6a;
  --radius:    24px;      /* card corners */
  --size:      16px;      /* base text size - everything scales from this */
  --btn-ink:   #f0e8d8;   /* text on the main button */
  --ok-bg:     #0a2a1a;   /* confirmation box */
  --ok-edge:   #1a4a2a;
  --knob:      #5a6a5a;   /* switch knob, off and on */
  --knob-on:   #8ae8a0;
  --card-alpha: .48;     /* 1 = solid card, lower lets the background show through.
                            .48 = his saved look, 2026-10-03 (52 percent see-through) */
  --card-fill-a: color-mix(in srgb, var(--card-a) calc(var(--card-alpha) * 100%), transparent);
  --card-fill-b: color-mix(in srgb, var(--card-b) calc(var(--card-alpha) * 100%), transparent);
  --card-shadow: 0 12px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(42,90,58,.3) inset;
  /* The background design, drawn here rather than an image file: a faint eight-point star
     lattice (khatam) in the title gold, over a soft green glow from the top. Placeholder until
     the calligraphy design is settled - background.html shows it with nothing on top. */
  --bg-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23d4c080' stroke-opacity='.07'%3E%3Crect x='22' y='22' width='36' height='36'/%3E%3Crect x='22' y='22' width='36' height='36' transform='rotate(45 40 40)'/%3E%3Cpath d='M0 40H14.5M65.5 40H80M40 0V14.5M40 65.5V80'/%3E%3C/g%3E%3C/svg%3E");
  --bg-glow: radial-gradient(ellipse at 50% 0%, rgba(42,90,58,.28), transparent 65%);
  /* Room the phone keeps for its notch, camera and home bar (needs viewport-fit=cover in each
     page). The preview sets these by hand to stand in for a real phone. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* PHONE RULES (Apple and Android guidance), 2026-10-03, so nothing surprises on a phone:
   - text you type in is never under 16px, or an iPhone zooms the page when it is tapped;
   - anything tapped is at least 44px tall (Apple) and ideally 48px (Android);
   - nothing sits under the notch or the home bar (--safe-top, --safe-bottom);
   - choices are remembered on the device, not only in the phone, because setup opens in
     the phone's small sign-in window, which may forget them. */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: var(--size); }
body { font-family: system-ui, sans-serif; background: var(--bg-glow), var(--bg-art), var(--bg); color: var(--ink);
       min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center;
       padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom)); }
/* On a phone the card starts at the top. 100svh is the height LEFT when the browser shows its
   address bar (his RedMagic, 2026-10-03: sliding down brought the bar back and pushed the card's
   bottom off the screen). No band above the card any more: the language button floats over
   the card's top corner, and the bismillah keeps clear of it (his ask, same evening). */
@media (max-width: 600px) {
  body { align-items: flex-start; padding: calc(10px + var(--safe-top)) 10px calc(10px + var(--safe-bottom)); }
  .lang { top: calc(16px + var(--safe-top)); right: 16px; }
  .bism { margin-left: 2.6rem; margin-right: 2.6rem; font-size: 22px; }
  .card { padding: .6rem 1.1rem 1.25rem; }
  .dots { margin: .5rem 0 .8rem; }
  label, .tg { margin-top: .55rem; }
  .btn { margin-top: .8rem; }
  .privacy { margin-top: .8rem; }
}
/* Short phones (iPhone SE and the like): Apple's 44px minimum instead of Android's 48px,
   and tighter spacing, so every step still fits without scrolling. */
@media (max-width: 600px) and (max-height: 700px) {
  body { padding-top: calc(6px + var(--safe-top)); padding-bottom: calc(4px + var(--safe-bottom)); }
  .lang { top: calc(12px + var(--safe-top)); right: 12px; width: 2.6rem; height: 2.6rem; }
  .bism { margin-bottom: 0; line-height: 1.15; }
  .dots { margin: .35rem 0 .5rem; }
  h2 { margin-bottom: .15rem; } p.lead { margin-bottom: .3rem; font-size: .85rem; }
  .net, input, select, .btn { min-height: 44px; }
  .btn { padding: .55rem; } input, select { padding: .5rem .65rem; }
  label, .tg { margin-top: .4rem; } .tg { min-height: 40px; }
  .privacy { margin-top: .5rem; font-size: .64rem; }
}
.card { background: linear-gradient(145deg, var(--card-fill-a), var(--card-fill-b)); border-radius: var(--radius);
        padding: 2rem; max-width: 480px; width: 100%; border: 1px solid var(--border);
        box-shadow: var(--card-shadow); }
/* The bismillah keeps one size whatever the text size is set to: fixed px, never rem. */
.bism { text-align: center; font-size: 46px; color: var(--bism); margin-bottom: 6px; line-height: 1.3;
        font-family: 'Traditional Arabic', 'Scheherazade New', 'Amiri', serif; text-shadow: 0 0 20px rgba(100,160,60,.15); }
.title { color: var(--gold); font-size: 1rem; text-align: center; font-weight: 700; letter-spacing: 1px; }
.dots { display: flex; justify-content: center; gap: .5rem; margin: .8rem 0 1.2rem; }
.dots span { width: .55rem; height: .55rem; border-radius: 50%; background: var(--field-edge); transition: background .3s; }
.dots span.on { background: var(--accent-a); box-shadow: 0 0 0 2px var(--border); }
h2 { color: var(--gold); font-size: 1.1rem; margin-bottom: .3rem; }
p.lead { color: var(--label); font-size: .9rem; margin-bottom: .6rem; }
label { display: block; margin-top: .9rem; font-size: .85rem; color: var(--label); }
input, select { width: 100%; padding: .65rem; margin-top: .3rem; background: var(--field); border: 1px solid var(--field-edge);
                border-radius: 10px; color: var(--ink); font-size: max(16px, .95rem); min-height: 48px; }
input:focus, select:focus { outline: none; border-color: var(--accent-a); }
.btn { margin-top: 1.1rem; padding: .8rem; background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); border: none;
       border-radius: 10px; color: var(--btn-ink); font-size: 1rem; width: 100%; cursor: pointer; font-weight: 600; min-height: 48px; }
.btn.ghost { background: var(--card-a); border: 1px solid var(--field-edge); color: var(--label); font-weight: 400; }
.row { display: flex; gap: .6rem; }
.row .btn { flex: 1; }
.tg { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .9rem;
      color: var(--ink); font-size: .9rem; cursor: pointer; min-height: 44px; }
.tg input { display: none; }
.tg i { display: inline-block; width: 2.3rem; height: 1.3rem; background: var(--field); border: 1px solid var(--field-edge);
        border-radius: 1rem; position: relative; transition: background .25s; flex: none; }
.tg i::after { content: ''; position: absolute; width: 1rem; height: 1rem; border-radius: 50%; background: var(--knob);
               top: .1rem; left: .12rem; transition: all .25s; }
.tg input:checked + i { background: var(--accent-a); }
.tg input:checked + i::after { left: 1.05rem; background: var(--knob-on); }
/* Slider: a thin 6px track inside a 44px tall touch area. */
input[type=range] { -webkit-appearance: none; appearance: none; height: 44px; min-height: 44px; padding: 0; background: transparent; border: none; }
input[type=range]::-moz-range-track { height: 6px; background: var(--field); border: 1px solid var(--field-edge); border-radius: 3px; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; background: var(--field); border: 1px solid var(--field-edge); border-radius: 3px; }
/* The knob is the size of the switch's knob (his ask, 2026-10-07: one size for both); the 44px
   tall slider still gives the finger a full-size target. */
input[type=range]::-moz-range-thumb { width: 1rem; height: 1rem; border-radius: 50%; background: var(--accent-a); border: 2px solid var(--ok); box-sizing: border-box; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 1rem; height: 1rem; margin-top: calc(3px - .5rem); border-radius: 50%; background: var(--accent-a); border: 2px solid var(--ok); box-sizing: border-box; }
.found { margin-top: .9rem; padding: .8rem; border-radius: 12px; background: var(--field); border: 1px solid var(--field-edge); }
.found b { color: var(--gold); display: block; font-size: 1.05rem; }
.found span { color: var(--label); font-size: .82rem; }
.net { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: .4rem .7rem;
       border: 1px solid transparent; border-bottom-color: var(--field-edge); cursor: pointer; font-size: .92rem; }
/* The chosen network: the whole row, name and signal, in a filled box with a clear edge. */
.net.sel { color: var(--gold); background: color-mix(in srgb, var(--accent-a) 35%, var(--field)); border-radius: 10px;
           border-color: var(--accent-a); box-shadow: 0 0 0 1px var(--accent-a) inset; }
.net .sig { width: 22px; height: 22px; flex: none; color: var(--label); }
.net.sel .sig { color: var(--gold); }
.net small { color: var(--label); }
.ok { margin-top: .9rem; padding: .7rem; border-radius: 10px; background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-edge); font-size: .88rem; }
.privacy { margin-top: 1.2rem; text-align: center; color: var(--label); font-size: .68rem; }
.step { display: none; }
.step.show { display: block; }
.step.show > * { opacity: 0; animation: si .3s ease forwards; }
.step.show > *:nth-child(2) { animation-delay: .06s; } .step.show > *:nth-child(3) { animation-delay: .12s; }
.step.show > *:nth-child(4) { animation-delay: .18s; } .step.show > *:nth-child(5) { animation-delay: .24s; }
.step.show > *:nth-child(n+6) { animation-delay: .3s; }
@keyframes si { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
/* Arabic reads right to left, so its steps slide in from the other side. */
[dir=rtl] .step.show > * { animation-name: si-rtl; }
@keyframes si-rtl { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
/* Language button: pinned to the top right corner of the SCREEN, never of the card, so it is
   in the same place on every product and every style - he: "always have to look for that
   button" when it moved. Shows the other language's letter, drawn from family-letters.js. */
.lang { position: fixed; top: calc(16px + var(--safe-top)); right: 16px; z-index: 10; width: 2.8rem; height: 2.8rem; border-radius: 50%;
        background: var(--field); border: 1px solid var(--field-edge); color: var(--gold); cursor: pointer;
        display: grid; place-items: center; padding: 0; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.lang svg { width: 56%; height: 56%; display: block; }
.lang:hover { border-color: var(--accent-a); }
/* family.js wraps the card in .frame, so a style can outline a shaped card. It takes the
   full card width even when the card is empty (the background-only page). */
.card { position: relative; }
.frame { flex: 0 1 480px; max-width: 480px; min-width: 0; }
input[type=checkbox], input[type=radio] { width: 24px; height: 24px; min-height: 0; margin: 0; accent-color: var(--accent-a); }
/* Location map: the phone draws it; the pin is in the style's own accent colour. */
.map { height: 200px; margin-top: .4rem; border-radius: 12px; border: 1px solid var(--field-edge); overflow: hidden;
       position: relative; z-index: 0; background: var(--field); }
.map.nomap { display: grid; place-items: center; padding: 1rem; text-align: center; color: var(--label); font-size: .85rem; height: auto; min-height: 80px; }
.pin { width: 28px; height: 30px; cursor: grab; }
.pin i { display: block; width: 24px; height: 24px; margin: 0 2px; background: var(--accent-a); border: 3px solid #fff;
         border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.mapwrap { position: relative; }
.mapwrap .place-search { position: absolute; top: 14px; left: 8px; right: 8px; width: auto; margin: 0; z-index: 1;
                         min-height: 40px; padding: .45rem .7rem; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.found.slim { margin-top: .5rem; padding: .5rem .8rem; }
.found.slim b { font-size: .95rem; }
@media (max-width: 600px) { .map { height: 180px; } }
@media (max-width: 600px) and (max-height: 700px) { .map { height: 150px; } }

/* ---- 2026-10-03 evening, from his first look on a real phone ------------------------------ */
/* Step dots: the current step is a green dot; a finished step a glowing check mark; a skipped
   step a dash - never a check. */
.dots { align-items: center; }
.dots span.done { width: 16px; height: 16px; background: none; box-shadow: none; display: grid; place-items: center; }
.dots span.done svg { width: 16px; height: 16px; fill: none; stroke: var(--ok); stroke-width: 3.2;
                      stroke-linecap: round; stroke-linejoin: round;
                      filter: drop-shadow(0 0 3px var(--ok)) drop-shadow(0 0 6px var(--accent-a)); }
.dots span.skip { width: 12px; height: 3px; border-radius: 2px; background: var(--label); opacity: .7; }
/* The language button's medallion: a petal ring around the letter. */
.lang { overflow: visible; }
.lang .ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); pointer-events: none; }
/* Location: search above the map; our own small controls on it. */
.place-search { margin-top: .3rem; }
.mapwrap { margin-top: .5rem; }
.map { margin-top: 0; }
.mapcredit { position: absolute; right: 6px; bottom: 4px; z-index: 2; width: 22px; height: 22px; padding: 0; min-height: 0;
             border: none; background: none; color: #333; font: italic 700 15px Georgia, serif; cursor: pointer;
             text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.mapcredit-text { display: none; position: absolute; right: 28px; bottom: 6px; z-index: 2; max-width: 75%; padding: 3px 7px;
                  border-radius: 6px; background: rgba(255,255,255,.92); color: #222; font-size: 11px; line-height: 1.3; }
.mapcredit-text.show { display: block; }
.zoomstrip { position: absolute; right: 8px; bottom: 34px; z-index: 2; width: 34px; height: 104px; border-radius: 17px;
             background: rgba(255,255,255,.92); box-shadow: 0 1px 4px rgba(0,0,0,.35); display: flex; flex-direction: column;
             align-items: center; justify-content: space-between; padding: 4px 0; touch-action: none; cursor: ns-resize;
             color: #222; font: 700 20px system-ui, sans-serif; user-select: none; }
.zoomstrip i { flex: 1; width: 3px; margin: 4px 0; border-radius: 2px; background: linear-gradient(#999, #ccc); }
.qibla { position: absolute; left: 6px; bottom: 6px; z-index: 2; display: flex; align-items: center; gap: 3px;
         padding: 3px 7px 3px 4px; border-radius: 14px; background: rgba(12,26,32,.82); color: #e6cf86;
         box-shadow: 0 1px 4px rgba(0,0,0,.35); pointer-events: none; }
.qibla .arrow { width: 20px; height: 20px; fill: #e6cf86; transition: transform .3s; }
.qibla .fig { width: 10px; height: 19px; }
.qibla b { font: 600 11px system-ui, sans-serif; }
/* The "Try it" light bar is a picture of the device: it never flips with the language. */
.bar { direction: ltr; }
@media (max-width: 600px) {
  .bism { font-size: 30px; margin-left: 2.4rem; margin-right: 2.4rem; }
  /* The map takes whatever height the screen has left (his ask, 2026-10-07: reclaim the space). */
  .map { height: clamp(150px, calc(100svh - var(--map-chrome, 540px)), 380px); }
}
@media (max-width: 600px) and (max-height: 700px) { .map { height: clamp(120px, calc(100svh - var(--map-chrome-short, 500px)), 380px); } }
/* Buttons keep their places in both languages (his rule, 2026-10-03, like the Try it light bar):
   only the words change. In Arabic a row would otherwise mirror, Back and Next swapping sides. */
[dir=rtl] .row { flex-direction: row-reverse; }
/* A button label never wraps - a two-line label made the whole row of buttons grow (2026-10-07). */
.row .btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }