/* ═══════════════════════════════════════════════════════════════════
   Oxalis — Dashboard Styles (FSI module + shared shell)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --bg: #f8f8f8; --card: #ffffff; --border: #d4d4d4; --text: #111111; --muted: #666666;
  --accent: #0c4a6e; --green: #15803d; --red: #b91c1c; --blue: #1d4ed8; --cyan: #0e7490;
  --purple: #7e22ce; --orange: #c2410c; --yellow: #a16207;
  --green-bg: #dcfce7; --red-bg: #fee2e2; --blue-bg: #dbeafe; --cyan-bg: #cffafe;
  --purple-bg: #f3e8ff; --orange-bg: #fff7ed;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; }
@media (min-width:2560px) { html { font-size:18px; } }
@media (min-width:3200px) { html { font-size:20px; } }
@media (min-width:3840px) { html { font-size:22px; } }

/* Body is a flex column so the grid/detail area sizes itself relative
   to the header + stats + tabs rather than a fragile calc(100vh - Npx)
   offset that drifts every time we adjust header padding.
   overflow:hidden on BOTH html and body — spec says body's overflow
   propagates to the viewport when html is 'visible', but Chrome on
   Windows sometimes leaks a sub-pixel outer scrollbar in maximised
   mode anyway. Setting it on the root is the belt-and-braces fix. */
html, body { height:100vh; overflow:hidden; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--text); font-size:0.875em; line-height:1.5; -webkit-font-smoothing:antialiased; display:flex; flex-direction:column; }
body > header, body > .stats-bar, body > .tabs { flex-shrink:0; }
body > .content { flex:1; min-height:0; display:flex; flex-direction:column; }

/* ── Header ── */
header { background:#1a1a1a; color:white; padding:0.6em 1.2em; display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid #333; }
header h1 { font-size:0.95em; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; }
header .subtitle { font-size:0.7em; opacity:0.5; }
.header-stats { font-size:0.75em; opacity:0.6; font-family:'Consolas','Monaco',monospace; }

/* ── Stats bar ── */
.stats-bar { display:flex; gap:0; background:white; border-bottom:1px solid var(--border); }
.stat { padding:0.5em 1em; font-size:0.75em; font-weight:600; border-right:1px solid var(--border); }
.stat:last-child { border-right:none; }
.stat .num { font-size:1.6em; font-weight:800; display:block; line-height:1.2; }

/* ── Tabs ── */
.tabs { display:flex; gap:0; padding:0; background:white; border-bottom:2px solid var(--border); }
.tab { padding:0.5em 1.1em; cursor:pointer; font-size:0.8em; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-2px; text-transform:uppercase; letter-spacing:0.3px; }
.tab:hover { color:var(--text); background:#f0f0f0; }
.tab.active { color:var(--text); border-bottom-color:var(--accent); background:#f0f8ff; }
.tab-sep { width:1px; background:var(--border); margin:0.4em 0.3em; }

/* ── Panels & Layout ── */
.content { padding:0; }
.panel { display:none; }
.panel.active { display:block; }
/* .content is now a flex column (see body rule above) that fills the
   remaining viewport after header + stats + tabs. .main-area becomes
   flex:1 inside it, so the grid column + detail pane automatically
   claim whatever height is left — no magic pixel offset. */
.main-area { display:flex; flex:1; min-height:0; }
.main-area .grid-column { flex:2; min-width:0; overflow:hidden; display:flex; flex-direction:column; }
.main-area .grid-column .panel.active { display:flex; flex-direction:column; flex:1; min-height:0; }
/* Graph tab lives at .content > .panel#panel-graph (sibling of main-area).
   When active it also needs to claim the remaining flex space. */
.content > .panel#panel-graph.active { flex:1; min-height:0; display:flex; flex-direction:column; }
/* Splitter inside the graph panel — results list on the left, detail on
   the right. Fills whatever vertical space the panel has left after the
   toolbar; children each scroll internally. No 100vh calc. */
.graph-splitter { display:flex; gap:0; flex:1; min-height:0; }
/* The <div id="grid-demand"> etc. that buildGrid() writes into lives
   INSIDE panel.active. It also needs to be a flex column so that
   .grid-wrap's flex:1 / min-height:0 / overflow-y:auto can actually
   take effect — otherwise .grid-wrap expands to its content's full
   height, pushing .grid-pag below .grid-column's overflow:hidden clip
   and the pagination bar disappears. */
.main-area .grid-column .panel.active > div { display:flex; flex-direction:column; flex:1; min-height:0; }

/* ── Grid toolbar ── */
.grid-toolbar { display:flex; align-items:center; gap:0.6em; padding:0.5em 0.75em; background:#f5f5f5; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.grid-search { border:1px solid #bbb; padding:0.3em 0.6em; font-size:0.8em; width:16em; font-family:inherit; outline:none; }
.grid-search:focus { border-color:var(--accent); background:white; }
.grid-search::placeholder { color:#aaa; }
.chip-group { display:flex; gap:2px; flex-wrap:wrap; }
.chip { padding:0.15em 0.5em; font-size:0.7em; font-weight:700; cursor:pointer; border:1px solid #ccc; background:#fff; color:var(--muted); text-transform:uppercase; letter-spacing:0.3px; user-select:none; }
.chip:hover { background:#eee; }
.chip.active { background:var(--accent); color:white; border-color:var(--accent); }
.chip.active-green { background:var(--green); color:white; border-color:var(--green); }
.chip.active-red { background:var(--red); color:white; border-color:var(--red); }
.chip.active-cyan { background:var(--cyan); color:white; border-color:var(--cyan); }
.chip.active-blue { background:var(--blue); color:white; border-color:var(--blue); }
.chip.active-purple { background:var(--purple); color:white; border-color:var(--purple); }
.chip.active-orange { background:var(--orange); color:white; border-color:var(--orange); }
.chip.active-yellow { background:var(--yellow); color:white; border-color:var(--yellow); }
.grid-count { font-size:0.7em; color:var(--muted); margin-left:auto; white-space:nowrap; font-weight:600; }
.page-size-label { font-size:0.7em; color:var(--muted); font-weight:700; letter-spacing:0.3px; text-transform:uppercase; display:flex; align-items:center; gap:0.3em; white-space:nowrap; }
.page-size { font-size:0.75em; font-weight:600; border:1px solid #bbb; background:white; padding:0.1em 0.3em; font-family:inherit; cursor:pointer; color:var(--text); }
.page-size:hover { border-color:var(--accent); }
.page-size:focus { outline:none; border-color:var(--accent); }
.chip-sep { width:1px; height:1.2em; background:#ccc; margin:0 0.2em; }
.grid-wrap { flex:1; min-height:0; overflow-y:auto; }

/* ── Table ── */
table { width:100%; border-collapse:collapse; background:var(--card); }
thead { position:sticky; top:0; z-index:2; }
th { text-align:left; padding:0.4em 0.75em; font-size:0.7em; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#555; background:#ececec; border-bottom:2px solid var(--border); border-right:1px solid #e0e0e0; white-space:nowrap; user-select:none; }
th:last-child { border-right:none; }
th.sortable { cursor:pointer; }
th.sortable:hover { background:#ddd; color:var(--text); }
th .sort-arrow { display:inline-block; width:0.8em; text-align:center; color:#999; margin-left:0.2em; }
th.sort-asc .sort-arrow { color:var(--text); }
th.sort-desc .sort-arrow { color:var(--text); }
td { padding:0.4em 0.75em; border-bottom:1px solid #e8e8e8; font-size:0.85em; vertical-align:top; border-right:1px solid #f0f0f0; }
td:last-child { border-right:none; }
tr:hover td { background:#f5f8fc; }
tr:nth-child(even) td { background:#fafafa; }
tr:nth-child(even):hover td { background:#f0f4f8; }

/* ── Badges ── */
.badge { display:inline-block; padding:0.1em 0.4em; font-size:0.75em; font-weight:700; white-space:nowrap; border:1px solid; }
.badge-green { background:var(--green-bg); color:var(--green); border-color:#a7f3d0; }
.badge-red { background:var(--red-bg); color:var(--red); border-color:#fecaca; }
.badge-blue { background:var(--blue-bg); color:var(--blue); border-color:#bfdbfe; }
.badge-cyan { background:var(--cyan-bg); color:var(--cyan); border-color:#a5f3fc; }
.badge-purple { background:var(--purple-bg); color:var(--purple); border-color:#e9d5ff; }
.badge-orange { background:var(--orange-bg); color:var(--orange); border-color:#fed7aa; }

/* ── Regulator badges (FCA / SCA / DFSA) ──
   Rendered as a compact strip under detail-title on person and firm
   panes. Clicking does nothing (display only) — they're a visual
   index of which regulators have records for this entity, so a
   Barclays card showing both FCA and DFSA tells the recruiter "this
   firm has UK + DIFC presence" at a glance. Colour-coding matches
   the /mappings page's column ordering:
     FCA  — accent blue (UK/home)
     SCA  — green (UAE onshore)
     DFSA — purple (DIFC free zone)
*/
.regulator-badges { display:flex; gap:0.3em; margin:-0.2em 0 0.6em 0; flex-wrap:wrap; }
.regulator-badge { display:inline-block; padding:0.15em 0.5em; font-size:0.7em; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; border:1px solid; font-family:"SF Mono", Menlo, Consolas, monospace; }
.regulator-badge-fca  { color:#0c4a6e; background:#dbeafe; border-color:#bfdbfe; }
.regulator-badge-sca  { color:var(--green); background:var(--green-bg); border-color:#a7f3d0; }
.regulator-badge-dfsa { color:var(--purple); background:var(--purple-bg); border-color:#e9d5ff; }
/* In a grid cell, the badge container should sit flush — the negative
   top + 0.6em bottom margin above are tuned for the detail-pane title
   context (where the badges hang under the H2). */
td .regulator-badges { margin: 0; }

/* ── Version pill (footer-right) + release-notes modal ──
   Anchored to the bottom-right of the viewport, deliberately
   subtle — Bloomberg-terminal energy. Clickable to surface the
   CHANGELOG.md modal.
*/
.version-pill {
  position: fixed;
  right: 0.75em;
  bottom: 0.5em;
  z-index: 50;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 0.2em 0.55em;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  opacity: 0.7;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
.version-pill:hover {
  opacity: 1;
  color: var(--accent);
  border-color: var(--accent);
}

.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 2em 1em;
}
.modal-card {
  background: var(--card);
  border: 1px solid var(--border);
  width: min(720px, 100%);
  max-height: 80vh;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75em 1em;
  border-bottom: 1px solid var(--border);
  background: #ececec;
}
.modal-header h3 {
  margin: 0; font-size: 0.85em; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px; color: #555;
}
.modal-close {
  background: transparent; border: none; cursor: pointer;
  font-size: 1.4em; line-height: 1; padding: 0 0.3em;
  color: var(--muted);
}
.modal-close:hover { color: var(--text); }

.modal-body {
  padding: 1em 1.25em;
  overflow-y: auto;
  font-size: 0.875em;
  line-height: 1.55;
}
.modal-body h1, .modal-body h2, .modal-body h3 {
  margin: 0.9em 0 0.4em 0;
  font-weight: 700;
}
.modal-body h1 { font-size: 1.05em; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent); }
.modal-body h2 { font-size: 0.95em; border-bottom: 1px solid var(--border); padding-bottom: 0.2em; }
.modal-body h3 { font-size: 0.85em; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.modal-body p  { margin: 0.4em 0; }
.modal-body ul { margin: 0.3em 0 0.6em 1.4em; padding: 0; }
.modal-body li { margin: 0.15em 0; }
.modal-body hr { border: 0; border-top: 1px solid var(--border); margin: 1em 0; }
.modal-body code {
  background: var(--bg);
  padding: 0.05em 0.35em;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  border: 1px solid var(--border);
}
.modal-body .muted { color: var(--muted); font-style: italic; }

.net-pos { color:var(--green); font-weight:800; }
.net-neg { color:var(--red); font-weight:800; }
.net-zero { color:var(--muted); }
.signal-tag { display:inline-block; padding:0.1em 0.35em; font-size:0.65em; font-weight:800; margin-right:0.2em; border:1px solid; }
.signal-ALGO_DESK { background:#fef9c3; color:var(--yellow); border-color:#fde68a; }
.signal-LEADERSHIP_BUILD { background:var(--purple-bg); color:var(--purple); border-color:#e9d5ff; }
.signal-RAPID_GROWTH { background:var(--green-bg); color:var(--green); border-color:#a7f3d0; }
.people-list { margin:0.15em 0 0 0; padding:0; list-style:none; }
.people-list li { font-size:0.8em; color:var(--text); padding:0.15em 0; border-bottom:1px dotted #e8e8e8; }
.people-list li:last-child { border-bottom:none; }
.people-list .name { font-weight:600; }
.people-list .date-ago { color:var(--muted); font-size:0.9em; margin-left:0.3em; }
.clickable { cursor:pointer; color:var(--accent); text-decoration:none; font-weight:600; }
.clickable:hover { text-decoration:underline; }

/* ── Tenure-band badges (recruiter-facing seniority bucketing) ──
   Four bands escalate visually so a recruiter scanning a list sees
   the higher-value candidates first. Junior is grey (subtle, not a
   signal in itself), then blue → orange → purple as tenure rises.
   See `stageBadge()` in templates.js for the rendered text format
   ("8Y MID", "24Y VETERAN" etc).
*/
.badge-stage   { font-size:0.65em; font-family:"SF Mono", Menlo, Consolas, monospace; }
.stage-junior  { background:#f5f5f5;          color:var(--muted);  border-color:#d4d4d4; }
.stage-mid     { background:var(--blue-bg);   color:var(--blue);   border-color:#bfdbfe; }
.stage-senior  { background:var(--orange-bg); color:var(--orange); border-color:#fed7aa; }
.stage-veteran { background:var(--purple-bg); color:var(--purple); border-color:#e9d5ff; }

/* ── Detail pane ── */
.detail-pane { flex:1; min-width:280px; max-width:450px; border-left:2px solid var(--border); background:var(--bg); overflow:hidden; display:flex; flex-direction:column; }
.detail-header { display:flex; align-items:center; gap:0.3em; padding:0.35em 0.6em; background:#ececec; border-bottom:1px solid var(--border); }
.detail-back { border:none; background:none; cursor:pointer; font-size:1.1em; color:var(--accent); padding:0.15em 0.35em; font-weight:700; }
.detail-back:hover { background:#dbeafe; }
.detail-close { border:none; background:none; cursor:pointer; font-size:1.2em; color:var(--muted); margin-left:auto; padding:0.15em 0.35em; }
.detail-close:hover { color:var(--red); }
.detail-breadcrumb { font-size:0.75em; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.detail-body { flex:1; overflow-y:auto; padding:0.75em; }
.detail-title { font-size:0.85em; font-weight:700; margin-bottom:0.6em; text-transform:uppercase; letter-spacing:0.5px; border-bottom:2px solid var(--border); padding-bottom:0.4em; }
.detail-empty { text-align:center; color:var(--muted); font-style:italic; padding:3em 1em; font-size:0.85em; }
.bc-item { cursor:pointer; color:var(--accent); }
.bc-item:hover { text-decoration:underline; }
.bc-current { color:var(--text); }
.bc-sep { color:var(--muted); margin:0 0.15em; }

/* ── Timeline (in detail pane) ── */
.timeline-item { display:flex; gap:0.6em; padding:0.35em 0; border-bottom:1px dotted #e0e0e0; }
.timeline-item:last-child { border-bottom:none; }
.tl-date { min-width:6.5em; font-size:0.78em; color:var(--muted); white-space:nowrap; }
.tl-ago { display:block; font-size:0.85em; color:#aaa; }
.tl-detail { font-size:0.82em; flex:1; }
.tl-toggle { cursor:pointer; display:inline-block; transition:transform 0.15s; font-size:0.7em; margin-right:0.3em; color:var(--muted); }
.tl-toggle.open { transform:rotate(90deg); }
.tl-entity-count { font-size:0.75em; color:var(--muted); }
.tl-sub-items { display:none; margin-left:7.5em; padding:0.2em 0 0.2em 0.8em; border-left:2px solid #e0e0e0; font-size:0.78em; color:var(--muted); }
.tl-sub-items.open { display:block; }
.tl-sub-item { padding:0.15em 0; }

/* ── Company detail (in detail pane) ── */
.company-stats { display:flex; gap:0; border:1px solid var(--border); margin-bottom:0.75em; }
.company-stat { padding:0.35em 0.5em; font-size:0.7em; font-weight:600; border-right:1px solid var(--border); flex:1; text-align:center; }
.company-stat:last-child { border-right:none; }
.company-stat .num { font-size:1.3em; font-weight:800; display:block; line-height:1.2; }

/* ── Grid pagination ── */
.grid-pag { display:flex; align-items:center; justify-content:center; gap:0.5em; padding:0.4em; background:#f5f5f5; border-top:1px solid var(--border); }
.pag-info { font-size:0.75em; color:var(--muted); font-weight:600; }
.grid-loading { text-align:center; padding:2em; color:var(--muted); font-style:italic; }

/* ── Buttons ── */
.btn { border:1px solid #999; background:#fff; padding:0.25em 0.7em; font-size:0.75em; font-weight:600; cursor:pointer; font-family:inherit; }
.btn:hover { background:#eee; }
.btn:disabled { opacity:0.4; cursor:not-allowed; }
.btn-primary { background:var(--accent); color:white; border-color:var(--accent); }
.btn-primary:hover { background:#0a3d5c; }
.btn-danger { background:var(--red); color:white; border-color:var(--red); }
.btn-danger:hover { background:#991b1b; }

/* ── Date range ── */
.date-range { display:flex; align-items:center; gap:4px; font-size:0.75em; }
.date-range label { color:var(--muted); font-weight:600; }
.date-range input { border:1px solid #bbb; padding:0.2em 0.4em; font-size:0.9em; font-family:inherit; }

/* ── Graph explorer ── */
.graph-entity { padding:0.5em 0.75em; border-bottom:1px solid #eee; cursor:pointer; }
.graph-entity:hover { background:#f5f8fc; }
.graph-entity.selected { background:#dbeafe; border-left:3px solid var(--accent); }
.ge-name { font-weight:700; font-size:0.9em; }
.ge-type { font-size:0.65em; text-transform:uppercase; color:var(--muted); margin-left:0.5em; font-weight:700; }
.ge-meta { font-size:0.75em; color:var(--muted); }
.graph-detail-card { background:white; border:1px solid var(--border); padding:0.75em 1em; margin-bottom:0.75em; }
.graph-detail-card h3 { font-size:0.8em; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:0.5em; border-bottom:1px solid var(--border); padding-bottom:0.3em; }
.graph-attr-table { width:100%; border-collapse:collapse; font-size:0.85em; }
.graph-attr-table td { padding:0.2em 0.5em; border-bottom:1px solid #eee; }
.graph-attr-table td:first-child { font-weight:600; color:var(--muted); width:30%; text-transform:uppercase; font-size:0.85em; }
.graph-connected { display:inline-block; padding:0.15em 0.5em; margin:0.15em; border:1px solid #ddd; font-size:0.85em; cursor:pointer; font-weight:600; color:var(--accent); }
.graph-connected:hover { background:#f0f8ff; border-color:var(--accent); }
.gc-type { font-size:0.7em; color:var(--muted); font-weight:400; margin-left:0.3em; }

/* ── Cluster explorer ── */
.cluster-card { border:1px solid var(--border); background:white; margin:0.3em 0.5em; padding:0.5em 0.75em; cursor:pointer; }
.cluster-card:hover { border-color:var(--accent); }
.cluster-name { font-weight:700; font-size:0.85em; }
.cluster-meta { font-size:0.7em; color:var(--muted); margin-top:0.15em; }
.cluster-members { display:none; margin-top:0.4em; padding-top:0.4em; border-top:1px dotted #ddd; }
.cluster-members.open { display:block; }
.cluster-member { padding:0.2em 0; font-size:0.8em; color:var(--accent); cursor:pointer; font-weight:600; }
.cluster-member:hover { text-decoration:underline; }

/* ── Control panel ── */
.control-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; padding:12px; }
.control-card { background:white; border:1px solid var(--border); padding:10px 14px; }
.control-card h3 { font-size:0.8em; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; }
.control-card p { font-size:0.75em; color:var(--muted); margin-bottom:8px; }
.control-actions { padding:6px 12px; display:flex; gap:6px; flex-wrap:wrap; }
.control-log { background:#1a1a1a; color:#ccc; font-family:'Consolas','Monaco',monospace; font-size:0.7em; padding:10px 14px; margin:0 12px 12px; max-height:300px; overflow-y:auto; white-space:pre-wrap; line-height:1.6; }
.log-err { color:#f87171; }
.log-ok { color:#4ade80; }
.log-info { color:#60a5fa; }
.status-indicator { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.status-ok { background:#22c55e; }
.status-warn { background:#f59e0b; }
.status-off { background:#999; }

/* ── Empty state ── */
.empty-state { text-align:center; color:var(--muted); font-style:italic; padding:2em; }

/* ── Mobile nav toggle (hidden on desktop) ── */
.mobile-nav-toggle { display:none; background:transparent; border:1px solid #475569; color:#e2e8f0; padding:0.3em 0.5em; cursor:pointer; font-size:1em; line-height:1; }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE — phones + small tablets (≤768px)
   Keep data density: horizontal scroll on tables, overlay detail pane,
   compact touch targets. No information is hidden — just reflowed.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html, body { height:100dvh; }

  /* ── Header ── */
  header { padding:0.4em 0.7em; gap:0.3em; }
  header h1 { font-size:0.85em; }
  header .subtitle { display:none; }
  .header-stats { font-size:0.7em; gap:0.3em 0.6em; display:flex; align-items:center; flex-wrap:wrap; }
  .mobile-nav-toggle { display:inline-block; }
  .header-stats.nav-collapsed { display:none; }

  /* ── Stats bar ── */
  .stats-bar { flex-wrap:wrap; }
  .stat { padding:0.3em 0.5em; font-size:0.68em; flex:1 1 auto; min-width:0; text-align:center; }
  .stat .num { font-size:1.3em; }

  /* ── Tabs — horizontal scroll, touch-sized ── */
  .tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .tabs::-webkit-scrollbar { display:none; }
  .tab { white-space:nowrap; padding:0.55em 0.75em; font-size:0.72em; min-height:44px; display:flex; align-items:center; }

  /* ── Main area — single column, position context for detail overlay ── */
  .main-area { flex-direction:column; position:relative; }
  .main-area .grid-column { flex:1; }

  /* ── Detail pane — overlay within the content area on mobile ──
     Covers the grid area but leaves header + tabs accessible so the
     user can switch tabs (which clears the detail pane). */
  .detail-pane { display:none; position:absolute; inset:0; z-index:40; max-width:none; min-width:0; border-left:none; background:var(--bg); }
  body.detail-open .detail-pane { display:flex; }

  /* ── Grid toolbar ── */
  .grid-toolbar { gap:0.35em; padding:0.4em 0.5em; }
  .grid-search { width:100%; min-width:0; font-size:0.85em; min-height:36px; padding:0.35em 0.6em; }
  .chip { padding:0.25em 0.5em; font-size:0.68em; min-height:32px; display:inline-flex; align-items:center; }
  .chip-group { gap:3px; }
  .date-range { width:100%; }
  .date-range input { min-height:36px; font-size:0.85em; }
  .grid-count { font-size:0.65em; }
  .page-size-label { font-size:0.65em; }

  /* ── Table — horizontal scroll, compact ── */
  .grid-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table { min-width:580px; }
  th { padding:0.3em 0.5em; font-size:0.62em; }
  td { padding:0.3em 0.5em; font-size:0.78em; }

  /* ── Pagination ── */
  .grid-pag { gap:0.25em; padding:0.3em; flex-wrap:wrap; }
  .pag-info { font-size:0.68em; }
  .btn { min-height:36px; padding:0.3em 0.55em; font-size:0.72em; }

  /* ── Detail pane internals ── */
  .detail-header { padding:0.5em 0.7em; min-height:44px; }
  .detail-back { min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; }
  .detail-close { min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; }
  .detail-body { padding:0.6em; }
  .company-stats { flex-wrap:wrap; }
  .company-stat { min-width:45%; flex:1 1 45%; }

  /* ── Timeline ── */
  .timeline-item { gap:0.3em; }
  .tl-date { min-width:5em; font-size:0.7em; }
  .tl-sub-items { margin-left:5.5em; }

  /* ── Graph explorer ── */
  .graph-splitter { flex-direction:column; }
  .graph-splitter > div { width:100% !important; }
  #graph-results { max-height:200px; border-right:none !important; border-bottom:2px solid var(--border); }

  /* ── Modal — near full-screen ── */
  .modal-overlay { padding:0.5em; }
  .modal-card { width:100%; max-height:95vh; }
  .modal-body { padding:0.7em 0.9em; }

  /* ── Version pill ── */
  .version-pill { font-size:0.6em; right:0.4em; bottom:0.3em; }

  /* ── Control panel ── */
  .control-grid { grid-template-columns:1fr; padding:8px; gap:8px; }
  .control-log { margin:0 8px 8px; font-size:0.65em; }
}

/* ═══════════════════════════════════════════════════════════════════
   TABLET — medium screens (769px–1024px)
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  .detail-pane { min-width:220px; max-width:300px; }
  .grid-toolbar { gap:0.4em; }
  .tab { padding:0.5em 0.85em; font-size:0.75em; }
  header .subtitle { font-size:0.6em; }
  .stat { padding:0.35em 0.7em; }
}