/* GENERATED by Scripts/sync_design_system.py from PageSoar's frontdoor/door.css (source sha256 1f6301e30c37b5df), theme: Nowlark (dark and orange).
   DO NOT EDIT. The design system is PageSoar's; Nowlark differs only by the theme in that script, and
   tests/test_the_design_system_is_pagesoars.py fails if this file is not what the script produces. */
/* ==========================================================================
   door.css — the front door's own pages: sign-in, two-step, account, the
   workspace chooser and the platform admin console.

   EVERY VALUE IS A TOKEN. Colours, radii, shadows, materials, type, spacing and
   timing all come from ui/css/00-tokens.css and ui/css/01-glass.css, served to
   these pages unchanged as /_fd/css/tokens.css and /_fd/css/glass.css, so the
   sign-in screen and the product are one design system. The only tokens defined
   here are the widths this layout needs and the app has no use for, and the one
   height every field and select shares.
   ========================================================================== */
:root{
--door-auth-w:420px;     /* the sign-in card */
--door-shell-w:1000px;   /* the top bar and the footer of every signed-in page, and the widest page under them */
--door-col-w:var(--door-shell-w); /* the page's own column: the shell's width, or a reading width (queue 272) */
--door-field-h:calc(var(--ctl-h) + var(--sp-2));  /* every text field and select */
--door-area-h:calc(var(--door-field-h) * 2.5);  /* a textarea shows several lines, never one */
--door-setting-w:28rem;  /* a setting's control in a panel foot */
--door-panel-w:calc(var(--measure-em) + 2 * var(--sp-6)); /* a panel: its prose at a readable measure, and its padding */
--door-head-text-min:18rem; /* a page head's title and lede, before its buttons drop under them */
--door-row-text-min:9rem;   /* a workspace row's name and meta, before Manage and Open drop under them */
/* How far below the window's top a linked section or a focused control must stop, so the sticky top bar
   never covers it (Vercel Web Interface Guidelines, anchored headings and unobscured focus): the bar's
   inset, its field-high row and its inner space, and a step of air. */
--door-bar-clear:calc(var(--sp-3) + var(--door-field-h) + 2 * var(--sp-2) + var(--sp-4));
}

html,body{min-height:100%}
html{scroll-padding-top:var(--door-bar-clear)}
/* THE INTERFACE MECHANICS (Vercel Web Interface Guidelines, adopted 2026-09-30, .claude/commands/
   web-interface-audit.md): no double-tap zoom delay on a control, a tap draws the control's own pressed
   state rather than the platform's grey flash, and figures that are compared line up digit by digit. */
a,button,select,input,label,summary{touch-action:manipulation}
html{-webkit-tap-highlight-color:transparent}
.tbl td,.kv dd,.pl-stage b,.wsrow-meta{font-variant-numeric:tabular-nums}
/* the skip link: off screen until a keyboard reaches it, first thing on every page */
.skip{position:absolute;left:var(--sp-3);top:calc(var(--sp-9) * -2);z-index:var(--z-skip);padding:var(--sp-2) var(--sp-4);
  border-radius:var(--r);background:var(--glass-solid);color:var(--ink);box-shadow:var(--sh-2);text-decoration:none}
.skip:focus{top:var(--sp-3)}
body{margin:0;font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-base);color:var(--ink);
  background:var(--page);-webkit-font-smoothing:antialiased}
html[data-theme="glass"] body{background:var(--ambient),var(--page);background-attachment:fixed}

/* ── the frame ───────────────────────────────────────────────────────────── */
/* ONE COLUMN FOR EVERY SIGNED-IN PAGE, and the top bar is exactly as wide, so every
   page's edges line up under it (tests/js/test_the_sign_in_pages_are_consistent.js). */
.shell{max-width:var(--door-col-w);margin:0 auto;padding:var(--sp-6) var(--sp-5) var(--sp-9)}
.shell.auth{max-width:none;min-height:calc(100vh - 2 * var(--sp-9));display:flex;align-items:center;justify-content:center;padding:var(--sp-5)}

.glass{background:var(--glass-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:var(--bw) solid var(--glass-edge);box-shadow:var(--sh-2)}
.card{background:var(--surface);border:var(--bw) solid var(--glass-edge);border-radius:var(--r-lg);
  padding:var(--sp-6);margin:0 0 var(--sp-5);box-shadow:var(--sh-1)}
.card.glass{background:var(--glass-strong)}
.auth-card{width:100%;max-width:var(--door-auth-w);padding:var(--sp-7) var(--sp-7) var(--sp-6);border-radius:var(--r-panel);
  box-shadow:var(--sh-3);margin:0}

.topbar{position:sticky;top:var(--sp-3);z-index:var(--z-chrome);display:flex;align-items:center;gap:var(--sp-4);
  margin:var(--sp-3) auto 0;max-width:calc(var(--door-shell-w) - 2 * var(--sp-5));
  padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);border-radius:var(--r-pill);box-shadow:var(--sh-float)}
.topright{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto}
.brand{display:flex;align-items:center;gap:var(--sp-2);color:var(--ink);text-decoration:none;font-weight:var(--fw-semibold);
  font-size:var(--fs-lg)}
.avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--sp-7);height:var(--sp-7);
  border-radius:50%;background:var(--brand-l);color:var(--brand-d);font-size:var(--fs-xs);font-weight:var(--fw-bold)}

/* ── the page: a head, then panels ───────────────────────────────────────── */
.pagehead{margin:var(--sp-6) 0 var(--sp-5)}
.pagehead-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
/* THE TEXT KEEPS ITS WIDTH AND THE BUTTONS WRAP, not the other way round. flex:1 is a basis of 0,
   so the row never wrapped and a phone crushed the lede to one word a line beside the buttons
   (the owner's iPhone, /workspaces, 2026-09-29). Same for a workspace row's name and meta. */
.pagehead-t{min-width:0;flex:1 1 var(--door-head-text-min)}
.pagehead h1{margin:0}
.pagehead .lede{margin:var(--sp-2) 0 0}
.pagehead .lede .pill{margin-right:var(--sp-1)}
.pagehead-a{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.pagehead-a .btn,.wsrow-a .btn{white-space:nowrap}
.pagehead-a form{margin:0}
.crumb{display:inline-block;margin:0 0 var(--sp-2);color:var(--ink3);text-decoration:none;font-size:var(--fs-sm);
  font-weight:var(--fw-semibold)}
.crumb:hover{color:var(--ink)}
.panels{display:block;margin:0}
/* THE PAGE HUGS ITS PROSE (queue 272). Across the 1000px shell a panel's description ran ~130 characters a line
   and its body ~121 (Impeccable line-length, 68 findings over the door pages at 1440). Capping the paragraphs left
   the panels mostly air (test_every_door_page_is_modern.js, 44% fill), and narrowing the panels alone broke the
   page's one left and one right edge under a top bar as wide as the page (test_the_sign_in_pages_are_consistent.js).
   So the column itself narrows: a page of prose sets its column to a panel's reading width, centred under the top
   bar. The bar and the footer keep the 1000px frame, so the account menu stays at the top right (the owner,
   2026-09-19; narrowing the bar with the column put it at 878px of 1280, test_the_account_menu.js), and the owner
   chose the wide bar over the narrow one (2026-10-16). A page that needs the room keeps the 1000px column: the
   workspace list (rows, not prose: narrowed, a longer label moved the pill) and a split of two panels side by side.
   On those the panel heads and the page head's title read at the same narrow width. */
:root:has(.shell:not(.auth)):not(:has(.wslist,.split)){--door-col-w:calc(var(--door-panel-w) + 2 * var(--sp-5))}
:root:has(.wslist,.split) :is(.panel-head,.pagehead-t){max-width:var(--door-panel-w)}
.panel{background:var(--glass-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:var(--bw) solid var(--glass-edge);border-radius:var(--r-lg);box-shadow:var(--sh-1);margin:0 0 var(--sp-5);
  padding:0;list-style:none}
.panel-head{padding:var(--sp-5) var(--sp-6) 0}
.panel-head h2{margin:0}
/* A panel's description and a field's hint keep a reading measure, also when they span the whole panel (board, item 461:
   81 characters a line). */
.panel-head p{margin:var(--sp-1) 0 0;color:var(--ink3);font-size:var(--fs-sm);max-width:var(--measure-md)}
.panel-body{padding:var(--sp-4) var(--sp-6) var(--sp-5)}
.panel-body>:first-child{margin-top:0}
.panel-body>:last-child{margin-bottom:0}
.panel-body form{margin:0}
.panel-foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-2);flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-6);border-top:var(--bw) solid var(--line2);background:var(--tint);
  border-radius:0 0 var(--r-lg) var(--r-lg)}
.panel-foot form{margin:0;display:flex;gap:var(--sp-2);flex-wrap:wrap}
/* A setting saved from a panel's foot: the control and its Save stack on the left at one readable width, never a
   shrink-wrapped form pushed to the right edge. One class for every such form so they cannot drift apart. */
.panel-foot:has(>form.setting){justify-content:flex-start}
.panel-foot form.setting{flex:1 1 100%;flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
.panel-foot form.setting :is(.field,.lbl){width:100%;max-width:var(--door-setting-w)}
.panel-foot form.setting .lbl{margin:0}
.panel-foot>[data-passkey-scope]{flex:1 1 100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-1) var(--sp-3);align-items:end}
.panel-foot>[data-passkey-scope]>:is(label,[data-passkey-note],[data-passkey-unsupported]){grid-column:1/-1}
.panel-foot>[data-passkey-scope] .btn{margin-top:0}
@media (max-width:560px){.panel-foot>[data-passkey-scope]{grid-template-columns:1fr}}
.panel.danger{border-color:var(--bad-line)}
.panel.danger .panel-head h2{color:var(--bad-ink)}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5);align-items:start}
.split .panel{margin:0}
.btnrow{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;margin:0}
.btnrow.end{justify-content:flex-end}
h3.sub{font-size:var(--fs-body);margin:var(--sp-5) 0 var(--sp-3)}
.addform{border-top:var(--bw) solid var(--line2);margin-top:var(--sp-4)}
.addform .btnrow,form>.fields+.btnrow{margin-top:var(--sp-4)}
.statusline+.addform{margin-top:var(--sp-5)}
.addform>.fields.top{margin-top:var(--sp-5)}
/* A one-column group (a value to copy) between two-column groups keeps the row rhythm, and every grid keeps
   fields of one width (test_the_sign_in_pages_are_consistent.js). */
.fields.one{grid-template-columns:minmax(0,1fr)}
.fields.one+.fields,.fields+.fields.one{margin-top:var(--sp-4)}
/* THE PILL LEADS THE SENTENCE'S FIRST LINE, not centred beside a paragraph with a column of air under and
   over it (the Customer emails panel, 2026-09-30); the text wraps under the pill like prose. */
.statusline{margin:0}
.statusline>.pill{margin-right:var(--sp-2);vertical-align:baseline}
/* A status that can run past one line keeps its wrapped lines under the first word, not under the pill. */
.statusline.row{display:flex;gap:var(--sp-2);align-items:first baseline}
.statusline.row>.pill{margin-right:0;flex:none}

/* ── fields: two to a row, every control one height ─────────────────────── */
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4) var(--sp-5)}
.fields.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.fields.one{grid-template-columns:minmax(0,1fr)}
.fields .gap{display:block}
.fld .lbl{margin-top:0}
.fld.wide{grid-column:1 / -1}

/* ── choices: radio cards ───────────────────────────────────────────────── */
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.choice{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-4);border:var(--bw) solid var(--control-line);
  border-radius:var(--r);background:var(--surface);cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.choice:hover{border-color:var(--hover-line)}
.choice:has(input:checked){border-color:var(--ring);background:var(--sel)}
.choice:has(input:focus-visible){box-shadow:0 0 0 var(--ring-halo) var(--sel)}
.choice input{margin:var(--sp-05) 0 0}
.choice-t{display:flex;flex-direction:column;gap:var(--sp-1)}
.choice-t span{color:var(--ink3);font-size:var(--fs-sm)}

/* ── the workspace list: one row for everybody ──────────────────────────── */
.wslist{margin:0 0 var(--sp-5)}
.wsrow{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) var(--sp-6);border-top:var(--bw) solid var(--line2)}
.wsrow:first-child{border-top:0}
.wsrow.current{background:var(--tint)}
.wsmark{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--sp-8);height:var(--sp-8);
  border-radius:var(--r);background:var(--brand-l);color:var(--brand-d);font-weight:var(--fw-bold)}
.wsrow-t{flex:1 1 var(--door-row-text-min);min-width:0}
.wsrow-name{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;font-size:var(--fs-lg)}
.wsrow-meta{color:var(--ink3);font-size:var(--fs-sm);margin-top:var(--sp-05)}
.wsrow-a{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin-left:auto}
.wsrow-a form{margin:0}
/* THE WHOLE ROW OPENS THE WORKSPACE (the picker, 2026-09-30): the Open button's hit area is stretched
   over the row, Manage sits above it, and the row answers the pointer the way the button would. */
.wsrow{position:relative}
.wsrow-open::after{content:"";position:absolute;inset:0}
.wsrow-a>a.btn{position:relative;z-index:var(--z-lift)}
.ico{width:var(--sp-5);height:var(--sp-5);fill:none;stroke:currentColor;stroke-width:var(--bw-2);stroke-linecap:round;
  stroke-linejoin:round;flex:none}
.wsrow-manage .ico,.wsrow-open .ico{display:none}
.wsrow:has(.wsrow-open:hover){background:var(--hover)}
.wsrow:has(.wsrow-open:focus-visible){box-shadow:inset 0 0 0 var(--bw-2) var(--ring)}
/* the picker's search: one labelled field over the list */
.wssearch{display:grid;gap:var(--sp-2);margin:0 0 var(--sp-4)}
.wsnone{margin:0 0 var(--sp-5)}
.wsrow[hidden],.wsnone[hidden]{display:none}

/* ── facts and people ───────────────────────────────────────────────────── */
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3) var(--sp-5);margin:0}
.kv dt{color:var(--ink3);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.kv dd{margin:var(--sp-05) 0 0}
.who{display:flex;align-items:center;gap:var(--sp-3)}
.tblwrap{overflow-x:auto}
.kv + .tblwrap{margin-top:var(--sp-5)}
.tbl td.acts{text-align:right;white-space:nowrap}
/* Custom connectors: fixed columns, so the Switch on/off label wraps in its own slot rather than
   resizing the others (test_every_component_is_modern, steady buttons, 2026-09-30) */
/* People: on a wide screen a person's buttons keep one line, rather than the table squeezing them into a
   stack beside a column of air (2026-09-30); a phone stacks the row into a card. The line is the row's second:
   beside the facts the three buttons made the table ~870px, wider than the page's reading column (queue 272), so
   each row is a grid of the four facts over its buttons, every row and the head on the same four columns. */
@media (min-width: 721px){
  .tbl.people td.acts .btnrow{flex-wrap:nowrap}
  .tbl.people tr{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,.8fr) minmax(0,1.2fr) minmax(0,1fr);align-items:center}
  .tbl.people th:last-child{display:none}
  .tbl.people td.acts{grid-column:1/-1;padding-top:0}
  .tbl.people tr:has(td.acts) td:not(.acts){border-bottom:0}
}
.tbl.modules{table-layout:fixed}
.tbl.modules th:nth-child(1){width:44%}
.tbl.modules th:nth-child(2){width:16%}
.tbl.modules th:nth-child(3){width:14%}
.tbl.modules td.acts{white-space:normal}
.tbl.modules td.acts .btn{white-space:normal}

/* ── connector requests (a workspace's page) ────────────────────────────── */
.reqq{margin:0;max-width:var(--size-80)}
.reqform{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-2);min-width:var(--size-56);text-align:left}
.reqform .btn{justify-self:end}
/* The platform admin's inquiries (fd_site.contacts_panel): one card each, the message at full width. */
.inq{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.inq-item{display:grid;gap:var(--sp-2);min-width:0;padding:var(--sp-4) var(--sp-5);border:var(--bw) solid var(--line2);
  border-radius:var(--r-lg)}
.inq-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-3)}
.inq-who{min-width:0;overflow-wrap:anywhere}
.inq-who .pill{margin-left:var(--sp-1)}
.inq-about{font-size:var(--fs-sm);color:var(--ink2)}
.inq-msg{margin:0;max-width:var(--measure-text);white-space:pre-wrap;overflow-wrap:anywhere}
/* A bug report's screenshot link and "what they expected", under its message (fd_site._contact_row). */
.inq-shot,.inq-expected{margin:0;font-size:var(--fs-sm);color:var(--ink2);max-width:var(--measure-text);overflow-wrap:anywhere}
.inq-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2) var(--sp-4);
  margin-top:var(--sp-1);padding-top:var(--sp-3);border-top:var(--bw) solid var(--line2)}
.inq-status{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin:0}
/* when it came and whether the inbox and phone were told: the card's top corner, clear of the status
   buttons, so a longer button label never moves it (test_every_component_is_modern, steady buttons) */
.inq-when{display:grid;justify-items:end;gap:var(--sp-05);text-align:right}
.inq-sent{color:var(--ink3);font-size:var(--fs-sm)}
.bad-ink{color:var(--bad-ink)}
/* the inquiries' source filter: one labelled select (fd_site.contacts_panel), the width of its longest choice */
.leadfilter{display:flex;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-4)}
.leadfilter .lbl{margin:0}
.leadfilter .field{width:auto;min-width:0;flex:0 1 auto}
/* The sales pipeline (fd_pages.pipeline_page): stage counts, then one card per prospect on the inquiry list's own card. */
.pl-stages{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--sp-9) + var(--sp-9)),1fr));gap:var(--sp-3);margin-bottom:var(--sp-4)}
/* Analytics' tiles carry phrases ("Reports saved as PDF"), not one-word stages: half as wide again. */
.pl-stages.wide{grid-template-columns:repeat(auto-fill,minmax(calc(var(--sp-9) * 3),1fr))}
.pl-stage{display:grid;gap:var(--sp-05);padding:var(--sp-3) var(--sp-4);border:var(--bw) solid var(--line2);border-radius:var(--r-lg);min-width:0}
.pl-stage b{font-size:var(--fs-h2);line-height:var(--lh-tight)}
.pl-stage span{color:var(--ink2);font-size:var(--fs-sm)}
.pl-stage small{color:var(--ink3);font-size:var(--fs-micro)}
.pl-stage.idle b{color:var(--ink3)}
.pl-item .inq-who .pill{margin-left:var(--sp-1)}
.pl-line{margin:0;overflow-wrap:anywhere}
/* An address or key quoted in running text (the single sign-on redirect URI) has no break of its own, and ran a
   390px Manage page 5px wide (test_owner_allowances_browser.js). */
p code{overflow-wrap:anywhere}
.pl-status{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-3)}
.pl-status .pill{white-space:normal;border-radius:var(--r)}  /* wrapped, a rounded box, not a blob */
.pl-blockers{margin:var(--sp-2) 0 0;padding-left:var(--sp-5);color:var(--bad-ink);font-size:var(--fs-sm);overflow-wrap:anywhere}

/* ── the mark: the product's own logo tokens ─────────────────────────────── */
.mark{width:var(--sp-7);height:var(--sp-7);display:block;border-radius:var(--r)}
.auth-card>.mark{width:calc(var(--sp-7) + var(--sp-4));height:calc(var(--sp-7) + var(--sp-4));margin:0 0 var(--sp-5)}

/* ── type ────────────────────────────────────────────────────────────────── */
/* A signed-in page's title is the app's page heading (ui/css/10-base.css .viewhd): the
   same size, weight and tracking, and the same smaller size on a phone, so Account and
   Workspaces read as pages of the product. The sign-in card's title is a card's, the
   size a dialog's title takes. */
h1{font-size:var(--fs-h1);font-weight:var(--fw-semibold);line-height:var(--lh-tight);margin:0 0 var(--sp-2);
  letter-spacing:var(--ls-tighter)}
.auth-card h1{font-size:var(--fs-title);letter-spacing:var(--ls-tight)}
@media(max-width:820px){.pagehead h1{font-size:var(--fs-h1-compact)}}
h2{font-size:var(--fs-h3);margin:0 0 var(--sp-3)}
h3{font-size:var(--fs-lg);margin:var(--sp-5) 0 var(--sp-2)}
.lede{color:var(--ink2);font-size:var(--fs-lead);margin:0 0 var(--sp-5)}
.hint{color:var(--ink3);font-size:var(--fs-sm);margin:var(--sp-1) 0 0;max-width:var(--measure-md)}
.hint[data-level="strong"]{color:var(--green)}
.muted{color:var(--ink3)}
.small{font-size:var(--fs-xs)}
.mono{font-family:var(--font-mono);overflow-wrap:anywhere}   /* a SHA-256 has no spaces to break at: it pushed /connector to 588px on a 390px phone */
.nowrap{white-space:nowrap}
.foot{margin:var(--sp-5) 0 0;text-align:center;color:var(--ink3)}
a{color:var(--brand-d)}

/* ── forms ───────────────────────────────────────────────────────────────── */
.stack{display:flex;flex-direction:column;gap:var(--sp-1)}
.stack .btn{margin-top:var(--sp-4)}
.stack.narrow{max-width:var(--door-auth-w)}
.lbl{display:block;font-weight:var(--fw-semibold);color:var(--ink);margin:var(--sp-3) 0 var(--sp-1);font-size:var(--fs-sm)}
.field{width:100%;box-sizing:border-box;height:var(--door-field-h);padding:0 var(--sp-3);
  font:inherit;font-size:var(--fs-lead);color:var(--ink);background:var(--surface);
  border:var(--bw) solid var(--control-line);border-radius:var(--r);
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
/* A textarea is not a one-line field: .field fixes the height for inputs and selects, which clipped a textarea to a
   single row (the Security page, 2026-10-13). */
textarea.field{height:auto;min-height:var(--door-area-h);padding:var(--sp-2) var(--sp-3);line-height:var(--lh-base);
  resize:vertical;display:block}
.field:hover{border-color:var(--hover-line)}
.field:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 var(--ring-halo) var(--sel)}
.field[readonly]{background:var(--tint);color:var(--ink2)}
.field.code{font-family:var(--font-mono);font-size:var(--fs-h2);letter-spacing:var(--ls-spaced);text-align:center}
/* THE SHOW/HIDE CONTROL SITS INSIDE THE FIELD, as an eye, and the field keeps the
   width of every other field: first shipped as the word "Show" beside a narrower box. */
.pwwrap{position:relative}
.pwwrap .field{padding-right:calc(var(--ctl-h) + var(--sp-2))}
.reveal{position:absolute;top:50%;right:var(--sp-1);transform:translateY(-50%);display:inline-flex;align-items:center;
  justify-content:center;width:var(--ctl-h);height:var(--ctl-h);padding:0;border:0;border-radius:var(--r);
  background:transparent;color:var(--ink3);cursor:pointer;transition:color var(--dur-fast) var(--ease-out),
  background var(--dur-fast) var(--ease-out)}
.reveal:hover{color:var(--ink);background:var(--hover)}
.reveal:focus-visible{outline:var(--bw-2) solid var(--ring);outline-offset:0}
.reveal svg{width:calc(var(--sp-4) + var(--sp-1));height:calc(var(--sp-4) + var(--sp-1));fill:none;stroke:currentColor;
  stroke-width:var(--bw-2);stroke-linecap:round;stroke-linejoin:round}
.reveal .eye-shut{display:none}
.reveal[aria-pressed="true"] .eye-open{display:none}
.reveal[aria-pressed="true"] .eye-shut{display:block}
.check{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-4) 0 0;color:var(--ink2)}
/* THE 24px FLOOR (queue 383, WCAG 2.5.8). A .check's 16px box is pressed through its label, and a one-line label ran
   ~22px tall; the page head's back link (.crumb) was 21px. Each is given the floor, and a fingertip's 44px on a touch
   screen (scripts/mobile_rules.js tap-target-floor, tests/test_mobile_layout_rules.py). */
.check{min-height:var(--sp-6)}
.crumb{display:inline-flex;align-items:center;min-height:var(--sp-6)}
@media (pointer: coarse){.check,.crumb{min-height:var(--touch-target)}}
.copyrow{display:flex;gap:var(--sp-2);align-items:center;margin-top:var(--sp-3)}
.copyrow .field{flex:1}
.copyrow .btn{min-height:var(--door-field-h)}
.copyrow.end{justify-content:flex-end}
/* A VALUE TO PASTE ELSEWHERE is shown whole, wrapping anywhere, never cut off in a one-line field (fd_pages.copy_value). */
.copyval{flex:1;min-width:0;min-height:var(--door-field-h);display:flex;align-items:center;padding:var(--sp-2) var(--sp-3);
  border:var(--bw) solid transparent;border-radius:var(--r);background:var(--tint3);color:var(--ink);
  font-family:var(--font-mono);font-size:var(--fs-sm);overflow-wrap:anywhere;
  user-select:all}   /* drawn as a read-only value, not a field: it is ours to give, not theirs to type */
/* On a phone the value takes the whole row and Copy goes under it: beside it, a TXT hash broke across three lines. */
@media (max-width:560px){.copyrow:has(>.copyval){flex-wrap:wrap}.copyrow>.copyval{flex:1 1 100%}}
/* A long identifier typed into a field wraps like the values beside it rather than being cut off (the SSO issuer). */
textarea.field.fit{min-height:var(--door-field-h);field-sizing:content;resize:none;font-size:var(--fs-sm)}
.field.mono{font-family:var(--font-mono);font-size:var(--fs-sm)}   /* .field sets font:inherit, which beat .mono alone */
/* The SSO notes sit under full-width rows and fill them, rather than stopping short of the row above. */
#sso .hint,#sso .panel-head p{max-width:none}
.copyval .nobr{white-space:nowrap}
.fld>.copyrow{margin-top:0}
/* A FIELD THAT REFUSED A SAVE is marked on the field itself (red edge and halo, focus or not) and its message leads
   with an alert mark, so a person scanning the form sees which one failed (board, item 461). */
.hint.err{color:var(--bad-ink);display:flex;gap:var(--sp-2);align-items:first baseline}
.hint.err::before{content:"!";flex:none;display:inline-grid;place-items:center;width:var(--sp-45);
  height:var(--sp-45);border-radius:50%;background:var(--bad-ink);color:var(--on-fill);font-weight:var(--fw-bold);
  font-size:var(--fs-xs);line-height:var(--lh-none)}
.field[aria-invalid="true"],.field[aria-invalid="true"]:hover,.field[aria-invalid="true"]:focus{border-color:var(--bad-ink);
  box-shadow:inset 0 0 0 var(--bw) var(--bad-ink),0 0 0 var(--ring-halo) var(--red-l)}
/* A held secret's mask reads as a value, not a faint hint (board, item 461). */
.field[type="password"][placeholder^="•"]::placeholder{color:var(--ink2);opacity:1}
/* A footer whose destructive action sits apart from Save: at the far side on a wide screen, and on a phone both
   full width with Save on top. */
.panel-foot>.btnrow.apart{margin-right:auto}
/* ...and a text-only destructive button there starts on the content edge, as a macOS sheet puts it. */
@media (min-width:561px){.panel-foot>.btnrow.apart>.btn.quiet{margin-left:calc(-1 * var(--ctl-padx))}}
/* The SSO panel's footer has the same shape on and off: a lone primary on a phone is full width like the pair. */
@media (max-width:560px){#sso .panel-foot{flex-direction:column-reverse;align-items:stretch}#sso .panel-foot .btn{width:100%}}
@media (max-width:560px){.panel-foot:has(>.btnrow.apart){flex-direction:column-reverse;align-items:stretch}
  .panel-foot:has(>.btnrow.apart) .btn{width:100%}.panel-foot>.btnrow.apart{margin-right:0;display:block}}
hr{border:0;border-top:var(--bw) solid var(--line);margin:var(--sp-5) 0}

/* ── buttons: rounded rectangles, like the app's (a pill is a badge) ──────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--ctl-h);
  padding:calc(var(--sp-1) + var(--bw)) var(--ctl-padx);font:inherit;font-weight:var(--fw-semibold);color:var(--ink);text-decoration:none;cursor:pointer;
  background:var(--glass);border:var(--bw) solid var(--glass-edge);border-radius:var(--r-btn);box-shadow:var(--sh-1);
  transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out)}
.btn:hover{background:var(--hover);border-color:var(--hover-line)}
.btn:active{background:var(--press);transform:translateY(var(--lift))}
.btn:focus-visible{outline:var(--bw-2) solid var(--ring);outline-offset:var(--bw-2)}
.btn[disabled],.btn.disabled{opacity:var(--op-dim);cursor:not-allowed}
.btn.primary{color:var(--on-fill);background:var(--sheen),var(--brand);border-color:transparent;box-shadow:var(--sh-primary)}
.btn.primary:hover{background:var(--sheen),var(--brand-d)}
.btn.danger{color:var(--on-fill);background:var(--red);border-color:transparent}
.btn.quiet.danger{color:var(--red);background:transparent;border-color:transparent;box-shadow:none}
.btn.quiet.danger:hover{background:var(--red-l)}
.btn.quiet{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink2)}
.btn.quiet:hover{background:var(--hover);color:var(--ink)}
.btn.block{width:100%;min-height:var(--ctl-h-lg);font-size:var(--fs-lead)}

/* ── notices, pills, tables ─────────────────────────────────────────────── */
.notice{border-radius:var(--r);padding:var(--sp-3) var(--sp-4);margin:0 0 var(--sp-4);border:var(--bw) solid var(--line)}
.notice p{margin:var(--sp-1) 0 0}
.notice.bad{background:var(--red-l);color:var(--bad-ink);border-color:var(--bad-line)}
.notice.good{background:var(--green-l);color:var(--ink);border-color:var(--tint-good-line)}
.notice.info{background:var(--blue-l);color:var(--info-ink);border-color:var(--blue-l)}
.pill{display:inline-block;padding:0 var(--sp-2);border-radius:var(--r-badge);font-size:var(--fs-micro);font-weight:var(--fw-semibold);
  background:var(--tint2);color:var(--ink2);vertical-align:middle}
.pill.good{background:var(--green-l);color:var(--green)}
.pill.warn{background:var(--amber-l);color:var(--warn-ink)}
.pill.bad{background:var(--red-l);color:var(--bad-ink)}
.pill.brand{background:var(--brand-l);color:var(--brand-d)}
/* A count inside a filled button (the Contact requests filter): a well in the fill. */
.btn.primary .pill{background:var(--on-fill-wash);color:var(--on-fill)}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:var(--fs-xs);color:var(--ink3);font-weight:var(--fw-semibold);padding:var(--sp-2) var(--sp-3);
  border-bottom:var(--bw) solid var(--line)}
.tbl td{padding:var(--sp-3);border-bottom:var(--bw) solid var(--line2);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background var(--dur-fast) var(--ease-out)}
.tbl tbody tr:hover{background:var(--hover)}
ol.steps{margin:var(--sp-3) 0 0;padding-left:var(--sp-5)}
ol.steps li{margin:var(--sp-1) 0}

/* ── two-step ───────────────────────────────────────────────────────────── */
.qrwrap{display:flex;justify-content:center;padding:var(--sp-4);background:var(--surface-solid);border-radius:var(--r);
  color:var(--ink);margin:var(--sp-3) 0}
.qr{display:block;color:var(--ink)}
ol.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2) var(--sp-6);margin:var(--sp-4) 0;
  padding-left:var(--sp-5);font-size:var(--fs-lead)}

.manual{margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:var(--bw) solid var(--line2)}
.manualhd{margin:0 0 var(--sp-2);font-weight:var(--fw-semibold);color:var(--ink)}
@media print{
  .topbar,.copyrow,.check,.btn{display:none}
  body{background:none}
  .card{box-shadow:none;border:0}
}

/* ── waiting ────────────────────────────────────────────────────────────── */
.waithead{display:flex;align-items:center;gap:var(--sp-4);margin:0 0 var(--sp-5)}
.waithead>.mark{width:calc(var(--sp-7) + var(--sp-4));height:calc(var(--sp-7) + var(--sp-4))}
.spinner{display:block;flex:none;width:var(--sp-7);height:var(--sp-7)}
.spinner circle{fill:none;stroke-width:var(--bw-2)}
.spinner .track{stroke:var(--line)}
.spinner .arc{stroke:var(--brand);stroke-linecap:round;transform-box:view-box;transform-origin:50% 50%;
  animation:door-spin var(--dur-spin) linear infinite}
.waiting.failed .spinner{display:none}
.mantra{min-height:var(--sp-9);transition:opacity var(--dur-slow) ease}
.mantra.fade{opacity:0}
@keyframes door-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spinner .arc{animation:none}.mantra{transition:none}.btn,.field{transition:none}}

@media (max-width: 720px){
  .split,.fields,.fields.three,.choices,.kv{grid-template-columns:minmax(0,1fr)}
  .fields .gap{display:none}
  .topbar{border-radius:var(--r-lg);flex-wrap:wrap}
  /* A WORKSPACE ROW ON A PHONE IS A GRID, NOT A WRAPPED FLEX ROW (2026-09-30): the tile sat centred
     in a column of air beside three wrapped lines, and the buttons floated under them. The tile now
     heads its text, top-aligned, and Manage and Open split the row's full width underneath. */
  .wsrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:var(--sp-3);
    padding:var(--sp-4)}
  .wsrow .wsmark{width:var(--sp-7);height:var(--sp-7);font-size:var(--fs-sm)}
  /* ON A PHONE THE ROW IS THE OPEN BUTTON (the picker, 2026-09-30): a line of Manage and Open under every
     workspace doubled each row's height for a button the whole row already is. Open keeps its name for
     a screen reader and its stretched hit area; only its own box is folded away. Manage stays, beside
     the name, above the row's layer. */
  .wsrow-a{display:flex;margin:0}
  .wsrow-a:has(>a.btn) .wsrow-open{width:0;min-width:0;height:0;min-height:0;padding:0;border:0;overflow:visible;
    font-size:0;background:none;box-shadow:none}
  /* Manage is the gear on a phone, a square of the standard control height; its word is kept for a
     screen reader, so the row's text keeps most of the width */
  .wsrow-manage,.wsrow-open{width:var(--ctl-h);padding:0}
  .wsrow-manage .ico,.wsrow-open .ico{display:block}
  .wsrow-a:has(>a.btn) .wsrow-open .ico{display:none}
  /* the word itself is not drawn on a phone: each button's aria-label ("Manage ACME Co.", "Open ACME Co.")
     is its name, and a word clipped to a pixel still measures full width, spilling out of its button */
  .wsrow-manage,.wsrow-open{font-size:0}
  /* A ROW OF BUTTONS THAT WRAPS FILLS ITS LINES, so every line ends at the same right edge
     instead of a ragged stack (the page head's actions, the recovery codes' three). */
  .pagehead-a{flex:1 1 100%}
  :is(.pagehead-a,.btnrow.fill)>.btn{flex:1 1 auto;justify-content:center}
  /* EVERY TABLE STACKS INTO CARDS: one row a card, each value under its column's name
     (data-label, set by door.js from the header). A table scrolled sideways hid the People
     roles and every button beside them, and the spend total (2026-09-29). */
  /* A CARD INSIDE A PANEL KEEPS ITS TEXT WIDTH: at 320 the pipeline's cards held 190px after
     three paddings, and their buttons stood one to a line (2026-09-29). */
  .inq-item{padding:var(--sp-3) var(--sp-4)}
  .pl-item .inq-status{flex:1 1 100%}
  .pl-item .inq-status>.btn{flex:1 1 auto}
  .pl-row>.btn,.pl-row>form,.pl-row>form>.btn,.pl-copy>.btn{flex:1 1 100%}
  .pl-item .inq-foot .inq-status>.btn{flex:1 1 100%}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block}
  .tbl thead{display:none}
  .tbl tr{padding:var(--sp-3) 0;border-bottom:var(--bw) solid var(--line2)}
  .tbl tr:last-child{border-bottom:0}
  .tbl td{padding:var(--sp-05) 0;border-bottom:0}
  .tbl td:empty{display:none}
  .tbl td.acts{text-align:left;white-space:normal;padding-top:var(--sp-2)}
  .tbl td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;color:var(--ink3);
    font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
  .auth-card{padding:var(--sp-6) var(--sp-5)}
  ol.codes{grid-template-columns:1fr}
}

/* The picture of the PageSoar Connector screen on the public /connector page. */
.shot{display:block;max-width:100%;height:auto;border-radius:var(--r);border:var(--bw) solid var(--line)}

/* Durable top-up references remain readable inside narrow owner panels. */
.grant-reference{overflow-wrap:anywhere}

/* Customer emails (fd_pages.email_previews): each email in its own frame, as a mail client shows it,
   and its plain-text part wrapped rather than widening the page. */
.mailframe{display:block;width:100%;height:70vh;border:0;border-radius:var(--r-lg)}
.mailtext-h{margin:var(--sp-5) 0 var(--sp-2);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.mailtext{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;font-size:var(--fs-xs)}

/* THE LEGAL FOOTER under every front door page (fd_pages.legal_footer), the same links as the
   website's and the app's footers (fd_legal.LEGAL). Quiet: small, third ink, centred. */
.doorfoot{max-width:var(--door-shell-w);margin:0 auto;padding:var(--sp-5) var(--sp-5) var(--sp-7);
  color:var(--ink3);font-size:var(--fs-sm);text-align:center}
.doorfoot ul{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2) var(--sp-4);margin:0 0 var(--sp-2);padding:0;list-style:none}
.doorfoot a{color:var(--ink2);text-decoration:none}
.doorfoot a:hover{color:var(--ink);text-decoration:underline}
.doorfoot p{margin:0 auto;max-width:var(--measure-md)}

/* ==========================================================================================
   THE CART'S COMPONENTS, shared by the website's /buy (fd_site.checkout) and the app's Billing page (fd_billing.page):
   plan options, billing and trial segments, the additional-users stepper and its tooltip. The owner, 2026-10-02: an
   existing customer changing their subscription in the app sees the same look, wording and controls as a new buyer.
   On /buy they are links (.here marks the chosen one); in the app's form they are labels around radios (:has(:checked)).
   ========================================================================================== */
/* The heading has its own class, not just `h3`: the website sets `.site h3` after this sheet, and that rule must not win here. */
.s-cart-opt,.s-cart-seg,.s-cart-seats,.s-cart-line,.s-cart-due{line-height:var(--lh-base)}
.s-cart-box .s-cart-h,.s-cart-form .s-cart-h{line-height:var(--lh-base);letter-spacing:normal;font-weight:var(--fw-bold);margin:var(--sp-2) 0 calc(var(--sp-2) * -1);font-size:var(--fs-sm);color:var(--ink3);text-transform:uppercase}
.s-cart-line{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:var(--sp-2) var(--sp-4);padding-bottom:var(--sp-4);border-bottom:var(--bw) solid var(--line2)}
.s-cart-item{display:flex;flex-direction:column;gap:var(--sp-1);flex:1 1 var(--size-40)}
.s-cart-item span{color:var(--ink3);font-size:var(--fs-sm)}
.s-cart-amt{white-space:nowrap}
.s-cart-facts{flex:1 1 100%;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}
.s-cart-facts div{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-2) var(--sp-3);border:var(--bw) solid var(--line2);border-radius:var(--r);background:var(--surface)}
.s-cart-facts b{font-size:var(--fs-lg);font-weight:var(--fw-bold);white-space:nowrap}
.s-cart-facts span{color:var(--ink3);font-size:var(--fs-xs)}
@media (max-width: 480px){.s-cart-facts{grid-template-columns:1fr}.s-cart-facts div{flex-direction:row;justify-content:space-between;align-items:baseline}.s-cart-facts span{font-size:var(--fs-sm)}}
.s-cart-due{display:flex;flex-direction:column;gap:var(--sp-1)}
.s-cart-due p{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-1) var(--sp-4);margin:0}
.s-cart-due p span{color:var(--ink3)}
.s-cart-opts{display:grid;gap:var(--sp-2)}
.s-cart-opt{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border:var(--bw) solid var(--control-line);border-radius:var(--r);background:var(--surface);color:inherit;text-decoration:none}
.s-cart-opt:hover{border-color:var(--hover-line)}
.s-cart-opt.here{border-color:var(--ring);background:var(--sel)}
.s-cart-opt-t{display:flex;flex-direction:column;gap:var(--sp-1)}
.s-cart-opt-t span,.s-cart-opt-p{color:var(--ink3);font-size:var(--fs-sm);white-space:nowrap}
.s-cart-segs{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--size-40),1fr));gap:var(--sp-2)}
.s-cart-seg{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);padding:var(--sp-3) var(--sp-3);border:var(--bw) solid var(--control-line);border-radius:var(--r);background:var(--surface);color:inherit;text-decoration:none;text-align:center}
.s-cart-seg span{color:var(--ink3);font-size:var(--fs-sm)}
.s-cart-seg:hover{border-color:var(--hover-line)}
.s-cart-seg.here{border-color:var(--ring);background:var(--sel)}
.s-cart-seats{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-2)}
/* THE HEADING AND ITS DESCRIPTION ARE ONE BLOCK on the left, close together, and the stepper is centred on the pair
   (the owner, 2026-10-02): the row centres its two cells, and the block's own margins are cleared. */
.s-cart-seats-l{display:flex;flex-direction:column;gap:var(--sp-1)}
.s-cart-box .s-cart-seats-l .s-cart-h,.s-cart-form .s-cart-seats-l .s-cart-h{margin:0}
.s-cart-seats-t{color:var(--ink3);font-size:var(--fs-sm)}
.s-cart-seats-in{display:flex;gap:var(--sp-2);align-items:center;position:relative}
/* The minimum is said in a small tooltip above the stepper, and the field shakes once (not under reduced motion). */
.s-cart-tip{position:absolute;right:0;bottom:calc(100% + var(--sp-2));width:max-content;max-width:var(--size-80);padding:var(--sp-2) var(--sp-3);border:var(--bw) solid var(--ring);border-radius:var(--r);background:var(--surface-solid);color:inherit;font-size:var(--fs-sm);box-shadow:var(--sh-2)}
@keyframes s-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(calc(var(--sp-1) * -1))}40%,80%{transform:translateX(var(--sp-1))}}
.s-cart-seats-in .field.shake{animation:s-shake var(--dur-slower) var(--ease-standard);border-color:var(--ring)}
@media (prefers-reduced-motion: reduce){.s-cart-seats-in .field.shake{animation:none}}
/* The native up/down arrows sit inside a number field and push its digit left of centre; the stepper replaces them. */
.s-cart-seats-in .field{width:var(--size-20);padding-inline:0;text-align:center;appearance:textfield;-moz-appearance:textfield}
.s-cart-seats-in .field::-webkit-inner-spin-button,.s-cart-seats-in .field::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.s-step{display:none;width:var(--door-field-h);height:var(--door-field-h);padding:0;border:var(--bw) solid var(--control-line);border-radius:var(--r);background:var(--surface);color:inherit;font:inherit;cursor:pointer}
.s-step:hover{border-color:var(--hover-line)}
.s-step:disabled{opacity:var(--op-dim);cursor:not-allowed;border-color:var(--control-line)}
.s-cart-seats.auto .s-step{display:inline-flex;align-items:center;justify-content:center}
.s-cart-seats.auto .btn{display:none}

/* THE FORM MODE (the app's Billing page): radios inside the option and segment labels, drawn exactly like the links. */
.s-cart-form{display:flex;flex-direction:column;gap:var(--sp-4)}
.s-cart-opt,.s-cart-seg{position:relative;cursor:pointer}
.s-cart-opt input,.s-cart-seg input{position:absolute;opacity:0;pointer-events:none}
.s-cart-opt:has(input:checked),.s-cart-seg:has(input:checked){border-color:var(--ring);background:var(--sel)}
.s-cart-opt:has(input:focus-visible),.s-cart-seg:has(input:focus-visible){box-shadow:0 0 0 var(--ring-halo) var(--sel)}
.s-cart-form .s-cart-due{margin-top:var(--sp-2)}

/* Analytics: the buy-to-customer funnel and the demo, as bars. <progress> needs no inline style (the page's CSP forbids it). */
.fbars{display:grid;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.fbar{display:grid;grid-template-columns:minmax(0,calc(var(--sp-9) * 3)) minmax(0,1fr) auto minmax(0,calc(var(--sp-9) * 4));align-items:center;gap:var(--sp-3)}
.fbar progress{width:100%;height:var(--sp-3);appearance:none;border:0;border-radius:var(--r);background:var(--line2);overflow:hidden}
.fbar progress::-webkit-progress-bar{background:var(--line2)}
.fbar progress::-webkit-progress-value{background:var(--brand);border-radius:var(--r)}
.fbar progress::-moz-progress-bar{background:var(--brand);border-radius:var(--r)}
.fbar-n{text-align:right;font-variant-numeric:tabular-nums}
.fbar-r{color:var(--ink3);font-size:var(--fs-sm)}
.tbl tr.bad td{color:var(--bad)}
@media (max-width:640px){.fbar{grid-template-columns:1fr auto}.fbar progress{grid-column:1/-1;order:3}.fbar-r{grid-column:1/-1}}

/* PADDLE'S CHECKOUT FRAME IS TRANSPARENT ONLY WHEN ITS COLOUR SCHEME MATCHES THE PAGE'S. The page is pinned dark
   (color-scheme: dark); Paddle's document is not, and Chrome paints an opaque white canvas behind an embedded
   document whose scheme differs from its iframe element's (Safari does not), leaving Paddle's light-on-dark text
   on a white box (2026-10-06). Declaring the iframe's own scheme as Paddle's removes the mismatch. */
.paddle-checkout iframe{color-scheme:light}
/* THE ADMIN OVERVIEW: one tile for each job that has its own page. */
.admintiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--size-56),1fr));gap:var(--sp-4)}
.admintile{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-5) var(--sp-6);border:var(--bw) solid var(--line);
  border-radius:var(--r-lg);background:var(--glass-strong);color:var(--ink);text-decoration:none}
.admintile:hover{border-color:var(--brand)}
.admintile-t{font-size:var(--fs-sm);color:var(--ink3);font-weight:var(--fw-semibold)}
.admintile-n{font-size:var(--fs-h2);font-weight:var(--fw-semibold);line-height:var(--lh-tight)}
.admintile-d{font-size:var(--fs-sm);color:var(--ink3)}
.admintile-go{margin-top:auto;padding-top:var(--sp-2);font-size:var(--fs-sm);color:var(--brand-d);font-weight:var(--fw-medium)}
/* A WAITING PROSPECT'S CHANNELS (queue 462): Email and LinkedIn message as peer groups, one rhythm inside each
   (heading, pill, blockers, who it goes to, the text, its own move), a hairline between them. The message is set
   in the body face in a tinted box, as the prospect will read it; the email keeps its monospace preview. */
.pl-ch{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-3);margin-top:var(--sp-5)}
.pl-ch+.pl-ch{border-top:var(--bw) solid var(--line);padding-top:var(--sp-5)}
.pl-ch>*,.pl-ch>.pl-blockers{margin:0}
.pl-ch>.pl-line{display:flex}
.pl-ch-h{margin:0;font-size:var(--fs-sm);font-weight:var(--fw-semibold);line-height:var(--lh-tight)}
/* the country's rule, the reason a move is held, what a folded channel means: secondary type, under the blockers */
.pl-note{font-size:var(--fs-sm);color:var(--ink2)}
.pl-meta{font-size:var(--fs-xs);font-weight:var(--fw-semibold);overflow-wrap:anywhere}
.pl-meta>span{white-space:nowrap}
.pl-ch .dmtext{font-family:inherit;font-size:var(--fs-sm);line-height:var(--lh-base);padding:var(--sp-3) var(--sp-4);
  background:var(--hover);border-radius:var(--r)}
.pl-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.pl-move{display:flex;margin:0}
.pl-copy{display:contents}
/* The footer's ways out are real buttons, not bare words, and the row starts on the card's text edge. */
.pl-item .inq-foot .btn.quiet:not(.danger){background:var(--glass);border-color:var(--glass-edge)}
/* A footer that starts with a bare "Stop for good" puts its word on the card's text edge, as a panel foot's quiet button does. */
@media (min-width:721px){.pl-item .inq-foot .inq-status>button.quiet.danger:first-of-type{margin-left:calc(-1 * var(--ctl-padx))}}