/* TaNoAr components — one block per Figma component. Markup reference: ui/COMPONENTS.md */
@import url("tokens.css");

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--paper); color: var(--ink); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- layout helpers ---------- */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.grow { flex: 1 1 0; min-width: 0; }
.gap-2{gap:2px}.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}
.divider { height: 1px; background: var(--line); align-self: stretch; }
.vdivider { width: 1px; align-self: stretch; background: var(--line); }

/* ---------- icon ---------- */
.i { width: var(--i, 20px); height: var(--i, 20px); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- screen (device frame) ---------- */
.screen { width: 402px; height: 874px; background: var(--paper); position: relative; overflow: hidden; display: flex; flex-direction: column; }
.screen.scroll { height: auto; min-height: 874px; }           /* full-scroll artboards */
.screen > .content { flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; padding: 8px 24px 24px; gap: 16px; }
.screen.scroll > .content { overflow: visible; }
.desktop { width: 1280px; min-height: 832px; background: var(--paper); display: flex; position: relative; overflow: hidden; }

/* ---------- Status bar ---------- */
.status-bar { height: 54px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 34px 0 44px; }
.status-bar .time { font: 600 17px/22px var(--font-ui); }
.status-bar.light { color: var(--on-ink); }

/* ---------- Home indicator ---------- */
.home-indicator { height: 34px; flex: none; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; }
.home-indicator::after { content: ""; width: 140px; height: 5px; border-radius: 100px; background: var(--ink); }
.home-indicator.light::after { background: var(--on-ink); }

/* ---------- Tag ---------- */
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--r-full); font: 600 13px/18px var(--font-ui); white-space: nowrap; flex: none; }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag.no-dot::before { display: none; }
.tag.neutral { background: var(--paper); color: var(--ink-muted); }
.tag.live { background: var(--live-soft); color: var(--live-strong); }
.tag.amber { background: var(--amber-soft); color: var(--amber); }
.tag.red { background: var(--red-soft); color: var(--red); }
.tag.dark { background: var(--ink); color: var(--on-ink); }

/* ---------- Chip ---------- */
.chips { display: flex; gap: 8px; overflow: hidden; flex: none; }
.chip { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: var(--r-full); font: 600 13px/18px var(--font-ui); white-space: nowrap; flex: none; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.chip.on { background: var(--ink); color: var(--on-ink); box-shadow: none; }

/* ---------- Button ---------- */
.btn { height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 20px; border-radius: var(--r-lg); font: 600 15px/21px var(--font-ui); white-space: nowrap; flex: none; }
.btn.grow { flex: 1 1 0; min-width: 0; }
.btn .i { --i: 20px; }
.btn.primary { background: var(--ink); color: var(--on-ink); }
.btn.live { background: var(--live); color: var(--ink-deep); }
.btn.secondary { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.danger { background: var(--red); color: #fff; }      /* destructive confirm (not in Figma v1; use sparingly) */
.btn.block { display: flex; width: 100%; }
.btn.sm { height: 40px; padding: 0 14px; border-radius: var(--r-md); font: 600 13px/18px var(--font-ui); }
.btn.sm .i { --i: 16px; }
.btn[disabled], .btn.disabled { opacity: .4; }

/* ---------- Circle button / icon boxes ---------- */
.circle-btn { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.circle-btn.live { background: var(--live); color: var(--ink-deep); box-shadow: none; }
.circle-btn.dark { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.icon-box { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: var(--r-md); background: var(--paper); color: var(--ink); }
.icon-box .i { --i: 18px; }
.icon-box.round { border-radius: 50%; }
.icon-box.sm { width: 32px; height: 32px; } .icon-box.sm .i { --i: 16px; }
.icon-box.live { background: var(--live-soft); color: var(--live-strong); }
.icon-box.amber { background: var(--amber-soft); color: var(--amber); }
.icon-box.red { background: var(--red-soft); color: var(--red); }
.avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--ink); color: var(--on-ink); font: 600 13px/18px var(--font-ui); }
.avatar.sm { width: 36px; height: 36px; }
.avatar.paper { background: var(--paper); color: var(--ink); }

/* ---------- Card / section ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.card.pad { padding: 20px; }
.card.list { padding: 4px 16px; }                         /* list card: rows separated by .divider */
.section { display: flex; flex-direction: column; gap: 12px; }
.section-head { display: flex; flex-direction: column; gap: 2px; }
.banner { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: var(--r-md); }
.banner.live { background: var(--live-soft); } .banner.amber { background: var(--amber-soft); } .banner.red { background: var(--red-soft); }
.dark-card { background: var(--ink-deep); color: var(--on-ink); border-radius: var(--r-xl); padding: 20px; }
.tip { background: var(--ink-deep); color: var(--on-ink); border-radius: var(--r-lg); padding: 20px; display: flex; flex-direction: column; gap: 8px; }

/* ---------- Search field ---------- */
.field-search { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r-md); color: var(--ink-subtle); font: 400 15px/21px var(--font-ui); }
.field-search.focused { box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); }
.square-btn { width: 46px; height: 46px; flex: none; border-radius: var(--r-md); display: grid; place-items: center; background: var(--ink); color: var(--on-ink); }

/* ---------- Input ---------- */
.input { display: flex; flex-direction: column; gap: 8px; }
.input .label { font: 600 13px/18px var(--font-ui); }
.input .field { display: flex; align-items: center; gap: 10px; padding: 13px 16px; background: var(--surface); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); font: 400 15px/21px var(--font-ui); }
.input .field .i { color: var(--ink-subtle); }
.input .field .placeholder { color: var(--ink-subtle); }
.input .helper { font: 400 13px/18px var(--font-ui); color: var(--ink-muted); }
.input.focused .field { box-shadow: inset 0 0 0 2px var(--ink); }
.input.error .field { box-shadow: inset 0 0 0 2px var(--red); }
.input.error .helper { color: var(--red); }
textarea.field, .field.multiline { min-height: 96px; align-items: flex-start; }

/* ---------- Toggle / checkbox / radio ---------- */
.toggle { width: 51px; height: 31px; border-radius: var(--r-full); background: var(--line); padding: 2px; display: flex; flex: none; }
.toggle::after { content: ""; width: 27px; height: 27px; border-radius: 50%; background: var(--surface); box-shadow: 0 2px 4px rgba(0,0,0,.15); }
.toggle.on { background: var(--live); justify-content: flex-end; }
.checkbox { width: 22px; height: 22px; border-radius: 6px; flex: none; box-shadow: inset 0 0 0 1.5px var(--ink-subtle); background: var(--surface); display: grid; place-items: center; color: var(--on-ink); }
.checkbox.on { background: var(--ink); box-shadow: none; }
.checkbox .i { --i: 14px; }
.radio { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px var(--ink-subtle); background: var(--surface); }
.radio.on { box-shadow: inset 0 0 0 7px var(--ink); }
.option { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.option.selected { box-shadow: inset 0 0 0 2px var(--ink); }

/* ---------- Progress ---------- */
.progress { height: 6px; border-radius: var(--r-full); background: var(--line); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--live); }
.progress.amber { background: var(--surface); } .progress.amber > span { background: var(--amber); }

/* ---------- Logo ---------- */
/* Kite mark (brand/kite.svg, brand/kite-on-ink.svg) + "TaNoAr". Mark and gap are in em, so font-size overrides scale them. */
:root {
  --logo-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg transform='rotate(10 32 30)'%3E%3Cpath d='M32 4 14 20h18z' fill='%2312201A'/%3E%3Cpath d='M32 4 50 20H32z' fill='%231FB85A'/%3E%3Cpath d='M14 20 32 44V20z' fill='%231FB85A'/%3E%3Cpath d='M50 20 32 44V20z' fill='%2312201A'/%3E%3Cpath d='M32 44c-5 5 5 9 0 14' fill='none' stroke='%2312201A' stroke-width='3' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  --logo-mark-on-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg transform='rotate(10 32 30)'%3E%3Cpath d='M32 4 14 20h18z' fill='%23F6F3EC'/%3E%3Cpath d='M32 4 50 20H32z' fill='%231FB85A'/%3E%3Cpath d='M14 20 32 44V20z' fill='%231FB85A'/%3E%3Cpath d='M50 20 32 44V20z' fill='%23F6F3EC'/%3E%3Cpath d='M32 44c-5 5 5 9 0 14' fill='none' stroke='%23F6F3EC' stroke-width='3' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
}
.logo { display: inline-flex; align-items: center; gap: 0.16em; font: 700 22px/28px var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
.logo::before { content: ""; width: 0.95em; height: 0.95em; flex: none; background: var(--logo-mark) center / contain no-repeat; }
.logo.light { color: var(--on-ink); }
.logo.light::before { background-image: var(--logo-mark-on-ink); }

/* ---------- Top bar (pushed screen header) ---------- */
.top-bar { height: 60px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 4px 16px 12px; }
.top-bar .title { font: 600 17px/22px var(--font-ui); text-align: center; }
.top-bar .slot { width: 44px; height: 44px; flex: none; }

/* ---------- Browser bar (mobile web) ---------- */
.browser-bar { flex: none; padding: 4px 16px 10px; background: var(--paper); }
.browser-bar .url { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r-full); }
.browser-bar .aa { font: 600 13px/18px var(--font-ui); color: var(--ink-muted); }
.browser-bar .addr { display: flex; align-items: center; gap: 4px; font: 400 13px/18px var(--font-ui); color: var(--ink); }
.browser-bar .addr .i { --i: 12px; color: var(--ink-muted); }
.browser-bar .url > .i { --i: 16px; color: var(--ink-muted); }

/* ---------- Tab bar (seller app) / Owner tab bar ---------- */
.tab-bar { flex: none; background: var(--surface); border-top: 1px solid var(--line); }
.tab-bar .tabs { display: flex; padding: 8px 12px 0; }
.tab-bar.owner .tabs { padding: 8px 8px 0; }
.tab-bar .tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0; font: 400 13px/18px var(--font-ui); color: var(--ink-subtle); }
.tab-bar .pill { width: 56px; height: 30px; border-radius: var(--r-full); display: grid; place-items: center; position: relative; }
.tab-bar.owner .pill { width: 52px; }
.tab-bar .pill .i { --i: 22px; }
.tab-bar .tab.active { color: var(--ink); font-weight: 600; }
.tab-bar .tab.active .pill { background: var(--live-soft); }
.tab-bar .badge { position: absolute; left: 34px; top: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--live); color: var(--ink-deep); display: grid; place-items: center; font: 600 11px/14px var(--font-ui); }

/* ---------- Site preview (thumbnail of the built site) ---------- */
.site-preview { --site-bg: #6B3D26; --photo-a: #EDC78C; --photo-b: #B57340; background: var(--site-bg); color: var(--on-ink); padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 12px; height: 176px; overflow: hidden; }
.site-preview.rounded { border-radius: var(--r-lg); }
.site-preview .url { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-full); background: rgba(255,255,255,.16); font: 400 13px/18px var(--font-ui); }
.site-preview .url .i { --i: 11px; }
.site-preview .hero { flex: 1; display: flex; align-items: flex-end; gap: 14px; }
.site-preview .copy { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.site-preview .biz { font: 600 22px/28px var(--font-display); letter-spacing: -0.01em; }
.site-preview .tagline { font: 400 13px/18px var(--font-ui); opacity: .8; }
.site-preview .cta { align-self: flex-start; background: #fff; color: var(--ink); padding: 6px 12px; border-radius: var(--r-full); font: 600 13px/18px var(--font-ui); }
.site-preview .photo { width: 118px; height: 104px; flex: none; border-radius: 12px; background: linear-gradient(135deg, var(--photo-a), var(--photo-b)); }
/* business themes used across screens */
.theme-trigo   { --site-bg: #6B3D26; --photo-a: #EDC78C; --photo-b: #B57340; }  /* Padaria Flor do Trigo */
.theme-nonna   { --site-bg: #21452F; --photo-a: #F59E6B; --photo-b: #BD3D2E; }  /* Cantina Nonna Lia */
.theme-bigode  { --site-bg: #1C1C1E; --photo-a: #D9B26A; --photo-b: #7A5A2A; }  /* Barbearia Dom Bigode */
.theme-costura { --site-bg: #5B3A6B; --photo-a: #F2C6D8; --photo-b: #A0628A; }  /* Ateliê Costura Viva */
.theme-mare    { --site-bg: #1E4E6B; --photo-a: #9FD8E8; --photo-b: #3A86A8; }  /* Pousada Maré Mansa */
.theme-emporio { --site-bg: #7A2E2E; --photo-a: #F2D18B; --photo-b: #B0703A; }  /* Empório Santa Cecília */

/* ---------- Lead card ---------- */
.lead-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; flex: none; }
.lead-card .body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.lead-card .tags { display: flex; gap: 6px; }
.rating { display: inline-flex; align-items: center; gap: 4px; }
.rating .i { --i: 14px; color: var(--amber); }
.meta { display: inline-flex; align-items: center; gap: 4px; font: 400 13px/18px var(--font-ui); color: var(--ink-muted); }
.meta .i { --i: 14px; }

/* ---------- List row ---------- */
.list-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.list-row .text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.list-row > .chev { --i: 18px; color: var(--ink-subtle); }

/* ---------- Transaction row ---------- */
.tx-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; }
.tx-row .icon-box { border-radius: 50%; }
.tx-row .text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.tx-row .amount { padding-top: 2px; font: 600 15px/21px var(--font-ui); }
.tx-row .amount.plus { color: var(--live-strong); }

/* ---------- Timeline ---------- */
.timeline { display: flex; flex-direction: column; }
.tl-item { display: flex; gap: 12px; }
.tl-item .rail { width: 12px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 5px; }
.tl-item .rail .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); flex: none; }
.tl-item .rail .line { width: 2px; flex: 1; background: var(--line); }
.tl-item.current .rail .dot { background: var(--live); }
.tl-item:last-child .rail .line { display: none; }
.tl-item .text { flex: 1; display: flex; flex-direction: column; gap: 2px; padding-bottom: 16px; }

/* ---------- Search result ---------- */
.result { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r-md); }
.result.selected { box-shadow: inset 0 0 0 2px var(--ink); }
.result.disabled { opacity: .6; }
.result .text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.result .action { font: 600 13px/18px var(--font-ui); color: var(--live-strong); }

/* ---------- Stepper / slider ---------- */
.slider { position: relative; height: 24px; }
.slider .base { position: absolute; left: 0; right: 0; top: 9px; height: 6px; border-radius: 3px; background: var(--line); }
.slider .active { position: absolute; left: 0; top: 9px; height: 6px; border-radius: 3px; background: var(--live); }
.slider .thumb { position: absolute; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink), 0 2px 6px rgba(0,0,0,.12); transform: translateX(-12px); }

/* ---------- Sheet + scrim ---------- */
.scrim { position: absolute; inset: 0; background: rgba(12, 22, 17, .55); }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--surface); border-radius: 28px 28px 0 0; padding-top: 10px; display: flex; flex-direction: column; align-items: center; }
.sheet .grabber { width: 40px; height: 5px; border-radius: 3px; background: var(--line); flex: none; }
.sheet .sheet-body { align-self: stretch; padding: 16px 24px 0; display: flex; flex-direction: column; gap: 16px; }
.sheet > .home-indicator { align-self: stretch; }

/* ---------- Floating toast ---------- */
.toast { position: absolute; left: 16px; right: 16px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--ink); color: var(--on-ink); border-radius: var(--r-lg); box-shadow: var(--shadow-float); }

/* ---------- Admin (desktop) ---------- */
.admin-sidebar { width: 248px; flex: none; background: var(--surface); border-right: 1px solid var(--line); padding: 20px 16px; display: flex; flex-direction: column; gap: 4px; }
.admin-sidebar .brand { display: flex; align-items: center; gap: 8px; padding: 0 0 20px 12px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); font: 400 15px/21px var(--font-ui); color: var(--ink-muted); }
.nav-item .i { --i: 18px; }
.nav-item .label { flex: 1; }
.nav-item .count { padding: 2px 8px; border-radius: var(--r-full); background: var(--ink); color: var(--on-ink); font: 600 13px/18px var(--font-ui); }
.nav-item.active { background: var(--live-soft); color: var(--ink); font-weight: 600; }
.nav-item.active .i { color: var(--live-strong); }
.admin-sidebar .spacer { flex: 1; }
.admin-sidebar .user { display: flex; align-items: center; gap: 10px; padding: 12px 0 0 12px; }
.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 32px 20px; }
.admin-body { padding: 0 32px 32px; display: flex; flex-direction: column; gap: 20px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.table { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.table table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; background: var(--paper); padding: 12px 16px; font: 600 11px/14px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); border-bottom: 1px solid var(--line); }
.table td { padding: 14px 16px; font: 400 15px/21px var(--font-ui); border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr.selected td { background: var(--live-soft); }
.modal { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 480px; background: var(--surface); border-radius: var(--r-xl); padding: 28px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow-float); }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 440px; background: var(--surface); border-left: 1px solid var(--line); padding: 28px; display: flex; flex-direction: column; gap: 20px; box-shadow: var(--shadow-float); }

/* ======================================================================
   Shared components promoted from the group stylesheets (2026-10-25).
   ====================================================================== */

/* ---------- Extra-small button (admin tables, pagers) ---------- */
.btn.xs { height: 32px; padding: 0 12px; border-radius: var(--r-sm); font: 600 13px/18px var(--font-ui); gap: 6px; }
.btn.xs .i { --i: 14px; }

/* ---------- Ghost button on a dark surface (ink-deep screens) ---------- */
/* .on-ink-ghost is the older alias of .on-dark — same look. */
.btn.on-dark, .btn.on-ink-ghost { background: transparent; color: var(--on-ink); }

/* ---------- Segmented control ---------- */
/* Default: boxed track (line) with a raised white segment.  <div class="seg"><span class="on">A</span><span>B</span></div> */
.seg { display: flex; padding: 4px; gap: 4px; border-radius: var(--r-md); background: var(--line); flex: none; }
.seg > span, .seg > .item { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 0; border-radius: var(--r-sm); font: 600 13px/18px var(--font-ui); color: var(--ink-muted); text-align: center; white-space: nowrap; }
.seg > .on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(13, 23, 18, .12); }
.seg .i { --i: 16px; }
/* .pill: white pill track, the selected segment is ink (owner panel live/draft, map list/map) */
/* (:where keeps the track at .seg specificity so surface helpers such as .float can restyle it) */
.seg:where(.pill) { gap: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r-full); }
.seg.pill > span, .seg.pill > .item { padding: 8px 0; border-radius: var(--r-full); }
.seg.pill > .on { background: var(--ink); color: var(--on-ink); box-shadow: none; }
/* .auto: segments hug their content (icon + label) instead of sharing the width */
.seg.auto { gap: 2px; }
.seg.auto > span, .seg.auto > .item { flex: none; height: 36px; padding: 0 12px; }
/* .chips.seg: a segmented choice drawn as chips (Reservas tabs) */
.chips.seg { padding: 0; gap: 6px; background: none; border-radius: 0; }
.chips.seg > .chip { flex: none; gap: 0; padding: 8px 12px; border-radius: var(--r-full); background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.chips.seg > .chip.on { background: var(--ink); color: var(--on-ink); box-shadow: none; }

/* ---------- Bottom bar (sticky actions above the home indicator) ---------- */
/* .action-bar and .sticky-actions are aliases of .bottom-bar; .actions is an alias of .inner.
   The inner layout has zero specificity, so gap-* utilities override its 8px gap. */
.bottom-bar, .action-bar, .sticky-actions { flex: none; background: var(--surface); border-top: 1px solid var(--line); }
:where(.bottom-bar, .action-bar, .sticky-actions) > :where(.inner, .actions) { padding: 16px 24px 0; display: flex; flex-direction: column; gap: 8px; }
:where(.bottom-bar, .action-bar, .sticky-actions) > .row { padding: 16px 24px 0; }

/* ---------- Timeline states ---------- */
.tl-item.done .rail .dot { background: var(--live); }
.tl-item.done .rail .line { background: var(--live); }
.tl-item.pending .text .t-body { color: var(--ink-muted); }
/* .timeline.steps: numbered/checked progress (big dots, amber "current") */
.timeline.steps .tl-item .rail { width: 22px; }
.timeline.steps .tl-item .rail .dot { width: 22px; height: 22px; display: grid; place-items: center; color: var(--on-ink); margin-top: -2px; }
.timeline.steps .tl-item .rail .dot .i { --i: 12px; stroke-width: 3; }
.timeline.steps .tl-item .rail .line { background: var(--line); }
.timeline.steps .tl-item.done .rail .dot { background: var(--live); }
.timeline.steps .tl-item.done .rail .line { background: var(--live); }
.timeline.steps .tl-item.current .rail .dot { background: var(--amber); box-shadow: 0 0 0 5px var(--amber-soft); }
.timeline.steps .tl-item.todo .t-body { color: var(--ink-subtle); }

/* ---------- Sheet close button ---------- */
.sheet-close { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--paper); color: var(--ink); }
.sheet-close .i { --i: 18px; }

/* ---------- Settings row (label + trailing control) ---------- */
.set-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.set-row .text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.set-row > .chev { --i: 18px; color: var(--ink-subtle); }
.avatar.xl { width: 64px; height: 64px; }

/* ---------- Notification row ---------- */
.notif { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; }
.notif .icon-box { border-radius: 50%; }
.notif .text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif .side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-top: 2px; flex: none; }
.notif .unread { width: 8px; height: 8px; border-radius: 50%; background: var(--live); }

/* ---------- Notes under artboards (gallery only) ---------- */
.notes { width: 402px; padding: 16px 4px 0; font: 400 13px/18px var(--font-ui); color: var(--ink-muted); }