/* core.css · THE SHAPE of every place on this office's screens, and nothing else.
 *
 * The owner (2026-10-01): "core is all core layout ... zero color and zero fonts and zero images"; "Core makes the shape
 * of the box." No colour, no font, no size of type, no image, no variable of the look. With the look off
 * (global_config "themes": "off") a page links this file alone and everything works, text only.
 *
 * WRITTEN FROM ZERO, region by region; a rule is here because a screen needs it, and its numbers are the measured
 * boxes of the screens at 390 and 1280. A technology's place and the theme's place get their shape here alike.
 * ONE breakpoint: the phone layout at 768px and narrower, written at the end of each region.
 * A line's thickness and style are shape (here); its colour is the look's.
 *
 * REGIONS: 1 the document · 2 the header · 3 the module strip · 4 the technology bar · 5 the page's column, the back
 * circle and the hero · 6 MAIN NAV · 7 the footer · 8 the dock · 9 the door and CREATE ACCOUNT · 10 the greeting and
 * the agent's word · 11 the rows (a settings page, EXPORT, ADMIN OPERATIONS) · 12 the menu · 13 the list (THE ONE
 * CONTROLLER, the record card, the key badge, the pager, the remove question) · 14 the card (its head, its sections of
 * fields, the look book, change control) · 15 the forms (add, edit) and the import page · 16 the account page (mTok's
 * panel, the suite, the rows with a type-in and a button) · 17 the members page · 18 the animated
 * themes' layers (their geometry and motion) · 19 the fields pages · 21 what an agent answers, the consent
 * question · 22 the diagnostics panels · 23 the agent's whole shell · DA-M's block
 */

/* ── 1. THE DOCUMENT: every box sized by its border; the page at least the screen's height, its parts stacked ── */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; background-attachment: fixed; }   /* THE PAGE'S BACKGROUND picture (the original's fit): stretched to the window, still while the page moves */
.pf-ground { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; }   /* THE PAGE'S BACKGROUND PICTURE'S LAYER (A2: the ground colour first, the picture on its own time): under everything, the window's size, the original's fit; static/js/ground.js puts the picture on it */
.layout--body { position: relative; display: flex; flex-direction: column; min-height: 100vh; }

/* ── 2. THE HEADER: one row; the menu link left, the logo link at the row's centre whatever the sides' widths, the
      actions right; the clean view (Apple TV, Apple Watch) holds the actions alone ── */
.layout--header { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 80px; padding: 0 60px 0 40px; }
.layout--header--clean { justify-content: flex-end; }
.layout--header__nav { display: flex; align-items: center; gap: 10px; }
.hdr-menu-icon { display: block; width: 24px; height: 24px; }
.layout--header__logo-link { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 200px; max-width: 50%; height: 46px; background-size: contain; background-position: center; background-repeat: no-repeat; }   /* THE HEADER LOGO's box (the original: 46px high): the picture fits inside it, the words stand in its middle */
.hdr-icons { display: flex; align-items: center; gap: 14px; }
.hdr-icon-btn { display: flex; align-items: center; padding: 2px 0; border: 0; cursor: pointer; }
.hdr-icon { display: block; width: 18px; height: 18px; }
.hdr-form { display: flex; margin: 0; }
/* the network glyph: there only for a moment when the device's network changes, one of its three drawings */
/* THE TWO BUTTONS (the owner 2026-10-03: "a total of 2 and that is all"): button.html draws every one; shape only, the same bytes in every core */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; border: 1px solid; text-align: center; white-space: nowrap; cursor: pointer; }
.btn:hover { transform: translateY(-2px); }
.btn[disabled] { cursor: default; }
.btn--big { display: flex; width: 300px; max-width: 100%; margin: 10px 0; padding: 18px 15px; }
.btn--small { padding: 4px 10px; }
.btn--small.round { display: inline-flex; flex: 0 0 auto; width: 38px; height: 38px; padding: 0; border-radius: 50%; transition: all 0s ease; }   /* THE SMALL BUTTON, ROUND: THE ONE CIRCLE BUTTON of the platform, copied rule for rule from the original AI agent shell's circle (the owner 2026-10-09: "the look and feel of our circle buttons 100% needs to be 1 to 1 with the ai agent shell from production A ... it should not be hard to copy css"; "every circle button like this", "all of them"). The original: so hub/pick_block_widget.css:144-146 (.dblk-circ) and :105-108 (.dblk-play, the run circle, read after .dblk-circ's later rule has won what both set). Shape only here; its colours are the theme's. It does not move (the original's circle has no transition): how a thing moves is its behaviour, core's, never a theme's (the owner 2026-10-13, GO ALL 8); the run circle alone takes the theme's transition */
.btn--small.round:hover { transform: translateY(0); }   /* the original's circle does not lift (.dblk-circ:hover changes its line's colour only); a move of nothing, the word a device's screen reads too */
.btn--small.round[disabled] { pointer-events: none; }   /* the original's .dblk-circ[disabled]: dimmed by the theme, takes no press and no hover */
.btn--small.round--run { position: relative; z-index: 1; }   /* THE RUN CIRCLE (the original's .dblk-play): over the light it throws on hover */
.btn--small.round--run:hover { transform: translateY(-2px); }   /* and it alone lifts (the original's .dblk-play:hover, the theme's lift of 2px) */
.btn--small.round[class*="round--"] { display: inline-grid; grid-template-rows: 100% 100%; place-items: center; overflow: hidden; }   /* A CIRCLE THAT HOLDS AN ICON: two rows, each the circle's height; the icon stands in the first, the button's typed character falls in the second, cut off: it stays in the markup, unseen, for a device and a reader */
.btn--small.round[class*="round--"]::before { content: ""; border: 8px solid; }   /* THE ROUND BUTTON'S ICON (the owner, 2026-10-07: "the round buttons are totally wrong and nothing like the ai atom shell on production"): the original AI atom shell's circles hold a DRAWN icon, never a typed character: 16px, a 2.4 line with round ends on a 24 grid, the run a filled triangle (pick_block_widget.js). round--<name> (button.html's round(glyph=...); an agent's view names the same class) cuts that icon's outline out of a 16px square of the button's own line, so the theme's one colour for the circle colours it; shape only. It stands in the circle's middle (the owner, 2026-10-08: "the x is not in the middle": a 7.5px right margin stood it 3.75px left; gone) */
.btn--small.round--run::before { margin-left: 2px; clip-path: path("M5.333 3.667L5.333 12.333L12 8Z"); }   /* the original's: the triangle sits 2px right of centre */
.btn--small.round--back::before { clip-path: path("M9.434 2.768L4.768 7.434A0.8 0.8 0 0 0 5.899 8.566L10.566 3.899A0.8 0.8 0 0 0 9.434 2.768ZM4.768 8.566L9.434 13.232A0.8 0.8 0 0 0 10.566 12.101L5.899 7.434A0.8 0.8 0 0 0 4.768 8.566Z"); }
.btn--small.round--forward::before { clip-path: path("M5.434 3.899L10.101 8.566A0.8 0.8 0 0 0 11.232 7.434L6.566 2.768A0.8 0.8 0 0 0 5.434 3.899ZM10.101 7.434L5.434 12.101A0.8 0.8 0 0 0 6.566 13.232L11.232 8.566A0.8 0.8 0 0 0 10.101 7.434Z"); }
.btn--small.round--close::before { clip-path: path("M3.434 4.566L11.434 12.566A0.8 0.8 0 0 0 12.566 11.434L4.566 3.434A0.8 0.8 0 0 0 3.434 4.566ZM11.434 3.434L3.434 11.434A0.8 0.8 0 0 0 4.566 12.566L12.566 4.566A0.8 0.8 0 0 0 11.434 3.434Z"); }
.btn--small.round--up::before { clip-path: path("M3.899 10.566L8.566 5.899A0.8 0.8 0 0 0 7.434 4.768L2.768 9.434A0.8 0.8 0 0 0 3.899 10.566ZM7.434 5.899L12.101 10.566A0.8 0.8 0 0 0 13.232 9.434L8.566 4.768A0.8 0.8 0 0 0 7.434 5.899Z"); }
.btn--small.round--down::before { clip-path: path("M2.768 6.566L7.434 11.232A0.8 0.8 0 0 0 8.566 10.101L3.899 5.434A0.8 0.8 0 0 0 2.768 6.566ZM8.566 11.232L13.232 6.566A0.8 0.8 0 0 0 12.101 5.434L7.434 10.101A0.8 0.8 0 0 0 8.566 11.232Z"); }
.btn--small.round--add::before { clip-path: path("M7.2 3.333L7.2 12.667A0.8 0.8 0 0 0 8.8 12.667L8.8 3.333A0.8 0.8 0 0 0 7.2 3.333ZM3.333 8.8L12.667 8.8A0.8 0.8 0 0 0 12.667 7.2L3.333 7.2A0.8 0.8 0 0 0 3.333 8.8Z"); }
.btn--small.round--remove::before { clip-path: path("M3.333 8.8L12.667 8.8A0.8 0.8 0 0 0 12.667 7.2L3.333 7.2A0.8 0.8 0 0 0 3.333 8.8Z"); }
.btn--small.round--full::before { clip-path: path("M6 1.867L2.667 1.867A0.8 0.8 0 0 0 2.667 3.467L6 3.467A0.8 0.8 0 0 0 6 1.867ZM1.867 2.667L1.867 6A0.8 0.8 0 0 0 3.467 6L3.467 2.667A0.8 0.8 0 0 0 1.867 2.667ZM10 3.467L13.333 3.467A0.8 0.8 0 0 0 13.333 1.867L10 1.867A0.8 0.8 0 0 0 10 3.467ZM12.533 2.667L12.533 6A0.8 0.8 0 0 0 14.133 6L14.133 2.667A0.8 0.8 0 0 0 12.533 2.667ZM12.533 10L12.533 13.333A0.8 0.8 0 0 0 14.133 13.333L14.133 10A0.8 0.8 0 0 0 12.533 10ZM13.333 12.533L10 12.533A0.8 0.8 0 0 0 10 14.133L13.333 14.133A0.8 0.8 0 0 0 13.333 12.533ZM6 12.533L2.667 12.533A0.8 0.8 0 0 0 2.667 14.133L6 14.133A0.8 0.8 0 0 0 6 12.533ZM3.467 13.333L3.467 10A0.8 0.8 0 0 0 1.867 10L1.867 13.333A0.8 0.8 0 0 0 3.467 13.333Z"); }   /* FULL SCREEN (the owner, 2026-10-09: "please add a full screen icon.. we can use it for the video tool also pf virtual wire"): the original shell has no such icon, so the plain four corners, each two lines of the same 2.4 stroke with round ends on the same 24 grid as the others (M9 4H4v5 M15 4h5v5 M20 15v5h-5 M9 20H4v-5) */
.btn--small.round--full-exit::before { clip-path: path("M2.667 6.8L6 6.8A0.8 0.8 0 0 0 6 5.2L2.667 5.2A0.8 0.8 0 0 0 2.667 6.8ZM6.8 6L6.8 2.667A0.8 0.8 0 0 0 5.2 2.667L5.2 6A0.8 0.8 0 0 0 6.8 6ZM13.333 5.2L10 5.2A0.8 0.8 0 0 0 10 6.8L13.333 6.8A0.8 0.8 0 0 0 13.333 5.2ZM10.8 6L10.8 2.667A0.8 0.8 0 0 0 9.2 2.667L9.2 6A0.8 0.8 0 0 0 10.8 6ZM10.8 13.333L10.8 10A0.8 0.8 0 0 0 9.2 10L9.2 13.333A0.8 0.8 0 0 0 10.8 13.333ZM10 10.8L13.333 10.8A0.8 0.8 0 0 0 13.333 9.2L10 9.2A0.8 0.8 0 0 0 10 10.8ZM2.667 10.8L6 10.8A0.8 0.8 0 0 0 6 9.2L2.667 9.2A0.8 0.8 0 0 0 2.667 10.8ZM5.2 10L5.2 13.333A0.8 0.8 0 0 0 6.8 13.333L6.8 10A0.8 0.8 0 0 0 5.2 10Z"); }   /* LEAVE FULL SCREEN: the four corners turned in (M4 9h5V4 M20 9h-5V4 M15 20v-5h5 M4 15h5v5) */
/* END THE TWO BUTTONS */
@media (max-width: 768px) { .btn--big { width: 280px; } }   /* a narrow window: the big button a little narrower (a phone's own core has no widths) */
.hub-main { display: flex; flex-direction: column; align-items: center; margin: 50px 0; }
.hub-main__heading { text-align: center; }
.hdr-net { display: none; }
.hdr-net--shown { display: flex; }
.hdr-net .hdr-icon { display: none; }
.hdr-net[data-state="on"] .hdr-net__on, .hdr-net[data-state="off"] .hdr-net__off, .hdr-net[data-state="sync"] .hdr-net__sync { display: block; }
@media (max-width: 768px) {
  .layout--header { padding: 0 14px; }
  .layout--hide-mobile { display: none; }
  .layout--header__logo-link { width: 64px; height: 28px; }
}

/* the bar across the top while a browser is the demo's: its words and its button on one centred line, wrapping on a phone */
.view-as-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 6px 16px; }

/* ── 3. THE MODULE STRIP: one row of the product's modules, centred; wider than the screen it scrolls sideways inside
      itself and starts at the left; the current module stands on a line ── */
.pf-modstrip { display: flex; margin-top: 8px; overflow-x: auto; scrollbar-width: none; }
.pf-modstrip__inner { display: flex; flex: none; align-items: flex-end; gap: 28px; margin: 0 auto; padding: 8px 24px 0; }
.pf-modstrip__inner > * { padding-bottom: 12px; white-space: nowrap; }
.pf-modstrip__inner > [aria-current] { padding-bottom: 8px; border-bottom: 4px solid; }
@media (max-width: 768px) {
  .pf-modstrip { margin-top: -6px; }
}

/* ── 4. THE TECHNOLOGY BAR: FROST's strip on the left behind an edge line, the three badges on the right; on a phone
      the badges alone ── */
.tech-strip-bar { display: flex; justify-content: space-between; align-items: flex-start; padding: 2px 30px 2px 35px; border-left: 5px solid; }
.tech-strip-idlines { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding-top: 14px; }
.tech-strip-title { margin-bottom: 6px; }
.tech-strip-line { margin-left: 8px; font-variant-numeric: tabular-nums; }
.tech-strip-token { padding: 0 1px; }
.tech-strip-token--active { display: inline-block; height: 1em; vertical-align: baseline; }
.tech-strip-tampered { margin-bottom: 2px; }
.tech-strip-badges { display: flex; flex: none; justify-content: flex-end; align-items: flex-start; gap: 20px; padding: 4px 40px 0 0; }
.tech-badge { display: flex; flex-direction: column; align-items: flex-end; padding: 6px 0; }
.tech-badge__top { display: flex; justify-content: flex-end; align-items: center; gap: 2px; margin-top: 4px; }
.tech-badge__word { padding: 1px 2px 0; }
.tech-badge__value { padding: 1px 2px 1px 4px; }
.tech-badge__cap { display: block; margin-top: 2px; text-align: right; }
@media (max-width: 768px) {
  .tech-strip-bar { padding-left: 35px; border-left-width: 0; }
  .tech-strip-idlines { display: none; }
}

/* ── 5. THE PAGE'S COLUMN: centred, one width; the back circle at its top left, then the hero's three lines ── */
.main-container { width: 100%; max-width: 900px; margin: 5px auto 0; padding: 34px 20px 0; }
.amx-main { padding: 0 40px; }
.back-row { position: relative; height: 0; }   /* THE BACK CIRCLE'S PLACE (the owner 2026-10-02): a row under the header that takes NO room, so the header block stands at the same height on every page, with or without a circle; the circle stands in it, the same distance from the screen's left and from the header on every page of every application */
.ps-back { position: absolute; left: 44px; top: 18px; margin: 0; }   /* THE BACK CIRCLE'S PLACE only: its look is the one round button's (.btn.btn--small.round; the owner 2026-10-07: every circle on the platform the same, the shell's, with its hover) */
.amx-hero { margin: 6px 0 8px; text-align: center; }
.amx-h1 { margin: 8px 0 4px; }
@media (max-width: 768px) {
  .main-container { padding-top: 22px; }
  .amx-main { padding: 0 12px; }
}

/* ── 6. MAIN NAV: its two heading lines, then the buttons one under another, one width, centred ── */
@media (max-width: 768px) {
  .hub-main { margin: 30px 0; }
}

/* ── 7. THE FOOTER: the wordmark's slot across the top, centred; under it the three links and the masthead in one row,
      spread from side to side; on a phone one column ── */
.layout--footer { margin-top: 80px; }
.layout--footer__mark { display: block; padding: 24px 16px; text-align: center; background-size: contain; background-position: center; background-repeat: no-repeat; }
.layout--footer__wordmark { display: block; }
.layout--footer__content { padding: 80px 40px 40px; }
.layout--footer__grid-4 { display: flex; justify-content: space-between; align-items: flex-start; padding: 0 40px 40px; }
.layout--footer__masthead { flex: none; }
.pfft-title { margin-bottom: 4px; }
.pfft-tm { vertical-align: super; }
.pfft-tags { margin-bottom: 48px; }
.pfft-statement { margin-bottom: 4px; }
.pfft-tech { margin-bottom: 28px; }
.pfft-phone { margin-bottom: 4px; }
.pfft-email { margin-bottom: 28px; }
.pfft-resp { max-width: 340px; margin-bottom: 24px; }
.pfft-legal { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 4px; }
.pfft-company { margin: 10px 0 6px; }
.pfft-cdn { margin-top: 4px; }
@media (max-width: 768px) {
  .layout--footer__content { padding: 40px 20px 20px; }
  .layout--footer__grid-4 { flex-direction: column; align-items: stretch; gap: 20px; padding: 20px; }
  .layout--footer__masthead { flex: 0 1 auto; }
}

/* ── 8. THE DOCK: fixed to the screen's bottom, over the page; one segment a product, each a logo slot over its
      caption, the current one on a line; a badge at a logo's upper right. The pad under the page keeps the page's end
      clear of it. Hidden: the dock leaves downward and takes no press, the pad keeps only the SHOW button's room ── */
.pf-dock-pad { flex: none; height: 126px; }
.pf-dock-pad.pf-dock-pad--hidden { height: 36px; }
.pf-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; align-items: stretch; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid; }
.pf-dock--hidden { transform: translateY(100%); pointer-events: none; }
.pf-dock__flex { flex: 1; }
.pf-dock__seg { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-end; padding: 18px 19px 6px; }
.pf-dock__item { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 7px; min-width: 100px; padding: 4px 8px 2px; }
.pf-dock__logo { display: flex; align-items: center; justify-content: center; min-width: 84px; height: 36px; text-align: center; background-size: contain; background-position: center; background-repeat: no-repeat; }   /* THE DOCK'S LOGO: its picture whole in its box, its words in the box's middle */
.pf-dock__logo--05 { height: 43px; }   /* the account's item (the cat) stands a little taller than the names */
.pf-dock__logo--01, .pf-dock__logo--02, .pf-dock__logo--03, .pf-dock__logo--04, .pf-dock__logo--05 { -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }   /* every dock mark's picture is its mask: its colour the theme's --dock-ink (the heartbeat's --dock-activity) */
.pf-dock__iconwrap { position: relative; display: block; }
.pf-dock__iconwrap .pf-dock__logo { display: flex; }
.pf-dock__badge { position: absolute; right: -14px; top: -9px; display: flex; align-items: center; height: 15px; padding: 0 4px; border-radius: 8px; white-space: nowrap; }
.pf-dock__cap { display: block; padding-bottom: 12px; text-align: center; }
.pf-dock__item[aria-current] .pf-dock__cap { padding-bottom: 8px; border-bottom: 4px solid; }
.pf-dock__toggle, .pf-dock__show { align-items: center; gap: 5px; padding: 4px; border: 0; cursor: pointer; }
.pf-dock__toggle { position: absolute; left: 10px; top: 4px; z-index: 4; display: flex; }
/* THE ONE DEFAULT, THE SWITCH OFF (the owner 2026-10-09: with the theme off "sun moon login have a grey background that looks ugly. it should be transparent"; "the dock should have the same solid background as the background ... otherwise the text shows through"): no sheet of the look is linked then (html[data-look="off"], the layout's own mark), so the browser dresses a button in its own grey and the dock has no ground. The icons go back to plain (the browser's own dress dropped whole, their structure said again); the dock has no ground of its own with no look (this sheet holds no colour: the Judge's CORE IS SHAPE ONLY), so the page itself ends above it then (the owner 2026-10-09: "the background has a color so its a color there already.. why cant the dock have the same background"): the page scrolls inside its own box, the dock keeps its place at the bottom on the page's own ground, the same as the page's, and no word ever passes behind it. Nothing here is read when a look is worn. */
html[data-look="off"] .hdr-icon-btn { all: unset; display: flex; align-items: center; padding: 2px 0; cursor: pointer; }
html[data-look="off"] .pf-dock__toggle { all: unset; position: absolute; left: 10px; top: 4px; z-index: 4; display: flex; align-items: center; gap: 5px; padding: 4px; cursor: pointer; }
html[data-look="off"] .pf-dock__show { all: unset; position: fixed; left: 10px; bottom: 4px; z-index: 899; display: none; align-items: center; gap: 5px; padding: 4px; cursor: pointer; }
html[data-look="off"] .pf-dock--hidden + .pf-dock__show { display: flex; }
html[data-look="off"] { height: 100%; overflow: hidden; }
html[data-look="off"] body { height: calc(100% - 126px); overflow-y: auto; }
html[data-look="off"]:has(.pf-dock--hidden) body { height: calc(100% - 36px); }
html[data-look="off"] .pf-dock-pad { display: none; }
.pf-dock__show { position: fixed; left: 10px; bottom: 4px; z-index: 899; display: none; }
.pf-dock--hidden + .pf-dock__show { display: flex; }
.pf-dock__toggle .pf-dock__cap, .pf-dock__show .pf-dock__cap { padding-bottom: 0; }
.pf-dock__arrow { display: block; width: 14px; height: 14px; }
@media (max-width: 768px) {
  .pf-dock-pad { height: 86px; }
  .pf-dock__flex, .pf-dock__toggle { display: none; }
  html[data-look="off"] .pf-dock__toggle { display: none; }
  html[data-look="off"] body { height: calc(100% - 86px); }
  .pf-dock__seg { flex: 1 1 0; min-width: 0; padding: 11px 2px 4px; }
  .pf-dock__item { flex: 1; gap: 3px; min-width: 0; padding: 2px 2px 0; }
  .pf-dock__badge { right: -12px; top: -8px; height: 13px; }
  .pf-dock__logo { min-width: 56px; height: 24px; }
  .pf-dock__logo--05 { height: 29px; }
  .pf-dock__cap { padding-bottom: 5px; }
  .pf-dock__item[aria-current] .pf-dock__cap { padding-bottom: 3px; border-bottom-width: 2px; }
}

/* ── 9. THE DOOR (sign in): the original door one to one (the owner, 2026-10-07): the header's switches fixed at the top
      right; the logo (370 x 158) over one narrow column (222): CONTINUE WITH, the three doors (each its mark, then its
      words, left), the new-here and notice lines, OR VIEW USER AND PASS (the fields, LOGIN centred under them); the
      LARRY LLM stripe across the screen (36; it steps aside while the panel is open); the commitment and the copyright
      fixed at the foot. On a phone the logo is small and the commitment steps aside (the original's phone rule); the
      stripe stays (the owner, 2026-10-01). CREATE ACCOUNT is the door's own full page: one sheet, its fields two to a
      row, one to a row on a phone ── */
.login-header { position: fixed; top: 0; left: 0; right: 0; justify-content: flex-end; }
.login-door { display: flex; flex-direction: column; align-items: center; padding-top: 8vh; text-align: center; }
.login-pin-open .login-door { padding-bottom: 320px; }
.login-logo { display: flex; align-items: center; justify-content: center; width: 370px; max-width: 100%; height: 158px; margin: 0 auto 20px; background-size: contain; background-position: center; background-repeat: no-repeat; }
.login-mark-icon { width: 16px; height: 16px; flex: none; }   /* the door's own mark before its words (the original's) */
.login-stack { display: flex; flex-direction: column; width: 222px; text-align: left; }
.login-stack .btn--big { width: 222px; margin: 5px 0; padding: 10px 10px 10px 16px; justify-content: flex-start; gap: 8px; }   /* the three doors: the original's 222 (200 and its padding), the mark then the words, left */
.login-label { margin: 8px 0 2px; }
.login-line { margin-top: 6px; }
.login-panel > summary { list-style: none; cursor: pointer; padding: 4px 0 8px; }
.login-input { display: block; width: 100%; margin-top: 8px; padding: 10px; border: 1px solid; }
.login-go { margin: 5px 0; text-align: center; }
.login-go .btn--small { padding: 6px 14px; }
.login-stripe { display: flex; align-items: center; justify-content: center; align-self: stretch; width: 100%; height: 36px; margin: 5px 0; }   /* the whole width, as the original's band */
.login-pin-open .login-stripe { display: none; }
.login-pin-open .login-commit { display: none; }   /* the commitment's three lines step aside with the stripe while the user and pass panel is open (the owner 2026-10-08: "hide this at the same time") */
.login-bottom { position: fixed; left: 0; right: 0; bottom: 20px; padding: 0 16px; text-align: center; }
.login-commit { max-width: 900px; margin: 0 auto 56px; }
@media (max-width: 768px) {
  .login-door { padding-top: 84px; }
  .login-logo { width: 150px; height: 64px; margin-bottom: 12px; }
  .login-commit { display: none; }
}

/* ── 10. THE GREETING (the dashboard): one lockup, centred: LARRY's mark slot with its tag under it, then the line and
       the name, left-justified; on a phone the mark stands over the words. THE AGENT'S WORD: a row of its own ── */
.amx-greet { display: flex; align-items: center; justify-content: center; gap: 26px; margin: 26px 0; }
.amx-greet__brand { display: flex; flex: none; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.amx-greet__mark { display: flex; align-items: center; justify-content: center; width: 132px; height: 88px; background-size: contain; background-position: center; background-repeat: no-repeat; }
.amx-greet__tag { margin-top: 4px; }
.amx-greet__words { display: block; min-width: 0; text-align: left; }
.amx-greet__line { display: inline; margin: 0; }
.amx-greet__name { display: inline; margin-left: 14px; white-space: nowrap; }   /* in the greeting's own line, after its last word */
.pb-atom { position: relative; margin: 18px 0; }
.pipe-bleed { position: relative; width: calc(100vw - 110px); margin: 0 0 40px calc(50% - 50vw + 40px); border-radius: 0; overflow: hidden; isolation: isolate; }   /* THE SHELLS' CONTAINER, the original bench's rule for rule (ui/inc_pb_atom_css.html:14-19, ui/inc_widget_psawp_bench.html:488-489): a panel the window's width less 110px, behind the shells; inside it the shells' 860px seat, room at its left for the count and at its right for the status; 28px between shells */
.pipe-bleed .pipe-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pipe-bleed .pipe-inner { position: relative; z-index: 1; padding: 44px 52px 40px 52px; }
.pb-top-pick { width: 860px; max-width: 100%; margin: 36px 0 28px calc(50vw - 430px - 92px); }
.mfb-stack > .pb-atom { margin: 0; }
.mfb-stack > div + div, .mfb-stack > .pb-atom + .pb-atom { margin-top: 28px; }   /* (the second name: the rule above it would otherwise win and close the 28px between two shells) */
.pb-atom-num { position: absolute; left: -144px; top: 0; width: 52px; text-align: right; }   /* THE ATOM CHROME, the original's rule for rule (ui/inc_pb_atom_css.html:23-28): the shell's number outside it at the left, its status column outside it at the right, the status at the column's foot */
.pb-atom-status { position: absolute; top: 0; bottom: 0; left: calc(100% + 40px); display: flex; flex-direction: column; text-align: left; white-space: nowrap; }
.pb-atom-status-cap { margin-top: auto; }
@media (max-width: 1000px) { .pb-top-pick { margin-left: auto; margin-right: auto; } }
@media (max-width: 900px) { .pipe-bleed { width: 100%; margin: 0 0 40px 0; } }
.pb-corner { float: right; position: relative; z-index: 1; margin: -52px 14px 14px 0; }   /* A CONTROL OVER THE BOTTOM RIGHT CORNER OF THE BLOCK BEFORE IT (the owner 2026-10-09: "we need a round button on the bottom right corner to make it full screen"): the host's canvas rule's full screen button (static/js/host_canvas.js), 14px in from the corner of an agent's view and of the whole screen; it takes no room of its own (the round button's 38px and its two margins come to nothing) */
[data-canvas-stage][data-filled] { position: fixed; inset: 0; z-index: 2147483000; }   /* THE WHOLE WINDOW, WHERE THE BROWSER HAS NO WHOLE SCREEN (an iPhone's Safari; the owner's GO 2026-10-14): the host's canvas rule's stage (static/js/host_canvas.js), marked by its own press, over the page until the same press; layout only */
@media (max-width: 768px) {
  .amx-greet { flex-wrap: wrap; gap: 14px; }
}

/* ── 11. THE ROWS: one narrow column; a group is a framed box of rows, each its words on the left and its control on
       the right, a line between two rows; over a group its label or a big heading, under it a note. The controls: the
       pill (its knob left when off, right when on), a picker, a small button, a row that is one pick ── */
.ps-col, .nav-export { max-width: 620px; margin: 34px auto 0; }
.ps-col--framed { max-width: 676px; }   /* a column in THE RECORD FRAME: wider by the frame (ring 10 + line 1 + panel 16 + line 1, each side), its content keeps 620px */
.nav-export { margin-top: 26px; }
.admin-ops { width: 90%; max-width: 600px; margin: 20px auto 40px; text-align: center; }
.ps-grouphead { margin: 18px 0 8px; }
.ps-groupsub { margin: 0 0 14px 2px; }
.ios-grouplabel, .fm-grouplabel { margin: 0 0 8px 4px; }
.ios-group > .ios-grouplabel, .fm-group > .fm-grouplabel { margin: 0; padding: 12px 18px 10px; }   /* a block's name: its first row, inside its frame */
.ios-group, .fm-group { margin-bottom: 26px; border: 1px solid; }
.ios-groupnote { margin: -4px 0 8px 4px; }
.ios-row, .fm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 15px 18px; }
.ios-group > * + *, .ios-row + .ios-row, .fm-group > * + *, .fm-row + .fm-row { border-top: 1px solid; }
.row-arrow, .fm-arrow { flex: none; width: 22px; height: 22px; }   /* THE ARROW: the one arrow of every row that opens or goes somewhere, large enough to see */
.ios-row__pick { flex: 1; padding: 0; border: 0; text-align: left; cursor: pointer; }
.theme-row { position: relative; overflow: hidden; }   /* a theme shown in its own look: its picture behind its name */
.theme-row__picture { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.theme-row .ios-row__pick, .theme-row .caption { position: relative; }
.ps-rownote { display: block; margin-top: 2px; }
.ps-controls { display: flex; flex: none; align-items: center; gap: 12px; }
.toggle { position: relative; display: block; flex: none; width: 42px; height: 22px; padding: 0; border: 1px solid; border-radius: 22px; cursor: pointer; }   /* THE TOGGLE: the one switch of every screen; a line round it and round its knob, so its state shows with the look off; its colours are the theme's */
.toggle__knob { position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; border: 1px solid; border-radius: 50%; }
.toggle[aria-pressed="true"] .toggle__knob { left: 21px; }
.ps-select { padding: 6px 10px; border: 1px solid; border-radius: 8px; }
.ps-reset { display: flex; margin: 0 0 26px; }
.admin-ops__list { display: inline-block; margin: 15px 0 0; padding: 0; list-style: none; text-align: left; }
.admin-ops__item { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
@media (max-width: 768px) {
  .ios-row { flex-wrap: wrap; }
}

/* ── 12. THE MENU: wider than the page's column; four columns in one row, one a product: its caption over its
       buttons, every button the same box (the module's name over its description); on a phone one column ── */
.menu-page .main-container { max-width: none; }
.menu-page .amx-main { margin: 0 30px; }
.menu-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; }
.menu-col { display: flex; flex-direction: column; gap: 12px; padding: 114px 24px 24px; }
.wl-panel .menu-col { padding-top: 12px; }   /* the menu in THE RECORD FRAME: its columns start at the frame's top (the open page's 114px band stays outside it) */
.menu-caption { margin-bottom: 12px; }
.electric-button { display: block; position: relative; overflow: hidden; width: 100%; max-width: 240px; min-height: 128px; margin: 0 auto; padding: 24px 20px; border: 1px solid; }
.electric-button::before { content: ''; position: absolute; left: -100%; top: 0; width: 100%; height: 100%; transition: left 0.4s ease; }
.electric-button:hover::before { left: 100%; }
.tc-title { display: block; }
.tc-desc { display: block; margin-top: 5px; }
@media (max-width: 768px) {
  .menu-page .amx-main { margin: 0; }
  .menu-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── 13. THE LIST. THE ONE CONTROLLER: a framed box: a rule, its word, a rule, then three columns with a line between
       two (one column on a phone). Then one card a record, a line under it: the top row (the title and its line on
       the left, the buttons and the tags on the right), the fields in three columns (one on a phone) ending with the
       ties and the key badge at the right, the notes. Then the pager, centred. THE KEY BADGE is sized to itself:
       its label, the key with its hash boxed, COPY under it. The remove question is a small box over the page ── */
.sub-contacts-header { margin-bottom: 8px; }
.sub-controller-box { margin-top: 24px; padding: 12px 20px; }
.sub-controller { padding: 12px; border: 1px solid; border-radius: 4px; }
.wl-rule { margin-bottom: 10px; border-top: 1px solid; }
.wl-rule--gap { margin: 8px 0 10px; }
.wl-cols { display: flex; }
.wl-col--1 { flex: none; width: 270px; padding-right: 20px; }
.wl-col--2, .wl-col--3 { display: flex; flex: 1 1 0; flex-direction: column; min-width: 0; }
.wl-col--2 { padding: 0 20px; }
.wl-col--3 { padding-left: 20px; }
.wl-divider { flex: none; border-left: 1px solid; }
.wl-label { margin: 11px 0 4px; }
.wl-btnrow { display: flex; flex-wrap: wrap; }
.sub-search-form { margin: 0; }
.sub-search-form-container { display: flex; flex-wrap: wrap; gap: 8px 0; }
.sub-search-input { display: block; width: 100%; padding: 9px 12px; border: 1px solid; }
.ctrl-desc--foot { padding-top: 18px; }
.sub-controller-box.wl-glass { margin: 24px 10px 0; padding: 10px; border-width: 1px; border-style: solid; border-radius: 10px; }   /* width and style only: the colour is the theme's dock line, never the words' colour */   /* THE RECORD FRAME's outer ring (list, card, add, edit, remove): the dock's glass beyond the border */
.wl-panel { padding: 12px 16px; border: 1px solid; border-radius: 4px; }   /* the frame's panel: the inner glass, the controller and the record in it */
.wl-panel .sub-controller-box { margin-top: 0; padding: 0; }   /* inside the frame the controller's outer box adds no space: one frame, one edge */
.wl-panel .sub-controller { margin-bottom: 16px; }   /* the controller keeps its own solid box inside the frame, edge to edge with the list */
.sub-contacts-table { width: 100%; margin-bottom: 20px; border-collapse: collapse; }
.wl-grouphead { padding: 14px 0 6px; }
.sub-rec-cell { padding: 16px 0; }
.mc-card { padding-bottom: 10px; border-bottom: 1px solid; }
.mc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mc-left { flex: 0 1 49.5%; min-width: 0; }
.mc-line { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.mc-actions { flex: none; }
.mc-btnrow { display: flex; justify-content: flex-end; gap: 6px; }
.mc-btnrow form { margin: 0; }
.mc-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-top: 4px; }
.sub-tag { padding: 0 6px; border: 1px solid; }
.mc-main { display: flex; margin-top: 8px; }
.mc-cols { display: grid; flex: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; min-width: 0; }
.mc-col { min-width: 0; }
.mc-field { overflow-wrap: anywhere; }
.mc-tie { display: flex; justify-content: space-between; gap: 8px; }
.mc-keycol { display: flex; justify-content: flex-end; padding-top: 10px; }
.mc-notes { margin-top: 8px; }
.key-badge { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 100%; padding: 6px; }   /* ONE BADGE, 1:1 THE SAME ON EVERY PAGE (the owner 2026-10-03: "the point of injecting it is they are always 1 to 1 the same"), with its own room around it so it is never crowded wherever it is injected */
.key-badge__box { position: relative; box-sizing: border-box; display: block; width: fit-content; max-width: 100%; margin-left: 0; margin-right: auto; padding: 12px 17px 14px 18px; border: 1px solid; overflow: hidden; text-align: left; background-size: cover; background-position: center; background-repeat: no-repeat; }   /* THE BADGE'S BOX, the original's value for value (the owner 2026-10-09: "the key badge is a different size ... the rest should be the same size and fonts"; the original: .frost-key-badge, the technology sheet faf51f39.css:7062): 12 17 14 18 inside, as wide as its key */
.key-badge__hash { padding: 2px 6px; border-radius: 2px; }   /* no border: production's chip is its ground and an inset ring (the look's) */
.key-badge__box::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }   /* the sheen over the ground, under the words (the original's .frost-key-badge::after) */
.key-badge__box > * { position: relative; z-index: 1; }
.key-badge__label { display: block; }
.key-badge__key { position: relative; display: block; width: fit-content; max-width: 100%; }   /* THE KEY, holding its tiny copy button: never wider than the key itself */
.key-badge__value { position: relative; z-index: 1; display: block; min-width: calc(22ch + 12px); margin-top: 3px; white-space: nowrap; }   /* EVERY BADGE ONE WIDTH (the owner 2026-10-04: "the same width"): a key's own width (PREFIX_ + 12 + _ + 4 = 22 characters, the hash's two 6px sides), so the empty PREFIX_NULL_TOKEN is as wide as a real key */
.key-badge__copy { position: absolute; top: -15px; right: 0; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: 0; cursor: pointer; }   /* just above the key's right end, over the token (the owner 2026-10-03) */
.key-badge__icon, .key-badge__done { display: block; width: 14px; height: 14px; }
.key-badge__done { display: none; }
.key-badge__copy--done .key-badge__icon { display: none; }
.key-badge__copy--done .key-badge__done { display: block; }
.key-chip-badge { padding: 0 6px; border: 1px solid; border-radius: 2px; white-space: nowrap; }
.mt-badge { white-space: nowrap; }
.wl-pager { display: flex; justify-content: center; gap: 8px; margin: 24px 0; }
.rm-dialog { width: 420px; max-width: 90%; padding: 20px; border: 1px solid; }
.rm-form { margin: 0; }
.rm-name { margin: 8px 0; overflow-wrap: anywhere; }
.rm-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
@media (max-width: 768px) {
  .wl-cols { flex-direction: column; }
  .wl-col--1 { width: auto; padding: 0 0 12px; }
  .wl-col--2, .wl-col--3 { flex: none; padding: 0 0 12px; }
  .wl-divider { display: none; }
  .mc-top { flex-direction: column; }
  .mc-left { flex: none; width: 100%; }
  .mc-btnrow, .mc-tags { justify-content: flex-start; }
  .mc-cols { grid-template-columns: minmax(0, 1fr); gap: 12px 0; }
}

/* ── 14. THE CARD (one record), inside the list's own framed box: its head (the dot with the record's first letter,
       the title, the line, EDIT, the key badge, the tags); then sections: a title block, a section head on a line, its
       fields two to a row (one on a phone); a line between the kinds; the look book (the record's files on walls of
       columns, each tile with its take-off button at the corner); change control, a table that scrolls sideways inside
       its own box: the page never grows wider than the screen ── */
.wc-container { padding: 20px 0; }
.wc-head { margin-bottom: 20px; text-align: center; }   /* the header CENTRED, as the original (the owner 2026-10-02: "the card needs the top centered"): the dot, the title, the line under it */
.wc-dot { display: block; width: 80px; height: 80px; margin: 0 auto 14px; }
.wc-meta { margin-top: 5px; }
.wc-btnrow { display: flex; justify-content: flex-start; gap: 6px; margin-top: 14px; text-align: left; }   /* EDIT stays left under it, as the original */
.wc-key { margin-top: 14px; text-align: left; }
.wc-links { text-align: left; }   /* the key and the tags stay left under the centred header, as the original */
.wc-links { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; }
.wc-titleblock { margin: 60px 0 30px; }
.wc-titlesub { margin-top: 8px; }
.wc-section { margin-bottom: 16px; }
.wc-sectionhead { margin-bottom: 10px; padding-bottom: 5px; border-bottom: 2px solid; }
.wc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.wc-field { margin-bottom: 8px; overflow-wrap: anywhere; }
.wc-label { display: block; margin-bottom: 1px; }
.wc-notes { overflow-wrap: anywhere; }
.wc-divider { margin: 30px 0; border-top: 1px solid; }
.wc-bill-qr { display: block; margin-top: 10px; }
.wc-dam { margin: 0; }
.lb-head { margin: 14px 0 6px; }
.lb-grid { columns: 3; column-gap: 10px; }
.lb-tile { position: relative; margin-bottom: 10px; break-inside: avoid; }
.lb-open { display: block; border: 1px solid; overflow: hidden; }
.lb-img { display: block; width: 100%; }
.lb-mark { display: block; padding: 18px 0 6px; text-align: center; }
.lb-name { display: block; padding: 0 8px 12px; text-align: center; overflow-wrap: anywhere; }
.lb-off { position: absolute; top: 4px; right: 4px; margin: 0; }
.cc-report { margin-top: 6px; }
.cc-title { margin-bottom: 6px; }
.cc-wrap { overflow-x: auto; }
.cc-table { min-width: 100%; border-collapse: collapse; }
.cc-table th, .cc-table td { padding: 3px 8px; border-bottom: 1px solid; text-align: left; white-space: nowrap; }
@media (max-width: 768px) {
  .wc-grid { grid-template-columns: minmax(0, 1fr); }
  .lb-grid { columns: 2; }
}

/* ── 15. THE FORMS (add, edit): the card's own frame, sections and grid; a field is its label over a control of the
       field's width; a tick with its word beside it; what the save said, in a box of its own above the fields ── */
.wf-input { display: block; width: 100%; margin-top: 2px; padding: 10px; border: 1px solid; }
.wf-notes { resize: vertical; }
.wf-check { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.wf-verdict { margin-bottom: 20px; padding: 12px; border: 1px solid; }
/* the import page: its two heading lines, then DA-M's drop zone (a technology's place), then the steps as they come */
.imp-head { margin-bottom: 20px; }
.imp-title { margin: 0; }
.imp-steps { margin-top: 16px; }
.imp-step { margin-top: 4px; }

/* ── 16. THE ACCOUNT PAGE, on the rows' own column. MTOK'S PANEL at the top (a technology's place): its heading with
       the account's lines at the right; then the mark beside the balance, the cycles with their meters, the terms,
       the member's own balance over a line. THE SUITE: its heading, the tour and demo lines, the blurb, the agents'
       count, two columns of what each device does, the four products. A ROW WITH A TYPE-IN: a small field and a
       full-size button beside it ── */
.mt-panel { margin: 0; padding: 24px; border: 1px solid; background-size: cover; background-position: center; background-repeat: no-repeat; }   /* a box with a frame, as every box of the account page */
.fm-place { margin: 0 0 32px; padding: 24px 24px 1px; border: 1px solid; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; }   /* FROST's place on the account page: a box with a frame, as mTok's */
.fm-mark { display: flex; align-items: center; justify-content: center; width: 300px; max-width: 100%; height: 128px; margin: 0 auto 20px; background-size: contain; background-position: center; background-repeat: no-repeat; }   /* FROST's mark: in the middle of its place, large, its picture WHOLE in a box of the picture's own shape */
.fm-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }   /* a name over its state */
.fm-card { margin-bottom: 26px; padding: 24px 18px 20px; border: 1px solid; }
.fm-card .fm-leave { margin-top: 18px; border-top: 1px solid; }   /* VIEW AS, in the card: a line over it, its rows as wide as the card's own, so its buttons stand where every button stands */
.fm-card .fm-row { padding-left: 0; padding-right: 0; }   /* THE MEMBER CARD: its line, its name, what it is, then each value in a box under its name */
.fm-kicker { margin: 0 0 4px; }
.fm-cardtitle { margin: 0 0 14px; }
.fm-cardsub { margin: 0 0 10px; }
.fm-cardnote { display: flex; gap: 14px; margin: 0 0 18px; padding: 0 16px 0 0; border: 1px solid; border-radius: 2px; }   /* the card's note: the key badge's box, a bar inside it at its left */
.fm-cardbar { flex: none; width: 5px; align-self: stretch; }
.fm-cardbar + span { padding: 12px 0; }
.fm-cells { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 12px; }   /* each value on a row of its own, on every width */
.fm-cell { display: flex; flex-direction: column; min-width: 0; }
.fm-celllabel { display: block; padding: 0 10px 8px; margin-bottom: 8px; border-bottom: 2px solid; }
.fm-value { display: block; padding: 9px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-cardkey { display: flex; flex-direction: column; margin: 18px 0 0; }
@media (max-width: 480px) { .fm-place { padding-left: 4px; padding-right: 4px; } .fm-card { padding-left: 6px; padding-right: 6px; } }   /* A PHONE: the member card holds a key's 22 characters (the owner's IF SHOWN, IT WORKS: never a badge past the card's edge, 390 wide); structure only */
.fm-mark--small { width: 180px; height: 77px; }   /* FROST's mark, smaller (the settings page) */
.fm-para { display: block; margin: 0 0 14px; }
.fm-para + .fm-grouplabel { margin-top: 24px; }
.fm-fields { display: flex; flex-direction: column; gap: 12px; }   /* a form's boxes one under the other; its button beside them, where every button stands */
.mt-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 0; }   /* THE TOP: mTok's mark, and beside it the balance in use, big (the owner 2026-10-09: "move the mtok logo to the left more and then make both gaps the same on each side and then make the text column wider"): the mark stands at the panel's own 24px, the words 24px after it; where the words have no room beside it, they go under it */
.mt-mark { flex: none; width: 150px; height: 160px; margin-inline: auto; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; }   /* mTok's mark: its box is the picture's own drawing (its height fills the box, the canvas's clear sides fall outside), so the gaps on both sides are the mark's, not the canvas's */
.mt-body { flex: 0 1 300px; min-width: 0; }   /* the words stand at the right side of the panel, a clear space between the mark and them (the owner 2026-10-09, of the top's words: "shift to the right"); their lines still read left to right, and the meter keeps the column's width */
.mt-note + .mt-month { margin-top: 12px; }   /* air between the word under the balance and the month's line */
.mt-meter { display: block; width: 100%; height: 4px; margin: 12px 0 6px; }   /* the top's one meter: the month of the wallet in use */
.mt-month { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.mt-foot { margin-top: 2px; }
.mt-body .mt-terms { margin-top: 0; }   /* the account's buy line stands right under the month's words (the owner 2026-10-09: "up more right under the text") */
.mt-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin: 4px 0 6px; }
.mt-num { min-width: 0; overflow-wrap: anywhere; }
.mt-block { margin-top: 22px; padding-top: 18px; border-top: 1px solid; }   /* a line, then the table: the account's row and, for several members, the member's under it */
.mt-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 12px; }   /* the foot of the top's words: the account's buy line at the left, the switch and its word at the right (the owner 2026-10-09: the toggle "above the line in the upper area") */
.mt-switch { flex: none; margin: 0; }
.mt-pick { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 6px; }   /* the switch, and under it the word of where it stands */
.mt-table { display: flex; flex-direction: column; }   /* THE ACCOUNT'S TABLE (the owner 2026-10-09: "if you see it as a table its simple"): a head row, then the account's row and, for a company of several, the member's row under it (the owner: "adds a new row below. the balance shifts to the member row"): a column its mTok, then a column each plan; every column the same width */
.mt-tr { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; }
.mt-tr + .mt-tr { border-top: 1px solid; }
.mt-td.mt-span-1 { flex: 1 1 0; } .mt-td.mt-span-2 { flex: 2 1 10px; } .mt-td.mt-span-3 { flex: 3 1 20px; } .mt-td.mt-span-4 { flex: 4 1 30px; }   /* one cell over the plans' columns (their shares and the gaps between them), so it starts where the first plan's column starts */
.mt-thead { align-items: flex-end; }   /* the head row: each column's name stands on the line over its column */
.mt-who { flex: 0 0 84px; min-width: 0; overflow-wrap: anywhere; }   /* whose row it is */
.mt-th, .mt-td { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.mt-k { display: none; }   /* a cell's own column name: only where the columns stand under each other (a phone) */
.mt-v { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.mt-cycle { display: block; max-width: 100%; overflow-wrap: anywhere; }   /* a plan's state, small and plain, no meter (the owner 2026-10-09: "more simple and small and no meters for these"): used of its credit, when it resets, the days left, a short line each; every line wraps inside its cell (the owner, of "Organize · Current cycle: 0% used": "fonts going off the page for all") */
.mt-ref { display: flex; flex-direction: column; align-items: flex-start; }
.mt-ref > * { max-width: 100%; }
.mt-ref--top { align-items: flex-end; margin-bottom: 22px; text-align: right; }   /* at the panel's top right, as the original's account reference */
.mt-ref .mt-badge { white-space: normal; overflow-wrap: anywhere; }   /* the account's key keeps inside the panel at any width (if shown, it works) */
.mt-cycle-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 12px; overflow-wrap: anywhere; }   /* what mTok says (a failed renewal, a cancelled plan), and the way to it under the words */
.mt-terms { margin-top: 14px; overflow-wrap: anywhere; }
.mt-table + .mt-ref, .mt-table + .mt-terms { margin-top: 14px; }
@media (max-width: 640px) {   /* A PHONE: the table's columns stand under each row, each cell saying its own column (the head row goes); the panel's sides give way */
  .mt-panel { padding-left: 14px; padding-right: 14px; }
  .mt-thead { display: none; }
  .mt-tr { flex-direction: column; gap: 8px; }
  .mt-who { flex: none; }
  .mt-td { display: flex; flex: none; width: 100%; justify-content: space-between; gap: 12px; }
  .mt-k { display: block; flex: 0 0 40%; min-width: 0; overflow-wrap: anywhere; }
  .mt-v { flex: 1 1 0; align-items: flex-end; text-align: right; }
}
.ac-suite { margin: 32px 0 16px; }   /* a heading of the account page: the same room over it and under it, every time */
.ac-tour { margin: 6px 0 13px; }
.ac-play { width: 16px; height: 16px; margin-right: 6px; vertical-align: middle; }
.ac-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 29px; overflow-wrap: anywhere; }
.ac-demo > span { flex: 1 0 100%; margin-bottom: 12px; }   /* the demo link's name, then what it is, each on a line of its own; the link and COPY under them */
.ac-blurb { margin: 0 0 16px; }
.ac-th { margin: 16px 0 5px; }
.ac-cols .ac-th, .ac-demo-th { margin-bottom: 22px; }   /* the two columns' headings stand as far over their first line as ON BOTH does over its own (whose big number makes its line tall) */
.ac-agents { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 3px 0 22px; }
.ac-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
.ac-point { display: flex; align-items: baseline; gap: 8px; }   /* a point of a column: its open dot, then its words */
.ac-dot { flex: none; }
.ac-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 26px; margin: 19px 0 29px; text-align: center; }
.ac-logo { display: flex; align-items: center; justify-content: center; width: 140px; height: 60px; margin: 0 auto 16px; background-size: contain; background-position: center; background-repeat: no-repeat; }   /* a product's logo on the account page: in the middle of its column, its picture whole in its box; its words where there is none */
.fm-leave { display: flex; flex-direction: column; margin: 0; }
.fm-field { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }   /* a field's words stand over its box, in every row alike */
.fm-change > summary { list-style: none; cursor: pointer; }   /* CHANGE PASSWORD: a row that opens its two boxes */
.fm-input { padding: 6px 10px; border: 1px solid; }
.fm-small { width: 214px; max-width: 100%; }
@media (max-width: 768px) {
  .fm-row { flex-wrap: wrap; }
  .fm-row > .fm-words { flex: 1 1 0; min-width: 0; }   /* a row's words give way: a switch stays beside them */
  .ac-cols, .ac-products { grid-template-columns: minmax(0, 1fr); }
  .ac-cols .ac-th { margin-bottom: 5px; }
}

/* ── 18. THE ANIMATED THEMES' LAYERS (the member's pick: CRT, WELLNESS, GLITCH; and THE WARM-UP): each is its own
       script in static/js (crt.js, wellness.js, glitch.js, warmup.js) drawing on a canvas; here only where a canvas
       stands: fixed, the whole screen, under everything, never in the way of a press ── */
.pf-board, .pf-anim-canvas, .pf-atoms, .pf-warmup { position: fixed; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.pf-moodlight { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 899; pointer-events: none; }   /* THE MOOD LIGHT: over the page, under the dock (900), so the dock's glass blurs it into light */

/* ── 19. THE FIELDS PAGES (default fields, custom fields): the note on the rows' column; then the list's own framed
       box: its title, the add line (a name, a kind, ADD), and the table in a box that scrolls inside itself: a
       group's line, a field a row, its two arrows, its pill ── */
.fa-col { margin-bottom: 8px; }
.fa-title { margin-bottom: 10px; }
.fa-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.fa-add .wf-input { flex: 1 1 200px; width: auto; margin-top: 0; }
.fa-table { min-width: 100%; border-collapse: collapse; }
.fa-table th, .fa-table td { padding: 6px 10px 6px 0; border-bottom: 1px solid; text-align: left; vertical-align: middle; }
.fa-group td { padding-top: 16px; }
.fa-moves { white-space: nowrap; }
.fa-form { display: inline-flex; margin: 0 4px 0 0; }

/* ── 21. THE HIRE: a hire's verdict under the shells, the hire toggle's form on a settings row (what an agent answers
       is the agent's own view, inside its shell, drawn by the agent's own sheet: nothing of it here) ── */
.mk-verdict { margin-top: 8px; }
.mk-form { display: flex; margin: 0; }

/* ── 22. THE DIAGNOSTICS PANELS (FROST's and Hades', a developer's): a framed panel across the page: its head (the
       mark and the counts in a row), the watchdog's lines stacked, the findings table and the rules reference each in
       a box that scrolls inside itself ── */
.diag { margin: 8px 20px; padding: 12px; border: 1px solid; }
.diag-lines { display: flex; flex-direction: column; margin: 8px 0; overflow-wrap: anywhere; }
.diag-rules { margin-top: 8px; }

/* ── 23. THE AGENT'S WHOLE SHELL (the developer's layer), THE ORIGINAL'S SHAPE RULE FOR RULE (the owner 2026-10-09: "make
       sure the entire shell itself with borders and button locations is the same too please. not the manifest but
       everything else"; the original: so hub/pick_block_widget.css, the block its script draws, pick_block_widget.js
       mountBlock): one framed block, round corners; its top row (GATE over AGENTIC BLOCK, the dot and the name, the
       job's two keys pushed to the right end, the switch last); the rest shows only while the block is on: under a
       line the sequence row (up, down, the place taking the room, plus, minus, the words; 54px kept free at its
       right end), then each section under its own line and its own line of words: a key badge in a 250px column
       beside its notes, the agent's two keys under the notes; the agent's table with the run circle and its words at
       the right, in a row; the wires, each under a line, its caption and its row at the right end. The shell has no
       rule of its own for a narrow window, as the original has none. The manifest's tables keep today's shape ── */
.dblk-block { box-sizing: border-box; flex: 1 1 100%; width: 100%; padding: 14px 16px; border: 1px solid; border-radius: 6px; }
.dblk-rowtop { display: flex; align-items: center; gap: 14px; margin: 0; }
.dblk-lbl, .dblk-name { flex: 0 0 auto; }
.dblk-gate { cursor: pointer; user-select: none; outline: none; outline-offset: 0; }
.dblk-dot { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; vertical-align: baseline; }
.dblk-form { display: contents; }   /* a control's form takes no box: the control itself stands in its row, as the original's bare button does */
.btn--small.dblk-add, .btn--small.dblk-remove, .btn--small.dblk-add-agent, .btn--small.dblk-remove-agent, .dblk-wires .btn--small.ac-go { display: inline-block; flex: 0 0 auto; align-items: normal; justify-content: normal; gap: normal; white-space: normal; outline-offset: 0; transition: all 0s ease; }   /* THE SHELL'S KEYS: the one small button, in the box the original's plain button has; they do not move (the original's have no transition: behaviour is core's, never a theme's, the owner 2026-10-13) */
.btn--small.dblk-add, .btn--small.dblk-remove, .btn--small.dblk-add-agent, .btn--small.dblk-remove-agent { padding: 4px 9px; border-radius: 4px; }
.btn--small.dblk-add:hover, .btn--small.dblk-remove:hover, .btn--small.dblk-add-agent:hover, .btn--small.dblk-remove-agent:hover, .btn--small.ac-go:hover { transform: none; }   /* the shell's keys do not lift (the original's have no hover) */
.btn--small.dblk-add { margin-left: auto; }
.btn--small.dblk-remove[disabled], .btn--small.dblk-add-agent[disabled], .btn--small.dblk-remove-agent[disabled] { pointer-events: none; }
.btn--small.dblk-remove-agent[disabled] { cursor: pointer; }
.dblk-rowtop .toggle { flex: 0 0 auto; width: 40px; }   /* THE SWITCH: the platform's one toggle, in the original switch's place and size (40 by 22) */
.dblk-rowtop .toggle[aria-pressed="true"] .toggle__knob { left: 19px; }
.dblk-bottom { display: none; }
.dblk--on .dblk-bottom { display: block; }
.dblk-divider { height: 1px; margin: 14px 0; }   /* a line 1px high, its colour the theme's (the original's) */
.mfb-sec { margin: 10px 0; }
.dblk-seqrow { display: flex; align-items: center; gap: 14px; margin-right: 54px; }
.dblk-seqrow .dblk-seqpos { flex: 1; min-width: 0; }
.dblk-seqrow .dblk-seqword { flex: 0 0 auto; margin-left: 4px; }
.mfb-pt { margin: 10px 0 8px; cursor: pointer; user-select: none; }
.mfb-lock { display: inline-block; margin-left: 14px; vertical-align: baseline; cursor: default; }
.dblk-keyrow { display: flex; align-items: flex-start; gap: 22px; }
.dblk-keycol { flex: 0 0 auto; width: 250px; max-width: 100%; }
.dblk-keycol .key-badge { padding: 0; }   /* in the shell the badge fills its 250px column edge to edge, as the original's (its width: 100% there) */
.dblk-keycol .key-badge, .dblk-keycol .key-badge__box, .dblk-keycol .key-badge__key { width: 100%; }
.dblk-keynotes { flex: 1; min-width: 0; }
.dblk-notes { margin-top: 2px; overflow-wrap: anywhere; }
.dblk-ctlrow { display: flex; align-items: center; justify-content: flex-start; gap: 14px; margin: 14px 0 0 0; }
.pfap { position: fixed; inset: 0; box-sizing: border-box; width: calc(100% - 48px); max-width: 980px; height: fit-content; max-height: 88vh; margin: auto; padding: 20px; border: 1px solid; border-radius: 6px; flex-direction: column; overflow: visible; }   /* THE AGENT PICKER (the owner 2026-10-09: "the original had a modal to pick the agent not a dropdown"), the original's rule for rule (so hub/pick_block_widget.css:191-209, 224: .pfap-overlay and .pfap): the box in the middle of the window, 24px kept clear at each side (the overlay's padding), 980px at most, 88% of the window's height at most; the page's own popover, so the browser lays it over everything */
.pfap:popover-open { display: flex; }
.pfap-head { display: flex; align-items: baseline; gap: 12px; }
.pfap-agents { flex: 1 1 auto; min-height: 0; margin-top: 14px; padding: 6px 0; overflow-y: auto; overscroll-behavior: contain; }
.pfap-agent { display: flex; align-items: center; gap: 16px; box-sizing: border-box; width: 100%; padding: 12px 6px; border: 0; border-bottom: 1px solid; text-align: left; cursor: pointer; }
.pfap-agent:last-child { border-bottom: 0; }
.pfap-agent-name { flex: 1; min-width: 0; }
.pfap-empty { padding: 40px 20px; text-align: center; }
.btn--small.pfap-close { display: inline-block; flex: 0 0 auto; align-items: normal; justify-content: normal; gap: normal; margin-left: auto; padding: 6px 14px; border-radius: 4px; white-space: normal; outline-offset: 0; transition: all 0s ease; }   /* CLOSE: the one small button, in the box the original's .pfap-close has, at the head's right end; it does not move */
.btn--small.pfap-close:hover { transform: none; }
.dblk-agentmf { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 16px; }
.dblk-agentmf-tbl { flex: 1 1 auto; min-width: min(260px, 55%); }
.dblk-agentmf .pipe-honest { width: 100%; min-width: 0; margin-bottom: 12px; table-layout: fixed; }
.dblk-agentmf .pipe-honest col.mfb-col-l { width: 124px; }
.dblk-agentmf .pipe-honest td { padding: 1px 12px 1px 0; border-bottom: 0; text-align: start; word-break: break-word; }
.dblk-agentmf .pipe-honest td:first-child { padding-right: 10px; white-space: nowrap; }
.dblk-agentmf .pipe-honest td:last-child { text-align: left; }
.dblk-agentmf .ac-pt { display: inline-block; width: 13px; margin-right: 0; }
.dblk-playrow { display: flex; flex: 0 0 auto; align-items: center; gap: 16px; margin-right: 54px; }
.dblk-playcol { position: relative; display: flex; align-items: center; gap: 14px; }
.dblk-playcol .dblk-playcap { margin-left: 4px; text-align: left; white-space: nowrap; }
.dblk-playcap-size { display: block; height: 0; overflow: hidden; visibility: hidden; }   /* RUN AGENT LINES UP UNDER BLOCK SEQUENCE (the original measures the words by script, pick_block_widget.js alignPlay: the caption takes the sequence word's width): here the same words, unseen and with no height, give the caption that width, so the run circle stands under the minus */
.dblk--reduced { position: relative; isolation: isolate; }   /* THE REDUCED SHELL (the agent layer of a board whose screen holds a sequence agent), the original's rule for rule (so hub/pick_block_widget.css:49-61, its pf layer): the block's own box, a layer under it for its ground, 14px under its top row, the run circle and its words at the right end, 14px over them */
.dblk--reduced::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.dblk--reduced .dblk-rowtop { margin-bottom: 14px; }
.dblk--reduced .dblk-playrow { justify-content: flex-end; margin: 14px 0 0; }
.dblk-verdict { margin: 14px 0 4px; }
.dblk-hd { margin: 4px 0 10px; }
.dblk-manifest, .pipe-frame { overflow-x: auto; }
.pipe-table { min-width: 100%; border-collapse: collapse; }
.pipe-table > tbody > tr > td { padding: 0 12px 0 0; vertical-align: top; }
.pipe-honest { min-width: 100%; margin-bottom: 10px; border-collapse: collapse; }
.pipe-honest td { padding: 3px 8px 3px 0; border-bottom: 1px solid; text-align: left; vertical-align: top; }
.ac-pt { margin-right: 6px; }
.dblk-wires .ac-wire { margin-top: 18px; padding-top: 16px; border-top: 1px solid; }
.dblk-wires .ac-wire:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.dblk-wires .ac-cap { margin-bottom: 8px; text-align: right; }
.dblk-wires .ac-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.dblk-wires .ac-q { box-sizing: border-box; flex: 0 0 auto; width: 250px; min-width: 0; padding: 8px 12px; border: 1px solid; border-radius: 4px; }
.dblk-wires .btn--small.ac-go { flex: 0 0 auto; padding: 8px 14px; border-radius: 4px; }
.dblk-wires .ac-wire-state { margin-top: 10px; min-height: 1.4em; }
/* THE SHELL ON A NARROW WINDOW (the owner's standing rule: nothing runs off a page; the coordinator's correction 2026-10-09): THE PHONE-ONLY RULES, the only ones here that are not the original's (it has none for a narrow window and runs past its edge there). At 768px and under: every row of the shell wraps, as main's did; the name gives way; the 54px kept free at the right of the sequence and run rows is given back; a wire's type-in shrinks; the container's inside is 24px 12px, its seat the container's width; the count stands over its shell and the status under it, in a row, where a phone has no room beside the shell */
@media (max-width: 768px) {
  .dblk-rowtop, .dblk-seqrow, .dblk-ctlrow, .dblk-playrow, .dblk-keyrow, .dblk-agentmf, .dblk-wires .ac-row { flex-wrap: wrap; }
  .dblk-name { flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; }
  .dblk-seqrow, .dblk-playrow { margin-right: 0; }
  .dblk-keynotes { flex: 1 1 200px; }
  .dblk-wires .ac-q { flex: 1 1 140px; width: auto; }
  .pipe-bleed .pipe-inner { padding: 24px 12px; }
  .pb-top-pick { width: auto; margin: 0; }
  .pb-atom-num { position: static; width: auto; margin-bottom: 6px; text-align: left; }
  .pb-atom-status { position: static; flex-direction: row; gap: 8px; margin-top: 8px; }
  .pb-atom-status-cap { margin-top: 0; }
}

/* ── DA-M's block, worn by the card and the import page: the same bytes as in DA-M's own core.css ── */
/* BLOCK dam */
/* DA-M'S OWN PLACE (data-place="dam"), wherever it is set: as wide as its place up to its own width, centred; one gap
   between its parts. ON A RECORD: a panel, a framed panel inside it. THE COUNT: DA-M's mark at the left, three lines stacked and centred beside it, in a framed box. THE DROP ZONE's own mark over its title. THE DROP ZONE: the whole area one press
   target, a framed box, its lines stacked and centred; the file field never shown; dragging over, the line turns solid;
   THE PROGRESS LINE inside the area: a track and its bar, the words under it. THE CAMERA: its word over a round
   button; its view in the flow, the live picture the block's width, under it the round button and Cancel. THE NOTE.
   A PANEL: its summary one row (the caret, one drawing shut and one open; the name; the count at the end), a line over it and under the last one.
   THE FILE MAP: three kinds across, equal columns. THE FILTER: a field. A FILE'S ROW: its name and under it its kind
   and size at the left, its key at the right, the actions across the whole row; a long name wraps. */
.dam-record, .dam-zone, .dam-plain { display: flex; flex-direction: column; gap: 20px; width: 760px; max-width: 100%; margin: 0 auto; }
.dam-record { margin-bottom: 40px; padding: 10px 14px; border-radius: 6px; }
.dam-frame { display: flex; flex-direction: column; gap: 20px; padding: 14px 18px; border: 1px solid; border-radius: 4px; }
.dam-frame > .dam-zone { width: 100%; }
.dam-count { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; padding: 12px; border: 1px solid; border-radius: 12px; }
.dam-mark { display: flex; flex: 0 1 220px; min-width: 140px; align-items: center; justify-content: center; height: 60px; background-size: contain; background-position: center; background-repeat: no-repeat; }
.dam-count-words { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 2px; min-width: 170px; text-align: center; white-space: nowrap; }
.dam-count-line { display: block; }
.dam-drop-area { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 40px 20px; border: 3px dashed; border-radius: 8px; text-align: center; cursor: pointer; background-size: cover; background-position: center; background-repeat: no-repeat; }
.dam-logo { display: flex; align-items: center; justify-content: center; width: 180px; max-width: 100%; height: 42px; margin-bottom: 10px; background-size: contain; background-position: center; background-repeat: no-repeat; }
.dam-drop-area--over { border-style: solid; }
.dam-drop-area--busy { pointer-events: none; }
.dam-drag, .dam-accepts { margin-top: 12px; }
.dam-upload-status { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 12px; }
.dam-upload-status[hidden], .dam-cam-wrap[hidden], .dam-cam-view[hidden], .dam-file[hidden] { display: none; }
.dam-upload-progress { display: block; width: 100%; height: 4px; border-radius: 2px; overflow: hidden; }
.dam-upload-progress-bar { display: block; width: 0; height: 100%; border-radius: 2px; }
.dam-cam-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dam-cam-btn { display: block; flex: none; width: 72px; height: 72px; margin: 0; padding: 5px; border: 3px solid; border-radius: 50%; cursor: pointer; }
.dam-cam-dot { display: block; width: 100%; height: 100%; border-radius: 50%; }
.dam-cam-view { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dam-cam-video { display: block; width: 100%; max-height: 70vh; border: 1px solid; border-radius: 12px; }
.dam-cam-mirror { transform: scaleX(-1); }
.dam-cam-viewbar { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dam-zone-note { margin: 0 0 8px; text-align: left; }
.dam-panel > summary { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 12px 0; border-top: 1px solid; list-style: none; cursor: pointer; }
.dam-panel > summary::-webkit-details-marker { display: none; }
.dam-panel--last { border-bottom: 1px solid; }
.dam-frame > .dam-panel + .dam-panel { margin-top: -20px; }
.dam-caret { display: block; flex: none; width: 10px; height: 10px; }
.dam-caret--open, .dam-panel[open] > summary > .dam-caret--shut { display: none; }
.dam-panel[open] > summary > .dam-caret--open { display: block; }
.dam-panel-count { margin-left: auto; }
.dam-panel-body { margin: 0 0 12px; }
.dam-kinds { width: 100%; margin: 0 0 20px; border-collapse: collapse; }
.dam-kinds th, .dam-kinds td { width: 33.33%; padding: 12px 8px; text-align: center; overflow-wrap: anywhere; }
.dam-kinds th { border-bottom: 2px solid; }
.dam-kind-count, .dam-kind-size { display: block; }
.dam-filter { display: block; width: 100%; margin: 8px 0; padding: 10px; border: 1px solid; }
.dam-files { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.dam-file { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid; }
.dam-file-words { display: flex; flex: 1 1 0; flex-direction: column; gap: 2px; min-width: 0; }
.dam-file-name { overflow-wrap: anywhere; }
.dam-file-key { flex: none; white-space: nowrap; }
.dam-file-actions { display: flex; flex: 1 1 100%; align-items: center; gap: 14px; }
/* END BLOCK dam */

/* THE PLAIN CONTAINER (clarity: its look is technology.css's CLARITY block, the owner 2026-10-08 and 2026-10-16). Here only its room: the
   original panel's inner room; a form in it is wide enough to fill in and stands in the middle */
.clarity { margin-bottom: 40px; padding: 44px 52px 40px; }
.clarity--form { width: 560px; max-width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; }
@media (max-width: 768px) {
  .clarity { padding: 24px 16px; }
}
/* THE RECORD'S FORM in the container (ADD and EDIT, the owner 2026-10-10): its head centred as the record card's (the owner 2026-10-10), and each field's own word sits over its field */
.clarity.clarity--form .wc-head .wc-title { text-align: center; }   /* THE TOP CENTRED, as the record card's (the owner 2026-10-10: "the top part needs to be centered like the original"): the dot and the title; the key badge and the buttons stay left under them, as on the record card */
.clarity .wc-btnrow { flex-wrap: wrap; gap: 10px; }
.clarity .wc-field { margin-bottom: 12px; }
.clarity .wf-verdict { margin: 0 0 20px; }