/* Task-first screens: Home's "What do you want to do?" tiles, the New menu, the guided estimate and
   mockup flows, and Automatic follow-ups. Built only from the app.css tokens, so both themes and the
   lite skin follow without overrides. */

/* ---------- top bar New button ---------- */
.new-trigger { flex: none; display: inline-flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-6); font-weight: 650; min-height: 36px; }
.new-trigger span[aria-hidden] { font-size: var(--fs-lg); line-height: 1; }

/* ---------- sidebar: everyday items, All tools, and the settings foot ---------- */
.nav .nav-more { color: var(--txt-2); font-size: var(--fs-xs); font-weight: 600; }
.nav .nav-foot { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); }

/* ---------- task tiles ---------- */
.task-grid { display: grid; gap: var(--sp-5); }
.task-grid.big { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.task-grid.small { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--sp-5); }
.task-tile {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-5); row-gap: var(--sp-2);
  align-items: center; padding: var(--sp-6); min-height: var(--tap);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--txt); text-decoration: none; transition: border-color .12s, background .12s, transform .12s;
}
.task-tile:hover { border-color: var(--accent); background: var(--panel-2); }
.task-tile:focus-visible { outline: 0; border-color: var(--accent); box-shadow: var(--ring); }
.task-ic { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--accent-glow); color: var(--accent); }
.task-ic svg { width: 18px; height: 18px; }
.task-t { font-size: var(--fs-md); font-weight: 650; letter-spacing: -.01em; }
.task-s { font-size: var(--fs-xs); color: var(--txt-2); line-height: 1.4; }
.task-grid.big .task-tile { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-3); padding: var(--sp-7) var(--sp-7) var(--sp-8); }
.task-grid.big .task-ic { grid-row: auto; width: 44px; height: 44px; margin-bottom: var(--sp-3); }
.task-grid.big .task-ic svg { width: 22px; height: 22px; }
.task-grid.big .task-t { font-size: var(--fs-xl); }
.task-grid.big .task-s { font-size: var(--fs-sm); }
.task-grid.big .task-tile::after { content: '→'; position: absolute; top: var(--sp-7); right: var(--sp-7); color: var(--txt-3); font-size: var(--fs-lg); transition: color .12s, transform .12s; }
.task-grid.big .task-tile:hover::after { color: var(--accent); transform: translateX(2px); }
.modal .task-grid.big .task-tile { padding: var(--sp-6); }
.modal .task-grid.small { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- Home ---------- */
.home-launch { margin-bottom: var(--sp-8); }
.home-q { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; margin: 0 0 var(--sp-6); }
.home-sub { font-size: var(--fs-sm); font-weight: 650; color: var(--txt-2); text-transform: uppercase; letter-spacing: .6px; margin: var(--sp-9) 0 var(--sp-5); }
.home-first { margin: var(--sp-6) 0 0; font-size: var(--fs-sm); color: var(--txt-2); line-height: 1.6; }
.home-first a { margin-left: var(--sp-3); }

/* ---------- guided flows ---------- */
.guide { max-width: 1080px; }
.guide-steps { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-7); list-style: none; padding: 0; margin: 0 0 var(--sp-7); }
.guide-steps li { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-sm); color: var(--txt-3); font-weight: 550; }
.gs-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-2); font-size: var(--fs-xs); font-weight: 700; }
.guide-steps li.on { color: var(--txt); }
.guide-steps li.on .gs-n { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.guide-steps li.done { color: var(--txt-2); }
.guide-steps li.done .gs-n { border-color: var(--accent); color: var(--accent); }

.guide-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-8); min-width: 0; }
.guide-q { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; margin: var(--sp-7) 0 var(--sp-5); }
.guide-card > .guide-q:first-child, .guide-card > h2:first-child { margin-top: 0; }
.guide-hint { font-size: var(--fs-sm); color: var(--txt-2); line-height: 1.55; margin: 0 0 var(--sp-6); }
.guide-hint a, .sent-box a:not(.btn), .home-first a { color: var(--accent); font-weight: 600; }
.guide-hint.center { text-align: center; margin: var(--sp-5) 0 0; }
.guide-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-7); align-items: start; }
.guide-split.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.guide-who { font-size: var(--fs-sm); color: var(--txt-2); margin-bottom: var(--sp-6); }
.guide-who strong { color: var(--txt); }
.linkbtn { background: none; border: 0; padding: 0 var(--sp-2); color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; min-height: 0; }
.linkbtn:hover { text-decoration: underline; }
.guide-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); margin-top: var(--sp-5); }
.guide-row .spacer { flex: 1; }
.guide-total { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-sm); color: var(--txt-2); }
.guide-total .input { width: 96px; }
.guide-check { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-6); font-size: var(--fs-sm); color: var(--txt-2); cursor: pointer; }
.guide-check input { width: 18px; height: 18px; accent-color: var(--accent); }

.guide-paste { margin: 0 0 var(--sp-6); border: 1px dashed var(--line-2); border-radius: var(--r-md); padding: var(--sp-5) var(--sp-6); background: var(--bg-2); }
.guide-paste summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--accent); }
.guide-paste textarea { margin: var(--sp-5) 0; }

.size-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--sp-4); }
.size-box { display: grid; gap: var(--sp-2); text-align: center; font-size: var(--fs-xs); font-weight: 650; color: var(--txt-2); }
.size-box .input { text-align: center; font-size: var(--fs-lg); padding: var(--sp-4) var(--sp-2); font-variant-numeric: tabular-nums; }

.choice-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.choice {
  min-height: var(--tap); padding: var(--sp-4) var(--sp-7); border-radius: var(--r-md); cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--txt); font: inherit; font-size: var(--fs-sm); font-weight: 600;
}
.choice:hover { border-color: var(--accent); }
.choice.on { background: var(--accent-glow); border-color: var(--accent); color: var(--accent); }
.choice:focus-visible { outline: 0; box-shadow: var(--ring); }

.spots { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.spot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); }
.spot > select { flex: 1 1 180px; max-width: 260px; }
.spot-colors { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-sm); color: var(--txt-2); }
.spot-colors select { width: 72px; }
.spot .del { background: 0; border: 0; color: var(--txt-3); font-size: var(--fs-xl); cursor: pointer; min-width: var(--tap); min-height: var(--tap); }
.spot .del:hover { color: var(--red); }

.price-card { position: sticky; top: 76px; }
.price-big { font-size: 34px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.price-sub { font-size: var(--fs-sm); color: var(--txt-2); margin: var(--sp-2) 0 var(--sp-6); }
.price-lines { list-style: none; padding: 0; margin: 0 0 var(--sp-6); border-top: 1px solid var(--line); }
.price-lines li { display: flex; justify-content: space-between; gap: var(--sp-5); padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-xs); color: var(--txt-2); }
.price-lines li span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--txt); }
.price-empty { font-size: var(--fs-sm); color: var(--txt-3); line-height: 1.55; margin: 0 0 var(--sp-7); }
.price-empty.bad { color: var(--red); }
#g-price.busy { opacity: .55; transition: opacity .15s; }
.btn.big { width: 100%; justify-content: center; font-size: var(--fs-md); padding: var(--sp-5) var(--sp-7); min-height: 48px; }
.guide-actions .btn.big { width: auto; }

.guide-done { max-width: 640px; text-align: center; margin: 0 auto; }
.done-badge { width: 56px; height: 56px; margin: 0 auto var(--sp-6); border-radius: 50%; display: grid; place-items: center; background: var(--accent-glow); color: var(--accent); font-size: 26px; font-weight: 800; }
.guide-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-5); margin-top: var(--sp-6); }
.field.narrow { max-width: 360px; margin: 0 auto var(--sp-5); text-align: left; }
.sent-box { margin-top: var(--sp-7); padding-top: var(--sp-7); border-top: 1px solid var(--line); }
.sent-box p { font-size: var(--fs-sm); line-height: 1.6; }
.copy-row { display: flex; gap: var(--sp-4); max-width: 520px; margin: var(--sp-5) auto; }
.copy-row .input { flex: 1; min-width: 0; font-family: var(--mono); font-size: var(--fs-xs); }

/* ---------- customer / order picker ---------- */
.cp-q { font-size: var(--fs-lg); padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-5); }
.cp-list { display: grid; gap: var(--sp-3); }
.cp-row {
  display: flex; align-items: center; gap: var(--sp-5); width: 100%; min-height: 56px; padding: var(--sp-4) var(--sp-5);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer;
  color: var(--txt); font: inherit; text-align: left; text-decoration: none;
}
.cp-row:hover, .cp-row:focus-visible { border-color: var(--accent); outline: 0; }
.cp-row:focus-visible { box-shadow: var(--ring); }
.cp-av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-glow); color: var(--accent); font-weight: 700; font-size: var(--fs-sm); }
.cp-av svg { width: 16px; height: 16px; }
.cp-txt { display: grid; min-width: 0; flex: 1; }
.cp-n { font-weight: 650; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-d { font-size: var(--fs-xs); color: var(--txt-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-go { flex: none; font-size: var(--fs-xs); font-weight: 650; color: var(--txt-3); }
.cp-row:hover .cp-go { color: var(--accent); }
.cp-none { margin: var(--sp-4) 0; }
.cp-new { margin-top: var(--sp-6); }
.cp-new summary { cursor: pointer; font-weight: 650; color: var(--accent); font-size: var(--fs-sm); padding: var(--sp-3) 0; }
.cp-form { margin-top: var(--sp-5); }

/* ---------- Automatic follow-ups ---------- */
.af { max-width: 900px; }
.af-intro h1 { font-size: var(--fs-2xl); font-weight: 750; letter-spacing: -.02em; margin: 0 0 var(--sp-3); }
.af-intro p { color: var(--txt-2); font-size: var(--fs-md); margin: 0 0 var(--sp-7); line-height: 1.55; }
.af-warn { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-6);
  border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); background: color-mix(in srgb, var(--amber) 10%, transparent); border-radius: var(--r-md); font-size: var(--fs-sm); }
.af-warn .btn { margin-left: auto; }
.af-list { display: grid; gap: var(--sp-5); }
.af-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-6) var(--sp-7); }
.af-card.on { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.af-head { display: flex; gap: var(--sp-6); align-items: flex-start; }
.af-tog { margin-top: 2px; width: 46px; height: 26px; }
.af-tog span::before { width: 18px; height: 18px; left: 4px; top: 4px; }
.af-tog input:checked + span::before { transform: translateX(20px); background: #fff; }
.af-tog input:focus-visible + span { box-shadow: var(--ring); }
.af-main { flex: 1; min-width: 0; }
.af-main h3 { font-size: var(--fs-lg); font-weight: 700; margin: 0 0 var(--sp-3); display: flex; align-items: center; gap: var(--sp-4); }
.af-state { font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .7px; padding: var(--sp-1) var(--sp-4); border-radius: var(--r-full); background: var(--panel-2); color: var(--txt-3); }
.af-card.on .af-state { background: var(--accent-glow); color: var(--accent); }
.af-when { margin: 0; font-size: var(--fs-sm); color: var(--txt-2); line-height: 2.1; }
.af-days { display: inline-block; width: 64px; text-align: center; padding: var(--sp-2) var(--sp-3); margin: 0 var(--sp-2); }
.af-then, .af-meta { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--txt-3); }
.af-email { margin: var(--sp-5) 0 0 calc(46px + var(--sp-6)); }
.af-email summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--accent); padding: var(--sp-2) 0; }
.af-email[open] summary { margin-bottom: var(--sp-5); }
.af-tokens { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-5); font-size: var(--fs-xs); }
/* Bubble, not a field: it is read-only and must not look editable. */
.af-preview { margin: 0 0 var(--sp-5); padding: var(--sp-5) var(--sp-6); border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--line); }
.af-preview-l { font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .7px; color: var(--txt-3); font-weight: 650; margin-bottom: var(--sp-3); }
.af-preview-s { font-weight: 650; font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.af-preview-b { white-space: pre-wrap; font-size: var(--fs-sm); color: var(--txt-2); line-height: 1.55; }
.af-foot { margin-top: var(--sp-8); }
.af-foot .guide-hint { margin-top: var(--sp-6); }
.af-runs { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); font-size: var(--fs-xs); }
.af-runs li.bad strong { color: var(--red); }

/* The phone-only total bar for the guided estimate; sits above the mobile tab bar. */
.price-dock { display: none; }
/* ---------- small screens ---------- */
@media (max-width: 1100px) {
  .task-grid.small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .task-grid.big, .guide-split, .guide-split.even { grid-template-columns: minmax(0, 1fr); }
  .price-card { position: static; }
  .price-dock:not([hidden]) { display: flex; align-items: center; gap: var(--sp-5); position: fixed; left: var(--sp-5); right: var(--sp-5);
    bottom: calc(68px + env(safe-area-inset-bottom, 0px)); z-index: 30; padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6);
    background: var(--panel); border: 1px solid var(--accent); border-radius: var(--r-md); box-shadow: var(--shadow); }
  .price-dock-v { flex: 1; font-weight: 750; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
  .guide-card { padding: var(--sp-6); }
  .af-email { margin-left: 0; }
}
@media (max-width: 640px) {
  .new-trigger .lbl { display: none; }
  .new-trigger { padding: var(--sp-4) var(--sp-5); }
  .task-grid.small, .modal .task-grid.small { grid-template-columns: minmax(0, 1fr); }
  .task-grid.big .task-tile { padding: var(--sp-6); }
  .task-grid.big .task-t { font-size: var(--fs-lg); }
  .copy-row { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .task-tile, .task-grid.big .task-tile::after, #g-price.busy { transition: none; }
}