/* Crafted control surfaces. Top-layer APIs own overlay stacking; no z-index race. */
:root {
  --control-panel: #faf9f5;
  --control-panel-edge: rgba(32,36,51,.14);
  --control-panel-shadow: 0 18px 48px -12px rgba(10,20,55,.32), 0 4px 12px -4px rgba(10,20,55,.16);
  --control-selected: #e8edfc;
  --control-hover: #eeeee9;
}
:root[data-theme=dark] {
  --control-panel: #22263b;
  --control-panel-edge: rgba(243,242,236,.18);
  --control-panel-shadow: 0 24px 60px -16px rgba(3,7,24,.7), 0 4px 16px -4px rgba(3,7,24,.45);
  --control-selected: #303e67;
  --control-hover: #303449;
}
.control-shell { display: block; position: relative; min-inline-size: 0; }
.control-source {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  min-inline-size: 0 !important;
  min-block-size: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  clip-path: inset(50%);
  pointer-events: none;
}
.control-trigger {
  display: flex; align-items: center; gap: 10px;
  inline-size: 100%; min-inline-size: 0; min-block-size: 48px;
  padding: 11px 14px; border: 0; border-radius: 14px;
  background: var(--field); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--control-border);
  font: inherit; font-size: 16px; font-weight: 550; text-align: start;
  cursor: pointer; touch-action: manipulation;
  transition: transform 140ms var(--ease-out), background-color 160ms ease, box-shadow 160ms ease;
}
.control-value { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.control-leading:empty { display: none; }
.control-leading { display: grid; place-items: center; }
.control-trigger svg { inline-size: 18px; block-size: 18px; flex: none; stroke-width: 1.75; }
.control-trigger .control-chevron { inline-size: 15px; block-size: 15px; color: var(--ink-2); }
.control-trigger[data-control-trigger=select] .control-chevron { transform: rotate(90deg); }
.control-trigger[aria-expanded=true] { box-shadow: inset 0 0 0 1.5px var(--accent-text); }
.control-trigger[aria-invalid=true] { box-shadow: inset 0 0 0 1.5px var(--danger); }
.control-trigger:disabled { opacity: .5; cursor: default; }
.control-placeholder { color: var(--ink-2); }
.control-trigger:focus-visible, .choice-option:focus-visible,
.control-calendar :focus-visible, .control-confirm :focus-visible {
  outline: 2px solid var(--accent-text); outline-offset: 3px;
}
.preference-control:has(.control-source) > .appearance-icon { display: none; }
.preference-control .control-trigger { inline-size: 120px; min-block-size: 44px; padding: 10px 12px; font-size: 14px; }
.preference-control .control-value { white-space: nowrap; overflow-wrap: normal; }
.language-trigger .control-value { text-align: center; }
.appearance-control .control-trigger { inline-size: 142px; }
.topbar .control-trigger {
  min-block-size: 40px; block-size: 40px; inline-size: 96px;
  gap: 6px; padding-inline: 10px;
  border-radius: 999px; color: var(--on-sky); background: var(--smoke);
  box-shadow: inset 0 0 0 .5px var(--smoke-edge), inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(26px) saturate(170%); -webkit-backdrop-filter: blur(26px) saturate(170%);
}
.topbar .control-chevron { color: var(--on-sky-2); }
.topbar .appearance-trigger { inline-size: 40px; padding: 0; justify-content: center; }
.topbar .appearance-trigger :is(.control-value,.control-chevron) { display: none; }
.topbar .control-trigger:focus-visible { outline-color: var(--on-sky); }
.topbar .control-trigger[aria-expanded=true] { box-shadow: inset 0 0 0 1.5px var(--on-sky), 0 4px 12px -6px rgba(8,14,52,.4); }
.choice-panel, .control-calendar, .control-confirm {
  color: var(--ink); background: var(--control-panel);
  border: 1px solid var(--control-panel-edge); box-shadow: var(--control-panel-shadow);
  font-family: inherit; font-size: 15px; line-height: 1.5;
}
.choice-panel {
  position: fixed; inset: auto; margin: 0;
  inline-size: min(252px,calc(100vw - 24px)); padding: 7px;
  border-radius: 22px; overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity 120ms ease-out, overlay 120ms allow-discrete, display 120ms allow-discrete;
}
.choice-panel:popover-open { opacity: 1; }
.choice-panel:not(:popover-open) { pointer-events: none; }
html[data-input=keyboard] .choice-panel { transition: none; }
.choice-heading { padding: 9px 12px 8px; color: var(--ink-2); font-size: 13px; font-weight: 650; }
.choice-option {
  inline-size: 100%; min-block-size: 50px; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 0; border-radius: 15px; color: var(--ink); background: transparent;
  text-align: start; font: inherit; font-weight: 550; cursor: pointer;
  transition: background-color 140ms ease, transform 140ms var(--ease-out);
}
.choice-option + .choice-option { margin-block-start: 3px; }
.choice-option-label { flex: 1; }
.choice-option svg { inline-size: 20px; block-size: 20px; flex: none; }
.choice-option > svg:last-child { inline-size: 17px; block-size: 17px; opacity: 0; color: var(--accent-text); }
.choice-option[aria-selected=true] { background: var(--control-selected); color: var(--accent-text); }
.choice-option[aria-selected=true] > svg:last-child { opacity: 1; }
.choice-option:focus-visible { outline-offset: -3px; }
.choice-option:disabled { opacity: .45; cursor: default; }
.control-calendar {
  position: fixed; inset: auto; margin: 0; inline-size: min(354px,calc(100vw - 24px));
  max-inline-size: none; padding: 18px; border-radius: 26px;
  overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.control-calendar::backdrop { background: rgba(7,13,35,.15); }
.calendar-grip { display: none; }
.calendar-title, .calendar-arrow, .calendar-text-button { background: transparent; }
.calendar-top { display: flex; align-items: center; gap: 10px; margin-block-end: 12px; }
.calendar-label { flex: 1; min-inline-size: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.calendar-dismiss { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 50%; background: var(--field); color: var(--ink-2); }
.calendar-dismiss svg { inline-size: 15px; block-size: 15px; }
.calendar-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block-end: 12px; }
.calendar-title { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 18px; font-weight: 750; border-radius: 10px; padding: 8px 2px; text-align: start; }
.calendar-title svg { inline-size: 13px; block-size: 13px; color: var(--accent-text); transform: rotate(90deg); }
.calendar-title[aria-expanded=true] svg { transform: rotate(-90deg); }
.calendar-navigation { display: flex; align-items: center; gap: 2px; }
.calendar-arrow { display: grid; place-items: center; inline-size: 36px; block-size: 40px; border-radius: 12px; color: var(--accent-text); }
.calendar-arrow svg { inline-size: 18px; block-size: 18px; }
.calendar-arrow.previous svg { transform: rotate(180deg); }
html[dir=rtl] .calendar-arrow.previous svg { transform: none; }
html[dir=rtl] .calendar-arrow.next svg { transform: rotate(180deg); }
.calendar-arrow:disabled { opacity: .3; }
.calendar-grid { inline-size: 100%; table-layout: fixed; border-spacing: 0 4px; border-collapse: separate; font-variant-numeric: tabular-nums; }
.calendar-grid th { padding-block-end: 6px; color: var(--ink-2); font-size: 11px; font-weight: 650; text-align: center; overflow-wrap: anywhere; }
.calendar-grid td { padding: 0; text-align: center; }
.calendar-day { display: grid; place-items: center; inline-size: 100%; aspect-ratio: 1; max-block-size: 44px; min-block-size: 40px; border-radius: 50%; font-size: 15px; font-weight: 600; color: var(--ink); background: transparent; }
.calendar-day[aria-current=date] { color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-text); }
.calendar-grid [aria-selected=true] .calendar-day { background: var(--accent); color: var(--on-accent); box-shadow: 0 3px 8px -3px rgba(34,59,160,.4); }
.calendar-day:disabled { color: var(--ink-2); opacity: .38; cursor: default; }
.calendar-day:focus-visible { outline-offset: -3px; }
.calendar-grid [aria-selected=true] .calendar-day:focus-visible { outline-color: var(--on-accent); }
.calendar-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-start: 12px; padding-block-start: 12px; border-block-start: 1px solid var(--line); }
.calendar-shortcuts { display: flex; gap: 8px; }
.calendar-text-button { min-block-size: 44px; padding: 8px; border-radius: 12px; color: var(--accent-text); font-size: 14px; font-weight: 650; }
.calendar-apply { min-inline-size: 86px; min-block-size: 44px; padding: 10px 20px; font-size: 14px; }
.calendar-time { margin-block-start: 12px; border-block-start: 1px solid var(--line); padding-block-start: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.calendar-time-label { font-size: 14px; color: var(--ink-2); }
.calendar-time-pair { display: flex; align-items: end; gap: 7px; }
.calendar-time-field { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.calendar-time-field span { font-size: 11px; color: var(--ink-2); }
.calendar-time-field input { inline-size: 52px; block-size: 42px; padding: 6px; background: var(--field); color: var(--ink); border: 1px solid var(--control-border); border-radius: 12px; text-align: center; font-size: 18px; font-variant-numeric: tabular-nums; }
.calendar-colon { line-height: 42px; color: var(--ink-2); }
.calendar-error { color: var(--danger); font-size: 13px; margin-block-start: 10px; }
.calendar-year { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 10px; font-size: 14px; }
.calendar-year input { inline-size: 100px; padding: 10px; border: 1px solid var(--control-border); border-radius: 12px; color: var(--ink); background: var(--field); font-size: 16px; }
.calendar-months { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.calendar-month { min-block-size: 46px; border-radius: 12px; background: var(--field); font-size: 14px; color: var(--ink); }
.calendar-month[aria-pressed=true] { background: var(--control-selected); color: var(--accent-text); }
.control-confirm { position: fixed; inset: 0; margin: auto; inline-size: min(380px,calc(100vw - 32px)); padding: 28px; border-radius: 26px; }
.control-confirm::backdrop { background: rgba(7,13,35,.4); }
.control-confirm h2 { font-size: 22px; line-height: 1.35; letter-spacing: -.025em; }
.control-confirm p { margin-block-start: 12px; color: var(--ink-2); font-size: 15px; }
.confirm-actions { display: flex; gap: 10px; margin-block-start: 24px; }
.confirm-actions .button { flex: 1; padding-inline: 12px; min-block-size: 46px; font-size: 14px; }
/* The same field craft reaches task, account, sign-in and password pages. */
.field label { font-size: 13px; font-weight: 650; }
.field input:not(.control-source), .field textarea { border-radius: 14px; min-block-size: 48px; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--control-border); transition: box-shadow 160ms ease, background-color 160ms ease; }
.field input:not(.control-source):focus, .field textarea:focus { box-shadow: inset 0 0 0 1.5px var(--accent-text); }
.field [aria-invalid=true]:not(.control-source) { box-shadow: inset 0 0 0 1.5px var(--danger); }
.field small { font-size: 12px; line-height: 1.65; }
.form-actions .button { min-block-size: 46px; white-space: nowrap; }
.dialog-top { margin-block-end: 20px; }
.dialog-top > .icon-button, .about-dialog > .dialog-close { background: var(--field); border-radius: 50%; }
.about-dialog .preferences { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-block: 20px; }
.about-dialog .preference-control { min-inline-size: 0; }
.about-dialog .preference-control > .sr-only { position: static; inline-size: auto; block-size: auto; clip-path: none; overflow: visible; display: block; margin-block-end: 8px; font-size: 13px; color: var(--ink-2); }
.about-dialog .control-trigger { inline-size: 100%; min-block-size: 48px; }
.about-dialog :is(dt,dd) { font-size: 13px; }
.login-content > .preferences { margin-block-end: 28px; }
.login-content .field + .field { margin-block-start: 20px; }
.hero .prayer-foot a { white-space: nowrap; inline-size: auto; min-inline-size: 110px; }
@media(hover:hover) and (pointer:fine) {
  .control-trigger:hover:not(:disabled) { background-color: var(--control-hover); }
  .topbar .control-trigger:hover:not(:disabled) { background: rgba(8,14,52,.54); }
  .choice-option:hover:not(:disabled):not([aria-selected=true]),
  .calendar-day:hover:not(:disabled), .calendar-text-button:hover,
  .calendar-arrow:hover:not(:disabled), .calendar-month:hover { background: var(--control-hover); }
  .calendar-grid [aria-selected=true] .calendar-day:hover { background: var(--accent); }
}
@media(prefers-reduced-motion:no-preference) {
  html:not([data-input=keyboard]) :is(.control-trigger,.choice-option,.calendar-day,.calendar-arrow,.calendar-month,.calendar-text-button):active:not(:disabled) { transform: scale(.97); }
}
@media(max-width:999px) {
  .topbar .control-trigger { min-block-size: 44px; block-size: 44px; }
  .topbar .appearance-trigger { inline-size: 44px; }
}
@media(max-width:600px) {
  .control-calendar { inset: auto 10px max(10px,env(safe-area-inset-bottom)); margin: 0 auto; inline-size: calc(100% - 20px); max-inline-size: 420px; max-block-size: calc(100dvh - 28px); padding: 14px 20px 16px; border-radius: 28px; }
  .control-calendar::backdrop { background: rgba(7,13,35,.38); }
  .calendar-grip { display: block; inline-size: 34px; block-size: 4px; border-radius: 99px; margin: 0 auto 14px; background: var(--control-border); opacity: .6; }
  .calendar-dismiss { inline-size: 44px; block-size: 44px; }
  .calendar-arrow { inline-size: 44px; block-size: 44px; }
  .calendar-day { min-block-size: 44px; max-block-size: 48px; }
  .calendar-title { font-size: 18px; }
  .control-confirm { padding: 24px; }
  .about-dialog .preferences { gap: 10px; }
}
@media(max-width:359px) {
  .control-calendar { padding-inline: 10px; }
  .calendar-day { min-block-size: 40px; }
  .calendar-title { font-size: 16px; }
  .calendar-navigation { gap: 0; }
  .calendar-arrow { inline-size: 36px; }
  .topbar .language-trigger { inline-size: 88px; }
}
@media(prefers-reduced-motion:reduce) {
  .control-trigger, .choice-panel, .choice-option, .field input, .field textarea { transition: none; }
}
@media(prefers-reduced-transparency:reduce) {
  .topbar .control-trigger { background: #101a4d; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
html[data-low-effects] .topbar .control-trigger { background: #182956; backdrop-filter: none; -webkit-backdrop-filter: none; }