:root { --pico-font-size: 100%; }
.brand { font-weight: 700; display: inline-flex; align-items: center; gap: .6rem; }
.brand-logo { height: 2rem; max-width: 9rem; object-fit: contain; }
.narrow { max-width: 30rem; margin-inline: auto; }
.muted { color: var(--pico-muted-color); }
.flash { padding: .75rem 1rem; border-radius: var(--pico-border-radius); margin-bottom: 1rem; }
.flash-ok { background: color-mix(in srgb, var(--pico-ins-color) 15%, transparent); }
.flash-error { background: color-mix(in srgb, var(--pico-del-color) 15%, transparent); }
.impersonating { display: flex; gap: 1rem; align-items: center; justify-content: center; padding: .4rem 1rem;
  background: #7a4b00; color: #fff; font-size: .9rem; }
.impersonating form { margin: 0; }
form.inline { display: inline; margin: 0; }
.row-form { display: flex; gap: .5rem; align-items: center; margin: 0; }
.row-form input, .row-form select, .row-form button { margin: 0; width: auto; }
.row-form input.num, input.num { width: 6rem; }
.row-actions { white-space: nowrap; }
.row-actions > * { margin: 0 .25rem 0 0; }
button.small, [role=button].small { padding: .25rem .6rem; font-size: .85rem; }
button.linklike { background: none; border: 0; padding: 0; color: var(--pico-primary); width: auto; margin: 0; }
.actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.actions > * { margin: 0; width: auto; }
.title-row { display: flex; align-items: center; gap: 1rem; justify-content: space-between; flex-wrap: wrap; }
.title-row h2 { margin: 0; }
.pill { display: inline-block; padding: .1rem .55rem; border-radius: 99px; font-size: .8rem;
  background: var(--pico-muted-border-color); }
.pill.ok { background: #1f7a3a; color: #fff; }
.pill.off { background: #8a8f98; color: #fff; }
.pill.live { background: #c2410c; color: #fff; }
tr.live td { background: color-mix(in srgb, #c2410c 8%, transparent); }
.inline-check { display: inline-flex; gap: .4rem; margin-right: 1.25rem; align-items: center; }
#visitor-search { margin-bottom: .4rem; }
.code-input { font-size: 1.6rem; letter-spacing: .2em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.thumb { width: 96px; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; display: block; }
.thumb-cell { width: 110px; }
.slide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.slide-card { margin: 0; padding: .75rem; }
.slide-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; margin-bottom: .5rem; }
.slide-card form { margin-bottom: .4rem; }
.logo-preview { max-height: 120px; max-width: 100%; background: repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 0 0/16px 16px; }
.preview-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: #000; }
.preview-frame iframe { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; border: 0; transform-origin: 0 0; pointer-events: none; }
.preview-article { max-width: min(1100px, 92vw); width: 92vw; }
.settings-grid { align-items: start; }
@media (max-width: 640px) {
  .row-actions { white-space: normal; }
  table { font-size: .9rem; }
}
.current-bg { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.current-bg label { margin: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat { margin: 0; padding: 1rem; text-align: center; }
.stat strong { display: block; font-size: 2rem; line-height: 1.1; }
.stat.bad strong { color: #c2410c; }
.pill.warn { background: #c2410c; color: #fff; }
.pill.sched { background: #2563eb; color: #fff; }
.screenshot { width: 100%; max-width: 640px; aspect-ratio: 16/9; object-fit: contain; background: #000; border-radius: 6px; display: block; }
.portal-head { text-align: center; margin-bottom: 1rem; }
.portal-head img { max-height: 80px; max-width: 70%; object-fit: contain; }
.copyline { display: flex; gap: .5rem; align-items: center; }
.copyline input { margin: 0; font-family: var(--pico-font-family-monospace); }
.copyline button { margin: 0; width: auto; }
tr.row-offline td:first-child { box-shadow: inset 3px 0 0 #c2410c; }
td.nowrap, th.nowrap { white-space: nowrap; }
.schedule-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .4rem; }
.schedule-row label { font-size: .8rem; margin: 0; }
.schedule-row input { margin: 0; padding: .3rem .4rem; font-size: .85rem; min-width: 0; width: 100%; }
.slide-grid { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
@media (max-width: 768px) {
  header nav { flex-wrap: wrap; }
  header nav ul { flex-wrap: wrap; margin-inline: 0; }
  header nav ul li { padding-block: .35rem; }
  header nav details.dropdown summary { max-width: 70vw; overflow: hidden; text-overflow: ellipsis; }
  /* Wide tables scroll inside themselves rather than widening the page. */
  main table { display: block; overflow-x: auto; max-width: 100%; }
  .row-form, .copyline { flex-wrap: wrap; }
  .row-form input:not([type=hidden]), .row-form select { min-width: 0; max-width: 100%; }
}

/* Present to screen */
.present-live { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.present-live video { width: min(360px, 100%); aspect-ratio: 16 / 9; background: #000; border-radius: .4rem; }
.present-live h4 { margin-bottom: .25rem; }
#present-screens td.actions { text-align: right; }