/* Koyland "Açık cam" (light glass) theme. Scope: html.iso.ui-a.theme-light ONLY; the dark graphite look (ui-modern-a.css) is the default and is not touched.
   Ayarlar > Genel > Tema sets html.theme-light (public/theme.js; landing-early.js adds it before the first paint). Loaded after ui-modern-a.css (index.html data-pos 410).
   Apple-style liquid glass: translucent near-white surfaces + strong backdrop blur/saturate/brightness, dark ink with a faint white halo, soft shadows. Owner rules (2026-11-09):
   no white text on a light surface (white only on the solid Apple-blue fills); no turquoise in this theme, the accent is the Apple system blue (#0071e3 fills with white text,
   #00377a for link/emphasis text on the glass, blue focus ring and progress). Label hierarchy: #1d1d1f primary, dark grey secondary/tertiary. Ratios: test/theme-light-css.test.mjs. */

/* ---- 1. tokens: every colour the dark theme reads from a custom property is re-pointed here ---------------------------------------------- */
html.iso.ui-a.theme-light {
  --a-glass: rgba(255, 255, 255, .44);
  --a-glass-strong: rgba(255, 255, 255, .5);
  --a-glass-modal: rgba(255, 255, 255, .78); /* reading modals (intro, away, help, Yenilikler): long text on a night map turned the .5 glass into mud */
  --a-edge: rgba(255, 255, 255, .6);
  --a-shadow: 0 12px 32px -10px rgba(20, 30, 44, .38), inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 .5px rgba(255, 255, 255, .4);
  --a-blur: blur(24px) saturate(1.8) brightness(1.15);
  --a-accent: #0071e3;
  --a-accent-hover: #0069d6;
  --a-accent-pressed: #0062c8;
  --a-on-accent: #ffffff;
  --a-accent-text: #00377a;
  --a-key: rgba(255, 255, 255, .55);
  --a-key-hover: rgba(255, 255, 255, .78);
  --a-solid: #f6f8f9; /* opaque for sticky rows: the text scrolling under them must not show through */
  --a-key-solid: #e8ebec; /* --a-key flattened over --a-solid */
  --a-key-solid-hover: #dde0e2; /* --a-key-hover flattened over --a-solid */
  --a-seg: rgba(255, 255, 255, .95);
  --a-track: rgba(20, 30, 40, .08);
  --surface: rgba(255, 255, 255, .5);
  --surface-raised: rgba(255, 255, 255, .58);
  --surface-inset: rgba(20, 30, 40, .06);
  --surface-selected: rgba(0, 113, 227, .14);
  --surface-disabled: rgba(20, 30, 40, .04);
  --decoration-glow: rgba(0, 113, 227, .3);
  --border: rgba(20, 30, 40, .22);
  --border-soft: rgba(20, 30, 40, .12);
  --focus: #0071e3;
  --success-surface: rgba(27, 110, 47, .13);
  --warning-surface: rgba(176, 46, 0, .12);
  --rarity-common: #38383e;
  --rarity-fine: #0f5222;
  --rarity-rare: #2f35a0;
  --rarity-legendary: #6e3a00;
  --shadow-sm: 0 2px 8px -2px rgba(28, 40, 52, .22);
  --shadow-panel: 0 10px 30px -10px rgba(28, 40, 52, .3);
  --shadow-modal: 0 24px 60px -16px rgba(28, 40, 52, .4);
  --glass: rgba(255, 255, 255, .44);
  --glass-solid: rgba(255, 255, 255, .95);
  --line: rgba(20, 30, 40, .12);
  --text: #2b2b30;
  --ink: #1d1d1f;
  --muted: #38383e;
  --accent: #0071e3;
  --even: #8a2400;
  --good: #0f5222;
  --bad: #9a0014;
  --blue: #00377a;
  --btn-beige: rgba(20, 30, 40, .06);
  --btn-grey: rgba(20, 30, 40, .05);
  --btn-danger: #9a0014;
  --btn-danger-bg: rgba(192, 0, 25, .09);
  --btn-muted: #38383e;
  --lbl-bg: rgba(255, 255, 255, .9);
  --lbl-border: rgba(20, 30, 40, .14);
  --alert-bad: #9a0014;
  --alert-warn: #8a2400;
  color-scheme: light;
}
/* Unlike the dark theme, phones keep the blur here (iOS WKWebView/Safari handle backdrop-filter well; owner 2026-11-09: "daha glass saydam"). Only the low preset and reduced transparency fall back to opaque white. */
@media (prefers-reduced-transparency: reduce) {
  html.iso.ui-a.theme-light { --a-blur: none; --a-glass: rgba(255, 255, 255, .97); --a-glass-strong: rgba(246, 248, 249, .99); --a-glass-modal: #f6f8f9; --surface: #f6f8f9; }
}
html.iso.ui-a.theme-light.gfx-low { --a-blur: none; --a-glass: rgba(255, 255, 255, .97); --a-glass-strong: rgba(246, 248, 249, .99); --a-glass-modal: #f6f8f9; --surface: #f6f8f9; }

/* ---- 2. the sign-in screen stays graphite: it sits on the dark night-city film (a signed-out player has no Settings, so no choice either). Same values as ui-modern-a.css section 1. */
html.iso.ui-a.theme-light #auth {
  --a-glass: rgba(18, 20, 22, .78); --a-glass-strong: rgba(20, 22, 24, .9); --a-edge: rgba(255, 255, 255, .08); --a-shadow: 0 10px 30px -8px rgba(0, 0, 0, .55);
  --a-accent: #38b2c9; --a-accent-hover: #5cc4d6; --a-on-accent: #06181d; --a-accent-text: #6cd0e2; --a-key: rgba(255, 255, 255, .08); --a-key-hover: rgba(255, 255, 255, .14);
  --a-solid: #16181a; --a-seg: rgba(255, 255, 255, .14); --a-track: rgba(0, 0, 0, .3); --surface: rgba(20, 22, 24, .9); --surface-raised: rgba(255, 255, 255, .06);
  --surface-inset: rgba(0, 0, 0, .24); --surface-selected: rgba(56, 178, 201, .18); --surface-disabled: rgba(255, 255, 255, .04); --border: rgba(255, 255, 255, .14);
  --border-soft: rgba(255, 255, 255, .08); --focus: #6cd0e2; --shadow-modal: 0 24px 60px -12px rgba(0, 0, 0, .7); --line: rgba(255, 255, 255, .1);
  --text: #dcdad4; --ink: #f2f0ea; --muted: #b4b8bd; --good: #7fd49a; --bad: #ff9b8c; --even: #f0c45c; --blue: #6cd0e2; --btn-danger-bg: rgba(255, 120, 100, .14);
  color-scheme: dark;
}

/* ---- 3. colours that ui-modern-a.css / ui-modern-a-screens.css hard-code (graphite plates, white strokes, light-on-dark status colours). Same selectors + .theme-light = one class heavier, and this file loads later. ---- */
html.iso.ui-a.theme-light :is(#intro, #away, #help, #whats-new) { background: rgba(28, 40, 52, .32); }
html.iso.ui-a.theme-light :is(#intro, #away, #help, #whats-new) :is(.intro-card, .help-card, .news-card) { background: var(--a-glass-modal); } /* beats ui-modern-a.css' :is(.glass, #panel, …) (an ID in the list) */
html.iso.ui-a.theme-light .landmark-card::backdrop, html.iso.ui-a.theme-light dialog::backdrop, html.iso.ui-a.theme-light #tip-dim { background: rgba(28, 40, 52, .36); }
html.iso.ui-a.theme-light ::placeholder { color: #5b6268; }
html.iso.ui-a.theme-light .spin { border-color: rgba(20, 30, 40, .15); border-top-color: var(--a-accent); }
html.iso.ui-a.theme-light #attrib { background: rgba(255, 255, 255, .78); }
html.iso.ui-a.theme-light .era-hud-track { background: rgba(20, 30, 40, .09); }
html.iso.ui-a.theme-light #top .brand { box-shadow: 0 8px 14px -10px rgba(28, 40, 52, .4); }
html.iso.ui-a.theme-light #move-strip[data-kind="incoming"] { --strip-pulse: #c62f35; border-color: rgba(198, 47, 53, .55); box-shadow: inset 3px 0 0 #c62f35, var(--shadow-sm); }
html.iso.ui-a.theme-light #home-call { border-color: rgba(198, 47, 53, .55); color: var(--bad); }
html.iso.ui-a.theme-light #panel .ui-tab:is([aria-selected=true], .on), html.iso.ui-a.theme-light #panel [role=tab][aria-selected=true], html.iso.ui-a.theme-light #ranking-content .ui-tabs .ui-tab.on:enabled { box-shadow: 0 1px 4px rgba(28, 40, 52, .2), 0 0 0 .5px rgba(20, 30, 40, .08); }
html.iso.ui-a.theme-light #panel .ui-tab.is-next::before { box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
html.iso.ui-a.theme-light #panel .ui-tab.is-locked { color: #5b6268; }
html.iso.ui-a.theme-light :is(#panel, #nav, dialog) button.danger, html.iso.ui-a.theme-light .danger { border-color: rgba(160, 30, 23, .4); }
html.iso.ui-a.theme-light #pick .pick-settings-actions button.danger:enabled { border-color: rgba(160, 30, 23, .4); }
/* disabled keys: the dark rule's grey is for graphite; on white it needs its own (disabled text is exempt from AA, but it must still read) */
html.iso.ui-a.theme-light button:disabled:not(#_):not(.community-rank-row button), html.iso.ui-a.theme-light #chat button:is(.primary, .confirm):disabled { color: #5b6268; }
/* dock: badge rings were the graphite of the old tray, now the glass */
html.iso.ui-a.theme-light :is(.bar-btn .badge, #quick-dock .quick-badge, #chat-badge, .bar-btn .badge.good, :is(.bar-btn .badge.warn, .bar-overflow .badge)) { border-color: #f6f8f9; }
/* focus: accent ring with a white halo (the dark theme's halo is graphite) */
html.iso.ui-a.theme-light body :is(button, summary, a, input, select, textarea, [tabindex], [role=button]):focus-visible { box-shadow: 0 0 0 5px #fff; }
html.iso.ui-a.theme-light :is(#bar, #quick-dock) :is(button, [role=button]):focus-visible, html.iso.ui-a.theme-light #labels .lbl:focus-visible { box-shadow: 0 0 0 5px #fff; }
/* a heading with tabindex="-1" is only where a dialog puts focus when it opens (initDialogAccessibility): no ring, and above all no white halo around the title (one type heavier than the [tabindex] rule above) */
html.iso.ui-a.theme-light body :is(h1, h2, h3)[tabindex="-1"]:focus-visible { outline: 0; box-shadow: none; }
/* toast dots */
html.iso.ui-a.theme-light #toasts .toast:is(.good, .bad, .warn)::before { background: #1f9d55; }
html.iso.ui-a.theme-light #toasts .toast.bad::before { background: #d64545; }
html.iso.ui-a.theme-light #toasts .toast.warn::before { background: #d99a00; }
/* alerts */
html.iso.ui-a.theme-light #alerts .alert.bad { box-shadow: inset 3px 0 0 #c62f35, var(--shadow-sm); }
html.iso.ui-a.theme-light #alerts .alert.warn { box-shadow: inset 3px 0 0 #d99a00, var(--shadow-sm); }
html.iso.ui-a.theme-light #alerts .alert.good { box-shadow: inset 3px 0 0 #1f9d55, var(--shadow-sm); }
html.iso.ui-a.theme-light #alerts .alert.bad.urgent { border-color: rgba(198, 47, 53, .5); background: linear-gradient(90deg, rgba(198, 47, 53, .16), rgba(198, 47, 53, 0) 72%), var(--a-glass-strong); }
html.iso.ui-a.theme-light #quest-tracker .progress-count { background: rgba(20, 30, 40, .07); }
html.iso.ui-a.theme-light #quest-tracker .progress-count.is-danger { border-color: #c62f35; background: rgba(198, 47, 53, .12); color: var(--bad); }
html.iso.ui-a.theme-light #quest-tracker .progress-row.is-danger { background: rgba(198, 47, 53, .1); box-shadow: inset 3px 0 0 #c62f35; color: var(--bad); }

/* ---- 4. map labels: a white pill with dark ink; the colour dot (--pin) keeps its owner meaning; the dark stake and ring become light */
html.iso.ui-a.theme-light #labels .lbl { background: rgba(255, 255, 255, .9); border-color: rgba(20, 30, 40, .14); box-shadow: inset 4px 0 0 -1px var(--pin), 0 4px 12px -4px rgba(28, 40, 52, .4); }
html.iso.ui-a.theme-light #labels .lbl:not(.coach-bubble):not(.vakif)::after { background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 .5px rgba(20, 30, 40, .45); }
html.iso.ui-a.theme-light #labels .lbl:not(.coach-bubble):not(.vakif)::before { border-color: #fff; box-shadow: 0 1px 3px rgba(28, 40, 52, .4); }
html.iso.ui-a.theme-light #labels .lbl:is(.rival, .rival.tasra, .player, .xing, .army, .oasis, .landmark, .vakif),
html.iso.ui-a.theme-light #labels .lbl:is(.oasis, .landmark, .xing).mine,
html.iso.ui-a.theme-light #labels .lbl:is(.oasis, .landmark, .xing).taken, html.iso.ui-a.theme-light #labels .lbl.xing.closed { background: rgba(255, 255, 255, .9); }
html.iso.ui-a.theme-light #labels .lbl.village { background: var(--a-accent); border-color: rgba(255, 255, 255, .7); box-shadow: 0 6px 16px -4px rgba(28, 40, 52, .45); }
html.iso.ui-a.theme-light #labels .lbl.landmark.locked { background: rgba(255, 255, 255, .8); border-color: rgba(20, 30, 40, .3); }
html.iso.ui-a.theme-light #labels .lbl.pirate { background: #fbe9e6; color: #7a1d14; }
html.iso.ui-a.theme-light #labels .lbl.pirate :is(b, small), html.iso.ui-a.theme-light #labels .lbl.ambush small { color: #7a1d14; }
html.iso.ui-a.theme-light #labels .lbl.sancak { box-shadow: inset 4px 0 0 -1px var(--pin), 0 0 0 2px rgba(201, 120, 0, .6), 0 4px 12px -4px rgba(28, 40, 52, .4); }
html.iso.ui-a.theme-light #labels .lbl.iskan-ok { box-shadow: 0 0 0 3px rgba(31, 157, 85, .45), 0 4px 12px -4px rgba(28, 40, 52, .4); }
html.iso.ui-a.theme-light #labels .lbl:is(.sel, .landmark.sel, .xing.sel) { box-shadow: 0 0 0 2px var(--a-accent), 0 4px 12px -4px rgba(28, 40, 52, .4); }
html.iso.ui-a.theme-light #labels .lbl.coach-bubble { background: var(--a-glass-strong); }
html.iso.ui-a.theme-light #labels .lbl.army { --pin: #4f5fd1; }

/* ---- 5. fixes found in the screenshots ---- */
/* an open dock key: the translucent selection tint sat straight on the map (a dark map made it a dark key); lay it on opaque glass like the sticky rows */
html.iso.ui-a.theme-light #quick-dock button.is-open { background: linear-gradient(var(--surface-selected), var(--surface-selected)), var(--a-solid); }
html.iso.ui-a.theme-light .weekly-ledger p span[style*="386eaa"] { color: #386eaa !important; } /* iso-theme-panels.css lightens the default ledger flag for the dark panel */
html.iso.ui-a.theme-light #status-pop .status-tab[aria-selected=true] { border-color: var(--a-accent); box-shadow: inset 0 0 0 1px var(--a-accent); } /* style.css uses --even (amber in dark; a brown text colour here) */
html.iso.ui-a.theme-light #labels .lbl.village :is(small, .cd) { color: var(--a-on-accent); }
html.iso.ui-a.theme-light #pick .brand-lockup h1 { color: var(--ink); } /* ui-modern-a-screens.css hard-codes the cream #f6f1e6 */
/* the open dock key: same fix as .is-open above (on the translucent tray the tint alone left the accent label at 4.3:1) */
html.iso.ui-a.theme-light .bar-btn.on { background: linear-gradient(var(--surface-selected), var(--surface-selected)), var(--a-solid); }
/* hover: only where a pointer hovers; buttons only while enabled (test/disabled-button-look.test.mjs) */
@media (hover: hover) {
  html.iso.ui-a.theme-light #home-call:hover:enabled { border-color: #c62f35; }
  html.iso.ui-a.theme-light :is(#panel, #nav, dialog) button:hover:enabled:not(.on):not([aria-pressed=true]):not(.primary):not(.is-next):not(.danger) { border-color: rgba(20, 30, 40, .3); }
  html.iso.ui-a.theme-light #panel .ui-tab:not(.on):not([aria-selected=true]):hover:enabled, html.iso.ui-a.theme-light #auth .auth-tabs button:hover:enabled:not(.on) { background: rgba(20, 30, 40, .05); }
  html.iso.ui-a.theme-light #quest-tracker button.progress-hit:hover:enabled { background: rgba(20, 30, 40, .07); }
}

/* ---- 6. liquid glass (owner 2026-11-09): translucent glass, strong blur + saturate + brightness so the map shows blurred but coloured behind it; dark ink with a faint white halo
   so text stays readable on a night map and on a beige day map alike. text-shadow inherits, so the containers carry it. ---- */
html.iso.ui-a.theme-light :is(#panel, #nav, #chat, #ranking-panel, .toast, #status-pop, #online-list, #layers-panel, .action-card, .intro-card, .away-card, .landmark-card, #top, #bar, #quick-dock, #alerts, #announce, #quest-tracker, #move-strip, #home-call, #guest-strip, #attrib, #hover, #tip, #coach-bubble, #pick, #labels .lbl) {
  text-shadow: 0 0 6px rgba(255, 255, 255, .55), 0 1px 0 rgba(255, 255, 255, .4);
}
html.iso.ui-a.theme-light :is(button.primary, button.confirm, button.is-next, .lbl.village, #top .brand .ui-badge, .bar-btn .badge) { text-shadow: none; }
html.iso.ui-a.theme-light #labels .lbl { background: rgba(255, 255, 255, .78); backdrop-filter: blur(10px) saturate(1.6); -webkit-backdrop-filter: blur(10px) saturate(1.6); }

/* ---- 7. Apple blue instead of the Boğaz turquoise (owner 2026-11-09: "turkuaz olmuyor açık temada"). Every teal the dark files hard-code is re-pointed; var(--a-accent) users follow the tokens. ---- */
html.iso.ui-a.theme-light { --a-accent-pressed: #0062c8; }
/* filled primary buttons: white ink on #0071e3, no halo, blue shadow; :enabled so a disabled one still falls to the disabled look (test/disabled-button-look.test.mjs) */
html.iso.ui-a.theme-light :is(#panel, #nav, dialog, .action-card, #quest-tracker .ui-quest) button:is(.primary, .confirm, .is-next):enabled,
html.iso.ui-a.theme-light #pick :is(button[type=submit], #pick-import button):enabled,
html.iso.ui-a.theme-light :is(#intro, #away) .intro-card button[data-primary]:enabled, html.iso.ui-a.theme-light #away .away-card .row2 button[data-primary]:enabled,
html.iso.ui-a.theme-light #tip .tip-actions button.primary:enabled, html.iso.ui-a.theme-light #chat button:is(.primary, .confirm):enabled {
  color: #fff; text-shadow: none; box-shadow: 0 4px 14px -4px rgba(0, 113, 227, .5);
}
html.iso.ui-a.theme-light :is(#panel, #nav, dialog, .action-card, #quest-tracker .ui-quest) button:is(.primary, .confirm, .is-next):enabled :is(span, b, small, i), html.iso.ui-a.theme-light button.primary:enabled * { text-shadow: none; }
html.iso.ui-a.theme-light #panel button.is-next:enabled, html.iso.ui-a.theme-light #panel button.primary.is-next:enabled { box-shadow: 0 0 0 3px rgba(0, 113, 227, .3); }
@media (hover: hover) {
  html.iso.ui-a.theme-light :is(#panel, #nav, dialog) button:is(.primary, .confirm, .is-next):hover:enabled { background: var(--a-accent-hover); }
}
html.iso.ui-a.theme-light :is(#panel, #nav, dialog, .action-card) button:is(.primary, .confirm, .is-next):active:enabled { background: var(--a-accent-pressed); }
/* selected segment / tab / choice: a white pill with dark ink (Apple segmented control); the blue is only the indicator */
html.iso.ui-a.theme-light #panel .ui-tab:is([aria-selected=true], .on), html.iso.ui-a.theme-light #panel [role=tab][aria-selected=true], html.iso.ui-a.theme-light #ranking-content .ui-tabs .ui-tab.on:enabled {
  color: var(--ink); box-shadow: 0 1px 4px rgba(28, 40, 52, .2), inset 0 -2px 0 var(--a-accent);
}
html.iso.ui-a.theme-light :is(#panel, #nav, dialog) :is(.seg button, .ui-choice button):is(.on, [aria-pressed=true]):enabled, html.iso.ui-a.theme-light .seg button.on:enabled, html.iso.ui-a.theme-light #panel .lang-btn[aria-pressed="true"]:enabled {
  background: rgba(255, 255, 255, .95); border-color: var(--a-accent); box-shadow: inset 0 0 0 1px var(--a-accent); color: var(--ink);
}
html.iso.ui-a.theme-light #panel button.ui-tab.is-next:not(.on) { box-shadow: inset 0 -2px 0 var(--a-accent); }
/* selected dock / quick keys: a light blue tint on opaque glass, blue label */
html.iso.ui-a.theme-light .bar-btn.on, html.iso.ui-a.theme-light #quick-dock button.is-open { background: linear-gradient(rgba(0, 113, 227, .12), rgba(0, 113, 227, .12)), var(--a-solid); }
html.iso.ui-a.theme-light .bar-btn.on .lbl { color: #0058b0; }
html.iso.ui-a.theme-light #quick-dock button.is-open { border-color: var(--a-accent); }
html.iso.ui-a.theme-light :is(#bar .bar-btn.guide-next, #quick-dock [data-quick="quest"].guide-next) { outline-color: var(--a-accent); }
/* focus ring: blue, white halo */
html.iso.ui-a.theme-light body :is(button, summary, a, input, select, textarea, [tabindex], [role=button]):focus-visible { outline-color: #0071e3; }
html.iso.ui-a.theme-light #labels .lbl:focus-visible { outline: 3px solid #0071e3; outline-offset: 2px; }
/* rings, glows, pins, bars */
html.iso.ui-a.theme-light #tip { box-shadow: 0 0 0 2px rgba(0, 113, 227, .5), var(--shadow-modal); }
html.iso.ui-a.theme-light #coach-bubble { box-shadow: 0 0 0 2px rgba(0, 113, 227, .45), var(--a-shadow); }
html.iso.ui-a.theme-light :is(#tip-spot, #coach-ring) { box-shadow: 0 0 0 4px rgba(0, 113, 227, .35); }
html.iso.ui-a.theme-light #labels .coach-bubble { box-shadow: 0 0 0 2px rgba(0, 113, 227, .45), 0 4px 12px -4px rgba(28, 40, 52, .4); }
html.iso.ui-a.theme-light #quest-tracker .ui-quest.is-ready { box-shadow: 0 0 0 2px rgba(0, 113, 227, .55), var(--a-shadow); }
html.iso.ui-a.theme-light .chat-msg.chat-own { border-color: rgba(0, 113, 227, .35); }
html.iso.ui-a.theme-light #labels .lbl.village { --pin: #0071e3; }
html.iso.ui-a.theme-light #labels .lbl:is(.oasis, .landmark, .xing).mine { --pin: #0071e3; }
html.iso.ui-a.theme-light #hover.water { box-shadow: inset 3px 0 0 #0071e3, var(--shadow-sm); }
html.iso.ui-a.theme-light .away-count-bar { background: #0071e3; }
html.iso.ui-a.theme-light #loading::after { background: rgba(20, 30, 40, .08) linear-gradient(90deg, transparent, #0071e3 40%, #0a84ff 60%, transparent) 0 0 / 40% 100% no-repeat; }
html.iso.ui-a.theme-light :is(.ui-progress-fill, .album-meter > span, .ui-quest-progress .ui-progress-fill, .era-hud-track i) { background: #0071e3; }
html.iso.ui-a.theme-light progress::-webkit-progress-value { background: #0071e3; }
html.iso.ui-a.theme-light progress::-moz-progress-bar { background: #0071e3; }
html.iso.ui-a.theme-light #top .chips > .chip-free { box-shadow: inset -1px 0 0 var(--border-soft), inset 0 -2px 0 #0071e3; }
html.iso.ui-a.theme-light :is(input[type=checkbox], input[type=radio], input[type=range], progress) { accent-color: #0071e3; }
html.iso.ui-a.theme-light #top:not(.hud-expanded) #hud-toggle::after { background: #0071e3; color: #fff; text-shadow: none; }
html.iso.ui-a.theme-light .bar-btn .badge:is(.warn), html.iso.ui-a.theme-light .bar-overflow .badge { background: #0071e3; color: #fff; text-shadow: none; }
html.iso.ui-a.theme-light #top .brand .ui-badge { background: #0071e3; color: #fff; }

/* ---- 8. chat + supporter (2026-11-10). The dark files hard-code LIGHT chat colours (gold #e6bf62 names, mint Lonca, pink whisper, pastel cosmetic names); on the light glass they vanish.
   Every one is re-pointed to a dark counterpart that holds the status-colour rule (test/theme-light-css.test.mjs: AA on --a-solid and on both glasses over the day map, 3.0 over the night median).
   community.css writes #chat#chat (two IDs): the row rules below that must beat it repeat it; the Lonca / whisper rows keep their channel colour on purpose (community.css, ID-heavy). ---- */
html.iso.ui-a.theme-light #chat { --chat-lonca: #0f5222; --chat-whisper: #8a1550; }
/* plain sender name; the supporter's name and badge are dark gold, the body stays ink (a gold body is the unreadable part) */
html.iso.ui-a.theme-light .chat-msg b { color: var(--ink); }
html.iso.ui-a.theme-light .chat-msg.chat-supporter { color: var(--ink); }
html.iso.ui-a.theme-light .chat-msg.chat-supporter b { color: #5f4000; }
html.iso.ui-a.theme-light .chat-msg.chat-supporter .chat-supporter-badge { color: #5f4000; }
html.iso.ui-a.theme-light #chat#chat .chat-msg.chat-supporter > span { color: var(--ink); }
/* a supporter line said in the Lonca / as a whisper keeps the channel colour (community.css intent; its own rule loses to the dark theme's gold, this one wins) */
html.iso.ui-a.theme-light #chat#chat .chat-msg.chat-supporter.chat-ch-lonca > span { color: var(--chat-lonca); }
html.iso.ui-a.theme-light #chat#chat .chat-msg.chat-supporter.chat-ch-ozel > span { color: var(--chat-whisper); }
/* Tellal: style.css gives --even, but the plain-sender rule above (and the dark one before it) would repaint it, and community.css paints a Lonca-channel name green */
html.iso.ui-a.theme-light #chat#chat .chat-msg.chat-npc > b { color: var(--even); }
/* name cosmetics (Hatıra Pulu), also in the shop preview (.shop-stage); dark enough for the glass, no shimmer */
html.iso.ui-a.theme-light :is(#chat, .shop-stage) .chat-msg .chat-name-lale { color: #8f1018; }
html.iso.ui-a.theme-light :is(#chat, .shop-stage) .chat-msg .chat-name-bogaz { color: #0f4a8a; }
html.iso.ui-a.theme-light :is(#chat, .shop-stage) .chat-msg .chat-name-cinar { color: #1b5219; }
html.iso.ui-a.theme-light :is(#chat, .shop-stage) .chat-msg .chat-name-carsi { color: #5f4000; }
/* "Destekçi Üye" tab on the dock: the translucent glass let a beige day map swallow it; an opaque cream plate with dark gold ink and edge (#bar's own gold frame is untouched) */
html.iso.ui-a.theme-light.is-supporter .bar-supporter-tag { background: #fff6d8; border-color: #b98a1e; color: #5f4000; text-shadow: none; }
/* input row: the send key is the theme's filled blue button (white arrow); a disabled one keeps the disabled look (:enabled, test/disabled-button-look.test.mjs) but loses the 4px pixel-art frame */
html.iso.ui-a.theme-light #chat#chat button#chat-send { border-width: 1px; }
html.iso.ui-a.theme-light #chat#chat button#chat-send:enabled { background: var(--a-accent); border: 1px solid var(--a-accent); border-image: none; color: #fff; text-shadow: none; box-shadow: 0 4px 14px -4px rgba(0, 113, 227, .5); }
@media (hover: hover) {
  html.iso.ui-a.theme-light #chat#chat button#chat-send:hover:enabled { background: var(--a-accent-hover); }
}
html.iso.ui-a.theme-light #chat#chat button#chat-send:active:enabled { background: var(--a-accent-pressed); }
/* the field was the dark inset (--surface-inset is only a 6% tint here, which read as a grey well on the glass); a light field, the whisper border colour still comes from community.css, the focus ring from ui-modern-a-screens.css */
html.iso.ui-a.theme-light #chat#chat input#chat-input { background: rgba(255, 255, 255, .55); color: var(--ink); }
/* light-ink leftovers of the dark theme files (iso-theme-flows.css, iso-theme.css, iso-theme-panels.css): pale gold / salmon / grey text on the light glass. #auth stays dark, so it is not in the hint selector */
html.iso.ui-a.theme-light #pick .hint.warn { color: var(--alert-warn); }
html.iso.ui-a.theme-light .landmark-himaye .hint { color: var(--alert-warn); }
html.iso.ui-a.theme-light .gold-banner { color: #5f4000; }
html.iso.ui-a.theme-light .visit-cosmetic-tag { color: #5f4000; border-color: #b98a1e; }
html.iso.ui-a.theme-light .help-card h4, html.iso.ui-a.theme-light .away-card h4 { color: var(--ink); }
/* "Sen yokken" card (2026-11-10). The village name sat on a dark plate in dark ink and the plate ran the photo's full width: a small light pill in the corner, ink on frosted white (no white text). */
html.iso.ui-a.theme-light .away-village { top: auto; right: auto; bottom: 8px; left: 8px; max-width: calc(100% - 16px); padding: 6px 12px; background: rgba(255, 255, 255, .86); color: var(--ink); text-shadow: none; }
/* Kapat/Göster is the card's bottom bar: the card pads 18px at the sides and 16px at the bottom (style.css .intro-card), the row takes those back so the opaque fill reaches the card's edges
   (the rounded corners clip it) instead of floating as a white slab inside the glass. Buttons keep their size and side insets; they sit 16px above the card's edge both stuck and at the end of the scroll (was 12px stuck, 28px at the end) */
html.iso.ui-a.theme-light .away-card .row2 { margin-inline: -18px; margin-bottom: -16px; padding-inline: 18px; padding-bottom: 16px; background: var(--a-solid); }
/* chat popovers: community.css paints them on a dark base (#14161a under the translucent --surface), which turns grey on the light glass; they open over the chat text, so the plate is opaque light.
   The border (--border-soft) and the selected / hover fill (--surface-selected) already come from the tokens. */
html.iso.ui-a.theme-light #chat-form :is(#chat-picker, #chat-menu) { background: var(--a-solid); }
/* the picker's search field was the dark inset; #chat#chat out-weighs the dark theme's #chat input rule */
html.iso.ui-a.theme-light #chat#chat #chat-picker-search { background: rgba(255, 255, 255, .55); color: var(--ink); }
/* idle compact log: dark ink at .35 over the night map is unreadable (the dark theme's light ink survives it) */
html.iso.ui-a.theme-light #chat#chat.chat-faded #chat-messages { opacity: .7; }

/* ---- 9. sticky rows of the map cards (2026-11-10). #nav pads var(--space-3) (style.css) and ui-modern-a.css fills its sticky rows with the opaque --a-solid; on the 50% glass that read as a sharp white slab
   floating 12px inside the card. Same cure as the "Sen yokken" row: the row takes the card's padding back (negative margin on the side and on the edge it sticks to, the same amount as padding) so the opaque
   fill reaches the card's edges and the card (overflow:auto + rounded corners) clips it. .action-card .row2 is not here: its fill is transparent (ui-modern-a.css line 92 out-weighs the phone rule), so it is no slab. ---- */
/* target-card header (sticks to the top); the title and the ✕ keep their place at rest (the 12px moved from the card's padding into the row) */
html.iso.ui-a.theme-light #nav .row2.mini.head { margin-inline: calc(-1 * var(--space-3)); margin-top: calc(-1 * var(--space-3)); padding-inline: var(--space-3); padding-top: var(--space-3); background: var(--a-solid); }
/* guest card "Köy kur" (sticks to the bottom; padding-block is var(--space-2) in player-visit.css) */
html.iso.ui-a.theme-light #nav .row2.visit-controls { margin-inline: calc(-1 * var(--space-3)); margin-bottom: calc(-1 * var(--space-3)); padding-inline: var(--space-3); padding-bottom: calc(var(--space-2) + var(--space-3)); background: var(--a-solid); }
@media (pointer: coarse), (max-width: 760px) {
  /* phone rows carry 4px of padding-block (style.css), so the header's top padding is that 4px more; the other rows stick 8px past the content edge (bottom: -8px) which left a 4px text strip under them */
  html.iso.ui-a.theme-light #nav .row2.mini.head { padding-top: calc(var(--space-3) + 4px); }
  html.iso.ui-a.theme-light #nav:not(:has(details[open])) .row2:not(.head):not(.visit-controls) { margin-inline: calc(-1 * var(--space-3)); margin-bottom: calc(-1 * var(--space-3)); padding-inline: var(--space-3); padding-bottom: calc(4px + var(--space-3)); bottom: calc(-1 * var(--space-3)); background: var(--a-solid); }
}