/* Sharp UI refresh — overrides cream/serif chrome when design refresh is on.
   Loaded after style.css on staging only. */

html.design-refresh,
html.design-refresh body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  letter-spacing: 0;
}

html.design-refresh .he,
html.design-refresh .he-primary,
html.design-refresh .snippet,
html.design-refresh .search-hit-ref {
  font-family: var(--font-read), var(--font-he), serif;
}

/* ---- Header ---- */
html.design-refresh .site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--hair-strong);
  box-shadow: none;
  backdrop-filter: none;
}
html.design-refresh .site-nav a {
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.92rem;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  white-space: nowrap;
}
html.design-refresh .site-nav a:hover,
html.design-refresh .site-nav a:focus-visible {
  color: var(--accent);
  background: var(--accent-soft);
  outline: none;
}
html.design-refresh .brand-logo {
  filter: none;
  height: 52px;
  max-width: 260px;
  border-radius: 0;
}
html.design-refresh .beta-badge {
  background: var(--surface-2);
  border: 1px solid var(--hair);
  color: var(--ink-muted);
  border-radius: var(--radius-sm);
  box-shadow: none;
}
html.design-refresh .beta-badge strong {
  color: var(--accent);
}

html.design-refresh .quick-search {
  gap: 6px;
}
html.design-refresh .quick-search input[type="search"] {
  background: var(--surface-2);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-ui);
  box-shadow: none;
  min-height: 38px;
}
html.design-refresh .quick-search input[type="search"]:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-soft);
  outline-offset: 0;
}
html.design-refresh .quick-search button {
  background: var(--accent);
  color: var(--accent-contrast);
  border: 1px solid var(--accent-strong);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-weight: 600;
  box-shadow: none;
  min-height: 38px;
  padding: 0 14px;
}
html.design-refresh .quick-search button:hover {
  background: var(--accent-strong);
}

/* ---- Buttons ---- */
html.design-refresh .btn,
html.design-refresh button.btn,
html.design-refresh a.btn {
  font-family: var(--font-ui);
  font-weight: 600;
  border-radius: var(--radius);
  border: 1px solid var(--hair-strong);
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
  text-decoration: none;
  padding: 10px 18px;
  line-height: 1.45;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
html.design-refresh .btn:hover {
  background: var(--surface-2);
  border-color: var(--ink-muted);
}
html.design-refresh .btn.primary,
html.design-refresh a.btn.primary,
html.design-refresh button.primary {
  background: var(--accent);
  border-color: var(--accent-strong);
  color: var(--accent-contrast);
}
html.design-refresh .btn.primary:hover,
html.design-refresh a.btn.primary:hover {
  background: var(--accent-strong);
  color: var(--accent-contrast);
}
html.design-refresh .btn.small {
  padding: 6px 12px;
  font-size: 0.85rem;
  line-height: 1.4;
}

/* ---- Forms ---- */
html.design-refresh input[type="text"],
html.design-refresh input[type="email"],
html.design-refresh input[type="password"],
html.design-refresh input[type="search"],
html.design-refresh input[type="number"],
html.design-refresh input[type="url"],
html.design-refresh textarea,
html.design-refresh select {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  box-shadow: none;
  padding: 9px 12px;
}
html.design-refresh input:focus,
html.design-refresh textarea:focus,
html.design-refresh select:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-soft);
  outline-offset: 0;
}
html.design-refresh label {
  font-family: var(--font-ui);
  color: var(--ink-2);
  font-weight: 500;
}
html.design-refresh .advanced-search,
html.design-refresh .gematria-form,
html.design-refresh .dilugim-form {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  box-shadow: none;
}

/* ---- Cards / tiles ---- */
html.design-refresh .card,
html.design-refresh .library-card,
html.design-refresh .admin-block,
html.design-refresh .chart-block,
html.design-refresh .parasha-week-panel {
  background: var(--surface);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft, none);
}
html.design-refresh .parasha-week-hero {
  border-bottom-color: var(--hair-strong);
}
html.design-refresh .parasha-week-panel > .section-title {
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--ink-muted);
  text-transform: none;
  letter-spacing: 0;
}
html.design-refresh .parasha-week-name {
  font-family: var(--font-ui);
  font-weight: 700;
}
html.design-refresh .parasha-week-aliyot {
  background: var(--surface-2);
  border-color: var(--hair);
}
html.design-refresh .parasha-week-aliyot a:hover,
html.design-refresh .parasha-week-aliyot a:focus-visible {
  background: var(--accent-soft);
}
html.design-refresh .parasha-week-aliyot .aliyah-tag {
  font-family: var(--font-ui);
  border-radius: var(--radius-sm);
}
html.design-refresh .card:hover,
html.design-refresh .library-card:hover {
  border-color: var(--accent);
  box-shadow: none;
  transform: none;
}
html.design-refresh .card h2,
html.design-refresh .card h3,
html.design-refresh .section-title {
  font-family: var(--font-ui);
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* ---- Container / footer ---- */
html.design-refresh .container {
  max-width: 1180px;
}
/* Reader needs the production-width shell; do not clamp to 1180. */
html.design-refresh main.container:has(.reader-mg),
html.design-refresh main.container:has(.reader-layout),
html.design-refresh main.container:has(.reader-page) {
  max-width: 1840px;
}
html.design-refresh .site-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--hair);
  color: var(--ink-2);
}
html.design-refresh .flash {
  border-radius: var(--radius);
  box-shadow: none;
  font-family: var(--font-ui);
}

/* ---- Pills ---- */
html.design-refresh .pill {
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: var(--surface-2);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-weight: 600;
}
html.design-refresh .pill--good {
  background: color-mix(in srgb, var(--success) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--success) 35%, var(--hair));
  color: var(--success);
}
html.design-refresh .pill--accent {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--hair));
  color: var(--accent);
}
html.design-refresh .pill--muted {
  background: var(--surface-2);
  color: var(--ink-muted);
}

/* ---- Tables ---- */
html.design-refresh .admin-table,
html.design-refresh table {
  font-family: var(--font-ui);
}
html.design-refresh .admin-table thead th {
  background: var(--surface-2);
  color: var(--ink-muted);
  border-bottom: 1px solid var(--hair-strong);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 650;
}
html.design-refresh .admin-table th,
html.design-refresh .admin-table td {
  border-bottom-color: var(--hair);
}
html.design-refresh .admin-panel .admin-head h1 {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ---- Reader ---- */
html.design-refresh .reader,
html.design-refresh .reader-shell,
html.design-refresh .reader-main {
  background: var(--bg);
  color: var(--ink);
}
html.design-refresh .reader-toolbar,
html.design-refresh .reader-header,
html.design-refresh .mefarshim-panel,
html.design-refresh .selection-drawer {
  background: var(--surface);
  border-color: var(--hair);
  box-shadow: none;
}
/* Breathing room: title + nav were flush against the header frame. */
html.design-refresh .reader-header {
  padding: 16px 18px 18px;
  margin-bottom: 20px;
  gap: 20px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  align-items: center;
}
html.design-refresh .reader-header .reader-title {
  margin: 0 0 6px;
  line-height: 1.35;
}
html.design-refresh .reader-header .muted {
  margin: 0 0 10px;
  line-height: 1.5;
}
html.design-refresh .reader-header .reader-focus-toggle {
  margin-top: 4px;
  padding: 4px 0;
  gap: 10px;
}
html.design-refresh .reader-nav {
  gap: 10px;
}
html.design-refresh .reader-nav .btn,
html.design-refresh .reader-nav a.btn {
  padding: 12px 18px;
  line-height: 1.5;
  min-height: 2.6em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Aliyah pills sit on the verse line (not superscript). */
html.design-refresh .segments .aliyah-tag {
  vertical-align: middle;
  position: relative;
  top: 0;
}
/* Verse circle: keep digit centered (segment-index must not win). */
html.design-refresh .segments .segment-index.mg-verse-marker,
html.design-refresh .mg-verse-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  font-family: var(--font-ui);
  line-height: 1;
  padding: 1px 0 0;
}
/* Wider main text column (prod caps center at 520px). */
html.design-refresh .reader-mg {
  grid-template-columns: minmax(240px, 1fr) minmax(420px, 780px) minmax(240px, 1fr);
}
html.design-refresh .verse,
html.design-refresh .segment {
  border-radius: var(--radius-sm);
}
html.design-refresh .verse:hover,
html.design-refresh .segment:hover,
html.design-refresh .segment.is-highlighted {
  background: var(--accent-soft);
}
html.design-refresh .verse-number,
html.design-refresh .ref-chip {
  color: var(--accent);
  font-family: var(--font-ui);
  font-weight: 650;
}
/* Main text: production reading stack (system Frank/David/SBL).
   Do NOT load Frank Ruhl Libre as a partial webfont — Google’s cut
   lacks full nikud/taamim coverage, so browsers mix glyphs and some
   letters look smaller/thinner than neighbors. */
html.design-refresh .reader-mg-center .segments,
html.design-refresh .reader-body .segments,
html.design-refresh .reader-text,
html.design-refresh .segments .segment-text.he-col,
html.design-refresh .segments mark,
html.design-refresh .segments .reader-selection-highlight {
  font-family: 'Frank Ruhl Libre', 'David', 'SBL Hebrew', 'Times New Roman', serif;
  font-size: 1.2rem;
  font-weight: 400;
  font-style: normal;
  font-synthesis: none;
  line-height: 1.95;
  color: var(--ink);
}
html.design-refresh .segments mark,
html.design-refresh .segments .reader-selection-highlight {
  /* Keep highlight chrome; never let <mark> change type metrics. */
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  vertical-align: baseline;
}
html.design-refresh .segments .segment-text.en-col,
html.design-refresh .segments .segment-index {
  font-family: 'Iowan Old Style', 'Palatino Linotype', 'Georgia', serif;
}
html.design-refresh .reader-title .he-primary,
html.design-refresh .reader-header .he-primary {
  font-family: 'Frank Ruhl Libre', 'David', 'SBL Hebrew', 'Times New Roman', serif;
}

/* ---- Search results ---- */
html.design-refresh .search-hit {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
html.design-refresh .search-hit:hover {
  border-color: var(--accent);
}
html.design-refresh .search-hit-ref {
  color: var(--accent);
}

/* ---- Auth / lessons ---- */
html.design-refresh .auth-card,
html.design-refresh .lesson-card,
html.design-refresh .feedback-card {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  box-shadow: none;
}

/* ---- Staging banner ---- */
.staging-banner {
  background: var(--accent);
  color: var(--accent-contrast);
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 12px;
  letter-spacing: 0.02em;
}
.staging-banner code {
  background: rgba(255,255,255,0.15);
  padding: 1px 6px;
  border-radius: 3px;
}