:root {
  --navy: #0B2447;
  --navy-2: #123A6B;
  --teal: #19A7A0;
  --ink: #12253D;
  --muted: #5A6B80;
  --line: #DCE3EC;
  --bg: #F2F4F7;
  --card: #FFFFFF;
  --warn: #E5484D;
  --radius: 10px;
  --mono: Consolas, Menlo, Monaco, monospace;
  --sb: 34px;            /* height of the fixed status bar */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- top bar ---------- */

.topbar {
  background: var(--navy);
  color: #fff;
  border-bottom: 4px solid var(--teal);
}
.topbar-inner {
  max-width: 1680px;
  margin: 0 auto;
  padding: 22px 24px 26px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.eyebrow {
  font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--teal); font-weight: 700;
}
.topbar h1 { margin: 6px 0 6px; font-size: 27px; letter-spacing: 0.2px; }
.lede { margin: 0; max-width: 66ch; color: #C8D6E8; font-size: 13px; }
.lede b { color: #fff; }
.topbar-meta { text-align: right; display: grid; gap: 8px; font-size: 11px; }
.rev { color: #93A9C6; letter-spacing: 1px; text-transform: uppercase; }
.status {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: rgba(25,167,160,.18); color: #7FE3DC; border: 1px solid rgba(25,167,160,.45);
}
.status.err { background: rgba(229,72,77,.18); color: #FFB3B5; border-color: rgba(229,72,77,.5); }

/* ---------- layout ---------- */

/* Bottom padding clears the fixed status bar. */
main {
  max-width: 1680px; margin: 0 auto;
  padding: 22px 24px calc(var(--sb) + 32px);
  display: grid; gap: 20px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px 20px;
}
.card > h2, .settings-head h2, .preview-head h2 {
  margin: 0 0 14px;
  font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.num { color: var(--teal); font-weight: 800; }

/* ---------- drop zone ---------- */

.drop {
  border: 2px dashed #C3CEDC; border-radius: var(--radius);
  padding: 30px 20px; text-align: center; cursor: pointer;
  background: #FAFCFE; transition: border-color .15s, background .15s;
}
.drop:hover, .drop:focus-visible, .drop.over { border-color: var(--teal); background: #F2FBFA; outline: none; }
.drop-label { font-size: 15px; font-weight: 600; }
.drop-sub { margin-top: 6px; font-size: 12px; color: var(--muted); }
code { font-family: var(--mono); background: #EEF2F7; padding: 1px 5px; border-radius: 4px; font-size: .92em; }

.summary { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  background: #EEF3F9; border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px; font-size: 12px;
}
.chip b { color: var(--navy-2); }

/* ---------- work area ---------- */

/* align-items:start is what makes the sticky rail work: the settings item keeps
   its own height while the grid *area* stays as tall as the right column, which
   is the room sticky needs to slide in. */
.work { display: grid; grid-template-columns: 430px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1500px) { .work { grid-template-columns: 370px minmax(0, 1fr); } }
.workmain { display: grid; gap: 20px; min-width: 0; }
.card.sub { padding: 14px 16px 16px; }
@media (max-width: 1100px) { .work { grid-template-columns: 1fr; } }

/* Pinned side rail, pure CSS. Sticky rather than fixed: fixed pins to the
   viewport regardless of where the card is, so it covered the page header and
   the drop zone. Sticky stays in flow and cannot overlap anything.
   It works here only because the run log moved into .workmain - with nothing
   below the rail's grid area, the rail stays put for the whole scroll. */
.settings {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; background: #FBFCFE;
  position: sticky; top: 12px; z-index: 5;
  /* 12px top gap + the status bar + slack, so the rail still fits between
     top:12 and its grid area's bottom edge at maximum scroll. */
  max-height: calc(100vh - var(--sb) - 64px);
  overflow-y: auto; overscroll-behavior: contain;
}
/* Stacked layout: still sticky, but leave the preview most of the screen. */
@media (max-width: 1100px) {
  .settings { top: 8px; max-height: 44vh; box-shadow: 0 6px 18px rgba(11, 36, 71, .10); }
}
.settings-head { display: flex; align-items: center; justify-content: space-between; }
.settings-head h2 { margin: 0; }
.hint { font-size: 11.5px; color: var(--muted); margin: 0 0 12px; }

details.group { border-top: 1px solid var(--line); }
details.group > summary {
  cursor: pointer; padding: 9px 2px; font-weight: 600; font-size: 12.5px;
  list-style: none; display: flex; align-items: center; gap: 6px;
}
details.group > summary::-webkit-details-marker { display: none; }
details.group > summary::before { content: "▸"; color: var(--teal); font-size: 11px; }
details.group[open] > summary::before { content: "▾"; }
details.group > summary:hover { color: var(--navy-2); }
.group-note { font-size: 11px; color: var(--muted); margin: 0 0 8px; }

.field {
  display: grid; grid-template-columns: 1fr 118px; gap: 8px;
  align-items: center; padding: 4px 4px; border-radius: 6px;
}
.field.hot { background: #E7F7F6; box-shadow: inset 0 0 0 1px var(--teal); }
.field > label { font-size: 12px; color: #3A4C63; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 12px;
  padding: 4px 6px; border: 1px solid #C9D4E1; border-radius: 5px; background: #fff;
}
.field textarea { grid-column: 1 / -1; resize: vertical; line-height: 1.45; }
.field input[type=color] { padding: 1px; height: 26px; cursor: pointer; }
.field input[type=checkbox] { width: auto; justify-self: start; }
.field select[multiple] { height: 88px; grid-column: 1 / -1; }
.field.wide { grid-template-columns: 1fr; }

/* ---------- resource picker (DTLA_View roster) ---------- */

.res-grid { grid-column: 1 / -1; display: grid; gap: 2px; }
.res-bar { display: flex; align-items: center; gap: 6px; padding: 2px 0 6px; flex-wrap: wrap; }
.res-count { font-size: 11px; color: var(--muted); margin-left: auto; }
.res-shift {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px; padding: 4px 2px 3px;
  font-size: 11.5px; font-weight: 700; color: #2B3F58;
  border-bottom: 1px solid var(--line);
}
.res-shift i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.res-shift button { margin-left: auto; padding: 2px 8px; font-size: 10.5px; }
.res-row {
  display: grid; grid-template-columns: 16px 11px 1fr auto;
  gap: 6px; align-items: center;
  font-size: 11px; padding: 1px 2px; border-radius: 4px; cursor: pointer;
}
.res-row:hover { background: #EEF3F9; }
.res-row.idle { opacity: .55; }
.res-row input { width: auto; margin: 0; }
.res-row i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.res-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-row em { font-style: normal; font-size: 10px; color: var(--muted); }
.res-empty { font-size: 11.5px; color: var(--muted); margin: 4px 0; }

.roles-grid { grid-column: 1 / -1; display: grid; gap: 3px; }
.roles-row {
  display: grid; grid-template-columns: 1fr 34px 108px; gap: 6px; align-items: center;
}
.roles-row span {
  font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.roles-row em {
  font-size: 10px; color: var(--muted); font-style: normal; text-align: right;
}
.roles-row em.empty { color: #B26A00; }
.roles-row select { font-size: 11px; padding: 2px 4px; }

.palette-grid { grid-column: 1 / -1; display: grid; gap: 4px; }
.palette-row { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: center; }
.palette-row span { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

button {
  font: inherit; font-size: 12.5px; padding: 7px 14px; cursor: pointer;
  border: 1px solid #C9D4E1; background: #fff; border-radius: 6px; color: var(--ink);
}
button:hover { border-color: var(--teal); }
button.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
button.primary:hover { background: var(--navy-2); }
button.ghost { padding: 4px 10px; font-size: 11.5px; }
button[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- preview ---------- */

.preview-wrap { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.preview-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 14px; border-bottom: 1px solid var(--line); background: #FBFCFE;
}
.preview-head h2 { margin: 0; }
.spacer { flex: 1; }
.tabs { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.tabgroup { display: flex; gap: 4px; }
.tabgroup + .tabgroup { padding-left: 14px; border-left: 1px solid var(--line); }
.tabs button {
  padding: 5px 12px; font-size: 12px; border-radius: 999px; border-color: transparent;
  background: #EEF3F9; color: #3A4C63;
}
.tabs button[aria-selected="true"] { background: var(--navy); color: #fff; }
.zoom { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.zoom input { width: 110px; }

.preview {
  background: #E9EDF3; padding: 16px; overflow: auto; max-height: 74vh;
  background-image: linear-gradient(45deg, #E2E7EE 25%, transparent 25%),
                    linear-gradient(-45deg, #E2E7EE 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #E2E7EE 75%),
                    linear-gradient(-45deg, transparent 75%, #E2E7EE 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
.preview svg { display: block; box-shadow: 0 3px 18px rgba(11,36,71,.16); transform-origin: top left; }
.preview [data-region] { transition: filter .1s; }
.preview [data-region].hot {
  outline: 2px dashed var(--teal);
  outline-offset: 1px;
  filter: saturate(1.25) brightness(1.03);
}

.preview-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border-top: 1px solid var(--line); background: #FBFCFE;
  font-size: 12px; color: var(--muted); flex-wrap: wrap;
}
.actions { display: flex; gap: 8px; }

/* ---------- log ---------- */

.log {
  margin: 0; background: #0C1526; color: #C9E6E3; border-radius: 8px;
  padding: 14px 16px; font: 12px/1.65 var(--mono); max-height: 240px; overflow: auto;
  white-space: pre-wrap; word-break: break-word;
}
.log .e { color: #FF9DA0; }
.log .w { color: #FFD79A; }
.log .k { color: #7FE3DC; }

/* ---------- pinned title block ---------- */

.statusbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: var(--sb);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 18px;
  background: var(--navy); color: #fff;
  border-top: 2px solid var(--teal);
  font-size: 11.5px; letter-spacing: .2px;
}
.sb-line { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-note { color: #93A9C6; white-space: nowrap; font-size: 11px; }
@media (max-width: 720px) { .sb-note { display: none; } }

/* ---------- hover tooltip over the drawing ---------- */

.region-tip {
  position: fixed; z-index: 40; pointer-events: none;
  background: var(--navy); color: #fff; font-size: 11.5px;
  padding: 5px 9px; border-radius: 5px; box-shadow: 0 4px 14px rgba(0,0,0,.22);
  max-width: 280px;
}

/* A chart can hit the target ratio exactly and still be too small to read
   once PowerPoint scales it onto a slide. */
#dims.warn { color: #B26A00; font-weight: 600; }