/*
 * The schedule pages (js/schedule.js, js/hours.js): the "now" card, the month and week calendars,
 * the entry list and dialog, working hours, exceptions and the main background (its section on
 * «المحتوى» too); plus the small marks they add elsewhere (the "يدوي" badge on a face, expiry and
 * «اجعلها الخلفية الرئيسية» on library items and group cards, the wall's power card).
 * Interior-page language: flat panels on hairlines, radius 0 on structure, 4px on controls.
 * Scheduled items are marked with --fm-accent only (docs/ART-DIRECTION.md); colours are tokens only.
 */

body[data-view='schedule'] .actionbar,
body[data-view='hours'] .actionbar { display: none; }
.icon--up { transform: rotate(-90deg); }

/* ---------- Page head with the two sub-pages ---------- */
.sched-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.sched-tabs { display: flex; gap: var(--space-1); padding: 3px; border: 1px solid var(--fm-border); border-radius: 999px; background: var(--fm-surface); }
.sched-tabs a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4);
  border-radius: 999px; color: var(--fm-text-secondary); text-decoration: none; font: 400 15px/24px var(--fm-font);
  transition: color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}
.sched-tabs a[aria-current='page'] { color: var(--fm-text); font-weight: 600; background: var(--fm-surface-raised); box-shadow: inset 0 0 0 1px var(--fm-border); }
@media (hover: hover) and (pointer: fine) { .sched-tabs a:hover { color: var(--fm-text); } }
#view-schedule, #view-hours { display: grid; gap: var(--space-5); align-content: start; padding-block-end: var(--space-7); }
#view-schedule[hidden], #view-hours[hidden] { display: none; }
#view-schedule .page-head, #view-hours .page-head { padding-block-end: 0; }

/* ---------- Now: on or off, until when, the override ---------- */
.sched-now { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--fm-surface); border: 1px solid var(--fm-border); }
.sched-now:empty { display: none; }
.now-state { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.now-state .status-shape { width: 10px; height: 10px; }
.now-text { display: grid; flex: 1 1 260px; min-width: 0; }
.now-text b { font: var(--type-label); }
.now-text small { font: var(--type-small); color: var(--fm-text-secondary); }
.now-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.now-until { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--type-small); color: var(--fm-text-secondary); }
.now-until .input { width: auto; min-height: 44px; }
.now-manual, .now-main { display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; font: var(--type-small); color: var(--fm-text-secondary); }
.now-main .text-link { min-height: 32px; font: var(--type-small); font-weight: 600; }
.now-main bdi { font-weight: 600; color: var(--fm-text); }
.now-badge, .dev-manual {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px;
  font: 600 11px/16px var(--fm-font);
}
.now-badge { background: var(--fm-ink); color: var(--fm-ink-text); box-shadow: inset 0 0 0 1px var(--fm-ink-border); }
.now-manual .btn-link { padding: 0; min-height: 32px; }

/* The same card, compact, on the wall's side panel. */
.side-power { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--fm-border); border-radius: 10px; background: var(--fm-surface-raised); }
.side-power:empty { display: none; }
.side-power .now-state { gap: 8px; }
.side-power .now-text { flex-basis: 100%; order: 0; }
.side-power .now-text b { font: 600 13px/20px var(--fm-font); }
.side-power .now-text small { font-size: 12px; line-height: 18px; }
.side-power .status { display: none; }
.side-power .now-actions { order: 1; }
.side-power .now-actions .btn { height: 36px; padding: 0 12px; border-radius: 8px; font: 600 13px/20px var(--fm-font); }
.side-power :is(.now-manual, .now-main) { font-size: 12px; line-height: 18px; }
.side-power .now-main { gap: 0 var(--space-2); padding-block-start: 8px; border-block-start: 1px solid var(--fm-border); }
.side-power .now-main .text-link { font-size: 12px; min-height: 28px; }

/* "يدوي" on a face of the wall: the schedule is paused there. Always on black. */
.dev-manual {
  position: absolute; z-index: 1; inset-block-start: 34px; inset-inline-start: 8px;
  background: var(--fm-device-scrim); color: var(--fm-stage-text);
  box-shadow: inset 0 0 0 1px var(--fm-stage-line-strong);
}
@container dev (max-width: 140px) { .dev-manual { inset-block-start: 28px; inset-inline-start: 6px; font-size: 10px; } }
.dev--empty .dev-manual { display: none; }

/* ---------- The calendar ---------- */
.cal-panel { gap: var(--space-4); }
.cal-bar { display: flex; align-items: center; gap: var(--space-3) var(--space-4); flex-wrap: wrap; }
.cal-bar .segmented { justify-self: auto; }
.cal-steps { display: flex; align-items: center; gap: var(--space-1); }
.cal-steps .btn { height: 40px; padding: 0 var(--space-4); }
.cal-steps .icon-btn { border: 1px solid var(--fm-border-strong); }
.cal-title { display: grid; flex: 1 1 200px; min-width: 0; font: var(--type-h2); }
.cal-title small { font: var(--type-small); color: var(--fm-text-secondary); }
.cal-filter .input { width: auto; max-width: 240px; }
.cal-error { color: var(--fm-offline); padding: var(--space-4) 0; }

/* Off-hours: a quiet hatch, the same in the month and the week. */
.cal-day.is-off, .wk-col, .lg--off {
  background: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--fm-border) 80%, transparent) 7px 8px), var(--fm-surface);
}

.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-block-start: 1px solid var(--fm-border); border-inline-start: 1px solid var(--fm-border); }
.cal-wd { padding: var(--space-2); font: 600 13px/20px var(--fm-font); color: var(--fm-text-secondary); border-inline-end: 1px solid var(--fm-border); border-block-end: 1px solid var(--fm-border); background: var(--fm-surface); }
.cal-day {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 124px;
  padding: 6px 6px 8px;
  border-inline-end: 1px solid var(--fm-border); border-block-end: 1px solid var(--fm-border);
  background: var(--fm-surface-raised);
}
.cal-day.is-out :is(.cal-num b, .cal-h) { color: var(--fm-disabled-text); }
.cal-day.is-today { box-shadow: inset 0 2px 0 var(--fm-primary-text); }
.cal-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.cal-num { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border: 0; border-radius: 15px; background: transparent; color: var(--fm-text); font: 600 15px/1 'Inter', var(--fm-font); }
button.cal-num { cursor: pointer; transition: background-color var(--motion-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { button.cal-num:hover { background: var(--fm-primary-tint); } }
.cal-day.is-today .cal-num { background: var(--fm-primary); color: var(--fm-on-primary); }
.cal-h { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 12px/16px var(--fm-font); color: var(--fm-text-secondary); }
.cal-ex, .lg--ex {
  align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0 6px; border-radius: 3px; background: var(--fm-primary-tint); color: var(--fm-primary-text);
  font: 600 11px/18px var(--fm-font);
}
.cal-items { display: grid; gap: 3px; list-style: none; padding: 0; min-width: 0; }

/* A scheduled item: an accent edge on a faint accent fill. */
.cal-item, .wk-item, .lg--item {
  border: 0; border-inline-start: 3px solid var(--fm-accent); border-radius: 0 3px 3px 0;
  background: color-mix(in srgb, var(--fm-accent) 12%, var(--fm-surface-raised)); color: var(--fm-text);
}
[dir='rtl'] :is(.cal-item, .wk-item, .lg--item) { border-radius: 3px 0 0 3px; }
.cal-item { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; min-height: 26px; padding: 2px 6px; text-align: start; font: 400 12px/18px var(--fm-font); cursor: pointer; }
.ci-t { flex: none; color: var(--fm-text-secondary); font-size: 11px; }
.ci-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { :is(.cal-item, .wk-item):hover { background: color-mix(in srgb, var(--fm-accent) 22%, var(--fm-surface-raised)); } }
/* Same screen, same priority, same time: the warning colour and a diamond (never colour alone). */
:is(.cal-item, .wk-item).is-conflict, .lg--conflict { border-inline-start-color: var(--fm-warning); background: color-mix(in srgb, var(--fm-warning) 14%, var(--fm-surface-raised)); }
.ci-clash, .lg--conflict::before { display: inline-block; flex: none; width: 7px; height: 7px; background: var(--fm-warning); transform: rotate(45deg); }
/* Its content expired, or it falls outside working hours: still listed, not shown. */
:is(.cal-item, .wk-item).is-inactive { border-inline-start-style: dashed; background: transparent; color: var(--fm-text-secondary); box-shadow: inset 0 0 0 1px var(--fm-border); }
.cal-more { align-self: flex-start; padding: 2px 4px; border: 0; background: none; color: var(--fm-link); font: 600 12px/16px var(--fm-font); cursor: pointer; }

/* The week: hours down, days across; the working hours are the clear band in each column. */
.cal-week { display: grid; border: 1px solid var(--fm-border); }
.wk-head, .wk-body { display: grid; grid-template-columns: 64px repeat(7, minmax(0, 1fr)); }
.wk-head { border-block-end: 1px solid var(--fm-border); background: var(--fm-surface); }
.wk-dh { display: grid; align-content: start; gap: 2px; min-width: 0; padding: var(--space-2); border-inline-start: 1px solid var(--fm-border); }
.wk-dh b { font: 600 14px/20px var(--fm-font); }
.wk-dh small { font: 400 12px/16px var(--fm-font); color: var(--fm-text-secondary); }
.wk-dh.is-today { box-shadow: inset 0 2px 0 var(--fm-primary-text); }
.wk-dh.is-today b { color: var(--fm-primary-text); }
.wk-dh.is-off .wk-hours { color: var(--fm-offline); }
.wk-body { position: relative; height: calc(var(--span) / 60 * var(--hh)); }
.wk-times { position: relative; }
.wk-hour { position: absolute; inset-inline: 0; inset-block-start: calc(var(--top) / 60 * var(--hh)); padding-inline: 6px; transform: translateY(-50%); font: 400 11px/14px var(--fm-font); color: var(--fm-text-secondary); white-space: nowrap; }
.wk-hour:first-child { transform: none; }
.wk-col { position: relative; min-width: 0; border-inline-start: 1px solid var(--fm-border); }
/* Hour lines over the column, under the items. */
.wk-col::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, var(--fm-border) 0 1px, transparent 1px var(--hh)); opacity: .6; }
.wk-open { position: absolute; inset-inline: 0; inset-block-start: calc(var(--top) / 60 * var(--hh)); height: calc(var(--h) / 60 * var(--hh)); background: var(--fm-surface-raised); pointer-events: none; }
.wk-item {
  position: absolute; z-index: 1;
  inset-block-start: calc(var(--top) / 60 * var(--hh) + 1px);
  inset-inline-start: calc(var(--lane) * 100% / var(--lanes) + 2px);
  width: calc(100% / var(--lanes) - 4px); height: calc(var(--h) / 60 * var(--hh) - 2px); min-height: 18px;
  display: grid; align-content: start; gap: 0; overflow: hidden;
  padding: 3px 6px; text-align: start; cursor: pointer;
}
.wk-item b { display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 12px/16px var(--fm-font); }
.wk-item b bdi { overflow: hidden; text-overflow: ellipsis; }
.wk-item small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 11px/15px var(--fm-font); color: var(--fm-text-secondary); }
.wk-now { position: absolute; z-index: 2; inset-inline: 0; inset-block-start: calc(var(--top) / 60 * var(--hh)); height: 2px; background: var(--fm-primary-text); pointer-events: none; }
.wk-now::before { content: ''; position: absolute; inset-inline-start: -4px; inset-block-start: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--fm-primary-text); }

.cal-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; padding: 0; font: var(--type-small); color: var(--fm-text-secondary); }
.cal-legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.lg { display: inline-grid; place-items: center; width: 22px; height: 14px; flex: none; }
.lg--ex { width: 22px; padding: 0; }
.lg--off { box-shadow: inset 0 0 0 1px var(--fm-border); }
.lg--conflict::before { content: ''; }

.cal-conflicts:empty { display: none; }
.cal-conflicts { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--fm-warning); background: color-mix(in srgb, var(--fm-warning) 8%, var(--fm-surface)); }
.cal-conflicts h3 { font: var(--type-label); }
.cal-conflicts ul { display: grid; gap: var(--space-2); list-style: none; padding: 0; font: var(--type-small); }
.cal-conflicts li { display: flex; align-items: baseline; gap: var(--space-2); }

/* ---------- Every entry ---------- */
.entries { list-style: none; padding: 0; display: grid; }
.entry { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding-block: var(--space-3); border-block-end: 1px solid var(--fm-border); }
.entry:last-child { border-block-end: 0; }
.entry.is-ended { color: var(--fm-text-secondary); }
.entry-art { position: relative; display: grid; place-items: center; width: 36px; aspect-ratio: 9 / 16; overflow: hidden; background: var(--fm-device-bg); color: var(--fm-stage-text); }
.entry-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.entry-art .icon { width: 16px; height: 16px; }
.entry.is-ended .entry-art { opacity: .5; }
.entry-main { display: grid; gap: 2px; min-width: 0; }
.entry-name { font: var(--type-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-what, .entry-when { font: var(--type-small); color: var(--fm-text-secondary); overflow-wrap: anywhere; }
.entry-side { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; justify-content: flex-end; }
.entry-chips { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.entry-btns { display: flex; gap: var(--space-2); }
.entry-btns .btn { height: 40px; padding: 0 var(--space-3); font: 600 14px/20px var(--fm-font); }
.chip--prio { border: 1px solid var(--fm-border-strong); color: var(--fm-text); }
.chip--live { background: color-mix(in srgb, var(--fm-accent) 14%, var(--fm-surface-raised)); color: var(--fm-text); box-shadow: inset 0 0 0 1px var(--fm-accent); }
.chip--muted { background: var(--fm-disabled-bg); color: var(--fm-disabled-text); }
.chip--warn { color: var(--fm-warning); box-shadow: inset 0 0 0 1px var(--fm-warning); }
.entries-empty { padding-block: var(--space-4); color: var(--fm-text-secondary); }
@media (max-width: 759px) {
  .entry { grid-template-columns: 36px minmax(0, 1fr); }
  .entry-side { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------- Working hours ---------- */
.hours-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr)); gap: var(--space-5); align-items: start; }
.hours-grid .form-actions { padding: 0; justify-content: flex-start; }
.week-form { display: grid; gap: var(--space-4); }
.week-table { display: grid; }
.week-row { display: grid; grid-template-columns: minmax(84px, 1fr) 112px minmax(0, 2fr); align-items: center; gap: var(--space-3); padding-block: var(--space-2); border-block-end: 1px solid var(--fm-border); }
.week-day { display: grid; font: var(--type-label); }
.week-day small { font: 400 12px/16px var(--fm-font); color: var(--fm-primary-text); }
.week-times { display: flex; align-items: center; gap: var(--space-2); font: var(--type-small); color: var(--fm-text-secondary); }
.week-times .input { width: auto; min-width: 0; flex: 1 1 110px; }
.week-row.is-closed .week-times { opacity: .55; }

/* A switch: a checkbox drawn as a track and a knob; the label says the state in words too. */
.switch { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font: var(--type-small); cursor: pointer; }
.switch input {
  appearance: none; position: relative; flex: none; width: 40px; height: 24px; margin: 0;
  border-radius: 12px; background: var(--fm-disabled-bg); box-shadow: inset 0 0 0 1px var(--fm-border-strong); cursor: pointer;
  transition: background-color var(--motion-fast) ease;
}
.switch input::before {
  content: ''; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--fm-surface-raised); box-shadow: inset 0 0 0 1px var(--fm-border-strong);
  transition: transform 140ms var(--ease-out);
}
.switch input:checked { background: var(--fm-primary); box-shadow: none; }
.switch input:checked::before { transform: translateX(calc(var(--dir) * 16px)); box-shadow: none; }
.switch input:disabled { cursor: not-allowed; opacity: .6; }

.ex-list { list-style: none; padding: 0; display: grid; }
.ex { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); padding-block: var(--space-3); border-block-end: 1px solid var(--fm-border); }
.ex-tag { align-self: stretch; background: var(--fm-primary-text); }
.ex.is-past { color: var(--fm-text-secondary); }
.ex.is-past .ex-tag { background: var(--fm-border-strong); }
.ex-text { display: grid; min-width: 0; }
.ex-text b { font: var(--type-label); }
.ex-text small, .ex-rule small { font: var(--type-small); color: var(--fm-text-secondary); }
.ex-rule { display: grid; justify-items: end; font: var(--type-small); font-weight: 600; white-space: nowrap; }
.ex-empty { padding-block: var(--space-3); color: var(--fm-text-secondary); font: var(--type-small); }
.ex-form { display: grid; gap: var(--space-4); padding-block-start: var(--space-2); }
.ex-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.ex-name { grid-column: 1 / -1; }
.ex-row .input, .entry-row .input { min-width: 0; }
.ex-kind { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; border: 0; }
.ex-kind legend { margin-block-end: var(--space-2); }
.ex-kind > label { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; }
.ex-times { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--type-small); }
.ex-times .input { width: auto; }
.date-hijri { font: var(--type-small); color: var(--fm-text-secondary); min-height: 20px; }
/* A field that cannot be changed now (all day, a closed day, a viewer) looks it. */
:is(.entry-form, .week-table, .ex-form, .sched-now, .hours-grid) .input:disabled { background: var(--fm-disabled-bg); color: var(--fm-disabled-text); box-shadow: none; cursor: not-allowed; }

/* The main background's picker: tiles like the library, one chosen (js/mainbg.js, docs/adr/0023). */
.main-choose { display: grid; gap: var(--space-3); }
.main-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--space-3); }
.main-sub { display: grid; padding-block-start: var(--space-2); font: var(--type-label); }
.main-sub small { font: var(--type-small); color: var(--fm-text-secondary); }
.main-badge {
  position: absolute; z-index: 1; inset-block-end: 6px; inset-inline-start: 6px;
  display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px;
  background: var(--fm-device-scrim); color: var(--fm-stage-text); font: 600 11px/16px 'Inter', var(--fm-font);
}
.main-badge .icon { width: 12px; height: 12px; }
.main-pick { display: grid; gap: var(--space-2); align-content: start; min-width: 0; cursor: pointer; }
.main-art { position: relative; display: grid; place-items: center; aspect-ratio: 9 / 16; overflow: hidden; background: var(--fm-device-bg); color: var(--fm-stage-text); box-shadow: inset 0 0 0 1px var(--fm-border); }
.main-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.main-art .face-idle img { position: static; width: 52%; height: auto; }
.main-name { display: grid; font: 600 12px/16px var(--fm-font); overflow: hidden; }
.main-name bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main-name small { font-weight: 400; color: var(--fm-text-secondary); }
.main-pick.is-on .main-art { outline: 2px solid var(--fm-primary-text); outline-offset: 2px; }
.main-pick:has(input:focus-visible) .main-art { outline: 2px solid var(--fm-focus); outline-offset: 4px; }
.main-pick.is-expired { cursor: not-allowed; }
.main-pick.is-expired .main-art { opacity: .45; }
.main-pick:has(input:disabled):not(.is-on) { cursor: default; }

/* The section on «المحتوى»: what it is now, then the picker behind «غيّر الخلفية». */
.mainbg { scroll-margin-block-start: var(--space-7); }
.mainbg-now { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.mainbg-art { display: flex; gap: 4px; flex: none; }
.mainbg-art .main-art { width: 64px; }
.mainbg-art--group { padding: 6px; background: var(--fm-device-bg); }
.mainbg-art--group .main-art { width: 40px; box-shadow: none; }
.mainbg-text { display: grid; gap: var(--space-1); flex: 1 1 280px; min-width: 0; }
.mainbg-kind { font: var(--type-small); color: var(--fm-text-secondary); }
.mainbg-name { font: var(--type-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mainbg-note { font: var(--type-small); }
.mainbg-note.is-expired { color: var(--fm-warning); font-weight: 600; }
.mainbg-picker { padding-block-start: var(--space-4); border-block-start: 1px solid var(--fm-border); }
.mainbg-picker[hidden] { display: none; }

/* On a library item or a group card: make it the main background, or the mark that it is. */
.main-set { height: auto; min-height: 40px; padding: 6px var(--space-2); color: var(--fm-link); font: 600 13px/18px var(--fm-font); white-space: normal; text-align: center; }
.gc .main-set { justify-self: start; padding-inline: var(--space-3); }
.main-mark { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 40px; font: var(--type-small); font-weight: 600; color: var(--fm-primary-text); }
.main-mark .icon { width: 16px; height: 16px; flex: none; }
body[data-role='viewer'] .main-set { display: none; }

/* ---------- The entry dialog ---------- */
.dialog--entry[open] { display: block; width: min(780px, calc(100vw - 2 * var(--margin))); max-height: calc(100vh - 48px); overflow-y: auto; }
.entry-form { display: grid; }
.entry-head { position: sticky; inset-block-start: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--fm-surface-raised); border-block-end: 1px solid var(--fm-border); }
.entry-head h2 { font: var(--type-h2); overflow-wrap: anywhere; }
.entry-body { display: grid; gap: var(--space-5); min-width: 0; margin: 0; padding: var(--space-5); border: 0; }
.entry-group { display: grid; gap: var(--space-3); min-width: 0; margin: 0; padding: 0 0 var(--space-5); border: 0; border-block-end: 1px solid var(--fm-border); }
.entry-group legend { padding: 0; margin-block-end: var(--space-3); }
.entry-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); align-items: start; }
.entry-allday { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; align-self: end; }
.entry-summary { font: var(--type-small); color: var(--fm-text); padding: var(--space-2) var(--space-3); border-inline-start: 3px solid var(--fm-accent); background: color-mix(in srgb, var(--fm-accent) 8%, var(--fm-surface-raised)); }
.entry-summary:empty { display: none; }
.entry-priority .input { max-width: 200px; }
.entry-actions { position: sticky; inset-block-end: 0; padding: var(--space-4) var(--space-5); background: var(--fm-surface-raised); border-block-start: 1px solid var(--fm-border); }
.entry-actions .btn--danger { margin-inline-start: auto; }
.dialog--entry .authform-error { margin: 0 var(--space-5) var(--space-3); }

/* Radios drawn as a segmented control; checkboxes drawn as chips. */
.seg-radio { display: inline-flex; flex-wrap: wrap; justify-self: start; gap: 2px; padding: 2px; border: 1px solid var(--fm-border-strong); border-radius: var(--fm-radius); }
.seg-radio label { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4); border-radius: 2px; color: var(--fm-text-secondary); font: var(--type-label); cursor: pointer; }
.seg-radio input { position: absolute; opacity: 0; pointer-events: none; }
.seg-radio label:has(input:checked) { background: var(--fm-primary); color: var(--fm-on-primary); }
.seg-radio label:has(input:focus-visible) { outline: 2px solid var(--fm-focus); outline-offset: 2px; }
.entry-screens, .weekday-picks { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pick { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-3); border: 1px solid var(--fm-border-strong); border-radius: 999px; font: var(--type-small); font-weight: 600; cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick:has(input:checked) { border-color: var(--fm-primary-text); background: var(--fm-primary-tint); color: var(--fm-primary-text); }
.pick:has(input:focus-visible) { outline: 2px solid var(--fm-focus); outline-offset: 2px; }
.entry-body:disabled :is(.seg-radio label, .pick) { cursor: default; }

.entry-playlist { display: grid; gap: var(--space-3); justify-items: start; }
.pl-items { display: grid; gap: var(--space-2); list-style: none; padding: 0; width: 100%; }
.pl-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) 150px 40px 40px; align-items: center; gap: var(--space-2); }
.pl-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--fm-primary-tint); color: var(--fm-primary-text); font: 700 12px/1 'Inter', var(--fm-font); }
.pl-sec { display: flex; align-items: center; gap: var(--space-2); font: var(--type-small); color: var(--fm-text-secondary); }
.pl-sec .input { width: 90px; }
@media (max-width: 639px) { .pl-item { grid-template-columns: 24px minmax(0, 1fr) 40px 40px; } .pl-sec { grid-column: 2; } }

/* ---------- Library: expiry ---------- */
.media-tag {
  position: absolute; z-index: 1; inset-block-start: var(--space-2); inset-inline-end: var(--space-2);
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px;
  background: var(--fm-ink); color: var(--fm-ink-text); font: 600 11px/16px var(--fm-font);
}
.media-tag--expired::before { content: ''; width: 6px; height: 6px; background: var(--fm-warning); transform: rotate(45deg); }
.media-expiry.is-expired { color: var(--fm-warning); font-weight: 600; }
.expiry { display: grid; gap: var(--space-2); }
.expiry-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.expiry-row .input { width: auto; flex: 1 1 160px; }

@media (max-width: 1023px) {
  .cal-day { min-height: 104px; }
  .cal-h { font-size: 11px; }
}
@media (max-width: 639px) {
  .cal-day { min-height: 76px; padding: 4px; }
  .cal-item .ci-t, .cal-h { display: none; }
  .wk-head, .wk-body { grid-template-columns: 44px repeat(7, minmax(0, 1fr)); }
  .cal-week { overflow-x: auto; }
}