/* the client space's look, pages by area (31 Oct 2026): Home, Your plan and the frame. Loaded after
   space-look-base.css (the shared foundation); these rules refine the frame, the stage strip, Home at every stage and
   Your plan (its Markets table as a ranked chart, its Schedule, the acceptance panel, the partner's progress). */

/* ---- the frame: the stage under the wordmark with a small blue mark, the menu's rhythm, the identity foot ---- */
.sidebar{padding:30px 16px 22px}
.brandblock{padding:0 12px 24px}
nav a{transition:background .12s,color .12s}
nav a .icon{opacity:.92}
nav a.active .icon{opacity:1}
.nav-badge{font-variant-numeric:tabular-nums}
.nav-sub{margin-left:26px}
.identity{padding-top:18px;border-top:1px solid var(--line)}
.identity strong{display:block;line-height:1.25}
.identity small{line-height:1.3}
.signout:hover{color:var(--ink)}
.crumbs{letter-spacing:0}

/* ---- the stage strip: 40px rounds, the names beside, the current one blue with a soft halo, the done ones green with
   a tick; the line after a done step takes its green ---- */
.stage-strip{margin:4px 0 30px;max-width:1000px}
.stage-strip li{gap:14px}
.stage-strip li:not(:last-child)::after{background:var(--line-2);margin:0 20px}
.stage-strip li.done:not(:last-child)::after{background:#bfe0cc}
.ss-dot{width:40px;height:40px;font-size:15px;border:1px solid var(--line-2);background:#fff;color:var(--muted)}
.stage-strip li.now .ss-dot{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 0 0 4px var(--mist)}
.stage-strip li.done .ss-dot{background:var(--ok);border-color:#bfe0cc;color:var(--green)}

/* ---- Home, the cards shared by the stages: the main card, the side card, the task rows, the milestones ---- */
.home-grid{gap:24px}
.home-main>h2{font-size:24px;letter-spacing:-.55px;margin-bottom:10px}
.home-main>.sub{font-size:16px;max-width:640px;color:var(--muted);line-height:1.55}
.home-hero{display:flex;align-items:flex-start;gap:20px}
.home-hero>div{min-width:0;flex:1}
.calm-note{margin:22px 0;padding:14px 18px;font-size:15px;border-radius:10px}
.calm-note .dot{width:9px;height:9px}
.hw{display:flex;align-items:center;gap:14px;margin:18px 0 4px}
.hw-av{width:44px;height:44px;border-radius:50%;background:var(--mist);color:var(--blue-ink);font-weight:700;font-size:14px;display:grid;place-items:center;flex-shrink:0}
.hw-name{font-size:16px;font-weight:600;margin:0;line-height:1.3}
.hw-place{margin:2px 0 0;font-size:14.5px;color:var(--muted)}
.home-side .rule{margin:20px 0 16px}
.home-next .num-list{margin-top:18px;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.home-next .num-list li{align-items:flex-start;font-size:15.5px;line-height:1.5}
.home-next .num-list li::before{margin-top:-2px}
.segments{margin:18px 0 6px}
.task-n{font-size:15px;color:var(--ink-soft)}
.task-n .icon{width:18px;height:18px}
.task.locked .task-n{background:#fff;border:1px dashed var(--line-2)}
.task-text h3{font-size:17px}.task-text p{font-size:14.5px;line-height:1.45}
.task-final{margin-top:22px;padding:18px 20px}
.task-final.ready{box-shadow:inset 0 0 0 1px #c4d8ee}
.task-final.ready .task-n{background:#fff;border-color:#c4d8ee;color:var(--blue-ink)}
.task-final.locked .task-n{background:#fff;border:1px dashed var(--line-2)}
.home-foot{margin-top:20px;font-size:14px;line-height:1.5}
.home-side .num-list{margin-top:18px;gap:16px}
.num-list li::before{color:var(--ink-soft)}
/* the milestones vin/tr reaches: a thin line joins the rounds, hollow while they wait, a blue ring with a blue core for
   the one under way, green with a tick once done */
.ms-list{gap:20px;margin:20px 0}
.ms{position:relative;grid-template-columns:34px minmax(0,1fr);gap:14px}
.ms:not(:last-child)::before{content:'';position:absolute;left:16.5px;top:36px;bottom:-18px;width:1px;background:var(--line)}
.ms-dot{width:34px;height:34px;font-size:14px}
.ms.wait .ms-dot{background:#fff;border:1px dashed var(--line-2)}
.ms.now .ms-dot{background:#fff;border-color:transparent;box-shadow:inset 0 0 0 2px var(--blue)}
.ms.now .ms-dot::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--blue)}
.ms.done .ms-dot{background:var(--ok);border-color:#bfe0cc;color:var(--green)}
.ms-text p{font-size:14px;margin-top:2px;line-height:1.45}
.ms-bar{height:10px;margin:10px 0 6px}
.ms-launch{padding:18px 0;margin-bottom:16px}
.ms-launch strong{font-size:15.5px}.ms-launch p{font-size:15px;margin-top:2px}
.ms-pay{gap:6px;font-size:14px}

/* ---- Home once live: the alert, the three figure tiles, the latest interested importers, the markets in progress as
   bar rows with "reached / planned · %" ---- */
.home-alert{margin-bottom:22px;gap:20px}
.ha-text{padding-left:20px}
.home-figures{gap:20px;margin-bottom:24px;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)}
.hf{padding:22px 24px 20px}
.home-pair{gap:24px}
.hi-row{padding:14px 0;gap:14px;grid-template-columns:44px minmax(0,1fr) minmax(0,auto) 16px}
.hi-av{width:44px;height:44px;font-size:14px}
.hi-who strong{font-size:15.5px}.hi-what{font-size:15px;text-align:right}.hi-what small{text-align:right}
.hi-go{font-size:22px;color:var(--faint);text-align:right}
.hm-row{grid-template-columns:minmax(120px,1.1fr) minmax(90px,1.6fr) auto minmax(48px,auto);gap:14px;padding:14px 0;font-size:15px}
.hm-pct{justify-self:end}
.hm-bar{height:10px}
.hm-fig{font-size:13.5px;font-variant-numeric:tabular-nums}
.hm-pct{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.hm-when{text-align:right;font-size:14px}
.hm-tag{font-size:12px;padding:3px 9px}
.hm-more{margin:10px 0 6px}
.hl-foot strong{color:var(--ink)}

/* ---- Your plan: the facts, the overall progress, the panel ---- */
.plan-facts{gap:56px;margin:8px 0 28px}
.pf-end{padding-left:24px}
.plan-progress{padding:24px 28px;margin-bottom:24px}
.plan-progress .pp-left{max-width:680px}
.plan-progress .progress{margin-top:10px}
.plan-grid{grid-template-columns:minmax(0,1fr) 340px;gap:24px}
.panel-body{padding:22px 28px 26px}
.plan-panel,.plan-grid .stack>*{min-width:0}   /* the panel shrinks to its column; a wide table scrolls inside its wrap */
.pm-types{margin-bottom:20px}
.pm-tools{margin-bottom:18px}
/* the edit mode's tools as one quiet well (they drew a box inside a box) */
.pm-edit{margin-bottom:18px;padding:16px 18px;border:1px solid var(--line);background:var(--well)}
.pm-edit .market-tools,.pm-edit .market-hint{background:transparent;border:0;padding-left:0;padding-right:0}
.pm-edit .market-tools{padding-top:0;padding-bottom:0}
.pm-edit .market-hint{padding:10px 0 0;font-size:13.5px}
.pm-edit .mt-block label{font-size:14px;margin-bottom:8px}
/* the Markets table as a ranked chart (the founder, at 2000px: a spreadsheet stretched across the page): the number,
   the market and every figure sized to their content, the importers share bar taking the width that is left, so a
   wide screen draws a longer bar chart instead of spreading five figures apart. Scoped to the plan's panel; it overrides
   the foundation's fixed 18% / 220px share cell. */
.plan-panel .pm-table .pm-n{width:56px}
.plan-panel .pm-table th.pm-mk,.plan-panel .pm-table td.pm-mk{width:1%;min-width:190px;padding-right:28px}
.plan-panel .pm-table th.pm-imp,.plan-panel .pm-table td.pm-imp{width:1%;min-width:96px;padding-right:10px}
.plan-panel .pm-table th.pm-sharecell,.plan-panel .pm-table td.pm-sharecell{width:auto;min-width:140px;padding-left:4px;padding-right:28px}
.plan-panel .pm-share{max-width:none;height:10px;border-radius:5px}
.plan-panel .pm-share i{border-radius:5px}
.plan-panel .pm-table th.pm-ct,.plan-panel .pm-table td.pm-ct,.plan-panel .pm-table th.pm-du,.plan-panel .pm-table td.pm-du,.plan-panel .pm-table th.pm-st,.plan-panel .pm-table td.pm-st,.plan-panel .pm-table th.pm-ctl,.plan-panel .pm-table td.pm-ctl{width:1%}
.plan-panel .pm-table td.pm-du{color:var(--muted)}
.plan-panel .pm-table td.pm-st{padding-right:20px}
.plan-panel .pm-table td.pm-ctl{padding-left:8px}
.pm-table td.pm-mk strong{font-size:15px}
.pm-table .grip{font-size:16px;color:var(--faint)}
.pm-table .order-buttons button{height:34px;width:38px;min-width:38px;border-radius:7px}
.pm-foot{padding-top:16px;font-size:14px}
.pm-sticky{padding:16px 28px}
@media(max-width:1600px){.pm-sticky{padding-right:200px}}
/* the Schedule: a header over the label column ("#", "Market and state"), rows of 46px with the rank, the name, its
   lock and its state, the months 54px wide with the year above, 14px rounded bars, today in gold */
.timeline.sched{--label:350px;min-width:calc(var(--label) + var(--months) * 54px)}
.sched-head{display:flex;align-items:center;gap:10px;padding:0 16px;font-size:13.5px;font-weight:600;color:var(--muted)}
.sched-head .rank{width:28px;font-size:13.5px;color:var(--muted);flex-shrink:0}
.sched .yearhead{min-height:30px;background:#fff;border-bottom:0}
.sched .yearhead .track>span{padding-left:8px;font-weight:600}
.sched .monthhead{min-height:36px}
.sched .monthhead .track{font-size:13px}
.sched .trow{min-height:46px}
.sched-label{padding:5px 16px}
.sched-label .rank{color:var(--faint)}
.sched-label strong{font-size:15px;max-width:180px}
.sched-label .lock-mark{margin-left:auto;margin-right:2px;flex-shrink:0}
.sched-label .pill{margin-left:auto;height:24px;font-size:12.5px;padding:0 10px;flex-shrink:0}
.sched-label .lock-mark+.pill{margin-left:8px}
.sched .bar{height:14px;border-radius:7px;margin:0 3px}
.sched-key{padding:18px 4px 0;font-size:14.5px;gap:8px 24px}
.sched-key span{gap:8px}
.sched-key .k{width:12px;height:12px;border-radius:50%}
.sched-key .k.ramp{width:18px;border-radius:3px}
.sched-key .k-line{width:2px;height:16px}
.sched-note{font-size:13.5px;max-width:460px;text-align:right}
.plan-after{margin-top:18px;font-size:14px}
/* narrower windows: the months a little tighter so 14 of them fit without scrolling, the table's columns closer */
@media(max-width:1500px){.timeline.sched{--label:330px;min-width:calc(var(--label) + var(--months) * 46px)}}
@media(max-width:1400px){
  .timeline.sched{--label:300px;min-width:calc(var(--label) + var(--months) * 40px)}.sched-label strong{max-width:130px}
  .plan-grid{grid-template-columns:minmax(0,1fr) 320px}
  .panel-body{padding:20px 22px 24px}
  /* beside the acceptance panel the table has about 580px: closer columns, so nothing is cut */
  .plan-grid .pm-table th,.plan-grid .pm-table td{padding-left:10px;padding-right:10px}
  .plan-grid .pm-table .pm-n{width:44px}
  .plan-grid .pm-table th.pm-mk,.plan-grid .pm-table td.pm-mk{min-width:128px;padding-right:10px}
  .plan-grid .pm-table th.pm-imp,.plan-grid .pm-table td.pm-imp{min-width:64px;padding-right:6px}
  .plan-grid .pm-table th.pm-sharecell,.plan-grid .pm-table td.pm-sharecell{min-width:84px;padding-left:4px;padding-right:12px}
}
/* the alert keeps its button on its line (an older rule wrapped it under the text below 1300px) */
@media(max-width:1300px){.home-alert{flex-wrap:nowrap}.ha-act{width:auto;justify-content:flex-start}}

/* ---- the acceptance beside the list in the review: the offer as a quiet well with the price as its figure, what is
   left to confirm as two rows, the invoice details, the two boxes and the one ink button; it stays in view beside the
   long list ---- */
.accept-panel{padding:24px 26px;position:sticky;top:24px}
.accept-panel h2{font-size:22px;margin-bottom:16px}
.ap-offer{padding:16px 18px 14px;border-radius:10px;background:var(--well);border:1px solid var(--line)}
.ap-offer .ap-plan{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14.5px}
.ap-offer .ap-plan strong{font-size:17px;font-weight:700}
.ap-price{display:flex;align-items:baseline;gap:6px;margin:4px 0 0}
.ap-price b{font:800 32px/1.05 Archivo,Arial,sans-serif;letter-spacing:-1.2px;font-variant-numeric:tabular-nums}
.ap-price span{font-size:15px;color:var(--muted)}
.ap-offer p.small{margin:2px 0 0}
.ap-offer .ap-line{padding-top:12px;margin-top:12px;border-top:1px solid var(--line);font-size:15px;align-items:baseline}
.ap-offer .ap-line strong{font-weight:600}
.accept-panel .rule{margin:20px 0 16px}
.accept-panel h3{font-size:15.5px;margin:0 0 10px}
.ap-item{padding:12px 14px;gap:12px;font-size:15px;border-radius:10px;margin-bottom:8px}
.ap-item .icon{width:18px;height:18px}
.ap-item .ap-state{font-size:13.5px;font-weight:600}
.ap-item>span:last-child{color:var(--faint)}
.ap-link{padding:14px 0 0;font-size:15px}
.ap-link>span:nth-child(2){white-space:nowrap}
.ap-link .small{flex:1;min-width:0;max-width:none;text-align:right}
.accept-panel .checklist{gap:12px;margin-bottom:18px}
.accept-panel .full{height:48px;font-size:15.5px}
.accept-panel p.small{line-height:1.5}
.ap-state-line{margin:6px 0 14px}

/* ---- a free partner's plan (the Progress tab): the overall bar, the first emails month by month, the markets as bar
   rows with "reached / planned · %" ---- */
.panel-body .pp-overall,.panel-body .pp-months,.panel-body .pp-markets,.panel-body .pp-key{padding-left:0;padding-right:0;margin-left:0;margin-right:0}
.panel-body .pp-h{margin-left:0;margin-right:0}
.pp-bar{height:12px;border-radius:6px;margin-top:10px}
.pp-bar span{border-radius:6px}
.pp-h{margin:28px 0 12px;font-size:16px;font-weight:600}
.pp-h .small{font-weight:400}
.pp-months{height:190px;gap:8px}
.pp-v{font-size:13px;height:16px;font-variant-numeric:tabular-nums}
.pp-stack{max-width:52px;border-bottom-color:var(--line-2)}
.pp-stack i.sent{background:var(--bar)}.pp-stack i.plan{background:var(--bar-planned)}
.pp-col.now .pp-stack{box-shadow:0 3px 0 var(--gold)}
.pp-l{font-size:13px;height:30px;line-height:14px}
.pp-col.now .pp-l{color:#8a6928}
.pp-key{margin-top:12px;font-size:14px}
.pp-key i{width:14px;height:10px;border-radius:3px}
.pp-key i.sent{background:var(--bar)}.pp-key i.plan{background:var(--bar-planned)}.pp-key i.now{height:3px;background:var(--gold)}
.pp-mk{grid-template-columns:minmax(150px,1fr) minmax(120px,2fr) auto 52px 96px 110px;gap:16px;padding:12px 0;font-size:15px;border-bottom:1px solid var(--line)}
.pp-mk:last-child{border-bottom:0}
.pp-mk strong{font-weight:600}
.pp-mk .pp-bar{height:10px;margin:0;border-radius:5px}
.pp-fig{font-size:14px;font-variant-numeric:tabular-nums}.pp-fig b{font-size:15px}
.pp-pct{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.pp-int{color:var(--green);font-weight:600}