/* ==========================================================================
   Inspections — design system
   Tokens first, then primitives, then screens, then motion.
   Every colour is a token so the accent can be swapped at runtime from Settings.
   ========================================================================== */

:root {
  /* Accent is overwritten at runtime from the workspace settings. */
  --accent: #5b5bd6;
  --accent-ink: #ffffff;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 30%, transparent);

  --bg: #f5f6f9;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --surface-3: #f2f4f7;

  --text: #0d1220;
  --text-2: #545c6d;
  --text-3: #8c94a5;

  --line: #e5e8ee;
  --line-soft: #eff1f5;

  --ok: #0e9f6e;
  --ok-bg: #eafaf3;
  --issue: #e02424;
  --issue-bg: #fdeeee;
  --warn: #d97706;
  --warn-bg: #fdf3e4;
  --na: #7c8496;
  --na-bg: #f1f3f6;

  --shadow-1: 0 1px 2px rgba(13, 18, 32, .05);
  --shadow-2: 0 4px 14px rgba(13, 18, 32, .07);
  --shadow-3: 0 18px 44px rgba(13, 18, 32, .16);
  --shadow-4: 0 -10px 40px rgba(13, 18, 32, .18);

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-full: 999px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.4, .5, 1);
  --dur: .34s;

  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Poppins', var(--font-ui);
}

html[data-theme="dark"] {
  --bg: #0b0d13;
  --bg-elevated: #14171f;
  --surface: #14171f;
  --surface-2: #191d26;
  --surface-3: #20242f;

  --text: #eef1f6;
  --text-2: #a2abbd;
  --text-3: #6d7688;

  --line: #262b36;
  --line-soft: #1d212b;

  --ok: #34d399;
  --ok-bg: #0d2b22;
  --issue: #f87171;
  --issue-bg: #331617;
  --warn: #fbbf24;
  --warn-bg: #33260d;
  --na: #8891a3;
  --na-bg: #20242f;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, .5);
  --shadow-3: 0 18px 44px rgba(0, 0, 0, .66);
  --shadow-4: 0 -10px 40px rgba(0, 0, 0, .6);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --bg: #0b0d13;
    --bg-elevated: #14171f;
    --surface: #14171f;
    --surface-2: #191d26;
    --surface-3: #20242f;
    --text: #eef1f6;
    --text-2: #a2abbd;
    --text-3: #6d7688;
    --line: #262b36;
    --line-soft: #1d212b;
    --ok: #34d399;
    --ok-bg: #0d2b22;
    --issue: #f87171;
    --issue-bg: #331617;
    --warn: #fbbf24;
    --warn-bg: #33260d;
    --na: #8891a3;
    --na-bg: #20242f;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-2: 0 4px 16px rgba(0, 0, 0, .5);
    --shadow-3: 0 18px 44px rgba(0, 0, 0, .66);
    --shadow-4: 0 -10px 40px rgba(0, 0, 0, .6);
  }
}

/* ------------------------------------------------------------------ Base */

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Components below set display:flex/grid, which silently beats the `hidden`
   attribute's UA rule. Everything toggled from JS relies on this holding. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: 16px;              /* below 16px iOS zooms every focused input */
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
input, textarea { -webkit-appearance: none; appearance: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.ic--sm { width: 17px; height: 17px; }

/* ----------------------------------------------------------- Screen shell */

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  visibility: hidden;
  z-index: 1;
  pointer-events: none;
}
.screen.is-active { visibility: visible; z-index: 3; pointer-events: auto; }
.screen.is-leaving { visibility: visible; z-index: 2; pointer-events: none; }

.content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 4px 18px calc(28px + var(--safe-b));
}
.content--center {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 32px 24px calc(32px + var(--safe-b));
}
.content--steps { padding-top: 8px; }

/* -------------------------------------------------------------- Top bars */

.topbar {
  display: flex; align-items: center; gap: 8px;
  padding: calc(var(--safe-t) + 10px) 12px 10px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line-soft);
  position: relative; z-index: 4;
}
.topbar--home { border-bottom-color: transparent; padding-bottom: 4px; }
.topbar__title {
  flex: 1; min-width: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar__spacer { width: 42px; flex: none; }

.icon-btn {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-full); color: var(--text-2);
  transition: background .18s, color .18s, transform .18s var(--spring);
}
.icon-btn:active { transform: scale(.9); background: var(--surface-3); color: var(--text); }
.icon-btn--light { color: #fff; }
.icon-btn--light:active { background: rgba(255, 255, 255, .16); color: #fff; }

/* ---------------------------------------------------------------- Brand */

.brand { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; padding-left: 4px; }
.brand__mark {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  box-shadow: 0 6px 18px var(--accent-line);
}
.brand__name { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; line-height: 1.2; }
.brand__tag { font-size: 12px; color: var(--text-3); line-height: 1.3; }

/* ----------------------------------------------------------------- Hero */

.hero { padding: 18px 2px 20px; }
.hero__title {
  margin: 0 0 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1.12;
  letter-spacing: -.02em;
}
.hero__title em { font-style: normal; color: var(--accent); }
.hero__sub { margin: 0; color: var(--text-2); font-size: 14.5px; max-width: 34ch; }

/* ------------------------------------------------------------------ CTA */

.cta {
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  padding: 17px 16px;
  border-radius: var(--r-lg);
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 12px 30px var(--accent-line);
  text-align: left;
  transition: transform .2s var(--spring), box-shadow .2s;
}
.cta:active { transform: scale(.975); box-shadow: 0 6px 16px var(--accent-line); }
.cta__icon {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 13px; background: rgba(255, 255, 255, .18);
}
.cta__text { flex: 1; min-width: 0; }
.cta__title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.cta__sub { display: block; font-size: 12.5px; opacity: .8; }
.cta__go { opacity: .7; transform: rotate(-90deg); }

/* ---------------------------------------------------------------- Stats */

.stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-top: 16px;
}
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 12px 10px; text-align: center;
  box-shadow: var(--shadow-1);
}
.stat__value {
  display: block; font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.1;
}
.stat__label { display: block; font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }

/* --------------------------------------------------------- Section heads */

.section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 26px 2px 10px;
}
.section-head__title {
  margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-3);
}

/* ------------------------------------------------------------ Search bar */

.searchbar {
  display: flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: 0 12px; height: 44px;
  margin-bottom: 12px; color: var(--text-3);
  transition: border-color .2s, box-shadow .2s;
}
.searchbar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.searchbar input { flex: 1; min-width: 0; border: 0; background: none; font-size: 15px; color: var(--text); }
.searchbar input::placeholder { color: var(--text-3); }
.searchbar__clear { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--text-3); }
.searchbar__clear:active { background: var(--surface-3); }

/* ----------------------------------------------------------------- List */

.list { display: flex; flex-direction: column; gap: 9px; }
.list--tight { gap: 6px; }

.card {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 13px 14px;
  box-shadow: var(--shadow-1);
  transition: transform .18s var(--spring), border-color .2s, box-shadow .2s;
}
.card:active { transform: scale(.985); border-color: var(--accent-line); }

.card__badge {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center; border-radius: 12px;
}
.card__badge--ok { background: var(--ok-bg); color: var(--ok); }
.card__badge--issue { background: var(--issue-bg); color: var(--issue); }
.card__badge--draft { background: var(--accent-soft); color: var(--accent); }

.card__body { flex: 1; min-width: 0; }
.card__title {
  font-weight: 600; font-size: 14.5px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card__meta {
  font-size: 12.5px; color: var(--text-3); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }

.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: var(--r-full);
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  background: var(--surface-3); color: var(--text-2);
  white-space: nowrap;
}
.tag--ok { background: var(--ok-bg); color: var(--ok); }
.tag--issue { background: var(--issue-bg); color: var(--issue); }
.tag--draft { background: var(--accent-soft); color: var(--accent); }
.tag--money { background: var(--issue-bg); color: var(--issue); font-variant-numeric: tabular-nums; }

/* Thin progress read-out on a draft card. */
.card__progress { height: 3px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-top: 7px; }
.card__progress i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .5s var(--ease); }

/* ------------------------------------------------------- Empty + skeleton */

.empty { text-align: center; padding: 42px 20px; color: var(--text-3); }
.empty__icon {
  width: 58px; height: 58px; margin: 0 auto 14px;
  display: grid; place-items: center; border-radius: 18px;
  background: var(--surface-3); color: var(--text-3);
}
.empty__title { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text-2); }
.empty__sub { font-size: 13px; margin-top: 3px; }

.skeleton {
  height: 68px; border-radius: var(--r-md);
  background: linear-gradient(100deg, var(--surface-3) 30%, var(--surface-2) 50%, var(--surface-3) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer { to { background-position: -220% 0; } }

/* --------------------------------------------------------------- Fields */

.field { display: block; margin: 0 0 14px; }
.field__label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px;
}
.field__label--loose { margin-top: 6px; }
.field__opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-3); }

.field input, .field textarea, .field select {
  width: 100%; padding: 13px 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: 16px; color: var(--text);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.field textarea { resize: vertical; min-height: 76px; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:focus, .field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.hint { font-size: 12.5px; color: var(--text-3); margin: -6px 0 14px; line-height: 1.45; }

.money { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); transition: border-color .18s, box-shadow .18s; }
.money:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.money__prefix { padding: 0 4px 0 14px; color: var(--text-3); font-weight: 600; }
.money input { border: 0 !important; box-shadow: none !important; background: none; padding-left: 4px; }

.mic {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--r-full);
  background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0;
  transition: transform .18s var(--spring);
}
.mic:active { transform: scale(.93); }
.mic.is-live { background: var(--issue-bg); color: var(--issue); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }

/* ------------------------------------------------------------- Checkbox */

.check {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 0; font-size: 14px; color: var(--text-2); cursor: pointer;
}
.check--inline { padding: 12px 14px 2px; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  width: 23px; height: 23px; flex: none;
  display: grid; place-items: center;
  border: 2px solid var(--line); border-radius: 7px;
  background: var(--surface); color: transparent;
  transition: background .18s, border-color .18s, color .18s, transform .18s var(--spring);
}
.check input:checked + .check__box {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.check input:checked + .check__box .ic { animation: pop .3s var(--spring); }
.check:active .check__box { transform: scale(.9); }
@keyframes pop { 0% { transform: scale(.3); } 100% { transform: scale(1); } }

/* ---------------------------------------------------------------- Chips */

.chip-row {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip-row--wrap { flex-wrap: wrap; overflow: visible; }
.chip-row:empty { display: none; }

.chip {
  flex: none; padding: 9px 15px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-full); font-size: 13.5px; font-weight: 500; color: var(--text-2);
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s, transform .18s var(--spring);
}
.chip:active { transform: scale(.94); }
.chip.is-active {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600;
}
.chip--ghost { border-style: dashed; color: var(--text-3); }

/* -------------------------------------------------------------- Buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 20px; border-radius: var(--r-sm);
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  transition: transform .18s var(--spring), background .2s, opacity .2s, box-shadow .2s;
  position: relative; overflow: hidden;
}
.btn:active { transform: scale(.975); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn--block { width: 100%; }
.btn--grow { flex: 1; }
.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 22px var(--accent-line); }
.btn--secondary { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.btn--ghost { background: transparent; color: var(--text-2); }
.btn--danger { background: var(--issue); color: #fff; }
.btn--light { color: #fff; }

.ghost-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 13px 16px; border-radius: var(--r-sm);
  border: 1.5px dashed var(--line); color: var(--text-3);
  font-size: 14px; font-weight: 500;
  transition: border-color .2s, color .2s, background .2s, transform .18s var(--spring);
}
.ghost-btn:active { transform: scale(.98); }
.ghost-btn--block { width: 100%; margin-top: 12px; }
.ghost-btn:hover { border-color: var(--accent-line); color: var(--accent); }

.text-btn {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--accent); font-size: 13px; font-weight: 600;
  padding: 6px 4px; border-radius: 8px;
  transition: opacity .2s, transform .18s var(--spring);
}
.text-btn:active { transform: scale(.94); opacity: .7; }
.text-btn--center { display: flex; margin: 14px auto 0; }
.text-btn--light { color: #fff; }

/* Material-ish ripple, injected by ui.js */
.ripple {
  position: absolute; border-radius: 50%;
  background: currentColor; opacity: .22;
  transform: scale(0); pointer-events: none;
  animation: ripple .55s var(--ease-out) forwards;
}
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* ------------------------------------------------------------ Bottom bar */

.bottombar {
  display: flex; gap: 10px;
  padding: 12px 18px calc(12px + var(--safe-b));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--line-soft);
  position: relative; z-index: 4;
}

/* ------------------------------------------------------------ Lock screen */

.screen--full { background: var(--bg); }
.lock {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 28px calc(40px + var(--safe-b)); text-align: center;
  overflow-y: auto;
}
.lock__mark {
  width: 62px; height: 62px; display: grid; place-items: center;
  border-radius: 20px; background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 700; font-size: 27px;
  box-shadow: 0 14px 34px var(--accent-line);
  animation: dropIn .6s var(--spring) both;
}
.lock__title { font-family: var(--font-display); font-weight: 700; font-size: 25px; margin: 20px 0 4px; letter-spacing: -.02em; }
.lock__sub { color: var(--text-2); font-size: 14.5px; margin: 0 0 26px; }
.lock__form { width: 100%; max-width: 340px; }
.lock__extra { text-align: left; margin-bottom: 8px; }
.lock__error { min-height: 20px; color: var(--issue); font-size: 13px; font-weight: 500; margin: 10px 0 6px; }
.lock__note { color: var(--text-3); font-size: 12px; margin-top: 16px; line-height: 1.5; }

@keyframes dropIn {
  0% { opacity: 0; transform: translateY(-18px) scale(.8); }
  100% { opacity: 1; transform: none; }
}

.pin { margin-bottom: 12px; }
.pin__field {
  width: 100%; padding: 15px 16px; text-align: center;
  font-family: var(--font-display); font-size: 21px; font-weight: 600;
  letter-spacing: .34em; text-indent: .34em;   /* keeps the run visually centred */
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--r-sm); color: var(--text);
  transition: border-color .18s, box-shadow .18s;
}
.pin__field::placeholder { letter-spacing: .08em; text-indent: 0; font-size: 15px; font-weight: 500; color: var(--text-3); }
.pin__field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pin.is-shaking { animation: shake .4s ease; }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

/* ----------------------------------------------------------------- Steps */

.steps { display: flex; justify-content: center; gap: 7px; padding: 2px 0 10px; }
.steps__dot {
  width: 7px; height: 7px; border-radius: var(--r-full);
  background: var(--line); transition: width .35s var(--ease), background .3s;
}
.steps__dot.is-active { width: 26px; background: var(--accent); }
.steps__dot.is-done { background: var(--accent-line); }

.step { display: none; animation: stepIn .34s var(--ease) both; }
.step.is-active { display: block; }
.step.is-back { animation-name: stepInBack; }
.step__title {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  margin: 6px 0 18px; letter-spacing: -.015em;
}
@keyframes stepIn { from { opacity: 0; transform: translateX(22px); } }
@keyframes stepInBack { from { opacity: 0; transform: translateX(-22px); } }

.divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 14px; color: var(--text-3);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.callout {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--r-sm); padding: 12px 14px; margin-top: 6px;
  color: var(--text-2); font-size: 13px;
  animation: fadeUp .35s var(--ease) both;
}
.callout .ic { color: var(--accent); margin-top: 2px; }
.callout strong { display: block; color: var(--text); font-size: 13.5px; }

/* --------------------------------------------------------- Rooms picker */

.rooms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.room-tile {
  position: relative; text-align: left;
  padding: 14px 13px; border-radius: var(--r-md);
  background: var(--surface); border: 1.5px solid var(--line);
  transition: border-color .2s, background .2s, transform .18s var(--spring);
}
.room-tile:active { transform: scale(.97); }
.room-tile.is-on { border-color: var(--accent); background: var(--accent-soft); }
/* Block, and inset from the tick, so a long name never runs under the badge. */
.room-tile__name { display: block; font-weight: 600; font-size: 14px; line-height: 1.25; padding-right: 26px; }
.room-tile__count { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 3px; }
.room-tile__tick {
  position: absolute; top: 10px; right: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  opacity: 0; transform: scale(.4); transition: opacity .2s, transform .25s var(--spring);
}
.room-tile.is-on .room-tile__tick { opacity: 1; transform: scale(1); }

/* -------------------------------------------------------- Inspect screen */

.progress { height: 3px; background: var(--line-soft); position: relative; z-index: 4; }
.progress__fill {
  height: 100%; width: 0; background: var(--accent);
  border-radius: 0 3px 3px 0;
  transition: width .55s var(--ease);
  box-shadow: 0 0 10px var(--accent-line);
}

.property-card {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px; margin: 14px 0 12px;
  box-shadow: var(--shadow-1);
}
.property-card__main { flex: 1; min-width: 0; }
.property-card__address { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.3; }
.property-card__meta { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }
.property-card__ref {
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--text-3); background: var(--surface-3);
  padding: 4px 8px; border-radius: 6px; white-space: nowrap;
}

.cost {
  display: flex; align-items: stretch;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; margin-bottom: 18px;
  box-shadow: var(--shadow-1);
}
.cost__cell { flex: 1; padding: 13px 14px; }
.cost__divide { width: 1px; background: var(--line); }
.cost__label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 600; }
.cost__value {
  display: block; font-family: var(--font-display); font-weight: 700; font-size: 21px;
  margin-top: 3px; font-variant-numeric: tabular-nums;
}
.cost__value--danger { color: var(--issue); }
.cost__note { display: block; font-size: 11px; color: var(--text-3); margin-top: 1px; }
.cost__value.is-bumped { animation: bump .45s var(--spring); }
@keyframes bump { 40% { transform: scale(1.14); } }

/* ----------------------------------------------------------------- Room */

.room {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); margin-bottom: 11px; overflow: hidden;
  box-shadow: var(--shadow-1);
}
.room__head {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 13px 14px; text-align: left;
  transition: background .18s;
}
.room__head:active { background: var(--surface-2); }
.room__chevron { color: var(--text-3); transition: transform .32s var(--ease); }
.room.is-collapsed .room__chevron { transform: rotate(-90deg); }
.room__name { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.room__count { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.room__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.room__dot--pending { background: var(--line); }
.room__dot--issue { background: var(--issue); }

/* 0fr→1fr is animatable, unlike max-height guesswork. */
.room__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .34s var(--ease); }
.room.is-collapsed .room__body { grid-template-rows: 0fr; }
.room__inner { overflow: hidden; min-height: 0; }

.room__tools {
  display: flex; gap: 8px; padding: 0 14px 12px; border-top: 1px solid var(--line-soft); padding-top: 11px;
}
.room__tools .text-btn { font-size: 12px; }

/* ----------------------------------------------------------------- Item */

.item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-top: 1px solid var(--line-soft);
}
.item__info { flex: 1; min-width: 0; }
.item__name { font-size: 14.5px; font-weight: 500; line-height: 1.3; }
.item__note {
  font-size: 12px; color: var(--text-3); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.item__pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.item.is-tappable .item__info { cursor: pointer; }

.pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2.5px 7px; border-radius: 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  background: var(--surface-3); color: var(--text-2);
}
.pill--major { background: var(--issue-bg); color: var(--issue); }
.pill--minor { background: var(--warn-bg); color: var(--warn); }
.pill--damage { background: var(--issue-bg); color: var(--issue); }
.pill--wear { background: var(--na-bg); color: var(--na); }
.pill--cost { background: var(--surface-3); color: var(--text); font-variant-numeric: tabular-nums; }
.pill--was { background: transparent; border: 1px dashed var(--line); color: var(--text-3); }

/* Segmented status control. The chosen segment widens and reveals its label. */
.status { display: flex; gap: 3px; flex: none; background: var(--surface-3); border-radius: var(--r-full); padding: 3px; }
.status__btn {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  width: 38px; height: 34px; border-radius: var(--r-full);
  color: var(--text-3); overflow: hidden;
  transition: width .3s var(--spring), background .22s, color .22s, box-shadow .22s;
}
.status__btn span {
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  transition: max-width .3s var(--spring), opacity .2s;
}
.status__btn.is-on { width: 74px; background: var(--surface); box-shadow: var(--shadow-1); }
.status__btn.is-on span { max-width: 42px; opacity: 1; }
.status__btn[data-status="ok"].is-on { color: var(--ok); }
.status__btn[data-status="issue"].is-on { color: var(--issue); }
.status__btn[data-status="na"].is-on { color: var(--na); }
.status__btn:active { transform: scale(.92); }

/* ------------------------------------------------------------ Signatures */

.sig {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px; margin-bottom: 14px;
  box-shadow: var(--shadow-1);
}
.sig__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sig__title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); }
.sig__name { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.sig__pad {
  width: 100%; height: 160px; display: block; touch-action: none;
  background: var(--surface-2); border: 1.5px dashed var(--line);
  border-radius: var(--r-sm); transition: border-color .2s, background .2s;
}
.sig__pad.has-ink { border-style: solid; border-color: var(--accent-line); background: var(--surface); }
.sig__baseline { text-align: center; font-size: 11.5px; color: var(--text-3); margin-top: 7px; }
.sig.is-signed .sig__baseline span::after { content: ' ✓'; color: var(--ok); }
.sig.is-disabled { opacity: .45; pointer-events: none; }

/* ----------------------------------------------------------------- Done */

.burst { position: relative; width: 108px; height: 108px; display: grid; place-items: center; margin-bottom: 6px; }
.burst__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--accent); opacity: 0;
}
.burst__check {
  width: 62px; height: 62px; fill: none; stroke: var(--accent);
  stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 60; stroke-dashoffset: 60;
}
.burst.is-playing .burst__ring { animation: ripple-out 1.05s var(--ease-out) forwards; }
.burst.is-playing .burst__ring--2 { animation-delay: .18s; }
.burst.is-playing .burst__check { animation: draw .55s .2s var(--ease-out) forwards; }
@keyframes ripple-out {
  0% { transform: scale(.35); opacity: .85; }
  100% { transform: scale(1.25); opacity: 0; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.done__title { font-family: var(--font-display); font-weight: 700; font-size: 25px; margin: 14px 0 6px; }
.done__sub { color: var(--text-2); font-size: 14px; margin: 0 0 22px; max-width: 32ch; }
.done__stats { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 26px; }
.done__actions { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 10px; }

/* --------------------------------------------------------------- Sheets */

.sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; }
.sheet[hidden] { display: none; }
.sheet__scrim {
  position: absolute; inset: 0; background: rgba(8, 11, 18, .55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .3s var(--ease);
}
.sheet.is-open .sheet__scrim { opacity: 1; }
.sheet__card {
  position: relative; width: 100%; max-height: 92vh;
  display: flex; flex-direction: column;
  background: var(--bg-elevated);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-4);
  transform: translateY(100%);
  transition: transform .42s var(--ease);
  padding-bottom: var(--safe-b);
}
.sheet.is-open .sheet__card { transform: translateY(0); }
.sheet.is-dragging .sheet__card { transition: none; }
.sheet--menu .sheet__card { padding: 0 18px calc(18px + var(--safe-b)); }

.sheet__grip {
  width: 40px; height: 4px; border-radius: 4px; background: var(--line);
  margin: 10px auto 4px; flex: none;
}
.sheet__head { display: flex; align-items: flex-start; gap: 10px; padding: 6px 18px 10px; }
.sheet__eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--accent); }
.sheet__title { font-family: var(--font-display); font-weight: 600; font-size: 19px; margin: 2px 0 0; flex: 1; }
.sheet--menu .sheet__title { text-align: center; margin: 6px 0 4px; font-size: 17px; }
.sheet__lead { text-align: center; color: var(--text-2); font-size: 13.5px; margin: 0 0 16px; }
.sheet__body { flex: 1; overflow-y: auto; padding: 4px 18px 14px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.sheet__foot {
  display: flex; gap: 10px; padding: 12px 18px calc(12px + var(--safe-b));
  border-top: 1px solid var(--line-soft); background: var(--bg-elevated);
}
.sheet__foot--flat { border: 0; padding: 4px 0 8px; }

.menu { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.menu__item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left; padding: 15px 12px;
  border-radius: var(--r-sm); font-size: 15px; font-weight: 500; color: var(--text);
  transition: background .18s;
}
.menu__item:active { background: var(--surface-3); }
.menu__item .ic { color: var(--text-3); }
.menu__item--danger { color: var(--issue); }
.menu__item--danger .ic { color: var(--issue); }

/* ---------------------------------------------------------------- Photos */

.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; margin-bottom: 6px; }
.photo {
  position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden;
  background: var(--surface-3); border: 1px solid var(--line);
  animation: fadeUp .35s var(--ease) both;
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo__mark {
  position: absolute; top: 4px; left: 4px;
  background: rgba(8, 11, 18, .6); color: #fff;
  border-radius: 5px; padding: 2px 5px; font-size: 9px; font-weight: 700; letter-spacing: .04em;
}
.photo--add {
  display: grid; place-items: center; color: var(--text-3);
  border-style: dashed; background: var(--surface-2);
  transition: border-color .2s, color .2s, transform .18s var(--spring);
}
.photo--add:active { transform: scale(.94); }
.photo--busy { display: grid; place-items: center; }

/* -------------------------------------------------------------- Lightbox */

.lightbox { position: fixed; inset: 0; z-index: 80; background: #06080d; display: flex; flex-direction: column; animation: fade .22s ease both; }
.lightbox[hidden] { display: none; }
.lightbox__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--safe-t) + 8px) 10px 8px; color: #fff;
}
.lightbox__count { font-size: 13px; opacity: .7; }
.lightbox__stage { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 6px; }
.lightbox__stage img {
  max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px;
  animation: zoomIn .3s var(--ease-out) both;
}
.lightbox__foot { display: flex; gap: 8px; padding: 10px 14px calc(14px + var(--safe-b)); justify-content: space-between; }
@keyframes zoomIn { from { opacity: 0; transform: scale(.9); } }
@keyframes fade { from { opacity: 0; } }

/* -------------------------------------------------------------- Annotate */

.annot { position: fixed; inset: 0; z-index: 90; background: #06080d; display: flex; flex-direction: column; }
.annot[hidden] { display: none; }
.annot__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--safe-t) + 8px) 12px 8px; color: #fff;
}
.annot__title { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.annot__stage { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 6px; }
.annot__stage canvas { max-width: 100%; max-height: 100%; touch-action: none; border-radius: 6px; }
.annot__tools {
  display: flex; flex-direction: column; gap: 12px;
  padding: 12px 16px calc(16px + var(--safe-b));
  background: rgba(255, 255, 255, .05);
}
.tools { display: flex; gap: 8px; justify-content: center; }
.tool {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center; color: rgba(255, 255, 255, .68);
  background: rgba(255, 255, 255, .08);
  transition: background .2s, color .2s, transform .18s var(--spring);
}
.tool:active { transform: scale(.9); }
.tool.is-active { background: #fff; color: #06080d; }

.swatches { display: flex; gap: 10px; justify-content: center; }
.swatch {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2.5px solid transparent; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset;
  transition: transform .2s var(--spring), border-color .2s;
}
.swatch.is-active { border-color: #fff; transform: scale(1.16); }

/* -------------------------------------------------------------- Settings */

.colors { display: flex; gap: 9px; flex-wrap: wrap; }
.color-dot {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2.5px solid transparent; box-shadow: var(--shadow-1);
  transition: transform .2s var(--spring), border-color .2s;
}
.color-dot.is-active { border-color: var(--text); transform: scale(1.12); }

.seg { display: flex; gap: 3px; background: var(--surface-3); border-radius: var(--r-full); padding: 3px; }
.seg__btn {
  flex: 1; padding: 10px 8px; border-radius: var(--r-full);
  font-size: 13.5px; font-weight: 600; color: var(--text-2);
  transition: background .22s, color .22s, box-shadow .22s, transform .18s var(--spring);
}
.seg__btn:active { transform: scale(.96); }
.seg__btn.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.seg--pick .seg__btn.is-on { background: var(--accent); color: var(--accent-ink); }
.seg--pick .seg__btn--danger.is-on { background: var(--issue); color: #fff; }
.seg--theme { margin-bottom: 6px; }

.version { text-align: center; color: var(--text-3); font-size: 11.5px; margin: 26px 0 10px; }

/* ----------------------------------------------------------- Chrome bits */

.offline {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(-140%);
  top: calc(var(--safe-t) + 8px); z-index: 100;
  display: flex; align-items: center; gap: 8px;
  background: var(--warn); color: #1c1400;
  padding: 8px 15px; border-radius: var(--r-full);
  font-size: 12.5px; font-weight: 600;
  box-shadow: var(--shadow-2);
  transition: transform .42s var(--spring);
}
.offline.is-up { transform: translateX(-50%) translateY(0); }

.toast {
  position: fixed; left: 50%; bottom: calc(26px + var(--safe-b));
  transform: translateX(-50%) translateY(140%) scale(.94);
  z-index: 110; max-width: min(92vw, 420px);
  background: var(--text); color: var(--bg);
  padding: 12px 18px; border-radius: var(--r-full);
  font-size: 13.5px; font-weight: 500; text-align: center;
  box-shadow: var(--shadow-3);
  opacity: 0; pointer-events: none;
  transition: transform .42s var(--spring), opacity .3s;
}
.toast.is-up { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
.toast--error { background: var(--issue); color: #fff; }

.loading { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: rgba(8, 11, 18, .42); backdrop-filter: blur(3px); animation: fade .2s ease both; }
.loading[hidden] { display: none; }
.loading__card {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: var(--bg-elevated); color: var(--text);
  padding: 26px 32px; border-radius: var(--r-lg);
  box-shadow: var(--shadow-3); font-size: 14px; font-weight: 500;
  animation: zoomIn .28s var(--spring) both;
}
.spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: spin .75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------- Screen motion */

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } }

.anim-in-fwd { animation: inFwd var(--dur) var(--ease) both; }
.anim-out-fwd { animation: outFwd var(--dur) var(--ease) both; }
.anim-in-back { animation: inBack var(--dur) var(--ease) both; }
.anim-out-back { animation: outBack var(--dur) var(--ease) both; }

@keyframes inFwd { from { opacity: .4; transform: translateX(100%); } }
@keyframes outFwd { to { opacity: .3; transform: translateX(-24%); } }
@keyframes inBack { from { opacity: .4; transform: translateX(-24%); } }
@keyframes outBack { to { opacity: .3; transform: translateX(100%); } }

/* Staggered entrance for freshly rendered lists. */
.stagger > * { animation: fadeUp .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .stagger > * { animation: none; }
}

/* ------------------------------------------------------------- Wide view */

@media (min-width: 720px) {
  .screen { max-width: 560px; margin: 0 auto; border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); }
  .rooms { grid-template-columns: repeat(3, 1fr); }
  .sheet__card { max-width: 560px; margin: 0 auto; border-radius: var(--r-xl) var(--r-xl) 0 0; }
}