/* Product tour styling. Pair with product-tour.js.
 * Spec: ~/.claude/standards/base/tour-and-versioning.md
 *
 * Only --pt-accent needs changing per app: set it to that product's primary colour.
 * Everything else is deliberately neutral so the card reads the same in every product. */

:root {
  --pt-accent: #0f766e;        /* per-app primary. ECC teal shown as the default */
  --pt-accent-ink: #ffffff;
  --pt-surface: #ffffff;
  --pt-ink: #111827;
  --pt-muted: #6b7280;
  --pt-line: #e5e7eb;
  --pt-scrim: rgba(15, 23, 42, .55);   /* the page behind, darkened */
  --pt-radius: 14px;
  --pt-shadow: 0 10px 40px rgba(0, 0, 0, .18);
}

/* Dark is OPT-IN, never automatic. A tour card that follows the OS while the app around
   it is light-only looks like a bug (verified 14-Oct-2026: dark card on a light page).
   An app that itself follows the OS adds class="pt-auto-dark" to <html>. */
@media (prefers-color-scheme: dark) {
  :root.pt-auto-dark:not([data-theme="light"]) {
    --pt-surface: #1f2937;
    --pt-ink: #f3f4f6;
    --pt-muted: #9ca3af;
    --pt-line: #374151;
    --pt-scrim: rgba(0, 0, 0, .65);
    --pt-shadow: 0 10px 40px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  --pt-surface: #1f2937;
  --pt-ink: #f3f4f6;
  --pt-muted: #9ca3af;
  --pt-line: #374151;
  --pt-scrim: rgba(0, 0, 0, .65);
  --pt-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}

/* Host pages without a global border-box reset (WordPress block themes) would make the
   padded card wider than its min(380px, 100vw - 32px) width and clip it on a phone. */
.pt-root, .pt-root *, .pt-root *::before, .pt-root *::after { box-sizing: border-box; }

/* The overlay covers the page and takes every click, so nothing behind can be operated
   while the tour runs. The lit area is painted by .pt-spot, not by a background here. */
.pt-root {
  position: fixed;
  inset: 0;
  pointer-events: auto;
  z-index: 2147483000;
}

/* A step with no target darkens the whole page instead of cutting a hole in it. */
.pt-root.pt-dim { background: var(--pt-scrim); }

/* One box over the target. The huge shadow spread darkens everything OUTSIDE it, so the
   target stays at full brightness with no second element and no four-rect maths. */
.pt-spot {
  position: fixed;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px var(--pt-scrim);
  pointer-events: none;
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
}

/* JS sets left and top on every step, scroll and resize. */
.pt-card {
  position: fixed;
  width: min(380px, calc(100vw - 32px));
  background: var(--pt-surface);
  color: var(--pt-ink);
  border: 1px solid var(--pt-line);
  border-radius: var(--pt-radius);
  box-shadow: var(--pt-shadow);
  padding: 16px 18px 14px;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transition: left .25s ease, top .25s ease;
}

.pt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pt-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--pt-accent);
  color: var(--pt-accent-ink);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 600;
}

.pt-spark { font-size: 11px; }

.pt-close {
  background: none;
  border: 0;
  color: var(--pt-muted);
  font-size: 20px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 6px;
}
.pt-close:hover { color: var(--pt-ink); }

.pt-title {
  margin: 14px 0 6px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.pt-body {
  margin: 0 0 16px;
  color: var(--pt-muted);
}

.pt-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--pt-line);
  padding-top: 12px;
}

.pt-count {
  font-size: 12px;
  color: var(--pt-muted);
  font-variant-numeric: tabular-nums;
}

.pt-spacer { flex: 1; }

.pt-btn {
  font: inherit;
  font-size: 13px;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  border: 1px solid transparent;
  background: none;
  color: var(--pt-ink);
}
.pt-btn:disabled { opacity: .4; cursor: default; }

.pt-skip { color: var(--pt-muted); }
.pt-skip:hover:not(:disabled) { color: var(--pt-ink); }

.pt-back { border-color: var(--pt-line); }
.pt-back:hover:not(:disabled) { background: var(--pt-line); }

.pt-next {
  background: var(--pt-accent);
  color: var(--pt-accent-ink);
  font-weight: 600;
}
.pt-next:hover { filter: brightness(1.08); }

.pt-btn:focus-visible,
.pt-close:focus-visible {
  outline: 2px solid var(--pt-accent);
  outline-offset: 2px;
}

/* The accent ring on the element the step describes. It sits inside the lit area, so it
   reads against the page rather than against the darkened surround. */
.pt-ring {
  outline: 2px solid var(--pt-accent) !important;
  outline-offset: 3px;
  border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .pt-spot, .pt-card { transition: none; }
}

/* Feedback styling. Pair with product-feedback.js.
 * Reads the tour's --pt-* tokens when they are present and falls back to the same values, so an
 * app can ship feedback on its own. Only --pt-accent needs setting per app. */

.fb-root {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--pt-scrim, rgba(15, 23, 42, .55));
  z-index: 2147483200;
}

.fb-card {
  width: min(460px, 100%);
  background: var(--pt-surface, #fff);
  color: var(--pt-ink, #111827);
  border: 1px solid var(--pt-line, #e5e7eb);
  border-radius: calc(var(--pt-radius, 14px) + 2px);
  box-shadow: var(--pt-shadow, 0 10px 40px rgba(0, 0, 0, .18));
  padding: 18px 20px 16px;
  font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.fb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.fb-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--pt-accent, #0f766e); color: var(--pt-accent-ink, #fff);
  border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600;
}
.fb-spark { font-size: 11px; }

.fb-close {
  background: none; border: 0; color: var(--pt-muted, #6b7280);
  font-size: 20px; line-height: 1; padding: 2px 4px; cursor: pointer; border-radius: 6px;
}
.fb-close:hover { color: var(--pt-ink, #111827); }

.fb-title { margin: 14px 0 6px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.fb-body { margin: 0 0 12px; color: var(--pt-muted, #6b7280); }

.fb-input {
  width: 100%; box-sizing: border-box; resize: vertical;
  font: inherit; color: var(--pt-ink, #111827);
  background: var(--pt-surface, #fff);
  border: 1px solid var(--pt-line, #e5e7eb); border-radius: 10px; padding: 10px 12px;
}
.fb-input:focus-visible { outline: 2px solid var(--pt-accent, #0f766e); outline-offset: 1px; }

.fb-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.fb-note { font-size: 12px; color: var(--pt-muted, #6b7280); }
.fb-spacer { flex: 1; }

.fb-btn {
  font: inherit; font-size: 13px; font-weight: 600;
  border-radius: 9px; padding: 9px 18px; cursor: pointer; border: 1px solid transparent;
}
.fb-send { background: var(--pt-accent, #0f766e); color: var(--pt-accent-ink, #fff); }
.fb-send:hover { filter: brightness(1.08); }
.fb-btn:focus-visible, .fb-close:focus-visible {
  outline: 2px solid var(--pt-accent, #0f766e); outline-offset: 2px;
}

/* mtpik.cam site styles. Tokens and the logo are the same as the private Ask page, so the two read as one brand. */
@font-face{font-family:"Bricolage Grotesque";src:url(/assets/fonts/bricolage-latin.woff2) format("woff2");font-weight:600 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Changa";src:url(/assets/fonts/changa-arabic.woff2) format("woff2");font-weight:600 800;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

:root{
  color-scheme:light dark;
  --bg:#eef1ee;--surface:#fbfcfa;--surface-2:#e2e8e4;
  --fg:#16211d;--fg-2:#46544e;--fg-3:#5f6c66;--line:#cdd6d1;
  --accent:#0e5b63;--accent-ink:#ffffff;
  --label:#ffd84a;--label-ink:#241c00;
  --w-band:#d3372a;--w-ink:#b42a1e;--ok:#17703f;--danger:#a02c1c;
  --shadow:0 1px 2px rgba(22,33,29,.08),0 10px 28px rgba(22,33,29,.07);
  --pt-accent:var(--accent);--pt-accent-ink:var(--accent-ink);
  --font-ui:system-ui,-apple-system,"Segoe UI","Noto Sans Arabic","Geeza Pro",Tahoma,sans-serif;
  --font-head:"Bricolage Grotesque",system-ui,sans-serif;
  --font-ar:"Changa","Noto Kufi Arabic","Geeza Pro","Segoe UI",Tahoma,system-ui,sans-serif;
  --font-num:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0e1514;--surface:#151f1d;--surface-2:#1d2a27;
    --fg:#e8efec;--fg-2:#b2c0ba;--fg-3:#97a7a0;--line:#283833;
    --accent:#5fd0c4;--accent-ink:#04201d;
    --w-ink:#ff8a7a;--ok:#6fd49a;--danger:#f2a090;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 var(--font-ui);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:30}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent);text-underline-offset:3px}
[hidden]{display:none!important}
.wrap{max-width:880px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:8px;top:-80px;background:var(--accent);color:var(--accent-ink);padding:10px 14px;border-radius:8px;z-index:60;text-decoration:none}
.skip:focus{top:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--font-head);letter-spacing:-.015em;line-height:1.2;text-wrap:balance}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{font-family:var(--font-ar);font-weight:800;letter-spacing:0}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.top-row{display:flex;align-items:center;gap:10px;padding-block:10px}
.brand{display:inline-flex;border-radius:8px}
.sp{flex:1}
.nav{display:flex;gap:2px;flex-wrap:wrap}
.nav a{color:var(--fg-2);text-decoration:none;padding:7px 10px;border-radius:8px;font-size:14px}
.nav a:hover{background:var(--surface-2)}
.nav a[aria-current]{color:var(--accent);font-weight:600}
.menu-wrap{position:relative}
.mini{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 14px;cursor:pointer;font-size:14px}
.mini:hover{border-color:var(--accent)}
.menu{position:absolute;inset-inline-end:0;top:calc(100% + 6px);min-width:230px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:40;display:flex;flex-direction:column}
.menu button{background:none;border:0;text-align:start;padding:10px 12px;border-radius:8px;cursor:pointer}
.menu button:hover{background:var(--surface-2)}

/* logo: two flip cards. mt is the calendar leaf (when, emta). pik.cam is the price label (how much, bikam).
   Flipped, the cards turn over and swap places so the Arabic reads right to left: امتي بكام. */
.lock{display:inline-flex;direction:ltr;gap:.14em;font-size:20px;line-height:1;padding:0;border:0;background:none;color:inherit;flex:none;transform:rotate(-3deg);--wl:2.55em;--wr:4.2em}
button.lock{cursor:pointer}
@media (max-width:400px){.lock{font-size:17px}}
.half{position:relative;display:block;height:1.72em;transition:transform .7s cubic-bezier(.55,0,.2,1)}
.half.hw{width:var(--wl)}.half.hm{width:var(--wr)}
.half.hw.flip{transform:translateX(calc(var(--wr) + .14em))}
.half.hm.flip{transform:translateX(calc(-1*(var(--wl) + .14em)))}
.lk{position:absolute;inset:0;transform-style:preserve-3d;transform:perspective(12em) rotateX(0);transition:transform .7s cubic-bezier(.55,0,.2,1)}
.half.flip .lk{transform:perspective(12em) rotateX(180deg)}
.lk>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:.3em;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.lk .lb{transform:rotateX(180deg);font:800 1.1em/1 var(--font-ar)}
.lt{display:flex;align-items:baseline;font:800 1.08em/1 var(--font-head);letter-spacing:-.03em}
.tld{font:600 .56em/1 var(--font-num);letter-spacing:-.02em;margin-left:.06em;opacity:.7}
.hw .lf{padding-top:.5em;background:linear-gradient(var(--w-band) 0 .5em,var(--surface) .5em);box-shadow:inset 0 0 0 .07em var(--fg);color:var(--fg)}
.hw .lb{background:var(--w-band);color:#fff}
.hm .lf{background:var(--label);color:var(--label-ink);box-shadow:inset 0 0 0 .07em var(--label-ink)}
.hm .lb{background:#17130a;color:var(--label);box-shadow:inset 0 0 0 .07em var(--label)}
.ck{position:absolute;top:.1em;right:.1em;width:.5em;height:.5em;border-radius:50%;background:var(--label-ink);color:var(--label);display:grid;place-items:center}
.ck svg{width:68%;height:68%}
.lq{display:none;position:absolute;left:50%;top:calc(100% + .5em);transform:translateX(-50%);white-space:nowrap;font:600 .27em/1 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.lq .qb{position:absolute;left:50%;top:0;transform:translateX(-50%);opacity:0;transition:opacity .15s}
.lq .qa{transition:opacity .25s .5s}
.half.flip .lq .qa{opacity:0;transition:opacity .15s}
.half.flip .lq .qb{opacity:1;transition:opacity .25s .5s}
.lock.big{display:flex;width:max-content;font-size:clamp(34px,12.5vw,60px);margin:8px auto .3em;padding-bottom:.85em}
.lock.big .lq{display:block;opacity:0;transition:opacity .5s}
.lock.big.shown .lq{opacity:1}
.lock.big .tld{opacity:0;transform:translateX(-.25em);transition:opacity .5s,transform .5s}
.lock.big.shown .tld{opacity:.7;transform:none}
.lock.big .ck{transform:scale(0)}
.lock.big.pick .ck{transform:scale(1);transition:transform .45s cubic-bezier(.3,1.7,.5,1)}

/* hero and cards */
.hero{text-align:center;padding-block:22px 6px}
.hero h1{font-size:clamp(26px,6.5vw,40px);margin:.2em 0 .3em}
.lede{max-width:56ch;margin:0 auto;color:var(--fg-2)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;margin-block:16px;box-shadow:var(--shadow)}
.card h2{margin:0 0 6px;font-size:22px}
.sub{margin:0;color:var(--fg-3)}

/* finder */
label{display:block;font-weight:600;margin-bottom:6px}
input[type="search"],select{width:100%;padding:12px 14px;min-height:46px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg)}
input[type="search"]:focus,select:focus{border-color:var(--accent)}
.row{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-top:14px}
.grow{flex:1;min-width:200px}
.chk{display:flex;align-items:center;gap:8px;min-height:46px;margin:0;font-weight:500;cursor:pointer}
.chk input{width:20px;height:20px;accent-color:var(--accent)}
.btn{margin-top:16px;background:var(--accent);color:var(--accent-ink);border:0;border-radius:10px;padding:12px 26px;min-height:46px;font-weight:700;font-size:16px;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.err{color:var(--danger);margin:10px 0 0;font-weight:600}
[aria-invalid="true"]{border-color:var(--danger)!important}

/* results */
.res{display:grid;gap:14px;margin-top:20px}
@media (min-width:720px){.res{grid-template-columns:1fr 1fr}}
.call,.hm-card{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--surface-2);min-width:0}
.res h3{margin:0 0 6px;display:flex;gap:10px;align-items:baseline;font-size:20px}
.res h3 .k{font:800 24px/1 var(--font-ar)}
.res h3 .s{color:var(--fg-3);font-size:14px;font-family:var(--font-ui);font-weight:600}
.call.now{border-inline-start:6px solid var(--ok)}
.call.wait{border-inline-start:6px solid var(--w-band)}
.big{font:800 clamp(28px,8vw,40px)/1.1 var(--font-head);margin:6px 0}
html[lang="ar"] .big{font-family:var(--font-ar)}
.call.now .big{color:var(--ok)}
.call.wait .big{color:var(--w-ink)}
.fine{color:var(--fg-3);font-size:13px;margin:8px 0 0}
.shops{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.shop{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--fg);text-decoration:none;font-weight:600;overflow-wrap:anywhere}
.shop:hover{border-color:var(--accent)}
.adtag{flex:none;font:700 10px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;background:var(--label);color:var(--label-ink);border-radius:5px;padding:4px 6px}
.note{color:var(--fg-3);font-size:13px;margin:10px 0 0}

/* calendar */
.cal{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.ev{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface-2)}
.ev.on{border-color:var(--ok)}
.evh{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.badge{font:600 12px/1.4 var(--font-ui);padding:3px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);white-space:nowrap}
.ev.on .badge{background:var(--ok);color:var(--bg);border-color:var(--ok)}
.good,.win{margin:4px 0 0;color:var(--fg-2);font-size:14px}
.win{color:var(--fg-3);font-size:13px}
.how{margin:10px 0 0;padding-inline-start:1.4em}
.how li{margin-block:4px}

/* prose pages */
.prose h1{font-size:clamp(26px,6vw,34px);margin:0 0 .4em}
.prose p,.prose li{max-width:68ch}
.prose ul{padding-inline-start:1.3em}
.prose li{margin-block:6px}
.amazon{font-weight:600;padding:10px 12px;border-inline-start:4px solid var(--label);background:var(--surface-2);border-radius:6px}

/* footer */
.foot{padding-block:10px 40px;color:var(--fg-3);font-size:13px}
.foot .note{margin:0 0 8px}
.meta{display:flex;gap:14px;flex-wrap:wrap;margin:0}
.ver{font-family:var(--font-num)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .half,.lk,.lq .qa,.lq .qb,.lock.big .lq,.lock.big .tld,.lock.big .ck{transition:none!important}
}

/* wait prompt, reminders, codes, deals */
.hero-sm{padding-block:18px 0}
.more{margin:12px 0 0}
.until{margin:8px 0 0;font-weight:700}
.link{background:none;border:0;padding:0;color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit}
.call>.link{display:inline-block;margin-top:10px}
.remind{display:flex;gap:6px 16px;flex-wrap:wrap;align-items:center;margin:10px 0 0}
.remind .lbl{font-weight:600;color:var(--fg-2);font-size:14px}
.seen{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line);color:var(--fg-2);font-size:14px}
.seen p{margin:4px 0 0}
.tagline{margin:6px 0 0;color:var(--fg-3);font-size:13px}
.src{font-size:13px}
.codes-card{grid-column:1/-1;border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--surface-2);min-width:0}
.codes-card h3{margin:0 0 6px;font-size:20px}
.codes{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.codeitem{display:flex;gap:10px 12px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface);min-width:0}
.codeitem code{font:700 18px/1 var(--font-num);letter-spacing:.04em;background:var(--label);color:var(--label-ink);padding:9px 12px;border-radius:8px;direction:ltr;unicode-bidi:isolate;user-select:all}
.btn2{border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:8px 14px;min-height:38px;cursor:pointer;font-weight:600}
.btn2:hover{border-color:var(--accent)}
.codeitem .info{flex:1 1 220px;min-width:0}
.codeitem .ct{margin:0;font-weight:600}

/* narrow screens: the three nav links take their own row under the logo and Help */
@media (max-width:560px){
  .top-row{flex-wrap:wrap;row-gap:2px}
  .nav{order:3;flex:1 1 100%;justify-content:space-around}
}

/* search by photo, follow request, popular, code form, privacy controls */
input[type="text"],input[type="date"]{width:100%;padding:12px 14px;min-height:46px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg)}
input[type="text"]:focus,input[type="date"]:focus{border-color:var(--accent)}
.photo-row{display:flex;gap:8px 14px;align-items:center;flex-wrap:wrap;margin-top:10px}
.photo-row .fine{margin:0}
#photoOut:not(:empty){margin-top:14px}
.photo-status{margin:0;color:var(--fg-2)}
.photo-card{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--surface-2);display:grid;gap:10px;min-width:0}
.photo-card .fine,.photo-card label{margin:0}
.photo-head{display:flex;gap:12px;align-items:center}
.photo-head canvas{max-width:72px;max-height:72px;border-radius:10px;border:1px solid var(--line);flex:none;background:var(--bg)}
.photo-head strong{font-size:18px}
.cands{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cand{display:flex;width:100%;justify-content:space-between;gap:10px;align-items:center;text-align:start;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 14px;min-height:46px;cursor:pointer;font-weight:600;overflow-wrap:anywhere}
.cand .c{flex:none;font:600 12px/1.4 var(--font-ui);color:var(--fg-3)}
.cand[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.photo-card .btn{margin-top:4px;justify-self:start}
.photo-card .link{justify-self:start}
.track{grid-column:1/-1;border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--surface-2)}
.track p{margin:4px 0 0}
.track .btn2{margin-top:10px}
.pop-cols{display:grid;gap:14px;margin-top:12px}
@media (min-width:720px){.pop-cols{grid-template-columns:1fr 1fr}}
.pop-cols h3{margin:0 0 8px;font-size:16px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--surface-2);border-radius:999px;padding:7px 14px;cursor:pointer;font-size:14px}
.chip:hover{border-color:var(--accent)}
.chip i{font-style:normal;color:var(--fg-3);margin-inline-start:8px}
.votes{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.votes .btn2{min-height:34px;padding:4px 12px;font-size:14px}
.votes .fine{margin:0}
#cf .row{margin-top:10px}
.actions{margin:14px 0 0}
#privacy .chk{margin-top:12px}

/* compare page and the adviser */
textarea{width:100%;padding:12px 14px;min-height:92px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg);resize:vertical;font:inherit}
textarea:focus{border-color:var(--accent)}
.opts{display:grid;gap:14px;margin-top:14px}
fieldset{border:0;margin:0;padding:0;min-width:0}
fieldset.opt{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--surface-2)}
fieldset.opt legend{font-weight:700;padding:0 6px}
.optgrid{display:flex;gap:12px;flex-wrap:wrap}
.optgrid .grow{min-width:150px}
.namerow{display:flex;gap:8px}
.namerow input[type="text"]{flex:1;min-width:0}
.snap{flex:none}
details.more{margin-top:12px}
details.more summary{cursor:pointer;color:var(--fg-2);font-weight:600;margin-bottom:10px}
.modes{margin-top:16px;display:flex;gap:6px 18px;flex-wrap:wrap;align-items:center}
.modes legend{font-weight:700;margin-bottom:4px}
#cmpf>.link{display:inline-block;margin-top:12px}
.cres,.advice{margin-top:18px;border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--surface-2)}
.cres h3,.advice h3{margin:0 0 8px;font-size:20px}
.advice h3{margin-top:16px;font-size:17px}
.big-note{font-weight:700;font-size:18px;margin:0}
.plain{margin:6px 0 0;padding-inline-start:1.2em}
.plain li{margin-block:6px}
.rank{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rank>li{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface)}
.rank>li.win{border-color:var(--ok);box-shadow:inset 4px 0 0 var(--ok)}
html[dir="rtl"] .rank>li.win{box-shadow:inset -4px 0 0 var(--ok)}
.rh{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
meter{width:100%;height:12px;margin-top:8px}
.rlinks{display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center;margin:10px 0 8px;font-size:14px}
.rlinks .lbl{font-weight:600;color:var(--fg-2)}
.rank .btn2{margin-top:2px}
.judge{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:8px;justify-items:start}
.judge input{width:100%}
.judge .fine{margin:0}

/* admin page */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:12px}
.tiles-wide{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.tile{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface-2);display:grid;gap:4px;min-width:0}
.tile .k{color:var(--fg-3);font-size:13px}
.tile .v{font:800 24px/1.1 var(--font-head)}
.scroll{overflow-x:auto;margin-top:8px}
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th,table.t td{text-align:start;padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
table.t th{color:var(--fg-3);font-weight:600;white-space:nowrap}
table.t td.acts{white-space:nowrap}
table.t td.acts .btn2{min-height:32px;padding:3px 10px;font-size:13px;margin-inline-end:6px}
#board h3{font-size:16px;margin:16px 0 0}
#pendTable[hidden]{display:none}
.card .sub+form{margin-top:14px}