:root {
  --rico-bg: #080a0d;
  --rico-bg-grid: rgba(255,255,255,.035);
  --rico-panel: #10141a;
  --rico-panel-2: #141922;
  --rico-panel-3: #1a202b;
  --rico-row: #0e1218;
  --rico-row-alt: #131923;
  --rico-border: rgba(232,238,248,.12);
  --rico-border-strong: rgba(232,238,248,.24);
  --rico-text: #edf2fa;
  --rico-muted: #8f9bad;
  --rico-faint: #626d7b;
  --rico-green: #45c47b;
  --rico-green-bg: rgba(69,196,123,.14);
  --rico-yellow: #d8aa3d;
  --rico-yellow-bg: rgba(216,170,61,.15);
  --rico-red: #e36060;
  --rico-red-bg: rgba(227,96,96,.16);
  --rico-blue: #5e9cff;
  --rico-blue-bg: rgba(94,156,255,.15);
  --rico-purple: #aa7cff;
  --rico-purple-bg: rgba(170,124,255,.14);
  --rico-gray-bg: rgba(148,163,184,.12);
  --rico-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rico-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 12px;
  --gap: 14px;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --status-width: 4px;
  --side-width: 392px;
  --timeline-label-width: 220px;
  --timeline-zoom: 1;
  --oc-horizontal-gap: 18px;
  --timeline-base-width: 1180px;
  --timeline-min-width: calc(var(--timeline-base-width) * var(--timeline-zoom));
  --timeline-scale: 36px; /* one demo hour */
  --timeline-row-height: calc(190px * var(--timeline-zoom));
  --timeline-block-min-height: calc(150px * var(--timeline-zoom));
  --role-row-height: 24px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--rico-bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--rico-text);
  font-family: var(--rico-font);
  background:
    linear-gradient(90deg, transparent 0 31px, var(--rico-bg-grid) 32px),
    linear-gradient(transparent 0 31px, var(--rico-bg-grid) 32px),
    radial-gradient(circle at 15% 0%, rgba(94,156,255,.11), transparent 34rem),
    radial-gradient(circle at 100% 18%, rgba(69,196,123,.07), transparent 30rem),
    var(--rico-bg);
  background-size: 32px 32px, 32px 32px, auto, auto, auto;
}

.app-shell { width: min(1720px, calc(100% - 28px)); margin: 0 auto; padding: 18px 0 28px; }
.topbar, .mode-note, .status-strip, .workspace, .lower-grid { margin-bottom: var(--gap); }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: var(--gap); }
.brand-block { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--rico-border-strong); background: var(--rico-panel-3); border-radius: var(--radius-md); font-weight: 900; letter-spacing: -.05em; color: var(--rico-green); font-family: var(--rico-mono); }
.eyebrow { color: var(--rico-muted); text-transform: uppercase; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(20px, 3vw, 30px); letter-spacing: -.04em; }
h2 { font-size: 15px; letter-spacing: -.02em; }
h3 { font-size: 14px; letter-spacing: -.015em; }
p { color: var(--rico-muted); font-size: 12px; line-height: 1.35; }

.topbar-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.zoom-control { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--rico-border); background: rgba(255,255,255,.025); border-radius: var(--radius-sm); padding: 3px; }
.btn-zoom { min-width: 30px; padding: 6px 8px; font-size: 13px; }
.zoom-value { min-width: 46px; text-align: center; color: var(--rico-muted); font-family: var(--rico-mono); font-size: 11px; font-weight: 900; cursor: pointer; user-select: none; }
.btn, .seg { border: 1px solid var(--rico-border); color: var(--rico-text); background: var(--rico-panel-2); border-radius: var(--radius-sm); padding: 8px 10px; font-weight: 750; font-size: 12px; cursor: pointer; }
.btn:hover, .seg:hover { border-color: var(--rico-border-strong); }
.btn-primary, .seg.is-active { border-color: rgba(69,196,123,.45); background: var(--rico-green-bg); color: #e3faed; }
.btn-toggle.is-active { border-color: rgba(94,156,255,.55); background: var(--rico-blue-bg); color: #e6f0ff; }
.mode-note { border: 1px solid rgba(94,156,255,.2); background: rgba(94,156,255,.08); border-radius: var(--radius-md); padding: 8px 10px; color: var(--rico-muted); font-size: 12px; }
.mode-note strong { color: var(--rico-text); }

.status-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.status-tile { position: relative; border: 1px solid var(--rico-border); background: linear-gradient(180deg, var(--rico-panel-2), var(--rico-panel)); border-radius: var(--radius-md); padding: 11px 12px 10px 15px; min-height: 76px; overflow: hidden; }
.status-tile::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--status-width); background: var(--rico-blue); opacity: .8; }
.status-ok::before { background: var(--rico-green); }
.status-warn::before { background: var(--rico-yellow); }
.status-danger::before { background: var(--rico-red); }
.tile-label { color: var(--rico-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; display: block; }
.status-tile strong { display: block; margin: 5px 0 1px; font-size: 21px; line-height: 1; font-family: var(--rico-mono); }
.status-tile small { color: var(--rico-faint); font-size: 11px; }

.workspace { display: grid; grid-template-columns: minmax(0, 1fr) var(--side-width); gap: var(--gap); align-items: start; }
.lower-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: var(--gap); }
.side-stack { display: grid; gap: var(--gap); }
.board-panel { border: 1px solid var(--rico-border); background: rgba(16,20,26,.95); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--rico-border); padding: 12px; background: rgba(255,255,255,.025); }
.panel-head.compact { padding: 11px 12px; }
.panel-note { color: var(--rico-muted); font-size: 11px; }
.panel-count { display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 8px; border: 1px solid var(--rico-red); background: var(--rico-red-bg); color: #ffdede; border-radius: 999px; font-family: var(--rico-mono); font-weight: 900; font-size: 12px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

.timeline-wrap { overflow-x: auto; overflow-y: hidden; scrollbar-color: var(--rico-border-strong) transparent; }
.timeline-board { min-width: var(--timeline-min-width); position: relative; }
.timeline-scale { display: grid; grid-template-columns: var(--timeline-label-width) repeat(7, minmax(90px, 1fr)); align-items: stretch; border-bottom: 1px solid var(--rico-border); background: rgba(255,255,255,.018); }
.scale-label { padding: 9px 12px; border-right: 1px solid var(--rico-border); color: var(--rico-muted); font-size: 11px; text-transform: uppercase; font-weight: 900; letter-spacing: .1em; }
.scale-cell { position: relative; min-height: 34px; padding: 9px 0 0 9px; border-right: 1px solid rgba(232,238,248,.08); color: var(--rico-muted); font-family: var(--rico-mono); font-size: 11px; }
.scale-cell:last-child { border-right: 0; }
.scale-cell.now { color: var(--rico-green); }

.timeline-row { display: grid; grid-template-columns: var(--timeline-label-width) minmax(0, 1fr); min-height: var(--timeline-row-height); border-bottom: 1px solid var(--rico-border); }
.timeline-row:last-child { border-bottom: 0; }
.timeline-label { border-right: 1px solid var(--rico-border); padding: 10px 12px; background: var(--rico-row); }
.timeline-label .oc-name { font-weight: 900; font-size: 13px; line-height: 1.25; }
.timeline-label .oc-meta { margin-top: 5px; color: var(--rico-muted); font-size: 11px; font-family: var(--rico-mono); }
.timeline-label .oc-explain { margin-top: 8px; color: var(--rico-faint); font-size: 11px; line-height: 1.25; }
.timeline-track { position: relative; min-height: var(--timeline-row-height); background:
  linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px) 0 0 / calc((100%) / 7) 100%,
  linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.006));
  padding: 16px 12px;
}
.oc-block { position: absolute; top: 16px; min-height: var(--timeline-block-min-height); border: 1px solid var(--rico-border-strong); background: var(--rico-panel-2); border-radius: 8px; overflow: hidden; box-shadow: 0 12px 26px rgba(0,0,0,.28); min-width: 230px; }
.oc-block.marker-only { min-height: 44px; height: 44px; top: 64px; width: 230px !important; background: rgba(148,163,184,.09); border-style: dashed; box-shadow: none; }
.oc-block.block-planning { border-color: rgba(170,124,255,.42); }
.oc-segments { position: absolute; inset: 0; display: flex; z-index: 0; }
.oc-seg { height: 100%; }
.oc-minimum { background: linear-gradient(180deg, rgba(94,156,255,.24), rgba(94,156,255,.12)); border-right: 1px solid rgba(94,156,255,.32); }
.oc-extension { background: repeating-linear-gradient(45deg, rgba(216,170,61,.22), rgba(216,170,61,.22) 6px, rgba(216,170,61,.09) 6px, rgba(216,170,61,.09) 12px); }
.oc-fixed { background: linear-gradient(180deg, rgba(170,124,255,.20), rgba(170,124,255,.09)); width: 100%; }
.oc-marker-bg { background: rgba(148,163,184,.1); width: 100%; }
.oc-block-content { position: relative; z-index: 1; padding: 9px 10px 10px; }
.oc-block-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.08); }
.oc-block-title { font-weight: 950; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-block-sub { margin-top: 2px; color: var(--rico-muted); font-family: var(--rico-mono); font-size: 10px; }
.oc-role-list { display: grid; gap: 4px; margin-top: 8px; }
.oc-role-row { display: grid; grid-template-columns: minmax(96px, 1.1fr) minmax(88px, .95fr) 44px auto; gap: 7px; align-items: center; min-height: 23px; padding: 3px 6px; background: rgba(0,0,0,.19); border: 1px solid rgba(255,255,255,.055); border-radius: 4px; font-size: 10.5px; }
.oc-role-head { min-height: 18px; padding-top: 0; padding-bottom: 2px; background: transparent; border: 0; color: var(--rico-faint); text-transform: uppercase; letter-spacing: .07em; font-size: 9px; font-weight: 900; }
.role-name, .member-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-name { color: var(--rico-muted); }
.role-name em { color: var(--rico-faint); font-style: normal; font-family: var(--rico-mono); }
.member-name { color: var(--rico-text); font-weight: 700; }
.role-right { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-height: 18px; padding: 2px 6px; border-radius: 999px; border: 1px solid var(--rico-border); background: var(--rico-gray-bg); color: var(--rico-muted); font-family: var(--rico-mono); font-size: 10px; font-weight: 850; white-space: nowrap; }
.badge.joined, .badge.locked, .badge.ok { border-color: rgba(69,196,123,.36); background: var(--rico-green-bg); color: #dff9ea; }
.badge.pending, .badge.open, .badge.delay { border-color: rgba(216,170,61,.4); background: var(--rico-yellow-bg); color: #fff1c8; }
.badge.wrong, .badge.blocked, .badge.critical { border-color: rgba(227,96,96,.45); background: var(--rico-red-bg); color: #ffe1e1; }
.badge.planning { border-color: rgba(170,124,255,.42); background: var(--rico-purple-bg); color: #eee4ff; }
.badge.recruiting { border-color: rgba(94,156,255,.38); background: var(--rico-blue-bg); color: #e6f0ff; }
.badge.ignored { border-color: rgba(148,163,184,.25); background: rgba(148,163,184,.09); color: var(--rico-muted); }
.badge.ready { border-color: rgba(69,196,123,.50); background: rgba(69,196,123,.22); color: #e3faed; }
.cpr { color: var(--rico-muted); font-family: var(--rico-mono); font-size: 10px; }

.mobile-oc-list { display: none; padding: 10px; gap: 10px; }
.mobile-oc-card { border: 1px solid var(--rico-border); background: var(--rico-row); border-radius: var(--radius-md); overflow: hidden; }
.mobile-card-head { padding: 10px; border-bottom: 1px solid var(--rico-border); display: flex; justify-content: space-between; gap: 8px; }
.mobile-card-title { font-weight: 900; font-size: 13px; }
.mobile-card-sub { margin-top: 4px; color: var(--rico-muted); font-size: 11px; font-family: var(--rico-mono); }
.mini-timeline { height: 12px; display: flex; margin: 10px; border-radius: 999px; overflow: hidden; background: rgba(148,163,184,.11); border: 1px solid rgba(255,255,255,.08); }
.mini-min { background: rgba(94,156,255,.48); }
.mini-ext { background: repeating-linear-gradient(45deg, rgba(216,170,61,.65), rgba(216,170,61,.65) 4px, rgba(216,170,61,.30) 4px, rgba(216,170,61,.30) 8px); }
.mini-fixed { background: rgba(170,124,255,.50); }
.mini-marker { background: rgba(148,163,184,.25); }
.mobile-role-list { display: grid; gap: 5px; padding: 0 10px 10px; }

.exception-list, .suggestion-list, .cpr-feed { display: grid; gap: 8px; padding: 10px; }
.exception-item, .suggestion-item, .cpr-item { border: 1px solid var(--rico-border); border-left-width: 4px; background: var(--rico-row); border-radius: var(--radius-md); padding: 9px; }
.exception-item.critical { border-left-color: var(--rico-red); background: linear-gradient(90deg, rgba(227,96,96,.12), var(--rico-row)); }
.exception-item.warning { border-left-color: var(--rico-yellow); background: linear-gradient(90deg, rgba(216,170,61,.10), var(--rico-row)); }
.exception-item.info { border-left-color: var(--rico-blue); }
.exception-top, .suggestion-top, .cpr-top { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.exception-kind, .suggestion-score, .cpr-rate { font-family: var(--rico-mono); font-size: 11px; font-weight: 900; white-space: nowrap; }
.exception-kind.critical { color: var(--rico-red); }
.exception-kind.warning { color: var(--rico-yellow); }
.exception-kind.info { color: var(--rico-blue); }
.exception-item p, .suggestion-item p, .cpr-item p { margin-top: 5px; }
.suggestion-item.go { border-left-color: var(--rico-green); }
.suggestion-item.hold { border-left-color: var(--rico-yellow); }
.suggestion-item.nope { border-left-color: var(--rico-red); }
.suggestion-score.go { color: var(--rico-green); }
.suggestion-score.hold { color: var(--rico-yellow); }
.suggestion-score.nope { color: var(--rico-red); }
.cpr-item { border-left-color: var(--rico-blue); }
.cpr-rate { color: var(--rico-green); }
.cpr-meta { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 5px; }

.availability-scroll { overflow-x: auto; }
.availability-table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 12px; }
.availability-table th, .availability-table td { padding: 8px 9px; border-bottom: 1px solid var(--rico-border); text-align: left; }
.availability-table th { color: var(--rico-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; background: rgba(255,255,255,.025); }
.availability-table td:not(:first-child) { font-family: var(--rico-mono); font-size: 10px; text-align: center; }
.cell-state { border-radius: 999px; padding: 3px 7px; display: inline-block; border: 1px solid var(--rico-border); }
.cell-free { background: var(--rico-green-bg); color: #dff9ea; border-color: rgba(69,196,123,.35); }
.cell-oc, .cell-reserved { background: var(--rico-blue-bg); color: #e6f0ff; border-color: rgba(94,156,255,.35); }
.cell-soon, .cell-caution { background: var(--rico-yellow-bg); color: #fff1c8; border-color: rgba(216,170,61,.36); }
.cell-wrong, .cell-blocked { background: var(--rico-red-bg); color: #ffe1e1; border-color: rgba(227,96,96,.40); }
.cell-excluded { background: rgba(148,163,184,.10); color: var(--rico-muted); border-color: rgba(148,163,184,.22); }


@media (max-width: 1199px) {
  :root { --side-width: 100%; --timeline-label-width: 190px; --timeline-base-width: 1040px; }
  .app-shell { width: min(100% - 20px, 1180px); }
  .workspace, .lower-grid { grid-template-columns: 1fr; }
  .side-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  :root { --gap: 10px; }
  .app-shell { width: min(100% - 12px, 720px); padding-top: 10px; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .topbar-actions { justify-content: flex-start; width: 100%; }
  .btn, .seg { padding: 7px 8px; font-size: 11px; }
  .brand-mark { width: 36px; height: 36px; }
  .status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-tile { min-height: 66px; padding: 9px 10px 9px 14px; }
  .status-tile strong { font-size: 18px; }
  .panel-head { align-items: flex-start; flex-direction: column; }
  .filter-row { justify-content: flex-start; }
  .side-stack { grid-template-columns: 1fr; }
  .timeline-wrap { display: none; }
  .mobile-oc-list { display: grid; }
}


/* v0.4.1 forced desktop overview
   On phones/iPad this intentionally shows the real timeline board first, scaled down
   to the viewport. Text may be tiny; the purpose is manager overview, not reading comfort. */
body.force-desktop {
  overflow-x: auto;
  --forced-desktop-width: 1180px;
  --forced-desktop-scale: 1;
}

body.force-desktop .app-shell {
  width: var(--forced-desktop-width) !important;
  max-width: none !important;
  min-width: var(--forced-desktop-width) !important;
  margin-left: 6px !important;
  margin-right: 0 !important;
  transform: scale(var(--forced-desktop-scale));
  transform-origin: top left;
}

body.force-desktop .workspace {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--gap) !important;
}

body.force-desktop .board-main {
  display: block !important;
  order: 1 !important;
}

body.force-desktop .side-stack {
  order: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.force-desktop .status-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

body.force-desktop .lower-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr) !important;
}

body.force-desktop .timeline-wrap {
  display: block !important;
  overflow-x: visible !important;
}

body.force-desktop .timeline-board {
  min-width: calc(1120px * var(--timeline-zoom)) !important;
}

body.force-desktop .timeline-scale {
  grid-template-columns: var(--timeline-label-width) repeat(7, minmax(110px, 1fr)) !important;
}

body.force-desktop .mobile-oc-list {
  display: none !important;
}

body.force-desktop .panel-head {
  flex-direction: row !important;
  align-items: center !important;
}

body.force-desktop .topbar {
  flex-direction: row !important;
  align-items: center !important;
}

body.force-desktop .topbar-actions {
  justify-content: flex-end !important;
  width: auto !important;
}

body.force-desktop .mode-note::after {
  content: " Forced desktop view is fit-to-screen; use − / + to zoom the board.";
  color: var(--rico-blue);
  font-weight: 800;
}

/* v0.4.4 multi-timeline lanes
   Three separate timeline modes:
   - OC lanes: left column is OC data, one OC per lane.
   - Player lanes: left column is player/resource data, OC assignment blocks sit inside player rows.
   - Job lanes: left column is generic lane data only; job/OC data lives only inside the blocks. */
:root {
  --lane-row-height: calc(205px * var(--timeline-zoom));
  --player-row-height: calc(128px * var(--timeline-zoom));
  --job-row-height: calc(198px * var(--timeline-zoom));
  --timeline-lane-gap: 12px;
}

.timeline-board { border-top: 1px solid var(--rico-border); }
.timeline-scale { position: sticky; top: 0; z-index: 8; }
.timeline-row { min-height: var(--lane-row-height); }
.timeline-row.player-row { min-height: var(--player-row-height); }
.timeline-row.job-row { min-height: var(--job-row-height); }
.timeline-track { min-height: inherit; overflow: visible; }
.timeline-label { min-height: inherit; }
.timeline-label .lane-type { color: var(--rico-faint); text-transform: uppercase; letter-spacing: .08em; font-size: 9px; font-weight: 900; margin-bottom: 4px; }
.timeline-label .resource-state { display: inline-flex; margin-top: 7px; }
.timeline-label.generic-lane { background: repeating-linear-gradient(135deg, rgba(148,163,184,.08), rgba(148,163,184,.08) 5px, rgba(148,163,184,.03) 5px, rgba(148,163,184,.03) 10px), var(--rico-row); }
.timeline-label.generic-lane .oc-name { color: var(--rico-muted); }

.oc-block { top: var(--timeline-lane-gap); min-height: calc(100% - (var(--timeline-lane-gap) * 2)); max-height: none; }
.oc-block.job-block { min-width: 300px; }
.oc-block.player-block { min-width: 250px; min-height: 94px; max-height: calc(100% - (var(--timeline-lane-gap) * 2)); }
.oc-block.marker-only { top: var(--timeline-lane-gap); height: auto; min-height: calc(100% - (var(--timeline-lane-gap) * 2)); max-height: none; width: 260px !important; }

.oc-block-content { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
.oc-role-list { overflow: visible; }
.oc-role-row { grid-template-columns: minmax(108px, 1.15fr) minmax(90px, .95fr) 48px auto; min-height: var(--role-row-height); }
.player-block .oc-role-list { display: none; }
.player-block .oc-block-header { border-bottom: 0; padding-bottom: 0; }
.player-block .player-role-line { margin-top: 8px; display: grid; grid-template-columns: minmax(80px, 1fr) 44px auto; gap: 6px; align-items: center; font-size: 10.5px; }
.player-block .player-role-line .role-name { color: var(--rico-muted); }

.job-block .oc-block-header { padding-bottom: 6px; }
.job-block .oc-role-list { margin-top: 7px; }
.job-block .oc-role-row { min-height: 21px; }

.timeline-track::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(69,196,123,.16) 0 1px, transparent 1px 100%);
  pointer-events: none;
}

/* Make the delayed recruiting extension less dominant in v0.4.4. */
.oc-extension {
  background: repeating-linear-gradient(45deg, rgba(216,170,61,.26), rgba(216,170,61,.26) 5px, rgba(216,170,61,.09) 5px, rgba(216,170,61,.09) 10px);
  border-left: 1px dashed rgba(216,170,61,.55);
}
.oc-segments { opacity: .82; }

.board-main[data-view="players"] .timeline-label .oc-explain,
.board-main[data-view="jobs"] .timeline-label .oc-explain { color: var(--rico-faint); }

.mode-key { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 10px; border-top: 1px solid var(--rico-border); background: rgba(255,255,255,.018); }
.mode-key span { font-family: var(--rico-mono); font-size: 10px; color: var(--rico-muted); }

@media (max-width: 767px) {
  body:not(.force-desktop) .filter-row .seg[data-timeline-view] { flex: 1 1 auto; }
}

body.force-desktop .timeline-row { min-height: inherit; }
body.force-desktop .timeline-row.player-row { min-height: var(--player-row-height) !important; }
body.force-desktop .timeline-row.job-row { min-height: inherit; }


/* v0.4.5 interactive timeline object layer
   OC and player blocks are now clickable manager objects. The side drawer shows
   role recommendations, wait times, CPR/source data, and compliance interpretation. */
.oc-block,
.mobile-oc-card {
  cursor: pointer;
}
.oc-block:focus-visible,
.mobile-oc-card:focus-visible,
.oc-block.is-selected,
.mobile-oc-card.is-selected {
  outline: 2px solid rgba(94,156,255,.85);
  outline-offset: 2px;
}
.oc-block::after {
  content: "click";
  position: absolute;
  right: 7px;
  bottom: 5px;
  font-family: var(--rico-mono);
  font-size: 8px;
  color: rgba(237,242,250,.42);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.oc-block.state-good { border-color: rgba(69,196,123,.38); box-shadow: inset var(--status-width) 0 0 rgba(69,196,123,.82); }
.oc-block.state-warn { border-color: rgba(216,170,61,.42); box-shadow: inset var(--status-width) 0 0 rgba(216,170,61,.88); }
.oc-block.state-danger { border-color: rgba(227,96,96,.48); box-shadow: inset var(--status-width) 0 0 rgba(227,96,96,.92); }
.oc-block.state-muted { border-color: rgba(148,163,184,.20); box-shadow: inset var(--status-width) 0 0 rgba(148,163,184,.45); }

.oc-role-row.role-state-good,
.drawer-row.role-state-good { background: rgba(69,196,123,.055); }
.oc-role-row.role-state-warn,
.drawer-row.role-state-warn { background: rgba(216,170,61,.07); }
.oc-role-row.role-state-danger,
.drawer-row.role-state-danger { background: rgba(227,96,96,.08); }
.oc-role-row.role-state-muted,
.drawer-row.role-state-muted { opacity: .72; background: rgba(148,163,184,.045); }

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 79;
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(1px);
}
.detail-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  width: min(560px, 100vw);
  background: linear-gradient(180deg, rgba(20,25,34,.98), rgba(11,14,19,.98));
  border-left: 1px solid var(--rico-border-strong);
  box-shadow: -24px 0 60px rgba(0,0,0,.62);
  transform: translateX(102%);
  transition: transform .18s ease-out;
  display: flex;
  flex-direction: column;
}
.detail-drawer.is-open { transform: translateX(0); }
.drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid var(--rico-border);
  background: rgba(255,255,255,.025);
}
.drawer-head h2 { font-size: 18px; margin-top: 2px; }
.drawer-head p { margin-top: 4px; }
.drawer-close { flex: 0 0 auto; }
.drawer-body {
  overflow: auto;
  padding: 14px 16px 20px;
}
.drawer-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.drawer-metric {
  border: 1px solid var(--rico-border);
  background: rgba(255,255,255,.025);
  border-radius: var(--radius-sm);
  padding: 9px;
  min-width: 0;
}
.drawer-metric span {
  display: block;
  color: var(--rico-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drawer-metric strong {
  display: block;
  margin-top: 3px;
  font-family: var(--rico-mono);
  font-size: 13px;
  color: var(--rico-text);
}
.drawer-metric.good { border-color: rgba(69,196,123,.34); background: var(--rico-green-bg); }
.drawer-metric.warn { border-color: rgba(216,170,61,.34); background: var(--rico-yellow-bg); }
.drawer-metric.danger { border-color: rgba(227,96,96,.34); background: var(--rico-red-bg); }
.drawer-metric.muted { opacity: .76; }
.drawer-section {
  border: 1px solid var(--rico-border);
  background: rgba(255,255,255,.018);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-top: 10px;
}
.drawer-section h3 {
  font-size: 13px;
  margin-bottom: 8px;
}
.drawer-note {
  color: var(--rico-muted);
  font-size: 12px;
  line-height: 1.42;
  margin: 6px 0 0;
}
.drawer-table {
  display: grid;
  gap: 4px;
}
.drawer-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.1fr) minmax(100px, 1fr) 58px auto auto;
  gap: 7px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 5px;
  padding: 6px 7px;
  font-size: 11px;
  color: var(--rico-muted);
}
.drawer-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-row-head {
  color: var(--rico-faint);
  background: rgba(255,255,255,.025);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 900;
  font-size: 9px;
}
.role-detail-table .drawer-row { grid-template-columns: minmax(126px, 1.1fr) minmax(90px, .9fr) 54px 76px minmax(84px, .85fr); }
.drawer-row em { color: var(--rico-faint); font-style: normal; }
.recommendation-stack {
  display: grid;
  gap: 9px;
}
.recommendation-card {
  border: 1px solid var(--rico-border);
  background: rgba(0,0,0,.14);
  border-radius: var(--radius-sm);
  padding: 9px;
}
.recommendation-card.role-state-warn { border-color: rgba(216,170,61,.22); }
.recommendation-card.role-state-danger { border-color: rgba(227,96,96,.26); }
.recommendation-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.recommendation-head strong { font-size: 12px; }
.recommendation-head em { color: var(--rico-faint); font-style: normal; }
.candidate-list {
  display: grid;
  gap: 4px;
}
.candidate-row {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) 42px 50px minmax(86px, 1fr) minmax(90px, 1fr);
  gap: 6px;
  align-items: center;
  color: var(--rico-muted);
  font-size: 10.5px;
  border-top: 1px solid rgba(255,255,255,.055);
  padding-top: 5px;
}
.candidate-name {
  color: var(--rico-text);
  font-weight: 800;
}
.badge.recommended { background: var(--rico-green-bg); color: var(--rico-green); border-color: rgba(69,196,123,.35); }
.badge.alternative { background: var(--rico-blue-bg); color: var(--rico-blue); border-color: rgba(94,156,255,.35); }
body.drawer-open { overflow: hidden; }

@media (max-width: 900px) {
  .drawer-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-drawer { width: min(520px, 100vw); }
  .drawer-row,
  .role-detail-table .drawer-row,
  .candidate-row { grid-template-columns: 1fr; gap: 4px; }
  .drawer-row-head { display: none; }
}


/* v0.4.6 role visibility correction
   Every OC/job block must render every role row, including empty/open/ignored rows.
   Lane height is now driven by the role count in the block instead of clipping rows. */
.oc-block .oc-role-list {
  flex: 1 0 auto;
}
.oc-block.marker-only .oc-block-header {
  padding-bottom: 6px;
}
.oc-block.marker-only .oc-role-list {
  margin-top: 7px;
}
.oc-block.marker-only::after {
  content: "marker";
}

/* v0.4.7 priority sorting and manager-decision states
   OC/job lanes are sorted by operational priority:
   1 planning/ready, 2 actionable recruiting, 3 manager undecided, 4 ignored. */
.sort-line {
  display: inline-flex;
  align-items: center;
  min-height: 17px;
  margin: 0 0 7px;
  padding: 2px 6px;
  border: 1px solid var(--rico-border);
  border-radius: 999px;
  font-family: var(--rico-mono);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--rico-muted);
  background: rgba(255,255,255,.035);
}
.sort-line.sort-danger { border-color: rgba(227,96,96,.44); background: var(--rico-red-bg); color: #ffdcdc; }
.sort-line.sort-warn { border-color: rgba(216,170,61,.44); background: var(--rico-yellow-bg); color: #fff0c2; }
.sort-line.sort-good { border-color: rgba(69,196,123,.36); background: var(--rico-green-bg); color: #dff9ea; }
.sort-line.sort-neutral { border-color: rgba(94,156,255,.36); background: var(--rico-blue-bg); color: #e6f0ff; }
.sort-line.sort-muted { border-color: rgba(148,163,184,.24); background: rgba(148,163,184,.08); color: var(--rico-muted); }

.timeline-row.sorted-danger .timeline-label { box-shadow: inset var(--status-width) 0 0 rgba(227,96,96,.90); }
.timeline-row.sorted-warn .timeline-label { box-shadow: inset var(--status-width) 0 0 rgba(216,170,61,.80); }
.timeline-row.sorted-good .timeline-label { box-shadow: inset var(--status-width) 0 0 rgba(69,196,123,.75); }
.timeline-row.sorted-neutral .timeline-label { box-shadow: inset var(--status-width) 0 0 rgba(94,156,255,.72); }
.timeline-row.sorted-muted .timeline-label { box-shadow: inset var(--status-width) 0 0 rgba(148,163,184,.42); }

.oc-undecided-bg {
  width: 100%;
  background: linear-gradient(180deg, rgba(94,156,255,.14), rgba(94,156,255,.06));
}
.oc-block.marker-undecided {
  border-style: solid dashed dashed solid;
  border-color: rgba(94,156,255,.30);
  background: rgba(94,156,255,.08);
}
.oc-block.marker-undecided::after { content: "decide"; }
.oc-block.state-neutral { border-color: rgba(94,156,255,.34); box-shadow: inset var(--status-width) 0 0 rgba(94,156,255,.72); }
.oc-role-row.role-state-neutral,
.drawer-row.role-state-neutral { background: rgba(94,156,255,.055); }
.badge.undecided { border-color: rgba(94,156,255,.36); background: var(--rico-blue-bg); color: #e6f0ff; }