/* The browser: a tab strip (dockview) over each tab's outline, view and chat, each in its mode (specs.md §8). */
html, body { height: 100%; margin: 0; overflow: hidden; }
body { --forji-star: #f5c518; }
#dock { height: 100%; }

/* dockview in forji's tokens, light and dark alike. */
.dockview-theme-forji {
  --dv-tabs-and-actions-container-height: 48px;
  --dv-tabs-and-actions-container-font-size: 14px;
  /* The strip a shade off the page; the tab shown is the page's own colour, so it runs into it. */
  --dv-tabs-and-actions-container-background-color: color-mix(in srgb, var(--forji-background), var(--forji-ink) 5%);
  --dv-group-view-background-color: var(--forji-background);
  --dv-activegroup-visiblepanel-tab-background-color: var(--forji-background);
  --dv-inactivegroup-visiblepanel-tab-background-color: var(--forji-background);
  --dv-activegroup-hiddenpanel-tab-background-color: transparent;
  --dv-inactivegroup-hiddenpanel-tab-background-color: transparent;
  --dv-activegroup-visiblepanel-tab-color: var(--forji-ink);
  --dv-activegroup-hiddenpanel-tab-color: var(--forji-muted);
  --dv-inactivegroup-visiblepanel-tab-color: var(--forji-muted);
  --dv-inactivegroup-hiddenpanel-tab-color: var(--forji-muted);
  --dv-tab-divider-color: var(--forji-line);
  --dv-separator-border: transparent;
  --dv-paneview-header-border-color: var(--forji-line);
  --dv-paneview-active-outline-color: var(--forji-accent);
  --dv-drag-over-background-color: color-mix(in srgb, var(--forji-accent) 18%, transparent);
  --dv-drag-over-border-color: var(--forji-accent);
  --dv-drag-over-border: none;
  --dv-edge-dock-indicator-color: var(--forji-accent);
  --dv-tabs-container-scrollbar-color: var(--forji-line);
  --dv-scrollbar-background-color: var(--forji-line);
  --dv-icon-hover-background-color: var(--forji-line);
  --dv-floating-box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  --dv-floating-border: 1px solid var(--forji-line);
  --dv-floating-group-border: none;
  --dv-floating-group-dragging-opacity: 0.5;
  --dv-floating-titlebar-height: 22px;
  --dv-floating-titlebar-background-color: var(--forji-raised);
  --dv-floating-titlebar-border-bottom: var(--dv-floating-border);
  --dv-overlay-z-index: 999;
  --dv-tab-font-size: inherit;
  --dv-tab-margin: 0;
  --dv-tab-close-icon-size: inherit;
  --dv-border-radius: 0px;
  --dv-tab-border-radius: 0px;
  --dv-sash-border-radius: 0px;
  --dv-dropdown-border-radius: var(--forji-radius);
  --dv-spacing-padding: 0px;
  --dv-sash-color: transparent;
  --dv-active-sash-color: var(--forji-accent);
  --dv-active-sash-transition-duration: 0.1s;
  --dv-active-sash-transition-delay: 0.5s;
  color-scheme: inherit;
}
/* The strip: tabs standing on the page, the one shown in the page's colour and joined to it (its bottom corners
   curve out into the page); + a round icon button after them. The strip keeps the panes' gap from the window's edge. */
.dv-tabs-and-actions-container { box-sizing: border-box; container-type: inline-size; }
/* Its padding inside what scrolls, so the curve at the first tab's foot is not cut off. */
.dv-tabs-container { scrollbar-width: none; align-items: flex-end; gap: 4px; padding: 0 12px 0 var(--forji-gap); }
.dv-tabs-and-actions-container[data-flush] .dv-tabs-container { padding-left: 0; }
.dv-left-actions-container { display: flex; align-items: flex-end; }
/* The mark stands level with the tabs (which stand on the page, 38px tall). */
.dv-pre-actions-container { display: flex; align-items: flex-end; }
.dv-tab { position: relative; height: 38px; margin: 0; padding: 0; border-radius: 12px 12px 0 0; transition: background-color 0.15s, color 0.15s; }
.dv-tab::after { display: none !important; }
.dv-active-tab .tab::before, .dv-active-tab .tab::after { content: ""; position: absolute; bottom: 0; width: 12px; height: 12px; pointer-events: none; }
.dv-active-tab .tab::before { left: -12px; background: radial-gradient(circle at 0 0, transparent 11.5px, var(--forji-background) 12px); }
.dv-active-tab .tab::after { right: -12px; background: radial-gradient(circle at 100% 0, transparent 11.5px, var(--forji-background) 12px); }
/* A tab out of sight: quiet, half the page's colour under the pointer, its × then shown. */
.dv-tab.dv-inactive-tab:hover { background: color-mix(in srgb, var(--forji-background) 55%, transparent); color: var(--forji-ink); }

/* A tab: its label and ×, one width for all, so they never jump; the active one's label is a click away from its address. */
.tab { display: flex; align-items: center; gap: 4px; height: 100%; width: 200px; padding: 0 5px 0 16px; box-sizing: border-box; transition: width 0.2s cubic-bezier(0.2, 0, 0, 1), padding 0.2s; }
.tab .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-active-tab .tab .label { cursor: text; }
.tab button, .new { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; transition: background-color 0.15s, color 0.15s, opacity 0.15s; }
.tab .close { flex: none; width: 26px; height: 26px; border-radius: 50%; color: var(--forji-muted); opacity: 0; }
.dv-active-tab .tab .close, .tab:hover .close, .tab .close:focus-visible { opacity: 1; }
.tab .close:hover, .new:hover { background: var(--forji-line); color: var(--forji-ink); }
.address .star[aria-pressed="true"], .tab-tip .fav[aria-pressed="true"] { color: var(--forji-star); }
.address .star[aria-pressed="true"] path, .tab-tip .fav[aria-pressed="true"] path { fill: currentColor; }
.tab .f-icon { width: 16px; height: 16px; }
.new { width: 32px; height: 32px; margin: 0 var(--forji-gap) 3px -6px; border-radius: 50%; color: var(--forji-muted); }
.new .f-icon { width: 20px; height: 20px; }
@media (max-width: 600px) { .tab { width: 150px; } }
@media (hover: none) { .tab .close { opacity: 1; } }

/* The address field: the tab widens into it (as wide as an address, but for + beside it); Enter opens, the star inside its end. */
.tab.editing { width: min(560px, 100cqw - 56px); padding: 4px 4px 2px; }
.address { position: relative; flex: 1; display: flex; min-width: 0; height: 100%; }
.address input { flex: 1; min-width: 0; font: inherit; padding: 0 38px 0 14px; color: var(--forji-ink); background: var(--forji-surface); border: 1px solid transparent; border-radius: 10px; outline: none; user-select: text; -webkit-user-select: text; transition: border-color 0.15s, box-shadow 0.15s; }
.address input:focus { border-color: var(--forji-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--forji-accent) 18%, transparent); }
.address input::-webkit-calendar-picker-indicator { display: none !important; }
.address .star { position: absolute; top: 50%; right: 3px; translate: 0 -50%; width: 28px; height: 28px; border-radius: 50%; color: var(--forji-muted); }
.address .star:hover { background: var(--forji-line); color: var(--forji-ink); }
.address .star:disabled { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .tab, .dv-tab, .tab button, .new, .address input, .tab-tip { transition: none; } }

/* A hovered tab's tip, slid down to just under it, as what the field suggests: the full address, its star, and an admin's settings and share. */
.tab-tip {
  position: fixed; z-index: 1500; display: flex; align-items: center; gap: 2px; max-width: min(560px, calc(100vw - 8px)); padding: 4px 4px 4px 12px; box-sizing: border-box;
  background: var(--forji-popup); backdrop-filter: blur(var(--forji-blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--forji-blur)) saturate(1.2); border: 1px solid var(--forji-line); border-radius: var(--forji-radius); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity 0.15s, transform 0.18s cubic-bezier(0.2, 0, 0, 1), visibility 0s 0.18s;
}
.tab-tip.shown { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .tab-tip { transition: none; } }
.tab-tip .where { flex: 1; min-width: 0; margin-right: 6px; font: 12px/1.4 var(--forji-mono); color: var(--forji-muted); word-break: break-all; user-select: text; -webkit-user-select: text; }
.tab-tip button { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--forji-muted); cursor: pointer; }
.tab-tip button:hover { background: var(--forji-line); color: var(--forji-ink); }
.tab-tip button[hidden] { display: none; }
.tab-tip .f-icon { width: 17px; height: 17px; }

/* A context menu, at the pointer: a tab's, a row's, a name's. */
.menu {
  position: fixed; z-index: 2500; min-width: 190px; padding: 4px; box-sizing: border-box; display: flex; flex-direction: column;
  background: var(--forji-popup); backdrop-filter: blur(var(--forji-blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--forji-blur)) saturate(1.2); border: 1px solid var(--forji-line); border-radius: calc(var(--forji-radius) * 0.75); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  font-family: var(--forji-font); font-size: 14px;
}
.menu button { display: flex; align-items: center; gap: 10px; text-align: left; padding: 7px 14px 7px 10px; font: inherit; color: var(--forji-ink); background: none; border: 0; border-radius: 8px; cursor: pointer; }
.menu button:is(:hover, :focus-visible) { background: var(--forji-raised); outline: none; }
.menu button.danger { color: var(--forji-danger); }
.menu .f-icon { flex: none; width: 16px; height: 16px; color: var(--forji-muted); }
.menu button.danger .f-icon { color: currentColor; }
.menu button:disabled { color: var(--forji-muted); opacity: 0.55; cursor: default; background: none; }
.menu .sep { height: 1px; margin: 4px 8px; background: var(--forji-line); }

/* "forji" before the tabs: the app's name, in ink, monospace; level with the tabs, its start the start page's (twice the gap). */
.mark { flex: none; margin: 0 2px 12px calc(var(--forji-gap) * 2); font: 700 15px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: -0.02em; color: var(--forji-ink); user-select: none; -webkit-user-select: none; }
.mark[hidden] { display: none; }
/* The field being typed in leaves the mark its room; a phone's strip has none to spare, so no mark. */
.dv-tabs-and-actions-container:has(.mark:not([hidden])) .tab.editing { width: min(560px, 100cqw - 56px - 64px); }
@container (max-width: 600px) { .mark { display: none; } .dv-tabs-and-actions-container .tab.editing { width: min(560px, 100cqw - 56px); } }

/* What the field suggests, under it. */
.suggestions {
  position: fixed; z-index: 1500; max-height: min(420px, 70vh); overflow: auto; padding: 4px; box-sizing: border-box;
  background: var(--forji-popup); backdrop-filter: blur(var(--forji-blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--forji-blur)) saturate(1.2); border: 1px solid var(--forji-line); border-radius: var(--forji-radius); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  font-family: var(--forji-font); font-size: 14px;
}
.suggestion { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-radius: 10px; cursor: pointer; }
.suggestion span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggestion .name { color: var(--forji-ink); }
.suggestion .where { font-size: 0.85em; color: var(--forji-muted); }
.suggestion:hover { background: var(--forji-raised); }
.suggestion[aria-selected="true"] { background: color-mix(in srgb, var(--forji-accent) 14%, transparent); }

/* A tab's page: the outline, the view and the chat, each in its mode; unseen a moment while the doc's layout is read. */
.tab-page { position: relative; height: 100%; overflow: hidden; isolation: isolate; background: var(--forji-background); }
.tab-page .view, .tab-page .chat, .tab-page .outline { position: absolute; inset: 0; }
.tab-page[data-laying] > * { visibility: hidden; }
.tab-page[data-veiled] > :is(.outline, .chat)[mode="icon"] { visibility: hidden; }
/* A doc's ask (its view wants the camera): over the panes at the tab's top, till the person says. */
.tab-page > .asking { position: absolute; z-index: 10; top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  max-width: calc(100% - 24px); box-sizing: border-box; padding: 8px 8px 8px 16px; color: var(--forji-ink); background: var(--forji-surface);
  border: 1px solid var(--forji-line); border-radius: 16px; box-shadow: 0 4px 16px rgb(0 0 0 / 0.12); }
.tab-page > .asking > span { flex: 1; }
/* Two maximized panes' tabs, in their panel's header: pills, the one in front raised. */
.pane-tabs { position: absolute; z-index: 12; top: calc(var(--forji-gap) + 9px); left: calc(var(--forji-gap) + 9px); display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--forji-raised); font-family: var(--forji-font); }
.pane-tabs[hidden] { display: none; }
.pane-tab { min-width: 80px; height: 30px; padding: 0 14px; font: inherit; font-size: 14px; font-weight: 500; color: var(--forji-muted); background: none; border: 0; border-radius: 999px; cursor: pointer; transition: background-color 0.15s, color 0.15s, box-shadow 0.15s; }
.pane-tab:hover { color: var(--forji-ink); }
.pane-tab[aria-selected="true"] { color: var(--forji-ink); background: var(--forji-surface); box-shadow: 0 1px 3px rgba(20, 24, 40, 0.12); }
.pane-tab:focus-visible { outline: 2px solid var(--forji-accent); outline-offset: 1px; }

/* The start page: a grid of blocks across the tab; Recent first, then each machine's name over its projects, columns that scroll on their own.
   It scrolls edge to edge, so its scrollbar stands at the tab's edge (two tabs side by side: at the line between them), the gap inside it. */
.tab-page { container-type: inline-size; }
.start { height: 100%; overflow: auto; padding: 28px calc(var(--forji-gap) * 2) 24px; box-sizing: border-box; }
/* "My machines": the page's title. */
.start h2 { margin: 0; font-size: 1.4em; font-weight: 700; letter-spacing: -0.01em; color: var(--forji-ink); }
.start ul { margin: 0; padding: 0; list-style: none; }
.start li { display: flex; align-items: center; border-radius: 12px; transition: background-color 0.15s; }
/* A folder's line lights alone (its summary): lit whole, an open folder would hide which of its rows the pointer is on. */
.start li:not(:has(> .folder)):hover { background: var(--forji-raised); }
.start .item { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; font: inherit; text-align: left; color: var(--forji-ink); background: none; border: 0; cursor: pointer; }
.start .item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start .where { font-size: 0.8em; color: var(--forji-muted); }
/* A row's name, then (in Recent) how long ago it was opened, quiet; the name gives way first. */
.start .item .line { display: flex; align-items: baseline; gap: 6px; }
.start .item .line .name { min-width: 0; }
/* Cut short, a name fades at its end (no …, which leaves a gap of its own): its time stands just after what shows. */
.start .item .line .name[data-cut] { text-overflow: clip; mask-image: linear-gradient(to left, transparent, #000 16px); -webkit-mask-image: linear-gradient(to left, transparent, #000 16px); }
.start .item .ago { flex: none; font-size: 0.8em; color: var(--forji-muted); }
/* + right after the title; on a phone at the trailing edge, under the thumb. */
.start .heading { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; }
/* + in ink, quieter under the pointer, ringing only when tabbed to: no background that stays after a click. */
.start .plus { -webkit-tap-highlight-color: transparent; display: inline-flex; padding: 8px; color: var(--forji-ink); background: none; border: 0; border-radius: 50%; cursor: pointer; transition: color 0.15s; }
.start .plus:hover { color: var(--forji-muted); }
.start .plus:focus { outline: none; }
.start .plus:focus-visible { color: var(--forji-ink); outline: 2px solid var(--forji-accent); outline-offset: 1px; }
/* One grid of 260px columns or wider, filling the page, one gap across and down: each card under a label line (a machine's
   name over its first project) that a row keeps only where one of its cards has a name over it, so their tops line up. */
.start .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; gap: 0 24px; }
.start .machine { display: contents; }
/* Each cell two rows of the grid, its label's and its card's; each card as tall as what it lists, the gap across under it. */
.start .slot { display: grid; grid-row: span 2; grid-template-rows: subgrid; min-width: 0; }
.start .slot > :is(.block, .project) { align-self: start; margin-bottom: 24px; }
/* A label: the machine's name, then why it could not be listed, just over the card. */
.start .label { padding-bottom: 4px; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.start .label:empty { padding: 0; }
.start .label > * { min-width: 0; }
.start .block, .start .project { display: flex; flex-direction: column; min-width: 0; border-radius: var(--forji-radius); background: var(--forji-surface); box-shadow: var(--forji-shadow); }
/* A long card stops and scrolls on its own, a row cut in half at its edge and fading there until scrolled to its end: there is more. */
/* Its rows inset alike on every side; the cut one stops that far above the card's edge. */
.start .block .docs, .start .scroll { max-height: 374px; overflow: auto; padding: 8px 8px 0; margin-bottom: 8px; }
@supports (animation-timeline: scroll()) {
  .start .block .docs, .start .scroll { animation: f-cut linear both; animation-timeline: scroll(self); }
  @keyframes f-cut { from, 99% { mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), #000 40px); } to { mask-image: none; } }
}
.start .machine-title, .start .project-title { display: flex; align-items: center; gap: 2px; min-height: 30px; }
.start .machine-title { min-height: 32px; padding: 0 4px 0 0; font-size: 0.85em; font-weight: 600; color: var(--forji-muted); }
/* One height for every card's title, with acts or without (Recent has none), so the names line up; a hairline under it sets it off from its rows. */
.start .project-title { box-sizing: border-box; height: 52px; padding: 0 8px 0 20px; font-size: 1.07em; font-weight: 700; border-bottom: 1px solid var(--forji-line); }
.start :is(.machine-title, .project-title) .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start .machine-title .name { flex: none; margin-right: 6px; }
.start .docs .docs { padding: 0 0 0 14px; margin: 0; max-height: none; }
/* A column's starred docs, over the rest, set off by a hairline; dragged into the order a person wants. */
.start .scroll > .docs { padding: 0; margin: 0; max-height: none; }
.start .docs.starred { margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--forji-line); }
.start [data-star] { position: relative; }
.start [draggable="true"] { cursor: grab; }
.start .dragging { opacity: 0.45; }
.start :is(.drop-before, .drop-after)::after { content: ""; position: absolute; pointer-events: none; background: var(--forji-accent); border-radius: 2px; }
.start li.drop-before::after { left: 8px; right: 8px; top: -2px; height: 3px; }
.start li.drop-after::after { left: 8px; right: 8px; bottom: -2px; height: 3px; }
.start .slot.drop-before::after { top: 0; bottom: 0; left: -14px; width: 3px; }
.start .slot.drop-after::after { top: 0; bottom: 0; right: -14px; width: 3px; }
.start .project-title:focus { outline: none; }
.start .folder { flex: 1; min-width: 0; }
.start .folder summary { display: flex; align-items: center; gap: 4px; padding: 10px 12px 10px 6px; cursor: pointer; color: var(--forji-ink); border-radius: 12px; list-style: none; }
.start .folder summary::-webkit-details-marker { display: none; }
.start .folder summary .f-icon { width: 14px; height: 14px; color: var(--forji-muted); transition: transform 0.15s; }
.start .folder[open] > summary .f-icon { transform: rotate(90deg); }
.start .folder summary:hover { background: var(--forji-raised); }
.start .why { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 12px 10px; color: var(--forji-danger); font-size: 0.9em; }
/* A machine's dot: white once it answers (its room kept until then), red when it could not be listed. */
.start .status { flex: none; box-sizing: border-box; width: 10px; height: 10px; margin: 0 6px 0 0; padding: 0; border: 1px solid transparent; border-radius: 50%; background: none; }
.start .status[data-state="online"] { border-color: var(--forji-muted); background: #fff; }
.start .status[data-state="older"] { border-color: var(--forji-warn); background: var(--forji-warn); }
.start .status[data-state="refused"] { border-color: var(--forji-danger); background: var(--forji-danger); cursor: pointer; }
.start .status[data-state="refused"]:focus-visible { outline: 2px solid var(--forji-accent); outline-offset: 2px; }
.start .label > .why { margin: 0 2px 4px; }
.start .why.empty { color: var(--forji-muted); }
/* An empty project's card: one quiet line where its rows would be. */
.start .none { margin: 0; padding: 14px 18px 16px; font-size: 0.9em; color: var(--forji-muted); }
/* What a row or a name may do shows on hover (always on touch): +, ×, a trash; a starred doc keeps its star. */
.start .act { flex: none; display: inline-flex; padding: 7px; margin-right: 2px; color: var(--forji-muted); background: none; border: 0; border-radius: 50%; cursor: pointer; visibility: hidden; }
.start .act .f-icon { width: 16px; height: 16px; }
.start .act:hover { color: var(--forji-ink); background: var(--forji-line); }
.start .act[data-forji="forji.place-delete"]:hover { color: var(--forji-danger); }
.start .act:is([data-forji="forji.new-project"], [data-forji="forji.new-doc"]) { color: var(--forji-ink); }
.start :is(li, .machine-title, .project-title):hover > .act, .start .act:focus-visible, .start .act.starred, .start .act[aria-expanded="true"] { visibility: visible; }
.start .starred { color: var(--forji-star); }
/* A starred place's star stands before its name, the name just after it. */
.start li > .starred { margin: 0 -8px 0 4px; }
.start .project-title > .starred { margin: 0 2px 0 -8px; }
.start .starred path { fill: currentColor; }
@media (hover: none) { .start .act { visibility: visible; } }
/* A phone: the blocks stack, each the screen's width, scrolling with the page. */
@container (max-width: 600px) {
  .start { padding: 14px 12px 32px; }
  .start .heading { justify-content: space-between; }
  .start .grid { grid-template-columns: 1fr; }
  .start .label:empty { display: none; }
  .start .block .docs, .start .scroll { max-height: none; overflow: visible; }
  .start .act { visibility: visible; }
}

dialog { position: fixed; top: 64px; z-index: 2000; margin: 0 auto; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22); border: 1px solid var(--forji-line); border-radius: calc(var(--forji-radius) * 1.5); background: color-mix(in srgb, var(--forji-surface) 94%, transparent); backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2); color: var(--forji-ink); padding: 24px; min-width: min(360px, 90vw); }
dialog::backdrop { background: rgba(0, 0, 0, 0.12); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
dialog input { width: 100%; height: 40px; box-sizing: border-box; font: inherit; padding: 0 12px; margin: 8px 0 14px; color: var(--forji-ink); background: var(--forji-raised); border: 1px solid var(--forji-line); border-radius: calc(var(--forji-radius) * 0.75); }
dialog .actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }

/* The sheets. Settings: a scope, then its settings, users, the machine's model and a project's secrets; a grant's address, as a QR code and as text, shown once. Make: a name. Delete: asked first. */
#make, #remove, #add { width: min(420px, 90vw); box-sizing: border-box; }
/* Add a place: in the middle of the screen, over the page; scan on the leading side of its actions. */
#add { inset: 0; margin: auto; }
#add h2 { margin: 0 0 12px; font-size: 1.1em; }
#add label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 0.9em; color: var(--forji-muted); }
#add .optional { font-size: 0.9em; }
#add video { display: block; width: 100%; max-height: 240px; margin-bottom: 10px; border-radius: var(--forji-radius); background: #000; }
#add .scan { margin-right: auto; padding: 0; width: 36px; height: 36px; justify-content: center; }
#add .scan[hidden] { display: none; }
/* Delete asks in the middle of the screen; its actions stacked, one width, none primary by its focus ring alone. */
#remove { inset: 0; margin: auto; width: min(360px, 90vw); padding: 20px; }
#remove h2 { margin: 0 0 6px; font-size: 1.1em; overflow-wrap: anywhere; }
#remove .hint { margin: 0; color: var(--forji-muted); font-size: 0.9em; }
#remove .actions { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 18px; }
#remove .actions .f-button { justify-content: center; width: 100%; min-height: 40px; }
#remove .actions .f-button:focus-visible { outline: 2px solid color-mix(in srgb, var(--forji-accent) 35%, transparent); outline-offset: 1px; }
#remove [data-forji="forji.remove-cancel"] { color: var(--forji-muted); }
#settings h2, #make h2 { margin: 0 0 12px; font-size: 1.1em; }
#make label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 0.9em; color: var(--forji-muted); }
#settings :is(select, input:not([type="checkbox"]), textarea), #make input, #add input { width: 100%; height: 40px; box-sizing: border-box; font: inherit; color: var(--forji-ink); padding: 0 12px; margin: 0; background: var(--forji-raised); border: 1px solid var(--forji-line); border-radius: calc(var(--forji-radius) * 0.75); }
#settings textarea { height: auto; padding: 8px 12px; font: 12px/1.4 var(--forji-mono); resize: vertical; }
:is(#ask, #nickname, #settings, #make, #remove, #add) .error { color: var(--forji-danger); margin: 0 0 10px; }
#settings .granted { margin-bottom: 12px; }
#settings .qr svg { display: block; width: 220px; height: 220px; margin: 0 auto 10px; }
#settings code { display: block; word-break: break-all; font-size: 0.8em; padding: 10px 12px; background: var(--forji-raised); border-radius: calc(var(--forji-radius) * 0.75); }
#settings .once { flex: 1; font-size: 0.85em; color: var(--forji-muted); }
#settings .granted .actions { margin-top: 6px; }
#settings { inset: 0; margin: auto; width: min(560px, 94vw); max-height: min(760px, 90vh); box-sizing: border-box; padding: 20px 20px 8px; overflow: auto; }
#settings .head { display: flex; align-items: center; gap: 8px; }
#settings .head h2 { flex: 1; margin: 0; }
#settings .head .f-spinner[hidden] { display: none; }
#settings .where { margin: 2px 0 12px; font: 12px/1.4 var(--forji-mono); color: var(--forji-muted); word-break: break-all; }
#settings :is(.close, .act) { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--forji-muted); cursor: pointer; }
#settings :is(.close, .act):hover { background: var(--forji-line); color: var(--forji-ink); }
#settings .act[data-forji$="-remove"]:hover { color: var(--forji-danger); }
#settings :is(.close, .act) .f-icon { width: 17px; height: 17px; }
#settings .scopes { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 12px; border-radius: 999px; background: var(--forji-raised); }
#settings .forji { margin: -6px 0 12px; font-size: 0.82em; color: var(--forji-muted); }
#settings .forji[hidden] { display: none; }
#settings .forji .older { color: var(--forji-warn); }
#settings .waiting { margin-top: 8px; }
#settings .waiting .add .hint { flex: 1; }
#settings .confirm { inset: auto; margin: 0; width: 260px; padding: 12px; color: var(--forji-ink); background: var(--forji-surface); border: 1px solid var(--forji-line); border-radius: var(--forji-radius); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); }
#settings .confirm p { margin: 0 0 10px; font-size: 0.9em; }
#settings .confirm .actions { display: flex; justify-content: flex-end; gap: 8px; }
#settings .pill { min-width: 80px; height: 30px; padding: 0 14px; font: inherit; font-size: 14px; color: var(--forji-muted); background: none; border: 0; border-radius: 999px; cursor: pointer; }
#settings .pill[aria-pressed="true"] { color: var(--forji-ink); background: var(--forji-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
#settings .pill:disabled { opacity: 0.4; cursor: default; }
#settings section { padding: 10px 0 14px; border-top: 1px solid var(--forji-line); }
#settings h3 { margin: 0 0 8px; font-size: 0.95em; }
#settings .hint { margin: 2px 0 0; font-size: 0.82em; color: var(--forji-muted); }
#settings .field { padding: 3px 0; }
#settings .field label { display: flex; align-items: center; gap: 8px; min-height: 36px; }
#settings .field .key { flex: 0 0 38%; font: 13px/1.3 var(--forji-mono); overflow-wrap: anywhere; }
#settings .field :is(input:not([type="checkbox"]), textarea, .names) { flex: 1; min-width: 0; height: 34px; }
#settings .field textarea { height: auto; }
/* A bool is a switch: a track, its knob at the end that is on. */
#settings .switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 36px; height: 22px; margin: 0; border-radius: 11px; background: color-mix(in srgb, var(--forji-muted) 45%, transparent); cursor: pointer; transition: background-color 0.15s; }
#settings .switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.15s; }
#settings .switch:checked { background: var(--forji-accent); }
#settings .switch:checked::after { transform: translateX(14px); }
#settings .switch:focus-visible { outline: 2px solid var(--forji-accent); outline-offset: 2px; }
#settings .switch:disabled { cursor: default; }
#settings .field.unset :is(.switch, .key) { opacity: 0.6; }
/* What has nothing (a write-only value, names none) says so quietly. */
#settings .field .names { display: flex; align-items: center; font-size: 0.87em; color: var(--forji-muted); }
/* A field's note stands under its own control, set off from the next field. */
#settings .field > .hint { margin: 0 0 6px calc(38% + 8px); }
#settings .field.locked { opacity: 0.55; }
#settings .field .act { margin-left: auto; }
#settings ul { list-style: none; margin: 0 0 8px; padding: 0; }
#settings .row { display: flex; align-items: center; gap: 8px; min-height: 36px; }
#settings .row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#settings .row .what { color: var(--forji-muted); font-size: 0.9em; }
#settings .row select { width: auto; height: 32px; }
#settings .add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#settings .add > input { flex: 1 1 140px; }
#settings .add > select { width: auto; }
#settings .add .http { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; }
#settings .add .http[hidden] { display: none; }
#settings .add .http input { flex: 1 1 140px; }
#settings .hint + .add { margin-top: 8px; }
#settings .add + .hint { margin-top: 6px; }
#settings .granted { margin: 12px 0 0; }