/* Sagara v2 — layout. Layer 3 of 5: the shell and page frames. */

/* --- skip link: first focus stop, invisible until focused --------------- */
.skip-link { position: absolute; left: var(--s3); top: -40px; z-index: 100; padding: 8px 12px;
  background: var(--accent-strong); color: var(--on-accent); border-radius: var(--r-sm); }
.skip-link:focus { top: var(--s2); }

/* --- the bar: brand, workspace switch, places, search, ask, theme ------- */
.bar {
  position: sticky; top: 0; z-index: 50;
  height: var(--bar-h);
  display: flex; align-items: center; gap: var(--s5);
  padding: 0 var(--s5);
  background: var(--surface-1);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink); font-weight: 600; font-size: 15px; letter-spacing: 0.01em;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand svg { width: 22px; height: 22px; color: var(--accent); }

.ws-switch { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 2px; margin-left: calc(-1 * var(--s2)); }
.ws-switch a { padding: 3px 10px; border-radius: var(--r-sm); color: var(--ink-3); font-size: var(--t-sm); font-weight: 500; }
.ws-switch a:hover { color: var(--ink); text-decoration: none; }
.ws-switch a[aria-current="true"] { background: var(--surface-3); color: var(--ink); }
.places { display: flex; align-items: stretch; height: 100%; gap: 2px; }
.places a {
  display: flex; align-items: center; padding: 0 12px;
  color: var(--ink-3); font-weight: 500; font-size: var(--t-md);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.places a:hover { color: var(--ink); text-decoration: none; }
.places a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.bar-end { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }

/* --- page frames --------------------------------------------------------- */
.page { max-width: var(--page-max); margin: 0 auto; padding: var(--s5) var(--s5) var(--s7); }
.page-wide { padding: 0; }

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5);
}
.page-head .eyebrow { margin-bottom: 4px; }
.page-head p { color: var(--ink-3); margin: 6px 0 0; max-width: var(--read-max); }
.page-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* A full-bleed chart with an overlay column: Overview and Offshore. */
.chart-frame {
  position: relative;
  height: calc(100vh - var(--bar-h));
  min-height: 520px;
}
.chart-frame .chart { position: absolute; inset: 0; }
.chart-side {
  position: absolute; top: var(--s4); left: var(--s4); bottom: var(--s4);
  width: 380px; max-width: calc(100% - 2 * var(--s4));
  display: flex; flex-direction: column; gap: var(--s3);
  overflow: auto; z-index: 5;
  pointer-events: none;
}
.chart-side > * { pointer-events: auto; }

.split { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.split-3 { display: grid; gap: var(--s4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stack { display: flex; flex-direction: column; gap: var(--s4); }
.row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.section-gap { margin-top: var(--s5); }

.foot {
  max-width: var(--page-max); margin: 0 auto; padding: var(--s4) var(--s5) var(--s6);
  color: var(--ink-4); font-size: var(--t-xs); border-top: 1px solid var(--line);
  display: flex; gap: var(--s4); flex-wrap: wrap; justify-content: space-between;
}
.foot strong { color: var(--ink-3); font-weight: 600; }

/* --- narrow screens ------------------------------------------------------ */
@media (max-width: 1100px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .bar { gap: var(--s3); padding: 0 var(--s4); overflow-x: auto; }
  .brand span { display: none; }
  .places a { padding: 0 8px; }
  .bar-end .label { display: none; }
  .page { padding: var(--s4) var(--s4) var(--s6); }
  .chart-frame { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .chart-frame .chart { position: relative; height: 60vh; inset: auto; }
  .chart-side { position: static; width: auto; max-width: none; padding: var(--s4); overflow: visible; }
}

/* --- the bar keeps its own controls on every page -------------------------------
   v1 pages style every <button> and .btn; these rules are more specific so the bar
   reads the same in both shells. */
.bar .btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
  border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface-2);
  color: var(--ink); font: 500 var(--t-sm) / 1 var(--sans); box-shadow: none; cursor: pointer; }
.bar .btn:hover { background: var(--surface-3); }
.bar .btn.quiet { background: transparent; border-color: transparent; color: var(--ink-2); }
.bar .btn.quiet:hover { background: var(--surface-2); color: var(--ink); }
.bar .btn svg { width: 15px; height: 15px; }
.bar .kbd-hint { color: var(--ink-4); font-family: var(--mono); font-size: var(--t-xs); }
.bar a.brand { color: var(--ink); }
.bar .brand svg { width: 22px; height: 22px; color: var(--accent); }
.bar .alerts-btn { position: relative; }
.bar .alerts-n { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--finding); color: var(--on-accent); font: 600 10px/16px var(--mono); text-align: center; }