/* Layouts share the timetable, theme variables and background preferences. */
.presentation-settings, #template-fields { display: grid; gap: 14px; }
#translation-fields details { border-top: 1px solid var(--line); padding: 12px 0; }
#translation-fields summary { cursor: pointer; color: var(--text); line-height: 1.5; }
#translation-fields label { margin-top: 12px; }
.template-preview { height: 140px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; display: grid; gap: 8px; grid-template-columns: 1fr 1fr; background: var(--bg); }
.preview-header { grid-column: 1 / -1; width: 65%; height: 8px; background: var(--muted); }
.preview-clock { background: var(--accent); width: 65%; height: 28px; border-radius: 3px; }
.preview-next { border: 1px solid var(--accent); border-radius: 4px; }
.preview-prayers { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; }
.preview-prayers i { background: var(--panel); border: 1px solid var(--accent); border-radius: 3px; min-height: 26px; }
.preview-extras { display: none; }
[data-layout="noticeboard"] .preview-header { justify-self: center; }
[data-layout="noticeboard"] .preview-extras { display: block; grid-column: 1 / -1; height: 12px; background: var(--line); }
[data-layout="digital"] .preview-clock { width: 100%; height: 48px; }
[data-layout="digital"] .preview-prayers i { background: var(--accent); }
.template-extras { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.extra-time { flex: 1; min-width: 130px; border: 1px solid var(--line); padding: 1vh 1vw; border-radius: 8px; background: var(--card); text-align: center; }
.extra-time p { color: var(--muted); font-size: clamp(16px,1.15vw,25px); line-height: 1.5; }
.extra-time strong { display: block; margin-top: .4vh; font-size: clamp(24px,2vw,42px); font-weight: 500; font-variant-numeric: tabular-nums; }
.template-message { text-align: center; font-size: clamp(16px,1.35vw,30px); line-height: 1.6; overflow-wrap: anywhere; padding: 1vh 2vw; border-block: 1px solid var(--line); }
[lang="ta"], [lang="si"] { font-family: Arial, 'Noto Sans Tamil', 'Noto Sans Sinhala', sans-serif; }
.display:lang(ta) .eyebrow, .display:lang(si) .eyebrow, .iqama-screen:lang(ta) .eyebrow, .iqama-screen:lang(si) .eyebrow { letter-spacing: 0; }
.prayer-title h3 { overflow-wrap: anywhere; line-height: 1.5; }
.display:lang(ta) .prayer-title, .display:lang(si) .prayer-title { flex-wrap: wrap; }
.display:lang(ta) .next-body h2, .display:lang(si) .next-body h2 { line-height: 1.5; letter-spacing: 0; }
.iqama-screen:lang(ta) h2, .iqama-screen:lang(si) h2 { line-height: 1.5; }
.display:lang(ta) .prayer-label, .display:lang(si) .prayer-label { letter-spacing: 0; }

:root[data-template="noticeboard"] .display { gap: 1.7vh; padding: 2.5vh 3vw; }
:root[data-template="noticeboard"] .topbar { flex-direction: column; text-align: center; gap: 1vh; border-top: 4px solid var(--gold); padding-top: 1.4vh; }
:root[data-template="noticeboard"] .identity .wordmark, :root[data-template="noticeboard"] .identity-rule, :root[data-template="noticeboard"] .identity .eyebrow { display: none; }
:root[data-template="noticeboard"] h1 { color: var(--accent); font-size: clamp(24px,2.8vw,56px); }
:root[data-template="noticeboard"] .calendar { display: flex; justify-content: center; flex-wrap: wrap; gap: 1vw; }
:root[data-template="noticeboard"] .overview { padding: 0; grid-template-columns: 1.1fr 1fr; gap: 3vw; }
:root[data-template="noticeboard"] .clock-panel { text-align: center; }
:root[data-template="noticeboard"] .clock { justify-content: center; }
:root[data-template="noticeboard"] #clock-time { color: var(--gold); font-size: clamp(60px,8vw,160px); }
:root[data-template="noticeboard"] .next-panel { padding: 1.5vw; }
:root[data-template="noticeboard"] .next-body { margin: 1vw 0; }
:root[data-template="noticeboard"] .prayer-grid { gap: 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
:root[data-template="noticeboard"] .prayer-card { border: 0; border-right: 1px solid var(--line); border-radius: 0; text-align: center; padding: 1.2vw; min-height: 0; }
:root[data-template="noticeboard"] .prayer-card:last-child { border-right: 0; }
:root[data-template="noticeboard"] .prayer-title { justify-content: center; flex-wrap: wrap; margin-bottom: .5vh; }
:root[data-template="noticeboard"] .prayer-title h3 { font-size: clamp(18px,2vw,40px); }
:root[data-template="noticeboard"] .prayer-title .arabic { display: none; }
:root[data-template="noticeboard"] .adhan-time { font-size: clamp(26px,3vw,58px); }
:root[data-template="noticeboard"] .iqama-group { padding-top: 1vh; }
:root[data-template="noticeboard"] .iqama-time { font-size: clamp(24px,2.5vw,50px); }
:root[data-template="noticeboard"] .notice { padding: .5vh; }

:root[data-template="digital"] .display { gap: 2vh; }
:root[data-template="digital"] .topbar { justify-content: center; flex-wrap: wrap; text-align: center; }
:root[data-template="digital"] .identity .wordmark, :root[data-template="digital"] .identity-rule, :root[data-template="digital"] .identity .eyebrow { display: none; }
:root[data-template="digital"] h1 { font-size: clamp(24px,2.7vw,54px); }
:root[data-template="digital"] .calendar { width: 100%; text-align: center; font-size: clamp(16px,1.2vw,26px); }
:root[data-template="digital"] .calendar p { display: inline; margin: 0 .6em; }
:root[data-template="digital"] .overview { flex: 1; grid-template-columns: 1.15fr 1fr; gap: 3vw; }
:root[data-template="digital"] #clock-time { color: var(--accent); font-size: clamp(80px,13vw,260px); }
:root[data-template="digital"] .next-panel { background: var(--card); border-width: 2px; }
:root[data-template="digital"] .next-body { flex-direction: column; align-items: flex-start; }
:root[data-template="digital"] .countdown { font-size: clamp(32px,5vw,100px); color: var(--gold); }
:root[data-template="digital"] .timetable { flex: none; }
:root[data-template="digital"] .prayer-card { min-height: 0; background: var(--accent); color: var(--on-accent); border-radius: 3px; padding: 1vw; text-align: center; }
:root[data-template="digital"] .prayer-card.active { background: var(--gold); outline: 3px solid var(--text); outline-offset: -3px; }
:root[data-template="digital"] .prayer-title { justify-content: center; margin-bottom: .5vh; }
:root[data-template="digital"] .prayer-title .arabic { display: none; }
:root[data-template="digital"] .prayer-label { color: var(--on-accent); }
:root[data-template="digital"] .iqama-group { padding-top: 1vh; }
:root[data-template="digital"] .iqama-time { font-size: clamp(24px,2.4vw,50px); }
:root[data-template="digital"] .template-extras { justify-content: flex-start; }
:root[data-template="digital"] .extra-time { flex: 0 1 auto; display: flex; gap: 1em; align-items: center; }

@media(max-width:650px) {
  :root[data-template] .overview { grid-template-columns: 1fr; }
  :root[data-template="noticeboard"] .prayer-grid, :root[data-template="digital"] .prayer-grid { grid-template-columns: 1fr; }
  :root[data-template="noticeboard"] .prayer-card, :root[data-template="digital"] .prayer-card { padding: 16px; }
  :root[data-template="noticeboard"] .next-panel, :root[data-template="digital"] .next-panel { padding: 20px; }
  :root[data-template="noticeboard"] .prayer-card { border-bottom: 1px solid var(--line); border-right: 0; }
  :root[data-template="noticeboard"] .iqama-group, :root[data-template="digital"] .iqama-group { padding: 0; }
  :root[data-template="digital"] .next-body { flex-direction: row; align-items: center; flex-wrap: wrap; }
  :root[data-template="digital"] .clock { justify-content: center; }
  .extra-time { padding: 10px 16px; }
}
@media(min-width:900px) and (max-height:900px) {
  :root[data-template="noticeboard"] .display { gap: 1vh; padding: 2vh 3vw; }
  :root[data-template="noticeboard"] .topbar { gap: .3vh; padding-top: .6vh; }
  :root[data-template="noticeboard"] h1 { font-size: 2.3vw; }
  :root[data-template="noticeboard"] .calendar { font-size: 16px; line-height: 1.4; }
  :root[data-template="noticeboard"] .prayer-title h3 { font-size: 1.8vw; }
  :root[data-template="noticeboard"] .adhan-time { font-size: 2.6vw; }
  :root[data-template="noticeboard"] .iqama-time { font-size: 2.1vw; }
  :root[data-template="noticeboard"] .prayer-card { padding: .7vw; }
  :root[data-template="noticeboard"] .section-heading { margin-bottom: 8px; }
  :root[data-template="noticeboard"] .notice { min-height: 32px; }
  :root[data-template="noticeboard"] footer { padding-top: 1vh; }
}