/* Fresh Bro subscription portal — styled to match freshbro.store (Figtree, teal #1ed7d2, 8px corners). */
@font-face{font-family:Figtree;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/figtree-400.woff2) format("woff2")}
@font-face{font-family:Figtree;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/figtree-700.woff2) format("woff2")}
@font-face{font-family:Figtree;font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/figtree-800.woff2) format("woff2")}

:root{
  --ink:#111416;
  --muted:#5b6467;
  --line:#e2e8e7;
  --paper:#fff;
  --canvas:#f3f7f6;
  --teal:#1ed7d2;
  --teal-hover:#19c4bf;
  --teal-soft:#e4f9f8;
  --teal-text:#0a7672;
  --navy:#04182b;
  --amber-soft:#fff3e2;
  --amber-text:#80501a;
  --danger:#a33b33;
  --radius:8px;
  --shadow:0 1px 2px rgba(17,20,22,.04),0 8px 24px rgba(17,20,22,.06);
  color-scheme:light;
  font-family:Figtree,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--canvas);line-height:1.5}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.hidden{display:none!important}

/* Header */
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:0 max(16px,calc((100% - 720px)/2));padding-top:env(safe-area-inset-top,0px);background:var(--paper);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand img{display:block;width:112px;height:auto}
#logout{font-size:14px}

/* Layout */
.shell{flex:1;width:min(100% - 32px,600px);margin:0 auto;padding:32px 0 48px}
.view{animation:appear .2s ease-out}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-text);margin-bottom:8px}
h1{font-size:clamp(28px,7.5vw,38px);font-weight:800;line-height:1.1;letter-spacing:-.02em;margin:0 0 10px}
.intro{color:var(--muted);font-size:16px;line-height:1.55;margin:0 0 24px;max-width:520px}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}

/* Forms */
label,.question-label{display:block;font-size:14px;font-weight:700;margin:0 0 8px}
input[type=email],input[type=date],textarea,select,.select{display:block;width:100%;min-height:48px;border:1px solid #cfd8d7;border-radius:var(--radius);background:var(--paper);padding:12px 14px;font-size:16px;color:var(--ink);outline:none;margin-bottom:14px;transition:border-color .12s,box-shadow .12s}
input:focus,textarea:focus,select:focus,.select:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(30,215,210,.35)}
textarea{min-height:88px;resize:vertical;font-size:15px}

/* Buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--radius);padding:12px 18px;min-height:48px;font-size:15px;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer;transition:background .12s,border-color .12s,transform .1s}
.button:active{transform:scale(.985)}
.button:disabled{opacity:.55;cursor:not-allowed}
/* Storefront teal; dark label keeps the text readable (white on this teal is too low contrast). */
.button-primary{background:var(--teal);color:var(--ink)}
.button-primary:hover:not(:disabled){background:var(--teal-hover)}
.button-secondary{background:var(--paper);color:var(--ink);border-color:#cfd8d7}
.button-secondary:hover:not(:disabled){border-color:var(--ink)}
.button-danger{background:var(--danger);color:#fff}
.button-danger:hover:not(:disabled){background:#8c3029}
.full{width:100%}
.text-button{background:transparent;border:0;padding:10px 4px;color:var(--muted);font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.text-button:hover{color:var(--ink)}
.hint{font-size:13px;color:var(--muted);text-align:center;margin:12px 0 0}
.message{min-height:22px;font-size:14px;color:var(--teal-text);font-weight:700;line-height:1.45;margin:12px 0 0}
.message:empty{margin:0;min-height:0}
#verify-view .panel{display:grid;gap:4px;justify-items:center}

/* Subscription cards */
.contracts{display:grid;gap:16px}
.contract-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.contract-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.customer{font-size:13px;color:var(--muted);margin-bottom:2px}
.contract-title{font-weight:800;font-size:19px;letter-spacing:-.01em}
.badge{flex:none;font-size:11px;font-weight:800;letter-spacing:.06em;padding:5px 9px;border-radius:4px;background:var(--teal-soft);color:var(--teal-text)}
.badge.paused,.badge.failed{background:var(--amber-soft);color:var(--amber-text)}
.order-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:14px 16px;margin:0 0 16px;background:var(--canvas);border-radius:var(--radius)}
.order-label{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--muted);margin-bottom:2px}
.order-date{font-size:20px;font-weight:800;letter-spacing:-.01em}
.item-list{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:10px}
.item-row{display:flex;justify-content:space-between;gap:12px;font-size:15px}
.item-row span:last-child{color:var(--muted);white-space:nowrap}
.main-actions{display:grid;gap:10px;padding-top:16px;border-top:1px solid var(--line)}
.skip-button{width:100%;min-height:54px;font-size:16px;font-weight:800}
.minor-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.minor-actions .button{min-width:0;padding:10px 12px;font-size:14px}
/* Paused card: Resume is the primary action; Cancel stays a quiet link like on active cards. */
.minor-actions:has([data-action="resume"]){grid-template-columns:1fr;justify-items:center}
.minor-actions:has([data-action="resume"]) [data-action="resume"]{width:100%;min-height:54px;font-size:16px;font-weight:800}
.minor-actions [data-action="cancel"]{min-height:0;background:transparent;border:0;color:var(--muted);text-decoration:underline;text-underline-offset:3px;font-size:13px;font-weight:400;padding:8px 4px}
.minor-actions [data-action="cancel"]:hover{color:var(--danger)}
.danger-link{justify-self:center;background:transparent;border:0;color:var(--muted);text-decoration:underline;text-underline-offset:3px;font-size:13px;padding:8px 4px;cursor:pointer}
.danger-link:hover{color:var(--danger)}
.notice{background:var(--amber-soft);color:var(--amber-text);border-radius:var(--radius);padding:12px 14px;font-size:14px;line-height:1.45}
.support{color:var(--muted);font-size:14px;margin:24px 0 0}
.support a{color:var(--ink);font-weight:700}

/* Survey / confirmation dialog */
dialog{width:min(calc(100% - 24px),460px);padding:22px;border:0;border-radius:12px;box-shadow:0 24px 64px rgba(4,24,43,.25);color:var(--ink);background:var(--paper);max-height:90vh;overflow:auto}
dialog::backdrop{background:rgba(4,24,43,.55)}
.dialog-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.dialog-head h2{font-size:22px;font-weight:800;letter-spacing:-.01em;margin:0 0 6px}
.icon-button{flex:none;border:0;border-radius:var(--radius);width:36px;height:36px;background:var(--canvas);color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
.intro.small{font-size:15px;margin:4px 0 18px}
.privacy-note{font-size:12px;color:var(--muted);line-height:1.45;margin:-8px 0 16px}
.question{margin:0 0 18px}
.question p.intro.small{margin:4px 0 12px}
.radio-list{display:grid;gap:8px}
.radio-option{display:flex;align-items:center;gap:10px;min-height:46px;border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;font-size:15px;font-weight:400;margin:0;cursor:pointer}
.radio-option:has(input:checked){border-color:var(--ink);background:var(--teal-soft)}
.radio-option input{accent-color:var(--ink);width:18px;height:18px;margin:0}
.survey-footer{padding-top:4px;display:grid;justify-items:center;gap:4px}
#pause-instead{margin-bottom:4px}

/* Toast */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);background:var(--navy);color:#fff;border-radius:var(--radius);padding:12px 16px;font-size:14px;font-weight:700;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.2s;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Footer */
.site-footer{padding:20px 16px calc(24px + env(safe-area-inset-bottom,0px));text-align:center;font-size:13px;color:var(--muted)}
.site-footer a{color:var(--ink);font-weight:700;text-decoration:none}
.site-footer a:hover{text-decoration:underline}

@keyframes appear{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.view{animation:none}.toast,.button{transition:none}}
@media (min-width:650px){
  .topbar{min-height:72px}
  .brand img{width:132px}
  .shell{padding-top:48px}
  .contract-card,.panel{padding:24px}
}

/* Pause & cancel flow (flow.js): one question per screen */
.flow-dialog{width:min(calc(100% - 24px),480px);padding:16px 20px 22px}
.flow-top{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.flow-top .icon-button{font-size:20px}
.flow-top .icon-button[hidden]{display:block!important;visibility:hidden}
.flow-progress{flex:1;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.flow-progress span{display:block;height:100%;width:0;background:var(--teal);border-radius:inherit;transition:width .25s ease}
.flow-body h2{font-size:24px;font-weight:800;line-height:1.2;letter-spacing:-.01em;margin:0 0 16px;outline:none}
.flow-lede{color:var(--ink);font-size:16px;line-height:1.5;margin:-6px 0 16px}
.flow-hint{color:var(--muted);font-size:14px;margin:-8px 0 14px}
.flow-note{color:var(--muted);font-size:13px;line-height:1.5;margin:0 0 16px}
.flow-note a{color:var(--ink);font-weight:700}
.flow-error{background:#fdecea;color:var(--danger);border-radius:var(--radius);padding:10px 12px;font-size:14px;font-weight:700;margin:0 0 14px}
.choice-list{display:grid;gap:10px;margin-bottom:8px}
.choice{display:flex;align-items:center;width:100%;min-height:54px;padding:14px 16px;border:1px solid #cfd8d7;border-radius:var(--radius);background:var(--paper);color:var(--ink);font-size:16px;font-weight:700;text-align:left;cursor:pointer;transition:border-color .12s,background .12s}
.choice:hover{border-color:var(--ink)}
.choice[aria-pressed="true"]{border-color:var(--ink);background:var(--teal-soft)}
.flow-route{display:block;margin:6px auto 0}
.flow-actions{display:grid;gap:10px;margin:4px 0 8px}
.compare{margin:0 0 14px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.compare div{display:grid;gap:2px;padding:12px 14px;border-top:1px solid var(--line)}
.compare div:first-child{border-top:0}
.compare dt{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.compare dd{margin:0;font-size:15px}
.facts{margin:0 0 16px;padding:0 0 0 20px;display:grid;gap:8px;font-size:15px;line-height:1.45}
.copy-box{margin:8px 0;border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;font-size:14px}
.copy-box summary{cursor:pointer;font-weight:700;padding:4px 0}
.copy-box p{color:var(--muted);margin:8px 0}
.copy-row{display:grid;grid-template-columns:1fr auto;gap:6px 8px;align-items:center;margin-bottom:10px}
.copy-row label{grid-column:1/-1;font-size:12px;margin:0;color:var(--muted)}
.copy-row input,.copy-row textarea{margin:0;min-height:42px;font-size:14px;padding:8px 10px}
.copy-row textarea{min-height:72px}
.copy-row .button{min-height:42px;padding:8px 14px;font-size:14px}
.flow-body > textarea{margin-bottom:14px}
.done-mark{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--teal);color:var(--ink);font-size:26px;font-weight:800;margin:4px 0 14px}
.flow-feedback{margin:6px 0 14px}
.flow-feedback-label{font-size:14px}
.flow-feedback textarea{margin-bottom:10px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:600px){
  .flow-dialog{width:100%;max-width:100%;height:100%;max-height:100%;margin:0;border-radius:0;padding:calc(12px + env(safe-area-inset-top,0px)) 16px calc(20px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.flow-progress span{transition:none}}