/* The input line of the Tasks section (static/line.css): the field and its lines (ln-*, at
   the end), the popovers (a range's numbers, a site's map, the settings) and the code drawer.
   The shared f-*, v*-* and fs-* are the runs' too; runs.css keeps only its own. */

/* ---- shared f-* (f.css) ---- */
.f-tile{width:20px;height:20px;border-radius:3px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--font);font-size:10.5px;font-weight:600;line-height:1;color:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 9%,transparent)}
.f-tile.sm{width:16px;height:16px;font-size:9.5px}
.f-tile.lg{width:28px;height:28px;font-size:13px}
/* a site's own icon over its tile's letter, once it loads (console.js) */
.f-tile{position:relative;overflow:hidden}
.f-tile>.fav{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}
.f-tile>.fav.on{opacity:1}
.f-tile:has(>.fav.on){background:transparent!important;color:transparent!important;box-shadow:none}
.f-zone{flex-shrink:0;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--canvas)}
.f-go{padding:0 10px 0 12px}
.f-vsep{width:1px;height:18px;background:var(--line);margin:0 4px;flex-shrink:0}
/* ---- v1 / v2 / v4 ---- */
.v1-p{height:28px;padding:0 9px;font-size:12.5px;gap:5px;border-radius:3px}
.v1-p .k{color:var(--muted)}
.v1-p b{font-weight:500;color:var(--text)}
.v1-p.on .k,.v1-p.on b{color:var(--pill-on-fg)}
.v1-p.open{box-shadow:0 0 0 3px var(--c1-fade)}
.v1-p.off{color:var(--muted)}
.v2-ed{flex-grow:1;min-height:0;background:var(--panel-2);padding:10px 0;overflow:hidden;border-bottom:1px solid var(--line-2)}
.v2-cl{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;min-height:22px;padding-right:12px;font-family:var(--mono);font-size:12.5px;line-height:22px;white-space:pre;color:var(--text)}
.v2-cl .ln{color:var(--muted);opacity:.65;text-align:right;padding-right:14px}
.v2-cl.chg{background:var(--c1-fade);box-shadow:inset 2px 0 0 var(--accent)}
.v2-cl.chg .ln{color:var(--accent);opacity:1}
.v2-k{color:var(--tok-k)}
.v2-s{color:var(--tok-v)}
.v2-b{color:var(--ok-fg)}
.v2-x{color:var(--muted)}
.v2-tag{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:3px;font-family:var(--font);font-size:10.5px;font-weight:500;background:var(--info-bg);color:var(--info-fg)}
/* ---- fs-* (f-site.css) ---- */
.fs-api{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--muted);white-space:nowrap}
/* ---- fc-* (f-compose.css) ---- */
.fc-pop{display:flex;flex-direction:column;background:var(--menu-bg);border:1px solid var(--line);border-radius:4px;box-shadow:var(--shadow);box-sizing:border-box;cursor:default;text-align:left;font-size:13px;color:var(--text)}
.fc-ph{display:flex;align-items:center;gap:8px;height:44px;padding:0 10px 0 16px;border-bottom:1px solid var(--line-2);flex-shrink:0}
.fc-ph .t{font-size:13.5px;font-weight:600}
.fc-ph .sub{font-size:12px}
.fc-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.fc-col{display:flex;flex-direction:column;padding:0 0 10px;min-width:0}
.fc-col+.fc-col{box-shadow:inset 1px 0 0 var(--line-2)}
.fc-g{font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:12px 16px 0}
.fc-o{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px;row-gap:5px;padding:6px 16px}
.fc-o .l{font-size:12.5px;font-weight:500;color:var(--text);white-space:nowrap}
.fc-o .api{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.fc-o .c{grid-column:1 / 3;display:flex;align-items:center;gap:8px;min-width:0}
.fc-o .h{grid-column:1 / 3;font-size:12px;line-height:1.4;color:var(--muted);margin-top:-1px}
.fc-o .h.cost{color:var(--warn-fg);font-variant-numeric:tabular-nums}
.fc-o.chg{position:relative}
.fc-o.chg .api{color:var(--info-fg)}
.fc-o .seg button{height:24px}
.fc-pair{display:grid;grid-template-columns:1fr 1fr}
.fc-pair>.fc-o+.fc-o{padding-left:4px}
.fc-in{height:26px;min-width:0;box-sizing:border-box;display:inline-flex;align-items:center;padding:0 8px;border:1px solid var(--btn-line);border-radius:3px;background:var(--input-bg);font-family:var(--mono);font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-in.k{color:var(--text-2)}
.fc-hdrs{grid-column:1 / 3;display:grid;grid-template-columns:124px minmax(0,1fr) 20px;gap:5px;align-items:center}
.fc-hdrs .btn.sm.ico{width:20px;height:20px;padding:0;color:var(--muted)}
.fc-body{grid-column:1 / 3;height:42px;box-sizing:border-box;padding:6px 8px;border:1px dashed var(--btn-line);border-radius:3px;background:var(--panel-2);font-family:var(--mono);font-size:12px;line-height:17px;color:var(--muted);white-space:pre;overflow:hidden}
.fc-num{display:inline-flex;align-items:center;gap:4px;height:28px;width:76px;padding:0 8px 0 10px;border:1px solid var(--btn-line);border-radius:3px;background:var(--input-bg);box-sizing:border-box;font-size:12.5px}
.fc-num .v{flex-grow:1;font-variant-numeric:tabular-nums}
.fc-num .u{color:var(--muted)}
.fc-sel{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;height:28px;width:124px;padding:0 8px 0 10px;border:1px solid var(--btn-line);border-radius:3px;background:var(--btn-bg);box-sizing:border-box;font-family:inherit;font-size:12.5px;color:var(--text);cursor:pointer}
.fc-sel .i{color:var(--muted)}
.fc-fmts{display:flex;flex-wrap:wrap;gap:6px}
.fc-fmt{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px 0 7px;border:1px solid var(--btn-line);border-radius:3px;background:var(--btn-bg);font-size:12.5px;color:var(--text-2);cursor:pointer;white-space:nowrap}
.fc-fmt .cb{width:14px;height:14px}
.fc-fmt.on{color:var(--text)}
.fc-free{font-size:12px;color:var(--muted)}
.fc-pf{display:flex;align-items:center;gap:4px;padding:8px;border-top:1px solid var(--line-2);background:var(--panel-2);border-radius:0 0 4px 4px}
.fc-pf .btn{color:var(--text-2)}
.fc-pf .btn .i{color:var(--muted)}
.fc-code{width:560px;flex-shrink:0;display:flex;flex-direction:column;min-height:0;position:relative;z-index:1;border-left:1px solid var(--line);background:var(--panel);box-shadow:-18px 0 36px -26px rgba(20,20,19,.28)}
.fc-dh{display:flex;align-items:center;gap:10px;height:52px;padding:0 10px 0 18px;border-bottom:1px solid var(--line);flex-shrink:0;box-sizing:border-box}
.fc-dh .ic{width:28px;height:28px;border-radius:3px;display:inline-flex;align-items:center;justify-content:center;background:var(--neu-bg);color:var(--text-2);flex-shrink:0}
.fc-dh .t{display:flex;flex-direction:column;gap:1px;min-width:0;flex-grow:1}
.fc-dh .t b{font-size:14px;font-weight:600}
.fc-dh .t .sub{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-dh .t .mono{font-size:11.5px;color:var(--text-2)}
.fc-tabs{display:flex;align-items:center;gap:18px;height:42px;padding:0 12px 0 18px;border-bottom:1px solid var(--line);flex-shrink:0}
.fc-tabs .tab{height:42px}
.fc-tabs .btn{margin-left:2px}
.fc-dflt{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);white-space:nowrap}
.fc-code .v2-ed{padding:8px 0}
.fc-code .v2-cl{min-height:20px;line-height:20px}
.v2-cl.fc-wrap{align-items:start}
.v2-cl.fc-wrap>span:nth-child(2){white-space:pre-wrap;word-break:break-all;padding-left:12ch;text-indent:-12ch}
.fc-two{display:flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-bottom:1px solid var(--line-2);font-size:12.5px;color:var(--text-2);flex-shrink:0}
.fc-two .i{color:var(--accent)}
.fc-two .sub{font-size:12px}
.fc-ret{display:flex;flex-direction:column;gap:8px;padding:9px 16px 10px;flex-shrink:0}
.fc-ret .hd{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);white-space:nowrap}
.fc-ret .mono{font-size:11.5px;color:var(--text-2)}
.fc-json{font-family:var(--mono);font-size:12px;line-height:19px;white-space:pre;color:var(--text);background:var(--panel-2);border:1px solid var(--line-2);border-radius:3px;padding:7px 12px;overflow:hidden}
.fc-var{color:var(--ok-fg);font-weight:500}
/* ---- fn-*: a range's pick ---- */
/* the range part of a URL pattern */
.fn-rng{display:inline-block;padding:0 3px;margin:0 1px;border-radius:3px;background:var(--pill-on-bg);box-shadow:inset 0 0 0 1px var(--pill-on-line);color:var(--pill-on-fg);font-weight:500;line-height:19px}

/* the URL pattern with the bracket as editable fields */
.fn-pat{display:flex;align-items:center;min-height:36px;padding:0 6px 0 10px;border:1px solid var(--btn-line);border-radius:3px;background:var(--input-bg);font-family:var(--mono);font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;box-sizing:border-box}
.fn-pat .s{color:var(--muted)}
.fn-nums{display:flex;align-items:flex-end;gap:10px}
.fn-num{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.fn-num .fn-in{width:84px}
.fn-nums .eq{display:flex;flex-direction:column;justify-content:center;height:28px;margin-left:6px;font-size:12.5px;color:var(--text-2);white-space:nowrap}
.fn-nums .eq b{font-size:13.5px;font-weight:600;color:var(--text)}
/* preview list: first two and the last */
.fn-prev{display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:3px;background:var(--panel-2);padding:4px 0}
.fn-pv{display:flex;align-items:center;gap:9px;height:24px;padding:0 10px;font-family:var(--mono);font-size:12px;color:var(--text);white-space:nowrap;min-width:0}
.fn-pv .ix{width:20px;font-family:var(--font);font-size:11px;color:var(--muted);text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}
.fn-pv .p{min-width:0;overflow:hidden;text-overflow:ellipsis}
.fn-pv .p .s{color:var(--muted)}
.fn-pv .p b{font-weight:500;color:var(--pill-on-fg)}
.fn-pv.gap{height:20px;font-family:var(--font);font-size:11.5px;color:var(--muted)}
.fn-pv.gap .dots{width:20px;text-align:right;letter-spacing:1px}

/* small number input (range, caps) */
.fn-in{display:inline-flex;align-items:center;gap:4px;height:28px;width:76px;padding:0 8px 0 10px;border:1px solid var(--btn-line);border-radius:3px;background:var(--input-bg);box-sizing:border-box;font-size:12.5px;color:var(--text)}
.fn-in .v{flex-grow:1;font-variant-numeric:tabular-nums}
.fn-in .u{color:var(--muted)}

/* ---- f-opts.css ---- */

/* code: the pill a written-out default mirrors (right of the line) */
.fo-ctag{font-family:var(--font);font-size:11px;color:var(--muted);white-space:nowrap}
/* a value the chosen login fixes (Country) */
.fo-lock{display:inline-flex}
.fo-lock .i{width:12px;height:12px;color:var(--muted)}

/* More with the admin-only options (admins): two columns, API field on every label (fc-* rows) */
.ln-admin .fc-o .seg button{padding:0 9px}
.ln-admin .fc-o .h b{font-weight:500;color:var(--text-2)}
.ln-admin .fc-in.sel{width:100%;color:var(--text)}
.ln-admin .fc-pair>.fc-o:first-child{padding-right:8px}
.ln-admin .fc-pair>.fc-o+.fc-o{padding-left:8px}
.ln-admin .fc-o.chg .v2-tag{height:17px;padding:0 5px}

/* ---- the console's side of the port (ln-*) ---- */
/* a line's kind menu */
.menu.ln-menu{min-width:240px;max-height:340px;overflow:auto;cursor:default;text-align:left}
.ln-menu .mi-hint{margin-left:auto;padding-left:12px}
.ln-menu .mi.on .mi-hint{display:none}
/* the Every popover (schedule mode) */
.fc-pop.ln-spop{width:440px}
.ln-spop .seg button{padding:0 9px}
.fc-pop.ln-spop .fc-o{padding:6px 16px}
.fc-pop.ln-spop .fc-ph+.fc-o{padding-top:12px}
.fc-pop.ln-spop .fc-o:last-of-type{padding-bottom:12px}
input.fc-in.ln-at{width:96px;height:28px;font-family:var(--font);font-size:12.5px}
.ln-spop .fc-o .c input.fc-in.sel{width:100%;height:28px}
.fc-o.ln-bad input.fc-in{border-color:var(--bad-line)}
.ln-says{min-width:0;padding-right:6px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ln-says.ln-bad{background:none;color:var(--bad-fg)}
/* inputs drawn as the design's fields */
input.fc-in,input.fn-in,textarea.fc-body{font-family:var(--mono);outline:0;margin:0}
input.fc-in{font-size:12px;color:var(--text)}
input.fn-in{font-family:var(--font);font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--text)}
input.fc-in:focus,input.fn-in:focus,textarea.fc-body:focus,.fc-num:focus-within,select.ln-sel:focus{border-color:var(--accent)}
input.fc-in::placeholder,input.fn-in::placeholder,.fc-num input::placeholder,textarea.fc-body::placeholder{color:var(--muted);opacity:.7}
.fn-num input.fn-in{width:84px}
.fc-num input.v{width:100%;min-width:0;border:0;outline:0;padding:0;margin:0;background:transparent;font:inherit;color:var(--text)}
select.fc-sel.ln-sel{appearance:none;-webkit-appearance:none;background:var(--btn-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6e76' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center/14px;padding-right:28px;outline:0}
.fc-fmt input.cb{margin:0}
/* the design's buttons keep the normal line height (the kit's is 1) */
.ln-zone .btn,.fc-pop .btn,.fc-code .btn{line-height:normal}
/* the code drawer lives in #content under the line's zone (line.js sets its top; 71 px
   is the line at rest), right of the runs, which make room for it */
.fc-code.ln-code{position:absolute;top:71px;right:0;bottom:0;z-index:4}
.content:has(>.ln-code)>.f-zone~:not(.ln-code){margin-right:560px}
.fc-dflt{cursor:pointer}
.fc-code .v2-ed{overflow:auto}
.ln-code-empty{padding:4px 18px 10px;font-size:12.5px;color:var(--muted)}

/* a field, as a search box with its toggles at the top right; what runs, the price and Run
   beside it */
.f-zone.ln-zone{padding:6px 10px 6px 8px;background:var(--card-bg);container:lz / inline-size}
.ln-row{display:flex;align-items:flex-start;gap:8px}
.ln-box{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:flex-start;cursor:text;background:var(--input-bg);border:1px solid var(--btn-line);border-radius:3px;overflow:hidden;container-type:inline-size}
.ln-box:has(.ln-ta:focus){border-color:var(--accent)}
/* the lines: a row each (--ln-rows; line.js sets the height), up to --ln-max, then they
   scroll; line.js reads --ln-row and --ln-max */
.ln-lines{--ln-row:26px;--ln-max:8;--ln-shown:min(var(--ln-rows,1),var(--ln-max));position:relative;flex:1 1 auto;min-width:0}
.ln-grid{position:relative;display:flex;align-items:flex-start;min-width:0;box-sizing:border-box;padding:1px 0;height:calc(var(--ln-shown) * var(--ln-row) + 2px);overflow-y:clip;scrollbar-width:thin}
.ln-grid.ln-scroll{overflow-y:auto}
/* the line the caret is in, lit across the field, under its settings too (line.js moves it) while
   the caret is in the lines; the first and the last line take the grid's 1px edge too, lit to the
   field's border */
.ln-cur{display:none;position:absolute;left:0;right:-100vw;top:1px;height:var(--ln-row);background:var(--hover);pointer-events:none}
.ln-cur.first{top:0;height:calc(var(--ln-row) + 1px)}
.ln-cur.last{height:calc(var(--ln-row) + 1px)}
.ln-cur.first.last{height:calc(var(--ln-row) + 2px)}
.ln-box:has(.ln-ta:focus) .ln-cur{display:block}
/* beside each line: the sign of what is wrong with it, its number, its site's tile */
.ln-gut{position:relative;flex-shrink:0;display:flex;flex-direction:column;width:66px;counter-reset:ln}
.ln-no{display:flex;align-items:center;height:var(--ln-row);box-sizing:border-box;counter-increment:ln}
.ln-no>.g{width:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.ln-no>.n{width:16px;flex-shrink:0;text-align:right;font-family:var(--mono);font-size:12px;color:var(--muted);opacity:.75;font-variant-numeric:tabular-nums}
.ln-no>.n::before{content:counter(ln)}
.ln-no.cur>.n{color:var(--text);opacity:1}
.ln-no>.f-tile{margin-left:8px;box-shadow:none}
.ln-no .i{width:14px;height:14px}
.ln-no .err{color:var(--bad-dot)}
.ln-no .warn{color:var(--warn-dot)}
/* the text: the textarea and, over it, the same text drawn again (line.js) with what each
   line says after it; the textarea's own goes clear once it is drawn (.hl) */
.ln-taw{position:relative;flex:1 1 auto;min-width:0;display:flex}
.ln-ta,.ln-hr{font-family:var(--mono);font-size:13px;line-height:var(--ln-row);letter-spacing:0;font-variant-ligatures:none;tab-size:4;white-space:pre}
.ln-ta{flex:1 1 auto;min-width:0;display:block;margin:0;padding:0;border:0;outline:0;border-radius:0;resize:none;background:transparent;box-shadow:none;color:var(--text);caret-color:var(--text);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.ln-ta::-webkit-scrollbar{display:none}
.ln-ta::placeholder{font-family:var(--font);font-size:13px;color:var(--muted);opacity:1}
.ln-box.hl .ln-ta{color:transparent}
.ln-box.hl .ln-ta::selection{color:transparent;background:color-mix(in srgb,var(--accent) 22%,transparent)}
/* the drawn text scrolls with the textarea (line.js); a long line keeps what follows its text at
   the field's right edge, fading the text under it */
.ln-hl{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ln-hr{display:flex;align-items:flex-start;width:max-content;min-width:100%;height:var(--ln-row);color:var(--text)}
.ln-af{position:sticky;right:0;display:flex;align-items:flex-start;padding-left:14px;background:linear-gradient(90deg,transparent,var(--ln-af-bg,var(--input-bg)) 14px)}
.ln-hr .ln-af>:first-child{margin-left:0}
.ln-hr .s{color:var(--muted)}
.ln-hr .sq-e,.ln-hr .sq-w{text-decoration:underline wavy var(--bad-dot) 1px;text-underline-offset:4px;text-decoration-skip-ink:none}
.ln-hr .sq-w{text-decoration-color:var(--warn-dot)}
/* after a line's text: what it runs as, what is wrong with it, its removal, and on the
   last line, while the caret is in it, a + for a new line */
.ln-hr :is(.ln-dc,.ln-dx,.ln-nl){display:inline-flex;align-items:center;vertical-align:top;height:20px;margin:3px 0 0 14px;padding:0 4px;border:0;border-radius:3px;background:none;font-family:var(--font);font-size:12px;color:var(--muted);white-space:nowrap;pointer-events:auto}
.ln-hr :is(button.ln-dc,.ln-dx,.ln-nl){cursor:pointer}
.ln-dc{gap:5px}
.ln-dc .i,.ln-dx .i,.ln-nl .i{width:12px;height:12px}
.ln-dc.kd{color:var(--pill-on-fg)}
.ln-dc.t-bad{color:var(--bad-fg)}
.ln-dc.t-warn{color:var(--warn-fg)}
.ln-hr .ln-dx{width:20px;margin-left:2px;padding:0;justify-content:center}
.ln-hr .ln-dc+.ln-dc,.ln-hr .ln-dx+.ln-dc{margin-left:8px}
.ln-box:has(.ln-ta:focus) .ln-hr.cur{--ln-af-bg:var(--hover)}
.ln-xall{color:var(--text-2);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.ln-hr .ln-nl{display:none;width:20px;padding:0;justify-content:center}
.ln-hr .ln-nl.on{display:inline-flex}
:is(.ln-dx,button.ln-dc,button.ln-it):is(:hover,.open),.ln-nl:hover{background:var(--hover);color:var(--text-2)}
/* a site that sets something apart: a dot on its tile in the gutter, which opens its
   settings (as an editor marks a modified file) */
.ln-own{position:relative;display:inline-flex;margin-left:8px;padding:0;border:0;border-radius:3px;background:none;cursor:pointer;pointer-events:auto}
.ln-no>.ln-own>.f-tile{margin:0;box-shadow:none}
.ln-own::after{content:'';position:absolute;right:-3px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--panel)}
.ln-own:hover,.ln-own.open{box-shadow:0 0 0 2px var(--hover)}
/* the field's top right: what won't run (line.js) and the one Settings button, which names
   what the run changes; beside the field the price and Run */
.ln-opts{position:relative;z-index:1;flex:none;display:flex;align-items:center;gap:1px;height:26px;margin:2px 3px 0 8px;cursor:default}
.ln-sets{display:contents}
.ln-opts .ln-it{height:22px;padding:0 6px}
.ln-out{display:flex;align-items:center;gap:2px;min-height:30px;flex-shrink:0;font-size:12px;color:var(--text-2)}
.ln-probs{display:flex;align-items:center;gap:2px}
.ln-probs:not(:empty)::after{content:'';width:1px;height:14px;margin:0 4px 0 6px;background:var(--line);flex-shrink:0}
.ln-it{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 7px;border:0;border-radius:3px;background:none;font-family:var(--font);font-size:12px;color:var(--text-2);white-space:nowrap;flex-shrink:0;cursor:pointer}
.ln-it .i{width:13px;height:13px;color:var(--muted)}
.ln-it.on{color:var(--text)}
.ln-it.on .i{color:var(--accent)}
.ln-it.e .i{color:var(--bad-dot)}
.ln-it.w .i{color:var(--warn-dot)}
.ln-it.ln-setb{gap:6px;color:var(--text)}
.ln-sv{padding-left:6px;border-left:1px solid var(--line);color:var(--text-2);font-weight:400}
.ln-sv .m{margin-left:5px;color:var(--muted)}
.ln-price{min-width:96px;margin:0 6px 0 8px;text-align:right;font-size:12.5px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.ln-price .m{color:var(--muted);font-weight:400}
/* Run says what it runs, and its menu holds a schedule and the API call */
.ln-run{display:inline-flex;align-items:stretch}
/* as wide whatever it runs (Run … Run 1,000 pages): typing moves nothing beside it */
.ln-out .f-go{min-width:142px;justify-content:center;gap:6px;padding:0 12px 0 11px;border-top-right-radius:0;border-bottom-right-radius:0}
.ln-out .f-go .play{width:11px;height:11px;fill:currentColor;stroke:none}
.ln-n{font-weight:400;opacity:.8}
.ln-runm{padding:0 7px;border-top-left-radius:0;border-bottom-left-radius:0;box-shadow:inset 1px 0 0 rgba(255,255,255,.28)}
.ln-runm .i{width:13px;height:13px}
/* a narrow field keeps the Settings icon and the counts of the lines that won't run */
@container (max-width: 760px){.ln-opts .ln-setb{font-size:0;gap:0;padding:0 5px}.ln-opts .ln-sv{display:none}}
/* the open popover hangs under what opened it, over the lines' scroll (line.js) */
.ln-pop{position:absolute;z-index:8}
.ln-pop:empty{display:none}
/* the lines that won't run, said to a screen reader */
.ln-say{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* the settings, as an editor's: all sites and each site as tabs (with how many each
   changes), a search, the settings in groups, a changed one with a bar and its reset, a
   site's that follows a change of all sites' greyed; the admin settings folded (unfolded,
   two columns wide) and a footer of what is changed */
.fc-pop.ln-set{width:460px;padding:0;overflow:hidden}
.fc-pop.ln-set.ln-set-w{width:680px}
.ln-set .fc-ph .f-tile{margin-right:-2px}
.ln-stabs{display:flex;gap:2px;padding:4px 8px 0;border-bottom:1px solid var(--line-2);overflow-x:auto;scrollbar-width:none}
/* as an editor's tabs: its words as written, the shown one underlined (inside the bar, which
   clips what hangs below it) */
.ln-stabs .tab{height:34px;gap:6px;padding:0 10px;margin-bottom:0;border-bottom:2px solid transparent;font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--text-2)}
.ln-stabs .tab:hover{color:var(--text)}
.ln-stabs .tab.on{border-bottom-color:var(--accent);color:var(--text);font-weight:500}
.ln-stabs .f-tile{box-shadow:none}
.ln-cnt{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:8px;background:var(--pill-on-bg);color:var(--pill-on-fg);font-size:10.5px;font-weight:600;letter-spacing:0}
.ln-set .search{margin:8px 12px 2px}
.ln-rows{display:flex;flex-direction:column;padding:0 0 6px}
.ln-sg{padding:10px 16px 4px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ln-o{position:relative;display:grid;grid-template-columns:140px minmax(0,1fr) 26px;align-items:center;gap:0 8px;min-height:36px;padding:0 6px 0 16px;box-sizing:border-box}
.ln-o:hover{background:var(--hover)}
label.ln-o{cursor:pointer}
.ln-o>.l{display:flex;flex-direction:column;gap:1px;font-size:13px;color:var(--text);white-space:nowrap}
.ln-from{font-size:11px;color:var(--muted)}
.ln-o.inh>.c{opacity:.55}
.ln-o.mod::before,.fc-o.chg::before{content:'';position:absolute;left:5px;top:8px;bottom:8px;width:2px;border-radius:1px;background:var(--accent)}
.ln-o>.c{display:flex;align-items:center;min-width:0}
.ln-rs{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:3px;background:none;color:var(--muted);cursor:pointer}
.ln-rs:hover{background:var(--hover-2,var(--hover));color:var(--text)}
.ln-rs .i{width:13px;height:13px}
.ln-o.ln-wide{grid-template-columns:minmax(0,1fr) 26px;grid-template-rows:auto auto;gap:6px 8px;padding-top:8px;padding-bottom:10px}
.ln-o.ln-wide>.c{grid-row:2;grid-column:1 / -1}
.ln-o.ln-wide>:last-child{grid-row:1;grid-column:2}
.ln-o.ln-wide>.c>*{flex:1 1 auto;min-width:0}
.ln-o .seg button{height:24px;padding:0 12px}
.ln-o .sel-btn.inp{width:200px;font-size:12.5px}
.ln-fixed{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:500}
.ln-set .ln-body{height:64px;width:100%;resize:vertical;outline:0;color:var(--text);white-space:pre-wrap}
.ln-fold{display:flex;align-items:center;gap:6px;width:100%;height:36px;padding:0 16px 0 12px;border:0;border-top:1px solid var(--line-2);background:none;font:inherit;font-size:12.5px;font-weight:500;color:var(--text-2);cursor:pointer;text-align:left}
.ln-fold:hover{background:var(--hover)}
.ln-fold .i{width:13px;height:13px;color:var(--muted);transition:transform 80ms}
.ln-fold[aria-expanded="true"] .i{transform:rotate(90deg)}
.ln-adf{display:flex;padding:4px 10px 8px}
.ln-sf{display:flex;align-items:center;gap:10px;height:40px;padding:0 8px 0 16px;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--text-2)}
.ln-sf .btn{margin-left:auto;color:var(--text-2)}
.ln-sf .btn .i{color:var(--muted)}

/* a quick pick, as VS Code's: a field on top, the choices, a footer of what bounds them */
.fc-pop.ln-qp{width:500px;padding:0;overflow:hidden}
.ln-qp-h{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 12px;border-bottom:1px solid var(--line-2)}
.ln-qp-h .fn-pat{min-height:28px;min-width:0;overflow:hidden;font-size:12.5px}
.ln-rng .fn-nums{padding:12px 12px 10px}
.ln-rng .fn-prev{margin:0 12px 12px}
.ln-qp-in{display:flex;align-items:center;gap:6px;height:32px;margin:6px;padding:0 4px 0 8px;border:1px solid var(--accent);border-radius:2px;background:var(--input-bg);color:var(--muted)}
.ln-qp-in .i{width:14px;height:14px;flex-shrink:0}
.ln-qp-in input{flex:1 1 auto;min-width:0;height:100%;border:0;outline:0;padding:0;background:transparent;font:inherit;font-size:13px;color:var(--text)}
.ln-qp-in .c{font-size:12px;color:var(--text-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.ln-qp-in .c .m{color:var(--muted)}
.ln-qp-in .btn{flex-shrink:0}
.ln-qp-t{display:flex;flex-direction:column;max-height:316px;overflow:auto;scrollbar-width:thin;padding:0 0 4px}
/* a section: its caret, its box, its path, its pages and its share of the site */
.ln-qr{display:grid;grid-template-columns:calc(var(--d,0) * 14px + 18px) 14px minmax(0,1fr) 48px 64px;align-items:center;gap:6px;height:24px;padding:0 12px 0 4px;font-size:12.5px;flex-shrink:0}
.ln-qr:hover{background:var(--hover)}
.ln-qr.cur{background:var(--cur-bg);box-shadow:inset 0 0 0 1px var(--accent)}
.ln-qr[hidden]{display:none}
.ln-qr .p{font-family:var(--mono);font-size:12px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ln-qr .n{text-align:right;color:var(--text-2);font-variant-numeric:tabular-nums}
.ln-qr.off .p,.ln-qr.off .n{color:var(--muted)}
.mp-car{justify-self:end;width:16px;height:16px;padding:0;border:0;background:var(--muted);cursor:pointer;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/14px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/14px no-repeat}
.mp-car.open{transform:rotate(90deg)}
.mp-car:hover{background:var(--text)}
.mp-cb{width:14px;height:14px;box-sizing:border-box;padding:0;border:1px solid var(--split-line);border-radius:3px;background:var(--input-bg);cursor:pointer}
.mp-cb.on{border-color:var(--pri-bg);background:var(--pri-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat}
.mp-cb.mix{border-color:var(--pri-bg);background:var(--pri-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/10px no-repeat}
.mp-cb:focus-visible{outline-offset:1px}
.mp-sh{height:4px;background:var(--track)}
.mp-sh i{display:block;height:4px;background:var(--accent)}
.ln-qr.off .mp-sh i{background:var(--muted);opacity:.45}
/* while the map is made: what it reads, rows to come */
.ln-qp-say{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:12.5px;color:var(--text-2)}
.ln-qp-say.bad{color:var(--bad-fg)}
.ln-qp-say.warn{color:var(--warn-fg)}
.ln-qp-spin{width:12px;height:12px;flex-shrink:0;box-sizing:border-box;border:1.75px solid var(--muted);border-right-color:transparent;border-radius:50%;animation:spin 1.5s linear infinite}
.ln-qr-sk:hover{background:none}
.ln-qr-sk .sk{height:8px;border-radius:2px;background:var(--line-2)}
.ln-qr-sk .mp-cb{cursor:default}
.ln-qp-f{display:flex;align-items:center;gap:8px;height:42px;padding:0 8px 0 12px;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--text-2);white-space:nowrap}
.ln-qp-f .l{color:var(--text)}
.ln-qp-f .ln-num{width:64px}
.ln-qp-seg>button{min-width:30px;padding:0 6px}

/* a site template's words and card (an administrator's) */
.ln-dc.tpl{color:var(--text-2)}
.fc-pop.ln-tpl{width:360px}
.ln-tpl-h{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line-2)}
.ln-tpl-ic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;background:var(--pill-on-bg);color:var(--pill-on-fg)}
.ln-tpl-ic .i{width:14px;height:14px}
.ln-tpl-t{display:flex;flex-direction:column;gap:1px;flex:1 1 auto;min-width:0}
.ln-tpl-t .k{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ln-tpl-t b{font-size:13.5px;font-weight:600}
.ln-tpl-l{padding:0 0 8px}
.ln-tpl-r{display:flex;align-items:center;gap:8px;height:28px;padding:0 16px;font-size:13px}
.ln-tpl-r .i{width:12px;height:12px;color:var(--muted)}
.ln-tpl-r .mono{margin-left:auto;font-size:11.5px}
/* a setting its site's template fixes: locked, named after the template */
.ln-tplv{font-size:12.5px;color:var(--muted)}
.ln-o.lock .ln-from{display:inline-flex;align-items:center;gap:4px;color:var(--pill-on-fg)}
.ln-o.lock .ln-from .i{width:11px;height:11px}

/* a kind other than one page: its words and × one chip, like an editor's inlay; the ×
   turns red under the pointer, as an editor tab's close does */
.ln-hr .ln-dc.kd:has(+.ln-dx){padding:0 6px 0 5px;background:var(--pill-on-bg);border-radius:3px 0 0 3px}
.ln-hr .ln-dc.kd+.ln-dx{margin-left:0;padding:0 4px;background:var(--pill-on-bg);color:var(--pill-on-fg);border-radius:0 3px 3px 0;box-shadow:inset 1px 0 0 var(--pill-on-line)}
.ln-hr .ln-dc.kd:has(+.ln-dx):is(:hover,.open){background:var(--pill-on-line);color:var(--pill-on-fg)}
.ln-hr .ln-dc.kd+.ln-dx:hover{background:var(--bad-bg);color:var(--bad-fg);box-shadow:inset 1px 0 0 var(--bad-line)}
/* a narrow line: the price and Run go under the URLs */
@container lz (width < 600px){.ln-row{flex-wrap:wrap}.ln-box{flex-basis:100%}.ln-out{margin-left:auto}}
/* a narrow window: the code drawer covers the list under the line, the line stays in sight */
@container content (width < 1000px){
  .fc-code.ln-code{left:0;width:auto;border-left:0;border-top:1px solid var(--line);box-shadow:none}
  .content:has(>.ln-code)>.f-zone~:not(.ln-code){margin-right:0}
}