/* ==========================================================================
   Vendor Sales Engine — system layer (ui/vse-system.css)
   Loaded after vse.css, vse-readable.css and vse-polished.css on every member page.
   It settles the decisions those layers left in tension and fixes shared component
   defects. Documented in docs/19_DESIGN_SYSTEM_ELEVATE.md.
   ========================================================================== */

/* 1. Tokens: one radius scale, one elevation scale ------------------------- */
:root{
  --radius-control:10px;   /* inputs, buttons, selects */
  --radius-card:14px;      /* cards, panels, tiles */
  --radius-chip:999px;
  --elev-card:0 1px 2px rgba(13,27,62,.04),0 1px 1px rgba(13,27,62,.03);
  --elev-raise:0 6px 20px rgba(13,27,62,.08),0 1px 3px rgba(13,27,62,.05);
  --nav-item-h:38px;
}
:root[data-theme="dark"]{--elev-card:0 1px 2px rgba(0,0,0,.35);--elev-raise:0 10px 28px rgba(0,0,0,.45)}

/* 2. Sidebar: fit more of the menu above the fold on 768px laptops ---------- */
.sidebar .nav-group{margin-top:16px}
.sidebar .nav-group:first-child{margin-top:4px}
.sidebar .nav-label{font-size:11px;letter-spacing:.08em;padding:0 12px 6px}
.sidebar .nav-link{min-height:var(--nav-item-h);padding:7px 12px;font-size:14px}
.sidebar .nav-link svg{width:18px;height:18px}
.sidebar-scroll{mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent);-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent)}
.sidebar-foot{padding:10px 12px}
.sidebar-foot .plan-mini{padding:9px 12px;font-size:12.5px;gap:2px}
.sidebar-foot .plan-mini strong{font-size:13.5px}
.sidebar-foot .env-note{margin-top:8px;font-size:11.5px}
@media (max-height:820px){.sidebar-foot .env-note{display:none}}

/* 3. Cards and panels: one radius, one quiet elevation ---------------------- */
.card,.subpanel,.next-card,.today-strip,.tool,.stat,.kpis > *,.free-tier-feature,.free-tier-welcome,.free-tier-resource-teaser{border-radius:var(--radius-card)}
.card,.subpanel,.tool{box-shadow:var(--elev-card)}
a.tool{transition:border-color 140ms ease,box-shadow 140ms ease,transform 140ms ease}
a.tool:hover{box-shadow:var(--elev-raise);transform:translateY(-1px)}

/* 4. Controls ---------------------------------------------------------------- */
button,.btn{border-radius:var(--radius-control)}
input,select,textarea{border-radius:var(--radius-control)}
/* Checkbox and radio rows: box beside its text, not stacked above it */
label:has(> input[type="checkbox"]),label:has(> input[type="radio"]){display:flex;align-items:flex-start;gap:10px;font-weight:500;margin:10px 0;cursor:pointer;line-height:1.45}
label:has(> input[type="checkbox"]) > input,label:has(> input[type="radio"]) > input{margin-top:2px}
/* Search fields: keep the text clear of the magnifier icon */
.content input[type="search"]{padding-left:38px!important;background-position:12px 50%!important}
.content .marketplace-search-field input[type="search"]{padding-left:0!important;background-image:none!important}
/* Invalid fields */
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--danger)}

/* 5. Kanban: empty columns read as a quiet placeholder, not the word "None" */
.stage-empty{padding:14px;border:1px dashed var(--border);border-radius:10px;color:var(--text-3);font-size:13px;text-align:center;list-style:none}

/* 6. Dashboard ---------------------------------------------------------------- */
.page-head.greeting h1{font-size:28px;letter-spacing:-.025em}
#overview > .next-card,#overview > .setup-card{margin-bottom:16px}
.next-card{box-shadow:var(--elev-card)}
.today-strip b{font-size:22px}
.setup-card .setup-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;list-style:none;padding:0;margin:14px 0 0;counter-reset:setup}
.setup-card .setup-list li{counter-increment:setup;margin:0;display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);font-size:14px;line-height:1.4}
.setup-card .setup-list li::before{content:counter(setup);flex:0 0 22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font-size:12px;font-weight:700;background:var(--accent-soft);color:var(--accent-text)}
.setup-card .setup-list li.is-done{color:var(--text-3);text-decoration:line-through}
.setup-card .setup-list li.is-done::before{content:"✓";background:var(--success-bg);color:var(--success)}
.setup-card .setup-list a{color:var(--text);font-weight:550}
.setup-card .setup-list a:hover{color:var(--accent-text)}
.tools-footer{color:var(--text-3);font-size:13px}

/* 7. Free plan: SVG lock instead of emoji ------------------------------------- */
.free-tier-icon,.free-tier-biglock{display:inline-grid;place-items:center;color:var(--accent-text)}
.free-tier-icon svg{width:18px;height:18px}
.free-tier-biglock svg{width:26px;height:26px}
.free-tier-feature{align-self:stretch;margin-top:0!important}

/* 8. Motion -------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}a.tool:hover{transform:none}}

/* 9. Phone layouts ------------------------------------------------------------ */
@media (max-width:640px){
  .setup-card .card-head{flex-direction:column;align-items:stretch;gap:12px}
  .setup-card .card-head > button{align-self:flex-start;white-space:nowrap}
  #overview .section-head{display:block}
  #overview .section-head p{margin-top:4px}
  #overview .quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #overview .quick-actions .btn{width:100%;justify-content:center;white-space:nowrap}
  #overview .quick-actions .btn:first-child{grid-column:1/-1}
  .page-head.greeting h1{font-size:25px}
}

/* 10. Content studio previews (were inline styles, which the launcher's security policy blocks) */
.studio-canvas{display:block;width:100%;max-width:360px;height:auto;border-radius:14px;border:1px solid var(--border)}
.studio-canvas--story{max-width:240px;aspect-ratio:9/16;border-radius:16px}
.studio-video{display:block;width:100%;max-width:240px;border-radius:16px;margin-top:1rem}