/* Living Today: materials and motion tokens */
:root {
  font-family: Manrope, Arabic, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  font-synthesis: none;
  color-scheme: light;
  --bg: #060B24;
  --sky-top: #060B24;
  --sky-mid: #0B1440;
  --sky-bottom: #16246B;
  --sky-horizon: #1F3590;
  --sky-horizon-a: .3;
  --sky-light: #8FA6FF;
  --sky-light-a: .2;
  --sky-stars: 1;
  --sky-x: 50vw;
  --sky-y: 4vh;
  --sheet: rgba(247,245,239,.9);
  --sheet-solid: #F7F5EF;
  --sheet-edge: rgba(255,255,255,.62);
  --ink: #202433;
  --ink-2: #50566A;
  --line: rgba(32,36,51,.11);
  --field: rgba(32,36,51,.06);
  --accent: #3454D1;
  --accent-text: #2C48B8;
  --danger: #B3261E;
  --on-accent: #fff;
  --on-sky: #fff;
  --on-sky-2: rgba(255,255,255,.86);
  --smoke: rgba(8,14,52,.36);
  --smoke-edge: rgba(255,255,255,.2);
  --thumb: #F7F5EF;
  --thumb-ink: #1B2E86;
  --thumb-seg: #fff;
  --ring-track: rgba(255,255,255,.17);
  --ring-fill: #FFFDF6;
  --ease-out: cubic-bezier(.23,1,.32,1);
  --ease-move: cubic-bezier(.77,0,.175,1);
  --ease-drawer: cubic-bezier(.32,.72,0,1);
  --spring: ease-out;
  --sky-dim: 0;
  --sheet-shadow: 0 30px 70px -24px rgba(10,20,70,.55), 0 6px 18px -8px rgba(10,20,70,.3);
  --radius: 14px;
  --paper: var(--sheet-solid);
  --surface: #FFFEFA;
  --rail: #EEEDE7;
  --muted: var(--ink-2);
  --line-strong: #A7ABB6;
  --control-border: #697182;
  --field-edge: #1B2030;
  --cobalt: var(--accent-text);
  --accent-wash: #E9EDFC;
  --danger-wash: #FAEDE9;
  --button-ink: #fff;
  --toast: #202433;
  --toast-ink: #F7F5EF;
  --focus: var(--accent-text);
  color: var(--ink);
  background: var(--bg);
  accent-color: var(--accent);
}
:root[data-theme=dark] {
  color-scheme: dark;
  --bg: #14172A;
  --sheet: rgba(19,22,38,.74);
  --sheet-solid: #14172A;
  --sheet-edge: rgba(255,255,255,.13);
  --ink: #F3F2EC;
  --ink-2: #B6BACB;
  --line: rgba(255,255,255,.1);
  --field: rgba(255,255,255,.08);
  --accent-text: #A9BAF9;
  --danger: #FF9A90;
  --sky-dim: .38;
  --surface: #202439;
  --rail: #111426;
  --line-strong: #69738A;
  --control-border: #808AA0;
  --field-edge: #F3F2EC;
  --accent-wash: #293655;
  --danger-wash: #392A2C;
  --toast: #F3F2EC;
  --toast-ink: #202433;
  --thumb-seg: rgba(255,255,255,.16);
}
@supports (animation-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, .14 4.4%, .72 12.9%, 1.02 19%, 1.137 26.5%, 1.09 35.5%, .995 50%, .983 56%, 1); }
}

/* Shared glass and performance fallbacks. */
.glass {
  background: var(--smoke);
  border: 0;
  box-shadow: inset 0 0 0 .5px var(--smoke-edge), inset 0 1px 0 rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  color: var(--on-sky);
}
/* Keep the light smoke translucent while making text safe over bright sky/sheets. */
html[data-theme=light] :is(.nav,.prayer-capsule) {
  -webkit-backdrop-filter: blur(26px) saturate(170%) brightness(.9);
  backdrop-filter: blur(26px) saturate(170%) brightness(.9);
}
@media(max-width:999px) {
  html[data-theme=light] .nav {
    -webkit-backdrop-filter: blur(26px) saturate(170%) brightness(.625);
    backdrop-filter: blur(26px) saturate(170%) brightness(.625);
  }
}
@media(prefers-reduced-transparency:reduce) {
  html[data-theme=light] :is(.nav,.prayer-capsule) { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
html[data-motion-busy] .sky :is(.drift,.stars) { animation-play-state: paused; }
html[data-low-effects] :is(.glass,.sheet,.editor-dialog,.about-dialog,.topbar .preference-control select) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-low-effects] .glass { background: #182956; }
html[data-low-effects] :is(.sheet,.editor-dialog,.about-dialog) { background: var(--sheet-solid); }
html[data-low-effects] .sky :is(.drift,.stars,.pointer-light) { display: none; }
.press { transition: transform 160ms var(--ease-out); }
.press:active { transform: scale(.97); }
@font-face {
  font-family:Manrope;
  src:url("fonts/Manrope-latin.c929b02c1c16.woff2") format('woff2');
  font-weight:200 800;
  font-display:swap;
  unicode-range:U+D,U+20-7E,U+A0-113,U+116-12B,U+12E-131,U+134-137,U+139-13E,U+141-148,U+14A-14D,U+150-17E,U+192,U+1A0-1A1,U+1AF-1B0,U+218-21B,U+1E80-1E85,U+1E9E,U+1EA0-1EF9,U+2011,U+2013-2014,U+2018-201A,U+201C-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2060;
}

@font-face {
  font-family:Manrope;
  src:url("fonts/Manrope-extra.d448172aacbe.woff2") format('woff2');
  font-weight:200 800;
  font-display:swap;
  unicode-range:U+259,U+2C6-2C7,U+2D8-2DD,U+374-375,U+37E,U+384-38A,U+38C,U+38E-3A1,U+3A3-3CE,U+400-45F,U+490-491,U+4AE-4AF,U+4BA-4BB,U+4E8-4E9,U+2070,U+2074-2079,U+2080-2089,U+20A3,U+20A9-20AC,U+20AE,U+20B1,U+20B4,U+20B9-20BA,U+20BD,U+20BF,U+2116,U+2122,U+2190-2193,U+21B5,U+2202,U+2205,U+220F,U+2211-2212,U+2215,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+E001-E003,U+E007-E009,U+FB01-FB02;
}

@font-face {
  font-family:Arabic;
  src:url("fonts/NotoSansArabic-latin.29bc608b2499.woff2") format('woff2');
  font-weight:100 900;
  font-display:swap;
  unicode-range:U+0,U+D,U+20-7E,U+A0-A3,U+A5,U+A7-AB,U+AE-B0,U+B4,U+B6-B8,U+BA-BB,U+BF-107,U+10A-113,U+116-11B,U+11E-123,U+126-127,U+12A-12B,U+12E-131,U+136-137,U+139-13E,U+141-148,U+14A-14D,U+150-15B,U+15E-161,U+164-165,U+16A-17E,U+218-21B,U+237,U+1E80-1E85,U+1E9E,U+1EF2-1EF3,U+2009,U+200B-2011,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+202F,U+2039-203A,U+204F;
}

@font-face {
  font-family:Arabic;
  src:url("fonts/NotoSansArabic-arabic.d7040e7a62e8.woff2") format('woff2');
  font-weight:100 900;
  font-display:swap;
  unicode-range:U+600-6FF,U+750-77F,U+870-88E,U+890-891,U+898-8FF,U+FB50-FBC2,U+FBD3-FD8F,U+FD92-FDC7,U+FDCF,U+FDF0-FDFF,U+FE70-FE74,U+FE76-FEFC,U+FEFF;
}

@font-face {
  font-family:Arabic;
  src:url("fonts/NotoSansArabic-extra.67b8cce48a9e.woff2") format('woff2');
  font-weight:100 900;
  font-display:swap;
  unicode-range:U+2C6-2C7,U+2C9,U+2D8-2DD,U+300-304,U+306-308,U+30A-30C,U+312,U+326-328,U+34F,U+20AC,U+2122,U+2212,U+221A,U+25CC,U+2E41,U+10EFD-10EFF;
}

/* Base */
html[lang=ar] {
  font-family:Arabic,Manrope,sans-serif;
}

* {
  box-sizing:border-box;
}

body,h1,h2,h3,p,dl,dd {
  margin:0;
}

body {
  min-width:0;
}

button,input,textarea,select {
  font:inherit;
  color:inherit;
}

button,a,input,textarea,select {
  -webkit-tap-highlight-color:transparent;
}

button,a {
  touch-action:manipulation;
}

button {
  cursor:pointer;
}

button {
  border:0;
}

button:disabled {
  cursor:default;
  opacity:.48;
}

a {
  color:inherit;
  text-decoration:none;
  text-underline-offset:4px;
}

button,input,select,textarea {
  border-radius:var(--radius);
}

input,textarea {
  caret-color:var(--cobalt);
}

::selection {
  background:var(--cobalt);
  color:var(--button-ink);
}

:focus-visible {
  outline:2px solid var(--focus);
  outline-offset:4px;
}

input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline-offset:2px;
}

[hidden] {
  display:none!important;
}

svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}

button svg,a svg {
  pointer-events:none;
}

.icon-defs {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.skip {
  position:fixed;
  z-index:300;
  top:12px;
  inset-inline-start:12px;
  background:var(--ink);
  color:var(--paper);
  padding:12px 20px;
  inline-size:160px;
  text-align:center;
  transform:translateY(-160%);
}

.skip:focus {
  transform:none;
}

/* Shell */
.app-shell {
  grid-template-columns: 212px minmax(0,1fr);
  min-height: 100dvh;
}

.brand {
  display:flex;
  align-items:center;
  gap:9px;
  min-height:44px;
}

.brand img {
  width: 36px;
  height: 36px;
}

.brand>span {
  font-family:Manrope,sans-serif;
  font-size:18px;
  font-weight:750;
  letter-spacing:-.04em;
  white-space:nowrap;
}

.nav {
  margin-top: 52px;
}

.nav a {
  min-height: 46px;
}

.nav svg {
  width:19px;
  height:19px;
}

.nav small {
  font-size:12px;
  font-variant-numeric:tabular-nums;
}

.nav a[aria-current] {
  font-weight: 700;
}

.profile {
  display:flex;
  gap:9px;
  align-items:center;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--line);
}

.avatar {
  width:30px;
  height:34px;
  display:grid;
  place-items:center;
  font-size:14px;
  font-weight:600;
  color:var(--cobalt);
}

.profile>div {
  flex:1;
  min-width:0;
}

.profile strong {
  font-size:12px;
  font-weight:650;
  display:block;
  overflow-wrap:anywhere;
}

.profile span:not(.avatar) {
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

.profile .icon-button {
  width:36px;
}

.topbar {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.topbar-actions, .preferences {
  display: flex;
  align-items: center;
}

.preferences {
  gap:7px;
}

.preference-control {
  display:block;
}

.preference-control select {
  font-size:16px;
  block-size:44px;
  min-block-size:0;
  inline-size:108px;
  max-width:120px;
  padding:0 28px 0 12px;
  background:var(--field);
  border:0;
  cursor:pointer;
}

.preference-control select option {
  background:var(--surface);
  color:var(--ink);
}

.icon-button {
  width:44px;
  height:44px;
  display:inline-grid;
  place-items:center;
  flex-shrink:0;
  color:var(--muted);
}

.icon-button:not(.glass) { background: transparent; }

.icon-button svg {
  width:18px;
  height:18px;
}

.workspace {
  max-width: 1440px;
  margin: 0 auto;
}

/* Hero */
.page-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px;
  min-height:82px;
}

.page-head h1 {
  font-size:29px;
  line-height:1.45;
  font-weight:650;
  letter-spacing:-.035em;
}

.date-number {
  font-family: Manrope,Arabic,sans-serif;
  font-size: 72px;
  line-height: 1.1;
  letter-spacing: -.04em;
  color: var(--cobalt);
}

.date-weekday {
  display:flex;
  align-items:center;
  gap:18px;
  font-size:13px;
  color:var(--muted);
  margin-top:5px;
}

.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 16px;
  border: 1px solid transparent;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 650;
  white-space: nowrap;
}

.button svg {
  width:18px;
  height:18px;
}

.secondary {
  background:transparent;
  border-color:var(--control-border);
  color:var(--ink);
}

.calendar-strip {
  display:flex;
  align-items:center;
  gap:24px;
  border-block:1px solid var(--line);
  margin-bottom:32px;
}

.week-days {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  flex:1;
  min-width:0;
}

.day-cell {
  position:relative;
  min-height:76px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:4px;
  padding:9px 4px;
  color:var(--muted);
}

.day-cell>span {
  font-size:12px;
  white-space:nowrap;
}

.day-cell>strong {
  font-size:18px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  line-height:1.4;
}

.day-cell.selected {
  background:var(--accent-wash);
  color:var(--cobalt);
}

.day-cell.selected strong {
  color:var(--cobalt);
}

.day-cell.selected:after {
  content:'';
  height:2px;
  background:var(--cobalt);
  position:absolute;
  inset-inline:22%;
  bottom:0;
}

.day-dot {
  width:3px;
  height:3px;
  background:currentColor;
  border-radius:50%;
  position:absolute;
  bottom:7px;
  inset-inline-start:calc(50% - 1px);
}

.date-picker {
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.date-picker input {
  direction: ltr;
  font-family: Manrope,Arabic,sans-serif;
  padding: 8px 4px;
  min-height: 44px;
  min-width: 0;
  background: transparent;
  border: 0;
}

/* Sheet and rows */
.agenda-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 236px;
  gap:42px;
  align-items:start;
}

.agenda-layout.single-column {
  grid-template-columns:1fr;
}

.single-column .prayer-section {
  max-width:760px;
  width:100%;
  border-inline-start:0;
  padding-inline-start:0;
}

.single-column .prayer-grid {
  margin-top:24px;
}

.single-column .prayer-item {
  min-height:79px;
}

.single-column .prayer-count {
  margin-top:0;
}

.section-caption {
  color: var(--muted);
}

.task-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  min-height: 44px;
}

.segmented {
  align-items: center;
  flex-shrink: 0;
}

.segmented button {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  background: transparent;
  color: var(--muted);
}

.segmented button.active {
  color:var(--ink);
  font-weight:700;
}

.segmented button.active:after {
  content:'';
  position:absolute;
  inset-inline:0;
  bottom:0;
  height:2px;
  background:var(--cobalt);
}

.filter-count {
  color: var(--muted);
  font-weight: 500;
}

.task-search {
  display: flex;
  align-items: center;
  min-width: 0;
  color: var(--muted);
}

.task-search svg {
  width:16px;
  height:16px;
}

.task-search input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 0;
  background: transparent;
  border: 0;
}

.task-search input::placeholder {
  color:var(--muted);
  opacity:1;
}

.task-list {
  border-top:1px solid var(--line-strong);
}

.task-row {
  display: flex;
  align-items: center;
  min-height: 92px;
  padding: 14px 0;
}

.task-row>form {
  display:flex;
  flex-shrink:0;
}

.task-check {
  position:relative;
  background:transparent;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  color:transparent;
  flex-shrink:0;
}

.task-check:before {
  content:'';
  position:absolute;
  inset:11px;
  border:1px solid var(--control-border);
  border-radius:4px;
  background:transparent;
}

.task-check svg {
  position: relative;
  width: 14px;
  height: 14px;
}

.task-check:disabled {
  opacity:1;
}

.is-complete .task-check {
  color:var(--button-ink);
}

.task-content {
  min-width:0;
  flex:1;
}

.task-content h3 {
  overflow-wrap: anywhere;
}

.task-content h3 a {
  display:block;
  font-family:Manrope,Arabic,system-ui,sans-serif;
}

.task-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: var(--muted);
  margin-top: 4px;
}

.task-meta>span {
  display:inline-flex;
  gap:5px;
  align-items:center;
}

.task-meta .is-overdue {
  color:var(--danger);
}

.task-priority {
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.task-priority.high {
  color:var(--cobalt);
}

.task-priority svg {
  width:12px;
  height:12px;
}

.is-complete .task-content h3 {
  color: var(--muted);
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong);
}

.row-edit {
  width:32px;
}

.row-edit svg {
  width:14px;
  height:14px;
}

.forward-icon {
  transform:none;
}

html[dir=rtl] .forward-icon {
  transform:rotate(180deg);
}

.add-row {
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.add-row svg {
  width:17px;
  height:17px;
}

.list-foot {
  border-top: 1px solid var(--line);
  padding-top: 13px;
  color: var(--muted);
}

.prayer-section {
  border-inline-start:1px solid var(--line);
  padding-inline-start:28px;
  scroll-margin-top:24px;
}

.prayer-section h2 {
  font-size:16px;
}

.prayer-count {
  margin-bottom:10px;
}

.prayer-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:72px;
  border-bottom:1px solid var(--line);
  padding:11px 0;
}

.prayer-item h3 {
  font-size:14px;
  font-weight:600;
}

.prayer-item p {
  font-size:12px;
  color:var(--muted);
  margin-top:3px;
}

.prayer-button {
  position:relative;
  width:44px;
  height:44px;
  background:transparent;
  display:grid;
  place-items:center;
  color:transparent;
}

.prayer-button:before {
  content:'';
  position:absolute;
  inset:10px;
  border:1px solid var(--control-border);
  border-radius:50%;
}

.prayer-button svg {
  width:14px;
  height:14px;
  position:relative;
  stroke-width:2;
}

.prayer-button:disabled {
  opacity:.6;
}

.prayer-item.is-complete .prayer-button {
  color:var(--button-ink);
}

.prayer-foot {
  padding-top: 19px;
  color: var(--muted);
  line-height: 1.8;
}

.prayer-foot p {
  max-width:35ch;
}

.prayer-foot a {
  display:flex;
  align-items:center;
  gap:7px;
  min-height:44px;
  color:var(--cobalt);
  font-size:12px;
  margin-top:6px;
}

.prayer-foot svg {
  width:12px;
  height:12px;
  flex:none;
}

.prayer-note {
  color: var(--muted);
  margin-top: 15px;
}

/* Forms and empty states */
.empty-state,.filter-empty {
  padding:44px 12px 40px;
  max-width:65ch;
  margin-inline:auto;
}

.empty-state h3,.filter-empty h3 {
  font-size:17px;
  font-weight:600;
}

.empty-state p,.filter-empty p {
  font-size:13px;
  color:var(--muted);
  margin:9px 0 20px;
  line-height:1.8;
}

.filter-empty {
  border-top:1px solid var(--line-strong);
}

.text-button {
  padding:8px 0;
  min-height:44px;
  min-inline-size:72px;
  background:transparent;
  color:var(--cobalt);
  text-decoration:underline;
  font-size:12px;
}

.intro {
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
  margin-top:7px;
}

.message {
  padding: 14px 16px;
  margin-bottom: 20px;
  background: var(--accent-wash);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.8;
  border-radius: var(--radius);
}
.error-box {
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 13px;
  line-height: 1.8;
  border-radius: var(--radius);
}

.error-box {
  background:var(--danger-wash);
  color:var(--danger);
  border:1px solid var(--danger);
}

.error-box a {
  display:inline-block;
  text-decoration:underline;
  margin-top:7px;
  min-height:34px;
}

.error-box p+p {
  margin-top:6px;
}

.back-link {
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  inline-size:112px;
  font-size:12px;
  color:var(--muted);
  margin-bottom:18px;
}

.back-link svg {
  width:16px;
  height:16px;
  transform:rotate(180deg);
}

html[dir=rtl] .back-link svg {
  transform:none;
}

.editor-page-head {
  margin-bottom:25px;
  min-height:0;
}

.editor {
  max-width:760px;
}

.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px 18px;
}

.field {
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}

.field.wide {
  grid-column:1/-1;
}

.field label {
  font-size:12px;
  font-weight:650;
}

.field input, .field select {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 10px 12px;
  border: 0;
  box-shadow: inset 0 0 0 .5px var(--field-edge);
}
.field textarea {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  box-shadow: inset 0 0 0 .5px var(--field-edge);
}

.field input::placeholder,.field textarea::placeholder {
  color:var(--muted);
  opacity:1;
}

.field input[type=date], .field input[type=datetime-local] {
  direction: ltr;
  font-family: Manrope,Arabic,sans-serif;
}

.field textarea {
  min-height:100px;
  resize:vertical;
}

.field [aria-invalid=true] {
  box-shadow:inset 0 0 0 1.5px var(--danger);
}

.field small {
  line-height: 1.8;
  color: var(--muted);
}

.field-error {
  color:var(--danger);
  font-size:12px;
  line-height:1.8;
}

.field-error span {
  display:block;
}

.field-error ul {
  padding:0;
  margin:0;
  list-style:none;
}

.form-actions {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  align-items:center;
  padding-top:23px;
  margin-top:26px;
  border-top:1px solid var(--line);
}

.form-actions .secondary { inline-size:80px; flex:none; }
.form-actions .primary { inline-size:124px; flex:none; }
.form-actions .danger { inline-size:158px; flex:none; }
[data-password-change-form] .form-actions .primary { inline-size:144px; }
.form-sheet>.button { inline-size:128px; }

.editor-errors:empty {
  display:none;
}

.editor-network-error {
  margin:20px 0 0;
}

/* Dialogs */
html:has(dialog[open]) { overflow: hidden; }
.editor-dialog {
  position: fixed;
  overscroll-behavior: contain;
}
.about-dialog {
  overscroll-behavior: contain;
}
.editor-dialog {
  width: min(600px,calc(100vw - 36px));
  max-height: calc(100dvh - 48px);
  padding: 24px 28px 28px;
  color: var(--ink);
  overflow: auto;
}

dialog::backdrop {
  background:#10141e80;
}

.dialog-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-bottom:2px;
}

.dialog-top h2 {
  font-size:22px;
  font-weight:650;
  letter-spacing:-.025em;
}

.editor-dialog .form-actions {
  bottom: -28px;
  padding-bottom: 4px;
}

.sheet-handle {
  display:none;
}

.about-dialog {
  position: fixed;
  width: min(460px,calc(100vw - 36px));
  max-height: calc(100dvh - 48px);
  padding: 32px;
  color: var(--ink);
}

.dialog-close {
  position:absolute;
  top:10px;
  inset-inline-end:10px;
}

.about-dialog>h2 {
  font-family:Manrope,sans-serif;
  font-size:25px;
  letter-spacing:-.04em;
  margin-top:10px;
}

.about-dialog>p {
  font-size:13px;
  color:var(--muted);
  line-height:1.8;
  margin-top:10px;
}

.about-dialog dl {
  margin-top:24px;
}

.about-dialog dl>div {
  padding:16px 0;
  border-top:1px solid var(--line);
}

.about-dialog dt {
  font-size:12px;
  font-weight:700;
}

.about-dialog dd {
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
  margin-top:6px;
}

.about-dialog .preferences {
  margin:5px 0 18px;
}

.about-dialog>.button {
  width:100%;
}

/* Toast */
.toast {
  position:fixed;
  z-index:110;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:14px;
  max-width:calc(100vw - 32px);
  padding:9px 10px 9px 17px;
  background:var(--toast);
  color:var(--toast-ink);
  border-radius:var(--radius);
  font-size:12px;
  line-height:1.8;
  box-shadow:0 8px 24px #10141e24;
}

.toast>[data-undo] {
  min-height:44px;
  background:transparent;
  color:inherit;
  font-size:12px;
  font-weight:700;
  text-decoration:underline;
  padding:4px 7px;
  white-space:nowrap;
}

.toast-close {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  flex-shrink:0;
  background:transparent;
  color:inherit;
}

.toast-close svg {
  width:16px;
  height:16px;
}

.connection-notice {
  position:fixed;
  z-index:120;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  max-width:calc(100vw - 28px);
  padding:13px 18px;
  font-size:12px;
  border:1px solid var(--danger);
  border-radius:var(--radius);
  background:var(--danger-wash);
  color:var(--danger);
}

.loading-placeholder {
  padding-block:10px;
}

.loading-label {
  font-size:12px;
  color:var(--muted);
}

.skeleton {
  height:44px;
  background:var(--line);
  opacity:.5;
  border-radius:var(--radius);
  margin-block:14px;
}

.skeleton:nth-last-child(2) {
  width:70%;
}

.skeleton:last-child {
  height:94px;
}

button[aria-busy=true] {
  cursor:wait;
  opacity:.65;
}

/* Account pages */
.login-page {
  min-height: 100dvh;
}

.login-art {
  border-inline-end: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-art .brand {
  margin-bottom:48px;
}

.login-art .brand img {
  width:48px;
  height:48px;
}

.login-art .brand span {
  font-size:24px;
}

.login-art h1 {
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -.03em;
}

.login-art p {
  color: var(--muted);
  line-height: 1.9;
  margin-top: 14px;
  max-width: 35ch;
}

.login-content {
  width: 100%;
  max-width: 440px;
}

.login-content>.preferences {
  margin-bottom:45px;
}

.login-content h2 {
  font-weight: 650;
}

.login-content>p {
  font-size:13px;
  color:var(--muted);
  margin:9px 0 26px;
  line-height:1.9;
}

.login-content .field {
  margin-bottom:20px;
}

.login-content .primary {
  width:100%;
  margin-top:8px;
}

.login-content .login-note {
  margin-top: 22px;
}

/* Hover-capable pointers */
@media(hover:hover) and (pointer:fine) {
  .icon-button:hover, .preference-control select:hover {
  background: var(--surface);
  color: var(--ink);
}

  .primary:hover {
    filter:brightness(.94);
  }

  .secondary:hover {
    background:var(--surface);
  }

  .day-cell:hover:not(.selected) {
    background:var(--surface);
  }

  .task-check:hover:before,.prayer-button:hover:not(:disabled):before {
    border-color:var(--cobalt);
  }

  .task-content h3 a:hover {
    text-decoration:none;
  }

  .add-row:hover,.back-link:hover {
    color:var(--cobalt);
  }

}

/* Responsive layout */
@media(min-width:1600px) {
  .workspace,.topbar {
    padding-inline:58px;
  }

  .agenda-layout {
    grid-template-columns:minmax(0,1fr) 270px;
    gap:54px;
  }

}

@media(max-width:1200px) {
  .app-shell {
    grid-template-columns:188px minmax(0,1fr);
  }

  .brand>span {
    font-size:16px;
  }

  .brand img {
    width:32px;
    height:32px;
  }

  .workspace {
    padding-inline:28px;
  }

  .topbar {
    padding-inline:28px;
  }

  .agenda-layout {
    grid-template-columns:minmax(0,1fr) 205px;
    gap:26px;
  }

  .prayer-section {
    padding-inline-start:22px;
  }

  .task-row {
    gap:8px;
  }

  .task-priority.high>span {
    max-width:none;
    white-space:nowrap;
    font-size:12px;
  }

  .task-search {
    width:140px;
  }

  .calendar-strip {
    gap:12px;
  }

  .date-picker input {
    width:122px;
  }

  .date-number {
    font-size:64px;
  }

}

@media(max-width:1000px) {
  .app-shell {
    grid-template-columns:164px minmax(0,1fr);
  }

  .brand {
    gap:4px;
  }

  .brand>span {
    font-size:14px;
  }

  .brand img {
    width:29px;
    height:32px;
  }

  .nav a {
    padding-inline:8px;
    font-size:13px;
    gap:10px;
  }

  .workspace {
    padding-inline:24px;
  }

  .topbar {
    padding-inline:24px;
  }

  .agenda-layout {
    grid-template-columns:1fr;
  }

  .prayer-section {
    border-inline-start:0;
    border-top:1px solid var(--line);
    padding-inline-start:0;
    padding-top:24px;
    margin-top:6px;
  }

  .prayer-grid {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px;
  }

  .prayer-item {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    border:0;
  }

  .prayer-item h3 {
    font-size:13px;
  }

  .prayer-foot {
    padding-top:12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    border-top:1px solid var(--line);
  }

  .prayer-foot p {
    max-width:52ch;
  }

  .prayer-foot a {
    flex-shrink:0;
    margin-top:0;
  }

  .prayer-count {
    margin-bottom:0;
  }

  .single-column .prayer-section {
    margin-top:0;
    border-top:0;
    padding-top:0;
  }

  .single-column .prayer-grid {
    display:block;
    margin-top:12px;
  }

  .single-column .prayer-item {
    flex-direction:row;
    align-items:center;
    border-bottom:1px solid var(--line);
  }

  .task-priority.high>span {
    max-width:none;
  }

  .task-search {
    width:180px;
  }

  .calendar-strip {
    flex-wrap:wrap;
    position:relative;
  }

  .date-picker {
  position: absolute;
  inset-inline-end: 0;
}

  .page-head {
    padding-inline-end:0;
  }

  .calendar-strip {
    margin-top:18px;
  }

  .page-head:has(+.calendar-strip) {
    padding-bottom:38px;
  }

  .date-picker {
    top:-57px;
  }

  .login-art {
    padding:40px;
  }

  .login-art h1 {
    font-size:30px;
  }

}

@media(max-width:720px) {
  .app-shell {
    display:block;
  }

  .brand {
    gap:8px;
  }

  .brand>span {
    font-size:19px;
  }

  .brand img {
    width:32px;
    height:34px;
  }

  .nav {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:70;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
    margin:0;
    padding:6px 12px calc(7px + env(safe-area-inset-bottom));
    background:var(--paper);
    border-top:1px solid var(--line);
  }

  .nav a {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:3px;
    min-height:52px;
    padding:6px 4px;
    font-size:12px;
  }

  .nav a>span {
    flex:initial;
  }

  .nav a[aria-current] {
    background:transparent;
    color:var(--cobalt);
  }

  .nav a small {
    display:none;
  }

  .nav svg {
    width:19px;
    height:19px;
  }

  .topbar {
    height:54px;
    padding:0 20px;
    border-bottom:1px solid var(--line);
  }

  .topbar-actions {
    gap:0;
  }

  .preferences {
    gap:3px;
  }

  .preference-control select {
    font-size:12px;
    padding-inline:5px;
    max-width:104px;
  }

  .topbar .icon-button {
    width:36px;
    height:44px;
  }

  .workspace {
    padding:16px 20px calc(100px + env(safe-area-inset-bottom));
  }

  .page-head {
    margin-bottom:18px;
    gap:12px;
    min-height:64px;
  }

  .page-head h1 {
    font-size:24px;
  }

  .date-number {
    font-size:53px;
    line-height:1.05;
  }

  .date-weekday {
    font-size:12px;
    gap:8px;
    margin-top:3px;
  }

  .page-head>.button {
  padding: 10px 11px;
  min-width: 44px;
  gap: 5px;
}

  .page-head>.button svg {
    width:16px;
    height:16px;
  }

  .calendar-strip {
    display:block;
    margin:0 0 20px;
    border-top:0;
    position:static;
  }

  .page-head:has(+.calendar-strip) {
    padding-bottom:0;
  }

  .week-days {
    width:100%;
  }

  .day-cell {
    min-height:60px;
    padding:8px 2px;
    gap:3px;
  }

  .day-cell>span {
    font-size:12px;
  }

  .day-cell>strong {
    font-size:15px;
  }

  .day-cell.selected:after {
    inset-inline:15%;
  }

  .day-dot {
    bottom:4px;
  }

  .date-picker {
    position:static;
    justify-content:flex-end;
    margin-top:7px;
    min-height:44px;
  }

  .date-picker input {
  width: 133px;
}

  .date-picker .icon-button {
    width:44px;
  }

  .section-caption {
    font-size:12px;
  }

  .task-toolbar {
  margin-bottom: 6px;
  align-items: center;
}

  .segmented {
    gap:15px;
  }

  .segmented button {
    font-size:12px;
    min-height:44px;
  }

  .filter-count {
    font-size:12px;
  }

  .task-search {
    width:128px;
    gap:6px;
  }

  .task-search input {
  min-height: 44px;
}

  .task-search svg {
    width:14px;
    height:14px;
  }

  .task-row {
  min-height: 94px;
  padding: 13px 0;
}

  .task-content h3 {
    font-size:14px;
    line-height:1.7;
  }

  .task-meta {
  margin-top: 5px;
}

  .task-check {
    width:44px;
    height:44px;
  }

  .row-edit {
    display:none;
  }

  .task-priority.high {
  margin-top: 9px;
}

  .task-priority.high svg {
    width:13px;
    height:13px;
  }

  .add-row {
    font-size:12px;
    min-height:58px;
    padding-inline:12px;
  }

  .list-foot {
    font-size:12px;
  }

  .agenda-layout {
    gap:24px;
  }

  .prayer-section {
    margin-top:0;
    padding-top:22px;
  }

  .prayer-section h2 {
    font-size:16px;
  }

  .prayer-grid {
    gap:6px;
    margin-top:10px;
  }

  .prayer-item {
    gap:7px;
    padding-top:8px;
    min-height:97px;
  }

  .prayer-item h3 {
    font-size:12px;
  }

  .prayer-item p {
    font-size:12px;
    white-space:nowrap;
  }

  .prayer-button {
    margin-inline-start:-10px;
  }

  .prayer-foot {
    display:block;
    padding-top:13px;
  }

  .prayer-foot p {
    max-width:46ch;
    font-size:12px;
  }

  .prayer-foot a {
    font-size:12px;
    min-height:44px;
    margin-top:3px;
  }

  .single-column .prayer-item {
    min-height:78px;
  }

  .single-column .prayer-button {
    margin-inline:0;
  }

  .empty-state,.filter-empty {
    padding:33px 4px;
  }

  .empty-state h3,.filter-empty h3 {
    font-size:16px;
  }

  .empty-state p,.filter-empty p {
    font-size:12px;
  }

  .editor-dialog {
  width: 100%;
  max-width: 100%;
  max-height: 94dvh;
  border-bottom: 0;
}

  .sheet-handle {
  width: 32px;
  height: 3px;
}

  .dialog-top h2 {
    font-size:20px;
  }

  .dialog-top {
    margin-bottom:0;
  }

  .form-grid {
    gap:18px 12px;
  }

  .field:has(input[type=datetime-local]) {
    grid-column:1/-1;
  }

  .field input, .field textarea, .field select {
  min-height: 48px;
}

  .field input[type=date],.field input[type=datetime-local] {
    font-size:12px;
  }

  .field label {
    font-size:12px;
  }

  .field small {
    font-size:12px;
  }

  .field-error {
    font-size:12px;
  }

  .form-actions {
    margin-top:23px;
    padding-top:19px;
  }

  .form-actions .button {
    flex:0 0 auto;
    font-size:13px;
  }

  .toast {
    bottom:calc(83px + env(safe-area-inset-bottom));
    width:calc(100vw - 28px);
    font-size:12px;
    gap:5px;
    padding:7px 5px 7px 12px;
  }

  .toast>[data-toast-message] {
    flex:1;
  }

  .toast>[data-undo] {
    font-size:12px;
  }

  .about-dialog>p,.about-dialog dd {
    font-size:12px;
  }

  .login-page {
    display:block;
  }

  .login-art {
    padding:27px 24px;
    border-inline-end:0;
    border-bottom:1px solid var(--line);
  }

  .login-art .brand {
    margin-bottom:24px;
  }

  .login-art .brand img {
    width:35px;
    height:35px;
  }

  .login-art .brand span {
    font-size:21px;
  }

  .login-art h1 {
    font-size:26px;
  }

  .login-art p {
    font-size:12px;
    margin-top:8px;
  }

  .login-content {
    padding:25px 24px;
  }

  .login-content>.preferences {
    margin-bottom:25px;
  }

  .login-content h2 {
    font-size:23px;
  }

}

@media(max-width:370px) {
  .workspace,.topbar {
    padding-inline:16px;
  }

  .date-number {
    font-size:45px;
  }

  .page-head>.button {
    font-size:12px;
    padding-inline:9px;
  }

  .task-toolbar {
    gap:8px;
  }

  .segmented {
    gap:11px;
  }

  .task-search {
    width:110px;
  }

  .prayer-item h3 {
    font-size:12px;
  }

  .prayer-item p {
    font-size:12px;
  }

  .preference-control select {
    max-width:96px;
  }

}

/* Motion preferences */
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }

}

html[data-input=keyboard] *:not(.sky, .sky *),html[data-input=keyboard] *:not(.sky, .sky *):before,html[data-input=keyboard] *:not(.sky, .sky *):after {
  animation:none!important;
  transition:none!important;
}

.button.danger {
  background: var(--danger);
  border-color: var(--danger);
}

.danger-text {
  color:var(--danger);
  display:inline-block;
  margin-block-start:16px;
  inline-size:72px;
}

/* Shared sizing and accessibility. */
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--ink-2) var(--sheet-solid); }
body { min-height: 100dvh; -webkit-font-smoothing: antialiased; }

.button, .icon-button, .toast-close, .preference-control select, .nav a, .day-cell { border-radius: 999px; }
.primary { background: var(--accent); color: var(--on-accent); }
.button.danger { color: var(--sheet-solid); }
:root:not([data-theme=dark]) .button.danger { color: #fff; }
.is-complete .task-check:before, .prayer-item.is-complete .prayer-button:before { background: var(--accent); border-color: var(--accent); }
.date-number { font-weight: 200; font-variant-numeric: tabular-nums; }

.section-caption, .prayer-foot, .prayer-note {
  font-size: 13px;
}

.field input, .field select, .field textarea, .field input[type=date], .field input[type=datetime-local], .date-picker input {
  font-size: 16px;
}
.field small { font-size: 12px; }
.editor-dialog, .about-dialog { border-radius: 28px; }
.task-search { width: 220px; }
.date-picker input { width: 156px; }
.date-picker .icon-button { width: 44px; }
@media(max-width:720px) {

  .task-search { flex: 1; min-width: 155px; }
  .preferences select { font-size: 16px; max-width: 112px; }
  .topbar { gap: 8px; }

  .topbar-actions { margin-inline-start: auto; }

  .page-head>.button { font-size: 12px; padding-inline: 10px; }
}

@media(prefers-reduced-motion:reduce) {
  .press:active { transform: none; }
}
html[data-input=keyboard] .press:active { transform: none; }

/* Sky: physical left/right positions intentionally stay clock-like in RTL. */
body { isolation: isolate; }
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: linear-gradient(180deg,var(--sky-top),var(--sky-mid) 52%,var(--sky-bottom)); }
.sky>* { position: absolute; pointer-events: none; }
.horizon { inset: auto -20% -30%; height: 70%; background: radial-gradient(closest-side,var(--sky-horizon),transparent); opacity: var(--sky-horizon-a); }
.drift { inline-size: 90vmax; block-size: 60vmax; border-radius: 50%; opacity: .3; }
.drift-a { top: -24vmax; left: -20vmax; background: radial-gradient(closest-side,rgba(255,255,255,.5),transparent); animation: sky-drift-a 46s ease-in-out infinite alternate; }
.drift-b { bottom: -18vmax; right: -24vmax; background: radial-gradient(closest-side,var(--sky-horizon),transparent); animation: sky-drift-b 62s ease-in-out infinite alternate; }
@keyframes sky-drift-a { to { transform: translate3d(16vmax,8vmax,0) scale(1.12); } }
@keyframes sky-drift-b { to { transform: translate3d(-20vmax,-7vmax,0) scale(1.18); } }
.sky-light { top: 0; left: 0; inline-size: 96vmin; block-size: 96vmin; margin: -48vmin; border-radius: 50%; background: radial-gradient(closest-side,var(--sky-light),transparent); opacity: var(--sky-light-a); transform: translate3d(var(--sky-x),var(--sky-y),0); }
.stars { inset: 0; opacity: var(--sky-stars); }
.stars i { position: absolute; top: 0; left: 0; inline-size: 1.6px; block-size: 1.6px; border-radius: 50%; }
.stars i:nth-child(2) { animation: sky-twinkle 7s ease-in-out infinite alternate; }
@keyframes sky-twinkle { to { opacity: .25; } }
.pointer-light { top: 0; left: 0; inline-size: 70vmin; block-size: 70vmin; margin: -35vmin; border-radius: 50%; background: radial-gradient(closest-side,rgba(255,255,255,.14),transparent); opacity: 0; }
.sky-dim { inset: 0; background: #040718; opacity: var(--sky-dim); }
.grain { inset: 0; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23grain)'/%3E%3C/svg%3E"); }

/* Floating shell. The same navigation serves desktop and phone. */
.app-shell { display: block; max-inline-size: 1500px; margin-inline: auto; padding-inline: max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right)); }
.topbar { position: relative; min-block-size: 68px; block-size: auto; padding: 14px 0; border: 0; color: var(--on-sky); background: transparent; gap: 12px; }
.topbar .brand { gap: 10px; font-size: 17px; color: var(--on-sky); }
.brand img { padding: 7px; inline-size: 40px; block-size: 40px; border-radius: 12px; background: #F7F5EF; object-fit: contain; }
.topbar .brand>span { font-size: 17px; }
.topbar-actions { gap: 7px; margin: 0; }
.topbar .preferences { gap: 7px; }
.topbar .icon-button, .topbar .avatar { inline-size: 40px; block-size: 40px; min-block-size: 40px; color: var(--on-sky); }
.topbar .icon-button svg { inline-size: 17px; block-size: 17px; }
.topbar .avatar { border-radius: 50%; }
.noscript-account { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-block: 10px; padding: 12px 16px; border-radius: 24px; }
.noscript-account>div { display: grid; gap: 2px; min-inline-size: 0; overflow-wrap: anywhere; }
.noscript-account span { font-size: 12px; color: var(--on-sky-2); }
.nav { position: absolute; inset: auto; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: 92px 102px 106px 126px; align-items: center; gap: 2px; margin: 0; padding: 4px; border-radius: 999px; z-index: 70; background: var(--smoke); border: 0; }
.nav a { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 7px; min-block-size: 40px; padding: 9px 13px; color: var(--on-sky-2); font-size: 14px; font-weight: 650; z-index: 1; }
.nav a>span { flex: initial; }
.nav a[aria-current] { background: transparent; color: var(--thumb-ink); }
.nav svg { inline-size: 16px; block-size: 16px; }
.nav a small { display: inline; font-size: 12px; color: inherit; }
.thumb { position: absolute; top: 0; left: 0; pointer-events: none; border-radius: 999px; background: var(--thumb); z-index: 0; }
.topbar .preference-control select { border: 0; border-radius: 999px; background-color: var(--smoke); box-shadow: inset 0 0 0 .5px var(--smoke-edge), inset 0 1px 0 rgba(255,255,255,.16); color: var(--on-sky); -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%); padding-block: 0; padding-inline: 10px 24px; font-size: 16px; block-size: 40px; min-block-size: 0; inline-size: 92px; max-inline-size: 105px; }
.appearance-control { position: relative; }
.appearance-icon { display: none; pointer-events: none; }
.topbar .appearance-control select {
  inline-size: 40px;
  color: transparent;
  appearance: none;
  -webkit-appearance: none;
}
.topbar .appearance-icon { display: block; position: absolute; inset: 11px; inline-size: 18px; block-size: 18px; color: var(--on-sky); z-index: 1; }
.topbar .preference-control select option { color: var(--ink); background: var(--sheet-solid); }
.topbar :focus-visible { outline-color: var(--on-sky); }
.nav [aria-current]:focus-visible { outline-color: var(--thumb-ink); outline-offset: -3px; }

.about-dialog { overflow-y: auto; }
.about-dialog .profile { margin-block: 18px; padding-block: 14px; border-block: 1px solid var(--line); }
.about-dialog .profile strong { font-size: 16px; }
.about-dialog .profile span:not(.avatar) { font-size: 13px; }
.about-dialog .avatar { inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--accent-wash); flex: none; }
html[lang=ar] .about-dialog>h2 { text-align: right; }
.about-dialog>.button { margin-block-start: 8px; }
[data-roll] { position: relative; display: inline-block; font-variant-numeric: tabular-nums; }
.roll-old { position: absolute; inset: 0; }
.roll-new { display: inline-block; }
@media(hover:hover) and (pointer:fine) {
  .topbar .icon-button:hover, .topbar .preference-control select:hover, .nav a:hover:not([aria-current]) { background: rgba(8,14,52,.54); color: #fff; }
}
@media(min-width:1000px) { .workspace { margin-block-start: 0; } }
@media(min-width:1000px) { .nav.nav--notes { inline-size:max-content; max-inline-size:none; grid-template-columns:92px 102px 106px 126px 102px; } }
@media(min-width:1000px) and (max-width:1240px) { .topbar .brand>span,.topbar .profile-open { display:none; } .nav.nav--notes { grid-template-columns:76px 88px 88px 100px 88px; } }
@media(max-width:999px) {
  html { scroll-padding-block-end: calc(110px + env(safe-area-inset-bottom)); }
  .app-shell { padding-block-end: calc(110px + env(safe-area-inset-bottom)); }
  .topbar { padding-block: 12px; }
  .nav { position: fixed; inset: auto; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); inline-size: min(440px,calc(100% - 32px)); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); background: var(--smoke); }
  .nav a { flex-wrap: wrap; column-gap: 4px; row-gap: 3px; font-size: 11.5px; min-block-size: 52px; padding: 7px 4px; }
  .nav a svg { inline-size: 18px; block-size: 18px; flex-basis: 100%; }
  .nav.nav--notes { grid-template-columns: repeat(5,minmax(0,1fr)); inline-size: min(480px,calc(100% - 24px)); }
  .nav small { font-size: 11.5px; }
  .workspace { padding: 20px; }
}
@media(max-width:1099px) { .profile-open { display: none; } }
@media(max-width:459px) { .topbar .brand>span { display: none; } }
@media(prefers-reduced-motion:no-preference) {
  .nav .thumb { view-transition-name: nav-thumb; }
}
@media(prefers-reduced-transparency:reduce) {
  .glass, .topbar .preference-control select { background: #101A4D; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Hero: clockwise geometry stays the same in both writing directions. */

.agenda-layout:has(>.hero) { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,6fr); gap: clamp(32px,5vw,80px); align-items: start; }
.task-pane { min-inline-size: 0; background: var(--sheet-solid); padding: 24px; }
.task-pane>.page-head:has(>.button:only-child) { min-block-size: 44px; justify-content: flex-end; margin-block-end: 12px; }
.hero { min-inline-size: 0; color: var(--on-sky); text-align: center; align-self: start; }
.hero .calendar-strip { display: flex; flex-wrap: wrap; justify-content: center; position: relative; gap: 8px; border: 0; margin: 0 auto; inline-size: min(100%,520px); }
.hero .week {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7,minmax(0,1fr));
  flex-basis: 100%;
  padding: 4px;
  border-radius: 24px;
}
.hero .day-cell { position: relative; min-block-size: 56px; padding: 5px 2px; gap: 1px; color: var(--on-sky-2); background: transparent; z-index: 1; }
.hero .day-cell>span { font-size: 11px; font-weight: 650; }
.hero .day-cell>strong { font-size: 17px; color: inherit; }
.hero .day-cell.selected { background: transparent; color: var(--thumb-ink); }
.hero .day-cell.selected:after { display: none; }
.hero .day-dot { bottom: 3px; }
.hero .week .thumb { border-radius: 20px; }
.hero .date-picker { position: relative; inset: auto; margin: 0; padding-inline: 8px 2px; border-radius: 999px; min-block-size: 44px; }
.hero .date-picker input { color: #fff; inline-size: 156px; color-scheme: dark; }
.hero .date-picker .icon-button { color: #fff; }
.ring-wrap { position: relative; inline-size: min(100%,50dvh,420px); aspect-ratio: 1; margin: 16px auto; display: grid; place-items: center; overflow: visible; }
.ring-wrap::before { content: ''; position: absolute; inset: 0; border-radius: 50%; clip-path: circle(50%); pointer-events: none; background: radial-gradient(ellipse at center,rgba(8,14,52,.46) 0 65%,transparent 71%); }
#ring { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; transform: none; }
#ring path { fill: none; stroke-width: 13; stroke-linecap: round; cursor: pointer; }
#ring .arc-track { stroke: var(--ring-track); }
#ring .arc {
  stroke: var(--ring-fill);
  pointer-events: stroke;
}
#ring .arc.on {
  filter: drop-shadow(0 0 6px rgba(255,253,246,.45));
}
#ring .arc-hit { stroke: transparent; stroke-width: 44px; pointer-events: stroke; }
.face { position: relative; display: flex; flex-direction: column; align-items: center; inline-size: 62%; pointer-events: none; color: var(--on-sky); }
.face .date-number { font-size: clamp(70px,7vw,96px); font-weight: 200; line-height: 1.02; letter-spacing: -.065em; color: #fff; }
.face h1 { font-size: 19px; font-weight: 700; margin-block-start: 10px; line-height: 1.6; }
.face .date-weekday { display: block; color: var(--on-sky-2); margin-block-start: 4px; font-size: 14px; }
.live-clock { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-block-start: 12px; color: var(--on-sky-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.hero .prayer-capsule { inline-size: 100%; max-inline-size: 520px; border: 0; padding: 8px 12px; border-radius: 24px; margin: 0 auto; color: var(--on-sky); }
.hero .prayer-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; margin: 0; }
.hero .prayer-item { display: block; min-block-size: 0; padding: 0; border: 0; margin: 0; }
.hero .prayer-button { display: flex; flex-direction: column; gap: 6px; align-items: center; inline-size: 100%; block-size: auto; min-block-size: 60px; margin: 0; padding: 4px 0; color: var(--on-sky); }
.hero .prayer-button::before { display: none; }
.prayer-mark { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border: 1.5px solid rgba(255,255,255,.62); border-radius: 50%; color: transparent; }
.hero .prayer-mark svg { inline-size: 18px; block-size: 18px; }
.hero .prayer-label { font-size: 13px; font-weight: 650; }
.prayer-time { font-size: .72rem; font-variant-numeric: tabular-nums; opacity: .8; margin-block-start: 4px; }
.hero .is-complete .prayer-mark {
  border-color: var(--ring-fill);
  color: var(--thumb-ink);
  box-shadow: 0 0 16px rgba(255,253,246,.2);
}
.hero .prayer-count { font-size: 13px; font-weight: 650; margin: 4px 0 0; color: var(--on-sky); }
.hero .prayer-foot { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; font-size: 12px; color: var(--on-sky-2); }
.hero .prayer-foot p { flex: 1; min-inline-size: 0; max-inline-size: none; margin: 0; font-size: 12px; line-height: 1.4; text-align: start; }
.hero .prayer-foot a { color: var(--on-sky); justify-content: center; min-block-size: 44px; min-inline-size: 80px; inline-size: 124px; font-size: 12px; margin: 0; flex: none; }
.hero-only .prayer-foot p { text-align: center; }
.hero .prayer-note { color: var(--on-sky-2); font-size: 12px; margin: 8px 0; }
.hero :focus-visible { outline-color: #fff; }
.hero .day-cell.selected:focus-visible { outline-color: var(--thumb-ink); outline-offset: -3px; }
.agenda-layout.prayers-layout { grid-template-columns: 1fr; }
.hero-only { inline-size: min(100%,560px); margin-inline: auto; }
.hero-only .ring-wrap { inline-size: min(100%,50dvh,420px); }

@media(min-width:1000px) and (min-height:700px) { .hero { position: sticky; top: 20px; } }
@media(max-width:999px) {
  .agenda-layout:has(>.hero) { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .hero { inline-size: min(100%,520px); margin-inline: auto; }
  .ring-wrap { inline-size: min(60vw,234px); margin-block: 4px; }
  .hero-only .ring-wrap { inline-size: min(60vw,234px); }
  .face { inline-size: 60%; }
  .face .date-number { font-size: clamp(58px,17vw,76px); }
  .face h1 { font-size: clamp(12px,3.85vw,15px); line-height: 1.3; margin-block-start: 0; }
  .face .date-weekday { font-size: 13px; line-height: 1.3; margin-block-start: 2px; }
  .face .live-clock { margin-block-start: 3px; font-size: 12px; line-height: 1.3; gap: 4px; }
  .hero .day-cell { min-block-size: 50px; }
  .hero .prayer-capsule { padding: 8px 12px; }
  .hero .prayer-label { font-size: 12px; }
  .hero .prayer-foot a { inline-size:110px; }
  .hero .prayer-count { margin-block-start: 4px; }
  .hero .prayer-foot p { line-height: 1.4; }
}
@media(hover:hover) and (pointer:fine) {
  .hero .day-cell:hover:not(.selected) { background: rgba(8,14,52,.2); color: #fff; }
  .hero .prayer-button:hover .prayer-mark { border-color: #fff; }
}

/* One frosted sheet per page, plain rows within it. */
.workspace, .workspace:has(.hero) { background: transparent; padding: 8px 0 28px; border-radius: 0; }
.sheet { min-inline-size: 0; background: var(--sheet); border: 0; border-radius: 30px; -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); box-shadow: var(--sheet-shadow), inset 0 0 0 .5px var(--sheet-edge), inset 0 1px 0 var(--sheet-edge); padding: 22px clamp(20px,2.4vw,32px) 18px; color: var(--ink); }
.sheet-head { align-items: center; min-block-size: 0; gap: 20px; margin-block-end: 22px; }
.sheet-head>div { min-inline-size: 0; }
.sheet-head h2 { font-size: clamp(21px,2vw,26px); font-weight: 700; letter-spacing: -.03em; line-height: 1.4; }
.sheet-head .section-caption { display: block; margin-block-start: 5px; }
.sheet-head .button { inline-size:140px; flex:none; font-size: 15px; font-weight: 700; padding-inline: 16px; box-shadow: 0 10px 22px -10px rgba(35,60,170,.85), inset 0 1px 0 rgba(255,255,255,.22); }
.task-toolbar { gap: 10px; flex-wrap: nowrap; margin-block-end: 5px; }
.segmented { position: relative; display: grid; grid-template-columns: repeat(3,minmax(70px,1fr)); gap: 0; padding: 4px; border-radius: 999px; background: var(--field); }
.segmented button { min-block-size: 36px; justify-content:center; padding: 7px 12px; border-radius: 999px; z-index: 1; font-size: 13px; gap: 4px; }
.segmented button.active::after { display: none; }
.segmented .thumb { background: var(--thumb-seg); box-shadow: 0 2px 7px rgba(10,20,40,.08); }
/* The selected destination stays readable when scripts are unavailable. */
.nav:not([data-thumb-ready]) a[aria-current], .hero .week:not([data-thumb-ready]) .day-cell.selected { background: var(--thumb); }
.filter-count { font-size: 12px; }
.task-search { flex: 1; inline-size: auto; gap: 8px; padding-inline: 13px 3px; min-inline-size: 140px; background: var(--field); border-radius: 999px; }
.task-search input { font-size: 16px; }
.task-search .icon-button { inline-size: 36px; block-size: 40px; }
.task-search>svg { inline-size: 16px; block-size: 16px; }
.task-list { position: relative; border: 0; }
.task-row { position: relative; gap: 12px; padding-block: 12px; min-block-size: 68px; border-bottom: 0; box-shadow: inset 0 -.5px 0 var(--line); border-radius: 0; }
.task-row>form { margin-inline-start: -10px; }
.task-content h3 { font-size: 16px; font-weight: 600; line-height: 1.35; }
.task-content h3 a, .task-content bdi { overflow-wrap: anywhere; }
.task-meta { font-size: 13px; gap: 10px; margin-block-start: 2px; }
.task-priority { font-size: 12px; }
.task-priority.high>span { display:inline-block; inline-size:72px; flex:none; font-size: 12px; }
.task-priority svg { inline-size: 14px; block-size: 14px; fill: currentColor; }
.task-check::before { inset: 10px; border: 1.5px solid var(--control-border); border-radius: 50%; background: transparent; }
.task-check::after { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: var(--accent); opacity: 0; transform: scale(.45); }
.task-check svg { inline-size: 18px; block-size: 18px; z-index: 1; stroke-width: 2.2; color: #fff; }
.task-check path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-complete .task-check::before { background: transparent; border-color: var(--accent); }
.is-complete .task-check::after { opacity: 1; transform: scale(1); }
.is-complete .task-check path { stroke-dashoffset: 0; }
.row-edit { display: inline-grid; inline-size: 32px; opacity: 1; }
.add-row { min-block-size: 54px; padding-inline: 0; font-size: 15px; color: var(--accent-text); font-weight: 650; }
.empty-state,.filter-empty { text-align: center; }
.list-foot { font-size: 13px; padding-block-start: 16px; }
.sheet>.section-caption { margin-block-end: 14px; }
.single-column .sheet { inline-size: 100%; max-inline-size: 1000px; margin-inline: auto; }
.form-sheet { inline-size: min(100%,780px); margin: 12px auto; }
.form-sheet .editor { max-inline-size: none; }
.form-sheet h2 { font-size: 20px; overflow-wrap: anywhere; }

.login-page { display: grid; grid-template-columns: 1fr; place-items: center; min-block-size: 100dvh; padding: 28px 18px; }
.account-sheet { inline-size: min(100%,480px); }
.login-art { background: transparent; border: 0; padding: 0; }
.login-art .brand { margin-block-end: 24px; }
.login-art .brand img { inline-size: 44px; block-size: 44px; }
.login-art h1 { font-size: 26px; }
.login-art p { font-size: 14px; margin-block: 8px 24px; }
.login-content { background: transparent; max-inline-size: none; padding: 0; margin: 0; }
.login-content>.preferences { margin-block-end: 20px; }
.login-content h2 { font-size: 22px; }
.login-content .login-note { font-size: 12px; }
.field input, .field select, .field textarea { background: var(--field); }
.field select { block-size: 46px; min-block-size: 0; padding-block: 0; }
/* Native selects and date pickers retain their platform interaction. */
:root {
  --field-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2350566A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --field-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2350566A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E");
}
:root[data-theme=dark] {
  --field-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23B6BACB' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --field-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23B6BACB' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E");
}
.field select,.preference-control select { appearance: none; -webkit-appearance: none; background-image: var(--field-chevron); background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; padding-inline-end: 34px; }
html[dir=rtl] :is(.field select,.preference-control select) { background-position: left 10px center; }
.topbar .preference-control select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-size: 14px; background-position: right 7px center; padding-inline-end: 24px; }
html[dir=rtl] .topbar .preference-control select { background-position: left 7px center; }
.topbar .appearance-control select { background-image: none; padding-inline: 0; }
.field input:is([type=date],[type=datetime-local]) { background-image: var(--field-calendar); background-repeat: no-repeat; background-position: right 12px center; background-size: 19px; }
.field input::-webkit-calendar-picker-indicator { opacity: 0; inline-size: 24px; block-size: 24px; cursor: pointer; }
html[lang=ar] :is(h1,h2,.date-number):not([dir=ltr]) { letter-spacing: 0; }

/* Preview status never adds a row to the daily agenda. */
.demo-status { position: absolute; inset-inline-start: 0; inset-block-start: 62px; z-index: 60; inline-size: 100%; block-size: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; line-height: 14px; white-space: nowrap; color: #fff; pointer-events: none; }
.demo-badge { flex: none; border-radius: 4px; padding: 0 4px; background: #182956; }
.demo-status [data-demo-once] { margin: 0; padding: 0 4px; border-radius: 4px; background: #182956; line-height: 14px; }

/* Enhanced calendar button; the form remains visible if showPicker is absent. */
.hero .date-picker.is-picker-enhanced { position: absolute; inset-block-start: calc(100% + 10px); inset-inline-end: 0; z-index: 2; padding: 0; min-block-size: 40px; }
.hero .date-picker.is-picker-enhanced #view-date { position: absolute; inline-size: 1px; block-size: 1px; min-block-size: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.hero .date-picker.is-picker-enhanced .date-picker-open { inline-size: 40px; block-size: 40px; }
@media(min-width:1000px) {
  .hero .date-picker.is-picker-enhanced { inset-block-start: calc(50% - 20px); inset-inline-end: -48px; }
}
@media(max-width:999px) {
  .topbar .icon-button,.topbar .avatar { inline-size: 44px; block-size: 44px; min-block-size: 44px; }
  .topbar .preference-control select { block-size: 44px; }
  .topbar .appearance-control select { inline-size: 44px; }
  .topbar .appearance-icon { inset: 13px; }
  .segmented button { min-block-size: 44px; }
  .task-search .icon-button { inline-size: 44px; block-size: 44px; }
  .row-edit { inline-size: 44px; }
  .hero .date-picker.is-picker-enhanced,.hero .date-picker.is-picker-enhanced .date-picker-open { min-block-size: 44px; inline-size: 44px; block-size: 44px; }
  .demo-status { inset-block-start: 58px; }
}
@media(max-width:359px) {
  .face { inline-size: 58%; }
  .topbar-actions,.topbar .preferences { gap: 4px; }
  .topbar { gap: 8px; }
}
@media(hover:hover) and (pointer:fine) {
  .row-edit { opacity: 0; transition: opacity 160ms var(--ease-out); }
  .task-row:hover .row-edit, .task-row:focus-within .row-edit { opacity: 1; }
  .task-row:hover { background: var(--field); border-radius: 16px; }
}
@media(max-width:720px) {
  .sheet { padding: 20px; }
  .sheet-head { gap: 12px; margin-block-end: 14px; }
  .sheet-head h2 { font-size: 21px; }
  .sheet-head .button { font-size: 15px; padding-inline: 12px; }
  .task-toolbar { flex-wrap: wrap; gap: 10px; }
  .task-search { flex-basis: 100%; }
  .segmented { flex: 1; }
  .segmented button { flex: 1; }
  .sheet-head .button { inline-size:126px; }
  .task-row { gap: 8px; }
  .task-meta { font-size: 13px; gap: 7px; }
  .row-edit { inline-size: 44px; }
  .task-priority.high { align-self: flex-start; margin-block-start: 10px; }
  .task-priority.high>span { display: none; }

  .field input, .field select, .field textarea, .date-picker input, .task-search input { font-size: 16px; }
}
@media(prefers-reduced-transparency:reduce) {
  .sheet { background: var(--sheet-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Immediate feedback is provisional; counts and ordering still come from Django. */
.task-row { --check-time: 220ms; --check-delay: 70ms; }
.task-check::after { transition: transform var(--check-time) var(--spring), opacity var(--check-time) var(--ease-out); }
.task-check path { transition: stroke-dashoffset var(--check-time) var(--ease-out) var(--check-delay); }
.task-content h3, .is-complete .task-content h3 { text-decoration: none; }
.task-content h3 bdi { text-decoration-thickness: 1px; text-decoration-skip-ink: none; }
.is-complete .task-content h3 bdi, [data-pending-completed=true] .task-content h3 bdi { text-decoration-line: line-through; }
[data-pending-completed=true] .task-check::after { opacity: 1; transform: scale(1); }
[data-pending-completed=true] .task-check path { stroke-dashoffset: 0; }
[data-pending-completed=false] .task-check::after { opacity: 0; transform: scale(.45); }
[data-pending-completed=false] .task-check path { stroke-dashoffset: 1; }
[data-pending-completed=false] .task-content h3 bdi { text-decoration-line: none; }
.is-reversing { --check-time: 200ms; --check-delay: 0ms; }
#ring .arc { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 720ms var(--ease-drawer), opacity 200ms, filter 200ms; }
#ring .arc.on { stroke-dashoffset: 0; opacity: 1; }
#ring .arc.is-reversing { transition-duration: 200ms; }
.prayer-mark { position: relative; }
.prayer-mark::before { content: ''; position: absolute; inset: -1px; border-radius: 50%; background: var(--ring-fill); transform: scale(.45); opacity: 0; transition: transform 220ms var(--spring), opacity 220ms var(--ease-out); }
.hero .prayer-mark svg { position: relative; z-index: 1; }
.hero .is-complete .prayer-mark {
  background: transparent;
}
.hero .is-complete .prayer-mark::before, .hero [data-pending-completed=true] .prayer-mark::before { opacity: 1; transform: scale(1); }
.hero [data-pending-completed=false] .prayer-mark::before { opacity: 0; transform: scale(.45); }
.prayer-mark path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 220ms var(--ease-out) 70ms; }
.hero .is-complete .prayer-mark path, .hero [data-pending-completed=true] .prayer-mark path { stroke-dashoffset: 0; }
.hero [data-pending-completed=true] .prayer-mark { background: transparent; border-color: var(--ring-fill); color: var(--thumb-ink); }
.hero [data-pending-completed=false] .prayer-mark { background: transparent; color: transparent; box-shadow: none; border-color: rgba(255,255,255,.62); }
.hero [data-pending-completed=false] .prayer-mark path { stroke-dashoffset: 1; }
.hero .is-reversing .prayer-mark::before, .hero .is-reversing .prayer-mark path { transition-duration: 200ms; transition-delay: 0ms; }
#ring .sweep { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: .055 .945; pointer-events: none; filter: drop-shadow(0 0 8px #fff); }

/* Modal surfaces keep native focus containment and progressive form fallback. */
.editor-dialog, .about-dialog { background: var(--sheet-solid); border: 0; box-shadow: var(--sheet-shadow), inset 0 0 0 .5px var(--sheet-edge); }
.editor-dialog .form-actions { background: transparent; position: static; }
dialog[open]::backdrop { background: rgba(8,14,52,.58); animation: backdrop-in 300ms var(--ease-out) both; }
dialog.is-closing::backdrop { animation: backdrop-out 170ms var(--ease-out) both; }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@media(max-width:720px) {
  .editor-dialog, .about-dialog { position: fixed; inset: auto 0 0; margin: 0; inline-size: 100%; max-inline-size: none; max-block-size: calc(100dvh - 16px); border-radius: 28px 28px 0 0; padding: 18px 20px calc(22px + env(safe-area-inset-bottom)); }
  .sheet-handle { display: block; position: relative; inline-size: 80px; block-size: 44px; margin: -14px auto -4px; background: none; border: 0; border-radius: 0; touch-action: none; cursor: grab; }
  .sheet-handle::after { content: ''; position: absolute; inline-size: 36px; block-size: 4px; top: 16px; left: 22px; border-radius: 999px; background: var(--control-border); }
  .sheet-handle:active { cursor: grabbing; }
  dialog[open]::backdrop { animation-duration: 440ms; }
  dialog.is-closing::backdrop { animation-duration: 260ms; }
  .editor-dialog .form-actions { bottom: calc(-22px - env(safe-area-inset-bottom)); padding-block-end: env(safe-area-inset-bottom); }
}
html[data-input=keyboard] dialog::backdrop { animation: none !important; }
@media(prefers-reduced-motion:reduce) { dialog::backdrop { animation: none !important; } }
@media(prefers-reduced-transparency:reduce) {
  .editor-dialog, .about-dialog { background: var(--sheet-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Final responsive details and progressive motion. */
body { min-block-size: 100dvh; }
.pointer-light { transition: opacity 300ms var(--ease-out); }
.hero .calendar-strip { align-items: center; }
.hero .week { flex: 1 1 100%; inline-size: 100%; max-inline-size: 520px; }
.hero .date-picker { flex: 0 0 auto; }

button, a.button, .icon-button { transition: transform 160ms var(--ease-out); }
@media(prefers-reduced-motion:no-preference) {
  html:not([data-input=keyboard]) button:not(:disabled):active,
  html:not([data-input=keyboard]) a.button:active,
  html:not([data-input=keyboard]) .icon-button:not(:disabled):active { transform: scale(.97); }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: var(--ease-out); }