/* ==========================================================================
   Portal polish layer (2026-09-23)
   One global pass over the shared portal chrome: motion, buttons, inputs,
   tables, modal, tabs, toggles, loading, responsive fit, and quieter copy.
   Loaded AFTER the inline <style> in portal.html so equal-specificity rules
   here win. Islands keep their own scoped styles; only shared classes and a
   few island shells are touched. Every colour is a portal token.
   ========================================================================== */

:root{
  --ff-ease: cubic-bezier(.32,.72,0,1);
  --ff-spring: cubic-bezier(.34,1.56,.64,1);
  --ff-out: cubic-bezier(.16,1,.3,1);
  --ff-r-sm: 8px;
  --ff-r: 12px;
  --ff-r-lg: 18px;
  --ff-ring: 0 0 0 3px color-mix(in oklab, var(--accent) 28%, transparent);
  --ff-control-h: 36px;
  /* Dark defaults; html.light overrides below */
  --ff-field-bg: rgba(255,255,255,.04);
  --ff-field-line: rgba(255,255,255,.10);
  --ff-seg-track: rgba(255,255,255,.06);
  --ff-seg-on: rgba(255,255,255,.14);
  --ff-seg-on-shadow: 0 1px 2px rgba(0,0,0,.4);
  --ff-soft: rgba(255,255,255,.035);
}
html.light{
  --ff-field-bg: #f7f8fa;
  --ff-field-line: #dfe2e7;
  --ff-seg-track: #eef0f3;
  --ff-seg-on: #ffffff;
  --ff-seg-on-shadow: 0 1px 3px rgba(15,23,42,.12),0 0 0 .5px rgba(15,23,42,.08);
  --ff-soft: #f6f7f9;
}

/* ---- Typography + base ---- */
html{scrollbar-gutter:stable}
body{
  font-feature-settings:"cv11","ss01","ss03";
  text-rendering:optimizeLegibility;
}
::selection{background:color-mix(in oklab, var(--accent) 30%, transparent)}
h1,h2,h3,h4{letter-spacing:-.018em}
td,.stat-card .value,.ts-num{font-variant-numeric:tabular-nums}
:where(button,[role=button],a,input,select,textarea,summary):focus-visible{
  outline:none;box-shadow:var(--ff-ring);
}
*{-webkit-tap-highlight-color:transparent}

/* Thin, quiet scrollbars everywhere */
*{scrollbar-width:thin;scrollbar-color:color-mix(in oklab, var(--fg) 18%, transparent) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:color-mix(in oklab, var(--fg) 16%, transparent);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:color-mix(in oklab, var(--fg) 28%, transparent)}
::-webkit-scrollbar-track{background:transparent}

/* ---- Page enter ---- */
/* Opacity only on .page itself: a transform here would re-parent every
   position:fixed drawer inside the page for the length of the animation. */
.page.active{animation:ff-page-fade .32s var(--ff-out) both}
@keyframes ff-page-fade{from{opacity:0}to{opacity:1}}
/* Cards rise in with a short stagger — only on page entry (polish.js
   sets .ff-enter for ~700ms), never on a live refresh re-render. */
.page.ff-enter :is(.settings-card,.stat-card,.chart-card,.table-card,.upcoming,.ts-table-wrap,.ts-toolbar){
  animation:ff-rise .5s var(--ff-out) both;
}
.page.ff-enter :is(.settings-card,.stat-card,.chart-card):nth-child(2){animation-delay:40ms}
.page.ff-enter :is(.settings-card,.stat-card,.chart-card):nth-child(3){animation-delay:80ms}
.page.ff-enter :is(.settings-card,.stat-card,.chart-card):nth-child(4){animation-delay:120ms}
.page.ff-enter :is(.settings-card,.stat-card,.chart-card):nth-child(n+5){animation-delay:160ms}
.page.ff-enter .ts-table-wrap{animation-delay:60ms}
@keyframes ff-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- Top nav ---- */
/* 2026-09-29 clean-up: one 36px rhythm for every control on the right
   (Ask AI, bell, theme, profile menu), a hairline divider before the
   profile, and the shop name lives only on the left. */
.topnav-inner{height:58px}
.topnav-brand{letter-spacing:.01em}
.topnav-right{gap:4px}
.topnav-quick{gap:2px}
.topnav-quick-btn{height:34px;padding:0 11px;font-size:13px;font-weight:600;border-radius:10px}
.notif-bell-btn,.theme-toggle-btn{width:36px;height:36px;padding:0;border-radius:10px}
.topnav-sep{width:1px;height:22px;background:var(--border);margin:0 8px 0 6px;flex-shrink:0}

/* Ask AI — the Operator Assistant launcher (was a bottom-right FAB). */
.topnav-ai-btn{
  height:34px;padding:0 13px 0 11px;margin-right:6px;
  display:inline-flex;align-items:center;gap:7px;
  border-radius:10px;border:1px solid var(--accent-border, rgba(0,212,170,.35));
  background:var(--accent-soft);color:var(--accent);
  font:inherit;font-size:13px;font-weight:650;cursor:pointer;white-space:nowrap;
  transition:background .2s var(--ff-ease),border-color .2s var(--ff-ease),transform .2s var(--ff-ease);
}
.topnav-ai-btn:hover{background:color-mix(in oklab,var(--accent) 20%,transparent)}
.topnav-ai-btn:active{transform:scale(.97)}
.topnav-ai-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.topnav-ai-btn svg{display:block;flex-shrink:0}
.topnav-ai-btn[hidden]{display:none}

/* Profile menu */
.user-menu{position:relative}
.user-menu-btn{
  display:flex;align-items:center;gap:10px;height:40px;
  padding:0 8px 0 4px;border-radius:12px;
  background:none;border:1px solid transparent;color:var(--fg);
  font:inherit;cursor:pointer;
  transition:background .2s var(--ff-ease),border-color .2s var(--ff-ease);
}
.user-menu-btn:hover,.user-menu-btn[aria-expanded="true"]{background:var(--hover);border-color:var(--border)}
.user-menu-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.user-avatar{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent-border, rgba(0,212,170,.35));
  font-size:12.5px;font-weight:700;letter-spacing:.02em;
}
.user-avatar-lg{width:40px;height:40px;font-size:14px}
.user-menu .topnav-identity{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;line-height:1.15}
.user-menu .topnav-user{font-size:13px;font-weight:600;color:var(--fg);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-menu .topnav-role{
  padding:0;border:0;background:none;border-radius:0;
  font-size:11px;font-weight:500;letter-spacing:0;color:var(--fg-subtle, var(--fg-muted));
}
.user-menu .topnav-role:empty{display:none}
.user-menu-chevron{color:var(--fg-muted);transition:transform .2s var(--ff-ease)}
.user-menu-btn[aria-expanded="true"] .user-menu-chevron{transform:rotate(180deg)}

.user-menu-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;z-index:210;
  width:264px;padding:6px;
  background:var(--surface-elevated);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 18px 48px -12px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.12);
  transform-origin:top right;animation:ff-menu-in .16s var(--ff-ease);
}
.user-menu-dropdown[hidden]{display:none}
@keyframes ff-menu-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.user-menu-head{display:flex;align-items:center;gap:11px;padding:10px 10px 12px}
.user-menu-who{min-width:0}
.user-menu-name{font-size:14px;font-weight:650;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-menu-email{font-size:12px;color:var(--fg-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.user-menu-list{display:flex;flex-direction:column;gap:1px;padding-top:6px;border-top:1px solid var(--border)}
.user-menu-list-end{margin-top:6px}
.user-menu-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 10px;border-radius:9px;border:0;background:none;
  color:var(--fg);font:inherit;font-size:13px;font-weight:500;text-align:left;cursor:pointer;
  transition:background .15s var(--ff-ease);
}
.user-menu-item svg{color:var(--fg-muted);flex-shrink:0}
.user-menu-item:hover,.user-menu-item:focus-visible{background:var(--hover);outline:none}
.user-menu-logout:hover svg{color:inherit}
@media (prefers-reduced-motion:reduce){.user-menu-dropdown{animation:none}}

/* ---- Sidebar ---- */
.sidebar-item,.sidebar-group-header{
  padding:7px 10px;border-radius:10px;
  transition:background .22s var(--ff-ease),color .22s var(--ff-ease),transform .22s var(--ff-ease);
}
.sidebar-item:active,.sidebar-group-header:active{transform:scale(.98)}
.sidebar-item.active{
  background:color-mix(in oklab, var(--accent) 13%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--accent) 18%, transparent);
}
.sidebar-group.is-open > .sidebar-group-items{animation:ff-slide-down .28s var(--ff-out) both;transform-origin:top}
@keyframes ff-slide-down{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.sidebar-group-header .chev{transition:transform .28s var(--ff-spring),opacity .15s ease}
/* Legal footer: links only. */
.sidebar-legal > div{display:none}
.sidebar-legal{padding:12px 16px!important;opacity:.75;transition:opacity .2s}
.sidebar-legal:hover{opacity:1}
.sidebar-overlay{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.sidebar-overlay.open{animation:ff-fade .25s ease both}
.nav-rail-handle{transition:left 260ms var(--ff-ease),color .15s,border-color .15s,box-shadow .2s!important}
.nav-rail-handle:hover{box-shadow:0 4px 16px rgba(0,0,0,.18)}

/* ---- Buttons ---- */
.action-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:var(--ff-control-h);padding:0 16px;border-radius:11px;
  font-size:13px;font-weight:600;line-height:1;white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition:transform .22s var(--ff-ease),box-shadow .22s var(--ff-ease),background-color .2s var(--ff-ease),border-color .2s var(--ff-ease),opacity .2s;
}
.action-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px -4px rgba(0,0,0,.18)}
.action-btn:active{transform:scale(.97);transition-duration:.08s}
.action-btn.primary{
  background:var(--accent-gradient);color:#fff;border:1px solid transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 6px 16px -6px color-mix(in oklab, var(--accent) 70%, transparent);
  text-shadow:0 1px 1px rgba(0,0,0,.08);
}
.action-btn.primary:hover{
  filter:saturate(1.08) brightness(1.03);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 22px -8px color-mix(in oklab, var(--accent) 75%, transparent);
}
.action-btn.small{min-height:28px;padding:0 11px;font-size:12px;border-radius:8px}
.action-btn.ghost{background:transparent;color:var(--fg)}
.action-btn.ghost:hover{background:var(--hover)}
.action-btn.danger:hover{box-shadow:0 6px 16px -8px color-mix(in oklab, var(--danger) 70%, transparent)}
.action-btn:disabled,.action-btn[disabled]{box-shadow:none;filter:none}

.pagination button,.cp-pager button{
  height:32px;padding:0 14px;border-radius:9px;font-weight:600;font-size:12px;
  background:var(--surface);color:var(--fg);border:1px solid var(--border);
  transition:background .2s var(--ff-ease),transform .15s var(--ff-ease),border-color .2s;
}
.pagination button:not(:disabled):hover,.cp-pager button:not(:disabled):hover{background:var(--hover);border-color:var(--border-strong)}
.pagination button:not(:disabled):active,.cp-pager button:not(:disabled):active{transform:scale(.96)}
.pagination button:disabled,.cp-pager button:disabled{opacity:.35}

/* Date-filter + generic chips become a segmented feel */
.df-btn{border-radius:999px;padding:6px 14px;transition:background .22s var(--ff-ease),color .22s,border-color .22s,transform .15s}
.df-btn:active{transform:scale(.96)}

/* ---- Inputs ---- */
.search-input,.field input,.field select,.field textarea,.toolbar-filter,
.modal input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
.modal select,.modal textarea,.settings-card input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
.settings-card select,.settings-card textarea{
  border-radius:11px;
  transition:border-color .2s var(--ff-ease),box-shadow .2s var(--ff-ease),background-color .2s var(--ff-ease);
}
.search-input{height:var(--ff-control-h);padding:0 14px 0 36px;border-radius:999px;background-color:var(--hover);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>");
  background-repeat:no-repeat;background-position:13px center;border-color:transparent}
.search-input:hover{border-color:var(--border)}
.search-input:focus,.field input:focus,.field select:focus,.field textarea:focus,.toolbar-filter:focus,
.modal :is(input,select,textarea):focus,.settings-card :is(input,select,textarea):focus{
  border-color:var(--accent)!important;box-shadow:var(--ff-ring)!important;outline:none;
}
.search-input:focus{background-color:var(--surface)}
input::placeholder,textarea::placeholder{color:var(--fg-subtle);opacity:1}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}

/* ---- Toggle switch — springy knob ---- */
.toggle-slider{transition:background-color .3s var(--ff-ease),box-shadow .3s}
.toggle-slider::before{transition:transform .38s var(--ff-spring),width .2s var(--ff-ease);box-shadow:0 2px 5px rgba(0,0,0,.22),0 0 0 .5px rgba(0,0,0,.06)}
.toggle-switch:active .toggle-slider::before{width:22px}
.toggle-switch input:checked:active + .toggle-slider::before{transform:translateX(16px)}
.toggle-switch input:focus-visible + .toggle-slider{box-shadow:var(--ff-ring)}

/* ---- Tabs — animated underline ---- */
.tab-bar{gap:4px;border-bottom-color:var(--line)}
.tab-btn{position:relative;border-bottom:0!important;padding:10px 14px;font-weight:600;border-radius:8px 8px 0 0;transition:color .2s var(--ff-ease),background .2s}
.tab-btn:hover{background:var(--hover);color:var(--fg)}
.tab-btn::after{
  content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;
  background:var(--accent);transform:scaleX(0);transition:transform .32s var(--ff-out);
}
.tab-btn.active::after{transform:scaleX(1)}

/* ---- Cards ---- */
.settings-card,.stat-card,.chart-card,.table-card{
  border-radius:var(--ff-r-lg);
  border:1px solid color-mix(in oklab, var(--border) 80%, transparent);
  box-shadow:var(--shadow-card);
}
.settings-card{padding:22px 24px}
.settings-card h3{font-size:15px;font-weight:650;margin-bottom:14px}
.stat-card{transition:transform .3s var(--ff-ease),box-shadow .3s var(--ff-ease),border-color .3s}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-elevated)}
.stat-card .label{font-size:11px;font-weight:600;letter-spacing:.07em}
.stat-card .value{letter-spacing:-.03em}

/* ---- Tables ---- */
.table-card{overflow:hidden}
.table-toolbar{padding:12px 14px;gap:10px}
thead{background:color-mix(in oklab, var(--fg) 2.5%, transparent)}
th{font-size:10.5px;font-weight:650;letter-spacing:.07em;color:var(--fg-subtle);padding:11px 16px}
td{padding:13px 16px;color:var(--fg);transition:background-color .15s ease}
tbody tr:last-child td{border-bottom:0}
tr:hover td{background:color-mix(in oklab, var(--fg) 3%, transparent)}
.table-scroll{scroll-snap-type:x proximity}
.empty-msg{padding:56px 24px;font-size:13.5px;font-weight:500}

/* ---- Loading → shimmer skeleton ---- */
.loading{
  position:relative;padding:22px 20px;font-size:0;color:transparent;
  display:grid;gap:12px;min-height:120px;
}
.loading::before,.loading::after{
  content:"";display:block;height:14px;border-radius:7px;
  background:linear-gradient(90deg,var(--hover) 0%,var(--hover-strong) 40%,var(--hover) 80%);
  background-size:300% 100%;animation:ff-shimmer 1.3s ease-in-out infinite;
}
.loading::before{width:72%;box-shadow:0 30px 0 0 var(--hover),0 60px 0 0 var(--hover)}
.loading::after{width:46%;margin-top:66px}
@keyframes ff-shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
.loading.ff-msg{display:block;font-size:13.5px;color:var(--fg-subtle);min-height:0;padding:40px 20px;text-align:center}
.loading.ff-msg::before,.loading.ff-msg::after{display:none}

/* ---- Shared modal — animated open AND close ---- */
.modal-overlay{
  display:flex!important;visibility:hidden;opacity:0;pointer-events:none;
  background:color-mix(in oklab, #000 45%, transparent);
  backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);
  transition:opacity .26s var(--ff-ease),visibility 0s linear .26s;
}
.modal-overlay.open{
  visibility:visible;opacity:1;pointer-events:auto;
  transition:opacity .26s var(--ff-ease),visibility 0s;
}
.modal{
  position:relative;border-radius:22px;padding:26px 26px 22px;
  border:1px solid color-mix(in oklab, var(--border-strong) 60%, transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 30px 80px -20px rgba(0,0,0,.45),0 10px 24px -12px rgba(0,0,0,.25);
  transform:translateY(10px) scale(.97);opacity:0;
  transition:transform .34s var(--ff-out),opacity .22s var(--ff-ease),max-width .3s var(--ff-ease);
  overscroll-behavior:contain;
}
.modal-overlay.open .modal{transform:none;opacity:1}
.modal h3{font-size:18px;font-weight:700;letter-spacing:-.02em;margin-bottom:18px}
.modal-actions{gap:8px;margin-top:22px;flex-wrap:wrap}
.modal-actions .action-btn{min-width:88px}

/* ---- Toasts: softer glass ---- */
.ff-toast{backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border-radius:14px!important}

/* ---- Info dot (explainer copy moved behind a hover — polish.js) ---- */
.ff-info{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;margin-left:7px;vertical-align:1px;border-radius:50%;
  font:600 10px/1 Inter,system-ui,sans-serif;font-style:normal;letter-spacing:0;text-transform:none;
  color:var(--fg-subtle);border:1px solid var(--border-strong);cursor:help;
  transition:color .15s,border-color .15s,background .15s;
}
.ff-info:hover,.ff-info:focus-visible{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.ff-tip{
  position:fixed;z-index:3000;max-width:300px;padding:10px 12px;border-radius:12px;
  font-size:12.5px;line-height:1.5;font-weight:500;color:var(--fg);letter-spacing:0;text-transform:none;
  background:color-mix(in oklab, var(--surface-elevated) 92%, transparent);
  border:1px solid var(--border);box-shadow:var(--shadow-elevated);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  pointer-events:none;opacity:0;transform:translateY(4px) scale(.98);
  transition:opacity .16s ease,transform .22s var(--ff-out);
}
.ff-tip.show{opacity:1;transform:none}

/* ---- Quieter copy: explainer paragraphs hidden ----
   Status lines (they carry an id and are written at runtime) stay visible. */
p.hint:not([id]),div.hint:not([id]),
.pa-modal-intro,.pa-hint,.txn-page-sub,.sub-page-subtitle,.cp-section-hint,
.sr-rule-card__help,.sr-form-row__hint,.sr-form-hint,.bays-field__hint,.bays-capacity-hint,
.cp-phone-hint,.wo-col-hint,.prs-card-hint:not(.prs-sync-hint),.pos-walkin-hint:not([id]),
div.sub-form-hint,.sf-caption,
.bays-sub,.bays-empty__hint,.reports-sub,.st-sub{display:none!important}
#voice-advanced-body p.hint{display:block!important}

/* ---- Generic segmented chips (island toolbars) ---- */
.ts-chips{position:relative}
.ts-chip{transition:background-color .25s var(--ff-ease),color .2s,box-shadow .25s,transform .15s var(--ff-ease)}
.ts-chip:active{transform:scale(.95)}

/* ---- Tire storage page shell ---- */
#page-tire-storage .ts-title{font-size:24px;letter-spacing:-.025em;margin-bottom:2px}
#page-tire-storage .ts-toolbar{align-items:center;margin-bottom:18px;gap:14px}
#page-tire-storage .ts-toolbar-actions{gap:8px}
#page-tire-storage .ts-search-wrap{height:var(--ff-control-h);border-color:transparent;transition:border-color .2s,box-shadow .2s,background .2s}
#page-tire-storage .ts-search-wrap:focus-within{background:var(--surface);box-shadow:var(--ff-ring)}
#page-tire-storage .ts-chips{border-color:transparent}
#page-tire-storage .ts-chip{padding:6px 13px}
#page-tire-storage .ts-chip-active{background:var(--ff-seg-on);color:var(--fg);box-shadow:var(--ff-seg-on-shadow)}
#page-tire-storage .ts-table-wrap{border-radius:var(--ff-r-lg);box-shadow:var(--shadow-card)}
#page-tire-storage .ts-table thead th{background:color-mix(in oklab, var(--fg) 2.5%, transparent);font-size:10.5px;letter-spacing:.07em;padding:11px 16px}
#page-tire-storage .ts-table tbody td{padding:14px 16px;vertical-align:middle;border-bottom-color:var(--line)}
#page-tire-storage .ts-row{transition:background-color .15s ease}
#page-tire-storage .ts-pager button{height:32px}

/* ---- Fit every screen ---- */
.content-area{padding:26px clamp(14px,2.2vw,32px) 64px}
.content-area img,.content-area video{max-width:100%}
.table-scroll,.ts-table-wrap{
  -webkit-overflow-scrolling:touch;
  background:
    linear-gradient(90deg,var(--surface) 30%,transparent) left/24px 100% no-repeat local,
    linear-gradient(270deg,var(--surface) 30%,transparent) right/24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.14),transparent) left/10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.14),transparent) right/10px 100% no-repeat scroll,
    var(--surface);
}

@media (max-width:1180px){
  .sidebar{box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
  .sidebar.open{animation:ff-drawer-in .38s var(--ff-out) both}
}
@keyframes ff-drawer-in{from{transform:translateX(-12px)}to{transform:none}}

@media (max-width:900px){
  #page-tire-storage .ts-toolbar-actions{width:100%}
  #page-tire-storage .ts-search-wrap{flex:1 1 100%;min-width:0}
  #page-tire-storage .ts-chips{overflow-x:auto;max-width:100%}
  #page-tire-storage .ts-toolbar-actions > .action-btn{margin-left:auto}
}

@media (max-width:768px){
  .content-area{padding:18px 14px 88px}
  .topnav-inner{min-height:54px;padding:6px 0}
  .user-menu .topnav-identity{display:none}
  .user-menu-btn{padding:0 6px 0 4px;gap:6px}
  .topnav-ai-label{display:none}
  .topnav-ai-btn{width:34px;padding:0;justify-content:center;margin-right:2px}
  .topnav-sep{margin:0 4px}
  .table-toolbar{padding:10px}
  .search-input{max-width:none}
  th,td{padding:11px 12px}
  .settings-card{padding:18px 16px;border-radius:16px}
  .tab-bar{scrollbar-width:none}
  .tab-bar::-webkit-scrollbar{display:none}
  /* Modal becomes a bottom sheet */
  .modal-overlay{align-items:flex-end;padding:0}
  .modal{
    max-width:100%!important;width:100%;max-height:92dvh;
    border-radius:22px 22px 0 0;padding:22px 18px calc(18px + env(safe-area-inset-bottom));
    transform:translateY(100%);opacity:1;
    transition:transform .42s var(--ff-out);
  }
  .modal::before{
    content:"";position:sticky;top:-12px;display:block;width:38px;height:5px;border-radius:3px;
    margin:-10px auto 14px;background:var(--border-strong);
  }
  .modal-actions{position:sticky;bottom:-18px;margin:18px -18px calc(-18px - env(safe-area-inset-bottom));padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}
  .modal-actions .action-btn{flex:1}
  .pagination{flex-direction:row!important;align-items:center!important}
}

@media (max-width:480px){
  .action-btn{min-height:40px}
  .stat-card .value{font-size:24px}
}

@keyframes ff-fade{from{opacity:0}to{opacity:1}}

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

/* ==========================================================================
   Settings cards v2 — header row (title left, primary action right),
   compact fields, segmented choices. Used by the Services widgets.
   ========================================================================== */
#table-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.table-toolbar:has(.search-input[style*="none"]) {justify-content:flex-end}
td .action-btn.small + .action-btn.small{margin-left:4px}

.ff-svc-card{margin-top:16px}
.ff-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;min-height:32px}
.ff-card-head h3{margin:0!important;font-size:15px;font-weight:650;display:flex;align-items:center}
.ff-card-head .action-btn{flex:0 0 auto}
.ff-card-head .action-btn:disabled{opacity:.35}
.ff-card-search{max-width:220px!important;min-width:0!important;height:32px!important;font-size:12.5px}

.ff-field-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:16px}
.ff-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.ff-field-row .ff-field{margin-bottom:0}
.ff-field > span{font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-subtle)}
.ff-field select,.ff-money{
  height:38px;min-width:170px;border:1px solid var(--ff-field-line);border-radius:11px;background-color:var(--ff-field-bg);color:var(--fg);font-size:13.5px;
}
.ff-field select{padding:0 32px 0 12px}
.ff-money{display:flex;align-items:center;gap:4px;padding:0 12px;width:170px;transition:border-color .2s,box-shadow .2s}
.ff-money:focus-within{border-color:var(--accent);box-shadow:var(--ff-ring)}
.ff-money em{font-style:normal;color:var(--fg-subtle);font-weight:600}
.ff-money input{flex:1;min-width:0;border:0!important;box-shadow:none!important;background:transparent;color:var(--fg);font-size:13.5px;padding:0!important;outline:none}
.ff-money input::-webkit-inner-spin-button{opacity:0}

.ff-seg{display:inline-flex;padding:3px;gap:2px;background:var(--ff-seg-track);border-radius:12px;width:max-content;max-width:100%;overflow-x:auto}
.ff-seg label{position:relative;cursor:pointer}
.ff-seg input{position:absolute;opacity:0;pointer-events:none}
.ff-seg b{display:block;padding:7px 16px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--fg-muted);white-space:nowrap;
  transition:background-color .25s var(--ff-ease),color .2s,box-shadow .25s}
.ff-seg label:hover b{color:var(--fg)}
.ff-seg input:checked + b{background:var(--ff-seg-on);color:var(--fg);box-shadow:var(--ff-seg-on-shadow)}
.ff-seg input:focus-visible + b{box-shadow:var(--ff-ring)}

.ff-preview{display:flex;align-items:baseline;gap:10px;padding:12px 14px;border-radius:12px;background:var(--ff-soft);font-size:13px}
.ff-preview > span{flex:0 0 auto;font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-subtle)}
.ff-preview > div{font-style:italic;color:var(--fg);line-height:1.5}

.ff-chip-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.ff-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 6px 0 12px;border-radius:999px;background:var(--hover);border:1px solid var(--border);font-size:13px;animation:ff-pop .25s var(--ff-spring) both}
.ff-chip button{width:20px;height:20px;border-radius:50%;border:0;background:transparent;color:var(--fg-subtle);font-size:15px;line-height:1;transition:background .15s,color .15s}
.ff-chip button:hover{background:var(--danger-soft);color:var(--danger)}
@keyframes ff-pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.ff-empty-inline{font-size:13px;color:var(--fg-subtle)}

.ff-inline-add{display:flex;gap:8px}
.ff-inline-add input{flex:1;min-width:0;height:36px;padding:0 12px;border:1px solid var(--ff-field-line);border-radius:11px;background:var(--ff-field-bg);color:var(--fg);font-size:13px}

.scw-list{max-height:340px;overflow-y:auto;margin:0 -8px 14px;padding:0 8px}
.scw-row{display:flex;align-items:center;gap:8px;padding:4px 0;border-radius:10px}
.scw-row input{height:32px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--fg);font-size:13px}
.scw-row input:focus{border-color:var(--accent);background:var(--surface);box-shadow:var(--ff-ring);outline:none}
.scw-row:hover{background:color-mix(in oklab, var(--fg) 2.5%, transparent)}
.scw-code{width:50px;text-align:center;text-transform:uppercase;font-weight:650;font-size:12px!important;color:var(--fg-muted)!important;letter-spacing:.04em}
.scw-desc{flex:1;min-width:0;padding:0 8px}
.scw-tag{font-size:10px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-subtle);background:var(--hover);border-radius:6px;padding:2px 7px}
.scw-remove{width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:var(--fg-subtle);font-size:16px;line-height:1;opacity:.45}
.scw-remove:hover{opacity:1;background:var(--danger-soft);color:var(--danger)}

@media (max-width:600px){
  .ff-card-head{flex-wrap:wrap}
  .ff-card-search{max-width:none!important;flex:1 1 100%;order:3}
  .ff-seg{width:100%}
  .ff-seg label{flex:1}
  .ff-seg b{text-align:center;padding:8px 6px}
  .ff-preview{flex-direction:column;gap:4px}
}


/* ---- Tables v2: title in the toolbar, actions pinned right ---- */
.table-toolbar.no-search::before{
  content:attr(data-title);font-size:15px;font-weight:650;letter-spacing:-.01em;color:var(--fg);
}
.table-toolbar.no-search{padding:14px 16px}
.row-actions{display:flex;gap:6px;justify-content:flex-end}
th.col-actions{text-align:right}
.row-actions .action-btn.small{min-height:28px}

/* ---- Service popup: two columns, compact, footer always visible ---- */
.modal:has(#m-sv-name){max-width:680px}
#modal-body:has(#m-sv-name){display:grid;grid-template-columns:1fr 1fr;gap:0 14px;grid-auto-flow:row dense}
#modal-body:has(#m-sv-name) > *{grid-column:1/-1}
#modal-body:has(#m-sv-name) > .field:has(#m-sv-dur),
#modal-body:has(#m-sv-name) > .field:has(#m-sv-mode),
#modal-body:has(#m-sv-name) > .field:has(#m-sv-price),
#modal-body:has(#m-sv-name) > .field:has(#m-sv-cat),
#modal-body:has(#m-sv-name) > .field:has(#m-sv-buf),
#modal-body:has(#m-sv-name) > .field:has(#m-sv-staff),
#modal-body:has(#m-sv-name) > .field:has(#m-sv-active){grid-column:auto}
#modal-body:has(#m-sv-name) .field{margin-bottom:14px}
#modal-body:has(#m-sv-name) .field label{font-size:12px;font-weight:600;color:var(--fg-muted);margin-bottom:5px}
#modal-body:has(#m-sv-name) .field input:not([type=checkbox]):not([type=color]),
#modal-body:has(#m-sv-name) .field select{height:40px;padding-top:0;padding-bottom:0}
#modal-body:has(#m-sv-name) textarea{min-height:64px}
.m-sv-color-copy span{display:none!important}
.m-sv-color-row{padding:8px 12px!important}
#m-sv-pay-section{margin-top:6px!important;padding-top:16px!important}

/* Every modal: the action row stays pinned to the bottom edge */
.modal-actions{
  position:sticky;bottom:-22px;z-index:2;
  margin:18px -26px -22px;padding:14px 26px;
  background:var(--surface);border-top:1px solid var(--line);
  border-radius:0 0 22px 22px;
}
.modal-actions:empty{display:none}

@media (max-width:640px){
  #modal-body:has(#m-sv-name){grid-template-columns:1fr}
  #modal-body:has(#m-sv-name) > .field{grid-column:1/-1!important}
}
@media (max-width:768px){
  .modal-actions{margin:18px -18px calc(-18px - env(safe-area-inset-bottom));padding:12px 18px calc(12px + env(safe-area-inset-bottom));bottom:-18px;border-radius:0}
}

/* ==========================================================================
   Store hours + closed days (hrs-*)
   ========================================================================== */

.hrs-week{display:flex;flex-direction:column}
.hrs-row{display:grid;grid-template-columns:170px 1fr;align-items:center;min-height:52px;border-top:1px solid var(--line);position:relative}
.hrs-row:first-child{border-top:0}
.hrs-day{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:14px;font-weight:600;color:var(--fg);margin:0!important}
.hrs-times{display:flex;align-items:center;gap:10px;transition:opacity .2s var(--ff-ease)}
.hrs-times input[type=time]{
  width:150px;height:38px;padding:0 12px!important;border:1px solid var(--ff-field-line)!important;border-radius:10px!important;
  background:var(--ff-field-bg)!important;color:var(--fg);font-size:13.5px;font-variant-numeric:tabular-nums;
}
.hrs-dash{color:var(--fg-subtle);font-size:13px}
.hrs-closed-tag{display:none;font-size:13px;color:var(--fg-subtle);font-weight:500}
.hrs-row.is-closed .hrs-times{display:none}
.hrs-row.is-closed .hrs-closed-tag{display:block;animation:ff-fade .2s ease both}
.hrs-row.is-closed .hrs-day{color:var(--fg-muted)}

.hrs-add{display:flex;gap:8px;margin-bottom:14px}
.hrs-add input{
  height:38px;padding:0 12px!important;border:1px solid var(--ff-field-line)!important;border-radius:11px!important;
  background:var(--ff-field-bg)!important;color:var(--fg);font-size:13.5px;
}
.hrs-add input[type=date]{width:170px;flex:0 0 auto}
.hrs-add input[type=text]{flex:1;min-width:0}
.hrs-add .action-btn{min-height:38px;padding:0 18px}
.hrs-closed-list{display:flex;flex-direction:column}
.hrs-closed-row{display:flex;align-items:center;gap:14px;padding:10px 0;border-top:1px solid var(--line);animation:ff-rise .3s var(--ff-out) both}
.hrs-closed-row:first-child{border-top:0}
.hrs-cal{flex:0 0 44px;height:48px;border-radius:11px;overflow:hidden;display:flex;flex-direction:column;align-items:center;
  background:var(--surface);border:1px solid var(--ff-field-line);box-shadow:var(--shadow-card)}
.hrs-cal span{width:100%;text-align:center;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 0;background:var(--danger);color:#fff}
.hrs-cal b{flex:1;display:flex;align-items:center;font-size:17px;font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums}
.hrs-closed-main{flex:1;min-width:0}
.hrs-closed-title{font-size:14px;font-weight:600;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrs-closed-sub{font-size:12px;color:var(--fg-subtle);margin-top:1px}
.hrs-empty{font-size:13px;color:var(--fg-subtle);padding:4px 0}

@media (max-width:600px){
  .hrs-row{grid-template-columns:1fr auto;min-height:56px}
  .hrs-times input[type=time]{width:108px;padding:0 6px!important}
  .hrs-times{gap:6px}
  .hrs-add{flex-wrap:wrap}
  .hrs-add input[type=date]{flex:1 1 100%;width:auto}
}

/* ==========================================================================
   Business profile (bp-*)
   ========================================================================== */
.bp-save-wrap{display:flex;align-items:center;gap:10px}
.bp-status{font-size:12.5px;font-weight:500;color:var(--fg-muted)}
.bp-logo{display:flex;align-items:center;gap:18px;padding:16px;margin-bottom:20px;border-radius:16px;background:var(--ff-soft);border:1px solid var(--line)}
.bp-logo-tile{flex:0 0 auto;width:168px;height:84px;display:flex;align-items:center;justify-content:center;border-radius:12px;
  background:#fff;border:1px solid var(--ff-field-line);overflow:hidden;padding:10px}
.bp-logo-tile img{max-width:100%!important;max-height:100%!important;object-fit:contain;border-radius:0!important}
.bp-logo-empty{font-size:12px;color:#8a8f98;font-weight:500}
.bp-logo-side{min-width:0}
.bp-logo-title{font-size:14px;font-weight:650;color:var(--fg)}
.bp-logo-meta{font-size:12px;color:var(--fg-subtle);margin:2px 0 10px}
.bp-logo-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bp-logo-actions label.action-btn{cursor:pointer;margin:0}

.bp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 14px}
.bp-field{margin:0!important}
.bp-span-2{grid-column:span 2}
.bp-span-full{grid-column:1/-1}
.bp-field > span{display:flex;align-items:center}
.bp-field input,.bp-field select{
  width:100%;height:40px;padding:0 12px!important;border:1px solid var(--ff-field-line)!important;border-radius:11px!important;
  background-color:var(--ff-field-bg)!important;color:var(--fg);font-size:14px;min-width:0;
}
.bp-field select{padding-right:32px!important}
.bp-field input::placeholder{color:var(--fg-subtle)}

@media (max-width:1100px){
  .bp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .bp-grid{grid-template-columns:1fr}
  .bp-span-2{grid-column:auto}
  .bp-logo{flex-direction:column;align-items:flex-start}
  .bp-logo-tile{width:100%}
}

/* ---- Settings rows: label left, control right (Work orders, Inspections) ---- */
.ff-set-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:8px 0;border-top:1px solid var(--line)}
.ff-card-head + .ff-set-row{border-top:0}
.ff-set-label{display:flex;align-items:center;font-size:14px;font-weight:550;color:var(--fg);min-width:0}
.ff-set-row .toggle-switch{flex-shrink:0;margin:0}
.ff-set-row .ff-seg{flex-shrink:0}
.ff-set-select{
  height:36px;min-width:160px;padding:0 32px 0 12px!important;border:1px solid var(--ff-field-line)!important;border-radius:10px!important;
  background-color:var(--ff-field-bg)!important;color:var(--fg)!important;font-size:13.5px;font-weight:500;
}
@media (max-width:600px){
  .ff-set-row{flex-wrap:wrap;gap:8px 16px}
}

/* ==========================================================================
   Team (tm-*) — one list, one edit sheet
   ========================================================================== */
.tm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px}
.tm-title{font-size:24px;font-weight:700;letter-spacing:-.025em;margin:0}
.tm-count{font-size:12.5px;color:var(--fg-subtle);margin-top:2px}
.tm-list{padding:6px!important}
.tm-row{
  display:grid;grid-template-columns:40px minmax(0,1.4fr) minmax(0,2fr) auto auto;align-items:center;gap:14px;
  padding:10px 12px;border-radius:14px;cursor:pointer;transition:background-color .15s ease;
}
.tm-row + .tm-row{box-shadow:0 -1px 0 var(--line)}
.tm-row:hover{background:color-mix(in oklab, var(--fg) 3%, transparent)}
.tm-row:focus-visible{outline:none;box-shadow:var(--ff-ring)}
.tm-row.is-owner{cursor:default}
.tm-row.is-owner:hover{background:transparent}
.tm-row.is-inactive .tm-avatar,.tm-row.is-inactive .tm-main{opacity:.55}
.tm-avatar{
  width:40px;height:40px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:13.5px;font-weight:700;letter-spacing:.02em;color:#fff;
  background:linear-gradient(145deg,hsl(var(--tm-h) 62% 56%),hsl(calc(var(--tm-h) + 30) 58% 44%));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.tm-avatar.is-lg{width:52px;height:52px;border-radius:16px;font-size:17px}
.tm-main{min-width:0}
.tm-name{font-size:14.5px;font-weight:650;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.tm-sub{font-size:12.5px;color:var(--fg-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.tm-you{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:2px 6px;border-radius:6px}
.tm-chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.tm-chip{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:8px;font-size:12px;font-weight:550;color:var(--fg-muted);background:var(--ff-soft);border:1px solid var(--line);white-space:nowrap}
.tm-chip.is-muted{color:var(--fg-subtle)}
.tm-chip.is-warn{color:var(--warning);border-color:color-mix(in oklab, var(--warning) 35%, transparent);background:color-mix(in oklab, var(--warning) 10%, transparent)}
.tm-access{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;white-space:nowrap}
.tm-access::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.tm-access.is-on{color:var(--success)}
.tm-access.is-off{color:var(--warning)}
.tm-access.is-none{color:var(--fg-subtle)}
.tm-access.is-owner{color:var(--accent)}
.tm-actions{display:flex;align-items:center;gap:4px;justify-content:flex-end;min-width:96px}
.tm-more{width:32px;height:32px;border:0;border-radius:10px;background:transparent;color:var(--fg-muted);display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.tm-more:hover{background:var(--hover);color:var(--fg)}
.tm-toggle-inactive{margin:14px 0 10px;border:0;background:transparent;color:var(--fg-muted);font-size:13px;font-weight:600;padding:6px 2px}
.tm-toggle-inactive:hover{color:var(--fg)}
.tm-empty{display:grid;justify-items:center;gap:12px;padding:48px 16px;text-align:center}
.tm-empty-title{font-size:15px;font-weight:600;color:var(--fg-muted)}
.tm-empty-inline{font-size:13px;color:var(--fg-subtle);padding:6px 0}

/* Row menu */
.tm-menu{
  position:fixed;z-index:2500;min-width:188px;padding:6px;border-radius:14px;
  background:color-mix(in oklab, var(--surface-elevated) 94%, transparent);border:1px solid var(--border);
  box-shadow:var(--shadow-elevated);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  animation:tm-menu-in .16s var(--ff-out) both;transform-origin:top right;
}
@keyframes tm-menu-in{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:none}}
.tm-menu-item{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--fg);font-size:13.5px;font-weight:500;padding:9px 12px;border-radius:9px}
.tm-menu-item:hover,.tm-menu-item:focus-visible{background:var(--hover);outline:none}
.tm-menu-item.is-danger{color:var(--danger)}
.tm-menu-item.is-danger:hover{background:var(--danger-soft)}
.tm-menu-sep{height:1px;background:var(--line);margin:5px 6px}

/* Edit sheet */
.modal:has(.tm-sheet){max-width:620px}
.tm-sheet-head,.tm-self-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.tm-self-head .tm-main{flex:1}
.tm-sheet-name{font-size:17px;font-weight:700;letter-spacing:-.015em;color:var(--fg)}
.tm-tabs{display:flex;width:100%;margin-bottom:16px}
.tm-tabs label{flex:1}
.tm-tabs b{text-align:center}
.tm-panel[hidden]{display:none!important}
.tm-panel{animation:ff-fade .2s ease both}
.tm-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tm-span{grid-column:1/-1}
.tm-field{margin:0!important}
.tm-field input,.tm-field select{
  width:100%;height:40px;padding:0 12px!important;border:1px solid var(--ff-field-line)!important;border-radius:11px!important;
  background-color:var(--ff-field-bg)!important;color:var(--fg);font-size:14px;min-width:0;
}
.tm-panel-tools{display:flex;justify-content:flex-end;margin-bottom:8px}
.tm-panel-tools .search-input{max-width:none;flex:1}
.tm-hours .hrs-row{grid-template-columns:150px 1fr auto}
.tm-svc-list{display:flex;flex-direction:column;max-height:46vh;overflow-y:auto;margin:0 -4px;padding:0 4px}
.tm-svc{display:flex;align-items:center;gap:12px;min-height:48px;padding:4px 6px;border-radius:10px;cursor:pointer}
.tm-svc + .tm-svc{border-top:1px solid var(--line)}
.tm-svc:hover{background:color-mix(in oklab, var(--fg) 2.5%, transparent)}
.tm-svc[hidden]{display:none}
.tm-svc-cb{width:18px;height:18px;flex-shrink:0}
.tm-svc-name{flex:1;min-width:0;font-size:14px;color:var(--fg);display:flex;align-items:center;gap:8px}
.tm-svc-price{display:flex;align-items:center;gap:3px;width:104px;height:34px;padding:0 10px;border:1px solid var(--ff-field-line);border-radius:10px;background:var(--ff-field-bg)}
.tm-svc-price:focus-within{border-color:var(--accent);box-shadow:var(--ff-ring)}
.tm-svc-price em{font-style:normal;color:var(--fg-subtle);font-size:13px}
.tm-svc-price input{flex:1;min-width:0;border:0;background:transparent;color:var(--fg);font-size:13.5px;text-align:right;outline:none;padding:0}
.tm-svc-price input::-webkit-inner-spin-button{opacity:0}
.tm-first-row{border-top:0;padding-top:0}
.tm-meta{font-size:12px;color:var(--fg-subtle);margin:10px 0 14px}
.tm-pw-block{display:flex;flex-direction:column;gap:10px}
.tm-pw-block > .action-btn{align-self:flex-start}
.tm-pw-row{display:flex;gap:8px}
.tm-pw-row input{flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em}
.tm-new-login{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.tm-confirm{font-size:14px;color:var(--fg-muted);margin:0}

/* Self (technician) view */
.tm-self{max-width:720px}
.tm-kv{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;border-top:1px solid var(--line);font-size:13.5px;color:var(--fg)}
.ff-card-head + .tm-kv{border-top:0}
.tm-kv b{font-weight:600;font-variant-numeric:tabular-nums}
.tm-kv-actions{display:flex;gap:6px}

@media (max-width:900px){
  .tm-row{grid-template-columns:40px minmax(0,1fr) auto;row-gap:8px}
  .tm-chips{grid-column:2/-1;grid-row:2}
  .tm-access{grid-column:2;grid-row:3}
  .tm-actions{grid-column:3;grid-row:1}
}
@media (max-width:600px){
  .tm-grid{grid-template-columns:1fr}
  .tm-hours .hrs-row{grid-template-columns:1fr auto}
  .tm-tabs b{padding:7px 4px;font-size:12px}
  .tm-head .action-btn{padding:0 12px}
}
.tm-access.is-invited{color:var(--accent-2)}
.tm-btn-row{display:flex;gap:8px;flex-wrap:wrap}
.tm-invite-mode{display:flex;width:100%}
.tm-invite-mode label{flex:1}
.tm-invite-mode b{text-align:center}

/* ==========================================================================
   AI Agents (ag-*) — Identity · Phone · SMS · After-call
   Header row = title + switch + Save; rows reuse ff-set-row / hrs-row.
   ========================================================================== */
#page-ai-agents .hub-head{margin-bottom:10px}
.ag-page{display:flex;flex-direction:column;gap:16px}
.ag-page > .settings-card,.ag-duo > .settings-card,.ag-duo > div > .settings-card{margin:0!important}
.ag-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.ag-duo > div:empty{display:none}
.ag-page > div > .settings-card{margin:0!important}
.ag-duo.is-even{align-items:stretch}
.ag-duo.is-even > .settings-card,.ag-duo.is-even > div > .settings-card{height:100%;box-sizing:border-box}
.ag-hours .hrs-row{grid-template-columns:150px minmax(0,1fr)}
.ag-hours .hrs-times{min-width:0}
.ag-hours .hrs-times input[type=time]{width:auto;flex:1 1 0;min-width:0;max-width:150px}
.ag-row-ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.ag-head-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.ag-head-actions .toggle-switch{margin:0}
.ff-card-head h3 .ag-tag{margin-left:10px}
.ag-tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:7px;font-size:11px;font-weight:650;letter-spacing:.02em;
  color:var(--fg-muted);background:var(--ff-soft);border:1px solid var(--line);white-space:nowrap}
.ag-tag.is-accent{color:var(--accent);background:var(--accent-soft);border-color:color-mix(in oklab, var(--accent) 25%, transparent)}

/* Fields */
.ag-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px}
.ag-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ag-span{grid-column:1/-1}
.ag-field{margin:0!important;min-width:0}
.ag-field > span{display:flex;align-items:center}
.ag-field input:not([type=checkbox]):not([type=radio]),.ag-field select,.ag-input{
  width:100%;height:40px;padding:0 12px!important;border:1px solid var(--ff-field-line)!important;border-radius:11px!important;
  background-color:var(--ff-field-bg)!important;color:var(--fg);font-size:14px;min-width:0;box-sizing:border-box;
}
.ag-field select{padding-right:32px!important}
.ag-field textarea,.ag-textarea{
  width:100%;min-height:96px;padding:11px 12px!important;border:1px solid var(--ff-field-line)!important;border-radius:11px!important;
  background:var(--ff-field-bg)!important;color:var(--fg);font:inherit;font-size:13.5px;line-height:1.55;box-sizing:border-box;
}
.ag-field :is(input,select,textarea):disabled{opacity:.55;cursor:not-allowed}
.ag-field.is-narrow input{max-width:140px}
.ag-dim{transition:opacity .2s var(--ff-ease)}
.ag-dim.is-off{opacity:.45;pointer-events:none}
.ag-set-select{min-width:200px}
.ag-set-input{width:220px;height:36px;padding:0 12px!important;border:1px solid var(--ff-field-line)!important;border-radius:10px!important;
  background:var(--ff-field-bg)!important;color:var(--fg);font-size:13.5px;font-variant-numeric:tabular-nums}

/* Hours: collapsed when "Any time" */
.ag-hours[hidden]{display:none!important}
.ag-anytime{display:flex;align-items:center;gap:10px;min-height:52px;font-size:13.5px;color:var(--fg-muted)}
.ag-anytime::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px color-mix(in oklab, var(--success) 18%, transparent)}
.ag-anytime[hidden]{display:none}

/* Notes (warnings, errors) */
.ag-note{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:11px 13px;border-radius:12px;font-size:12.5px;line-height:1.5;
  color:var(--fg);background:var(--ff-soft);border:1px solid var(--line)}
.ag-note b{font-weight:650}
.ag-note.is-warn{background:color-mix(in oklab, var(--warning) 9%, transparent);border-color:color-mix(in oklab, var(--warning) 32%, transparent)}
.ag-note.is-warn::before{content:"!";flex:0 0 18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;background:var(--warning);margin-top:1px}
.ag-note[hidden]{display:none}
.ag-error{font-size:12.5px;color:var(--danger);margin-top:8px}

/* Greeting variables */
.ag-vars{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.ag-var{height:26px;padding:0 10px;border-radius:8px;border:1px solid var(--line);background:var(--ff-soft);color:var(--fg-muted);
  font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.ag-var:hover{color:var(--accent);border-color:color-mix(in oklab, var(--accent) 40%, transparent);background:var(--accent-soft)}

/* Voice picker: select + play */
.ag-voice-pick{display:flex;align-items:center;gap:8px;min-width:0}
.ag-voice-pick select{flex:1;min-width:0}
.ag-voice-pick .ag-play{flex:0 0 40px;width:40px;height:40px}
.ag-play{flex:0 0 32px;width:32px;height:32px;border-radius:50%;border:1px solid var(--ff-field-line);background:var(--surface);color:var(--fg-muted);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:color .15s,border-color .15s,background .15s,transform .15s}
.ag-play:hover{color:var(--accent);border-color:var(--accent)}
.ag-play:active{transform:scale(.92)}
.ag-play:disabled{opacity:.4;pointer-events:none}
.ag-play.is-busy{opacity:.6;pointer-events:none}
.ag-play.is-playing{color:#fff;background:var(--accent);border-color:var(--accent)}
.ag-play svg{display:block}

/* Direct callers list */
.ag-list{display:flex;flex-direction:column;margin-top:16px}
.ag-list .dc-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 32px;gap:10px;align-items:center;padding:6px 0}
.ag-list .dc-row + .dc-row{border-top:1px solid var(--line)}
.ag-list .dc-row input{height:38px;padding:0 12px;border:1px solid var(--ff-field-line);border-radius:10px;background:var(--ff-field-bg);color:var(--fg);font-size:13.5px;min-width:0;box-sizing:border-box}
.ag-list .dc-remove{width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--fg-subtle);font-size:17px;line-height:1;cursor:pointer;transition:background .15s,color .15s}
.ag-list .dc-remove:hover{background:var(--danger-soft);color:var(--danger)}
.ag-list .dc-empty{font-size:13px;color:var(--fg-subtle);padding:6px 0}
.ag-add{margin-top:10px}

/* Knowledge list (after-call) */
.ag-rows{display:flex;flex-direction:column}
.ag-rows > li{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--fg)}
.ag-rows > li > span:first-child{flex:1;min-width:0}
.ag-rows-when{font-size:12px;color:var(--fg-subtle);white-space:nowrap;font-variant-numeric:tabular-nums}
.ag-empty{font-size:13px;color:var(--fg-subtle);padding:10px 0 2px}

@media (max-width:1100px){
  .ag-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1100px){
  .ag-duo{grid-template-columns:1fr}
}
@media (max-width:600px){
  .ag-grid,.ag-grid-3{grid-template-columns:1fr}
  .ag-head-actions{gap:8px}
  .ag-head-actions:has(.ff-seg){flex:1 1 100%}
  .ag-head-actions .ff-seg{flex:1;width:auto}
  .ag-row-ctl{width:100%;justify-content:flex-start}
  .ag-set-input,.ag-set-select{width:100%;min-width:0}
  .ag-list .dc-row{grid-template-columns:minmax(0,1fr) 32px}
  .ag-list .dc-row .dc-label{grid-column:1;grid-row:2}
}

/* ==========================================================================
   Reviews (rv-*) — link, review text, tags, optional list
   ========================================================================== */
.rv-inline{display:flex;align-items:center;gap:8px;min-width:0}
.rv-inline input{flex:1;min-width:0}
.rv-inline .action-btn{flex:0 0 auto;min-height:40px}
.rv-days{flex:0 0 auto}
.rv-days input{width:84px!important;flex:0 0 84px;height:36px!important;text-align:right;font-variant-numeric:tabular-nums;
  padding:0 10px!important;border:1px solid var(--ff-field-line)!important;border-radius:10px!important;background:var(--ff-field-bg)!important;color:var(--fg)}
.rv-days span{font-size:13px;color:var(--fg-muted)}
.rv-bubble-wrap{display:flex;margin-top:14px;padding:14px;border-radius:14px;background:var(--ff-soft);border:1px solid var(--line)}
.rv-bubble{max-width:88%;padding:10px 13px;border-radius:16px 16px 16px 5px;white-space:pre-wrap;font-size:13px;line-height:1.45;
  color:var(--fg);background:var(--surface);border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.rv-bubble:empty{display:none}
.rv-chart{height:150px;margin:-4px 0 12px}
.rv-tag-list{display:flex;flex-direction:column}
.rv-tag-row{display:grid;grid-template-columns:minmax(0,1.8fr) repeat(3,minmax(70px,.45fr)) auto;align-items:center;gap:14px;
  min-height:62px;padding:8px 0;border-top:1px solid var(--line)}
.rv-tag-row.is-off .rv-tag-main,.rv-tag-row.is-off .rv-tag-num{opacity:.5}
.rv-tag-main{min-width:0}
.rv-tag-name{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--fg);min-width:0}
.rv-tag-url{font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--fg-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.rv-tag-num{display:flex;flex-direction:column;gap:1px;min-width:0}
.rv-tag-num b{font-size:14px;font-weight:650;color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap}
.rv-tag-num span{font-size:11px;color:var(--fg-subtle)}
.rv-tag-actions{display:flex;gap:4px;justify-content:flex-end}
#rv-root .rv-source-badge,#rv-root .rv-status-badge{border-radius:6px;font-size:10.5px;font-weight:650;letter-spacing:.02em;padding:2px 7px}

/* Reviews list inside its card */
#rv-root .rv-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 6px}
#rv-root .rv-filters .ff-set-select{min-width:0;height:34px}
.rv-flag-filter{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--fg-muted);cursor:pointer;margin-left:4px}
#rv-root .rv-card{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:16px 0;margin:0}
#rv-root .rv-card:hover{border-color:var(--line)}
#rv-root .rv-card-header{gap:8px;margin-bottom:8px}
#rv-root .rv-text{font-size:13.5px;margin-bottom:10px;color:var(--fg)}
#rv-root .rv-reply{background:var(--ff-soft);border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:6px}
.rv-reply-meta{font-size:11.5px;color:var(--fg-subtle);margin-top:6px}
.rv-draft{min-height:72px!important;margin-bottom:8px}
.rv-card-foot{display:flex;gap:14px;margin-top:8px}
.rv-link-btn{border:0;background:none;padding:0;font:inherit;font-size:12px;font-weight:550;color:var(--fg-subtle);cursor:pointer}
.rv-link-btn:hover{color:var(--fg)}
.rv-link-btn.is-danger:hover{color:var(--danger)}
#rv-root .rv-pagination{border-top:1px solid var(--line);padding-top:12px}

@media (max-width:900px){
  .rv-tag-row{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:8px}
  .rv-tag-main{grid-column:1/-1}
  .rv-tag-actions{grid-column:1/-1;justify-content:flex-start}
}

/* ==========================================================================
   Quiet surfaces (AI Agents + Reviews, pass 2) — no boxes inside boxes:
   borderless filled fields, text/icon actions, pill buttons, plain tags.
   ========================================================================== */
:root{--ag-fill:rgba(255,255,255,.055);--ag-fill-hover:rgba(255,255,255,.08)}
html.light{--ag-fill:#f2f3f5;--ag-fill-hover:#ecedf0}

.ag-page .ag-field input:not([type=checkbox]):not([type=radio]),
.ag-page .ag-field select,.ag-page .ag-field textarea,.ag-page .ag-textarea,
.ag-page .ag-set-input,.ag-page .ff-set-select,.ag-page .hrs-times input[type=time],
.ag-page .ag-list .dc-row input,.rv-days input,
.modal .ag-field input:not([type=checkbox]):not([type=radio]),.modal .ag-field textarea{
  border-color:transparent!important;background-color:var(--ag-fill)!important;border-radius:12px!important;
  transition:background-color .2s var(--ff-ease),box-shadow .2s var(--ff-ease)!important;
}
.ag-page :is(.ag-field input,.ag-field select,.ag-field textarea,.ag-textarea,.ag-set-input,.ff-set-select):hover:not(:focus):not(:disabled){background-color:var(--ag-fill-hover)!important}
.ag-page :is(input,select,textarea):focus,.modal .ag-field :is(input,textarea):focus{background-color:var(--surface)!important;box-shadow:var(--ff-ring)!important}
.ag-page .ag-field input:not([type=checkbox]):not([type=radio]),.ag-page .ag-field select{height:44px}
.ag-page .ag-textarea,.ag-page .ag-field textarea{padding:13px 15px!important;line-height:1.6}

/* Buttons: pills; secondary actions are text, not outlined boxes */
.ag-page .action-btn{border-radius:999px}
.ag-page .action-btn.small{padding:0 14px}
.ag-page .action-btn.ghost,.ag-page .action-btn:not(.primary):not(.danger){
  border-color:transparent!important;background:transparent;box-shadow:none;color:var(--fg-muted)}
.ag-page .action-btn.ghost:hover,.ag-page .action-btn:not(.primary):not(.danger):hover{
  background:var(--hover);color:var(--fg);transform:none;box-shadow:none}

/* Tags: a dot and a word, no chip */
.ag-tag{height:auto;padding:0;border:0!important;background:none!important;gap:6px;font-size:12px;font-weight:600;color:var(--fg-subtle);letter-spacing:0}
.ag-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55;flex:0 0 6px}
.ag-tag.is-accent{color:var(--accent)}
.ag-tag.is-accent::before{opacity:1;box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent)}

/* Variables: quiet text links */
.ag-vars{gap:4px 16px;margin-top:10px}
.ag-var{height:auto;padding:2px 0;border:0!important;background:none!important;color:var(--fg-subtle);font-size:12px}
.ag-var::before{content:"+";margin-right:3px;opacity:.6}
.ag-var:hover{color:var(--accent)}

/* Notes: tinted line, no frame */
.ag-note{border:0;background:var(--ag-fill)}
.ag-note.is-warn{border:0;background:color-mix(in oklab, var(--warning) 10%, transparent)}

/* Field with trailing icon actions (one surface instead of three boxes) */
.rv-field{display:flex;align-items:center;gap:2px;height:44px;padding-right:6px;border-radius:12px;background:var(--ag-fill);
  transition:background-color .2s var(--ff-ease),box-shadow .2s var(--ff-ease);min-width:0}
.rv-field:hover{background:var(--ag-fill-hover)}
.rv-field:focus-within{background:var(--surface);box-shadow:var(--ff-ring)}
.ag-page .ag-field .rv-field input:not([type=checkbox]):not([type=radio]),
.modal .ag-field .rv-field input:not([type=checkbox]):not([type=radio]),
.rv-field input:not([type=checkbox]):not([type=radio]):focus{flex:1;min-width:0;height:44px;background:transparent!important;border:0!important;box-shadow:none!important;
  padding:0 8px 0 15px!important;text-overflow:ellipsis}
.modal .rv-field{background:var(--ag-fill)}
.rv-icon{flex:0 0 34px;width:34px;height:34px;border:0;border-radius:50%;background:none;color:var(--fg-subtle);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:background .15s,color .15s,transform .15s}
.rv-icon:hover{background:var(--hover);color:var(--fg)}
.rv-icon:active{transform:scale(.92)}
.rv-icon.is-done{color:var(--success)}
.rv-icon.is-danger:hover{color:var(--danger);background:var(--danger-soft)}
.rv-icon svg{display:block}

/* Review text */
.rv-days input{height:34px!important;width:72px!important;flex:0 0 72px;border-radius:999px!important;text-align:center!important;padding:0 8px!important}
.rv-preview-label{margin-top:20px;font-size:11px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-subtle)}
.rv-bubble-wrap{margin-top:8px;padding:0;border:0;background:none}
.rv-bubble{max-width:94%;border:0;border-radius:20px 20px 20px 6px;padding:12px 16px;box-shadow:none;background:var(--ag-fill);font-size:13.5px;line-height:1.5}

/* Tags + list rows */
#rv-root .rv-source-badge,#rv-root .rv-status-badge{background:none!important;padding:0!important;border-radius:0;font-size:10.5px;font-weight:650;
  letter-spacing:.08em;text-transform:uppercase;color:var(--fg-subtle)!important}
.rv-tag-row{border-top-color:var(--line);min-height:68px}
.rv-tag-list .rv-tag-row:first-child{border-top:0}
.rv-tag-actions{gap:2px}
.rv-chart{height:132px;margin:2px 0 14px}
#rv-root .rv-filters .ff-set-select{border-radius:999px!important;height:34px;padding-left:14px!important}