/* Signal Analyst hi-fi wireframes: shared components and shells.
   Built on tokens.css (Signal Collective design system). Light theme only, like the product.
   Responsive behaviour uses CONTAINER queries on .app so the review bar's Mobile toggle
   (390px) and a real phone both trigger the mobile layout. Never use @media for layout here. */
@import url("tokens.css");

*,*::before,*::after{box-sizing:border-box}
html{background:#d9dcd6}
body{margin:0;font-family:var(--font-body),"Helvetica Neue",Arial,sans-serif;font-size:var(--text-body);line-height:var(--lh-body);color:var(--text-body);background:#d9dcd6;padding-top:56px}
img,svg{max-width:100%}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--font-display),"Helvetica Neue",Arial,sans-serif;color:var(--text-heading);margin:0;text-wrap:balance;letter-spacing:var(--tracking-heading)}
p{margin:0}
a{color:var(--green-500);text-underline-offset:3px}
code,.mono{font-family:var(--font-mono),ui-monospace,Menlo,monospace}
:focus-visible{outline:3px solid var(--lime-500);outline-offset:2px;border-radius:6px}

/* ---------- review frame (not part of the product) ---------- */
.rv-bar{position:fixed;inset:0 0 auto 0;z-index:1000;height:56px;display:flex;align-items:center;gap:14px;padding:0 16px;background:#1b2327;color:#e8eee9;font:500 13px/1.2 var(--font-body),Arial,sans-serif;overflow-x:auto;white-space:nowrap}
.rv-bar a{color:#C6E534;text-decoration:none}
.rv-bar .rv-id{font:600 12px var(--font-mono),monospace;background:#C6E534;color:#1b2327;padding:4px 7px;border-radius:5px}
.rv-bar .rv-name{font-weight:600;color:#fff}
.rv-bar select,.rv-bar button{font:600 12.5px var(--font-body),Arial,sans-serif;background:#2c363b;color:#fff;border:1px solid #435056;border-radius:999px;padding:6px 10px;cursor:pointer}
.rv-bar button[aria-pressed="true"]{background:#C6E534;color:#1b2327;border-color:#C6E534}
.rv-bar .rv-sp{flex:1}
.rv-bar .rv-score{font:600 11.5px var(--font-mono),monospace;padding:4px 8px;border-radius:5px;border:1px solid #435056}
.rv-note{max-width:1180px;margin:10px auto 0;padding:0 16px;font:500 12px/1.4 var(--font-mono),monospace;color:#3d4a45}

/* the product canvas */
.app{container-type:inline-size;container-name:app;background:var(--paper);margin:0 auto;min-height:calc(100vh - 56px);width:100%;max-width:1440px;position:relative}
body.rv-mobile .app{width:390px;min-height:844px;margin-top:16px;margin-bottom:32px;border-radius:28px;box-shadow:0 30px 80px -30px rgba(0,0,0,.45);overflow:hidden}
.state{display:block}

/* ---------- primitives ---------- */
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink-900);color:#fff;padding:10px 14px;border-radius:10px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:var(--container-app);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:640px}
.stack{display:grid;gap:var(--space-4)}
.stack-lg{display:grid;gap:var(--space-8)}
.row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.between{justify-content:space-between}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--grid-gap)}
.muted{color:var(--ink-500)}
.small{font-size:var(--text-body-sm)}
.caption{font-size:var(--text-caption);color:var(--ink-400)}
.eyebrow{font:600 var(--text-eyebrow)/1 var(--font-mono),monospace;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--green-500)}
.page-title{font-size:clamp(28px,4.2cqi,var(--text-display-md));line-height:1.08;letter-spacing:var(--tracking-display)}
.display{font-size:clamp(40px,7cqi,var(--text-display-xl));line-height:var(--lh-snug);letter-spacing:var(--tracking-display);font-weight:var(--fw-extrabold)}
.lede{font-size:var(--text-lead);line-height:var(--lh-relaxed);color:var(--ink-700);max-width:60ch}
.h2{font-size:clamp(24px,3.4cqi,var(--text-display-sm));line-height:1.1}
.h3{font-size:19px;line-height:1.25}
.tabular{font-variant-numeric:tabular-nums}

/* buttons: one .btn-primary per view */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--radius-pill);font:600 15px/1 var(--font-body),Arial,sans-serif;text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:transform var(--dur-hover) var(--ease-signal),background var(--dur-hover)}
.btn-primary{background:var(--green-500);color:#fff;box-shadow:var(--shadow-button)}
.btn-primary:hover{background:var(--green-600);transform:translateY(var(--lift-button))}
.btn-secondary{background:transparent;color:var(--green-500);border-color:var(--green-line)}
.btn-secondary:hover{border-color:var(--green-500)}
.btn-danger{background:var(--status-error);color:#fff}
.btn-danger-outline{background:transparent;color:var(--status-error);border-color:rgba(180,64,44,.35)}
.btn-google{background:#fff;color:var(--ink-900);border-color:#d5dbd6;width:100%}
.btn-google .g{width:18px;height:18px;border-radius:50%;background:conic-gradient(#4285F4 0 25%,#34A853 0 50%,#FBBC05 0 75%,#EA4335 0);flex:none}
.btn-block{width:100%}
.btn-sm{min-height:36px;padding:0 14px;font-size:13.5px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.link{color:var(--green-500);font-weight:600;text-decoration:none}
.link:hover{text-decoration:underline}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}.btn{transition:none}}

/* cards and panels */
.card{background:var(--surface-card);border:1px solid var(--green-line);border-radius:var(--radius-lg);padding:var(--space-6)}
.card-tight{padding:var(--space-4) var(--space-5)}
.card-dark{background:var(--ink-900);color:var(--on-dark-200);border-color:transparent}
.card-dark h2,.card-dark h3{color:#fff}
.divider{height:1px;background:var(--green-line);border:0;margin:0}

/* badges and status */
.badge{display:inline-flex;align-items:center;gap:6px;font:600 11.5px/1 var(--font-mono),monospace;letter-spacing:.06em;text-transform:uppercase;padding:6px 9px;border-radius:var(--radius-pill);white-space:nowrap}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.badge.plain::before{display:none}
.b-ok{color:var(--status-success);background:var(--status-success-bg)}
.b-active{color:var(--status-active);background:var(--status-active-bg)}
.b-warn{color:var(--status-warn);background:var(--status-warn-bg)}
.b-err{color:var(--status-error);background:var(--status-error-bg)}
.b-neutral{color:var(--status-neutral);background:var(--status-neutral-bg)}
.b-env{color:var(--ink-900);background:#fff;border:1.5px solid var(--ink-900)}
.b-prod{color:#fff;background:var(--status-error)}

/* page-level alert (role=alert), only when there is something to say */
.alert{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;padding:14px 16px;border-radius:var(--radius-md);border:1px solid;font-size:var(--text-body-sm)}
.alert strong{color:var(--ink-900)}
.alert-err{background:var(--status-error-bg);border-color:rgba(180,64,44,.3)}
.alert-warn{background:var(--status-warn-bg);border-color:rgba(176,120,20,.3)}
.alert-ok{background:var(--status-success-bg);border-color:var(--green-line)}
.alert-info{background:#fff;border-color:var(--green-line)}

/* forms */
.field{display:grid;gap:6px}
.field label,.label{font-weight:600;color:var(--ink-900);font-size:14.5px}
.hint{font-size:var(--text-caption);color:var(--ink-500)}
.input,.select,textarea.input{width:100%;min-height:46px;padding:10px 14px;border-radius:var(--radius-sm);border:1.5px solid #cfd8d2;background:#fff;font:400 16px var(--font-body),Arial,sans-serif;color:var(--ink-900)}
.input:focus,.select:focus{outline:none;border-color:var(--green-500);box-shadow:0 0 0 3px var(--green-050)}
.input[aria-invalid="true"]{border-color:var(--status-error)}
.field-error{display:flex;gap:6px;color:var(--status-error);font-size:13.5px;font-weight:500}
.field-error::before{content:"⚠"}
.choice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1.5px solid #cfd8d2;border-radius:var(--radius-sm);background:#fff;cursor:pointer;min-height:44px}
.choice input{margin-top:3px;accent-color:var(--green-500);width:18px;height:18px}
.choice:has(input:checked){border-color:var(--green-500);box-shadow:0 0 0 3px var(--green-050)}
.or{display:flex;align-items:center;gap:12px;color:var(--ink-400);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--green-line)}

/* copy field */
.copyfield{display:flex;gap:8px;align-items:stretch}
.copyfield code{flex:1;min-width:0;display:flex;align-items:center;padding:10px 14px;background:#f4f6f3;border:1.5px solid #cfd8d2;border-radius:var(--radius-sm);font-size:14px;color:var(--ink-900);overflow-wrap:anywhere}

/* setup checklist (Shopify setup-guide pattern) */
.checklist{display:grid}
.check-item{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;padding:16px 0;border-top:1px solid var(--green-line)}
.check-item:first-child{border-top:0}
.tick{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;border:2px solid #c6cfc9;color:transparent}
.tick.done{background:var(--green-500);border-color:var(--green-500);color:#fff}
.tick.busy{border-color:var(--lime-500);background:var(--status-active-bg);color:var(--lime-ink)}
.tick.fail{border-color:var(--status-error);color:var(--status-error)}
.check-item .t{font-weight:600;color:var(--ink-900)}
.progress{height:8px;border-radius:999px;background:var(--status-neutral-bg);overflow:hidden}
.progress>span{display:block;height:100%;background:var(--green-500);border-radius:inherit}

/* tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--green-line);border-radius:var(--radius-md);background:#fff}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th{font:600 11.5px/1.2 var(--font-mono),monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-400);text-align:left;padding:12px 16px;background:#f6f8f5;border-bottom:1px solid var(--green-line)}
.tbl td{padding:14px 16px;border-bottom:1px solid var(--green-line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:10px 20px;font-size:14.5px}
.kv dt{color:var(--ink-500)} .kv dd{margin:0;color:var(--ink-900);font-weight:500}

/* empty state (NN/g: status + teaching + direct path) */
.empty{display:grid;justify-items:start;gap:10px;padding:var(--space-8);border:1.5px dashed #c6cfc9;border-radius:var(--radius-lg);background:rgba(255,255,255,.5)}

/* disclosure menus (never role=menu) */
.disclosure{position:relative}
.disclosure-panel{position:absolute;z-index:40;min-width:240px;background:#fff;border:1px solid var(--green-line);border-radius:var(--radius-md);box-shadow:var(--shadow-card-hover);padding:8px}
.disclosure-panel a,.disclosure-panel button.item{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;color:var(--ink-900);text-decoration:none;font:500 15px var(--font-body),Arial,sans-serif;background:none;border:0;width:100%;text-align:left;cursor:pointer}
.disclosure-panel a:hover{background:var(--green-050)}
.menu-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--radius-pill);border:1.5px solid var(--green-line);background:#fff;color:var(--ink-900);font:600 14.5px var(--font-body),Arial,sans-serif;cursor:pointer}
.sheet{position:absolute;inset:0;z-index:60;background:#fff;padding:16px;display:grid;align-content:start;gap:4px}
.sheet .sheet-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--green-line);margin-bottom:6px}
.sheet a,.sheet .item{display:flex;align-items:center;min-height:48px;padding:0 10px;border-radius:10px;color:var(--ink-900);text-decoration:none;font-weight:500}
.sheet a[aria-current="page"]{background:var(--green-050);font-weight:700;box-shadow:inset 3px 0 0 var(--green-500)}

/* ---------- logo ---------- */
.logo{display:inline-flex;align-items:center;gap:10px;font:700 19px/1 var(--font-display),Arial,sans-serif;color:var(--ink-900);text-decoration:none;letter-spacing:-.02em}
.logo .mark{width:26px;height:26px;flex:none;background:
  linear-gradient(var(--green-500),var(--green-500)) center/4px 100% no-repeat,
  linear-gradient(var(--green-500),var(--green-500)) center/100% 4px no-repeat;transform:rotate(45deg);border-radius:2px;position:relative}
.logo .mark::after{content:"";position:absolute;inset:0;background:
  linear-gradient(var(--green-500),var(--green-500)) center/4px 100% no-repeat,
  linear-gradient(var(--green-500),var(--green-500)) center/100% 4px no-repeat;transform:rotate(45deg)}
span.logo{cursor:default}

/* ---------- PUBLIC shell ---------- */
.pub-header{position:sticky;top:0;z-index:30;background:rgba(239,239,239,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--green-line)}
.pub-header .inner{display:flex;align-items:center;gap:24px;min-height:72px}
.pub-nav{display:flex;gap:4px;flex:1}
.pub-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--ink-900);text-decoration:none;font-weight:500;border-radius:10px}
.pub-nav a[aria-current="page"]{font-weight:700;box-shadow:inset 0 -3px 0 var(--green-500);border-radius:0}
.pub-actions{display:flex;align-items:center;gap:8px}
.pub-actions .signin{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--ink-900);font-weight:600;text-decoration:none}
.pub-menu{display:none}
.pub-footer{margin-top:var(--space-16);border-top:1px solid var(--green-line);padding:var(--space-10) 0}
.pub-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
.pub-footer h2{font:600 12px var(--font-mono),monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400);margin-bottom:10px}
.pub-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.pub-footer li a{display:inline-flex;min-height:32px;align-items:center;color:var(--ink-900);text-decoration:none}
.pub-footer .fine{margin-top:24px;font-size:13px;color:var(--ink-400)}
@container app (max-width:760px){
  .pub-nav{display:none}
  .pub-menu{display:inline-flex}
  .pub-header .inner{gap:8px;min-height:64px}
  .pub-header .cta-desktop{display:none}
  .pub-cta-mobile{display:block!important;padding:0 var(--space-4) var(--space-3)}
  .pub-footer .cols{grid-template-columns:1fr}
  .pub-footer li a{min-height:44px}
}
.pub-cta-mobile{display:none}

/* ---------- SETUP shell (enclosed) ---------- */
.setup-header{background:#fff;border-bottom:1px solid var(--green-line)}
.setup-header .inner{display:flex;align-items:center;gap:20px;min-height:68px}
.setup-header .who{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-500)}
.stepper{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;flex:1;justify-content:center}
.stepper li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-400)}
.stepper li+li::before{content:"";width:28px;height:2px;background:#d5dcd7;margin-right:6px}
.stepper .n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--font-mono),monospace;border:1.5px solid #c6cfc9}
.stepper a{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--green-500);text-decoration:none;font-weight:600}
.stepper .done .n{background:var(--green-500);border-color:var(--green-500);color:#fff}
.stepper [aria-current="step"]{color:var(--ink-900);font-weight:700}
.stepper [aria-current="step"] .n{background:var(--lime-500);border-color:var(--lime-500);color:var(--lime-ink)}
.stepper-mobile{display:none;padding:10px 0 12px;gap:8px}
.stepper-mobile .progress{height:6px}
.setup-main{padding:var(--space-12) 0 var(--space-16)}
.setup-footer{border-top:1px solid var(--green-line);padding:18px 0;font-size:14px}
.setup-footer nav{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.setup-footer a{display:inline-flex;min-height:32px;align-items:center;color:var(--ink-700);text-decoration:none}
.setup-footer .addr{margin-left:auto;color:var(--ink-500)}
@container app (max-width:760px){
  .stepper{display:none}
  .stepper-mobile{display:grid}
  .setup-header .who .who-email{display:none}
  .setup-main{padding:var(--space-8) 0 var(--space-10)}
  .setup-footer nav{flex-direction:column;align-items:flex-start;gap:4px}
  .setup-footer a{min-height:44px}
  .setup-footer .addr{margin-left:0}
}

/* ---------- ACCOUNT shell ---------- */
.acct{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 56px)}
body.rv-mobile .acct{min-height:844px}
.acct-side{background:#fff;border-right:1px solid var(--green-line);padding:20px 14px;display:flex;flex-direction:column;gap:14px}
.shop-switch{width:100%;justify-content:space-between}
.acct-nav{display:grid;gap:2px}
.acct-nav a{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 12px;border-radius:10px;color:var(--ink-700);text-decoration:none;font-weight:500}
.acct-nav a:hover{background:var(--green-050)}
.acct-nav a[aria-current="page"]{background:var(--green-050);color:var(--ink-900);font-weight:700;box-shadow:inset 3px 0 0 var(--green-500)}
.acct-nav .count{font:600 11px var(--font-mono),monospace;background:var(--lime-500);color:var(--lime-ink);padding:3px 7px;border-radius:999px}
.acct-side .lower{margin-top:auto;display:grid;gap:2px;padding-top:12px;border-top:1px solid var(--green-line)}
.acct-side .lower .acct-email{font-size:13px;color:var(--ink-500);padding:6px 12px;overflow-wrap:anywhere}
.acct-main{display:flex;flex-direction:column;min-width:0}
.acct-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:28px 36px 0}
.acct-body{padding:24px 36px 40px;display:grid;gap:var(--space-6);flex:1;align-content:start}
.acct-footer{border-top:1px solid var(--green-line);padding:14px 36px;font-size:13.5px}
.acct-footer nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.acct-footer a{color:var(--ink-700);text-decoration:none;display:inline-flex;min-height:32px;align-items:center}
.acct-mobilebar{display:none}
@container app (max-width:760px){
  .acct{grid-template-columns:1fr}
  .acct-side{display:none}
  .acct-mobilebar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;background:#fff;border-bottom:1px solid var(--green-line);position:sticky;top:0;z-index:20}
  .acct-top{padding:20px 16px 0;flex-direction:column}
  .acct-body{padding:16px 16px 28px}
  .acct-footer{padding:14px 16px}
  .acct-footer nav{flex-direction:column;gap:2px}
  .acct-footer a{min-height:44px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}

/* ---------- OPERATOR shell ---------- */
.op-header{background:var(--ink-900);color:#fff}
.op-header .inner{display:flex;align-items:center;gap:16px;min-height:60px}
.op-header .logo{color:#fff;font-size:17px}
.op-header .logo .mark,.op-header .logo .mark::after{background:
  linear-gradient(var(--lime-500),var(--lime-500)) center/4px 100% no-repeat,
  linear-gradient(var(--lime-500),var(--lime-500)) center/100% 4px no-repeat}
.op-header .area{color:var(--on-dark-400);font-weight:500}
.op-header .menu-btn{background:transparent;color:#fff;border-color:#3a4a50}
.op-nav{background:#fff;border-bottom:1px solid var(--green-line)}
.op-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;overflow-x:auto}
.op-nav a{display:inline-flex;align-items:center;min-height:48px;padding:0 14px;color:var(--ink-700);text-decoration:none;font-weight:500;white-space:nowrap}
.op-nav a[aria-current="page"]{color:var(--ink-900);font-weight:700;box-shadow:inset 0 -3px 0 var(--green-500)}
.op-main{padding:28px 0 40px}
.op-footer{border-top:1px solid var(--green-line);padding:14px 0;font-size:13.5px}
.op-footer nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.op-footer a{color:var(--ink-700);text-decoration:none;display:inline-flex;min-height:32px;align-items:center}
.op-menu{display:none}
@container app (max-width:760px){
  .op-nav{display:none}
  .op-menu{display:inline-flex}
  .op-header .area,.op-header .who{display:none}
  .op-footer nav{flex-direction:column;gap:2px}
  .op-footer a{min-height:44px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}

/* ---------- MINIMAL frame (OAuth consent, Slack pages) ---------- */
.min-header{padding:22px 0;border-bottom:1px solid var(--green-line);background:#fff}
.min-header .inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.min-main{padding:var(--space-12) 0}
@container app (max-width:760px){.min-main{padding:var(--space-6) 0}}

/* ---------- EMAIL canvas ---------- */
.email-meta{max-width:640px;margin:24px auto 0;padding:0 16px;display:grid;gap:4px;font-size:13.5px;color:var(--ink-500)}
.email-meta b{color:var(--ink-900);font-weight:600}
.email-card{max-width:600px;margin:12px auto 40px;background:#fff;border:1px solid #dde3de;border-radius:14px;overflow:hidden}
.email-card .e-head{padding:24px 32px;border-bottom:1px solid #eef1ee}
.email-card .e-body{padding:28px 32px;display:grid;gap:16px;font-size:16px;line-height:1.6;color:#2f3b37}
.email-card .e-foot{padding:20px 32px;background:#f7f9f6;font-size:12.5px;color:#6b7a72;display:grid;gap:6px}
.email-card .e-btn{display:inline-block;background:var(--green-500);color:#fff;text-decoration:none;font-weight:700;padding:14px 24px;border-radius:999px}
@container app (max-width:760px){.email-card .e-head,.email-card .e-body,.email-card .e-foot{padding-left:20px;padding-right:20px}}

/* ---------- SLACK surface ---------- */
.slack{max-width:760px;margin:24px auto;background:#fff;border:1px solid #ddd;border-radius:10px;font-family:"Lato","Helvetica Neue",Arial,sans-serif;color:#1d1c1d;overflow:hidden}
.slack .s-top{display:flex;gap:18px;padding:12px 18px;border-bottom:1px solid #eee;font-weight:700}
.slack .s-top a{color:#616061;text-decoration:none;padding-bottom:10px}
.slack .s-top a[aria-current="page"]{color:#1d1c1d;box-shadow:inset 0 -2px 0 #1264a3}
.slack .msg{display:grid;grid-template-columns:40px 1fr;gap:10px;padding:14px 18px}
.slack .av{width:36px;height:36px;border-radius:8px;background:var(--green-500);display:grid;place-items:center;color:#fff;font-weight:800}
.slack .who{font-weight:800} .slack .when{color:#616061;font-size:12px;font-weight:400;margin-left:6px}
.slack .blk{display:grid;gap:10px;margin-top:6px;font-size:15px;line-height:1.46}
.slack .s-btn{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:4px;border:1px solid #bbb;background:#fff;font-weight:700;color:#1d1c1d;text-decoration:none}
.slack .s-btn.primary{background:#007a5a;border-color:#007a5a;color:#fff}
.slack .ctx{font-size:12.5px;color:#616061}

/* ---------- SHOPIFY admin frame ---------- */
.shopify{background:#f1f1f1;min-height:720px;font-family:-apple-system,"Inter","Segoe UI",Arial,sans-serif;color:#303030}
.shopify .sh-top{height:56px;background:#1a1a1a;color:#e3e3e3;display:flex;align-items:center;padding:0 16px;gap:12px;font-size:14px}
.shopify .sh-shell{display:grid;grid-template-columns:240px 1fr}
.shopify .sh-side{background:#ebebeb;min-height:664px;padding:12px;font-size:14px;display:grid;align-content:start;gap:2px}
.shopify .sh-side span{padding:7px 10px;border-radius:8px}
.shopify .sh-side .on{background:#fff;font-weight:650}
.shopify .sh-title{display:flex;align-items:center;justify-content:space-between;padding:18px 24px 6px;font-size:20px;font-weight:700}
.shopify .sh-body{padding:12px 24px 32px;display:grid;gap:16px;max-width:980px}
.shopify .sh-card{background:#fff;border-radius:12px;box-shadow:0 1px 0 rgba(0,0,0,.07),0 0 0 1px rgba(0,0,0,.06);padding:16px}
.shopify .sh-btn{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:8px;background:#303030;color:#fff;font-weight:600;border:0;text-decoration:none;font-size:14px}
.shopify .sh-btn.sec{background:#fff;color:#303030;box-shadow:0 0 0 1px #c9c9c9 inset}
@container app (max-width:760px){.shopify .sh-shell{grid-template-columns:1fr}.shopify .sh-side{display:none}}

/* ---------- external handoff (Stripe/Shopify/Meta/Google consent, not our design) ---------- */
.external{border:2px dashed #b8c2bc;border-radius:var(--radius-lg);padding:var(--space-6);background:repeating-linear-gradient(135deg,rgba(16,28,38,.03) 0 10px,transparent 10px 20px);display:grid;gap:10px}
.external .who-owns{font:600 11.5px var(--font-mono),monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-400)}

/* ---------- utility for mobile ---------- */
@container app (max-width:760px){
  .wrap{padding:0 16px}
  .hide-mobile{display:none!important}
  .btn-block-mobile{width:100%}
}
.show-mobile{display:none}
@container app (max-width:760px){.show-mobile{display:revert}}
@container app (max-width:760px){.copyfield{flex-direction:column}.copyfield .btn{width:100%}}
/* header/side account links are nav targets: keep them >= 44px (nav-audit N-10) */
.setup-header .who .link,.acct-side .lower .link,.min-header .link{display:inline-flex;align-items:center;min-height:44px}
/* after-audit fixes (WCAG 2.5.8): standalone text links get a >=24px target; nav links already >=44px */
:where(div,section,header,footer,nav,td,li,dd,dt,article,aside,main,form,fieldset,span,label,strong,small) > a:where(:not(.btn,.skip,.logo,.s-btn,.sh-btn,.e-btn)){display:inline-flex;align-items:center;min-height:24px}
p > a:where(:not(.btn,.skip)){display:inline-flex;align-items:center;min-height:24px;vertical-align:baseline}
h1,h2,h3,.page-title{overflow-wrap:anywhere}
@container app (max-width:760px){.op-header .inner{flex-wrap:wrap;row-gap:4px;padding-block:8px}}
@container app (max-width:760px){nav[aria-label="Breadcrumb"] a{min-height:44px}}
/* ---- fix pass 2 (after-audit findings) ---- */
/* Google sign-in reads as the primary action: Google's dark button variant */
.btn-google{background:var(--ink-900);color:#fff;border-color:var(--ink-900);box-shadow:var(--shadow-button)}
.btn-google:hover{background:#000;transform:translateY(var(--lift-button))}
.btn-google .g{box-shadow:0 0 0 3px #fff;background-color:#fff}
.logo{white-space:nowrap}
@container app (max-width:760px){
  .min-header .inner{flex-direction:column;align-items:flex-start;gap:2px}
  .card{padding:var(--space-4)}
  .copyfield code{font-size:13px;overflow-wrap:normal;word-break:normal}
}
/* plan cards: unit always on its own line so prices and allowances align across the row */
.plan .price small{display:block;font-size:13px;font-weight:500;color:var(--ink-500);margin-top:2px}