/* =========================================================
   Hijri Calendar & Date Converter — styles
   No external fonts or frameworks required. Arabic text relies
   on the system's own Arabic-capable fonts (Segoe UI on Windows, .hijri-scope San Francisco/Geeza Pro on macOS, .hijri-scope Noto on most Linux/Android)
   rather than a webfont, .hijri-scope so nothing needs to load over the network.

   Integration notes (Foliovex):
   - :root scoped to .hijri-scope instead — this stylesheet loads
     alongside Foliovex's own styles.css (for the shared header/
     footer), .hijri-scope and several variable names collide (--paper, .hijri-scope --ink, .hijri-scope --line, .hijri-scope --radius, .hijri-scope --display, .hijri-scope --body, .hijri-scope --mono all exist in both
     with different values). Scoping avoids either file silently
     overriding the other outside this tool's own markup.
   - Dark mode switched from "@media (prefers-color-scheme: dark)"
     to "[data-theme='dark']" — Foliovex uses its own manually-
     toggled theme attribute rather than the system preference
     (deliberately defaulting to light regardless of system setting).
     Left as prefers-color-scheme, .hijri-scope this section would flip to dark
     independently of the rest of the page whenever the visitor's
     OS happened to be in dark mode, .hijri-scope regardless of what Foliovex's
     own toggle was set to — a jarring, .hijri-scope unsynchronized mismatch.
========================================================= */
.hijri-scope {
  --paper:        #FFFFFF;
  --paper-dim:    #F3F7F5;
  --ink:          #16241D;
  --ink-soft:     #566257;
  --ink-faint:    #94A198;
  --line:         #DDE6E1;
  --accent:       #0E9E73;
  --accent-dark:  #0B7D5B;
  --accent-ink:   #FFFFFF;
  --info:         #1487A8;
  --info-light:   #E4F5F7;
  --selected:     #B4740E;
  --selected-light: #FBF0DC;
  --radius: 6px;
  --shadow: 0 1px 0 var(--line), 0 8px 20px -12px rgba(18,53,36,0.25);
  --display: Georgia, "Times New Roman", serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --arabic: "Segoe UI", Tahoma, Geneva, "Geeza Pro", "Noto Naskh Arabic", "Noto Sans Arabic", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
}
[data-theme="dark"] .hijri-scope {
  --paper: #12211A; --paper-dim: #182A21; --ink: #EAF3EC; --ink-soft: #A9C2B3;
  --ink-faint: #6E8577; --line: #29402F; --accent: #2ED198; --accent-dark: #17B37D;
  --accent-ink: #0D1911; --info: #35B8D6; --info-light: #16323A;
  --selected: #E3A94A; --selected-light: #322507;
  --shadow: 0 1px 0 var(--line), 0 8px 20px -12px rgba(0,0,0,0.6);
}
 /* * { box-sizing: border-box; }
.hijri-scope removed here — Foliovex's own
   styles.css already sets this identically, .hijri-scope site-wide. */
.hijri-scope {
  background: var(--paper); color: var(--ink); font-family: var(--body);
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
.hijri-scope .wrap {
  max-width: 900px; margin: 0 auto;
  /* Same fix, same reasoning as .workspace in the main stylesheet:
     this 80px was sized for an active ad unit's breathing room, but
     with AdSense slots still unconfigured it's currently just empty
     space between the last real content and the footer. */
  padding: 40px clamp(16px, 5vw, 40px) 48px;
}
.hijri-scope h1 { font-family: var(--display); font-size: clamp(26px, 4vw, 34px); font-weight: 700; margin: 6px 0 10px; }
.hijri-scope .eyebrow {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--info);
}
.hijri-scope .eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--info); border-radius: 50%; }
.hijri-scope .lede { color: var(--ink-soft); max-width: 62ch; margin: 0 0 8px; }
.hijri-scope .ar { font-family: var(--arabic); direction: rtl; unicode-bidi: isolate; }
.hijri-scope .hijri-today {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  margin: 26px 0; padding: 20px 22px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--paper-dim); cursor: pointer;
  width: 100%; text-align: left; font: inherit; -webkit-appearance: none; appearance: none;
}
.hijri-scope .hijri-today:hover { border-color: var(--accent); }
.hijri-scope .hijri-today-greg { font-size: 15px; color: var(--ink-soft); }
.hijri-scope .hijri-today-hijri { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--accent-dark); }
.hijri-scope .hijri-today-hijri .ar { font-family: var(--arabic); font-size: 16px; font-weight: 400; color: var(--ink-soft); margin-inline-start: 8px; }
[data-theme="dark"] .hijri-today-hijri { color: var(--accent); }
.hijri-scope .hijri-today-hint { flex-basis: 100%; font-size: 11.5px; color: var(--ink-faint); font-family: var(--mono); }
.hijri-scope .hijri-unsupported { color: var(--ink-soft); font-size: 14px; margin: 0; }
 /* ---------------------------------------------------------
   Calendar controls: mode toggle + month/year quick-jump
--------------------------------------------------------- */
.hijri-scope .cal-wrap { margin: 30px 0; }
.hijri-scope .cal-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.hijri-scope .cal-mode-toggle {
  display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px;
}
.hijri-scope .cal-mode-btn {
  border: none; background: transparent; color: var(--ink-soft); font-family: var(--body);
  font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer;
}
.hijri-scope .cal-mode-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.hijri-scope .cal-mode-btn:not([aria-pressed="true"]):hover { color: var(--ink); }
.hijri-scope .cal-jump { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hijri-scope .cal-jump select, .hijri-scope .cal-jump input {
  font-family: var(--body); font-size: 13.5px; padding: 7px 10px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--paper); color: var(--ink);
}
.hijri-scope .cal-jump input[type="number"] { width: 84px; }
.hijri-scope .cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.hijri-scope .cal-nav-title { display: flex; flex-direction: column; gap: 2px; }
.hijri-scope .cal-nav-title #calLabel { font-family: var(--display); font-size: 20px; font-weight: 700; }
.hijri-scope .cal-nav-title #calLabel .ar { font-size: 15px; color: var(--ink-soft); margin-inline-start: 6px; }
.hijri-scope .cal-nav-title #calSubLabel { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
.hijri-scope .cal-nav-buttons { display: flex; gap: 8px; }
.hijri-scope .cal-nav-btn {
  width: 36px; height: 36px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; font-size: 16px; font-family: var(--body);
}
.hijri-scope .cal-nav-btn:hover { border-color: var(--ink-faint); background: var(--paper-dim); }
.hijri-scope .btn {
  font-family: var(--body); font-weight: 600; font-size: 14px; padding: 9px 16px;
  border-radius: var(--radius); border: 1px solid var(--line); background: transparent;
  color: var(--ink); cursor: pointer;
}
.hijri-scope .btn:hover { border-color: var(--ink-faint); background: var(--paper-dim); }
.hijri-scope .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; padding: 12px 24px; font-size: 14.5px; }
.hijri-scope .btn-primary:hover { background: var(--accent-dark); }
.hijri-scope .btn-small { font-size: 12.5px; padding: 6px 12px; }
 /* ---------------------------------------------------------
   Grid
--------------------------------------------------------- */
.hijri-scope .cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; opacity: 1; transition: opacity 0.14s ease;
}
.hijri-scope .cal-grid.transitioning { opacity: 0.35; }
.hijri-scope .cal-weekday {
  background: var(--paper-dim); color: var(--ink-soft); font-family: var(--mono);
  text-align: center; padding: 8px 4px; display: flex; flex-direction: column; gap: 2px;
}
.hijri-scope .cal-weekday-en { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.hijri-scope .cal-weekday-ar { font-family: var(--arabic); font-size: 12px; color: var(--ink-faint); }
.hijri-scope .cal-cell {
  background: var(--paper); min-height: 68px; padding: 8px 8px 6px; display: flex; flex-direction: column;
  gap: 4px; cursor: pointer; position: relative; border: none; text-align: left; font: inherit; color: inherit;
  width: 100%;
}
.hijri-scope .cal-cell:hover { background: var(--paper-dim); }
.hijri-scope .cal-cell:focus-visible { outline: 2px solid var(--info); outline-offset: -2px; z-index: 1; }
.hijri-scope .cal-cell-empty { background: var(--paper-dim); cursor: default; }
.hijri-scope .cal-cell-empty:hover { background: var(--paper-dim); }
.hijri-scope .cal-primary { font-family: var(--display); font-size: 15px; font-weight: 700; }
.hijri-scope .cal-secondary { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
.hijri-scope .cal-secondary-boundary { color: var(--info); font-weight: 600; }
.hijri-scope .cal-cell-today { box-shadow: inset 0 0 0 2px var(--accent); }
.hijri-scope .cal-cell-today .cal-primary { color: var(--accent-dark); }
.hijri-scope .cal-cell-today::after {
  content: "TODAY"; position: absolute; top: 4px; right: 6px; font-family: var(--mono);
  font-size: 8px; letter-spacing: 0.04em; color: var(--accent-dark);
}
[data-theme="dark"] .cal-cell-today .cal-primary, [data-theme="dark"] .cal-cell-today::after { color: var(--accent); }
.hijri-scope .cal-cell-selected { box-shadow: inset 0 0 0 2px var(--selected); background: var(--selected-light); }
.hijri-scope .cal-cell-selected:hover { background: var(--selected-light); }
.hijri-scope .cal-cell-selected .cal-primary { color: var(--selected); }
.hijri-scope .cal-cell-today.cal-cell-selected { box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 4px var(--selected); }
@media (max-width: 600px) {
.hijri-scope .cal-cell { min-height: 50px; padding: 6px 4px 4px; }
.hijri-scope .cal-primary { font-size: 13px; }
.hijri-scope .cal-secondary { font-size: 9px; }
.hijri-scope .cal-weekday-en { font-size: 9.5px; }
.hijri-scope .cal-weekday-ar { font-size: 10px; }
.hijri-scope .cal-cell-today::after { display: none; }
}
.hijri-scope .cal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--ink-soft); }
.hijri-scope .cal-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.hijri-scope .cal-legend-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.hijri-scope .cal-legend-swatch.today { box-shadow: inset 0 0 0 2px var(--accent); background: var(--paper); }
.hijri-scope .cal-legend-swatch.selected { background: var(--selected-light); box-shadow: inset 0 0 0 2px var(--selected); }
.hijri-scope .cal-legend-swatch.boundary { background: var(--info); }
.hijri-scope .cal-hint { margin-top: 8px; font-size: 12px; color: var(--ink-faint); }
.hijri-scope .cal-hint kbd {
  font-family: var(--mono); font-size: 11px; background: var(--paper-dim); border: 1px solid var(--line);
  border-radius: 3px; padding: 1px 5px;
}
.hijri-scope /* ---------------------------------------------------------
   Selected-day detail panel
--------------------------------------------------------- */
.hijri-scope .cal-detail {
  margin-top: 16px; padding: 16px 18px; border: 1px solid var(--selected); border-radius: var(--radius);
  background: var(--selected-light); display: none; flex-direction: column; gap: 10px;
}
.hijri-scope .cal-detail.active { display: flex; }
.hijri-scope .cal-detail-dates { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
.hijri-scope .cal-detail-greg { font-family: var(--display); font-size: 16px; font-weight: 700; }
.hijri-scope .cal-detail-hijri { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); }
.hijri-scope .cal-detail-hijri .ar { font-family: var(--arabic); font-size: 14px; color: var(--ink); margin-inline-start: 6px; }
.hijri-scope .cal-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hijri-scope .cal-detail-close {
  position: absolute; top: 10px; right: 12px; background: none; border: none; cursor: pointer;
  color: var(--ink-faint); font-size: 18px; line-height: 1; padding: 4px;
}
.hijri-scope .cal-detail { position: relative; }
.hijri-scope /* ---------------------------------------------------------
   Converters
--------------------------------------------------------- */
.hijri-scope .hijri-converters { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin: 32px 0; }
.hijri-scope .hijri-converter-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; background: var(--paper); box-shadow: var(--shadow); }
.hijri-scope .hijri-converter-card h2 { font-family: var(--display); font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.hijri-scope .hijri-converter-card > p { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 4px; }
.hijri-scope .field-group { margin: 14px 0; }
.hijri-scope .field-group label { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-soft); margin-bottom: 6px; text-transform: uppercase; }
.hijri-scope .field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.hijri-scope .field-group input, .hijri-scope .field-group select {
  font-family: var(--body); font-size: 14px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--paper); color: var(--ink); min-width: 100px; width: 100%;
}
.hijri-scope .result-panel {
  margin-top: 16px; padding: 16px 18px; border: 1px solid var(--info); border-radius: var(--radius);
  background: var(--info-light); display: none; flex-direction: column; gap: 6px;
}
.hijri-scope .result-panel.active { display: flex; }
.hijri-scope .result-panel b { font-family: var(--display); font-size: 15px; color: var(--ink); }
.hijri-scope .result-panel .result-ar { font-family: var(--arabic); font-size: 14px; color: var(--ink); }
.hijri-scope .result-panel span { font-family: var(--mono); font-size: 12.5px; color: var(--info); }
.hijri-scope .result-panel .btn { margin-top: 4px; align-self: flex-start; }
.hijri-scope .faq { margin: 40px 0 0; }
.hijri-scope .faq h2 { font-family: var(--display); font-size: 20px; }
.hijri-scope details { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 10px; }
.hijri-scope summary { cursor: pointer; font-weight: 600; }
.hijri-scope details p { color: var(--ink-soft); font-size: 14px; margin: 10px 0 0; line-height: 1.55; }
.hijri-scope .toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(16px);
  background: var(--accent-dark); color: #fff; padding: 12px 20px; border-radius: var(--radius);
  font-size: 14px; max-width: 90vw; text-align: center; opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease; z-index: 999;
}
.hijri-scope .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.hijri-scope .toast.error { background: #B3452F; }
.hijri-scope .hijri-trust-note { margin-top: 50px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 12.5px; }

@media (prefers-reduced-motion: reduce) {
.hijri-scope .cal-grid, .hijri-scope .cal-grid.transitioning { transition: none; opacity: 1; }
}