@momoi-labs/kiso 0.1.0 → 0.3.0

package/kiso/ui.css

@@ -0,0 +1,971 @@
+/* ===========================================================================
+   Kiso v2 — component layer (prototype)
+   Every value here resolves to a token in tokens.css. No raw hex, no raw px
+   for anything a token covers.
+   =========================================================================== */
+
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html { -webkit-text-size-adjust: 100%; }
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--color-background);
+  color: var(--color-foreground);
+  font-family: var(--font-body);
+  font-size: var(--type-size-body);
+  font-weight: var(--type-weight-regular);
+  line-height: var(--type-line-height-normal);
+  letter-spacing: var(--type-letter-spacing-normal);
+  -webkit-font-smoothing: antialiased;
+  font-feature-settings: "cv11", "ss01";
+  font-variant-numeric: tabular-nums;
+}
+
+::selection { background: light-dark(var(--color-accent-200), var(--color-accent-800)); color: light-dark(var(--color-accent-900), var(--color-accent-50)); }
+
+/* Focus: one ring, everywhere, violet. This is the accent's main job now. */
+:focus-visible {
+  outline: 2px solid var(--color-ring);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+:focus:not(:focus-visible) { outline: none; }
+
+/* --- typography roles ---------------------------------------------------- */
+h1, h2, h3, h4, p, figure { margin: 0; }
+
+.t-display {
+  font-family: var(--font-heading);
+  font-size: var(--type-size-display);
+  font-weight: var(--type-weight-semibold);
+  line-height: var(--type-line-height-tight);
+  letter-spacing: var(--type-letter-spacing-display);
+}
+.t-h1 {
+  font-family: var(--font-heading);
+  font-size: var(--type-size-h1);
+  font-weight: var(--type-weight-semibold);
+  line-height: var(--type-line-height-tight);
+  letter-spacing: var(--type-letter-spacing-heading);
+}
+.t-h2 {
+  font-family: var(--font-heading);
+  font-size: var(--type-size-h2);
+  font-weight: var(--type-weight-semibold);
+  line-height: var(--type-line-height-snug);
+  letter-spacing: var(--type-letter-spacing-heading);
+}
+.t-h3 {
+  font-family: var(--font-heading);
+  font-size: var(--type-size-h3);
+  font-weight: var(--type-weight-semibold);
+  line-height: var(--type-line-height-snug);
+  letter-spacing: var(--type-letter-spacing-heading);
+}
+.t-body     { font-size: var(--type-size-body); }
+.t-label    { font-size: var(--type-size-label); font-weight: var(--type-weight-medium); }
+.t-metadata { font-size: var(--type-size-metadata); line-height: var(--type-line-height-normal); }
+.t-caps {
+  font-size: var(--type-size-metadata);
+  font-weight: var(--type-weight-semibold);
+  letter-spacing: var(--type-letter-spacing-caps);
+  text-transform: uppercase;
+  color: var(--color-subtle-foreground);
+}
+.t-mono, .mono, code, pre, kbd {
+  font-family: var(--font-mono);
+  font-size: 0.925em;
+  font-variant-ligatures: none;
+}
+.t-numeric {
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum";
+}
+
+.muted    { color: var(--color-muted-foreground); }
+.subtle   { color: var(--color-subtle-foreground); }
+.fg       { color: var(--color-foreground); }
+.success  { color: var(--color-success); }
+.warning  { color: var(--color-warning); }
+.danger   { color: var(--color-danger); }
+.info     { color: var(--color-info); }
+.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.hidden   { display: none !important; }
+
+a, .link {
+  color: var(--color-link);
+  text-decoration: none;
+  text-underline-offset: 3px;
+  text-decoration-thickness: 1px;
+}
+a:hover, .link:hover { text-decoration: underline; }
+
+/* --- layout helpers ------------------------------------------------------ */
+.stack   { display: grid; gap: var(--spacing-lg); }
+.stack-sm{ display: grid; gap: var(--spacing-sm); }
+.stack-xs{ display: grid; gap: var(--spacing-xs); }
+.row     { display: flex; align-items: center; gap: var(--spacing-sm); }
+.row-md  { display: flex; align-items: center; gap: var(--spacing-md); }
+.row-wrap{ display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; }
+.between { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); }
+.grow    { flex: 1; min-width: 0; }
+.separator { height: 1px; background: var(--color-border); border: 0; margin: 0; }
+.separator-v { width: 1px; align-self: stretch; background: var(--color-border); }
+/* A configuration row: name on the left, control flushed right. One rule, so a
+   settings row cannot drift between screens. Inline padding is left to the
+   container — inside a Card the row aligns with the body, and the sidebar
+   footer below re-adds the nav item's inset so labels line up. */
+.settings-row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); padding-block: var(--spacing-xs); }
+
+.icon { width: var(--size-icon-md); height: var(--size-icon-md); flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
+.icon-sm { width: var(--size-icon-sm); height: var(--size-icon-sm); }
+.icon-lg { width: var(--size-icon-lg); height: var(--size-icon-lg); }
+
+/* ===========================================================================
+   Button
+   =========================================================================== */
+.btn {
+  --btn-height: var(--size-control-md);
+  --btn-padding-x: var(--spacing-md);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  height: var(--btn-height);
+  padding-inline: var(--btn-padding-x);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-foreground);
+  font-family: var(--font-body);
+  font-size: var(--type-size-body);
+  font-weight: var(--type-weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  text-decoration: none;
+  transition:
+    background var(--motion-duration-fast) var(--motion-easing-standard),
+    border-color var(--motion-duration-fast) var(--motion-easing-standard),
+    color var(--motion-duration-fast) var(--motion-easing-standard);
+}
+.btn:disabled, .btn[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+  pointer-events: none;
+}
+.btn:hover { text-decoration: none; }
+
+.btn-primary {
+  background: var(--color-primary);
+  color: var(--color-primary-foreground);
+  box-shadow: var(--shadow-xs);
+}
+.btn-primary:hover { background: var(--color-primary-hover); }
+
+.btn-secondary {
+  background: var(--color-secondary);
+  color: var(--color-secondary-foreground);
+}
+.btn-secondary:hover { background: var(--color-secondary-hover); }
+
+.btn-outline {
+  background: var(--color-card);
+  border-color: var(--color-input);
+  color: var(--color-foreground);
+  box-shadow: var(--shadow-xs);
+}
+.btn-outline:hover { background: var(--color-accent-surface); }
+
+.btn-ghost { color: var(--color-muted-foreground); }
+.btn-ghost:hover { background: var(--color-accent-surface-hover); color: var(--color-foreground); }
+
+.btn-danger {
+  background: var(--color-danger);
+  color: var(--color-danger-foreground);
+  box-shadow: var(--shadow-xs);
+}
+.btn-danger:hover { filter: brightness(0.93); }
+
+.btn-danger-ghost { color: var(--color-danger); }
+.btn-danger-ghost:hover { background: var(--color-danger-surface); }
+
+.btn-link { color: var(--color-link); padding-inline: 0; height: auto; }
+.btn-link:hover { text-decoration: underline; }
+
+.btn-xs { --btn-height: var(--size-control-xs); --btn-padding-x: var(--spacing-sm); font-size: var(--type-size-label); border-radius: var(--radius-sm); }
+.btn-sm { --btn-height: var(--size-control-sm); --btn-padding-x: var(--spacing-md); font-size: var(--type-size-label); }
+.btn-lg { --btn-height: var(--size-control-lg); --btn-padding-x: var(--spacing-lg); }
+
+.btn-icon { --btn-padding-x: 0; width: var(--btn-height); }
+.btn-block { width: 100%; }
+
+/* Loading: the label stays in flow so the button never resizes. */
+.btn[data-loading="true"] { position: relative; color: transparent; pointer-events: none; }
+.btn[data-loading="true"]::after {
+  content: "";
+  position: absolute;
+  width: var(--size-icon-md); height: var(--size-icon-md);
+  border: 2px solid currentColor;
+  border-radius: var(--radius-full);
+  border-top-color: transparent;
+  animation: spin 600ms linear infinite;
+}
+.btn-primary[data-loading="true"]::after { border-color: var(--color-primary-foreground); border-top-color: transparent; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* Button group / segmented control */
+.btn-group { display: inline-flex; }
+.btn-group .btn { border-radius: 0; border-color: var(--color-input); background: var(--color-card); }
+.btn-group .btn:first-child { border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); }
+.btn-group .btn:last-child  { border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); }
+.btn-group .btn + .btn { margin-inline-start: -1px; }
+.btn-group .btn:hover { background: var(--color-accent-surface); }
+.btn-group .btn[aria-pressed="true"] { background: var(--color-secondary); z-index: 1; }
+
+.segmented {
+  display: inline-flex;
+  gap: var(--spacing-2xs);
+  padding: var(--spacing-2xs);
+  background: var(--color-muted);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+}
+.segmented button {
+  height: var(--size-control-sm);
+  padding-inline: var(--spacing-md);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-muted-foreground);
+  font: inherit;
+  font-size: var(--type-size-label);
+  font-weight: var(--type-weight-medium);
+  cursor: pointer;
+  transition: background var(--motion-duration-fast) var(--motion-easing-standard);
+}
+.segmented button:hover { color: var(--color-foreground); }
+.segmented button[aria-selected="true"] {
+  background: var(--color-card);
+  color: var(--color-foreground);
+  box-shadow: var(--shadow-xs);
+}
+
+/* ===========================================================================
+   Badge / pill / status
+   =========================================================================== */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  height: 20px;
+  padding-inline: var(--spacing-sm);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  font-size: var(--type-size-metadata);
+  font-weight: var(--type-weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+}
+.badge-solid   { background: var(--color-primary); color: var(--color-primary-foreground); }
+.badge-neutral { background: var(--color-secondary); color: var(--color-secondary-foreground); }
+.badge-outline { border-color: var(--color-border-strong); color: var(--color-muted-foreground); }
+.badge-success { background: var(--color-success-surface); border-color: var(--color-success-border); color: var(--color-success); }
+.badge-warning { background: var(--color-warning-surface); border-color: var(--color-warning-border); color: var(--color-warning); }
+.badge-danger  { background: var(--color-danger-surface);  border-color: var(--color-danger-border);  color: var(--color-danger); }
+.badge-info    { background: var(--color-info-surface);    border-color: var(--color-info-border);    color: var(--color-info); }
+.badge-pill    { border-radius: var(--radius-full); padding-inline: var(--spacing-md); }
+.badge-count   { min-width: 20px; justify-content: center; padding-inline: var(--spacing-xs); border-radius: var(--radius-full); }
+.badge .mono   { font-size: inherit; }
+
+.dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex: none; }
+.dot-lg { width: 8px; height: 8px; }
+.dot-pulse { position: relative; }
+.dot-pulse::after {
+  content: ""; position: absolute; inset: -3px;
+  border-radius: var(--radius-full);
+  background: currentColor; opacity: 0.25;
+  animation: pulse 2s var(--motion-easing-standard) infinite;
+}
+@keyframes pulse { 0%,100% { transform: scale(1); opacity: .25 } 50% { transform: scale(1.4); opacity: 0 } }
+
+/* ===========================================================================
+   Form controls
+   =========================================================================== */
+.field { display: grid; gap: var(--spacing-xs); }
+.field > label, .label {
+  font-size: var(--type-size-label);
+  font-weight: var(--type-weight-medium);
+  color: var(--color-foreground);
+  letter-spacing: var(--type-letter-spacing-label);
+}
+.field-hint  { font-size: var(--type-size-label); color: var(--color-muted-foreground); }
+.field-error { font-size: var(--type-size-label); color: var(--color-danger); display: flex; align-items: center; gap: var(--spacing-xs); }
+.field-required { color: var(--color-danger); }
+
+.input, .select, .textarea {
+  width: 100%;
+  min-width: 0;
+  height: var(--size-control-md);
+  padding-inline: var(--spacing-md);
+  border: 1px solid var(--color-input);
+  border-radius: var(--radius-md);
+  background: var(--color-card);
+  color: var(--color-foreground);
+  font-family: var(--font-body);
+  font-size: var(--type-size-body);
+  line-height: 1;
+  box-shadow: var(--shadow-xs);
+  transition: border-color var(--motion-duration-fast) var(--motion-easing-standard);
+}
+.textarea { height: auto; min-height: 76px; padding-block: var(--spacing-sm); line-height: var(--type-line-height-normal); resize: vertical; }
+.input::placeholder, .textarea::placeholder { color: var(--color-subtle-foreground); }
+.input:hover, .select:hover, .textarea:hover { border-color: var(--color-border-strong); }
+.input:disabled, .select:disabled, .textarea:disabled {
+  background: var(--color-disabled-surface);
+  color: var(--color-disabled);
+  cursor: not-allowed;
+}
+.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--color-danger); }
+.input[aria-invalid="true"]:focus-visible { outline-color: var(--color-danger); }
+.input-sm { height: var(--size-control-sm); font-size: var(--type-size-label); }
+.input.mono, .textarea.mono { font-size: var(--type-size-label); }
+
+.select {
+  appearance: none;
+  padding-inline-end: var(--spacing-2xl);
+  /* neutral-500 sits between both themes, so the chevron needs no fork */
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a857f' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--spacing-md) center;
+  background-size: var(--size-icon-md);
+}
+
+/* input with a leading icon or a trailing affix */
+.input-group { position: relative; display: flex; align-items: center; }
+.input-group .icon {
+  position: absolute;
+  inset-inline-start: var(--spacing-md);
+  color: var(--color-subtle-foreground);
+  pointer-events: none;
+}
+.input-group .icon ~ .input { padding-inline-start: calc(var(--spacing-md) * 2 + var(--size-icon-md)); }
+.input-group .affix {
+  position: absolute;
+  inset-inline-end: var(--spacing-sm);
+  display: flex; align-items: center; gap: var(--spacing-xs);
+}
+
+/* checkbox / radio */
+.check {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--spacing-sm);
+  cursor: pointer;
+  font-size: var(--type-size-body);
+}
+.check input[type="checkbox"], .check input[type="radio"] {
+  appearance: none;
+  margin: 0;
+  width: var(--size-icon-md);
+  height: var(--size-icon-md);
+  flex: none;
+  margin-block-start: 3px;
+  border: 1px solid var(--color-input);
+  border-radius: var(--radius-xs);
+  background: var(--color-card);
+  cursor: pointer;
+  transition: background var(--motion-duration-fast) var(--motion-easing-standard);
+}
+.check input[type="radio"] { border-radius: var(--radius-full); }
+.check input:checked {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+}
+/* The tick is a mask painted with `primary-foreground`, so it inverts with
+   the fill through a token. Two per-theme data URIs used to do this job and
+   they could not follow `color-scheme` when the theme is left to the OS. */
+.check input[type="checkbox"] { display: inline-grid; place-content: center; }
+.check input[type="checkbox"]::after {
+  content: "";
+  width: 10px; height: 10px;
+  background: var(--color-primary-foreground);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E") center / contain no-repeat;
+  scale: 0;
+  transition: scale var(--motion-duration-fast) var(--motion-easing-standard);
+}
+.check input[type="checkbox"]:checked::after { scale: 1; }
+.check input[type="radio"]:checked {
+  box-shadow: inset 0 0 0 3px var(--color-card);
+}
+.check input:disabled { background: var(--color-disabled-surface); border-color: var(--color-border); cursor: not-allowed; }
+.check-text { display: grid; gap: var(--spacing-2xs); }
+
+/* switch */
+.switch { display: inline-flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; }
+.switch input {
+  appearance: none;
+  margin: 0;
+  position: relative;
+  width: 32px; height: 18px; flex: none;
+  border-radius: var(--radius-full);
+  background: var(--color-border-strong);
+  cursor: pointer;
+  transition: background var(--motion-duration-fast) var(--motion-easing-standard);
+}
+.switch input::after {
+  content: "";
+  position: absolute;
+  top: 2px; inset-inline-start: 2px;
+  width: 14px; height: 14px;
+  border-radius: var(--radius-full);
+  background: var(--color-white);
+  box-shadow: var(--shadow-xs);
+  transition: translate var(--motion-duration-fast) var(--motion-easing-standard);
+}
+.switch input:checked { background: var(--color-primary); }
+.switch input:checked::after { translate: 14px 0; background: var(--color-primary-foreground); }
+.switch input:disabled { opacity: .5; cursor: not-allowed; }
+
+/* range */
+.range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: var(--radius-full); background: var(--color-secondary); }
+.range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: var(--size-icon-md); height: var(--size-icon-md);
+  border-radius: var(--radius-full);
+  background: var(--color-card);
+  border: 1px solid var(--color-border-strong);
+  box-shadow: var(--shadow-sm);
+  cursor: grab;
+}
+
+/* ===========================================================================
+   Card
+   =========================================================================== */
+.card {
+  position: relative;
+  background: var(--color-card);
+  color: var(--color-card-foreground);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-surface);
+  box-shadow: var(--shadow-xs);
+}
+.card-header { padding: var(--spacing-lg) var(--spacing-lg) 0; display: grid; gap: var(--spacing-2xs); }
+.card-body   { padding: var(--spacing-lg); display: grid; gap: var(--spacing-md); }
+.card-footer {
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-top: 1px solid var(--color-border);
+  display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-sm);
+  background: var(--color-muted);
+  border-end-start-radius: var(--radius-surface);
+  border-end-end-radius: var(--radius-surface);
+}
+.card-header + .card-body { padding-block-start: var(--spacing-md); }
+.card-interactive { cursor: pointer; transition: border-color var(--motion-duration-fast) var(--motion-easing-standard); }
+.card-interactive:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
+
+/* stat / KPI tile */
+.stat { display: grid; gap: var(--spacing-2xs); padding: var(--spacing-lg); }
+.stat-label { font-size: var(--type-size-label); color: var(--color-muted-foreground); font-weight: var(--type-weight-regular); }
+.stat-value {
+  font-size: var(--type-size-display);
+  font-weight: var(--type-weight-semibold);
+  line-height: var(--type-line-height-tight);
+  letter-spacing: var(--type-letter-spacing-display);
+  font-variant-numeric: tabular-nums;
+}
+.stat-foot { font-size: var(--type-size-label); color: var(--color-muted-foreground); margin-block-start: var(--spacing-sm); }
+.stat-delta { display: inline-flex; align-items: center; gap: var(--spacing-xs); font-size: var(--type-size-metadata); font-weight: var(--type-weight-medium); }
+
+/* ===========================================================================
+   Table
+   =========================================================================== */
+.table-wrap {
+  position: relative;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-surface);
+  background: var(--color-card);
+}
+/* Scrolling moves to the inner element so the corner marks, which sit just
+   outside the frame, are not clipped away. */
+.table-wrap > .table-scroll { overflow: auto; border-radius: inherit; }
+table.table { width: 100%; border-collapse: collapse; font-size: var(--type-size-body); }
+.table thead th {
+  position: sticky; top: 0; z-index: 1;
+  background: var(--color-muted);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-bottom: 1px solid var(--color-border);
+  text-align: start;
+  font-size: var(--type-size-label);
+  font-weight: var(--type-weight-medium);
+  color: var(--color-muted-foreground);
+  white-space: nowrap;
+}
+.table tbody td {
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-bottom: 1px solid var(--color-border);
+  vertical-align: middle;
+  height: var(--size-control-lg);
+}
+.table tbody tr:last-child td { border-bottom: 0; }
+.table tbody tr:hover { background: var(--color-accent-surface); }
+.table tbody tr[aria-selected="true"] { background: var(--color-selected); }
+.table .num { text-align: end; font-variant-numeric: tabular-nums; }
+.table .col-tight { width: 1%; white-space: nowrap; }
+.th-sort { display: inline-flex; align-items: center; gap: var(--spacing-xs); cursor: pointer; background: none; border: 0; font: inherit; color: inherit; padding: 0; }
+.table-toolbar { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-md); border-bottom: 1px solid var(--color-border); }
+.table-footer  { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md); border-top: 1px solid var(--color-border); font-size: var(--type-size-label); color: var(--color-muted-foreground); }
+
+/* ===========================================================================
+   Tabs
+   =========================================================================== */
+.tabs { display: flex; gap: var(--spacing-lg); border-bottom: 1px solid var(--color-border); }
+.tabs button {
+  position: relative;
+  height: var(--size-control-lg);
+  padding: 0;
+  border: 0; background: none;
+  font: inherit;
+  font-size: var(--type-size-body);
+  font-weight: var(--type-weight-medium);
+  color: var(--color-muted-foreground);
+  cursor: pointer;
+}
+.tabs button:hover { color: var(--color-foreground); }
+.tabs button[aria-selected="true"] { color: var(--color-foreground); }
+.tabs button[aria-selected="true"]::after {
+  content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px;
+  background: var(--color-primary);
+  border-radius: var(--radius-full);
+}
+
+/* ===========================================================================
+   Alert / callout
+   =========================================================================== */
+.alert {
+  display: flex;
+  gap: var(--spacing-md);
+  padding: var(--spacing-md);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-card);
+  font-size: var(--type-size-body);
+}
+.alert .icon { margin-block-start: 2px; }
+.alert-title { font-weight: var(--type-weight-medium); }
+.alert-body  { color: var(--color-muted-foreground); font-size: var(--type-size-label); }
+.alert-info    { background: var(--color-info-surface);    border-color: var(--color-info-border); }
+.alert-info    > .icon { color: var(--color-info); }
+.alert-success { background: var(--color-success-surface); border-color: var(--color-success-border); }
+.alert-success > .icon { color: var(--color-success); }
+.alert-warning { background: var(--color-warning-surface); border-color: var(--color-warning-border); }
+.alert-warning > .icon { color: var(--color-warning); }
+.alert-danger  { background: var(--color-danger-surface);  border-color: var(--color-danger-border); }
+.alert-danger  > .icon { color: var(--color-danger); }
+
+/* ===========================================================================
+   Dialog / drawer / overlay
+   =========================================================================== */
+.overlay {
+  position: fixed; inset: 0; z-index: 50;
+  display: grid; place-items: center;
+  padding: var(--spacing-lg);
+  background: var(--color-overlay);
+  backdrop-filter: blur(2px);
+}
+.dialog {
+  position: relative;
+  width: 100%; max-width: 440px;
+  background: var(--color-popover);
+  color: var(--color-popover-foreground);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-surface);
+  box-shadow: var(--shadow-lg);
+  animation: dialog-in var(--motion-duration-normal) var(--motion-easing-standard);
+}
+@keyframes dialog-in { from { opacity: 0; translate: 0 8px; scale: .98 } }
+.dialog-header { padding: var(--spacing-lg) var(--spacing-lg) 0; display: grid; gap: var(--spacing-2xs); }
+.dialog-body   { padding: var(--spacing-lg); display: grid; gap: var(--spacing-lg); }
+.dialog-header + .dialog-body { padding-block-start: var(--spacing-md); }
+.dialog-footer { padding: var(--spacing-md) var(--spacing-lg); border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: var(--spacing-sm); background: var(--color-muted); border-end-start-radius: var(--radius-surface); border-end-end-radius: var(--radius-surface); }
+
+/* ===========================================================================
+   Menu / popover / tooltip / command palette
+   =========================================================================== */
+.menu {
+  min-width: 200px;
+  padding: var(--spacing-xs);
+  background: var(--color-popover);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+}
+.menu-item {
+  display: flex; align-items: center; gap: var(--spacing-sm);
+  width: 100%;
+  height: var(--size-control-sm);
+  padding-inline: var(--spacing-sm);
+  border: 0; border-radius: var(--radius-md);
+  background: none; color: var(--color-foreground);
+  font: inherit; font-size: var(--type-size-body);
+  text-align: start; text-decoration: none;
+  cursor: pointer;
+}
+.menu-item:hover { background: var(--color-accent-surface-hover); }
+.menu-item .icon { color: var(--color-muted-foreground); }
+.menu-item.is-danger { color: var(--color-danger); }
+.menu-item.is-danger:hover { background: var(--color-danger-surface); }
+.menu-item .kbd { margin-inline-start: auto; }
+.menu-label { padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-xs); }
+.menu-separator { height: 1px; background: var(--color-border); margin: var(--spacing-xs) calc(var(--spacing-xs) * -1); }
+
+.kbd, kbd {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 18px; height: 18px;
+  padding-inline: var(--spacing-xs);
+  border: 1px solid var(--color-border);
+  border-bottom-width: 2px;
+  border-radius: var(--radius-xs);
+  background: var(--color-muted);
+  color: var(--color-muted-foreground);
+  font-family: var(--font-mono);
+  font-size: var(--type-size-metadata);
+  line-height: 1;
+}
+
+.tooltip {
+  display: inline-block;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border-radius: var(--radius-md);
+  background: var(--color-primary);
+  color: var(--color-primary-foreground);
+  font-size: var(--type-size-label);
+  line-height: var(--type-line-height-tight);
+  box-shadow: var(--shadow-md);
+}
+
+.palette {
+  width: 100%; max-width: 560px;
+  background: var(--color-popover);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-surface);
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+}
+.palette-input {
+  display: flex; align-items: center; gap: var(--spacing-sm);
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-bottom: 1px solid var(--color-border);
+}
+.palette-input input { flex: 1; border: 0; background: none; color: inherit; font: inherit; outline: none; }
+.palette-list { padding: var(--spacing-xs); max-height: 280px; overflow-y: auto; }
+.palette-list .menu-item[aria-selected="true"] { background: var(--color-selected); color: var(--color-selected-foreground); }
+
+/* ===========================================================================
+   Toast
+   =========================================================================== */
+.toast-region { position: fixed; inset-block-end: var(--spacing-lg); inset-inline-end: var(--spacing-lg); z-index: 60; display: grid; gap: var(--spacing-sm); }
+.toast {
+  display: flex; align-items: flex-start; gap: var(--spacing-md);
+  width: 340px;
+  padding: var(--spacing-md);
+  background: var(--color-popover);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  animation: toast-in var(--motion-duration-normal) var(--motion-easing-standard);
+}
+@keyframes toast-in { from { opacity: 0; translate: 0 12px } }
+
+/* ===========================================================================
+   Feedback: spinner, progress, skeleton, empty state
+   =========================================================================== */
+.spinner {
+  width: var(--size-icon-md); height: var(--size-icon-md);
+  border: 2px solid var(--color-border-strong);
+  border-top-color: var(--color-foreground);
+  border-radius: var(--radius-full);
+  animation: spin 600ms linear infinite;
+}
+.spinner-lg { width: var(--size-icon-lg); height: var(--size-icon-lg); }
+
+.progress { height: 6px; border-radius: var(--radius-full); background: var(--color-secondary); overflow: hidden; }
+.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); }
+.progress-accent > span { background: var(--color-accent-600); }
+
+.skeleton { border-radius: var(--radius-md); background: var(--color-skeleton); animation: shimmer 1.4s ease-in-out infinite; }
+@keyframes shimmer { 50% { opacity: .55 } }
+
+.empty {
+  display: grid; justify-items: center; gap: var(--spacing-sm);
+  padding: var(--spacing-4xl) var(--spacing-xl);
+  text-align: center;
+}
+.empty-icon {
+  display: grid; place-items: center;
+  width: var(--size-control-lg); height: var(--size-control-lg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-muted);
+  color: var(--color-muted-foreground);
+  margin-block-end: var(--spacing-xs);
+}
+.empty p { color: var(--color-muted-foreground); font-size: var(--type-size-label); max-width: 42ch; }
+
+/* ===========================================================================
+   Navigation: breadcrumb, pagination, sidebar, header
+   =========================================================================== */
+.breadcrumb { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--type-size-label); color: var(--color-muted-foreground); }
+.breadcrumb a { color: var(--color-muted-foreground); }
+.breadcrumb a:hover { color: var(--color-foreground); text-decoration: none; }
+.breadcrumb [aria-current="page"] { color: var(--color-foreground); font-weight: var(--type-weight-medium); }
+.breadcrumb .sep { color: var(--color-border-strong); }
+
+.pagination { display: flex; align-items: center; gap: var(--spacing-xs); }
+.pagination .btn[aria-current="page"] { background: var(--color-secondary); }
+
+.app-shell { display: grid; grid-template-columns: var(--size-sidebar) minmax(0, 1fr); min-height: 100vh; }
+.sidebar {
+  display: flex; flex-direction: column;
+  min-width: 0;
+  position: sticky; top: 0;
+  height: 100vh;
+  background: var(--color-sidebar);
+  border-inline-end: 1px solid var(--color-sidebar-border);
+}
+.sidebar-header { padding: var(--spacing-md); display: grid; gap: var(--spacing-md); }
+.sidebar-body   { flex: 1; overflow-y: auto; padding: 0 var(--spacing-sm) var(--spacing-sm); display: grid; gap: var(--spacing-lg); align-content: start; }
+.sidebar-footer { padding: var(--spacing-sm); border-top: 1px solid var(--color-sidebar-border); display: grid; gap: var(--spacing-2xs); }
+.sidebar-footer .settings-row { padding-inline: var(--spacing-sm); } /* match .nav-item's inset */
+.nav-group { display: grid; gap: var(--spacing-2xs); }
+.nav-group > .t-caps { padding-inline: var(--spacing-sm); margin-block-end: var(--spacing-2xs); }
+.nav-item {
+  display: flex; align-items: center; gap: var(--spacing-sm);
+  height: var(--size-control-sm);
+  padding-inline: var(--spacing-sm);
+  border: 0; border-radius: var(--radius-md);
+  background: none;
+  color: var(--color-muted-foreground);
+  font: inherit; font-size: var(--type-size-body);
+  text-align: start; text-decoration: none;
+  cursor: pointer;
+  width: 100%;
+}
+.nav-item .icon { color: var(--color-subtle-foreground); }
+.nav-item:hover { background: var(--color-accent-surface-hover); color: var(--color-foreground); text-decoration: none; }
+.nav-item[aria-current="page"], .nav-item.active {
+  background: var(--color-selected);
+  box-shadow: inset 2px 0 0 var(--color-primary);
+  color: var(--color-selected-foreground);
+  font-weight: var(--type-weight-medium);
+}
+.nav-item[aria-current="page"] .icon, .nav-item.active .icon { color: currentColor; }
+.nav-item .badge { margin-inline-start: auto; }
+
+.brand { display: flex; align-items: center; gap: var(--spacing-sm); min-width: 0; }
+.brand-mark {
+  display: grid; place-items: center;
+  width: var(--size-control-sm); height: var(--size-control-sm);
+  flex: none;
+  border-radius: var(--radius-lg);
+  background: var(--color-primary);
+  color: var(--color-primary-foreground);
+  font-weight: var(--type-weight-bold);
+  font-size: var(--type-size-label);
+}
+
+.topbar {
+  display: flex; align-items: center; gap: var(--spacing-md);
+  height: var(--size-control-lg);
+  min-height: 52px;
+  padding-inline: var(--spacing-lg);
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-background);
+  position: sticky; top: 0; z-index: 20;
+}
+
+.avatar {
+  display: grid; place-items: center;
+  width: var(--size-control-sm); height: var(--size-control-sm);
+  flex: none;
+  border-radius: var(--radius-full);
+  background: var(--color-secondary);
+  color: var(--color-secondary-foreground);
+  font-size: var(--type-size-metadata);
+  font-weight: var(--type-weight-medium);
+}
+
+.page { padding: var(--spacing-xl); display: grid; gap: var(--spacing-xl); align-content: start; max-width: var(--size-content-max); }
+.page-header { display: grid; gap: var(--spacing-2xs); }
+
+/* ===========================================================================
+   Developer-oriented surfaces (Kiso: developer-oriented-interfaces pattern)
+   =========================================================================== */
+code {
+  padding: 1px var(--spacing-xs);
+  border-radius: var(--radius-xs);
+  background: var(--color-muted);
+  border: 1px solid var(--color-border);
+}
+pre {
+  position: relative;
+  margin: 0;
+  padding: var(--spacing-md);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-surface);
+  background: var(--color-muted);
+  overflow-x: auto;
+  font-size: var(--type-size-label);
+  line-height: var(--type-line-height-relaxed);
+}
+pre code { padding: 0; background: none; border: 0; }
+
+.kv { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); gap: var(--spacing-sm) var(--spacing-lg); font-size: var(--type-size-body); }
+.kv dt { color: var(--color-muted-foreground); font-size: var(--type-size-label); }
+.kv dd { margin: 0; font-family: var(--font-mono); font-size: var(--type-size-label); overflow-wrap: anywhere; }
+
+.logview {
+  position: relative;
+  background: var(--color-neutral-950);
+  color: var(--color-neutral-300);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-surface);
+  padding: var(--spacing-md);
+  font-family: var(--font-mono);
+  font-size: var(--type-size-label);
+  line-height: var(--type-line-height-relaxed);
+  overflow: auto;
+}
+.logview .log-time { color: var(--color-neutral-600); margin-inline-end: var(--spacing-sm); }
+.logview .log-warn { color: var(--color-warning-on-dark); }
+.logview .log-error{ color: var(--color-danger-on-dark); }
+.logview .log-info { color: var(--color-info-on-dark); }
+
+/* Sparkline / bar chart placeholders, neutral-only per the brand rules. */
+.bars { display: flex; align-items: flex-end; gap: 3px; height: 40px; }
+.bars i { flex: 1; background: var(--color-border-strong); border-radius: var(--radius-xs); }
+.bars i.on { background: var(--color-primary); }
+
+/* ===========================================================================
+   Touch targets: the 44px rule applies to coarse pointers only.
+   This is the whole reason the desktop UI can be 36px.
+   =========================================================================== */
+@media (pointer: coarse) {
+  .btn, .input, .select, .nav-item, .menu-item {
+    min-height: var(--size-touch-min);
+  }
+  .btn-icon { min-width: var(--size-touch-min); }
+}
+
+@media (max-width: 1023px) {
+  .app-shell { grid-template-columns: 1fr; }
+  .sidebar { display: none; }
+}
+
+
+/* ===========================================================================
+   Corner marks — the "blueprint" corner treatment
+   ---------------------------------------------------------------------------
+   An open registration mark on each corner: two 1px ticks, each lying along
+   the frame line it extends and stopping `--corner-mark-gap` short of it, so
+   the mark points at the corner without touching it.
+
+   Deliberately two ticks and not four. A full cross puts its other two arms
+   directly on top of the panel border, where they are invisible — the mark
+   read as a bracket anyway. Dropping them halves the paint and makes the
+   hollow centre explicit instead of accidental.
+
+   Eight 1px gradient bars on one pseudo-element. No markup, no images, and
+   `--corner-mark: 0` removes them entirely.
+   =========================================================================== */
+.card::after,
+.dialog::after,
+.table-wrap::after,
+.logview::after,
+.marked::after,
+pre::after {
+  content: "";
+  position: absolute;
+  /* Reach far enough out that a tick clears the frame by the gap. */
+  inset: calc(-1 * (var(--corner-mark-tick) + var(--corner-mark-gap)));
+  pointer-events: none;
+  opacity: var(--corner-mark);
+  background-repeat: no-repeat;
+  background-image:
+    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
+    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
+    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
+    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
+    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
+    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
+    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
+    linear-gradient(var(--color-corner-mark), var(--color-corner-mark));
+  background-size:
+    var(--corner-mark-tick) 1px, 1px var(--corner-mark-tick),
+    var(--corner-mark-tick) 1px, 1px var(--corner-mark-tick),
+    var(--corner-mark-tick) 1px, 1px var(--corner-mark-tick),
+    var(--corner-mark-tick) 1px, 1px var(--corner-mark-tick);
+  /* The offset lands each tick exactly on the 1px frame line it extends. */
+  background-position:
+    left 0 top    calc(var(--corner-mark-tick) + var(--corner-mark-gap)),
+    left  calc(var(--corner-mark-tick) + var(--corner-mark-gap)) top 0,
+    right 0 top    calc(var(--corner-mark-tick) + var(--corner-mark-gap)),
+    right calc(var(--corner-mark-tick) + var(--corner-mark-gap)) top 0,
+    left 0 bottom  calc(var(--corner-mark-tick) + var(--corner-mark-gap)),
+    left  calc(var(--corner-mark-tick) + var(--corner-mark-gap)) bottom 0,
+    right 0 bottom calc(var(--corner-mark-tick) + var(--corner-mark-gap)),
+    right calc(var(--corner-mark-tick) + var(--corner-mark-gap)) bottom 0;
+}
+.marked { position: relative; }
+
+/* ===========================================================================
+   Hatch — "this region is not data"
+   ---------------------------------------------------------------------------
+   Companion to the corner marks. Three sanctioned uses, and no others:
+     .hatch on an empty state      nothing here yet
+     .hatch on a chrome band       this strip is title/controls, not content
+     .hatch on an unavailable pane the data does not exist right now
+
+   The stripe colour is one step off the surface it sits on, so text stays
+   legible on top of it. Do not raise the contrast to make it "read better" —
+   if it is loud enough to notice while reading, it is in the wrong place.
+   =========================================================================== */
+.hatch {
+  background-image: repeating-linear-gradient(
+    var(--hatch-angle),
+    var(--color-hatch) 0,
+    var(--color-hatch) var(--hatch-line),
+    transparent var(--hatch-line),
+    transparent var(--hatch-period)
+  );
+}
+/* An empty region *is* the message, so empty states are the primary use. */
+.empty.hatch { background-color: var(--color-card); }
+
+/* A chrome band inside a panel — title, breadcrumb, controls. */
+.band {
+  padding: var(--spacing-lg);
+  border-bottom: 1px solid var(--color-border);
+}
+.band > * { position: relative; }
+
+/* ===========================================================================
+   Split pane (list-detail with a resizable divider)
+   =========================================================================== */
+.split { display: flex; min-width: 0; }
+.split > .pane { min-width: 0; overflow: auto; }
+.splitter { flex: none; width: 1px; background: var(--color-border); cursor: col-resize; position: relative; }
+.splitter::after { content: ""; position: absolute; inset-block: 0; inset-inline: -3px; }
+.splitter:hover, .splitter.dragging { background: var(--color-ring); }
+
+/* Chart frame: neutral only, gridlines at border strength. */
+.chart { width: 100%; height: 200px; display: block; overflow: visible; color: var(--color-primary); }
+.chart .grid { stroke: var(--color-border); stroke-width: 1; }
+.chart .line { fill: none; stroke: var(--color-primary); stroke-width: 1.5; }
+.chart .area { fill: url(#chart-fill); }
+.chart-axis { display: flex; justify-content: space-between; font-size: var(--type-size-metadata); color: var(--color-subtle-foreground); margin-block-start: var(--spacing-sm); }