/* Project Jarvis — Open Design screens on locked Sophos tokens.
   Source: docs/brand/TOKENS.md (brand guide 6 Feb 2026).
   Derived greys/washes are mixes of those five hexes, not a sixth brand color. */

:root {
  --color-dark-blue: #001a47;
  --color-sophos-blue: #2006f7;
  --color-cyber-blue: #00edff;
  --color-cyber-green: #00f2b3;
  --color-light-neutral: #edf2f9;
  --color-white: #ffffff;
  --color-text: var(--color-dark-blue);
  --color-muted: color-mix(in srgb, var(--color-dark-blue) 52%, var(--color-light-neutral));
  --color-border: color-mix(in srgb, var(--color-dark-blue) 14%, var(--color-light-neutral));
  --color-chip: color-mix(in srgb, var(--color-dark-blue) 8%, var(--color-light-neutral));
  --color-ready-bg: color-mix(in srgb, var(--color-cyber-green) 38%, var(--color-white));
  --color-ready-fg: color-mix(in srgb, var(--color-dark-blue) 78%, var(--color-cyber-green));
  --color-navy-mid: color-mix(in srgb, var(--color-dark-blue) 82%, var(--color-sophos-blue));
  --color-disabled: color-mix(in srgb, var(--color-dark-blue) 28%, var(--color-light-neutral));
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --shadow: 0 8px 24px color-mix(in srgb, var(--color-dark-blue) 8%, transparent);
  --font: "Zalando Sans", sans-serif;
  --wdth-body: 100;
  --wdth-sub: 112.5;
  --wdth-title: 125;
}

@font-face {
  font-family: "Zalando Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  src: url("/fonts/zalando-sans-latin-wdth-wght.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-variation-settings: "wdth" var(--wdth-body);
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-light-neutral);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img { max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font-family: inherit; }

.site-header {
  background: var(--color-dark-blue);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  min-height: 72px;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: var(--color-white);
}
.brand img {
  height: 22px;
  width: auto;
  display: block;
}
.brand-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 1px solid color-mix(in srgb, var(--color-white) 22%, transparent);
  padding-left: 16px;
}
.brand-copy strong {
  font-variation-settings: "wdth" var(--wdth-title);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
}
.brand-copy span {
  font-variation-settings: "wdth" var(--wdth-sub);
  font-size: 12px;
  color: color-mix(in srgb, var(--color-white) 72%, var(--color-cyber-blue));
}
.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav a {
  color: color-mix(in srgb, var(--color-white) 82%, var(--color-light-neutral));
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
}
.nav a.is-active {
  background: color-mix(in srgb, var(--color-white) 14%, transparent);
  color: var(--color-white);
}

.page {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 36px 0 56px;
  flex: 1;
}
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.page-head h1 {
  margin: 0;
  font-size: 40px;
  line-height: 1.1;
  font-weight: 700;
  font-variation-settings: "wdth" var(--wdth-title);
}
.lede {
  margin: 8px 0 0;
  color: var(--color-muted);
  font-size: 16px;
  font-variation-settings: "wdth" var(--wdth-sub);
}
.meta {
  margin: 8px 0 0;
  color: var(--color-muted);
  font-size: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-dark-blue);
  background: var(--color-white);
  color: var(--color-dark-blue);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary {
  background: var(--color-sophos-blue);
  border-color: var(--color-sophos-blue);
  color: var(--color-white);
}
.btn[disabled], .btn.is-disabled {
  background: var(--color-chip);
  border-color: var(--color-border);
  color: var(--color-disabled);
  cursor: not-allowed;
}
.btn-ghost { background: var(--color-white); }

.grid-2 {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
}
.grid-2.equal { grid-template-columns: 1fr 1fr; }
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.card h2 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  font-variation-settings: "wdth" var(--wdth-title);
}
.eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 600;
}

.queue-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
}
.queue-row:first-of-type { border-top: 0; padding-top: 0; }
.queue-time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-muted);
}
.queue-row strong { display: block; font-size: 16px; }
.queue-row span { color: var(--color-muted); font-size: 13px; }

.pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  background: var(--color-chip);
  color: var(--color-dark-blue);
  white-space: nowrap;
}
.pill-ready {
  background: var(--color-ready-bg);
  color: var(--color-ready-fg);
}
.pill-navy {
  background: var(--color-dark-blue);
  color: var(--color-white);
}
.pill-notebook {
  background: color-mix(in srgb, var(--color-sophos-blue) 16%, var(--color-white));
  color: var(--color-sophos-blue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
}

.focus-card {
  background: linear-gradient(160deg, var(--color-dark-blue) 0%, var(--color-navy-mid) 100%);
  color: var(--color-white);
  border: 0;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.focus-card h2 { color: var(--color-white); }
.focus-card p { margin: 0; font-size: 16px; line-height: 1.45; color: color-mix(in srgb, var(--color-white) 88%, var(--color-cyber-blue)); }
.focus-stat { margin-top: 28px; }
.focus-stat strong {
  display: block;
  font-size: 72px;
  line-height: 0.9;
  font-weight: 700;
  font-variation-settings: "wdth" var(--wdth-title);
}
.focus-stat span {
  display: block;
  margin-top: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
  color: color-mix(in srgb, var(--color-white) 55%, var(--color-cyber-blue));
}

.video-card { padding: 0; overflow: hidden; }
.video-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(145deg, var(--color-dark-blue), var(--color-navy-mid) 55%, color-mix(in srgb, var(--color-dark-blue) 70%, var(--color-sophos-blue)));
  display: grid;
  place-items: center;
}
.play {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 0;
  background: var(--color-white);
  color: var(--color-dark-blue);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.play svg { margin-left: 4px; }
a.play,
a.audio-play {
  text-decoration: none;
}
.video-title {
  position: absolute;
  left: 22px;
  bottom: 18px;
  color: var(--color-white);
  font-size: 22px;
  font-weight: 700;
  font-variation-settings: "wdth" var(--wdth-title);
}
.video-meta {
  padding: 16px 22px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-white);
}
.video-meta h3 { margin: 0; font-size: 16px; }

.audio-card { padding: 0; overflow: hidden; }
.audio-stage {
  background: var(--color-dark-blue);
  padding: 18px 20px 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
}
.audio-play {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--color-cyber-blue);
  color: var(--color-dark-blue);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.wave {
  height: 36px;
  display: flex;
  align-items: end;
  gap: 3px;
}
.wave i {
  display: block;
  width: 3px;
  background: color-mix(in srgb, var(--color-white) 82%, var(--color-cyber-blue));
  border-radius: 2px;
}
.wave-label {
  color: var(--color-white);
  font-size: 13px;
  margin-bottom: 8px;
}
.progress {
  height: 3px;
  background: color-mix(in srgb, var(--color-white) 18%, transparent);
  border-radius: var(--radius-pill);
  margin-top: 10px;
}
.progress > span {
  display: block;
  width: 28%;
  height: 100%;
  background: var(--color-cyber-blue);
  border-radius: inherit;
}
.audio-body { padding: 18px 22px 20px; }
.audio-body .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.audio-body h3 { margin: 8px 0 2px; }
.audio-body .sub { color: var(--color-muted); font-size: 13px; }

.drop {
  border: 1.5px dashed color-mix(in srgb, var(--color-sophos-blue) 45%, var(--color-light-neutral));
  background: color-mix(in srgb, var(--color-sophos-blue) 6%, var(--color-light-neutral));
  border-radius: var(--radius);
  padding: 36px 24px;
  text-align: center;
  margin-bottom: 22px;
}
.drop.is-over {
  background: color-mix(in srgb, var(--color-sophos-blue) 12%, var(--color-white));
}
.drop h2 { margin: 0 0 6px; }
.drop p { margin: 0 0 16px; color: var(--color-muted); }
.paste-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-dark-blue);
  text-align: left;
  max-width: 640px;
  margin: 0 auto 8px;
}
#notes-text {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 auto 16px;
  min-height: 120px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-white);
  text-align: left;
  resize: vertical;
}
.drop-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
}
.file-chosen {
  margin: 0 auto 12px;
  max-width: 640px;
  color: var(--color-dark-blue);
  font-size: 13px;
  font-weight: 600;
}
.filters { display: flex; align-items: center; gap: 8px; margin: 8px 0 18px; }
.filters span { color: var(--color-muted); font-size: 13px; margin-right: 6px; }
.filters label { cursor: pointer; }
.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--color-muted);
  font-size: 13px;
  margin: 4px auto 0;
  max-width: 520px;
  text-align: left;
}

.note-card .pills { display: flex; gap: 8px; margin-bottom: 12px; }
.note-card h3 { margin: 0; font-size: 18px; }
.note-card .when { color: var(--color-muted); font-size: 13px; margin: 6px 0 10px; }
.note-card p { margin: 0 0 16px; color: var(--color-muted); line-height: 1.45; }
.note-card a { color: var(--color-sophos-blue); font-weight: 600; }

.brief-card ul { list-style: none; margin: 0; padding: 0; }
.brief-card li {
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
  line-height: 1.4;
}
.brief-card li:first-child { border-top: 0; }
.hitl {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
}
.hitl p { margin: 0; color: var(--color-muted); font-size: 13px; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.stat {
  background: color-mix(in srgb, var(--color-sophos-blue) 8%, var(--color-light-neutral));
  border-radius: var(--radius-sm);
  padding: 12px;
}
.stat b { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.stat span { font-weight: 700; font-size: 18px; }
.news-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
}
.news-item:first-of-type { border-top: 0; padding-top: 0; }
.thumb {
  width: 56px;
  height: 40px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--color-dark-blue), var(--color-sophos-blue));
}
.stack-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.stack-pills span {
  border: 1px solid var(--color-dark-blue);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 13px;
}
.q-list { list-style: none; margin: 0; padding: 0; }
.q-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
}
.q-list li:first-child { border-top: 0; }
.q-num { color: var(--color-muted); font-variant-numeric: tabular-nums; font-size: 13px; }

.draft-badge {
  background: var(--color-chip);
  color: var(--color-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}
.med-card {
  background: color-mix(in srgb, var(--color-sophos-blue) 7%, var(--color-light-neutral));
  border: 0;
}
.med-card h2 {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.med-card p { margin: 0; line-height: 1.45; }
.confirm-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.spine {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}
.spine button, .spine a {
  border: 1px solid var(--color-border);
  background: var(--color-white);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-dark-blue);
  cursor: pointer;
  text-decoration: none;
}
.spine .is-active {
  background: var(--color-dark-blue);
  border-color: var(--color-dark-blue);
  color: var(--color-white);
}
.filmstrip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.slide {
  aspect-ratio: 16 / 9;
  background: var(--color-dark-blue);
  color: var(--color-white);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 220px;
}
.slide .kicker { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; }
.slide h3 { margin: 8px 0 0; font-size: 16px; font-variation-settings: "wdth" var(--wdth-title); }
.slide .sub { font-size: 12px; opacity: 0.75; }
.slide .mark { align-self: flex-end; height: 12px; }
.film-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-muted);
  font-size: 12px;
  margin-top: 10px;
  padding: 8px 4px 0;
  border-top: 1px solid var(--color-border);
}
.map-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.section-label { color: var(--color-muted); font-size: 13px; margin: 0 0 8px; }

.auth-wrap {
  width: min(560px, calc(100% - 48px));
  margin: 48px auto 64px;
}
.auth-wrap h1 { font-size: 36px; margin: 0 0 8px; }
.auth-wrap .card { padding: 28px; }
.auth-wrap h1 { font-size: 36px; }
.qr-box {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px;
  display: grid;
  place-items: center;
  margin: 18px 0;
}
.qr-box svg { width: min(220px, 100%); height: auto; }
.secret {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  background: var(--color-chip);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  word-break: break-all;
}
.auth-wrap label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  margin: 10px 0;
}
.auth-wrap input[type="email"],
.auth-wrap input[type="password"],
.auth-wrap input[type="text"] {
  font-weight: 400;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  letter-spacing: normal;
  text-align: left;
  font-size: 16px;
}
.auth-wrap .btn { margin-top: 8px; }
.code-input {
  width: 100%;
  font-size: 28px;
  letter-spacing: 0.4em;
  text-align: center;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  margin: 12px 0 16px;
}
.operator {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  color: var(--color-muted);
}
.error { color: var(--color-sophos-blue); font-size: 14px; }

.site-footer {
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  padding: 18px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.site-footer img { height: 18px; width: auto; }
.tagline {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  font-variation-settings: "wdth" var(--wdth-title);
  color: var(--color-dark-blue);
}
.foot-name { color: var(--color-muted); font-size: 13px; }

.header-end {
  display: flex;
  align-items: center;
  gap: 16px;
}
.role-chip {
  display: inline-flex;
  align-items: center;
  background: var(--color-cyber-blue);
  color: var(--color-dark-blue);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  vertical-align: middle;
  margin-left: 8px;
  text-decoration: none;
}
.role-chip-link { margin-left: 0; }
.header-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-sophos-blue) 55%, var(--color-dark-blue));
  color: var(--color-white);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}
.nav-manager a { border-radius: var(--radius-sm); }

.head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ghost-chip {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 8px 12px;
  font-size: 13px;
  color: var(--color-muted);
}

.panel {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: color-mix(in srgb, var(--color-dark-blue) 6%, var(--color-light-neutral));
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-dark-blue);
}
.table-wrap { overflow-x: auto; }
.table {
  width: 100%;
  border-collapse: collapse;
}
.table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding: 10px 18px;
  border-bottom: 1px solid var(--color-border);
  font-weight: 700;
}
.table td, .table tbody th {
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  font-weight: 400;
  text-align: left;
}
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.who {
  display: flex;
  align-items: center;
  gap: 12px;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-dark-blue);
  color: var(--color-white);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex: none;
}
.sub { color: var(--color-muted); font-size: 13px; margin-top: 2px; }
.mono { font-variant-numeric: tabular-nums; font-size: 13px; }
.muted { color: var(--color-muted); }

.pill-se {
  background: color-mix(in srgb, var(--color-sophos-blue) 16%, var(--color-white));
  color: var(--color-sophos-blue);
}
.pill-manager {
  background: color-mix(in srgb, var(--color-dark-blue) 10%, var(--color-light-neutral));
  color: var(--color-dark-blue);
}
.pill-draft {
  background: color-mix(in srgb, var(--color-dark-blue) 8%, var(--color-light-neutral));
  color: color-mix(in srgb, var(--color-dark-blue) 62%, var(--color-light-neutral));
}
.pill-conflict {
  background: color-mix(in srgb, var(--color-sophos-blue) 16%, var(--color-white));
  color: var(--color-sophos-blue);
  letter-spacing: 0.06em;
  font-size: 10px;
}

.role-switch {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--color-white);
}
.role-switch form { margin: 0; }
.role-switch button {
  border: 0;
  background: transparent;
  color: var(--color-muted);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.role-switch button.is-on {
  background: var(--color-sophos-blue);
  color: var(--color-white);
}

.shelf-layout {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 18px;
  align-items: start;
}
.shelf-list { display: flex; flex-direction: column; }
.shelf-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border-top: 1px solid var(--color-border);
}
.shelf-row:first-child { border-top: 0; }
.shelf-row.is-draft {
  background: color-mix(in srgb, var(--color-dark-blue) 4%, var(--color-light-neutral));
  outline: 1px dashed var(--color-border);
  outline-offset: -1px;
}
.shelf-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: var(--color-dark-blue);
  background: color-mix(in srgb, var(--color-cyber-blue) 28%, var(--color-white));
}
.shelf-icon.is-audio {
  background: color-mix(in srgb, var(--color-cyber-green) 28%, var(--color-white));
}
.shelf-copy h3 { margin: 0 0 8px; font-size: 16px; }
.shelf-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.shelf-url, .duration { color: var(--color-muted); font-size: 12px; }
.shelf-side { display: flex; flex-direction: column; gap: 18px; }
.shelf-side p { color: var(--color-muted); line-height: 1.45; }

.callout {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-cyber-blue) 14%, var(--color-light-neutral));
  color: var(--color-dark-blue);
  font-size: 14px;
}

.coverage-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.coverage-edit label, .jarvis-dialog label, .role-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  margin: 10px 0;
}
.coverage-edit input, .coverage-edit select,
.jarvis-dialog input, .jarvis-dialog select {
  font-weight: 400;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-white);
}

.conflict-banner {
  background: color-mix(in srgb, var(--color-sophos-blue) 10%, var(--color-white));
  border: 1px solid color-mix(in srgb, var(--color-sophos-blue) 28%, var(--color-white));
  color: var(--color-dark-blue);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 14px;
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  margin: 0 0 16px;
  font-size: 12px;
  color: var(--color-muted);
}
.legend-label {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-dark-blue);
}
.to-pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.type-vacation { background: color-mix(in srgb, var(--color-sophos-blue) 16%, var(--color-white)); color: var(--color-sophos-blue); }
.type-sick { background: color-mix(in srgb, var(--color-sophos-blue) 10%, var(--color-light-neutral)); color: var(--color-dark-blue); }
.type-sophos_event { background: color-mix(in srgb, var(--color-dark-blue) 10%, var(--color-light-neutral)); color: var(--color-dark-blue); }
.type-partner_event { background: color-mix(in srgb, var(--color-cyber-blue) 28%, var(--color-white)); color: var(--color-dark-blue); }
.type-r_and_r { background: color-mix(in srgb, var(--color-cyber-green) 32%, var(--color-white)); color: var(--color-dark-blue); }
.type-conflict { background: color-mix(in srgb, var(--color-sophos-blue) 16%, var(--color-white)); color: var(--color-sophos-blue); }

.cal-table th { white-space: nowrap; text-align: center; }
.cal-table td { text-align: center; min-width: 72px; }
.cal-table tbody th { min-width: 200px; }
.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-border);
}

.month-form { margin: 0; }
.month-chip { position: relative; overflow: hidden; }
.month-chip input[type="month"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.jarvis-dialog {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px;
  width: min(440px, calc(100% - 32px));
  box-shadow: var(--shadow);
}
.jarvis-dialog::backdrop {
  background: color-mix(in srgb, var(--color-dark-blue) 35%, transparent);
}
.jarvis-dialog h2 { margin: 0 0 8px; font-size: 22px; }
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.role-fields { flex-direction: row; align-items: center; gap: 16px; }
.check { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.hint { color: var(--color-muted); font-size: 13px; font-weight: 400; }

@media (max-width: 900px) {
  .grid-2, .grid-2.equal, .grid-3, .grid-2x2, .shelf-layout, .coverage-edit-grid { grid-template-columns: 1fr; }
  .site-header { flex-wrap: wrap; padding: 12px 16px; }
  .page { width: calc(100% - 32px); }
  .page-head h1 { font-size: 32px; }
}