/* The approved Single surface website layout. Phone/native styles stay separate. */
.desktop-dashboard,.desktop-hero-art,.desktop-hero-location,.desktop-top-nav{display:none}
.desktop-main{display:contents}
@media(min-width:721px){
 body:not(.native-app) .sidebar{display:none}
 body:not(.native-app) main{margin:0}
 body:not(.native-app) .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);height:auto;min-height:68px;padding:8px 28px;gap:12px 28px;background:var(--today-surface)}
 body:not(.native-app) .top-wordmark{display:flex;align-items:center;gap:8px;flex:none}
 body:not(.native-app) .top-wordmark .brand-icon{width:38px;height:38px}
 body:not(.native-app) .top-wordmark .brand-name,body:not(.native-app) .top-wordmark .brand-second{font-size:20px}
 body:not(.native-app) .top-caption{display:none}
 body:not(.native-app) .top-actions{display:flex;align-items:center;justify-self:end;gap:12px;min-width:0;margin-inline-start:0}
 body:not(.native-app) .top-actions .location-button{min-height:44px;font-size:.875rem;max-width:220px}
 body:not(.native-app) #topCity{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body:not(.native-app) .top-actions>.icon-button{height:44px;width:44px}
 body:not(.native-app) .desktop-top-nav{display:flex;align-items:center;justify-self:center;gap:20px;margin-inline:0}
 body:not(.native-app) .desktop-top-nav button,body:not(.native-app) .desktop-more>summary{display:flex;align-items:center;min-height:44px;border:0;background:transparent;padding:8px 0;font-size:.875rem;color:var(--today-muted);white-space:nowrap;text-decoration:none;cursor:pointer}
 body:not(.native-app) .desktop-top-nav .active{font-weight:700;color:var(--today-text);box-shadow:0 2px var(--today-current)}
 body:not(.native-app) .desktop-more{position:relative}
 body:not(.native-app) .desktop-more:has(.active)>summary{font-weight:700;color:var(--today-text);box-shadow:0 2px var(--today-current)}
 body:not(.native-app) .desktop-more>summary{gap:6px;list-style:none}
 body:not(.native-app) .desktop-more>summary::-webkit-details-marker{display:none}
 body:not(.native-app) .desktop-more>summary svg{width:13px;height:13px;transform:rotate(90deg)}
 body:not(.native-app) .desktop-more-links{position:absolute;z-index:30;top:100%;inset-inline-end:0;min-width:200px;padding:8px 16px;background:var(--today-surface);border:1px solid var(--today-rule);border-radius:10px;box-shadow:0 8px 24px #0002}
 body:not(.native-app) .desktop-more-links button{width:100%;text-align:start;white-space:normal}
 body:not(.native-app) .desktop-more-links button:hover{color:var(--today-text);text-decoration:underline}
 body:not(.native-app) #todayView.page-wrap{max-width:1160px;padding:22px 28px}
 body:not(.native-app) #todayView .page-heading{margin-bottom:18px}
 body:not(.native-app) #todayView .page-heading h1{font-size:2rem;line-height:1.3;margin:0}
 body:not(.native-app) #todayView .today-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:stretch}
 body:not(.native-app) #todayView .desktop-main,body:not(.native-app) #todayView .desktop-dashboard{display:contents}
 body:not(.native-app) #todayView .hero{grid-column:1/-1;grid-row:1;position:relative;isolation:isolate;border-radius:16px 16px 0 0}
 body:not(.native-app) #todayView .hero-content{position:relative;z-index:2;min-height:238px;width:100%;padding:22px 28px}
 body:not(.native-app) #todayView .hero-main{display:block;width:55%;margin:0}
 body:not(.native-app) #todayView .hero-summary{display:block}
 body:not(.native-app) #todayView .next-name h2{font-size:2.375rem}
 body:not(.native-app) #todayView .next-name>span{font-size:1.3125rem}
 body:not(.native-app) #todayView .sky-scene{display:none}
 body:not(.native-app) #todayView .hero-next-footer{width:55%;margin-top:18px;padding:10px 0;border-block-start:1px solid #ffffff20;border-block-end:0;flex-wrap:nowrap}
 body:not(.native-app) #todayView .hero-next-footer .countdown-wrap{max-width:none;margin:0;font-size:.8125rem;min-width:0}
 body:not(.native-app) #todayView .hero-next-footer .hero-time{margin:0;font-size:3.125rem;line-height:1.2;white-space:nowrap;text-align:end}
 body:not(.native-app) #todayView .hero-time small{font-size:.75rem}
 body:not(.native-app) #todayView .day-thread{display:block;max-width:55%;margin-top:17px}
 body:not(.native-app) #todayView .day-thread-track{height:32px}
 body:not(.native-app) #todayView .day-thread-labels{height:17px;font-size:.6875rem}
 body:not(.native-app) #todayView .desktop-hero-art{position:absolute;z-index:0;inset-block-end:0;inset-inline-end:0;width:40%;height:100%;object-fit:contain;object-position:right bottom;opacity:.9;pointer-events:none}
 body:not(.native-app) #todayView .desktop-art-day{display:block}
 body:not(.native-app) #todayView .hero[data-sky=night] .desktop-art-day{display:none}
 body:not(.native-app) #todayView .hero[data-sky=night] .desktop-art-night{display:block}
 body:not(.native-app) #todayView .prayer-section{grid-column:1/-1;grid-row:2;border-radius:0 0 16px 16px;border-top:0;min-width:0}
 body:not(.native-app) #todayView .timetable-heading{padding:10px 8px}
 body:not(.native-app) #todayView .date-nav{min-height:56px;max-width:480px}
 body:not(.native-app) #dateLine{font-size:.9375rem}
 body:not(.native-app) #dateLine .date-hijri{font-size:.75rem}
 body:not(.native-app) #todayView .date-return-slot{grid-column:1/-1;grid-row:3;min-height:44px}
 body:not(.native-app) .desktop-panel{min-width:0;padding:20px;border:1px solid var(--today-rule);border-radius:14px;background:var(--today-surface);color:var(--today-text)}
 body:not(.native-app) .desktop-panel h2{font:normal 1.5rem/1.25 Georgia,serif;margin:0 0 9px}
 body:not(.native-app) .desktop-panel>p{font-size:.9375rem;line-height:1.6;margin:0 0 12px;color:var(--today-muted)}
 body:not(.native-app) #todayView .desktop-reminders{grid-column:1;grid-row:4;margin-inline-end:10px;display:flex;flex-direction:column}
 body:not(.native-app) .desktop-panel-mark{display:none}
 body:not(.native-app) .desktop-reminder-status{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;list-style:none;padding:0;margin:14px 0 16px;text-align:center}
 body:not(.native-app) .desktop-reminder-status li{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.8125rem}
 body:not(.native-app) .desktop-reminder-status strong{font-weight:400;color:var(--today-muted)}
 body:not(.native-app) .desktop-reminder-status .enabled{font-weight:700;color:var(--today-text)}
 body:not(.native-app) .desktop-panel .button{font-size:.9375rem;min-height:44px;white-space:normal}
 body:not(.native-app) .desktop-phone-link{display:flex;justify-content:center;min-height:44px;margin:7px auto 0;font-size:.8125rem}
 body:not(.native-app) #todayView .desktop-dashboard .name-card{display:flex;grid-column:2;grid-row:4;margin-inline-start:10px;padding:20px;min-width:0;background:var(--today-surface);border-color:var(--today-rule)}
 body:not(.native-app) .desktop-dashboard .name-card::after{display:none}
 body:not(.native-app) .desktop-dashboard .name-card-top{flex-wrap:wrap;gap:6px}
 body:not(.native-app) .desktop-dashboard .name-arabic{font-size:2rem;margin-top:12px}
 body:not(.native-app) .desktop-dashboard .name-translit{font-size:1.625rem;margin:6px 0}
 body:not(.native-app) .desktop-dashboard .name-meaning{font-size:.9375rem;line-height:1.5}
 body:not(.native-app) .desktop-dashboard .name-card-actions{gap:12px;flex-wrap:wrap;padding-top:14px}
 body:not(.native-app) .desktop-dashboard .name-card-actions .button{font-size:.875rem;min-height:44px;white-space:normal}
 body:not(.native-app) #todayView .desktop-dhikr{display:none}
 [dir=rtl] body:not(.native-app) #todayView .desktop-hero-art{transform:scaleX(-1)}
 @container(min-width:740px){
  body:not(.native-app) #prayerCards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;padding:0 18px 18px}
  body:not(.native-app) #prayerCards .prayer-time-card{display:flex;flex-direction:column;justify-content:space-between;min-height:132px;gap:10px;padding:12px 5px 5px;border:0;border-inline-end:1px solid var(--today-rule);border-radius:0;text-align:center}
  body:not(.native-app) #prayerCards .prayer-time-card:last-child{border-inline-end:0}
  body:not(.native-app) #prayerCards .prayer-name{font-size:.9375rem;line-height:1.4;min-height:40px}
  body:not(.native-app) #prayerCards .prayer-hour{font-size:1.5625rem;text-align:center;line-height:1.25}
  body:not(.native-app) #prayerCards .prayer-hour .period{font-size:.6875rem}
  body:not(.native-app) #prayerCards .upcoming .prayer-name{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:flex-start}
  body:not(.native-app) #prayerCards .prayer-until::before{content:none}
 }
}
@media(min-width:721px) and (max-width:1100px){
 body:not(.native-app) .desktop-top-nav{grid-column:1/-1;grid-row:2;justify-content:center;gap:28px}
 body:not(.native-app) .topbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 20px}
 body:not(.native-app) .top-actions{grid-column:2;grid-row:1}
}
@media(min-width:721px) and (max-width:850px){
 body:not(.native-app) #todayView .hero-main,body:not(.native-app) #todayView .hero-next-footer{width:62%}
 body:not(.native-app) #todayView .day-thread{max-width:62%}
 body:not(.native-app) #todayView .desktop-hero-art{width:32%}
 body:not(.native-app) #todayView .hero-next-footer .hero-time{font-size:2.5rem}
}

/* Location and message improvements on the website desktop view. */
@media(min-width:721px){
 body:not(.native-app) .top-wordmark{text-decoration:none}
 body:not(.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:not(.native-app) .toast>div{flex:none;min-width:0;overflow-wrap:anywhere}
 body:not(.native-app) .toast>button{align-self:flex-end}
 body:not(.native-app) .toast.has-action{flex-flow:row wrap;justify-content:flex-end}
 body:not(.native-app) .toast.has-action>div{flex:1 0 100%}
 body:not(.native-app) .toast.has-action>button{align-self:auto}
}
/* Dhikr (workstream D): the mode switch fills the page column on the website, like the phone. */
@media(min-width:721px){
 body:not(.native-app) .dhikr-page .dhikr-modes{display:flex}
 body:not(.native-app) .dhikr-page .dhikr-modes button{flex:1}
}

/* Practise keeps the width of the 99 Names page it belongs to, and the tool cards on Today keep their contents at the top
   (a card with a shorter description would otherwise spread its rows down). */
@media(min-width:721px){
 body:not(.native-app) [data-screen=practice] #screenBody>*{max-width:560px}
 body:not(.native-app) .daily-tools .tool-card{align-content:start}
}

/* The Calendar table on the website desktop view: a wider date column and a little more air. */
@media(min-width:721px){
 body:not(.native-app) .cal-date-col{width:116px}
 body:not(.native-app) .cal-table{font-size:.9375rem}
 body:not(.native-app) .cal-table thead th{height:44px;font-size:.75rem}
 body:not(.native-app) .cal-table thead th:first-child,body:not(.native-app) .cal-table tbody th{padding-inline-start:20px}
 body:not(.native-app) .cal-table tbody tr{height:46px}
 body:not(.native-app) .cal-date b{font-size:1rem}
 body:not(.native-app) .cal-date span,body:not(.native-app) .cal-hijri{font-size:.75rem}
 body:not(.native-app) .cal-table tbody tr.cal-note{height:34px}
 body:not(.native-app) .cal-table .cal-note td{font-size:.8125rem}
}

/* The icon on each prayer card is its alert: adhan, bell, or a faint crossed bell when it is off. */
@media(min-width:721px){
 body:not(.native-app) #prayerCards .prayer-bell svg{color:inherit}
 body:not(.native-app) #prayerCards .prayer-bell.on{color:var(--green)}
 body:not(.native-app) #prayerCards .prayer-bell.alert-off{color:#848f87!important}
}

/* The tracker pages are one column of 580px; their heading (and its gear) stays in that column. */
@media(min-width:721px){
 body:not(.native-app) #screenView:is([data-screen=tracker],[data-screen=tracker-history],[data-screen=tracker-day],[data-screen=tracker-milestones]) .screen-head{max-width:580px}
}

/* The tracker's tick circles (class tk-row, see "T1: tracker on Today" in mobile-feedback.css) on the website's card layout: the circle leads each card, centred. */
@media(min-width:721px){
 @container(min-width:740px){
  body:not(.native-app) #prayerCards .tk-row>:first-child{align-self:center}
  body:not(.native-app) #prayerCards .tk-row>.prayer-name{margin-inline-start:0}
 }
}