:root {
  --paper: #faf6ee;
  --card: #fffdf9;
  --ink: #20313a;
  --muted: #617178;
  --teal: #125868;
  --teal-deep: #0d414c;
  --teal-soft: #dfecee;
  --coral: #a8451f;
  --coral-bright: #e8926a;
  --coral-soft: #f8e7de;
  --green: #27734a;
  --line: #d4deda;
  --shadow: 0 18px 55px rgba(13, 65, 76, .14);
  --radius: 20px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: light; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .58; }
input, select, textarea { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); padding: 11px 13px; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--teal); outline: 3px solid rgba(18, 88, 104, .13); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--teal-deep); line-height: 1.14; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: white; }
.skip-link:focus { top: 16px; }
.eyebrow { margin: 0 0 7px; color: var(--coral); font-size: .75rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.brand-mark { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 13px; background: var(--coral-bright); color: var(--teal-deep); font-size: 1.35rem; font-weight: 900; }
.button { display: inline-flex; min-height: 45px; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 999px; padding: 10px 17px; font-weight: 850; }
.button.primary { background: var(--teal); color: white; }
.button.secondary { border-color: var(--teal); background: white; color: var(--teal); }
.button.add-button { background: var(--coral-bright); color: var(--teal-deep); }
.button.danger { border-color: #b34848; background: white; color: #9c3030; }
.icon-button { display: grid; width: 45px; height: 45px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--teal-deep); font-size: 1.25rem; }

.login-screen { min-height: 100svh; padding: 32px; display: grid; place-items: center; background: radial-gradient(circle at 15% 15%, rgba(232,146,106,.23), transparent 28%), linear-gradient(145deg, var(--teal-deep), #12343b); }
.login-card { width: min(100%, 460px); padding: 42px; border-radius: 28px; background: var(--paper); box-shadow: 0 30px 80px rgba(0,0,0,.26); }
.login-card .brand-mark { margin-bottom: 28px; }
.login-card h1 { margin-bottom: 10px; font-size: 2.3rem; }
.login-card > p:not(.eyebrow) { color: var(--muted); }
.login-card form { display: grid; gap: 10px; margin-top: 26px; }
.login-card label, .field label { color: var(--teal-deep); font-weight: 800; }
.login-card .button { margin-top: 8px; }
.form-message { min-height: 24px; margin: 4px 0 0; color: #9c3030; font-weight: 700; }

.topbar { position: sticky; top: 0; z-index: 20; display: flex; min-height: 76px; align-items: center; gap: 24px; padding: 13px clamp(18px, 4vw, 56px); border-bottom: 1px solid rgba(255,255,255,.14); background: rgba(13,65,76,.97); color: white; backdrop-filter: blur(16px); }
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-lockup strong, .brand-lockup small { display: block; }
.brand-lockup small { color: #c9dde0; }
.section-nav { display: flex; align-items: center; gap: 4px; max-width: 100%; overflow-x: auto; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.09); scrollbar-width: none; }
.section-nav::-webkit-scrollbar { display: none; }
.section-nav button { flex: 0 0 auto; border: 0; border-radius: 999px; padding: 8px 13px; background: transparent; color: #c9dde0; font-size: .88rem; font-weight: 850; white-space: nowrap; }
.section-nav button[aria-pressed="true"] { background: white; color: var(--teal-deep); }
.publish-state { display: flex; align-items: center; gap: 8px; margin-left: auto; color: #dbe9eb; font-weight: 700; }
.publish-state i { width: 9px; height: 9px; border-radius: 50%; background: #79d29a; box-shadow: 0 0 0 4px rgba(121,210,154,.13); }
.publish-state.changed i { background: #ffd071; box-shadow: 0 0 0 4px rgba(255,208,113,.13); }
.top-actions { display: flex; align-items: center; gap: 9px; }
.topbar .secondary { border-color: rgba(255,255,255,.45); background: transparent; color: white; }
.topbar .primary { background: white; color: var(--teal-deep); }

.workspace { width: min(calc(100% - 40px), 1180px); margin: 0 auto; padding: 52px 0 80px; }
.workspace-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 27px; }
.workspace-heading h1 { margin-bottom: 8px; font-size: clamp(2rem, 4vw, 3.45rem); letter-spacing: -.035em; }
.status-copy { margin: 0; color: var(--muted); }
.control-panel { display: grid; grid-template-columns: minmax(280px, 1fr) auto; align-items: end; gap: 18px; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: 0 5px 20px rgba(13,65,76,.06); }
.search-field span { display: block; margin-bottom: 7px; color: var(--teal-deep); font-weight: 800; }
.summary { display: flex; min-width: 150px; align-items: baseline; justify-content: center; gap: 7px; padding: 10px 14px; border-radius: 13px; background: var(--teal-soft); color: var(--teal-deep); }
.summary strong { font-size: 1.45rem; }
.day-tabs { display: flex; gap: 8px; margin: 22px 0; padding-bottom: 4px; overflow-x: auto; scrollbar-width: thin; }
.day-tabs button { min-width: max-content; border: 1px solid var(--line); border-radius: 999px; background: white; padding: 9px 15px; color: var(--muted); font-weight: 800; }
.day-tabs button[aria-pressed="true"] { border-color: var(--teal); background: var(--teal); color: white; }
.activity-list { display: grid; gap: 11px; }
.activity-row { display: grid; grid-template-columns: 95px minmax(0, 1fr) auto; align-items: center; gap: 18px; width: 100%; border: 1px solid var(--line); border-left: 7px solid var(--category, var(--teal)); border-radius: 17px; background: var(--card); padding: 16px 18px; text-align: left; box-shadow: 0 3px 12px rgba(13,65,76,.05); transition: transform .16s ease, box-shadow .16s ease; }
.activity-row:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(13,65,76,.1); }
.activity-time { color: var(--teal); font-size: 1.05rem; font-weight: 900; }
.activity-copy { min-width: 0; }
.activity-copy h3 { margin: 0 0 3px; font-size: 1.15rem; }
.activity-meta { display: flex; flex-wrap: wrap; gap: 5px 13px; color: var(--muted); font-size: .9rem; }
.activity-meta span:not(:last-child)::after { margin-left: 13px; color: #a7b1b4; content: "·"; }
.activity-badges { display: flex; flex-wrap: wrap; justify-content: end; gap: 6px; }
.badge { border-radius: 999px; padding: 5px 9px; background: var(--teal-soft); color: var(--teal-deep); font-size: .75rem; font-weight: 850; }
.badge.draft { background: var(--coral-soft); color: var(--coral); }
.empty-state { padding: 54px 28px; border: 1px dashed #b9c7c5; border-radius: var(--radius); text-align: center; color: var(--muted); }

.access-workspace { max-width: 920px; }
.access-panel { margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 4vw, 32px); background: var(--card); box-shadow: 0 5px 20px rgba(13,65,76,.06); }
.access-panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.access-panel h2 { margin-bottom: 5px; }
.access-panel p { margin-bottom: 0; color: var(--muted); }
.access-add-form { display: grid; gap: 8px; margin: 25px 0 3px; }
.access-add-form label { color: var(--teal-deep); font-weight: 850; }
.access-add-form label > span { display: block; margin-bottom: 6px; }
.access-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.access-check { display: flex; align-items: start; gap: 10px; grid-column: 1 / -1; border-radius: 14px; padding: 13px; background: var(--teal-soft); }
.access-check input { width: 21px; min-height: 21px; margin-top: 2px; accent-color: var(--teal); }
.access-check span, .access-check strong, .access-check small { display: block; }
.access-check small { color: var(--muted); font-weight: 500; }
.access-form-actions { display: flex; justify-content: end; gap: 9px; margin-top: 7px; }
.security-note { margin-top: 18px !important; border-left: 4px solid var(--teal); padding: 12px 14px; background: var(--teal-soft); }
.access-message { color: var(--muted); }
.access-user-list { display: grid; gap: 9px; margin: 22px 0 0; padding: 0; list-style: none; }
.access-user-list li { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 15px; padding: 12px; background: white; }
.access-user-list strong, .access-user-list small { display: block; overflow-wrap: anywhere; }
.access-user-list small { margin-top: 2px; color: var(--muted); }
.access-user-list li.inactive { opacity: .64; }
.access-actions { display: flex; gap: 7px; }
.access-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.access-avatar, .feature-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: var(--teal-soft); color: var(--teal-deep); font-weight: 900; }
.button.compact { min-height: 38px; padding: 7px 13px; }
.disabled-access-panel { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 16px; background: #f6f3ec; }
.assignment-workspace { width: min(calc(100% - 40px), 1400px); }
.assignment-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); gap: 22px; align-items: start; }
.assignment-main { min-width: 0; }
.assignment-side { --person: #52626d; --person-soft: #e3e8eb; --person-ink: #33414a; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: var(--card); box-shadow: 0 5px 20px rgba(13,65,76,.06); }
.cal-head { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; margin-bottom: 12px; }
.cal-head h2 { margin: 0; font-size: 1.15rem; text-align: center; }
.cal-step { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--teal-deep); font-size: 1.25rem; line-height: 1; }
.cal-step:hover { border-color: var(--teal); }
.cal-views { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-bottom: 12px; padding: 3px; border-radius: 999px; background: #eef1ee; }
.cal-views button { min-height: 36px; border: 0; border-radius: 999px; background: transparent; color: var(--teal-deep); font-weight: 850; }
.cal-views button[aria-pressed="true"] { background: var(--teal); color: #fff; box-shadow: 0 2px 8px rgba(13,65,76,.18); }
.cal-rolekey { flex-basis: 100%; font-size: .74rem; }
.cal-rolekey b { color: var(--teal-deep); }
.cal-options .archive-toggle { min-height: 36px; padding: 6px 12px; font-size: .84rem; }
.cal-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; font-size: .84rem; }
.cal-title[aria-busy="true"], .cal-head h2[aria-busy="true"] { opacity: .55; }
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal-weekdays span { padding-bottom: 4px; text-align: center; color: var(--muted); font-size: .7rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.cal-day { min-height: 96px; border: 1px solid transparent; border-radius: 10px; padding: 3px; background: #f6f3ec; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.cal-day:hover { border-color: var(--line); }
.cal-day.outside { opacity: .45; }
.cal-day.today .cal-date { background: var(--teal-soft); color: var(--teal-deep); }
.cal-day.selected { border-color: var(--teal); background: #fff; box-shadow: inset 0 0 0 1px var(--teal); }
.cal-date { align-self: flex-start; min-width: 24px; height: 24px; border: 0; border-radius: 999px; padding: 0 5px; background: transparent; color: var(--ink); font-size: .78rem; font-weight: 850; }
.cal-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.cal-chip { width: 100%; min-width: 0; height: 19px; border: 0; border-radius: 5px; padding: 0; background: var(--person); color: #fff; font-size: .66rem; font-weight: 900; letter-spacing: .04em; line-height: 19px; text-align: center; overflow: hidden; white-space: nowrap; }
.cal-chip.role-keyholder { box-shadow: inset 0 -3px 0 rgba(255,255,255,.7); }
.cal-chip:hover, .cal-chip.active { outline: 2px solid var(--ink); outline-offset: 1px; }
.cal-chip.closed { background: var(--person-soft); color: var(--person-ink); box-shadow: inset 0 0 0 1px var(--person); text-decoration: line-through; }
.cal-more { height: 19px; border-radius: 5px; background: #e6e2d8; color: var(--ink); font-size: .66rem; font-weight: 900; line-height: 19px; text-align: center; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 12px 0 0; font-size: .8rem; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { display: inline-grid; place-items: center; min-width: 24px; height: 18px; border-radius: 5px; padding: 0 3px; background: var(--person); color: #fff; font-size: .62rem; font-style: normal; font-weight: 900; }
.cal-initials { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--person); color: #fff; font-size: .72rem; font-weight: 900; letter-spacing: .03em; }
.view-week { display: grid; gap: 4px; }
.cal-weekrow { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start; gap: 8px; border: 1px solid transparent; border-radius: 12px; padding: 6px; background: #f6f3ec; }
.cal-weekrow.today .cal-date { background: var(--teal-soft); }
.cal-weekrow.selected { border-color: var(--teal); background: #fff; box-shadow: inset 0 0 0 1px var(--teal); }
.cal-weekrow .cal-date { display: grid; justify-items: center; width: 100%; height: auto; padding: 4px 2px; border-radius: 9px; line-height: 1.1; }
.cal-weekrow .cal-date span { color: var(--muted); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; }
.cal-weekrow .cal-date strong { font-size: 1.05rem; }
.cal-weekrow .cal-chips { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 3px; }
.cal-weekrow .cal-chip { display: inline-flex; align-items: center; gap: 6px; width: auto; max-width: 100%; height: auto; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--person-soft); color: var(--person-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--person) 35%, transparent); font-size: .76rem; font-weight: 800; letter-spacing: 0; line-height: 1.3; text-align: left; }
.cal-weekrow .cal-chip b { display: inline-grid; place-items: center; min-width: 26px; height: 22px; border-radius: 999px; padding: 0 5px; background: var(--person); color: #fff; font-size: .68rem; font-weight: 900; letter-spacing: .03em; }
.cal-weekrow .cal-chip.closed { background: var(--person-soft); opacity: .75; }
.cal-weekrow .cal-chip.closed span { text-decoration: line-through; }
.cal-none { color: var(--muted); padding: 4px; }
.cal-dayhead { margin-bottom: 8px; }
.cal-dayhead .cal-date { display: grid; width: 100%; height: auto; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: #f6f3ec; text-align: left; font-size: .95rem; }
.cal-dayhead.selected .cal-date { border-color: var(--teal); background: #fff; }
.cal-dayhead .cal-date small { color: var(--muted); font-weight: 400; font-size: .78rem; }
.cal-timeline { position: relative; margin-left: 46px; border-top: 1px solid var(--line); }
.cal-hour { position: absolute; left: -46px; right: 0; height: 0; border-top: 1px solid #ebe7de; }
.cal-hour span { position: absolute; top: -8px; left: 0; width: 40px; color: var(--muted); font-size: .68rem; font-variant-numeric: tabular-nums; }
.cal-lanes { position: absolute; inset: 0; }
.cal-block { position: absolute; display: flex; align-items: flex-start; gap: 7px; overflow: hidden; border: 0; border-left: 5px solid var(--person); border-radius: 9px; padding: 5px 7px; background: var(--person-soft); color: var(--person-ink); text-align: left; box-shadow: 0 1px 3px rgba(13,65,76,.12); }
.cal-block:hover, .cal-block.active { outline: 2px solid var(--ink); outline-offset: 1px; }
.cal-block.closed { border-left-style: dashed; opacity: .7; }
.cal-block.closed strong { text-decoration: line-through; }
.cal-block .cal-initials { width: 26px; height: 26px; font-size: .64rem; }
.cal-block-text { display: grid; min-width: 0; line-height: 1.25; }
.cal-block-text strong { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.cal-block-text small { font-size: .72rem; font-weight: 700; }
.cal-nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin: 14px 0 12px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cal-nav span { text-align: center; color: var(--teal-deep); font-size: .86rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.cal-panel h3 { margin-bottom: 2px; font-size: 1.05rem; }
.cal-count, .cal-hint { color: var(--muted); font-size: .9rem; }
.cal-list { display: grid; gap: 7px; margin: 10px 0 0; padding: 0; list-style: none; }
.cal-row { width: 100%; display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--line); border-left: 6px solid var(--person); border-radius: 12px; padding: 9px 11px; background: var(--person-soft); color: var(--ink); text-align: left; }
.cal-row:hover { border-color: var(--teal); border-left-color: var(--person); }
.cal-row.closed { opacity: .62; }
.cal-row-body { display: grid; gap: 2px; min-width: 0; }
.cal-row-time { color: var(--person-ink); font-size: .8rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.cal-row-who, .cal-row-desc { color: var(--person-ink); font-size: .84rem; }
.cal-detail { border-left: 6px solid var(--person); padding-left: 13px; }
.cal-back { border: 0; padding: 0; margin-bottom: 10px; background: none; color: var(--teal); font-weight: 850; }
.cal-detail-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; margin-bottom: 4px; font-weight: 850; color: var(--ink); }
.cal-detail-who small { flex-basis: 100%; color: var(--muted); font-weight: 400; }
.cal-detail h3 { margin-bottom: 3px; font-size: 1.2rem; }
.cal-detail-when { color: var(--muted); margin-bottom: 8px; }
.cal-detail dl { display: grid; gap: 9px; margin: 14px 0; }
.cal-detail dt { color: var(--teal-deep); font-size: .74rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.cal-detail dd { margin: 1px 0 0; white-space: pre-line; }
.cal-detail dd ul { margin: 2px 0 0; padding-left: 18px; }
.cal-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 1080px) {
  .assignment-layout { grid-template-columns: 1fr; }
  .assignment-side { position: static; max-height: none; order: -1; }
}
.assignment-form { display: grid; gap: 10px; margin-top: 24px; }
.assignment-form label { color: var(--teal-deep); font-weight: 850; }
.assignment-form label > span { display: block; margin-bottom: 6px; }
.assignment-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 18px 0; }
.assignment-list { display: grid; gap: 11px; }
.assignment-row { display: grid; grid-template-columns: minmax(190px,1.1fr) minmax(170px,.8fr) minmax(180px,1fr) auto; align-items: center; gap: 16px; border: 1px solid var(--line); border-left: 6px solid var(--teal); border-radius: 17px; padding: 16px; background: var(--card); box-shadow: 0 3px 12px rgba(13,65,76,.05); }
.assignment-row.keyholder { border-left-color: var(--coral); }
.assignment-row.closed { opacity: .66; border-left-color: #8a969a; }
.assignment-row strong, .assignment-row small { display: block; }
.assignment-row small { margin-top: 3px; color: var(--muted); }
.assignment-row-status { display: flex; flex-wrap: wrap; gap: 6px; }
.assignment-row-status span { border-radius: 999px; padding: 4px 8px; background: var(--teal-soft); color: var(--teal-deep); font-size: .76rem; font-weight: 850; }
.assignment-row-actions { display: flex; gap: 7px; }
.assignment-message { color: var(--muted); }
.status-pill { border-radius: 999px; padding: 6px 10px; background: #e8e4db; color: var(--muted); font-size: .78rem; font-weight: 850; white-space: nowrap; }

.records-workspace { max-width: 1100px; }
.records-notice { margin-bottom: 20px; border: 1px solid #e5bd72; border-left: 6px solid #b97818; border-radius: 16px; padding: 16px 18px; background: #fff6df; color: #68440f; }
.records-notice strong { display: block; margin-bottom: 3px; }
.records-notice p { margin: 0; }
.notice-list { display: grid; gap: 12px; }
.notice-row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 22px; border: 1px solid var(--line); border-left: 7px solid var(--teal); border-radius: 16px; padding: 18px 20px; background: var(--card); color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 4px 16px rgba(13,65,76,.05); }
.notice-row.important { border-left-color: #b97818; }
.notice-row.closure { border-left-color: #a33434; }
.notice-row.expired { opacity: .58; }
.notice-row strong, .notice-row small { display: block; }
.notice-row strong { margin-bottom: 4px; font-size: 1.08rem; }
.notice-row small { max-width: 72ch; color: var(--muted); font-size: .92rem; }
.health-workspace { max-width: 1100px; }
.health-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; margin-bottom: 18px; }
.health-metrics div { border: 1px solid var(--line); border-radius: 16px; padding: 17px; background: var(--card); }
.health-metrics div.warn { border-color: #e5bd72; background: #fff6df; }
.health-metrics div.good { border-color: #a8cfb5; background: #eef8f1; }
.health-metrics strong, .health-metrics span { display: block; }
.health-metrics strong { color: var(--teal-deep); font-size: 1.7rem; }
.health-metrics span { color: var(--muted); font-size: .88rem; }
.health-legend { display: flex; flex-wrap: wrap; gap: 14px 22px; margin: 4px 0 16px; color: var(--muted); font-size: .86rem; }
.health-legend span { display: flex; align-items: center; gap: 7px; }
.health-legend i { width: 10px; height: 10px; border-radius: 50%; background: #b97818; }
.health-legend i.medium { background: #517c87; }
.health-legend i.good { background: var(--green); }
.health-list { display: grid; gap: 10px; }
.health-row { display: grid; grid-template-columns: minmax(190px,.85fr) minmax(300px,1.6fr) auto; align-items: center; gap: 16px; width: 100%; border: 1px solid var(--line); border-left: 6px solid #517c87; border-radius: 17px; padding: 15px 17px; background: var(--card); color: var(--ink); text-align: left; }
.health-row.high { border-left-color: #b97818; }
.health-row.good { border-left-color: var(--green); }
.health-identity strong, .health-identity small { display: block; }
.health-identity small { margin-top: 3px; color: var(--muted); }
.health-issues { display: flex; flex-wrap: wrap; gap: 5px; }
.health-chip { border-radius: 999px; padding: 4px 8px; background: var(--teal-soft); color: var(--teal-deep); font-size: .72rem; font-weight: 800; }
.health-chip.high { background: #fff0cf; color: #70470d; }
.health-chip.good { background: #e5f4e9; color: var(--green); }
.health-section { margin: 20px 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: var(--card); }
.health-section > p { color: var(--muted); }
.health-section-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.health-section-heading h2 { margin-bottom: 8px; }
.decision-list { display: grid; gap: 9px; }
.decision-row { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 11px; border-top: 1px solid var(--line); padding-top: 11px; }
.decision-row:first-child { border-top: 0; padding-top: 0; }
.decision-row strong, .decision-row small, .decision-row em { display: block; }
.decision-row small { margin-top: 2px; color: var(--muted); }
.decision-row em { margin-top: 4px; color: #77868c; font-size: .76rem; }
.decision-state { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; font-weight: 900; }
.decision-state.high { background: #fff0cf; color: #70470d; }
.decision-state.medium { background: var(--teal-soft); color: var(--teal-deep); }
.decision-state.good { background: #e5f4e9; color: var(--green); }
.record-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; margin-bottom: 18px; }
.record-metrics div { border: 1px solid var(--line); border-radius: 16px; padding: 17px; background: var(--card); }
.record-metrics strong, .record-metrics span { display: block; }
.record-metrics strong { color: var(--teal-deep); font-size: 1.7rem; }
.record-metrics span { color: var(--muted); font-size: .88rem; }
.record-controls { display: grid; grid-template-columns: minmax(250px,1fr) auto; align-items: end; gap: 15px; margin-bottom: 8px; }
.record-controls label > span { display: block; margin-bottom: 6px; color: var(--teal-deep); font-weight: 850; }
.archive-toggle { display: flex; align-items: center; gap: 8px; min-height: 48px; border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px; background: white; color: var(--teal-deep); font-weight: 800; white-space: nowrap; }
.archive-toggle input { width: 20px; min-height: 20px; accent-color: var(--teal); }
.record-message { color: var(--muted); }
.record-list { display: grid; gap: 10px; }
.record-row { display: grid; grid-template-columns: minmax(190px,1.25fr) minmax(130px,.7fr) minmax(230px,1.5fr) auto; align-items: center; gap: 18px; width: 100%; border: 1px solid var(--line); border-left: 6px solid var(--teal); border-radius: 17px; padding: 15px 17px; background: var(--card); text-align: left; box-shadow: 0 3px 12px rgba(13,65,76,.05); }
.record-row:hover { box-shadow: 0 8px 24px rgba(13,65,76,.1); transform: translateY(-1px); }
.record-row.archived { border-left-color: #8a969a; opacity: .72; }
.record-date strong, .record-date small, .record-progress strong, .record-progress small { display: block; }
.record-date small, .record-progress small { color: var(--muted); overflow-wrap: anywhere; }
.record-progress strong { color: var(--teal-deep); font-size: 1.12rem; }
.record-flags { display: flex; flex-wrap: wrap; gap: 5px; }
.record-flags span { border-radius: 999px; padding: 4px 8px; background: var(--coral-soft); color: var(--coral); font-size: .76rem; font-weight: 800; }
.record-open { color: var(--teal); font-weight: 900; white-space: nowrap; }
.record-sheet { width: min(780px, 97vw); }
.record-detail { padding: 0 30px 48px; }
.record-loading { padding-top: 28px; color: var(--muted); }
.record-hero { margin: 0 -30px 22px; padding: 28px 30px; background: linear-gradient(145deg,var(--teal-deep),#145f6d); color: white; }
.record-hero h2 { margin-bottom: 8px; color: white; }
.record-hero p:last-child { margin: 0; color: #d5e7e9; }
.record-detail-section { margin: 0 0 16px; border: 1px solid var(--line); border-radius: 17px; padding: 18px; background: var(--card); }
.record-detail-section > h3 { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.record-detail-section > h3 span { display: grid; min-width: 29px; height: 29px; place-items: center; border-radius: 999px; background: var(--teal-soft); color: var(--teal-deep); font-size: .8rem; }
.record-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.record-check-grid div { border-radius: 13px; padding: 12px; background: #e5f4e9; color: var(--green); }
.record-check-grid div.warn { background: var(--coral-soft); color: var(--coral); }
.record-check-grid strong, .record-check-grid span { display: block; }
.record-check-grid strong { font-size: 1.35rem; }
.record-detail details { margin-top: 12px; }
.record-prose { white-space: pre-wrap; overflow-wrap: anywhere; }
.record-empty { margin: 0; color: var(--muted); font-style: italic; }
.record-entry-group + .record-entry-group, .record-card + .record-card { margin-top: 11px; }
.record-entry-group h4, .record-card h4 { margin: 0 0 6px; color: var(--teal-deep); }
.record-entry-group ul { margin: 0; padding-left: 21px; }
.record-entry-group li { white-space: pre-wrap; overflow-wrap: anywhere; }
.record-card { border-radius: 13px; padding: 13px; background: var(--paper); }
.record-card dl { margin: 0; }
.record-card dl div { display: grid; grid-template-columns: 105px minmax(0,1fr); gap: 9px; padding: 4px 0; }
.record-card dt { color: var(--muted); font-weight: 800; }
.record-card dd { margin: 0; overflow-wrap: anywhere; }
.record-card p { margin: 0; }
.record-loans, .record-audit { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.record-loans li { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 9px; align-items: start; }
.record-loans strong { border-radius: 999px; padding: 3px 7px; font-size: .72rem; }
.record-loans strong.ok { background: #e5f4e9; color: var(--green); }
.record-loans strong.warn { background: var(--coral-soft); color: var(--coral); }
.record-audit li { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 8px; }
.record-audit li:first-child { border-top: 0; padding-top: 0; }
.record-audit span { color: var(--muted); font-size: .85rem; text-align: right; }
.record-sheet-actions { display: flex; justify-content: end; padding-top: 6px; }

.sheet-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(18,35,40,.46); backdrop-filter: blur(2px); }
.editor-sheet { position: fixed; top: 0; right: 0; z-index: 50; width: min(720px, 96vw); height: 100svh; overflow-y: auto; background: var(--paper); box-shadow: -25px 0 70px rgba(15,40,46,.26); transform: translateX(105%); transition: transform .24s ease; }
.editor-sheet.open { transform: translateX(0); }
.sheet-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 30px; border-bottom: 1px solid var(--line); background: rgba(250,246,238,.96); backdrop-filter: blur(14px); }
.sheet-header h2 { margin: 0; font-size: 1.7rem; }
.activity-form { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; padding: 28px 30px 44px; }
.field { min-width: 0; }
.field label { display: block; margin-bottom: 7px; }
.field b { color: var(--coral); }
.full { grid-column: 1 / -1; }
.form-section { min-width: 0; margin: 2px 0; border: 1px solid var(--line); border-radius: 17px; padding: 18px; background: rgba(255,255,255,.58); }
.form-section legend { padding: 0 8px; color: var(--teal-deep); font-size: 1.04rem; font-weight: 900; }
.form-section > p { margin: 0 0 16px; color: var(--muted); font-size: .9rem; }
.form-section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.publish-toggle { display: flex; gap: 12px; align-items: start; padding: 14px; border-radius: 14px; background: var(--teal-soft); color: var(--teal-deep); }
.publish-toggle input { width: 22px; min-height: 22px; margin-top: 2px; accent-color: var(--teal); }
.publish-toggle strong, .publish-toggle small { display: block; }
.publish-toggle small { margin-top: 2px; color: var(--muted); }
.sheet-actions { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 9px; padding-top: 12px; border-top: 1px solid var(--line); }
.form-errors { color: #9c3030; font-weight: 750; }
.confirm-dialog { width: min(calc(100% - 32px), 500px); border: 0; border-radius: 24px; padding: 0; background: var(--paper); box-shadow: var(--shadow); }
.confirm-dialog::backdrop { background: rgba(18,35,40,.55); backdrop-filter: blur(3px); }
.confirm-dialog form { padding: 30px; }
.confirm-dialog h2 { font-size: 1.65rem; }
.dialog-actions { display: flex; justify-content: end; gap: 10px; margin-top: 25px; }
.toast { position: fixed; left: 24px; right: auto; bottom: 24px; z-index: 9100; max-width: min(420px, calc(100% - 48px)); border-radius: 14px; padding: 13px 17px; background: var(--teal-deep); color: white; box-shadow: var(--shadow); font-weight: 750; }

@media (max-width: 820px) {
  .topbar { flex-wrap: wrap; gap: 10px 16px; }
  .section-nav { order: 3; }
  .publish-state { order: 3; width: 100%; }
  .top-actions { margin-left: auto; }
  .top-actions .secondary { display: none; }
  .workspace { width: min(calc(100% - 28px), 1180px); padding-top: 34px; }
  .workspace-heading { align-items: start; }
  .activity-row { grid-template-columns: 75px minmax(0,1fr); }
  .activity-badges { grid-column: 2; justify-content: start; }
  .record-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .health-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .health-row { grid-template-columns: 1fr; }
  .record-row, .assignment-row { grid-template-columns: 1fr 1fr; }
  .record-flags { grid-column: 1 / -1; }
  .record-open { justify-self: end; }
}

@media (max-width: 560px) {
  .login-screen { padding: 18px; }
  .login-card { padding: 28px 22px; }
  .brand-lockup small { display: none; }
  .topbar { padding: 10px 14px; }
  .section-nav { order: 4; width: 100%; }
  .section-nav button { flex: 0 0 auto; }
  .top-actions .button { padding-inline: 13px; }
  .workspace-heading { display: grid; }
  .workspace-heading .add-button { width: 100%; }
  .control-panel { grid-template-columns: 1fr; }
  .summary { justify-content: start; }
  .activity-row { grid-template-columns: 1fr; gap: 8px; padding: 14px; }
  .activity-badges { grid-column: 1; }
  .activity-form { grid-template-columns: 1fr; padding: 22px 18px 36px; }
  .field, .full { grid-column: 1; }
  .form-section-grid { grid-template-columns: 1fr; }
  .sheet-header { padding: 18px; }
  .sheet-actions { grid-template-columns: 1fr 1fr; }
  .sheet-actions span { display: none; }
  .sheet-actions .danger { grid-column: 1 / -1; }
  .access-form-grid, .disabled-access-panel { grid-template-columns: 1fr; }
  .access-check { grid-column: 1; }
  .access-actions { grid-column: 1 / -1; width: 100%; }
  .access-actions .button { flex: 1; }
  .notice-row { align-items: flex-start; flex-direction: column; }
  .access-user-list li { grid-template-columns: auto minmax(0,1fr); }
  .access-user-list .button { grid-column: 1 / -1; width: 100%; }
  .status-pill { justify-self: start; }
  .record-controls, .record-row, .assignment-row { grid-template-columns: 1fr; }
  .assignment-row-actions { width: 100%; }
  .assignment-row-actions .button { flex: 1; }
  .record-open { justify-self: start; }
  .record-flags { grid-column: 1; }
  .record-detail { padding-inline: 18px; }
  .record-hero { margin-inline: -18px; padding-inline: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* ---------- Website tab ---------- */
.site-workspace { width: min(calc(100% - 40px), 1280px); }
.site-bar { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px) auto; align-items: end; gap: 14px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; background: var(--card); box-shadow: 0 5px 20px rgba(13,65,76,.08); }
.site-state { margin: 0; color: var(--ink); }
.site-state span { display: block; margin-top: 2px; color: var(--muted); font-size: .88rem; }
.site-note span { display: block; margin-bottom: 4px; color: var(--teal-deep); font-size: .82rem; font-weight: 850; }
.site-note input { min-height: 42px; }
.site-bar-actions { display: flex; gap: 8px; }
.site-layout { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 22px; align-items: start; }
.site-pages { position: sticky; top: 110px; display: grid; gap: 14px; }
.site-search span { display: block; margin-bottom: 5px; color: var(--teal-deep); font-weight: 850; }
.site-page-list { display: grid; gap: 5px; }
.site-page-list button { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; border: 1px solid var(--line); border-radius: 13px; padding: 9px 12px; background: var(--card); color: var(--ink); text-align: left; }
.site-page-list button span { font-weight: 850; }
.site-page-list button small { grid-column: 1; color: var(--muted); font-size: .78rem; }
.site-page-list button .site-flag { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.site-page-list button .site-flag + .site-flag { grid-row: auto; }
.site-page-list button[aria-pressed="true"] { border-color: var(--teal); background: var(--teal-soft); box-shadow: inset 4px 0 0 var(--teal); }
.site-flag { display: inline-block; border-radius: 999px; padding: 2px 8px; background: var(--teal-soft); color: var(--teal-deep); font-size: .72rem; font-weight: 850; white-space: nowrap; }
.site-flag.unsaved { background: var(--coral-soft); color: var(--coral); }
.site-help { border: 1px solid var(--line); border-radius: 13px; padding: 10px 12px; background: var(--card); font-size: .88rem; }
.site-help summary { color: var(--teal-deep); font-weight: 850; cursor: pointer; }
.site-help ul { margin: 8px 0 0; padding-left: 18px; }
.site-help li { margin: 5px 0; }
.site-help code { border-radius: 5px; padding: 1px 4px; background: #f1ede4; font-size: .84rem; }
.site-editor { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 3vw, 28px); background: var(--card); }
.site-editor-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.site-editor-head h2 { margin: 0; font-size: 1.6rem; }
.site-editor-head .eyebrow { margin-bottom: 3px; }
.site-group { margin-top: 22px; }
.site-group h3 { margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.site-field { margin: 0 0 12px; border-left: 4px solid transparent; padding-left: 10px; }
.site-field.pending { border-left-color: var(--coral-bright); }
.site-field.invalid { border-left-color: #b34848; }
.site-field label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--teal-deep); font-size: .86rem; font-weight: 850; }
.site-field textarea { min-height: 44px; line-height: 1.45; }
.site-field-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 4px; font-size: .8rem; }
.site-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.site-problem { color: #9c3030; font-weight: 850; }
.site-reset { border: 0; padding: 0; background: none; color: var(--teal); font-weight: 850; text-decoration: underline; }
.site-original summary { color: var(--muted); cursor: pointer; }
.site-original p { margin: 4px 0 0; padding: 7px 10px; border-radius: 9px; background: #f6f3ec; color: var(--ink); white-space: pre-line; }
.site-history { margin-top: 26px; }
.site-history-list { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.site-history-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 13px; padding: 10px 14px; background: #fff; }
.site-history-list li.live { border-color: var(--teal); background: var(--teal-soft); }
.site-history-list strong, .site-history-list small { display: block; }
.site-history-list small { color: var(--muted); }
@media (max-width: 900px) {
  .site-bar { position: static; grid-template-columns: 1fr; }
  .site-layout { grid-template-columns: 1fr; }
  .site-pages { position: static; }
  .site-page-list { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

/* ---------- Website tab: visual editor ---------- */
.site-workspace .workspace-heading { align-items: end; }
.site-modes { display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: #eef1ee; }
.site-modes button { min-height: 40px; border: 0; border-radius: 999px; padding: 0 18px; background: transparent; color: var(--teal-deep); font-weight: 850; white-space: nowrap; }
.site-modes button[aria-pressed="true"] { background: var(--teal); color: #fff; }
.site-visual-note { margin: 6px 0 0; border-radius: 12px; padding: 10px 12px; background: var(--teal-soft); color: var(--teal-deep); }
.ve-bar { position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; background: var(--card); box-shadow: 0 5px 20px rgba(13,65,76,.08); }
.ve-page { display: flex; align-items: center; gap: 8px; font-weight: 850; color: var(--teal-deep); }
.ve-page select { min-height: 40px; width: auto; min-width: 190px; }
.ve-devices { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: #eef1ee; }
.ve-devices button { min-height: 32px; border: 0; border-radius: 999px; padding: 0 12px; background: transparent; color: var(--teal-deep); font-size: .82rem; font-weight: 850; }
.ve-devices button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 4px rgba(13,65,76,.18); }
.ve-layouts { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.ve-layouts button { min-height: 32px; border: 0; border-radius: 7px; padding: 0 10px; background: transparent; color: var(--muted); font-size: .8rem; font-weight: 850; }
.ve-layouts button[aria-pressed="true"] { background: var(--teal-soft); color: var(--teal-deep); }
.ve-undo { display: flex; gap: 6px; }
.ve-status { flex: 1 1 200px; margin: 0; color: var(--muted); font-size: .86rem; }
.ve-status::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #839096; vertical-align: 1px; }
.ve-status[data-state="live"]::before { background: #318261; }
.ve-status[data-state="draft"]::before, .ve-status[data-state="dirty"]::before { background: var(--coral-bright); }
.ve-status[data-state="saving"]::before { background: var(--gold); }
.ve-publish { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ve-publish input { min-height: 40px; width: 230px; }
.ve-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 16px; align-items: start; }
.ve-body[data-layout="canvas"] { grid-template-columns: minmax(0, 1fr); }
.ve-body[data-layout="canvas"] .ve-panel { display: none; }
.ve-body[data-layout="tools"] { grid-template-columns: minmax(0, 820px); justify-content: end; }
.ve-body[data-layout="tools"] .ve-stage { display: none; }
.ve-body[data-layout="tools"] .ve-panel { position: static; width: 100%; max-height: none; }
.ve-stage { min-width: 0; }
.ve-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 14px; padding: 8px 11px; background: var(--card); }
.ve-preview-head p { margin: 0; color: var(--teal-deep); font-size: .84rem; }
.ve-preview-head p span { display: block; margin-top: 1px; color: var(--muted); font-size: .76rem; font-weight: 400; }
.ve-preview-head > div { display: flex; flex-wrap: wrap; gap: 6px; }
.ve-frame-wrap { height: calc(100vh - 150px); min-height: 520px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #e9e6df; }
.ve-frame-wrap iframe { display: block; width: 100%; height: 100%; margin: 0 auto; border: 0; background: #fff; transition: width .2s ease; }
.ve-frame-wrap[data-device="tablet"] iframe { width: 820px; max-width: 100%; }
.ve-frame-wrap[data-device="phone"] iframe { width: 390px; max-width: 100%; }
.ve-proposal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; border: 2px solid var(--coral-bright); border-radius: 16px; padding: 10px 14px; background: var(--coral-soft); }
.ve-proposal-bar p { margin: 0; flex: 1 1 280px; }
.ve-proposal-bar span { display: block; color: var(--muted); font-size: .86rem; }
.ve-proposal-bar div { display: flex; gap: 8px; }
/* A draft (or the live page) older than the page itself: visual-editor.js. */
.ve-stale { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-bottom: 10px; border: 1px solid #e2c77f; border-left: 6px solid #b98a1c; border-radius: 16px; padding: 12px 14px; background: #fdf3dc; }
.ve-stale[hidden] { display: none; }
.ve-stale p { margin: 0; flex: 1 1 320px; color: var(--ink); line-height: 1.45; }
.ve-stale p span { display: block; margin-top: 4px; color: #4d5b61; font-size: .86rem; }
.ve-stale div { display: flex; flex-wrap: wrap; gap: 8px; }
.ve-panel { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.ve-tabs { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; gap: 2px; padding: 8px; border-bottom: 1px solid var(--line); background: var(--card); }
.ve-tabs button { border: 0; border-radius: 999px; padding: 6px 11px; background: transparent; color: var(--teal-deep); font-size: .82rem; font-weight: 850; }
.ve-tabs button[aria-selected="true"] { background: var(--teal); color: #fff; }
.ve-tabpanel { padding: 12px; }
.ve-card { margin-bottom: 12px; border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: #fff; }
.ve-card h3 { margin: 0 0 8px; font-size: 1.02rem; }
.ve-card p { margin: 0 0 8px; }
.ve-kicker { margin: 0 0 4px; color: var(--coral); font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.ve-empty { padding: 18px 6px; text-align: center; color: var(--muted); }
.ve-empty h3 { color: var(--teal-deep); }
.ve-hint { color: var(--muted); font-size: .84rem; }
.ve-warning { border-radius: 10px; padding: 9px 11px; background: #fbe9e9; color: #8f3030; font-weight: 700; }
.ve-field { display: block; margin: 0 0 10px; border: 0; padding: 0; }
.ve-field > span, .ve-field legend { display: block; margin-bottom: 4px; color: var(--teal-deep); font-size: .84rem; font-weight: 850; }
.ve-field label { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: .92rem; }
.ve-field input[type="radio"], .ve-check input { width: auto; min-height: 0; }
.ve-check { display: flex; align-items: center; gap: 8px; margin: 6px 0 12px; font-size: .88rem; }
.ve-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ve-actions.tight { margin: 4px 0 0; }
.ve-actions .button.compact, .ve-card > .button.compact { min-height: 34px; padding: 5px 11px; font-size: .84rem; }
.ve-thumb { display: block; width: 100%; max-height: 180px; margin-bottom: 8px; border-radius: 10px; object-fit: cover; background: #f1ede4; }
.ve-outline { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ve-outline li { border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.ve-outline li[draggable="true"] { cursor: grab; }
.ve-outline li.ve-dragging { opacity: .45; }
.ve-outline li.ve-drop-target { border-color: var(--coral-bright); box-shadow: inset 0 0 0 2px var(--coral-soft); }
.ve-outline-row { display: flex; align-items: center; gap: 8px; }
.ve-drag-handle { flex: none; color: var(--muted); font-size: 1.1rem; line-height: 1; }
.ve-outline-name { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; padding: 0; background: none; color: var(--ink); font-weight: 850; text-align: left; }
.ve-outline-name span { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--teal-soft); color: var(--teal-deep); font-size: .74rem; }
.ve-templates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.ve-template { min-height: 44px; border: 1px dashed var(--teal); border-radius: 12px; padding: 6px 8px; background: var(--teal-soft); color: var(--teal-deep); font-size: .84rem; font-weight: 850; }
.ve-template:hover { border-style: solid; }
.ve-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ve-gallery figure { margin: 0; }
.ve-gallery button { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border: 2px solid transparent; border-radius: 10px; padding: 0; background: #f1ede4; }
.ve-gallery button:hover { border-color: var(--coral-bright); }
.ve-gallery img { width: 100%; height: 100%; object-fit: cover; }
.ve-gallery figcaption { margin-top: 3px; color: var(--muted); font-size: .72rem; line-height: 1.25; overflow-wrap: anywhere; }
.ve-link { border: 0; padding: 0; background: none; color: var(--coral); font-size: inherit; font-weight: 850; text-decoration: underline; }
.ve-picking { border-color: var(--coral-bright); background: var(--coral-soft); }
.ve-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: -2px 0 8px; }
.ve-chips button { border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; background: #f6f3ec; color: var(--ink); font-size: .78rem; }
.ve-working { margin: 0; color: var(--teal-deep); font-weight: 850; }
.ve-working::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; border: 2px solid var(--teal-soft); border-top-color: var(--teal); border-radius: 50%; vertical-align: -1px; animation: ve-spin .8s linear infinite; }
@keyframes ve-spin { to { transform: rotate(360deg); } }
.ve-result details { margin: 6px 0; }
.ve-result summary { color: var(--teal-deep); font-weight: 850; cursor: pointer; }
.ve-thinking { max-height: 240px; overflow-y: auto; color: var(--muted); font-size: .84rem; white-space: pre-wrap; }
.ve-checks { margin: 8px 0; border-radius: 12px; padding: 10px 12px; background: #fdf3dc; color: #5c4200; font-size: .88rem; }
.ve-checks ul { margin: 4px 0 0; padding-left: 18px; }
.ve-checks input { margin-top: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
.ve-proposals, .ve-keys, .ve-history { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ve-proposals li, .ve-keys li, .ve-history li { border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; }
.ve-proposals.small li { font-size: .84rem; }
.ve-keys small, .ve-history small { display: block; margin: 2px 0 6px; color: var(--muted); }
.ve-history li.live { border-color: var(--teal); background: var(--teal-soft); }
.ve-code { overflow-x: auto; margin: 0; border-radius: 10px; padding: 10px; background: #1f2a2e; color: #e8f1f0; font-size: .74rem; line-height: 1.5; white-space: pre-wrap; }
.ve-code-editor { width: 100%; min-height: 420px; resize: vertical; border-color: #364b52; background: #162429; color: #f1f7f6; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; line-height: 1.55; tab-size: 2; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.ve-code-editor:focus { border-color: var(--coral-bright); box-shadow: 0 0 0 3px var(--coral-soft); }
.ve-code-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin: -4px 0 10px; color: var(--muted); font-size: .76rem; }
.ve-code-notice { border-left: 4px solid var(--gold); border-radius: 8px; padding: 9px 11px; background: #fdf3dc; color: #5c4200; font-size: .84rem; }
@media (max-width: 1100px) {
  .ve-body { grid-template-columns: 1fr; }
  .ve-panel { position: static; max-height: none; }
  .ve-frame-wrap { height: 70vh; }
  .ve-body[data-layout="tools"] { display: block; }
}
@media (max-width: 700px) {
  .ve-bar { position: static; }
  .ve-page, .ve-page select { width: 100%; }
  .ve-layouts { order: 5; width: 100%; }
  .ve-layouts button { flex: 1; }
  .ve-publish { width: 100%; }
  .ve-publish input { flex: 1 1 190px; width: auto; }
  .ve-preview-head { align-items: flex-start; }
  .ve-preview-head p span { display: none; }
  .ve-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .ve-tabs button { flex: 0 0 auto; }
  .ve-code-editor { min-height: 320px; }
}
@media (prefers-reduced-motion: reduce) { .ve-working::before { animation: none; } }
.ve-frame-wrap { position: relative; }
.ve-frame-wrap.loading iframe { opacity: .45; pointer-events: none; }
.ve-frame-wrap.loading::after { content: "Loading the page…"; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); border-radius: 999px; padding: 6px 14px; background: var(--teal); color: #fff; font-size: .84rem; font-weight: 850; }

/* An activity that is not running. The editor shows it the way the website
   will, so there is no doubt that choosing "cancelled" did something. */
.badge.off { background: #fbdcdc; color: #8f2f2f; }
.activity-row.is-off { border-left-color: #a33434; background: linear-gradient(145deg, #fdf1f1, var(--card) 72%); }
.activity-row.is-off .activity-copy h3 { color: #8f2f2f; }
.field-help { margin: 4px 0 0; color: #4d5d64; font-size: .84rem; }

/* The Messages button sits bottom right and is above everything else, so a
   message about what just happened goes on the other side — and on a phone,
   where there is no other side, above it. */
@media (max-width: 720px) {
  .toast { left: 14px; right: 14px; bottom: 84px; max-width: none; }
}

/* The Messages button floats above everything, including the panel that opens
   when an activity is edited, where it would sit over that panel's own
   buttons. It steps out of the way while the panel is open, and the toast
   moves with it. */
body:has(.editor-sheet.open) .cs-chat { display: none; }
body:has(.editor-sheet.open) .toast { left: auto; right: 24px; }

/* The Website tab's mode strip grew a fifth and sixth button (Banners,
   Assistant, Assets). It wraps rather than pushing the last one out of view. */
.site-modes { flex-wrap: wrap; justify-content: flex-end; }



/* "Confirmed today" (app.js, confirmToday): beside a Content health row that
   has no confirmation date or an old one, and for a whole day in the
   Timetable tab. */
.day-confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 12px; border: 1px dashed #b9c7c5; border-radius: 17px; padding: 12px 16px; background: var(--card); }
.day-confirm p { display: grid; gap: 2px; margin: 0; }
.day-confirm span { color: #4d5d64; font-size: .85rem; }
.date-with-today { display: flex; gap: 8px; align-items: stretch; }
.date-with-today input { flex: 1; min-width: 0; }
.date-with-today .button { flex: none; }

/* "Earlier versions" of the timetable (app.js, openHistory). */
.history-dialog { width: min(calc(100% - 32px), 760px); max-height: min(86vh, 900px); }
.history-inner { display: grid; gap: 14px; padding: 26px 28px 28px; }
.history-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.history-head h2 { margin: 0; }
.history-intro { margin: 0; color: #4d5d64; font-size: .92rem; }
.history-list { display: grid; gap: 10px; }
.history-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; background: var(--card); }
.history-item.is-current { border-color: var(--teal); background: var(--teal-soft); }
.history-when { display: grid; gap: 2px; }
.history-when small { color: #4d5d64; font-size: .8rem; }
.history-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: end; }
.history-diff { grid-column: 1 / -1; display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.history-diff-intro { margin: 0; font-weight: 800; }
.history-group h3 { margin: 0 0 4px; color: var(--teal-deep); font-size: .88rem; }
.history-group ul { display: grid; gap: 3px; margin: 0; padding-left: 18px; font-size: .88rem; }
.history-group small { color: #4d5d64; }
.history-group em { color: #7a5a14; font-style: normal; font-size: .8rem; }
.history-more { color: #4d5d64; list-style: none; }
@media (max-width: 700px) {
  .history-item { grid-template-columns: 1fr; }
  .history-actions { justify-content: start; }
  .history-inner { padding: 20px 18px 22px; }
}
.heading-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 10px; }

/* The Timetable tab: activities and notices in one place (app.js). */
.section-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 18px; border-bottom: 1px solid var(--line); }
.section-tabs button { margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px; background: none; color: var(--muted); font: inherit; font-weight: 850; cursor: pointer; }
.section-tabs button[aria-pressed="true"] { border-bottom-color: var(--teal); color: var(--teal-deep); }
.section-tabs button span { margin-left: 4px; border-radius: 999px; padding: 1px 7px; background: #ece8e0; font-size: .74rem; }
.section-tabs button span:empty { display: none; }
.section-tabs button:focus-visible { outline: 3px solid var(--coral-bright); outline-offset: 2px; }

/* Filters: the checks that used to be the Content health tab. */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.filter-chip { min-height: 38px; border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; background: white; color: var(--ink); font: inherit; font-size: .86rem; font-weight: 800; cursor: pointer; }
.filter-chip span { margin-left: 4px; color: var(--muted); font-variant-numeric: tabular-nums; }
.filter-chip.is-check { border-style: dashed; }
.filter-chip[aria-pressed="true"] { border-style: solid; border-color: var(--teal); background: var(--teal); color: white; }
.filter-chip[aria-pressed="true"] span { color: rgba(255, 255, 255, .85); }
.filter-chip:focus-visible { outline: 3px solid var(--coral-bright); outline-offset: 2px; }
.decisions-panel { margin: 10px 0 0; border: 1px solid var(--line); border-radius: 17px; padding: 0 16px; background: var(--card); }
.decisions-panel summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; font-weight: 850; cursor: pointer; }
.decisions-panel[open] { padding-bottom: 16px; }
.decisions-panel > p { margin: 0 0 12px; color: var(--muted); font-size: .9rem; }
.decisions-panel .records-notice { margin: 0 0 12px; }

/* Each activity: its circle (on the website or hidden), the row, and with
   "Needs checking" selected, a Confirmed today button. */
.activity-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.activity-item.has-confirm { grid-template-columns: auto minmax(0, 1fr) auto; }
.activity-dot { width: 28px; height: 28px; border: 3px solid var(--category, var(--teal)); border-radius: 50%; padding: 0; background: var(--category, var(--teal)); cursor: pointer; transition: background .15s ease, transform .15s ease; }
.activity-dot[aria-checked="false"] { background: transparent; }
.activity-dot:hover { transform: scale(1.1); }
.activity-dot:focus-visible { outline: 3px solid var(--coral-bright); outline-offset: 3px; }
.activity-item.is-hidden .activity-row { border-style: dashed; box-shadow: none; opacity: .6; }
.activity-item.is-hidden .activity-row:hover { opacity: .85; }
.badge.hidden-badge { background: #ece8e0; color: var(--muted); }
.activity-confirm { align-self: stretch; min-width: 110px; border: 1px solid var(--line); border-radius: 17px; padding: 8px 12px; background: var(--card); color: var(--teal-deep); font: inherit; font-size: .8rem; font-weight: 850; cursor: pointer; }
.activity-confirm:hover { border-color: var(--teal); background: var(--teal-soft); }
.activity-confirm:focus-visible { outline: 3px solid var(--coral-bright); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .activity-dot { transition: none; } }

/* The activity panel's two tabs. */
/* The tabs live inside the panel's sticky heading, so the two scroll as one. */
.sheet-header:has(.sheet-tabs) { flex-wrap: wrap; row-gap: 10px; padding-bottom: 0; }
.sheet-tabs { display: flex; flex: 1 0 100%; gap: 4px; margin: 0 -30px; padding: 0 30px; }
.sheet-tabs button { margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; padding: 12px 12px 10px; background: none; color: var(--muted); font: inherit; font-weight: 850; cursor: pointer; }
.sheet-tabs button[aria-pressed="true"] { border-bottom-color: var(--teal); color: var(--teal-deep); }
.sheet-tabs button:disabled { opacity: .45; cursor: default; }
.sheet-tabs button:focus-visible { outline: 3px solid var(--coral-bright); outline-offset: 2px; }
.sheet-page { padding: 22px 30px 44px; }
.ad-page-about { display: grid; gap: 4px; }
.ad-page-about p { margin: 0; color: #4d5d64; font-size: .92rem; }
.ad-page-about .ad-page-publish { color: #5c4b18; font-weight: 700; }

@media (max-width: 700px) {
  .activity-item.has-confirm { grid-template-columns: auto minmax(0, 1fr); }
  .activity-confirm { grid-column: 2; min-height: 44px; }
  .sheet-page { padding: 18px 16px 40px; }
}

.activity-meta .activity-category { color: var(--category, var(--teal-deep)); font-weight: 850; }
@media (max-width: 560px) { .sheet-header:has(.sheet-tabs) .sheet-tabs { margin: 0 -18px; padding: 0 18px; } }

/* Which weeks an activity runs (app.js, repeat): five segments across, then
   the exceptions. None or all four weeks means every week. */
.repeat-field { margin: 0; border: 1px solid var(--line); border-radius: 17px; padding: 14px 16px 12px; background: rgba(255,255,255,.58); }
.repeat-field legend { padding: 0 6px; color: var(--teal-deep); font-weight: 800; }
.repeat-weeks { display: grid; grid-template-columns: repeat(4, 1fr) 1.1fr; gap: 0; overflow: hidden; border: 1px solid var(--teal); border-radius: 12px; }
.repeat-weeks button { min-height: 44px; border: 0; border-left: 1px solid var(--line); background: var(--card); color: var(--teal-deep); font: inherit; font-weight: 800; cursor: pointer; }
.repeat-weeks button:first-child { border-left: 0; }
.repeat-weeks button[data-week="last"] { border-left: 2px solid var(--teal); }
.repeat-weeks button[aria-pressed="true"] { background: var(--teal); color: #fff; }
.repeat-weeks button:focus-visible { outline: 3px solid var(--coral-bright); outline-offset: -3px; }
.repeat-field.is-other .repeat-weeks { opacity: .45; }
.repeat-other { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 11px; }
.repeat-other label { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--ink); font-weight: 700; }
.repeat-other select { flex: 1 1 220px; min-width: 0; }
.repeat-field [data-repeat-summary] { margin-top: 9px; color: var(--teal-deep); font-weight: 700; }