/* 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 */
/* BLOCK buttons: 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--small.round[disabled]:hover { transform: translateY(0); }   /* a dimmed circle does not lift (the original's .dblk-play:disabled) */
.btn--big { display: flex; width: 300px; max-width: 100%; margin: 10px 0; padding: 18px 15px; }
.btn--small { padding: 4px 10px; }
.btn--small.round { width: 38px; height: 38px; padding: 0; border-radius: 50%; }   /* THE SMALL BUTTON, ROUND (the owner 2026-10-04: "the round buttons that got removed"): the original shell's circle (.dblk-circ); still the small button, shape only, the theme colours it */
/* END BLOCK 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; }
.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; }
  .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-bottom { position: fixed; left: 0; right: 0; bottom: 20px; padding: 0 16px; text-align: center; }
.login-commit { max-width: 900px; margin: 0 auto 56px; }
.login-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.signup-sheet { max-width: 560px; margin: 0 auto; padding: 72px 16px 24px; }
.signup-form { display: flex; flex-direction: column; }
.signup-error { margin-bottom: 12px; padding: 10px; }
.signup-bottom { position: static; margin: 24px 0 20px; }
@media (max-width: 768px) {
  .login-door { padding-top: 84px; }
  .login-logo { width: 150px; height: 64px; margin-bottom: 12px; }
  .login-commit { display: none; }
  .signup-sheet { padding-top: 68px; }
}

/* ── 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; }
@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; padding: 8px 12px 10px 12px; border: 1px solid; white-space: nowrap; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; }
.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__label { display: block; }
.key-badge__key { position: relative; display: inline-block; max-width: 100%; margin-top: 3px; }   /* THE KEY, holding its tiny copy button: never wider than the key itself */
.key-badge__value { display: block; min-width: calc(22ch + 12px); }   /* 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: -18px; 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-top { display: flex; justify-content: flex-end; align-items: flex-end; gap: 12px; margin-bottom: 29px; }
.mt-buy { white-space: nowrap; }   /* the buy line stays on one line */
.mt-ref { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.mt-hero { display: flex; gap: 24px; }
.mt-mark { flex: none; align-self: flex-start; width: 290px; height: 200px; background-size: cover; background-position: center; background-repeat: no-repeat; }   /* mTok's mark: its picture fills its box by its height (the canvas's clear sides fall outside), so the mark stands large */
.mt-body { flex: 1; min-width: 0; }
.mt-big { margin: 3px 0 22px; }
.mt-cycle { margin-bottom: 16px; }
.mt-cycle-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 6px; white-space: nowrap; }   /* the cycle: one line each (how much is used, when it resets, the days left) */
.mt-meter { display: block; width: 100%; height: 4px; }
.mt-terms { margin-top: 16px; }
.mt-own { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; padding-top: 16px; border-top: 1px solid; }
.mt-own > :last-child { flex: none; margin-left: 12px; white-space: nowrap; }   /* the count and its unit: one line, beside the label */
.mt-spend { margin-top: 10px; text-align: right; }   /* which wallet pays: the last line of its block, at the 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 */
  .mt-top { flex-direction: column; align-items: flex-start; }
  .mt-ref { align-items: flex-start; text-align: left; }
  .mt-hero { flex-direction: column; gap: 12px; }
  .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). THE CONSENT
       QUESTION: one narrow column, its two choices in a row ── */
.mk-verdict { margin-top: 8px; }
.mk-form { display: flex; margin: 0; }
.ask { max-width: 620px; margin: 34px auto 0; }
.ask-line { margin-top: 12px; }
.ask-choices { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 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): one framed block: its top row (GATE and its label, the name,
       the job's two buttons, the switch at the end); under a line its sections, each opened by its own line of words:
       the sequence row (round buttons, the place, ADD, REMOVE), a key badge beside its notes or controls, the
       manifest as tables in a box that scrolls inside itself, the wires (a caption, a type-in with its button, a
       state) ── */
.dblk-block { padding: 14px; border: 1px solid; }
.dblk-rowtop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dblk-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dblk-form { display: flex; margin: 0; }
.dblk-divider { margin: 12px 0; border-top: 1px solid; }
.mfb-sec { margin: 8px 0; }
.mfb-pt { cursor: pointer; }
.dblk-seqrow, .dblk-ctlrow, .dblk-playrow, .ac-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dblk-keyrow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.dblk-keynotes { flex: 1 1 200px; min-width: 0; }   /* beside its key badge, or under it when the shell is too narrow for both (a phone: its buttons never past the shell's edge) */
.dblk-pick, .ac-q { padding: 6px 10px; border: 1px solid; }
.ac-q { flex: 1; min-width: 0; }
.dblk-agentmf { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; margin-top: 12px; }
.dblk-agentmf-tbl { flex: 1; min-width: 0; overflow-x: auto; }
.dblk-playcol { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dblk-verdict { margin-top: 10px; padding: 8px 10px; border: 1px solid; }
.dblk-hd { margin-bottom: 8px; }
.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-notes { overflow-wrap: anywhere; }
.dblk-wires { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.ac-wire { min-width: 0; }
.ac-cap, .ac-wire-state { margin: 4px 0; }
@media (max-width: 768px) {
  .dblk-wires { grid-template-columns: minmax(0, 1fr); }
}

/* ── 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 */