/* The platform console (/admin/), and the masjid editor it shares with /manage/ (whose own styles are manage.css): only
   what app.css and landing.css don't already have.
   Tokens + logical properties (RTL-safe). */

/* ── Top bar ── */
.adm-badge {
  margin-inline-end: auto;   /* sits next to the logo; the account + theme button stay at the end */
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px dashed var(--gold);
  background: var(--gold-pale);
  color: var(--gold-text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.adm-account { display: flex; align-items: center; gap: 8px; min-width: 0; }
.adm-account .act { white-space: nowrap; }
.adm-who { font-size: 13px; color: var(--muted); min-width: 0; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.adm-who { text-decoration: underline dotted; text-underline-offset: 3px; }   /* Your sign-in (#/account) */
a.adm-who:hover { color: var(--heading); }
.adm-role { padding: 3px 9px; border-radius: 20px; border: 1px solid var(--line); background: var(--tint); color: var(--text); font-size: 12px; font-weight: 600; white-space: nowrap; }
.adm-role[data-role="super"] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.adm-role[data-role="approver"] { background: transparent; color: var(--heading); border-color: var(--brand); }   /* between editor (tint) and super (solid); no status badge looks like it */

/* ── Shared bits ── */
.adm h1:focus { outline: none; }   /* focused by the router for screen readers, not by the keyboard */
.find-status[data-state="error"], .form-note[data-state="error"] { background: var(--danger-bg); color: var(--danger); }
.adm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.act.danger { color: var(--danger); }
.act.danger:hover { border-color: var(--danger); }
.btn-solid[disabled] { opacity: 0.6; cursor: wait; transform: none; }
.adm-hint { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.adm-hint a { color: var(--gold-text); font-weight: 500; }
.adm-link { padding: 0; border: 0; background: none; color: var(--gold-text); font: inherit; font-weight: 500; text-decoration: underline; cursor: pointer; }
.adm-from { padding: 8px 12px; border-radius: 10px; background: var(--gold-pale); color: var(--text); }
.adm-muted { color: var(--muted); }
.adm-h2 { font-family: var(--font-display); font-size: 23px; font-weight: 600; color: var(--heading); line-height: 1.25; }
.adm-h2:focus { outline: none; }
.adm-h3 { margin-bottom: 8px; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--heading); }
.field-error { margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--danger); }
.field-error:empty { display: none; }

/* Translation inputs: each script in its own font (the page itself is English). */
.form-input:lang(ur) { font-family: 'Noto Nastaliq Urdu', serif; line-height: 2; padding-block: 4px; }
.form-input:lang(ar) { font-family: 'Noto Naskh Arabic', 'Amiri', serif; }
.form-input:lang(hi) { font-family: 'Noto Sans Devanagari', 'DM Sans', sans-serif; }
.form-input:lang(te) { font-family: 'Noto Sans Telugu', 'DM Sans', sans-serif; }

/* ── Signed out / not an admin ── */
.adm-auth { max-width: 560px; margin-inline: auto; }
.adm-auth .find-sub { margin: 8px 0 16px; }
.adm-auth .adm-other { margin-top: 16px; }
/* Google's own button (google-signin.js draws its 260 px iframe here), and the redirect under it as "Having trouble?". */
.adm-auth .gsi { min-height: 44px; }
.adm-linkbtn { flex-basis: 100%; padding: 6px 0; border: 0; background: none; color: var(--gold-text); font: inherit; font-size: 13px; text-align: start; text-decoration: underline; cursor: pointer; }

/* Back links on the pages under a section (ui.js back/backLink): a button, the same in both consoles. */
.adm .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  margin-bottom: 14px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-alt);
  color: var(--heading);
  font-size: 14px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.adm .back-link:hover { border-color: var(--gold); }
.adm .back-link .arrow { color: var(--gold-text); }

/* ── "Are you sure?" (ui.js confirmDialog): a native modal <dialog>, never the browser's confirm() ── */
.adm-dialog {
  width: min(460px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  margin: auto;
  padding: 0;   /* the form fills the box, so a click on the dialog itself is a click on the backdrop */
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-alt);
  color: var(--text);
  box-shadow: 0 24px 64px rgba(var(--shadow), 0.35);
}
.adm-dialog::backdrop { background: rgba(8, 16, 12, 0.55); }
.adm-dialog form { display: grid; gap: 10px; padding: 22px 20px 18px; }
.adm-dialog .adm-h2 { overflow-wrap: anywhere; }
.adm-dialog-body { display: grid; gap: 8px; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.adm-dialog .adm-actions { justify-content: flex-end; margin-top: 8px; }
.adm-dialog .adm-actions > * { min-height: 42px; padding: 10px 18px; border-radius: 8px; font-size: 14px; }
.adm-dialog-type { margin: 4px 0 0; }   /* "Type <name> to confirm": the confirm button waits for it */
.adm-dialog-type .form-label { text-transform: none; letter-spacing: normal; font-size: 14px; font-weight: 500; }   /* the name exactly as written */
.adm-dialog-type b { color: var(--heading); font-weight: 700; overflow-wrap: anywhere; }
.btn-solid.btn-danger[disabled] { cursor: not-allowed; }
.btn-solid.btn-danger, .btn-solid.btn-danger:hover { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.btn-solid.btn-danger:hover { filter: brightness(1.08); }

/* ── Lists ── */
.adm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
/* Buttons side by side (a row's Approve / Reject / Take down, Inactive's Select all / Warn / Remove, Check / Save calendar): one
   height and shape, the brand colour for the main one. A form's lone Save keeps the big button. */
.console-page #view :is(.adm-actions, .adm-row-actions) > :is(.act, .btn-solid):not(.adm-step) { min-height: 40px; padding: 8px 16px; border-radius: 8px; font-size: 14px; }
.console-page #view .adm-row-actions { align-items: center; }   /* a badge next to them stays a badge (Team: "Super admin") */
.console-page #view .adm-row-actions > .adm-role-select { min-height: 40px; }   /* Team: the role's box, as tall as the buttons */
.adm-sub { margin: -4px 0 14px; }
.adm-sub a, .adm-empty a { color: var(--gold-text); font-weight: 500; }
.adm-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.adm-tools label { flex: 1 1 150px; min-width: 0; }   /* the two filters share a row on phones */
.adm-tools .adm-search { flex: 1 1 100%; }   /* beats the label rule above: the search has a row of its own */
.adm-count { margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.adm-count:focus { outline: none; }   /* focused after a page link, for screen readers */
.adm-count-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 10px; }
.adm-count-row .adm-count, .adm-count-row .adm-pager { margin: 0; }   /* the count, with Previous / Next at the end of its line */
.adm-tools .adm-narrow { flex: 1 0 120px; max-width: 170px; }   /* order and rows a page: short choices */

/* Status chips (the Masjids list): toggle buttons, the pressed one filled. A row of their own. */
.adm-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; }
.adm-chip {
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.adm-chip:hover { border-color: var(--gold); }
.adm-chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
/* 0018: chips that are links to another list (Volunteers: Accounts / Added by the team), the one on screen filled. */
a.adm-chip { display: inline-flex; align-items: center; text-decoration: none; }
.adm-chip[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

/* Page links under a list: ← Previous 1 … 4 5 6 … 9 Next → (Previous / Next also next to the count) */
#rows[aria-busy="true"] { opacity: .55; transition: opacity .2s .15s; }   /* a new page is loading; fast answers don't flicker */
.adm-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 14px; }
.adm-pager:empty { display: none; }
.adm-pager .act { justify-content: center; min-width: 40px; min-height: 40px; font-size: 14px; }
.adm-pager .act[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; }
.adm-gap { padding: 0 2px; color: var(--muted); }
.adm-list { list-style: none; display: grid; gap: 8px; }
.adm-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-alt);
  color: var(--text);
  text-decoration: none;
}
a.adm-row:hover { border-color: var(--gold); }
.adm-row-main { display: flex; flex-direction: column; gap: 3px; flex: 1 1 220px; min-width: 0; }
.adm-row-title { font-size: 15px; font-weight: 600; color: var(--heading); overflow-wrap: anywhere; }
a.adm-row-title { text-decoration: none; }
a.adm-row-title:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.adm-row-sub { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.adm-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
/* Rows with a reason box (Requests, the Events tab, a masjid's events): the box as wide as the row, the buttons under it on
   the same left edge, whatever the text above it (a grid's space-between left the column only as wide as its words). */
.adm-row:has(> .adm-row-main > textarea) { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; align-items: start; gap: 10px; }
.adm-row-main > .form-label { margin-top: 8px; }
.adm-nowrap { white-space: nowrap; }
.adm-step { justify-content: center; min-width: 40px; min-height: 36px; padding: 2px 10px; font-size: 20px; font-weight: 600; line-height: 1; }   /* the Hijri date's − / + */
.adm-empty { padding: 16px; border-radius: 12px; background: var(--tint); color: var(--muted); font-size: 14px; }

.badge { padding: 3px 10px; border-radius: 20px; border: 1px solid transparent; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge[data-status="approved"] { background: var(--brand); color: var(--on-brand); }
.badge[data-status="pending"] { background: var(--gold-pale); color: var(--gold-text); border-color: var(--border); }
.badge[data-status="rejected"] { background: var(--danger-bg); color: var(--danger); }
/* 0024: the Reported events tab's count, the queue's report line and notes. */
.seg-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-inline-start: 4px; padding: 0 6px; border-radius: 10px;
  background: var(--gold-pale); color: var(--gold-text); font-size: 12px; font-weight: 700; line-height: 1; }
.seg-count[data-hot="yes"] { background: var(--danger); color: var(--on-danger); }
.seg-count[hidden] { display: none; }
/* ── Tabs (admin/index.html): 12 for a super admin, 2 rows of 6 equal columns on a laptop, 3 rows on a tablet, one row that
   scrolls sideways on a phone (boot.js brings the page's own tab into view). boot.js sets --tab-cols / --tab-cols-mid from
   the tabs the role sees, so an approver's 11 or an editor's 10 still line up in the same grid. Words never wrap. ── */
.adm-tabs { position: relative; display: grid; grid-template-columns: repeat(var(--tab-cols, 6), minmax(0, 1fr)); width: 100%; }
.adm-tabs .seg-btn { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 6px; text-align: center; white-space: nowrap; }
.adm-tabs .seg-btn:not([aria-current]):hover { color: var(--heading); }
@media (max-width: 959px) { .adm-tabs { grid-template-columns: repeat(var(--tab-cols-mid, 4), minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .adm-tabs { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin;
    mask-image: linear-gradient(to right, transparent, currentColor 12px, currentColor calc(100% - 12px), transparent); }   /* soft ends: more tabs this way */
  .adm-tabs .seg-btn { flex: 0 0 auto; padding-inline: 14px; scroll-snap-align: center; }
}
.rep-count { font-size: 13px; color: var(--text); }
.rep-count.is-hot b { color: var(--danger); }
.rep-notes { list-style: none; display: grid; gap: 6px; margin: 4px 0 6px; font-size: 13px; }
.rep-notes li { padding: 6px 10px; border-inline-start: 3px solid var(--line); background: var(--tint); border-radius: 6px; overflow-wrap: anywhere; }
.rep-notes q { color: var(--text); }
.badge:is([data-status="suspended"], [data-status="inactive"], [data-status="closed"]) { background: var(--tint); color: var(--muted); border-color: var(--line); }
/* Sign-ups: new needs an answer (gold), converted = done well (brand), spam = red. */
.badge[data-status="new"] { background: var(--gold-pale); color: var(--gold-text); border-color: var(--gold); }
.badge[data-status="contacted"] { background: transparent; color: var(--text); border-color: var(--border); }
.badge[data-status="converted"] { background: var(--brand); color: var(--on-brand); }
.badge[data-status="spam"] { background: var(--danger-bg); color: var(--danger); }

.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.chip { padding: 2px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--tint); font-size: 12px; color: var(--text); }
.chip-warn { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }   /* announcements: a translation older than the English */

/* ── Editors ── */
.adm-form { max-width: 820px; }
/* The console (founder, 2026-09-29): every card as wide as the tabs and the lists, so the pages share one right edge; the forms
   inside keep their own widths (the Seasons card's 640 px, Your mobile's 420 px). /manage/ keeps 820 px. */
.console-page :is(.adm-form, .adm-page-head) { max-width: none; }
.adm-form-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.adm-section { min-width: 0; margin-top: 20px; padding: 16px 0 0; border: 0; border-top: 1px solid var(--line); }
.adm-section > legend {
  float: inline-start;   /* lets the legend sit inside the box like a heading */
  width: 100%;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--heading);
}
.adm-section > legend + * { clear: both; }
.adm-section > .adm-hint:first-of-type { margin: 0 0 12px; }
.adm-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0 14px; }

details.adm-i18n { margin: -6px 0 16px; }
.adm-i18n summary { width: fit-content; padding: 4px 0; font-size: 13px; font-weight: 500; color: var(--gold-text); cursor: pointer; }
.adm-i18n-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 0 14px;
  margin-top: 8px;
  padding-inline-start: 12px;
  border-inline-start: 2px solid var(--border);
}
.adm-check-link:empty { display: none; }
.adm-check-link { margin: -8px 0 16px; }

/* Pick on map (console/map-picker.js): the map under the coordinates field. Fixed height, so Save stays reachable (EC-MAP-03). */
.adm-coords-warn { margin: -8px 0 12px; white-space: pre-line; line-height: 1.5; }
details.adm-map { margin: 0 0 16px; }
.adm-map > summary::-webkit-details-marker { display: none; }
.adm-map > summary::before { content: '📍' / ''; }
.adm-map > summary::after { content: '▾' / ''; font-size: 11px; color: var(--muted); }
.adm-map[open] > summary::after { content: '▴' / ''; }
.adm-map > summary { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; list-style: none; font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; }
.adm-map > summary:hover { border-color: var(--gold); }
.adm-map-tools { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 4px 16px; margin: 12px 0 10px; }
.adm-map-row { display: flex; gap: 8px; }
.adm-map-row .form-input { flex: 1; min-width: 0; }
.adm-map-here { padding-top: 26px; }   /* in line with the search field, under its label */
.adm-map-results { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.adm-map-hit { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--tint); color: var(--text); font: inherit; font-size: 13px; line-height: 1.4; text-align: start; cursor: pointer; }
.adm-map-hit:hover { border-color: var(--gold); }
.adm-map-box { height: min(50vh, 420px); min-height: 260px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--map-bg); }
.adm-map-box .maplibregl-canvas:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.adm-map-box .maplibregl-marker { cursor: grab; }
.adm-map-status { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--text); }
.adm-map-status:empty { display: none; }
.adm-map-status[data-state="warn"] { padding: 6px 10px; border-radius: 8px; background: var(--gold-pale); color: var(--gold-text); font-weight: 500; }
@media (pointer: coarse) { .adm-map > summary, .adm-map-hit, .adm-map-tools .act { min-height: 44px; } }
@media (max-width: 640px) {
  .adm-map-tools { grid-template-columns: 1fr; }
  .adm-map-here { padding-top: 8px; }
}

/* Prayer grid: name | Azan | Jamat time | minutes. Captions are for screen readers here, visible on phones. */
.rule-head, .rule-row {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) repeat(2, minmax(0, 9rem)) minmax(0, 7rem);
  gap: 8px;
  align-items: center;
}
.rule-head { padding-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.rule-row + .rule-head { padding-top: 14px; }   /* Jumu'ah's own: First azan, Jamat time (D-13) */
#rules-note { margin: 0 0 14px; }
.rule-row { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.rule-row .field-error { grid-column: 1 / -1; margin-top: 0; }
.rule-name { font-size: 14px; font-weight: 600; color: var(--heading); }
.rule-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rule-cap { font-size: 12px; color: var(--muted); }
.rule-row .rule-cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rule-cell .form-input { min-width: 0; padding: 8px 10px; }

.extra-row { min-width: 0; margin-bottom: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.extra-when { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)) minmax(0, 5rem); gap: 8px; align-items: start; }   /* the dates' Hijri line sits under them */
.extra-times { display: grid; grid-template-columns: repeat(2, minmax(0, 9rem)) minmax(0, 7rem); gap: 8px; margin-top: 8px; align-items: end; }
.extra-row .field-error { margin-top: 8px; }
.extra-row [data-remove] { margin-top: 10px; }
/* A row's errors block saving; its warnings (gold) ask "Save anyway?". One message per line (console/rules.js). */
:is(.rule-row, .extra-row) :is(.field-error, .field-warn) { white-space: pre-line; line-height: 1.5; }
/* One line for every box of a row (founder, 2026-09-29): each cell's caption, box, mode and "Please check" sit on the row's
   own tracks (subgrid), so a caption that wraps ("or minutes after Azan") or a cell without a mode never moves its box off
   the line of the others. Desktop prayer rows have no visible caption (3 tracks); phones and dated changes show it (4). */
.rule-row { row-gap: 3px; }
.rule-row > :is(.auto-box, .rule-pv) { margin-top: 5px; }
.rule-row > .rule-name { grid-row: span 3; }
.rule-row > .rule-cell, .extra-times > .rule-cell { display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); align-content: start; justify-content: stretch; }
.rule-row > .rule-cell { grid-row: span 3; }
.extra-times { row-gap: 3px; align-items: stretch; }
.extra-times > .rule-cell { grid-row: span 4; }
@media (max-width: 640px) {
  .rule-row > .rule-name { grid-row: auto; }
  .rule-row > .rule-cell { grid-row: span 4; }
}
.field-warn { margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: var(--gold-pale); color: var(--gold-text); font-size: 13px; font-weight: 500; }
.field-warn:empty { display: none; }
.rule-row .field-warn { grid-column: 1 / -1; margin-top: 0; }

/* ── TIME PICKER (assets/js/timepicker.js): <input type="time"> + an hour and a minute grid. Its field button, popover,
   footer and phone sheet are the date picker's (landing.css "Date picker"); here only what the calendar doesn't have.
   The time reads hh:mm left to right on RTL pages too. ── */
.tp > input.tp-input { width: 100%; }
.tp-title { margin: 0 4px 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); text-align: center; }
.tp-head { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 8px; }
.tp-big { min-width: 5.6ch; font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1.1; color: var(--heading); text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tp-step {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.tp-step:hover { border-color: var(--gold); color: var(--gold-text); }
.tp-ampm { display: inline-flex; margin-inline-start: 8px; padding: 2px; border: 1px solid var(--line); border-radius: 10px; }
.tp-ampm button {
  min-width: 40px;
  min-height: 30px;
  padding: 4px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.tp-ampm button:hover { background: var(--tint); color: var(--heading); }
.tp-ampm button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }
.tp-face { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tp-cap { margin: 0 4px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
/* Like the calendar's days: rounded cells, the chosen one filled with the brand colour, a focus ring in the heading colour. */
.tp-cell {
  display: grid;
  place-items: center;
  height: 38px;
  border-radius: 10px;
  color: var(--heading);
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.tp-cell:hover { background: var(--tint); }
.tp-cell:focus-visible { outline: 2px solid var(--heading); outline-offset: -2px; }
.tp-cell[aria-selected="true"] { background: var(--brand); color: var(--on-brand); }
.tp-cell[aria-selected="true"]:focus-visible { outline-color: var(--brand); box-shadow: inset 0 0 0 4px var(--bg-alt); }
.tp-hint { margin: 8px 4px 0; font-size: 12px; line-height: 1.45; color: var(--gold-text); }
.tp-done { background: var(--brand); color: var(--on-brand); }
.tp-done:hover:not(:disabled) { background: var(--brand-hover); }
@media (pointer: coarse) {
  .tp-step, .tp-ampm button { min-width: 44px; min-height: 44px; }
  .tp-cell { height: 44px; }
}
@media (max-width: 640px) {
  .tp-cell { height: 46px; font-size: 16px; }
}

.adm-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 8px 14px; }
.adm-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
@media (pointer: coarse) { .adm-check { min-height: 44px; } }
.adm-consent { margin: 0 0 4px; color: var(--text); font-size: 14px; }
.adm-consent + .field-error { margin-bottom: 14px; }

.adm-save { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }

/* Facilities (masjid-editor.js, migration 0011): one row a facility, its answers as pills (Yes / No / Don't know). */
#fac-note { margin: -4px 0 10px; }
.fac-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.fac-name { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--text); }
.fac-name .fac-ico { width: 22px; height: 22px; color: var(--gold-text); }
.fac-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.fac-choice {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 4px 12px;
  border: 1px solid var(--line); border-radius: 18px;
  font-size: 13px; color: var(--text); cursor: pointer;
}
.fac-choice input { margin: 0; accent-color: var(--brand); }
.fac-choice:has(input:checked) { border-color: var(--gold); background: var(--gold-pale); color: var(--gold-text); font-weight: 500; }
.fac-choice:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.fac-choice input:focus-visible { outline: none; }   /* the pill shows it */
.fac-choice:has(input[value=""]:checked) { border-color: var(--line); background: var(--tint); color: var(--muted); font-weight: 400; }   /* no answer: quieter */
@media (pointer: coarse) { .fac-choice { min-height: 44px; } }

/* ── A masjid's page: its header, the editor (console/masjid-editor.js), then the Verification panel ── */
.adm-page-head { max-width: 820px; margin-bottom: 14px; }
#mosque-form > .adm-h2 + * { margin-top: 6px; }
#review-slot { margin-top: 16px; }
.adm-review .adm-form-head { align-items: center; }
.adm-progress { padding: 2px 9px; border-radius: 20px; background: var(--tint); color: var(--muted); font-family: var(--font-body); font-size: 12px; font-weight: 600; white-space: nowrap; }
.adm-progress[data-done="true"] { background: var(--brand); color: var(--on-brand); }
#view[aria-busy="true"] { opacity: .55; pointer-events: none; transition: opacity .2s .15s; }   /* the delay: fast loads don't flicker */
#view[aria-busy="true"]:has(.skel), #rows[aria-busy="true"]:has(> .skel) { opacity: 1; }   /* 0028: a page drawing its placeholders (skeleton.js) is not dimmed */
.adm-section > legend .adm-progress { vertical-align: middle; margin-inline-start: 6px; }
.adm-checklist { display: grid; gap: 10px; }
.adm-checklist .adm-check { align-items: flex-start; line-height: 1.45; }
.adm-checklist .adm-check input { margin-top: 1px; }
.adm-review form > .adm-actions { margin-top: 4px; }
.adm-decide { display: grid; gap: 10px; }
.adm-decision { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.adm-reason { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.adm-readonly { padding: 10px 12px; border-radius: 10px; background: var(--tint); }

/* ── Dashboard ── */
/* Stat cards: two even rows (dashboard.js sets --stat-cols to half the cards, rounded up), two a row on a phone. */
.adm-stats { list-style: none; display: grid; grid-template-columns: repeat(var(--stat-cols, 4), minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.adm-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-alt);
  color: var(--text);
  text-decoration: none;
}
.adm-stat:hover { border-color: var(--gold); }
.adm-stat.is-alert { border-color: var(--gold); background: var(--gold-pale); }
.adm-stat-value { font-family: var(--font-body); font-size: 30px; font-weight: 600; line-height: 1.15; color: var(--heading); font-variant-numeric: lining-nums tabular-nums; }   /* the display font's 1 reads as I */
.adm-stat-label { font-size: 14px; font-weight: 600; color: var(--heading); text-wrap: balance; }   /* "New volunteer / sign-ups", never "sign- / ups" */
.adm-stat-sub { font-size: 12px; color: var(--muted); }
.adm-dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 16px; margin-top: 16px; }   /* cards in a row: one height */
/* Two cards in a row (Waiting, New sign-ups): the list takes the spare height, so their "See all" links share one line. */
.adm-dash > .adm-panel:not(.adm-wide) { grid-template-rows: auto 1fr; }
.adm-dash > .adm-panel:not(.adm-wide) > .adm-list { align-content: start; }
.adm-panel { display: grid; gap: 12px; min-width: 0; }
.adm-wide { grid-column: 1 / -1; }
.adm-more { font-size: 14px; }
.adm-more a { color: var(--gold-text); font-weight: 500; }
.adm-when { font-size: 12px; color: var(--muted); white-space: nowrap; }
.adm-row-end { display: flex; align-items: center; gap: 8px; }
.adm-activity { list-style: none; display: grid; }
.adm-activity li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 12px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
  color: var(--text);
  overflow-wrap: anywhere;
}
.adm-activity li:last-child { border-bottom: 0; }
.adm-activity b { color: var(--heading); }
.adm-activity a { color: var(--gold-text); font-weight: 500; }
.adm-activity time { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* The dashboard's line about the Calendar page (calendar.js calendarLine): today's Hijri date and season, and the link. */
.adm-calline { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-top: 16px; padding: 12px 20px; font-size: 14px; color: var(--text); }
.adm-calline b { color: var(--heading); }
.adm-calline a { color: var(--gold-text); font-weight: 600; white-space: nowrap; }
.adm-nowrap { white-space: nowrap; }
/* The Events tab's two parts (admin/events.js): links like the Volunteers' chips, each with its count. */
.adm-parts { margin-bottom: 14px; }
.adm-chip .seg-count { margin-inline-start: 8px; }

/* ── Sign-up details ── */
.adm-dl { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 10px 16px; margin-top: 16px; font-size: 14px; }
.adm-dl dt { color: var(--muted); font-weight: 500; }
.adm-dl dd { color: var(--text); overflow-wrap: anywhere; }
.adm-dl dd a:not(.act) { color: var(--gold-text); }
.adm-dl .adm-row-actions { display: inline-flex; margin-inline-start: 8px; vertical-align: middle; }
.adm-pre { white-space: pre-wrap; }
.adm-section > .adm-actions + .adm-hint { margin-top: 12px; }
.adm-section .adm-actions + .adm-actions, .adm-section .adm-hint + .adm-actions { margin-top: 8px; }
#signup-form .form-group { margin-bottom: 8px; }

/* ── Team ── */
.adm-steps-list { display: grid; gap: 4px; padding-inline-start: 20px; }
.adm-roles { list-style: none; display: grid; gap: 4px; }
.adm-roles b { color: var(--heading); font-weight: 600; }
.adm-roles + .adm-readonly { margin-bottom: 12px; }
.adm-team-add { margin-top: 20px; }
.adm-team-add .adm-hint { margin: 6px 0 14px; }
.adm-role-select { width: auto; padding: 7px 10px; font-size: 13px; }
.adm-row .chip { vertical-align: middle; margin-inline-start: 4px; }

/* ── Two-step sign-in ── */
.adm-mfa { display: grid; gap: 12px; margin: 4px 0 16px; }
.adm-steps { display: grid; gap: 12px; padding-inline-start: 22px; font-size: 14px; line-height: 1.65; color: var(--text); }
.adm-qr { display: block; width: fit-content; margin: 10px 0; padding: 10px; border-radius: 12px; background: #fff; }   /* QR codes need dark on light in both themes */
.adm-qr img { display: block; width: 220px; height: 220px; }   /* bigger scans more reliably, esp. Microsoft Authenticator */
.adm-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.adm-key code { padding: 6px 10px; border-radius: 8px; background: var(--tint); color: var(--heading); font-size: 15px; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.adm-code { max-width: 11ch; font-size: 22px; letter-spacing: 0.25em; text-align: center; }
.adm-mfa .form-group { margin-bottom: 0; }
.adm-mfa b { white-space: nowrap; }   /* app and brand names stay on one line */

/* ── Your sign-in (#/account): the admin's authenticator apps ── */
.adm-factors { display: grid; gap: 10px; }
.adm-factors .adm-list { margin: 4px 0; }
.adm-inline-form { display: grid; gap: 8px; max-width: 420px; }
.adm-inline-form .form-group { margin-bottom: 0; }
.adm-lost { margin-top: 14px; }

/* The live database without two-step sign-in (boot.js): the dev banner's shape, in the danger colours. */
.dev-banner.adm-alarm { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

/* ── A masjid's page: jump to its parts ── */
.adm-jump { margin-top: 10px; gap: 8px; }

/* Thumbs: list controls at least 44px tall (like the checklist's boxes). */
@media (pointer: coarse) { .adm-chip, .adm-pager .act { min-height: 44px; } }


@media (max-width: 640px) {
  .adm-who { max-width: 18ch; }
  .adm-mfa b { white-space: normal; }   /* "Other account (Google, Facebook, etc.)" wraps with the sentence, not alone */
  .adm-dialog form { padding: 18px 16px 16px; }
  .adm-dialog .adm-actions > * { flex: 1 1 auto; justify-content: center; }   /* two thumb-sized buttons, wrapping if long */
  .adm-pager { gap: 4px; }
  .adm-pager .act { min-width: 36px; padding-inline: 8px; }
  .adm-word { display: none; }   /* Previous / Next as arrows (their aria-label names them): the page links fit one line */
  .adm-dl { grid-template-columns: 1fr; gap: 2px; }
  .adm-dl dd { margin-bottom: 10px; }
  .adm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-stat { padding: 12px; }
  .adm-stat-value { font-size: 26px; }
  .rule-head { display: none; }
  .rule-row { grid-template-columns: 1fr 1fr 0.75fr; align-items: end; }   /* a caption that wraps keeps its input in line */
  .rule-row .rule-name { grid-column: 1 / -1; }
  .rule-row .rule-cap { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .extra-when { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .extra-when > :first-child { grid-column: 1 / -1; }
  .extra-times { grid-template-columns: 1fr 1fr 0.75fr; }
  .adm-form.md-card { padding: 16px 14px; }
  .extra-row { padding: 10px 8px; }
  .rule-cell .form-input { padding-inline: 6px; }   /* room for "05:30 AM" + the clock icon */
  .rule-cap { font-size: 11px; }
}

/* ── volunteers (0014): Accounts, the 60-day inactive list (admin/volunteers.js accountsPage) ── */
[data-list="accounts"] .adm-head button:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }
.adm-pick { cursor: pointer; }
.adm-pick input { width: 17px; height: 17px; margin-inline-end: 6px; vertical-align: -2px; accent-color: var(--sage); }
.badge[data-status="warned"] { background: var(--gold-pale); color: var(--gold-text); border-color: var(--border); }
.badge[data-status="removable"] { background: var(--danger-bg); color: var(--danger); }
/* 0018: the Volunteers tab's accounts (admin/volunteers.js): on the team, manages a masjid, Ready to help there. */
.badge:is([data-status="team"], [data-status="active"]) { background: transparent; color: var(--text); border-color: var(--border); }
.badge:is([data-status="manages"], [data-status="ready"]) { background: var(--gold-pale); color: var(--gold-text); border-color: var(--border); }

/* ── 0017: the Team page's mobiles and edit rows, Your mobile, photos (admin/team.js, admin/photos.js) ── */
.adm-reach { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.adm-reach bdi { margin-inline-end: 4px; color: var(--text); }
.adm-row-sub a:not(.act) { color: var(--gold-text); }
.adm-team-edit[hidden] { display: none; }
.adm-team-edit .adm-inline-form { max-width: none; }
.adm-team-edit .form-group { max-width: 420px; }
.adm-my-phone { margin-top: 16px; max-width: none; }
.adm-my-phone .form-group { max-width: 420px; }
.adm-photos { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; margin: 8px 0; }
.adm-photo { display: grid; gap: 8px; align-content: start; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-alt); }
.adm-photo-img { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: var(--tint); text-align: center; padding: 0; }
.adm-photo-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-photo-img[href]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.adm-photo-text { display: grid; gap: 4px; min-width: 0; }
.adm-photo-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--heading); }
.adm-photo .adm-row-actions { margin-top: 4px; }

/* ── 0017: the masjid editor's helpers (console/place-help.js, masjid-editor.js) ── */
/* Find it on Google Maps: four illustrated steps, the button, the paste box. */
details.adm-gmaps { margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--tint); }
.adm-gmaps > summary { font-size: 14px; font-weight: 600; color: var(--heading); cursor: pointer; }
.gm-steps { list-style: none; counter-reset: gm; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; margin: 12px 0; padding: 0; }
.gm-steps li { counter-increment: gm; display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: start; font-size: 13px; line-height: 1.5; color: var(--text); }
/* The step's number in a small circle: no "2." to turn into ".2" in Urdu and Arabic. */
.gm-steps li span::before { content: counter(gm); display: inline-grid; place-items: center; width: 20px; height: 20px; margin-inline-end: 6px;
  border-radius: 50%; background: var(--gold-pale); color: var(--gold-text); font-size: 12px; font-weight: 600; vertical-align: 1px; }
.gm-ico { width: 40px; height: 40px; color: var(--muted); }
.gm-ico .gm-red { stroke: var(--danger); }
.gm-open { margin-bottom: 12px; }
.gm-paste .form-label { display: block; margin-bottom: 6px; }
.gm-paste .adm-map-row { flex-wrap: wrap; }   /* a long button (Telugu) goes under the box instead of squeezing it */
.gm-paste .adm-map-row .form-input { flex: 1 1 220px; }

/* Filling the grid (a photo of the board, or calculated): each value filled is "Please check" until changed or confirmed. */
.rule-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.rule-tools-hint { margin: 0 0 8px; }
#fill-note { margin: 0 0 10px; }
.rule-checkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--gold-pale); color: var(--gold-text); font-size: 13px; font-weight: 500; line-height: 1.5; }
.rule-checkbar[hidden] { display: none; }
.rule-checkbar p { flex: 1 1 240px; }
.rule-cell .form-input[data-suggested], .adm-i18n .form-input[data-suggested] { border-color: var(--gold); background: var(--gold-pale); box-shadow: 0 0 0 1px var(--gold); }
/* Phase 7: the name's "Suggest spellings (AI)" under its translations (masjid-editor.js nameTools). */
.name-tools { margin-top: -10px; }
#name-note { margin: 0 0 10px; }
.rule-please { font-size: 11px; font-weight: 600; color: var(--gold-text); }

/* Automatic times (0025; masjid-editor.js autoBox): under the Azan and the Jamat time, how it is set; a time that follows the
   sun has no box of its own (the mode says it). Its settings open under the row, with a worked example; "Next 30 days" under
   each prayer. Maghrib after sunset (0017) is "Follow the sun" now. */
.rule-cell[hidden], .auto-box[hidden], .auto-f[hidden], .auto-part[hidden], .auto-help[hidden] { display: none; }
.rule-mode { margin-top: 2px; padding-block: 5px; font-size: 12px; }
.rule-cell[data-mode="sun"] > :is(input, .tp) { display: none; }
.rule-row > :is(.auto-box, .rule-pv) { grid-column: 1 / -1; }
.auto-box { min-width: 0; margin: 2px 0 4px; padding: 10px 12px; border: 1px solid var(--border); border-inline-start: 3px solid var(--gold); border-radius: 10px; background: var(--tint); }
.extra-row .auto-box { margin-top: 8px; background: var(--surface); }
.auto-title { padding: 0 4px; font-size: 13px; font-weight: 600; color: var(--heading); }
.auto-help { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.auto-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 8px; }
.auto-part { display: contents; }
.auto-f { display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; min-width: 0; }
.auto-cap { font-size: 12px; color: var(--muted); }
.auto-f .form-input { min-width: 0; padding: 8px 10px; }
.auto-ex { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--surface); color: var(--text); font-size: 13px; line-height: 1.55; }
.auto-ex:empty { display: none; }
.auto-ex[data-state="error"] { background: var(--danger-bg); color: var(--danger); }
.auto-presets { margin: 4px 0 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.auto-presets-title { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--heading); }
.auto-presets .adm-hint { margin: 0 0 8px; }
.auto-presets-list { display: flex; flex-wrap: wrap; gap: 8px; }
.auto-presets-list .act { max-width: 100%; white-space: normal; text-align: start; line-height: 1.4; }
.auto-guide { white-space: nowrap; }
.rule-pv summary { display: inline-flex; align-items: center; min-height: 32px; font-size: 13px; color: var(--brand); cursor: pointer; }
.rule-pv[open] summary { margin-bottom: 4px; }
.pv-wrap { overflow-x: auto; }   /* a phone scrolls the table, never the page */
.pv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pv-table caption { padding-bottom: 6px; caption-side: top; text-align: start; font-size: 12px; line-height: 1.5; color: var(--muted); }
.pv-table :is(th, td) { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: start; white-space: nowrap; }
.pv-table th { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.pv-table td:last-child { white-space: normal; }
.pv-table .pv-change td { background: var(--gold-pale); color: var(--gold-text); font-weight: 600; }
.pv-table .pv-change th { background: var(--gold-pale); }   /* the whole row, its day too */
@media (pointer: coarse) { .rule-pv summary { min-height: 44px; } }
/* Eid and Taraweeh have no azan: "No azan" in the Azan box's place, a .form-input (the Jamat time's border and padding), on
   the boxes' track of the row (the subgrid above), as tall as the Jamat time's box in every script (Nastaliq's tall inputs
   too); a long word (Telugu at 320px) wraps rather than being cut off. */
.rule-cell .rule-none { flex: 1; display: flex; align-items: center; line-height: 1.1; font-size: 13px; border-style: dashed; background: transparent; color: var(--muted); }
@media (max-width: 640px) { .rule-cell .rule-none { padding-inline: 4px; } }   /* Telugu's words fit one line at 375px */

/* ── Seasons (0023): the dashboard's card (admin/seasons.js) ── */
.adm-seasons .adm-h3 { margin: 10px 0 0; font-size: 18px; }
.adm-season-form { display: grid; gap: 4px; max-width: 640px; }
.adm-seasons .adm-form { max-width: 640px; }   /* its three forms, one width, on the card's left edge */
#margins-form { align-items: end; }   /* the two boxes and Save on one line, whatever their labels' length */
#margins-form > div:last-child { margin-bottom: 16px; }   /* level with the boxes (a .form-group's margin) */
.adm-season-window { border: 0; padding: 0; margin: 0; min-width: 0; }
.adm-season-window legend { margin-bottom: 6px; }
.adm-seasons .btn-solid { justify-self: start; }
.adm-seasons .adm-hint a { white-space: nowrap; }   /* "Eid ul-Fitr" never breaks inside a preview link */
.adm-tt-rows { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 13px; }
#tt-result[data-state="error"] { color: var(--danger); }
.adm-tt-errors { margin: 4px 0 0; padding-inline-start: 18px; }

/* ── 0026: a masjid's Ramadan times (console/ramadan-editor.js: /manage/'s Ramadan tab and the console's masjid page) ── */
.rm-form { margin-top: 20px; }
.rm-form .pv-wrap { position: relative; }   /* its screen-reader notes (.sr-only, absolute) stay inside the scrolled table, never widen the page */
.rm-modes { display: grid; gap: 8px; }
.rm-opt { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; line-height: 1.5; cursor: pointer; }
.rm-opt input { margin-block-start: 5px; accent-color: var(--brand); }
.rm-part[hidden] { display: none; }
.rm-adj { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-block: 10px; }
.rm-cap { flex: 0 0 100%; font-size: 13px; font-weight: 600; }
.rm-adj .rm-min { width: 5.5em; }
.rm-adj .rm-dir { width: auto; }
.rm-adj .field-error { flex: 0 0 100%; margin: 0; }
.rm-paste { margin-block: 10px; }
.rm-paste > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--heading); }
.rm-paste textarea { width: 100%; margin-block: 6px; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 13px; }
.rm-own { table-layout: fixed; }   /* the two times share what the day leaves: no sideways scroll on a phone */
.rm-own thead th:first-child { width: 32%; }
.rm-own input[type="time"] { width: 100%; min-width: 0; padding-block: 4px; padding-inline: 6px; }
.rm-own .form-input[data-suggested] { border-color: var(--gold); background: var(--gold-pale); box-shadow: 0 0 0 1px var(--gold); }   /* filled from a photo: Please check */
.rm-own th .rm-date { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }   /* the day and its date in one cell: a phone shows both times without scrolling */
.rm-own td { vertical-align: middle; }
.rm-own .rule-please { display: block; }
#rm-own-err { white-space: pre-line; }
.rm-month { margin-top: 18px; }
.rm-month > summary { cursor: pointer; font-weight: 600; }
.rm-table tr.rm-warn th { border-inline-start: 3px solid var(--danger); }
.rm-month-cap { margin-block: 8px 6px; }
/* "Check" keeps room for its words (at most two lines), the table scrolls sideways instead of a word a line on a phone. */
.rm-table td:last-child { white-space: nowrap; }   /* a time (Sunset, when there is no Check) never breaks */
.rm-table td.rm-chk { min-width: 13em; white-space: normal; }
.rm-flag { color: var(--danger); font-weight: 600; }
.rm-table .pv-change .rm-flag { padding-inline: 4px; border-radius: 4px; background: var(--surface); }   /* on a highlighted day too: AA (4.5:1) in both themes */
.mg-guide-link { margin-block: 0 4px; }