/* Nowlark's own parts, the ones PageSoar's sheets have no block for. Every value is a PageSoar token
   (tests/test_the_nowlark_sheet_uses_only_tokens.py): no literal size, space, radius, colour or duration. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.nl-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s-gap-lg);align-items:center}
.nl-hero-t .s-lede{max-width:var(--s-w-text)}
.nl-hero-t .s-hero-a{justify-content:flex-start;margin-top:var(--sp-5)}
.nl-hero-t .s-hero-note{margin-top:var(--sp-4)}
.stores{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}
.store{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);border-radius:var(--r-btn);
  background:var(--ink);color:var(--page);text-decoration:none;min-height:var(--touch-target)}
.store-light{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 var(--bw) var(--glass-edge)}
.store-glyph{width:var(--sp-6);height:var(--sp-6);flex:none}
.store-text{display:flex;flex-direction:column;line-height:var(--lh-none);text-align:left}
.store-small{font-size:var(--fs-micro);font-weight:var(--fw-medium)}
.store-large{font-size:var(--fs-lg);font-weight:var(--fw-semibold);margin-top:var(--sp-05)}
.store-official{padding:0;background:none;border:0;min-height:0}
.store-official img{display:block;height:var(--size-14);width:auto}
.nl-send{margin-bottom:var(--s-gap)}
.nl-code-bar{padding:var(--sp-2) var(--sp-4);border-bottom:var(--bw) solid var(--line2);color:var(--ink3);font-size:var(--fs-xs)}
.nl-code pre,.agent-prompt pre{margin:0;padding:var(--sp-4);overflow-x:auto;font-family:var(--font-mono);font-size:var(--fs-sm);
  line-height:var(--lh-base);color:var(--ink)}
.agent-prompt{min-width:0;padding:var(--sp-1);border-radius:var(--r-panel);background:var(--sunk);border:var(--bw) solid var(--glass-edge)}
.agent-prompt pre{white-space:pre-wrap;max-height:var(--size-90);overflow-y:auto}
@media (max-width:860px){.nl-hero{grid-template-columns:minmax(0,1fr)}}
.s-lede,.s-card p,.s-plan-for,.s-ticks li{text-wrap:pretty}
.phone-wrap{display:flex;justify-content:center;margin:0}
.nl-field+.nl-field{margin-top:var(--sp-45)}
.nl-field label{display:block;margin-bottom:var(--sp-2);color:var(--ink3);font-size:var(--fs-xs);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:var(--ls-wide)}
.nl-field input{display:block;width:100%;min-height:var(--ctl-h);padding:var(--sp-3) var(--sp-35);border:var(--bw) solid var(--control-line);border-radius:var(--r-ctl);background:var(--page);color:var(--ink);font-family:var(--font-mono);font-size:var(--fs-input-touch)}
.nl-field input:focus-visible{outline:var(--bw-2) solid var(--ring);outline-offset:var(--sp-05)}
.nl-field .nl-hint{display:block;margin-top:var(--sp-2);color:var(--ink3);font-size:var(--fs-sm)}
.send{display:grid;gap:var(--s-gap);grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:stretch}
.nl-code{display:flex;flex-direction:column;min-width:0;border-radius:var(--r-panel);background:var(--sunk);border:var(--bw) solid var(--glass-edge);overflow:hidden}
.nl-code .note{margin:auto 0 0;padding:var(--sp-4) var(--sp-5);border-top:var(--bw) solid var(--line2);color:var(--ink2);font-size:var(--fs-sm)}
.code-bar{display:flex;align-items:center;gap:var(--sp-1);padding:var(--sp-2) var(--sp-3) 0 var(--sp-4);border-bottom:var(--bw) solid var(--line2)}
/* The tabs keep one line each and scroll under the Copy button on a phone, never wrap ("Prowl apps" on two lines at 390). */
.tabs{display:flex;gap:var(--sp-05);min-width:0;overflow-x:auto;scrollbar-width:none}
.tab{white-space:nowrap;flex:none}
.copy{flex:none}
.tab{appearance:none;background:none;border:0;cursor:pointer;padding:var(--sp-3);color:var(--ink3);font:inherit;font-size:var(--fs-sm);border-bottom:var(--bw-2) solid transparent}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--brand)}
.code-label{padding:var(--sp-3) 0;color:var(--ink3);font-size:var(--fs-sm)}
.copy{margin-left:auto;margin-bottom:var(--sp-2);display:inline-flex;align-items:center;gap:var(--sp-2);height:var(--ctl-h-sm);padding:0 var(--sp-3);border-radius:var(--r-pill);border:var(--bw) solid var(--control-line);background:transparent;color:var(--ink);font:inherit;font-size:var(--fs-sm);cursor:pointer}
.copy:hover{background:var(--hover)}
/* On a phone the four tabs need the whole bar (Copy hid "Prowl apps" under it at 390, the board, 2026-10-17): Copy sits
   on its own line above them, at the right, and each tab gives up a little padding. */
@media(max-width:480px){.code-bar{flex-wrap:wrap;padding-top:var(--sp-3)}.code-bar>.tabs{order:2;flex-basis:100%}.code-bar>.copy{order:1;margin:0 0 0 auto;height:var(--touch-target)}.code-bar .tab{padding-inline:var(--sp-2)}}
@media(max-width:340px){.code-bar .tab{padding-inline:var(--sp-1)}}
.copy .i{width:var(--sp-4);height:var(--sp-4)}
.copy.done{color:var(--good);border-color:var(--good)}
.nl-code pre{margin:0;padding:var(--sp-5);overflow-x:auto;font-family:var(--font-mono);font-size:var(--fs-sm);line-height:var(--lh-loose);color:var(--ink)}
.nl-code pre code{font:inherit}
.t-c{font-weight:var(--fw-semibold)}
.t-f,.t-k{color:var(--brand-d)}
.t-s{color:var(--green)}
.t-n{color:var(--ink2)}
.nl-panel[hidden]{display:none}
.setting{margin:0;padding:var(--sp-45) var(--sp-5) var(--sp-5);display:grid;gap:var(--sp-35);font-size:var(--fs-sm)}
.setting div{display:grid;gap:var(--sp-1)}
.setting dt{color:var(--ink3);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--ls-wide)}
.setting dd{margin:0;font-family:var(--font-mono);overflow-wrap:anywhere}
.codeblock{position:relative}
.codeblock .copy{position:absolute;top:var(--sp-3);right:var(--sp-3);margin:0}
@media (max-width:860px){.send{grid-template-columns:minmax(0,1fr)}}
.nl-details{margin-top:var(--s-gap);border:var(--bw) solid var(--glass-edge);border-radius:var(--r-panel);background:var(--surface)}
.nl-details>summary{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-5) var(--sp-6);cursor:pointer;list-style:none}
.nl-details>summary::-webkit-details-marker{display:none}
/* The design system's one chevron (controls.css), beside the label at the start of the row, with the quieter line under
   both. A " +" and " \2212" of our own made three markers across the site (the board, 2026-10-17). Same selector as the
   design system's, so this outranks it. */
details:is(.nl-details,.nl-more):not(.passwrap):not(.s-q):not(.s-menu)>summary{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;row-gap:var(--sp-1)}
details:is(.nl-details,.nl-more)>summary::after{order:1}
details:is(.nl-details,.nl-more)>summary>small{order:2;flex-basis:100%}
details:is(.nl-details,.nl-more)[open]>summary>small{display:none}   /* the hint names what is folded away; open, the content says it */
.nl-details>summary span{color:var(--ink);font-weight:var(--fw-semibold)}
:is(.nl-details,.nl-more)>summary small{color:var(--ink2);font-size:var(--fs-sm);font-weight:var(--fw-regular);text-wrap:pretty}
.nl-details>.send{padding:0 var(--sp-5) var(--sp-5)}
/* A disclosure that is part of a card (the rule editor's hand-offs, item 235), never a card inside it: dividers above and below,
   the design system's chevron row, and a body on the card's full width. */
.nl-more{margin-top:var(--sp-4);border-block:var(--bw) solid var(--line2)}
.nl-stack>.nl-more{margin-top:var(--sp-1)}.nl-stack>:has(+.nl-more){margin-bottom:0}   /* in a stack the row sits the same 16px under its neighbour as in the rule editor, never 40 */
.nl-more>summary{padding:var(--sp-3) 0;color:var(--ink);font-weight:var(--fw-semibold)}
.nl-morebody{display:grid;gap:var(--sp-5);padding-bottom:var(--sp-5);container-type:inline-size}
/* .wrap .card h3:not([class]) sets margin-block, so this rule has to outrank it */
.wrap .card .nl-morebody h3:not([class]){margin:0 0 var(--sp-2);font-size:var(--fs-sm);color:var(--ink2)}   /* a group inside the folded part reads under its label, never level with it */
.nl-morebody .nl-conds:empty{display:none}
.nl-morebody .nl-grid{margin:0}
.nl-morebody .nl-span{grid-column:1/-1}
/* the editor column is narrow beside Try it at 1024-1280, so two fields share a row only when the card has room for
   both choices; the viewport is the wrong ruler here */
@container (max-width:30rem){.nl-morebody .nl-two{grid-template-columns:minmax(0,1fr)}}
#r-throttlebox{display:grid;gap:var(--sp-2);margin-top:var(--sp-3)}
#r-throttlebox[hidden]{display:none}
#r-throttlebox>p{margin:0}
.nl-morebody .btnrow{margin:0}
.nl-more+.nl-check{margin-top:var(--sp-4)}
/* A document (doc_page.py): PageSoar's legal article around rendered Markdown. */
.nl-doc-tabs{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-6)}
.nl-doc h1{margin-bottom:var(--sp-4)}
.nl-doc h2,.nl-doc h3{scroll-margin-top:var(--size-14)}
.nl-doc .anchor{margin-inline-start:var(--sp-2);color:var(--ink3);text-decoration:none;opacity:0}
.nl-doc :is(h2,h3):hover .anchor,.nl-doc .anchor:focus-visible{opacity:1}
.nl-doc code{font-family:var(--font-mono);font-size:var(--fs-sm);padding:0 var(--sp-1);border-radius:var(--r-ctl);background:var(--sunk)}
.nl-doc pre{margin:var(--sp-4) 0;padding:var(--sp-4);overflow-x:auto;border-radius:var(--r-panel);background:var(--sunk);
  border:var(--bw) solid var(--glass-edge);line-height:var(--lh-base)}
.nl-doc pre code{padding:0;background:none}
.nl-doc .table-wrap{margin:var(--sp-4) 0;overflow-x:auto;border:var(--bw) solid var(--glass-edge);border-radius:var(--r-panel)}
.nl-doc table{border-collapse:collapse;width:100%;font-size:var(--fs-sm)}
.nl-doc :is(th,td){padding:var(--sp-2) var(--sp-4);text-align:start;vertical-align:top;border-bottom:var(--bw) solid var(--line2);overflow-wrap:normal}
.nl-doc th{color:var(--ink3);font-weight:var(--fw-semibold)}
.nl-doc tr:last-child td{border-bottom:0}
.nl-doc-toc{margin-top:var(--sp-8);padding-top:var(--sp-5);border-top:var(--bw) solid var(--line2)}
.nl-doc-toc h2{font-size:var(--fs-sm);color:var(--ink3)}
.nl-doc > :is(p,ul,ol,blockquote,h1,h2,h3,h4){max-width:min(var(--size-140),72ch)}
.nl-doc .table-wrap{padding:var(--sp-1)}
@media (max-width:600px){.s-grid3,.s-grid2{grid-template-columns:minmax(0,1fr)}}
/* The console's signed-out pages (org_ui.py): one card, the passkey first, the company sign-in second. */
.s-signin h1{margin-bottom:var(--sp-2)}
.s-signin .s-lede{margin-bottom:var(--sp-5)}
.s-signin [role=status]{margin:var(--sp-3) 0 0;color:var(--ink2);font-size:var(--fs-sm)}
.s-signin [role=status]:empty{display:none}
.s-signin [role=status][data-kind=error],.s-signin-err{color:var(--bad-ink);font-weight:var(--fw-semibold)}
.s-signin [role=status][data-kind=error]::before{content:"Error. ";font-weight:var(--fw-bold)}
.s-or{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-5) 0;color:var(--ink3);font-size:var(--fs-sm)}
.s-or::before,.s-or::after{content:"";flex:1;border-top:var(--bw) solid var(--line2)}
.s-sso .btn{margin-top:var(--sp-3)}
.s-signin-new{margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:var(--bw) solid var(--line2);color:var(--ink2);font-size:var(--fs-sm)}
.s-signin-new h2{font-size:var(--fs-lead);margin:0 0 var(--sp-2)}
.s-signin-new ol{margin:0;padding-inline-start:var(--sp-5)}
/* site.css lays the footer out as a brand column and four link tracks; Nowlark has as many link columns as
   pages._FOOTER_COLUMNS lists (three), so the fifth track stood empty on every public page. Above phone width the
   row takes its tracks from the columns themselves: brand twice the share of each column, a full row of its own
   between 641 and 900px. */
@media (min-width:641px){
  .s-foot-grid{display:flex;flex-wrap:wrap}
  .s-foot-grid>*{flex:1 1 0;min-width:0}
  .s-foot-grid>.s-foot-brand{flex-grow:2}
}
@media (min-width:641px) and (max-width:900px){.s-foot-grid>.s-foot-brand{flex-basis:100%}}
/* The footer's support address is one unbreakable word: in two columns at 320px it ran 11px past the screen. */
@media (max-width:360px){.s-foot-grid{grid-template-columns:minmax(0,1fr)}}

/* The signed-in team pages (org_ui) are PageSoar's app shell (design/app.css). What its sheet has no block for: a form row, a stacked
   form, a checkbox line, the status line under a control, and a code the page shows once. */
.nl-form{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:end;margin:var(--sp-3) 0 0}
.nl-form .lbl{margin:0}
.nl-stack{flex-direction:column;align-items:stretch;max-width:var(--measure-text)}
.nl-stack>.nl-grid{margin:0}
.nl-lines>p{margin:0}   /* one sentence a line, read as one hint: no paragraph gap between them */
.lbl>.field[type=number]{display:block;max-width:var(--size-30)}   /* a count of minutes is three digits, not a full-width box */
/* A card that is mostly reading (company sign-in's six steps) hugs its text: the measure plus its own padding and border, never
   the full column with the text stopping a third short of the edge (item 173). */
.card.nl-prose{max-width:calc(var(--s-measure) + 2 * var(--sp-4) + 2 * var(--bw))}   /* 74ch of this face ran ~94 characters a line (impeccable) */
.nl-check{display:flex;gap:var(--sp-2);align-items:flex-start;font-weight:var(--fw-regular);color:var(--ink2)}
.nl-check input{margin-top:var(--sp-1)}
/* A form's own fields (item 151): each field is one bordered block, its controls on a grid of equal columns, one column on a phone. */
.nl-fields{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:grid;gap:var(--sp-4)}
.nl-ownfield{padding:var(--sp-4);border:var(--bw) solid var(--line2);border-radius:var(--r-panel);background:var(--sunk)}
.nl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);align-items:end;margin:0 0 var(--sp-3)}
.nl-grid .lbl{margin:0}
.nl-grid .field{width:100%;box-sizing:border-box}
.nl-wide{grid-column:1/-1}
/* The form builder's field and rule editors sit beside the live preview, about 600px wide from 768 to 1024px: three
   columns there gave each select 158px and cut its choice off. Two columns under 40rem of editor, one under 24rem; a
   thank-you rule then reads When over the test and its value. */
.nl-fb-body,.nl-ownfield{container-type:inline-size}
@container (max-width:40rem){
  .nl-fb-body .nl-grid,.nl-ownfield .nl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nl-ownfield .nl-when>:first-child{grid-column:1/-1}
}
@container (max-width:24rem){.nl-fb-body .nl-grid,.nl-ownfield .nl-grid{grid-template-columns:minmax(0,1fr)}}
.nl-ticks{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4)}
/* How a form looks (item 154): two equal columns where a row has two choices; the preview is the form's own page, framed, on its own background. */
.nl-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.nl-css{display:block;margin:var(--sp-4) 0 var(--sp-2)}
.nl-css textarea{width:100%;box-sizing:border-box;font-family:var(--font-mono);font-size:var(--fs-sm)}
.nl-words{margin:var(--sp-4) 0}
.nl-words summary{cursor:pointer;font-weight:var(--fw-semibold)}
.nl-preview{display:block;width:100%;height:calc(var(--sp-4) * 36);margin:var(--sp-4) 0;border:var(--bw) solid var(--line2);border-radius:var(--r-panel)}
@media (max-width:600px){.nl-grid{grid-template-columns:minmax(0,1fr)}}
/* The form builder (item 182). A toolbar with the save state and undo; a palette of every type as equal tiles; each field a
   row (grip, type, its question inline, Required, actions) whose details open beneath it; a section's heading is a row of its
   own with its fields indented under a rule; a step break is a labelled divider. One column at every width. */
.nl-fb-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3)}
.nl-fb-top h2{margin:0;margin-right:auto}
.nl-measure{max-width:65ch}                               /* a sentence in a wide form keeps a reading measure (Impeccable line-length) */
.nl-fb-state{font-size:var(--fs-sm);color:var(--ink3)}
.nl-fb-state[data-kind=ok]{color:var(--good)}
.nl-fb-state[data-kind=warn]{color:var(--warn-ink)}
.nl-fb-state[data-kind=bad]{color:var(--bad-ink)}
.nl-fb-pals{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--size-34),1fr));gap:var(--sp-2);margin:var(--sp-4) 0}
.nl-fb-pal{display:flex;align-items:center;gap:var(--sp-2);min-height:var(--touch-target);padding:0 var(--sp-3);border:var(--bw) solid var(--line2);border-radius:var(--r-ctl);
  background:var(--card);color:var(--ink);font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-medium);text-align:left;cursor:pointer;white-space:nowrap}
.nl-fb-pal .nl-ico{color:var(--brand)}
.nl-fb-pal:hover{border-color:var(--ink4);background:var(--hover)}
.nl-fb-pal:focus-visible,.nl-fb-card:focus-visible,.nl-fb-theme:focus-visible{outline:var(--bw-2) solid var(--brand);outline-offset:var(--ring-offset)}
.nl-fb-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.nl-fb-field{border:var(--bw) solid var(--line2);border-radius:var(--r-panel);background:var(--card)}
.nl-fb-field.nl-fb-insec{margin-left:var(--sp-4)}
.nl-fb-field.nl-fb-bad{border-color:var(--bad-ink);box-shadow:0 0 0 var(--bw) var(--bad-ink)}
.nl-fb-field.nl-fb-dragging{box-shadow:var(--shadow-raise);border-color:var(--brand);position:relative;z-index:var(--z-popover)}
.nl-fb-hd{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;align-items:center;gap:var(--sp-2);padding:var(--sp-15) var(--sp-2)}
.nl-fb-icon{min-width:var(--ctl-h-sm);min-height:var(--ctl-h-sm);padding:0;display:inline-grid;place-items:center;color:var(--ink3)}
.nl-fb-icon:hover{color:var(--ink)}
.nl-fb-handle{cursor:grab;touch-action:none}
.nl-fb-dragging .nl-fb-handle{cursor:grabbing}
.nl-fb-kind{display:inline-flex;align-items:center;gap:var(--sp-15);color:var(--ink3);font-size:var(--fs-xs);font-weight:var(--fw-medium);white-space:nowrap}
.nl-fb-kind .nl-ico{color:var(--brand)}
.nl-fb-q.field{width:100%;box-sizing:border-box;font-weight:var(--fw-semibold)}
.nl-fb-req{margin:0;white-space:nowrap;font-size:var(--fs-sm)}
.nl-fb-acts{display:inline-flex;gap:var(--sp-05)}
.nl-fb-more .nl-ico{transition:transform var(--dur-base) var(--ease-out)}
.nl-fb-more[aria-expanded=true] .nl-ico{transform:rotate(.5turn)}
.nl-fb-body{padding:var(--sp-3) var(--sp-4) var(--sp-1);border-top:var(--bw) solid var(--line2);background:var(--sunk);border-radius:0 0 var(--r-panel) var(--r-panel)}
.nl-fb-sechd{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2);padding:var(--sp-1) 0;border-bottom:var(--bw-2) solid var(--brand)}
.nl-fb-sechd .nl-ico{color:var(--brand)}
.nl-fb-sechd .field{flex:1;min-width:0;font-weight:var(--fw-semibold)}
.nl-fb-step{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-2);padding-top:var(--sp-2);border-top:var(--bw) dashed var(--line)}
.nl-fb-steptag{font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--accent-ink);background:var(--accent-weak);border-radius:var(--r-pill);padding:var(--sp-05) var(--sp-25)}
.nl-fb-optlist{list-style:none;margin:0 0 var(--sp-2);padding:0;display:grid;gap:var(--sp-15)}
.nl-fb-opt{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:var(--sp-1);align-items:center}
.nl-fb-opt .field{width:100%;box-sizing:border-box}
.nl-fb-paste{margin:0 0 var(--sp-3)}
.nl-fb-paste .field{width:100%;box-sizing:border-box}
.nl-fb-problem{color:var(--bad-ink);font-size:var(--fs-sm)}
.nl-fb-opts{min-width:0}
.nl-fb-sr{position:absolute;width:var(--sp-px);height:var(--sp-px);overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nl-fb-tpl{height:calc(var(--sp-4) * 30)}
/* Named themes in How it looks: equal tiles, each a swatch (background, accent, text) over its name. */
.nl-fb-themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--size-28),1fr));gap:var(--sp-2);margin:0 0 var(--sp-3)}
.nl-fb-theme{display:grid;gap:var(--sp-15);padding:var(--sp-2);border:var(--bw) solid var(--line2);border-radius:var(--r-ctl);background:var(--card);color:var(--ink);font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-medium);cursor:pointer;text-align:left}
.nl-fb-theme[aria-pressed=true],.nl-fb-card[aria-pressed=true]{border-color:var(--brand);box-shadow:0 0 0 var(--bw) var(--brand);background:var(--accent-weak)}
.nl-fb-swatch{display:grid;grid-template-columns:2fr 1fr 1fr;height:var(--ctl-h-sm);border-radius:var(--r-sm);overflow:hidden;border:var(--bw) solid var(--line2)}
/* The New form gallery: template cards two to a row, one on a phone. */
.nl-fb-gallery{border:0;margin:0;padding:0;min-width:0}
.nl-fb-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2);margin-top:var(--sp-2)}
.nl-fb-card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-1);padding:var(--sp-3);border:var(--bw) solid var(--line2);border-radius:var(--r-panel);background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.nl-fb-card:hover{border-color:var(--ink4)}
.nl-fb-facts{font-size:var(--fs-xs);color:var(--ink3)}
@media (max-width:600px){
  .nl-fb-cards{grid-template-columns:minmax(0,1fr)}
  .nl-fb-top h2{flex-basis:100%}
  .nl-fb-hd{grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"grip q q q" "grip kind req acts"}
  .nl-fb-hd>.nl-fb-handle{grid-area:grip}.nl-fb-hd>.nl-fb-q{grid-area:q}.nl-fb-hd>.nl-fb-acts{grid-area:acts}
  .nl-fb-hd>.nl-fb-kind{grid-area:kind}.nl-fb-kind>span{display:none}   /* the icon says the type; the question box's name says it aloud */.nl-fb-hd>.nl-fb-req{grid-area:req}
  .nl-fb-field.nl-fb-insec{margin-left:var(--sp-2)}
}
.main [role=status]{margin:var(--sp-3) 0 0;color:var(--ink2);font-size:var(--fs-sm)}
.main [role=status]:empty{display:none}
.main [role=status][data-kind=error]{color:var(--bad-ink);font-weight:var(--fw-semibold)}
.main [role=status][data-kind=error]::before{content:"Error. ";font-weight:var(--fw-bold)}
/* Code breaks at its spaces and <wbr> points first (a URL gets one after :// and each / and .); mid-word only when one piece is
   wider than the line. break-all split "http / s://api.nowlark.com/or / g/sso/callback" at 390 (queue 209). */
.main code{padding:var(--sp-05) var(--sp-2);border-radius:var(--r-ctl);background:var(--sunk);overflow-wrap:anywhere}
.main [hidden]{display:none!important}
.main .card>h2{margin-top:0}
.tbl tbody th{padding:var(--sp-25) var(--sp-3) var(--sp-25) 0;border-bottom:var(--bw) solid var(--line2);text-align:left;font-weight:var(--fw-medium);vertical-align:top}
.tbl tr:last-child th{border-bottom:none}
/* A list none of whose rows has a role (the activity log, forms, passkeys) gives the role column back to its text:
   kept, it stood 168 to 272px wide and empty down the whole Activity card. */
@media (min-width:821px){
  .people:not(:has(.prole .badge))>.person{grid-template-columns:minmax(0,2fr) auto minmax(0,auto)}
  .people:not(:has(.prole .badge)) .prole{display:none}
}
.person a:not(.btn){text-decoration:none}
.person a:not(.btn):hover{text-decoration:underline}
.sb-brand .mark{width:var(--sp-65);height:var(--sp-65);flex:none}
/* The sign-in card is solid, not frosted: a detector (and a low-vision reader) samples the pixels behind frosted glass, where the page's gradient shows through. */
.s-signin{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--surface)}
.s-signin .field,.s-signin .btn{padding-block:var(--sp-2)}
.s-navright .btn[aria-current],.s-menu-actions .btn[aria-current]{background:var(--hover);color:var(--ink)}
.s-nav [hidden]{display:none!important}
/* a button's label keeps a little air above and below it, whatever its min-height: PageSoar's sheets give 0 vertical padding (Impeccable cramped-padding) */
.btn,.btn.s-lg{padding-block:var(--sp-15)}
.main .lead{max-width:62ch}
.sb-brand .bs{color:var(--ink2)}
/* The sidebar floats as PageSoar's does (inset, panel corners, edge, shadow) on a solid surface: blurred glass over the one orange glow made the
   Impeccable ratchet sample the brand text against the glow (1.1:1 on 5 pages), and the glow is the page's single gradient. */
.sidebar{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--surface)}
.pwho,.pwho *{overflow-wrap:break-word}                   /* an address or a long message wraps inside its row instead of pushing it wider */
#demo-note{max-width:62ch}                                /* the sample banner is a sentence, not a bar */
.nl-code+.btnrow{margin-top:var(--sp-3)}                     /* a copy button under a code block, not touching it */
/* On a phone a row's buttons drop under the name: beside it they leave the name a column too narrow to hold an address or a short sentence. */
@media(max-width:480px){.person{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who who" "role stat" "acts acts"}
.person>.btnrow{grid-area:acts}}
.nl-doc-cta{justify-content:flex-start;margin:var(--sp-4) 0 var(--sp-6)}

/* Help visuals (docs/support/*.md): drawn in CSS, no image anywhere. Tokens only, no gradient (one orange glow per page). */
.hv{margin:var(--sp-6) 0;padding:var(--sp-5);border:var(--bw) solid var(--glass-edge);border-radius:var(--r-panel);background:var(--surface);
  display:flex;flex-direction:column;gap:var(--sp-4)}
.hv figcaption{color:var(--ink3);font-size:var(--fs-sm);margin:0;max-width:56ch}
.hv-flow{display:grid;gap:var(--sp-7);align-items:stretch}
.hv-flow.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.hv-flow.c3,.hv-flow.c4{grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}
.hv-node{position:relative;display:flex;flex-direction:column;justify-content:center;gap:var(--sp-1);padding:var(--sp-4);border-radius:var(--r-panel);
  background:var(--sunk);color:var(--ink);font-size:var(--fs-sm);line-height:var(--lh-snug);min-width:0}
.hv-node b{font-weight:var(--fw-semibold);font-size:var(--fs-body)}
.hv-node small{color:var(--ink3);font-size:var(--fs-sm)}
.hv-node.on{background:var(--brand-l);color:var(--brand-d)}
.hv-node.on small{color:var(--brand-d)}
.hv-node.good{background:var(--tint-good)}
.hv-node.warm{background:var(--tint-warm)}
.hv-flow:not(.plain) > .hv-node:not(:last-child)::after{content:"";position:absolute;top:50%;inset-inline-start:calc(100% + var(--sp-2));width:var(--sp-5);
  height:var(--bw-2);background:var(--ink4)}
.hv-flow:not(.plain) > .hv-node:not(:last-child)::before{content:"";position:absolute;top:50%;inset-inline-start:calc(100% + var(--sp-2) + var(--sp-5) - var(--sp-1));
  margin-top:calc(var(--sp-1) * -1 + var(--bw));border:var(--sp-1) solid transparent;border-inline-start-color:var(--ink4);border-inline-end-width:0}
.hv-card{display:flex;gap:var(--sp-3);padding:var(--sp-4);border-radius:var(--r-panel);background:var(--sunk)}
.hv-ico{flex:none;width:var(--sp-8);height:var(--sp-8);border-radius:var(--r-sm);background:var(--brand);display:grid;place-items:center;
  color:var(--on-fill);font-weight:var(--fw-bold);font-size:var(--fs-sm)}
.hv-card-t{display:flex;flex-direction:column;gap:var(--sp-05);min-width:0;font-size:var(--fs-sm)}
.hv-card-t small{color:var(--ink3);font-size:var(--fs-xs)}
.hv-card-t b{font-weight:var(--fw-semibold)}
.hv-btns{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2)}
.hv-btns span{padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);background:var(--surface);box-shadow:inset 0 0 0 var(--bw) var(--glass-edge);
  font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.hv-btns span.p{background:var(--brand-l);color:var(--brand-d);box-shadow:none}
.hv-bar{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-sm)}
.hv-bar > span{flex:none;width:var(--size-24);color:var(--ink2)}
.hv-bar > div{flex:1;display:flex;height:var(--sp-3);border-radius:var(--r-pill);background:var(--sunk);overflow:hidden}
.hv-bar i{background:var(--brand);border-radius:var(--r-pill)}
.hv-bar i.g{background:var(--good)}
.hv-bar i.w{background:var(--warn)}
.hv-bar i.r{background:var(--bad)}
.hv-bar i.n1{flex:1}.hv-bar i.n2{flex:2}.hv-bar i.n3{flex:3}.hv-bar i.n4{flex:4}.hv-bar i.n5{flex:5}
.hv-bar b{flex:0}
.hv-bar b.n1{flex:4}.hv-bar b.n2{flex:3}.hv-bar b.n3{flex:2}.hv-bar b.n4{flex:1}.hv-bar b.n5{flex:0}
.hv-tl{display:flex;gap:0;align-items:flex-start}
.hv-tl > div{flex:1;position:relative;padding-top:var(--sp-5);font-size:var(--fs-sm);min-width:0}
.hv-tl > div::before{content:"";position:absolute;top:var(--sp-1);inset-inline:0;height:var(--bw-2);background:var(--line)}
.hv-tl > div::after{content:"";position:absolute;top:0;inset-inline-start:0;width:var(--sp-3);height:var(--sp-3);border-radius:var(--r-pill);background:var(--brand)}
.hv-tl small{display:block;color:var(--ink3);font-size:var(--fs-xs)}
.hv-tl b{font-weight:var(--fw-semibold)}
.hv-stairs{display:flex;flex-direction:column;gap:var(--sp-2)}
.hv-stairs > div{padding:var(--sp-2) var(--sp-4);border-radius:var(--r-ctl);background:var(--sunk);font-size:var(--fs-sm)}
.hv-stairs > div b{font-weight:var(--fw-semibold)}
.hv-stairs .s2{margin-inline-start:var(--sp-5)}.hv-stairs .s3{margin-inline-start:var(--sp-8)}
.hv-stairs .s4{margin-inline-start:var(--size-14);background:var(--brand-l);color:var(--brand-d)}
.hv-layers{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1)}
.hv-layers > div{width:100%;padding:var(--sp-2) var(--sp-4);border-radius:var(--r-ctl);background:var(--sunk);text-align:center;font-size:var(--fs-sm)}
.hv-layers .l2{max-width:var(--size-150)}.hv-layers .l3{max-width:var(--size-128)}.hv-layers .l4{max-width:var(--size-108)}
.hv-layers .l5{max-width:var(--size-90)}.hv-layers .l6{max-width:var(--size-74);background:var(--brand-l);color:var(--brand-d)}
.hv-form{display:flex;flex-direction:column;gap:var(--sp-3)}
.hv-form label{display:flex;flex-direction:column;gap:var(--sp-1);font-size:var(--fs-xs);color:var(--ink3)}
.hv-form label i{display:block;height:var(--sp-7);border-radius:var(--r-ctl);background:var(--sunk);box-shadow:inset 0 0 0 var(--bw) var(--line)}
.hv-form label i.tall{height:var(--size-14)}
.hv-form label.trap i{background:none;box-shadow:inset 0 0 0 var(--bw) var(--warn);border-radius:var(--r-ctl)}
.hv-form .hv-btns{margin-top:0}
.hv-people{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.hv-p{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);font-size:var(--fs-xs);color:var(--ink3);min-width:var(--size-14)}
.hv-p::before{content:attr(data-i);display:grid;place-items:center;width:var(--sp-8);height:var(--sp-8);border-radius:var(--r-pill);
  background:var(--sunk);color:var(--ink);font-weight:var(--fw-semibold);font-size:var(--fs-sm);box-shadow:inset 0 0 0 var(--bw-2) var(--line)}
.hv-p.on::before{background:var(--tint-good);box-shadow:inset 0 0 0 var(--bw-2) var(--good)}
.hv-p.off::before{background:var(--tint-warm);box-shadow:inset 0 0 0 var(--bw-2) var(--warn)}
.hv-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--size-42),1fr));gap:var(--sp-4)}
.hv-split > div{padding:var(--sp-4);border-radius:var(--r-panel);background:var(--sunk);font-size:var(--fs-sm);display:flex;flex-direction:column;gap:var(--sp-2)}
.hv-split b{display:block;margin:0;font-weight:var(--fw-semibold);font-size:var(--fs-sm);color:var(--ink3)}
.hv-split code{background:var(--surface)}
.hv-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--size-96)),1fr));gap:var(--sp-3);margin:var(--sp-5) 0}
.hv-cards a{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-4);border-radius:var(--r-panel);background:var(--surface);
  box-shadow:inset 0 0 0 var(--bw) var(--glass-edge);text-decoration:none;color:var(--ink);font-size:var(--fs-sm)}
.hv-cards a:hover{box-shadow:inset 0 0 0 var(--bw) var(--brand)}
.hv-cards b{font-size:var(--fs-body);font-weight:var(--fw-semibold)}
.hv-cards span{color:var(--ink3)}
.hv-flow.c3:not(.plain) > .hv-node:not(:last-child)::after,.hv-flow.c4:not(.plain) > .hv-node:not(:last-child)::after{top:calc(100% + var(--sp-2));inset-inline-start:50%;width:var(--bw-2);height:var(--sp-3)}
.hv-flow.c3:not(.plain) > .hv-node:not(:last-child)::before,.hv-flow.c4:not(.plain) > .hv-node:not(:last-child)::before{top:calc(100% + var(--sp-2) + var(--sp-3) - var(--sp-1));inset-inline-start:50%;margin-top:0;
  margin-inline-start:calc(var(--sp-1) * -1 + var(--bw));border:var(--sp-1) solid transparent;border-top-color:var(--ink4);border-bottom-width:0}
@media (max-width:900px){.hv-flow.c2,.hv-flow.c3,.hv-flow.c4{grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}
  .hv-flow:not(.plain) > .hv-node:not(:last-child)::after{top:calc(100% + var(--sp-2));inset-inline-start:50%;width:var(--bw-2);height:var(--sp-3)}
  .hv-flow:not(.plain) > .hv-node:not(:last-child)::before{top:calc(100% + var(--sp-2) + var(--sp-3) - var(--sp-1));inset-inline-start:50%;margin-top:0;
    margin-inline-start:calc(var(--sp-1) * -1 + var(--bw));border:var(--sp-1) solid transparent;border-top-color:var(--ink4);border-bottom-width:0}
  .hv-tl{flex-direction:column}.hv-bar > span{width:var(--size-18)}}

/* No orphan card: three cards sit three across (one column on narrow screens), and four cards sit two by two (guard rule 9) */
.s-faq:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.s-faq:has(> :nth-child(3):last-child){grid-template-columns:minmax(0,1fr)}}
.s-grid3:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.s-grid3:has(> :nth-child(3):last-child){grid-template-columns:minmax(0,1fr)}}

@media (max-width:640px){.s-grid3,.s-grid3:has(> :nth-child(4):last-child){grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.s-faq{grid-template-columns:minmax(0,1fr)}}
.s-q:has(> .hv-card){display:flex;flex-direction:column}
.s-q > .hv-card{margin-top:auto}
.s-card:has(> .hv-card){display:flex;flex-direction:column}
.s-card > .hv-card{margin-top:auto}
.s-card > .hv-card{margin-top:auto}
.s-card > p + .hv-card{margin-top:auto}
.nl-res{margin-top:auto;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-panel);background:var(--sunk);border:var(--bw) solid var(--line2);font-size:var(--fs-xs)}
.nl-res div{display:flex;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-15) 0;border-bottom:var(--bw) solid var(--line2);color:var(--ink3)}
.nl-res div:last-child{border-bottom:0}
.nl-res b{color:var(--ink);font-weight:var(--fw-semibold);text-align:right}
.nl-hero-r{display:grid;gap:var(--sp-3);min-width:0}
.nl-arrives{margin:0;text-align:center;color:var(--ink2);font-size:var(--fs-sm)}
/* Open pages (/teams, /agents; body class nl-open, the 2026-10 redesign): open sections, big centred headings, icon tiles
   instead of boxes. The plan cards and the drawn console are the only boxed things. */
.nl-open .s-sec{padding-block:var(--s-hero-top)}
.nl-open .s-head h2{font-size:calc(var(--s-fs-h2) * 1.27)}
.nl-open .k-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-gap-lg) var(--sp-8)}
.nl-open .k-grid h3{margin:0 0 var(--sp-2);font-size:var(--fs-h3)}
.nl-open .k-grid p{margin:0;color:var(--ink2)}
.nl-open .k-grid code{font-family:var(--font-mono);font-size:var(--fs-code-inline);background:var(--tint);padding:var(--sp-05) var(--sp-15);border-radius:var(--r);overflow-wrap:anywhere}
.nl-open .k-ico{display:grid;place-items:center;width:var(--s-btn-h);height:var(--s-btn-h);margin:0;border-radius:var(--r-lg);background:var(--brand-l);color:var(--brand-d)}
/* The icon sits beside its heading, not stacked above it (Impeccable's icon-tile-stack, gated by check_layout's ratchet). */
.nl-open .k-grid > div:has(> .k-ico){display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--sp-4);row-gap:var(--sp-2);align-content:start}
.nl-open .k-grid > div:has(> .k-ico) > h3{margin:0;align-self:center}
.nl-open .k-grid > div:has(> .k-ico) > p{grid-column:2}
/* One line of small print under a centred block: the box hugs a readable measure (Impeccable's line-length). */
.nl-open .s-site-note,.nl-open .s-wrap > .m-foot{max-width:var(--s-measure);margin-inline:auto;text-wrap:balance}
.nl-open .k-ico svg{width:var(--sp-55);height:var(--sp-55)}
.nl-open .k-row{display:flex;gap:var(--sp-3);flex-wrap:wrap;justify-content:center}
@media (max-width:900px){.nl-open .k-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.nl-open .k-grid{grid-template-columns:minmax(0,1fr)}}
.nl-open .t-go{margin-top:var(--s-gap-lg)}
.nl-open .t-join{max-width:var(--s-measure);margin:0 auto;text-align:center;color:var(--ink2)}
.nl-open .s-wrap > h3.t-sub{margin:var(--s-gap-lg) 0 var(--sp-8);text-align:center;font-size:var(--fs-h3);color:var(--ink2)}
.nl-open .t-faq{grid-template-columns:minmax(0,1fr);max-width:var(--s-w-text)}
.nl-open .t-faq .s-q{padding-inline:0;background:none;border:0;border-top:var(--bw) solid var(--line2);border-radius:0;box-shadow:none}
/* The plan cards: name and where it is bought, the price, the button, then the facts. */
.nl-open .m-plans .s-plan{display:flex;flex-direction:column}
.nl-open .m-plans .s-plan-for{margin:var(--sp-2) 0 0}
.nl-open .m-plans .s-ticks{flex:1;margin-top:var(--sp-4)}
.nl-open .m-ph{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.nl-open .m-ph h3{margin:0}
.nl-open .m-chip{padding:var(--sp-05) var(--sp-25);border:var(--bw) solid var(--line2);border-radius:var(--r-pill);color:var(--ink2);font-size:var(--fs-micro);white-space:nowrap}
.nl-open .m-price{display:flex;flex-direction:column;gap:var(--sp-05);margin:var(--sp-2) 0 var(--sp-4)}
.nl-open .m-price b{font-size:var(--s-fs-price);line-height:var(--lh-tight);letter-spacing:var(--ls-tight)}
.nl-open .m-price span{min-height:calc(var(--fs-sm) * 3);color:var(--ink3);font-size:var(--fs-sm);line-height:var(--lh-base)}
.nl-open .m-cta{display:grid;margin:0 0 var(--sp-4)}
.nl-open .s-wrap > .m-foot{margin:var(--sp-6) auto 0;text-align:center;color:var(--ink3);font-size:var(--fs-sm)}
.nl-open .m-appicon{flex:none;display:block;width:var(--sp-7);height:var(--sp-7);border-radius:var(--r)}
/* The hero's one example (item 144): one alert on three phones, answered once. */
.nl-open .t-phones{max-width:var(--s-w);margin:var(--sp-9) auto 0}
.nl-open .t-phones-in{display:grid;grid-template-columns:repeat(3,minmax(0,var(--size-74)));justify-content:center;gap:var(--s-gap)}
.nl-open .t-phone{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5) var(--sp-3) var(--sp-6);text-align:left;
  border-radius:calc(var(--r-lg) * 3);background:var(--sunk);box-shadow:inset 0 0 0 var(--bw) var(--glass-edge)}
.nl-open .t-phone.t-you{box-shadow:inset 0 0 0 var(--bw) var(--brand)}
.nl-open .t-who{text-align:center;color:var(--ink3);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.nl-open .t-you .t-who{color:var(--brand)}
.nl-open .t-clock{margin-bottom:var(--sp-2);text-align:center;font-size:var(--fs-h1);font-weight:var(--fw-semibold);line-height:var(--lh-tight)}
.nl-open .t-phone .hv-card{background:var(--surface)}
.nl-open .t-phone .hv-card-t span{color:var(--ink2)}
.nl-open .t-note{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);margin-top:auto;padding-top:var(--sp-2);
  color:var(--ink2);font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.nl-open .t-note svg{flex:none;width:var(--sp-5);height:var(--sp-5);color:var(--ink3)}
.nl-open .t-you .t-note svg{color:var(--good)}
.nl-open .t-cap{max-width:var(--s-measure);margin:var(--sp-5) auto 0;color:var(--ink3);font-size:var(--fs-sm);text-align:center}
/* A phone is too narrow for three side by side: Hana's whole screen first, then only the closed line on the others. */
@media (max-width:767px){.nl-open .t-phones-in{grid-template-columns:minmax(0,var(--size-90));gap:var(--sp-3)}
  .nl-open .t-phone.t-you{order:-1}.nl-open .t-phone:not(.t-you) .t-alert,.nl-open .t-phone:not(.t-you) .t-clock{display:none}
  .nl-open .t-phone:not(.t-you){flex-direction:row;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-panel)}
  .nl-open .t-phone:not(.t-you) .t-note{margin:0;padding:0}}


/* The home page (home_page.py, the redesign the owner approved 2026-10-12), scoped to its body class: open sections with
   bigger headings, a notification that asks, the live card and its feed, open tiles, the plan's channel chip. */
.nl-home .s-sec{padding-block:calc(var(--s-sec-y) * 1.35)}
.nl-home .s-head h2,.nl-home .s-row-t h2,.nl-agent h2{font-size:calc(var(--s-fs-h2) * 1.25)}
.nl-home .s-row-t h2,.nl-agent h2{margin:0 0 var(--sp-4)}
.nl-home .s-row-t .s-ticks{margin:var(--sp-5) 0 0}
.nl-ask-v{display:flex;flex-direction:column;gap:var(--sp-5);min-width:0}
.nl-ask-v .nl-res{margin:0}
.nl-appicon{flex:none;width:var(--sp-8);height:var(--sp-8);border-radius:var(--r-lg)}
.nl-demo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-gap-lg);align-items:start}
.nl-demo-f{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.nl-demo-f .nl-field+.nl-field{margin-top:0}
.nl-home .nl-details{border:0;background:none}
.nl-home .nl-details>summary{padding-inline:0}
.nl-home .nl-details>.send{padding-inline:0}   /* the panel starts on its label's edge, as the summary has no inset here */
.nl-feed{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.nl-feed [hidden]{display:none}
.nl-note{align-items:center}
.nl-note p{margin:0;color:var(--ink3);font-size:var(--fs-xs)}
.nl-src{text-transform:uppercase;letter-spacing:var(--ls-wide);font-weight:var(--fw-semibold)}
.nl-in{animation:nl-in var(--dur-slow) var(--ease-out)}
@keyframes nl-in{from{opacity:0;transform:translateY(calc(var(--sp-3) * -1))}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.nl-in{animation:none}}
html:not(.js) .nl-demo-a{display:none}
@media (max-width:860px){.nl-demo{grid-template-columns:minmax(0,1fr)}}


/* How it works: an accordion beside its picture (monday.com/departments/pmo). One step open, a bar filling while it shows
   (nowlark.js sets how long), the picture on the right swapping to that step. With no script every step is open. */
.nl-acc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--s-gap-lg);align-items:stretch}
.nl-acc-list{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.nl-acc-i{border-radius:var(--r-panel);background:var(--sunk);transition:background var(--dur-base) var(--ease-out)}
.nl-acc-i.on{background:var(--surface);box-shadow:var(--shadow)}
.nl-acc-i h3{margin:0;font-size:var(--fs-lg)}
.nl-acc-i button{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:var(--touch-target);padding:var(--sp-5);
  border:0;background:none;color:var(--ink);font:inherit;font-weight:var(--fw-semibold);text-align:left;cursor:pointer}
.nl-acc-h{flex:1;min-width:0}
.nl-acc-n{flex:none;display:inline-grid;place-items:center;width:var(--sp-8);height:var(--sp-8);border-radius:var(--r-pill);
  background:var(--brand-l);color:var(--brand-d);font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.nl-acc-c{flex:none;width:var(--sp-5);height:var(--sp-5);color:var(--ink3);transition:transform var(--dur-base) var(--ease-out)}
.nl-acc-i.on .nl-acc-c{transform:rotate(180deg)}
.nl-acc-p{display:grid;grid-template-rows:1fr;padding:0 var(--sp-5) var(--sp-5)}
.nl-acc-p p{margin:0;color:var(--ink2)}
.js .nl-acc-i:not(.on) .nl-acc-p{display:none}
.nl-acc-bar{display:block;height:var(--sp-05);margin-top:var(--sp-4);border-radius:var(--r-pill);background:var(--line2);overflow:hidden}
.nl-acc-bar i{display:block;height:100%;width:0;background:var(--brand)}
.nl-acc-i.run .nl-acc-bar i{animation:nl-fill linear forwards}
.nl-acc-i.held .nl-acc-bar i{width:100%}
html:not(.js) .nl-acc-bar{display:none}
@keyframes nl-fill{from{width:0}to{width:100%}}
.nl-acc-v{display:grid;align-items:center;padding:var(--sp-8);border-radius:var(--r-panel);background:var(--brand-l);min-height:var(--size-80)}
.nl-scene{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0;max-width:var(--size-110);width:100%;justify-self:center}
.nl-scene[hidden]{display:none}
.nl-scene.on > *{animation:nl-up var(--dur-slow) var(--ease-out) backwards}
.nl-scene.on > :nth-child(2){animation-delay:var(--dur-slower)}
@keyframes nl-up{from{opacity:0;transform:translateY(var(--sp-3))}to{opacity:1;transform:none}}
.nl-ask-sheet{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-5);border-radius:var(--r-panel);background:var(--surface);
  box-shadow:var(--shadow-raise);text-align:center}
.nl-ask-sheet small{color:var(--ink3);font-size:var(--fs-xs)}
.nl-ask-sheet .hv-btns{justify-content:center;margin-top:var(--sp-3)}
.nl-acc-v .nl-note{background:var(--surface);box-shadow:var(--shadow)}
.nl-keyrow{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-radius:var(--r-panel);
  background:var(--surface);box-shadow:var(--shadow-raise)}
.nl-keyrow small{width:100%;color:var(--ink3);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.nl-keyrow code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono);font-size:var(--fs-sm)}
.nl-keycopy{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);
  background:var(--brand);color:var(--page);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.nl-keycopy .i{width:var(--sp-35);height:var(--sp-35)}
.nl-keynote{display:flex;align-items:center;gap:var(--sp-2);margin:0;color:var(--ink);font-size:var(--fs-sm)}
.nl-keynote .s-ico{flex:none;width:var(--sp-5);height:var(--sp-5);color:var(--brand-d)}
.nl-term-mini{margin:0;padding:var(--sp-4);border-radius:var(--r-panel);background:var(--surface);box-shadow:var(--shadow-raise);
  font-family:var(--font-mono);font-size:var(--fs-xs);line-height:var(--lh-base);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
@media (max-width:860px){.nl-acc{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.nl-acc-v{padding:var(--sp-5)}}

/* Your data: a lit list beside its picture (monday.com/w/enterprise). Tabs; nowlark.js moves to the next while on screen. */
.nl-pick{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--s-gap-lg)}
.nl-pick-l{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.nl-pick-i{position:relative;display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-4) var(--sp-5);border:0;border-radius:var(--r-panel);
  background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;overflow:hidden;transition:background var(--dur-base) var(--ease-out)}
.nl-pick-i:hover{background:var(--hover)}
.nl-pick-i[aria-selected="true"]{background:var(--brand-l)}
.nl-pick-i b{font-weight:var(--fw-semibold)}
.nl-pick-i span{color:var(--ink2);font-size:var(--fs-sm)}
.nl-pick-bar{position:absolute;left:0;bottom:0;height:var(--sp-05);width:0;background:var(--brand)}
.nl-pick-i.run .nl-pick-bar{animation:nl-fill linear forwards}
.nl-pick-v{display:grid;align-items:center;min-width:0;padding:var(--sp-6);border-radius:var(--r-panel);background:var(--brand-l)}
.nl-pick-p[hidden]{display:none}
.nl-facts{display:flex;flex-direction:column;gap:var(--sp-3)}
.nl-pick-p:not([hidden]) .nl-facts > *{animation:nl-up var(--dur-slow) var(--ease-out) backwards}
.nl-pick-p:not([hidden]) .nl-facts > :nth-child(2){animation-delay:var(--dur-fast)}
.nl-pick-p:not([hidden]) .nl-facts > :nth-child(3){animation-delay:var(--dur-base)}
.nl-pick-p:not([hidden]) .nl-facts > :nth-child(4){animation-delay:var(--dur-slow)}
.nl-fact{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-panel);background:var(--surface);
  box-shadow:var(--shadow);font-size:var(--fs-sm)}
.nl-fact .s-ico{flex:none;width:var(--sp-5);height:var(--sp-5);color:var(--brand-d)}
.nl-fact span{flex:1;min-width:0;color:var(--ink2)}
.nl-fact b{font-weight:var(--fw-semibold);text-align:right}
.nl-fact-no b{color:var(--good)}
.nl-facts-h{color:var(--ink);font-size:var(--fs-xs);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:var(--ls-wide)}
.nl-del{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-radius:var(--r-panel);background:var(--surface);box-shadow:var(--shadow-raise)}
.nl-del small{color:var(--ink3);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.nl-del-b{display:inline-flex;align-items:center;gap:var(--sp-2);color:var(--bad);font-weight:var(--fw-semibold)}
.nl-del-b .s-ico{width:var(--sp-5);height:var(--sp-5)}
@media (max-width:860px){.nl-pick{grid-template-columns:minmax(0,1fr)}.nl-pick-v{padding:var(--sp-4)}
  .js .nl-pick-i[aria-selected="false"] span{display:none}}

/* Moving from Prowl or ntfy: the two lines that change, struck out and written in when the section comes into view. */
.nl-swap{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0;padding:var(--sp-6);border-radius:var(--r-panel);background:var(--sunk)}
.nl-swap h3{margin:0;font-size:var(--fs-lg)}
.nl-swap p{margin:0;color:var(--ink2)}
.nl-diff{display:flex;flex-direction:column;margin:var(--sp-2) 0 0;padding:var(--sp-3) 0;border-radius:var(--r-panel);background:var(--surface);
  font-family:var(--font-mono);font-size:var(--fs-xs);line-height:var(--lh-base);overflow:hidden}
.nl-dl{display:flex;gap:var(--sp-2);padding:var(--sp-1) var(--sp-4)}
.nl-dl i{flex:none;font-style:normal}
.nl-dl span{min-width:0;white-space:pre-wrap;overflow-wrap:anywhere}
.nl-dl-m{color:var(--ink3);background:var(--badbg)}
.nl-dl-p{color:var(--ink);background:var(--goodbg)}
.nl-swap-f{color:var(--ink3);font-size:var(--fs-xs)}
.js .nl-swaps:not(.seen) .nl-dl-p{opacity:0;transform:translateX(calc(var(--sp-3) * -1))}
.nl-swaps.seen .nl-dl-m{text-decoration:line-through;transition:text-decoration-color var(--dur-slow) var(--ease-out)}
.nl-swaps.seen .nl-dl-p{transition:opacity var(--dur-slow) var(--ease-out) var(--dur-slower),transform var(--dur-slow) var(--ease-out) var(--dur-slower)}

/* Set up with an AI agent: the three steps, lit in turn beside a transcript that plays them and ends in the notification. */
.nl-agent{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--s-gap-lg);align-items:center}
.nl-agent .s-lede{max-width:var(--s-w-text);margin:0 0 var(--sp-6)}
.nl-agent .s-cta-a{justify-content:flex-start;margin-top:var(--sp-6)}
.nl-phases{display:flex;flex-direction:column;gap:var(--sp-4);margin:0;padding:0;list-style:none}
.nl-phases li{display:flex;align-items:flex-start;gap:var(--sp-3);color:var(--ink2);transition:color var(--dur-base) var(--ease-out)}
.nl-phases li.on,html:not(.js) .nl-phases li{color:var(--ink)}
.nl-phases li div{display:flex;flex-direction:column;gap:var(--sp-05);min-width:0}
.nl-phases li span:not(.nl-acc-n){color:var(--ink2);font-size:var(--fs-sm)}
.nl-phases li:not(.on) .nl-acc-n{background:var(--sunk);color:var(--ink3)}
.nl-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin:var(--sp-6) 0 0;color:var(--ink3);font-size:var(--fs-xs)}
.nl-tools span{padding:var(--sp-05) var(--sp-25);border-radius:var(--r-pill);border:var(--bw) solid var(--line);color:var(--ink2)}
.nl-agent-v{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.nl-term{border-radius:var(--r-panel);background:var(--surface);box-shadow:var(--shadow-raise);overflow:hidden}
.nl-term-bar{display:flex;align-items:center;gap:var(--sp-15);padding:var(--sp-3) var(--sp-4);border-bottom:var(--bw) solid var(--line2)}
.nl-term-bar i{width:var(--sp-25);height:var(--sp-25);border-radius:var(--r-pill);background:var(--line)}
.nl-term-bar small{margin-left:auto;color:var(--ink3);font-size:var(--fs-xs)}
.nl-term-b{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4) var(--sp-5);
  font-family:var(--font-mono);font-size:var(--fs-xs);line-height:var(--lh-base);color:var(--ink2)}
.nl-tl{overflow-wrap:anywhere}
.nl-tl b{color:var(--ink);font-weight:var(--fw-semibold)}
.nl-tl-u{color:var(--ink)}
.nl-tl-q{color:var(--brand-d)}
.nl-tl-ok{color:var(--good)}
.nl-tl-ok::before{content:"";display:inline-block;width:var(--sp-1);height:var(--sp-2);margin-right:var(--sp-2);border:solid currentColor;border-width:0 var(--bw) var(--bw) 0;transform:rotate(45deg)}
.js .nl-agent.play .nl-tl:not(.shown){visibility:hidden}
.nl-tl.shown{animation:nl-up var(--dur-base) var(--ease-out)}
.nl-agent-v [data-landed]{background:var(--surface);box-shadow:var(--shadow)}
.js .nl-agent.play:not(.landed) [data-landed]{opacity:0;transform:translateY(var(--sp-3))}
.nl-agent.landed [data-landed]{transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
@media (max-width:860px){.nl-agent{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.nl-scene.on > *,.nl-pick-p:not([hidden]) .nl-facts > *,.nl-tl.shown{animation:none}
  .nl-acc-i.run .nl-acc-bar i,.nl-pick-i.run .nl-pick-bar{animation:none}}
/* A form's funnel (item 156): the period choice beside the heading; headline counts on a grid of equal cells; steps and
   drop-off as labelled bars, the bar under its words so a long field name never shares a row with a number; the daily
   chart drawn in pixels by the script (views in --blue, sent in --brand, text in ink); two equal halves, one on a phone. */
.nl-funnel-hd{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;justify-content:space-between;margin-bottom:var(--sp-3)}
.nl-funnel-hd h2{margin:0}
.nl-period{display:inline-flex;gap:var(--sp-1)}
/* On a phone the four periods share the card's width in equal columns, so "12 months" is never pushed off the side. */
@media (max-width:600px){.nl-period{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}.nl-period .btn{padding-inline:var(--sp-1);font-size:var(--fs-sm);white-space:nowrap}}
@media (max-width:400px){.nl-period{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nl-period [aria-pressed=true]{background:var(--tint);color:var(--brand-d);border-color:var(--brand)}
.nl-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--size-34),1fr));gap:var(--sp-3);margin:var(--sp-4) 0}
.nl-kpi{padding:var(--sp-3) var(--sp-35);border:var(--bw) solid var(--line2);border-radius:var(--r-panel);background:var(--sunk);min-width:0}
.nl-kpi dt{color:var(--ink3);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.nl-kpi dd{margin:0}
.nl-kpi-v{font-size:var(--fs-title);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);font-variant-numeric:tabular-nums;line-height:var(--lh-tight);color:var(--ink)}
.nl-kpi-n{color:var(--ink3);font-size:var(--fs-micro)}
.nl-steps,.nl-bars{list-style:none;margin:var(--sp-2) 0 var(--sp-4);padding:0;display:grid;gap:var(--sp-3)}
.nl-step{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-1) var(--sp-3);align-items:baseline}
.nl-step-l{color:var(--ink2);overflow-wrap:anywhere}
.nl-step-v{color:var(--ink);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}
.nl-step-bar{grid-column:1/-1;display:block;height:var(--sp-2);border-radius:var(--r-bar);background:var(--tint2);overflow:hidden}
.nl-step-bar i{display:block;height:var(--sp-2);border-radius:var(--r-bar);background:var(--brand)}
.nl-legend{display:flex;gap:var(--sp-4);color:var(--ink2);font-size:var(--fs-xs)}
.nl-key{display:inline-flex;align-items:center;gap:var(--sp-15)}
.nl-key::before{content:"";display:inline-block;width:var(--sp-35);height:var(--bw-3);border-radius:var(--r-bar)}
.nl-key-views::before{background:var(--blue)}
.nl-key-sent::before{background:var(--brand)}
.nl-chart{position:relative;margin:var(--sp-2) 0 var(--sp-3);min-height:var(--size-50)}
.nl-chart:focus-visible{outline:var(--bw-2) solid var(--ring);outline-offset:var(--ring-offset);border-radius:var(--r-sm)}
.nl-chart svg{display:block}
.nl-axis{fill:var(--ink3);font-size:var(--fs-micro);font-variant-numeric:tabular-nums}
.nl-grid-l{stroke:var(--line2);stroke-width:var(--bw)}
.nl-base-l{stroke:var(--line);stroke-width:var(--bw)}
.nl-line{fill:none;stroke-width:var(--bw-2);stroke-linejoin:round;stroke-linecap:round}
.nl-line-views{stroke:var(--blue)}
.nl-line-sent{stroke:var(--brand)}
.nl-dot{fill:var(--surface);stroke-width:var(--bw-2)}
.nl-cross{stroke:var(--ink4);stroke-width:var(--bw)}
.nl-hit{fill:transparent;cursor:crosshair}
.nl-tip{position:absolute;top:var(--sp-2);display:grid;gap:var(--sp-05);padding:var(--sp-2) var(--sp-3);background:var(--surface);color:var(--ink);
  border:var(--bw) solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-2);font-size:var(--fs-xs);white-space:nowrap;pointer-events:none;z-index:var(--z-popover)}
.nl-tip[hidden]{display:none}
.nl-scroll{overflow-x:auto}
.nl-halves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6)}
@media (max-width:700px){.nl-halves{grid-template-columns:minmax(0,1fr)}}
.nl-funnel-lede{max-width:var(--measure-text)}
/* the A/B card is .nl-prose, so the card itself is the measure and its text fills it (item 210: a 65ch cap on the
   paragraphs left them short of a full-width card, which check_text_fills_box refuses) */
.main .nl-abtest-said{font-weight:600;margin:var(--sp-4) 0 var(--sp-3)}
/* Figures tables stay tables on a phone: door.css stacks every .tbl into cards under 720px, which put each number of a
   four-column table on its own unlabelled line (item 156). Four short columns fit 320. A short table of a few numbers
   (.nl-keep: the Billing card's People and Forms against what the plan allows) stays one too, its head above the numbers. */
@media (max-width:720px){.tbl:is(.nl-fig,.nl-keep){display:table}.tbl:is(.nl-fig,.nl-keep) thead{display:table-header-group}.tbl:is(.nl-fig,.nl-keep) tbody{display:table-row-group}
  .tbl:is(.nl-fig,.nl-keep) tr{display:table-row;padding:0}.tbl:is(.nl-fig,.nl-keep) td{display:table-cell;padding:var(--sp-2) var(--sp-2);border-bottom:var(--bw) solid var(--line2)}
  .tbl:is(.nl-fig,.nl-keep) th{padding:var(--sp-2) var(--sp-2) var(--sp-2) 0}.tbl:is(.nl-fig,.nl-keep) tr:last-child td{border-bottom:0}
  .tbl.nl-keep td[data-label]::before{content:none}}
.tbl.nl-fig tbody th{overflow-wrap:break-word}
/* app.css gives every cell under 820px a minimum width (a 192px source name), which pushed Sent and Conversion out of
   a 292px card; a table that stays a table on a phone sizes its own columns, and its row names read at the size of its figures. */
.wrap .tbl:is(.nl-fig,.nl-keep) :is(td,th){min-width:0}
.tbl.nl-fig :is(td,tbody th){font-size:var(--fs-sm)}
.tbl.nl-fig tbody th{color:var(--ink)}
/* At 320 a card holds 222px: the per-source Sent column gives way (Conversion carries the result, the Sent tile the total). */
@media (max-width:400px){.tbl.nl-fig td{padding-inline:var(--sp-1)}.tbl.nl-fig th{padding-inline:0 var(--sp-1)}.tbl.nl-fig .nl-fig-opt{display:none}}

/* --- Item 174: settings tabs, the notification ladder, rows with a status pill, switches, pickers and the alert timeline. ---
   Patterns from the on-call tools people already know: a ladder of notification rules, an escalation stepper whose connector is
   the wait, an alert row that opens its timeline in place. Tokens only. */
.nl-tabs{display:flex;gap:var(--sp-1);margin:0 0 var(--sp-5);border-bottom:var(--bw) solid var(--line)}
.nl-tab{padding:var(--sp-2) var(--sp-3);margin-bottom:calc(-1 * var(--bw));border-bottom:var(--bw-2) solid transparent;color:var(--ink3);font-weight:var(--fw-medium);text-decoration:none}
.nl-tab:hover{color:var(--ink)}
.nl-tab[aria-current]{color:var(--ink);border-bottom-color:var(--brand)}
.nl-cardhd{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3)}
.nl-cardhd h2{margin-top:0}
.nl-saved{color:var(--ink3);font-size:var(--fs-xs)}
.nl-saved[data-kind=error]{color:var(--bad-ink)}
.nl-ladder{list-style:none;margin:var(--sp-3) 0 0;padding:0;position:relative}
.nl-rung{display:grid;grid-template-columns:var(--ctl-h) minmax(0,1fr) auto;gap:var(--sp-3);align-items:start;position:relative;padding-bottom:var(--sp-5)}
.nl-rung:last-child{padding-bottom:0}
.nl-rung:not(:last-child)::before{content:"";position:absolute;left:calc(var(--ctl-h) / 2 - var(--bw));top:var(--ctl-h);bottom:0;width:var(--bw-2);background:var(--line)}
.nl-node{display:grid;place-items:center;width:var(--ctl-h);height:var(--ctl-h);border-radius:var(--r-pill);background:var(--sunk);border:var(--bw) solid var(--line);color:var(--ink2);font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.nl-node.sm{width:var(--ctl-h-sm);height:var(--ctl-h-sm)}
.nl-rung.push .nl-node,.nl-rung.step .nl-node{background:var(--accent-weak);border-color:var(--brand);color:var(--accent-ink)}
.nl-rung.wait .nl-node{width:var(--ctl-h-sm);height:var(--ctl-h-sm);margin:calc((var(--ctl-h) - var(--ctl-h-sm)) / 2);border-style:dashed}
.nl-rung.muted .nl-rungtitle{color:var(--ink3)}
.nl-ico{width:var(--sp-45);height:var(--sp-45);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.nl-rungbody{min-height:var(--ctl-h);min-width:0;display:flex;flex-direction:column;justify-content:center;gap:var(--sp-1)}
.nl-rungtitle{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-15);font-weight:var(--fw-semibold)}
/* The line under a step's title (the board, 2026-10-17). Each picker has its word on the line above it, at every
   width, so every picker in both ladders shares one left edge: a word beside its picker pushed the repeat step's
   pickers 84px right of the rest. A word hugs its own picker and sits 16px under the one before. A picker starts at
   14rem, so a column of steps reads as a column, and grows to fit its longest choice: a fixed 14rem left "if unopened
   after 5 minutes" 178px of the 210 it needs (the text-fill guard, 2026-10-17). */
.nl-rungsub{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-15);color:var(--ink3);font-size:var(--fs-sm)}
.nl-rungfields{display:grid;grid-template-columns:minmax(0,max-content);gap:var(--sp-05);max-width:100%}   /* a label hugs its picker; the larger gap is before the next label */
.nl-rungfield{display:contents}
.nl-rungfield:not(:first-child)>.nl-rungfieldlab{margin-top:var(--sp-4)}   /* the field is display:contents, so its label is always its first child */
.nl-rungfield>.nl-inpick{justify-self:stretch}
.nl-rungsub .nl-inpick{width:auto;min-width:var(--size-56);max-width:100%}
.nl-rungnote{color:var(--warn-ink);font-size:var(--fs-xs)}
.nl-rungact{display:flex;align-items:center;min-height:var(--ctl-h)}
.nl-inpick{height:var(--ctl-h-sm);max-width:100%;padding:0 var(--sp-6) 0 var(--sp-25);border:var(--bw) solid var(--line);border-radius:var(--r-ctl);background-color:var(--card);color:var(--ink);font:inherit;font-weight:var(--fw-regular);font-size:var(--fs-sm);cursor:pointer;
  appearance:none;-webkit-appearance:none;background-image:var(--select-chevron);background-position:var(--select-chevron-pos);background-size:var(--select-chevron-size);background-repeat:no-repeat}
.nl-inpick:hover{border-color:var(--ink4)}
/* wrapPick: a long choice (a name, an address) is drawn by .nl-inpickface, which wraps and grows, and the real select lies over it
   unseen, so a tap still opens the system picker and the name is never cut off. */
.nl-inpickbox{position:relative;display:inline-grid;min-width:var(--size-56);max-width:100%}
.nl-inpickbox>.nl-inpick{position:absolute;inset:0;width:100%;height:100%;min-width:0;opacity:0;line-height:var(--lh-snug)}
.nl-inpickface{display:flex;align-items:center;min-height:var(--ctl-h-sm);padding:var(--sp-1) var(--sp-6) var(--sp-1) var(--sp-25);border:var(--bw) solid var(--line);border-radius:var(--r-ctl);
  background-color:var(--card);color:var(--ink);font-size:var(--fs-sm);line-height:var(--lh-snug);overflow-wrap:anywhere;text-wrap:balance;
  position:relative}
/* The caret sits on a layer with no text: on the face itself, a background image hides the face's colour from a contrast check. */
.nl-inpickface::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--select-chevron);background-position:var(--select-chevron-pos);background-size:var(--select-chevron-size);background-repeat:no-repeat}
.nl-inpickbox:hover>.nl-inpickface{border-color:var(--ink4)}
.nl-inpickbox:has(>.nl-inpick:focus-visible)>.nl-inpickface{outline:var(--bw-2) solid var(--brand);outline-offset:var(--ring-offset)}
.nl-rungfield>.nl-inpickbox{justify-self:stretch}
/* app.css styles every select in .wrap (size, padding, type, surface, border, radius): the face takes the same, so it reads as one
   of the native pickers beside it, and the select under it is held to the face's box. */
.wrap .nl-inpickface{min-height:var(--ctl-h);padding:var(--sp-2) var(--select-pad-end) var(--sp-2) var(--sp-3);font-size:var(--fs-body);line-height:var(--lh-snug);
  background-color:var(--surface);border-color:var(--control-line);border-radius:var(--r)}
.wrap .nl-inpickbox:has(>.nl-inpick:focus-visible)>.nl-inpickface{outline:none;border-color:var(--accent)}
.wrap .nl-inpickbox>select.nl-inpick:not([multiple]):not([size]){height:100%;min-height:0;line-height:var(--lh-snug)}
.nl-inpick:focus-visible{outline:var(--bw-2) solid var(--brand);outline-offset:var(--ring-offset)}
.nl-x{min-width:var(--ctl-h-sm);min-height:var(--ctl-h-sm);padding:0 var(--sp-15);color:var(--ink3)}
.nl-x:hover{color:var(--bad-ink)}
.nl-rows{list-style:none;margin:var(--sp-3) 0 0;padding:0}
.nl-rowitem{display:grid;grid-template-columns:var(--ctl-h-sm) minmax(0,1fr) auto;gap:var(--sp-3);align-items:center;padding:var(--sp-25) 0;border-bottom:var(--bw) solid var(--line2)}
.nl-rowitem:last-child{border-bottom:none}
.nl-rowtext{display:flex;flex-direction:column;gap:var(--sp-05);min-width:0;overflow-wrap:anywhere}
.nl-rowtext h2{margin:0}
.nl-rowitem>.nl-rowtext>b{overflow-wrap:break-word;word-break:normal}   /* wraps at words, and an address at the breaks wrapAt gives it, never mid-word */
.nl-rowact{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;justify-content:flex-end}
.nl-pill-s{display:inline-flex;align-items:center;gap:var(--sp-15);height:var(--badge-h);padding:0 var(--badge-padx);border-radius:var(--r-pill);background:var(--sunk);color:var(--ink2);font-size:var(--fs-xs);font-weight:var(--fw-semibold);white-space:nowrap}
.nl-pill-s.good{background:var(--goodbg);color:var(--good)}
.nl-pill-s.warn{background:var(--warnbg);color:var(--warn-ink)}
.nl-pill-s.bad{background:var(--badbg);color:var(--bad-ink)}
.nl-pill-s.info{background:var(--blue-l);color:var(--blue)}
.nl-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
input[type=checkbox].nl-switch{display:block;border:0;appearance:none;-webkit-appearance:none;flex:none;position:relative;width:var(--touch-target);height:var(--sp-65);margin:0;border-radius:var(--r-pill);background:var(--line);cursor:pointer;transition:background var(--dur-base) var(--ease-out)}
input[type=checkbox].nl-switch::before{content:none}
input[type=checkbox].nl-switch::after{content:"";position:absolute;top:var(--bw-2);left:var(--bw-2);width:var(--sp-6);height:var(--sp-6);border-radius:var(--r-pill);background:var(--ink3);box-shadow:var(--sh-1);transition:transform var(--dur-base) var(--ease-out)}
input[type=checkbox].nl-switch:checked{background:var(--brand)}
input[type=checkbox].nl-switch:checked::after{background:var(--on-fill);transform:translateX(calc(var(--touch-target) - var(--sp-65)))}
input[type=checkbox].nl-switch:focus-visible{outline:var(--bw-2) solid var(--brand);outline-offset:var(--ring-offset)}
#q-times{align-items:center}
#q-times .lbl{display:flex;align-items:center;gap:var(--sp-2)}
.nl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-5)}
/* The faces and the count read as one phrase: inline, not two flex items held apart by a gap (check_text_fills_box). */
.nl-people{display:inline-block;color:var(--ink3);font-size:var(--fs-sm)}
.nl-faces{display:inline-flex}
.nl-avatar{display:inline-grid;place-items:center;width:var(--sp-7);height:var(--sp-7);letter-spacing:0;border-radius:var(--r-pill);background:var(--accent-weak);color:var(--accent-ink);border:var(--bw-2) solid var(--card);font-size:var(--fs-micro);font-weight:var(--fw-semibold)}
.nl-faces .nl-avatar+.nl-avatar{margin-left:calc(-1 * var(--sp-15))}
.nl-alerts{list-style:none;margin:var(--sp-2) 0 0;padding:0}
.nl-alerts>li{border-bottom:var(--bw) solid var(--line2)}
.nl-alerts>li:last-child{border-bottom:none}
.nl-alert{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:var(--sp-3);align-items:center;width:100%;padding:var(--sp-3) var(--sp-2);margin:0;border:0;border-radius:var(--r-ctl);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.nl-alert:hover{background:var(--hover)}
.nl-alert:focus-visible{outline:var(--bw-2) solid var(--brand)}
.nl-alert .nl-ico{color:var(--ink3);transition:transform var(--dur-base) var(--ease-out)}
.nl-alert[aria-expanded=true] .nl-ico{transform:rotate(.5turn)}
.nl-alerttext{display:flex;flex-direction:column;gap:var(--sp-05);min-width:0;overflow-wrap:anywhere}
.nl-adot{width:var(--sp-25);height:var(--sp-25);border-radius:var(--r-pill);background:var(--ink4)}
.nl-adot.warn{background:var(--warn)}.nl-adot.info{background:var(--blue)}.nl-adot.good{background:var(--good)}
.nl-tlwrap{padding:0 var(--sp-2) var(--sp-4) var(--sp-2)}
.nl-tline{list-style:none;margin:0;padding:0 0 0 var(--sp-1)}
.nl-tlitem{display:grid;grid-template-columns:var(--ctl-h-sm) minmax(0,1fr) auto;gap:var(--sp-3);align-items:center;position:relative;padding:var(--sp-15) 0}
.nl-tlitem:not(:last-child)::before{content:"";position:absolute;left:calc(var(--ctl-h-sm) / 2 - var(--bw));top:calc(var(--sp-15) + var(--ctl-h-sm));bottom:calc(-1 * var(--sp-15));width:var(--bw-2);background:var(--line2)}
.nl-tldot{display:grid;place-items:center;width:var(--ctl-h-sm);height:var(--ctl-h-sm);border-radius:var(--r-pill);background:var(--sunk);color:var(--ink2);position:relative}
.nl-tlitem.k-created .nl-tldot{background:var(--accent-weak);color:var(--accent-ink)}
.nl-tlitem.k-opened .nl-tldot,.nl-tlitem.k-taken .nl-tldot,.nl-tlitem.k-resolved .nl-tldot{background:var(--goodbg);color:var(--good)}
.nl-tlitem.k-email .nl-tldot,.nl-tlitem.k-destination .nl-tldot{background:var(--blue-l);color:var(--blue)}
.nl-tlitem.next .nl-tldot{background:none;border:var(--bw) dashed var(--line)}
.nl-tlitem.next .nl-tltext{color:var(--ink3)}
.nl-tltext{font-size:var(--fs-sm);overflow-wrap:anywhere}
.nl-tltime{color:var(--ink3);font-size:var(--fs-xs);font-variant-numeric:tabular-nums;white-space:nowrap}
.nl-pills{display:flex;flex-wrap:wrap;gap:var(--sp-2);flex-basis:100%;margin:0;padding:0;border:0}
.nl-pills legend{margin-bottom:var(--sp-2);padding:0}
.nl-pill{position:relative;display:inline-flex}
.nl-pill input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.nl-pill span{display:inline-flex;align-items:center;height:var(--ctl-h-sm);padding:0 var(--sp-3);border:var(--bw) solid var(--line);border-radius:var(--r-pill);color:var(--ink2);font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.nl-pill input:checked+span{background:var(--accent-weak);border-color:var(--brand);color:var(--accent-ink)}
.nl-pill input:focus-visible+span{outline:var(--bw-2) solid var(--brand);outline-offset:var(--ring-offset)}
@media(max-width:480px){.nl-rung{gap:var(--sp-2);grid-template-columns:var(--ctl-h) minmax(0,1fr)}.nl-rungact{position:absolute;top:0;right:0}
  .nl-alert{grid-template-columns:auto minmax(0,1fr) auto}.nl-alert>.nl-pill-s{grid-column:2;justify-self:start}.nl-alert>.nl-ico{grid-row:1;grid-column:3}
  .nl-tlitem{grid-template-columns:var(--ctl-h-sm) minmax(0,1fr)}.nl-tltime{grid-column:2}
  .nl-rowitem{grid-template-columns:var(--ctl-h-sm) minmax(0,1fr)}.nl-rowact{grid-column:2;justify-content:flex-start}}
/* On a phone a step keeps its node, its connector and its badge, and everything under its title stays on the title's
   edge, as Reminders does (the board, 2026-10-17, against the card-wide lines that lost the list's shape). The room
   that takes comes from a smaller node and from each picker's word going on the line above it, so a picker is the
   title column's full width: about 280px at 390, which fits every choice. */
@media(max-width:480px){
  .nl-rung{grid-template-columns:var(--ctl-h-sm) minmax(0,1fr) auto}
  .nl-rung .nl-node:not(.sm){width:var(--ctl-h-sm);height:var(--ctl-h-sm)}
  .nl-rung.wait .nl-node{margin:0}
  .nl-rung:not(:last-child)::before{left:calc(var(--ctl-h-sm) / 2 - var(--bw));top:var(--ctl-h-sm)}
  .nl-rungbody{min-height:var(--ctl-h-sm)}
  .nl-rungsub{align-items:stretch;gap:var(--sp-1)}
  .nl-rungfields{grid-template-columns:minmax(0,1fr)}
  .nl-rungsub>.nl-inpick{width:100%}
  .nl-rungsub>.nl-inpickbox{width:100%}
  .nl-rungsub .nl-inpickbox{justify-self:stretch;min-width:0}
  .nl-rungsub .nl-inpickface{min-height:var(--touch-target)}
  .nl-rungsub .nl-inpick{justify-self:stretch;min-width:0}
  .wrap .nl-rungsub select.nl-inpick{height:var(--touch-target);min-height:var(--touch-target)}   /* app.css sizes every select in .wrap at --ctl-h; a fingertip needs 44 */
  .nl-ladder+.btnrow .btn{min-height:var(--touch-target)}
}
.nl-rungaddr{color:var(--ink)}
/* An outlined button on the title column's edge, the same as the rule editor's "Add a condition" (the board, 2026-10-17:
   a quiet one read as plain text). */
.nl-ladder+.btnrow{margin-left:calc(var(--ctl-h) + var(--sp-3));margin-top:var(--sp-4)}
@media(max-width:480px){.nl-ladder+.btnrow{margin-left:calc(var(--ctl-h-sm) + var(--sp-2))}}
.nl-row+h3{margin-top:var(--sp-5)}
/* Settings and a channel read as one column, as settings pages at Linear and GitHub do: the card is as wide as a
   readable line, so its text fills it instead of a capped paragraph leaving a dead strip (check_text_fills_box).
   The wrapper keeps its full width and pads in, so it still spans the page as every console page does. */
.wrap.nl-narrow{padding-inline:max(var(--wrap-padx),calc((min(100%,var(--wrap-max)) - var(--measure-em)) / 2))}
/* The Forms page (forms_page.py, item 158). The demo's still state is the finished story: filled, sent, alerted, taken,
   counted. It moves only inside prefers-reduced-motion: no-preference, one 12-second loop shared by every part. */
.nl-forms .f-demo{max-width:var(--size-206);margin:var(--sp-9) auto 0}
.nl-forms .f-phones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-gap)}
.nl-forms .f-phone{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0;padding:var(--sp-5) var(--sp-4) var(--sp-6);text-align:left;
  border-radius:calc(var(--r-lg) * 3);background:var(--sunk);box-shadow:inset 0 0 0 var(--bw) var(--glass-edge)}
.nl-forms .f-team{box-shadow:inset 0 0 0 var(--bw) var(--brand)}
.nl-forms .f-where{text-align:center;color:var(--ink3);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.nl-forms .f-team .f-where{color:var(--brand)}
.nl-forms .f-form{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4);border-radius:var(--r-panel);background:var(--surface)}
.nl-forms .f-label{color:var(--ink2);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.nl-forms .f-input{display:block;min-height:calc(var(--fs-body) * 2.4);padding:var(--sp-2) var(--sp-3);border-radius:var(--r);
  box-shadow:inset 0 0 0 var(--bw) var(--line2);font-size:var(--fs-sm)}
.nl-forms .f-area{min-height:calc(var(--fs-body) * 4.2)}
.nl-forms .f-type{display:inline-block}
.nl-forms .f-send{align-self:flex-start;margin-top:var(--sp-2);padding:var(--sp-2) var(--sp-5);border-radius:var(--r-pill);
  background:var(--brand);color:var(--on-fill);font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.nl-forms .f-sent,.nl-forms .f-taken{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.nl-forms .f-sent svg,.nl-forms .f-taken svg{flex:none;width:var(--sp-5);height:var(--sp-5);color:var(--good)}
.nl-forms .f-clock{margin-bottom:var(--sp-2);text-align:center;font-size:var(--fs-h1);font-weight:var(--fw-semibold);line-height:var(--lh-tight)}
.nl-forms .f-alert{background:var(--surface)}
.nl-forms .f-alert .hv-card-t span{color:var(--ink2)}
.nl-forms .f-taken{justify-content:center;margin-top:auto;padding-top:var(--sp-2)}
.nl-forms .f-others{text-align:center;color:var(--ink3);font-size:var(--fs-xs)}
.nl-forms .f-counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--s-gap)}
.nl-forms .f-count{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-4);border-radius:var(--r-panel);background:var(--surface);
  box-shadow:inset 0 0 0 var(--bw) var(--glass-edge);text-align:center}
.nl-forms .f-k{color:var(--ink3);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.nl-forms .f-n{display:inline-grid;justify-items:center;font-size:var(--fs-h2);font-variant-numeric:tabular-nums}
/* The number before the visit is drawn from data-old, so the page's text holds only the one after. */
.nl-forms .f-n > span,.nl-forms .f-n::before{grid-area:1 / 1}
.nl-forms .f-n::before{content:attr(data-old);visibility:hidden}
.nl-forms .f-cap{max-width:var(--s-measure);margin:var(--sp-5) auto 0;color:var(--ink3);font-size:var(--fs-sm);text-align:center}
.nl-forms .s-wrap > .f-note{max-width:var(--s-measure);margin:var(--sp-6) auto 0;text-align:center;color:var(--ink2)}
.nl-forms .s-wrap > .f-fine{max-width:var(--s-measure);margin:var(--sp-4) auto 0;text-align:center;color:var(--ink3);font-size:var(--fs-xs)}
.nl-forms .f-price{max-width:var(--s-measure);margin:0 auto;text-align:center}
.nl-forms .f-price .m-price{align-items:center}
.nl-forms .f-price .f-note{margin:var(--sp-4) 0 0;color:var(--ink2)}
.nl-forms .f-vs td,.nl-forms .f-vs th{text-align:left;vertical-align:top}
.nl-forms .f-vs td a{white-space:nowrap}
@media (max-width:767px){.nl-forms .f-phones{grid-template-columns:minmax(0,1fr);max-width:var(--size-90);margin-inline:auto}
  .nl-forms .f-counts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nl-forms .f-vs td{display:block;padding:var(--sp-2) var(--sp-4);text-align:left}
  .nl-forms .f-vs td::before{display:block;margin-bottom:var(--sp-1);font-weight:var(--fw-semibold)}}
@media (prefers-reduced-motion: no-preference) {
  .nl-forms .f-type{animation:calc(var(--dur-beat) * 12) linear infinite both}
  .nl-forms .f-type1{animation-name:f-type1}
  .nl-forms .f-type2{animation-name:f-type2}
  .nl-forms .f-send{animation:f-press calc(var(--dur-beat) * 12) infinite both}
  .nl-forms .f-sent{animation:f-sent calc(var(--dur-beat) * 12) infinite both}
  .nl-forms .f-alert{animation:f-alert calc(var(--dur-beat) * 12) var(--ease-out) infinite both}
  .nl-forms .f-taken,.nl-forms .f-others{animation:f-taken calc(var(--dur-beat) * 12) infinite both}
  .nl-forms .f-n1::before{animation:f-old1 calc(var(--dur-beat) * 12) infinite both}.nl-forms .f-n1 .f-new{animation:f-new1 calc(var(--dur-beat) * 12) infinite both}
  .nl-forms .f-n2::before{animation:f-old2 calc(var(--dur-beat) * 12) infinite both}.nl-forms .f-n2 .f-new{animation:f-new2 calc(var(--dur-beat) * 12) infinite both}
  .nl-forms .f-n3::before{animation:f-old3 calc(var(--dur-beat) * 12) infinite both}.nl-forms .f-n3 .f-new{animation:f-new3 calc(var(--dur-beat) * 12) infinite both}
  @keyframes f-type1{0%,4%{clip-path:inset(0 100% 0 0)}16%,92%{clip-path:inset(0 0 0 0)}96%,100%{clip-path:inset(0 100% 0 0)}}
  @keyframes f-type2{0%,18%{clip-path:inset(0 100% 0 0)}34%,92%{clip-path:inset(0 0 0 0)}96%,100%{clip-path:inset(0 100% 0 0)}}
  @keyframes f-press{0%,36%{transform:none}37.5%{transform:scale(.94)}39%,100%{transform:none}}
  @keyframes f-sent{0%,39%{opacity:0}42%,92%{opacity:1}96%,100%{opacity:0}}
  @keyframes f-alert{0%,44%{opacity:0;transform:translateY(calc(var(--sp-3) * -1))}48%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
  @keyframes f-taken{0%,62%{opacity:0}65%,92%{opacity:1}96%,100%{opacity:0}}
  @keyframes f-old1{0%,6%{visibility:visible;opacity:1}8%,94%{visibility:hidden;opacity:0}97%,100%{visibility:visible;opacity:1}}
  @keyframes f-new1{0%,6%{opacity:0}8%,94%{opacity:1}97%,100%{opacity:0}}
  @keyframes f-old2{0%,18%{visibility:visible;opacity:1}20%,94%{visibility:hidden;opacity:0}97%,100%{visibility:visible;opacity:1}}
  @keyframes f-new2{0%,18%{opacity:0}20%,94%{opacity:1}97%,100%{opacity:0}}
  @keyframes f-old3{0%,42%{visibility:visible;opacity:1}44%,94%{visibility:hidden;opacity:0}97%,100%{visibility:visible;opacity:1}}
  @keyframes f-new3{0%,42%{opacity:0}44%,94%{opacity:1}97%,100%{opacity:0}}
}
.nl-forms .f-go{margin-top:var(--s-gap-lg)}
/* Putting a form on a site (item 184): the address and the check above, the builder's numbered steps, then the code. The
   check's answer leads with a dot in its state's colour; what stops the form is a plain list under it. */
.nl-install{display:grid;gap:var(--sp-2)}
.nl-install>.lbl,.nl-install>.btnrow,#install-result{max-width:var(--measure-em)}
/* Item 185: the three ways (paste the code, follow the steps, hand it to an AI agent) side by side in equal columns, in
   that order, stacking when there is no room for three. */
.nl-install-paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--size-62)),1fr));gap:var(--sp-3);align-items:stretch;margin-top:var(--sp-2)}
.nl-install-path{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0;padding:var(--sp-4);border:var(--bw) solid var(--line);border-radius:var(--r-panel);background:var(--surface)}
.nl-install-path h3{margin:0}
.nl-install-path .nl-code pre{max-height:var(--size-50);overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.nl-install-path>.btnrow:last-child{margin-top:auto}
.nl-install .btnrow{margin:0}
.nl-install-state{margin:0;font-weight:var(--fw-semibold);color:var(--ink)}
.nl-install-state::before{content:"";display:inline-block;width:var(--sp-2);height:var(--sp-2);margin-right:var(--sp-2);border-radius:50%;background:var(--ink4);vertical-align:middle}
.nl-install-state[data-state=live]::before{background:var(--good)}
.nl-install-state[data-state=placed]::before{background:var(--blue)}
.nl-install-state[data-state=problem]::before,.nl-install-state[data-state=missing]::before{background:var(--brand)}
.nl-install-problems{margin:var(--sp-2) 0 0;padding-left:var(--sp-5);display:grid;gap:var(--sp-2);color:var(--ink2)}
.nl-install-steps{margin:0;padding-left:var(--sp-5);display:grid;gap:var(--sp-2);color:var(--ink)}
#install-all{margin-top:var(--sp-5)}
/* The WordPress page (item 189, wordpress_page.py): the facts before installing, then three ways, side by side. */
.nl-wp .wp-facts{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-gap);margin:0;max-width:calc(var(--s-measure) + 2 * var(--sp-5) + 2 * var(--bw));margin-inline:auto}
.nl-wp .wp-facts > div{padding:var(--sp-5);border-radius:var(--r-panel);background:var(--surface);box-shadow:inset 0 0 0 var(--bw) var(--line2)}
.nl-wp .wp-facts dt{font-weight:var(--fw-semibold);color:var(--ink)}
.nl-wp .wp-facts dd{margin:var(--sp-2) 0 0;color:var(--ink2)}
.nl-wp .wp-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-gap);text-align:left}
.nl-wp .wp-way{min-width:0;display:flex;flex-direction:column;padding:var(--sp-5);border-radius:var(--r-panel);background:var(--surface);box-shadow:inset 0 0 0 var(--bw) var(--line2)}
.nl-wp .wp-way h3{margin:0 0 var(--sp-3)}
.nl-wp .wp-way p{color:var(--ink2)}
.nl-wp .wp-steps{margin:0;padding-left:var(--sp-5);display:grid;gap:var(--sp-2);color:var(--ink)}
.nl-wp .wp-code{margin:var(--sp-2) 0 var(--sp-4);padding:var(--sp-3) var(--sp-4);border-radius:var(--r);background:var(--sunk);font-family:var(--font-mono);
  font-size:var(--fs-xs);line-height:var(--lh-base);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink);user-select:all}
.nl-wp .wp-prompt{flex:1;contain:size;min-height:var(--size-50);overflow-y:auto}
.nl-wp .wp-go{margin-top:var(--sp-7)}
.nl-wp .wp-way > :last-child{margin-bottom:0}
.nl-wp .k-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:var(--size-206);margin-inline:auto}
@media (max-width:1023px){.nl-wp .wp-ways{grid-template-columns:minmax(0,1fr)}.nl-wp .wp-prompt{flex:none;contain:none;max-height:var(--size-90)}}
@media (max-width:600px){.nl-wp .k-grid{grid-template-columns:minmax(0,1fr)}}

/* The partner's account page (partners_page.dashboard): the stats row keeps the cards' rhythm, a card's headings are a
   card's size, not a section's, and a ?ref= code never breaks at its question mark. */
.nl-partners .s-check-stats{margin:0 0 var(--sp-5)}
.nl-partners .card h2{font-size:var(--fs-lg);margin:var(--sp-6) 0 var(--sp-3)}
.nl-partners .card > h2:first-child{margin-top:0}
.nl-partners .card .tblwrap + .hint{margin-top:var(--sp-4)}
.nl-partners .hint code{white-space:nowrap}
.nl-partners .card .copyrow + .hint{margin-top:var(--sp-3)}
/* The partner cards hold the sign-up and the money: a solid surface, as .s-signin, so small text reads on it at any backdrop. */
.nl-partners .glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--surface)}

/* A team's rules (item 212, org_ui RULES_BODY): one row a rule, read as a sentence, with its handle, switch and Edit;
   the editor's cards beside the try-it panel, which drops below them on a phone. */
.nl-rulelist{list-style:none;margin:var(--sp-3) 0 var(--sp-4);padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-2)}
.nl-rule{display:grid;grid-template-columns:var(--ctl-h-sm) minmax(0,1fr) auto;gap:var(--sp-3);align-items:center;padding:var(--sp-3);
  border:var(--bw) solid var(--line2);border-radius:var(--r-panel);background:var(--card)}
.nl-rule.off .nl-ruletext{color:var(--ink3)}
.nl-rule.otherwise{background:var(--sunk);border-style:dashed}
.nl-rule.nl-fb-dragging{box-shadow:var(--shadow-raise);border-color:var(--brand);position:relative;z-index:var(--z-popover)}
.nl-ruletext{display:grid;gap:var(--sp-1);min-width:0;overflow-wrap:break-word}
.nl-ruleact{display:flex;align-items:center;gap:var(--sp-2)}
.nl-tpls{list-style:none;margin:var(--sp-3) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.nl-tpl{display:grid;align-content:start;gap:var(--sp-1);width:100%;height:100%;padding:var(--sp-4);text-align:left;font:inherit;color:var(--ink);cursor:pointer;
  border:var(--bw) solid var(--line2);border-radius:var(--r-panel);background:var(--card)}
.nl-tpl:hover{border-color:var(--ink4);background:var(--hover)}
.nl-tpl:focus-visible{outline:var(--bw-2) solid var(--brand);outline-offset:var(--ring-offset)}
.nl-ruleed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5);align-items:start}
.nl-rulecards{min-width:0}
.nl-try{position:sticky;top:var(--sp-5);min-width:0}
.nl-or{margin:var(--sp-3) 0;color:var(--ink3);font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.nl-condgroup,.nl-conds{list-style:none;margin:0 0 var(--sp-3);padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-2)}
.nl-cond{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);min-width:0}
.nl-cond .field{width:auto;min-width:0;flex:1 1 var(--size-50)}
.nl-cond.bad .field{border-color:var(--bad-ink)}
.nl-condword{flex:none;min-width:var(--sp-7)}
.nl-condval{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);flex:1 1 var(--size-50);min-width:0}
.nl-conderr{flex-basis:100%;color:var(--bad-ink);font-size:var(--fs-xs)}
.nl-conderr:empty{display:none}
.nl-tryalert{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-2);margin-bottom:var(--sp-3)}
.nl-tryrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-3);align-items:center;padding:var(--sp-25) 0;border-bottom:var(--bw) solid var(--line2)}
.nl-tryrow:last-child{border-bottom:none}
.nl-tryrow.hit .nl-rowtext b{color:var(--accent-ink)}
@media (max-width:900px){.nl-ruleed{grid-template-columns:minmax(0,1fr)}.nl-try{position:static}}
@media (max-width:600px){.nl-tpls{grid-template-columns:minmax(0,1fr)}.nl-rule{grid-template-columns:var(--ctl-h-sm) minmax(0,1fr)}
  .nl-ruleact{grid-column:2}}
/* A field shows its value in regular weight under a semibold label, as macOS and iOS controls do. .field takes
   font:inherit, so inside a .lbl every select and input was drawn bold and a choice ran out of room at 320px. */
.lbl .field:not(#_){font-weight:var(--fw-regular)}
/* Phones get a 16px page gutter (the owner's bar); the generated token keeps 32px at every width, which left a select
   on the rule editor 64px narrower than the screen allowed at 320px. */
@media (max-width:480px){:root{--wrap-padx:var(--sp-4)}}
/* Item 220: the Google card is one column, as the owner's saved Contentsquare Tracking and MCP pages are (the owner,
   2026-10-17: "two column setup does not work! content square does not have that!"): the name and the switch in the
   header row, a lede under it; each value a label, its hint and its field of --size-90 under them, parted by hairlines;
   the test's result, then a footer with the note at the start and the actions at the end, closing the card it saves. The
   setup is a second card with nothing to save: one way at a time in tabs, each panel its one action first and its
   numbered steps under it, every line the card's width. One 16px rhythm between every group. */
.nl-gcard{container-type:inline-size}
.main #google [hidden]{display:none}   /* a class's display would otherwise draw a hidden row, button or field */
.nl-ghead{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);margin-top:var(--sp-3)}   /* its title as deep as every other card's (the switch centres it 4px lower) */
.main #google .nl-ghead h2{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3)}
.main #google .nl-glede{margin:var(--sp-2) 0 0}
.nl-grows{margin-top:var(--sp-4);border-top:var(--bw) solid var(--line2)}
.nl-grow{padding:var(--sp-4) 0;border-bottom:var(--bw) solid var(--line2)}
.nl-grow>.nl-gfieldw,.nl-gctl{margin-top:var(--sp-3);max-width:var(--size-90)}
.nl-glabel label{font-weight:var(--fw-medium)}
.nl-glabel label .muted{font-weight:var(--fw-regular)}
.main .nl-glabel p{margin:var(--sp-1) 0 0}
.main .nl-ghow{margin:var(--sp-4) 0 0}   /* a closed fold ends its row, a full step under the field */
.main .nl-ghow>.nl-gsteps{margin-top:var(--sp-1)}
.nl-gfieldw{width:100%}
.nl-gctl{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-2);min-width:0}
.nl-gctl:has(#google-saved:not([hidden])){max-width:none}   /* the masked secret keeps the field's width, its actions beside it */
.nl-gctl>.btn{align-self:flex-end}
.nl-secretline{display:flex;align-items:center;gap:var(--sp-2);min-height:var(--ctl-h)}
/* A saved secret is drawn as the field it was typed into, masked and read-only, so the two values share one shape. */
.nl-gmask{flex:0 1 var(--size-90);min-width:0;box-sizing:border-box;height:var(--ctl-h);padding-block:0;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);background:var(--sunk);color:var(--ink2);cursor:default}
.nl-secretbtns{display:inline-flex;align-items:center;justify-content:flex-end;gap:var(--sp-2);flex:none}
/* Remove's question, under the masked secret: the question and its cost at the left, the two answers at the right. */
.nl-gconfirm{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);margin-top:var(--sp-1)}
.nl-gconfirm[hidden]{display:none}
.nl-gconfirm-t{min-width:0;text-wrap:pretty}
.main .nl-gconfirm-t>p{margin:0}
.main .nl-gconfirm-t>p+p{margin-top:var(--sp-1)}
#google-forget-q{font-weight:var(--fw-medium);color:var(--ink)}
.nl-gconfirm>.btnrow{flex:none}
#google-note{text-wrap:pretty}
/* The footer: the note at the left, the actions at the right, the test's result under them. */
.nl-gfoot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--sp-3) var(--sp-7);padding-top:var(--sp-4)}
.main .nl-gfoot>.btnrow{margin:0;justify-self:end}
.main #google .nl-testresult{padding:var(--sp-4) 0;border-bottom:var(--bw) solid var(--line2)}   /* the result is a row of its own, parted from the footer like the rows above it */
.main .nl-gsetup>h2{margin-bottom:0}
.main .nl-gsetup>p{margin:var(--sp-2) 0 0}
.nl-gtabs{margin-top:var(--sp-3);border-bottom:var(--bw) solid var(--line2)}
.main .nl-gtabs>.tab{font-size:var(--fs-body)}
.main .nl-gtabs>.tab:first-child{padding-inline-start:0}   /* the first label on the content's left edge */
.nl-gpanel{padding-top:var(--sp-4)}
.nl-gaside{padding-bottom:var(--sp-4);border-bottom:var(--bw) solid var(--line2)}   /* the tab's one action, above its steps */
.nl-gaside+.nl-gsteps>li:first-child{padding-top:var(--sp-4)}
.nl-gaside+.nl-gprompt{margin-top:var(--sp-3)}
.main .nl-gaside>p{margin:0}
.main .nl-gaside>.btn{margin-top:var(--sp-3)}
.main .nl-gprompt .nl-code{margin-top:var(--sp-2)}
.main #google-p-agent .nl-code pre{white-space:pre-wrap;overflow-wrap:anywhere}   /* the whole prompt, wrapped: the fold was opened to read it */
.nl-gwhy{display:block;margin-top:var(--sp-1);color:var(--ink3)}
.nl-gsteps>li>span{text-wrap:pretty}   /* lines fill the column; only a one-word last line is avoided */   /* a step's caveat, under its action */
.nl-gsteps{list-style:none;margin:0;padding:0;counter-reset:gstep}
.nl-gsteps>li{counter-increment:gstep;display:grid;grid-template-columns:var(--sp-6) minmax(0,1fr);gap:var(--sp-3);align-items:baseline;padding:var(--sp-3) 0;border-bottom:var(--bw) solid var(--line2)}
.nl-gsteps>li:last-child{border-bottom:none}
.nl-gsteps>li:last-child{padding-bottom:0}   /* a list ends on its last step: the row or panel around it gives the one gap under it */
.nl-gsteps>li::before{content:counter(gstep);display:inline-grid;place-items:center;width:var(--sp-6);height:var(--sp-6);border-radius:var(--r-pill);background:var(--tint);color:var(--brand-d);font-size:var(--fs-micro);font-weight:var(--fw-semibold)}
.nl-gsteps strong{font-weight:var(--fw-medium);color:var(--ink)}
.nl-gsteps>li{text-wrap:pretty}   /* a step never ends on one word alone, as a paragraph does not (tokens.css p) */
/* A step this card has seen done: a tick in its circle and quiet text, so the first step still to do stands out. */
.nl-gsteps>li[data-done]{color:var(--ink3)}
.nl-gsteps>li[data-done] strong{color:var(--ink3)}
.nl-gsteps>li[data-done]::before{content:'\2713';background:var(--goodbg);color:var(--good)}
#google-more{margin-top:var(--sp-4);border-top:var(--bw) solid var(--line2)}
.nl-gextra{padding:var(--sp-3) 0;border-bottom:var(--bw) solid var(--line2)}
.nl-gextra:last-child{border-bottom:none;padding-bottom:0}   /* the card ends on its last row, not on a hairline */
.main .nl-gextra>p{margin:var(--sp-2) 0 0}
.nl-gextra>.nl-gsteps{margin-top:var(--sp-2)}
@container (max-width:40rem){
  .nl-grow>.nl-gfieldw,.nl-gctl{max-width:none}
  #google-note:empty{display:none}
  .nl-gfoot{grid-template-columns:minmax(0,1fr)}
  .main .nl-gfoot>.btnrow{justify-self:stretch}
  .nl-gfoot>.btnrow{width:100%}
  .nl-gfoot>.btnrow>.btn{flex:1}
  .nl-secretline{flex-wrap:wrap}
  .nl-gmask{flex:1 0 100%}   /* the saved secret on its own line, its buttons under it */
  .nl-secretbtns{flex:1 0 100%;flex-wrap:wrap}
  .nl-secretbtns>.btn{flex:1}   /* on a phone the pair is one row of equal buttons, as the footer's are */
  .nl-gconfirm{flex-direction:column;align-items:stretch;gap:var(--sp-3)}
  .nl-gconfirm>.btnrow>.btn{flex:1}
  .main #google .btn,.main .nl-gsetup .btn{min-height:var(--touch-target)}   /* a phone gets a full 44px target on every button */
}
/* The result of the test: a mark and a headline, the detail in the card's own secondary text, the fix folded. */
.main .nl-testresult>*,.main .nl-testresult details>p{margin:var(--sp-1) 0 0}.main .nl-testresult>:first-child{margin-top:0}
.main #google .nl-testresult>details{margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:var(--bw) solid var(--line2)}   /* the fix is a fold of its own, parted from the result as the card's other folds are */
.nl-testhead{display:flex;align-items:center;gap:var(--sp-2);font-weight:var(--fw-medium)}
.nl-testhead svg{flex:none;width:var(--sp-45);height:var(--sp-45)}
.nl-testresult[data-kind=ok] .nl-testhead svg{color:var(--good)}
.nl-testresult[data-kind=error] .nl-testhead{color:var(--bad-ink)}
.main #google code{padding:0 var(--sp-px)}   /* an event name inside a sentence, tight to its words */
/* A disabled primary sits flat like every other disabled button: door.css gives .btn.primary its raised shadow in every state. */
.btn.primary:is(:disabled,[aria-disabled="true"]){box-shadow:none}
/* On a touch screen the quiet link still gets a full 44px target; the negative margins keep its visual place. */
@media (pointer:coarse){.main .nl-testresult>details>summary{min-height:var(--touch-target);margin-block:calc((var(--touch-target) - 1lh) / -2)}}
/* A line of code longer than its box scrolls sideways and fades at the edge it continues past, as the docs' code does
   (check_text_fills_box, "code scrolls sideways", on / and the forms pages at 320 and 390, 2026-10-24). The script marks the
   block .nl-fade while it runs on past the edge (nowlark.js on the site, console.js in the console), so a block that fits
   has no fade and the fade lifts once the line is scrolled to its end. */
.nl-code pre.nl-fade{-webkit-mask-image:linear-gradient(to left,transparent,black var(--sp-9));mask-image:linear-gradient(to left,transparent,black var(--sp-9))}
/* check_text_fills_box on the site and the console, 2026-10-24. A heading fills its line before it wraps, as the docs'
   headings do: balanced, "Set up with an AI agent." broke 110 to 214px short of its box. */
:is(h1,h2,h3,h4){text-wrap-style:pretty}
/* A sentence in a table, a list or a paragraph ends on no lone word ("shared", "applies", "Back."). The style alone: the
   text-wrap shorthand also sets the wrap mode, undoing a visually hidden hint's nowrap (.nl-fb-sr, a word a line in 1px). */
:is(.main,.s-wrap) :is(p,li,th,td){text-wrap-style:pretty}
#funnel-sources th[scope=row]{text-wrap-style:auto}   /* a site name fills its line before breaking at a dot; pretty broke "(acme-" early */
/* Two buttons that stack on a phone stand at one width, the row's, rather than at their texts' two widths. */
@media(max-width:600px){
  .nl-open .k-row,.main p.btnrow:not(.end){flex-direction:column;align-items:stretch}
  .nl-open .k-row>*,.main p.btnrow:not(.end)>*{justify-content:center}
}
/* The people in a list line up: each row was its own grid, so a role sat 57px further right in one row than the next. */
@media(min-width:821px){
  .people:has(.prole .badge){display:grid;grid-template-columns:minmax(0,2fr) minmax(var(--size-42),1fr) auto minmax(0,auto);column-gap:var(--sp-4)}
  .people:has(.prole .badge)>.person{grid-column:1/-1;grid-template-columns:subgrid}
}
.nl-people>.nl-faces{vertical-align:middle;margin-right:var(--sp-2)}
/* On a phone a ladder step's pill goes under its title rather than over it ("Always on" over "Push to your devices" at 320). */
@media(max-width:400px){
  .nl-rung{grid-template-columns:var(--ctl-h) minmax(0,1fr)}
  .nl-rungact{grid-column:2;position:static;min-height:0}   /* the 480px rule pins it top right, over the title */
}
/* A short compound stays whole: "sign-in" and "on-call" split at the hyphen read as broken words. */
.nl-nw{white-space:nowrap}