sitedrift 0.1.0 → 0.3.0

package/assets/viewer.css

@@ -0,0 +1,779 @@
+/* sitedrift viewer — dark review chrome around two site panes.
+   Tokenised, nested, logical-property CSS; values preserved 1:1 from the
+   original inline styles. The SEO panel (§ SEO) intentionally keeps Google's
+   own SERP palette inline rather than tokenising it. */
+
+/* ── Tokens ─────────────────────────────────────────────────────────── */
+:root {
+  color-scheme: dark;
+
+  --bg: #090a0c;          /* app background */
+  --panel: #111318;       /* label bar / drawer */
+  --surface: #191c22;     /* buttons, icon controls, note cards */
+  --raised: #20242b;      /* hover state */
+  --field: #090b0e;       /* text inputs */
+  --card: #15181e;        /* floating cards + segmented control */
+  --line: #2a2e37;        /* hairline borders */
+  --card-line: #343945;   /* floating-card + mobile-pane borders */
+
+  --text: #f5f7fa;
+  --control: #dce1e9;     /* button label text */
+  --muted: #8b93a3;
+  --on-accent: #0b0d10;   /* dark text on bright badges */
+
+  --dev: #71d99e;
+  --live: #86a8ff;        /* also the focus-ring colour */
+  --warn: #e8c468;
+  --err: #e0556b;
+  --active: #283044;      /* pressed/active control fill */
+  --active-line: #4f6081;
+
+  --ctl: 34px;            /* control height */
+  --r: 7px;               /* control radius */
+  --r-sm: 6px;
+  --r-card: 10px;
+  --pill: 999px;
+
+  --t: .2s;
+  --t-fast: .15s;
+  --ease: ease;
+
+  --drawer: min(420px, calc(100vw - 24px));
+  --shadow-pop: 0 18px 50px rgb(0 0 0 / 60%);
+
+  --split: 50%;
+  font: 13px/1.4 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+/* ── Reset + element defaults ───────────────────────────────────────── */
+* { box-sizing: border-box; }
+
+html, body {
+  block-size: 100%;
+  margin: 0;
+  overflow: hidden;
+  background: var(--bg);
+  color: var(--text);
+}
+
+button, input { font: inherit; }
+
+button, summary, .label, .compactbar, .divider, .mark, .pill, .icon-control {
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+button, summary, .open-side { -webkit-touch-callout: none; }
+
+button:focus, summary:focus { outline: none; }
+button:focus-visible, summary:focus-visible {
+  outline: 2px solid var(--live);
+  outline-offset: 2px;
+}
+
+.sr-only {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ── App shell ──────────────────────────────────────────────────────── */
+.app {
+  block-size: 100%;
+  display: grid;
+  grid-template-rows: 52px 46px minmax(0, 1fr);
+  transition: padding-right var(--t) var(--ease);
+
+  &.drawer-dock {
+    padding-right: var(--drawer);
+    & .mark strong { display: none; }
+  }
+
+  &.compact {
+    grid-template-rows: 38px minmax(0, 1fr);
+    & .toolbar, & .labels { display: none; }
+    & .compactbar { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto minmax(0, 1fr) auto; }
+    & .caret svg { transform: rotate(180deg); }
+  }
+  &.compact.solo .compactbar { grid-template-columns: 30px minmax(0, 1fr) auto auto; }
+}
+
+/* ── Toolbar + compact bar ──────────────────────────────────────────── */
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: rgb(17 19 24 / 96%);
+  border-bottom: 1px solid var(--line);
+
+  /* Only the route box (and the spacer) absorb width; controls keep their size. */
+  & > .mark,
+  & > button,
+  & > .modes,
+  & > .overlay-slider,
+  & > details { flex-shrink: 0; }
+}
+
+.toolbar-spacer { flex: 1 1 0; min-inline-size: 0; }
+
+.compactbar {
+  display: none;
+  min-inline-size: 0;
+  align-items: center;
+  gap: 8px;
+  padding: 3px 8px;
+  background: rgb(17 19 24 / 98%);
+  border-bottom: 1px solid var(--line);
+}
+.compact-side { min-inline-size: 0; display: flex; align-items: center; gap: 6px; }
+.compact-title { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
+.compact-controls { display: flex; align-items: center; gap: 8px; justify-self: center; }
+
+.caret {
+  inline-size: 30px;
+  block-size: 30px;
+  padding: 0;
+  font-size: 16px;
+
+  & svg { display: block; inline-size: 14px; block-size: 14px; margin: auto; transition: transform .18s var(--ease); }
+}
+
+/* ── Brand + route field ────────────────────────────────────────────── */
+.mark {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  margin-right: 5px;
+  white-space: nowrap;
+
+  & strong { letter-spacing: -.01em; font-size: 14px; }
+}
+.mark-icon { display: block; inline-size: 20px; block-size: 20px; border-radius: 5px; box-shadow: 0 0 16px rgb(113 217 158 / 33%); }
+
+.route {
+  min-inline-size: 52px;
+  flex: 0 1 220px;
+  block-size: var(--ctl);
+  padding: 0 11px;
+  color: var(--text);
+  background: var(--field);
+  border: 1px solid var(--line);
+  border-radius: var(--r);
+  outline: none;
+  transition: flex-basis var(--t) var(--ease);
+
+  &:focus { flex-basis: min(560px, 55vw); border-color: #65718a; box-shadow: 0 0 0 3px rgb(101 113 138 / 13%); }
+}
+
+/* ── Buttons ────────────────────────────────────────────────────────── */
+button {
+  block-size: var(--ctl);
+  padding: 0 11px;
+  color: var(--control);
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--r);
+  cursor: pointer;
+
+  &:hover { background: #222630; border-color: #3b414d; }
+  &.active { color: #fff; background: var(--active); border-color: var(--active-line); }
+
+  &.icon { inline-size: var(--ctl); padding: 0; font-size: 15px; }
+  &.icon svg { display: block; inline-size: 16px; block-size: 16px; margin: auto; }
+}
+
+.icon-control {
+  display: grid;
+  inline-size: var(--ctl);
+  block-size: var(--ctl);
+  padding: 0;
+  place-items: center;
+  color: var(--control);
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--r);
+
+  & svg { display: block; inline-size: 16px; block-size: 16px; margin: auto; }
+}
+
+button[data-action="notes"] {
+  position: relative;
+
+  & .count {
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    display: inline-grid;
+    place-items: center;
+    min-inline-size: 16px;
+    block-size: 16px;
+    padding: 0 4px;
+    color: var(--on-accent);
+    background: var(--control);
+    border-radius: 9px;
+    font-size: 10px;
+    font-weight: 800;
+  }
+}
+
+/* Segmented Split/Solo/Overlay control. */
+.modes {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  overflow: hidden;
+
+  & button {
+    block-size: var(--ctl);
+    padding: 0 12px;
+    color: var(--muted);
+    background: var(--card);
+    border: 0;
+    border-radius: 0;
+    font-weight: 600;
+  }
+  & button + button { border-left: 1px solid var(--line); }
+  & button:hover { background: var(--raised); color: var(--text); }
+  & button.active { background: var(--active); color: #fff; }
+}
+.compactbar .modes button { block-size: 30px; padding: 0 9px; }
+
+/* Overlay opacity slider + difference-blend toggle. */
+.overlay-slider {
+  display: none;
+  align-items: center;
+  gap: 8px;
+  padding: 0 2px;
+
+  & input[type="range"] { inline-size: 120px; accent-color: var(--live); transition: opacity var(--t-fast) var(--ease); }
+}
+.overlay-blend.active { color: #fff; background: var(--active); border-color: var(--active-line); }
+
+/* ── Label bar (per-pane identity + meta) ───────────────────────────── */
+.labels {
+  position: relative;
+  z-index: 20;
+  display: grid;
+  grid-template-columns: var(--split) 1fr;
+  background: var(--panel);
+  border-bottom: 1px solid var(--line);
+}
+
+.label {
+  position: relative;
+  min-inline-size: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 0 12px;
+  border-right: 1px solid var(--line);
+
+  &:last-child { border-right: 0; }
+}
+
+.identity { min-inline-size: 0; display: grid; grid-template-columns: auto 24px minmax(0, 1fr); align-items: center; gap: 9px; }
+.pill { font-size: 10px; font-weight: 800; letter-spacing: .11em; }
+.pill.dev { color: var(--dev); }
+.pill.live { color: var(--live); }
+.favicon { inline-size: 24px; block-size: 24px; object-fit: contain; }
+
+.page-meta { min-inline-size: 0; display: flex; flex-direction: column; line-height: 1.2; }
+.page-heading { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-weight: 650; white-space: nowrap; }
+.origin { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); white-space: nowrap; font-size: 11px; }
+
+.label-actions { display: flex; align-items: center; gap: 5px; }
+.open-side {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--muted);
+  text-decoration: none;
+  font-size: 12px;
+
+  &:hover { color: var(--text); }
+  & svg { inline-size: 12px; block-size: 12px; }
+}
+
+.hint { color: var(--muted); white-space: nowrap; font-size: 11px; }
+
+/* HTTP status + metadata-diff badges. */
+.status-badge {
+  display: none;
+  align-items: center;
+  block-size: 18px;
+  padding: 0 6px;
+  border-radius: var(--r-sm);
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: .04em;
+
+  &.show { display: inline-flex; }
+}
+.status-ok { color: var(--on-accent); background: var(--dev); }
+.status-warn { color: var(--on-accent); background: var(--warn); }
+.status-err { color: #fff; background: var(--err); }
+.compact-side .status-badge { block-size: 16px; }
+
+.meta-diff {
+  display: none;
+  align-items: center;
+  block-size: 18px;
+  padding: 0 7px;
+  color: var(--on-accent);
+  background: var(--warn);
+  border-radius: var(--r-sm);
+  font-size: 10px;
+  font-weight: 800;
+  cursor: default;
+
+  &.show { display: inline-flex; }
+}
+
+/* ── Popovers: details menus, settings + help cards ─────────────────── */
+details { position: relative; }
+summary {
+  list-style: none;
+  padding: 5px 7px;
+  color: var(--muted);
+  border: 1px solid transparent;
+  border-radius: var(--r-sm);
+  cursor: pointer;
+  white-space: nowrap;
+  user-select: none;
+
+  &::-webkit-details-marker { display: none; }
+}
+summary:hover, details[open] summary { color: var(--text); background: var(--raised); border-color: var(--line); }
+
+.settings-card {
+  position: fixed;
+  z-index: 65;
+  top: 48px;
+  right: 52px;
+  inline-size: 230px;
+  padding: 8px;
+  background: var(--card);
+  border: 1px solid var(--card-line);
+  border-radius: var(--r-card);
+  box-shadow: var(--shadow-pop);
+}
+.setting-row {
+  inline-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  block-size: 38px;
+  padding: 0 10px;
+  background: transparent;
+  border-color: transparent;
+  text-align: left;
+
+  &:hover { background: var(--raised); }
+  & .state { color: var(--muted); font-size: 11px; }
+  &.active .state { color: var(--dev); }
+}
+
+.help-card {
+  position: fixed;
+  z-index: 65;
+  top: 48px;
+  right: 8px;
+  inline-size: 300px;
+  padding: 14px;
+  background: var(--card);
+  border: 1px solid var(--card-line);
+  border-radius: var(--r-card);
+  box-shadow: var(--shadow-pop);
+
+  & strong { display: block; margin-bottom: 9px; }
+}
+.help-blurb {
+  margin: 0 0 12px;
+  color: var(--muted);
+  line-height: 1.5;
+
+  & b { color: var(--text); font-weight: 650; }
+}
+.help-credit {
+  margin-top: 13px;
+  padding-top: 11px;
+  border-top: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 11px;
+
+  & a { color: var(--text); text-decoration: none; }
+  & a:hover { color: var(--live); text-decoration: underline; }
+}
+.shortcut-list {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 7px 12px;
+  margin: 0;
+
+  & dt { color: #fff; font-weight: 650; }
+  & dd { margin: 0; color: var(--muted); }
+}
+kbd { padding: 1px 5px; color: #e8ebf0; background: #242932; border: 1px solid #3d4552; border-radius: 4px; font: 11px ui-monospace, monospace; }
+
+/* ── SEO panel (Google SERP preview — keeps Google's own palette) ───── */
+.seo-summary { display: inline-flex; align-items: center; gap: 4px; }
+.seo-summary svg { inline-size: 11px; block-size: 11px; }
+.seo-flag {
+  display: inline-grid;
+  place-items: center;
+  min-inline-size: 15px;
+  block-size: 15px;
+  padding: 0 4px;
+  border-radius: 8px;
+  background: var(--warn);
+  color: var(--on-accent);
+  font-size: 9px;
+  font-weight: 800;
+}
+.seo-flag[hidden] { display: none; }
+
+.seo-card {
+  position: fixed;
+  z-index: 60;
+  top: 108px;
+  left: 12px;
+  inline-size: min(520px, calc(100vw - 24px));
+  max-block-size: calc(100vh - 128px);
+  overflow: auto;
+  padding: 18px 20px;
+  color: #202124;
+  background: #fff;
+  border: 1px solid #dfe1e5;
+  border-radius: var(--r-card);
+  box-shadow: 0 18px 55px rgb(0 0 0 / 47%);
+  font-family: Arial, sans-serif;
+}
+.seo-eyebrow { margin-bottom: 12px; color: #5f6368; font: 11px/1.2 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
+.seo-source { display: grid; grid-template-columns: 28px minmax(0, 1fr) 20px; align-items: center; gap: 10px; }
+.seo-favicon { inline-size: 28px; block-size: 28px; padding: 4px; object-fit: contain; background: #f1f3f4; border-radius: 50%; }
+.seo-site { color: #202124; font-size: 14px; line-height: 18px; }
+.seo-url { color: #4d5156; font-size: 12px; line-height: 16px; }
+.seo-menu { color: #4d5156; font-size: 20px; line-height: 1; letter-spacing: 1px; }
+.seo-title { margin-top: 5px; color: #1a0dab; font-size: 20px; line-height: 26px; font-weight: 400; }
+.seo-description { margin-top: 3px; color: #4d5156; font-size: 14px; line-height: 22px; }
+.seo-empty { color: #b3261e; font-style: italic; }
+.seo-diff { background: #fdeec9; outline: 2px solid #f0b429; outline-offset: 1px; border-radius: 3px; }
+
+.seo-checks { margin-top: 16px; padding-top: 13px; border-top: 1px solid #e6e8eb; }
+.seo-checks-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 9px;
+  color: #5f6368;
+  font: 600 11px/1.2 Inter, sans-serif;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+
+  & .bad { color: #c5221f; }
+  & .good { color: #137333; }
+}
+.seo-check {
+  display: grid;
+  grid-template-columns: 15px 1fr auto;
+  align-items: baseline;
+  gap: 9px;
+  padding: 3px 0;
+  font-size: 13px;
+  line-height: 18px;
+
+  &.ok .seo-check-mark { color: #137333; }
+  &.bad .seo-check-mark { color: #c5221f; }
+  &.bad .seo-check-label { color: #c5221f; }
+}
+.seo-check-mark { font-weight: 800; text-align: center; }
+.seo-check-note { color: #80868b; font-size: 11px; white-space: nowrap; }
+
+/* ── Stage: panes, divider, frames ──────────────────────────────────── */
+.stage { position: relative; display: grid; grid-template-columns: var(--split) 1fr; min-block-size: 0; }
+.pane {
+  position: relative;
+  min-inline-size: 0;
+  overflow: hidden;
+  background: #fff;
+
+  &:first-child { border-right: 1px solid var(--line); }
+}
+iframe { display: block; inline-size: 100%; block-size: 100%; border: 0; background: #fff; }
+
+.divider {
+  position: absolute;
+  z-index: 10;
+  top: 0;
+  bottom: 0;
+  left: var(--split);
+  inline-size: 17px;
+  transform: translateX(-50%);
+  cursor: col-resize;
+  touch-action: none;
+
+  &:focus { outline: none; }
+  &:focus-visible { outline: 2px solid var(--live); outline-offset: -2px; }
+  &::before { content: ""; position: absolute; top: 0; bottom: 0; left: 8px; inline-size: 1px; background: #596171; }
+}
+.grip {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  inline-size: 24px;
+  block-size: 54px;
+  transform: translate(-50%, -50%);
+  border: 1px solid #454c59;
+  border-radius: 12px;
+  background: #171a20;
+  box-shadow: 0 8px 30px rgb(0 0 0 / 53%);
+
+  &::after { content: ""; position: absolute; inset: 15px 8px; background: repeating-linear-gradient(90deg, #788190 0 1px, transparent 1px 4px); }
+}
+.dragging iframe { pointer-events: none; }
+
+/* ── Layout modes: mobile, solo, overlay ────────────────────────────── */
+.app.mobile {
+  & .stage {
+    grid-template-columns: repeat(2, minmax(320px, 390px));
+    justify-content: center;
+    align-items: stretch;
+    gap: 22px;
+    overflow-x: auto;
+    padding: 14px 22px;
+    background: #08090b;
+  }
+  & .pane { border: 1px solid var(--card-line); border-radius: 13px; box-shadow: 0 14px 42px rgb(0 0 0 / 53%); }
+  & .divider { display: none; }
+  & .labels { grid-template-columns: 1fr 1fr; padding-inline: max(0px, calc((100% - 802px) / 2)); }
+}
+.app.mobile.solo .stage { grid-template-columns: minmax(320px, 390px); }
+
+.app.solo {
+  & .stage { grid-template-columns: minmax(0, 1fr); }
+  & .labels { grid-template-columns: minmax(0, 1fr); }
+  & .divider { display: none; }
+
+  &[data-focus="dev"] [data-pane="live"],
+  &[data-focus="live"] [data-pane="dev"] {
+    position: absolute;
+    inset: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+  &[data-focus="dev"] .label[data-label="live"],
+  &[data-focus="live"] .label[data-label="dev"],
+  &[data-focus="dev"] [data-compact-side="live"],
+  &[data-focus="live"] [data-compact-side="dev"] { display: none; }
+}
+
+.app.overlay {
+  & .stage { grid-template-columns: minmax(0, 1fr); }
+  & .pane { position: absolute; inset: 0; }
+  & .pane:first-child { border-right: 0; }
+  & .overlay-top { opacity: var(--overlay, .5); }
+  & .divider { display: none; }
+  & .labels { grid-template-columns: 1fr 1fr; }
+  & .overlay-slider { display: flex; }
+
+  &.diff .stage { background: #000; }
+  &.diff .overlay-top { opacity: 1; mix-blend-mode: difference; }
+  &.diff .overlay-slider input[type="range"] { opacity: .4; pointer-events: none; }
+  &.diff .diff-legend { display: block; }
+}
+
+.diff-legend {
+  display: none;
+  position: fixed;
+  z-index: 40;
+  left: 50%;
+  bottom: 16px;
+  transform: translateX(-50%);
+  padding: 6px 13px;
+  color: #cdd3dd;
+  background: rgb(17 19 24 / 92%);
+  border: 1px solid var(--line);
+  border-radius: var(--pill);
+  font-size: 11px;
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+/* ── Review-notes drawer ────────────────────────────────────────────── */
+.review-drawer {
+  position: fixed;
+  z-index: 50;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  inline-size: var(--drawer);
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  color: var(--text);
+  background: var(--panel);
+  border-left: 1px solid var(--line);
+  box-shadow: -18px 0 55px rgb(0 0 0 / 60%);
+  transform: translateX(102%);
+  transition: transform var(--t) var(--ease);
+
+  &.open { transform: translateX(0); }
+}
+.review-drawer:has(.local-notes-notice:not([hidden])) {
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+}
+.drawer-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--line);
+
+  & strong { flex: 1; font-size: 14px; }
+  & .icon { inline-size: 30px; block-size: 30px; }
+  & .icon.active { color: #fff; background: var(--active); border-color: var(--active-line); }
+}
+.local-notes-notice {
+  margin: 12px 16px 0;
+  padding: 9px 10px;
+  color: var(--muted);
+  background: color-mix(in srgb, var(--field) 82%, transparent);
+  border: 1px solid var(--line);
+  border-radius: var(--r);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.note-list {
+  margin: 0;
+  padding: 14px 16px 14px 38px;
+  overflow: auto;
+
+  & li {
+    position: relative;
+    margin-bottom: 10px;
+    padding: 9px 92px 9px 11px;
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: 8px;
+  }
+  & li.done { opacity: .55; }
+  & li.done .note-text { text-decoration: line-through; }
+  &:empty::after { content: "No review notes yet."; display: block; margin-left: -22px; color: var(--muted); }
+}
+
+.note-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
+.note-author {
+  padding: 1px 6px;
+  border-radius: 5px;
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: .05em;
+  text-transform: uppercase;
+}
+.note-author.joe { color: var(--on-accent); background: var(--live); }
+.note-author.claude { color: var(--on-accent); background: #d8a0ff; }
+.note-author.other { color: var(--on-accent); background: #9aa3b2; }
+.note-where { color: var(--muted); font-size: 10px; }
+.note-text { white-space: pre-wrap; word-break: break-word; }
+.note-go { cursor: pointer; }
+.note-go:hover { color: var(--live); text-decoration: underline; }
+
+/* Square icon buttons docked inside a note card. */
+.remove-note { position: absolute; top: 5px; right: 5px; inline-size: 26px; block-size: 26px; padding: 0; }
+.note-toggle { position: absolute; top: 5px; right: 34px; inline-size: 26px; block-size: 26px; padding: 0; }
+.note-copy { position: absolute; top: 5px; right: 63px; inline-size: 26px; block-size: 26px; padding: 0; }
+.note-copy svg { display: block; inline-size: 14px; block-size: 14px; margin: auto; }
+
+.note-compose { display: grid; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--line); }
+.note-compose textarea {
+  inline-size: 100%;
+  min-block-size: 76px;
+  resize: none;
+  overflow-y: hidden;
+  padding: 9px 10px;
+  color: var(--text);
+  background: var(--field);
+  border: 1px solid var(--line);
+  border-radius: var(--r);
+  font: inherit;
+}
+.note-grip {
+  block-size: 9px;
+  margin: -2px 0 1px;
+  cursor: ns-resize;
+  touch-action: none;
+
+  &::before { content: ""; display: block; inline-size: 34px; block-size: 3px; margin: 3px auto 0; border-radius: 2px; background: var(--line); }
+  &:hover::before { background: var(--muted); }
+}
+.note-input { position: relative; }
+.note-input textarea { padding-right: 44px; }
+.note-submit { position: absolute; right: 8px; bottom: 8px; inline-size: 30px; block-size: 30px; padding: 0; }
+.note-submit svg { display: block; inline-size: 16px; block-size: 16px; margin: auto; }
+.note-actions { display: flex; flex-wrap: wrap; gap: 8px; }
+.note-actions button { flex: 1; }
+.note-actions:empty { display: none; }
+
+/* ── Toast ──────────────────────────────────────────────────────────── */
+.toast {
+  position: fixed;
+  z-index: 70;
+  left: 50%;
+  bottom: 18px;
+  padding: 8px 12px;
+  color: #fff;
+  background: #252a33;
+  border: 1px solid #414957;
+  border-radius: 8px;
+  box-shadow: 0 8px 28px rgb(0 0 0 / 53%);
+  opacity: 0;
+  transform: translate(-50%, 8px);
+  pointer-events: none;
+  transition: .18s var(--ease);
+
+  &.show { opacity: 1; transform: translate(-50%, 0); }
+}
+
+/* ── Responsive + motion ────────────────────────────────────────────── */
+@media (width <= 820px) {
+  .mark strong, .hint, button[data-wide] .control-label { display: none; }
+  .toolbar { padding-inline: 8px; }
+  .open-side { display: none; }
+  .app.mobile .stage { justify-content: start; }
+}
+
+@media (width <= 600px) {
+  .app, .toolbar { min-inline-size: 0; }
+  .toolbar { gap: 6px; }
+  .toolbar .mark { margin-right: 0; }
+  .toolbar .route { inline-size: 0; flex: 1 1 auto; }
+  .toolbar-spacer,
+  .toolbar > .caret,
+  .toolbar > [data-action="go"],
+  .toolbar > .overlay-slider,
+  .toolbar > [data-action="reload"],
+  .toolbar > [data-action="scroll"],
+  .toolbar > [data-action="notes"],
+  .toolbar > details { display: none; }
+  .toolbar > .modes button { padding-inline: 8px; }
+  .label { gap: 6px; padding-inline: 8px; }
+  .identity { grid-template-columns: auto minmax(0, 1fr); gap: 6px; }
+  .identity .favicon { display: none; }
+  .label-actions > :not(.status-badge) { display: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    transition-duration: .01ms !important;
+    animation-duration: .01ms !important;
+  }
+}