/* Only the phone refinements requested after hands-on Android testing. */
html[data-theme=night] .native-app::before{background:#15191c}
.date-return-slot{min-height:44px;display:flex;align-items:center;justify-content:center}
[data-screen=reminders] .reminder-row-chevron{transform:none}
[dir=rtl] [data-screen=reminders] .reminder-row-chevron{transform:rotate(180deg)}
@media(min-width:721px){body:not(.native-app) #todayView .date-return-slot{grid-column:1;grid-row:3}}
@media(max-width:720px){
  .mobile-nav button:last-child{white-space:nowrap;overflow-wrap:normal}
  #todayView .date-return-slot{margin-top:-14px}
  #qiblaView{padding-top:12px}
  #qiblaView .page-heading .eyebrow,#qiblaView .page-heading h1>span{display:none}
  #qiblaView .page-heading h1{font:normal 1.8rem/1.2 Georgia,serif;margin:0 0 4px}
}

/* Requested logo and toast refinements; Today stays unchanged. */
@media(max-width:720px){
  .top-wordmark{text-decoration:none}
  .toast{display:flex;flex-direction:column;align-items:stretch;gap:12px;width:min(580px,calc(100vw - 32px));max-width:calc(100vw - 32px);min-width:0;text-align:start;line-height:1.5}
  .toast>div{flex:none;min-width:0;overflow-wrap:anywhere}
  .toast>button{align-self:flex-end}
  .toast{bottom:calc(80px + var(--app-safe-bottom,env(safe-area-inset-bottom,0px)));max-height:calc(100dvh - 180px - var(--app-safe-bottom,0px));overflow-y:auto}
}
@media(min-width:721px){
  body.native-app .top-wordmark{text-decoration:none}
  body.native-app .toast{display:flex;flex-direction:column;align-items:stretch;gap:12px;width:min(580px,calc(100vw - 32px));max-width:calc(100vw - 32px);min-width:0;text-align:start;line-height:1.5}
  body.native-app .toast>div{flex:none;min-width:0;overflow-wrap:anywhere}
  body.native-app .toast>button{align-self:flex-end}
}

/* Settings controls for adjusting the shared prayer timetable. */
.prayer-adjustment{min-width:0;margin:18px 0;padding:14px;border:1px solid var(--border);border-radius:9px}
.prayer-adjustment legend{padding-inline:6px;font-size:1rem;font-weight:600}
.prayer-adjustment-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.prayer-adjustment-fields .field{min-width:0;margin:0}.prayer-adjustment-fields .field:first-child{grid-column:1/-1}
.prayer-adjustment-fields input,.prayer-adjustment-fields select{min-width:0;width:100%}
.prayer-adjustment-preview{font-size:.8125rem;line-height:1.7;overflow-wrap:anywhere;margin:12px 0 0}

/* Prayer notifications: the Reminders list and its focused pages (a prayer or day, a stage, its sound). */
#followupPending{margin-top:16px}
#followupPending .reminder-pending-card+.reminder-pending-card{margin-top:8px}
.reminder-pending-card{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;border:1px solid #e6d3a3;border-radius:16px;background:#fbf5e6;color:#3f3317}
.reminder-pending-card>span{flex:1;min-width:0}
.reminder-pending-card strong{display:block;font:700 .9375rem/1.35 Manrope,var(--sans)}
.reminder-pending-card small{display:block;margin-top:2px;font:500 .8125rem/1.4 Manrope,var(--sans);color:#5c4b22}
.reminder-pending-card .button{flex:none;min-height:44px;gap:6px;padding:0 16px 0 12px;border-radius:22px;font:700 .875rem Manrope,var(--sans)}
.reminder-pending-card .button svg{width:18px;height:18px}
#followupPending+.reminder-list{margin-top:16px}
[data-screen=reminders] .reminder-row{display:flex;align-items:center;gap:12px;min-height:60px;padding:9px 12px 9px 16px}
[data-screen=reminders] .reminder-row-name{flex:none;width:5rem;flex-direction:column;align-items:stretch;gap:0}
[data-screen=reminders] .reminder-row-name strong{font-size:1.0625rem;line-height:1.3}
[data-screen=reminders] .reminder-row-name span{font-size:.875rem;line-height:1.3;font-variant-numeric:tabular-nums}
[data-screen=reminders] .reminder-row-summary{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:.875rem;color:var(--today-text)}
.reminder-row-mode{display:flex;align-items:center;gap:7px;font:700 .9375rem/1.3 Manrope,var(--sans);color:var(--green)}
.reminder-row-mode svg{flex:none;width:18px;height:18px}
.reminder-row-extras{font:500 .78rem/1.35 Manrope,var(--sans);color:var(--today-muted);overflow-wrap:anywhere}
.reminder-row.is-off .reminder-row-mode{color:var(--today-muted);font-weight:600}
.reminder-row.is-idle .reminder-row-summary{opacity:.55}
[data-screen=reminders] .reminder-row-chevron{flex:none}
.reminder-extras .link-row>.reminder-pill{flex:none}
@media(max-width:720px){
  [data-screen=reminders] .reminder-extras{border-radius:16px}
  [data-screen=reminders] .reminder-extras .settings-row-label{font:600 .9375rem/1.3 Manrope,var(--sans)}
  [data-screen=reminders] .reminder-extras .settings-row-label small{font:500 .8125rem/1.35 Manrope,var(--sans)}
}
.reminder-pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:var(--today-next-bg);color:var(--green);font:700 .75rem/1.3 Manrope,var(--sans)}
.reminder-pill[data-state=check]{background:#fbf5e6;color:#6d5a2e}
.reminder-delivery{max-width:580px}

/* A focused page is a column of blocks; groups get their dividers only between rows. */
.reminder-focused-page{display:grid;gap:22px;align-content:start;max-width:580px;color:var(--today-text);font-family:Manrope,var(--sans)}
.reminder-focused-page>*{min-width:0}
.reminder-page-context,.reminder-scope-help{margin:0;font:400 .875rem/1.6 Manrope,var(--sans);color:var(--today-muted)}
.reminder-page-context{margin-top:-10px}
.reminder-block-title{margin:0 0 8px 4px;padding:0;font:700 .875rem/1.4 Manrope,var(--sans);color:var(--today-muted)}
.reminder-block-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 4px 8px}
.reminder-block-head .reminder-block-title{margin:0}
.reminder-block-note{font:500 .8125rem/1.4 Manrope,var(--sans);color:var(--today-muted);text-align:end}
.reminder-fieldset{min-width:0;margin:0;padding:0;border:0}
.reminder-group{overflow:hidden;border:1px solid var(--today-rule);border-radius:16px;background:var(--today-surface)}
.reminder-group>*+*{border-top:1px solid var(--today-rule)}
.reminder-modes{display:grid;gap:8px}
.reminder-mode{position:relative;display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 16px;border:1px solid var(--today-rule);border-radius:14px;background:var(--today-surface);cursor:pointer}
.reminder-mode-input{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.reminder-mode-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--today-next-bg);color:var(--green)}
.reminder-mode-icon svg{width:20px;height:20px}
.reminder-mode-text{flex:1;min-width:0}
.reminder-mode-text strong{display:block;font:700 1rem/1.3 Manrope,var(--sans)}
.reminder-mode-text small{display:block;margin-top:2px;font:500 .8125rem/1.35 Manrope,var(--sans);color:var(--today-muted)}
.reminder-mode-check{display:grid;place-items:center;flex:none;width:24px;height:24px;border:2px solid #7d8e78;border-radius:50%}
.reminder-mode-check svg{width:14px;height:14px;stroke-width:2.6;opacity:0}
.reminder-mode-input:checked~.reminder-mode-check svg{opacity:1}
.reminder-mode:has(.reminder-mode-input:checked){border-color:var(--green);background:var(--today-next-bg);box-shadow:inset 0 0 0 1px var(--green)}
.reminder-mode-input:checked~.reminder-mode-icon{background:var(--green);color:#fff}
.reminder-mode-input:checked~.reminder-mode-check{border-color:var(--green);background:var(--green);color:#fff}
.reminder-mode:has(.reminder-mode-input:focus-visible),.reminder-chip:has(input:focus-visible),.reminder-segment:has(input:focus-visible),.reminder-sound-option:has(input:focus-visible){outline:3px solid var(--green);outline-offset:2px}
.reminder-row-link,.reminder-more-link,.reminder-switch-label,.reminder-day,.reminder-copy-button,.reminder-play,.reminder-test{font-family:Manrope,var(--sans);color:var(--today-text);cursor:pointer}
.reminder-row-link{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 14px 8px 16px;border:1px solid var(--today-rule);border-radius:14px;background:var(--today-surface);text-align:start}
.reminder-modes+.reminder-row-link{margin-top:8px}
.reminder-row-link>span:first-child,.reminder-switch-label>span:first-child{flex:1;min-width:0}
.reminder-row-link strong,.reminder-switch-label strong{display:block;font:600 .9375rem/1.3 Manrope,var(--sans)}
.reminder-row-link small,.reminder-switch-label small,.reminder-volume-row small{display:block;margin-top:2px;font:500 .8125rem/1.35 Manrope,var(--sans);color:var(--today-muted);overflow-wrap:anywhere}
.reminder-row-link>svg,.reminder-switch-label>svg{flex:none;width:18px;height:18px;color:var(--today-muted)}
.reminder-more-link{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;justify-self:start;padding:4px;border:0;border-radius:8px;background:transparent;color:var(--green);text-align:start}
.reminder-more-head{display:inline-flex;align-items:center;gap:6px;font:700 .9375rem/1.3 Manrope,var(--sans)}
.reminder-more-head svg{width:16px;height:16px;transform:rotate(90deg)}
.reminder-more-link small{font:500 .8125rem/1.35 Manrope,var(--sans);color:var(--today-muted);overflow-wrap:anywhere}
.reminder-more-link[aria-expanded=true]{justify-self:center;padding-inline:14px}
.reminder-more-link[aria-expanded=true] svg{transform:rotate(-90deg)}
.reminder-switch-row{display:flex;align-items:center}
.reminder-switch-label{flex:1;min-width:0;display:flex;align-items:center;gap:8px;min-height:60px;padding:8px 10px 8px 16px;border:0;background:transparent;text-align:start}
.reminder-switch-divider{flex:none;width:1px;height:32px;background:var(--today-rule)}
.reminder-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:8px 8px 8px 16px;border:1px solid var(--today-rule);border-radius:16px;background:var(--today-surface);font:700 1rem/1.35 Manrope,var(--sans);cursor:pointer}
.reminder-banner:has(input:checked){border-color:#b9cdb4;background:var(--today-next-bg)}
.reminder-focused-page input[role=switch]{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:52px;height:44px;margin:0;border:0;border-radius:12px;background:transparent;cursor:pointer}
.reminder-focused-page input[role=switch]::before{content:"";position:absolute;inset:9px 4px;border-radius:13px;background:#7d8e78}
.reminder-focused-page input[role=switch]::after{content:"";position:absolute;top:12px;inset-inline-start:7px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0004;transition:inset-inline-start .15s}
.reminder-focused-page input[role=switch]:checked::before{background:var(--green)}
.reminder-focused-page input[role=switch]:checked::after{inset-inline-start:25px}
.reminder-focused-page input[role=switch]:focus-visible{outline:3px solid var(--green);outline-offset:1px}
.reminder-focused-page .reminder-switch-row>input[role=switch]{margin-inline:6px 10px}
.reminder-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding:4px 2px;border:1px solid var(--today-rule);border-radius:16px;background:var(--today-surface)}
.reminder-day{position:relative;display:grid;place-items:center;min-width:0;min-height:48px;margin:2px;padding:0;border:1px solid transparent;border-radius:24px;background:transparent;font-weight:700;font-size:.875rem;line-height:1}
.reminder-day-dot{position:absolute;bottom:8px;inset-inline-start:calc(50% - 2.5px);width:5px;height:5px;border-radius:50%;background:transparent}
.reminder-day.custom{border-color:var(--green);background:var(--today-next-bg)}
.reminder-day.custom .reminder-day-dot{background:var(--green)}
.reminder-copy-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;border:1px solid #b9cdb4;border-radius:14px;background:var(--today-surface);color:var(--green);font-weight:700;font-size:.9375rem}
.reminder-copy-button svg{width:20px;height:20px}
.reminder-copy-confirm{display:grid;gap:14px;padding:18px 16px;border:1px solid var(--today-rule);border-radius:16px;background:var(--today-surface)}
.reminder-copy-confirm h2{margin:0;font:400 1.375rem/1.25 Georgia,serif;color:var(--today-text)}
.reminder-copy-confirm h2:focus{outline:none}
.reminder-copy-confirm ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.reminder-copy-confirm li{display:flex;align-items:center;gap:10px;font:600 .9375rem/1.35 Manrope,var(--sans)}
.reminder-check-dot{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--today-next-bg);color:var(--green)}
.reminder-check-dot svg{width:14px;height:14px;stroke-width:2.6}
.reminder-copy-confirm p{margin:0;font:500 .8125rem/1.5 Manrope,var(--sans);color:var(--today-muted)}
.reminder-copy-actions{display:grid;gap:8px;margin-top:2px}
.reminder-wide{width:100%;min-height:52px;border-radius:14px;font:700 1rem Manrope,var(--sans)}
.reminder-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.reminder-chips-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.reminder-chip{position:relative;display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 4px;border:1px solid var(--today-rule);border-radius:12px;background:var(--today-surface);font:700 .9375rem/1.2 Manrope,var(--sans);text-align:center;overflow-wrap:anywhere;cursor:pointer}
.reminder-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.reminder-chip:has(input:checked){border-color:var(--green);background:var(--green);color:#fff}
.reminder-nudge-card{padding:16px 10px 14px;border:1px solid var(--today-rule);border-radius:16px;background:var(--today-surface)}
.reminder-nudge-steps{position:relative;display:flex;margin:0;padding:0;list-style:none}
.reminder-nudge-steps::before{content:"";position:absolute;inset-inline:10%;top:8px;height:2px;background:var(--today-rule)}
.reminder-nudge-steps li{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.reminder-nudge-steps strong{font:700 .78rem/1.2 Manrope,var(--sans);font-variant-numeric:tabular-nums}
.reminder-nudge-steps li>span:not(.reminder-step-dot){font:500 .72rem/1.2 Manrope,var(--sans);color:var(--today-muted);overflow-wrap:anywhere}
.reminder-step-dot{display:grid;place-items:center;flex:none;width:18px;height:18px;border:2px solid var(--green);border-radius:50%;background:var(--today-surface);color:#fff}
.reminder-nudge-steps li:first-child .reminder-step-dot{background:var(--green)}
.reminder-nudge-end .reminder-step-dot{border-color:#8a6a24;background:#8a6a24}
.reminder-step-dot svg{width:11px;height:11px;stroke-width:3}
.reminder-nudge-card p{margin:14px 6px 0;font:500 .84rem/1.5 Manrope,var(--sans);color:var(--today-text)}
.reminder-nudge-block{display:grid;gap:10px}
.reminder-nudge-block>.reminder-note{margin-inline:6px}
.reminder-sound-row{display:flex;align-items:center}
.reminder-sound-option{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:14px;min-height:56px;padding:6px 8px 6px 16px;font:600 .9375rem/1.3 Manrope,var(--sans);cursor:pointer}
.reminder-sound-option input{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.reminder-sound-option:has(input:focus-visible){outline-offset:-3px}
.reminder-radio{display:grid;place-items:center;flex:none;width:22px;height:22px;border:2px solid var(--today-muted);border-radius:50%}
.reminder-radio::after{content:"";width:10px;height:10px;border-radius:50%}
.reminder-sound-option input:checked~.reminder-radio{border-color:var(--green)}
.reminder-sound-option input:checked~.reminder-radio::after{background:var(--green)}
.reminder-play{display:grid;place-items:center;flex:none;width:44px;height:44px;margin-inline-end:10px;padding:0;border:1px solid #b9cdb4;border-radius:50%;background:var(--today-surface);color:var(--green)}
.reminder-play svg{width:18px;height:18px;fill:currentColor}
.reminder-play.playing{border-color:var(--green);background:var(--green);color:#fff}
.reminder-play[aria-busy=true]{opacity:.7}
.reminder-volume-row{display:flex;align-items:center;gap:12px;min-height:58px;padding:8px 8px 8px 16px;cursor:pointer}
.reminder-volume-row>span{flex:1;min-width:0}
.reminder-volume-row strong{display:block;font:600 .9375rem/1.3 Manrope,var(--sans)}
.reminder-slider{display:flex;align-items:center;gap:12px;padding:0 16px 12px;color:var(--green)}
.reminder-slider svg{flex:none;width:20px;height:20px}
.reminder-slider input[type=range]{flex:1;min-width:0;height:44px;margin:0;background:transparent;accent-color:var(--green)}
.reminder-slider output{min-width:3rem;text-align:end;font:700 .875rem Manrope,var(--sans);font-variant-numeric:tabular-nums;color:var(--today-text)}
.reminder-vibration{display:flex;align-items:center;gap:10px}
.reminder-segments{flex:1;min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:3px;border-radius:14px;background:var(--today-rule)}
.reminder-segment{position:relative;display:grid;place-items:center;min-height:44px;border-radius:11px;font:500 .875rem/1.2 Manrope,var(--sans);color:var(--today-muted);text-align:center;cursor:pointer}
.reminder-segment input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.reminder-persistent-vibration{grid-column:1/-1}
.reminder-vibration+.reminder-block-note{text-align:start}
.reminder-segment:has(input:checked){background:var(--today-surface);box-shadow:0 1px 3px #10201830;color:var(--today-text);font-weight:700}
.reminder-test{display:grid;place-items:center;flex:none;width:50px;height:50px;padding:0;border:1px solid #b9cdb4;border-radius:14px;background:var(--today-surface);color:var(--green)}
.reminder-test svg{width:22px;height:22px}
[data-screen=adhan-player] #adhanPlayerTitle{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
[dir=rtl] :is(.reminder-row-link,.reminder-switch-label)>svg:last-child{transform:rotate(180deg)}

/* Focused pages on phones: no header or tab bar, only the circular Back; the native app keeps room for its status bar. */
@media(max-width:720px){
  body[data-focused] :is(.topbar,.mobile-nav){display:none!important}
  body[data-focused] #screenView.page-wrap{padding-top:calc(18px + var(--app-safe-top,0px));padding-bottom:calc(32px + var(--app-safe-bottom,0px))}
}

/* Night: the older night rules paint every border and text, so the selected and accent states say so again. */
html[data-theme=night] #screenBody :is(.reminder-mode:has(.reminder-mode-input:checked),.reminder-day.custom,.reminder-banner:has(input:checked),.reminder-sound-option input:checked~.reminder-radio,.reminder-play.playing,.reminder-chip:has(input:checked)){border-color:var(--n-accent)!important}
html[data-theme=night] #screenBody .reminder-mode:has(.reminder-mode-input:checked){box-shadow:inset 0 0 0 1px var(--n-accent)}
html[data-theme=night] #screenBody .reminder-mode-check{border-color:#8b979c!important}
html[data-theme=night] #screenBody .reminder-mode-input:checked~.reminder-mode-check{border-color:var(--n-button)!important}
html[data-theme=night] #screenBody :is(.reminder-mode-icon,.reminder-more-link,.reminder-more-link *,.reminder-row-mode,.reminder-copy-button,.reminder-play,.reminder-test,.reminder-slider,.reminder-pill,.reminder-check-dot,.reminder-day.custom){color:var(--n-accent)!important}
html[data-theme=night] #screenBody :is(.reminder-more-link small,.reminder-mode-text small,.reminder-block-note,.reminder-block-title,.reminder-page-context,.reminder-scope-help,.reminder-nudge-steps li>span:not(.reminder-step-dot),.reminder-segment,.reminder-row-extras,.reminder-row.is-off .reminder-row-mode,.reminder-row-link small,.reminder-switch-label small,.reminder-volume-row small){color:var(--n-muted)!important}
html[data-theme=night] #screenBody .reminder-segment:has(input:checked){color:var(--n-text)!important;background:var(--n-surface-2)}
html[data-theme=night] #screenBody :is(.reminder-mode-input:checked~.reminder-mode-icon,.reminder-chip:has(input:checked),.reminder-play.playing,.reminder-mode-input:checked~.reminder-mode-check){background:var(--n-button);color:#fff!important}
html[data-theme=night] #screenBody .reminder-sound-option input:checked~.reminder-radio::after{background:var(--n-accent)}
html[data-theme=night] #screenBody .reminder-day:not(.custom){border-color:transparent!important}
html[data-theme=night] #screenBody .reminder-day.custom .reminder-day-dot{background:var(--n-accent)}
html[data-theme=night] #screenBody :is(input[role=switch],input[type=range]){background:transparent!important}
html[data-theme=night] #screenBody input[role=switch]::before{background:#6c7a80}
html[data-theme=night] #screenBody input[role=switch]:checked::before{background:var(--n-button)}
html[data-theme=night] #screenBody .reminder-focused-page input[role=switch]:focus-visible{outline-color:var(--n-accent)}
html[data-theme=night] #screenBody :is(.reminder-mode:has(.reminder-mode-input:focus-visible),.reminder-chip:has(input:focus-visible),.reminder-segment:has(input:focus-visible),.reminder-sound-option:has(input:focus-visible)){outline-color:var(--n-accent)}
html[data-theme=night] #screenBody .reminder-radio{border-color:var(--n-muted)!important}
html[data-theme=night] #screenBody .reminder-nudge-end .reminder-step-dot{border-color:#b08a3a!important;background:#8a6a24}
html[data-theme=night] #screenBody .reminder-step-dot{background:var(--n-surface)}
html[data-theme=night] #screenBody .reminder-nudge-steps li:first-child .reminder-step-dot{background:var(--n-accent)}
html[data-theme=night] #screenBody .reminder-nudge-end .reminder-step-dot{background:#8a6a24}
html[data-theme=night] .reminder-pending-card,html[data-theme=night] #screenBody .reminder-pill[data-state=check]{background:#2a2414;border-color:#5b4b22!important}
html[data-theme=night] #screenBody :is(.reminder-pending-card,.reminder-pending-card *,.reminder-pill[data-state=check]){color:#ead7a2!important}
html[data-theme=night] #screenBody .reminder-pending-card .button{background:var(--n-button);color:#fff!important}
html[data-theme=night] #screenBody .reminder-pending-card .button *{color:#fff!important}

@media(forced-colors:active){
  .reminder-mode:has(.reminder-mode-input:checked),.reminder-day.custom{border-color:Highlight;box-shadow:inset 0 0 0 1px Highlight}
  .reminder-chip:has(input:checked),.reminder-segment:has(input:checked){outline:2px solid Highlight;outline-offset:-3px}
  .reminder-sound-option input:checked~.reminder-radio::after{background:Highlight}
  .reminder-focused-page input[role=switch]::before{border:1px solid ButtonText;background:Canvas}
  .reminder-focused-page input[role=switch]:checked::before{background:Highlight}
  .reminder-focused-page input[role=switch]::after{background:ButtonText}
}
@media(prefers-reduced-motion:reduce){.reminder-focused-page input[role=switch]::after{transition:none}}

/* ==== 22 October screens redesign (approved on the screens review canvas). Each workstream keeps to its own section. ==== */
/* Phone focused pages: every button is 12px round and 48px high (the older .button was 6px and 46px; the delivery button 14px and 52px). */
@media(max-width:720px){body[data-focused] #screenBody .button{min-height:48px;border-radius:12px}}
/* ---- A: notifications, adhan player, permissions & delivery ---- */
/* Small print, and the rows of the adhan player and Permissions & delivery pages: a name, a status line, then an action or an icon. */
.reminder-note{margin:0;font:500 .8125rem/1.5 Manrope,var(--sans);color:var(--today-muted)}
.player-footnote{margin-inline:4px}
.player-notice{margin:0}
.player-field{display:grid;gap:10px;padding:12px 16px 14px}
.player-field>strong{font:600 .9375rem/1.3 Manrope,var(--sans)}
/* Five chips on one line while they fit; larger text wraps them to a second line, never in the middle of a word. */
.reminder-chips-5{grid-template-columns:repeat(auto-fit,minmax(3.5rem,1fr));gap:6px}
.reminder-chips-5 .reminder-chip{padding:0 2px;font-size:.8125rem;overflow-wrap:normal}
.player-buttons{display:flex;gap:8px}
.player-buttons .button{flex:1 1 0;min-width:0;min-height:48px;padding:0 10px;gap:6px;border-radius:12px;font:700 .875rem/1.25 Manrope,var(--sans);text-align:center}
.player-buttons .button:first-child{flex:0 1 auto;min-width:108px}
.player-buttons .button svg{flex:none;width:18px;height:18px}
.reminder-volume-row .player-status{display:flex;align-items:center;gap:6px}
.status-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#2f7d4f}
.status-dot.problem{background:#9a3d12}
.delivery-summary{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid #b9cdb4;border-radius:16px;background:var(--today-next-bg)}
.delivery-summary.check{border-color:#e6d3a3;background:#fbf5e6}
.delivery-badge{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--green);color:#fff;font:800 1.25rem/1 Manrope,var(--sans)}
.delivery-badge svg{width:22px;height:22px;stroke-width:2.6}
.delivery-summary.check .delivery-badge{background:#d4bc88;color:#3b2f12}
.delivery-summary>div{flex:1;min-width:0}
.delivery-summary strong{display:block;font:600 1rem/1.3 Manrope,var(--sans)}
.delivery-summary>div>span{display:block;margin-top:2px;font:500 .8125rem/1.4 Manrope,var(--sans);color:var(--today-muted)}
.delivery-summary.check>div>span{color:#5c4b22}
.delivery-row{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding-block:12px;padding-inline:16px 14px;border:0;background:transparent;color:inherit;font-family:Manrope,var(--sans);text-align:start}
button.delivery-row{cursor:pointer}
button.delivery-row>svg{flex:none;width:18px;height:18px;color:var(--today-muted)}
.delivery-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.delivery-text strong{font:600 .9375rem/1.3 Manrope,var(--sans)}
.delivery-status{font:600 .8125rem/1.35 Manrope,var(--sans);color:var(--today-muted)}
.delivery-status[data-tone=good]{color:#25673f}
.delivery-status[data-tone=problem]{color:#9a3d12}
.delivery-text small{font:500 .8125rem/1.35 Manrope,var(--sans);color:var(--today-muted);overflow-wrap:anywhere}
.delivery-action{flex:none;min-height:44px;padding:0 18px;border-radius:12px;font:700 .875rem Manrope,var(--sans)}
.delivery-icon{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:#e8f0e6;color:#2f7d4f}
.delivery-icon svg{width:16px;height:16px;stroke-width:2.6}
.delivery-test{display:grid;gap:10px}
/* Schedule check and Recent alerts (Android): the same rows as the checklist; the headings keep their inset on the start side in right-to-left text. */
.delivery-page .reminder-block-title{margin:0 0 8px;padding-inline:4px}
.delivery-test .reminder-wide{min-height:48px}
.delivery-test .reminder-note{margin-inline:4px}
.reminder-test-progress .problem{background:#9a3d12}
[dir=rtl] button.delivery-row>svg:last-child{transform:rotate(180deg)}
html[data-theme=night] #screenBody :is(.reminder-note,.delivery-text small,.delivery-summary>div>span,.delivery-status[data-tone=quiet]){color:var(--n-muted)!important}
html[data-theme=night] #screenBody .delivery-status[data-tone=good]{color:#8fd0a8!important}
html[data-theme=night] #screenBody .delivery-status[data-tone=problem]{color:#f0a27a!important}
html[data-theme=night] #screenBody .delivery-summary{background:#26312d}
html[data-theme=night] #screenBody .delivery-summary.check{background:#2a2414;border-color:#5b4b22!important}
html[data-theme=night] #screenBody .delivery-summary.check :is(strong,.delivery-badge,div>span){color:#ead7a2!important}
html[data-theme=night] #screenBody .delivery-summary .delivery-badge{background:var(--n-button);color:#fff!important}
html[data-theme=night] #screenBody .delivery-summary.check .delivery-badge{background:#8a6a24;color:#fff!important}
html[data-theme=night] #screenBody .delivery-icon{background:#26312d;color:var(--n-accent)!important}
html[data-theme=night] #screenBody .status-dot{background:#8fd0a8}
html[data-theme=night] #screenBody .status-dot.problem{background:#f0a27a}
html[data-theme=night] #screenBody .reminder-test-progress .problem{background:#d98a5f}
html[data-theme=night] #screenBody .player-buttons .button svg{color:inherit}
@media(forced-colors:active){
  .status-dot{border:2px solid CanvasText}
  .delivery-summary,.delivery-icon,.delivery-badge{border:1px solid CanvasText}
  .reminder-test-progress .problem{outline:2px solid CanvasText;outline-offset:-1px}
}
/* ---- end A ---- */

/* ---- B: widgets page ---- */

/* ---- end B ---- */

/* ---- C1: Today, Calendar, Qibla, Tools ---- */
/* Today: the icon ending each row is that prayer's alert (adhan, bell, or a faint crossed bell). Past rows keep it at full
   strength. A notice above the timetable (--today-notices, measured in app.js) takes room from the rows, not from Isha. */
@media(max-width:720px){
  body #prayerCards .prayer-bell svg{color:inherit}
  body #prayerCards .prayer-time-card .prayer-bell.on{color:var(--green)!important}
  body #prayerCards .prayer-time-card .prayer-bell.alert-off{color:#848f87!important}
  body #todayView .today-grid{height:calc(100dvh - var(--today-header,69px) - var(--today-nav,61px) - var(--today-notices,0px) - var(--rhythm-gap)*2)}
  html[data-theme=night] body #prayerCards .prayer-time-card .prayer-bell.on{color:var(--n-accent)!important}
  html[data-theme=night] body #prayerCards .prayer-time-card .prayer-bell.alert-off{color:#8b979c!important}
  /* Night paints every element's colour, including the icon's path, so the icon's stroke is set outright. */
  html[data-theme=night] body #prayerCards .prayer-time-card .prayer-bell.on svg{stroke:var(--n-accent)}
  html[data-theme=night] body #prayerCards .prayer-time-card .prayer-bell.alert-off svg{stroke:#8b979c}
}

/* Calendar: a title row with a quiet Today chip, round month buttons around the month and its Hijri months, and a table
   with a date column and six equal time columns whose header stays put (below the status bar in the app). The table never
   scrolls sideways, because a scroll box would end the sticky header: its type size is the usual one, or smaller when the
   card is too narrow for seven columns at that size (a narrow phone, or enlarged text), and the date column and the
   table's spacing are in em so the whole table shrinks together. */
[data-screen=calendar] .screen-head{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0,0,0,0)}
.cal-titlebar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin:0 0 14px}
.cal-title{font:normal 1.65rem/1.2 Georgia,serif;color:var(--today-text)}
.cal-today{min-height:44px;padding:0 16px;border:1px solid #cfd8cc;border-radius:999px;background:var(--today-surface);color:var(--green);font:600 .875rem/1.2 Manrope,var(--sans);cursor:pointer}
.cal-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.cal-step{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--today-rule);border-radius:50%;background:var(--today-surface);color:var(--today-text);cursor:pointer}
.cal-step svg{width:20px;height:20px}
#previousMonth svg,[dir=rtl] #nextMonth svg{transform:scaleX(-1)}
[dir=rtl] #previousMonth svg{transform:none}
.cal-month{min-width:0;text-align:center}
.cal-month h2{margin:0;font:700 1.0625rem/1.3 Manrope,var(--sans);color:var(--today-text);overflow-wrap:anywhere}
.cal-month small{display:block;min-height:1.35em;font:500 .8125rem/1.35 Manrope,var(--sans);color:var(--today-muted)}
.cal-card{container:cal/inline-size;margin:0 0 14px;border:1px solid var(--today-rule);border-radius:16px;background:var(--today-surface);overflow:clip}
.cal-loading{margin:0;padding:22px 16px;text-align:center;font:500 .875rem/1.5 Manrope,var(--sans);color:var(--today-muted)}
.cal-table{--cal-f:min(.8125rem,3.93cqi);width:100%;border-collapse:collapse;table-layout:fixed;font:500 var(--cal-f)/1 Manrope,var(--sans);font-variant-numeric:tabular-nums;color:var(--today-text)}
.cal-date-col{width:4.46154em}
.cal-table :is(th,td){padding:0;text-align:center;vertical-align:middle}
.cal-table thead th{position:sticky;top:var(--app-safe-top,0px);z-index:2;height:36px;background:var(--today-surface);box-shadow:inset 0 -1px var(--today-rule);font:700 .6875rem/1 Manrope,var(--sans);font-size:min(.84616em,calc(((100cqi - 4.46154em)/6 - 3px)/4.15));letter-spacing:.2px;color:var(--today-muted);overflow:hidden}
/* Hausa's "Magariba" is the one heading that is wider than "Maghrib". */
:lang(ha) .cal-table thead th{font-size:min(.84616em,calc(((100cqi - 4.46154em)/6 - 3px)/4.75))}
.cal-table thead th:first-child,.cal-table tbody th{padding-inline-start:calc(var(--cal-f)*.92308);text-align:start}
.cal-table tbody tr{height:38px}
.cal-table tbody :is(th,td){border-top:1px solid var(--today-rule)}
.cal-table tbody tr:first-child :is(th,td){border-top:0}
.cal-table tbody th{font-weight:400}
.cal-date{display:flex;align-items:baseline;gap:calc(var(--cal-f)*.3077)}
.cal-date b{font:700 1.07693em/1.1 Manrope,var(--sans)}
.cal-date span{font:500 .84616em/1.1 Manrope,var(--sans);color:var(--today-muted)}
.cal-date .friday{font-weight:700;color:var(--green)}
.cal-hijri{display:block;margin-top:2px;font:600 .84616em/1.2 Manrope,var(--sans);color:#7a5c1a}
.cal-table tr.past :is(td,.cal-date b,.cal-date span:not(.friday)){color:var(--past-prayer,#6a746c)}
.cal-table tr.today{background:#e8f0e6;font-weight:700}
.cal-table tr.today .cal-date span:not(.friday){color:#4b5a4f}
.cal-table tbody tr.cal-note{height:30px;background:#fbf5e6}
.cal-table .cal-note td{font:600 .75rem/1.3 Manrope,var(--sans);color:#7a5c1a}
/* The note spans the table and wraps within it. */
.cal-table .cal-note td>span{display:block;padding-inline:12px}
.cal-links{margin:0}
#exportCalendar>svg{width:20px;height:20px;color:var(--green)}
#exportCalendar:disabled{opacity:.5;cursor:default}
@media(max-width:720px){.cal-table .period{display:none}}
@media(min-width:721px){.cal-title{font-size:2rem}}
html[data-theme=night] #screenBody .cal-title{color:var(--n-text)!important}
html[data-theme=night] #screenBody :is(.cal-month small,.cal-table thead th,.cal-date span,.cal-loading){color:var(--n-muted)!important}
html[data-theme=night] #screenBody :is(.cal-today,.cal-date .friday,#exportCalendar>svg){color:var(--n-accent)!important}
html[data-theme=night] #screenBody #exportCalendar>svg{stroke:var(--n-accent)}
html[data-theme=night] #screenBody :is(.cal-hijri,.cal-table .cal-note td){color:#d7be81!important}
html[data-theme=night] #screenBody .cal-table tr.past :is(td,.cal-date b,.cal-date span:not(.friday)){color:#929ea2!important}
html[data-theme=night] #screenBody .cal-table tr.today{background:#2b3b34}
html[data-theme=night] #screenBody .cal-table tr.today :is(td,th,.cal-date b){color:#fff!important}
html[data-theme=night] #screenBody .cal-table tr.today .cal-date span:not(.friday){color:var(--n-muted)!important}
html[data-theme=night] #screenBody .cal-table tbody tr.cal-note{background:#2a2414}
html[data-theme=night] #screenBody :is(.cal-table tbody :is(th,td),.cal-table tbody tr.cal-note td){border-color:var(--n-border)!important}
html[data-theme=night] #screenBody .cal-table thead th{box-shadow:inset 0 -1px var(--n-border)}
@media(forced-colors:active){.cal-table tr.today{outline:2px solid Highlight;outline-offset:-2px}.cal-table thead th{box-shadow:inset 0 -1px CanvasText}}

/* Qibla: what to do next in one pill, the compass, two numbers, then the tick switch and help. */
.qibla-layout{display:grid;max-width:580px;margin:0 auto}
.qibla-pill-row{display:flex;justify-content:center}
.qibla-pill{display:inline-flex;align-items:center;gap:8px;min-height:36px;max-width:100%;margin:0;padding:6px 16px 6px 12px;border:1px solid var(--today-rule);border-radius:18px;background:var(--today-surface);color:var(--today-text);font:600 .875rem/1.3 Manrope,var(--sans);text-align:start;overflow-wrap:anywhere}
.qibla-pill svg{flex:none;width:18px;height:18px}
.qibla-pill[data-turn=left] svg{transform:scaleX(-1)}
.qibla-pill[data-tone=warn]{border-color:#e6d3a3;background:#fbf5e6;color:#5c4b22}
.qibla-pill[data-tone=good]{border-color:#b9cdb4;background:#e8f0e6;color:#244d3d}
.qibla-layout .qibla-card{padding:0;border:0;border-radius:0;background:none;box-shadow:none;text-align:center}
.qibla-layout .qibla-compass{margin:12px auto 0}
.qibla-layout #enableCompass{margin:12px 0 0}
.qibla-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
.qibla-stat{min-width:0;padding:14px 12px;border:1px solid var(--today-rule);border-radius:16px;background:var(--today-surface);text-align:center}
.qibla-stat strong{display:block;font:700 1.5rem/1.1 Manrope,var(--sans);font-variant-numeric:tabular-nums;color:var(--today-text);overflow-wrap:anywhere}
.qibla-stat span{display:block;margin-top:3px;font:500 .8125rem/1.35 Manrope,var(--sans);color:var(--today-muted)}
.qibla-options{margin-top:20px;max-width:none}
.qibla-help-text{padding:14px 16px}
.qibla-help-text p{margin:0;font:400 .875rem/1.6 Manrope,var(--sans);color:var(--today-text)}
.qibla-help-text p+p{margin-top:10px}
@media(max-width:720px){
  #qiblaView .page-heading{margin-bottom:16px}
  #qiblaView .qibla-compass{--size:min(62vw,240px,max(150px,calc(100svh - 500px)));--pad:16px}
}
html[data-theme=night] #qiblaView .qibla-card{background:transparent!important}
html[data-theme=night] #qiblaView .qibla-stat span{color:var(--n-muted)!important}
html[data-theme=night] #qiblaView .qibla-pill[data-tone=warn]{border-color:#5b4b22!important;background:#2a2414}
html[data-theme=night] #qiblaView .qibla-pill[data-tone=warn],html[data-theme=night] #qiblaView .qibla-pill[data-tone=warn] *{color:#ead7a2!important}
html[data-theme=night] #qiblaView .qibla-pill[data-tone=good]{border-color:#4f6b5a!important;background:#26312d}
html[data-theme=night] #qiblaView .qibla-pill[data-tone=good],html[data-theme=night] #qiblaView .qibla-pill[data-tone=good] *{color:var(--n-accent)!important}
html[data-theme=night] #qiblaView input[role=switch]{background:transparent!important}
html[data-theme=night] #qiblaView input[role=switch]::before{background:#6c7a80}
html[data-theme=night] #qiblaView input[role=switch]:checked::before{background:var(--n-button)}
html[data-theme=night] #qiblaView input[role=switch]:focus-visible{outline-color:var(--n-accent)}
html[data-theme=night] #qiblaView .reminder-switch-label>svg{color:var(--n-muted)!important}
html[data-theme=night] :is(#qiblaView,#screenBody) .reminder-switch-label>svg{stroke:var(--n-muted)}
html[data-theme=night] #qiblaView .qibla-pill[data-tone=warn] svg{stroke:#ead7a2}
html[data-theme=night] #qiblaView .qibla-pill[data-tone=good] svg{stroke:var(--n-accent)}
html[data-theme=night] #screenBody .qibla-help-text p{color:var(--n-text)!important}

/* Tools: one list; each row says where you are in it. */
@media(max-width:720px){
  [data-screen=tools] .tools-list{border-radius:16px}
  [data-screen=tools] .tools-list .link-row{min-height:72px;gap:14px;padding:12px 14px}
  [data-screen=tools] .tools-list .settings-row-label{gap:2px;font:600 .9375rem/1.3 Manrope,var(--sans)}
  [data-screen=tools] .tools-list .settings-row-label small{font:500 .8125rem/1.35 Manrope,var(--sans)}
}
/* ---- end C1 ---- */

/* ---- C2: Settings, Prayer times, Location, first run ---- */
/* Settings pages (Settings, Guides, About, Language, Prayer times, Method, Location): the reminder groups, with 32px icon
   squares, segmented controls, a stepper, the search field and a Save bar. */
:root{--set-line:#cfd8cc}
html[data-theme=night]{--set-line:#4b585f}
.set-page .reminder-block-title{margin:0 0 8px;padding-inline:4px;font:700 .8125rem/1.4 Manrope,var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--today-muted)}
:where(.set-row){display:flex;align-items:center;gap:12px;width:100%;min-height:64px;margin:0;padding:12px 14px;border:0 solid var(--today-rule);border-radius:0;background:transparent;color:var(--today-text);font-family:Manrope,var(--sans);text-align:start;text-decoration:none;box-sizing:border-box}
:is(button,a,label).set-row{cursor:pointer}
.set-row:focus-visible{outline:3px solid var(--green);outline-offset:-3px}
.set-row:disabled{opacity:.6;cursor:default}
.set-icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;background:var(--today-next-bg);color:var(--green)}
.set-icon svg{width:18px;height:18px;stroke-width:1.8}
.set-icon.quiet{background:var(--today-bg);color:var(--today-muted)}
.set-text{flex:1;min-width:0}
.set-text strong{display:block;font:600 .9375rem/1.3 Manrope,var(--sans)}
.set-text small{display:block;margin-top:1px;font:500 .8125rem/1.35 Manrope,var(--sans);color:var(--today-muted);overflow-wrap:anywhere}
.set-chevron{flex:none;width:18px;height:18px;color:var(--today-muted)}
.set-info{cursor:default}
.set-info .system-info-value{min-width:0;max-width:60%;font:500 .8125rem/1.35 Manrope,var(--sans);color:var(--today-muted);text-align:end;overflow-wrap:anywhere}
.set-ok,.set-warn{flex:none;width:22px;height:22px;stroke-width:2.2}
.set-ok{color:#2f7d4f}
.set-warn{color:#9a6b12}
.set-print{margin:10px 4px 0;font:500 .78rem/1.5 Manrope,var(--sans);color:var(--today-muted)}
.set-print a{display:inline-block;padding-block:14px;margin-block:-14px;color:inherit;text-decoration:underline}
.set-stack{flex-wrap:wrap;gap:12px;padding:14px}
.set-stack .set-seg{flex:1 1 100%}
.reminder-segments.set-seg{grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.reminder-segments.set-seg.inline{flex:none;grid-template-columns:repeat(var(--n),auto)}
.set-seg.inline .reminder-segment{min-width:76px;padding-inline:10px}
.set-seg.five .reminder-segment{padding-inline:0}
.set-switch{padding-inline-end:6px}
.set-choice .set-text strong{font-weight:600}
.set-about{display:flex;align-items:center;gap:14px;padding:4px}
.set-about img{flex:none;width:44px;height:52px}
.set-about[hidden]{display:none}
.set-about strong{font:600 1rem/1.3 Manrope,var(--sans)}
.set-adjust{flex-wrap:wrap;row-gap:2px;padding-inline-end:10px}
.set-adjust .set-text{flex:1 1 7rem}
.set-adjust .set-text small{overflow-wrap:normal}
.set-adjust .set-text small b{font-weight:800;color:var(--green)}
.set-arrow{display:inline-block}
[dir=rtl] .set-arrow{transform:scaleX(-1)}
.set-stepper{display:flex;align-items:center;flex:none;direction:ltr;margin-inline-start:auto}
.set-step{position:relative;display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--today-text);cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.set-step::before{content:"";position:absolute;inset:4px;border:1px solid var(--set-line);border-radius:50%;background:var(--today-surface)}
.set-step:active::before{background:var(--today-next-bg)}
.set-step svg{position:relative;width:18px;height:18px;stroke-width:2}
.set-step:focus-visible{outline:3px solid var(--green);outline-offset:-1px}
.set-step-value{min-width:62px;padding-inline:6px;text-align:center;white-space:nowrap;font:700 .875rem/1 Manrope,var(--sans);font-variant-numeric:tabular-nums;color:var(--today-text)}
@media(max-width:360px){.set-step-value{font-size:.8125rem}}
.set-step-value.changed{font-weight:800;color:var(--green)}
.set-savebar{display:flex;align-items:center;gap:10px;position:sticky;bottom:0;z-index:5;padding:12px 16px;border:1px solid var(--today-rule);border-radius:16px;background:var(--today-surface);box-shadow:0 -6px 18px #14281e14;box-sizing:border-box}
.set-savebar[hidden]{display:none}
.set-savebar .button.primary{flex:1;min-height:48px;border-radius:12px;font:700 .9375rem Manrope,var(--sans)}
.set-discard{min-height:48px;padding:0 18px;border:0;border-radius:12px;background:transparent;color:var(--today-text);font:700 .9375rem Manrope,var(--sans);cursor:pointer}
.set-discard:focus-visible{outline:3px solid var(--green);outline-offset:-2px}
/* Location */
.loc-search{position:relative}
.loc-search-icon{position:absolute;inset-inline-start:15px;top:16px;width:20px;height:20px;color:var(--today-muted);pointer-events:none}
.loc-input{display:block;width:100%;height:52px;margin:0;padding:0 16px;padding-inline-start:46px;border:1.5px solid var(--today-rule);border-radius:14px;background:var(--today-surface);color:var(--today-text);font:500 1rem Manrope,var(--sans);box-sizing:border-box;appearance:none;-webkit-appearance:none}
.loc-input:focus{outline:none;border-color:var(--green)}
.loc-input:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.loc-input::placeholder{color:var(--today-muted);opacity:1}
.loc-search+.loc-results{margin-top:12px}
.loc-page>.loc-search+.loc-results{margin-top:-10px}
.loc-use{min-height:60px;color:var(--green)}
.loc-use strong{font-weight:700}
.loc-status{margin:0;padding:12px 14px;background:var(--today-next-bg);color:var(--today-text);font:500 .875rem/1.5 Manrope,var(--sans);overflow-wrap:anywhere}
.loc-status:empty,.loc-list:empty{display:none}
.loc-list>*+*{border-top:1px solid var(--today-rule)}
.loc-note{margin:0;padding:14px;font:500 .875rem/1.5 Manrope,var(--sans);color:var(--today-muted)}
/* A message with an action ("Times updated for Birmingham · Undo"): the text, then the buttons on one line. */
.toast.has-action>.toast-action{font-weight:700}
@media(max-width:720px){
  .toast.has-action{flex-flow:row wrap;justify-content:flex-end}
  .toast.has-action>div{flex:1 0 100%}
  .toast.has-action>button{align-self:auto}
  .set-savebar{position:fixed;inset-inline:0;bottom:0;border-width:1px 0 0;border-radius:0;padding-bottom:calc(12px + var(--app-safe-bottom,0px))}
  .set-page.has-bar{padding-bottom:calc(88px + var(--app-safe-bottom,0px))}
}
@media(min-width:721px){body.native-app .toast.has-action{flex-flow:row wrap;justify-content:flex-end}body.native-app .toast.has-action>div{flex:1 0 100%}body.native-app .toast.has-action>button{align-self:auto}}
[dir=rtl] .set-chevron{transform:rotate(180deg)}
html[data-theme=night] .set-about img{content:url(./brand-mark-night.svg)}
html[data-theme=night] #screenBody :is(.set-icon,.set-icon svg,.loc-use,.loc-use strong,.set-step-value.changed,.set-adjust .set-text small b){color:var(--n-accent)!important}
html[data-theme=night] #screenBody :is(.set-text small,.set-chevron,.set-print,.set-print a,.set-info .system-info-value,.loc-note,.loc-search-icon,.set-icon.quiet,.set-page .reminder-block-title){color:var(--n-muted)!important}
html[data-theme=night] #screenBody .set-warn{color:#e0b968!important}
html[data-theme=night] #screenBody .set-ok{color:#7fcf9c!important}
html[data-theme=night] #screenBody :is(a.set-row,.set-step,.set-discard){color:var(--n-text)!important}
html[data-theme=night] #screenBody .loc-status{background:var(--n-surface-2)}
html[data-theme=night] #screenBody :is(.loc-input,.set-savebar){background:var(--n-surface)!important}
html[data-theme=night] #screenBody .loc-input:focus{border-color:var(--n-accent)!important}
html[data-theme=night] #screenBody :is(.loc-input,.set-row,.set-step,.set-discard):focus-visible{outline-color:var(--n-accent)}
@media(forced-colors:active){
  .set-step::before{border-color:ButtonText}
  .loc-input,.set-savebar{border-color:ButtonText}
  .set-row:focus-visible,.set-step:focus-visible{outline-color:Highlight}
}

/* ---- end C2 ---- */

/* ---- D: Dhikr, 99 Names, Ramadan ---- */
/* Dhikr, 99 Names and Ramadan share the focused-page look: Back and a title, then quiet groups. New parts are styled for every
   width; the older components they sit beside are changed on phones only (the desktop keeps their earlier look). */
.dhikr-page,.names-page,.ramadan-page{--d-line:#cfd8cc}
.dhikr-page svg,.names-page svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dhikr-page svg.dhikr-ring{stroke-width:inherit}
.dhikr-page.reminder-focused-page{display:block;max-width:560px}

/* Dhikr: the chip that names the dhikr, the circle, the controls row. */
.dhikr-main,.dhikr-after{text-align:center}
.dhikr-chip{display:flex;align-items:center;gap:8px;max-width:100%;min-height:44px;margin:6px auto 0;padding:6px 14px 6px 18px;border:1px solid var(--d-line);border-radius:22px;background:var(--today-surface);color:var(--today-text);font:600 .875rem/1.3 Manrope,var(--sans);cursor:pointer}
.dhikr-chip-text{min-width:0;overflow-wrap:anywhere}
.dhikr-chip .dhikr-meaning::before{content:" · "}
.dhikr-chip-chevron{flex:none;width:16px;height:16px;color:var(--today-muted);transform:rotate(90deg)}
.dhikr-chip:focus-visible,.dhikr-round-button:focus-visible,.dhikr-pick:focus-visible,.ramadan-set:focus-visible,.ramadan-about-row:focus-visible,.name-day-actions .button:focus-visible,.names-search:focus-within{outline:3px solid var(--green);outline-offset:2px}
.name-row-check:focus-visible{outline:0}
.name-row-check:focus-visible .name-row-circle{outline:3px solid var(--green);outline-offset:2px}
.dhikr-hint{margin:14px 0 0;font:500 .8125rem/1.3 Manrope,var(--sans);color:var(--today-muted)}
.dhikr-controls{display:flex;align-items:center;gap:8px;margin-top:28px;text-align:start}
.dhikr-target-group{flex:1;min-width:0}
.dhikr-targets.reminder-chips{display:flex;flex-wrap:wrap;gap:8px}
.dhikr-targets .reminder-chip{min-width:48px;padding:0 14px}
.dhikr-infinity{font-size:1.25rem;line-height:1}
.dhikr-round-button{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--d-line);border-radius:50%;background:var(--today-surface);color:var(--today-text);cursor:pointer}
.dhikr-round-button svg{width:20px;height:20px}
.dhikr-controls #dhikrUndo{margin-inline-start:auto}
.dhikr-round-button.armed{border-color:var(--green);background:var(--green);color:#fff}
.dhikr-after-controls{justify-content:center;margin-top:12px}
.dhikr-vibrate{margin-top:28px;text-align:start}
.dhikr-main .text-link{display:inline-flex;align-items:center;min-height:44px;margin-top:8px}
.dhikr-custom{margin:16px 0 0;padding:16px;border:1px solid var(--today-rule);border-radius:16px;background:var(--today-surface);text-align:start}
.dhikr-custom .field{margin:0 0 14px}
.dhikr-custom-label,.ramadan-editor-label{padding:0;margin:0 0 8px;font:700 .875rem/1.4 Manrope,var(--sans);color:var(--today-muted)}
.dhikr-custom .inline-actions,.ramadan-editor .inline-actions{margin-top:16px}

/* After prayer: three dots for the three steps, then the same circle. */
.dhikr-step{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px}
.dhikr-dots{display:inline-flex;align-items:center;gap:6px}
.dhikr-dots i{width:8px;height:8px;border-radius:4px;background:var(--d-line)}
.dhikr-dots i.done{background:var(--green)}
.dhikr-dots i.now{width:22px;background:var(--green)}
.dhikr-after{padding-bottom:6px}
.dhikr-after .dhikr-caption{margin:2px 0 0}
.dhikr-done-title{margin:14px 0 6px;font:400 1.375rem/1.3 Georgia,serif}
.dhikr-done-text{margin:0 0 14px;font:500 .9375rem/1.6 Manrope,var(--sans);color:var(--today-muted)}
.dhikr-restart{margin-top:16px}

/* The list of dhikr, as a sheet from the bottom of the screen. */
.dhikr-sheet{position:fixed;inset:auto 0 0;width:100%;max-width:520px;height:auto;max-height:min(80dvh,640px);margin:0 auto;padding:0;border:0;border-radius:20px 20px 0 0;background:var(--today-surface);color:var(--today-text);overflow:hidden;box-shadow:0 -10px 40px #0003}
.dhikr-sheet:not([open]){display:none}
.dhikr-sheet[open]{display:flex;flex-direction:column;animation:dhikr-sheet-in .22s ease-out}
.dhikr-sheet::backdrop{background:#091511a6}
@keyframes dhikr-sheet-in{from{transform:translateY(40px);opacity:0}}
.dhikr-sheet-inner{display:flex;flex-direction:column;min-height:0;padding:10px 0 calc(16px + var(--app-safe-bottom,0px))}
.dhikr-sheet-inner::before{content:"";flex:none;width:40px;height:4px;margin:0 auto 6px;border-radius:2px;background:var(--d-line)}
.dhikr-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 12px 6px 20px}
.dhikr-sheet-head h2{margin:0;font:400 1.375rem/1.3 Georgia,serif}
.dhikr-sheet-list{margin:0;padding:0 12px;list-style:none;overflow:auto;overscroll-behavior:contain}
.dhikr-sheet-list>li+li{border-top:1px solid var(--today-rule)}
.dhikr-pick{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 10px;border:0;border-radius:12px;background:transparent;color:var(--today-text);text-align:start;cursor:pointer}
.dhikr-pick[aria-pressed=true]{background:var(--today-next-bg)}
.dhikr-pick-text{flex:1;min-width:0;display:flex;flex-direction:column}
.dhikr-pick-text strong{font:600 .9375rem/1.3 Manrope,var(--sans)}
.dhikr-pick-text span{font:500 .8125rem/1.35 Manrope,var(--sans);color:var(--today-muted)}
.dhikr-pick-arabic{flex:none;font:400 1.25rem/1.5 'Noto Naskh Arabic',Georgia,serif;color:var(--green);white-space:nowrap}
.dhikr-pick-check{flex:none;width:18px;height:18px;color:var(--green);visibility:hidden}
.dhikr-pick[aria-pressed=true] .dhikr-pick-check{visibility:visible}
.dhikr-pick.add{color:var(--green);font:600 .9375rem Manrope,var(--sans)}
.dhikr-pick.add>svg{flex:none;width:18px;height:18px}
.dhikr-sheet-note{margin:8px 20px 0;font:500 .8125rem/1.5 Manrope,var(--sans);color:var(--today-muted)}
html:is([lang=ar],[lang=ur],[lang=fa]) .dhikr-pick-arabic{display:none}
html[lang=ar] .dhikr-chip .dhikr-meaning{display:none}

/* 99 Names: the name of the day, progress, search and filters, then one compact line per name. */
.names-page{display:block;max-width:560px}
.name-day{margin-top:2px;padding:18px 16px 16px;border:1px solid var(--today-rule);border-radius:16px;background:var(--today-surface);text-align:center}
.name-day-label{display:flex;justify-content:center;flex-wrap:wrap;gap:0 6px;font:700 .75rem/1.4 Manrope,var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--today-current)}
.name-day-arabic{margin-top:10px;font:400 3rem/1.5 'Noto Naskh Arabic',Georgia,serif;color:var(--green)}
.name-day-translit{margin:2px 0 0;font:700 1.25rem/1.3 Manrope,var(--sans);color:var(--today-text)}
.name-day-meaning{margin:2px 0 0;font:500 .875rem/1.4 Manrope,var(--sans);color:var(--today-muted)}
.name-day-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.name-day-actions .button{flex:1 1 9rem;min-width:0;min-height:48px;justify-content:center;gap:8px;border-radius:12px;font:700 .9375rem/1.2 Manrope,var(--sans)}
.name-day-actions .button svg{flex:none;width:18px;height:18px;stroke-width:2.2}
.name-day-memorised{border:1.5px solid var(--green);background:var(--today-surface);color:var(--green)}
.name-day-memorised[aria-pressed=true]{background:var(--green);color:#fff}
.names-page .names-progress{margin:16px 0 0;gap:12px}
.names-page .names-bar{height:6px;border-radius:3px;background:#dfe8dc}
.names-page .names-progress p{font:600 .8125rem/1.3 Manrope,var(--sans);color:var(--today-muted)}
.names-tools{display:block;margin:0}
.names-search{display:flex;align-items:center;gap:10px;min-height:48px;margin-top:16px;padding:0 14px;border:1px solid var(--d-line);border-radius:14px;background:var(--today-surface)}
.names-search>svg{flex:none;width:20px;height:20px;color:var(--today-muted)}
.names-search input{flex:1;min-width:0;min-height:44px;padding:0;border:0;border-radius:0;outline:0;background:transparent;color:var(--today-text);font:500 .9375rem Manrope,var(--sans)}
.names-filters.reminder-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.names-filters .reminder-chip{padding:0 16px}
.name-rows{margin:16px 0 0;padding:0;list-style:none}
.name-row{display:flex;align-items:center;gap:8px;min-height:60px;padding:0 4px 0 14px}
.name-row-number{flex:none;width:22px;font:600 .8125rem/1 Manrope,var(--sans);color:var(--today-muted);font-variant-numeric:tabular-nums}
.name-row-text{flex:1;min-width:0}
.name-row-title{display:flex;align-items:center;gap:6px}
.name-row-title strong{font:600 .9375rem/1.3 Manrope,var(--sans);overflow-wrap:anywhere}
.name-row-dot{flex:none;width:7px;height:7px;border-radius:50%;background:#d4bc88;box-shadow:0 0 0 1px #b99a55}
.name-row-meaning{display:block;font:500 .8125rem/1.35 Manrope,var(--sans);color:var(--today-muted)}
.name-row-arabic{flex:none;max-width:42%;font:400 1.375rem/1.4 'Noto Naskh Arabic',Georgia,serif;color:var(--green);text-align:end}
.name-row-check{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}
.name-row-circle{display:grid;place-items:center;width:32px;height:32px;box-sizing:border-box;border:1.5px solid var(--d-line);border-radius:50%;background:var(--today-surface);color:#7a917e}
.name-row-circle svg{width:16px;height:16px;stroke-width:2.2}
.name-row-check[aria-pressed=true] .name-row-circle{border-color:var(--green);background:var(--green);color:#fff}
.names-page .privacy-note{margin:16px 4px 0}

/* Ramadan: a card that counts down (then shows today's suhoor and iftar), the table, and a plain row. */
.ramadan-page{display:block;max-width:560px}
.ramadan-card{margin-top:2px;padding:20px 20px 12px;border-radius:14px;background:#294f3c;color:#e8eace}
.ramadan-card>*{margin:0}
.ramadan-label{font:500 .875rem/1.3 'DM Sans',var(--sans);letter-spacing:.1em;color:#e0e9d7}
.ramadan-title{margin-top:10px;font:400 1.625rem/1.2 Georgia,serif;color:#e8eace}
.ramadan-dates{margin-top:8px;font:400 .875rem/1.4 'DM Sans',var(--sans);color:#e0e9d7}
.ramadan-today{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.ramadan-today small{display:block;font:500 .8125rem/1.4 Manrope,var(--sans);color:#e0e9d7}
.ramadan-today strong{display:block;font:600 1.5rem/1.3 Manrope,var(--sans);color:#fff;font-variant-numeric:tabular-nums}
.ramadan-set{margin-top:6px;min-height:44px;padding:0;border:0;background:transparent;color:#e8eace;font:600 .875rem/1.3 Manrope,var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ramadan-set:focus-visible{outline-color:#fff}
.ramadan-editor{margin-top:16px;padding:16px;border:1px solid var(--today-rule);border-radius:16px;background:var(--today-surface)}
.ramadan-editor[hidden]{display:none}
.ramadan-editor .field{margin:0 0 14px}
.ramadan-lengths.reminder-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
.ramadan-table-card{margin-top:16px;border:1px solid var(--today-rule);border-radius:16px;background:var(--today-surface);overflow:hidden;overflow:clip}
.ramadan-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-variant-numeric:tabular-nums}
.ramadan-table .c-day{width:16%}
.ramadan-table .c-date{width:25%}
.ramadan-table .c-suhoor{width:31%}
.ramadan-table .c-iftar{width:28%}
.ramadan-table thead th{position:sticky;top:var(--app-safe-top,0px);z-index:1;height:40px;padding:0 6px;background:var(--today-surface);box-shadow:inset 0 -1px 0 var(--today-rule);font:700 .6875rem/1.2 Manrope,var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--today-muted);text-align:start}
.ramadan-table :is(th,td){text-align:start;overflow-wrap:anywhere}
.ramadan-table tbody :is(th,td){height:52px;padding:0 6px;font:600 .9375rem/1.2 Manrope,var(--sans);color:var(--today-text)}
.ramadan-table tbody tr+tr>*,.ramadan-table tbody+tbody tr:first-child>*{border-top:1px solid var(--today-rule)}
.ramadan-table :is(thead th,tbody th[scope=row],tbody td):first-child{padding-inline-start:14px}
.ramadan-table tbody th[scope=row]{font-weight:600;font-size:.875rem;color:var(--today-muted)}
.ramadan-table tbody td:nth-child(2){font-weight:500}
.ramadan-table tbody td.friday{font-weight:800;color:var(--green)}
.ramadan-table tbody tr.current>*{background:var(--today-current-bg)}
.ramadan-table tbody tr.current>th{box-shadow:inset 3px 0 0 var(--today-current)}
[dir=rtl] .ramadan-table tbody tr.current>th{box-shadow:inset -3px 0 0 var(--today-current)}
.ramadan-table tbody tr.ramadan-group-row>th{height:30px;padding:0 14px;background:#fbf5e6;font:700 .75rem/1 Manrope,var(--sans);letter-spacing:.04em;color:var(--today-current)}
.ramadan-about{margin-top:16px}
.ramadan-about-row{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 14px;border:0;background:transparent;color:var(--today-text);font:600 .9375rem/1.3 Manrope,var(--sans);text-align:start;cursor:pointer}
.ramadan-about-row>span{flex:1;min-width:0}
.ramadan-about-row>svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--today-muted)}
.ramadan-about-row[aria-expanded=true]>svg{transform:rotate(90deg)}
[dir=rtl] .ramadan-about-row>svg{transform:scaleX(-1)}
[dir=rtl] .ramadan-about-row[aria-expanded=true]>svg{transform:rotate(90deg)}
#ramadanAboutText{padding:0 14px 6px}
#ramadanAboutText .privacy-note{margin:12px 0}
[dir=rtl] #dhikrUndo svg{transform:scaleX(-1)}

@media(max-width:720px){
  /* These pages share the head of every other focused page. Dhikr's older sheet hides its heading, so it is shown again at the usual
     size, and Ramadan's older head margins give way to the usual ones. */
  body[data-view=dhikr] #screenView .screen-head{position:static;width:auto;height:auto;margin:0 0 16px;overflow:visible;clip:auto}
  body[data-view=ramadan] #screenView .screen-head{margin:0 0 16px}
  /* Dhikr */
  /* Counter | After prayer looks like every other segmented control (.reminder-segments). */
  .dhikr-page .dhikr-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin:0;padding:3px;border-radius:14px;background:var(--today-rule)}
  .dhikr-page .dhikr-modes button{display:grid;place-items:center;min-height:44px!important;padding:0!important;border:0;text-align:center;border-radius:11px;background:transparent;font:500 .875rem/1.2 Manrope,var(--sans)!important;color:var(--today-muted)}
  .dhikr-page .dhikr-modes button.selected{background:var(--today-surface);box-shadow:0 1px 3px #10201830;color:var(--today-text);font-weight:700!important}
  .dhikr-page .dhikr-modes button:focus-visible{outline:3px solid var(--green);outline-offset:2px}
  html[data-theme=night] #screenBody .dhikr-page .dhikr-modes{background:var(--today-rule)!important}
  html[data-theme=night] #screenBody .dhikr-page .dhikr-modes button{color:var(--n-muted)!important}
  html[data-theme=night] #screenBody .dhikr-page .dhikr-modes button.selected{background:var(--n-surface-2)!important;box-shadow:0 1px 3px #10201830}
  html[data-theme=night] #screenBody .dhikr-page .dhikr-modes button:focus-visible{outline-color:var(--n-accent)}
  .dhikr-page .dhikr-arabic{margin:22px 0 0;font:400 2.25rem/1.6 'Noto Naskh Arabic',Georgia,serif;color:var(--green)}
  .dhikr-page .dhikr-tap{width:min(240px,66vw);margin:24px auto 0}
  .dhikr-page .dhikr-tap strong{font:700 4rem/1 Manrope,var(--sans);letter-spacing:0}
  .dhikr-page .dhikr-tap span{margin-top:8px;font:500 1rem/1.3 'DM Sans',var(--sans);color:var(--today-muted)}
  .dhikr-page .dhikr-tap .dhikr-rounds{max-width:60%;margin-top:4px;font-size:.75rem}
  .dhikr-page .dhikr-after .dhikr-arabic{margin-top:14px}
  .dhikr-page .settings-heading{margin:28px 0 12px;font:400 1.375rem/1.3 Georgia,serif;text-align:start}
  .dhikr-page .dua-card{margin:0 0 12px;padding:18px 16px;border-radius:16px;text-align:start}
  .dhikr-page .dua-card>p[lang=ar]{font-size:1.5rem;line-height:1.9}
  .dhikr-page .privacy-note{margin:16px 4px 0;text-align:start}
  /* 99 Names */
  .names-page .name-day-label{font-size:.75rem}
}

/* Night: the older night rules paint all text and borders, so the colours these screens need are given back. */
html[data-theme=night] :is(.dhikr-page,.names-page,.ramadan-page){--d-line:var(--n-border)}
html[data-theme=night] #screenBody :is(.dhikr-hint,.dhikr-pick-text span,.dhikr-sheet-note,.dhikr-chip-chevron,.dhikr-custom-label,.ramadan-editor-label,.dhikr-done-text,.name-day-meaning,.name-row-meaning,.name-row-number,.names-search>svg,.ramadan-about-row>svg,.ramadan-table thead th,.ramadan-table tbody th[scope=row]){color:var(--n-muted)!important}
html[data-theme=night] #screenBody :is(.dhikr-page .dhikr-arabic,.dhikr-page .dhikr-tap strong,.dhikr-pick-arabic,.dhikr-pick-check,.dhikr-pick.add,.name-day-arabic,.name-row-arabic,.ramadan-table tbody td.friday,.name-day-memorised){color:var(--n-accent)!important}
html[data-theme=night] #screenBody :is(.name-day-label,.ramadan-table tbody tr.ramadan-group-row>th){color:var(--today-current)!important}
html[data-theme=night] #screenBody .ramadan-table tbody tr.ramadan-group-row>th{background:var(--today-current-bg)}
html[data-theme=night] #screenBody .dhikr-dots i{background:var(--n-border)}
html[data-theme=night] #screenBody .dhikr-dots i:is(.done,.now){background:var(--n-accent)}
html[data-theme=night] #screenBody :is(.dhikr-round-button.armed,.name-day-memorised[aria-pressed=true],.name-row-check[aria-pressed=true] .name-row-circle){background:var(--n-button);border-color:var(--n-accent)!important;color:#fff!important}
html[data-theme=night] #screenBody .name-row-circle{color:var(--n-faint)!important}
html[data-theme=night] #screenBody .name-row-check[aria-pressed=true] .name-row-circle{color:#fff!important}
html[data-theme=night] #screenBody .name-day-memorised{border-color:var(--n-accent)!important}
html[data-theme=night] #screenBody .name-row-dot{background:#d7be81;box-shadow:0 0 0 1px #8a6b26}
html[data-theme=night] #screenBody .ramadan-table tbody tr.current>th{box-shadow:inset 3px 0 0 var(--today-current)}
html[data-theme=night][dir=rtl] #screenBody .ramadan-table tbody tr.current>th{box-shadow:inset -3px 0 0 var(--today-current)}
html[data-theme=night] #screenBody :is(.dhikr-chip,.dhikr-round-button,.dhikr-pick,.ramadan-about-row):focus-visible,html[data-theme=night] #screenBody .name-row-check:focus-visible .name-row-circle,html[data-theme=night] #screenBody .names-search:focus-within{outline-color:var(--n-accent)}
html[data-theme=night] #screenBody .ramadan-card{background:#294f3c}
html[data-theme=night] #screenBody :is(.ramadan-label,.ramadan-dates,.ramadan-today small){color:#e0e9d7!important}
html[data-theme=night] #screenBody :is(.ramadan-title,.ramadan-set){color:#e8eace!important}
html[data-theme=night] #screenBody .ramadan-today strong{color:#fff!important}
html[data-theme=night] .dhikr-sheet::backdrop{background:#000b}

@media(forced-colors:active){
  .dhikr-round-button.armed,.dhikr-pick[aria-pressed=true],.name-day-memorised[aria-pressed=true],.name-row-check[aria-pressed=true] .name-row-circle{outline:2px solid Highlight;outline-offset:-2px}
  .dhikr-dots i.done,.dhikr-dots i.now{background:Highlight}
  .dhikr-modes button.selected{outline:2px solid Highlight;outline-offset:-3px}
  .ramadan-table tbody tr.current>th{border-inline-start:4px solid Highlight}
  .ramadan-card{border:1px solid CanvasText}
  .name-row-check:focus-visible .name-row-circle{outline:3px solid Highlight;outline-offset:2px}
}
@media(prefers-reduced-motion:reduce){.dhikr-sheet[open]{animation:none}}

/* ---- end D ---- */

/* ---- 23 Oct fixes ---- */
/* Today: swiping the timetable card steps the day (app.js). Vertical drags still scroll, and pinch-zoom still works; the rows
   slide in from the side the swipe came from, briefly and not at all for people who ask for less motion. */
@media(max-width:720px){#todayView .prayer-section{touch-action:pan-y pinch-zoom}}
.native-app #todayView .prayer-section{touch-action:pan-y pinch-zoom}
@keyframes day-swipe{from{opacity:.25;transform:translateX(var(--swipe-from,8px))}to{opacity:1;transform:none}}
#prayerCards.day-swipe .prayer-time-card>*{animation:day-swipe .18s ease-out}
@media(prefers-reduced-motion:reduce){#prayerCards.day-swipe .prayer-time-card>*{animation:none}}
/* ---- end 23 Oct fixes ---- */

/* ---- T0: tracker shared ---- */
/* Pieces the prayer tracker's pages share: the day ring, the circle beside a prayer, the Excused pill and the prayer sheet. They are new
   parts, so they are styled at every width and override nothing older. The markup comes from tracker-art.mjs and tracker-sheet.mjs. */

/* The day ring: five arcs, Fajr at the top. The arcs also carry light colours as attributes (for a place where no stylesheet applies). */
/* The page gives every svg a size, a stroke and round line ends (style.css); these drawings have their own, so they start from the default. */
.tk-ring,.tk-badge{display:block;flex:none;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}
.tk-ring{overflow:visible}
.tk-arc.tk-prayed{stroke:#2f7d4f}
.tk-arc.tk-late{stroke:#d4a648}
.tk-arc.tk-excused{stroke:#8d99a6}
.tk-arc.tk-open{stroke:#e1e7e2}
.tk-arc.tk-track{stroke:#e6ebe4}
.tk-arc.tk-paused{stroke:#b3bdb5}
.tk-ring-badge{fill:#2f7d4f}
.tk-ring-tick{stroke:#fff}
.tk-ring-text{fill:#1d3326}
html[data-theme=night] .tk-arc.tk-prayed{stroke:#7cc49a}
html[data-theme=night] .tk-arc.tk-late{stroke:#e0b65c}
html[data-theme=night] .tk-arc.tk-excused{stroke:#8e9aa6}
html[data-theme=night] .tk-arc.tk-open{stroke:#34433b}
html[data-theme=night] .tk-arc.tk-track{stroke:#3e484f}
html[data-theme=night] .tk-arc.tk-paused{stroke:#6c7a72}
html[data-theme=night] .tk-ring-badge{fill:#7cc49a}
html[data-theme=night] .tk-ring-tick{stroke:#15191c}
html[data-theme=night] .tk-ring-text{fill:#f1f3f2}

/* The circle beside a prayer (28px) in its 44px button. Never red, never a cross: an unticked prayer is just an empty circle. */
.tk-circle{box-sizing:border-box;display:grid;place-items:center;flex:none;width:28px;height:28px;border:2px solid #6f8a78;border-radius:50%;background:var(--today-surface,#fff)}
.tk-circle svg{width:14px;height:14px;margin:0;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.tk-circle.tk-prayed{border-color:#2f7d4f;background:#2f7d4f}
.tk-circle.tk-late{border-color:#a87420;background:#fbf1dc}
.tk-circle.tk-late svg{stroke:#a87420}
.tk-circle.tk-excused{border:2px dashed #7d8a99}
.tk-circle.tk-future{border:2px dashed #c4cec6}
.tk-bar{display:block;width:10px;height:2px;border-radius:1px;background:#7d8a99}
.tk-check{display:grid;place-items:center;flex:none;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.tk-check:focus-visible{outline:3px solid var(--green);outline-offset:-1px}
html[data-theme=night] :is(#screenBody,#todayView,#tkSheet) .tk-circle{border-color:#8fa89a!important;background:transparent}
html[data-theme=night] :is(#screenBody,#todayView,#tkSheet) .tk-circle.tk-prayed{border-color:#7cc49a!important;background:#7cc49a}
html[data-theme=night] :is(#screenBody,#todayView,#tkSheet) .tk-circle.tk-late{border-color:#e0b65c!important;background:#3a3220}
html[data-theme=night] .tk-circle.tk-prayed svg{stroke:#15191c}
html[data-theme=night] .tk-circle.tk-late svg{stroke:#e0b65c}
html[data-theme=night] :is(#screenBody,#todayView,#tkSheet) .tk-circle.tk-excused{border-color:#8e9aa6!important}
html[data-theme=night] :is(#screenBody,#todayView,#tkSheet) .tk-circle.tk-future{border-color:#56636a!important}
html[data-theme=night] :is(#screenBody,#todayView,#tkSheet) .tk-bar{background:#8e9aa6}
html[data-theme=night] :is(#screenBody,#todayView,#tkSheet) .tk-check:focus-visible{outline-color:var(--n-accent)}

/* "Excused", on the date line of a day that is excused. */
.tk-pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:#eef1f4;color:#4d5866;font:700 .75rem/1 Manrope,var(--sans)}
html[data-theme=night] :is(#screenBody,#todayView) .tk-pill{background:#2a3136;color:#bcc4c6!important}

/* The prayer sheet: a bottom sheet over the dimmed page. */
.tk-sheet{position:fixed;inset:auto 0 0;width:100%;max-width:520px;height:auto;max-height:min(92dvh,720px);margin:0 auto;padding:0;border:0;border-radius:24px 24px 0 0;background:var(--today-surface);color:var(--today-text);overflow:hidden;box-shadow:0 -8px 30px #14281e2e;font-family:Manrope,var(--sans)}
.tk-sheet:not([open]){display:none}
.tk-sheet[open]{display:block;animation:tk-sheet-in .22s ease-out}
.tk-sheet::backdrop{background:#0f1e1673;backdrop-filter:none}
@keyframes tk-sheet-in{from{transform:translateY(40px);opacity:0}}
.tk-sheet-inner{box-sizing:border-box;max-height:inherit;overflow:auto;overscroll-behavior:contain;padding:10px 20px calc(28px + var(--app-safe-bottom,0px))}
.tk-sheet-grab{touch-action:none}
.tk-sheet-handle{width:40px;height:4px;margin:0 auto 14px;border-radius:2px;background:#d5ddd2}
.tk-sheet h2{margin:0;font:400 1.625rem/1.2 Georgia,serif;color:var(--today-text)}
.tk-sheet h2:focus{outline:none}
.tk-sheet-sub{margin:3px 0 0;font:500 .8125rem/1.4 Manrope,var(--sans);color:#5f6c61}
.tk-sheet-group{margin-top:16px;overflow:hidden;border:1px solid var(--today-rule);border-radius:16px;background:var(--today-surface)}
.tk-sheet-group>*+*{border-top:1px solid var(--today-rule)}
.tk-sheet-note{margin:10px 4px 0;font:400 .8125rem/1.4 var(--sans);color:var(--today-muted)}
.tk-sheet-note+.tk-sheet-group{margin-top:14px}
.tk-sheet-row{display:flex;align-items:center;gap:14px;min-height:56px;box-sizing:border-box;padding:8px 16px;cursor:pointer}
.tk-sheet-row.disabled{opacity:.45;cursor:default}
.tk-sheet-text{flex:1;min-width:0}
.tk-sheet-text strong{display:block;font:600 1rem/1.3 Manrope,var(--sans)}
.tk-sheet-text small{display:block;font:400 .8125rem/1.35 var(--sans);color:var(--today-muted)}
.tk-sheet input[type=radio]{appearance:none;-webkit-appearance:none;flex:none;box-sizing:border-box;width:22px;height:22px;margin:0;border:2px solid #6f8a78;border-radius:50%;background:var(--today-surface);cursor:inherit}
.tk-sheet input[type=radio]:checked{border:6px solid #244d3d}
.tk-sheet input[type=radio]:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.tk-sheet input[role=switch]{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:52px;height:44px;margin:0;margin-inline-end:-4px;border:0;border-radius:12px;background:transparent;cursor:pointer}
.tk-sheet input[role=switch]::before{content:"";position:absolute;inset:9px 4px;border-radius:13px;background:#7d8e78}
.tk-sheet input[role=switch]::after{content:"";position:absolute;top:12px;inset-inline-start:7px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0004;transition:inset-inline-start .15s}
.tk-sheet input[role=switch]:checked::before{background:var(--green)}
.tk-sheet input[role=switch]:checked::after{inset-inline-start:25px}
.tk-sheet input[role=switch]:focus-visible{outline:3px solid var(--green);outline-offset:1px}
html[data-theme=night] .tk-sheet::backdrop{background:#000b}
html[data-theme=night] #tkSheet .tk-sheet-handle{background:var(--n-border)}
html[data-theme=night] #tkSheet :is(.tk-sheet-sub,.tk-sheet-note,.tk-sheet-text small){color:var(--n-muted)!important}
html[data-theme=night] #tkSheet input[type=radio]{border-color:#8fa89a!important;background:var(--n-surface)!important}
html[data-theme=night] #tkSheet input[type=radio]:checked{border-color:var(--n-accent)!important}
html[data-theme=night] #tkSheet input[role=switch]{background:transparent!important}
html[data-theme=night] #tkSheet input[role=switch]::before{background:#6c7a80}
html[data-theme=night] #tkSheet input[role=switch]:checked::before{background:var(--n-button)}
html[data-theme=night] #tkSheet :is(input[type=radio],input[role=switch]):focus-visible{outline-color:var(--n-accent)}

@media(forced-colors:active){
  .tk-arc.tk-prayed,.tk-arc.tk-late{stroke:Highlight}
  .tk-arc.tk-open,.tk-arc.tk-track,.tk-arc.tk-excused,.tk-arc.tk-paused{stroke:GrayText}
  .tk-ring-badge{fill:Highlight}
  .tk-ring-tick{stroke:HighlightText}
  .tk-ring-text{fill:CanvasText}
  .tk-circle{border-color:ButtonText}
  .tk-circle svg{stroke:CanvasText}
  .tk-circle.tk-prayed{forced-color-adjust:none;border-color:Highlight;background:Highlight}
  .tk-circle.tk-prayed svg{stroke:HighlightText}
  .tk-circle.tk-late{forced-color-adjust:none;border-color:Highlight;background:Canvas}
  .tk-circle.tk-late svg{stroke:Highlight}
  .tk-circle.tk-excused,.tk-circle.tk-future{border-color:GrayText}
  .tk-bar{background:GrayText}
  .tk-check:focus-visible{outline-color:Highlight}
  .tk-pill{border:1px solid CanvasText}
  .tk-sheet{border:1px solid CanvasText}
  .tk-sheet input[type=radio]{border-color:ButtonText}
  .tk-sheet input[type=radio]:checked{border-color:Highlight}
  .tk-sheet input[role=switch]::before{border:1px solid ButtonText;background:Canvas}
  .tk-sheet input[role=switch]:checked::before{background:Highlight}
  .tk-sheet input[role=switch]::after{background:ButtonText}
}
@media(prefers-reduced-motion:reduce){.tk-sheet[open]{animation:none}.tk-sheet input[role=switch]::after{transition:none}}
/* ---- end T0 ---- */

/* ---- T1: tracker on Today ---- */
/* While the tracker is on and shown on Today, each prayer row (class tk-row) begins with a 44px circle, and Sunrise with the same width of space. Only those
   rows change: with tracking off none of this applies, and Today is as approved. The rows are a list on phones and a card layout from a wide container. */
.tk-check-space{display:block;flex:none;width:44px;height:44px}
@container (max-width:959px){
  #prayerCards .prayer-time-card.tk-row{grid-template-columns:44px minmax(0,1fr) auto 44px;padding-inline:8px 5px}
  /* 12px between the columns, but the name sits 6px from its circle (the Sunrise space too) */
  #prayerCards .tk-row>.prayer-name{margin-inline-start:-6px}
}
@container (min-width:960px){#prayerCards .tk-row>:first-child{align-self:center}}
/* "More options" is for screen readers and the keyboard: out of sight until it has the focus. */
.tk-more{position:absolute;inset-block-start:50%;inset-inline-start:4px;z-index:2;transform:translateY(-50%);margin:0;min-height:44px;padding:0 14px;border:1px solid var(--today-rule);border-radius:10px;background:var(--today-surface);color:var(--today-text);font:700 .8125rem/1.2 Manrope,var(--sans);white-space:nowrap;cursor:pointer}
.tk-more:not(:focus){width:1px;height:1px;min-height:0;padding:0;border:0;overflow:hidden;clip-path:inset(50%)}
.tk-more:focus-visible{outline:3px solid var(--green);outline-offset:2px}
html[data-theme=night] #todayView .tk-more{background:var(--n-surface)!important;border-color:var(--n-border)!important;color:var(--n-text)!important}
html[data-theme=night] #todayView .tk-more:focus-visible{outline-color:var(--n-accent)}
/* The pill on the date line of an excused day sits beside the Hijri date. */
#dateLine .date-hijri .tk-pill{margin-inline-start:8px;vertical-align:middle}
@media(forced-colors:active){.tk-more:focus{border-color:Highlight}}
/* ---- end T1 ---- */
/* ---- T2: tracker pages A ---- */
/* The opt-in page, the tracker home, History, a day and Milestones (tracker-pages-a.mjs), and the full-day message and the sheet for a
   week, month, run or Ramadan (tracker-celebrate.mjs). They are new parts, so they are styled at every width and override nothing older;
   the groups, switches, segments and the month bar are the reminder pages' and the Calendar's own. */
.tracker-page{gap:20px}
.tracker-page :is(.tk-eyebrow,.reminder-block-title){letter-spacing:.06em}
[dir=rtl] .tracker-page :is(.tk-eyebrow,.reminder-block-title){letter-spacing:0;text-transform:none}
.tracker-page .reminder-block-title{text-transform:uppercase;font:700 .8125rem/1.4 Manrope,var(--sans);color:var(--today-muted)}
.tracker-page .reminder-page-context{margin-top:-10px;font:500 .8125rem/1.4 Manrope,var(--sans)}
.tk-gear{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:0;margin-inline-start:auto;padding:0;border:1px solid var(--today-rule);border-radius:50%;background:var(--today-surface);color:var(--today-text);cursor:pointer}
.tk-gear svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tk-gear:focus-visible{outline:3px solid var(--green);outline-offset:2px}
#screenView:not([data-screen=tracker]) .tk-gear{display:none}
.tk-icon circle{stroke:currentColor}
/* A page's second head line (showScreen's subtitle): the Day page's Hijri date under its title, beside the circular Back. Hidden when empty. */
.screen-subtitle{margin:3px 0 0;font:500 .8125rem/1.4 Manrope,var(--sans);color:#5f6c61}
html[data-theme=night] #screenView .screen-subtitle{color:var(--n-muted)!important}

/* The opt-in page. */
.tk-start{gap:20px}
.tk-hero{display:flex;flex-direction:column;align-items:center;padding:10px 8px 4px;text-align:center}
.tk-hero h2{margin:18px 0 0;font:700 1.25rem/1.3 Manrope,var(--sans);color:var(--today-text)}
.tk-hero p{margin:8px 0 0;font:400 .9375rem/1.5 var(--sans);color:var(--today-muted)}
.tk-info{display:flex;align-items:center;gap:14px;min-height:72px;padding:12px 14px;box-sizing:border-box}
.tk-info-text{flex:1;min-width:0}
.tk-info-text strong,.tk-link-text strong{display:block;font:600 .9375rem/1.3 Manrope,var(--sans)}
.tk-info-text small,.tk-link-text small{display:block;margin-top:2px;font:500 .8125rem/1.35 Manrope,var(--sans);color:var(--today-muted);overflow-wrap:anywhere}
.tk-tile-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:10px;background:var(--today-next-bg);color:var(--green)}
.tk-start-actions{display:grid;gap:12px}
.tk-start-actions .button{width:100%;min-height:48px;justify-content:center}
.tk-start-actions p{margin:0;text-align:center;font:400 .8125rem/1.4 var(--sans);color:var(--today-muted)}

/* The tracker home: today's card, the numbers, the week and the way to the other pages. */
.tk-home{gap:22px}
.tk-card{box-sizing:border-box;padding:16px;border:1px solid var(--today-rule);border-radius:18px;background:var(--today-surface)}
.tk-today-top{display:flex;align-items:center;gap:16px}
.tk-ring-box{flex:none}
.tk-today-text{flex:1;min-width:0}
.tk-eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font:700 .75rem/1.4 Manrope,var(--sans);text-transform:uppercase;color:var(--today-muted)}
.tk-headline{margin-top:2px;font:400 1.5rem/1.2 Georgia,serif;color:var(--today-text)}
.tk-subline{margin-top:4px;font:500 .8125rem/1.4 Manrope,var(--sans);color:var(--today-muted)}
.tk-card{container:tkcard/inline-size}
.tk-tiles{--tk-cols:5;display:grid;grid-template-columns:repeat(var(--tk-cols),minmax(0,1fr));gap:6px;margin-top:16px}
/* Five tiles fit a phone at the usual text size (the name shrinks a little on the narrowest); on a narrower card, or with enlarged text, they take three, then two, to a row. */
@container tkcard (max-width:17rem){.tk-tiles{--tk-cols:3}}
@container tkcard (max-width:11rem){.tk-tiles{--tk-cols:2}}
.tk-tile{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:84px;margin:0;padding:10px 2px 8px;border:1px solid #cfd8cc;border-radius:14px;background:var(--today-surface);color:var(--today-text);font-family:Manrope,var(--sans);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.tk-tile:focus-visible{outline:3px solid var(--green);outline-offset:2px}
/* Each tile sits in a cell with its "More options" button (class tk-more, styled in T1 for Today's rows): out of sight until focused, then over its tile. */
.tk-tile-cell{position:relative;display:flex;min-width:0}
.tk-tile-cell>.tk-tile{flex:1}
/* While it shows, a click or tap still reaches the tile under it (the button is for the keyboard, and a screen reader activates it directly). */
.tk-tile-cell>.tk-more:focus{inset:0;transform:none;min-height:0;padding:4px;border-radius:14px;white-space:normal;text-align:center;font-size:.75rem;line-height:1.2;pointer-events:none}
.tk-tile .tk-circle{width:30px;height:30px}
.tk-tile .tk-circle svg{width:16px;height:16px}
.tk-tile-name{font:700 .8125rem/1.2 Manrope,var(--sans);font-size:min(.8125rem,calc((100cqi/var(--tk-cols) - 8.8px)/4.4));max-width:100%;overflow-wrap:break-word}
.tk-time{font:500 .75rem/1.2 Manrope,var(--sans);font-variant-numeric:tabular-nums;color:var(--today-muted);unicode-bidi:isolate}
.tk-tile.tk-prayed{border-color:#cfe3d6;background:#e8f3ec}
.tk-tile.tk-late{border-color:#e6d3a3;background:#fbf1dc}
.tk-tile.tk-excused{border-color:#d5dbe2;background:#eef1f4}
.tk-tile.tk-future{border-style:dashed;border-color:#d5ddd2;background:var(--today-bg);color:#646e66}
.tk-tile.tk-future .tk-time{color:#646e66}
.tk-note{display:flex;align-items:center;gap:8px;margin:12px 0 0;font:400 .8125rem/1.45 var(--sans);color:#4b5a4f}
.tk-note svg{flex:none;width:18px;height:18px}
p.tk-note{display:block}
.tk-banner{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 6px 6px 14px;border-radius:12px;background:#e6ece6;font:600 .875rem/1.35 Manrope,var(--sans);color:var(--today-text)}
[dir=rtl] .tk-banner{padding:6px 14px 6px 6px}
.tk-banner span{flex:1;min-width:0}
.tk-banner svg{flex:none;width:20px;height:20px}
.tk-quiet{flex:none;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--green);font:700 .875rem/1.2 Manrope,var(--sans);cursor:pointer}
.tk-quiet:focus-visible{outline:3px solid var(--green);outline-offset:-3px}
.tk-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tk-stat{box-sizing:border-box;min-width:0;padding:14px 16px;border:1px solid var(--today-rule);border-radius:16px;background:var(--today-surface)}
.tk-stat-value{font:800 1.75rem/1.15 Manrope,var(--sans);font-variant-numeric:tabular-nums;color:var(--today-text)}
.tk-new{font:400 1.5rem/1.3 Georgia,serif}
.tk-stat-new .tk-stat-value{line-height:1.3}
.tk-stat-label{margin-top:2px;font:600 .8125rem/1.35 Manrope,var(--sans);color:#4b5a4f}
.tk-stat-small{margin-top:4px;font:500 .75rem/1.35 Manrope,var(--sans);color:var(--today-muted)}
.tk-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));box-sizing:border-box;padding:8px 6px;border:1px solid var(--today-rule);border-radius:16px;background:var(--today-surface)}
.tk-week-day{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;min-height:44px;margin:0;padding:8px 0;border:0;border-radius:12px;background:transparent;color:var(--today-text);font-family:Manrope,var(--sans);cursor:pointer}
.tk-week-day.current{background:var(--today-surface);box-shadow:inset 0 0 0 2px #2f7d4f}
.tk-week-day:focus-visible,.tk-day:focus-visible{outline:3px solid var(--green);outline-offset:-2px}
.tk-letter{font:700 .75rem/1.2 Manrope,var(--sans);color:var(--today-muted)}
.tk-date{font:600 .8125rem/1.2 Manrope,var(--sans);font-variant-numeric:tabular-nums}
.tk-week-day.before .tk-date{color:#6a746c}
.tk-week-day.current .tk-date{font-weight:800}
.tk-links{overflow:hidden;border:1px solid var(--today-rule);border-radius:16px;background:var(--today-surface)}
.tk-link{box-sizing:border-box;display:flex;align-items:center;gap:14px;width:100%;min-height:72px;margin:0;padding:12px 14px;border:0;background:transparent;color:var(--today-text);font-family:Manrope,var(--sans);text-align:start;cursor:pointer}
.tk-link+.tk-link{border-top:1px solid var(--today-rule)}
.tk-link:focus-visible{outline:3px solid var(--green);outline-offset:-3px}
.tk-link-text{flex:1;min-width:0}
.tk-chevron{flex:none;color:var(--today-muted)}
[dir=rtl] .tk-chevron{transform:scaleX(-1)}
.tk-intro{margin:0;padding:14px;border-radius:14px;background:#e8f0e6;font:400 .875rem/1.45 var(--sans);color:var(--today-text)}
.tk-pill{text-transform:none}

/* History: the month bar is the Calendar's; rings or a table below it. */
.tk-history{gap:18px}
.tk-month-bar{margin:0}
.cal-step:disabled{opacity:.4;cursor:default}
#tkPrevMonth svg,[dir=rtl] #tkNextMonth svg{transform:scaleX(-1)}
[dir=rtl] #tkPrevMonth svg{transform:none}
.tk-grid-card{padding:12px 8px 10px;border:1px solid var(--today-rule);border-radius:16px;background:var(--today-surface)}
.tk-grid-head,.tk-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.tk-grid-head{height:28px;align-items:center;text-align:center;font:700 .75rem/1 Manrope,var(--sans);color:var(--today-muted)}
.tk-grid{row-gap:4px}
.tk-day{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:72px;margin:0;padding:8px 0;border:0;border-radius:12px;background:transparent;color:var(--today-text);font:600 .8125rem/1 Manrope,var(--sans);font-variant-numeric:tabular-nums;cursor:pointer}
.tk-day.current{background:var(--today-surface);box-shadow:inset 0 0 0 2px #2f7d4f;font-weight:800}
.tk-day.later{color:#6a746c}
.tk-legend-card{overflow:hidden;border:1px solid var(--today-rule);border-radius:16px;background:var(--today-surface)}
.tk-legend{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));align-items:center;justify-content:center;gap:12px 36px;box-sizing:border-box;min-height:56px;padding:14px}
.tk-legend>span,.tk-legend-table>span{display:inline-flex;align-items:center;gap:7px;min-width:0;font:600 .75rem/1.2 Manrope,var(--sans);color:#4b5a4f}
.tk-summary{box-sizing:border-box;display:flex;align-items:center;min-height:56px;margin:0;padding:12px 16px;font:500 .875rem/1.45 var(--sans);color:#4b5a4f}
.tk-legend+.tk-summary{border-top:1px solid var(--today-rule)}
.tk-table-card{container:tkt/inline-size;overflow:clip;border:1px solid var(--today-rule);border-radius:16px;background:var(--today-surface)}
/* Like the Calendar's table, it never scrolls sideways (that would end the sticky header): its type is the usual size, or smaller when the card is too narrow for six columns (a narrow phone, or enlarged text). */
.tk-table{--tk-f:min(.8125rem,3.7cqi);--tk-d:calc(var(--tk-f)*4.9);width:100%;border-collapse:collapse;table-layout:fixed;font-size:var(--tk-f);color:var(--today-text)}
.tk-table thead th{position:sticky;top:var(--app-safe-top,0px);z-index:2;height:36px;padding:0;overflow:hidden;background:var(--today-bg);box-shadow:inset 0 -1px var(--today-rule);font:700 .84616em/1 Manrope,var(--sans);font-size:min(.84616em,calc(((100cqi - var(--tk-d))/5 - 3px)/4.15));text-transform:uppercase;text-align:center;color:var(--today-muted)}
[dir=rtl] .tk-table thead th{text-transform:none}
.tk-table .tk-date-col{width:var(--tk-d);padding-inline-start:.77em;text-align:start}
.tk-table tbody :is(th,td){height:44px;padding:0;text-align:center;vertical-align:middle;border-top:1px solid var(--today-rule)}
.tk-table tbody tr:first-child :is(th,td){border-top:0}
.tk-table tbody th{padding-inline-start:.77em;text-align:start;font-weight:400}
.tk-table tr[data-tk-day]{cursor:pointer}
.tk-table tr.current{background:var(--today-next-bg)}
.tk-table-day{min-height:44px;padding:0;border:0;background:transparent;color:inherit;font:600 1em/1 Manrope,var(--sans);text-align:start;white-space:nowrap;cursor:pointer}
.tk-table tr.current .tk-table-day{font-weight:800}
.tk-table-day:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.tk-table-note{font:500 .8125rem/1.3 Manrope,var(--sans);color:var(--today-muted)}
.tk-cell{box-sizing:border-box;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;vertical-align:middle}
.tk-cell svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.tk-cell.tk-prayed{background:#2f7d4f}
.tk-cell.tk-late{border:2px solid #a87420;background:#fbf1dc}
.tk-cell.tk-late svg{width:10px;height:10px;stroke:#a87420}
.tk-cell.tk-excused{border:2px dashed #7d8a99}
.tk-cell.tk-excused .tk-bar{width:7px}
.tk-cell.tk-open{border:2px solid #9fb2a5;background:var(--today-surface)}
.tk-cell.tk-none{width:auto;font:700 .875rem/1 Manrope,var(--sans);color:#4b5a4f}
.tk-legend-table{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));justify-content:center;gap:10px 32px;padding:12px;border-top:1px solid var(--today-rule)}
.tk-legend-table .tk-cell{width:16px;height:16px}
.tk-legend-table .tk-cell svg{width:10px;height:10px}
.tk-dash{display:inline-block;width:16px;text-align:center;font:700 .875rem/1 Manrope,var(--sans);font-style:normal;color:#4b5a4f}

/* A day: the five prayers with their choices, then the whole day excused. */
.tk-prayer{box-sizing:border-box;padding:12px 16px}
.tk-prayer-head{display:flex;align-items:baseline;gap:10px}
.tk-prayer-name{font:600 1rem/1.3 Manrope,var(--sans)}
.tk-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px}
.tk-chip{box-sizing:border-box;min-height:44px;margin:0;padding:4px 6px;border:1px solid #cfd8cc;border-radius:12px;background:var(--today-surface);color:var(--today-text);font:700 .875rem/1.15 Manrope,var(--sans);overflow-wrap:anywhere;cursor:pointer}
.tk-chip[aria-pressed=true]{border-color:#244d3d;background:#244d3d;color:#fff}
.tk-chip:disabled{opacity:.45;cursor:default}
.tk-chip:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.tk-day-page .reminder-scope-help{margin:0 4px}

/* Milestones. */
.tk-section{min-width:0}
.tk-badges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.tk-badge-tile{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:14px 10px;border:1px solid var(--today-rule);border-radius:16px;background:var(--today-surface);text-align:center}
.tk-badge-tile strong{margin-top:4px;font:700 .875rem/1.3 Manrope,var(--sans)}
.tk-badge-tile span{font:500 .8125rem/1.3 Manrope,var(--sans);color:var(--today-muted)}
.tk-quiet-note{margin:0;font:400 .875rem/1.45 var(--sans);color:#4b5a4f}
.tk-badges+.tk-quiet-note,.tk-quiet-note+.tk-quiet-note,.tk-show-all+.tk-quiet-note{margin-top:8px}
/* "Show all": a quiet button under a section's newest twelve badges. */
.tk-show-all{display:block;margin:6px auto 0}
.tk-total{box-sizing:border-box;display:flex;align-items:center;min-height:56px;margin:0;padding:12px 14px;border:1px solid var(--today-rule);border-radius:16px;background:var(--today-surface);font:600 .9375rem/1.3 Manrope,var(--sans)}

/* The full-day message above the tab bar, and the sheet for a week, month, run or Ramadan. */
.tk-toast{position:fixed;z-index:60;inset-inline:12px;bottom:calc(var(--today-nav,61px) + 12px);box-sizing:border-box;display:flex;align-items:center;gap:12px;max-width:520px;margin-inline:auto;padding:14px 12px 14px 16px;border-radius:16px;background:#244d3d;color:#fff;box-shadow:0 8px 24px #0f1e1647;animation:tk-toast-in .25s ease-out}
[dir=rtl] .tk-toast{padding:14px 16px 14px 12px}
body[data-focused] .tk-toast{bottom:calc(16px + var(--app-safe-bottom,0px))}
@media(min-width:721px){.tk-toast{bottom:24px}}
.tk-toast.plain{animation:tk-fade .2s ease-out}
.tk-toast.leaving{opacity:0;transition:opacity .2s}
.tk-toast .tk-ring{flex:none}
.tk-toast-text{flex:1;min-width:0}
.tk-toast-text strong{display:block;font:700 .9375rem/1.35 Manrope,var(--sans);color:#fff}
.tk-toast-text span{display:block;margin-top:2px;font:400 .8125rem/1.4 var(--sans);color:#cfe0d4}
.tk-toast-action{flex:none;min-height:44px;padding:0 4px;border:0;background:transparent;color:#f6e5b3;font:700 .875rem/1.2 Manrope,var(--sans);cursor:pointer}
.tk-toast-action:focus-visible{outline:3px solid #fff;outline-offset:1px}
/* The message can still be up when the tracker is opened (from Tools, say): then "See tracker" has nowhere to take you. */
body[data-view=tracker] .tk-toast-action{display:none}
@keyframes tk-toast-in{from{opacity:0;transform:translateY(16px)}}
@keyframes tk-fade{from{opacity:0}}
.tk-cele-inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.tk-cele .tk-sheet-grab{align-self:stretch}
.tk-cele-stage{position:relative;display:grid;place-items:center;width:132px;height:132px;margin:8px auto 0}
.tk-cele-stage>*{grid-area:1/1}
.tk-cele-badge{display:block}
.tk-cele-ring{display:block}
.tk-cele h2{margin:14px 0 0;font:400 1.75rem/1.2 Georgia,serif;text-align:center}
.tk-cele-text{margin:8px 0 0;font:400 .9375rem/1.5 var(--sans);color:var(--today-muted);text-align:center}
.tk-cele-actions{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:22px}
.tk-cele-actions .button{width:100%;min-height:48px;justify-content:center;border-radius:12px;font-family:Manrope,var(--sans);font-weight:700}
.tk-cele-actions .button:not(.primary){border:1px solid #cfd8cc;background:var(--today-surface);color:var(--today-text)}
.tk-cele:not(.moving)[open]{animation:tk-fade .2s ease-out both}
.tk-cele:not(.moving) .tk-cele-badge{animation:tk-fade .2s ease-out both}
.tk-cele.moving .tk-cele-ring circle:nth-of-type(5){animation:tk-arc .3s ease-out .2s both}
.tk-cele.moving .tk-cele-ring{animation:tk-ring-out .3s ease .65s both}
.tk-cele.moving .tk-cele-badge{animation:tk-badge-in .4s ease-out .65s both}
@keyframes tk-arc{from{stroke-dasharray:0 251.33}}
@keyframes tk-ring-out{to{opacity:0}}
@keyframes tk-badge-in{from{opacity:0;transform:scale(.88)}}

/* Night. The older night rules paint every text and border, so the muted, accent and selected states say so again. */
html[data-theme=night] #screenBody :is(.tk-eyebrow,.tk-subline,.tk-time,.tk-stat-small,.tk-letter,.tk-info-text small,.tk-link-text small,.tk-hero p,.tk-start-actions p,.tk-chevron,.tk-table-note,.tk-grid-head,.tk-legend>span,.tk-legend-table>span,.tk-summary,.tk-quiet-note,.tk-badge-tile span,.tk-note,.tk-stat-label,.tk-table thead th,.tracker-page .reminder-block-title,.tk-day-page .reminder-scope-help){color:var(--n-muted)!important}
html[data-theme=night] #screenBody :is(.tk-tile-icon,.tk-quiet,.tk-link .tk-tile-icon){color:var(--n-accent)!important}
html[data-theme=night] #screenBody :is(.tk-tile-icon){background:var(--n-surface-2)}
html[data-theme=night] #screenBody :is(.tk-week-day.before .tk-date,.tk-day.later,.tk-tile.tk-future,.tk-tile.tk-future .tk-time){color:#929ea2!important}
html[data-theme=night] #screenBody .tk-tile{border-color:#4a565c!important;background:#252c30}
html[data-theme=night] #screenBody .tk-tile.tk-prayed{border-color:#355743!important;background:#23382c}
html[data-theme=night] #screenBody .tk-tile.tk-late{border-color:#5b4b22!important;background:#2a2414}
html[data-theme=night] #screenBody .tk-tile.tk-excused{border-color:#4a565c!important;background:#2a3136}
html[data-theme=night] #screenBody .tk-tile.tk-future{border-color:#4a565c!important;background:#1b2125}
html[data-theme=night] #screenBody :is(.tk-tile,.tk-week-day,.tk-day,.tk-link,.tk-chip,.tk-quiet,.tk-table-day,.tk-gear):focus-visible{outline-color:var(--n-accent)}
html[data-theme=night] #screenBody :is(.tk-week-day,.tk-day).current{background:var(--n-surface-2);box-shadow:none}
html[data-theme=night] #screenBody .tk-table tr.current{background:#2b3b34}
html[data-theme=night] #screenBody .tk-banner{background:var(--n-surface-2)}
html[data-theme=night] #screenBody .tk-chip[aria-pressed=true]{border-color:var(--n-button)!important;background:var(--n-button);color:#fff!important}
html[data-theme=night] #screenBody .tk-cell.tk-prayed{background:#7cc49a}
html[data-theme=night] #screenBody .tk-cell.tk-prayed svg{stroke:#15191c}
html[data-theme=night] #screenBody .tk-cell.tk-late{border-color:#e0b65c!important;background:#3a3220}
html[data-theme=night] #screenBody .tk-cell.tk-late svg{stroke:#e0b65c}
html[data-theme=night] #screenBody .tk-cell.tk-open{border-color:#8fa89a!important;background:transparent}
html[data-theme=night] #screenBody .tk-cell.tk-excused{border-color:#8e9aa6!important}
html[data-theme=night] #screenBody .tk-cell.tk-excused .tk-bar{background:#8e9aa6}
html[data-theme=night] #screenBody :is(.tk-cell.tk-none,.tk-dash){color:var(--n-muted)!important}
html[data-theme=night] #screenBody .tk-intro{background:var(--n-surface-2)}
html[data-theme=night] #screenBody .tk-more{background:var(--n-surface)!important;border-color:var(--n-border)!important;color:var(--n-text)!important}
html[data-theme=night] #screenBody .tk-more:focus-visible{outline-color:var(--n-accent)}
html[data-theme=night] #screenBody .tk-pill{background:#2a3136;color:#bcc4c6!important}
html[data-theme=night] body .tk-toast{background:#244d3d}
html[data-theme=night] body .tk-toast .tk-toast-text strong{color:#fff!important}
html[data-theme=night] body .tk-toast .tk-toast-text span{color:#cfe0d4!important}
html[data-theme=night] body .tk-toast .tk-toast-action{color:#f6e5b3!important}
html[data-theme=night] #tkCelebrate .tk-cele-text{color:var(--n-muted)!important}
html[data-theme=night] #tkCelebrate .tk-sheet-handle{background:var(--n-border)}
html[data-theme=night] #tkCelebrate .button:not(.primary){background:var(--n-surface-2)}

@media(forced-colors:active){
  .tk-tile,.tk-chip,.tk-week-day,.tk-day,.tk-gear{border:1px solid ButtonText}
  .tk-tile.tk-prayed,.tk-chip[aria-pressed=true]{forced-color-adjust:none;border-color:Highlight;background:Highlight;color:HighlightText}
  .tk-tile.tk-prayed .tk-time{color:HighlightText}
  .tk-tile.tk-future{border-style:dashed;border-color:GrayText;color:GrayText}
  .tk-week-day.current,.tk-day.current,.tk-table tr.current{outline:2px solid Highlight;outline-offset:-2px;box-shadow:none}
  .tk-cell{border:1px solid ButtonText}
  .tk-cell.tk-prayed{forced-color-adjust:none;border-color:Highlight;background:Highlight}
  .tk-cell.tk-prayed svg{stroke:HighlightText}
  .tk-cell.tk-late svg{stroke:CanvasText}
  .tk-toast{border:1px solid CanvasText;forced-color-adjust:none;background:Canvas;color:CanvasText}
  .tk-toast-text strong,.tk-toast-text span{color:CanvasText}
  .tk-toast-action{color:LinkText}
  .tk-tile:focus-visible,.tk-week-day:focus-visible,.tk-day:focus-visible,.tk-link:focus-visible,.tk-chip:focus-visible,.tk-gear:focus-visible{outline-color:Highlight}
}
/* The page-wide reduced-motion rule cuts every animation to 0.01ms; a celebration keeps the board's 200ms fade instead (a fade is not movement). */
@media(prefers-reduced-motion:reduce){.tk-toast{animation:tk-fade .2s ease-out}.tk-cele.moving .tk-cele-ring{display:none}.tk-toast,.tk-cele[open],.tk-cele .tk-cele-badge{animation-duration:.2s!important}.tk-toast.leaving{transition-property:opacity!important;transition-duration:.2s!important}}
/* ---- end T2 ---- */

/* ---- T3: tracker pages B ---- */
/* Insights, Tracker settings, Pause, Your prayer log, How days are counted and Share a card (tracker-pages-b.mjs), and the highlight Insights
   puts on a Reminders row. They are new parts built on the reminder pages' groups, rows, chips and switches, so they are styled at every width
   and override nothing older; the pages carry data-tbpage. */
[data-tbpage]{gap:20px}
[data-tracker-page=tracker-insights]{gap:16px}
[data-tracker-page=tracker-log],[data-tracker-page=tracker-rules]{gap:18px}
[data-tbpage] .reminder-block-title{margin:0 0 8px;padding-inline:4px;font:700 .8125rem/1.4 Manrope,var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--today-muted)}
[data-tbpage] .set-row{min-height:56px}
.tb-lead{margin:0 4px;font:400 .9375rem/1.5 var(--sans);color:var(--today-text)}
.tb-note{margin:0 4px;font:400 .875rem/1.5 var(--sans);color:var(--today-muted)}
.tb-note.tb-resumes{margin-top:12px}
.tb-print{margin:0 8px;text-align:center;font:400 .8125rem/1.5 var(--sans);color:var(--today-muted)}
.tb-caption{margin:0 4px 8px;font:600 .8125rem/1.4 Manrope,var(--sans);color:var(--today-muted)}
.tb-text{margin:0 0 14px;font:400 .875rem/1.5 var(--sans);color:var(--today-muted)}
.tb-text:last-child{margin-bottom:0}
.tb-card{box-sizing:border-box;padding:16px 16px 18px;border:1px solid var(--today-rule);border-radius:16px;background:var(--today-surface)}
.tb-card-title{margin:0 0 6px;font:700 .9375rem/1.35 Manrope,var(--sans);color:var(--today-text)}
[data-tbpage] .tb-card>h2.reminder-block-title{margin:0 0 14px;padding-inline:0}
.tb-paused,.tb-preview{padding:14px}
.tb-chips{display:flex;flex-wrap:wrap;gap:8px}
.tb-chips .reminder-chip{flex:none;min-height:44px;padding:0 20px;border-radius:999px;font-weight:600;font-size:.875rem}
/* The bars: prayed and prayed late stacked on one track, with the figures as text for everyone (the bars themselves are decoration). */
.tb-bars{container:tbbars/inline-size;display:grid;gap:14px;margin:0;padding:0;list-style:none}
.tb-bars li{position:relative;display:grid;grid-template-columns:minmax(0,4.5rem) minmax(0,1fr) minmax(0,4rem);align-items:center;gap:10px}
/* With enlarged text, or a very narrow card, there is no room for the bar between the name and the figure: the figure moves up beside the name and the bar takes its own line. */
@container tbbars (max-width:14.75rem){.tb-bars li{grid-template-columns:minmax(0,1fr) minmax(0,auto);row-gap:6px}.tb-bar-name{grid-area:1/1}.tb-bar-value{grid-area:1/2}.tb-meter{grid-area:2/1/auto/-1}}
.tb-bar-name{font:600 .875rem/1.2 Manrope,var(--sans);color:var(--today-text);overflow-wrap:anywhere}
.tb-meter{display:flex;height:10px;border-radius:5px;background:#e6ebe4;overflow:hidden}
.tb-meter i{display:block;flex:none;height:100%}
.tb-fill-prayed{background:#2f7d4f}
.tb-fill-late{background:#d4a648}
.tb-bar-value{font:700 .8125rem/1.2 Manrope,var(--sans);color:var(--today-text);text-align:end;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tb-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:16px;font:600 .75rem/1 Manrope,var(--sans);color:var(--today-muted)}
.tb-legend span{display:inline-flex;align-items:center;gap:7px}
.tb-swatch{display:block;width:12px;height:12px;border-radius:3px}
.tb-most{display:flex;align-items:flex-start;gap:12px}
.tb-tile{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:10px;background:#f6efdc;color:#7a5c16}
.tb-tile svg{width:24px;height:24px;stroke-width:1.7}
.tb-most-text{flex:1;min-width:0}
.tb-most-text h2{margin:0;font:700 .9375rem/1.35 Manrope,var(--sans);color:var(--today-text)}
.tb-most-text h2:focus,.tb-ask h2:focus{outline:none}
.tb-most-text p{margin:4px 0 0;font:400 .875rem/1.45 var(--sans);color:var(--today-muted)}
.tb-most-text p+p{margin-top:2px}
[data-tbpage] .tb-try-title{margin:18px 0 2px;padding-inline:0}
.tb-try .set-row{min-height:60px;padding-inline:0}
.tb-try .set-row+.set-row{border-top-width:1px}
.tb-center{display:flex;justify-content:center;margin-top:4px}
.tb-quiet{min-height:44px;padding:0 16px;border:0;background:transparent;color:var(--green);font:600 .875rem Manrope,var(--sans);cursor:pointer}
.tb-banner .tb-quiet{padding-inline:8px;font-weight:700}
.tb-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;padding:0 16px;border:0;border-radius:12px;font:700 .9375rem Manrope,var(--sans);text-decoration:none;box-sizing:border-box;cursor:pointer}
.tb-btn.secondary{border:1px solid var(--set-line,#cfd8cc);background:var(--today-surface);color:var(--today-text)}
.tb-btn:disabled{opacity:.6;cursor:default}
.tb-btn:focus-visible,.tb-quiet:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.tb-danger{color:#9a3d12}
.tb-delete-go{background:#9a3d12;color:#fff}
.tb-actions{display:flex;gap:10px;margin-top:14px}
.tb-actions .tb-btn{flex:1;min-width:0}
.tb-buttons{display:grid;gap:10px}
.tb-ask{box-sizing:border-box;padding:16px;border:1px solid var(--today-rule);border-radius:16px;background:var(--today-surface)}
.tb-ask h2{margin:0;font:700 .9375rem/1.3 Manrope,var(--sans);color:var(--today-text)}
.tb-ask p{margin:6px 0 0;font:400 .875rem/1.5 var(--sans);color:var(--today-muted)}
.tb-banner{display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;background:var(--today-bg)}
.tb-banner-icon{flex:none;width:22px;height:22px;color:var(--today-muted)}
.tb-banner-text{flex:1;min-width:0;font:600 .875rem/1.3 Manrope,var(--sans)}
.tb-about>*{padding:14px}
.tb-about h2{margin:0;font:700 .8125rem/1.4 Manrope,var(--sans);color:var(--today-text)}
.tb-about p{margin:4px 0 0;font:400 .875rem/1.5 var(--sans);color:var(--today-muted)}
.tb-rules>*{padding:18px 16px}
.tb-rules h2{margin:0;font:700 .9375rem/1.3 Manrope,var(--sans);color:var(--today-text)}
.tb-rules p{margin:5px 0 0;font:400 .875rem/1.5 var(--sans);color:var(--today-muted)}
.tb-file{position:relative;cursor:pointer}
.tb-file:has(input:focus-visible){outline:3px solid var(--green);outline-offset:-3px}
.tb-danger-row .set-text strong{color:#9a3d12}
.tb-confirm{padding:14px}
.tb-confirm p{margin:0;font:500 .875rem/1.45 Manrope,var(--sans)}
.tb-indent{padding-inline-start:30px}
.tb-card-canvas{display:block;width:300px;max-width:100%;height:auto;aspect-ratio:1;margin-inline:auto;border-radius:20px;background:#244d3d;box-shadow:0 8px 24px #14281e2e}
.tb-lock{display:flex;align-items:flex-start;gap:10px;margin:0 4px;font:500 .8125rem/1.45 Manrope,var(--sans);color:var(--today-muted)}
.tb-lock svg{flex:none;width:18px;height:18px;margin-top:1px;color:var(--green)}
/* Insights opens a prayer's Reminders page on the row it suggests: a gold outline with its label above. As with every highlight on a rounded
   group, the first row rounds only its top corners, the last only its bottom ones, and a lone row all four. */
.reminder-suggested-label{margin:0 0 6px 4px;font:700 .75rem/1.3 Manrope,var(--sans);color:#7a5c16}
.reminder-switch-row.reminder-suggested{outline:2px solid #d4bc88;outline-offset:-2px}
.reminder-switch-row.reminder-suggested:first-child{border-start-start-radius:15px;border-start-end-radius:15px}
.reminder-switch-row.reminder-suggested:last-child{border-end-start-radius:15px;border-end-end-radius:15px}
/* Night: the older stylesheets set every colour and border, so these rules name the page. */
html[data-theme=night] #screenBody :is(.tb-note,.tb-print,.tb-caption,.tb-text,.tb-lock,.tb-lock span,.tb-legend,.tb-legend span,.tb-most-text p,.tb-ask p,.tb-about p,.tb-rules p,.tb-banner-icon){color:var(--n-muted)!important}
html[data-theme=night] #screenBody :is(.tb-quiet,.tb-lock svg){color:var(--n-accent)!important}
html[data-theme=night] #screenBody .tb-tile{background:#3a3220}
html[data-theme=night] #screenBody :is(.tb-tile,.tb-tile svg){color:#d7be81!important}
html[data-theme=night] #screenBody :is(.tb-danger,.tb-danger-row .set-text strong){color:#f0a58a!important}
html[data-theme=night] #screenBody .tb-meter{background:#3e484f}
html[data-theme=night] #screenBody .tb-fill-prayed{background:#7cc49a}
html[data-theme=night] #screenBody .tb-fill-late{background:#e0b65c}
html[data-theme=night] #screenBody .tb-btn.secondary{background:var(--n-surface)!important}
html[data-theme=night] #screenBody :is(.tb-btn,.tb-quiet):focus-visible,html[data-theme=night] #screenBody .tb-file:has(input:focus-visible){outline-color:var(--n-accent)}
html[data-theme=night] #screenBody .tb-banner{background:var(--n-bg)}
html[data-theme=night] #screenBody .reminder-suggested-label{color:#d7be81!important}
html[data-theme=night] #screenBody .reminder-switch-row.reminder-suggested{outline-color:#a58a4d}
@media(forced-colors:active){
  .tb-meter{border:1px solid ButtonText;background:Canvas}
  .tb-fill-prayed,.tb-swatch.tb-fill-prayed{forced-color-adjust:none;background:Highlight}
  .tb-fill-late,.tb-swatch.tb-fill-late{forced-color-adjust:none;background:GrayText}
  .tb-btn,.tb-btn.secondary{border:1px solid ButtonText}
  .tb-delete-go{forced-color-adjust:none;background:ButtonText;color:ButtonFace}
  .tb-btn:focus-visible,.tb-quiet:focus-visible,.tb-file:has(input:focus-visible){outline-color:Highlight}
  .tb-card,.tb-ask,.tb-card-canvas{border:1px solid CanvasText}
  .reminder-switch-row.reminder-suggested{outline-color:Highlight}
}
/* ---- end T3 ---- */