/* page-surface.css — the primitives every Jinja page is written in.
 * Reads only tokens.css (load it first). DESIGN-SYSTEM.md lists the grammar;
 * the prototype that decided it is linked there. A page never restyles
 * these; it composes them. page-chrome.css (the topbar) is the other half. */
*{box-sizing:border-box;}
html,body{margin:0;min-height:100%;}
body{background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:var(--size-body);line-height:1.45;-webkit-font-smoothing:antialiased;}
a{color:inherit;}

/* Page container: one width, one gutter. */
.page{max-width:var(--page-width);margin:0 auto;padding:28px var(--page-gutter) 60px;}
.page.wide{max-width:var(--page-width-wide);}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:22px;}
.page-head h1{font-size:var(--size-heading);font-weight:800;margin:0;letter-spacing:-.2px;}
.page-head .sub{color:var(--sub);font-size:var(--size-sub);margin-top:4px;}
.crumb{color:var(--sub);font-size:12.5px;text-decoration:none;display:inline-block;margin-bottom:8px;}
.crumb:hover{color:var(--orange);}

/* Section heading: the one uppercase label. */
.section{margin-top:34px;}
.section:first-of-type{margin-top:0;}
.section > h2{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;font-size:var(--size-section);font-weight:700;letter-spacing:var(--section-tracking);text-transform:uppercase;color:var(--sub);margin:0 0 12px;}
.section > h2 .caption{flex-basis:100%;text-transform:none;letter-spacing:0;font-weight:400;font-size:var(--size-sub);margin-top:-1px;}
/* The one action or filter a section carries, pinned right of its heading. */
.section > h2 .aside{margin-left:auto;display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-weight:600;}
.section > h2 .chip{text-transform:none;letter-spacing:0;}
.section.danger > h2{color:var(--danger);}

/* Buttons: width from the label, weight from colour. */
.btn{display:inline-flex;align-items:center;gap:6px;height:var(--control-height);padding:0 14px;border-radius:var(--radius-button);
  border:1px solid var(--border);background:var(--panel);color:var(--text);font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:border-color var(--fade-duration) var(--fade-ease),background var(--fade-duration) var(--fade-ease);}
.btn:hover{border-color:var(--border-strong);}
.btn:focus-visible{outline:2px solid var(--field-focus-ring);outline-offset:2px;}
.btn:disabled{opacity:.5;cursor:default;}
.btn-primary{background:var(--orange);border-color:var(--orange);color:var(--orange-ink);}
.btn-primary:hover{border-color:var(--orange);filter:brightness(1.06);}
/* Door submit only. Map chrome keeps orange. */
/* A door stays white in both themes, so its controls stay light too. */
.surface-door{color-scheme:light;}
.surface-door .btn-primary{background:var(--door-action);border-color:var(--door-action);color:var(--door-action-ink);}
.surface-door .btn-primary:hover{border-color:var(--door-action);}
/* Staff console only. Follows the theme. White/black action, never door
   blue. A picked filter is a filled pill. An on switch is ink. */
body.surface-console{background:var(--console-canvas);color:var(--console-text);font-size:var(--console-size-body);}
.surface-console .btn{height:40px;padding:0 18px;border-radius:var(--console-radius-pill);background:transparent;border-color:var(--console-quiet);font-size:14px;font-weight:500;}
.surface-console .btn:hover{background:var(--console-hover);border-color:var(--console-quiet);}
.surface-console .btn-ghost{background:none;border-color:transparent;}
.surface-console .btn-primary{background:var(--console-action);border-color:transparent;color:var(--console-action-ink);}
.surface-console .btn-primary:hover{background:var(--console-action-hover);border-color:transparent;filter:none;}
.surface-console .btn-danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent);}
.surface-console .btn-danger:hover{background:color-mix(in srgb,var(--danger) 12%,transparent);}
.surface-console .btn-sm{height:32px;padding:0 12px;font-size:13px;}
.surface-console .group{border:1px solid var(--console-border);background:var(--console-elev);border-radius:var(--console-radius-panel);}
.surface-console .switch input{background:var(--console-quiet);}
.surface-console .switch input:checked{background:var(--console-text);}
.surface-console .switch input::after{background:var(--console-knob);}
.surface-console .switch input:checked::after{background:var(--console-knob-on);}
.surface-console .check input:checked{background:var(--console-text);border-color:var(--console-text);}
.surface-console .check input:checked::after{border-color:var(--console-knob);}
.surface-console .seg{display:flex;flex-wrap:wrap;gap:4px;border:0;padding:0;background:none;}
.surface-console .seg button{height:32px;padding:0 12px;border:0;border-radius:var(--console-radius-pill);background:transparent;color:var(--console-sub);font-size:14px;font-weight:400;}
.surface-console .seg button:hover{color:var(--console-text);background:var(--console-hover);}
.surface-console .seg button[aria-pressed=true]{background:var(--console-action);border-color:transparent;color:var(--console-action-ink);box-shadow:none;}
.surface-console .control{height:var(--console-control-height);padding:0 16px;border-radius:var(--console-radius);background:var(--console-field);border-color:var(--console-quiet);font-size:15px;}
.surface-console textarea.control{height:auto;padding:12px 16px;border-radius:var(--console-radius);}
.surface-console .control.sm{width:auto;height:40px;border-radius:var(--console-radius-nav);}
.surface-console .page-head h1{font-size:var(--console-size-heading);font-weight:500;letter-spacing:-.045em;line-height:1.08;}
.surface-console .page-head .sub{max-width:40ch;color:var(--console-sub);font-size:var(--console-size-body);line-height:1.45;}
.surface-console .chip{height:22px;background:var(--console-fill);border-color:transparent;color:var(--console-text);font-size:12px;font-weight:500;}
.surface-console .notice{padding:14px 16px;border:0;border-radius:var(--console-radius);background:var(--console-fill);font-size:14px;}
.surface-console .field > label{font-weight:400;color:var(--console-sub);font-size:13px;}
.surface-console .empty{border:0;padding:18px 0;text-align:left;background:none;font-size:15px;color:var(--console-sub);}

/* Door frame: a short white bar, then a column whose title lines up with
   the fields and sits centred in the leftover viewport. Sign-in, signup,
   and billing only. The bar keeps the theme control because the door
   itself does not change colour. The mark links to the marketing site. */
body.surface-door{min-height:100dvh;display:flex;flex-direction:column;}
.door-bar{position:sticky;top:0;z-index:var(--z-chrome);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
  min-height:var(--tap-target);padding:8px var(--page-gutter);background:var(--bg);border-bottom:1px solid var(--border);}
.door-mark{font-size:16px;font-weight:650;letter-spacing:-.02em;color:var(--text);text-decoration:none;}
a.door-mark:hover{color:var(--text);}
.door-bar theme-toggle,.door-bar account-menu{--tt-size:var(--icon-button);--am-size:var(--icon-button);
  --tt-bg:var(--bg);--am-bg:var(--bg);--tt-bg-hover:var(--panel);--am-bg-hover:var(--panel);
  --tt-fg:var(--text);--am-fg:var(--text);--tt-border:var(--border);--am-border:var(--border);
  --tt-border-hover:var(--border-strong);--am-border-hover:var(--border-strong);--tt-blur:0;--am-blur:0;}
/* The account card on a door is white in both themes. Selected appearance is black. */
.surface-door account-menu{
  --am-menu-bg:var(--door-bg);--am-menu-fg:var(--door-text);--am-menu-sub:var(--door-sub);
  --am-menu-border:var(--door-border);--am-selected:var(--door-focus);--am-selected-ink:#fff;
  --am-open:var(--door-focus);--am-open-ink:#fff;
}
/* First/last child margin:auto centres the stack when it fits, and collapses
   so a tall form (signup, billing) scrolls from the top instead of clipping.
   Those two rules sit after child margin shorthands so auto wins. */
.door-column{box-sizing:border-box;flex:1;display:flex;flex-direction:column;align-items:center;
  width:100%;max-width:100%;padding:32px var(--page-gutter) 48px;}
.door-column > *{box-sizing:border-box;width:100%;max-width:var(--form-width);min-width:0;}
.door-column .form{box-sizing:border-box;width:100%;max-width:var(--form-width);min-width:0;}
.door-column h1{font-size:var(--size-heading);font-weight:600;letter-spacing:-.03em;margin:0 0 18px;}
.door-column .quiet-link{display:block;text-align:center;margin-top:14px;color:var(--sub);font-size:12.5px;text-decoration:none;}
.door-column .quiet-link:hover{color:var(--text);}
.surface-door fieldset.field{border:0;margin:0;padding:0;min-inline-size:0;width:100%;}
.surface-door fieldset.field > legend{font-size:var(--size-label);font-weight:600;padding:0;margin-bottom:6px;}
.surface-door .choice{display:flex;flex-wrap:wrap;gap:8px 16px;width:100%;max-width:100%;min-width:0;}
/* A display rule beats the hidden attribute. These rows start hidden. */
.surface-door .choice[hidden]{display:none;}
.door-column .door-lead{color:var(--sub);margin:-10px 0 18px;}
.door-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;width:100%;min-width:0;margin-top:36px;}
.door-legal{font-size:var(--size-hint);color:var(--sub);}
.door-legal a{color:inherit;text-decoration:none;}
.door-legal a:hover{color:var(--text);}
.door-lang{display:flex;gap:6px;}
.door-lang select.control{width:auto;height:30px;font-size:12px;color:var(--sub);}
.door-lang.js button{display:none;}
.door-column > :first-child{margin-top:auto;}
.door-column > :last-child{margin-bottom:auto;}
.btn-danger{color:var(--danger);}
.btn-danger:hover{border-color:var(--danger);}
.btn-ghost{background:none;border-color:transparent;}
.btn-ghost:hover{background:var(--tint-hover);border-color:transparent;}
.btn-sm{height:30px;padding:0 10px;font-size:12px;}
.btn-row{display:flex;justify-content:flex-end;gap:8px;margin-top:22px;}
.btn-row .spacer{flex:1;}
/* A form with one action (sign in, reset, join, send) ends in one full-width
   primary; a form with a choice (Cancel / Create) keeps the row above. */
.btn-block{width:100%;justify-content:center;margin-top:22px;}
.btn-block + .quiet-link{display:block;text-align:center;margin-top:14px;color:var(--sub);font-size:12.5px;text-decoration:none;}
.btn-block + .quiet-link:hover{color:var(--text);}
.icon-btn{width:var(--icon-button);height:var(--icon-button);border-radius:50%;border:1px solid var(--border);background:var(--bg);color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;position:relative;}
.icon-btn::after{content:'';position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:var(--tap-target);height:var(--tap-target);}
.icon-btn:hover{background:var(--panel);border-color:var(--border-strong);}
.icon-btn svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}

/* Forms: label above, hint under the control, error replaces hint. One column. */
.form{display:flex;flex-direction:column;gap:var(--field-gap-field);max-width:var(--form-width);}
.field{display:flex;flex-direction:column;gap:var(--field-gap-label);}
.field > label{font-size:var(--size-label);font-weight:600;display:flex;align-items:baseline;gap:8px;}
.field > label .opt{color:var(--sub);font-weight:400;font-size:var(--size-hint);}
.field .hint{font-size:var(--size-hint);color:var(--sub);line-height:1.45;}
.field .error{font-size:var(--size-hint);color:var(--danger);font-weight:600;}
.field.invalid .control{border-color:var(--danger);}
.field.invalid .hint{display:none;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:520px){.field-row{grid-template-columns:1fr;}}
.control{height:var(--control-height);width:100%;padding:0 var(--field-padding-x);border-radius:var(--radius-control);
  border:1px solid var(--border);background:var(--input-bg);color:var(--text);font:inherit;font-size:13px;
  transition:border-color var(--fade-duration) var(--fade-ease);}
.control::placeholder{color:var(--sub);}
.control:focus{outline:none;border-color:var(--field-focus-ring);}
textarea.control{height:auto;min-height:84px;padding:9px var(--field-padding-x);resize:vertical;line-height:1.45;}
select.control{appearance:none;-webkit-appearance:none;padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;}
.control.has-unit{padding-right:52px;}
.unit-wrap{position:relative;}
.unit-wrap .unit{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--sub);pointer-events:none;}
/* Compact control for a list row's right slot (same step down as .btn-sm). */
.control.sm{height:30px;width:auto;font-size:12.5px;}
select.control.sm{padding-right:28px;background-position:right 9px center;}
input[type=file].control{padding:7px var(--field-padding-x);}
input[type=file].control::file-selector-button{font:inherit;font-size:12px;font-weight:600;height:22px;padding:0 9px;border-radius:6px;border:1px solid var(--border);background:var(--panel);color:var(--text);margin-right:10px;cursor:pointer;}

/* Settings group (B): things you flip or set, saved as you go. Label left,
   control pinned right, one filled block per group, rows separated by height
   alone — no hairlines, same rule as .list. A form that ends in a submit
   button is never a .group; that is .form (C). */
.group{background:var(--panel);border-radius:var(--radius-card);overflow:hidden;}
.group + .group{margin-top:18px;}
.grow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 14px;min-height:44px;}
.grow .lbl{min-width:0;}
.grow .lbl .t{display:block;font-size:var(--size-label);font-weight:500;}
.grow .lbl .d{font-size:var(--size-hint);color:var(--sub);margin-top:1px;line-height:1.4;}
.grow .lbl .d.err{color:var(--danger);font-weight:600;}
.grow .ctl{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:none;width:200px;max-width:55%;}
.grow .ctl .control{height:30px;font-size:13px;}
.grow .ctl .val{font-size:13px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.grow .ctl .switch{padding:0;}
.grow.invalid .control{border-color:var(--danger);}
.grow.link{cursor:pointer;text-decoration:none;color:inherit;}
.grow.link:hover{background:var(--tint-hover);}
.grow.destructive{width:100%;justify-content:center;color:var(--danger);font:inherit;font-size:13px;background:none;border:none;cursor:pointer;}
.grow.destructive:hover{background:var(--tint-hover);}
.group-foot{font-size:var(--size-hint);color:var(--sub);margin:6px 14px 0;line-height:1.5;min-height:1.5em;}
.group-foot.err{color:var(--danger);font-weight:600;}
/* Phones: a text control drops under its label; a switch stays beside it. */
@media (max-width:480px){.grow{flex-wrap:wrap;}.grow .ctl{width:100%;max-width:none;justify-content:flex-start;}.grow .ctl:has(> .switch){width:auto;flex:none;}}

/* Toggle: keeps its shape; only the knob moves. */
.switch{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;}
.switch .t{font-size:var(--size-label);font-weight:600;}
.switch .d{font-size:var(--size-hint);color:var(--sub);margin-top:2px;}
.switch input{appearance:none;-webkit-appearance:none;width:40px;height:24px;border-radius:var(--radius-pill);background:var(--border-strong);position:relative;cursor:pointer;flex:none;margin:0;transition:background var(--fade-duration) var(--fade-ease);}
.switch input::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--bg);transition:transform var(--fade-duration) var(--fade-ease);}
.switch input:checked{background:var(--orange);}
.switch input:checked::after{transform:translateX(16px);}
.switch input:focus-visible{outline:2px solid var(--field-focus-ring);outline-offset:2px;}

.check{display:flex;align-items:flex-start;gap:10px;font-size:13px;cursor:pointer;}
/* --border-strong, not --chk-border: that one is glass-family and only
   re-pins for light inside .surface-reading, so on a light page the box
   was white on white. */
.check input{appearance:none;-webkit-appearance:none;width:18px;height:18px;flex:none;margin:1px 0 0;border-radius:5px;border:1.5px solid var(--border-strong);background:var(--input-bg);position:relative;cursor:pointer;}
.check input:checked{background:var(--orange);border-color:var(--orange);}
.check input:checked::after{content:'';position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid var(--orange-ink);border-width:0 2px 2px 0;transform:rotate(45deg);}
.check input:focus-visible{outline:2px solid var(--field-focus-ring);outline-offset:2px;}

/* Range: thicker track, visible thumb. */
.range{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:var(--radius-pill);background:var(--border-strong);outline:none;margin:10px 0;}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--orange);border:2px solid var(--bg);box-shadow:0 0 0 1px var(--border-strong);cursor:pointer;}
.range-value{font-weight:700;color:var(--orange);font-variant-numeric:tabular-nums;font-size:13px;background:rgba(var(--orange-rgb),.14);padding:1px 7px;border-radius:6px;}

/* Segmented: the one "pick one of few" control. */
.seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-control);padding:3px;gap:2px;background:var(--input-bg);}
.seg button{font:inherit;font-size:12.5px;font-weight:600;height:28px;padding:0 12px;border:none;border-radius:7px;background:none;color:var(--sub);cursor:pointer;}
.seg button[aria-pressed=true]{background:var(--panel);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.18);}

/* Lists: spacing and hover, never a hairline. Fixed slots. */
.list{display:flex;flex-direction:column;gap:var(--list-row-gap);margin:0;padding:0;list-style:none;}
.row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:var(--list-row-padding);border-radius:var(--list-row-radius);text-decoration:none;color:inherit;
  transition:background var(--fade-duration) var(--fade-ease);}
a.row:hover,.row.clickable:hover{background:var(--list-row-hover);}
.row.selected{background:rgba(var(--orange-rgb),.12);}
.row .lead{width:36px;height:36px;border-radius:9px;background:var(--panel);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--sub);overflow:hidden;}
.row .lead img{width:100%;height:100%;object-fit:cover;}
.row.no-lead{grid-template-columns:1fr auto;}
.row .body{min-width:0;}
.row .t{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.row .d{font-size:var(--size-hint);color:var(--sub);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.row .meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums;white-space:nowrap;}
.row .meta .chev{width:14px;height:14px;stroke:var(--sub);stroke-width:2;fill:none;}
.list .none{padding:var(--list-row-padding);font-size:12.5px;color:var(--sub);}
/* A form opened inline under the row it edits (Cancel/Save closes it). */
.row > .form{grid-column:1/-1;max-width:none;padding:6px 0 4px;}
.row > .form .btn-row{margin-top:0;}
.list.dense .row{padding:7px 12px;}
.list.dense .row .lead{width:28px;height:28px;}

/* Chip: one shape, tone from token. Only two tones carry a colour — ok
   (rare, good news) and danger (rare, something failed or is about to be
   destroyed). A "warn" chip is deliberately colourless: it uses the same
   neutral look as an untoned chip. There are many warning-level messages
   across the app (a missing GPS fix, a pending invite, a stale share link)
   and colouring all of them the same as a real failure trains people to
   stop reacting to red — so "warn" exists as a name for markup to use
   consistently, not as a third colour. Jerry, 2026-09-20. */
.chip{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:var(--radius-pill);font-size:11px;font-weight:700;letter-spacing:.2px;background:var(--panel);border:1px solid var(--border);color:var(--sub);white-space:nowrap;}
.chip.ok{color:var(--ok);border-color:transparent;background:color-mix(in srgb,var(--ok) 14%,transparent);}
.chip.danger{color:var(--danger);border-color:transparent;background:color-mix(in srgb,var(--danger) 14%,transparent);}
.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.chip .dot.pulse{animation:pulse 1.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* Table: the only surface with a header row and hairlines. Data, not navigation. */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-card);}
table.table{width:100%;border-collapse:collapse;font-size:12.5px;}
.table th{text-align:left;font-size:var(--size-section);font-weight:700;letter-spacing:var(--section-tracking);text-transform:uppercase;color:var(--sub);padding:10px 12px;background:var(--panel);}
.table td{padding:9px 12px;border-top:1px solid var(--border);vertical-align:top;}
.table td.num{text-align:right;font-variant-numeric:tabular-nums;}
.table th.num{text-align:right;}
.table tr:hover td{background:var(--tint-hover);}

/* Notice: inline status. Same colour restraint as .chip above — "warn" is
   the plain, untoned look (regular text and border), so a frequent, minor
   notice doesn't compete with a genuine failure for attention. */
.notice{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:var(--radius-control);font-size:12.5px;line-height:1.45;border:1px solid var(--border);background:var(--panel);}
.notice.ok{border-color:color-mix(in srgb,var(--ok) 35%,transparent);background:color-mix(in srgb,var(--ok) 9%,transparent);}
.notice.danger{border-color:color-mix(in srgb,var(--danger) 35%,transparent);background:color-mix(in srgb,var(--danger) 9%,transparent);}
.notice b{font-weight:700;}
.notice .body{flex:1;}
.status{font-size:11px;font-weight:700;}
.status.ok{color:var(--ok);}
.status.danger{color:var(--danger);}

/* Tabs: orange underline, from _team_panel. */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:18px;overflow-x:auto;scrollbar-width:none;}
.tabs button{font:inherit;font-size:13px;font-weight:600;padding:9px 12px;border:none;background:none;color:var(--sub);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;}
.tabs button[aria-selected=true]{color:var(--text);border-bottom-color:var(--orange);}

/* Card: a bordered reading block. Spend it, don't stamp it. */
.card{border:1px solid var(--border);border-radius:var(--radius-card);padding:18px;background:var(--panel);}
.card + .card{margin-top:12px;}

/* Empty state. */
.empty{border:1px dashed var(--border-strong);border-radius:var(--radius-card);padding:34px 20px;text-align:center;}
.empty h3{margin:0 0 4px;font-size:15px;}
.empty p{margin:0 0 14px;font-size:12.5px;color:var(--sub);}

/* Confirm-twice: the reversible-action pattern. Modal is for consequential ones. */
.confirm-twice[data-armed=true]{color:var(--danger);border-color:var(--danger);}
.icon-btn.confirm-twice[data-armed=true]{width:auto;padding:0 9px;font-size:11px;font-weight:700;}

/* Modal. */
.modal{position:fixed;inset:0;z-index:var(--z-modal);display:none;align-items:center;justify-content:center;padding:20px;background:rgba(var(--glass-rgb),.6);backdrop-filter:blur(var(--glass-scrim-blur));}
.modal.open{display:flex;}
.modal-card{width:420px;max-width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sheet);padding:22px;box-shadow:0 14px 34px -8px rgba(0,0,0,.5);}
.modal-card h3{margin:0 0 6px;font-size:16px;}
.modal-card p{margin:0 0 16px;font-size:12.5px;color:var(--sub);line-height:1.5;}