:root {
  color-scheme: light;
  --ink: #142f46;
  --text: #203642;
  --muted: #506475;
  --line: #c7d3de;
  --soft: #e9eff4;
  --canvas: #f0f4f7;
  --blue: #215abd;
  --white: #fff;
  font-family: "Inter", "Arial", sans-serif;
  color: var(--text);
  background: var(--canvas);
  font-variant-numeric: tabular-nums;
  scroll-padding-top: 15px;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, select { font: inherit; }
a { color: inherit; }
button, select { cursor: pointer; }
button:disabled, select:disabled { cursor: default; }
:focus-visible { outline: 3px solid #d27a14; outline-offset: 3px; }
[hidden] { display: none !important; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { position: fixed; top: 4px; left: 4px; z-index: 10; background: white; color: var(--ink); padding: 12px; }
.masthead { background: var(--ink); color: white; }
.frame, .navframe { max-width: 1536px; margin: 0 auto; padding-inline: clamp(16px, 4.1vw, 74px); }
.navframe { min-height: 68px; display: flex; align-items: center; gap: clamp(18px, 3vw, 64px); }
.identity { display: flex; flex: none; align-items: center; gap: 9px; color: white; text-decoration: none; font-weight: 800; letter-spacing: -.035em; font-size: 23px; }
.identity-tail { color: #c1d2df; font-size: 16px; letter-spacing: -.015em; font-weight: 500; }
.mark { width: 26px; height: 25px; display: grid; align-content: center; gap: 3px; transform: skewY(-10deg); }
.mark i { display: block; background: #99c9ec; height: 4px; }
.mark i:nth-child(2) { margin-right: 6px; background: #d3edff; }
.mark i:nth-child(3) { margin-right: 11px; background: white; }
nav { display: flex; gap: clamp(12px, 1.8vw, 30px); }
nav a { font-size: 14px; text-decoration: none; color: #d7e3eb; line-height: 2; }
nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.connection { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; flex: none; white-space: nowrap; color: #e0e9ed; font-size: 13px; }
.connection i { width: 8px; height: 8px; background: #cdcfd5; border-radius: 50%; }
.connection[data-state="ok"] i { background: #66dcb5; }
.connection[data-state="failed"] i { background: #f4ba75; }
.pageheading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: clamp(25px, 3.5vw, 52px) 0 clamp(23px, 2.6vw, 37px); }
h1,h2,h3,p { margin: 0; }
h1, h2, h3 { color: var(--ink); }
h1 { letter-spacing: -.055em; line-height: 1.02; font-weight: 700; font-size: clamp(34px, 3.35vw, 53px); }
h2 { font-size: clamp(21px, 1.72vw, 28px); letter-spacing: -.035em; line-height: 1.2; }
h3 { font-size: 16px; letter-spacing: -.016em; }
#intro { color: var(--muted); font-size: 15px; line-height: 1.5; margin-top: 10px; }
.scope { display: grid; min-width: 208px; gap: 6px; }
.scope label, .plot-label, .inspector-label { font-size: 12px; color: var(--muted); font-weight: 600; }
select { color: var(--text); background: white; border: 1px solid #a9bccb; border-radius: 5px; padding: 7px 26px 7px 10px; height: 34px; font-size: 14px; }
.scope select { height: 40px; font-weight: 600; }
#problem { border-left: 4px solid #b36519; background: #fff0d8; color: #633308; padding: 12px 16px; margin-bottom: 18px; font-size: 14px; line-height: 1.5; }
.instrument, .sheet { border: 1px solid var(--line); background: white; border-radius: 9px; }
.instrument { border-top: 3px solid #285f8d; }
.instrument-heading, .sheet-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.instrument-heading { padding: 20px 23px; }
.toolbar, .switch { display: flex; align-items: center; }
.toolbar { gap: 12px; }
.switch { border: 1px solid var(--line); background: var(--soft); padding: 2px; border-radius: 6px; }
.switch button { color: var(--muted); background: transparent; border: 0; border-radius: 4px; padding: 6px 12px; font-weight: 600; font-size: 13px; }
.switch button[aria-pressed="true"] { background: var(--ink); color: white; }
.metrics { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); margin: 0 23px; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.metric { border: 0; background: #f7f9fb; display: grid; justify-items: start; align-content: start; gap: 6px; text-align: left; padding: 12px 14px; color: var(--ink); min-width: 0; }
.metric:hover { background: #eaf0f7; }
.metric:focus-visible { outline-offset: -3px; }
.metric-head { font-size: 13px; display: inline-flex; align-items: baseline; gap: 7px; line-height: 1.25; font-weight: 600; }
.trace { width: 13px; height: 4px; align-self: center; border-radius: 2px; background: var(--trace); flex: none; }
.metric[aria-pressed="false"] .trace { background: transparent; border: 1px solid #8192a2; }
.metric[aria-pressed="false"] { background: #fff; color: var(--muted); }
.metric-value { font-size: clamp(22px, 2.5vw, 39px); line-height: 1.1; font-weight: 650; letter-spacing: -.055em; }
.plot-area { padding: 19px 23px 8px; }
.plot-label { font-weight: 500; }
.plot { width: 100%; margin-top: 4px; height: clamp(145px, 19vh, 232px); position: relative; }
.plot svg { display: block; overflow: visible; cursor: crosshair; width: 100%; height: 100%; touch-action: pan-y; }
.plot .axis, .mini-plot .axis { fill: #526677; font-family: "Inter", Arial, sans-serif; font-size: 11px; }
.plot .grid, .mini-plot .grid { stroke: #dee6eb; stroke-width: 1; }
.plot .timegrid { stroke: #e7ecf1; stroke-width: 1; stroke-dasharray: 2 4; }
.plot .pin { stroke: #4d6374; stroke-width: 1; stroke-dasharray: 4 3; }
.plot .trace-line { fill: none; stroke-width: 2.3; stroke-linejoin: round; }
.placeholder, .empty { color: var(--muted); font-size: 14px; line-height: 1.55; }
.placeholder { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.inspector { display: flex; justify-content: space-between; align-items: center; gap: 7px; padding: 10px 23px; background: #f5f8fa; border-top: 1px solid #dce4ea; border-radius: 0 0 8px 8px; min-height: 44px; }
.inspector > div:first-child { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.inspector strong { font-size: 13px; font-weight: 600; }
.point-actions { display: flex; gap: 5px; }
.point-actions button { min-width: 30px; min-height: 28px; background: #fff; color: var(--ink); border: 1px solid #becbd5; border-radius: 4px; font-size: 13px; font-weight: 600; }
.point-actions button:not(:last-child) { font-size: 19px; line-height: 1; }
.point-actions button:last-child { padding: 4px 9px; }
.point-actions button:disabled { color: #73818c; background: #edf1f4; border-color: #d7e0e6; }
.snapshot { padding: 16px 23px 18px; border-top: 1px solid var(--line); }
.snapshot-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.snapshot-top span { color: var(--muted); font-size: 12px; }
.sheet { margin-top: 22px; overflow: hidden; }
.sheet-heading { padding: 21px 23px 16px; }
.section-meta { font-size: 13px; color: var(--muted); }
.inventory { display: flex; flex-wrap: wrap; gap: 10px 25px; padding: 0 23px; line-height: 1.5; }
.inventory span { font-size: 13px; color: var(--muted); }
.inventory b { color: var(--ink); font-size: 16px; font-weight: 700; }
.section-note { margin: 8px 23px 17px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.table-scroll { overflow: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
table { border-collapse: collapse; width: 100%; font-size: 13px; text-align: left; }
th, td { padding: 9px 13px; text-align: left; vertical-align: middle; }
thead { background: #eaf0f4; color: #455b6b; font-size: 12px; }
th { font-weight: 600; white-space: nowrap; }
td { border-top: 1px solid #e0e7ec; }
tbody tr:hover { background: #f6f9fb; }
tr > :first-child { padding-left: 23px; }
tr > :last-child { padding-right: 23px; }
th.num, td.num { text-align: right; }
.num { white-space: nowrap; }
.muted, .support-time, td small { color: var(--muted); }
td small { display: block; font-size: 11px; margin-top: 3px; }
.brand-link { color: #184f8b; background: transparent; border: 0; text-align: left; padding: 5px 0; font-weight: 700; font-size: 14px; }
.brand-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: #4a6172; font-weight: 600; font-size: 12px; }
.status:before { content: ''; background: currentColor; width: 7px; height: 7px; border-radius: 2px; }
.status[data-tone="active"] { color: #225d99; }
.status[data-tone="accepted"] { color: #117156; }
.status[data-tone="review"] { color: #8b5c06; }
.status[data-tone="held"], .has-issue { color: #a04139; }
.has-issue { font-weight: 700; }
.issue, .batch-detail { border-top: 1px solid #dfe7eb; }
.issue summary, .batch-detail summary { cursor: pointer; }
.issue summary { padding: 13px 23px; display: flex; align-items: baseline; gap: 11px; list-style: none; }
.issue summary::before { content: '›'; color: #496173; font-size: 19px; line-height: .8; }
.issue[open] summary::before { transform: rotate(90deg); }
summary::-webkit-details-marker { display: none; }
.issue-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.issue-brand { color: var(--muted); font-size: 12px; }
.issue-qty { margin-left: auto; flex: none; font-size: 13px; color: #854b0e; }
.issue-body { margin: 0 26px 16px 46px; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.issue-body p + p { margin-top: 5px; }
.batch-detail { border: 0; min-width: 110px; }
.batch-detail summary { font-size: 12px; color: #19568e; text-decoration: underline dotted; text-underline-offset: 3px; }
.batch-detail p { font-size: 12px; margin-top: 5px; min-width: 180px; max-width: 330px; overflow-wrap: anywhere; }
.empty { padding: 4px 23px 19px; }
.team { display: flex; flex-wrap: wrap; padding: 0 23px 17px; gap: 10px 30px; }
.team-member { min-width: 180px; flex: 1 1 190px; padding: 10px 0; border-top: 1px solid var(--line); display: grid; gap: 5px; align-content: start; }
.team-member strong { font-size: 14px; }
.team-member .role { color: var(--muted); font-size: 13px; }
.support-time { font-size: 12px; }
footer { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; padding-block: 18px 30px; font-size: 12px; color: var(--muted); }
@media(max-width: 900px) {
  nav { gap: 13px; }
  .navframe { gap: 20px; }
  .identity-tail { display: none; }
  .metric { padding: 11px 9px; }
  .metric-head { font-size: 12px; gap: 5px; }
  .connection { font-size: 12px; }
}
@media(max-width: 690px) {
  .navframe { min-height: 67px; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; padding-block: 8px; }
  .identity { font-size: 19px; }
  .identity-tail { display: inline; font-size: 14px; }
  .connection { grid-column: 2; grid-row: 1; }
  nav { grid-column: 1/-1; grid-row: 2; justify-content: flex-start; gap: 14px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
  nav a { flex: none; }
  nav a { font-size: 12px; }
  .scope { min-width: 153px; }
  .instrument-heading { flex-wrap: wrap; padding: 16px; }
  .metrics { margin-inline: 16px; display: flex; flex-wrap: wrap; background: #f7f9fb; gap: 0; }
  .metric { flex: 1 0 30%; border: 1px solid #d9e2e9; margin: -1px 0 0 -1px; }
  .plot-area { padding: 13px 13px 6px; }
  .plot { height: 156px; }
  .inspector, .snapshot { padding-inline: 15px; }
  .sheet-heading { padding: 17px 15px 12px; }
  .inventory { padding-inline: 15px; gap: 4px 15px; }
  .section-note { margin-inline: 15px; }
  tr > :first-child { padding-left: 15px; }
  tr > :last-child { padding-right: 15px; }
  .issue summary { flex-wrap: wrap; padding-inline: 15px; gap: 6px 8px; }
  .issue-title { flex: 1 1 65%; }
  .issue-brand { margin-left: 14px; }
  .issue-body { margin-left: 30px; }
  .team { padding-inline: 15px; }
}
@media(max-width: 470px) {
  .pageheading { display: grid; margin-block: 24px 20px; gap: 13px; }
  .scope { display: flex; align-items: center; gap: 9px; }
  .scope select { min-width: 165px; height: 34px; }
  #intro { font-size: 13px; margin-top: 7px; }
  .instrument-heading { gap: 12px; }
  .toolbar { flex-wrap: wrap; gap: 7px; justify-content: space-between; width: 100%; }
  .toolbar select { padding-right: 8px; }
  .switch button { padding-inline: 9px; }
  .metrics { margin-inline: 10px; }
  .metric { padding-inline: 7px; }
  .metric-head { font-size: 11px; }
  .inspector > div:first-child { display: grid; gap: 3px; }
  .inspector strong { font-size: 12px; }
  .sheet { margin-top: 15px; }
}
.chart-tip { position: fixed; z-index: 3; pointer-events: none; background: #fff; color: var(--ink); border: 1px solid #abc0cf; border-radius: 5px; padding: 10px 12px; box-shadow: 0 4px 16px #142f4624; font-size: 12px; min-width: 170px; }
.chart-tip > strong { display: block; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.chart-tip > span { display: flex; gap: 15px; justify-content: space-between; line-height: 1.65; }
.metric:disabled { opacity: 1; }

.point-actions button:last-child { white-space: nowrap; }

.column-bands th { padding-top: 7px; padding-bottom: 6px; color: #3a5366; font-weight: 650; background: #e0e9ef; border-bottom: 1px solid #d2dee6; }
.column-bands th + th { border-left: 1px solid #c7d5df; }
#brand-list th, #brand-list td { padding-inline: 10px; }
#brand-list tr > :first-child { padding-left: clamp(15px, 1.8vw, 23px); }
#brand-list tr > :last-child { padding-right: clamp(15px, 1.8vw, 23px); }
#brand-list td small { white-space: nowrap; }
@media(max-width: 380px) { nav { gap: 4px; } }

.mandate-detail { min-width: 90px; }
.mandate-detail summary { color: #235b87; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.mandate-detail .mandate-body { margin-top: 8px; width: min(225px,52vw); font-size: 12px; line-height: 1.45; }
.mandate-body p + p { margin-top: 4px; }
.team-heading { margin: 3px 23px 8px; }
@media(max-width: 690px) { .team-heading { margin-left: 15px; } }

.change-guide { margin: 9px 23px 0; display: flex; gap: 4px 13px; align-items: baseline; flex-wrap: wrap; font-size: 11px; line-height: 1.5; color: var(--muted); }
.change-guide > :first-child { font-weight: 650; }
.change-guide span[class]::before { content: ''; display: inline-block; margin-right: 5px; width: 7px; height: 7px; border-radius: 2px; background: var(--delta-ink); }
.change-good, [data-change-tone="good"] { --delta-fill: #d9f6e9; --delta-ink: #136348; }
.change-watch, [data-change-tone="watch"] { --delta-fill: #fff0c6; --delta-ink: #785000; }
.change-bad, [data-change-tone="bad"] { --delta-fill: #ffe1df; --delta-ink: #9a302f; }
.live-quantity { display: inline-flex; align-items: baseline; flex-wrap: wrap; column-gap: 5px; border-radius: 3px; }
.live-quantity[data-change-tone] { background: var(--delta-fill); outline: 2px solid var(--delta-fill); color: var(--delta-ink); }
.live-quantity[data-change-tone] > :first-child { color: var(--delta-ink); }
.live-quantity .live-delta { position: relative; color: var(--delta-ink); white-space: nowrap; font-size: 12px; font-weight: 700; line-height: 1.25; letter-spacing: normal; }
#brand-list td.num .live-quantity { display: inline-grid; justify-items: end; }
#brand-list td.num .live-delta { font-size: 10px; }
@media(max-width: 690px) { .change-guide { margin-inline: 15px; gap: 3px 9px; } }
@media (prefers-reduced-motion: no-preference) { .live-quantity { transition: background-color .18s ease; } }

.live-delta .sr { inset-inline-start: 0; top: 0; }

/* Pulse: is the team working right now, and how far is the catalog from its goal. */
.pulse { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 14px 28px; align-items: center; margin-bottom: 18px; padding: 14px 23px; border: 1px solid var(--line); border-radius: 9px; background: white; --pulse: #7a8a97; }
.pulse[data-tone="good"] { --pulse: #12855f; }
.pulse[data-tone="bad"] { --pulse: #b23a33; border-color: #e3b1ad; background: #fff7f6; }
.pulse-state { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.pulse-state i { width: 10px; height: 10px; border-radius: 50%; background: var(--pulse); align-self: center; flex: none; }
.pulse-state strong { color: var(--pulse); font-size: 16px; }
.pulse-state span { color: var(--muted); font-size: 13px; }
.goal-text { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.goal-text b { color: var(--ink); font-variant-numeric: tabular-nums; }
.goal-bar { height: 8px; background: var(--soft); border-radius: 4px; overflow: hidden; }
.goal-bar span { display: block; height: 100%; width: 0; background: #08765d; border-radius: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .pulse[data-tone="good"] .pulse-state i { animation: pulse-beat 2s ease-in-out infinite; }
  .goal-bar span { transition: width .6s ease; }
  .feed-item.fresh { animation: feed-arrive 6s ease-out; }
}
@keyframes pulse-beat { 50% { box-shadow: 0 0 0 5px #12855f2e; } }
@keyframes feed-arrive { from { background: #fff0c6; } to { background: transparent; } }
@media (max-width: 760px) { .pulse { grid-template-columns: 1fr; padding: 13px 15px; } }

/* Event feed */
.feed { list-style: none; margin: 0; padding: 0 23px 17px; max-height: 360px; overflow-y: auto; }
.feed-item { display: grid; grid-template-columns: 66px minmax(0,1fr); gap: 12px; padding: 9px 0 9px 10px; border-top: 1px solid var(--line); border-left: 3px solid var(--tone, #c7d3de); }
.feed-item[data-tone="good"] { --tone: #12855f; }
.feed-item[data-tone="watch"] { --tone: #c08a14; }
.feed-item[data-tone="bad"] { --tone: #b23a33; }
.feed-item[data-type="worker"] { opacity: .78; }
.feed-time { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; padding-top: 1px; }
.feed-head { margin: 0; font-size: 14px; line-height: 1.4; }
.feed-head b { color: var(--ink); }
.feed-detail { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
@media (max-width: 690px) { .feed { padding-inline: 15px; } .feed-item { grid-template-columns: 54px minmax(0,1fr); gap: 8px; } }

/* Brands that only wait in the queue */
.waiting-brands { padding: 10px 23px 4px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.waiting-brands summary { cursor: pointer; font-weight: 600; color: var(--ink); padding: 4px 0; }
.waiting-list { display: flex; flex-wrap: wrap; gap: 2px 18px; padding: 6px 0 8px; }
.waiting-list .brand-link { font-weight: 600; font-size: 13px; }

/* Work rhythm and queue */
.flow-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 18px 30px; padding: 0 23px 20px; }
.flow-panel { min-width: 0; }
.flow-panel h3 { margin: 0 0 6px; font-size: 14px; }
.panel-note { margin: 0 0 8px; color: var(--muted); font-size: 12px; line-height: 1.45; min-height: 34px; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 11px; height: 11px; border-radius: 2px; }
.mini-plot { height: 210px; position: relative; }
.mini-plot svg { display: block; width: 100%; height: 100%; }
.mini-plot .tick { stroke: #7a8a97; stroke-width: 1; opacity: .55; }
.mini-plot .hit { cursor: crosshair; }
.kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 5px; overflow: hidden; margin-bottom: 10px; }
.kpi { background: #f7f9fb; padding: 8px 10px; display: grid; gap: 2px; min-width: 0; }
.kpi span { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.kpi b { font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi small { font-size: 11px; color: var(--muted); }
.kpi[data-tone="bad"] b { color: #a04139; }
.kpi[data-tone="watch"] b { color: #8b5c06; }
@media (max-width: 960px) { .flow-grid { grid-template-columns: 1fr; } }
@media (max-width: 690px) { .flow-grid { padding-inline: 15px; } .kpis { grid-template-columns: repeat(2,minmax(0,1fr)); } }

/* Layer grid */
.layer-table td { vertical-align: middle; }
.layer-cell { display: grid; gap: 4px; min-width: 92px; font-size: 13px; font-variant-numeric: tabular-nums; }
.layer-bar { display: block; height: 7px; background: var(--soft); border-radius: 3px; overflow: hidden; }
.layer-bar i { display: block; height: 100%; border-radius: 3px; }
@media (prefers-reduced-motion: no-preference) { .layer-bar i { transition: width .6s ease; } }

/* Agent lanes and batch content */
.lanes-legend { padding: 0 23px; }
.lanes-plot { padding: 0 23px 18px; overflow: hidden; }
.lanes-plot svg { display: block; width: 100%; height: auto; }
.lanes-plot .axis { fill: #526677; font-family: "Inter", Arial, sans-serif; font-size: 11px; }
.lanes-plot .lane-label { fill: var(--ink); font-size: 12px; font-weight: 600; }
.lanes-plot .lane-flag { fill: #a04139; font-weight: 600; }
.lanes-plot .timegrid { stroke: #e3e9ee; stroke-width: 1; }
.lane-note { margin: 6px 0 0; font-size: 12px; color: #a04139; }
.added-new { color: #117156; font-weight: 700; }
@media (max-width: 690px) { .lanes-plot, .lanes-legend { padding-inline: 15px; } }
#added-list td:last-child { min-width: 300px; white-space: normal; color: var(--muted); font-size: 13px; line-height: 1.45; }
#added-list td:first-child { font-variant-numeric: tabular-nums; }

/* ETIM depth */
.depth-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 5px; overflow: hidden; margin: 0 23px 14px; }
.class-name { display: grid; gap: 2px; min-width: 190px; }
.class-name small { color: var(--muted); font-size: 12px; }
.class-name[data-current="true"] .brand-link { text-decoration: underline; text-underline-offset: 3px; }
.badge { justify-self: start; font-size: 11px; font-weight: 600; color: #136348; background: #d9f6e9; border-radius: 3px; padding: 1px 6px; }
.conflict { color: #8b5c06; font-weight: 700; }
.depth-features { padding: 6px 23px 20px; }
.depth-features h3 { font-size: 14px; margin: 10px 0 6px; }
.feature-list { display: grid; gap: 6px; margin-top: 6px; }
.feature { display: grid; grid-template-columns: minmax(0,1.4fr) 76px minmax(80px,1fr) 120px; gap: 10px; align-items: center; font-size: 13px; }
.feature-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.feature code { font-size: 11.5px; color: var(--muted); }
.feature-bar { display: flex; height: 8px; background: var(--soft); border-radius: 3px; overflow: hidden; }
.feature-bar i { display: block; height: 100%; background: #08765d; }
.feature-bar i.clash { background: #d9a93a; }
.feature-num { font-variant-numeric: tabular-nums; color: var(--muted); }
.feature-rest { margin-top: 10px; font-size: 13px; color: var(--muted); }
.feature-rest summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.depth-controls select { min-width: 190px; }
@media (max-width: 690px) {
  .depth-summary { margin-inline: 15px; }
  .depth-features { padding-inline: 15px; }
  .feature { grid-template-columns: minmax(0,1fr) 80px; }
  .feature code { display: none; }
  .feature-bar { grid-column: 1; }
}
@media (max-width: 480px) { .depth-summary { grid-template-columns: 1fr; } }
.lanes-plot .beat { stroke: #526677; stroke-width: 1; opacity: .5; }
.lanes-plot .lane-task { fill: var(--muted); }
.pulse[data-tone="watch"] { --pulse: #b07a0a; }

/* Free slots */
#slots { margin-bottom: 18px; }
.slot-actions { display: grid; gap: 8px; padding: 0 23px 12px; }
.slot-action { font-size: 14px; line-height: 1.5; padding: 9px 12px; border-radius: 6px; border-left: 4px solid var(--tone, #7a8a97); background: #f7f9fb; }
.slot-action[data-tone="bad"] { --tone: #b23a33; background: #fff7f6; }
.slot-action[data-tone="watch"] { --tone: #c08a14; background: #fffaf0; }
.slot-action[data-tone="good"] { --tone: #12855f; background: #f3fbf7; }
.slot-action .brand-link { padding: 0; font-size: 14px; }
.slot-audit { display: flex; flex-wrap: wrap; gap: 4px; }
.slot-chip { font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 4px; background: #fff0c6; color: #785000; white-space: nowrap; }
.slot-chip[data-tone="bad"] { background: #ffe1df; color: #9a302f; }
.slot-old { color: #a04139; font-weight: 600; }
.slot-name { display: grid; gap: 2px; min-width: 180px; max-width: 360px; }
.slot-task { font-size: 12.5px; line-height: 1.4; color: var(--muted); white-space: normal; }
.slot-chip { white-space: normal; }
@media (max-width: 690px) { .slot-actions { padding-inline: 15px; } }

/* Password gate of the published copy */
.gate { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: #142f46e6; }
.gate-box { width: min(380px,100%); display: grid; gap: 10px; background: white; border-radius: 10px; padding: 24px; box-shadow: 0 10px 40px #0005; }
.gate-box h2 { margin: 0; font-size: 20px; }
.gate-box p { margin: 0; font-size: 13px; line-height: 1.5; }
.gate-box label { font-size: 13px; font-weight: 600; color: var(--ink); margin-top: 6px; }
.gate-box input { height: 38px; border: 1px solid #a9bccb; border-radius: 5px; padding: 0 10px; font-size: 15px; }
.gate-box button { height: 38px; border: 0; border-radius: 5px; background: var(--ink); color: white; font-weight: 600; font-size: 14px; }
.gate-error { color: #a04139; min-height: 1em; }
.gate[hidden] { display: none; }
.metric-trend { font-size: 12px; font-weight: 600; color: var(--muted); min-height: 1.2em; }
.metric-trend[data-tone="good"] { color: #136348; }
.metric-trend[data-tone="watch"] { color: #785000; }
.metric-trend[data-tone="bad"] { color: #9a302f; }
@media (prefers-reduced-motion: no-preference) { .feed-item.fresh { animation-duration: 45s; } }
.feed-item { position: relative; }
.feed-item.fresh { background: #fffaf0; }
.feed-new { position: absolute; right: 0; top: 9px; font-size: 11px; font-weight: 700; color: #785000; background: #fff0c6; border-radius: 3px; padding: 1px 6px; }
.pulse-rates { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.rate { background: #f7f9fb; padding: 8px 12px; display: grid; gap: 1px; min-width: 0; }
.rate span { font-size: 12px; font-weight: 600; color: var(--muted); }
.rate b { font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }
.rate small { font-size: 11.5px; color: var(--muted); }
.rate[data-tone="good"] small { color: #136348; font-weight: 600; }
.rate[data-tone="bad"] small { color: #9a302f; font-weight: 600; }
.rate[data-tone="idle"] b { color: var(--muted); }
@media (max-width: 480px) { .pulse-rates { grid-template-columns: 1fr; } }