/* VIBRIYOGN shared UI system: one layout, header, tab bar, button set and form controls for Ops, Clock-in and Flow.
   Source of truth: admin/public/ui.css. Clock-in and Flow carry copies (scripts/ui_sync.py); never edit the copies.
   Loaded after each app's app.css, so these rules are the last word on layout. Pages must not set their own
   page padding, header or tab bar. Rules for where things go are in admin/UI_SYSTEM.md. */

/* ── Tokens: one scale for all three apps ─────────────────────────────── */
:root {
  --ink: #0a0a0a; --ink-2: #1e1e20; --ink-3: #2b2b2e;
  --paper: #ffffff; --ground: #f4f4f1; --hover: #f7f7f4;
  --line: #e2e2dd; --line-2: #ececE8;
  --text: #1b1b19; --muted: #6b6b65; --faint: #9b9b94;
  --accent: #ffd400; --accent-ink: #0a0a0a;
  --good: #1fa85a; --warn: #ff8a00; --bad: #e63b2e; --info: #1e7fd8;
  --r: 14px; --r-sm: 10px; --r-xs: 6px;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 32px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  /* Layout */
  --page-max: 1280px;            /* one content width, left-aligned, everywhere */
  --page-x: 40px;
  --page-top: 24px;
  --head-h: 92px;                /* eyebrow + title + two lines of description */
  --ctl-h: 40px;                 /* every control's click target */
  --ctl-h-sm: 32px;              /* row buttons: 32px drawn, 40px target */
}

/* The window always keeps room for its scrollbar, so nothing shifts sideways between short and long pages.
   On framed pages the frame keeps that room instead and the top bar makes up the difference (--sbw is set by app.js). */
html { scrollbar-gutter: stable; }
html:has(body.embed-on) { scrollbar-gutter: auto; }
body { font-size: var(--fs-md); line-height: 1.5; background: var(--ground); color: var(--text); }
h1 { font-size: var(--fs-2xl); font-weight: 750; letter-spacing: -0.02em; line-height: 28px; }
h2 { font-family: var(--body); font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.01em; }
h3 { font-family: var(--body); font-size: var(--fs-md); font-weight: 650; }
:focus-visible { outline: 3px solid var(--info); outline-offset: 2px; border-radius: var(--r-xs); }
/* Times, hours and money never shift as digits change */
.num, td.n, th.n, .kpi b, .dur, .clock, time, input[type=number], input[type=time], input[type=date], .money, .hours { font-variant-numeric: tabular-nums; }

/* Skip link: first tab stop on every page */
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r-sm); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ── PageLayout ───────────────────────────────────────────────────────── */
main, .page { max-width: var(--page-max); margin: 0; padding: var(--page-top) var(--page-x) 64px; }
html.embed main { padding-top: var(--page-top); }
.page.embed-page { padding: 0; max-width: none; }

/* A word longer than its box (an email address, a long name) breaks to the next line; it never pushes the page wider */
main, .page, dialog { overflow-wrap: break-word; }

/* ── PageHeader: eyebrow, title, description at the left; one action slot at the right ── */
.page-head { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); min-height: var(--head-h); margin: 0 0 var(--sp-3); }
.page-head > :first-child { flex: 1 1 auto; min-width: 0; }
.page-head > :first-child::before { content: none !important; }
.page-head .crumb { display: block; height: 18px; margin: 0 0 2px; font: 700 var(--fs-xs)/18px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-head .crumb b { color: var(--app-c, var(--faint)); font-weight: 700; }
.page-head .crumb a { color: inherit; text-decoration: none; }
.page-head .crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.page-head h1 { font-size: var(--fs-2xl); line-height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-head.is-record h1 { white-space: normal; overflow: visible; }  /* a record's own name may wrap */
.page-head p { margin: 2px 0 0; max-width: 72ch; color: var(--muted); font-size: var(--fs-md); line-height: 21px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* The action slot: whatever follows the text block. Lines up with the title. */
.page-head > :not(:first-child) { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); flex-wrap: nowrap; min-height: var(--ctl-h); margin: 14px 0 0; }
.page-head .actions > .primary, .page-head .actions > .signal { order: 10; }

/* ── Tabs: one bar, directly under the PageHeader ─────────────────────── */
.subnav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--sp-4); padding: 2px; min-height: 40px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { position: relative; flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 99px; background: var(--paper); border: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: var(--fs-md); font-weight: 600; white-space: nowrap; }
.subnav a::after { content: ""; position: absolute; inset: -3px 0; }
.subnav a:hover { border-color: #b9b9b2; }
.subnav a[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.page.embed-page > .subnav, body.eb-mode .subnav { display: none; }

/* ── Filter: narrows a list on the page. Looks different from Tabs on purpose (Tabs change the page). ── */
.seg, .chips { display: inline-flex; flex-wrap: nowrap; gap: 2px; padding: 3px; margin: 0 0 var(--sp-3); max-width: 100%; overflow-x: auto; scrollbar-width: none; background: #ebebe6; border: 0; border-radius: var(--r-sm); vertical-align: top; }
.seg::-webkit-scrollbar, .chips::-webkit-scrollbar { display: none; }
.seg > a, .seg > button, .chips > a, .chips > button { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: 600 var(--fs-sm)/1 var(--body); text-decoration: none; white-space: nowrap; cursor: pointer; }
.seg > a::after, .seg > button::after, .chips > a::after, .chips > button::after { content: ""; position: absolute; inset: -3px 0; }
.seg > a:hover, .seg > button:hover, .chips > a:hover, .chips > button:hover { color: var(--ink); }
.seg > [aria-selected="true"], .chips > [aria-selected="true"], .seg > .on, .seg > [aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.seg > [aria-selected="true"] .tag, .chips > [aria-selected="true"] .tag { background: var(--ground); color: var(--ink); }

/* Text links inside a page underline on hover and focus */
main a.small:hover, main a.task-t:hover, .page a.small:hover, .page a.task-t:hover, main p a:hover, .page p a:hover { text-decoration: underline; text-underline-offset: 3px; }
tr.click:hover > td { background: var(--hover); }
/* Rows and cards that open a record: reachable by keyboard, with a visible focus ring */
.click { cursor: pointer; }
.click:focus-visible { outline: 3px solid var(--info); outline-offset: -3px; }

/* Toolbar: the row under the tab bar for paging, view switches and filters. Fixed height, so content below never moves. */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; min-height: var(--ctl-h); margin: 0 0 var(--sp-3); }
.toolbar > * { margin: 0; }
.toolbar select, .toolbar input[type=search] { width: auto; }
.wk-nav { display: flex; align-items: center; gap: var(--sp-2); }
.wk-nav > b { min-width: 168px; text-align: center; font-size: var(--fs-md); font-weight: 650; white-space: nowrap; }

/* ── Buttons: primary (one per view), secondary, tertiary, destructive ── */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--ctl-h); padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--text); font: 600 var(--fs-sm)/1 var(--body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .12s, border-color .12s, opacity .12s; }
.btn:hover { background: var(--hover); border-color: #cfcfc8; }
.btn:active { background: #ededE8; }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn.primary, .btn.signal { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.primary:hover, .btn.signal:hover { background: var(--ink-3); border-color: var(--ink-3); }
.btn.primary:active, .btn.signal:active { background: #000; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: rgba(0, 0, 0, .05); border-color: transparent; }
.btn.danger { color: #b3261b; }
.btn.danger:hover { background: #ffefec; border-color: #f3b9b2; }
.btn.danger.primary { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.timer { background: var(--accent); border-color: #e6bf00; color: var(--accent-ink); }   /* the running-clock Start only */
.btn.timer:hover { background: #ffdc2e; border-color: #e6bf00; }
.btn.small, .btn.sm { min-height: var(--ctl-h-sm); padding: 0 10px; font-size: var(--fs-xs); }
.btn.small::after, .btn.sm::after { content: ""; position: absolute; inset: -4px 0; }
.btn.icon { padding: 0; min-width: var(--ctl-h); }
.btn.small.icon, .btn.sm.icon { min-width: var(--ctl-h-sm); }
.btn.block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn[aria-busy="true"] { color: transparent !important; pointer-events: none; }
.btn[aria-busy="true"]::before { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--muted); border-right-color: transparent; animation: vy-spin .7s linear infinite; }
.btn.primary[aria-busy="true"]::before, .btn.signal[aria-busy="true"]::before { border-color: #fff; border-right-color: transparent; }
@keyframes vy-spin { to { transform: rotate(360deg); } }

/* ── Form controls: one input, select, time/date picker and checkbox ──── */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=search], input[type=tel], input[type=url], select, textarea {
  width: 100%; min-width: 0; min-height: var(--ctl-h); padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background-color: var(--paper); color: var(--text); font: 400 var(--fs-md)/1.4 var(--body);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:hover, select:hover, textarea:hover { border-color: #cfcfc8; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(255, 212, 0, .45); }
input:disabled, select:disabled, textarea:disabled { background-color: var(--hover); color: var(--faint); cursor: not-allowed; }
select { -webkit-appearance: none; appearance: none; padding-right: 32px; text-overflow: ellipsis; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%236b6b65' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; }
select option, select optgroup { background: var(--paper); color: var(--text); font: 400 var(--fs-md) var(--body); }
input[type=date], input[type=time], input[type=datetime-local], input[type=month] { -webkit-appearance: none; appearance: none; }
input[type=time] { width: auto; min-width: 118px; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--ink); cursor: pointer; }
/* A checkbox or radio with its label: the whole row is the target */
label:has(> input[type=checkbox]), label:has(> input[type=radio]) { min-height: var(--ctl-h); cursor: pointer; }
textarea { min-height: 84px; resize: vertical; }
/* Message space under a field is always there, so validation never pushes the form */
.f-msg { display: block; min-height: 18px; margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }
.f-msg.bad { color: #b3261b; }

/* Inline-editable values: a field at rest, not only on hover */
.inline-edit { min-height: var(--ctl-h-sm); padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--paper); font: inherit; font-variant-numeric: tabular-nums; cursor: text; }
.inline-edit:hover { border-color: #b9b9b2; }
.inline-edit:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(255, 212, 0, .45); }
.inline-edit::placeholder { color: var(--muted); }

/* ── Cards and card grids: equal height, action row pinned to the bottom ── */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); align-items: stretch; margin: 0 0 var(--sp-3); }
.card-grid > * { display: flex; flex-direction: column; margin: 0 !important; min-width: 0; }
.card-grid > * > h2, .card-grid > * > h3 { margin: 0 0 4px; }
.card-grid > * > p { margin: 0; }
.card-grid > * > .card-foot { margin-top: auto; padding-top: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); min-height: calc(var(--ctl-h) + var(--sp-3)); }

/* ── Tables: fixed columns on request, one placeholder for empty cells ── */
table.t-fixed { table-layout: fixed; }
table.t-fixed td, table.t-fixed th { overflow: hidden; text-overflow: ellipsis; }
table.t-fixed td { white-space: nowrap; }
table.t-fixed td.wrap { white-space: normal; overflow-wrap: anywhere; }
table.t-fixed.wraps td { white-space: normal; overflow-wrap: normal; word-break: normal; overflow: visible; }
table.t-fixed.wraps td.n, table.t-fixed.wraps th { white-space: nowrap; }
td:empty:not(:first-child):not(:last-child)::before { content: "—"; color: var(--faint); }
/* Rows that open a record: the name is a real link; the row shows it */
tr.row-link { cursor: pointer; }
tr.row-link:hover td { background: var(--hover); }
tr.row-link:focus-within td { background: var(--hover); }

/* List rows: long text wraps inside its row; it never pushes the row wider than the page */
.list li > * { min-width: 0; max-width: 100%; flex-shrink: 1; }
.list li > .btn, .list li > button, .list li > .tag { flex: none; }
/* The label at the start of a label/value row keeps its words whole; the value takes the wrapping */
.list li > :first-child:not(:only-child):not(.l) { flex-shrink: 0; max-width: 45%; overflow-wrap: normal; }

/* KPI figures: never break inside a number */
.kpi b, .tw-sum b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(17px, 1.9vw, 24px); }

/* ── States every list, table and card area uses ──────────────────────── */
.loading { padding: 40px 0; color: var(--muted); }
/* Empty: a short title, one line on what to do, and (when the page's own action is not in view) one secondary button */
.empty-state, .empty:not(.thumb):not(.node) { text-align: center; padding: 36px var(--sp-4); color: var(--muted); font-size: var(--fs-md); }
.empty-state h3, .empty:not(.thumb):not(.node) > b { display: block; margin: 0 0 4px; color: var(--text); font: 650 var(--fs-md)/1.4 var(--body); }
.empty-state .btn, .empty:not(.thumb):not(.node) .btn { margin-top: var(--sp-3); }
/* Empty line inside a card or list (the small version): same words-first style everywhere */
p.none, li.none, td.none { margin: 0; padding: var(--sp-2) 0; color: var(--muted); font-size: var(--fs-md); text-align: left; }
/* A checkbox on its own in a table cell or list row: the cell is the target */
td > input[type=checkbox]:only-child, th > input[type=checkbox]:only-child { display: block; margin: 0 auto; outline-offset: 4px; }
td:has(> input[type=checkbox]:only-child), th:has(> input[type=checkbox]:only-child) { position: relative; min-width: var(--ctl-h); }
td:has(> input[type=checkbox]:only-child:not(:disabled)), th:has(> input[type=checkbox]:only-child:not(:disabled)) { cursor: pointer; }  /* ui-kit.js passes a click on the cell to the box */
/* Error: same box everywhere, with the message the server gave */
.err { margin: 0 0 var(--sp-3); padding: 10px 12px; border-radius: var(--r-sm); background: #ffe9e6; color: #8e1c13; font-size: var(--fs-md); }
.page-busy > :not(.page-head):not(.subnav) { opacity: .45; pointer-events: none; transition: opacity .15s .1s; }
.page-busy > .page-head > :not(:first-child) { visibility: hidden; }
.page-busy > .page-head p { visibility: hidden; }

/* ── AppShell (Ops): fixed sidebar, icons never move ──────────────────── */
@media (min-width: 821px) {
  .topbar { padding: 0 var(--page-x); }
  body.embed-on .topbar { padding-right: calc(var(--page-x) + var(--sbw, 0px)); }
  .side > nav.rail { scrollbar-gutter: stable both-edges; }
  .rail .rl-foot { margin-top: auto; padding-top: var(--sp-2); }
}

/* ── Narrow content ───────────────────────────────────────────────────────
   Layout follows the width of the content area (the window minus the sidebar), not the window, so an Ops page
   and a framed Clock-in or Flow page always break at the same point. app.js and ui-frame.js set these classes. */
html.vy-mid { --page-x: 24px; }
html.vy-narrow { --page-x: 16px; --page-top: 16px; }
html.vy-narrow main, html.vy-narrow .page { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
html.vy-narrow .page.embed-page { padding: 0; }
/* Narrow order: eyebrow/title/description, tab bar, then the page's actions. The text block keeps its fixed
   height, so the tab bar sits at the same place on every page and tab, same as on a wide screen. */
html.vy-narrow main, html.vy-narrow .page { display: flex; flex-direction: column; }
html.vy-narrow main > *, html.vy-narrow .page:not(.embed-page) > * { order: 4; flex: none; min-width: 0; }
html.vy-narrow .page-head { display: contents; }
html.vy-narrow .page-head > :first-child { order: 1; flex: none; min-height: var(--head-h); margin: 0 0 var(--sp-3); }
html.vy-narrow main > .subnav, html.vy-narrow .page:not(.embed-page) > .subnav { flex-wrap: nowrap; order: 2; margin: 0 calc(-1 * var(--page-x)) var(--sp-3); padding: 2px var(--page-x); scroll-padding: 0 var(--page-x); }
html.vy-narrow .page-head > :not(:first-child) { order: 3; margin: 0 0 var(--sp-3); justify-content: flex-start; flex-wrap: wrap; }
html.vy-narrow .page-head > :not(:first-child) > .btn, html.vy-narrow .page-head > :not(:first-child) > .more-menu { flex: 1 1 auto; }
html.vy-narrow .page-head > :not(:first-child):empty { display: none; }
html.vy-narrow .page-head .more-menu > summary { width: 100%; }
html.vy-narrow body.eb-mode #page, html.vy-narrow body.editing main { display: block; }
/* Touch screens: bigger targets, and 16px text in fields so iOS does not zoom */
@media (pointer: coarse) {
  :root { --ctl-h: 44px; --ctl-h-sm: 36px; }
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=search], input[type=tel], input[type=url], select, textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ── Confirmation (vyAsk in ui-kit.js): only for actions that are hard to undo or reach other people ── */
dialog.vy-ask { width: min(420px, calc(100vw - 32px)); max-width: none; margin: auto; padding: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); color: var(--text); box-shadow: 0 24px 60px rgba(0, 0, 0, .22); }
dialog.vy-ask::backdrop { background: rgba(10, 10, 10, .45); }
dialog.vy-ask form { padding: var(--sp-5); margin: 0; }
dialog.vy-ask h2 { font: 650 var(--fs-lg)/1.35 var(--body); margin: 0; }
dialog.vy-ask label { display: block; min-height: 0; cursor: default; }
dialog.vy-ask input { margin-top: var(--sp-3); }
dialog.vy-ask p { margin: var(--sp-2) 0 0; color: var(--muted); font-size: var(--fs-md); }
.vy-ask-foot { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-5); }
/* Form actions (rule): bottom right, secondary first, primary last */
.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); }
.form-actions > .danger:first-child { margin-right: auto; }
/* Task tick boxes: 24px drawn, 40px target */
.tick { position: relative; }
.tick::after { content: ""; position: absolute; inset: -9px; }

/* ── Spacing and layout helpers on the token scale. Use these instead of style="…" in page code. ── */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: var(--sp-1) !important; } .mt-2 { margin-top: var(--sp-2) !important; } .mt-3 { margin-top: var(--sp-3) !important; } .mt-4 { margin-top: var(--sp-4) !important; }
.mb-1 { margin-bottom: var(--sp-1) !important; } .mb-2 { margin-bottom: var(--sp-2) !important; } .mb-3 { margin-bottom: var(--sp-3) !important; } .mb-4 { margin-bottom: var(--sp-4) !important; }
.ml-auto { margin-left: auto !important; }
.d-block { display: block !important; } .w-full { width: 100% !important; } .w-auto { width: auto !important; } .grow { flex: 1 1 0 !important; min-width: 0; }
.nowrap { white-space: nowrap !important; } .t-left { text-align: left !important; } .t-right { text-align: right !important; }

/* ── Dialog: one look for Ops (.d-head/.d-body/.d-foot) and Clock-in/Flow (.dh/.db/.df) ──
   Title and close at the top, scrolling body, actions bottom right: secondary first, primary last,
   a destructive action at the far left. On phones it is a sheet from the bottom with full-width actions. */
dialog:not(.vy-ask) { border: 0; border-radius: var(--r); padding: 0; width: min(600px, calc(100% - 24px)); max-width: none; max-height: calc(100dvh - 32px); background: var(--paper); color: var(--text); box-shadow: 0 24px 60px rgba(0, 0, 0, .25); }
dialog.wide:not(.vy-ask) { width: min(880px, calc(100% - 24px)); }
dialog::backdrop { background: rgba(10, 10, 10, .5); }
dialog:not(.vy-ask) > form { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); margin: 0; }
.d-head, dialog .dh { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: 14px 12px 6px 20px; flex: none; }
.d-head h2, dialog .dh h2 { margin: 0; font: 650 var(--fs-lg)/1.3 var(--body); letter-spacing: -0.01em; }
.d-head [data-close], dialog .dh [data-close] { display: inline-grid; place-items: center; flex: none; width: var(--ctl-h); min-width: var(--ctl-h); height: var(--ctl-h); min-height: var(--ctl-h); padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.d-head [data-close]:hover, dialog .dh [data-close]:hover { background: var(--hover); color: var(--ink); }
.d-body, dialog .db { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; padding: 10px 20px 16px; }
.d-foot, dialog .df { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--sp-2); padding: 14px 20px 18px; border-top: 1px solid var(--line-2); flex: none; }
dialog .df .left, .d-foot [data-danger] { margin-right: auto; }
@media (max-width: 640px) {
  dialog:not(.vy-ask) { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: var(--r) var(--r) 0 0; max-height: 92dvh; }
  dialog:not(.vy-ask) > form { max-height: 92dvh; }
  .d-foot, dialog .df { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .d-foot > .btn, dialog .df > .btn { flex: 1 1 0; }
  dialog .df .left, .d-foot [data-danger] { flex: 1 1 100%; margin: 0; }
  dialog .df .left .btn { width: 100%; }
}
/* Stacked (phone) tables: a long unbroken value wraps inside its row */
html.vy-narrow td, html.vy-narrow td > * { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 820px) { table.rt td, table.rt td > * { overflow-wrap: anywhere; min-width: 0; } }
html.vy-narrow .list li > :first-child:not(:only-child):not(.l) { flex-shrink: 1; max-width: 100%; overflow-wrap: anywhere; }