/* src/harness/shell.css — preview chrome ONLY. Never shipped.
   Quiet by default: everything dims when the mouse is off chrome; hovering a region brightens
   its text, with selected/active items always a step brighter than non-selected.
   Self-hosted Roboto (offline-safe, no CDN). */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/roboto-700.woff2") format("woff2");
}

.hs, .hs * { box-sizing: border-box; }

.hs {
  --hs-bg: #1b2027;
  --hs-panel: #222a34;
  --hs-line: #313a46;
  --hs-accent: #5b9dff;
  /* text brightness tiers */
  --hs-ink: #e9edf3;         /* hovered + selected  (brightest) */
  --hs-ink-mid: #9aa4b2;     /* hovered + non-selected */
  --hs-ink-off: #737d8c;     /* mouse off + selected/active */
  --hs-ink-off-dim: #535c69; /* mouse off + non-selected (dimmest) */

  font-family: "Roboto", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  color: var(--hs-ink-off);
  background: #0f1115;
  height: 100vh;
  display: grid;
  grid-template-rows: auto auto 1fr;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "utils utils"
    "top   top"
    "side  main";
}
.hs[data-chrome="off"] { grid-template-columns: 0 1fr; grid-template-rows: auto 0 1fr; }
.hs[data-chrome="off"] .hs-top, .hs[data-chrome="off"] .hs-side { display: none; }
/* full-bleed review mode: iframe fills edge-to-edge below the utility bar */
.hs[data-chrome="off"] .hs-stage { padding: 0; }
.hs[data-chrome="off"] .hs-frame-wrap { height: 100%; }
.hs[data-chrome="off"] .hs-frame { height: 100%; border: 0; border-radius: 0; box-shadow: none; }

/* per-region brightness: dim when idle, bright on hover; --_t = selected/active, --_t2 = non-selected */
.hs-utils, .hs-top, .hs-side { --_t: var(--hs-ink-off); --_t2: var(--hs-ink-off-dim); }
.hs-utils:hover, .hs-top:hover, .hs-side:hover { --_t: var(--hs-ink); --_t2: var(--hs-ink-mid); }

/* utilities bar — very top, full width, items right-aligned */
.hs-utils {
  grid-area: utils;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end;
  padding: 8px 12px; background: var(--hs-bg); border-bottom: 1px solid var(--hs-line);
  font-size: 12px;
}
.hs-utils label { color: var(--_t); display: inline-flex; gap: 5px; align-items: center; transition: color .18s ease; }
.hs-utils select, .hs-utils button {
  background: var(--hs-panel); color: var(--_t); border: 1px solid var(--hs-line);
  border-radius: 6px; padding: 4px 8px; font: inherit; font-size: 12px; cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.hs-utils select:hover, .hs-utils button:hover { color: var(--hs-ink); border-color: var(--hs-accent); }
.hs-utils button[aria-pressed="true"] { color: var(--hs-ink); border-color: var(--hs-accent); background: #223049; }

/* category (top) nav — left-aligned */
.hs-top {
  grid-area: top;
  display: flex; align-items: center; gap: 4px;
  padding: 8px 12px; background: var(--hs-bg); border-bottom: 1px solid var(--hs-line);
  overflow-x: auto;
}
.hs-top button {
  background: transparent; border: 1px solid transparent; color: var(--_t2);
  padding: 6px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; font: inherit; font-size: 12px;
  transition: color .18s ease;
}
.hs-top button[aria-selected="true"] { color: var(--_t); background: var(--hs-panel); border-color: var(--hs-line); }

/* item (side) nav */
.hs-side {
  grid-area: side;
  background: var(--hs-panel);
  border-right: 1px solid var(--hs-line);
  overflow-y: auto;
  padding: 8px;
}
.hs-side button {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--_t2);
  padding: 7px 10px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 12px;
  transition: color .18s ease;
}
.hs-side button[aria-current="true"] { color: var(--_t); background: #2b333f; }
.hs-empty { color: var(--hs-ink-off-dim); padding: 10px; font-size: 12px; }
.hs-group {
  margin: 12px 0 2px; padding: 0 10px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--hs-ink-off-dim);
}
.hs-group:first-child { margin-top: 0; }

/* main / stage */
.hs-main { grid-area: main; display: grid; grid-template-rows: 1fr; min-width: 0; min-height: 0; }
.hs-stage { overflow: auto; padding: 20px; display: grid; place-items: start center; background: #0f1115; min-height: 0; }
.hs-frame-wrap { width: 100%; transition: width 160ms ease; }
.hs-frame {
  width: 100%; height: min(80vh, 900px); border: 1px solid var(--hs-line);
  border-radius: 8px; background: #fff; box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}
.hs-toast {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: var(--hs-accent); color: #06122b; padding: 8px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 700; opacity: 0; transition: opacity 200ms; pointer-events: none;
}
.hs-toast[data-show="true"] { opacity: 1; }

/* show-HTML modal */
.hs-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(6, 8, 12, 0.66);
  display: grid; place-items: center; padding: 24px;
}
.hs-modal[hidden] { display: none; }
.hs-modal-panel {
  width: min(920px, 100%); max-height: 84vh; display: flex; flex-direction: column;
  background: var(--hs-panel); border: 1px solid var(--hs-line); border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5); overflow: hidden;
}
.hs-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: var(--hs-bg); border-bottom: 1px solid var(--hs-line);
}
.hs-modal-title { font-size: 12px; letter-spacing: 0.04em; color: var(--hs-ink); }
.hs-modal-actions { display: flex; gap: 6px; }
.hs-modal-actions button {
  background: var(--hs-panel); color: var(--hs-ink); border: 1px solid var(--hs-line);
  border-radius: 6px; padding: 5px 12px; font: inherit; font-size: 12px; cursor: pointer;
}
.hs-modal-actions #hs-modal-copy { border-color: var(--hs-accent); color: var(--hs-accent); }
.hs-modal-code {
  margin: 0; padding: 16px; overflow: auto; flex: 1;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 400;
  font-size: 12px; line-height: 1.6; color: var(--hs-ink); white-space: pre; tab-size: 2;
}