/* ScreenPoint personal area: white surfaces, graphite type and the logo blue.
   Logical properties support all four interface languages. */
:root {
  --bg: #fff;
  --surface: #fff;
  --surface-2: #f7f8fa;
  --surface-side: #fff;
  --surface-inv: #171c24;
  --surface-hi: #edf4ff;
  --line: #e4e7ec;
  --line-2: #eff1f4;
  --line-strong: #8b94a3;
  --hair: 1px solid var(--line);
  --text-1: #171c24;
  --text-2: #49515e;
  --text-3: #606976;
  /* Exact brand dot in assets/screenpoint-logo.svg. Dark button text keeps contrast. */
  --blue: #3A8DFF;
  --blue-ink: #175cc4;
  --green: #16845b;
  --green-ink: #176443;
  --amber: #a56b12;
  --ink-on-amber: #735019;
  --amber-soft: #fff7e8;
  --red: #bd3343;
  --red-ink: #a52635;
  --red-soft: #fff1f2;
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 8px;
  --r-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --font-ui: "Rubik", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --gutter: 20px;
  --pad-top: env(safe-area-inset-top, 0px);
  --pad-bottom: env(safe-area-inset-bottom, 0px);
  --vh100: 100vh;
  --shadow-card: none;
  --shadow-control: none;
}
@supports (height: 100dvh) { :root { --vh100: 100dvh; } }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-block-start: 24px; }
body { margin: 0; min-block-size: var(--vh100); color: var(--text-1); background: var(--bg); font: 400 16px/1.6 var(--font-ui); }
button, input, select, textarea { font: inherit; }
button, a, input, textarea, select, summary { -webkit-tap-highlight-color: #3a8dff18; }
button, input, select, textarea, fieldset { min-inline-size: 0; }
img, svg { max-inline-size: 100%; }
button, p, h1, h2, h3, h4, a, label { overflow-wrap: break-word; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
:where(button, a, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--blue-ink); outline-offset: 4px;
}
.skip-link { position: fixed; z-index: 40; inset-block-start: 12px; inset-inline-start: 12px; transform: translateY(-160%); padding: 12px 20px; background: #fff; color: var(--blue-ink); border-radius: var(--r-sm); box-shadow: none; }
.skip-link:focus { transform: none; }
.ic, .section-icon { inline-size: 22px; block-size: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.btn, .lang-btn, .icon-btn, .slide-file-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-block-size: 50px; padding: 12px 19px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--text-1); background: var(--surface);
  box-shadow: none; font: 500 16px/1.4 var(--font-ui);
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover, .lang-btn:hover, .icon-btn:hover, .slide-file-button:hover { background: var(--surface-2); border-color: var(--line-strong); }
.btn:active, .lang-btn:active, .icon-btn:active, .slide-file-button:active { transform: none; box-shadow: none; }
.btn-primary, .notice-form .primary {
  color: var(--text-1); border-color: var(--blue-ink); background: var(--blue);
  box-shadow: none;
}
.btn-primary:hover, .notice-form .primary:hover { background: #2b7deb; border-color: #2b7deb; }
.btn-ghost { background: #fff; }
.btn-wide { inline-size: 100%; }
.btn:disabled, button:disabled, .notice-form button:disabled {
  background: var(--surface-2); color: var(--text-3); border-color: var(--line); box-shadow: none; cursor: not-allowed; transform: none;
}
.lang-btn { min-inline-size: 52px; padding-inline: 13px; }
.icon-btn { min-inline-size: 50px; }
.icon-btn:hover { color: var(--red-ink); }

/* First load and account access. */
.boot { min-block-size: var(--vh100); display: grid; place-items: center; }
.boot-dot { inline-size: 16px; block-size: 16px; border-radius: 50%; background: var(--blue); box-shadow: none; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.auth {
  min-block-size: var(--vh100); display: grid; place-items: center;
  padding: calc(var(--pad-top) + 32px) var(--gutter) calc(var(--pad-bottom) + 32px);
  background: var(--bg);
}
.auth-box { position: relative; inline-size: 100%; max-inline-size: 460px; display: grid; gap: var(--space-5); padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: none; }
.auth-lang { position: absolute; inset-block-start: 24px; inset-inline-end: 24px; }
.auth-mark { inline-size: 48px; block-size: 48px; margin-block-end: 8px; }
.auth-title { margin: 0 0 4px; font-size: 30px; line-height: 1.2; font-weight: 500; letter-spacing: -.6px; }
.auth-sub, .auth-hint, .auth-dead-msg { margin: 0; color: var(--text-2); font-size: 16px; line-height: 1.55; }
.auth-hint { text-align: center; }
.auth-dead { display: grid; gap: 18px; }
.fld { display: grid; gap: 8px; }
.fld-lab { font-size: 16px; line-height: 1.45; font-weight: 500; color: var(--text-2); }
.fld-input, .notice-form input:not([type=checkbox]), .notice-form textarea, .notice-form select, .schedule-hours input {
  inline-size: 100%; min-block-size: 52px; padding: 12px 14px; border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); background: #fff; color: var(--text-1); font: 400 17px/1.5 var(--font-ui);
  box-shadow: none;
}
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: 1; }
textarea { resize: vertical; min-block-size: 136px; }
.fld-hint { margin: -8px 0 0; font-size: 15px; line-height: 1.5; color: var(--text-3); }
.fld-err { margin: 10px 0; padding: 12px 14px; border-inline-start: 3px solid var(--red); border-radius: 6px; color: var(--red-ink); background: var(--red-soft); font-size: 16px; line-height: 1.5; }
.portal-services { display: grid; gap: 18px; }
.portal-services .home-note { margin: 0; }
.service-form { display: grid; gap: 16px; max-inline-size: 640px; }
.service-form .fld-input { inline-size: 100%; min-block-size: 52px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: #fff; color: var(--text-1); }
.service-form textarea { min-block-size: 120px; }
.service-form .btn { justify-self: start; }
.service-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.service-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding: 14px 18px; border: var(--hair); border-radius: var(--r-sm); background: #fff; }
.service-status { color: var(--text-2); }

/* Page shell. The sidebar is an additional desktop shortcut, never required. */
.app { min-block-size: var(--vh100); display: grid; grid-template-rows: auto 1fr auto; }
.sidebar { display: none; }
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: calc(var(--pad-top) + 20px) var(--gutter) 20px; border-block-end: 1px solid var(--line); background: var(--surface-2); }
.top-product { display: none; font-size: 17px; font-weight: 500; text-decoration: none; }
.top-product img { inline-size: 30px; block-size: 30px; }
.top-client { display: flex; align-items: center; gap: 12px; min-inline-size: 0; }
.top-logo { inline-size: 48px; block-size: 48px; flex: none; object-fit: contain; padding: 5px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }
.top-names { display: grid; min-inline-size: 0; }
.top-cl { font-size: 17px; line-height: 1.4; font-weight: 500; overflow-wrap: anywhere; }
.top-user { color: var(--text-3); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.top-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.main { inline-size: 100%; max-inline-size: 1580px; margin-inline: auto; padding: var(--space-5) var(--gutter) var(--space-6); display: grid; gap: var(--space-6); align-content: start; min-inline-size: 0; }
.h { margin: 0; font-size: 25px; line-height: 1.3; font-weight: 500; letter-spacing: -.45px; }
.sub { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-3); }
.sub:empty { display: none; }
.empty { margin: 0; padding: 28px; color: var(--text-2); border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); }
.foot { padding: 8px var(--gutter) calc(var(--pad-bottom) + 26px); font-size: 14px; line-height: 1.5; color: var(--text-3); text-align: center; }

/* Status summary and building directory. */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 15px; font-size: 14px; font-weight: 500; color: var(--text-2); line-height: 1.45; letter-spacing: .2px; }
.overview-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.overview-stat { display: grid; align-content: start; gap: var(--space-2); min-inline-size: 0; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; box-shadow: none; }
.stat-label { color: var(--text-2); font-size: 15px; line-height: 1.4; }
.stat-value { display: block; color: var(--text-1); font-size: 34px; line-height: 1.2; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.stat-online .stat-value { color: var(--text-1); }
.stat-attention .stat-value { color: var(--text-1); }
.stat-label { display: flex; align-items: center; gap: 8px; }
.stat-online .stat-label::before, .stat-attention .stat-label::before { content: ""; inline-size: 7px; block-size: 7px; flex: none; border-radius: 50%; background: var(--green); }
.stat-attention .stat-label::before { background: var(--amber); }
.stat-note { color: var(--text-3); font-size: 14px; line-height: 1.45; }
.search-empty { padding: 25px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); }
.search-empty p { margin-block: 0 16px; color: var(--text-2); }
.directory { display: grid; gap: 20px; min-inline-size: 0; }
.section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 20px; }
.section-heading .h, .section-heading h2 { margin: 0; font-size: 26px; line-height: 1.35; font-weight: 500; letter-spacing: -.5px; }
.directory-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.search-field { display: flex; align-items: center; gap: 12px; min-inline-size: 0; flex: 1 1 300px; max-inline-size: 460px; padding-inline: 16px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: #fff; box-shadow: none; color: var(--text-3); }
.search-field input { inline-size: 100%; min-inline-size: 0; min-block-size: 52px; padding: 10px 0; border: 0; background: transparent; color: var(--text-1); font-size: 17px; box-shadow: none; border-radius: 0; }
.search-field:focus-within { outline: 2px solid var(--blue-ink); outline-offset: 3px; }
.search-field input:focus-visible { outline: none; }
.search-field .ic { inline-size: 20px; block-size: 20px; }
.home-filters { display: flex; flex-wrap: wrap; gap: 5px; padding: 5px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.home-filters button { min-block-size: 48px; padding: 10px 16px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font-size: 15px; font-weight: 500; cursor: pointer; }
.home-filters button:hover { background: var(--surface-2); }
.home-filters button[aria-pressed="true"], .home-filters button.is-active { background: var(--surface-hi); color: var(--blue-ink); border-color: var(--blue-ink); box-shadow: none; }

/* Building summaries and their management sections. */
.homes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; min-inline-size: 0; }
.home { min-inline-size: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; box-shadow: none; }
.home.is-open { grid-column: 1 / -1; border-color: var(--line-strong); box-shadow: none; }
.home-addr { font-size: 20px; line-height: 1.35; font-weight: 500; letter-spacing: -.3px; overflow-wrap: anywhere; }
.home-city { color: var(--text-3); font-size: 15px; line-height: 1.5; }
.home-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-start: 7px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.home-sep { color: var(--text-3); }
.home-variant { font-size: 14px; }
.home-update { justify-self: start; padding: 4px 9px; border-radius: 7px; color: var(--green-ink); background: var(--surface-2); font-size: 13px; line-height: 1.45; font-weight: 500; }
.home-update.required { color: var(--ink-on-amber); background: var(--amber-soft); }
.st { display: inline-flex; align-items: center; gap: var(--space-2); padding: 3px 9px; border-radius: 7px; color: var(--text-2); background: var(--surface-2); font-weight: 500; }
.dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--text-3); flex: none; }
.st-online { color: var(--green-ink); background: var(--surface-2); }
.st-online .dot { background: var(--green); }
.st-offline, .st-error { color: var(--red-ink); background: var(--red-soft); }
.st-offline .dot, .st-error .dot { background: var(--red); }
.st-frozen, .st-loading, .st-never_connected { color: var(--ink-on-amber); background: var(--amber-soft); }
.st-frozen .dot, .st-loading .dot, .st-never_connected .dot { background: var(--amber); }
.st-no_box .dot { background: transparent; border: 1.5px solid var(--text-3); }
.home-body { display: grid; gap: 24px; padding: 24px; border-block-start: 1px solid var(--line); background: var(--surface-2); border-end-start-radius: 19px; border-end-end-radius: 19px; min-inline-size: 0; }
.home-software { margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--text-2); font-size: 15px; line-height: 1.55; }
.home-software strong { color: var(--text-1); }
.home-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; }
.home-shortcuts a { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-block-size: 48px; padding: 10px 15px; border-radius: var(--r-sm); border: 1px solid var(--line); color: var(--text-1); background: #fff; font-size: 15px; font-weight: 500; text-decoration: none; box-shadow: none; }
.home-shortcuts a:hover { background: var(--surface-hi); border-color: var(--line-strong); }
.home-content { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 20px; min-inline-size: 0; }
.home-content > section { min-inline-size: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; scroll-margin-block-start: 24px; }
.home-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--text-1); font-size: 20px; line-height: 1.4; font-weight: 500; letter-spacing: -.2px; }
.home-h .section-icon { color: var(--text-2); }
.home-note { margin: 8px 0 14px; color: var(--text-3); font-size: 15px; line-height: 1.6; }
.home-music { display: grid; gap: 16px; }
.home-music .home-h { margin: 0; }
.home-music .home-note { margin: 0; }

/* Screen images are framed as images, without implying a live video feed. */
.shot { display: grid; gap: 14px; }
.shot-img { display: block; inline-size: 100%; aspect-ratio: 16 / 9; object-fit: contain; border: 6px solid var(--text-1); border-radius: var(--r-sm); background: var(--text-1); box-shadow: none; }
.shot-wait { inline-size: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.shot-cap { margin: 0; color: var(--text-3); font-size: 15px; line-height: 1.5; }
.shot-cap.is-old { padding: 10px 13px; border-radius: var(--r-sm); color: var(--ink-on-amber); background: var(--amber-soft); }
.shot-none { margin: 12px 0; color: var(--text-2); font-size: 17px; line-height: 1.55; }
.shot-why { margin: 0; color: var(--text-3); font-size: 15px; line-height: 1.55; }

/* Seven explicit volume presets and the existing mute switch. */
.sw { display: flex; align-items: center; gap: 14px; min-block-size: 52px; padding: 4px 0; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.sw-box { inline-size: 60px; block-size: 36px; flex: none; position: relative; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--line); box-shadow: none; transition: background .15s ease; }
.sw-box::after { content: ''; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 28px; block-size: 28px; border: 1px solid #ffffffc9; border-radius: 50%; background: var(--surface); box-shadow: none; transition: transform .15s ease; }
.sw[aria-pressed="true"] .sw-box { background: var(--blue); border-color: var(--blue-ink); }
.sw[aria-pressed="true"] .sw-box::after { transform: translateX(24px); }
[dir="rtl"] .sw[aria-pressed="true"] .sw-box::after { transform: translateX(-24px); }
.sw-lab { font-size: 17px; line-height: 1.5; font-weight: 500; }
.sw:disabled { background: transparent; }
.sw:disabled .sw-box { opacity: .65; }
.vol { display: grid; gap: var(--space-3); }
.vol-lab { color: var(--text-2); font-size: 16px; line-height: 1.5; }
.vol-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); gap: var(--space-2); }
.vol-step { min-block-size: 68px; display: grid; gap: 4px; align-content: center; justify-items: center; padding: 10px 3px; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text-2); background: var(--surface-2); box-shadow: none; cursor: pointer; }
.vol-step:hover { background: var(--surface-hi); border-color: var(--line-strong); }
.vol-step[aria-pressed="true"] { color: var(--text-1); border-color: var(--blue-ink); background: var(--blue); box-shadow: none; }
.vol-name { max-inline-size: 100%; font-size: 13px; line-height: 1.4; font-weight: 500; text-align: center; overflow-wrap: anywhere; }
.vol-num { font: 400 13px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; }
.vol-unset { margin: 0; color: var(--text-3); font-size: 15px; line-height: 1.5; }

/* Notices and uploads use the same writing and review pattern. */
.all-homes-notices { padding: 28px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; box-shadow: none; }
.all-homes-notices .notices { margin: 0; padding: 0; border: 0; }
.all-homes-notices .home-h { font-size: 24px; }
.notices, .portal-slides, .display-choice { min-inline-size: 0; }
.notices > .btn { margin-block-start: 8px; color: var(--text-1); border-color: var(--blue-ink); background: var(--blue); box-shadow: none; }
.notices > .btn:hover { background: #2b7deb; }
.notice { margin-block: 18px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.notice > strong { font-size: 18px; font-weight: 500; }
.notice-text { margin-block: 12px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.notice-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 18px 10px; }
.notice-actions .btn { flex: 0 1 auto; }
.notice-form { margin-block-start: 22px; padding-block-start: 4px; }
.notice-form .fld { display: grid; gap: 8px; margin-block: 18px; }
.notice-form .fld > span:first-child { font-size: 16px; color: var(--text-2); font-weight: 500; }
.notice-check { display: flex; align-items: center; gap: 12px; min-block-size: 48px; cursor: pointer; }
.notice-check input, .display-option input { inline-size: 24px; block-size: 24px; flex: none; accent-color: var(--blue-ink); cursor: pointer; }
.notice-preview, .slide-preview { margin-block: 22px; padding: 20px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); }
.notice-preview > h4, .slide-preview > h4 { margin-block: 0 16px; font-size: 19px; font-weight: 500; }
.notice-form .primary { inline-size: 100%; }
.publish-hint { padding: 12px 16px; border-inline-start: 3px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-2); }
.notice-frame { display: block; inline-size: 100%; max-inline-size: 440px; height: 160px; margin-inline: auto; border: 0; background: #fff; border-radius: var(--r-sm); }
.notice-frame-urgent { max-inline-size: 840px; height: auto; aspect-ratio: 16 / 9; }
.music-schedule { min-inline-size: 0; margin-block-start: 4px; padding-block-start: 20px; border-block-start: var(--hair); }
.schedule-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; margin-block: 18px; font-size: 16px; }
.schedule-summary dt, .schedule-summary dd { margin: 0; padding-block: 5px; border-block-end: 1px solid var(--line); }
.schedule-summary dd { font-variant-numeric: tabular-nums; }
.schedule-form { display: grid; gap: 16px; margin-block: 20px; }
.schedule-day { min-inline-size: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.schedule-hours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.schedule-hours label { display: grid; gap: 6px; min-inline-size: 0; color: var(--text-2); font-size: 15px; }
.schedule-hours input { min-inline-size: 0; padding-inline: 10px; }
.schedule-hours input:disabled { background: var(--surface); border-color: var(--line); color: var(--text-3); box-shadow: none; }
.display-current { font-weight: 500; }
.display-options { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.display-options legend { margin-block-end: 14px; font-weight: 500; }
.display-option { display: flex; align-items: center; gap: 13px; min-block-size: 60px; margin-block: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; cursor: pointer; }
.display-option:hover { border-color: var(--line-strong); background: var(--surface-2); }
.display-option:has(input:checked) { background: var(--surface-hi); border-color: var(--blue-ink); box-shadow: none; }
.display-option:focus-within { outline: 2px solid var(--blue-ink); outline-offset: 3px; }
.display-diagram { display: grid; grid-template-columns: 42fr 42fr 16fr; gap: 8px; inline-size: 100%; max-inline-size: 560px; aspect-ratio: 16 / 9; margin-block-start: 20px; padding: 11px; border: 5px solid var(--text-1); border-radius: var(--r-md); background: var(--surface-2); box-shadow: none; }
.display-area { display: flex; align-items: center; justify-content: center; padding: 7px; border-radius: 7px; background: #fff; color: var(--text-1); text-align: center; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.display-area-photos { background: var(--surface-2); }
.display-area-ads { background: var(--surface-2); color: var(--text-1); }
.display-description { color: var(--text-2); line-height: 1.65; }
.slide-slot { min-inline-size: 0; margin-block: 16px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.slide-slot-heading { margin: 0 0 14px; color: var(--text-2); font-size: 17px; line-height: 1.45; font-weight: 500; }
.slide-thumbnail { display: block; inline-size: 100%; block-size: 170px; margin-block-end: 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); object-fit: contain; }
.slide-title { display: block; font-size: 18px; font-weight: 500; overflow-wrap: anywhere; }
.slide-unsupported { margin-block: 18px; padding: 17px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.slide-unsupported p { margin-block: 0 14px; }
.slide-preview-target { font-weight: 500; overflow-wrap: anywhere; }
.slide-preview-media { inline-size: 100%; max-inline-size: 560px; margin-inline: auto; aspect-ratio: 503.0625 / 475.328125; border: 1px solid var(--line); background: var(--surface-2); }
.slide-preview-media-1 { aspect-ratio: 582.9375 / 550.046875; }
.slide-preview-media img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
.slide-file-field { position: relative; }
.slide-form .slide-file-input { position: absolute; inline-size: 1px !important; block-size: 1px; min-block-size: 0 !important; padding: 0 !important; clip-path: inset(50%); overflow: hidden; }
.slide-file-button { min-block-size: 68px; border-style: dashed; border-color: var(--line-strong); background: var(--surface-2); color: var(--blue-ink); box-shadow: none; }
.slide-file-field:focus-within .slide-file-button { outline: 2px solid var(--blue-ink); outline-offset: 3px; }
.slide-file-field.is-disabled { opacity: .65; }
.slide-filename { overflow-wrap: anywhere; }

/* Help stays on the page, with large, familiar disclosure controls. */
.help-panel { padding: 0 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.help-panel summary { display: flex; align-items: center; gap: 12px; min-block-size: 76px; padding-block: 18px; color: var(--text-1); font-size: 19px; font-weight: 500; cursor: pointer; list-style: none; }
.help-panel summary::-webkit-details-marker { display: none; }
.help-panel summary::after { content: '+'; margin-inline-start: auto; font-size: 26px; font-weight: 400; }
.help-panel[open] summary::after { content: '−'; }
.help-panel[open] summary { border-block-end: 1px solid var(--line); }
.help-steps { display: grid; gap: 16px; margin-block: 22px; padding-inline-start: 25px; color: var(--text-2); }
.help-steps li { padding-inline-start: 6px; }
.help-steps li::marker { font-weight: 500; color: var(--blue-ink); }
.help-steps strong { display: block; margin-block-end: 4px; color: var(--text-1); font-weight: 500; }
.help-steps p { margin: 0; }
/* Informational messages must not intercept a tap when keyboard focus changes. */
.toast { pointer-events: none; position: fixed; z-index: 30; inset-inline: var(--gutter); inset-block-end: calc(var(--pad-bottom) + 20px); max-inline-size: 600px; margin-inline: auto; padding: 18px 22px; border: 1px solid #ffffff2e; border-radius: var(--r-md); background: var(--surface-inv); color: #fff; box-shadow: none; font-size: 17px; line-height: 1.5; text-align: center; }

@media (min-width: 720px) {
  :root { --gutter: 32px; }
  .homes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-stats { margin-block-start: 2px; }
  .home-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-content > .home-music { grid-column: 1; grid-row: 2; }
  .home-content > .home-shot { grid-column: 2; grid-row: 2; }
  .home-content > .notices { grid-row: 1; }
  .home-content > .portal-slides { grid-row: 3; }
  .home-content > .display-choice { grid-row: 4; }
  .home-content > .notices, .home-content > .portal-slides, .home-content > .display-choice { grid-column: 1 / -1; }
  .portal-slides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
  .portal-slides > :not(.slide-slot) { grid-column: 1 / -1; }
  .portal-slides .slide-slot { margin-block: 12px 0; }
  .slide-slot.is-editing { grid-column: 1 / -1; }
  .slide-slot.is-editing .slide-form { max-inline-size: 780px; }
  .slide-slot .notice-actions .btn { inline-size: 100%; padding-inline: 10px; font-size: 15px; }
  .slide-slot.is-editing .notice-actions .btn { inline-size: auto; padding-inline: 18px; font-size: 16px; }
  .notice-form { max-inline-size: 820px; }
  .all-homes-notices { padding: 32px; }
  .help-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}
@media (min-width: 1100px) {
  :root { --gutter: 36px; }
  .app-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .app-shell > .top, .app-shell > .main, .app-shell > .foot { grid-column: 2; }
  .sidebar { position: sticky; inset-block-start: 0; grid-column: 1; grid-row: 1 / 4; display: flex; flex-direction: column; align-self: start; block-size: var(--vh100); padding: 32px 18px 28px; background: var(--surface); color: var(--text-1); border-inline-end: var(--hair); overflow-y: auto; }
  .side-brand { display: flex; min-block-size: 44px; align-items: center; gap: 10px; margin-block-end: 52px; padding-inline: 10px; color: var(--text-1); font-size: 20px; font-weight: 500; letter-spacing: -.5px; text-decoration: none; direction: ltr; justify-content: flex-start; }
  .side-brand img { inline-size: 33px; block-size: 33px; padding: 4px; border-radius: var(--r-sm); background: var(--surface); }
  .brand-dot { color: var(--blue-ink); }
  .side-caption { margin: -22px 12px 18px; color: var(--text-3); font-size: 14px; line-height: 1.55; letter-spacing: .15px; }
  .side-nav { display: grid; gap: 10px; }
  .side-nav .side-link > span:first-child { display: grid; place-items: center; inline-size: 24px; block-size: 24px; flex: none; color: var(--text-3); font-size: 24px; line-height: 1; }
  .side-link { display: flex; align-items: center; gap: 12px; min-block-size: 54px; padding: 13px 16px; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--text-3); font-size: 16px; font-weight: 400; text-decoration: none; }
  .side-link:hover { background: var(--surface-2); color: var(--text-1); }
  .side-link.is-active, .side-link[aria-current] { background: var(--surface-hi); border-color: #d3e4ff; color: var(--blue-ink); box-shadow: none; }
  .side-link:focus-visible, .side-brand:focus-visible { outline-color: var(--blue-ink); }
  .side-link .ic { inline-size: 22px; block-size: 22px; }
  .side-note { margin-block-start: auto; padding: 18px 14px 0; border-block-start: var(--hair); color: var(--text-3); font-size: 14px; line-height: 1.65; }
  .side-note strong { display: block; margin-block-end: 6px; color: var(--text-3); font-size: 15px; font-weight: 500; }
  .side-note p { margin: 0; }
  .side-note-icon { display: none; margin-block-end: 12px; color: var(--blue-ink); font-size: 27px; line-height: 1; }
  .side-footer { margin-block-start: 26px; padding-inline: 14px; color: var(--text-3); font-size: 12px; letter-spacing: .4px; line-height: 1.5; }
  .top { gap: 24px; min-block-size: 94px; padding-block: calc(var(--pad-top) + 18px) 18px; }
  .top-product { display: none; align-items: center; gap: 10px; color: var(--text-3); font-size: 16px; font-weight: 400; }
  .top-client { margin-inline-start: 0; flex: 1; }
  .main { padding-block-start: 32px; gap: 32px; }
}
@media (min-width: 1440px) {
  :root { --gutter: 48px; }
  .app-shell { grid-template-columns: 244px minmax(0, 1fr); }
  .sidebar { padding-inline: 24px; }
  .home-content > .notices { grid-column: 1 / -1; }
  .home-content > .portal-slides { grid-column: 1 / -1; }
  .home-content > .portal-slides .slide-slot { margin-block: 16px; }
  .home-content > .portal-slides .slide-thumbnail { block-size: 190px; }
  .home-content > .portal-slides .notice-actions .btn { inline-size: auto; }
  .home-content > .display-choice { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .btn, .lang-btn, .icon-btn, .home, .home-filters button, .vol-step, .sw-box, .overview-stat, .side-link { border: 1px solid ButtonText; }
  .sw-box::after { background: ButtonText; }
  .vol-step[aria-pressed="true"], .home-filters button[aria-pressed="true"], .side-link[aria-current] { border-width: 3px; }
}

/* Clear status, recoverable drafts and an inspectable screenshot. */
.directory-health { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin-block:0; }
.directory-health .home-note { margin:0; }
.connection-note, .draft-bar { border:1px solid #dac298; background:var(--amber-soft); color:var(--ink-on-amber); border-radius:var(--r-md); padding:18px 20px; }
.draft-bar { margin-block:0; }
.draft-bar .home-note { color:var(--text-2); }
.draft-links { display:flex; flex-wrap:wrap; gap:10px; }
.draft-links .btn { text-align:start; }
.home-context { position:sticky; inset-block-start:8px; z-index:2; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; background:var(--surface-2); padding:8px 12px; border:1px solid var(--line); border-radius:var(--r-md); box-shadow: none; }
.home-context strong { font-size:16px; }
.home-back { min-block-size:48px; display:inline-flex; align-items:center; color:var(--blue-ink); font-size:15px; text-underline-offset:4px; }
.home-content > section { scroll-margin-block-start:100px; }
.shot-open { display:block; width:100%; padding:0; border:0; border-radius:var(--r-md); background:transparent; color:var(--blue-ink); cursor:zoom-in; font:inherit; }
.shot-open-label { display:flex; min-block-size:48px; align-items:center; justify-content:center; text-decoration:underline; text-underline-offset:4px; }
.shot-exact { display:block; margin-block-start:5px; font-size:14px; }
.audience-summary { background:var(--surface-hi); padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:16px; }
.shot-dialog { width:min(1280px,96vw); max-height:94dvh; padding:24px; color:var(--text-1); background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow: none; }
.shot-dialog::backdrop { background:#171c2466; }
.shot-dialog-head { position:sticky; top:-24px; background:var(--bg); display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:8px; z-index:1; }
.shot-dialog-head h2 { font-size:22px; line-height:1.4; margin:0; }
.shot-dialog-address { display:block; margin-block-start:8px; color:var(--text-2); font-size:16px; font-weight:400; unicode-bidi:isolate; }
.shot-dialog-head .btn { flex:none; }
.shot-dialog img { display:block; width:100%; height:auto; background:var(--surface); }
.field-count { display:block; direction:ltr; unicode-bidi:isolate; text-align:end; color:var(--text-3); font-size:14px; }
@media(max-width:600px) { .directory-health { align-items:stretch; } .directory-health .btn { width:100%; } .home-context { padding:6px 10px; gap:0 8px; } .shot-dialog { padding:16px; } .shot-dialog-head { top:-16px; } .shot-dialog-head h2 { font-size:18px; } }
.discard-dialog { width:min(540px,calc(100vw - 28px)); padding:28px; border:1px solid var(--line); border-radius:var(--r-lg); color:var(--text-1); background:var(--surface); box-shadow: none; }
.discard-dialog::backdrop { background:#171c2466; }
.discard-dialog h2 { margin:0 0 16px; font-size:24px; }
.discard-dialog p { font-size:18px; line-height:1.6; margin:0 0 24px; }
.discard-dialog .notice-actions { margin:0; }
@media(max-width:600px) { .discard-dialog { padding:22px; } .discard-dialog .btn { width:100%; } }

/* The phone workspace has its own navigation and one home section at a time. */
.mobile-nav, .home-section-picker { display: none; }
.notice-history { margin-block-start: 20px; padding-block-start: 12px; border-block-start: 1px solid var(--line); }
.notice-history summary { display: flex; align-items: center; min-block-size: 52px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--blue-ink); font-size: 16px; font-weight: 500; cursor: pointer; }
.notice-history summary:hover { background: var(--surface-2); }
.notice-history[open] summary { margin-block-end: 16px; }
.display-legend { display: none; }
html:has(dialog[open]) { overflow: hidden; }
dialog { overscroll-behavior: contain; max-block-size: calc(var(--vh100) - 32px); }
.shot-zoom-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-block-end: 16px; }
.shot-zoom-tools .home-note { flex: 1 1 220px; margin: 0; }
.shot-viewport { max-block-size: 65dvh; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); }
.shot-viewport.is-zoomed img { inline-size: max(100%, 960px); max-inline-size: none; }
.shot-viewport:focus-visible { outline-offset: 3px; }
@media (max-width: 1099px) {
  .app { padding-block-end: calc(84px + var(--pad-bottom)); }
  .mobile-nav {
    position: fixed; z-index: 15; inset-inline: 0; inset-block-end: 0;
    display: flex; align-items: stretch; gap: 6px;
    padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(8px + var(--pad-bottom)) max(12px, env(safe-area-inset-left, 0px));
    border-block-start: 1px solid var(--line); background: var(--surface);
    box-shadow: none;
  }
  .mobile-nav a { flex: 1 1 0; min-inline-size: 0; min-block-size: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 5px 8px; border: 1px solid transparent; border-radius: var(--r-md); color: var(--text-2); font-size: 14px; font-weight: 500; line-height: 1.35; text-align: center; text-decoration: none; }
  .mobile-nav a[aria-current] { background: var(--surface-hi); color: var(--blue-ink); border-color: #d3e4ff; box-shadow: none; }
  .mobile-nav .ic { inline-size: 23px; block-size: 23px; }
  .toast { inset-block-end: calc(96px + var(--pad-bottom)); }
  html { scroll-padding-block-end: calc(96px + var(--pad-bottom)); }
  /* Give the software keyboard the bottom edge while writing. */
  body:has(input:not([type=checkbox]):not([type=radio]):not([type=file]):focus, textarea:focus) .mobile-nav { display: none; }
  body:has(input:not([type=checkbox]):not([type=radio]):not([type=file]):focus, textarea:focus) .toast { inset-block-end: 12px; }
}
@media (max-width: 719px) {
  :root { --gutter: 16px; }
  .top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: calc(var(--pad-top) + 16px) max(var(--gutter), env(safe-area-inset-right, 0px)) 16px max(var(--gutter), env(safe-area-inset-left, 0px)); }
  .top-client { gap: 9px; min-inline-size: 0; }
  .top-logo { inline-size: 38px; block-size: 38px; padding: 3px; border-radius: var(--r-sm); }
  .top-cl { font-size: 16px; }
  .top-user { font-size: 14px; }
  .top-acts { gap: 6px; flex-wrap: nowrap; }
  .top-acts .btn, .top-acts .lang-btn, .top-acts .icon-btn { min-block-size: 48px; padding: 10px; }
  .logout-button .ic { display: none; }
  .main { gap: 20px; padding-block: 20px 28px; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
  .overview-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .overview-stat { display: flex; flex-direction: column; gap: 8px; padding: 14px 10px; border-radius: var(--r-md); }
  .stat-value { order: -1; font-size: 30px; letter-spacing: -.7px; }
  .stat-label { display: block; font-size: 14px; line-height: 1.45; }
  .stat-label::before { display: none; }
  .stat-note { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .stat-online { background: var(--surface); border-color: var(--line); }
  .stat-attention { background: var(--surface); border-color: var(--line); }
  .directory { gap: 16px; }
  .section-heading .eyebrow { display: none; }
  .section-heading .h { font-size: 25px; }
  .section-heading .sub { font-size: 15px; }
  .directory-health { margin: 0; gap: 8px; align-items: center; }
  .directory-health .home-note { font-size: 14px; flex: 1 1 145px; }
  .directory-health .btn { inline-size: auto; min-block-size: 48px; padding: 10px 12px; font-size: 14px; flex: 1 1 150px; }
  .directory-tools { gap: 12px; }
  .search-field { max-inline-size: none; flex-basis: 100%; }
  .home-filters { inline-size: 100%; }
  .home-filters button { flex: 1 1 0; min-inline-size: 0; padding: 9px 7px; font-size: 14px; }
  .homes { gap: 12px; }
  .home { border-radius: var(--r-md); }
  .home-addr { font-size: 20px; }
  .home-city { font-size: 15px; }
  .home-line { gap: 6px; }
  .home-body { padding: 0 14px 18px; gap: 18px; background: #fff; }
  .home-context { inset-block-start: 0; margin-inline: -14px; padding: 8px 14px; gap: 4px 10px; border-width: 0 0 1px; border-radius: 0; background: var(--surface-2); box-shadow: none; }
  .home-context strong { flex: 1 1 105px; overflow-wrap: anywhere; }
  .home-back { font-size: 14px; }
  .home-shortcuts { display: none; }
  .home-section-picker { display: grid; gap: var(--space-2); color: var(--text-2); font-size: 15px; font-weight: 500; }
  .home-section-select { display: block; inline-size: 100%; min-block-size: 54px; padding: 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); color: var(--blue-ink); background: var(--surface-2); font: 500 17px/1.5 var(--font-ui); box-shadow: none; }
  .home-content { display: block; }
  .home-content > section { padding: 0; border: 0; border-radius: 0; scroll-margin-block-start: 100px; }
  .home-content > section[data-mobile-active="false"] { display: none; }
  .home-h { font-size: 21px; }
  .home-note { font-size: 16px; }
  .notices > .btn, .home-shot .shot > .btn, .music-schedule > .btn, .display-choice > .btn { inline-size: 100%; }
  .notice-form { margin-block-start: 16px; }
  .notice, .slide-slot { padding: 16px 12px; margin-block: 16px; border-radius: var(--r-md); }
  .notice-actions { gap: 10px; }
  .notice-actions .btn { flex: 1 1 100%; }
  .notice-form .fld { margin-block: 18px; }
  .notice-preview, .slide-preview { padding: 16px 10px; margin-inline: -1px; }
  .notice-frame { max-inline-size: 100%; }
  .notice-frame-urgent { aspect-ratio: 16 / 9; }
  .vol-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .vol-step { min-block-size: 74px; padding-inline: 5px; }
  .vol-name, .vol-num { font-size: 14px; }
  .schedule-summary { font-size: 15px; column-gap: 10px; }
  .schedule-day { padding: 14px 12px; }
  .schedule-hours { gap: 10px; }
  .schedule-hours input { padding-inline: 7px; font-size: 17px; }
  .display-option { padding: 14px 12px; }
  .display-diagram { gap: 5px; padding: 7px; border-width: 4px; }
  .display-area { font-size: 0; padding: 5px 3px; }
  .display-area::before { content: attr(data-number); font: 600 22px/1 var(--font-ui); }
  .display-legend { display: grid; gap: 8px; margin: 14px 0; padding: 0; list-style: none; }
  .display-legend-item { display: flex; align-items: center; gap: 10px; min-block-size: 46px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); font-size: 16px; line-height: 1.4; }
  .display-legend-number { display: grid; place-items: center; inline-size: 27px; block-size: 27px; flex: none; border-radius: 7px; background: var(--surface-2); color: var(--text-1); font-weight: 600; }
  .display-description { font-size: 16px; }
  .slide-slot.is-editing { padding: 0; border: 0; background: #fff; }
  .slide-thumbnail { block-size: auto; max-block-size: 220px; aspect-ratio: 16 / 9; }
  .all-homes-notices { padding: 22px 16px; border-radius: var(--r-md); }
  .all-homes-notices .home-h { font-size: 23px; }
  .audience-summary { padding: 12px; }
  .draft-bar, .connection-note { padding: 16px; }
  .draft-bar { margin: 0; }
  .draft-links .btn { inline-size: 100%; }
  .help-panel { padding-inline: 18px; }
  .help-steps { gap: 20px; }
  .auth { padding-inline: 16px; padding-block: calc(var(--pad-top) + 24px) calc(var(--pad-bottom) + 24px); }
  .auth-box { padding: 28px 24px; border-radius: var(--r-md); gap: 20px; }
  .auth-lang { inset-inline-end: 24px; }
  .auth-title { font-size: 28px; }
  .shot-dialog { inline-size: calc(100vw - 16px); max-block-size: calc(var(--vh100) - 16px); padding: 16px; border-radius: var(--r-md); }
  .shot-dialog-head { top: -16px; gap: 12px; }
  .shot-dialog-head h2 { font-size: 18px; overflow-wrap: anywhere; }
  .shot-dialog-head .btn { padding-inline: 12px; }
  .shot-zoom-tools { gap: 12px; }
  .shot-zoom-tools .btn { inline-size: 100%; }
  .shot-viewport { max-block-size: 50dvh; }
  .discard-dialog { padding: 24px 20px; max-block-size: calc(var(--vh100) - 24px); }
  .discard-dialog .btn { inline-size: 100%; }
  .toast { padding: 14px 16px; font-size: 16px; text-align: start; }
}
@media (max-width: 360px) {
  :root { --gutter: 12px; }
  .top-logo { display: none; }
  .overview-stat { padding: 12px 9px; }
  .home-body { padding-inline: 12px; }
  .home-context { margin-inline: -12px; padding-inline: 12px; }
  .schedule-hours { grid-template-columns: minmax(0, 1fr); }
  .schedule-summary { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .schedule-summary dt { border: 0; padding-block-end: 0; }
  .schedule-summary dd { padding-block: 2px 9px; }
  .auth-box { padding: 26px 20px; }
}
@media (max-height: 500px) and (max-width: 1099px) {
  .mobile-nav a { flex-direction: row; min-block-size: 48px; }
  .home-context { position: static; }
  .shot-dialog, .discard-dialog { max-block-size: calc(var(--vh100) - 12px); }
  .auth { align-items: start; }
}
@media (forced-colors: active) {
  .mobile-nav, .mobile-nav a[aria-current], .home-section-select { border: 1px solid ButtonText; }
}

/* Native menu works with touch, keyboard and screen readers. */
select.lang-btn { min-block-size: 44px; min-inline-size: 100px; max-inline-size: 100%; padding-inline: 10px; font: inherit; color: inherit; }

/* Daily workspace: one destination at a time, with compact summaries above it. */
.app[data-page="common"] .directory,
.app[data-page="help"] .directory,
.app:not([data-page="common"]) > .main > .all-homes-notices,
.app:not([data-page="help"]) > .main > .help-panel { display: none; }
.profile-menu { position: relative; flex: none; }
.profile-trigger { display: flex; align-items: center; justify-content: center; inline-size: 44px; min-block-size: 44px; border: 1px solid var(--line); border-radius: 50%; color: var(--text-2); cursor: pointer; list-style: none; }
.profile-trigger::-webkit-details-marker, .home-details-toggle::-webkit-details-marker { display: none; }
.profile-trigger:hover, .profile-menu[open] .profile-trigger { color: var(--blue-ink); background: var(--surface-hi); }
.profile-panel { position: absolute; z-index: 25; inset-block-start: calc(100% + 8px); inset-inline-end: 0; inline-size: min(260px, calc(100vw - 32px)); padding: 16px; display: grid; gap: 8px; background: #fff; border: 1px solid var(--line-strong); border-radius: 12px; }
.profile-panel .logout-button { justify-content: flex-start; margin-block-start: 8px; min-block-size: 44px; }
.profile-panel .logout-button .ic { display: block; }
.profile-panel .top-user { overflow-wrap: anywhere; }
.top { background: #fff; }
.top-acts { flex-wrap: nowrap; }
.directory .section-heading { align-items: center; }
.directory .section-heading .h { font-size: 26px; }
.overview-stats { gap: 0; padding-block: 12px; border-block: 1px solid var(--line); }
.overview-stat { border: 0; border-radius: 0; padding: 0 20px; gap: 4px; }
.overview-stat:first-child { padding-inline-start: 0; }
.overview-stat + .overview-stat { border-inline-start: 1px solid var(--line); }
.stat-value { order: -1; font-size: 26px; line-height: 1.2; letter-spacing: -.5px; }
.stat-label { font-size: 14px; }
.stat-note { display: none; }
.directory-health { gap: 8px; }
.directory-health .home-note { flex: 1; font-size: 14px; }
.directory-health #refreshHomes { flex: none; inline-size: 44px; block-size: 44px; min-block-size: 44px; padding: 10px; border-color: transparent; background: transparent; }
#refreshHomes.is-refreshing .ic { opacity: .45; }
.home-filters { border: 0; background: none; padding: 0; gap: 4px; }
.home-filters button { min-block-size: 44px; border-radius: 6px; padding: 8px 12px; }
.home-filters button[aria-pressed="true"] { border-color: transparent; }
.search-field { background: var(--surface-2); }
.search-field input { min-block-size: 44px; padding-block: 9px; font-size: 16px; }
.home-summary { padding: 16px 16px 0; }
.home-addr { text-align: left; margin: 0; font-size: 18px; line-height: 1.4; font-weight: 500; letter-spacing: -.2px; }
.home-city { text-align: left; margin: 2px 0 0; font-size: 14px; line-height: 1.5; }
:root[dir="rtl"] .home-addr, :root[dir="rtl"] .home-city { text-align: right; }
.home-line { margin-block-start: 8px; gap: 8px; font-size: 14px; }
.home-line .st { background: none; padding: 0; font-weight: 400; gap: 6px; }
.home-card-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 8px; padding: 8px 12px 10px; }
.home-details { min-inline-size: 0; }
.home-details-toggle { display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; min-block-size: 44px; padding: 10px 4px; color: var(--text-2); font-size: 14px; line-height: 1.4; list-style: none; cursor: pointer; }
.details-chevron { font-size: 18px; line-height: 1; }
.home-details[open] .details-chevron { transform: rotate(180deg); }
.home-details-content { padding: 0 4px 6px; font-size: 14px; }
.home-variant { margin: 0; color: var(--text-2); }
.home-update { margin-block: 6px 0; padding: 0; font-size: 14px; font-weight: 400; }
.home-card-actions .home-manage { display: inline-flex; align-items: center; justify-content: center; inline-size: auto; min-inline-size: 92px; min-block-size: 44px; padding: 10px 14px; border: 0; border-radius: 6px; background: var(--surface-hi); color: var(--blue-ink); font: 500 15px/1.4 var(--font-ui); text-align: center; cursor: pointer; }
.home-card-actions .home-manage:hover { background: #deebff; }
.home.is-open { border-color: var(--line-strong); }
.home.is-open .home-manage { border-radius: 6px; background: var(--surface-2); color: var(--text-2); }
.home-body { border-radius: 0 0 var(--r-md) var(--r-md); }
.home-context { position: static; border: 0; border-radius: 0; background: transparent; padding-inline: 0; }
.home-context strong { display: none; }
.home-context .home-back { min-block-size: 44px; }
.all-homes-notices { border: 0; padding: 0; border-radius: 0; }
@media (max-width: 1099px) {
  .app { padding-block-end: calc(64px + var(--pad-bottom)); }
  .mobile-nav { gap: 0; padding: 4px max(12px,env(safe-area-inset-right,0px)) calc(4px + var(--pad-bottom)) max(12px,env(safe-area-inset-left,0px)); }
  .mobile-nav a { min-block-size: 52px; gap: 3px; padding: 4px; border: 0; border-radius: 0; font-size: 14px; font-weight: 400; }
  .mobile-nav a[aria-current] { background: none; color: var(--blue-ink); font-weight: 500; }
  .mobile-nav .ic { inline-size: 20px; block-size: 20px; }
  .toast { inset-block-end: calc(76px + var(--pad-bottom)); }
}
@media (max-width: 719px) {
  .top { gap: 8px; padding-block: calc(var(--pad-top) + 8px) 8px; }
  .top-client { gap: 8px; }
  .top-logo { inline-size: 28px; block-size: 28px; border: 0; padding: 0; border-radius: 0; }
  .top-cl { font-size: 14px; line-height: 1.4; }
  .top-acts { gap: 8px; }
  .top-acts .lang-btn { min-block-size: 44px; min-inline-size: 94px; padding: 8px; font-size: 14px; border-color: transparent; }
  .main { gap: 16px; padding-block: 20px 16px; }
  .directory { gap: 12px; }
  .directory .section-heading .h { font-size: 24px; line-height: 1.3; letter-spacing: -.4px; }
  .overview-stats { padding-block: 12px; }
  .overview-stat { padding: 0 12px; gap: 4px; }
  .stat-value { font-size: 24px; }
  .stat-label { font-size: 14px; line-height: 1.4; }
  .directory-health .home-note { flex: 1; font-size: 14px; line-height: 1.4; }
  .directory-tools { gap: 4px; }
  .search-field { padding-inline: 12px; gap: 8px; }
  .home-filters { inline-size: 100%; }
  .home-filters button { flex: 1 1 0; padding: 8px 6px; font-size: 14px; }
  .homes { gap: 10px; }
  .home-summary { padding: 14px 14px 0; }
  .home-card-actions { padding: 6px 10px 8px; }
  .home-body { padding: 0 14px 16px; gap: 12px; }
  .home-context { margin: 0; padding-block: 4px 0; }
  .home-section-picker { gap: 6px; font-size: 14px; }
  .home-section-select { min-block-size: 44px; padding: 8px 10px; font-size: 16px; background: #fff; }
  .home-h { font-size: 18px; }
  .home-note { font-size: 15px; }
  .foot { padding-block: 4px 12px; font-size: 14px; }
  .help-panel { border: 0; padding-inline: 0; }
}
@media (forced-colors: active) {
  .profile-trigger, .home-card-actions .home-manage, .home-filters button[aria-pressed="true"] { border: 1px solid ButtonText; }
  .mobile-nav a[aria-current] { text-decoration: underline; }
}

/* Pearl cabinet. These assets/styles are loaded only by portal.html. */
:root { --bg: #f3f6f9; --r-lg: 24px; --r-md: 20px; --shadow-card: 0 8px 32px #233e5b05; }
.app { background: radial-gradient(ellipse at 25% 12%, #fff8, transparent 50%), var(--bg); }
.top { background: transparent; border: 0; gap: 16px; }
.top-product { display: flex; align-items: center; gap: 8px; color: var(--text-1); font-size: 19px; font-weight: 600; letter-spacing: -.6px; min-block-size: 44px; }
.top-product img { inline-size: 26px; block-size: 26px; }
.top-acts { gap: 8px; }
.language-control { position: relative; display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; background: #e9eef3; flex: none; }
.language-control .ic { inline-size: 21px; block-size: 21px; }
.top-acts .language-control select.lang-btn { position: absolute; inset: 0; opacity: 0; inline-size: 44px; min-inline-size: 44px; block-size: 44px; cursor: pointer; }
.language-control:focus-within { outline: 2px solid var(--blue-ink); outline-offset: 3px; }
.profile-trigger { border: 0; background: #e5eaf0; color: var(--text-1); }
.profile-trigger .ic { inline-size: 20px; block-size: 20px; }
.profile-panel { box-shadow: 0 16px 50px #243c5c20; border: 0; border-radius: 20px; }
.profile-panel .top-client { display: flex; gap: 10px; border-block-end: var(--hair); padding-block-end: 12px; }
.profile-panel .top-cl { font-size: 15px; }
.profile-email { font-size: 14px; overflow-wrap: anywhere; color: var(--text-2); }
.directory { gap: 16px; }
.directory .welcome { display: block; margin: 0 0 18px; }
#welcomeGreeting { color: var(--text-3); margin: 0 0 4px; font-size: 17px; unicode-bidi: plaintext; }
.directory .section-heading .h { font-size: clamp(30px, 6.7vw, 42px); font-weight: 600; line-height: 1.15; letter-spacing: -1px; }
.overview-card { position: relative; isolation: isolate; border-radius: 24px; background: #fff; box-shadow: var(--shadow-card); padding: 20px 16px 0; }
.overview-architecture { position: absolute; left: -8px; bottom: 48px; width: 52%; height: calc(100% + 30px); object-fit: contain; object-position: bottom; z-index: -1; pointer-events: none; mask-image: linear-gradient(#000 80%, transparent 100%); }
.overview-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding: 0; border: 0; direction: ltr; }
.overview-stat { display: flex; align-items: flex-end; padding: 0; border: 0!important; gap: 0; direction: inherit; }
.overview-stat:first-child { min-inline-size: 48%; }
.overview-stat .stat-label { font-size: 14px; color: var(--text-3); }
.overview-stat .stat-value { order: 0; font-size: 64px; line-height: 1.1; font-weight: 600; letter-spacing: -3px; color: #101f2c; }
.overview-stat .stat-note { display: block; font-size: 16px; color: var(--text-1); }
.overview-statuses { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; max-inline-size: 100%; direction: rtl; }
:root[dir="ltr"] .overview-statuses { direction: ltr; }
.overview-statuses .overview-stat { flex-direction: row; align-items: center; gap: 5px; min-inline-size: 0; border-radius: 999px; padding: 7px 10px; font-size: 13px; line-height: 1.4; background: #eff8f4; color: #244e3d; }
.overview-statuses .stat-attention { background: #fff7e9; color: #725114; }
.overview-statuses .dot { inline-size: 8px; block-size: 8px; background: #0f9c70; }
.overview-statuses .stat-attention .dot { background: #c48112; }
.directory-health { position: relative; margin-block-start: 12px; border-block-start: 1px solid #e8edf2; min-block-size: 48px; display: flex; align-items: center; gap: 4px; }
.directory-health .home-note { margin: 0; font-size: 13px; }
.quick-actions { display: grid; grid-template-columns: 1.08fr 1fr; gap: 10px; }
.quick-actions .btn { gap: 8px; min-block-size: 56px; padding: 10px 12px; border: 0; border-radius: 18px; background: #fff; color: var(--text-1); font-size: 15px; line-height: 1.3; box-shadow: var(--shadow-card); }
.quick-actions .btn-primary { background: var(--blue); color: #092444; }
.quick-actions .btn-primary:disabled { opacity: .55; }
.quick-actions #quickNoticeReason { grid-column: 1 / -1; margin: 0; }
.quick-plus { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--blue-ink); font-size: 25px; font-weight: 400; line-height: 1; }
.quick-actions .ic { flex: none; inline-size: 22px; block-size: 22px; }
.directory-tools { display: flex; flex-direction: column; gap: 12px; }
.search-field { width: 100%; border: 0; border-radius: 18px; background: #ffffffb8; min-block-size: 48px; padding-inline: 16px; }
.search-field input { background: transparent; font-size: 16px; }
.directory-list-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; width: 100%; }
#homesCount { font-size: 15px; font-weight: 500; color: var(--text-2); margin: 0; }
.home-filters { inline-size: auto; gap: 4px; }
.home-filters button { flex: none; min-block-size: 44px; font-size: 13px; padding: 6px 11px; border-radius: 999px; background: #eaf0f5; color: var(--text-2); border: 0; }
.home-filters button[aria-pressed="true"] { background: #303943; color: #fff; box-shadow: none; }
.homes { gap: 10px; }
.home { position: relative; border: 0; border-radius: 20px; background: #fff; box-shadow: var(--shadow-card); overflow: visible; }
.home-card-row { display: grid; grid-template-columns: 68px minmax(0,1fr) 44px; align-items: center; gap: 12px; padding: 14px 12px; min-block-size: 110px; }
.home-summary { padding: 0; min-inline-size: 0; }
.home-addr { font-size: 17px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.home-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; margin-block-start: 4px; font-size: 13px; line-height: 1.5; color: var(--text-3); }
.home-city { margin: 0; font-size: inherit; }
.home-line { margin-block-start: 5px; font-size: 14px; }
.home-line .st { line-height: 1.4; }
.home-line .dot { inline-size: 8px; block-size: 8px; }
.home-details-toggle { position: absolute; inset-block-start: 14px; inset-inline-start: 12px; inline-size: 68px; min-block-size: 82px; padding: 6px 3px; border-radius: 13px; display: flex; flex-direction: column; justify-content: center; gap: 1px; background: linear-gradient(145deg,#eef3f8,#e4edf5); color: #425d75; font-size: 12px; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
.home-details-toggle svg { inline-size: 40px; block-size: 40px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.home-details[open] .home-details-toggle { background: #e2eeff; color: var(--blue-ink); }
.home-details-content { padding: 12px 16px; margin: 0 12px 10px; border-block-start: var(--hair); }
.home-card-row .home-manage { display: grid; place-items: center; inline-size: 44px; min-inline-size: 44px; block-size: 44px; min-block-size: 44px; padding: 0; border: 0; border-radius: 50%; background: #f0f4f7; color: #364652; font-size: 24px; cursor: pointer; }
:root[dir="rtl"] .manage-arrow { transform: scaleX(-1); }
.home.is-open .home-manage { background: #e9f2ff; color: var(--blue-ink); border-radius: 50%; }
.home.is-open { grid-column: 1/-1; }
.notice-targets { display: grid; gap: 8px; margin-block: 18px; }
.notice-target { text-align: start; justify-content: flex-start; }
.notice-audience summary { cursor: pointer; min-block-size: 44px; display: flex; align-items: center; color: var(--blue-ink); }
.notice-audience li { overflow-wrap: anywhere; }
@media (max-width: 1099px) {
  .app { padding-block-end: calc(102px + var(--pad-bottom)); }
  .mobile-nav { inset-inline: 12px; inset-block-end: max(10px,var(--pad-bottom)); inline-size: auto; border: 0; border-radius: 28px; box-shadow: 0 8px 36px #24456412; padding: 6px 12px; background: #fffffff5; }
  .mobile-nav a { min-block-size: 62px; border-radius: 20px; font-size: 13px; gap: 3px; }
  .mobile-nav a[aria-current] { background: #edf4ff; color: var(--blue-ink); }
  .mobile-nav .ic { inline-size: 23px; block-size: 23px; }
  .toast { inset-block-end: calc(106px + var(--pad-bottom)); }
}
@media (max-width: 719px) {
  :root { --gutter: 16px; }
  .top { padding-block: calc(var(--pad-top) + 12px) 8px; }
  .main { padding-block-start: 18px; }
  .top-product { font-size: 18px; gap: 6px; }
  .top-product img { inline-size: 24px; block-size: 24px; }
  .overview-card { min-block-size: 218px; }
  .overview-stats > .overview-stat { flex-direction: column; }
  .directory .welcome { margin-block-end: 16px; }
}
@media (min-width: 720px) {
  .overview-card { padding: 28px 32px 0; min-block-size: 264px; }
  .overview-architecture { width: 44%; height: calc(100% + 48px); left: 3%; }
  .overview-stats > .overview-stat { flex-direction: column; }
  .overview-stat .stat-value { font-size: 84px; }
  .overview-stat .stat-label { font-size: 16px; }
  .overview-statuses .overview-stat { font-size: 15px; padding: 8px 14px; }
  .quick-actions { max-inline-size: 580px; }
  .quick-actions .btn { min-block-size: 60px; }
  .home-card-row { grid-template-columns: 76px minmax(0,1fr) 44px; min-block-size: 122px; padding: 18px 16px; }
  .home-details-toggle { inset-inline-start: 16px; inset-block-start: 18px; inline-size: 76px; }
  .home-addr { font-size: 18px; }
}
@media (min-width: 1100px) {
  .sidebar { background: #ffffff9c; border: 0; }
  .side-note { background: transparent; border: 0; }
  .top { min-block-size: 84px; padding-block: 20px; }
  .main { max-inline-size: 1260px; padding-block-start: 12px; }
  .directory { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.65fr); gap: 22px; }
  .welcome { grid-column: 1/-1; }
  .overview-card { grid-column: 1; }
  .quick-actions { grid-column: 2; display: flex; flex-direction: column; justify-content: center; max-inline-size: none; }
  .directory-tools,.homes,#homesEmpty,#searchEmpty,#homesErr { grid-column: 1/-1; }
  .directory-tools { gap: 14px; }
  .search-field { max-inline-size: 620px; }
  .homes { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) { .overview-architecture { transition: none; } }
.directory-tools { flex-wrap: nowrap; align-items: stretch; }
.search-field { flex: none; max-inline-size: none; }
.overview-stats > .overview-stat { background: transparent; }
@media (min-width:1100px) { .search-field { max-inline-size: 620px; } }
.overview-stats > .overview-stat { max-inline-size: 58%; }
.overview-stat .stat-note { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; text-align: right; line-height: 1.4; }
@media (max-width: 380px) { .top-product { font-size: 16px; } .top-product img { inline-size: 22px; block-size: 22px; } }
.home-filters button { min-inline-size: 44px; }
:root[dir="ltr"] .overview-architecture { height: calc(100% - 32px); }

/* The mobile reserve follows the rendered nav height (including wrapped labels).
   The same safe-area offset positions the panel and reserves space below content. */
:root { --portal-nav-height: 74px; --portal-nav-offset: max(10px,var(--pad-bottom)); }
.overview-workspace { display: contents; }
@media (max-width: 1099px) {
  html { scroll-padding-block-end: calc(var(--portal-nav-height) + var(--portal-nav-offset) + 16px); }
  .app { padding-block-end: calc(var(--portal-nav-height) + var(--portal-nav-offset) + 20px); }
  .mobile-nav { inset-block-end: var(--portal-nav-offset); }
  .toast { inset-block-end: calc(var(--portal-nav-height) + var(--portal-nav-offset) + 16px); }
}
@media (min-width: 1100px) {
  .sidebar .side-brand { display: none; }
  .sidebar { padding-block-start: 32px; }
  .side-caption { margin-block: 0 24px; }
  .directory { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .directory .welcome { margin-block-end: 0; }
  .overview-workspace { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(260px,1fr); align-items: center; border-radius: 24px; background: #fff; box-shadow: var(--shadow-card); }
  .overview-workspace .overview-card { background: transparent; box-shadow: none; min-block-size: 244px; padding: 24px 28px 0; }
  .overview-workspace .overview-architecture { height: calc(100% - 30px); }
  .overview-workspace .quick-actions { padding: 28px; border-inline-start: 1px solid var(--line-2); gap: 12px; }
  .overview-workspace .quick-actions .btn:not(.btn-primary) { background: var(--surface-2); box-shadow: none; }
  .directory-tools { flex-direction: row; align-items: center; gap: 20px; border-radius: 20px; padding: 12px 16px; background: #fff; }
  .directory-tools .search-field { flex: 1 1 40%; max-inline-size: 460px; background: var(--surface-2); }
  .directory-list-heading { flex: 1 1 auto; width: auto; gap: 12px; }
  #homesCount { flex: none; }
}

.overview-stat .stat-value { min-inline-size: 1ch; flex: none; text-align: right; unicode-bidi: isolate; }