/* Static recreation of the Smalti macOS window for the hero.
   Always dark (the app forces darkAqua). Colours are Theme.swift tokens; sizes are the
   app's own points (28 pt panel bars, 9 pt corner radius, 24 pt grid, 270 pt sidebar).
   The window is laid out at 1280x760 and scaled to fit by site.js.
   One deliberate difference: text the app draws in its dim token (#5B6170) uses the mut token (#868D9B) here, so
   the drawing passes WCAG contrast; icons and lines keep the real token. */

.mock-frame {
  --s: 0.84;
  --x: 0px;
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 760;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(0 0 0 / 0.25);
  background: #15171b;
}
@media (max-width: 1100px) { .mock-frame { --s: 0.7; } }
@media (max-width: 900px) { .mock-frame { --s: 0.55; } }
@media (max-width: 680px) {
  .mock-frame { aspect-ratio: 1010 / 760; --x: -270px; --s: 0.36; }
}

.mock {
  position: absolute; left: 0; top: 0;
  width: 1280px; height: 760px;
  transform: scale(var(--s)) translateX(var(--x));
  transform-origin: 0 0;
  display: grid;
  grid-template-columns: 270px 1fr;
  font: 12.5px/1.35 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  color: #dcdfe5;
  background: #15171b;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}
.mock .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* Sidebar (system sidebar material, dark) */
.m-side { background: #1e2024; border-right: 1px solid #0c0d0f; display: flex; flex-direction: column; overflow: hidden; }
.m-lights { height: 52px; display: flex; gap: 8px; align-items: center; padding-left: 20px; flex: none; }
.m-lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.m-lights i:nth-child(2) { background: #febc2e; }
.m-lights i:nth-child(3) { background: #28c840; }
.m-sec { display: flex; align-items: center; gap: 6px; padding: 10px 12px 4px; }
.m-sec b { font-size: 10.5px; font-weight: 600; letter-spacing: 0.9px; color: #868d9b; margin-right: auto; }
.m-sec span { font-size: 11px; color: #868d9b; }
.m-tree { padding: 0 6px 8px; height: 232px; overflow: hidden; }
.m-row { display: flex; align-items: center; gap: 5px; padding: 3px 0 3px 6px; white-space: nowrap; }
.m-row .chev { width: 10px; color: #868d9b; font-size: 8px; text-align: center; }
.m-row svg { width: 12px; height: 12px; flex: none; }
.m-row.dir { color: #dcdfe5; }
.m-row.dir svg { color: #868d9b; }
.m-row.file { color: #868d9b; }
.m-row.file svg { color: #868d9b; }
.m-row.d1 { padding-left: 18px; }
.m-row.d2 { padding-left: 30px; }
.m-split { height: 1px; background: #0c0d0f; flex: none; }
.m-filter {
  margin: 0 10px 6px; height: 22px; border-radius: 5px; background: #2a2c31;
  border: 1px solid #3a3d44; color: #6c717c; font-size: 11.5px; padding: 3px 7px;
}
.m-sessions { padding: 0 6px; overflow: hidden; flex: 1; }
.m-proj { display: flex; align-items: center; gap: 6px; padding: 8px 6px 2px; font-size: 11px; color: #868d9b; }
.m-proj i { width: 7px; height: 7px; border-radius: 2px; }
.m-sess { display: flex; gap: 8px; padding: 5px 6px; border-radius: 5px; }
.m-sess.sel { background: rgb(111 183 168 / 0.18); }
.m-sess > i { width: 7px; height: 7px; border-radius: 50%; background: #5b6170; margin-top: 5px; flex: none; }
.m-sess.live > i { background: #6bc77d; }
.m-sess div { flex: 1; min-width: 0; }
.m-sess p { margin: 0; display: flex; gap: 4px; }
.m-sess p:first-child span:first-child { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-sess .meta, .m-sess .ago { font: 11px ui-monospace, "SF Mono", Menlo, monospace; color: #868d9b; }

/* Detail: toolbar + canvas */
.m-main { display: grid; grid-template-rows: 52px 1fr; min-width: 0; }
.m-toolbar {
  display: flex; align-items: center; gap: 6px; padding: 0 14px;
  background: #1f2126; border-bottom: 1px solid #0c0d0f;
}
.m-seg { display: flex; background: #2a2c31; border-radius: 6px; padding: 2px; margin-right: auto; }
.m-seg span { width: 70px; text-align: center; font-size: 12px; padding: 2px 0; border-radius: 5px; color: #b7bcc6; }
.m-seg span.on { background: #5b5e66; color: #fff; }
.m-tool { display: flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 6px; color: #b7bcc6; font-size: 12px; }
.m-tool svg { width: 14px; height: 14px; }

.m-canvas {
  position: relative; overflow: hidden;
  background-color: #15171b;
  background-image: radial-gradient(circle, #2c313a 0.7px, transparent 1.1px);
  background-size: 24px 24px;
  background-position: 0 0;
}

/* Panels (Panels.swift: panel bg, panelHi bar 32 pt, 1 pt line border, 8 pt radius) */
.p {
  position: absolute;
  background: #1a1d22;
  border: 1px solid #2a2e36;
  border-radius: 8px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.p.focus { border-color: rgb(111 183 168 / 0.6); }
.p.sel { border: 2px solid #6fb7a8; }
.p-bar {
  height: 32px; flex: none; display: flex; align-items: center; gap: 7px;
  padding: 0 6px 0 9px; background: #20242a;
}
.p-bar .t { flex: 1; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-tag {
  font: 500 9.5px/1 ui-monospace, "SF Mono", Menlo, monospace;
  color: #6fb7a8; border: 1px solid rgb(111 183 168 / 0.4); border-radius: 4px;
  padding: 3px 5px 2px;
}
.p-tag.warn { color: #d9a54a; border-color: rgb(217 165 74 / 0.4); }
.p-x { color: #868d9b; font-size: 10px; width: 14px; text-align: center; }
.p-x svg { width: 10px; height: 10px; }
.p-grip {
  position: absolute; right: 0; bottom: 0; width: 14px; height: 14px;
  background:
    linear-gradient(135deg, transparent 6.5px, #5b6170 6.5px, #5b6170 7.5px, transparent 7.5px),
    linear-gradient(135deg, transparent 9.5px, #5b6170 9.5px, #5b6170 10.5px, transparent 10.5px);
  opacity: 0.9;
}

.term {
  flex: 1; background: #121418; margin: 0;
  padding: 4px 6px;
  font: 12.5px/1.42 ui-monospace, "SF Mono", Menlo, monospace;
  color: #dcdfe5; white-space: pre; overflow: hidden;
}
.term-wrap { flex: 1; background: #121418; padding: 4px 6px; display: flex; }
.term-wrap .term { padding: 0; }
.c-mut { color: #868d9b; }
.c-dim { color: #868d9b; }
.c-acc { color: #6fb7a8; }
.c-ok { color: #6bc77d; }
.c-warn { color: #d9a54a; }
.c-add { color: #6bc77d; }
.c-orange { color: #d97757; }
.caret { display: inline-block; width: 7.5px; height: 15px; background: #6fb7a8; vertical-align: -3px; }
.c-box { color: #868d9b; }

/* Graph panel */
.g-wrap { position: relative; flex: 1; background: #15171b; }
.g-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-chips {
  position: absolute; left: 8px; top: 8px; display: flex;
  background: #2a2c31; border-radius: 5px; padding: 1px; z-index: 1;
}
.g-chips span { font-size: 11px; padding: 1px 8px; border-radius: 4px; color: #b7bcc6; }
.g-chips span.on { background: #4a6d66; color: #fff; }
.g-info { position: absolute; left: 10px; bottom: 6px; font: 10.5px ui-monospace, "SF Mono", Menlo, monospace; color: #868d9b; z-index: 1; }

/* Browser panel */
.b-bar { height: 34px; flex: none; display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: #1a1d22; }
.b-bar svg { width: 12px; height: 12px; color: #868d9b; flex: none; }
.b-url {
  flex: 1; height: 22px; border-radius: 6px; background: #2a2c31; border: 1px solid #3a3d44;
  font: 11.5px/20px ui-monospace, "SF Mono", Menlo, monospace; color: #dcdfe5; padding: 0 8px; white-space: nowrap; overflow: hidden;
}
.b-page { flex: 1; background: #fbfaf7; color: #22252b; padding: 22px 26px; overflow: hidden; }
.b-page h4 { margin: 0 0 4px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.b-page p { margin: 0 0 14px; font-size: 12px; color: #5d636d; }
.b-row { display: flex; gap: 10px; }
.b-card { flex: 1; height: 74px; border-radius: 8px; background: #efece5; border: 1px solid #e2ded5; padding: 10px; }
.b-card i { display: block; height: 7px; border-radius: 4px; background: #d6d1c6; margin-bottom: 7px; }
.b-card i:first-child { width: 55%; background: #2a7466; opacity: 0.7; }
.b-btn { display: inline-block; margin-top: 14px; background: #2a7466; color: #fff; font-size: 11.5px; font-weight: 600; padding: 6px 12px; border-radius: 6px; }

/* Note panel */
.note-body { flex: 1; padding: 10px; font: 12.5px/1.45 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre; color: #dcdfe5; overflow: hidden; }

/* Magnet guide (CanvasOverlay: accent, 1 pt, dash 4/3) */
.guide-v {
  position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 1px dashed #6fb7a8;
}

/* Zoom HUD */
.hud {
  position: absolute; right: 12px; bottom: 12px;
  display: flex; align-items: center; gap: 2px; padding: 4px;
  background: #1a1d22; border: 1px solid #2a2e36; border-radius: 8px;
  font: 11px ui-monospace, "SF Mono", Menlo, monospace; color: #868d9b;
}
.hud b { width: 20px; text-align: center; color: #dcdfe5; font-weight: 600; }
.hud span { width: 44px; text-align: center; }
.hud em { font-style: normal; padding: 0 6px; color: #dcdfe5; }

/* origin/master additions: inbox, panel numbers and usage, status HUD, palette button */
.m-inbox { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 16px; margin-bottom: 4px; }
.m-inbox i { width: 8px; height: 8px; border-radius: 50%; background: #d9a54a; flex: none; }
.m-inbox span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-inbox em { font-style: normal; font-size: 11px; color: #868d9b; }
.p-bar { gap: 8px; padding: 0 8px; }
.p-num { font: 600 10px ui-monospace, "SF Mono", Menlo, monospace; color: #868d9b; }
.p-use { font: 10px ui-monospace, "SF Mono", Menlo, monospace; color: #868d9b; white-space: nowrap; }
.m-palette { margin-left: auto; gap: 8px; font-size: 11px; background: #2a2c31; }
.m-seg { margin-right: 0; }
.shud { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 8px; }
.shud .chip {
  display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; font-size: 11px;
  background: #1a1d22; border: 1px solid #2a2e36; border-radius: 8px; color: #dcdfe5;
}
.shud .chip i { width: 8px; height: 8px; border-radius: 50%; }
.shud .chip i.ok { background: #6bc77d; }
.shud .chip i.wait { background: #d9a54a; }
.c-mutx { color: #868d9b; }
.c-dimx { color: #868d9b; }

/* Contrast fixes for the drawing (see the note at the top). */
.m-filter { color: #9aa0ab; }
.m-sess p:first-child span:first-child { color: #dcdfe5; }
.m-sess.sel .meta, .m-sess.sel .ago { color: #b4bac5; }