/* GENERATED by tools/css/bundle.py from m3x-app.src.css -- do not edit.
   Edit the module under m3x-app/ and re-run the script. */

/* ---- m3x/app-fonts.css ---- */
/* In-app type is Poppins (self-hosted, see fonts.css). The landing page never loads this file,
   so it keeps Bricolage Grotesque + Figtree. Everything in the app reads --body / --display /
   --md-font, so repointing the tokens here is the whole switch. */
:root {
  --body: Poppins, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: Poppins, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --md-font: var(--body);
  --md-font-display: var(--display);
}
html, body, button, input, select, textarea { font-family: var(--md-font); }
.brand-name { font-weight: 700; letter-spacing: -.03em; }

/* ---- m3x/app-shell.css ---- */
/* m3x app shell: page frame, top bar, bottom bar, menus, scroll and page-enter motion.
   Everything here overrides material3/03 + 04 and app/*, which is why it loads after them. */

/* ---------- global rules of the system ---------- */
/* No elevation anywhere. Layers are told apart by tone, border and shape. Focus rings are
   outlines (below), never shadows, so nothing a state needs is lost. */
*, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
html { scroll-padding-top: 88px; }
body {
  font-family: var(--body);
  background: var(--md-background);
  color: var(--md-on-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, .md-display-large, .md-display-medium, .md-display-small, .md-display-small-emphasized,
.md-headline-large, .md-headline-medium, .md-headline-small,
[class*="md-headline-"][class*="-emphasized"], [class*="md-display-"][class*="-emphasized"], .md-title-large {
  font-family: var(--display);
  letter-spacing: -.02em;
}
:is(input, textarea, select, [contenteditable]):focus-visible { outline: 2px solid var(--md-primary); outline-offset: 1px; }
:is(input, textarea, select):is([class*="md-"], [class*="neb-"]):focus-visible { outline: none; }
.md-search-bar:focus-within { outline: none; border-color: var(--md-primary); }

/* ---------- scrollbars: thin, tonal ---------- */
@media (hover: hover) and (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: var(--md-outline-variant) transparent; }
}

/* ---------- page enter: the main column springs in once per navigation ---------- */
@media (prefers-reduced-motion: no-preference) {
  .site-main { animation: m3-enter .7s var(--spring-soft) backwards; }
}

/* ---------- top bar: a floating pill, the same bar as the landing page ----------
   One row at every width, by construction: three named areas on a single fixed-height track, so a
   child that is added, hidden or resized can never push the nav onto a second line. The nav gives way
   by container width (not viewport width), so zoom, split screens and large system fonts collapse it
   the same way a narrow phone does. */
.md-topbar {
  --tb-h: 58px;
  position: sticky; top: 8px; z-index: 100; container-type: inline-size; container-name: topbar;
  display: grid; align-items: center; column-gap: 8px;
  grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: var(--tb-h); grid-template-areas: "brand nav actions";
  grid-auto-rows: 0; overflow: visible;
  width: min(1280px, calc(100% - 24px)); height: var(--tb-h); min-height: var(--tb-h); max-height: var(--tb-h);
  margin: 8px auto 10px; padding: 0 8px; box-sizing: border-box;
  border: 1px solid var(--md-outline-variant); border-radius: calc(var(--tb-h) / 2);
  background: color-mix(in srgb, var(--md-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  transition: background-color .3s, border-color .3s;
  view-transition-name: m3-topbar;
}
.md-topbar > * { min-width: 0; }
.md-topbar > .brand, .md-topbar > .md-topbar-brand { grid-area: brand; justify-self: start; flex: none; white-space: nowrap; }
.md-topbar > .md-topbar-nav { grid-area: nav; }
.md-topbar > .md-topbar-actions { grid-area: actions; }
.md-topbar .brand-tile { width: 42px; height: 42px; }
.md-topbar .brand-mark { width: 16px; height: 23px; }
.md-topbar .brand-name { font-size: 22px; }
.md-topbar-nav { --h: 42px; position: relative; left: auto; transform: none; justify-self: center; flex-wrap: nowrap; white-space: nowrap; max-width: 100%; }
.md-topbar-nav > a { padding: 0 18px; font-size: 15px; }
.md-topbar-nav > a.md-nav-active { background: transparent; color: var(--on-var); }
.md-topbar-nav > a.md-nav-active.is-target { color: var(--on-pri-c); }
.md-topbar-actions { justify-self: end; margin-left: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; }
.md-topbar-actions .md-btn { min-height: 42px; white-space: nowrap; }
@container topbar (min-width: 1060px) {
  .md-topbar-nav { justify-self: center; }
}
@container topbar (max-width: 880px) {
  .md-topbar-nav > a { padding: 0 12px; font-size: 14px; }
  .md-topbar .brand-name { font-size: 20px; }
}
@container topbar (max-width: 690px) {
  .md-topbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand actions"; }
  .md-topbar-nav { display: none; }
}
@media (max-width: 768px) {
  .md-topbar { --tb-h: 54px; width: calc(100% - 16px); top: 6px; margin: 6px auto 8px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand actions"; }
  .md-topbar-nav { display: none; }
  .md-topbar .brand-name { font-size: 20px; }
}
::view-transition-group(m3-topbar) { animation-duration: 0s; }

/* profile menu and any dropdown: tonal sheet, large corners, spring-in */
.profile-dropdown-menu, .md-dropdown-menu, .more-menu, .md-menu {
  border: 1px solid var(--md-outline-variant); border-radius: var(--md-shape-lg);
  background: var(--md-elevated-surface); overflow: hidden;
}
.profile-dropdown-menu a, .md-menu a, .more-menu-item { border-radius: var(--md-shape-sm); }

/* ---------- bottom bar (phones): one pill, the current destination grows into a tonal capsule ---------- */
.md-bottomnav {
  height: 62px; padding: 0 7px; bottom: 12px;
  background: color-mix(in srgb, var(--md-surface-container-low) 92%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--md-outline-variant);
}
[data-theme="dark"] .md-bottomnav { background: color-mix(in srgb, var(--md-surface-container-high) 92%, transparent); }
.md-bottomnav-item {
  padding: 12px 16px; border-radius: 22px;
  transition: background-color .25s, color .25s, padding .5s var(--spring), border-radius .6s var(--spring), transform .4s var(--spring);
}
.md-bottomnav-item.md-nav-active { padding: 12px 20px; border-radius: 26px; background: var(--md-primary-container); color: var(--md-on-primary-container); }
.md-bottomnav-item:active { transform: scale(.9); }
.md-bottomnav-label { font-family: var(--body); font-weight: 800; }

/* ---------- containers ---------- */
.md-container { padding-left: clamp(12px, 2vw, 16px); padding-right: clamp(12px, 2vw, 16px); }

/* ---- m3x/app-components.css ---- */
/* m3x app components: cards, chips, fields, tabs, dialogs, switches, loaders, empty states.
   One spec for every md-* class, so a page never has to restyle a card to look right. */

/* ---------- cards: large corners, tonal fill, border, no shadow ---------- */
.md-card, .md-card-outlined, .md-card-elevated, .md-card-filled {
  border-radius: var(--md-shape-lg);
  transition: border-radius .6s var(--spring), transform .6s var(--spring), border-color .2s, background-color .2s;
}
.md-card, .md-card-outlined, .md-card-elevated { background: var(--md-surface-container-lowest); }
.md-card-filled { background: var(--md-surface-container-high); border-color: transparent; }
@media (hover: hover) {
  a.md-card:hover, .md-card[href]:hover, .md-card-elevated:hover { border-radius: var(--md-shape-xl); border-color: var(--md-outline); }
}
a.md-card:active, .md-card[href]:active { transform: scale(.985); }

/* ---------- chips ---------- */
.md-chip {
  min-height: 36px; padding: 6px 16px; border-radius: 14px; border-color: var(--md-outline-variant);
  font-family: var(--body); font-weight: 700;
  transition: border-radius .6s var(--spring), transform .5s var(--spring), background-color .2s, color .2s, border-color .2s;
}
@media (hover: hover) { .md-chip:hover { } }
.md-chip:active { transform: scale(.94); }
.md-chip-active { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.md-chip-active:hover { background: var(--md-primary-container); }

/* ---------- fields: white fill, big corners, one stroke that turns primary on focus (see app-fields.css) ---------- */
.md-input, .md-select, .md-textarea, .md-text-field {
  border-radius: var(--md-shape-md); font-family: var(--body);
  background: var(--md-surface-container-lowest); border: 1px solid var(--md-outline-variant);
  transition: border-radius .5s var(--spring), border-color .2s, background-color .2s;
}
.md-input:hover, .md-select:hover, .md-textarea:hover, .md-text-field:hover { border-color: var(--md-outline); }
.md-input:focus, .md-select:focus, .md-textarea:focus, .md-text-field:focus { border-color: var(--md-primary); outline: none; }
.md-label { font-family: var(--body); font-weight: 700; }

/* ---------- headings used as page titles get the display voice and a tighter measure ---------- */
.md-headline-large-emphasized, .md-headline-medium-emphasized { text-wrap: balance; }

/* ---------- switches and loaders keep their shape, lose any ring made of shadow ---------- */
.md-loader { color: var(--md-primary); }

/* ---------- tables, dividers, code ---------- */
.md-divider { background: var(--md-outline-variant); }
:where(code, kbd, pre) { border-radius: var(--md-shape-sm); }

/* ---------- list rows and menu items: shape-shift on hover ---------- */
.profile-dropdown-menu a, .more-menu-item, .md-menu a {
  transition: border-radius .5s var(--spring), background-color .2s;
}
@media (hover: hover) {
  .profile-dropdown-menu a:hover, .more-menu-item:hover, .md-menu a:hover { }
}

/* ---- m3x/app-controls.css ---- */
/* m3x app controls: switch, disabled buttons, select, footer, and the two page heroes that used to
   hard-code their own colours (credits, tools). Everything is a role colour, so a fill and its label
   can not collapse into one another in either theme. `:root` in front of a selector lifts it over the
   page stylesheets, which load after this file. */

/* ---------- switch: 52x32 track, thumb grows 16 -> 24 when on and 28 while pressed, a check appears ---------- */
.md-switch { display: inline-block; flex: none; }
.md-switch .slider {
  background: var(--md-surface-container-highest); border: 2px solid var(--md-outline); border-radius: 16px;
  transition: background-color .25s, border-color .25s;
}
.md-switch .slider::before {
  width: 16px; height: 16px; left: 6px; background: var(--md-outline);
  transition: transform .45s var(--spring), width .35s var(--spring), height .35s var(--spring), left .35s var(--spring), background-color .2s;
  transform: translateY(-50%);
}
.md-switch .slider::after {
  content: ""; position: absolute; top: 50%; left: 24px; width: 16px; height: 16px; margin-top: -8px;
  background: var(--md-primary); opacity: 0; transform: scale(.3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity .2s, transform .45s var(--spring);
}
.md-switch input:checked + .slider { background: var(--md-primary); border-color: var(--md-primary); }
.md-switch input:checked + .slider::before { width: 24px; height: 24px; left: 20px; transform: translateY(-50%); background: var(--md-on-primary); }
.md-switch input:checked + .slider::after { opacity: 1; transform: scale(1); }
.md-switch:active input:not(:disabled) + .slider::before { width: 28px; height: 28px; left: 0; }
.md-switch:active input:checked:not(:disabled) + .slider::before { left: 16px; }
.md-switch input:focus-visible + .slider { outline: 2px solid var(--md-primary); outline-offset: 3px; }
.md-switch input:disabled + .slider { opacity: .38; cursor: not-allowed; }

/* ---------- buttons: a disabled button is still a button, readable, with no alpha-on-alpha ---------- */
:root :is(.md-btn, button.md-btn):is(:disabled, [disabled], [aria-disabled="true"]) {
  background: color-mix(in srgb, var(--md-on-surface) 10%, var(--md-surface));
  color: color-mix(in srgb, var(--md-on-surface) 62%, var(--md-surface));
  border-color: transparent; cursor: not-allowed; transform: none;
}

/* ---------- select: one chevron, same field as md-input ---------- */
select.md-select, select.md-input {
  -webkit-appearance: none; appearance: none; padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23707a96'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 22px;
}
select option { background: var(--md-surface-container-high); color: var(--md-on-surface); }

/* ---------- footer: one tonal capsule, brand on the left, every destination a pill ---------- */
.site-footer { background: none; border: 0; padding: 28px clamp(12px, 2vw, 16px) 20px; margin-top: 24px; font-size: .8125rem; }
.site-footer-inner {
  max-width: 1280px; margin: 0 auto; padding: 14px 14px 14px 20px; text-align: left;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 28px;
  background: var(--md-surface-container-low); border: 1px solid var(--md-outline-variant); border-radius: var(--md-shape-xxl);
}
.site-footer-links { display: flex; flex-wrap: wrap; gap: 4px; }
.site-footer-links a {
  padding: 9px 15px; border-radius: 14px; font-weight: 600; color: var(--md-on-surface-variant);
  transition: border-radius .5s var(--spring), background-color .2s, color .2s, transform .4s var(--spring);
}
@media (hover: hover) { .site-footer-links a:hover { background: var(--md-secondary-container); color: var(--md-on-secondary-container); } }
.site-footer-links a:active { transform: scale(.94); }
.site-footer-bottom { max-width: 1280px; margin: 12px auto 0; padding: 0; text-align: center; border: 0; }
.site-footer-bottom p { margin: 0; font-size: .75rem; color: var(--md-on-surface-tertiary); }
@media (max-width: 768px) {
  .site-footer { padding-bottom: 96px; }
  .site-footer-inner { padding: 16px; border-radius: var(--md-shape-xl); }
}

/* ---------- credits hero: brand ink, white type, balance in a tonal tile ---------- */
:root .credits-hero { background: var(--ink); color: #fff; border-radius: var(--md-shape-xxl); }
:root .credits-badge { background: color-mix(in srgb, #fff 14%, transparent); color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
:root .credits-title { color: #fff; }
:root .credits-subtitle, :root .credits-balance-sub { color: #dbe5ff; }
:root .credits-balance-card { background: color-mix(in srgb, #fff 10%, transparent); border-color: color-mix(in srgb, #fff 20%, transparent); border-radius: var(--md-shape-xl); backdrop-filter: none; -webkit-backdrop-filter: none; }
:root .credits-balance-label { color: #cfdcff; }
:root .credits-balance-value { color: #fff; }
:root .credits-whatsapp-btn { background: #0b6b38; color: #fff; }

/* ---------- tools: tags stay in the logo's blue family; the label is always the opposite tone ---------- */
:root .tools-card-badge { color: var(--tool-on, var(--md-on-primary)); border-radius: 10px; }
:root .tools-card--green, :root .tools-card--purple { --tool-on: var(--md-surface); }

/* ---- m3x/app-overlays.css ---- */
/* m3x overlays: dialogs, menus, dropdowns, popups, sheets, snackbars, scrims.
   One recipe for every floating surface: container-high tone, 1px outline-variant edge, large
   corner, no shadow. Entry is a spring from the element that opened it; exit is quick and quiet.
   Overrides material3/09-overlays.css and app/*, so it loads after them. */

.neb-scrim, .neb-menu-scrim, .neb-fab-scrim {
  background: color-mix(in srgb, var(--md-inverse-surface) 38%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* ---------- dialogs ---------- */
.neb-dialog, .subject-pick-dialog, .social-link-dialog, .upload-progress-dialog {
  background: var(--x-float); color: var(--md-on-surface);
  border: 1px solid var(--x-float-line); border-radius: 28px;
}
.neb-dialog { transform: scale(.9) translateY(16px); transition: transform .55s var(--spring), opacity .2s; }
.neb-scrim[data-open] .neb-dialog { transform: none; }
.neb-scrim[data-closing] .neb-dialog { transform: scale(.96); transition-duration: .18s; }
.neb-dialog-title { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; }
.neb-dialog-support { color: var(--md-on-surface-variant); }
.neb-dialog-icon { border-radius: 16px; background: var(--md-primary-container); color: var(--md-on-primary-container); transition: border-radius .6s var(--spring); }
.neb-dialog:hover .neb-dialog-icon { }
.neb-dialog-icon-danger { background: var(--md-error-container); color: var(--md-on-error-container); }
.neb-dialog-actions { gap: 8px; }
.neb-dialog-actions .md-btn, .neb-dialog-actions button { min-height: 44px; }

/* ---------- sheets ---------- */
.neb-sheet, .neb-choice-sheet {
  background: var(--x-float); border: 1px solid var(--x-float-line); border-bottom: 0;
  border-radius: 28px 28px 0 0; transition: transform .55s var(--spring);
}
.neb-sheet-title { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.neb-sheet-head { gap: 10px; }
.neb-sheet-head .fp-thread-count { flex: none; }
.neb-sheet-close { border-radius: 50%; background: var(--md-surface-container); color: var(--md-on-surface); }

/* ---------- menus (neb-menu, more-menu, fab menu, identity menu, profile dropdown) ---------- */
.neb-menu, .more-menu, .neb-fab-menu, .fp-identity-menu, .profile-dropdown-menu {
  background: var(--x-float); color: var(--md-on-surface);
  border: 1px solid var(--x-float-line); border-radius: 24px; padding: 8px;
}
.neb-menu { transform: scale(.9) translateY(-6px); transition: transform .45s var(--spring), opacity .18s; }
.profile-dropdown-menu {
  border-radius: 28px; transform-origin: top right; transform: scale(.88) translateY(-10px);
  transition: transform .5s var(--spring), opacity .18s, visibility .18s;
}
.profile-dropdown-menu.show { transform: none; }
.neb-menu-item, .more-menu-item, .profile-dropdown-menu a, .neb-fab-menu > * {
  min-height: 46px; padding: 10px 14px; border-radius: 16px; font-weight: 500; color: var(--md-on-surface);
  transition: border-radius .45s var(--spring), background-color .15s, color .15s;
}
.neb-menu-item .material-symbols-outlined, .more-menu-item .material-symbols-outlined,
.profile-dropdown-menu a .material-symbols-outlined { color: var(--md-on-surface-variant); }
.neb-menu-item:hover, .neb-menu-item:focus-visible, .more-menu-item:hover, .profile-dropdown-menu a:hover {
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); border-radius: 22px;
}
.neb-menu-item:active, .more-menu-item:active, .profile-dropdown-menu a:active { background: color-mix(in srgb, var(--md-on-surface) 12%, transparent); }
.neb-menu-item[aria-checked="true"], .profile-dropdown-menu a[aria-current="page"] {
  background: var(--md-secondary-container); color: var(--md-on-secondary-container); font-weight: 600;
}
.neb-menu-item[aria-checked="true"] .material-symbols-outlined { color: var(--md-on-secondary-container); }
.neb-menu-item-danger, .profile-dropdown-menu .menu-logout, .more-menu-item.danger { color: var(--md-error); }
.neb-menu-item-danger .material-symbols-outlined, .profile-dropdown-menu .menu-logout .material-symbols-outlined { color: var(--md-error); }
.neb-menu-item-danger:hover, .profile-dropdown-menu .menu-logout:hover { background: var(--md-error-container); color: var(--md-on-error-container); }
.neb-menu-item-danger:hover .material-symbols-outlined, .profile-dropdown-menu .menu-logout:hover .material-symbols-outlined { color: var(--md-on-error-container); }
.neb-menu-label { color: var(--md-on-surface-variant); }
.profile-dropdown-menu .menu-divider, .neb-menu-sep { background: var(--md-outline-variant); margin: 6px 8px; }
.profile-dropdown-header-link { border-radius: 20px !important; }
.profile-dropdown-header-link:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent) !important; }
.profile-dropdown-role { color: var(--md-on-surface-variant); }
.notif-popup-badge { background: var(--md-error); color: var(--md-on-error); border-radius: 10px; min-width: 20px; text-align: center; font-weight: 700; }

/* ---------- user popup (hover card) ---------- */
.fp-user-popup { background: var(--x-float); border: 1px solid var(--x-float-line); border-radius: 28px; color: var(--md-on-surface); }
.fp-user-popup-bio, .fp-user-popup-meta, .fp-user-popup-username { color: var(--md-on-surface-variant); }

/* ---------- lightbox / media overlays keep their black scrim ---------- */
.nebians-lightbox-overlay { background: color-mix(in srgb, #000 88%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .neb-dialog, .neb-menu, .profile-dropdown-menu, .neb-sheet { transition-duration: .01s; animation-duration: .01s; }
}

/* ---------- sheets on a wide screen are centred dialogs: the same spring, from the middle ---------- */
.neb-sheet-handle::before { background: var(--md-outline-variant); }
@media (min-width: 768px) {
  .neb-scrim-bottom:not(.neb-scrim-side) { align-items: center; padding: 24px; }
  .neb-scrim-bottom:not(.neb-scrim-side) .neb-sheet {
    max-width: 560px; border-radius: 28px; border-bottom: 1px solid var(--x-float-line);
    transform: scale(.92) translateY(18px); opacity: 0; transition: transform .55s var(--spring), opacity .2s;
  }
  .neb-scrim-bottom:not(.neb-scrim-side)[data-open] .neb-sheet { transform: none; opacity: 1; }
  .neb-scrim-bottom:not(.neb-scrim-side)[data-closing] .neb-sheet { transform: scale(.97); opacity: 0; transition-duration: .16s; }
  .neb-scrim-bottom:not(.neb-scrim-side) .neb-sheet-handle { display: none; }
}
.neb-sheet-body { padding-bottom: 6px; }
.neb-sheet-foot { border-top: 1px solid var(--md-outline-variant); background: var(--x-float); }
.neb-scrim { z-index: 5000; }
.neb-sheet, .neb-dialog { overflow: hidden; }
@media (min-width: 768px) { .neb-scrim-bottom:not(.neb-scrim-side) .neb-sheet-head { padding-top: 22px; } }

/* ---------- post / comment overflow menu: compact, anchored, never taller than the room it has ---------- */
.more-menu { min-width: 188px; max-width: 264px; padding: 6px; border-radius: 20px; z-index: 5200; }
.more-menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 8px 12px;
  border: 0; background: transparent; font-family: inherit; font-weight: 500; font-size: 14px; line-height: 1.25; text-align: left; cursor: pointer;
}
.more-menu-item .material-symbols-outlined, .more-menu-item .neb-post-icon { font-size: 20px; width: 20px; height: 20px; flex: none; }
.more-menu-divider { height: 1px; margin: 4px 8px; background: var(--md-outline-variant); }

/* ---------- legacy .modal-box without header/body parts: still a padded, spaced card ---------- */
.modal-overlay { z-index: 2600; }
.modal-box:not(:has(> .modal-header, > .modal-body)) { padding: 24px; gap: 4px; overflow-y: auto; }
.modal-box:not(:has(> .modal-header, > .modal-body)) > h3 {
  margin: 0 0 8px; font-family: var(--display); font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25;
}
.modal-box .edit-form { display: flex; flex-direction: column; gap: 6px; }
.modal-box .edit-form > label { font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: var(--md-on-surface-variant); margin-top: 6px; }
.modal-box .edit-form :is(input[type=text], textarea) {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 16px;
  border: 1px solid var(--md-outline-variant); background: var(--md-surface-container-lowest, var(--md-surface));
  color: var(--md-on-surface); font: inherit; resize: vertical;
}
.modal-box .edit-form :is(input[type=text], textarea):focus { outline: 2px solid var(--md-primary); outline-offset: 0; border-color: transparent; }
.modal-box .form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ---- m3x/app-toast.css ---- */
/* m3x toasts (neb-toast.js). A tonal card, not the inverse bar: the surface is the same raised --x-float as menus and
   dialogs, and only the small icon bubble carries the tone. The stack grows upward from the bottom edge, each slot
   collapses its own height on exit so the toasts above settle with a spring instead of jumping. No shadows. */

#snackbar-container {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 6000; transform: translateX(-50%);
  width: min(440px, calc(100vw - 24px)); display: flex; flex-direction: column; pointer-events: none;
}
.neb-toast-slot { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s var(--spring), opacity .25s; }
.neb-toast-slot.is-leaving { grid-template-rows: 0fr; opacity: 0; }
.neb-toast-fit { min-height: 0; overflow: hidden; padding-top: 8px; }

.neb-toast {
  --tone-bg: var(--md-secondary-container); --tone-fg: var(--md-on-secondary-container);
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; min-height: 56px; box-sizing: border-box;
  padding: 8px 8px 8px 10px; border-radius: 28px; pointer-events: auto; touch-action: pan-y;
  background: var(--x-float); color: var(--md-on-surface); border: 1px solid var(--x-float-line);
  animation: neb-toast-in .6s var(--spring) both;
  transition: transform .4s var(--spring), opacity .25s, border-radius .4s var(--spring);
}
.neb-toast.is-dragging { transition: none; }
.neb-toast:hover { border-radius: 22px; }
.neb-toast[data-tone="success"] { --tone-bg: var(--fl-good, #d3f1de); --tone-fg: var(--fl-on-good, #0a3a1c); }
.neb-toast[data-tone="error"] { --tone-bg: var(--md-error-container); --tone-fg: var(--md-on-error-container); }
.neb-toast[data-tone="warn"] { --tone-bg: var(--fl-warn, #fde8bd); --tone-fg: var(--fl-on-warn, #432b00); }

.neb-toast-icon {
  flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--tone-bg); color: var(--tone-fg);
  animation: neb-toast-icon .7s .12s var(--spring) both;
}
.neb-toast-icon .material-symbols-outlined { font-size: 21px; font-variation-settings: 'FILL' 1; }
.neb-toast-msg { flex: 1; min-width: 0; padding: 4px 0; font-size: .875rem; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.neb-toast-action, .neb-toast-x {
  flex: none; border: 0; cursor: pointer; font: inherit; color: var(--md-primary); background: transparent;
  transition: background-color .15s, border-radius .4s var(--spring), transform .2s var(--spring);
}
.neb-toast-action { height: 36px; padding: 0 14px; border-radius: 18px; font-size: .8125rem; font-weight: 700; }
.neb-toast-x { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--md-on-surface-variant); }
.neb-toast-x .material-symbols-outlined { font-size: 19px; }
.neb-toast-action:hover, .neb-toast-x:hover { background: var(--md-surface-container-high); }
.neb-toast-action:active, .neb-toast-x:active { transform: scale(.92); }

.neb-toast-bar {
  position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--tone-fg); opacity: .35; transform-origin: left center;
  animation: neb-toast-bar var(--toast-ms, 3600ms) linear both;
}
.neb-toast.is-paused .neb-toast-bar { animation-play-state: paused; }
.neb-toast.is-bump { animation: neb-toast-bump .5s var(--spring); }

@keyframes neb-toast-in { from { opacity: 0; transform: translateY(28px) scale(.9); } }
@keyframes neb-toast-icon { from { opacity: 0; transform: scale(.3) rotate(-50deg); } }
@keyframes neb-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes neb-toast-bump { 0% { transform: scale(1); } 35% { transform: scale(1.04); } 100% { transform: scale(1); } }

@media (max-width: 768px) {
  #snackbar-container { bottom: calc(88px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .neb-toast, .neb-toast-icon, .neb-toast-slot, .neb-toast-bar { animation: none; transition: none; }
}

/* ---- m3x/app-composer.css ---- */
/* m3x composer: the post dialog, its poll builder, the emoji popover.
   Same recipe as every floating surface: --x-float fill, 1px edge, 28px corner, no shadow, spring entry.
   Fill and label are always a role pair, so nothing can match its own background. */

.hf-post-dialog {
  background: var(--x-float); color: var(--md-on-surface);
  border: 1px solid var(--x-float-line); border-radius: 28px; box-shadow: none;
  width: min(94vw, 720px); height: min(92dvh, 860px);
}
.hf-post-dialog::backdrop {
  background: color-mix(in srgb, var(--md-inverse-surface) 42%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hf-post-dialog[open] { animation: hf-pop .5s var(--spring) both; }
@keyframes hf-pop { from { opacity: 0; transform: scale(.92) translateY(18px); } to { opacity: 1; transform: none; } }

#homePostForm .hf-dialog-header { gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--md-outline-variant); }
#homePostForm .hf-dialog-header-left, #homePostForm .hf-dialog-header-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
#homePostForm .hf-dialog-header-left { flex: 1 1 auto; }
#homePostForm .hf-dialog-header-right { flex: 0 0 auto; }
#homePostForm .hf-dialog-close-btn, #homePostForm .hf-mode-btn, #homePostForm .hf-format-btn, #homePostForm .hf-c-tool-btn {
  border-radius: 50%; color: var(--md-on-surface-variant); background: transparent;
  transition: background-color .15s, border-radius .45s var(--spring), color .15s;
}
#homePostForm .hf-dialog-close-btn:hover, #homePostForm .hf-format-btn:hover, #homePostForm .hf-c-tool-btn:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); color: var(--md-on-surface); }
#homePostForm .hf-identity-trigger, #homePostForm .hf-cat-trigger {
  min-height: 36px; border-radius: 18px; border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container); color: var(--md-on-surface); max-width: 100%;
}
#homePostForm .hf-identity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#homePostForm .hf-identity-picker { min-width: 0; }
#homePostForm .hf-cat-trigger { color: var(--md-on-secondary-container); background: var(--md-secondary-container); border-color: transparent; }

#homePostForm .hf-btn-publish {
  width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%;
  background: var(--md-primary); color: var(--md-on-primary);
  transition: border-radius .5s var(--spring), background-color .2s, transform .3s var(--spring);
}
#homePostForm .hf-btn-publish:hover:not(:disabled) { }
#homePostForm .hf-btn-publish:active:not(:disabled) { transform: scale(.92); }
#homePostForm .hf-btn-publish:disabled, #homePostForm .hf-btn-publish.is-disabled {
  background: color-mix(in srgb, var(--md-on-surface) 12%, transparent); color: color-mix(in srgb, var(--md-on-surface) 40%, transparent);
}

#homePostForm .hf-dialog-title-input {
  font-family: var(--display, inherit); font-weight: 600; font-size: 1.375rem; letter-spacing: -.02em;
  color: var(--md-on-surface); background: transparent; caret-color: var(--md-primary);
}
#homePostForm .hf-dialog-title-input::placeholder, #homePostForm #homePostContent::placeholder { color: var(--md-on-surface-variant); opacity: .8; }
#homePostForm .hf-format-toolbar-row { gap: 8px; min-width: 0; }
#homePostForm .hf-format-toolbar { overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1 1 auto; }
#homePostForm .hf-format-toolbar::-webkit-scrollbar { display: none; }
#homePostForm .hf-format-sep { background: var(--md-outline-variant); }
#homePostForm .hf-mode-toggle { flex: none; display: flex; gap: 2px; padding: 3px; border-radius: 20px; background: var(--md-surface-container); }
#homePostForm .hf-mode-btn { border-radius: 16px; }
#homePostForm .hf-mode-btn.is-active { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }

#homePostForm .hf-dialog-footer { border-top: 1px solid var(--md-outline-variant); background: var(--x-float); gap: 4px; }
#homePostForm .hf-c-tool-btn.is-active, #homePostForm .hf-c-tool-btn[aria-expanded="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
#homePostForm .hf-dialog-hint-wrap, #homePostForm .hf-dialog-hint-text { display: none !important; }
#homePostForm .hf-dialog-tools-divider { background: var(--md-outline-variant); }

/* ---------- poll builder ---------- */
#homePostForm #homePostPollPanel {
  background: var(--md-surface-container); color: var(--md-on-surface);
  border: 0; border-radius: 24px; padding: 14px; gap: 12px;
}
#homePostForm #homePostPollPanel .hf-poll-title, #homePostForm #homePostPollPanel [class*="hf-poll-head"] { color: var(--md-on-surface); }
#homePostForm .hf-poll-remove-btn {
  min-height: 36px; padding: 0 14px; border: 0; border-radius: 18px;
  background: transparent; color: var(--md-on-surface-variant); font-weight: 600;
  transition: background-color .15s, color .15s, border-radius .45s var(--spring);
}
#homePostForm .hf-poll-remove-btn:hover { background: var(--md-error-container); color: var(--md-on-error-container); }

#homePostForm .hf-poll-type-row {
  display: flex; gap: 4px; padding: 4px; width: 100%; border-radius: 28px;
  background: var(--md-surface-container-highest);
}
#homePostForm .hf-poll-type-pill {
  flex: 1 1 0; justify-content: center; min-height: 40px; border: 0; border-radius: 24px;
  background: transparent; color: var(--md-on-surface-variant); font-weight: 600;
  transition: background-color .2s, color .2s, border-radius .5s var(--spring);
}
#homePostForm .hf-poll-type-pill:hover { color: var(--md-on-surface); }
#homePostForm .hf-poll-type-pill.is-active { background: var(--md-primary); color: var(--md-on-primary); }

#homePostForm .hf-poll-question-input, #homePostForm .hf-poll-opt-input, #homePostForm .hf-poll-explanation-input {
  min-height: 48px; padding: 0 16px; border: 1px solid var(--md-outline-variant); border-radius: 16px;
  background: var(--md-surface-container-lowest); color: var(--md-on-surface); font: inherit; width: 100%;
  transition: border-color .15s, border-radius .45s var(--spring);
}
#homePostForm .hf-poll-question-input { font-weight: 600; }
#homePostForm .hf-poll-question-input::placeholder, #homePostForm .hf-poll-opt-input::placeholder, #homePostForm .hf-poll-explanation-input::placeholder { color: var(--md-on-surface-variant); opacity: .85; }
#homePostForm .hf-poll-question-input:focus, #homePostForm .hf-poll-opt-input:focus, #homePostForm .hf-poll-explanation-input:focus {
  outline: 2px solid var(--md-primary); outline-offset: -1px; border-color: transparent; border-radius: 22px;
}
#homePostForm .hf-poll-options { display: flex; flex-direction: column; gap: 8px; }
#homePostForm .hf-poll-option-row { display: flex; align-items: center; gap: 8px; animation: hf-opt-in .4s var(--spring) both; }
@keyframes hf-opt-in { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }
#homePostForm .hf-poll-opt-num {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--md-primary-container); color: var(--md-on-primary-container); font-size: 12px; font-weight: 700;
}
#homePostForm .hf-poll-correct-btn, #homePostForm .hf-poll-remove-opt-btn {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; align-items: center; justify-content: center;
  background: var(--md-surface-container-highest); color: var(--md-on-surface-variant);
  transition: background-color .15s, color .15s, border-radius .45s var(--spring);
}
#homePostForm .hf-poll-correct-btn:hover, #homePostForm .hf-poll-remove-opt-btn:hover { color: var(--md-on-surface); }
#homePostForm .hf-poll-correct-btn.is-correct { background: var(--md-primary); color: var(--md-on-primary); }
#homePostForm .hf-poll-remove-opt-btn:hover { background: var(--md-error-container); color: var(--md-on-error-container); }

#homePostForm .hf-poll-footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
#homePostForm .hf-poll-add-opt-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border: 0; border-radius: 20px;
  background: var(--md-secondary-container); color: var(--md-on-secondary-container); font-weight: 600;
  transition: border-radius .5s var(--spring), background-color .15s;
}
#homePostForm .hf-poll-add-opt-btn:hover { }
#homePostForm .hf-poll-settings-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
#homePostForm .hf-poll-duration-label, #homePostForm .hf-poll-duration-select { display: none; }
#homePostForm .hf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#homePostForm .hf-chip {
  min-height: 36px; padding: 0 14px; border: 1px solid var(--md-outline-variant); border-radius: 18px;
  background: transparent; color: var(--md-on-surface-variant); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background-color .15s, color .15s, border-radius .45s var(--spring);
}
#homePostForm .hf-chip:hover { color: var(--md-on-surface); }
#homePostForm .hf-chip[aria-pressed="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-color: transparent; }
#homePostForm .hf-poll-mcq-note { color: var(--md-on-surface-variant); }

/* ---------- emoji popover ---------- */
#homePostForm .hf-emoji-popover {
  background: var(--x-float); color: var(--md-on-surface); border: 1px solid var(--x-float-line);
  border-radius: 24px; box-shadow: none; overflow: hidden;
  transform-origin: bottom left; animation: hf-pop .4s var(--spring) both;
}
#homePostForm .hf-emoji-search-wrap { background: var(--md-surface-container); border-radius: 20px; margin: 8px; border: 0; }
#homePostForm .hf-emoji-search-input { background: transparent; color: var(--md-on-surface); }
#homePostForm .hf-emoji-tabs { border: 0; padding: 0 8px; gap: 4px; }
#homePostForm .hf-emoji-tab { border-radius: 16px; transition: background-color .15s, border-radius .45s var(--spring); }
#homePostForm .hf-emoji-tab:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
#homePostForm .hf-emoji-tab.is-active { background: var(--md-secondary-container); }
#homePostForm .hf-emoji-item { border-radius: 12px; transition: background-color .12s, transform .3s var(--spring); }
#homePostForm .hf-emoji-item:hover { background: var(--md-surface-container-high); transform: scale(1.15); }

@media (max-width: 640px) {
  .hf-post-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; }
  .hf-post-dialog[open] { animation: hf-sheet .5s var(--spring) both; }
  #homePostForm .hf-cat-label { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #homePostForm .hf-emoji-popover { position: fixed; left: 12px; right: 12px; bottom: 76px; width: auto; max-width: none; }
}
@keyframes hf-sheet { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hf-post-dialog[open], .hf-emoji-popover, .hf-poll-option-row { animation-duration: .01s; } }

#homePostForm .hf-dialog-divider-bar { padding: 4px 20px 6px; }
#homePostForm .hf-chip { background: var(--md-surface-container-lowest); }
#homePostForm .hf-chip[aria-pressed="true"] { background: var(--md-primary); color: var(--md-on-primary); }
#homePostForm .hf-poll-add-opt-btn { background: var(--md-surface-container-lowest); color: var(--md-primary); }

/* ---------- category menu: pick a tag or write your own ---------- */
#homePostForm .hf-custom-cat-menu {
  min-width: 232px; max-width: min(86vw, 300px); max-height: min(60vh, 380px); overflow-y: auto; padding: 6px; gap: 2px;
  background: var(--x-float); border: 1px solid var(--x-float-line); border-radius: 22px; box-shadow: none;
  transform-origin: top right; animation: hfCatMenuIn .4s var(--spring) both;
}
#homePostForm .hf-cat-menu-header { padding: 8px 12px 4px; color: var(--md-on-surface-variant); }
#homePostForm .hf-cat-menu-item {
  height: 42px; padding: 0 12px; border-radius: 16px; color: var(--md-on-surface);
  transition: background-color .15s, border-radius .4s var(--spring), transform .2s var(--spring);
}
#homePostForm .hf-cat-menu-item:hover { background: var(--md-surface-container-high); border-radius: 22px; }
#homePostForm .hf-cat-menu-item:active { transform: scale(.98); }
#homePostForm .hf-cat-menu-item.is-active { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
#homePostForm .hf-cat-menu-item.is-active .hf-cat-item-hash, #homePostForm .hf-cat-menu-item.is-active .hf-cat-item-check { color: inherit; }
#homePostForm .hf-cat-item-check { font-size: 18px; transform: scale(.4); transition: transform .4s var(--spring); }
#homePostForm .hf-cat-menu-item.is-active .hf-cat-item-check { transform: none; }
.hf-cat-own {
  display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; padding: 6px 0 0; border-top: 1px solid var(--md-outline-variant);
}
.hf-cat-own-field {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 20px; cursor: text;
  background: var(--md-surface-container-high); border: 1px solid transparent;
  transition: border-color .15s, background-color .15s, border-radius .4s var(--spring);
}
.hf-cat-own-field:focus-within { border-color: var(--md-primary); background: var(--md-surface-container-lowest); border-radius: 14px; }
.hf-cat-own-field input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--md-on-surface); font: inherit; font-size: .8125rem; font-weight: 500;
}
.hf-cat-own-field input::placeholder { color: var(--md-on-surface-variant); }
.hf-cat-own-add {
  flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--md-primary); color: var(--md-on-primary);
  transition: border-radius .4s var(--spring), transform .25s var(--spring), background-color .2s, color .2s, opacity .2s;
}
.hf-cat-own-add:hover:not(:disabled) { }
.hf-cat-own-add:active:not(:disabled) { transform: scale(.9); }
.hf-cat-own-add:disabled { background: var(--md-surface-container-high); color: var(--md-on-surface-variant); opacity: .7; cursor: default; }
.hf-cat-own-add .material-symbols-outlined { font-size: 20px; }
@media (prefers-reduced-motion: reduce) { #homePostForm .hf-custom-cat-menu, #homePostForm .hf-cat-menu-item, .hf-cat-own-add, .hf-cat-own-field { animation: none; transition: none; } }

/* ---------- writing surface: no ceiling ----------
   The field takes the height of its text (composer-editor.js) and the body is the one thing that scrolls, so a long
   post is one continuous page. Clicking the empty page under the text lands in the field. */
#homePostForm .hf-dialog-body {
  padding: 12px 24px 20px; gap: 14px; scrollbar-width: thin; scrollbar-color: var(--md-outline-variant) transparent;
}
#homePostForm .hf-dialog-textarea {
  flex: 1 0 auto; min-height: 200px; overflow: hidden; resize: none; padding: 4px 0;
  font-size: 1rem; line-height: 1.65; caret-color: var(--md-primary);
}
#homePostForm .hf-dialog-preview-box {
  flex: 1 0 auto; min-height: 200px; max-height: none; overflow: visible; padding: 4px 0;
  border: 0; border-radius: 0; background: transparent;
}
#homePostForm .hf-composer-media-list, #homePostForm .hf-composer-previews, #homePostForm .hf-composer-poll-panel,
#homePostForm .hf-composer-video-panel, #homePostForm .hf-composer-error { flex: none; }

/* ---------- photo strip + attachments: drag to reorder ---------- */
#homePostForm .hf-composer-previews { gap: 10px; padding: 2px 0; }
#homePostForm .hf-preview-item {
  width: 84px; height: 84px; border: 0; border-radius: 20px; background: var(--md-surface-container-high);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: transform .28s var(--spring), opacity .2s, outline-color .15s;
  outline: 2px solid transparent; outline-offset: 2px;
}
#homePostForm .hf-preview-item img { -webkit-user-drag: none; pointer-events: none; }
#homePostForm .hf-preview-item:focus-visible { outline-color: var(--md-primary); }
#homePostForm .hf-preview-item.is-dragging, #homePostForm .hf-media-item-card.is-dragging {
  position: relative; z-index: 6; cursor: grabbing; transition: none; opacity: .94;
}
#homePostForm .hf-preview-remove {
  top: 5px; right: 5px; width: 24px; height: 24px; font-size: 16px; line-height: 1;
  background: var(--md-inverse-surface); color: var(--md-inverse-on-surface);
}
#homePostForm .hf-preview-remove:hover { background: var(--md-error); color: var(--md-on-error); }
#homePostForm .hf-media-item-card {
  border: 0; border-radius: 20px; background: var(--md-surface-container); padding: 8px 10px 8px 8px;
  transition: transform .28s var(--spring), outline-color .15s; outline: 2px solid transparent; outline-offset: 2px;
}
#homePostForm .hf-media-item-card:focus-visible { outline-color: var(--md-primary); }
#homePostForm .hf-media-item-icon { width: 36px; height: 36px; border-radius: 12px; }
#homePostForm .hf-media-grip {
  flex: none; width: 28px; height: 36px; display: grid; place-items: center; border-radius: 12px;
  color: var(--md-on-surface-variant); cursor: grab; touch-action: none;
}
#homePostForm .hf-media-grip:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); color: var(--md-on-surface); }
#homePostForm .hf-media-item-remove { width: 32px; height: 32px; }

/* ---------- mentions ---------- */
.hf-mention-pop {
  position: fixed; z-index: 30; max-height: 280px; overflow-y: auto; padding: 6px;
  background: var(--x-float); color: var(--md-on-surface); border: 1px solid var(--x-float-line);
  border-radius: 22px; box-shadow: none; animation: hf-pop .3s var(--spring) both; scrollbar-width: thin;
}
.hf-mention-pop[hidden] { display: none; }
.hf-mention-row {
  width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 10px; border: 0; border-radius: 16px;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background-color .15s, border-radius .4s var(--spring);
}
.hf-mention-row:hover { background: var(--md-surface-container-high); border-radius: 20px; }
.hf-mention-row.is-active { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-radius: 20px; }
.hf-mention-av {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden; border: 0; border-radius: 12px;
  background: var(--md-primary-container); color: var(--md-on-primary-container); font-weight: 700; font-size: .875rem;
}
.hf-mention-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hf-mention-av.is-all { background: var(--md-primary); color: var(--md-on-primary); }
.hf-mention-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.hf-mention-txt b { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-mention-txt span { font-size: .775rem; opacity: .78; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-mention { color: var(--md-primary); font-weight: 600; }
.hf-mention.is-all { font-weight: 700; }
@media (max-width: 640px) { #homePostForm .hf-dialog-body { padding: 10px 16px 16px; } }
@media (prefers-reduced-motion: reduce) { .hf-mention-pop { animation: none; } #homePostForm .hf-preview-item, #homePostForm .hf-media-item-card { transition: none; } }

/* ---- m3x/app-poll.css ---- */
/* m3x poll: the card on posts, feed rows and comments, and the comment poll builder.
   Tonal surfaces, finite radii (never square on hover), no shadow. Fill and label are role pairs. */

.pc {
  --pc-r: 24px;
  position: relative; display: flex; flex-direction: column; gap: 12px;
  margin: 14px 0; padding: 16px;
  background: var(--md-surface-container-low); color: var(--md-on-surface);
  border-radius: var(--pc-r); border: 1px solid var(--md-outline-variant);
  font-family: var(--md-font, inherit);
}
.pc--compact { padding: 12px; gap: 10px; margin: 10px 0; --pc-r: 20px; }
.pc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pc-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px;
  border-radius: 13px; font-size: 12px; font-weight: 600; letter-spacing: .01em;
  background: var(--md-secondary-container); color: var(--md-on-secondary-container);
}
.pc-chip .material-symbols-outlined { font-size: 15px; }
.pc-chip--live { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.pc-chip--end { background: var(--md-surface-container-highest); color: var(--md-on-surface-variant); }
.pc-q { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 600; color: var(--md-on-surface); overflow-wrap: anywhere; }
.pc--compact .pc-q { font-size: 15px; }

.pc-opts { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pc-opt {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px;
  padding: 10px 14px; border: 1px solid transparent; border-radius: 18px; overflow: hidden;
  background: var(--md-surface-container-high); color: var(--md-on-surface);
  font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer;
  transition: background-color .2s var(--ease-io, ease), border-color .2s var(--ease-io, ease), transform .18s var(--ease-io, ease);
}
.pc--compact .pc-opt { min-height: 44px; padding: 8px 12px; border-radius: 16px; }
.pc-opt:hover:not(:disabled) { background: var(--md-surface-container-highest); border-radius: 18px; }
.pc-opt:active:not(:disabled) { transform: scale(.985); }
.pc-opt:disabled { cursor: default; }
.pc-opt:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.pc-fill {
  position: absolute; inset: 0; width: 100%; transform-origin: left center; transform: scaleX(0);
  background: var(--md-secondary-container); border-radius: inherit; pointer-events: none;
  transition: transform .6s cubic-bezier(.2, .9, .25, 1);
}
.pc-opt.is-mine .pc-fill { background: var(--md-primary-container); }
.pc-opt.is-lead .pc-fill { background: var(--md-primary); opacity: .22; }
.pc-opt.is-lead.is-mine .pc-fill { background: var(--md-primary-container); opacity: 1; }
.pc-ind {
  position: relative; flex: none; display: grid; place-items: center; width: 22px; height: 22px;
  border: 2px solid var(--md-outline); border-radius: 11px; color: var(--md-on-primary);
  transition: background-color .2s, border-color .2s;
}
.pc[data-multi="1"] .pc-ind { border-radius: 7px; }
.pc-ind .material-symbols-outlined { font-size: 16px; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .25s var(--md-motion-spatial-fast, ease); }
.pc-opt.is-picked .pc-ind { background: var(--md-primary); border-color: var(--md-primary); }
.pc-opt.is-picked .pc-ind .material-symbols-outlined { opacity: 1; transform: scale(1); }
.pc-opt.is-picked:not(.is-mine) { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.pc-label { position: relative; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pc-added { display: block; margin-top: 1px; font-size: 11px; font-weight: 500; color: var(--md-on-surface-variant); }
.pc-pct { position: relative; flex: none; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--md-on-surface); }
.pc-votes { position: relative; flex: none; font-size: 12px; font-weight: 500; color: var(--md-on-surface-variant); font-variant-numeric: tabular-nums; }
.pc-mark { position: relative; flex: none; font-size: 20px; }
.pc-opt.is-mine .pc-ind { background: var(--md-primary); border-color: var(--md-primary); }
.pc-opt.is-mine .pc-ind .material-symbols-outlined { opacity: 1; transform: scale(1); }

.pc-opt.is-correct { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.pc-opt.is-correct .pc-fill { background: var(--md-tertiary); opacity: .28; }
.pc-opt.is-wrong { background: var(--md-error-container, #ffdad6); color: var(--md-on-error-container, #410002); }
.pc-opt.is-wrong .pc-fill { background: var(--md-error, #ba1a1a); opacity: .2; }
.pc-opt.is-correct .pc-ind, .pc-opt.is-wrong .pc-ind { display: none; }

.pc-explain {
  padding: 12px 14px; border-radius: 16px; font-size: 13px; line-height: 1.5;
  background: var(--md-tertiary-container); color: var(--md-on-tertiary-container);
}

.pc-add { display: flex; flex-direction: column; gap: 8px; }
.pc-add-open {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; height: 40px; padding: 0 16px 0 12px;
  border: 1px solid var(--md-outline); border-radius: 20px; background: transparent; color: var(--md-primary);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .2s;
}
.pc-add-open:hover { background: var(--md-secondary-container); border-radius: 20px; }
.pc-add-open .material-symbols-outlined { font-size: 20px; }
.pc-add-form { display: none; align-items: center; gap: 8px; }
.pc-add.is-open .pc-add-form { display: flex; }
.pc-add.is-open .pc-add-open { display: none; }
.pc-add-input {
  flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 1px solid var(--md-outline); border-radius: 22px;
  background: var(--md-surface); color: var(--md-on-surface); font: inherit; font-size: 14px;
}
.pc-add-input:focus { outline: 2px solid var(--md-primary); outline-offset: -1px; border-color: transparent; }
.pc-icon-btn {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 16px;
  background: var(--md-primary); color: var(--md-on-primary); cursor: pointer; transition: transform .18s, background-color .2s;
}
.pc-icon-btn:hover { border-radius: 16px; transform: scale(1.04); }
.pc-icon-btn:disabled { background: var(--md-surface-container-highest); color: var(--md-on-surface-variant); cursor: default; transform: none; }
.pc-icon-btn--ghost { background: transparent; color: var(--md-on-surface-variant); }
.pc-icon-btn--ghost:hover { background: var(--md-surface-container-highest); }

.pc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; color: var(--md-on-surface-variant); }
.pc-foot b { color: var(--md-on-surface); font-weight: 700; }
.pc-spacer { flex: 1; }
.pc-actions { display: flex; align-items: center; gap: 8px; }
.pc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 20px;
  border: 0; border-radius: 20px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--md-primary); color: var(--md-on-primary); transition: transform .18s, background-color .2s;
}
.pc-btn:hover:not(:disabled) { border-radius: 20px; transform: translateY(-1px); }
.pc-btn:disabled { background: var(--md-surface-container-highest); color: var(--md-on-surface-variant); cursor: default; }
.pc-btn--text { background: transparent; color: var(--md-primary); padding: 0 12px; height: 34px; }
.pc-btn--text:hover:not(:disabled) { background: var(--md-secondary-container); transform: none; }
.pc.is-busy { opacity: .7; pointer-events: none; }

/* feed row: a quieter version that never fights the title */
.post-card .pc { margin: 10px 0 4px; }

/* ---- comment poll builder ---- */
.pb {
  display: none; flex-direction: column; gap: 10px; margin: 10px 0 0; padding: 14px;
  background: var(--md-surface-container-low); border: 1px solid var(--md-outline-variant); border-radius: 22px;
}
.pb.is-open { display: flex; }
.pb-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--md-on-surface); }
.pb-head .material-symbols-outlined { font-size: 20px; color: var(--md-primary); }
.pb-field {
  width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--md-outline); border-radius: 16px;
  background: var(--md-surface); color: var(--md-on-surface); font: inherit; font-size: 14px; box-sizing: border-box;
}
.pb-field:focus { outline: 2px solid var(--md-primary); outline-offset: -1px; border-color: transparent; }
.pb-opts { display: flex; flex-direction: column; gap: 8px; }
.pb-row { display: flex; align-items: center; gap: 6px; }
.pb-row .pb-field { flex: 1; min-width: 0; }
.pb-opts-add {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px;
  border: 0; border-radius: 18px; background: var(--md-secondary-container); color: var(--md-on-secondary-container);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.pb-opts-add:hover { border-radius: 18px; }
.pb-opts-add .material-symbols-outlined { font-size: 18px; }
.pb-opts-add:disabled { opacity: .5; cursor: default; }
.pb-sw {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px;
  border-radius: 16px; background: var(--md-surface-container); cursor: pointer; font-size: 13px; font-weight: 500;
  color: var(--md-on-surface);
}
.pb-sw input { position: absolute; opacity: 0; pointer-events: none; }
.pb-track { position: relative; flex: none; width: 44px; height: 26px; border-radius: 13px; background: var(--md-surface-container-highest);
  border: 2px solid var(--md-outline); box-sizing: border-box; transition: background-color .2s, border-color .2s; }
.pb-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 7px;
  background: var(--md-outline); transition: transform .25s var(--md-motion-spatial-fast, ease), background-color .2s, width .2s, height .2s, top .2s; }
.pb-sw input:checked + .pb-track { background: var(--md-primary); border-color: var(--md-primary); }
.pb-sw input:checked + .pb-track::after { transform: translateX(18px); background: var(--md-on-primary); width: 16px; height: 16px; top: 2px; }
.pb-sw input:focus-visible + .pb-track { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.pb-foot { display: flex; align-items: center; gap: 8px; }
.pb-select { height: 40px; padding: 0 12px; border: 1px solid var(--md-outline); border-radius: 14px; background: var(--md-surface); color: var(--md-on-surface); font: inherit; font-size: 13px; }
.pb-remove { margin-left: auto; }

/* ---- insights sheet ---- */
.ins-scrim { position: fixed; inset: 0; z-index: 1200; background: rgba(0, 0, 0, .4); display: none; }
.ins-scrim.is-open { display: block; }
.ins-sheet {
  position: fixed; z-index: 1201; right: 0; top: 0; bottom: 0; width: min(560px, 100%);
  background: var(--x-float); color: var(--md-on-surface); display: none; flex-direction: column;
  border-radius: 28px 0 0 28px; border-left: 1px solid var(--md-outline-variant);
  transform: translateX(24px); opacity: 0; transition: transform .35s cubic-bezier(.2, .9, .25, 1), opacity .25s;
}
.ins-sheet.is-open { display: flex; transform: none; opacity: 1; }
@media (max-width: 700px) {
  .ins-sheet { top: auto; height: 92vh; width: 100%; border-radius: 28px 28px 0 0; border-left: 0; border-top: 1px solid var(--md-outline-variant); transform: translateY(24px); }
}
.ins-bar { display: flex; align-items: center; gap: 12px; padding: 16px 16px 8px 20px; }
.ins-title { flex: 1; min-width: 0; }
.ins-title h2 { margin: 0; font-size: 18px; font-weight: 700; }
.ins-title p { margin: 2px 0 0; font-size: 12px; color: var(--md-on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-range { display: flex; gap: 6px; padding: 4px 20px 12px; }
.ins-range button {
  height: 34px; padding: 0 14px; border: 1px solid var(--md-outline); border-radius: 17px; background: transparent;
  color: var(--md-on-surface); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ins-range button:hover { border-radius: 17px; background: var(--md-surface-container-high); }
.ins-range button.is-on { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-color: transparent; }
.ins-body { flex: 1; overflow-y: auto; padding: 4px 20px 32px; display: flex; flex-direction: column; gap: 14px; }
.ins-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ins-kpi { padding: 14px; border-radius: 20px; background: var(--md-surface-container); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ins-kpi span { font-size: 12px; color: var(--md-on-surface-variant); font-weight: 500; }
.ins-kpi strong { font-size: 26px; line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums; }
.ins-chg { font-size: 12px; font-weight: 700; color: var(--md-on-surface-variant); }
.ins-chg.up { color: var(--md-tertiary); }
.ins-chg.down { color: var(--md-error, #ba1a1a); }
.ins-card { padding: 16px; border-radius: 24px; background: var(--md-surface-container-low); border: 1px solid var(--md-outline-variant); display: flex; flex-direction: column; gap: 10px; }
.ins-card h3 { margin: 0; font-size: 14px; font-weight: 700; }
.ins-chart { width: 100%; height: 150px; display: block; }
.ins-legend { display: flex; gap: 14px; font-size: 12px; color: var(--md-on-surface-variant); }
.ins-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.ins-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; font-size: 13px; }
.ins-row b { font-variant-numeric: tabular-nums; }
.ins-meter { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--md-surface-container-highest); overflow: hidden; }
.ins-meter > i { display: block; height: 100%; border-radius: 4px; background: var(--md-primary); }
.ins-tip { display: flex; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.ins-tip .material-symbols-outlined { flex: none; font-size: 22px; }
.ins-tip strong { display: block; font-size: 14px; }
.ins-tip span.t { font-size: 12px; opacity: .85; }
.ins-empty { padding: 36px 8px; text-align: center; color: var(--md-on-surface-variant); font-size: 14px; }
.ins-hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; align-items: end; height: 64px; }
.ins-hours i { display: block; min-height: 3px; border-radius: 3px; background: var(--md-primary); opacity: .85; }
.ins-hours-l { display: flex; justify-content: space-between; font-size: 11px; color: var(--md-on-surface-variant); }

/* ---- m3x/app-fc.css ---- */
/* m3x writing tools (.fc). One composer, two states.
   Compact (default): the field is one line and the tools sit beside it as icons; nothing else is drawn.
   Open: a single scrolling row of formatting tools slides in above the field, preview and size controls
   appear below it. Every fill is paired with its own label colour, there are no shadows, and the only
   motion is a spring on size and shape. */

.neb-composer-body.fc-host { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bar bar" "field actions"; align-items: end; column-gap: 4px; row-gap: 0; }
.neb-composer-body.fc-host > .fc { grid-area: bar; }
.neb-composer-body.fc-host > .fc-field, .neb-composer-body.fc-host > .fc-preview { grid-area: field; min-width: 0; }
.neb-composer-body.fc-host > .neb-composer-actions { grid-area: actions; align-self: end; flex-wrap: nowrap; gap: 2px; }
.neb-composer-body.fc-host.is-open { grid-template-areas: "bar bar" "field field" "actions actions"; }
.neb-composer-body.fc-host.is-open > .neb-composer-actions { align-self: stretch; }

.fc { position: relative; display: grid; grid-template-rows: 1fr; transition: grid-template-rows .42s var(--spring); }
.fc-inner { min-height: 0; overflow: hidden; }
.fc-host.is-compact > .fc { grid-template-rows: 0fr; }
.fc-host.is-compact > .fc .fc-inner { visibility: hidden; transition: visibility 0s .42s; }

.fc-bar { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 0 0 4px; }
.fc-tools { display: flex; flex: 1 1 auto; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.fc-tools::-webkit-scrollbar { display: none; }
.fc-tools.can-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.fc-tools.can-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
.fc-tools.can-left.can-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 36px), transparent); }
.fc-tool {
  flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; padding: 0; cursor: pointer; border-radius: 50%; background: transparent; color: var(--md-on-surface-variant);
  transition: background-color .15s, color .15s, border-radius .4s var(--spring), transform .2s var(--spring);
}
.fc-tool .material-symbols-outlined { font-size: 19px; }
.fc-tool:hover:not(:disabled) { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.fc-tool:focus-visible { outline: 2px solid var(--md-primary); outline-offset: -2px; }
.fc-tool:active:not(:disabled) { transform: scale(.88); }
.fc-tool:disabled { opacity: .38; cursor: default; }
.fc-tool[aria-expanded="true"] { background: var(--md-primary-container); color: var(--md-on-primary-container); border-radius: 11px; }
.fc-sep { flex: none; width: 1px; height: 16px; margin: 0 3px; background: var(--md-outline-variant); }

/* icon buttons that live in the composer's action row */
.fc-iconbtn {
  flex: none; height: 36px; min-width: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  border: 0; border-radius: 50%; cursor: pointer; background: transparent; color: var(--md-on-surface-variant); font: inherit;
  transition: background-color .15s, color .15s, border-radius .4s var(--spring), transform .25s var(--spring);
}
.fc-iconbtn .material-symbols-outlined { font-size: 20px; transition: transform .4s var(--spring); }
.fc-iconbtn:hover { background: var(--md-surface-container-high); color: var(--md-primary); }
.fc-iconbtn:active { transform: scale(.9); }
.fc-fmt[aria-expanded="true"], .fc-modebtn[aria-pressed="true"] { background: var(--md-primary-container); color: var(--md-on-primary-container); border-radius: 12px; }
.fc-fmt[aria-expanded="true"] .material-symbols-outlined { transform: rotate(-8deg) scale(1.08); }
.neb-composer-actions .fc-iconbtn { order: 0; }
.neb-composer-actions .fc-fmt { order: 1; }
.fc-host .neb-composer-actions .fp-inline-tool { order: 2; margin: 0; }
.neb-composer-actions .fc-kindwrap { order: 3; }
.neb-composer-actions .fc-end { order: 4; margin-left: auto; }
.neb-composer-actions .reply-send-btn { order: 5; }
.fc-end { display: inline-flex; align-items: center; gap: 2px; }
.fc-host.is-compact .fc-end .fc-modebtn, .fc-host.is-compact .fc-end .fc-growbtn { display: none; }
.fc-host.is-compact .fc-end { margin-left: 0; }
.fc-host.is-open .fc-end .fc-modebtn, .fc-host.is-open .fc-end .fc-growbtn { animation: fc-icon-in .45s var(--spring) both; }
.fc-host.is-open .fc-end .fc-growbtn { animation-delay: .05s; }
@keyframes fc-icon-in { from { opacity: 0; transform: scale(.5); } }

/* kind: one icon until something other than a comment is chosen */
.fc-kindwrap { position: relative; display: inline-flex; }
.fc-kindbtn.is-set { padding: 0 12px 0 10px; border-radius: 18px; background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.fc-kindbtn .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
.fc-kindlabel { font-size: .8125rem; font-weight: 700; }
.fc-kindlabel:empty { display: none; }
.fc-kindmenu { min-width: 208px; display: flex; flex-direction: column; gap: 2px; }
.fc-kindmenu[hidden] { display: none; }
@keyframes fc-menu-in { from { opacity: 0; transform: scale(.88) translateY(6px); } }
.fc-kindopt { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; cursor: pointer; background: transparent; font: inherit; font-size: .875rem; font-weight: 600; text-align: left; }
.fc-kindopt > span:not(.material-symbols-outlined) { flex: 1; }
.fc-kindopt .material-symbols-outlined { font-size: 20px; color: var(--md-on-surface-variant); }
.fc-kindopt .material-symbols-outlined:last-child { font-size: 18px; color: var(--md-primary); opacity: 0; transform: scale(.4); transition: opacity .2s, transform .4s var(--spring); }
.fc-kindopt:hover { background: var(--md-surface-container-high); border-radius: 22px; }
.fc-kindopt[aria-checked="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.fc-kindopt[aria-checked="true"] .material-symbols-outlined:first-child { color: inherit; font-variation-settings: 'FILL' 1; }
.fc-kindopt[aria-checked="true"] .material-symbols-outlined:last-child { opacity: 1; transform: none; color: inherit; }

/* symbols */
.fc-pop { width: min(300px, calc(100vw - 16px)); padding: 8px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.fc-pop[hidden] { display: none; }
.fc-sym {
  height: 34px; border: 0; border-radius: 12px; cursor: pointer; background: transparent;
  color: var(--md-on-surface); font: inherit; font-size: 1rem;
  transition: background-color .15s, border-radius .35s var(--spring);
}
.fc-sym:hover { background: var(--md-primary-container); color: var(--md-on-primary-container); }

/* the field itself */
.fc-field { width: 100%; box-sizing: border-box; }
.fc-field[hidden], .fc-preview[hidden] { display: none !important; }
.fc-host.is-previewing > .neb-seamless { display: none !important; }
.fc-field:not([data-autoheight]) { min-height: var(--ah-min, 0); }
.neb-composer .fc-field { --ah-min: 36px; max-height: 460px; }
.fc-field[data-autoheight] { transition: height .28s cubic-bezier(.2, 0, 0, 1); }
.fc-host.is-open .fc-field { --ah-min: 84px; }
.fc-host.is-open.is-tall .fc-field { --ah-min: 240px; }
.fc-host.is-tall .fc-preview { min-height: 240px; }
.fc-preview { min-height: 36px; padding: 8px 2px; border-radius: 12px; color: var(--md-on-surface); overflow-wrap: anywhere; animation: fc-icon-in .35s var(--spring) both; }
.fc-host.is-open .fc-preview { min-height: 84px; }
.fc-preview .fp-reply-body { margin: 0; font-size: .9375rem; color: var(--md-on-surface); }
.fc-empty { margin: 0; padding: 4px 0; color: var(--md-on-surface-variant); font-size: .875rem; }
.fc-loading { display: flex; gap: 6px; padding: 12px 4px; }
.fc-loading i { width: 8px; height: 8px; border-radius: 50%; background: var(--md-primary); animation: fc-bob 1s var(--spring) infinite; }
.fc-loading i:nth-child(2) { animation-delay: .12s; }
.fc-loading i:nth-child(3) { animation-delay: .24s; }
@keyframes fc-bob { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-6px); opacity: 1; } }
.fc-count { padding: 0 8px; font-size: .75rem; font-weight: 600; color: var(--md-on-surface-variant); }
.fc-count.is-over { color: var(--md-error); }

/* dialogs hold the same tools with no compact state */
.fp-dialog-body > .fc .fc-inner { overflow: visible; }
.fp-dialog-body > .fc { grid-template-rows: 1fr; }
.fp-dialog-body > .fc .fc-bar { justify-content: space-between; }

@media (max-width: 480px) {
  .fc-host.is-compact .fc-kindbtn:not(.is-set) { display: none; }
  .fc-pop { grid-template-columns: repeat(6, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .fc, .fc-tool, .fc-iconbtn, .fc-iconbtn .material-symbols-outlined, .fc-kindmenu, .fc-kindopt, .fc-pop, .fc-sym,
  .fc-field[data-autoheight], .fc-preview, .fc-loading i, .fc-host.is-open .fc-end .fc-modebtn, .fc-host.is-open .fc-end .fc-growbtn { transition: none; animation: none; }
}

/* ---- m3x/app-select.css ---- */
/* NebSelect (js/neb-select.js): the field a <select> is drawn as, and its menu. */
select.neb-sel-native {
  position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important;
  opacity: 0; pointer-events: none; overflow: hidden; clip-path: inset(50%);
}
.neb-sel {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; padding: 0 10px 0 16px;
  background: var(--md-surface-container-lowest); color: var(--md-on-surface); border: 1.5px solid var(--md-outline-variant); border-radius: 16px;
  font: inherit; font-size: .9375rem; font-weight: 500; text-align: left; cursor: pointer; box-sizing: border-box;
  transition: border-color .15s, background-color .15s, border-radius .45s var(--spring);
}
.neb-sel.is-inline { display: inline-flex; width: auto; max-width: 100%; }
.neb-sel:hover { border-color: var(--md-outline); }
.neb-sel:focus-visible, .neb-sel.is-open { border-color: var(--md-primary); outline: none; border-radius: 22px; }
.neb-sel:disabled { opacity: .5; cursor: not-allowed; border-radius: 16px; }
.neb-sel[hidden] { display: none; }
.neb-sel-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.neb-sel.is-placeholder .neb-sel-value { color: var(--md-on-surface-variant); font-weight: 400; }
.neb-sel-chev { flex: none; color: var(--md-on-surface-variant); transition: transform .45s var(--spring), color .15s; }
.neb-sel.is-open .neb-sel-chev { transform: rotate(180deg); color: var(--md-primary); }

.neb-sel-menu { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overscroll-behavior: contain; max-width: min(92vw, 420px); }
.neb-sel-menu[hidden] { display: none; }
.neb-sel-item { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent; font: inherit; font-size: .9375rem; text-align: left; cursor: pointer; }
.neb-sel-item .neb-menu-item-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.neb-sel-item .neb-sel-check { flex: none; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .4s var(--spring); }
.neb-sel-item[aria-checked="true"] .neb-sel-check { opacity: 1; transform: none; }
.neb-sel-item[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.neb-sel-menu .neb-menu-label { padding: 8px 14px 4px; font-size: .75rem; font-weight: 700; letter-spacing: .02em; }

@media (prefers-reduced-motion: reduce) {
  .neb-sel, .neb-sel-chev, .neb-sel-item .neb-sel-check { transition: none; }
}

/* ---- m3x/app-edit.css ---- */
/* ForumEdit (js/forum-edit.js) and NebAttach (js/forum-attach.js): the in-place editor and the attachment tray.

   One white surface, one stroke. The editor is a single container on the lowest surface role (white in the light
   theme); the title, the tools and the text sit on it with no fill and no border of their own, divided by one
   hairline. Focus changes the container's stroke to the primary role and nothing else: there is no second ring on
   the field inside. Nothing here is tinted. */

/* ---------- the editor takes the card's place ---------- */
.fe {
  display: flex; flex-direction: column; margin: 6px 0 12px; padding: 0; box-sizing: border-box; min-width: 0;
  background: var(--md-surface-container-lowest); border: 1px solid var(--md-outline-variant); border-radius: 20px;
  transition: border-color .2s;
  animation: fe-in .4s var(--spring) both; transform-origin: top center;
}
.fe:focus-within { border-color: var(--md-primary); }
.fe.is-dropping { border-color: var(--md-primary); border-style: dashed; }
.fe.is-leaving { animation: fe-out .18s ease forwards; }
.fe.is-saving { pointer-events: none; }
.fe.is-saving .fe-body, .fe.is-saving .fe-title-wrap, .fe.is-saving .fe-tray { opacity: .6; transition: opacity .2s; }
.fe-hidden { display: none !important; }
.fe-return { animation: fe-in .4s var(--spring) both; }
@keyframes fe-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes fe-out { to { opacity: 0; transform: translateY(-4px); } }

.fe-title-wrap { position: relative; display: block; padding: 6px 16px 0; border-bottom: 1px solid var(--md-outline-variant); }
.fe .fe-title {
  display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 10px 40px 10px 0; border: 0; border-radius: 0; resize: none; overflow: hidden;
  background: transparent; color: var(--md-on-surface); font: inherit; font-size: 1.0625rem; font-weight: 700; line-height: 1.4;
  outline: 0; box-shadow: none;
}
.fe .fe-title::placeholder { color: var(--md-on-surface-variant); font-weight: 500; opacity: .8; }
.fe .fe-title:focus, .fe .fe-title:focus-visible { outline: 0; box-shadow: none; border: 0; background: transparent; }
.fe-count { position: absolute; right: 16px; top: 18px; font-size: .75rem; font-weight: 700; color: var(--md-error); pointer-events: none; }
.fe-count:empty { display: none; }

.fe-body { min-width: 0; padding: 4px 8px 0; }
.fe .fc-host .fc-field, .fe .fe-text {
  display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 10px 8px 12px; border: 0; border-radius: 0; resize: none; overflow-y: hidden;
  background: transparent; color: var(--md-on-surface); font: inherit; font-size: .9375rem; line-height: 1.6;
  outline: 0; box-shadow: none; max-height: none;
}
.fe .fc-host .fc-field:focus, .fe .fc-host .fc-field:focus-visible, .fe .fe-text:focus, .fe .fe-text:focus-visible { outline: 0; box-shadow: none; border: 0; background: transparent; }
.fe .neb-seamless, .fe .neb-seamless:focus, .fe .neb-seamless:focus-visible, .fe .neb-seamless.neb-focus {
  outline: 0 !important; box-shadow: none; border-width: 0 !important; border-color: transparent !important; border-radius: 0; background: transparent;
  padding: 10px 8px 12px; min-height: var(--ah-min, 96px); color: var(--md-on-surface); font-size: .9375rem; line-height: 1.6;
}
.fe .fc-host .fc-field.is-scrolling { overflow-y: auto; }
.fe .fc-host.is-open .fc-field { --ah-min: 96px; }
.fe-post .fc-host.is-open .fc-field { --ah-min: 160px; }
.fe .fc-preview { padding: 10px 8px 12px; border-radius: 0; background: transparent; min-height: 96px; }
.fe-post .fc-preview { min-height: 160px; }
.fe .fc-bar { padding: 2px 0 2px; }

.fe-tray { padding: 0 8px; }
.fe-tray:has(.na.is-empty) { display: none; }

.fe-bar { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 6px 12px 12px 8px; }
.fe-status { flex: 1; min-width: 0; font-size: .8125rem; font-weight: 600; color: var(--md-on-surface-variant); }
.fe-icon {
  position: relative; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; flex: none;
  border: 0; border-radius: 50%; cursor: pointer; background: transparent; color: var(--md-on-surface-variant);
  transition: background-color .15s, color .15s, border-radius .4s var(--spring), transform .25s var(--spring);
}
.fe-icon:hover { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.fe-icon:active { transform: scale(.9); }
.fe-icon:disabled { opacity: .4; cursor: not-allowed; background: transparent; border-radius: 50%; color: var(--md-on-surface-variant); }
.fe-badge {
  position: absolute; top: 3px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px;
  background: var(--md-primary); color: var(--md-on-primary); font-size: .6875rem; font-weight: 700; line-height: 16px; text-align: center;
  animation: fe-pop .35s var(--spring) both;
}
.fe-badge[hidden] { display: none; }
@keyframes fe-pop { from { transform: scale(.4); opacity: 0; } }
.fe-save .material-symbols-outlined { font-size: 18px; margin-right: 6px; }
.fe-save:disabled { opacity: .6; cursor: default; }
.fe.is-saving .fe-save .material-symbols-outlined { animation: fe-beat .8s ease-in-out infinite; }
@keyframes fe-beat { 50% { transform: scale(.6); opacity: .5; } }

/* ---------- the attachment tray ---------- */
.na { min-width: 0; }
.na.is-empty { display: none; }
.na-list { list-style: none; margin: 0; padding: 4px 0 8px; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--md-outline-variant); }
.na-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.na-row {
  position: relative; display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 4px 4px 4px 0; box-sizing: border-box; overflow: hidden;
  background: transparent; border-radius: 14px;
  transition: background-color .15s, opacity .2s, scale .2s;
  animation: na-in .35s var(--spring) both;
}
.na-row:hover { background: var(--md-surface-container-low); }
@keyframes na-in { from { opacity: 0; scale: .96; } }
.na-row.is-leaving { opacity: 0; scale: .96; }
.na-row.is-dragging { z-index: 3; background: var(--md-surface-container-low); }
.na-grip {
  flex: none; width: 28px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--md-on-surface-variant); cursor: grab; touch-action: none;
  transition: background-color .15s, color .15s;
}
.na-grip[hidden] { display: none; }
.na-grip:hover, .na-grip:focus-visible { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.na-row.is-dragging .na-grip { cursor: grabbing; color: var(--md-primary); }
.na-grip .material-symbols-outlined { font-size: 20px; }
.na-thumb {
  flex: none; width: 44px; height: 44px; border-radius: 12px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  background: var(--md-secondary-container); color: var(--md-on-secondary-container);
}
.na-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.na-audio { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.na-video { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.na-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.na-name { font-size: .875rem; font-weight: 600; color: var(--md-on-surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.na-meta { font-size: .75rem; color: var(--md-on-surface-variant); text-transform: capitalize; }
.na-btn {
  flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--md-on-surface-variant); cursor: pointer;
  transition: background-color .15s, color .15s, border-radius .4s var(--spring), transform .25s var(--spring);
}
.na-btn .material-symbols-outlined { font-size: 20px; }
.na-btn:hover { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.na-btn[data-na="remove"]:hover { background: var(--md-error-container); color: var(--md-on-error-container); }
.na-btn:active { transform: scale(.9); }
.na-btn:disabled { opacity: .35; cursor: not-allowed; background: transparent; border-radius: 50%; }
.na-track { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; opacity: 0; transition: opacity .2s; }
.na-track i { display: block; height: 100%; width: 0; background: var(--md-primary); border-radius: 0 3px 3px 0; transition: width .2s linear; }
.na-row.is-uploading .na-track { opacity: 1; }
.na-row.is-uploading .na-thumb { animation: fe-beat 1.2s ease-in-out infinite; }

@media (max-width: 480px) {
  .fe { border-radius: 18px; }
  .fe-title-wrap { padding: 4px 12px 0; }
  .fe-body { padding: 4px 4px 0; }
  .fe-bar { padding: 4px 8px 10px 4px; }
  .na-thumb { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .fe, .fe-return, .na-row, .fe-badge, .na-row.is-uploading .na-thumb, .fe.is-saving .fe-save .material-symbols-outlined { animation: none; transition: none; }
}

/* ---- shared pickers: date wheel + gender tiles (components/_dob_field, _gender_tiles) and
   the education / skills controls (js/neb-edu.js). One above the other, never side by side. ---- */
.epf-section .neb-pick-group { display: grid; gap: 8px; margin-bottom: 20px; }
.epf-section .neb-pick-group .md-label { margin: 0; }
.epf-section .neb-tiles { max-width: 480px; }
#epf-edu .ob-tiles-compact { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
#epf-edu .ob-label { margin: 18px 0 8px; }
#epf-edu > .ob-reveal:first-child .ob-label { margin-top: 0; }
#epf-edu, #epf-skills, #epf-opento { margin-bottom: 4px; }

/* ---- m3x/app-forum.css ---- */
/* m3x forum: the writing tools (.fc), reply kinds and reviewer labels (.fl), and the edit and
   delete dialogs on a thread. Every fill is paired with its own label colour, so nothing can match
   its own background in either theme. No shadows; shape and motion carry the state. */

:root {
  --fl-good: #d3f1de; --fl-on-good: #0a3a1c;
  --fl-warn: #fde8bd; --fl-on-warn: #432b00;
  --fl-bad: #ffdad6; --fl-on-bad: #5c0008;
  --fl-info: var(--md-primary-container); --fl-on-info: var(--md-on-primary-container);
  --fl-good-line: #7ccf9b;
}
[data-theme="dark"] {
  --fl-good: #14402a; --fl-on-good: #c3f2d5;
  --fl-warn: #4a3708; --fl-on-warn: #ffe2a6;
  --fl-bad: #6b1b1b; --fl-on-bad: #ffdad6;
  --fl-good-line: #3f9b69;
}


.fp-reply-body pre, .fc-preview pre {
  margin: 8px 0; padding: 12px 14px; overflow-x: auto; border-radius: 14px;
  background: var(--md-surface-container-high); color: var(--md-on-surface); font-size: .8125rem; line-height: 1.5;
}
.fp-reply-body code, .fc-preview code {
  padding: 1px 6px; border-radius: 6px; background: var(--md-surface-container-high); color: var(--md-on-surface); font-size: .85em;
}
.fp-reply-body pre code, .fc-preview pre code { padding: 0; background: transparent; }
.fp-reply-body blockquote, .fc-preview blockquote {
  margin: 8px 0; padding: 4px 0 4px 14px; border-left: 3px solid var(--md-primary); color: var(--md-on-surface-variant);
}
.fp-reply-body ol, .fp-reply-body ul, .fc-preview ol, .fc-preview ul { margin: 6px 0; padding-left: 22px; }
.fp-reply-body .katex-display { margin: 10px 0; overflow-x: auto; overflow-y: hidden; }

/* ---------- reply kinds and labels ---------- */
.fp-reply-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.fp-reply-tags[hidden] { display: none; }
.fl-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px 0 7px; border-radius: 12px;
  font-size: .75rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
  animation: fl-chip-in .5s var(--spring) both;
}
.fl-chip .material-symbols-outlined { font-size: 16px; font-variation-settings: 'FILL' 1; }
@keyframes fl-chip-in { from { opacity: 0; transform: scale(.8); } }
.fl-kind-chip { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.fl-tone-good { --fl-bg: var(--fl-good); --fl-fg: var(--fl-on-good); }
.fl-tone-warn { --fl-bg: var(--fl-warn); --fl-fg: var(--fl-on-warn); }
.fl-tone-bad { --fl-bg: var(--fl-bad); --fl-fg: var(--fl-on-bad); }
.fl-tone-info { --fl-bg: var(--fl-info); --fl-fg: var(--fl-on-info); }
.fl-label-chip { background: var(--fl-bg); color: var(--fl-fg); }

.fp-reply.is-accepted, .fp-thread-reply.is-accepted {
  background: color-mix(in srgb, var(--fl-good) 55%, transparent);
  box-shadow: none; border-left: 4px solid var(--fl-good-line);
}
.fp-reply.is-incorrect .fp-reply-body { opacity: .86; }
.fp-reply.is-spam:not(.is-revealed) .fp-reply-body,
.fp-reply.is-spam:not(.is-revealed) .fp-reply-actions { display: none; }
.fp-reply.is-spam:not(.is-revealed) { opacity: .72; }
.fl-reveal {
  display: none; align-self: flex-start; margin: 4px 0 0; padding: 0 12px; height: 30px; border: 0; border-radius: 15px; cursor: pointer;
  background: var(--md-surface-container-high); color: var(--md-on-surface); font: inherit; font-size: .75rem; font-weight: 700;
}
.fp-reply.is-spam:not(.is-revealed) .fl-reveal { display: inline-flex; align-items: center; }

.fl-open.is-set { color: var(--md-primary); }
.fp-reply-action.fl-open .material-symbols-outlined { font-size: 18px; }

.fl-solved-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 11px 0 8px; border-radius: 13px;
  background: var(--fl-good); color: var(--fl-on-good); font-size: .75rem; font-weight: 700;
}
.fl-solved-chip[hidden] { display: none; }
.fl-solved-chip .material-symbols-outlined { font-size: 17px; font-variation-settings: 'FILL' 1; }

/* ---------- label picker ---------- */
.fl-dialog { width: min(92vw, 420px); padding-bottom: 8px; }
.fl-options { display: flex; flex-direction: column; gap: 6px; padding: 10px 16px 8px; }
.fl-option {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px 10px 10px; text-align: left; cursor: pointer;
  border: 1px solid var(--md-outline-variant); border-radius: 20px; background: transparent; color: var(--md-on-surface); font: inherit;
  transition: background-color .15s, border-radius .45s var(--spring), border-color .15s, transform .25s var(--spring);
}
.fl-option:hover { background: var(--md-surface-container-high); border-radius: 26px; }
.fl-option:active { transform: scale(.98); }
.fl-option-icon {
  flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px; background: var(--fl-bg); color: var(--fl-fg);
}
.fl-option-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fl-option-text b { font-size: .9375rem; font-weight: 600; }
.fl-option-text small { font-size: .75rem; color: var(--md-on-surface-variant); }
.fl-option-check { flex: none; font-size: 22px; color: var(--md-primary); opacity: 0; transform: scale(.5); transition: opacity .2s, transform .4s var(--spring); }
.fl-option[aria-checked="true"] { border-color: var(--md-primary); background: color-mix(in srgb, var(--md-primary) 8%, transparent); }
.fl-option[aria-checked="true"] .fl-option-check { opacity: 1; transform: none; }
.fl-dialog.is-busy, .neb-scrim.is-busy .fl-options { pointer-events: none; opacity: .7; }
.fl-dialog .neb-dialog-actions { padding: 8px 16px 12px; }

/* ---------- edit and delete dialogs on a thread ---------- */
.fp-dialog { width: min(94vw, 560px); max-height: min(88dvh, 720px); display: flex; flex-direction: column; }
.fp-dialog .neb-dialog-head { padding-bottom: 8px; }
.fp-dialog-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 24px 8px; display: flex; flex-direction: column; gap: 10px; }
.fp-dialog-label { font-size: .75rem; font-weight: 700; letter-spacing: .02em; color: var(--md-on-surface-variant); }
.fp-dialog-input, .fp-dialog-body textarea {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 16px; font: inherit; resize: vertical;
  border: 1px solid var(--md-outline-variant); background: var(--md-surface-container-lowest); color: var(--md-on-surface);
}
:root .fp-dialog-input:focus, :root .fp-dialog-body textarea:focus { outline: 1px solid var(--md-primary); outline-offset: -2px; border-color: var(--md-primary); }
.fp-dialog-body textarea.fc-field { min-height: 140px; }
.fp-dialog .neb-dialog-actions { padding: 12px 20px 20px; }
.fp-dialog .fc-preview { min-height: 140px; padding: 10px 14px; border: 1px solid var(--md-outline-variant); border-radius: 16px; background: var(--md-surface-container-lowest); }

@media (max-width: 640px) {
  .fp-dialog-body { padding: 4px 18px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .fl-option, .fl-chip { transition: none; animation: none; }
}

.fp-post-flags { margin: 0 0 6px; }
.fp-post-flags:has(> [hidden]) { display: none; }

.fp-reply.is-fresh { animation: fp-fresh 2.4s var(--spring, ease) both; }
@keyframes fp-fresh { 0% { background: var(--md-primary-container); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .fp-reply.is-fresh { animation: none; background: var(--md-primary-container); } }

.fl-solved-chip { border: 0; font-family: inherit; cursor: pointer; transition: border-radius .4s var(--spring), transform .25s var(--spring); }
.fl-solved-chip:hover { }
.fl-solved-chip:active { transform: scale(.95); }
.fl-solved-chip .fl-solved-go { font-size: 15px; margin-left: -1px; opacity: .8; transition: transform .4s var(--spring); }
.fl-solved-chip:hover .fl-solved-go { transform: translateY(2px); }
.fl-dialog .neb-dialog-title, .fl-dialog h2 { margin-bottom: 4px; }

/* ---------- report dialog (js/report-dialog.js) ---------- */
.rp-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-reason {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 12px;
  border: 1px solid var(--md-outline-variant); border-radius: 20px; background: transparent;
  color: var(--md-on-surface); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
  transition: border-radius .5s var(--spring), background-color .15s, transform .3s var(--spring);
}
.rp-reason .material-symbols-outlined { font-size: 20px; }
.rp-reason:hover { background: var(--md-surface-container-high); border-radius: 24px; }
.rp-reason:active { transform: scale(.97); }
.rp-reason[aria-checked="true"] { background: var(--md-error-container); border-color: transparent; color: var(--md-on-error-container); }
.rp-dialog textarea { resize: none; min-height: 112px; }
.rp-error { margin: 0; color: var(--md-error); font-size: .875rem; font-weight: 600; }

/* ---- m3x/app-surfaces.css ---- */
/* m3x surfaces: the feed, rails, resource cards, side navigation, chips and badges, rebuilt on
   the one scheme. Containers are tonal steps of the brand blue (never white-on-white), corners
   are large and shift shape on hover/press, and every label has its own on-* partner so a fill
   and its text can never be the same colour. */

/* ---------- feed rows ---------- */
.post-card { position: relative; transition: background-color .2s, border-radius .6s var(--spring); }
@media (hover: hover) { .post-card:hover { background: color-mix(in srgb, var(--md-primary) 4%, var(--md-surface-container-lowest)); } }
.post-card-title { font-family: var(--display); font-weight: 600; letter-spacing: -.015em; color: var(--md-on-surface); }
.post-card-content, .post-card-content-link { color: var(--md-on-surface-variant); }
.post-card-time, .post-card-meta-sub { color: var(--md-on-surface-tertiary); }
.post-card-poll-badge { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); border-radius: 10px; padding: 2px 8px; font-weight: 600; }

/* ---------- resource cards ---------- */
.resource-card {
  border-radius: var(--md-shape-lg); background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant);
  transition: border-radius .6s var(--spring), transform .55s var(--spring), border-color .2s, background-color .2s;
}
@media (hover: hover) { .resource-card:hover { border-radius: var(--md-shape-xl); border-color: var(--md-outline); transform: translateY(-3px); } }
.resource-card:active { transform: scale(.98); }
.resource-card-title { font-family: var(--display); font-weight: 600; color: var(--md-on-surface); }
.resource-card-meta, .resource-card-time, .resource-card-views { color: var(--md-on-surface-variant); }
.resource-card-type-pill { background: var(--md-surface-container-lowest); color: var(--md-on-surface); border-radius: 12px; font-weight: 700; }
.resource-card-subject-chip { border-radius: 10px; font-weight: 700; }
.resource-card-paid-pill { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); border-radius: 10px; font-weight: 700; }

/* ---------- side navigation (home left rail) ---------- */
.hf-nav-group { background: var(--md-surface-container-low); border: 1px solid var(--md-outline-variant); border-radius: var(--md-shape-lg); padding: 8px; }
.hf-nav-title { color: var(--md-on-surface-variant); font-weight: 700; }
.hf-nav-link { color: var(--md-on-surface); border-radius: 18px; transition: border-radius .5s var(--spring), background-color .15s; }
.hf-nav-link .material-symbols-outlined { color: var(--md-on-surface-variant); }
@media (hover: hover) { .hf-nav-link:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); border-radius: 24px; } }
.hf-nav-link.active, .hf-nav-link[aria-current="page"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); font-weight: 600; }
.hf-nav-link.active .material-symbols-outlined, .hf-nav-link[aria-current="page"] .material-symbols-outlined { color: var(--md-on-secondary-container); }

/* ---------- right rail cards ---------- */
.hf-news-cat { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-radius: 10px; font-weight: 700; }
.hf-news-time { color: var(--md-on-surface-tertiary); }
.hf-peer { background: var(--md-surface-container-lowest); border: 1px solid var(--md-outline-variant); border-radius: var(--md-shape-lg); transition: border-radius .6s var(--spring); }
@media (hover: hover) { .hf-peer:hover { border-radius: var(--md-shape-xl); } }
.hf-peer-reason { color: var(--md-on-surface-variant); }

/* ---------- tonal "See all" and section heads ---------- */
.hf-section-more, .hf-see-all, a.see-all { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-radius: 999px; font-weight: 700; }

/* ---------- avatars and badges: the ring is a border, not a shadow ---------- */
.notif-dot { background: var(--md-error); border: 2px solid var(--md-surface); }
.role-badge { border-radius: 10px; }

/* ---------- footer ---------- */

/* ---------- selection, focus, tables ---------- */
::selection { background: var(--md-primary-container); color: var(--md-on-primary-container); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--md-primary) 70%, transparent); outline-offset: 2px; }
table th { background: var(--md-surface-container-high); color: var(--md-on-surface); }
table td { color: var(--md-on-surface); border-color: var(--md-outline-variant); }

/* ---- m3x/app-screens.css ---- */
/* m3x screens: the library, search, blog, blog reader and resource viewer, built on the shared tokens.
   Naming: x-* are layout/controls, rcard = resource card, bcard = blog card, vw-* = the viewer.
   Rules every block here obeys:
   - a fill and its label are always a role pair (primary / on-primary, container / on-container)
   - radii are finite, so a hover morph (28 -> 16) can never pass through a square corner
   - a selected thing is a tonal container with a check, never a thin stroke around a native box
   - no shadows; separation is tone + a 1px outline-variant edge */

/* ================= fields: one focus language ================= */
:root :is(input, textarea, select):focus { outline: 0; }
:root :is(input, textarea, select):focus-visible { outline: 0; }
.search-page-bar, .x-field {
  display: flex; align-items: center; gap: 6px; min-height: 64px; padding: 0 10px 0 22px;
  background: var(--md-surface-container-lowest); border: 2px solid var(--md-outline-variant);
  border-radius: 32px; color: var(--md-on-surface);
  transition: border-color .2s, background-color .2s, border-radius .5s var(--spring);
}
.search-page-bar:hover, .x-field:hover { border-color: var(--md-outline); }
.search-page-bar:focus-within, .x-field:focus-within { border-color: var(--md-primary); border-radius: 26px; }
.search-page-bar .search-icon { font-size: 26px; color: var(--md-on-surface-variant); transition: color .2s; flex: none; }
.search-page-bar:focus-within .search-icon { color: var(--md-primary); }
.search-page-bar input[type="text"], .search-page-bar input[name="q"] {
  flex: 1; min-width: 0; height: 56px; padding: 0 6px; margin: 0; border: 0; outline: 0; border-radius: 0;
  background: transparent; color: var(--md-on-surface); font: 500 1.0625rem/1.2 var(--md-font);
}
.search-page-bar input::placeholder { color: var(--md-on-surface-variant); opacity: .8; font-weight: 400; }
.search-page-bar .bar-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.search-page-bar .bar-actions > a, .search-page-bar .bar-actions > button {
  width: 48px; height: 48px; display: inline-grid; place-items: center; border: 0; border-radius: 24px;
  background: transparent; color: var(--md-on-surface-variant); cursor: pointer;
  transition: border-radius .45s var(--spring), background-color .2s, color .2s;
}
.search-page-bar .bar-actions > :hover { background: var(--md-surface-container-high); color: var(--md-on-surface); }
:root .search-page-bar .bar-actions .material-symbols-outlined { font-size: 24px; color: inherit; }
:root .search-page-bar .bar-actions > button.has-filters { background: var(--md-primary); color: var(--md-on-primary); }
:root .search-page-bar .bar-actions > button.has-filters:hover { background: var(--md-primary); color: var(--md-on-primary); }

/* ================= chips ================= */
:root :is(.md-chip, .search-filter-chip, .neb-choice-chip, .x-chip) {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 20px;
  background: var(--md-surface-container-lowest); color: var(--md-on-surface); border: 1px solid var(--md-outline-variant);
  font: 600 .875rem/1 var(--md-font); text-decoration: none; cursor: pointer;
  transition: border-radius .45s var(--spring), background-color .2s, color .2s, border-color .2s, transform .4s var(--spring);
}
:root :is(.md-chip, .search-filter-chip, .neb-choice-chip, .x-chip):hover { border-color: var(--md-primary); background: color-mix(in srgb, var(--md-primary) 8%, var(--md-surface-container-lowest));
}
:root :is(.md-chip, .neb-choice-chip, .x-chip):active { transform: scale(.95); }
:root :is(.md-chip-active, .neb-choice-chip.is-selected, .neb-choice-chip[aria-pressed="true"], .x-chip[aria-pressed="true"], .x-chip.is-on, .search-filter-chip) {
  background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-color: transparent;
}
:root :is(.md-chip-active, .neb-choice-chip.is-selected, .neb-choice-chip[aria-pressed="true"], .x-chip.is-on, .search-filter-chip):hover {
  background: color-mix(in srgb, var(--md-on-secondary-container) 8%, var(--md-secondary-container)); border-color: transparent;
}
:root :is(.neb-choice-chip.is-selected, .neb-choice-chip[aria-pressed="true"]) .neb-chip-tick { color: var(--md-on-secondary-container); }
.search-filter-chip .material-symbols-outlined { font-size: 18px; margin-right: -4px; }
.chip-group, .neb-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ================= buttons ================= */
.x-btn {
  --h: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h); padding: 0 24px;
  border: 0; border-radius: 24px; font: 600 .9375rem/1 var(--md-font); text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--md-primary); color: var(--md-on-primary);
  transition: border-radius .5s var(--spring), transform .4s var(--spring), background-color .2s, color .2s;
}
.x-btn .material-symbols-outlined { font-size: 20px; }
.x-btn:hover { }
.x-btn:active { transform: scale(.94); }
.x-btn-tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.x-btn-ghost { background: transparent; color: var(--md-primary); border: 1.5px solid var(--md-outline-variant); }
.x-btn-ghost:hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); }
.x-btn .x-dot { min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 11px; background: var(--md-primary); color: var(--md-on-primary); font-size: .75rem; }
.x-btn-tonal .x-dot { background: var(--md-on-secondary-container); color: var(--md-secondary-container); }
.x-icon-btn {
  width: 48px; height: 48px; display: inline-grid; place-items: center; border: 0; border-radius: 24px; cursor: pointer;
  background: var(--md-surface-container); color: var(--md-on-surface); text-decoration: none;
  transition: border-radius .45s var(--spring), transform .4s var(--spring), background-color .2s, color .2s;
}
.x-icon-btn:hover { background: var(--md-surface-container-high); }
.x-icon-btn:active { transform: scale(.92); }
.x-icon-btn.is-on { background: var(--md-primary); color: var(--md-on-primary); }

/* ================= scaffold ================= */
.x-page { width: 100%; max-width: 1280px; margin: 0 auto; padding: 28px 24px 96px; }
.x-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.x-title { margin: 0; font: 700 clamp(2rem, 4.4vw, 3.25rem)/1.05 var(--md-font); letter-spacing: -.03em; color: var(--md-on-surface); }
.x-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.x-seg { --h: 44px; padding: 4px; gap: 0; background: var(--md-surface-container); border-radius: 26px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.x-seg::-webkit-scrollbar { display: none; }
.x-seg > a { --h: 44px; padding: 0 20px; font-size: .9375rem; font-weight: 600; }
.x-seg .m3-ind { top: 4px; left: 4px; height: 44px; background: var(--md-surface-container-lowest); border-radius: 22px; border: 1px solid var(--md-outline-variant); box-sizing: border-box; }
.x-seg > a.is-target { color: var(--md-on-surface); }
.x-seg > a .material-symbols-outlined { font-size: 20px; margin-right: 8px; }
.x-seg > a { gap: 0; }
.x-sub { margin: 0 0 12px; font: 700 1.125rem/1.2 var(--md-font); color: var(--md-on-surface); }
.x-empty { display: grid; place-items: center; text-align: center; gap: 8px; padding: 72px 24px; border-radius: 32px; background: var(--md-surface-container-low); color: var(--md-on-surface); }
.x-empty .material-symbols-outlined { font-size: 44px; width: 88px; height: 88px; display: grid; place-items: center; border-radius: 44px; background: var(--md-primary-container); color: var(--md-on-primary-container); transition: border-radius .6s var(--spring); }
.x-empty:hover .material-symbols-outlined { border-radius: 28px; }
.x-empty h3 { margin: 8px 0 0; font: 700 1.25rem/1.2 var(--md-font); }
.x-empty p { margin: 0; color: var(--md-on-surface-variant); max-width: 40ch; }
.x-empty a { color: var(--md-primary); font-weight: 600; }
.x-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.x-clear { font: 600 .875rem/1 var(--md-font); color: var(--md-primary); text-decoration: none; padding: 10px 12px; border-radius: 16px; }
.x-clear:hover { background: color-mix(in srgb, var(--md-primary) 10%, transparent); }

/* ================= resource card ================= */
.x-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); gap: 16px; }
.rcard {
  --sc: var(--md-primary); display: flex; flex-direction: column; padding: 8px; border-radius: 28px; text-decoration: none; color: var(--md-on-surface);
  background: var(--md-surface-container-lowest); border: 1px solid var(--md-outline-variant);
  transition: border-radius .6s var(--spring), transform .5s var(--spring), border-color .2s;
}
.rcard:hover { border-radius: 36px; transform: translateY(-4px); border-color: color-mix(in srgb, var(--sc) 55%, var(--md-outline-variant)); }
.rcard:active { transform: scale(.98); }
.rcard-art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 20px; background: var(--md-surface-container); transition: border-radius .6s var(--spring); }
.rcard:hover .rcard-art { border-radius: 28px; }
.rcard-art .neb-art, .rcard-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rcard-badge {
  position: absolute; left: 10px; top: 10px; z-index: 2; height: 28px; padding: 0 12px; display: inline-flex; align-items: center; gap: 4px;
  border-radius: 14px; background: var(--md-surface-container-lowest); color: var(--md-on-surface); font: 700 .6875rem/1 var(--md-font); letter-spacing: .08em; text-transform: uppercase;
}
.rcard-badge.is-paid { left: auto; right: 10px; background: var(--md-tertiary); color: var(--md-on-tertiary); letter-spacing: 0; text-transform: none; }
.rcard-badge .material-symbols-outlined { font-size: 15px; }
.rcard-body { display: flex; flex-direction: column; gap: 10px; padding: 14px 10px 8px; flex: 1; }
.rcard-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.rcard-tag { height: 26px; padding: 0 11px; display: inline-flex; align-items: center; border-radius: 13px; font: 600 .75rem/1 var(--md-font); background: var(--md-surface-container); color: var(--md-on-surface-variant); }
.rcard-tag.is-subject { background: color-mix(in srgb, var(--sc) 16%, var(--md-surface-container-lowest)); color: color-mix(in srgb, var(--sc) 50%, var(--md-on-surface)); }
.rcard-title {
  margin: 0; font: 700 1.0625rem/1.3 var(--md-font); letter-spacing: -.01em; color: var(--md-on-surface);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rcard-title mark { background: color-mix(in srgb, var(--md-primary) 22%, transparent); color: inherit; border-radius: 4px; padding: 0 2px; }
.rcard-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 4px; color: var(--md-on-surface-variant); font-size: .8125rem; }
.rcard-avatar { width: 28px; height: 28px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: var(--md-primary-container); color: var(--md-on-primary-container); font: 700 .75rem/1 var(--md-font); }
.rcard-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rcard-by { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--md-on-surface); }
.rcard-by .material-symbols-outlined { font-size: 15px; vertical-align: -3px; margin-left: 2px; color: var(--md-primary); font-variation-settings: 'FILL' 1; }
.rcard-stat { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.rcard-stat .material-symbols-outlined { font-size: 16px; }
.x-more { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 24px; border-radius: 28px; background: var(--md-primary-container); color: var(--md-on-primary-container); }
.x-more strong { font: 700 1.0625rem/1.2 var(--md-font); display: block; }
.x-more .x-btn { background: var(--md-primary); color: var(--md-on-primary); }

/* ================= pagination ================= */
.lib-pagination { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 32px; }
.lib-pagination > * {
  min-width: 48px; height: 48px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 24px; text-decoration: none; font: 600 .9375rem/1 var(--md-font);
  background: var(--md-surface-container); color: var(--md-on-surface); transition: border-radius .45s var(--spring), background-color .2s;
}
.lib-pagination > a:hover { background: var(--md-surface-container-high); }
.lib-pagination .current { background: var(--md-primary); color: var(--md-on-primary); border-radius: 16px; }
.lib-pagination .disabled { opacity: .4; }

/* ================= search ================= */
.x-search { max-width: 1040px; margin: 0 auto; }
.x-search-hero { text-align: center; margin: 12px 0 28px; }
.x-search-hero .x-title { margin-bottom: 18px; }
.x-pop { margin-top: 36px; }
.x-pop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 12px; }
.x-pop-tile {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 24px; text-decoration: none; color: var(--md-on-surface);
  background: var(--md-surface-container-lowest); border: 1px solid var(--md-outline-variant); font: 600 .9375rem/1.2 var(--md-font);
  transition: border-radius .5s var(--spring), transform .4s var(--spring), background-color .2s, border-color .2s;
}
.x-pop-tile:hover { border-color: var(--md-primary); background: color-mix(in srgb, var(--md-primary) 7%, var(--md-surface-container-lowest)); }
.x-pop-tile:active { transform: scale(.96); }
.x-pop-tile .material-symbols-outlined { width: 40px; height: 40px; display: grid; place-items: center; font-size: 22px; border-radius: 20px; background: var(--md-primary-container); color: var(--md-on-primary-container); transition: border-radius .5s var(--spring); }
.x-pop-tile:hover .material-symbols-outlined { }
#search-results .section { margin-top: 8px; }
.x-search-wide { max-width: 1280px; }

/* ================= blog list ================= */
.bhero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0; margin-bottom: 20px; overflow: hidden;
  border-radius: 40px; background: var(--ink, #06235f); color: var(--on-ink, #e6eeff); text-decoration: none;
  transition: border-radius .7s var(--spring), transform .5s var(--spring);
}
.bhero:hover { border-radius: 48px; transform: translateY(-3px); }
.bhero-body { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: clamp(24px, 4vw, 44px); min-height: 320px; }
.bhero-kicker { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 15px; background: #a8c5ff; color: #001a52; font: 700 .75rem/1 var(--md-font); letter-spacing: .06em; text-transform: uppercase; }
.bhero-kicker .material-symbols-outlined { font-size: 16px; }
.bhero-title { margin: 0; font: 700 clamp(1.6rem, 3.2vw, 2.6rem)/1.12 var(--md-font); letter-spacing: -.025em; color: #fff; }
.bhero-sum { margin: 0; color: #c9d8ff; font-size: 1rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bhero-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: #c9d8ff; font-size: .875rem; }
.bhero-meta strong { color: #fff; }
.bhero-art { position: relative; min-height: 240px; }
.bhero-art .neb-art, .bhero-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.bcard {
  --cc: var(--md-primary); display: flex; flex-direction: column; padding: 8px; border-radius: 28px; text-decoration: none; color: var(--md-on-surface);
  background: var(--md-surface-container-lowest); border: 1px solid var(--md-outline-variant);
  transition: border-radius .6s var(--spring), transform .5s var(--spring), border-color .2s;
}
.bcard:hover { border-radius: 36px; transform: translateY(-4px); border-color: color-mix(in srgb, var(--cc) 55%, var(--md-outline-variant)); }
.bcard-art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 20px; background: var(--md-surface-container); transition: border-radius .6s var(--spring); }
.bcard:hover .bcard-art { border-radius: 28px; }
.bcard-art .neb-art, .bcard-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bcard-body { display: flex; flex-direction: column; gap: 10px; padding: 14px 10px 10px; flex: 1; }
.bcard-cat { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 13px; font: 600 .75rem/1 var(--md-font); background: color-mix(in srgb, var(--cc) 16%, var(--md-surface-container-lowest)); color: color-mix(in srgb, var(--cc) 50%, var(--md-on-surface)); }
.bcard-cat .material-symbols-outlined { font-size: 15px; }
.bcard-title { margin: 0; font: 700 1.1875rem/1.3 var(--md-font); letter-spacing: -.012em; color: var(--md-on-surface); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bcard-sum { margin: 0; color: var(--md-on-surface-variant); font-size: .9375rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bcard-meta { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; font-size: .8125rem; color: var(--md-on-surface-variant); flex-wrap: wrap; }
.bcard-meta b { color: var(--md-on-surface); font-weight: 600; }
.bcard-meta .material-symbols-outlined { font-size: 16px; vertical-align: -3px; }
.bcard-meta i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.x-cats { margin-bottom: 24px; display: flex; }

@media (max-width: 820px) {
  .bhero { grid-template-columns: 1fr; border-radius: 32px; }
  .bhero-art { order: -1; min-height: 200px; }
  .bhero-body { min-height: 0; }
}
@media (max-width: 640px) {
  .x-page { padding: 16px 14px 120px; }
  .x-grid, .bgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rcard, .bcard { border-radius: 24px; padding: 6px; }
  .rcard-art, .bcard-art { border-radius: 18px; }
  .rcard-body, .bcard-body { padding: 10px 6px 6px; }
  .rcard-title { font-size: .9375rem; }
  .bcard-title { font-size: 1rem; }
  .bcard-sum { display: none; }
  .rcard-foot .rcard-stat { display: none; }
  .search-page-bar { min-height: 56px; padding-left: 16px; }
  .search-page-bar input[name="q"] { height: 48px; }
}
@media (max-width: 420px) {
  .x-grid, .bgrid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .rcard, .bcard, .bhero, .x-btn, .x-chip, .x-pop-tile { transition-duration: .01s; }
}

/* ---- m3x/app-viewer.css ---- */
/* m3x viewer: the resource page. The stage is a cover first (pixel sprite, Read, Download) and a reader
   only after Read. Contents lists the other files of a bundle. Get-app sheet is the one place Download leads.
   Fill and label are always a role pair; no shadows; every hover shape stays finite. */

.vw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); gap: 20px; align-items: stretch; }
.vw-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* ---------- stage ---------- */
.vw-stage {
  position: relative; border-radius: 32px; overflow: hidden; display: flex; flex-direction: column;
  background: var(--md-surface-container-lowest); border: 1px solid var(--md-outline-variant);
}
.vw-stage:fullscreen { border-radius: 0; border: 0; }
.vw-stage:fullscreen .vw-view { height: auto; flex: 1; }
.vw-stage:fullscreen .vw-reader { flex: 1; display: flex; flex-direction: column; }

.vw-cover {
  position: relative; isolation: isolate; display: grid; place-items: center; text-align: center;
  min-height: clamp(340px, 52vh, 520px); padding: 40px 24px 80px;
  background: var(--md-surface-container-low);
}
.vw-cover[hidden], .vw-reader[hidden] { display: none; }
.vw-hero { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 520px; }
.vw-sprite {
  display: grid; place-items: center; min-width: 224px; height: 192px; padding: 0 32px; border-radius: 48px;
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  transition: border-radius .7s var(--spring), transform .6s var(--spring);
  animation: vw-bob 3.2s steps(8) infinite;
}
.vw-sprite .px-sprite { zoom: 1.7; }
.vw-stage[data-kind="locked"] .vw-sprite { background: var(--md-tertiary-container); }
.vw-stage[data-kind="error"] .vw-sprite, .vw-stage[data-kind="none"] .vw-sprite { background: var(--md-surface-container-high); }
@media (hover: hover) { .vw-cover:hover .vw-sprite { border-radius: 96px; transform: scale(1.04); } }
@keyframes vw-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

.vw-kind {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; margin: 6px 0 0; padding: 0 14px 0 10px; border-radius: 16px;
  background: var(--md-secondary-container); color: var(--md-on-secondary-container); font: 600 .8125rem/1 var(--md-font);
}
.vw-kind .material-symbols-outlined { font-size: 18px; }
.vw-kind i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .55; }
.vw-cover-title {
  margin: 0; font: 700 clamp(1.35rem, 2.6vw, 1.9rem)/1.2 var(--md-font); letter-spacing: -.02em; color: var(--md-on-surface);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word;
}
.vw-cover-note { margin: -4px 0 0; color: var(--md-on-surface-variant); font-size: .9375rem; word-break: break-word; }
.vw-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.vw-cta .x-btn { --h: 40px; flex: 1 1 128px; max-width: 180px; padding: 0 22px; font-size: .875rem; border-radius: 20px; }
.vw-cta .x-btn:hover { }
.vw-read { min-width: 0; }
.vw-cover::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--sc, var(--md-primary)) 55%, var(--md-on-surface)); opacity: .5;
  -webkit-mask: url("/static/web/art/dither/cover-dunes-mask.png") center bottom / cover no-repeat;
          mask: url("/static/web/art/dither/cover-dunes-mask.png") center bottom / cover no-repeat;
}


/* ---------- reader ---------- */
.vw-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--md-outline-variant); background: var(--md-surface-container-lowest); }
.vw-bar-title { flex: 1; min-width: 0; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .9375rem/1.2 var(--md-font); color: var(--md-on-surface); }
.vw-view { position: relative; height: min(82vh, 920px); min-height: 480px; background: var(--md-surface-container); }
.vw-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.vw-image { position: absolute; inset: 0; display: grid; place-items: center; overflow: auto; padding: 16px; cursor: zoom-in; }
.vw-image img { max-width: 100%; max-height: 100%; border-radius: 20px; user-select: none; -webkit-user-drag: none; transition: transform .5s var(--spring); }
.vw-image.is-zoom { cursor: zoom-out; place-items: start center; }
.vw-image.is-zoom img { max-width: none; max-height: none; width: 160%; }
.vw-media { position: absolute; inset: 0; overflow: auto; display: grid; align-content: center; padding: 16px; }
.vw-loading {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: var(--md-surface-container-low);
  transition: opacity .35s, visibility .35s;
}
.vw-loading .px-sprite { zoom: 1.6; }
.vw-loading.is-done { opacity: 0; visibility: hidden; }
.vw-fallback { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 24px; color: var(--md-on-surface); }
.vw-fallback p { margin: 0; font-weight: 600; }

/* a PDF viewer paints above backdrop-filter, so while any overlay is open the frames step aside */
html.neb-has-overlay .vw-iframe, html.neb-has-overlay .vw-media { visibility: hidden; }

/* ---------- contents (bundles) ---------- */
.vw-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.vw-part {
  display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 10px 14px 10px 10px; border-radius: 24px; text-decoration: none;
  background: var(--md-surface-container-lowest); color: var(--md-on-surface); border: 1px solid var(--md-outline-variant);
  transition: border-radius .5s var(--spring), background-color .2s, transform .4s var(--spring);
}
.vw-part:hover { background: var(--md-surface-container-low); }
.vw-part:active { transform: scale(.97); }
.vw-part.is-here { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-color: transparent; }
.vw-part-ico { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; background: var(--md-primary-container); color: var(--md-on-primary-container); font-size: 24px; transition: border-radius .6s var(--spring); }
.vw-part:hover .vw-part-ico { border-radius: 24px; }
.vw-part.is-here .vw-part-ico { background: var(--md-primary); color: var(--md-on-primary); }
.vw-part-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vw-part-text b { font: 600 .9rem/1.25 var(--md-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw-part-text span { font-size: .75rem; color: var(--md-on-surface-variant); }
.vw-part.is-here .vw-part-text span { color: var(--md-on-secondary-container); opacity: .8; }
.vw-part-now { flex: none; height: 24px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 12px; background: var(--md-primary); color: var(--md-on-primary); font: 700 .6875rem/1 var(--md-font); }
.vw-part-go { flex: none; color: var(--md-on-surface-variant); transition: transform .45s var(--spring); }
.vw-part:hover .vw-part-go { transform: translateX(4px); }

/* ---------- info card ---------- */
.vw-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vw-card { padding: 22px; border-radius: 28px; background: var(--md-surface-container-lowest); border: 1px solid var(--md-outline-variant); color: var(--md-on-surface); }
.vw-card { display: flex; flex-direction: column; min-width: 0; }
.vw-title { margin: 14px 0 0; font: 700 clamp(1.2rem, 1.7vw, 1.45rem)/1.25 var(--md-font); letter-spacing: -.015em; word-break: break-word; text-wrap: balance; }
.vw-desc { margin: 12px 0 0; color: var(--md-on-surface-variant); line-height: 1.65; font-size: .9375rem; word-break: break-word; }
.vw-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.vw-fact { padding: 12px 14px; border-radius: 20px; background: var(--md-surface-container); min-width: 0; }
.vw-fact b { display: block; font: 700 .9375rem/1.2 var(--md-font); color: var(--md-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-fact span { font-size: .75rem; color: var(--md-on-surface-variant); }
.vw-by { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--md-outline-variant); color: var(--md-on-surface-variant); font-size: .875rem; }
.vw-by a, .vw-by strong { color: var(--md-on-surface); font-weight: 600; text-decoration: none; }
.vw-by a:hover { color: var(--md-primary); }
.vw-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 18px; }
.vw-actions .x-btn { flex: 1; }
.vw-like.liked { background: var(--md-primary); color: var(--md-on-primary); }
.vw-below { margin-top: 28px; display: grid; gap: 28px; }
.vw-related { display: grid; gap: 14px; }

/* ---------- get-app sheet ---------- */
.ga-sheet { max-width: 460px; }
.ga-body { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 8px 24px 24px; text-align: center; }
.ga-art { display: grid; place-items: center; width: 160px; height: 128px; border-radius: 40px; background: var(--md-primary-container); }
.ga-art .px-sprite { zoom: 1.3; }
.ga-list { align-self: stretch; display: grid; gap: 10px; }
.ga-row {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px 10px 12px; border-radius: 24px; text-decoration: none;
  background: var(--md-surface-container); color: var(--md-on-surface); transition: border-radius .5s var(--spring), background-color .2s;
}
a.ga-row:hover { background: var(--md-surface-container-high); }
.ga-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px; background: var(--md-primary-container); color: var(--md-on-primary-container); font-size: 22px; }
.ga-name { flex: 1; text-align: left; font: 600 1rem/1.2 var(--md-font); }
.ga-row img { display: block; height: 40px; width: auto; border-radius: 6px; }
.ga-row-soon { opacity: .75; }
.ga-row-soon .ga-ico { background: var(--md-surface-container-highest); color: var(--md-on-surface-variant); }
.ga-soon { height: 28px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 14px; background: var(--md-surface-container-highest); color: var(--md-on-surface-variant); font: 600 .75rem/1 var(--md-font); }
.ga-close { align-self: stretch; }

@media (max-width: 1080px) {
  .vw { grid-template-columns: 1fr; }
  .vw { align-items: start; }
}
@media (max-width: 640px) {
  .vw-stage { border-radius: 24px; }
  .vw-cover { min-height: 320px; padding: 28px 16px 72px; }
  .vw-sprite { min-width: 192px; height: 160px; padding: 0 24px; border-radius: 40px; }
  .vw-sprite .px-sprite { zoom: 1.4; }
  .vw-cta { width: 100%; flex-wrap: nowrap; }
  .vw-cta .x-btn { flex: 1 1 0; max-width: none; padding: 0 12px; }
  .vw-view { height: 74vh; min-height: 420px; }
  .vw-card { padding: 18px; border-radius: 24px; }
  .vw-facts { grid-template-columns: 1fr 1fr 1fr; }
  .vw-parts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .vw-sprite { animation: none; }
  .vw-sprite, .vw-part, .vw-part-ico, .vw-image img { transition-duration: .01s; }
}

/* ---------- PDF reader (pdf-reader.js): page canvases on a tonal field, a floating zoom dock ---------- */
.vw-pdf { position: absolute; inset: 0; }
.vw-pdf-scroll { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 10px 88px; outline: none; -webkit-overflow-scrolling: touch; }
.vw-pdf-page { flex: none; position: relative; background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid var(--md-outline-variant); }
.vw-pdf-page::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--md-primary) 9%, transparent); animation: vw-pulse 1.3s ease-in-out infinite; pointer-events: none; }
.vw-pdf-page.is-ready::after { display: none; }
.vw-pdf-page canvas { display: block; user-select: none; -webkit-user-drag: none; }
@keyframes vw-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.vw-pdf-dock {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 4px; padding: 6px;
  border-radius: 28px; background: var(--x-float); border: 1px solid var(--x-float-line); color: var(--md-on-surface);
}
.vw-pdf-btn { width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--md-secondary-container); color: var(--md-on-secondary-container); transition: border-radius .45s var(--spring), transform .3s var(--spring); }
.vw-pdf-btn:hover { }
.vw-pdf-btn:active { transform: scale(.9); }
.vw-pdf-count { min-width: 72px; text-align: center; font-weight: 600; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.vw-pdf-count b { font-weight: 700; }
.vw-pdf-count i { font-style: normal; color: var(--md-on-surface-variant); }
@media (min-width: 640px) { .vw-pdf-scroll { padding-inline: 20px; } }
@media (prefers-reduced-motion: reduce) { .vw-pdf-page::after { animation: none; } }

/* ---------- one balanced pair: while it is a cover, the stage and the details card share one height ---------- */
@media (min-width: 1081px) {
  .vw-main > .vw-stage { flex: 1 1 auto; }
  .vw-stage > .vw-cover:not([hidden]) { flex: 1 1 auto; }
  .vw:has(.vw-stage[data-state="cover"]) .vw-card { flex: 1 1 auto; }
  .vw:not(:has(.vw-stage[data-state="cover"])) .vw-side { position: sticky; top: 88px; align-self: start; }
}

/* ---------- tags: one tidy row of chips, never a wall ---------- */
.vw-card .rcard-tags { gap: 6px; }
.vw-card .rcard-tag { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 24px; padding: 0 10px; font-size: .71875rem; }
.vw-card .rcard-tag[hidden] { display: none; }
.rcard-tag-more { border: 0; cursor: pointer; background: var(--md-secondary-container); color: var(--md-on-secondary-container); transition: background-color .2s, transform .3s var(--spring); }
.rcard-tag-more:hover { background: color-mix(in srgb, var(--md-secondary-container) 80%, var(--md-on-secondary-container)); }
.rcard-tag-more:active { transform: scale(.94); }

/* ---- m3x/app-reader.css ---- */
/* m3x reader: the blog article. Markup and behaviour (progress bar, contents, comments) are unchanged;
   this is the whole look. A calm 720px column, a display title, a cover that morphs on hover,
   tonal pills for actions, comments as stacked tonal cards. Loaded after the page stylesheet. */

.nd-progress { position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 3000; background: transparent; }
.nd-progress > span { display: block; height: 100%; width: 0; background: var(--md-primary); border-radius: 0 2px 2px 0; }
:root .news-detail-page { max-width: 1180px; padding: 20px 24px 120px; }
:root .nd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
:root .nd-main { min-width: 0; max-width: 760px; margin: 0 auto; width: 100%; }
:root .news-detail { background: transparent; border: 0; padding: 0; }
:root .news-detail-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
:root .news-category-badge, :root .news-pin-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 16px; font: 700 .8125rem/1 var(--md-font);
  background: color-mix(in srgb, var(--cat-color, var(--md-primary)) 16%, var(--md-surface-container-lowest)); color: color-mix(in srgb, var(--cat-color, var(--md-primary)) 50%, var(--md-on-surface));
}
:root .news-pin-badge { background: var(--md-primary-container); color: var(--md-on-primary-container); }
:root .news-category-badge .material-symbols-outlined, :root .news-pin-badge .material-symbols-outlined { font-size: 16px; }
:root .news-detail-title { margin: 0 0 14px; font: 700 clamp(2rem, 4.6vw, 3.1rem)/1.1 var(--md-font); letter-spacing: -.03em; color: var(--md-on-surface); }
:root .news-detail-summary { margin: 0 0 20px; font-size: 1.1875rem; line-height: 1.55; color: var(--md-on-surface-variant); }
:root .news-detail-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 0; border-block: 1px solid var(--md-outline-variant); color: var(--md-on-surface-variant); font-size: .875rem; }
:root .news-detail-meta .news-card-author { color: var(--md-on-surface); font-weight: 600; }
:root .news-detail-meta .news-card-dot { opacity: .5; }
:root .news-detail-more-btn { width: 44px; height: 44px; border: 0; border-radius: 22px; background: var(--md-surface-container); color: var(--md-on-surface); cursor: pointer; transition: border-radius .45s var(--spring), background-color .2s; }
:root .news-detail-more-btn:hover { background: var(--md-surface-container-high); }
:root .news-detail-cover { margin: 24px 0; border-radius: 32px; overflow: hidden; background: var(--md-surface-container); transition: border-radius .7s var(--spring); }
:root .news-detail-cover:hover { border-radius: 44px; }
:root .news-detail-cover img { display: block; width: 100%; height: auto; }
:root .news-detail-content { font-size: 1.125rem; line-height: 1.85; color: var(--md-on-surface); }
:root .news-detail-content :is(h2, h3, h4) { font-family: var(--md-font); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin: 2em 0 .6em; color: var(--md-on-surface); }
:root .news-detail-content h2 { font-size: 1.75rem; }
:root .news-detail-content h3 { font-size: 1.375rem; }
:root .news-detail-content a { color: var(--md-primary); text-underline-offset: 3px; }
:root .news-detail-content img { max-width: 100%; height: auto; border-radius: 24px; }
:root .news-detail-content blockquote { margin: 1.6em 0; padding: 20px 24px; border-radius: 24px; background: var(--md-primary-container); color: var(--md-on-primary-container); border: 0; }
:root .news-detail-content :is(ul, ol) { padding-left: 1.4em; }
:root .news-detail-content li::marker { color: var(--md-primary); }
:root .news-detail-content table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--md-outline-variant); border-radius: 20px; overflow: hidden; font-size: .9375rem; }
:root .news-detail-content :is(th, td) { padding: 12px 16px; border-bottom: 1px solid var(--md-outline-variant); text-align: left; }
:root .news-detail-content th { background: var(--md-surface-container); }
:root .news-detail-content :is(code, pre) { background: var(--md-surface-container); color: var(--md-on-surface); border-radius: 12px; }
:root .news-detail-content code { padding: 2px 8px; }
:root .news-detail-content pre { padding: 16px 20px; overflow-x: auto; }

:root .nd-actionbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 32px 0 0; padding: 12px; border-radius: 32px; background: var(--md-surface-container); border: 0; }
:root .nd-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border: 0; border-radius: 24px; cursor: pointer; text-decoration: none;
  background: var(--md-surface-container-lowest); color: var(--md-on-surface); font: 600 .9375rem/1 var(--md-font);
  transition: border-radius .5s var(--spring), transform .4s var(--spring), background-color .2s;
}
:root .nd-action:hover { background: var(--md-surface-container-high); }
:root .nd-action:active { transform: scale(.94); }
:root .nd-action-primary { background: var(--md-primary); color: var(--md-on-primary); }
:root .nd-action-primary:hover { background: var(--md-primary); }
:root .nd-action-icon { width: 48px; padding: 0; }
:root .nd-action .material-symbols-outlined { font-size: 20px; }

:root .nd-comments { margin-top: 48px; }
:root .nd-comments-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
:root .nd-comments-head h2 { margin: 0; font: 700 1.5rem/1.2 var(--md-font); letter-spacing: -.02em; }
:root .nd-comments-count { min-width: 32px; height: 32px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: 16px; background: var(--md-secondary-container); color: var(--md-on-secondary-container); font: 700 .875rem/1 var(--md-font); }
/* The composer is .neb-composer, which draws its own box; the wrapper only holds
   it and its hint. The signed-out prompt has no composer inside, so it keeps the
   plate. */
:root .nd-composer { padding: 0; border: 0; background: none; }
:root .nd-signin { border-radius: 28px; background: var(--md-surface-container-lowest); border: 1px solid var(--md-outline-variant); padding: 16px; color: var(--md-on-surface); }
:root .nd-signin { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
:root .nd-signin-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 24px; background: var(--md-primary-container); color: var(--md-on-primary-container); }
:root .nd-signin-text { flex: 1; min-width: 160px; color: var(--md-on-surface); }

:root .nd-related { margin-top: 56px; }
:root .nd-related-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
:root .nd-related-head h2 { margin: 0; font: 700 1.375rem/1.2 var(--md-font); letter-spacing: -.02em; }
:root .nd-related-head a { color: var(--md-primary); font-weight: 600; text-decoration: none; }

:root .nd-sidebar { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 16px; }
:root .nd-toc { padding: 20px; border-radius: 28px; background: var(--md-surface-container-lowest); border: 1px solid var(--md-outline-variant); }
:root .nd-side-cta { padding: 22px; border-radius: 28px; background: var(--md-primary-container); color: var(--md-on-primary-container); border: 0; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
:root .nd-side-cta h4 { margin: 0; font: 700 1.25rem/1.2 var(--md-font); color: var(--md-on-primary-container); }
:root .nd-side-cta .news-sidebar-cta-icon-wrapper { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 24px; background: var(--md-primary); color: var(--md-on-primary); }

@media (max-width: 980px) {
  :root .nd-layout { grid-template-columns: 1fr; }
  :root .nd-sidebar { position: static; }
  :root .nd-toc { display: none; }
}
@media (max-width: 640px) {
  :root .news-detail-page { padding: 14px 14px 120px; }
  :root .news-detail-content { font-size: 1.0625rem; }
  :root .news-detail-cover { border-radius: 24px; }
  :root .nd-actionbar { border-radius: 28px; }
  :root .nd-action:not(.nd-action-icon):not(.nd-action-primary) { flex: 1; }
}

/* ---- m3x/app-news-source.css ---- */
/* Auto-imported blog posts: the verified mark, attachment rows and the source card.
   Shared by the list (news.html) and the article (news_detail.html). */
.src-verified { font-size: 1em; margin-left: 4px; vertical-align: -.16em; color: var(--md-primary); font-variation-settings: 'FILL' 1; background: none; }
.bcard-meta .src-verified, .bhero-meta .src-verified { font-size: 15px; vertical-align: -3px; }

.nd-files { display: flex; flex-direction: column; gap: 8px; margin: 24px clamp(16px, 4vw, 36px) 0; }
.nd-file { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 18px 10px 12px; border-radius: 20px; background: var(--md-surface-container-low); color: var(--md-on-surface); text-decoration: none; transition: background-color .15s; }
.nd-file:hover { background: var(--md-surface-container-high); }
.nd-file-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--md-primary-container); color: var(--md-on-primary-container); font-size: 24px; }
.nd-file-name { flex: 1; min-width: 0; font: 600 .9375rem/1.3 var(--md-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-file-kind { flex: none; height: 24px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 12px; background: var(--md-secondary-container); color: var(--md-on-secondary-container); font: 600 .6875rem/1 var(--md-font); letter-spacing: .04em; }
.nd-file-go { flex: none; font-size: 20px; color: var(--md-on-surface-variant); }

.nd-source { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 16px clamp(16px, 4vw, 36px) 0; padding: 14px 14px 14px 20px; border-radius: 24px; background: var(--md-surface-container); }
.nd-source-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nd-source-who strong { font: 600 .9375rem/1.3 var(--md-font); color: var(--md-on-surface); }
.nd-source-who span { font-size: .8125rem; color: var(--md-on-surface-variant); overflow: hidden; text-overflow: ellipsis; }
.nd-source-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 22px; background: var(--md-primary); color: var(--md-on-primary); font: 600 .875rem/1 var(--md-font); text-decoration: none; transition: background-color .15s, opacity .15s; }
.nd-source-btn:hover { opacity: .9; }
.nd-source-btn .material-symbols-outlined { font-size: 18px; }
@media (max-width: 520px) { .nd-source-btn { width: 100%; justify-content: center; } }
.news-detail-content:empty { display: none; }

/* ---- m3x/app-mobile.css ---- */
/* m3x mobile overlays. On a phone every dialog is a bottom sheet and every menu is a sheet; both sit
   above the on-screen keyboard (--neb-kb, written by the viewport tracker in neb-overlays.js) and
   never grow past the visible viewport (--neb-vh). The body of a dialog scrolls, its head and
   actions do not, so the buttons are always reachable. Loads after app-overlays.css. */

:root { --neb-kb: 0px; --neb-vh: 100dvh; --neb-vt: 0px; }

.neb-dialog > :is(.neb-dialog-body, .fl-options, .fp-dialog-body) {
  overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1 1 auto;
}
.neb-dialog > :is(.neb-dialog-head, .neb-dialog-actions) { flex: none; }
.neb-dialog { max-height: min(88dvh, calc(var(--neb-vh) - 24px)); }

@media (max-width: 600px) {
  .neb-scrim:not(.neb-scrim-side) {
    padding: 0 0 var(--neb-kb); align-items: flex-end; justify-content: center; box-sizing: border-box;
  }
  .neb-dialog, .fl-dialog, .fp-dialog, .upload-progress-dialog {
    width: 100%; max-width: none; margin: 0;
    max-height: min(92dvh, calc(var(--neb-vh) - 12px));
    border-radius: 28px 28px 0 0; border-width: 1px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    opacity: 1; transform: translateY(100%);
    transition: transform .5s var(--spring);
  }
  .neb-scrim[data-open] .neb-dialog { transform: none; }
  .neb-scrim[data-closing] .neb-dialog { transform: translateY(100%); transition-duration: .22s; }
  .neb-dialog::before {
    content: ""; display: block; flex: none; width: 36px; height: 4px; margin: 10px auto 0;
    border-radius: 2px; background: var(--md-outline-variant);
  }
  .neb-dialog-actions { padding-bottom: 16px; }

  .neb-menu.neb-menu-sheet {
    inset: auto 0 var(--neb-kb) 0;
    max-height: min(76dvh, calc(var(--neb-vh) - 24px));
    overflow-y: auto; overscroll-behavior: contain;
    border-width: 1px 0 0; border-radius: 28px 28px 0 0;
    background: var(--x-float);
  }
  .neb-menu.neb-menu-sheet[data-open] { transform: none; }
  .neb-menu.neb-menu-sheet .neb-menu-item { min-height: 52px; }
  .more-menu.neb-menu-sheet { inset: auto 0 var(--neb-kb) 0; max-width: none; max-height: min(76dvh, calc(var(--neb-vh) - 24px)); overflow-y: auto; }
  .neb-sheet { max-height: min(90dvh, calc(var(--neb-vh) - 12px)); }
  .modal-overlay { padding: 0 0 var(--neb-kb); align-items: flex-end; }
  .modal-box {
    width: 100%; max-width: none; margin: 0; max-height: min(92dvh, calc(var(--neb-vh) - 12px));
    border-radius: 28px 28px 0 0; border-width: 1px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%); transition: transform .5s var(--spring);
  }
  .modal-overlay.active .modal-box { transform: none; }
}

@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .neb-dialog, .fl-dialog, .fp-dialog { transform: none !important; opacity: 0; transition: opacity .15s !important; }
  .neb-scrim[data-open] .neb-dialog { opacity: 1; }
}

/* ---------- phone hardening ----------
   A blurred scrim with a transformed child is the combination mobile engines (iOS WebKit, some Android WebViews)
   composite wrongly: the blur layer paints over the sheet and only the blur is visible. On a phone the scrim is a
   plain tone, and every sheet / dialog gets its own stacking context above it. vh is the fallback for
   engines without dvh, which would otherwise drop the max-height rules above entirely. */
@media (max-width: 600px) {
  .neb-scrim, .neb-menu-scrim, .neb-fab-scrim, .modal-overlay, .hf-post-dialog::backdrop {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: color-mix(in srgb, var(--md-inverse-surface) 52%, transparent);
  }
  .neb-dialog, .fl-dialog, .fp-dialog, .upload-progress-dialog, .neb-sheet, .neb-choice-sheet, .modal-box {
    z-index: 1; isolation: isolate; backface-visibility: hidden;
  }
  .neb-dialog, .fl-dialog, .fp-dialog { max-height: 92vh; max-height: min(92dvh, calc(var(--neb-vh) - 12px)); }
  .neb-menu.neb-menu-sheet { max-height: 76vh; max-height: min(76dvh, calc(var(--neb-vh) - 24px)); }
  /* the formula/symbol popup and kind menu never grow wider than the screen or sit off its edge */
  .fc-pop, .fc-kindmenu { max-width: calc(100vw - 16px); }
  .hf-emoji-popover { max-width: calc(100vw - 16px); }
}

/* ---- m3x/app-shapes.css ---- */
/* m3x avatar shapes and the standard avatar badge.

   neb-shapes.js puts data-shape="<name>" on every avatar container, chosen from the username, so a
   person has one shape on every screen. The polygons come from shapes.css (same point count, so
   they morph); hovering a shaped avatar, or the link around it, tips it into its neighbour shape.

   A container that carries a badge keeps its own box unclipped (the badge sits on the rim) and
   shapes the picture inside it instead. Put .av-inset on any container whose own box must stay
   whole (a camera badge, a notification dot, a ring) and it behaves the same way. */

[data-shape] { --shape: var(--shape-cookie); --alt: var(--shape-flower); --av-fill: var(--md-secondary-container); --av-ink: var(--md-on-secondary-container); }
[data-tone="1"] { --av-fill: var(--md-primary-container); --av-ink: var(--md-on-primary-container); }
[data-tone="2"] { --av-fill: var(--md-tertiary-container, var(--md-surface-container-high)); --av-ink: var(--md-on-tertiary-container, var(--md-on-surface)); }
[data-shape="cookie"]   { --shape: var(--shape-cookie);   --alt: var(--shape-flower); }
[data-shape="sunny"]    { --shape: var(--shape-sunny);    --alt: var(--shape-burst); }
[data-shape="flower"]   { --shape: var(--shape-flower);   --alt: var(--shape-clover); }
[data-shape="clover"]   { --shape: var(--shape-clover);   --alt: var(--shape-cookie); }
[data-shape="burst"]    { --shape: var(--shape-burst);    --alt: var(--shape-sunny); }
[data-shape="pebble"]   { --shape: var(--shape-pebble);   --alt: var(--shape-squircle); }
[data-shape="squircle"] { --shape: var(--shape-squircle); --alt: var(--shape-circle); }

[data-shape]:not(.pf-avatar-overlap-wrap):not(:is(.av-inset, :has(> .avatar-badge-overlay))) {
  clip-path: var(--shape); border-color: transparent; border-radius: 0;
  background-color: var(--av-fill) !important; color: var(--av-ink) !important;
  transition: clip-path .8s var(--spring);
}
[data-shape]:is(.av-inset, :has(> .avatar-badge-overlay)) > :is(img, div, span):not(.avatar-badge-overlay, .notif-dot, .epf-identity-camera),
.pf-avatar-overlap-wrap > .pf-avatar-circle {
  clip-path: var(--shape); border-radius: 0 !important; border: 0 !important;
  background-color: var(--av-fill) !important; color: var(--av-ink) !important;
  transition: clip-path .8s var(--spring);
}
[data-shape] img { border-radius: 0 !important; }

@media (hover: hover) {
  a:hover > [data-shape]:not(.pf-avatar-overlap-wrap):not(:is(.av-inset, :has(> .avatar-badge-overlay))),
  [data-shape]:not(.pf-avatar-overlap-wrap):not(:is(.av-inset, :has(> .avatar-badge-overlay))):hover { clip-path: var(--alt); }
  a:hover > [data-shape]:is(.av-inset, :has(> .avatar-badge-overlay)) > :is(img, div, span):not(.avatar-badge-overlay, .notif-dot, .epf-identity-camera),
  [data-shape]:is(.av-inset, :has(> .avatar-badge-overlay)):hover > :is(img, div, span):not(.avatar-badge-overlay, .notif-dot, .epf-identity-camera),
  .pf-avatar-overlap-wrap:hover > .pf-avatar-circle { clip-path: var(--alt); }
}
@media (prefers-reduced-motion: reduce) { [data-shape], [data-shape] > * { transition: none !important; } }

/* ---------- the standard avatar badge ----------
   A filled disc in the badge colour, a white glyph, and a ring in the colour of whatever the
   avatar sits on. Bottom-right, on the rim of the shape. */
.avatar-container-verified { position: relative; overflow: visible; }
.avatar-badge-overlay {
  --bd: 16px;
  position: absolute; right: -2px; bottom: -2px; z-index: 5;
  width: var(--bd); height: var(--bd); box-sizing: content-box;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 2px solid var(--badge-ring, var(--md-surface));
  background: var(--badge-bg, var(--md-primary)); color: #fff;
  line-height: 0; pointer-events: none;
}
.avatar-badge-overlay .material-symbols-outlined {
  font-size: calc(var(--bd) * .66); line-height: 1; color: #fff;
  font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 20;
}
.avatar-badge-overlay.is-verified .material-symbols-outlined { font-size: 0; }
.avatar-badge-overlay.is-verified::after {
  content: "check"; font-family: 'Material Symbols Outlined'; font-size: calc(var(--bd) * .7);
  font-weight: 700; line-height: 1; color: #fff; font-variation-settings: 'wght' 700;
}

/* Containers with overlays: the box stays, the ring around it goes, the picture takes the shape. */
.av-inset[data-shape] { border-color: transparent; background: none !important; }
.avatar-ring.av-inset[data-shape] { padding: 0; }

/* ---- m3x/app-profile.css ---- */
/* m3x profile. One tonal card: an inset rounded cover, an avatar in an expressive shape that
   breaks the cover's edge with a ring cut out of the card colour, one standard badge on its rim,
   stat tiles, and the tab rail below. The same drawing on a phone and a desktop; only the grid
   changes. Prefixed .profile-page so it outranks app/ and pages/profile.css. */

.profile-page { --pf-card: var(--md-surface-container-lowest); --badge-ring: var(--pf-card); }
.profile-page .pf-compact-card {
  position: relative; background: var(--pf-card); color: var(--md-on-surface);
  border: 1px solid var(--md-outline-variant); border-radius: 32px; padding: 8px 8px 20px; overflow: visible;
}
.profile-page .pf-card-banner {
  height: clamp(140px, 22vw, 192px); border-radius: 26px; overflow: hidden; background: var(--md-primary-container);
}
.profile-page .pf-banner-photo-scrim { background: color-mix(in srgb, #000 12%, transparent); }
.profile-page .pf-banner-actions { top: 10px; right: 10px; gap: 8px; }
.profile-page .pf-banner-action, .profile-page .pf-card-banner .neb-back {
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: var(--md-surface-container-lowest); color: var(--md-on-surface);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-radius .5s var(--spring), background-color .15s, transform .3s var(--spring);
}
.profile-page .pf-banner-action:hover, .profile-page .pf-card-banner .neb-back:hover { background: var(--md-surface-container-high); }
.profile-page .pf-banner-action:active, .profile-page .pf-card-banner .neb-back:active { transform: scale(.92); }
.profile-page .pf-card-banner .neb-back { position: absolute; top: 10px; left: 10px; }

.profile-page .pf-identity-row { padding: 0 14px; align-items: flex-start; }
.profile-page .pf-avatar-overlap-wrap {
  --av: 108px; width: var(--av); height: var(--av); margin-top: calc(var(--av) / -2);
  overflow: visible; background: none;
}
.profile-page .pf-avatar-overlap-wrap::before {
  content: ""; position: absolute; inset: -6px; background: var(--pf-card);
  clip-path: var(--shape, var(--shape-cookie)); transition: clip-path .8s var(--spring);
}
.profile-page .pf-avatar-overlap-wrap:hover::before { clip-path: var(--alt, var(--shape-flower)); }
.profile-page .pf-avatar-circle {
  position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--md-primary-container); color: var(--md-on-primary-container); overflow: hidden; box-sizing: border-box;
}
.profile-page .pf-avatar-circle img { width: 100%; height: 100%; object-fit: cover; }
.profile-page .pf-avatar-initial { font-family: var(--display); font-size: 2.5rem; font-weight: 700; color: inherit; }
.profile-page .pf-avatar-bot .pf-avatar-circle { background: var(--md-surface-container-high); }

.profile-page .pf-avatar-cam {
  position: absolute; left: auto; top: auto; right: 2px; bottom: 2px; z-index: 6;
  width: 34px; height: 34px; border-radius: 50%; box-sizing: border-box;
  background: var(--md-primary); color: var(--md-on-primary); border: 3px solid var(--pf-card);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-radius .5s var(--spring), transform .3s var(--spring);
}
.profile-page .pf-avatar-cam:hover { }
.profile-page .pf-avatar-cam:active { transform: scale(.9); }
.profile-page .pf-avatar-cam span { font-size: 16px !important; color: var(--md-on-primary) !important; }

.profile-page .pf-identity-action { margin-top: 14px; }
.profile-page .pf-btn {
  min-height: 44px; padding: 0 22px; gap: 8px; border-radius: 22px; font-weight: 600; border: 0;
  transition: border-radius .5s var(--spring), background-color .15s, transform .3s var(--spring);
}
.profile-page .pf-btn:hover { }
.profile-page .pf-btn:active { transform: scale(.96); }
.profile-page .pf-btn-filled { background: var(--md-primary); color: var(--md-on-primary); }
.profile-page .pf-btn-outlined { background: var(--md-surface-container-lowest); color: var(--md-primary); border: 1.5px solid var(--md-outline-variant); }
.profile-page .pf-btn-outlined:hover { border-color: var(--md-primary); }
.profile-page .pf-btn .material-symbols-outlined { font-size: 20px; color: inherit; }

.profile-page .pf-card-body { padding: 14px 14px 0; }
.profile-page .pf-card-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-page .pf-card-name { font-family: var(--display); font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 0; color: var(--md-on-surface); }
.profile-page .pf-verified {
  width: 24px; height: 24px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--badge-bg, var(--md-primary)); color: #fff;
}
.profile-page .pf-verified .material-symbols-outlined { font-size: 16px; color: #fff; font-variation-settings: 'FILL' 1, 'wght' 700; }
.profile-page .pf-card-username { color: var(--md-on-surface-variant); font-weight: 500; margin-top: 2px; }
.profile-page .pf-card-headline { color: var(--md-on-secondary-container); font-weight: 600; margin: 12px 0 0; }
.profile-page .pf-card-bio { color: var(--md-on-surface); line-height: 1.55; margin: 8px 0 0; }
.profile-page .pf-meta-flow { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; }
.profile-page .pf-meta-item {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none;
  color: var(--md-on-surface-variant); font-size: .8125rem; font-weight: 500;
}
.profile-page .pf-meta-item .material-symbols-outlined { font-size: 18px; color: var(--md-on-surface-variant); }
.profile-page .pf-meta-item a { color: var(--md-primary); font-weight: 600; text-decoration: none; }

.profile-page .pf-stats-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; justify-content: stretch; margin-top: 16px; overflow: hidden;
  border: 1px solid var(--md-outline-variant); border-radius: 20px; background: var(--md-surface-container-lowest);
}
.profile-page .pf-stat-col {
  display: flex; flex-direction: column-reverse; align-items: center; gap: 0; padding: 12px 8px; min-width: 0; text-align: center;
  background: none; color: var(--md-on-surface); transition: background-color .15s, transform .3s var(--spring);
}
.profile-page .pf-stat-col + .pf-stat-col { border-left: 1px solid var(--md-outline-variant); }
.profile-page .pf-stat-col[data-action] { cursor: pointer; }
.profile-page .pf-stat-col[data-action]:hover { background: var(--md-primary-container); }
.profile-page .pf-stat-col[data-action]:active { transform: scale(.97); }
.profile-page .pf-stat-num { font-family: var(--display); font-size: 1.375rem; font-weight: 700; line-height: 1.2; color: var(--md-on-surface); }
.profile-page .pf-stat-label { font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: var(--md-on-surface-variant); }
.profile-page .pf-buttons-row { display: flex; gap: 8px; margin-top: 12px; }
.profile-page .pf-buttons-row .pf-btn { flex: 1; justify-content: center; }

.profile-page .pf-private {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px;
  min-height: 320px; padding: 48px 24px; background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant); border-radius: 32px;
}
.profile-page .pf-private-icon {
  width: 72px; height: 72px; display: grid; place-items: center; margin-bottom: 8px;
  clip-path: var(--shape-cookie); background: var(--md-secondary-container); color: var(--md-on-secondary-container);
}
.profile-page .pf-private-icon .material-symbols-outlined { font-size: 34px; }
.profile-page .pf-private h2 { margin: 0; font-family: var(--display); font-size: 1.25rem; font-weight: 700; color: var(--md-on-surface); }
.profile-page .pf-private p { margin: 0; max-width: 300px; color: var(--md-on-surface-variant); line-height: 1.5; }

@media (max-width: 900px) {
  .profile-page .profile-grid-container { padding: 12px 12px 112px; }
  .profile-page .pf-compact-card { border-radius: 28px; }
  .profile-page .pf-card-banner { border-radius: 22px; }
  .profile-page .pf-avatar-overlap-wrap { --av: 96px; }
  .profile-page .pf-card-name { font-size: 1.5rem; }
}

/* ---------- About tab stat tiles: the same tonal tile as the header, no outline ---------- */
.profile-page .ov-stat {
  border: 1px solid var(--md-outline-variant); border-radius: 20px; padding: 14px 12px;
  background: var(--md-surface-container-lowest); color: var(--md-on-surface);
  transition: border-radius .5s var(--spring), background-color .15s, transform .3s var(--spring);
}
.profile-page .ov-stat[data-action]:hover { background: var(--md-primary-container); border-radius: 28px; }
.profile-page .ov-stat[data-action]:active { transform: scale(.97); }
.profile-page .ov-stat-value { font-family: var(--display); }
.profile-page .ov-stat-label { font-size: .75rem; font-weight: 600; }
.profile-page .ov-stat.academic { background: var(--md-primary-container); }
.profile-page .ov-stat.academic .ov-stat-value,
.profile-page .ov-stat.academic .ov-stat-label { color: var(--md-on-primary-container); }

/* ---- m3x/app-profile-feed.css ---- */
/* Profile feed cards. Each card is a post and says whose it is, compactly: a 36px shaped avatar, the
   name with its badge on one line, then category and time beneath. No Follow button here (the
   profile header owns it). White surface, one stroke, springy corner on hover. */
.profile-page .activity-list { display: flex; flex-direction: column; gap: 12px; }
.profile-page .activity-list > .post-card {
  margin: 0; padding: 18px 20px 10px; background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant); border-radius: 24px;
  transition: border-radius .55s var(--spring), border-color .2s, transform .3s var(--spring);
}
@media (hover: hover) { .profile-page .activity-list > .post-card:hover { border-radius: 30px; border-color: var(--md-outline); } }
.profile-page .activity-list > .post-card:active { transform: scale(.995); }
.profile-page .activity-list > .post-card .post-card-header { display: flex; align-items: center; padding: 0; margin: 0 0 10px; gap: 10px; }
.profile-page .activity-list .post-card-avatar { width: 36px; height: 36px; min-width: 36px; flex: none; font-size: .9375rem; }
.profile-page .activity-list .post-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-page .activity-list .post-card-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.profile-page .activity-list .post-card-meta-top { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; min-width: 0; font-size: .9375rem; line-height: 1.2; }
.profile-page .activity-list .post-card-meta-top > a { font-weight: 700; color: var(--md-on-surface); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-page .activity-list .post-card-meta-bottom { display: flex; align-items: center; flex-wrap: nowrap; margin: 0 !important; gap: 8px !important; min-width: 0; color: var(--md-on-surface-variant); }
.profile-page .activity-list .post-card-cat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.profile-page .activity-list .post-card-time { white-space: nowrap; }
.profile-page .activity-list .post-card-cat {
  padding: 4px 12px; border-radius: 10px; font-size: .75rem; font-weight: 600;
  background: var(--md-primary-container); color: var(--md-on-primary-container);
}
.profile-page .activity-list .post-card-time { font-size: .8125rem; color: var(--md-on-surface-variant); }
.profile-page .activity-list .post-card h3 { margin: 0 0 6px; font-family: var(--display); font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.profile-page .activity-list .post-card h3 a { color: var(--md-on-surface); text-decoration: none; }
.profile-page .activity-list .post-card-content {
  margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--md-on-surface-variant);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.profile-page .activity-list .post-card-actions { margin: 12px -8px 0; padding: 0; border: 0; gap: 4px; align-items: center; }
.profile-page .activity-list .post-card-actions :is(button, a) {
  min-height: 40px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 20px;
  background: none; color: var(--md-on-surface-variant); font-size: .8125rem; font-weight: 600; text-decoration: none;
  transition: border-radius .5s var(--spring), background-color .15s, color .15s;
}
.profile-page .activity-list .post-card-actions :is(button, a) .material-symbols-outlined { font-size: 20px; color: inherit; }
@media (hover: hover) { .profile-page .activity-list .post-card-actions :is(button, a):hover { background: var(--md-primary-container); color: var(--md-on-primary-container); } }
.profile-page .activity-list .post-card-actions .liked, .profile-page .activity-list .post-card-actions .bookmark-active { color: var(--md-primary); }

/* tabs scroll sideways instead of clipping the last one */
.profile-page .neb-rail { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.profile-page .neb-rail::-webkit-scrollbar { display: none; }
.profile-page .neb-rail-item { flex: none; }
@media (max-width: 600px) { .profile-page .activity-list > .post-card { padding: 16px 16px 8px; border-radius: 22px; } }

/* ---- m3x/app-fields.css ---- */
/* One field language. Every text field, picker trigger, select and option card is a white
   (--x-field) surface with ONE 1.5px stroke. Focus and selection change that stroke's colour and
   nothing else: no tonal periwinkle well, no outline stacked on a border, no second ring. */
:root { --x-field: var(--md-surface-container-lowest); --x-field-line: color-mix(in srgb, var(--md-outline) 58%, var(--md-surface)); --x-line-w: 1.5px; }

/* ---------- text fields, pickers, selects ---------- */
:root :is(.neb-field, .neb-field-trigger, .neb-sel, .neb-select-field, .md-input, .md-select, .md-textarea, .md-text-field,
  .subject-pick-search, .subject-pick-add input, .photo-url-input, .hf-cat-own-field, .chat-input-field, .cb-text-input,
  .ix-formula-field, .admin-search, .admin-palette-search, .lib-sort-select-wrapper) {
  background: var(--x-field);
  color: var(--md-on-surface);
  border: var(--x-line-w) solid var(--x-field-line);
  outline: none;
}
#homePostForm :is(.hf-identity-trigger, .hf-cat-trigger, .hf-emoji-search-wrap) {
  background: var(--x-field);
  color: var(--md-on-surface);
  border: var(--x-line-w) solid var(--x-field-line);
}
#homePostForm :is(.hf-identity-trigger, .hf-cat-trigger):is(:hover, :focus-visible, [aria-expanded="true"]) { border-color: var(--md-primary); background: var(--x-field); }
:root :is(.neb-field, .neb-field-trigger, .neb-sel, .neb-select-field, .md-input, .md-select, .md-textarea, .md-text-field,
  .subject-pick-search, .subject-pick-add input, .photo-url-input, .hf-cat-own-field, .chat-input-field, .cb-text-input,
  .ix-formula-field, .admin-search, .admin-palette-search, .lib-sort-select-wrapper):hover:not(:focus):not(:disabled) {
  border-color: var(--md-outline);
  background: var(--x-field);
}
:root :is(.neb-field, .neb-field-trigger, .neb-sel, .neb-select-field, .md-input, .md-select, .md-textarea, .md-text-field,
  .subject-pick-search, .subject-pick-add input, .photo-url-input, .hf-cat-own-field, .chat-input-field, .cb-text-input,
  .ix-formula-field, .admin-search, .admin-palette-search):is(:focus, :focus-visible, :focus-within, .is-open, [aria-expanded="true"]) {
  border-color: var(--md-primary);
  background: var(--x-field);
  outline: none;
}
:root :is(.neb-sel, .neb-field-trigger):active { background: var(--x-field); }
:root :is(.neb-field, .md-input, .md-textarea, .md-text-field)[aria-invalid="true"] { border-color: var(--md-error); }
:root :is(.neb-field, .md-input, .md-textarea, .md-text-field)::placeholder { color: var(--md-on-surface-tertiary); opacity: 1; }
:root :is(.neb-field-trigger, .neb-sel) .material-symbols-outlined { color: var(--md-on-surface-variant); }
:root .md-textarea { padding: 14px 16px; line-height: 1.5; min-height: 112px; resize: vertical; }

/* ---------- option cards and tiles: white, one stroke, the stroke turns primary when picked ---------- */
.form-group label.neb-option, label.neb-option { display: flex; margin-bottom: 0; }
:root :is(.neb-option, .neb-tile) {
  background: var(--x-field);
  border: var(--x-line-w) solid var(--x-field-line);
  outline: none;
}
@media (hover: hover) {
  :root :is(.neb-option, .neb-tile):not(.is-selected):not([aria-checked="true"]):not(:has(> input:checked)):hover { border-color: var(--md-outline); }
}
:root :is(.neb-option:has(> input:checked), .neb-option.is-selected, .neb-option[aria-checked="true"],
  .neb-tile.is-selected, .neb-tile[aria-checked="true"], .neb-option:has(> input:focus-visible)) {
  background: var(--x-field);
  border-color: var(--md-primary);
}
:root :is(.neb-option, .neb-tile):focus-visible { outline: none; border-color: var(--md-primary); }
:root :is(.neb-option, .neb-tile) > .neb-glyph { background: var(--md-surface-container); color: var(--md-on-surface-variant); }
:root :is(.neb-option:has(> input:checked), .neb-option.is-selected, .neb-option[aria-checked="true"],
  .neb-tile.is-selected, .neb-tile[aria-checked="true"]) > .neb-glyph { background: var(--md-primary-container); color: var(--md-on-primary-container); }

/* Explorer is a role like the others: same card, same blue. No dashes, no violet. */
:root .role-radio-card-explorer,
:root .role-radio-card-explorer:has(> input:checked),
:root .role-radio-card-explorer.is-selected { border-style: solid; background: var(--x-field); }
:root .role-radio-card-explorer { border-color: var(--x-field-line); }
:root .role-radio-card-explorer:has(> input:checked),
:root .role-radio-card-explorer.is-selected { border-color: var(--md-primary); }
:root .role-radio-card-explorer:has(> input:checked) .neb-option-title,
:root .role-radio-card-explorer.is-selected .neb-option-title { color: var(--md-primary); }
:root .role-radio-card-explorer:has(> input:checked) > .neb-glyph,
:root .role-radio-card-explorer.is-selected > .neb-glyph { background: var(--md-primary-container); color: var(--md-on-primary-container); }
:root .role-radio-card-explorer:has(> input:checked) > .neb-mark::before,
:root .role-radio-card-explorer.is-selected > .neb-mark::before { background: var(--md-primary); }

/* the radio mark never shrinks inside a card, whatever the row does around it */
.neb-option > .neb-mark { flex: none; width: 24px; height: 24px; align-self: center; }

/* a text field swapped to a contenteditable by inline-media.js keeps the single stroke: the global
   [contenteditable] ring would stack a second one on top of the border it copied from the textarea */
:root .neb-seamless:is(:focus, :focus-visible) { outline: none; }
:root .neb-seamless.neb-focus { border-color: var(--md-primary) !important; }

/* a two-column form row that collapses to one column: the group margin already spaces the rows,
   so the grid gap must not add a second one */
@media (max-width: 600px) { .form-row { row-gap: 0; } }

/* ---- m3x/app-avatars.css ---- */
/* Avatar frames and badges, last word.
   1. A picture frame has no stroke, ring or outline: the shape (clip-path) is the only edge.
      The two rings that stay are cut from the surface colour behind a badge or camera, not drawn
      around the picture.
   2. A badge never leaves the line its name is on. Any element that holds a .role-badge next to a
      name is a single nowrap row; the name truncates, the badge keeps its size. */

:is(
  .avatar-ring, .profile-dropdown-avatar, .post-card-avatar, .fp-avatar, .fp-reply-avatar, .fp-thread-avatar,
  .rcard-avatar, .resource-card-avatar, .forum-contributor-avatar, .user-search-avatar, .leaderboard-avatar,
  .suggest-post-avatar, .pf-reply-card-avatar, .hf-peer-avatar, .hf-side-avatar, .mkt-hero-avatar,
  .mkt-member-avatar, .study-join-avatar, .behalf-avatar, .fp-identity-option-avatar, .hf-option-avatar,
  .notif-avatar-real, .who-avatar-wrap, .pf-avatar-overlap-wrap, .pf-avatar-circle, [data-avatar-seed]
) {
  border: 0 !important; outline: 0 !important; box-shadow: none !important;
}
:is(.avatar-ring, [data-avatar-seed], [data-shape]) > :is(img, span, div):not(.avatar-badge-overlay, .notif-dot) { border: 0 !important; outline: 0 !important; }
.avatar-ring { padding: 0; background: none; }

/* ---------- badge on one line ---------- */
.role-badge { display: inline-flex; flex: none; align-items: center; justify-content: center; vertical-align: middle; }
:is(.post-card-meta-top, .author-line, .leaderboard-username, .profile-dropdown-name-row, .fp-author-line, .pf-reply-card-meta-top, .rcard-author, .hf-peer-name):has(> .role-badge) { white-space: nowrap; }
:is(.post-card-meta-top, .author-line, .profile-dropdown-name-row):has(> .role-badge) { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; }
:is(.post-card-meta-top, .author-line, .profile-dropdown-name-row) > :is(a, span):not(.role-badge) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* profile name: the verified tick and role badge ride the name's line, the name shrinks to fit */
.profile-page .pf-card-body { container-type: inline-size; }
.profile-page .pf-card-name-row { flex-wrap: nowrap; align-items: center; gap: 8px; min-width: 0; }
.profile-page .pf-card-name {
  min-width: 0; font-size: clamp(1.25rem, 8.4cqi, 1.75rem); overflow-wrap: anywhere; text-wrap: balance;
}
.profile-page .pf-card-name-row > :is(.pf-verified, .role-badge) { flex: none; }

/* ---- m3x/app-follow.css ---- */
/* The Follow button: one component for every place a person can be followed (feed, comments, search,
   people rail, user popup, profile). A small tonal pill with a glyph:
     not following -> primary-container pill, "+" glyph, "Follow"
     following     -> quiet outlined pill, check glyph, "Following"
   The glyph is a CSS mask so scripts that rewrite the label with textContent keep working.
   Finite radius in every state; it presses in on tap but never changes shape.
   The profile button already ships real Material Symbols, so it keeps those. */

:is(.follow-btn-inline, .follow-btn-small, .hf-peer-follow, :where(.profile-page #btnFollowToggle)):not(#_) {
  --fh: 26px;
  --fg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z'/%3E%3C/svg%3E");
  appearance: none; -webkit-appearance: none; box-sizing: border-box; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  height: var(--fh); min-height: var(--fh); width: auto; max-width: 100%;
  padding: 0 11px 0 7px; margin: 0; gap: 3px;
  border: 1px solid transparent !important; border-radius: 13px; white-space: nowrap;
  font: 600 .75rem/1 var(--body, inherit); letter-spacing: .01em; text-decoration: none;
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  transition: background-color .2s, color .2s, border-color .2s, transform .35s var(--spring);
  -webkit-tap-highlight-color: transparent;
}
/* the glyph */
:is(.follow-btn-inline, .follow-btn-small, .hf-peer-follow):not(#_)::before {
  content: "" !important; display: block; flex: none; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--fg) center / contain no-repeat; mask: var(--fg) center / contain no-repeat;
}
:is(.follow-btn-inline, .follow-btn-small, .hf-peer-follow).following:not(#_) {
  --fg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E");
  padding: 0 11px 0 7px;
  background: transparent; color: var(--md-on-surface-variant);
  border-color: var(--md-outline-variant) !important;
}

/* profile: bigger hero action, real glyphs, same two tones */
.profile-page #btnFollowToggle { --fh: 36px; padding: 0 16px 0 12px; gap: 6px; font-size: .8125rem; border-radius: 18px; }
.profile-page #btnFollowToggle > .material-symbols-outlined { display: inline-block; font-size: 18px; width: 18px; height: 18px; line-height: 18px; }
.profile-page #btnFollowToggle:is(.pf-btn-outlined, .is-requested) {
  background: transparent; color: var(--md-on-surface-variant); border-color: var(--md-outline-variant) !important;
}

@media (hover: hover) {
  :is(.follow-btn-inline, .follow-btn-small, .hf-peer-follow):not(.following, #_):hover,
  .profile-page #btnFollowToggle.pf-btn-filled:hover { background: color-mix(in srgb, var(--md-primary-container) 82%, var(--md-primary)); }
  :is(.follow-btn-inline, .follow-btn-small, .hf-peer-follow).following:not(#_):hover,
  .profile-page #btnFollowToggle:is(.pf-btn-outlined, .is-requested):hover { background: var(--md-surface-container-high); }
}
:is(.follow-btn-inline, .follow-btn-small, .hf-peer-follow, :where(.profile-page #btnFollowToggle)):active { transform: scale(.95); }
:is(.follow-btn-inline, .follow-btn-small, .hf-peer-follow, :where(.profile-page #btnFollowToggle)):focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
:is(.follow-btn-inline, .follow-btn-small, .hf-peer-follow)[disabled] { opacity: .6; pointer-events: none; }

/* the suggestion rail stacks the pill under the name: it stays compact and centred */
.hf-peer .hf-peer-follow { align-self: center; margin-top: 2px; }

/* ---- m3x/app-contrast.css ---- */
/* Contrast guards. An accent (a subject hue, a creator colour, a tool colour) is a fill, not a
   text colour: a saturated hue on a light card or a dark card is 2:1. --ink() mixes the accent
   toward the surface's own text colour, so it reads on whichever theme is active and still
   looks like the same hue. Use `color: var(--ink-x)` style helpers below, or the same mix inline. */
:root { --ink-mix: 56%; }
[data-theme="dark"] { --ink-mix: 62%; }

.rd-chip-subject { color: color-mix(in srgb, var(--subject-color, var(--md-primary)) var(--ink-mix), var(--md-on-surface)); }
.syl-card-icon { color: color-mix(in srgb, var(--syl-c) var(--ink-mix), var(--md-on-surface)); }
.syl-card-arrow { opacity: 1; color: var(--md-on-surface-variant); }
.news-card-dot { opacity: 1; color: var(--md-on-surface-tertiary); }

/* a fill with a hard-coded colour needs a hard-coded label, never a role colour that flips */
.tools-card-badge { color: var(--tool-on, var(--md-on-primary)); }

/* the old tools page switched all motion off; motion stays, and only reduced-motion turns it off */
.tools-page *, .tools-audio-page * { animation: revert !important; transition: revert !important; }
.tools-page .tools-card:hover, .tools-page .tools-card:focus-visible,
.tools-audio-page .btn:hover, .tools-audio-page .btn.primary:hover, .tools-audio-page .chunk-btn:hover { transform: revert !important; }
@media (prefers-reduced-motion: reduce) { .tools-page *, .tools-audio-page * { animation: none !important; transition: none !important; } }

/* page stylesheets load after this file and set these at the same specificity (opacity .4 and so on);
   `:root` lifts the guard over them. Icons that carry meaning are never faded below the 3:1 line. */
:root .syl-card-arrow, :root .st-chevron, :root .results-quick-link-arrow,
:root .upload-dropzone-hint, :root .neb-field-trigger-placeholder { opacity: 1; }
:root .syl-card-arrow, :root .st-chevron { color: var(--md-on-surface-variant); }
:root .results-quick-link-arrow { color: var(--md-primary); }
:root .news-card-dot { opacity: 1; color: var(--md-on-surface-variant); }
:root .neb-field-trigger-placeholder { color: var(--md-on-surface-variant); }
:root .neb-sheet-close { color: var(--md-on-surface-variant); }

/* ---- m3x/app-badges.css ---- */
/* Badges, last word. ONLY user / role / verification badges are fill-less: Verified, Admin, Teacher, Moderator,
   institution, bot and the badge on a profile picture. They are a glyph in an ink colour (the on-colour of a
   tonal pair, readable on the plain surface in both themes), with no fill, stroke or shadow.
   Everything else -- chips, category and filter pills, subject tags, reply labels (Answer, Correct, Helpful,
   Solved), count pills, status pills -- keeps its tonal surface; those rules live in their own modules. */

:root { --bd-ink: color-mix(in srgb, var(--md-primary) 72%, var(--md-on-surface)); }

:is(.role-badge, .user-badge) {
  background: none !important; border: 0 !important; box-shadow: none !important;
  color: var(--bd-ink);
}

.role-badge { width: auto; min-width: 0; height: auto; }
.role-badge .material-symbols-outlined { color: var(--bd-ink); font-size: 18px; }
.role-badge-admin       { --bd-ink: var(--neb-accent-amber); }
.role-badge-bot         { --bd-ink: var(--neb-accent-violet); }
.role-badge-moderator   { --bd-ink: var(--neb-accent-brand); }
.role-badge-teacher     { --bd-ink: var(--neb-accent-green); }
.role-badge-institution { --bd-ink: var(--neb-accent-indigo); }
.role-badge-explorer    { --bd-ink: var(--neb-accent-amber); }
.role-badge-verified    { --bd-ink: var(--neb-accent-brand); }

.avatar-badge-overlay {
  --bd: 18px; box-sizing: border-box; width: var(--bd); height: var(--bd); border: 0 !important; background: none !important;
  color: var(--badge-bg, var(--md-primary));
}
.avatar-badge-overlay .material-symbols-outlined,
.avatar-badge-overlay.is-verified::after {
  color: var(--badge-bg, var(--md-primary)); font-size: var(--bd); line-height: 1;
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 20;
  -webkit-text-stroke: 3px var(--badge-ring, var(--md-surface)); paint-order: stroke fill;
}
.avatar-badge-overlay.is-verified .material-symbols-outlined { font-size: 0; -webkit-text-stroke: 0; }
.avatar-badge-overlay.is-verified::after { content: "verified"; font-size: var(--bd); }
.pf-verified { background: none !important; border: 0 !important; }
.profile-page .pf-verified .material-symbols-outlined { color: var(--badge-bg, var(--md-primary)); font-size: 22px; }
.profile-page .pf-verified { width: auto; height: auto; }

/* ---- m3x/app-leaderboard.css ---- */
/* Leaderboard: podium for the top three, ranked rows with a score meter, your own row in the primary container.
   No stroke on any avatar, no fill behind a badge, no shadow; hover only moves between rounded shapes. */

.lb-page { max-width: 720px; margin: 0 auto; padding: 8px 16px 64px; font-family: var(--body, 'Poppins', sans-serif); color: var(--md-on-surface); }
.lb-title { margin: 12px 0 20px; font-size: clamp(1.75rem, 6vw, 2.5rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.1; color: var(--md-on-surface); }

/* ---------- podium ---------- */
.lb-podium { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; }
.lb-podium[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.lb-podium[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lb-pod { min-width: 0; }
.lb-pod-link { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 0; text-decoration: none; color: inherit; }
.lb-pod .lb-av { width: 64px; height: 64px; font-size: 1.5rem; margin-bottom: 6px; }
.lb-pod-1 .lb-av { width: 88px; height: 88px; font-size: 2rem; }
.lb-pod-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; font-weight: 600; color: var(--md-on-surface); }
.lb-pod-score { font-size: .875rem; font-weight: 600; color: var(--md-on-surface-variant); font-variant-numeric: tabular-nums; }
.lb-pod-step { align-self: stretch; display: flex; align-items: flex-start; justify-content: center; padding-top: 10px; margin-top: 6px; border-radius: 28px 28px 8px 8px; transition: border-radius .5s var(--spring), transform .35s var(--spring); }
.lb-pod-1 .lb-pod-step { height: 112px; background: var(--md-primary); color: var(--md-on-primary); }
.lb-pod-2 .lb-pod-step { height: 84px; background: var(--md-primary-container); color: var(--md-on-primary-container); }
.lb-pod-3 .lb-pod-step { height: 64px; background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.lb-pod-rank { font-size: 1.75rem; font-weight: 700; line-height: 1; }
.lb-pod-link:hover .lb-pod-step { border-radius: 36px 36px 12px 12px; }
.lb-pod-link:active .lb-pod-step { transform: scale(.97); }
.lb-pod-link.is-me .lb-pod-name { color: var(--md-primary); }

/* ---------- avatar ---------- */
.lb-av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; overflow: hidden; font-weight: 700; font-size: 1.0625rem; text-transform: uppercase; border: 0; box-shadow: none; }
.lb-av img { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }

/* ---------- ranked list ---------- */
.lb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lb-row { display: grid; grid-template-columns: 32px 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 18px 10px 14px; border-radius: 28px; background: var(--md-surface-container-low); color: var(--md-on-surface); text-decoration: none; transition: border-radius .5s var(--spring), background-color .2s, transform .35s var(--spring); }
.lb-row:hover { background: var(--md-surface-container-high); }
.lb-row:active { transform: scale(.985); }
.lb-rank { text-align: center; font-size: 1rem; font-weight: 700; color: var(--md-on-surface-variant); font-variant-numeric: tabular-nums; }
.lb-who { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lb-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: .9375rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-meter { display: block; height: 6px; border-radius: 999px; background: var(--md-surface-variant); overflow: hidden; }
.lb-meter > span { display: block; height: 100%; border-radius: 999px; background: var(--md-primary); transition: width .6s var(--spring); }
.lb-score { min-width: 3.25ch; text-align: right; font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--md-on-surface); }

/* you */
.lb-row.is-me { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.lb-row.is-me:hover { background: var(--md-primary-container); }
.lb-row.is-me :is(.lb-rank, .lb-score) { color: var(--md-on-primary-container); }
.lb-row.is-me .lb-meter { background: color-mix(in srgb, var(--md-primary) 22%, transparent); }

.lb-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 64px 16px; color: var(--md-on-surface-variant); }
.lb-empty .material-symbols-outlined { font-size: 48px; color: var(--md-primary); }
.lb-empty h2 { margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--md-on-surface); }

@media (max-width: 480px) {
  .lb-page { padding-inline: 12px; }
  .lb-pod .lb-av { width: 56px; height: 56px; }
  .lb-pod-1 .lb-av { width: 76px; height: 76px; }
  .lb-row { grid-template-columns: 24px 40px minmax(0, 1fr) auto; gap: 10px; padding: 10px 14px 10px 10px; }
  .lb-row .lb-av { width: 40px; height: 40px; }
}

/* ---- m3x/app-requests.css ---- */
/* Requests: a title row with one filled action, a segmented status filter, and cards that read
   vote | request | status. Status is a glyph and a word in a tone, never a filled badge. */

.rq-page { max-width: 760px; margin: 0 auto; padding: 8px 16px 72px; font-family: var(--body, 'Poppins', sans-serif); color: var(--md-on-surface); }
.rq-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 20px; }
.rq-title { margin: 0; font-size: clamp(1.75rem, 6vw, 2.5rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.1; color: var(--md-on-surface); }
.request-form-hidden { display: none; }

/* buttons: pills that stay rounded in every state */
.rq-new, .rq-btn { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 20px; border: 0; border-radius: 999px; font: 600 .9375rem/1 var(--body, inherit); cursor: pointer; white-space: nowrap; transition: border-radius .5s var(--spring), background-color .2s, transform .35s var(--spring); -webkit-tap-highlight-color: transparent; }
.rq-new { padding-left: 14px; background: var(--md-primary); color: var(--md-on-primary); }
.rq-new .material-symbols-outlined { font-size: 22px; }
.rq-btn-filled { background: var(--md-primary); color: var(--md-on-primary); }
.rq-btn-text { background: transparent; color: var(--md-primary); }
.rq-btn-text:hover { background: var(--md-secondary-container); }
.rq-new:hover, .rq-btn-filled:hover { background: var(--md-primary); filter: brightness(1.12); }
.rq-new:active, .rq-btn:active { transform: scale(.96); }

/* form */
.rq-form-wrap { margin-bottom: 20px; }
.rq-form { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 28px; background: var(--md-surface-container-low); }
.rq-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rq-form-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* filters */
.rq-filters { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.rq-seg { display: flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--md-surface-container); overflow-x: auto; scrollbar-width: none; }
.rq-seg::-webkit-scrollbar { display: none; }
.rq-seg-opt { flex: 1 0 auto; position: relative; cursor: pointer; }
.rq-seg-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.rq-seg-opt span { display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border-radius: 999px; font-size: .875rem; font-weight: 600; color: var(--md-on-surface-variant); transition: background-color .2s, color .2s; }
.rq-seg-opt:hover span { background: var(--md-surface-variant); }
.rq-seg-opt input:checked + span { background: var(--md-primary); color: var(--md-on-primary); }
.rq-seg-opt input:focus-visible + span { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.rq-selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rq-select { appearance: none; -webkit-appearance: none; width: 100%; height: 44px; padding: 0 16px; border: 0 !important; background-image: none; border-radius: 999px; background-color: var(--md-surface-container-low); color: var(--md-on-surface); font: 500 .875rem/1 var(--body, inherit); cursor: pointer; text-overflow: ellipsis; }
.rq-select:hover { background-color: var(--md-surface-container-high); }
.rq-select:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }

/* cards */
.rq-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rq-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 16px; padding: 16px 18px 16px 16px; border-radius: 28px; background: var(--md-surface-container-low); transition: border-radius .5s var(--spring), background-color .2s; }
.rq-card:hover { background: var(--md-surface-container); }
.rq-vote { appearance: none; -webkit-appearance: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 52px; height: 64px; padding: 0; border: 0; border-radius: 999px; background: var(--md-secondary-container); color: var(--md-on-secondary-container); font: 700 .9375rem/1 var(--body, inherit); cursor: pointer; transition: background-color .2s, color .2s, transform .35s var(--spring); -webkit-tap-highlight-color: transparent; }
.rq-vote .material-symbols-outlined { font-size: 22px; }
.rq-vote:hover { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.rq-vote:active { transform: scale(.92); }
.rq-vote.is-on, .rq-vote.is-on:hover { background: var(--md-primary); color: var(--md-on-primary); }
.rq-body { min-width: 0; padding-top: 2px; }
.rq-card-title { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; color: var(--md-on-surface); overflow-wrap: anywhere; }
.rq-desc { margin: 6px 0 0; font-size: .9375rem; line-height: 1.5; color: var(--md-on-surface-variant); overflow-wrap: anywhere; }
.rq-desc a { color: var(--md-primary); }
.rq-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 10px 0 0; font-size: .8125rem; font-weight: 500; color: var(--md-on-surface-variant); }
.rq-meta > span:first-child:not(:last-child) { color: var(--md-primary); font-weight: 600; }

.rq-status { display: inline-flex; align-items: center; gap: 4px; align-self: start; height: 28px; padding: 0 12px 0 8px; border-radius: 14px; font-size: .8125rem; font-weight: 600; background: var(--md-surface-container-high); color: var(--md-on-surface-variant); white-space: nowrap; }
.rq-status .material-symbols-outlined { font-size: 18px; }
.rq-status-open { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.rq-status-fulfilled { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.rq-status-closed { background: var(--md-surface-container-high); color: var(--md-on-surface-variant); }

.rq-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 16px; color: var(--md-on-surface-variant); }
.rq-empty .material-symbols-outlined { font-size: 48px; color: var(--md-primary); }
.rq-empty p { margin: 0; font-size: 1rem; font-weight: 500; }

@media (max-width: 520px) {
  .rq-page { padding-inline: 12px; }
  .rq-card { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px; }
  .rq-status { grid-column: 2; justify-self: start; }
  .rq-vote { width: 48px; height: 60px; }
  .rq-form-row { grid-template-columns: 1fr; }
}

/* ---- m3x/app-post-actions.css ---- */
/* The row under a post (like, comments, views, share). It never overflows its card: the row is a
   size container, and when it gets narrow the words drop away and the counts and glyphs stay. */

.post-card-actions.post-card-actions {
  container: pca / inline-size;
  display: flex; flex-wrap: nowrap; align-items: center; gap: 2px;
  width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
}
.post-card-actions.post-card-actions > :is(button, a, .act-btn-stat) { flex: 0 1 auto; min-width: 0; white-space: nowrap; }
.post-card-actions.post-card-actions > .fp-action-spacer { flex: 1 1 0; min-width: 0; }

@container pca (max-width: 400px) {
  .post-card-actions .post-action-label { display: none; }
  .post-card-actions > :is(button, a, .act-btn-stat) { padding-inline: 8px; }
}

/* ---- m3x/app-sizing.css ---- */
/* One size scale for buttons, loaded last. Page actions and dialog actions are 40px, compact controls 32px,
   follow buttons 28px (app-follow.css). Pills stay finite (radius = half the height). */

.x-btn { --h: 40px; padding: 0 20px; gap: 8px; font-size: .875rem; border-radius: 20px; }
.x-btn .material-symbols-outlined { font-size: 18px; }
.x-icon-btn { width: 40px; height: 40px; border-radius: 20px; }
.x-icon-btn .material-symbols-outlined { font-size: 22px; }
.md-btn { min-height: 40px; padding: 0 20px; gap: 8px; font-size: .875rem; line-height: 1; }
.md-btn .material-symbols-outlined { font-size: 18px; }
.md-btn-small { min-height: 32px; padding: 0 14px; font-size: .8125rem; }
.neb-dialog-actions .md-btn, .neb-dialog-actions button { min-height: 40px; }
.neb-sheet .x-btn, .neb-dialog .x-btn { --h: 40px; }
.ga-sheet .ga-close { align-self: center; min-width: 120px; }
.profile-page .pf-btn { min-height: 36px; padding: 0 18px; gap: 6px; border-radius: 18px; font-size: .8125rem; }
.profile-page .pf-btn .material-symbols-outlined { font-size: 18px; }
.vw-cta .x-btn { --h: 40px; padding: 0 22px; font-size: .875rem; border-radius: 20px; }

/* ---- m3x/app-onboard.css ---- */
/* Welcome flow (web/onboarding.html + js/onboarding.js).
   Flat tonal surfaces, finite radii, no shadows, no gradients. Motion is spring-based and
   switches off under prefers-reduced-motion. */

.ob-page { background: var(--md-surface); }
.ob-page main, .ob-page .site-main { padding: 0 !important; max-width: none !important; }

.ob { min-height: 100dvh; display: flex; flex-direction: column; color: var(--md-on-surface); }

/* ---- top: brand, progress, exit ---- */
.ob-top { display: flex; align-items: center; gap: 20px; padding: 16px clamp(16px, 4vw, 40px); }
.ob-brand { flex: none; }
.ob-progress { flex: 1; display: flex; gap: 6px; list-style: none; margin: 0 auto; padding: 0; max-width: 520px; }
.ob-seg-dot { position: relative; flex: 1 1 0; height: 8px; border-radius: 8px; overflow: hidden;
  background: var(--md-surface-container-highest);
  transition: flex-grow .55s var(--spring); }
.ob-seg-dot::after { content: ""; position: absolute; inset: 0; border-radius: 8px; background: var(--md-primary);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--spring); }
.ob-seg-dot.is-done::after, .ob-seg-dot.is-now::after { transform: scaleX(1); }
.ob-seg-dot.is-now { flex-grow: 2.6; }
.ob-exit { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 22px;
  color: var(--md-on-surface-variant); text-decoration: none; transition: background .2s, border-radius .35s var(--spring); }
.ob-exit:hover { background: var(--md-surface-container-high); border-radius: 14px; }

/* ---- body ---- */
.ob-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px;
  width: min(1120px, 100%); margin: 0 auto; padding: 12px clamp(16px, 4vw, 40px) 140px; }
.ob-stage { display: grid; align-content: start; min-width: 0; }
.ob-step { grid-area: 1 / 1; min-width: 0; }
.ob-step.in-fwd { animation: obInFwd .55s var(--spring) both; }
.ob-step.in-back { animation: obInBack .55s var(--spring) both; }
.ob-step.in-first { animation: obRise .7s var(--spring) both; }
.ob-step.out-fwd { animation: obOutFwd .28s var(--ease-io) both; pointer-events: none; }
.ob-step.out-back { animation: obOutBack .28s var(--ease-io) both; pointer-events: none; }
@keyframes obInFwd { from { opacity: 0; transform: translateX(56px); } to { opacity: 1; transform: none; } }
@keyframes obInBack { from { opacity: 0; transform: translateX(-56px); } to { opacity: 1; transform: none; } }
@keyframes obOutFwd { to { opacity: 0; transform: translateX(-56px); } }
@keyframes obOutBack { to { opacity: 0; transform: translateX(56px); } }
@keyframes obRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes obPop { from { opacity: 0; transform: scale(.82) translateY(8px); } to { opacity: 1; transform: none; } }

.ob-title { margin: 8px 0 28px; font: 700 clamp(1.7rem, 3.4vw, 2.5rem)/1.12 var(--md-font-display); letter-spacing: -.01em;
  color: var(--md-on-surface); outline: none; }

/* ---- labels, groups, fields ---- */
.ob-label { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 10px; font-weight: 600; font-size: 1rem; }
.ob-label small { font-weight: 500; font-size: .78rem; color: var(--md-on-surface-variant); }
.ob-group { margin: 14px 0 8px; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--md-on-surface-variant); }
.ob-form { display: grid; gap: 4px; max-width: 640px; }
.ob-field { display: grid; gap: 8px; margin-top: 14px; }
.ob-field > label { font-weight: 600; font-size: .9rem; }
.ob-input { width: 100%; box-sizing: border-box; min-height: 54px; padding: 0 18px; border-radius: 18px;
  border: 1.5px solid var(--x-field-line, var(--md-outline-variant)); background: var(--x-field, var(--md-surface-container-lowest));
  color: var(--md-on-surface); font: 500 1rem var(--md-font); transition: border-color .2s; }
.ob-input::placeholder { color: var(--md-on-surface-variant); opacity: .8; }
.ob-input:hover { border-color: var(--md-outline); }
.ob-input:focus { outline: none; border-color: var(--md-primary); }
.ob-textarea { padding: 14px 18px; min-height: 96px; resize: vertical; line-height: 1.5; }

/* ---- chips ---- */
.ob-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px; border: 0; cursor: pointer;
  border-radius: 21px; background: var(--md-surface-container-high); color: var(--md-on-surface);
  font: 500 .9rem var(--md-font); animation: obPop .45s var(--spring) both; animation-delay: calc(var(--i, 0) * 26ms);
  transition: background .2s, color .2s, border-radius .35s var(--spring), transform .2s var(--spring); }
.ob-chip .material-symbols-outlined { font-size: 19px; }
.ob-chip:hover { background: var(--md-surface-container-highest); border-radius: 15px; }
.ob-chip:active { transform: scale(.95); }
.ob-chip.is-on { background: var(--md-primary-container); color: var(--md-on-primary-container); font-weight: 600; border-radius: 15px; }
.ob-chip-custom { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.ob-more { align-self: center; font-size: .78rem; color: var(--md-on-surface-variant); padding: 0 6px; }
.ob-picked { display: flex; margin-bottom: 8px; }
.ob-picked:empty { display: none; }
.ob-combo .ob-chips, .ob-tagbox .ob-chips { margin-top: 10px; }
.ob-tagbox .ob-tags:empty, .ob-combo-list:empty { display: none; }

/* ---- status tiles ---- */
.ob-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.ob-tile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; cursor: pointer; text-align: left;
  border-radius: 24px; background: var(--md-surface-container-low); color: var(--md-on-surface);
  animation: obPop .5s var(--spring) both; animation-delay: calc(var(--i, 0) * 35ms);
  transition: background .25s, border-radius .4s var(--spring), transform .25s var(--spring); }
.ob-tile:hover { background: var(--md-surface-container); border-radius: 18px; }
.ob-tile:active { transform: scale(.97); }
.ob-tile-glyph { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 16px;
  background: var(--md-tertiary-container); color: var(--md-on-tertiary-container);
  transition: background .3s, color .3s, border-radius .5s var(--spring), transform .5s var(--spring); }
.ob-tile-text { display: grid; gap: 1px; min-width: 0; }
.ob-tile-text b { font-weight: 600; font-size: .95rem; }
.ob-tile-text small { font-size: .78rem; color: var(--md-on-surface-variant); }
.ob-tile.is-on { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.ob-tile.is-on small { color: var(--md-on-primary-container); opacity: .8; }
.ob-tile.is-on .ob-tile-glyph { background: var(--md-primary); color: var(--md-on-primary); border-radius: 22px 12px 22px 12px; transform: rotate(-6deg) scale(1.06); }

/* ---- progressive reveal inside the education picker ---- */
.ob-reveal { animation: obRise .55s var(--spring) both; }
.ob-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 22px; background: var(--md-surface-container-high); margin-bottom: 10px; }
.ob-seg-btn { border: 0; min-height: 36px; padding: 0 16px; border-radius: 18px; background: transparent; color: var(--md-on-surface);
  font: 500 .86rem var(--md-font); cursor: pointer; transition: background .25s, border-radius .35s var(--spring); }
.ob-seg-btn.is-on { background: var(--md-secondary-container); color: var(--md-on-secondary-container); font-weight: 600; }

/* ---- role step ---- */
.ob-split { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 32px; align-items: center; }
.ob-hero { position: relative; width: 210px; height: 210px; }
.ob-blob { position: absolute; inset: 0; background: var(--md-primary-container); animation: obMorph 9s var(--ease-io) infinite; }
.ob-blob.b2 { inset: 14%; background: var(--md-tertiary-container); animation-duration: 11s; animation-direction: reverse; }
.ob-blob.b3 { inset: 30%; background: var(--md-secondary-container); animation-duration: 7s; }
@keyframes obMorph {
  0%   { border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%; transform: rotate(0deg); }
  33%  { border-radius: 40% 60% 45% 55% / 58% 42% 58% 42%; transform: rotate(120deg); }
  66%  { border-radius: 52% 48% 38% 62% / 42% 58% 46% 54%; transform: rotate(240deg); }
  100% { border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%; transform: rotate(360deg); }
}
.ob-hero-core { position: absolute; inset: 0; display: grid; place-items: center; color: var(--md-on-primary-container); }
.ob-hero-core .material-symbols-outlined { font-size: 52px; }
.ob-hero-core .pop { animation: obHeroPop .6s var(--spring) both; }
@keyframes obHeroPop { from { transform: scale(.4) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }

.ob-roles { display: grid; gap: 10px; }
.ob-role { position: relative; display: flex; align-items: center; gap: 16px; padding: 14px 18px; border: 0; cursor: pointer; text-align: left;
  border-radius: 30px; background: var(--md-surface-container-low); color: var(--md-on-surface);
  animation: obPop .55s var(--spring) both; animation-delay: calc(var(--i, 0) * 70ms);
  transition: background .25s, border-radius .45s var(--spring), transform .3s var(--spring); }
.ob-role:hover { background: var(--md-surface-container); border-radius: 22px; }
.ob-role:active { transform: scale(.98); }
.ob-role-glyph { flex: none; width: 58px; height: 58px; display: grid; place-items: center;
  background: var(--md-tertiary-container); color: var(--md-on-tertiary-container);
  transition: background .3s, color .3s, transform .55s var(--spring); }
.ob-role-glyph .material-symbols-outlined { font-size: 28px; }
.ob-role-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ob-role-text b { font-size: 1.05rem; font-weight: 600; }
.ob-role-text small { font-size: .82rem; color: var(--md-on-surface-variant); }
.ob-role-check { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 12px; background: var(--md-primary);
  color: var(--md-on-primary); transform: scale(0) rotate(-90deg); transition: transform .5s var(--spring); }
.ob-role-check .material-symbols-outlined { font-size: 20px; }
.ob-role.is-on { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.ob-role.is-on small { color: var(--md-on-primary-container); opacity: .8; }
.ob-role.is-on .ob-role-glyph { background: var(--md-primary); color: var(--md-on-primary); transform: rotate(-10deg) scale(1.1); }
.ob-role.is-on .ob-role-check { transform: none; }

/* ---- live preview ---- */
.ob-preview { position: sticky; top: 24px; align-self: start; }
.ob-card { border-radius: 32px; overflow: hidden; padding: 0 22px 24px; background: var(--md-surface-container-low); }
.ob-card-banner { height: 96px; margin: 0 -22px; background: var(--md-primary-container); }
.ob-card-avatar { width: 92px; height: 92px; margin-top: -46px; display: grid; place-items: center; position: relative;
  background: var(--md-primary); color: var(--md-on-primary); border-radius: 46px;
  font: 700 2rem var(--md-font-display); transition: background .3s; }
.ob-card-name { margin-top: 14px; font: 700 1.3rem/1.2 var(--md-font-display); overflow-wrap: anywhere; }
.ob-card-user { margin-top: 2px; font-size: .88rem; color: var(--md-on-surface-variant); }
.ob-card-headline { margin-top: 12px; font-weight: 500; }
.ob-card-headline:empty, .ob-card-edu:empty, .ob-card-chips:empty { display: none; }
.ob-card-edu { margin-top: 8px; font-size: .88rem; font-weight: 600; color: var(--md-primary); }
.ob-card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.ob-card-chip { padding: 5px 12px; border-radius: 14px; font-size: .78rem; font-weight: 600; background: var(--md-secondary-container);
  color: var(--md-on-secondary-container); animation: obPop .4s var(--spring) both; animation-delay: calc(var(--i, 0) * 40ms); }
.ob-card .pop { animation: obPop .35s var(--spring) both; }

/* ---- done ---- */
.ob-done { position: relative; display: grid; justify-items: center; gap: 24px; padding: 40px 0 8px; text-align: center; }
.ob-done-core { width: 132px; height: 132px; display: grid; place-items: center; background: var(--md-primary); color: var(--md-on-primary);
  animation: obHeroPop .8s var(--spring) both; }
.ob-done-core .material-symbols-outlined { font-size: 64px; }
.ob-done-line { max-width: 420px; margin: 0; color: var(--md-on-surface-variant); line-height: 1.55; }
.ob-burst { position: absolute; top: 106px; left: 50%; width: 0; height: 0; }
.ob-confetti { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; opacity: 0;
  background: var(--md-tertiary-container); animation: obBurst 1.3s var(--spring) both; animation-delay: calc(var(--i) * 45ms + .25s); }
.ob-confetti:nth-child(3n) { background: var(--md-primary-container); }
.ob-confetti:nth-child(3n+1) { background: var(--md-secondary-container); }
@keyframes obBurst {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.3); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-150px) scale(1.25) rotate(160deg); }
}

/* ---- dock ---- */
.ob-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 12px;
  padding: 14px clamp(16px, 4vw, 40px) calc(14px + env(safe-area-inset-bottom)); background: var(--md-surface);
  border-top: 1px solid var(--md-outline-variant); }
.ob-error { flex: 1; margin: 0; text-align: right; font-size: .9rem; font-weight: 500; color: var(--md-error, #b3261e); min-height: 1.2em; }
.ob-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 28px; border: 0; cursor: pointer;
  border-radius: 28px; font: 600 1rem var(--md-font);
  transition: background .2s, border-radius .4s var(--spring), transform .3s var(--spring), opacity .2s; }
.ob-btn[hidden] { display: none; }
.ob-btn:hover { border-radius: 20px; }
.ob-btn:active { transform: scale(.96); }
.ob-btn:disabled { opacity: .6; cursor: progress; }
.ob-btn-fill { background: var(--md-primary); color: var(--md-on-primary); }
.ob-btn-fill:hover { background: var(--md-on-primary-fixed-variant); }
.ob-btn-text { background: transparent; color: var(--md-primary); padding: 0 18px; }
.ob-btn-text:hover { background: var(--md-surface-container-high); }
.ob-btn.shake { animation: obShake .4s var(--ease-io); }
@keyframes obShake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.ob-noscript { text-align: center; padding: 24px; }

@media (max-width: 900px) {
  .ob-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ob-preview { display: none; }
  .ob-split { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ob-hero { width: 124px; height: 124px; margin: 0 auto; }
  .ob-hero-core .material-symbols-outlined { font-size: 34px; }
  .ob-brand { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ob *, .ob *::before, .ob *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}

/* ---- shared date + gender controls (components/_dob_field, _gender_tiles) ---- */
.ob-form-stack { gap: 22px; }
.ob-form-stack .ob-field { margin-top: 0; }
.ob-form .neb-pick-group { margin: 0; display: grid; gap: 8px; }
.ob-form .neb-pick-group .md-label { margin: 0; font-weight: 600; font-size: .9rem; color: var(--md-on-surface); }
.ob-form .neb-tiles { max-width: 480px; }
.ob-tiles-compact { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
.ob-tiles-compact .ob-tile { padding: 10px 12px; }
.ob-tiles-compact .ob-tile-glyph { width: 40px; height: 40px; }
.ob-edu > .ob-reveal + .ob-reveal { margin-top: 4px; }
.ob-edu .ob-label { margin-top: 20px; }
.ob-edu > .ob-reveal:first-child .ob-label { margin-top: 0; }
.ob-combo .ob-input { margin-top: 12px; }

/* ---- m3x/app-auth.css ---- */
/* Sign in / create account / verify / reset (web/login.html + js/auth.js).
   Fields and buttons are the welcome flow's .ob-input / .ob-btn (app-onboard.css), so the two
   screens cannot drift. Flat tonal surfaces, finite radii, no shadows, no gradients. */

.auth-page { background: var(--md-surface); }
.auth-page main, .auth-page .site-main { padding: 0 !important; max-width: none !important; }

.ax { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 16px; padding: 16px; box-sizing: border-box; }
.ax-side { display: flex; flex-direction: column; padding: 8px clamp(8px, 3vw, 40px) 24px; min-width: 0; align-items: flex-start; }
.ax-brand { padding: 4px 0 0; }
.ax { --x-field: var(--md-surface-container-lowest); --x-field-line: var(--md-outline-variant); }
[data-theme="dark"] .ax { --x-field: var(--md-surface-container-high); --x-field-line: var(--md-outline); color-scheme: dark; }
.ax-card { margin: auto 0; padding: 28px clamp(20px, 3.4vw, 32px) 32px; width: 100%; max-width: 460px; box-sizing: border-box; align-self: flex-start;
  border-radius: 32px; background: var(--md-surface-container-low); }

/* ---- mode switch ---- */
.ax-seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 5px; margin-bottom: 24px;
  border-radius: 28px; background: var(--md-surface-container-highest); width: 100%; box-sizing: border-box; }
.ax-seg.is-hidden { display: none; }
.ax-seg button { position: relative; z-index: 1; min-height: 44px; border: 0; background: transparent; cursor: pointer;
  font: 600 .95rem var(--md-font); color: var(--md-on-surface-variant); border-radius: 22px; transition: color .25s; }
.ax-seg button[aria-selected="true"] { color: var(--md-on-primary-container); }
.ax-seg-pill { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; border-radius: 22px; background: var(--md-primary-container);
  transition: transform .55s var(--spring), width .55s var(--spring); }

/* ---- panels ---- */
.ax-panel { display: none; }
.ax-panel.is-on { display: block; }
.ax-panel.from-right { animation: axInR .5s var(--spring) both; }
.ax-panel.from-left { animation: axInL .5s var(--spring) both; }
@keyframes axInR { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes axInL { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.ax-title { margin: 0 0 22px; font: 700 clamp(1.8rem, 3.6vw, 2.4rem)/1.1 var(--md-font-display); letter-spacing: -.01em; outline: none; }
.ax-lead { margin: -10px 0 22px; color: var(--md-on-surface-variant); overflow-wrap: anywhere; }
.ax-lead strong { color: var(--md-on-surface); }
.ax-form { display: grid; gap: 4px; }
.ax-form[hidden] { display: none; }
.ax-reveal { margin-top: 26px; animation: obRise .55s var(--spring) both; }
.ax-submit { width: 100%; margin-top: 18px; }
.ax-error { margin: 10px 2px 0; min-height: 0; font-size: .88rem; font-weight: 500; color: var(--md-error); display: none; }
.ax-error.on { display: block; animation: obRise .3s var(--spring) both; }
.ob-input.has-error { border-color: var(--md-error); }
.ax-link { justify-self: center; margin-top: 10px; padding: 8px 14px; border: 0; background: transparent; cursor: pointer; border-radius: 18px;
  font: 600 .9rem var(--md-font); color: var(--md-primary); transition: background .2s, border-radius .35s var(--spring); }
.ax-link:hover { background: var(--md-surface-container-highest); border-radius: 12px; }
.ax-link:disabled { color: var(--md-on-surface-variant); cursor: default; background: transparent; }
.ax-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 16px -10px; padding: 8px 14px 8px 10px; border: 0; background: transparent;
  cursor: pointer; border-radius: 20px; font: 600 .9rem var(--md-font); color: var(--md-on-surface-variant); transition: background .2s, border-radius .35s var(--spring); }
.ax-back:hover { background: var(--md-surface-container-highest); border-radius: 12px; }

/* ---- password, username status, strength ---- */
.ax-pass, .ax-status-wrap { position: relative; }
.ax-pass .ob-input { padding-right: 56px; }
.ax-eye { position: absolute; top: 7px; right: 8px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: transparent;
  cursor: pointer; border-radius: 20px; color: var(--md-on-surface-variant); transition: background .2s, border-radius .35s var(--spring); }
.ax-eye:hover { background: var(--md-surface-container-highest); border-radius: 12px; }
.ax-status-wrap .ob-input { padding-right: 96px; }
.ax-status { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: 12px; opacity: 0; transition: opacity .25s; }
.ax-status.ok { opacity: 1; background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.ax-status.bad { opacity: 1; background: var(--md-error-container, var(--md-surface-container-high)); color: var(--md-on-error-container, var(--md-error)); }
.ax-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 4px; }
.ax-meter i { height: 6px; border-radius: 3px; background: var(--md-outline-variant); transition: background .3s; }
.ax-meter[data-level="1"] i:nth-child(1) { background: var(--md-error); }
.ax-meter[data-level="2"] i:nth-child(-n+2), .ax-meter[data-level="3"] i:nth-child(-n+3), .ax-meter[data-level="4"] i { background: var(--md-primary); }

/* ---- code boxes ---- */
.ax-otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.ax-otp input { width: 100%; box-sizing: border-box; height: 64px; text-align: center; font: 700 1.5rem var(--md-font-display); color: var(--md-on-surface);
  border-radius: 18px; border: 1.5px solid var(--x-field-line); background: var(--x-field); padding: 0;
  transition: border-color .2s, background .25s, border-radius .35s var(--spring), transform .3s var(--spring); }
.ax-otp input:focus { outline: none; border-color: var(--md-primary); border-radius: 24px; transform: translateY(-3px); }
.ax-otp input:focus { background: var(--x-field); }
.ax-otp input.filled { background: var(--md-primary-container); border-color: transparent; color: var(--md-on-primary-container); }
.ax-code { letter-spacing: .5em; text-align: center; font-weight: 700; }
.ax-shake .ax-otp { animation: obShake .4s var(--ease-io); }

/* ---- social ---- */
.ax-or { display: flex; align-items: center; gap: 14px; margin: 26px 0 18px; color: var(--md-on-surface-variant); font-size: .85rem; }
.ax-or::before, .ax-or::after { content: ""; flex: 1; height: 1px; background: var(--md-outline-variant); }
.ax-or span { color: var(--md-on-surface-variant); }
.ax-social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ax-social-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border-radius: 26px; text-decoration: none;
  border: 1.5px solid var(--x-field-line); background: var(--x-field); color: var(--md-on-surface); font-weight: 600; font-size: .95rem;
  transition: background .2s, border-radius .4s var(--spring), transform .3s var(--spring); }
.ax-social-btn:hover { background: var(--md-surface-container-highest); border-radius: 18px; }
.ax-social-btn:focus-visible { outline: 0; border-color: var(--md-primary); }
.ax-social-btn:active { transform: scale(.97); }

.ax-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: axSpin .7s linear infinite; }
@keyframes axSpin { to { transform: rotate(360deg); } }

/* ---- art side: shapes that rearrange with the mode ---- */
.ax-art { position: relative; overflow: hidden; border-radius: 44px; background: var(--md-primary-container); min-height: 480px; }
.ax-shape { position: absolute; width: var(--w); height: var(--w); left: var(--l); top: var(--t);
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)) scale(var(--sc, 1));
  transition: transform 1.1s var(--spring-soft); }
.ax-shape > span { display: block; width: 100%; height: 100%; background: var(--c); animation: axFloat var(--d, 9s) ease-in-out infinite alternate; }
@keyframes axFloat { from { transform: translateY(-10px) rotate(-5deg); } to { transform: translateY(12px) rotate(6deg); } }
.ax-s1 { --w: 22%; --l: 12%; --t: 14%; --c: var(--md-tertiary-container); --d: 8s; }
.ax-s2 { --w: 18%; --l: 66%; --t: 10%; --c: var(--md-secondary-container); --d: 10s; }
.ax-s3 { --w: 20%; --l: 70%; --t: 58%; --c: var(--md-primary); --d: 7s; }
.ax-s4 { --w: 24%; --l: 8%; --t: 62%; --c: var(--md-surface-container-lowest); --d: 11s; }
.ax-s5 { --w: 12%; --l: 44%; --t: 6%; --c: var(--md-tertiary); --d: 6s; }
.ax-s6 { --w: 14%; --l: 40%; --t: 80%; --c: var(--md-primary-fixed-dim); --d: 9s; }
.ax[data-mode="signup"] .ax-s1 { --x: 90%; --y: 30%; --r: 40deg; --sc: 1.15; }
.ax[data-mode="signup"] .ax-s2 { --x: -120%; --y: 60%; --r: -30deg; }
.ax[data-mode="signup"] .ax-s3 { --x: -60%; --y: -50%; --r: 70deg; --sc: .9; }
.ax[data-mode="signup"] .ax-s4 { --x: 110%; --y: -40%; --r: 25deg; --sc: 1.1; }
.ax[data-mode="signup"] .ax-s5 { --x: -140%; --y: 380%; --sc: 1.5; }
.ax[data-mode="signup"] .ax-s6 { --x: 60%; --y: -300%; --sc: 1.3; }
.ax[data-mode="verify"] .ax-s1, .ax[data-mode="forgot"] .ax-s1 { --x: 150%; --y: 160%; --r: -50deg; --sc: .8; }
.ax[data-mode="verify"] .ax-s2, .ax[data-mode="forgot"] .ax-s2 { --x: -150%; --y: 200%; --r: 60deg; --sc: 1.2; }
.ax[data-mode="verify"] .ax-s3, .ax[data-mode="forgot"] .ax-s3 { --x: -100%; --y: 20%; --r: -20deg; --sc: 1.25; }
.ax[data-mode="verify"] .ax-s4, .ax[data-mode="forgot"] .ax-s4 { --x: 140%; --y: -120%; --r: 50deg; --sc: .85; }
.ax[data-mode="verify"] .ax-s5, .ax[data-mode="forgot"] .ax-s5 { --x: 200%; --y: 500%; --sc: 1.8; }
.ax[data-mode="verify"] .ax-s6, .ax[data-mode="forgot"] .ax-s6 { --x: -60%; --y: -380%; --sc: 1.6; }
.ax-core { position: absolute; left: 50%; top: 50%; width: 152px; height: 152px; margin: -76px 0 0 -76px; display: grid; place-items: center;
  background: var(--md-surface-container-lowest); animation: axCore 14s linear infinite; }
.ax-core img { width: 88px; height: 88px; animation: axCoreCounter 14s linear infinite; }
@keyframes axCore { to { transform: rotate(360deg); } }
@keyframes axCoreCounter { to { transform: rotate(-360deg); } }

@media (max-width: 900px) {
  .ax { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
  .ax-art { display: none; }
  .ax-side { padding: 16px 20px 24px; }
  .ax-card { max-width: 480px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ax *, .ax *::before, .ax *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---- spam-folder note and other tonal hints ---- */
.ax-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; padding: 12px 14px; border-radius: 16px;
  background: var(--md-secondary-container); color: var(--md-on-secondary-container); font-size: .88rem; font-weight: 500; line-height: 1.4; }
.ax-note .material-symbols-outlined { flex: none; font-size: 20px; margin-top: 1px; }
.ax-reveal > .ax-note { margin-top: 0; }
.ax-lead { margin: -10px 0 16px; }

/* ---- the browser's own autofill must not repaint the field in a light colour ---- */
.ax .ob-input:-webkit-autofill, .ax .ob-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--md-on-surface); caret-color: var(--md-on-surface);
  transition: background-color 600000s 0s, color 600000s 0s; }

/* ---- dark: the art is a tonal surface with the brand tones as shapes, not a saturated slab ---- */
[data-theme="dark"] .ax-art { background: var(--md-surface-container); }
[data-theme="dark"] .ax-s1 { --c: var(--md-tertiary-container); }
[data-theme="dark"] .ax-s2 { --c: var(--md-secondary-container); }
[data-theme="dark"] .ax-s3 { --c: var(--md-primary-container); }
[data-theme="dark"] .ax-s4 { --c: var(--md-surface-container-highest); }
[data-theme="dark"] .ax-s5 { --c: var(--md-tertiary); }
[data-theme="dark"] .ax-s6 { --c: var(--md-primary); }
[data-theme="dark"] .ax-core { background: var(--md-surface-container-highest); }

/* ---- sizes: roomy desktop, centred tablet, full-bleed phone ---- */
@media (min-width: 1500px) {
  .ax { grid-template-columns: minmax(0, 680px) minmax(0, 1fr); }
  .ax-card { max-width: 500px; }
}
@media (max-width: 900px) {
  .ax { min-height: 100dvh; }
  .ax-side { align-items: stretch; padding: max(16px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); }
  .ax-brand { display: flex; justify-content: center; }
  .ax-card { margin: auto; padding: 28px 28px 32px; }
}
@media (max-width: 600px) {
  .ax-side { padding: max(12px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); }
  .ax-brand { justify-content: flex-start; }
  .ax-card { max-width: none; margin: 8px 0 0; padding: 20px 4px 24px; background: transparent; border-radius: 4px; }
  .ax-title { margin-bottom: 18px; }
  .ax-social { grid-template-columns: 1fr; }
  .ax-otp { gap: 6px; }
  .ax-otp input { height: 56px; border-radius: 16px; font-size: 1.35rem; }
}
@media (max-width: 360px) {
  .ax-otp { gap: 4px; }
  .ax-otp input { height: 50px; border-radius: 14px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .ax-card { padding-top: 16px; padding-bottom: 20px; margin: 0 auto; }
  .ax-seg { margin-bottom: 16px; }
  .ax-title { margin-bottom: 12px; }
}

/* ---- m3x/app-portfolio.css ---- */
/* Profile portfolio card (web/profile/_portfolio.html + js/portfolio.js).
   Tonal tags are UI chips, so they keep a surface; nothing here is a badge on a user. */
.pf-folio { display: grid; gap: 22px; }
.pf-folio-edu { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pf-folio-glyph { flex: none; width: 52px; height: 52px; display: grid; place-items: center; background: var(--md-primary-container); color: var(--md-on-primary-container); }
.pf-folio-edu-text { display: grid; gap: 2px; min-width: 0; flex: 1 1 160px; }
.pf-folio-edu-text b { font-weight: 600; font-size: 1rem; overflow-wrap: anywhere; }
.pf-folio-edu-text small { color: var(--md-on-surface-variant); font-size: .8rem; }
.pf-folio-tags, .pf-folio-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-folio-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--md-on-surface-variant); }
.pf-folio-h .material-symbols-outlined { font-size: 18px; }
.pf-tag { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 16px; border: 0; font: 600 .8rem var(--md-font);
  background: var(--md-secondary-container); color: var(--md-on-secondary-container); text-decoration: none; }
.pf-tag .material-symbols-outlined { font-size: 17px; }
.pf-tag-open { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.pf-tag-btn { cursor: pointer; background: var(--md-surface-container-high); color: var(--md-on-surface); min-height: 38px; transition: background .2s, border-radius .35s var(--spring); }
.pf-tag-btn:hover { background: var(--md-surface-container-highest); border-radius: 12px; }
.pf-folio-add { margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center; border: 0; cursor: pointer; border-radius: 16px;
  background: var(--md-surface-container-high); color: var(--md-on-surface); transition: background .2s, border-radius .35s var(--spring); }
.pf-folio-add:hover { background: var(--md-primary-container); border-radius: 10px; }

.pf-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pf-tl-item { position: relative; display: flex; gap: 14px; align-items: flex-start; }
.pf-tl-dot { flex: none; width: 12px; height: 12px; margin-top: 6px; border-radius: 4px; background: var(--md-primary); }
.pf-tl-item:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 22px; bottom: -14px; width: 2px; background: var(--md-outline-variant); }
.pf-tl-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.pf-tl-main b { font-weight: 600; overflow-wrap: anywhere; }
.pf-tl-org { font-size: .88rem; }
.pf-tl-when { font-size: .78rem; color: var(--md-on-surface-variant); }
.pf-tl-main p { margin: 6px 0 0; font-size: .88rem; line-height: 1.5; color: var(--md-on-surface-variant); overflow-wrap: anywhere; }
.pf-tl-main a { font-size: .82rem; color: var(--md-primary); overflow-wrap: anywhere; }
.pf-tl-edit { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; border-radius: 17px;
  color: var(--md-on-surface-variant); transition: background .2s, border-radius .35s var(--spring); }
.pf-tl-edit:hover { background: var(--md-surface-container-high); border-radius: 11px; }
.pf-tl-edit .material-symbols-outlined { font-size: 19px; }

.pf-dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 32px; background: var(--x-float, var(--md-surface)); color: var(--md-on-surface); }
.pf-dialog::backdrop { background: color-mix(in srgb, var(--md-scrim, #000) 40%, transparent); }
.pf-dialog[open] { animation: obRise .4s var(--spring) both; }
.pf-dialog-form { display: grid; gap: 12px; padding: 24px; }
.pf-dialog-form h3 { margin: 0 0 4px; font: 700 1.3rem var(--md-font-display); }
.pf-dialog-form label { display: grid; gap: 6px; font-weight: 600; font-size: .85rem; }
.pf-dialog-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf-dialog-check { display: flex !important; align-items: center; gap: 8px; font-weight: 500 !important; }
.pf-dialog-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.pf-dialog-spacer { flex: 1; }
.pf-dialog .ob-error { text-align: left; }
.pf-dialog .ob-error:empty { display: none; }

/* ---- m3x/app-focus.css ---- */
/* One stroke on a focused field. A field draws its own border; a ring outside that border read as a
   second line stacked on the first (the post pill, the sign-in fields, the reply box). Text fields
   and field-shaped buttons therefore recolour their own border and drop the outside ring. Everything
   that has no border of its own (buttons, links, chips, tabs) keeps the keyboard ring from material3.css.
   `:where` keeps this at the lowest specificity so a component's own focus colour (error, subject
   hue) still wins. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="color"]):not([type="image"]),
       textarea, select):focus-visible {
  outline: 0;
  border-color: var(--md-primary);
}
:where(.hf-composer-input-btn, .hf-launcher-identity-trigger, [class*="field-trigger"], .neb-select-trigger):focus-visible {
  outline: 0;
  border-color: var(--md-primary);
}