/* Approved UI review: existing prayer calculations, counter and compass are shared. */
.header-tools{min-height:44px;padding:8px 12px;border:1px solid var(--today-rule);border-radius:8px;background:var(--today-surface);color:var(--today-text);font:500 .8125rem/1.4 Manrope,var(--sans)}
.header-tools[aria-pressed=true]{background:var(--today-next-bg)}
.screen-view:not([data-screen=calendar]) .screen-head{align-items:center;gap:12px}
.screen-view:not([data-screen=calendar]) .screen-head h1{margin:0}
.screen-head>div{min-width:0}
.screen-back{width:44px;height:44px;padding:0;margin:0;border-radius:50%;background:var(--today-surface);color:var(--today-text)}
.settings-section-label{margin:24px 0 8px;font:500 .8125rem/1.5 Manrope,var(--sans);color:var(--today-muted)}
.settings-section-label:first-child{margin-top:0}
.settings-list{margin:0 0 20px;border:1px solid var(--today-rule);border-radius:13px;background:var(--today-surface);overflow:hidden}
.settings-list>.link-row,.settings-list>.settings-disclosure>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:63px;margin:0;padding:13px 14px;border:0;border-radius:0;background:transparent;color:var(--today-text);font:500 .9375rem/1.6 Manrope,var(--sans);text-align:start}
.settings-list>:not(:first-child){border-top:1px solid var(--today-rule)}
.settings-list>.settings-disclosure{margin:0;padding:0}
.settings-list>.settings-disclosure[open]>summary{margin-bottom:0}
.settings-row-label{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.settings-row-label small,.settings-list .link-row small{display:block;max-width:none;overflow:visible;text-overflow:clip;white-space:normal;color:var(--today-muted);font:400 .75rem/1.6 Manrope,var(--sans)}
.settings-inset{padding:0 14px 16px;min-width:0}
.settings-inset>p{font-size:.875rem;line-height:1.6}
.settings-inset .settings-group{padding:0;border:0;background:transparent;margin-top:18px}
.settings-inset .settings-heading{font:500 .9375rem/1.6 Manrope,var(--sans)}
.settings-inset .link-list{margin:0}
.settings-inset .field{min-width:0}
.settings-inset input,.settings-inset select{min-width:0;max-width:100%}
.settings-appearance{margin:0;gap:10px}
.settings-appearance .appearance-choice{padding:10px;font-family:Manrope,var(--sans)}
.settings-appearance .appearance-label{font-size:.9375rem;font-weight:500;line-height:1.4}
.settings-appearance .appearance-choice small{margin-top:auto;font-size:.75rem;font-weight:400;line-height:1.5}
:is([data-screen=settings],[data-screen=prayer-settings]) .settings-disclosure[open]>summary .settings-row-label small{display:none}
.settings-choice-field{border:0;padding:0;margin:16px 0;min-width:0}
.settings-choice-field>legend{padding:0;margin-bottom:8px;font:500 .9375rem/1.5 Manrope,var(--sans)}
:is([data-screen=settings],[data-screen=prayer-settings]) .settings-inset .field>span{font-weight:500}
.settings-clock,.settings-language{margin:0}
.settings-segmented{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px;border-radius:10px;background:var(--today-bg)}
.settings-segment{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;min-width:0;padding:8px;border:1px solid transparent;border-radius:7px;cursor:pointer;font:500 .875rem/1.5 Manrope,var(--sans);text-align:center;color:var(--today-muted)}
.settings-segment input{position:absolute;opacity:0;width:1px;height:1px}
.settings-segment:has(input:checked){background:var(--today-next-bg);border-color:var(--green);color:var(--green)}
.settings-segment:has(input:focus-visible){outline:3px solid var(--green);outline-offset:2px}
:is([data-screen=settings],[data-screen=prayer-settings]) #screenBody :is(.field,.toggle-row,.privacy-note){font-family:Manrope,var(--sans);font-weight:400}
:is([data-screen=settings],[data-screen=prayer-settings]) #screenBody .privacy-note{font-size:.75rem;color:var(--today-muted)}
:is([data-screen=settings],[data-screen=prayer-settings]) details>summary{font-family:Manrope,var(--sans);font-weight:500;color:var(--today-text)}
:is([data-screen=settings],[data-screen=prayer-settings]) .prayer-adjustment{border:0;border-top:1px solid var(--today-rule);padding:14px 0;margin:18px 0 0}
:is([data-screen=settings],[data-screen=prayer-settings]) .prayer-adjustment legend{font:500 .9375rem/1.4 Manrope,var(--sans);padding-inline:0 8px}
:is([data-screen=settings],[data-screen=prayer-settings]) .prayer-adjustment-fields{grid-template-columns:minmax(0,1.25fr) repeat(2,minmax(0,1fr));gap:8px}
:is([data-screen=settings],[data-screen=prayer-settings]) .prayer-adjustment-fields .field:first-child{grid-column:auto}
:is([data-screen=settings],[data-screen=prayer-settings]) .prayer-adjustment-fields :is(input,select){padding-inline:8px}
:is([data-screen=settings],[data-screen=prayer-settings]) .prayer-adjustment-preview{font-weight:400;color:var(--today-muted)}
.tools-list .link-row{min-height:82px}
.tool-list-icon{display:grid;place-items:center;flex:none!important;width:40px;height:40px;border-radius:10px;background:var(--today-next-bg);color:var(--green)}
.reminder-item:not(.open)>.reminder-row:hover{background:transparent!important}
.reminder-extras{margin-top:22px}
.reminder-extras .adhan-player-options{margin:0;padding:0;border:0;background:transparent}
.reminder-extras #adhanPlayerTitle{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.reminder-extras .privacy-note{font-size:.8125rem}
.reminder-weekdays button span,.reminder-weekdays button small{font-size:.6875rem}
.reminder-weekdays{grid-template-columns:repeat(auto-fit,minmax(44px,1fr))}
.calendar-table td,.calendar-table th{text-align:center;vertical-align:middle}
.location-privacy>p{padding:0 14px;margin:12px 0 0}
.refined-travel-current{display:block;padding:18px;background:var(--today-surface);border:1px solid var(--today-rule);border-radius:13px}
.refined-travel-current h2{font:normal 1.5rem/1.3 Georgia,serif;margin:7px 0}
.refined-travel-current span{display:block}
.travel-zone-status{display:flex!important;align-items:center;gap:7px;margin-top:12px}
.travel-zone-status svg{width:17px;height:17px}
.travel-actions{display:grid;gap:12px;margin:18px 0}
.travel-explanation{margin:20px 0 24px}
.travel-explanation p{font-size:.875rem;line-height:1.6}
[data-screen=travel] .settings-group{padding:12px 16px;border-color:var(--today-rule);background:var(--today-surface)}
[data-screen=travel] .settings-group .privacy-note{margin:6px 0 0}
[data-screen=ramadan] .screen-head{margin-top:6px;margin-bottom:24px}
[data-screen=ramadan] .ramadan-hero{margin:0 0 24px;padding:22px 18px;border-radius:13px}
.ramadan-hero h2{font:normal 1.6875rem/1.3 Georgia,serif;margin:10px 0 24px;color:inherit}
.ramadan-timetable{background:var(--today-surface);border:1px solid var(--today-rule);border-radius:13px;margin-bottom:20px;overflow:hidden}
.ramadan-table-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 18px 18px}
.ramadan-table-heading h2{font:normal 1.375rem/1.3 Georgia,serif;margin:0 0 3px}
.ramadan-table-heading small{display:block;font:400 .75rem/1.6 Manrope,var(--sans);color:var(--today-muted)}
.ramadan-table-heading .button{flex:none;min-height:44px;padding:9px 10px;font:500 .8125rem/1.4 Manrope,var(--sans);white-space:nowrap}
.ramadan-table-heading .button svg{width:16px;height:16px}
.ramadan-table-wrap{padding:0 16px 8px}
.ramadan-table-wrap .table-scroll{border:0;border-radius:0;background:transparent}
.ramadan-table-wrap .ramadan-table{width:100%;min-width:0;table-layout:fixed;font:400 .8125rem/1.6 Manrope,var(--sans);font-variant-numeric:tabular-nums}
.ramadan-table-wrap .ramadan-table :is(th,td){text-align:center;vertical-align:middle;padding:13px 3px;font-weight:400;white-space:normal}
.ramadan-table-wrap .ramadan-table thead th{font-size:.75rem;font-weight:500}
.ramadan-table-wrap .ramadan-table :is(th,td):first-child{position:static;width:auto}
.ramadan-table-wrap .ramadan-table tbody tr:last-child :is(th,td){border-bottom:0}
.ramadan-date-editor{margin:0 18px 14px;padding-bottom:18px;border-bottom:1px solid var(--today-rule)}
.ramadan-date-editor .inline-actions{margin-top:18px}
.ramadan-date-editor .privacy-note{font-size:.75rem;margin:12px 0 0}
.ramadan-date-help{padding:4px 18px;border-top:1px solid var(--today-rule)}
.ramadan-date-help>summary{display:list-item;min-height:44px;padding:10px 0;font-size:.8125rem;font-weight:500;cursor:pointer}
.ramadan-date-help .privacy-note{margin:0 0 12px;font-size:.75rem}
.reminder-test-progress{display:flex;gap:5px;margin-bottom:26px}
.reminder-test-progress span{height:4px;flex:1;background:var(--today-rule);border-radius:2px}
.reminder-test-progress .done{background:var(--green)}
.guided-test{padding:20px 18px;border:1px solid var(--today-rule);border-radius:13px;background:var(--today-surface)}
.guided-test>small{font-size:.75rem;color:var(--today-muted)}
.guided-test h2{font:normal 1.5rem/1.3 Georgia,serif;margin:12px 0 20px}
.guided-test .privacy-note{font-size:.8125rem;line-height:1.6}
.test-watch-choice{margin:0 0 20px}
.test-result-label{font-size:.8125rem;color:var(--today-muted)}
.guided-test .answer-buttons{flex-wrap:wrap;gap:10px}
html[data-theme=night] .mobile-nav button.active{background:#2b3b34!important}
html[data-theme=night] .mobile-nav button.active svg{background:transparent!important}
html[data-theme=night] .settings-section-label{color:var(--today-muted)!important}
html[data-theme=night] :is([data-screen=settings],[data-screen=prayer-settings]) details>summary{color:var(--today-text)!important}
@media(max-width:720px){
  .mobile-nav button.active{background:#e8efdf;border-radius:12px}
  .mobile-nav button.active svg{background:transparent;padding:0;border-radius:0}
  .mobile-nav{padding-inline:6px;gap:4px}
  .header-tools{padding-inline:11px}
}
.native-app .mobile-nav button.active{background:var(--today-next-bg);border-radius:12px}
.native-app .mobile-nav button.active svg{background:transparent}
@media(max-width:370px){
  .top-actions{gap:6px}
  .settings-list>.link-row,.settings-list>.settings-disclosure>summary{padding-inline:12px}
  .ramadan-table-heading{padding-inline:16px}
  .ramadan-table-wrap{padding-inline:12px}
}

/* Settings rows share one forward arrow; expanded choices point down. */
[data-screen=settings] .settings-disclosure>summary::after{content:none}
[data-screen=settings] .settings-list .link-row>svg:last-child,
[data-screen=settings] .settings-disclosure>summary>svg{width:18px;height:18px;flex:none;margin:0}
[data-screen=settings] .settings-disclosure[open]>summary>svg{transform:rotate(90deg)}
[dir=rtl] [data-screen=settings] .settings-disclosure:not([open])>summary>svg{transform:rotate(180deg)}
.system-info-block .toggle-row{gap:16px;padding:12px 14px;margin:0;border:0;min-height:44px;font:400 .75rem/1.6 Manrope,var(--sans)}
.system-info-block .toggle-row+.toggle-row{border-top:1px solid var(--today-rule)}
.system-info-block .system-info-value{max-width:65%;font-weight:400}
.prayer-settings-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;background:var(--today-rule);border-radius:11px}
.prayer-settings-tabs button{border:1px solid transparent;border-radius:8px;min-height:44px;padding:8px 4px;background:transparent;color:var(--today-muted);font:500 .8125rem/1.4 Manrope,var(--sans)}
.prayer-settings-tabs [aria-selected=true]{background:var(--today-surface);border-color:var(--today-rule);color:var(--today-text)}
.prayer-settings-panel{margin:16px 0;padding:18px 16px;border:1px solid var(--today-rule);border-radius:13px;background:var(--today-surface)}
.prayer-settings-panel[hidden]{display:none}
.prayer-settings-panel .field{min-width:0}
.prayer-settings-panel .field>span{font-weight:500}
.prayer-settings-panel .field:first-child{margin-top:0}
.prayer-settings-panel :is(input,select){min-width:0;max-width:100%}
.prayer-settings-panel .privacy-note{font-size:.75rem;line-height:1.7}
.prayer-settings-panel .prayer-adjustment:first-child{margin-top:0;border-top:0}
.prayer-settings-actions{display:flex;align-items:center;gap:14px;margin:18px 0 24px}
.prayer-settings-actions [role=status]{color:var(--today-muted);font-size:.75rem}
.location-privacy{margin-top:44px;padding-top:18px;border-top:1px solid var(--today-rule)}
.location-privacy p{margin:0;padding:0;color:var(--today-muted);font:400 .75rem/1.8 Manrope,var(--sans)}
.location-confirmation{width:min(380px,calc(100% - 40px));padding:30px 24px;border:1px solid var(--today-rule);border-radius:20px;background:var(--today-surface);color:var(--today-text);text-align:center}
.location-confirmation::backdrop{background:rgb(15 30 23 / .48)}
.location-confirm-icon{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 20px;border:1px solid var(--today-rule);border-radius:50%;background:var(--today-next-bg);color:var(--green)}
.location-confirm-icon svg{width:27px;height:27px}
.location-confirmation h2{margin:0 0 12px;font:400 1.875rem/1.3 Georgia,serif;overflow-wrap:anywhere}
.location-confirmation p{margin:0 0 28px;color:var(--today-muted);font:400 .9375rem/1.7 Manrope,var(--sans)}