/* ============================================================
   DashCode — the app's own look, for the website.
   A copy of the app's shell.css / panels.css / card.css (../dashcode/public), same class names,
   used inside `.app`: the landing page's live demo window and the /docs mocks. Values follow
   the app; a few sizes are a step smaller because the windows are narrower than a real one.
   Tokens come from site.css (the app's tokens.css). When the app's UI changes, update this file
   from those files; both pages follow.
   ============================================================ */

/* the window: isolates the app's type from the page's (Inter and JetBrains Mono, 14/1.45) */
.app {
  container: app / inline-size;
  position: relative;
  background: var(--bg);
  overflow: hidden;
  --font-ui:   "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* app tokens site.css doesn't carry */
  --rail-ink:    #64748b;
  --rail-active: #334155;
  --warn-ink:    #b45309;
  --r-md:        4px;
  --r-card:      6px;
  --shadow-card: var(--shadow);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: normal;
  text-align: left;
}
@media (prefers-color-scheme: dark) {
  .app { --rail-ink: #8b95a7; --rail-active: #cbd5e1; --warn-ink: var(--amber); }
}

/* the traffic lights, floating over the sidebar head like the frameless Mac window's */
.app .lights { position: absolute; z-index: 3; top: 15px; left: 14px; display: flex; gap: 7px; pointer-events: none; }
.app .lights i { display: block; width: 11px; height: 11px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 16%, var(--sb-bg)); }

.app .spacer { flex: 1; }
.app .muted { color: var(--muted); }
.app .mono { font-family: var(--font-mono); }
.app button, .app input, .app select, .app textarea { font-family: inherit; letter-spacing: normal; }
.app :focus-visible { outline: 2px solid color-mix(in srgb, var(--accent, var(--blue)) 70%, transparent); outline-offset: 1px; }

/* ---- shell: sidebar + workspace ---- */
.shell { display: grid; grid-template-columns: 232px 1fr; height: 632px; transition: grid-template-columns .18s ease; }
.shell.sb-collapsed { grid-template-columns: 52px 1fr; }

.sb { display: flex; flex-direction: column; min-height: 0; background: var(--sb-bg); color: var(--sb-ink); border-right: 1px solid var(--border); user-select: none; }
.sb__head { display: flex; align-items: center; gap: 8px; padding: 38px 12px 8px 14px; min-height: 48px; }
.sb__brand { display: flex; align-items: center; min-width: 0; color: var(--sb-ink); }
.sb__brand .logomark { height: 16px; }
.sb__brand .brand-mark { display: none; width: 16px; height: 16px; }
.sb__iconbtn { display: grid; place-items: center; width: 28px; height: 28px; flex: none; padding: 0; border: none; border-radius: 6px;
  background: none; color: var(--sb-muted); cursor: pointer; transition: background .12s, color .12s; }
.sb__iconbtn:hover { background: var(--sb-hover); color: var(--sb-ink); }
.sb__collapse { margin-left: auto; }
.sb__filterwrap { position: relative; margin: 0 10px 8px; }
.sb__filtericon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--sb-muted); pointer-events: none; }
.sb__filter { width: 100%; height: 28px; padding: 0 8px 0 28px; font: 12.5px/1 var(--font-ui); color: var(--sb-ink); background: var(--card);
  border: 1px solid var(--border); border-radius: 6px; outline: none; -webkit-appearance: none; appearance: none; }
.sb__filter::placeholder { color: var(--sb-muted); }
.sb__filter:focus { border-color: color-mix(in srgb, var(--ink) 35%, var(--border)); }
.sb__filter::-webkit-search-cancel-button { -webkit-appearance: none; }
.sb__list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 2px 8px 8px; display: flex; flex-direction: column; gap: 1px; scrollbar-width: none; }
.sb__item { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 0 8px; flex: none;
  border: none; background: none; color: var(--sb-ink); font: 13px/1.2 var(--font-ui); text-align: left; border-radius: 7px; cursor: pointer;
  white-space: nowrap; transition: background .12s; }
.sb__item:hover { background: var(--sb-hover); }
.sb__item.is-active { background: color-mix(in srgb, var(--accent, var(--ink)) 13%, var(--sb-active)); }
.sb__item.is-active::before { content: ""; position: absolute; left: -8px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--accent, var(--rail-active)); }
.sb__item--overview.is-active::before { background: var(--rail-active); }
.sb__item--overview .sb__glyph { color: var(--sb-muted); }
.sb__item--in-folder { padding-left: 22px; }
.sb__glyph { position: relative; display: grid; place-items: center; width: 22px; height: 22px; flex: none; font-size: 14px; line-height: 1; }
.sb__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sb__marks { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.sb__marks:empty { display: none; }
.sb__badge--needs, .sb__badge--waiting { display: inline-flex; align-items: center; color: var(--muted); }
.sb__badge--busy { width: 10px; text-align: center; font: 11px/1 var(--font-mono); color: var(--muted); }
.sb__road { display: inline-flex; }
.sb__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gray); }
.sb__dot--running { background: var(--green); }
.sb__dot--starting { background: var(--amber); animation: pulse 1.5s ease-in-out infinite; }
.sb__dot--crashed { background: var(--red); }
/* folder header: a label, not a directory */
.sb__group { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 28px; padding: 0 8px; margin-top: 6px; flex: none;
  border: none; background: none; color: var(--sb-muted); font: 620 11px/1.2 var(--font-ui); letter-spacing: .03em; text-transform: uppercase;
  text-align: left; border-radius: 7px; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; }
.sb__group:hover { background: var(--sb-hover); color: var(--sb-ink); }
.sb__fold, .ov__fold { flex: none; display: grid; place-items: center; width: 14px; height: 14px; }
.sb__fold svg, .ov__fold svg { grid-area: 1 / 1; }
.sb__fold-shut, .ov__fold-shut { display: none; }
.is-collapsed .sb__fold-open, .is-collapsed .ov__fold-open { display: none; }
.is-collapsed .sb__fold-shut, .is-collapsed .ov__fold-shut { display: block; }
.sb__group-glyph { width: auto; font-size: 12px; }
.sb__group .sb__name { flex: 0 1 auto; }
.sb__group-mark { display: inline-flex; align-items: center; margin-left: auto; color: var(--muted); }
.sb__group-count { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 500; opacity: .8; }
.sb__group-mark + .sb__group-count { margin-left: 0; }
.sb__foot { display: flex; align-items: center; gap: 2px; padding: 8px 10px; border-top: 1px solid var(--border); }

/* collapsed rail: the image mark alone, dots on the glyphs */
.shell.sb-collapsed .sb__brand .logomark,
.shell.sb-collapsed .sb__filterwrap,
.shell.sb-collapsed .sb__name,
.shell.sb-collapsed .sb__group-count,
.shell.sb-collapsed .sb__group-mark,
.shell.sb-collapsed .sb__fold { display: none; }
.shell.sb-collapsed .sb__brand .brand-mark { display: block; }
.shell.sb-collapsed .sb__head { flex-direction: column; gap: 6px; padding: 38px 0 8px; }
.shell.sb-collapsed .sb__collapse { margin: 0; }
.shell.sb-collapsed .sb__item { justify-content: center; padding: 0; }
.shell.sb-collapsed .sb__marks { position: absolute; top: 3px; right: 3px; gap: 2px; }
.shell.sb-collapsed .sb__list .sb__dot { position: absolute; left: calc(50% + 6px); top: calc(50% + 6px); box-shadow: 0 0 0 2px var(--sb-bg); }
.shell.sb-collapsed .sb__group { justify-content: center; padding: 0; min-height: 24px; margin-top: 10px; }
.shell.sb-collapsed .sb__group::after { content: ""; position: absolute; left: 10px; right: 10px; top: -4px; height: 1px; background: var(--border); }
.shell.sb-collapsed .sb__foot { flex-direction: column; padding: 8px 0; }

/* ---- workspace ---- */
.work { container: work / inline-size; position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--panel-bg); }

/* ---- project header ---- */
.phd { display: flex; align-items: center; gap: 12px; padding: 9px 14px 9px 16px; background: var(--tabs-bg); flex: none; }
.phd[hidden] { display: none; }
.phd__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.phd__glyph { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 9px; font-size: 19px; line-height: 1;
  background: color-mix(in srgb, var(--accent) 14%, var(--card)); }
.phd__row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.phd__title { margin: 0; min-width: 0; font: 700 16px/1.2 var(--font-ui); letter-spacing: .1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phd .pill { flex: none; }
.phd__gear { display: grid; place-items: center; flex: none; width: 19px; height: 19px; padding: 0; border: 0; border-radius: 999px;
  background: var(--chip); color: var(--muted); cursor: pointer; }
.phd__gear:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 10%, var(--chip)); }
.phd__actions { display: flex; align-items: center; gap: 16px; flex: none; }
.card__actions-group { display: flex; align-items: center; gap: 8px; }
.phd .tile--sq { width: 34px; height: 34px; }
.phd .tile svg { width: 20px; height: 20px; }
/* the header's tiles carry no labels, so each names itself under the button while hovered */
.hint-tiles .tile { position: relative; }
.hint-tiles .tile[data-hint]:hover::after,
.tabs__quick-btn[data-hint]:hover::after {
  content: attr(data-hint); position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%);
  z-index: 6; pointer-events: none; white-space: nowrap;
  font: 500 10.5px/1 var(--font-ui); letter-spacing: .02em; color: var(--muted);
  background: var(--card); padding: 3px 5px; border-radius: 4px; box-shadow: var(--shadow);
}

/* ---- action tiles (card.css) ---- */
.tile { display: grid; place-items: center; flex: none; padding: 0; border: none; border-radius: 4px; cursor: pointer;
  background: var(--tile); color: var(--tile-ink); text-decoration: none; transition: background .12s ease, color .12s ease; }
.tile--sq { width: 40px; height: 40px; }
.tile:hover:not(:disabled):not([aria-disabled="true"]) { background: color-mix(in srgb, var(--ink) 9%, var(--tile)); color: var(--ink); }
.tile:disabled, .tile[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
a.tile[aria-disabled="true"] { pointer-events: none; }
.tile--green:hover:not(:disabled) { background: color-mix(in srgb, var(--green) 20%, var(--tile)); color: color-mix(in srgb, var(--green) 55%, #05310f); }
.tile--blue:hover:not(:disabled)  { background: color-mix(in srgb, var(--blue) 22%, var(--tile)); color: color-mix(in srgb, var(--blue) 60%, #04204a); }
.tile--red:hover:not(:disabled)   { background: color-mix(in srgb, var(--red) 22%, var(--tile)); color: color-mix(in srgb, var(--red) 58%, #4c0519); }
.tile--red.tile--busy { background: var(--red); color: #fff0f0; animation: soft 1.2s ease-in-out infinite; }

/* ---- state pill + chips (panels.css / card.css) ---- */
/* the page's own .pill (its buttons) is reset here: inside the window a pill is the state label */
.app .pill { display: inline-flex; align-items: center; gap: 0; height: auto; border: 0; cursor: default; white-space: nowrap;
  font: 600 10.5px/1 var(--font-mono); letter-spacing: .03em; text-transform: uppercase;
  padding: 4px 7px; border-radius: 999px; color: var(--hd-ink); background: var(--hd-stopped); }
.app .pill--running { background: var(--hd-running); }
.app .pill--starting { background: var(--hd-starting); animation: pulse 1.5s ease-in-out infinite; }
.app .pill--crashed { background: var(--hd-crashed); }
.app .chip { font: 10px/1.3 var(--font-mono); color: var(--chip-ink); background: var(--chip); border-radius: 4px; padding: 3px 6px; white-space: nowrap; }
.app .chip--warn { background: color-mix(in srgb, var(--amber) 22%, var(--chip)); }

/* ---- tab strip ---- */
.tabs { display: flex; align-items: stretch; min-height: 38px; background: var(--tabs-bg); border-bottom: 1px solid var(--border); padding: 0 6px 0 8px; gap: 4px; flex: none; }
.tabs[hidden] { display: none; }
.tabs__list { display: flex; align-items: stretch; gap: 2px; min-width: 0; padding-top: 6px; overflow-x: auto; scrollbar-width: none; }
.tabs__list::-webkit-scrollbar { display: none; }
.tab { position: relative; display: flex; align-items: center; gap: 6px; flex: none; max-width: 220px; padding: 0 8px 0 10px;
  border: 1px solid transparent; border-bottom: none; border-radius: 7px 7px 0 0; background: none; color: var(--muted);
  font: 12.5px/1 var(--font-ui); cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; }
.tab:hover { color: var(--ink); background: var(--sb-hover); }
.tab.is-active { background: var(--tab-active); color: var(--ink); border-color: var(--border); }
.tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--tab-active); }
.tab__icon { flex: none; color: var(--rail-ink); }
.tab.is-active .tab__icon { color: var(--rail-active); }
.tab__title { overflow: hidden; text-overflow: ellipsis; }
.tab__chip { flex: none; font-variant-numeric: tabular-nums; }
.tab__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.tab__spin { flex: none; width: 8px; text-align: center; font: 11px/1 var(--font-mono); color: var(--muted); }
.tab__eye, .tab__needs { flex: none; display: inline-flex; align-items: center; color: var(--muted); }
.tab__close { display: grid; place-items: center; width: 18px; height: 18px; margin-right: -4px; border-radius: 4px; color: var(--muted); opacity: 0; transition: opacity .12s, background .12s; }
.tab:hover .tab__close, .tab.is-active .tab__close { opacity: 1; }
.tab__close:hover { background: var(--sb-hover); color: var(--ink); }
/* "+" and the quick row that slides out of it on hover */
.tabs__new { position: relative; display: flex; align-self: center; flex: none; }
.tab--plus { align-self: center; justify-content: center; width: 26px; height: 26px; padding: 0; border-radius: 6px; }
.tab--plus svg { transition: transform .24s cubic-bezier(.16, 1, .3, 1); }
.tabs__new:hover .tab--plus, .tabs__new.is-open .tab--plus { color: var(--ink); background: var(--sb-hover); }
.tabs__new:hover .tab--plus svg, .tabs__new.is-open .tab--plus svg { transform: rotate(90deg); }
.tabs__quick { position: absolute; top: 50%; left: 100%; z-index: 5; display: flex; gap: 2px; padding: 0 4px; background: var(--tabs-bg);
  transform: translateY(-50%); pointer-events: none; visibility: hidden; transition: visibility 0s .14s; }
.tabs__new:hover .tabs__quick, .tabs__new.is-open .tabs__quick, .tabs__new:focus-within .tabs__quick { pointer-events: auto; visibility: visible; transition: none; }
.tabs__quick-btn { position: relative; display: grid; place-items: center; flex: none; width: 26px; height: 26px; padding: 0; border: 0;
  border-radius: 6px; background: none; color: var(--muted); cursor: pointer; opacity: 0;
  transform: translateX(calc((var(--i) + 1) * -28px)) scale(.5);
  transition: transform .12s cubic-bezier(.4, 0, 1, 1), opacity .1s linear, background .12s, color .12s; }
.tabs__new:hover .tabs__quick-btn, .tabs__new.is-open .tabs__quick-btn, .tabs__new:focus-within .tabs__quick-btn { opacity: 1; transform: none;
  transition: transform .24s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * 22ms), opacity .14s linear calc(var(--i) * 22ms), background .12s, color .12s; }
.tabs__quick-btn:hover { color: var(--ink); background: var(--sb-hover); }

/* ---- panels ---- */
.panels { flex: 1; min-height: 0; position: relative; display: flex; background: var(--panel-bg); }
.panel { display: flex; flex: 1; min-width: 0; min-height: 0; flex-direction: column; }
.panel__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 16px 22px 12px; border-bottom: 1px solid var(--border); flex: none; background: var(--panel-bg); }
.panel__title { margin: 0; font: 700 17px/1.2 var(--font-ui); letter-spacing: .1px; }
.panel__body { flex: 1; min-height: 0; overflow: auto; padding: 18px 22px 28px; }
.panel__body--narrow { max-width: 720px; }

/* chrome buttons */
.app button.ghost, .app a.ghost, .app button.primary {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; cursor: pointer; text-decoration: none;
  font: 500 12.5px/1 var(--font-ui); letter-spacing: .01em; color: var(--tile-ink); background: transparent;
  border: 1px solid var(--border); border-radius: 6px; transition: background .12s; }
.app button.ghost:hover:not(:disabled), .app a.ghost:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.app button.ghost:disabled { opacity: .45; cursor: default; }
.app button.ghost.icon { width: 28px; height: 28px; padding: 0; justify-content: center; border-color: transparent; }
.app button.primary { color: #fff; background: var(--primary); border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.15); }
.app button.primary:hover { background: var(--primary-hover); }
.app button.danger { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; cursor: pointer; font: 500 12.5px/1 var(--font-ui);
  color: #fff; background: #dc2626; border: 1px solid transparent; border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.15); }
.app button.danger:hover { background: #b91c1c; }
.app kbd { font: 11px/1 var(--font-mono); color: var(--muted); background: var(--chip); border: 1px solid var(--border); border-radius: 4px; padding: 2px 5px; }
/* the overdue marker (the app's dom.js overdueMark): sidebar, Overview roadmap cell, Roadmap rows.
   calendar-clock in red, not a dot: a red dot already means "crashed". */
.overdue-mark { display: inline-flex; align-items: center; gap: 3px; color: var(--red); font: 11px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.overdue-mark svg { flex: none; }

/* the segmented switch: one recessed track, the selected segment lifted onto the card */
.seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 9px; background: color-mix(in srgb, var(--tile) 55%, transparent); }
.seg__btn { border: 0; border-radius: 7px; padding: 5px 11px; background: transparent; color: var(--muted); font: 500 12.5px/1 var(--font-ui); cursor: pointer; transition: background .12s, color .12s; }
.seg__btn:hover { color: var(--ink); }
.seg__btn.is-on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.seg--head .seg__btn { padding: 5px 12px; }
.seg--bar .seg__btn { padding: 4px 9px; font-size: 12px; }

/* sections (card.css) */
.sect { display: flex; flex-direction: column; gap: 8px; }
.sect-head { display: flex; align-items: center; justify-content: space-between; }
.sect-heading { margin: 0; font: 700 11px/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.sect-btn { display: inline-flex; padding: 2px; border: none; background: none; color: var(--muted); cursor: pointer; }
.sect-btn:hover { color: var(--ink); }

/* ---- Overview ---- */
.ov__summary { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ov__rows { display: grid; max-width: 1180px; row-gap: 6px; column-gap: 14px;
  grid-template-columns: 48px minmax(150px, 1.3fr) max-content minmax(90px, max-content) minmax(0, max-content) minmax(0, max-content) minmax(0, 1fr) 28px max-content; }
.ov__row { position: relative; display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; padding: 8px 12px 8px 10px;
  background: var(--card); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); cursor: pointer; transition: background .12s; }
.ov__row:hover { background: color-mix(in srgb, var(--ink) 3%, var(--card)); }
.ov__grip { position: absolute; left: 0; top: 0; bottom: 0; width: 18px; display: grid; place-items: center; color: var(--muted); opacity: .28; }
.ov__row:hover .ov__grip { opacity: .65; }
.ov__row--in-folder::before { content: ""; position: absolute; left: 3px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--muted) 35%, transparent); }
.ov__glyph { display: grid; justify-self: end; place-items: center; width: 28px; height: 28px; border-radius: 7px; font-size: 18px; line-height: 1;
  background: color-mix(in srgb, var(--hd-stopped) 30%, transparent); transition: background .25s ease; }
.ov__row--running .ov__glyph { background: color-mix(in srgb, var(--hd-running) 30%, transparent); }
.ov__row--starting .ov__glyph { background: color-mix(in srgb, var(--hd-starting) 35%, transparent); }
.ov__row--crashed .ov__glyph { background: color-mix(in srgb, var(--hd-crashed) 35%, transparent); }
.ov__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ov__name { font: 800 13.5px/1.25 var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov__tag { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov__state { justify-self: start; }
.ov__procs { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 11px/1 var(--font-mono); color: var(--muted); }
.ov__proc { display: inline-flex; align-items: center; gap: 5px; }
.ov__proc .sb__dot { width: 7px; height: 7px; }
.ov__git { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 200px; padding: 2px 5px; margin: -2px -5px; border: none;
  border-radius: 4px; background: none; color: var(--muted); font: 11px/1 var(--font-mono); cursor: pointer; transition: background .12s, color .12s; }
.ov__git:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.ov__git svg { flex: none; opacity: .8; }
.ov__branch { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* roadmap cell: open todo count + the top todo (overdue marker first), the .ov__git treatment; it opens
   the Roadmap tab. An empty cell keeps its track (visibility, not display). */
.ov__road { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 220px; padding: 2px 5px; margin: -2px -5px; border: none;
  border-radius: 4px; background: none; color: var(--muted); font: 11px/1 var(--font-mono); text-align: left; cursor: pointer; transition: background .12s, color .12s; }
.ov__road:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.ov__road[hidden] { display: inline-flex; visibility: hidden; }
.ov__roadn { font-variant-numeric: tabular-nums; }
.ov__roadtop { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-ui); font-size: 12px; }
.ov__links { display: flex; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
.ov__link { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 6px; border-radius: 4px; background: var(--chip);
  color: var(--link); font-size: 11px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov__open { display: grid; place-items: center; width: 28px; height: 28px; color: var(--tile-ink); border-radius: 4px; }
.ov__open:hover { background: var(--tile); }
.ov__open[hidden] { display: grid; visibility: hidden; }
.ov__row .transport { gap: 4px; }
.ov__row .tile--sq { width: 30px; height: 30px; }
.ov__row .tile svg { width: 18px; height: 18px; }
.ov__group { position: relative; grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 2px 12px 2px 22px;
  border: none; border-radius: 6px; background: none; color: var(--muted); font: 620 11px/1.6 var(--font-ui); letter-spacing: .03em;
  text-transform: uppercase; cursor: pointer; text-align: left; }
.ov__group:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); color: var(--ink); }
.ov__group-count { font-weight: 500; text-transform: none; letter-spacing: 0; }
/* Changes */
.chg { max-width: 900px; }
.chg__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.chg__group { background: var(--card); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); }
.chg__headrow { display: flex; align-items: center; padding-right: 8px; }
.chg__head { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px 8px 9px 10px; border: none; background: none;
  border-radius: 6px; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.chg__head:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.chg__chev { flex: none; color: var(--muted); transition: transform .15s; }
[aria-expanded="true"] > .chg__chev { transform: rotate(90deg); }
.chg__glyph { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; font-size: 14px; background: color-mix(in srgb, var(--hd-stopped) 30%, transparent); }
.chg__name { font: 800 13.5px/1.2 var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chg__branch { flex: none; display: inline-flex; align-items: center; gap: 4px; font: 11px/1 var(--font-mono); color: var(--muted); }
.chg__when, .chg__count { flex: none; color: var(--muted); font-size: 12px; white-space: nowrap; }
.chg__count { color: var(--ink); }
.chg__head .chip { flex: none; }
.chg__go { flex: none; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: none; background: none; border-radius: 6px; color: var(--muted); cursor: pointer; opacity: .55; }
.chg__go:hover { opacity: 1; color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.chg__rows { list-style: none; margin: 0; padding: 0 12px 6px 40px; display: flex; flex-direction: column; }
.chg__row { padding: 6px 0; border-top: 1px solid var(--border); font-size: 12.5px; }
.chg__line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chg__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chg__row--local .chg__title { color: var(--warn-ink); }
.chg__meta { flex: none; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.chg__hash--local { background: color-mix(in srgb, var(--amber) 22%, var(--chip)) !important; }

/* ---- Info ---- */
.info__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 32px; max-width: 1100px; align-content: start; }
.info__col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.info__empty { margin: 0; color: var(--muted); font-size: 12.5px; padding: 18px; border: 1px dashed var(--border); border-radius: 8px; text-align: center; }
.info__note { margin: 0; font-size: 13px; line-height: 1.5; }
.info__shotmeta { margin: 0; font: 11px/1 var(--font-mono); color: var(--muted); }
.info__links { display: flex; flex-direction: column; gap: 6px; }
.info__link { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: var(--chip); color: var(--ink); text-decoration: none; font-size: 13px; }
.info__link:hover { background: var(--tile); }
.info__link svg { flex: none; color: var(--muted); }
.info__link-url { margin-left: auto; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font: 11px/1 var(--font-mono); }
.docs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.doc-link { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px; border: none; border-radius: 6px; background: var(--chip);
  color: var(--muted); font: 13px/1.2 var(--font-mono); text-align: left; cursor: pointer; }
.doc-link svg { flex: none; }
.doc-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-link:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, var(--chip)); }
.info__stack { display: flex; flex-direction: column; gap: 9px; }
.stack-group { display: grid; grid-template-columns: 74px 1fr; gap: 8px; align-items: baseline; }
.stack-group__label { font: 600 10px/1.6 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.stack-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.stack-pill { padding: 3px 8px; border-radius: 999px; background: var(--chip); color: var(--ink); font-size: 12px; line-height: 1.4; white-space: nowrap; }
.info__git { display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.info__git-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.info__git-branch { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 6px; border: none; border-radius: 4px;
  background: var(--chip); color: var(--ink); font: 12px/1 var(--font-mono); cursor: pointer; }
.info__git-branch:hover { background: var(--tile); }
.info__git-branch svg:last-child { color: var(--muted); }
.info__git-branch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.info__git-last { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.git__hash { font: 12px/1 var(--font-mono); background: var(--chip); padding: 3px 5px; border-radius: 4px; }
.info__git-files { display: flex; flex-wrap: wrap; gap: 4px; }
.info__git-file { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 6px; border-radius: 5px; background: var(--chip);
  color: var(--muted); font: 11px/1.5 var(--font-mono); white-space: nowrap; }
.info__git-file > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.info__git-code { flex: none; font-weight: 700; }
.info__git-file--A .info__git-code { color: var(--green); }
.info__git-file--D .info__git-code { color: var(--red); }
.info__git-file--M .info__git-code { color: var(--amber); }
.info__cwd { font: 11.5px/1.5 var(--font-mono); color: var(--muted); word-break: break-all; }
.info__tech-group { display: flex; flex-direction: column; gap: 6px; }
.info__tech { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font: 12px/1.3 var(--font-mono); color: var(--muted); }
/* the preview screenshot, drawn: the project's own page in its accent colour */
.shot { position: relative; display: flex; flex-direction: column; gap: 7px; aspect-ratio: 3 / 2; padding: 14px 16px; overflow: hidden;
  background: #fff; border: 1px solid var(--border); border-radius: 4px; color: #0f172a; }
.shot i { display: block; font-style: normal; }
.shot__nav { display: flex; gap: 6px; margin-bottom: 8px; }
.shot__nav b { width: 22px; height: 4px; border-radius: 2px; background: #e2e8f0; }
.shot__nav b:first-child { width: 38px; background: var(--accent); }
.shot__h { font: 700 15px/1.1 var(--font-ui); letter-spacing: -.01em; }
.shot__p { width: 80%; height: 5px; border-radius: 3px; background: #e2e8f0; }
.shot__p--short { width: 55%; }
.shot__btn { width: 56px; height: 14px; margin-top: 4px; border-radius: 4px; background: var(--accent); }
.shot__grid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: auto; }
.shot__grid b { height: 30px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 12%, #f1f5f9); }
.shot--big { aspect-ratio: auto; height: 100%; padding: 24px 28px; gap: 10px; border: none; border-radius: 0; }
.shot--big .shot__h { font-size: 26px; }
.shot--big .shot__btn { width: 96px; height: 24px; }
.shot--big .shot__grid b { height: 80px; }

/* ---- Consoles (Claude + shell) and Logs: the one dark instrument ---- */
.panel--console, .panel--logs { background: var(--term-bg); }
.con__bar, .log__bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; min-height: 31px; flex: none;
  font: 11px/1 var(--font-mono); color: #7c8799; border-bottom: 1px solid rgba(255,255,255,.07); }
.con__bar svg { flex: none; }
.con__cwd { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.con__wait, .con__busy { flex: none; display: flex; align-items: center; gap: 5px; color: var(--term-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.con__spin { display: inline-block; width: 8px; text-align: center; }
.con__model, .con__effort { display: inline-flex; align-items: center; gap: 3px; flex: none; padding: 2px 4px; margin: -2px -4px; border: none; border-radius: 4px;
  background: none; color: inherit; font: inherit; white-space: nowrap; cursor: pointer; }
.con__model:hover, .con__effort:hover { background: rgba(255,255,255,.08); color: #c9d1dd; }
.con__model svg, .con__effort svg { opacity: .7; }
.con__tokens, .con__size { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.con__status { flex: none; color: var(--term-accent); }
.log__bar .sect-btn { color: #7c8799; }
.log__bar .sect-btn:hover { color: var(--term-ink); }
.log__proc { font: 11px/1 var(--font-mono); color: var(--term-ink); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 5px; padding: 3px 6px; }

.term { flex: 1; margin: 0; padding: 10px 14px 14px 16px; overflow: auto; background: var(--term-bg); color: var(--term-ink);
  font: 13px/1.4 var(--font-mono); white-space: pre-wrap; word-break: break-word; cursor: text; outline: none; }
.term .p  { color: var(--term-accent); }
.term .d  { color: var(--term-dim); }
.term .w  { color: #fbbf24; }
.term .e  { color: #f87171; }
.term .i  { color: #7dd3fc; }
.term .b  { color: #f1f5f9; font-weight: 600; }
.term .u  { color: #c4b5fd; }
.term .r  { color: var(--term-ink); }
.term .c-prompt { color: #94a3b8; font-weight: 700; }
.term .c-dot { color: var(--term-accent); }
.term .c-star { color: #fbbf24; }
.term .c-sel { color: #f1f5f9; }
.term .c-sel .c-prompt { color: var(--term-accent); }
.term-line { display: block; min-height: 1.4em; }
.term-input { display: inline; outline: none; caret-color: var(--term-accent); min-width: 4px; }
.cursor { display: inline-block; width: 7px; height: 14px; vertical-align: -2px; background: var(--term-accent); animation: blink 1.1s steps(1) infinite; }
.term.is-blurred .cursor { background: none; box-shadow: inset 0 0 0 1px var(--term-accent); animation: none; }
.log--panel { font-size: 12px; line-height: 1.5; }

/* ---- Docs / Files / Preview: the bar over a light body ---- */
.doc__bar { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px; flex: none; border-bottom: 1px solid var(--border);
  color: var(--muted); font-size: 12.5px; }
.doc__bar > svg { flex: none; }
.doc__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 560; }
.doc__state { font-size: 11.5px; color: var(--warn-ink); }
.doc__body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.doc__view { padding: 20px 28px 40px; max-width: 880px; }
.prose { font-size: 13.5px; line-height: 1.65; color: var(--ink); }
.prose > * + * { margin-top: .8em; }
.prose h2 { margin: 1.2em 0 0; font-size: 16px; font-weight: 700; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 1.3em 0 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.prose p, .prose ul { margin: 0; }
.prose ul { padding-left: 1.15rem; }
.prose li + li { margin-top: .25em; }
.prose code { font: 12px var(--font-mono); background: var(--chip); border-radius: 4px; padding: 1px 5px; }
.prose pre { margin-top: .8em; padding: 10px 12px; background: var(--chip); border-radius: 6px; font: 12px/1.55 var(--font-mono); white-space: pre-wrap; overflow: auto; }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 1.2em 0; }
.code { flex: 1; margin: 0; padding: 14px 18px; overflow: auto; font: 12px/1.6 var(--font-mono); color: var(--ink); white-space: pre; background: var(--panel-bg); tab-size: 2; }
.code .ln { display: inline-block; width: 2.4em; margin-right: 12px; text-align: right; color: var(--faint); user-select: none; }
.files__split { flex: 1; min-height: 0; display: grid; grid-template-columns: 260px 1fr; }
.tree { list-style: none; margin: 0; padding: 8px 6px; overflow: auto; border-right: 1px solid var(--border); background: var(--bg); font-size: 12.5px; }
.tree__dir { display: flex; align-items: center; gap: 5px; padding: 4px 6px; color: var(--muted); }
.tree__dir svg { flex: none; }
.tree__row { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 6px; border: none; border-radius: 5px; background: none;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.tree__row--in { padding-left: 24px; }
.tree__row svg { flex: none; color: var(--muted); }
.tree__row span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree__row:hover { background: var(--sb-hover); }
.tree__row.is-sel { background: var(--sb-active); }
.tree__code { margin-left: auto; font: 700 10.5px/1 var(--font-mono); }
.tree__code--M { color: var(--amber); }
.tree__code--A { color: var(--green); }
.prev__nav { display: inline-flex; gap: 2px; flex: none; margin-left: -6px; }
.prev__url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink); }
.prev__frame { flex: 1; min-height: 0; background: #fff; }
.prev__msg { margin: 0; padding: 40px 22px; color: var(--muted); text-align: center; font-size: 13px; }

/* ---- Git ---- */
.git__grid { display: flex; flex-direction: column; gap: 22px; max-width: 760px; }
.git__upstream { font: 11.5px/1 var(--font-mono); }
.info__git-commit { display: flex; gap: 8px; align-items: flex-start; }
.info__git-msg { flex: 1; min-width: 0; padding: 7px 9px; resize: none; background: var(--bg); color: var(--ink); border: 1px solid var(--border);
  border-radius: 8px; font: 13px/1.4 var(--font-ui); outline: none; }
.info__git-msg:focus { border-color: color-mix(in srgb, var(--ink) 35%, var(--border)); }
.info__git-actions { display: flex; gap: 8px; }
.git__log, .git__history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.git__entry, .git__commit { padding: 7px 0; border-top: 1px solid var(--border); font-size: 13px; }
.git__entry:first-child, .git__commit:first-child { border-top: none; padding-top: 0; }
.git__entry-row { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.git__entry-date { flex: none; margin-top: 2px; font: 12px/1 var(--font-mono); background: var(--chip); padding: 3px 5px; border-radius: 4px; }
.git__entry--uncommitted .git__entry-date, .git__commit--local .git__hash { background: color-mix(in srgb, var(--amber) 22%, var(--chip)); }
.git__entry-toggle { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 4px; padding: 2px 0; border: none; background: none;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.git__entry-toggle:hover .git__entry-title { text-decoration: underline; }
.git__entry-chev { flex: none; margin-top: 3px; color: var(--muted); transition: transform .15s; }
[aria-expanded="true"] > .git__entry-chev { transform: rotate(90deg); }
.git__entry .chip, .git__commit .chip { flex: none; margin-top: 2px; }
.git__entry-body { margin: 6px 0 2px 23px; padding: 8px 12px; background: var(--tile); border-radius: 8px; font-size: 12.5px; line-height: 1.5; }
.git__entry-body ul { margin: 0; padding-left: 16px; }
.git__note { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 12.5px; color: var(--warn-ink); }
.git__commit { display: flex; align-items: flex-start; gap: 10px; }
.git__commit .git__hash { flex: none; margin-top: 1px; }
.git__commit-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.git__subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.git__meta { font-size: 11.5px; }
.git__divider { padding: 8px 0 4px; list-style: none; font: 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.git__divider + .git__commit, .git__divider + .git__entry { border-top: none; }

/* ---- Roadmap (panels.css .rm__*) ----
   One column, Linear-list style: TODO / IDEAS / DONE sections of slim rows. A row expands in place
   into its editor; hover-only affordances (grip, Start in Claude, → Todo) wait until it's pointed at. */
.rm { max-width: 760px; display: flex; flex-direction: column; gap: 22px; }
.rm__barcount { margin-left: auto; font: 11px/1 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rm__sect { display: flex; flex-direction: column; gap: 6px; }
.rm__head { display: flex; align-items: center; gap: 8px; }
.rm__n { font: 11px/1 var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.rm__donehead { width: max-content; padding: 0; border: none; background: none; color: inherit; font: inherit; cursor: pointer; }
.rm__chev { color: var(--muted); transition: transform .15s; }
.rm__donehead[aria-expanded="true"] .rm__chev { transform: rotate(90deg); }
.rm__add { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 34px; color: var(--muted);
  border: 1px dashed var(--border); border-radius: 4px; cursor: text; }
.rm__add:focus-within { border-style: solid; border-color: color-mix(in srgb, var(--ink) 30%, var(--border)); background: var(--card); }
.rm__add svg { flex: none; }
.rm__addin { flex: 1; min-width: 0; border: none; background: none; outline: none; font: inherit; font-size: 13.5px; color: var(--ink); }
.rm__add kbd { opacity: .8; }
.rm__add:focus-within kbd { visibility: hidden; }
.rm__list { display: flex; flex-direction: column; }
.rm__item { border-radius: 4px; }
.rm__item.is-open { background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); margin: 4px 0; }
.rm__line { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 8px 0 2px; border-radius: 4px; cursor: pointer; outline: none; }
.rm__line:hover, .rm__line:focus-visible { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.rm__item.is-open > .rm__line:hover { background: none; }
.rm__grip { flex: none; display: inline-flex; width: 14px; color: var(--muted); cursor: grab; opacity: 0; }
.rm__line:hover .rm__grip, .rm__step:hover .rm__grip { opacity: .7; }
.rm__check { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer; }
.rm__check:hover:not(:disabled) { color: var(--ink); }
.rm__check:disabled { opacity: .45; cursor: default; }
.rm__check.is-ready { color: var(--green); }
.rm__check.is-done { color: var(--muted); }
.rm__prio { flex: none; display: inline-flex; width: 14px; color: var(--muted); }
.rm__prio--3 { color: var(--red); }
.rm__prio--0 { opacity: .6; }
.rm__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--ink); }
.rm__item--done .rm__title { color: var(--muted); }
.rm__count, .rm__due { flex: none; display: inline-flex; align-items: center; gap: 4px; font: 11px/1 var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.rm__due.is-overdue { color: var(--red); }
.rm__acts { flex: none; display: inline-flex; gap: 2px; opacity: 0; }
.rm__line:hover .rm__acts, .rm__line:focus-within .rm__acts { opacity: 1; }
.rm__item.is-dragging, .rm__step.is-dragging { opacity: .4; }
.rm__item.drop-before, .rm__step.drop-before { box-shadow: inset 0 2px 0 var(--ink); }
.rm__item.drop-after, .rm__step.drop-after { box-shadow: inset 0 -2px 0 var(--ink); }
.rm__body { display: flex; flex-direction: column; gap: 10px; padding: 4px 12px 12px 46px; }
.rm__in { width: 100%; border: 1px solid transparent; border-radius: 4px; background: none; padding: 5px 7px; margin-left: -8px;
  font: inherit; font-size: 13px; color: var(--ink); }
.rm__in:hover { border-color: var(--border); }
.rm__in:focus { outline: none; border-color: color-mix(in srgb, var(--ink) 30%, var(--border)); background: var(--bg); }
.rm__in--title { font-size: 14.5px; font-weight: 600; }
.rm__notesin { resize: vertical; line-height: 1.45; }
.rm__notes { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.45; color: var(--ink); padding: 5px 7px; margin-left: -8px;
  border: 1px solid transparent; border-radius: 4px; cursor: text; }
.rm__notes:hover { border-color: var(--border); }
.rm__notes a { color: var(--link); }
.rm__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.rm__field { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.rm__sel { font: inherit; font-size: 12.5px; color: var(--ink); background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; }
.rm__date { font-family: var(--font-mono); font-size: 12px; }
.app button.rm__del { color: var(--muted); }
.rm__confirm { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; }
.rm__stepshead { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.rm__steps { display: flex; flex-direction: column; gap: 1px; }
.rm__step { display: flex; align-items: center; gap: 6px; border-radius: 4px; }
.rm__step .rm__in { margin-left: 0; padding: 3px 6px; }
.rm__stepbox { flex: none; margin: 0; accent-color: var(--green); }
.rm__steptitle.is-done { color: var(--muted); text-decoration: line-through; }
.rm__stepdel { opacity: 0; }
.rm__step:hover .rm__stepdel, .rm__stepdel:focus-visible { opacity: 1; }
.rm__stepadd { margin-left: 20px; width: calc(100% - 20px); }
.rm__empty { margin: 0; font-size: 13px; }

/* ---- Settings: the project form ---- */
.add-form { display: grid; grid-template-columns: max-content 1fr; gap: 11px 12px; align-items: center; }
.add-form label { justify-self: end; color: var(--muted); font-size: 12.5px; }
.add-form input { width: 100%; padding: 7px 10px; background: var(--bg); color: var(--ink); border: 1px solid var(--border); border-radius: 8px; font: 13px/1.4 var(--font-ui); outline: none; }
.add-form input:focus { border-color: color-mix(in srgb, var(--ink) 35%, var(--border)); }
.add-form input.mono { font: 12.5px/1.4 var(--font-mono); }
.add-form input[type=color] { width: 34px; height: 32px; padding: 2px; flex: none; cursor: pointer; }
.add-form .inline { display: flex; gap: 8px; align-items: center; }
.procs-head, .form-actions { grid-column: 1 / -1; }
.procs-head { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.keys__title { color: var(--muted); font-size: 11.5px; font-weight: 620; letter-spacing: .02em; text-transform: uppercase; }
.form-actions { display: flex; justify-content: flex-end; margin-top: 6px; }

/* ---- menus + toast ---- */
.app .menu { position: absolute; z-index: 30; min-width: 170px; padding: 4px; display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-lg); }
.menu__title { padding: 6px 10px 4px; font: 620 11px/1.2 var(--font-ui); letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.menu__item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: none; border-radius: 5px; background: none;
  color: var(--ink); font: 13px/1 var(--font-ui); text-align: left; cursor: pointer; }
.menu__item:hover, .menu__item:focus-visible { background: var(--sb-hover); outline: none; }
.menu__tick { display: inline-flex; justify-content: center; width: 14px; flex: none; color: var(--muted); }
.app .toast { position: absolute; bottom: 16px; left: 50%; z-index: 20; max-width: 86%; transform: translateX(-50%) translateY(6px);
  padding: 9px 14px; border-radius: 8px; color: #fff; background: var(--ink); font: 13px/1.35 var(--font-ui); box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.app .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.app .toast--note { color: var(--bg); }
.app .toast--ok { background: var(--primary); }
.app .toast--err { background: var(--red); }


/* ============================== newer app pieces (2.2) ==============================
   Copied from the app's shell.css / panels.css for parts the landing demo doesn't draw yet; the
   /docs mocks use them. Same class names and values as the app. */

/* project header: Terminal / Finder / Editor / Logs ride beside the gear at the state pill's
   height (shell.css .phd__tools / .phd__tool) */
.phd__text { min-width: 0; display: flex; align-items: center; }
.phd__row .phd__tools { display: flex; align-items: center; flex: none; gap: 6px; margin-left: 6px; }
.phd__tool { display: grid; place-items: center; flex: none; width: 19px; height: 19px; padding: 0; border: 0; border-radius: 999px;
  background: var(--chip); color: var(--muted); cursor: pointer; }
.phd__gear svg, .phd__tool svg { width: 13px; height: 13px; }

/* Overview: one strip, the identity then the view tabs on the strip's floor; a toolbar per view */
.ov__head { flex: none; align-items: stretch; gap: 20px; min-height: 50px; padding: 0 14px 0 16px;
  background: var(--tabs-bg); border-bottom: 1px solid var(--border); }
.ov__head .phd__id { align-self: center; }
.ov__head .phd__glyph { color: var(--muted); background: var(--chip); }
.ov__head .tabs__list { align-self: flex-end; height: 34px; padding-top: 0; }
.ov__head .tab { height: 34px; }
.ov__bar { flex: none; display: flex; align-items: center; gap: 16px; min-height: 46px; padding: 8px 22px; }
.ov__notes { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.ov__acts { display: flex; align-items: center; gap: 6px; flex: none; }
.ov__title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ov__link-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ov__more { flex: none; height: 20px; padding: 0 6px; border: 0; border-radius: 4px; background: var(--chip); color: var(--muted);
  font: 500 11px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.ov__links { flex-wrap: nowrap; align-items: center; }
.ov__link { height: 20px; padding: 0 6px; max-width: 150px; }

/* Setup, Skills and Cloudflare: one calm column of card rows (panels.css .wl__* / .sk__* / .cf__*) */
.wl__body { display: flex; flex-direction: column; gap: 26px; }
.wl__intro { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.wl__note { margin: -2px 0 2px; color: var(--muted); font-size: 12.5px; }
.wl__rows { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.wl__row { display: grid; grid-template-columns: 18px 8px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 11px 14px; }
.wl__row + .wl__row { border-top: 1px solid var(--border); }
.wl__row > .sb__dot { width: 8px; height: 8px; }
.wl__row.is-soon .wl__main { opacity: .6; }
.wl__check { margin: 0; width: 15px; height: 15px; accent-color: var(--primary); }
.wl__check-gap { width: 15px; }
.wl__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wl__title { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.wl__blurb { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.wl__cmd { align-self: flex-start; max-width: 100%; margin-top: 3px; padding: 3px 6px; font: 11px/1.4 var(--font-mono); color: var(--muted);
  background: var(--chip); border-radius: var(--r-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl__action { display: flex; align-items: center; justify-content: flex-end; min-width: 96px; }
.wl__state { font-size: 12px; color: var(--muted); text-align: right; }
.wl__ok { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.wl__ok svg { color: var(--green); }
.sk__row { grid-template-columns: 8px minmax(0, 1fr) auto; }
.sk__row.is-off .wl__main { opacity: .6; }
.sk__chip { flex: none; font-weight: 400; }
.sk__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sk__path { font: 11px/1.4 var(--font-mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk__action { gap: 6px; }
.sk__mode { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; font: 12.5px/1 var(--font-ui); color: var(--ink); background: var(--card);
  border: 1px solid var(--border); border-radius: var(--r-md); }
.sk__mode svg { color: var(--muted); }
.sk__filterwrap { position: relative; display: inline-flex; align-items: center; }
.sk__filtericon { position: absolute; left: 8px; color: var(--muted); pointer-events: none; }
.sk__filter { display: inline-flex; align-items: center; width: 180px; height: 28px; padding: 0 8px 0 27px; font: 12.5px/1 var(--font-ui); color: var(--muted);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); }
.cf__row { grid-template-columns: 8px minmax(0, 1fr) auto; }
.cf__row > .sb__dot--warn { background: var(--amber); }
.cf__row .wl__title { flex-wrap: wrap; }
.cf__proj { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-weight: 400; }
.cf__proj-glyph { font-size: 11px; line-height: 1; }
.cf__hosts { display: flex; flex-wrap: wrap; gap: 2px 12px; min-width: 0; }
.cf__host { font: 11.5px/1.45 var(--font-mono); color: var(--muted); text-decoration: none; overflow-wrap: anywhere; }
.cf__action { gap: 4px; min-width: 0; }
.cf__action .wl__state { margin-right: 6px; font-variant-numeric: tabular-nums; }
.cf__btn { display: inline-flex; padding: 5px; color: var(--muted); }

/* find in the open file: after the doc bar's spacer, before its buttons (panels.css .find) */
.find { display: inline-flex; align-items: center; gap: 2px; flex: none; position: relative; }
.find__icon { position: absolute; left: 8px; color: var(--muted); pointer-events: none; }
.find__input { display: inline-flex; align-items: center; width: 200px; height: 28px; padding: 0 76px 0 27px; font: 12.5px/1 var(--font-ui); color: var(--ink); background: var(--card);
  border: 1px solid color-mix(in srgb, var(--ink) 35%, var(--border)); border-radius: var(--r-md); }
.find__count { position: absolute; right: 68px; width: 66px; text-align: right; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap; overflow: hidden; }
.app .find button.ghost.icon { width: 28px; height: 28px; }
.find mark { background: color-mix(in srgb, var(--amber) 45%, transparent); color: inherit; border-radius: 2px; }
.find mark.is-current, .prose mark.is-current { background: var(--amber); }
.prose mark { background: color-mix(in srgb, var(--amber) 35%, transparent); color: inherit; border-radius: 2px; }

/* dialogs, the quick switcher and menu extras (shell.css dialog.dlg / .sw__* / .menu__hint) */
.app .dlg { padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--ink);
  box-shadow: var(--shadow-card), 0 20px 50px rgba(0,0,0,.2); overflow: hidden; }
.dlg__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 620; }
.dlg__body { padding: 16px; overflow: auto; }
.sw__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--muted); }
.sw__input { flex: 1; color: var(--ink); font: 15px/1.2 var(--font-ui); }
.sw__list { list-style: none; margin: 0; padding: 6px; }
.sw__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; font-size: 13.5px; }
.sw__item.is-sel { background: var(--sb-hover); }
.sw__emoji { width: 20px; text-align: center; flex: none; color: var(--muted); }
.sw__name { font-weight: 560; }
.sw__tag { margin-left: auto; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
.sw__hint { padding: 8px 14px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11.5px; }
.menu__item kbd { margin-left: auto; }
.menu__hint { margin-left: auto; padding-left: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--muted); }
.menu__item svg { flex: none; color: var(--muted); }
.sb__conn { margin-left: auto; font-size: 11px; color: var(--sb-muted); font-variant-numeric: tabular-nums; }
.app .pill--idle { background: var(--hd-stopped); }

/* the project form's extras (panels.css .add-form .check / .field-note / .form-actions-wrap) */
.add-form .check { grid-column: 2; display: flex; align-items: center; gap: 8px; justify-self: start; color: var(--ink); font-size: 13px; }
.add-form .check input { width: auto; margin: 0; }
.add-form .field-note { grid-column: 2; margin-top: -6px; color: var(--muted); font-size: 11.5px; min-height: 1em; }
.form-actions-wrap { grid-column: 1 / -1; margin-top: 6px; border-top: 1px solid var(--border); padding-top: 14px; }
.form-actions-wrap .form-actions { gap: 8px; margin-top: 0; }
.dlg .seg { margin-bottom: 16px; }

/* ============================== motion ============================== */
@keyframes pulse  { 0%,100% { opacity: 1; } 50% { opacity: .70; } }
@keyframes soft   { 0%,100% { opacity: 1; } 50% { opacity: .6; } }
@keyframes blink  { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

/* ============================== the demo at window widths ============================== */
/* sized by the window and its workspace, not the viewport: the window is narrower in the hero than the page */
@container app (max-width: 780px) {
  .shell { grid-template-columns: 200px 1fr; }
}
@container app (max-width: 600px) {
  .shell, .shell.sb-collapsed { grid-template-columns: 52px 1fr; }
  .shell .sb__brand .logomark, .shell .sb__filterwrap, .shell .sb__name, .shell .sb__group-count,
  .shell .sb__group-mark, .shell .sb__fold, .shell .sb__collapse { display: none; }
  .shell .sb__brand .brand-mark { display: block; }
  .shell .sb__head { justify-content: center; padding: 38px 0 8px; }
  .shell .sb__item { justify-content: center; padding: 0; }
  .shell .sb__item--in-folder { padding-left: 0; }
  .shell .sb__marks { position: absolute; top: 3px; right: 3px; gap: 2px; }
  .shell .sb__list .sb__dot { position: absolute; left: calc(50% + 6px); top: calc(50% + 6px); box-shadow: 0 0 0 2px var(--sb-bg); }
  .shell .sb__group { justify-content: center; padding: 0; min-height: 24px; margin-top: 10px; }
  .shell .sb__foot { flex-direction: column; padding: 8px 0; }
}
@container work (max-width: 600px) {
  .phd__tools, .con__size, .con__status { display: none; }
  .info__grid { grid-template-columns: minmax(0, 1fr); }
  .ov__rows { display: flex; flex-direction: column; }
  .ov__row { grid-template-columns: 46px minmax(0, 1fr) auto auto auto; column-gap: 10px; }
  .ov__procs, .ov__git, .ov__road, .ov__road[hidden], .ov__links, .chg__branch, .chg__count, .chg__when { display: none; }
  .rm__body { padding-left: 12px; }
  .chg__rows { padding-left: 18px; }
  .files__split { grid-template-columns: minmax(120px, 38%) 1fr; }
}
@container work (max-width: 440px) {
  .phd { gap: 8px; padding-left: 12px; }
  .phd__actions { gap: 8px; }
  .phd__glyph { width: 30px; height: 30px; font-size: 17px; }
  .phd .tile--sq { width: 30px; height: 30px; }
  .phd .tile svg { width: 18px; height: 18px; }
  .con__tokens, .ov__state, .chg__head .chip, .ov__gitsum, .ov__roadsum, .prev__nav, .rm__barcount { display: none; }
  .doc__bar .ghost { padding: 6px 8px; }
  .files__split { grid-template-columns: minmax(0, 1fr); }
  .tree { display: none; }
}