/* Prayer-core pages: prayer times, qibla, tahajjud, qada, Ramadan calendar, Hijri date. Loaded after ak.css. */

/* Times never break across two lines ("4:59" over "AM"). */
.times td.t{white-space:nowrap}
.pc_today td.t{text-align:right}

/* Answer first on a phone: tighter head and a lede that fits in three or four lines. */
.pc_date{display:block;margin-block-end:.35rem;font-weight:500;color:var(--text)}
@media (max-width:767px){
  .page_head .pc_lede{font-size:1rem;line-height:1.55}
  .section.pc_first{padding-block-start:1.5rem}
  .pc_tool .tool_answer{padding:1rem 1.125rem}
  .pc_tool .times th,.pc_tool .times td{padding:.7rem .875rem}
}

/* 44px tap targets for segmented buttons and small buttons on these pages. */
.tool_ab button{min-height:2.75rem}
.btn.is-sm{min-height:2.75rem}

/* Place picker at the top of the tool, so it is on the first screen of a phone. */
.pc_pick{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem}
.pc_pick .btn{width:100%;justify-content:center}
@media (min-width:600px){.pc_pick{grid-template-columns:auto minmax(0,1fr);align-items:end}.pc_pick .btn{width:auto}}
.pc_link:empty{display:none}

/* Month timetable: compact, the day column stays in view while the row scrolls. */
.pc_monthbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;margin-block-end:.75rem}
.pc_month table.times.month{min-width:0}
.pc_month .times th,.pc_month .times td{padding:.6rem .55rem;white-space:nowrap}
.pc_month .times th small{display:block;font-size:.75rem}
.pc_month .times td.t{font-size:1rem;text-align:right}
.pc_month .times th:not(:first-child){text-align:right}
.pc_day{position:sticky;left:0;z-index:1;background:var(--page)}
.pc_month thead th:first-child{position:sticky;left:0;z-index:2}
.pc_day small{display:block;margin-block-start:.15rem;font:400 .75rem/1.2 var(--font);color:var(--muted)}
.times tr.is-next td.pc_day{background:var(--lapis-tint)}
.pc_asrH .c-asrS,.pc_asrS .c-asrH{display:none}
.pc_mnote{margin-block-start:.75rem}
@media (min-width:768px){.pc_month .times th,.pc_month .times td{padding:.7rem .9rem}}

/* City list on /prayer-times: two columns on a phone instead of one long list. */
.pc_filter{max-width:26rem;margin-block-end:1rem}
.pc_filter input{font-size:1rem}
@media (max-width:599px){.pc_cities{grid-template-columns:repeat(2,minmax(0,1fr))}.pc_cities a{padding:.75rem .8rem;font-size:.9375rem}}
.pc_cities a[hidden]{display:none}

/* Hijri date converter: the month name needs its own row on narrow screens. */
@media (max-width:420px){.hj_three{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hj_three label:nth-child(2){grid-column:1 / -1;order:3}}

/* Ramadan and tahajjud tables: the columns people need first, compact on a phone. */
.rm_table .rm_day small{display:block;font:400 .75rem/1.2 var(--font);color:var(--muted)}
@media (max-width:767px){.rm_table td,.rm_table th{padding:.6rem .5rem}.rm_table td.t{font-size:1rem}}

/* Qada: the result stays in view while the form is filled in on a phone. */
.qd_bar{display:none}
@media (max-width:1023px){
  .qd_bar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-inline:-1px;padding:.75rem 1rem;border-radius:var(--r2) var(--r2) 0 0;background:var(--lapis);color:#fff}
  .qd_bar b{font:600 1.375rem/1 var(--display)}
  .qd_bar a{color:#fff;text-decoration:underline;font-size:.9375rem}
}
.qa_row{display:grid;grid-template-columns:5rem minmax(0,1fr) auto auto;align-items:center;gap:.5rem}
.qa_row .btn.is-sm{padding:0 .75rem}

/* Qibla: the place picker sits above the compass. */
.qb_pick{display:grid;gap:.75rem}

@media print{
  body:has([data-pt]) .page_head,body:has([data-pt]) .tool,body:has([data-pt]) .section:not(#month),body:has([data-pt]) .pc_monthbar,
  body:has([data-pt-live]) .page_head,body:has([data-pt-live]) .section:not(#month),body:has([data-pt-live]) .pc_monthbar,.tool_privacy{display:none!important}
  #month .head{display:block}
  .pc_day{position:static}
  .pc_month .times th,.pc_month .times td{padding:.25rem .4rem;font-size:9.5pt}
  .times tr.is-next td{background:none}
}
.pc_today .badge{white-space:normal;text-align:left}
.pc_monthbar .btn{flex:0 1 auto}
.rm_table .rm_n{width:auto}
@media (max-width:767px){.rm_table .rm_n{padding-inline-end:0}.rm_table td.rm_day{font-size:.9375rem}.pc_tool,.tool:has(.rm_table){padding:.75rem}}
.qa_gap{align-items:end}
.qa_gap [data-delgap]{grid-column:1 / -1;justify-self:start}

/* M7 (UX audit): on a phone the month table shows Day, Fajr, Dhuhr, Asr, Maghrib and Isha without sideways scrolling.
   Sunrise is dropped below 480px (it is in the table above for today), and the Asr column follows the chosen madhhab.
   Columns: 1 Day, 2 Fajr, 3 Sunrise, 4 Dhuhr, 5 Asr (Hanafi), 6 Asr (others), 7 Maghrib, 8 Isha. */
@media (max-width:480px){
  .pc_month .times th:nth-child(3),.pc_month .times td.c-sunrise{display:none}
  .pc_month .times th,.pc_month .times td{padding:.5rem .2rem}
  .pc_month .times td.t{font-size:.875rem;letter-spacing:-.01em}
  .pc_month .times th{font-size:.75rem}
  .pc_month .times th small{font-size:.625rem}
  .pc_month .times th:first-child,.pc_month .times td.pc_day{padding-inline-start:.45rem;padding-inline-end:.3rem}
  .pc_month .times td.pc_day{font-size:.8125rem}
}
/* If a narrow table still needs to scroll, a fade on the right edge shows that it does. */
@media (max-width:767px){
  .pc_month{background:linear-gradient(to right,var(--page) 30%,transparent),linear-gradient(to right,transparent,var(--page) 70%) 100% 0,radial-gradient(farthest-side at 0 50%,rgba(10,10,10,.14),transparent),radial-gradient(farthest-side at 100% 50%,rgba(10,10,10,.14),transparent) 100% 0;background-repeat:no-repeat;background-size:2.5rem 100%,2.5rem 100%,.75rem 100%,.75rem 100%;background-attachment:local,local,scroll,scroll}
}
@media print{.pc_month .times th:nth-child(3),.pc_month .times td.c-sunrise{display:table-cell}}

/* Ramadan hub (UX audit M8): sticky jump list, essentials links, cities folded by country. */
.rm_jump{position:sticky;top:4.25rem;z-index:30;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-block:1px solid var(--line)}
.rm_jump .wrap{display:flex;gap:.5rem;overflow-x:auto;padding-block:.6rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rm_jump .wrap::-webkit-scrollbar{display:none}
.rm_jump a{flex:none;padding:.4rem .85rem;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font-size:.875rem;line-height:1.2;text-decoration:none;white-space:nowrap}
.rm_jump a:hover,.rm_jump a:focus-visible{background:var(--lapis-tint);color:var(--lapis)}
#dates,#essentials,#times,#cities,#guide,#faq{scroll-margin-top:7.5rem}
.rm_cc{border-block-end:1px solid var(--line)}
.rm_cc:first-of-type{border-block-start:1px solid var(--line)}
.rm_cc summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .75rem;padding:1rem 0;cursor:pointer;font:600 1.0625rem/1.3 var(--display)}
.rm_cc summary small{font:400 .875rem var(--font);color:var(--muted)}
.rm_cc .tool_links{padding-block-end:1.25rem}
@media (max-width:767px){
  .rm_keys.lined,.rm_keys.lined[class*="c"]{--cols:2}
  .rm_keys.lined > *{padding:.8rem .75rem}
  .rm_keys .cell .h3{margin-block-start:.35rem;font-size:1rem;line-height:1.3}
  .rm_keys .cell p:not(.cell_num){display:none}
  .rm_keys .cell_num{font-size:.8125rem;line-height:1.3}
}