@charset "UTF-8";

/* ============================================================
   Product screen mockups — rebuilt in HTML/CSS
   These reproduce the app screens from the AICC business plan.
   Everything here is presentational; nothing is a live product.

   Colour: the coral ramp from site.css. It is scoped to .app so the
   product identity never leaks into the corporate accent.
   ============================================================ */

.mockup { display: flex; flex-direction: column; gap: var(--space-4); }
.mockup__caption { font-size: var(--text-caption); color: var(--color-text-muted); text-wrap: pretty; }

/* Wide chrome scrolls inside its own container; the page never scrolls
   horizontally. */
.mockup__scroll {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-block-end: var(--space-2);
  scrollbar-width: thin;
}

.app {
  --app-bg: oklch(0.982 0.006 60);
  --app-surface: oklch(1 0 0);
  --app-ink: oklch(0.24 0.012 45);
  --app-ink-2: oklch(0.52 0.012 45);
  --app-ink-3: oklch(0.66 0.010 45);
  --app-line: oklch(0.912 0.008 45);
  --app-side: oklch(0.235 0.018 33);

  min-inline-size: 900px;
  background: var(--app-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  outline: 1px solid var(--color-image-outline);
  outline-offset: -1px;
  overflow: hidden;
  box-shadow:
    0 1px 2px oklch(0 0 0 / 0.04),
    0 8px 24px -12px oklch(0 0 0 / 0.14);
  font-size: 12px;
  line-height: 1.45;
  color: var(--app-ink);
  letter-spacing: -0.005em;
}
.app--narrow { min-inline-size: 560px; }

/* --- window chrome ---------------------------------------------------- */

.app__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--app-bg);
  border-block-end: 1px solid var(--app-line);
}
.app__dots { display: flex; gap: 5px; flex: none; }
.app__dots i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--app-line); display: block; }
.app__url {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--app-ink-3);
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: 999px;
  padding: 3px 12px;
  min-inline-size: 260px;
}

.app__body { display: grid; grid-template-columns: 156px minmax(0, 1fr); min-block-size: 420px; }
.app--noside .app__body { grid-template-columns: minmax(0, 1fr); }

/* --- sidebar ----------------------------------------------------------- */

.app__side {
  background: var(--app-side);
  color: oklch(1 0 0 / 0.62);
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.app__logo { padding-inline: 6px; }
.app__logo b {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: oklch(1 0 0 / 0.95);
  line-height: 1.25;
}
.app__logo span {
  display: block;
  margin-block-start: 3px;
  font-size: 7.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: oklch(1 0 0 / 0.4);
}
.app__store {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: oklch(1 0 0 / 0.07);
}
.app__store span { display: block; font-size: 8px; letter-spacing: 0.1em; color: oklch(1 0 0 / 0.42); }
.app__store b { display: block; margin-block-start: 2px; font-size: 11.5px; color: oklch(1 0 0 / 0.94); font-weight: 600; }

.app__navgroup { display: flex; flex-direction: column; gap: 1px; }
.app__navlabel {
  padding: 6px 8px 4px;
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(1 0 0 / 0.34);
}
.app__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
}
.app__nav i { inline-size: 5px; block-size: 5px; border-radius: 50%; background: currentColor; opacity: 0.5; flex: none; }
.app__nav b { flex: 1; font-weight: 400; }
.app__nav em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 999px;
  background: oklch(1 0 0 / 0.12);
  color: oklch(1 0 0 / 0.8);
}
.app__nav[data-active="true"] { background: var(--coral-600); color: oklch(1 0 0 / 0.98); }
.app__nav[data-active="true"] em { background: oklch(1 0 0 / 0.22); color: oklch(1 0 0 / 0.95); }
.app__user {
  margin-block-start: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
}
.app__avatar {
  inline-size: 22px; block-size: 22px;
  border-radius: 50%;
  background: var(--coral-600);
  color: oklch(1 0 0);
  display: grid; place-items: center;
  font-size: 10px; font-weight: 600;
  flex: none;
}
.app__user b { display: block; font-size: 10.5px; color: oklch(1 0 0 / 0.9); font-weight: 600; }
.app__user span { display: block; font-size: 8.5px; color: oklch(1 0 0 / 0.42); }

/* --- main pane ---------------------------------------------------------- */

.app__main { background: var(--app-bg); display: flex; flex-direction: column; }
.app__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: var(--app-surface);
  border-block-end: 1px solid var(--app-line);
}
.app__crumb { font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--app-ink-3); }
.app__title { font-size: 15px; font-weight: 700; letter-spacing: -0.015em; margin-block-start: 2px; }
.app__meta { font-size: 10px; color: var(--app-ink-3); margin-block-start: 2px; }
.app__headactions { display: flex; align-items: center; gap: 6px; flex: none; }

.app__content { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.app__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 12px; align-items: start; }
.app__cols--wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }

/* --- small parts --------------------------------------------------------- */

.ui-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--app-line);
  background: var(--app-surface);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--app-ink-2);
  white-space: nowrap;
}
.ui-btn[data-variant="solid"] { background: var(--coral-600); border-color: var(--coral-600); color: oklch(1 0 0); font-weight: 600; }
.ui-btn[data-variant="quiet"] { border-color: transparent; background: transparent; color: var(--app-ink-3); }

.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 600;
  background: var(--coral-100);
  color: var(--coral-700);
  white-space: nowrap;
}
.ui-chip::before { content: ""; inline-size: 4px; block-size: 4px; border-radius: 50%; background: currentColor; }
.ui-chip[data-tone="neutral"] { background: oklch(0.94 0.004 60); color: var(--app-ink-2); }
.ui-chip[data-tone="sage"] { background: var(--sage-100); color: var(--sage-600); }
.ui-chip[data-tone="bronze"] { background: var(--bronze-100); color: var(--bronze-800); }

.ui-panel {
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ui-panel__title { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--app-ink-3); }

.ui-stat {
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  padding: 11px 13px;
}
.ui-stat span { font-size: 9.5px; color: var(--app-ink-3); }
.ui-stat b {
  display: block;
  margin-block-start: 3px;
  font-family: var(--font-mono);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.ui-stat b i { font-style: normal; font-size: 11px; font-weight: 500; color: var(--app-ink-3); letter-spacing: 0; }
.ui-stat em { display: block; margin-block-start: 3px; font-style: normal; font-size: 9.5px; color: var(--app-ink-3); }
.ui-stat[data-tone="accent"] b { color: var(--coral-700); }

.ui-note {
  display: flex;
  gap: 7px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: var(--coral-50);
  border: 1px solid var(--coral-200);
  font-size: 10px;
  line-height: 1.55;
  color: var(--coral-700);
}
.ui-note[data-tone="quiet"] { background: oklch(0.955 0.004 60); border-color: var(--app-line); color: var(--app-ink-2); }
.ui-note::before { content: "※"; flex: none; opacity: 0.7; }

/* --- task list ------------------------------------------------------------ */

.ui-list { display: flex; flex-direction: column; gap: 4px; }
.ui-task {
  display: grid;
  grid-template-columns: 14px 22px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: start;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: var(--app-surface);
  border: 1px solid var(--app-line);
}
.ui-task[data-selected="true"] { background: var(--coral-50); border-color: var(--coral-200); }
.ui-check {
  inline-size: 13px; block-size: 13px;
  border-radius: 3px;
  border: 1.5px solid var(--app-ink-3);
  margin-block-start: 2px;
}
.ui-task[data-selected="true"] .ui-check { background: var(--coral-600); border-color: var(--coral-600); position: relative; }
.ui-task[data-selected="true"] .ui-check::after {
  content: "";
  position: absolute;
  inset-block-start: 2px; inset-inline-start: 4px;
  inline-size: 3px; block-size: 6px;
  border: solid oklch(1 0 0);
  border-width: 0 1.5px 1.5px 0;
  rotate: 45deg;
}
.ui-ava {
  inline-size: 21px; block-size: 21px;
  border-radius: 50%;
  background: oklch(0.93 0.012 33);
  color: var(--coral-700);
  display: grid; place-items: center;
  font-size: 9.5px; font-weight: 600;
}
.ui-task__name { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; }
.ui-task__desc { margin-block-start: 2px; font-size: 10px; color: var(--app-ink-3); }
.ui-task__time { font-family: var(--font-mono); font-size: 10px; color: var(--app-ink-3); font-variant-numeric: tabular-nums; }

/* --- member detail --------------------------------------------------------- */

.ui-member { display: flex; align-items: center; gap: 9px; }
.ui-member .ui-ava { inline-size: 28px; block-size: 28px; font-size: 11px; }
.ui-member b { display: block; font-size: 13px; font-weight: 700; }
.ui-member span { display: block; font-size: 9.5px; color: var(--app-ink-3); }

.ui-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--app-line); border: 1px solid var(--app-line); border-radius: var(--radius-sm); overflow: hidden; }
.ui-figures div { background: var(--app-surface); padding: 8px 10px; }
.ui-figures span { font-size: 9px; color: var(--app-ink-3); }
.ui-figures b { display: block; margin-block-start: 2px; font-family: var(--font-mono); font-size: 16px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ui-figures b i { font-style: normal; font-size: 9px; font-weight: 500; color: var(--app-ink-3); }

.ui-draft {
  background: oklch(0.972 0.004 60);
  border: 1px solid var(--app-line);
  border-radius: var(--radius-sm);
  padding: 10px 11px;
  font-size: 10.5px;
  line-height: 1.65;
  color: var(--app-ink-2);
}
.ui-draft p + p { margin-block-start: 3px; }
.ui-draft .caret { display: inline-block; inline-size: 1px; block-size: 11px; background: var(--coral-600); vertical-align: -2px; }

.ui-log { display: flex; flex-direction: column; gap: 4px; }
.ui-log li { display: flex; align-items: center; gap: 6px; font-size: 9.5px; color: var(--app-ink-3); }
.ui-log li::before { content: ""; inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--coral-300); flex: none; }
.ui-log li[data-quiet="true"]::before { background: var(--app-line); }

/* --- extraction fields (계약서 등록) ------------------------------------------ */

.ui-steps { display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-block-end: 1px solid var(--app-line); background: var(--app-surface); }
.ui-step { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--app-ink-3); }
.ui-step i {
  inline-size: 14px; block-size: 14px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: oklch(0.93 0.004 60);
  color: var(--app-ink-3);
  font-family: var(--font-mono);
  font-size: 8px; font-style: normal; font-weight: 600;
  flex: none;
}
.ui-step[data-state="done"] { color: var(--app-ink-2); }
.ui-step[data-state="done"] i { background: var(--sage-600); color: oklch(1 0 0); }
.ui-step[data-state="now"] { color: var(--coral-700); font-weight: 600; }
.ui-step[data-state="now"] i { background: var(--coral-600); color: oklch(1 0 0); }
.ui-step__line { flex: 1; block-size: 1px; background: var(--app-line); }

.ui-scan {
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-block-size: 210px;
}
.ui-scan i { display: block; block-size: 4px; border-radius: 2px; background: oklch(0.93 0.004 60); }
.ui-scan i[data-w="60"] { inline-size: 60%; }
.ui-scan i[data-w="80"] { inline-size: 80%; }
.ui-scan i[data-w="45"] { inline-size: 45%; }
.ui-scan i[data-w="70"] { inline-size: 70%; }
.ui-scan__box {
  position: relative;
  border: 1.5px solid var(--coral-500);
  border-radius: 3px;
  padding: 5px 7px;
  margin-block: 2px;
}
.ui-scan__box::after {
  content: attr(data-tag);
  position: absolute;
  inset-block-start: -8px;
  inset-inline-start: 5px;
  padding: 0 4px;
  background: var(--coral-600);
  color: oklch(1 0 0);
  font-size: 7.5px;
  font-weight: 600;
  border-radius: 2px;
}

.ui-fields { display: flex; flex-direction: column; }
.ui-field {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 52px 26px;
  gap: 10px;
  align-items: center;
  padding: 8px 2px;
  border-block-end: 1px solid var(--app-line);
}
.ui-field:last-child { border-block-end: 0; }
.ui-field__label { font-size: 9.5px; color: var(--app-ink-3); }
.ui-field__value { font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-field__value em { font-style: normal; font-weight: 400; font-size: 9.5px; color: var(--app-ink-3); margin-inline-start: 4px; }
.ui-meter { block-size: 2.5px; border-radius: 2px; background: oklch(0.92 0.004 60); overflow: hidden; }
.ui-meter b { display: block; block-size: 100%; background: var(--sage-600); border-radius: 2px; }
.ui-meter[data-low="true"] b { background: var(--coral-500); }
.ui-field__score { font-family: var(--font-mono); font-size: 9.5px; color: var(--app-ink-3); text-align: end; font-variant-numeric: tabular-nums; }

/* --- ledger table ------------------------------------------------------------ */

.ui-table { inline-size: 100%; font-size: 10.5px; }
.ui-table th {
  text-align: start;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--app-ink-3);
  padding: 0 8px 7px;
  border-block-end: 1px solid var(--app-line);
  white-space: nowrap;
}
.ui-table td {
  padding: 7px 8px;
  border-block-end: 1px solid var(--app-line);
  color: var(--app-ink-2);
  vertical-align: middle;
}
.ui-table tbody tr:last-child td { border-block-end: 0; }
.ui-table td.is-name { color: var(--app-ink); font-weight: 600; }
.ui-table td.is-num { font-family: var(--font-mono); text-align: end; font-variant-numeric: tabular-nums; color: var(--app-ink); }
.ui-table td.is-neg { color: var(--coral-700); }
.ui-table tfoot td { font-weight: 700; color: var(--app-ink); border-block-start: 1px solid var(--app-line); padding-block: 8px; }

/* --- bars / progress ---------------------------------------------------------- */

.ui-bars { display: flex; flex-direction: column; gap: 9px; }
.ui-bar__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 10px; }
.ui-bar__top b { font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.ui-bar__top span { color: var(--app-ink-3); }
.ui-bar__track { margin-block-start: 4px; block-size: 5px; border-radius: 3px; background: oklch(0.93 0.004 60); overflow: hidden; }
.ui-bar__fill { display: block; block-size: 100%; border-radius: 3px; background: var(--coral-500); }
.ui-bar__fill[data-tone="deep"] { background: var(--coral-700); }
.ui-bar__fill[data-tone="soft"] { background: var(--coral-300); }
.ui-bar__fill[data-tone="sage"] { background: var(--sage-600); }

.ui-columns { display: flex; align-items: flex-end; gap: 6px; block-size: 74px; }
.ui-columns span { flex: 1; border-radius: 2px 2px 0 0; background: var(--coral-200); }
.ui-columns span[data-now="true"] { background: var(--coral-600); }

.ui-donut {
  inline-size: 78px; block-size: 78px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--coral-500) 0 67%, oklch(0.93 0.004 60) 67% 100%);
  margin-inline: auto;
}
.ui-donut b {
  inline-size: 56px; block-size: 56px;
  border-radius: 50%;
  background: var(--app-surface);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- member ledger rows -------------------------------------------------------- */

.ui-rows { display: flex; flex-direction: column; }
.ui-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) 64px 62px;
  gap: 12px;
  align-items: center;
  padding: 9px 2px;
  border-block-end: 1px solid var(--app-line);
}
.ui-row:last-child { border-block-end: 0; }
.ui-row__who { display: flex; align-items: center; gap: 7px; }
.ui-row__who b { display: block; font-size: 11px; font-weight: 600; }
.ui-row__who span { display: block; font-size: 9px; color: var(--app-ink-3); }
.ui-row__left { font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.ui-row__left i { font-style: normal; font-size: 9px; color: var(--app-ink-3); }
.ui-row__date { font-family: var(--font-mono); font-size: 10px; color: var(--app-ink-3); font-variant-numeric: tabular-nums; }

/* --- phones --------------------------------------------------------------------- */

.phones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: var(--space-6);
  max-inline-size: 840px;
}
.phone { display: flex; flex-direction: column; gap: var(--space-4); align-items: center; }
.phone__frame {
  inline-size: 100%;
  max-inline-size: 232px;
  aspect-ratio: 232 / 470;
  background: var(--stone-950);
  border-radius: 26px;
  padding: 8px;
  outline: 1px solid var(--color-image-outline);
  outline-offset: -1px;
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.05), 0 12px 28px -14px oklch(0 0 0 / 0.3);
}
.phone__screen {
  block-size: 100%;
  background: oklch(0.982 0.006 60);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 10px;
  color: oklch(0.24 0.012 45);
  --app-line: oklch(0.912 0.008 45);
  --app-ink-3: oklch(0.66 0.010 45);
  --app-surface: oklch(1 0 0);
}
.phone__status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px 3px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--app-ink-3);
}
.phone__head { padding: 4px 12px 9px; border-block-end: 1px solid var(--app-line); background: var(--app-surface); }
.phone__head b { display: block; font-size: 13px; font-weight: 700; letter-spacing: -0.015em; }
.phone__head span { display: block; margin-block-start: 2px; font-size: 9px; color: var(--app-ink-3); }
.phone__body { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.phone__card {
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.phone__card b { font-size: 11px; font-weight: 700; }
.phone__card p { font-size: 9px; color: var(--app-ink-3); line-height: 1.5; }
.phone__acts { display: flex; gap: 5px; }
.phone__acts .ui-btn { flex: 1; justify-content: center; padding-block: 5px; }
.phone__tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 7px 6px 9px;
  background: var(--app-surface);
  border-block-start: 1px solid var(--app-line);
}
.phone__tabs span { text-align: center; font-size: 8px; color: var(--app-ink-3); }
.phone__tabs span[data-active="true"] { color: var(--coral-600); font-weight: 600; }
.phone__tabs span::before {
  content: "";
  display: block;
  inline-size: 14px; block-size: 14px;
  margin: 0 auto 3px;
  border-radius: 4px;
  border: 1.5px solid currentColor;
  opacity: 0.85;
}
.phone__capture {
  flex: 1;
  margin: 10px;
  border-radius: var(--radius-md);
  background: oklch(0.18 0.008 45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
}
.phone__doc {
  inline-size: 78%;
  aspect-ratio: 3 / 4;
  border-radius: 3px;
  background: oklch(0.97 0.006 60);
  border: 2px dashed var(--coral-500);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.phone__doc i { display: block; block-size: 3px; border-radius: 2px; background: oklch(0.9 0.004 60); }
.phone__hint { font-size: 8.5px; color: oklch(1 0 0 / 0.66); }
.phone__shutter { inline-size: 34px; block-size: 34px; border-radius: 50%; border: 2.5px solid oklch(1 0 0 / 0.9); }
.phone__label { font-size: var(--text-body-sm); font-weight: 600; text-align: center; }
.phone__note { font-size: var(--text-caption); color: var(--color-text-secondary); text-align: center; text-wrap: pretty; max-inline-size: 30ch; }

/* ============================================================
   Interactive layer — the mockups behave like the real product:
   rows are buttons, tabs filter, the detail panel swaps, controls
   respond on press. Everything below is real state, not decoration.
   ============================================================ */

.icon { inline-size: 1em; block-size: 1em; flex: none; }
.app .icon {
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.app__nav .icon { inline-size: 13px; block-size: 13px; }
.ui-btn .icon { inline-size: 12px; block-size: 12px; }
.app__iconbtn .icon { inline-size: 14px; block-size: 14px; }
.phone__screen .icon { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none; }

/* --- sidebar navigation is now a real control ---------------------------- */

.app__nav {
  inline-size: 100%;
  text-align: start;
  background: transparent;
  border: 0;
  cursor: default;
  color: inherit;
  font: inherit;
  transition-property: background-color, color;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease-out);
}
.app__nav:hover { background: oklch(1 0 0 / 0.08); color: oklch(1 0 0 / 0.9); }
.app__nav[data-active="true"]:hover { background: var(--coral-600); }

/* --- window chrome gains the controls real apps have --------------------- */

.app__bar { justify-content: flex-start; }
.app__barspacer { flex: 1; }
.app__search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  min-inline-size: 148px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--app-line);
  background: var(--app-surface);
  color: var(--app-ink-3);
  font-size: 10px;
}
.app__search kbd {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: 8.5px;
  padding: 1px 4px;
  border-radius: 3px;
  background: oklch(0.95 0.004 60);
  border: 1px solid var(--app-line);
}
.app__iconbtn {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--app-line);
  background: var(--app-surface);
  color: var(--app-ink-2);
}
.app__iconbtn[data-dot="true"]::after {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-end: 3px;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--coral-600);
  outline: 1.5px solid var(--app-surface);
}

/* --- segmented control --------------------------------------------------- */

.ui-seg {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border-radius: var(--radius-md);
  background: oklch(0.945 0.004 60);
  border: 1px solid var(--app-line);
}
.ui-seg button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--app-ink-2);
  font-size: 10.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition-property: background-color, color, scale;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease-out);
}
.ui-seg button em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--app-ink-3);
  font-variant-numeric: tabular-nums;
}
.ui-seg button:hover { color: var(--app-ink); }
.ui-seg button:active { scale: 0.96; }
.ui-seg button[aria-selected="true"] {
  background: var(--app-surface);
  color: var(--app-ink);
  font-weight: 600;
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.07);
}
.ui-seg button[aria-selected="true"] em { color: var(--coral-600); }

/* --- buttons respond on press ------------------------------------------- */

.ui-btn, .app__iconbtn {
  cursor: pointer;
  transition-property: background-color, border-color, color, scale;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease-out);
}
.ui-btn:hover { border-color: var(--app-ink-3); color: var(--app-ink); }
.ui-btn[data-variant="solid"]:hover { background: var(--coral-700); border-color: var(--coral-700); color: oklch(1 0 0); }
.ui-btn[data-variant="quiet"]:hover { background: oklch(0.94 0.004 60); border-color: transparent; }
.app__iconbtn:hover { background: oklch(0.96 0.004 60); border-color: var(--app-ink-3); }
.ui-btn:active, .app__iconbtn:active { scale: 0.96; }
.ui-btn[data-busy="true"] { opacity: 0.6; pointer-events: none; }

.app :focus-visible { outline: 2px solid var(--coral-600); outline-offset: 2px; border-radius: var(--radius-sm); }

/* --- task rows are buttons ----------------------------------------------- */

.ui-task {
  inline-size: 100%;
  text-align: start;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition-property: background-color, border-color, scale;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease-out);
}
.ui-task:hover { border-color: var(--app-ink-3); }
.ui-task:active { scale: 0.995; }
.ui-task[aria-selected="true"] {
  background: var(--coral-50);
  border-color: var(--coral-500);
  box-shadow: inset 2px 0 0 var(--coral-600);
}
.ui-task[hidden] { display: none; }

/* The checkbox is its own hit target inside the row. */
.ui-check {
  position: relative;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.ui-check span {
  display: block;
  inline-size: 13px;
  block-size: 13px;
  border-radius: 3px;
  border: 1.5px solid var(--app-ink-3);
  transition-property: background-color, border-color, scale;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease-out);
}
.ui-check:hover span { border-color: var(--coral-600); }
.ui-check:active span { scale: 0.9; }
.ui-check[aria-checked="true"] span { background: var(--coral-600); border-color: var(--coral-600); }
.ui-check[aria-checked="true"] span::after {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 4.5px;
  inline-size: 3px;
  block-size: 6px;
  border: solid oklch(1 0 0);
  border-width: 0 1.5px 1.5px 0;
  rotate: 45deg;
}

/* --- detail panel swap ---------------------------------------------------- */

.ui-detail[hidden] { display: none; }
.ui-detail {
  animation: detail-in 260ms var(--ease-out) both;
}
@keyframes detail-in {
  from { opacity: 0; translate: 0 6px; }
  to   { opacity: 1; translate: 0 0; }
}

/* Caret blinks only while the draft is the live one. */
.ui-draft .caret { animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* --- confidence rows highlight when they need attention ------------------- */

.ui-field { transition: background-color var(--dur-fast) var(--ease-out); }
.ui-field:hover { background: oklch(0.975 0.004 60); }
.ui-field[data-attention="true"] { background: var(--coral-50); }

/* --- toggle --------------------------------------------------------------- */

.ui-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px 4px 5px;
  border-radius: 999px;
  border: 1px solid var(--app-line);
  background: var(--app-surface);
  font-size: 10.5px;
  color: var(--app-ink-2);
  cursor: pointer;
}
.ui-toggle i {
  position: relative;
  display: block;
  inline-size: 22px;
  block-size: 13px;
  border-radius: 999px;
  background: oklch(0.88 0.004 60);
  transition: background-color var(--dur-base) var(--ease-out);
  flex: none;
}
.ui-toggle i::after {
  content: "";
  position: absolute;
  inset-block-start: 1.5px;
  inset-inline-start: 1.5px;
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: oklch(1 0 0);
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.2);
  transition: translate var(--dur-base) var(--ease-out);
}
.ui-toggle[aria-pressed="true"] i { background: var(--coral-600); }
.ui-toggle[aria-pressed="true"] i::after { translate: 9px 0; }
.ui-toggle:active { scale: 0.97; }

/* --- ledger rows react ------------------------------------------------------ */

.ui-table tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
.ui-table tbody tr:hover { background: oklch(0.975 0.004 60); }
.ui-rows .ui-row { transition: background-color var(--dur-fast) var(--ease-out); }
.ui-rows .ui-row:hover { background: oklch(0.975 0.004 60); }

/* --- live badge -------------------------------------------------------------- */

.ui-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage-600);
}
.ui-live::before {
  content: "";
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--sage-600);
  animation: live-pulse 2.4s var(--ease-in-out) infinite;
}
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* --- toast ------------------------------------------------------------------- */

.app { position: relative; }
.ui-toast {
  position: absolute;
  inset-block-end: 14px;
  inset-inline-end: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: var(--radius-md);
  background: oklch(0.235 0.018 33);
  color: oklch(1 0 0 / 0.95);
  font-size: 10.5px;
  font-weight: 500;
  box-shadow: 0 8px 22px -10px oklch(0 0 0 / 0.5);
  opacity: 0;
  translate: 0 8px;
  pointer-events: none;
  transition-property: opacity, translate;
  transition-duration: 220ms;
  transition-timing-function: var(--ease-out);
}
.ui-toast[data-open="true"] { opacity: 1; translate: 0 0; }
.ui-toast .icon { inline-size: 13px; block-size: 13px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* --- hint strip under a mockup ------------------------------------------------ */

.mockup__hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-caption);
  color: var(--color-text-accent);
  font-weight: 600;
}
.mockup__hint::before {
  content: "";
  inline-size: 6px; block-size: 6px;
  border-radius: 50%;
  background: var(--color-accent-solid);
  animation: live-pulse 2.4s var(--ease-in-out) infinite;
}
.mockup__foot { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: baseline; }

@media (prefers-reduced-motion: reduce) {
  .ui-live::before, .mockup__hint::before, .ui-draft .caret { animation: none; }
  .ui-detail { animation: none; }
}