/* the client space's look, the shared foundation (31 Oct 2026): type, colour, cards, buttons, pills, tables, tabs.
   Loaded after space.css; the page files space-look-a.css (the frame, Home, Your plan) and space-look-b.css (Setup,
   Results, Billing, Account, the pages not open yet, the messenger, sign-in) come after it. The direction is in the
   scratchpad's design/DIRECTION.md: calm, premium and visual; bigger type than the old base, white cards on a warm
   light grey, one blue for action and progress, gold only for the today line and small accents. */

/* ---- tokens ---- */
:root{
  --ink:#1a2229;--navy:#1a2229;--ink-soft:#2b3a47;
  --muted:#5a6a79;--faint:#7c8b98;
  --line:#e2e7ec;--line-2:#cbd4dc;
  --bg:#f3f2ed;--surface:#fff;--well:#f6f7f8;
  --mist:#eaf1f8;--mist-2:#dde8f3;
  --blue:#2a62a3;--blue-ink:#1e4f86;
  --bar:#2f5f8f;--bar-track:#e5eaef;--bar-planned:#bcd4ec;--bar-done:#4f9f74;--bar-early:#8db6dc;
  --gold:#b08d3c;
  --green:#17664d;--ok:#e4f3ea;
  --amber:#85500c;--attn:#fff2dc;
  --err:#a13232;--errbg:#fceeee;
  --r-card:12px;--r-ctl:8px;
  --shadow-card:0 1px 2px rgba(26,34,41,.05),0 6px 20px rgba(26,34,41,.05);
  --shadow-pop:0 12px 32px rgba(26,34,41,.14),0 2px 6px rgba(26,34,41,.08);
  --focus:0 0 0 3px rgba(42,98,163,.28);
}
body{font-size:16px;line-height:1.5;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
small,.small{font-size:14px}
.muted{color:var(--muted)}
p{margin:0 0 14px}

/* ---- the frame: a 248px white menu, a 64px top bar, the content in a centred column (1360px, 1440px on wide screens),
   no zoom (the quick scaling of 31 Oct is replaced by this type scale) ---- */
.content,.modal{zoom:1}
.sidebar{width:248px;padding:28px 16px 20px;background:#fff;border-right:1px solid var(--line)}
/* a soft sky over the top of every page: cool mist fading into the warm ground, so the title and the first cards sit on
   a lighter area and the page has a top and a bottom */
.shell{margin-left:248px;position:relative;min-height:100vh}
.shell::before{content:'';position:absolute;left:0;right:0;top:0;height:360px;background:linear-gradient(180deg,rgba(42,98,163,.09),rgba(42,98,163,0));pointer-events:none}
.topbar,.content{position:relative}
.brand svg{width:98px}
.brandblock{padding:0 12px 26px}.brandblock small{font-size:11px;letter-spacing:2.6px;margin-top:10px;color:var(--muted);opacity:1}
/* the stage under the wordmark, after the brand's small gold square */
.stage-label{display:flex;align-items:center;gap:9px;padding:0 12px 20px;font-size:13.5px;font-weight:500;color:var(--muted)}
.stage-label::before{content:'';width:7px;height:7px;border-radius:1px;background:var(--gold);flex-shrink:0}
nav{gap:4px}
nav a{height:48px;font-size:16px;gap:14px;padding:0 14px;border-radius:10px;color:var(--ink);font-weight:500}
nav a .icon{width:22px;height:22px;stroke-width:1.7}
nav a:hover{background:var(--well)}
nav a.active,nav a.active:hover{background:var(--ink);color:#fff;font-weight:600}
nav a.nav-upcoming{color:#8a97a3;font-weight:400}nav a.nav-upcoming.active{background:var(--well);color:var(--ink)}
.nav-sub{margin:2px 0 10px 25px;padding-left:10px;border-left:1px solid var(--line)}
.nav-sub a{height:36px;font-size:14.5px;border-radius:8px;color:var(--muted);font-weight:400}
.nav-sub a.active,.nav-sub a.active:hover{background:var(--mist);color:var(--ink);font-weight:600}
.nav-badge{min-width:22px;height:22px;padding:0 7px;border-radius:11px;font-size:12.5px;font-weight:700;display:inline-grid;place-items:center;margin-left:auto}
.nav-lock .icon{width:15px;height:15px}
.identity{font-size:14px;padding:18px 12px 0}.identity .avatar{width:40px;height:40px;font-size:14px;background:var(--mist);color:var(--blue-ink);font-weight:700}
.identity strong{font-size:14.5px}.identity small{font-size:13px}
.signout{font-size:14px;margin-top:12px}
.topbar{height:64px;padding:0 max(40px,calc((100% - 1360px) / 2 + 40px));border-bottom:1px solid rgba(26,34,41,.07)}
.crumbs{font-size:15px}.crumbs a{color:var(--muted)}.crumbs span{color:#aab5bf}
.help-link{font-size:15px}.help-link .icon{width:20px;height:20px}
.content{max-width:1360px;padding:34px 40px 96px}

/* ---- the page head: a big Archivo title, its status pill beside it, one muted line under it ---- */
h1{font-size:38px;line-height:1.1;letter-spacing:-1.1px;font-weight:800}
.page-head{margin-bottom:26px}.page-head h1{font-size:38px}
.page-head .row{gap:14px}
/* a page about the winery itself (Home once live): its initials in a round beside the title */
.ph-id{display:flex;align-items:center;gap:18px}
.ph-av{width:60px;height:60px;border-radius:50%;background:var(--mist);color:var(--blue-ink);font-size:20px;font-weight:700;display:grid;place-items:center;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(42,98,163,.12)}
.ph-id .sub{margin-top:4px}
/* a card title with an icon in a soft round before it */
h2.h-ico,h2.b-title{display:flex;align-items:center;gap:12px}
.page-head .sub{font-size:17px;margin-top:8px;color:var(--muted)}
.page-head .pill{margin-left:0;height:28px;font-size:13.5px;padding:0 12px}
h2{font-size:20px;line-height:1.3;letter-spacing:-.35px;font-weight:700}
h3{font-size:16px;font-weight:600}
.card-head h2,.home-main h2,.home-side h2,.home-next h2,.home-list h2,.sd-card h2,.bl-card h2,.accept-panel h2,.ac-head h2,.plan-progress h2,.stage-columns .card h2{font-size:20px;letter-spacing:-.35px}
.home-main>h2,.home-side>h2:first-child,.accept-panel h2,.ac-head h2{font-size:22px;letter-spacing:-.45px}
.hf h2{font-size:15.5px;font-weight:600;letter-spacing:-.1px;color:var(--ink)}

/* ---- cards: white, 12px corners, a hairline and a faint shadow, 24 to 28px inside ---- */
.card{border-radius:var(--r-card);border:1px solid var(--line);box-shadow:var(--shadow-card);background:var(--surface)}
.pad{padding:26px 28px}
.card-head{padding:22px 28px;border-bottom:1px solid var(--line)}
.card-head .sub{margin-top:4px}
.rule{border-top:1px solid var(--line);margin:20px 0}
.hl-body{padding:4px 28px}.hl-foot{padding:14px 28px;font-size:14px}
.home-list .card-head{padding:22px 28px 16px}
/* the icon rounds, one family: a 36px round beside a title or a figure (mist; green, amber or grey variants), and a
   52px square for a page's main card or a page not open yet */
.ico,.b-ico,.hf-ico{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--mist);color:var(--blue-ink);flex-shrink:0}
.ico .icon,.b-ico .icon,.hf-ico .icon{width:18px;height:18px}
.ico.ok,.b-ico.ok{background:var(--ok);color:var(--green)}.ico.attn,.b-ico.attn{background:var(--attn);color:var(--amber)}.ico.well,.b-ico.well{background:var(--well);color:var(--muted)}
.ico-sq,.home-ico,.upcoming-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;border:0;background:var(--mist);color:var(--blue-ink);flex-shrink:0}
.ico-sq .icon,.home-ico .icon,.upcoming-icon .icon{width:24px;height:24px}
/* a ring of progress with its percentage inside (inline SVG; the dash from the share) */
.ring{width:72px;height:72px;flex-shrink:0}
.ring-track{fill:none;stroke:var(--bar-track);stroke-width:7}
.ring-fill{fill:none;stroke:var(--bar);stroke-width:7;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
.ring text{font:800 16px Archivo,Arial,sans-serif;fill:var(--ink);letter-spacing:-.6px}
.hf-main{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:2px}
.hf-main>div{min-width:0;flex:1}

/* ---- buttons, links, fields: 44px controls with 8px corners; one ink button a page; a 2px blue focus ring ---- */
button{height:44px;padding:0 20px;border:1px solid var(--line-2);border-radius:var(--r-ctl);font-size:15px;font-weight:600;color:var(--ink);background:#fff;transition:background .12s,border-color .12s,box-shadow .12s}
button:hover{background:var(--well);border-color:#b7c3cd}
.primary,.button-link.primary,.task-act .button-link.primary{background:var(--ink);border-color:var(--ink);color:#fff}
.primary:hover,.button-link.primary:hover{background:#2c3a45;border-color:#2c3a45}
button:disabled,button:disabled:hover{opacity:1;background:#edf0f2;border-color:#e3e8eb;color:#8f9ca5;cursor:default}
.button-link{min-height:44px;padding:0 20px;border:1px solid var(--line-2);border-radius:var(--r-ctl);font-size:15px;font-weight:600;color:var(--ink);margin-top:0}
.button-link:hover{background:var(--well);text-decoration:none;border-color:#b7c3cd}
.linkbutton,.linkbutton:hover{border:0;background:none;color:var(--blue);font-weight:500;font-size:15px;padding:0}
a{color:var(--blue)}
button.link{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
input,select,textarea{height:44px;border:1px solid var(--line-2);border-radius:var(--r-ctl);padding:0 14px;font-size:15px;color:var(--ink);background:#fff}
input:focus,select:focus,textarea:focus,input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--blue);box-shadow:var(--focus);outline:none}
input::placeholder,textarea::placeholder{color:#9aa6b1}
input[type=checkbox],input[type=radio]{width:18px;height:18px;accent-color:var(--blue)}
.pm-search{height:44px;border-color:var(--line-2);border-radius:var(--r-ctl)}
.pm-search:focus-within{outline:none;border-color:var(--blue);box-shadow:var(--focus)}
.pm-search input{font-size:15px}
.checklist label{font-size:14.5px;line-height:1.45}
.draft-text{border-radius:var(--r-ctl);font-size:16px}
.editor-label{font-size:14px;font-weight:600;color:var(--ink)}
.field-help{font-size:13px}.field-help code{font-size:13px}
.modal textarea{border-radius:var(--r-ctl);font-size:15px}.modal label.block{font-size:14px}

/* ---- pills, badges, chips: a status is a word with a dot, never a colour alone ---- */
.pill{height:26px;padding:0 11px;font-size:13px;font-weight:600;border-radius:13px;background:var(--ok);color:var(--green);letter-spacing:0}
.pill.amber{background:var(--attn);color:var(--amber)}.pill.blue{background:var(--mist-2);color:var(--blue-ink)}.pill.grey{background:#eceff2;color:#56646f}
.pill .dot{width:7px;height:7px}
.later-pill{font-size:13.5px;color:var(--muted)}
.type-chip{height:34px;padding:0 14px;font-size:14px;font-weight:500;border-radius:8px;border-color:#c4d3df;background:var(--mist);color:var(--blue-ink)}
.hm-tag{font-size:12px;font-weight:600}

/* ---- tables: 15px rows 52px tall, muted sentence-case headings, tabular figures, a faint hover ---- */
table{font-size:15px}
th{font-size:13.5px;font-weight:600;color:var(--muted);background:#fff;text-transform:none;letter-spacing:0}
th,td{padding:14px 20px}
td{height:52px}
.num,td.num,th.num{font-variant-numeric:tabular-nums}
.pm-table tbody tr:hover td,.ri-table tbody tr:hover td,.bl-invoices tbody tr:hover td{background:#fafbfc}
.pm-table{font-size:15px}
.pm-table th{font-size:13.5px;font-weight:600;background:#fafbfc;padding:12px 16px;border-bottom:1px solid var(--line)}
.pm-table td{padding:0 16px;height:52px}
.pm-table th,.pm-table td{white-space:nowrap}
.pm-table .pm-n{width:60px;color:var(--faint);font-size:14px}
.pm-table td strong{font-weight:600}
/* the market list's importers as a bar against the largest market (space.js marketsTab), so the row reads as a chart
   on a wide screen instead of five figures spread apart */
.pm-table th.pm-imp,.pm-table td.pm-imp{width:110px;padding-right:8px}
.pm-table th.pm-sharecell,.pm-table td.pm-sharecell{width:18%;min-width:110px;padding-left:4px}
.pm-share{display:block;width:100%;min-width:90px;max-width:220px;height:8px;border-radius:4px;background:var(--bar-track);overflow:hidden}
.pm-share i{display:block;height:100%;border-radius:4px;background:var(--bar)}
.pm-table-wrap{border-radius:10px;border-color:var(--line)}
.pm-foot{font-size:14px}.pm-note{font-size:13px}
.ri-table td small{font-size:13.5px}
.mk-table th,.mk-table td{padding:13px 20px}
.mk-group td{font-size:13px;height:auto;padding:7px 20px;background:var(--well);color:var(--muted)}
.bl-invoices table td,.bl-invoices table th{font-size:15px;padding:15px 24px}
.show-all,.pagination{font-size:14px;padding:14px 24px}
.nothing{font-size:15px;padding:28px 24px}

/* ---- tabs: connected tabs over a panel; the setup pair as one framed switch; the Draft / Example segment ---- */
.panel-tabs{padding:8px 10px 0;background:var(--well);border-radius:var(--r-card) var(--r-card) 0 0}
.panel-tabs button{height:46px;font-size:16px;font-weight:500;padding:0 24px;border-radius:10px 10px 0 0}
.panel-tabs button.on{font-weight:600}
.setup-tabs{border-radius:10px;box-shadow:var(--shadow-card)}
.setup-tabs a{height:48px;font-size:16px;padding:0 26px;font-weight:500}
.setup-tabs a.on{font-weight:600}
.seg{border-radius:var(--r-ctl)}
.seg button{height:40px;font-size:14.5px;padding:0 18px}

/* ---- progress bars and charts: one blue for what runs, pale blue for what is planned, green for what is done,
   gold for today; 10 to 14px thick, rounded ---- */
.progress{height:12px;border-radius:6px;background:var(--bar-track)}
.progress span{background:var(--bar);border-radius:6px}
.hm-bar,.mk-bar,.hbar,.pp-bar{height:10px;border-radius:5px;background:var(--bar-track)}
.hm-bar span,.mk-bar i,.hbar i,.pp-bar span{background:var(--bar);border-radius:5px}
.mk-bar.done i{background:var(--bar-done)}.mk-bar.early i{background:var(--bar-early)}
.ms-bar{height:10px;border-radius:5px;background:var(--bar-track)}.ms-bar span{background:var(--bar-done)}
.segments{gap:8px}.segments span{height:8px;border-radius:4px;background:var(--bar-track)}.segments span.complete{background:var(--bar-done)}
.sched .bar{height:14px;border-radius:7px;background:linear-gradient(180deg,#3a6c9c,#2a5584)}
.sched .bar.done{background:linear-gradient(180deg,#5aa97e,#46956b)}.sched .bar.future{background:linear-gradient(180deg,#c6dbf0,#b3cde7)}
.sched .bar.ramp{background:linear-gradient(90deg,rgba(47,95,143,.45),var(--bar) 45%)}
.sched .bar.future.ramp{background:linear-gradient(90deg,rgba(188,212,236,.45),var(--bar-planned) 45%)}
.sched .bar.done.ramp{background:linear-gradient(90deg,rgba(90,169,126,.45),#4f9f74 45%)}
.sched .trow{min-height:46px;border-bottom:1px solid #eef1f4}
.sched .track{background:repeating-linear-gradient(to right,#edf0f3 0,#edf0f3 1px,transparent 1px,transparent calc(100% / var(--months)))}
/* the time passed shaded to the left of today's gold line, and "Today · Oct 31" on a small gold chip at the top */
.sched .track.today::before{content:'';position:absolute;top:0;bottom:0;left:0;width:var(--today);background:rgba(26,34,41,.035);pointer-events:none}
.sched .track.today:after{border-left:2px solid var(--gold)}
.sched .monthhead .track,.sched .yearhead .track{overflow:visible}
.sched-today{position:absolute;left:var(--today);top:50%;transform:translate(-50%,-50%);height:22px;padding:0 9px;border-radius:11px;background:var(--gold);color:#fff;font-size:12px;font-weight:700;white-space:nowrap;line-height:22px;z-index:2}
.sched-label{font-size:15px;gap:10px}.sched-label .rank{width:28px;font-size:13px;color:var(--faint)}
.sched-label strong{font-weight:600;max-width:190px}
.sched-label .pill{font-size:12.5px;height:24px;padding:0 10px}
.monthhead{min-height:34px;background:var(--well)}.monthhead .track{font-size:13px;color:var(--muted);font-weight:500}
.yearhead{min-height:28px;font-size:13px;color:var(--muted)}
.sched-key{font-size:14px;padding-top:16px}
.sched-key .k{width:14px;height:14px;background:var(--bar)}.sched-key .k.done{background:var(--bar-done)}.sched-key .k.future{background:var(--bar-planned)}
.sched-key .k.ramp{background:linear-gradient(90deg,rgba(47,95,143,.35),var(--bar))}
.sched-note{font-size:13.5px}
.k,.mk-group .k{background:var(--bar)}.k.done,.mk-group .k.done{background:var(--bar-done)}.k.future{background:var(--bar-planned)}

/* ---- figures: Archivo 800, tabular, 44px in a tile, 34px in the plan's facts, 40px for a price; a figure not
   known yet is a light dash with a word beside it ---- */
.hf{padding:22px 24px;min-height:156px;gap:8px}
.hf .row.between{align-items:flex-start}
.hf-big strong{font:800 44px/1 Archivo,Arial,sans-serif;letter-spacing:-1.8px;font-variant-numeric:tabular-nums}
.hf-big strong.hf-na{font-size:22px;letter-spacing:-.3px;font-weight:600;color:var(--muted)}
.hf-big strong.muted{color:#aab5bf}
.hf-big span{font-size:15px;color:var(--muted)}
.hf-line{font-size:14px}
.hf-of{font-size:14.5px;color:var(--muted);margin:2px 0 0}
.hf>a.small{font-size:14.5px;font-weight:500}
.results-figures{gap:20px;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr)}
.home-figures{gap:20px;margin-bottom:24px}
.pf strong{font:800 34px/1.05 Archivo,Arial,sans-serif;letter-spacing:-1.2px;font-variant-numeric:tabular-nums}
.pf span{font-size:14.5px}
.pf-end{border-left:3px solid var(--gold);padding-left:24px}.pf-end strong{font-size:22px;letter-spacing:-.4px}
.plan-facts{gap:52px;margin:6px 0 26px}
.bl-price{font:800 40px/1.05 Archivo,Arial,sans-serif;letter-spacing:-1.6px;font-variant-numeric:tabular-nums}
.bl-price small{font-size:16px}
.price{font-size:32px;font-weight:800;letter-spacing:-1px}
.plan-progress{padding:22px 28px}
.plan-progress .hf-big strong{font-size:40px}
.step-n{font-size:16px}.step-n span{font-size:13px}
.step-bar .row{font-size:14.5px}
.count-defs{font-size:14px}
.mk-count{font-size:14.5px}
.pp-overall strong{font-size:16px}

/* ---- task rows, milestones, lists ---- */
.task{padding:22px 0;gap:18px}
.task-n{width:44px;height:44px;background:var(--well);border:1px solid var(--line);font-size:15px}
.task.done .task-n{background:var(--ok);border-color:#cfe6da;color:var(--green)}
.task-text h3{font-size:17px;font-weight:600;margin-bottom:4px}.task-text p{font-size:14.5px}
.task-final{padding:18px 20px;border-radius:10px;background:var(--well)}
.task-final h3{font-size:17px}.task-final p{font-size:14.5px}
.task-final.ready{background:var(--mist)}
.task-act .button-link,.task-act button{min-width:176px}
.num-list li{font-size:15.5px}.num-list li::before{width:32px;height:32px;background:var(--well);border:1px solid var(--line);font-size:13.5px}
.ms-dot{width:32px;height:32px;background:var(--well);border:1px solid var(--line);font-size:14px}
.ms.done .ms-dot{background:var(--ok);border-color:#cfe6da;color:var(--green)}
.ms.now .ms-dot{background:var(--mist);box-shadow:inset 0 0 0 2px var(--blue);border-color:transparent}
.ms-text strong{font-size:15.5px}.ms-text p{font-size:14px}
.ms-launch p{font-size:15px}
.stage-strip{margin:4px 0 30px}
.ss-dot{width:38px;height:38px;font-size:14.5px;border-color:var(--line-2)}
.stage-strip li.now .ss-dot{background:var(--blue);border-color:var(--blue)}
.ss-text strong{font-size:15.5px}.ss-text small{font-size:13.5px}
.hi-row{padding:14px 0;gap:14px}.hi-av{width:44px;height:44px;background:var(--mist);color:var(--blue-ink);font-weight:700;font-size:14px}
.hi-who strong,.hi-what{font-size:15px}.hi-who small,.hi-what small{font-size:13.5px}
.hm-row{padding:13px 0;font-size:15px}.hm-fig{font-size:13.5px}.hm-pct{font-size:15px}
.ac-kv{font-size:15px}.ac-kv dt,.ac-kv dd{padding:14px 0}
.sd-kv{font-size:15px}.sd-kv dt,.sd-kv dd{padding:12px 0}
.bl-kv{font-size:15px;gap:10px 16px;padding:16px 0}
.kv{font-size:14.5px}
.bl-addr{font-size:15.5px}.bl-plan{font-size:16px}
.eq-group h3{font-size:14.5px;color:var(--muted);font-weight:600}
.eq-item{font-size:15px;padding:11px 12px;border-radius:8px}.eq-t small{font-size:13px}
.eq-item.on{background:var(--mist);box-shadow:inset 3px 0 0 var(--blue)}
.er-head h2{font-size:22px}
.er-body .email-body{font-size:16px;line-height:1.65}
.email-body p{margin-bottom:18px}
.personalized{color:var(--blue);background:var(--mist);padding:0 3px;border-radius:4px}
.sd-radio{padding:13px 16px;font-size:15.5px;border-radius:10px}
.sd-radio.on{background:var(--mist);border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.sd-fields label{font-size:15px}
.sd-preview{background:var(--well);border:1px solid var(--line);font-size:15px;padding:18px 20px;border-radius:10px}
.sd-final{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px 14px;align-items:start;border-radius:var(--r-card)}
.sd-final>div{grid-column:2}.sd-final>button,.sd-final>.button-link{grid-column:2;justify-self:start;margin:0}
.sd-final strong{font-size:16px}.sd-final p{font-size:14.5px}
.sp-head dt{font-size:14px}

/* ---- alerts and notes ---- */
.home-alert{padding:18px 22px;border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.home-alert.attn{background:#fff8ec;border-color:#eed9b4}
.ha-ico{width:44px;height:44px}
.ha-text strong{font-size:16.5px}.ha-text p{font-size:14.5px}
.calm-note{font-size:15px;padding:14px 18px;border-radius:10px}
.notice{font-size:14.5px;border-radius:10px;background:var(--mist);border-color:#d6e3ef;color:var(--blue-ink)}
.stage-note{font-size:15px;border-radius:10px;padding:16px 20px;background:#fff;box-shadow:var(--shadow-card)}
.home-foot{font-size:14px}
.home-calm{font-size:15px;color:var(--green);margin:-4px 0 22px}
.plan-after{font-size:14.5px}
.availability-note{font-size:14.5px;background:var(--mist);border:0;border-radius:10px;padding:16px 18px;margin:22px 0 18px}
.availability-note p{margin-top:4px;color:var(--blue-ink)}
.support{font-size:14.5px}

/* ---- empty and early states: intentional, never a blank: an icon in a soft round, one line, a quiet reason ---- */
.home-empty{padding:34px 16px}
.he-ico{width:60px;height:60px;border:1px dashed var(--line-2);background:var(--well);color:var(--muted)}
.home-empty p strong{font-size:16px}
.upcoming-card{padding:28px}
.upcoming-icon{margin-bottom:20px}

/* ---- pop-ups, windows, toast ---- */
.qtip{border-radius:8px;font-size:13.5px;padding:12px 14px;box-shadow:var(--shadow-pop)}
.qhelp{width:18px;height:18px;font-size:11px;border-color:#b7c3cd}
.modal{border-radius:14px;padding:32px;box-shadow:var(--shadow-pop);border-color:transparent}
.modal h2{font-size:24px;letter-spacing:-.5px}
.modal-backdrop{background:rgba(17,33,44,.46)}
.toast{border-radius:10px;font-size:14.5px;padding:14px 22px;box-shadow:var(--shadow-pop)}

/* ---- Your plan's panel ---- */
.pm-types{font-size:15px;margin-bottom:18px}
.pm-tools{gap:12px;margin-bottom:16px}
.pm-edit{border-radius:10px}
.pm-sticky,.pm-confirm{padding:16px 28px;font-size:15px;border-radius:0 0 var(--r-card) var(--r-card)}
.pm-confirm .muted{font-size:14.5px}
.panel-body{padding:22px 28px 24px}
.accept-panel .ap-row{font-size:15.5px}.ap-item{font-size:14.5px;padding:12px 14px;border-radius:10px}
.ap-item .ap-state{font-size:13.5px}
.accept-panel h3{font-size:15.5px}
.accept-panel .full{margin-top:4px}

/* ---- the sign-in pages share the tokens; their card is in space-look-b.css ---- */
.login{border-radius:var(--r-card);box-shadow:var(--shadow-card)}

@media(min-width:1760px){
  .content{max-width:1440px}
  .topbar{padding:0 max(40px,calc((100% - 1440px) / 2 + 40px))}
  h1,.page-head h1{font-size:42px}
}
@media(max-width:1400px){
  .content{padding:30px 32px 80px}
  .topbar{padding:0 32px}
}
/* beside the acceptance panel the market table has about 580px: the importers bar goes, so nothing scrolls */
@media(max-width:1500px){.plan-grid .pm-table th.pm-sharecell,.plan-grid .pm-table td.pm-sharecell{display:none}.plan-grid .pm-table th.pm-mk,.plan-grid .pm-table td.pm-mk{width:auto}}