/* goldgirl — the custom layout. A fancy-spa palette: warm-white chrome, charcoal
   ink, restrained gold accents (wordmark, buttons, focus). The only other color
   on the page is each post's own deterministic tile (see colorFor in Go) — the
   bright tiles keep their black text and pop on white. No border radius anywhere
   — hard edges, gapless squares. Loaded after the kit's app.css. */

:root {
  --gg-bg: #f6f3ec;          /* warm spa white — the page */
  --gg-surface: #fffefb;     /* cards, inputs — a hair brighter than the page */
  --gg-ink: #1f1c17;         /* warm charcoal — primary text */
  --gg-gold: #b3914f;        /* the accent: wordmark, buttons, focus, borders */
  --gg-gold-bright: #c8a86a; /* hover/active gold */
  --gg-on-gold: #1f1c17;     /* ink on gold fills — luxe and legible */
}

.hush-body {
  margin: 0;
  background: var(--gg-bg);
  color: var(--gg-ink);
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* header + composer stay centered; the grid below goes full-bleed */
.hush-top {
  max-width: 720px;
  margin: 0 auto;
  padding: 2.5rem 1rem 1.75rem;
}

.hush-head {
  text-align: center;
  margin-bottom: 1.5rem;
}
.hush-title {
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.5em;     /* wide spa tracking */
  text-indent: 0.5em;        /* re-center against the trailing track */
  text-transform: lowercase;
  color: var(--gg-gold);
}
.hush-sub {
  margin: 0.35rem 0 0;
  color: rgba(31, 28, 23, 0.5);
  font-size: 0.9rem;
}

/* composer */
.hush-compose {
  max-width: 640px;
  margin: 0 auto 2rem;
}
.hush-input {
  width: 100%;
  min-height: 92px;
  box-sizing: border-box;
  resize: vertical;
  padding: 0.75rem;
  font: inherit;
  line-height: 1.5;
  color: var(--gg-ink);
  background: var(--gg-surface);
  border: 1px solid rgba(31, 28, 23, 0.25);
  border-radius: 0;
}
.hush-input::placeholder { color: rgba(31, 28, 23, 0.35); }
.hush-input:focus { outline: none; border-color: var(--gg-gold); }

.hush-compose-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
}
.hush-hint { color: rgba(31, 28, 23, 0.4); font-size: 0.78rem; }

/* primary button: gold fill, ink label */
.hush-post {
  padding: 0.45rem 1.15rem;
  font: inherit;
  text-transform: lowercase;
  color: var(--gg-on-gold);
  background: var(--gg-gold);
  border: 1px solid var(--gg-gold);
  border-radius: 0;
  cursor: pointer;
}
.hush-post:hover { background: var(--gg-gold-bright); border-color: var(--gg-gold-bright); }

.hush-note {
  min-height: 1rem;
  margin-top: 0.4rem;
  color: var(--gg-ink);
  font-size: 0.8rem;
}

/* image upload: the picker row, then the § 2257 certification under it */
.hush-upload {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(31, 28, 23, 0.12);
}
.hush-upload-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* legal: the 18+/terms checkbox at the doors, and the § 2257 notice on
   every image upload (the upload itself is the assent). */
.hush-agree {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.6rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(31, 28, 23, 0.55);
  cursor: pointer;
  text-align: left;
}
.hush-agree input[type="checkbox"] {
  margin: 0.15rem 0 0;
  accent-color: var(--gg-gold);
}
.hush-agree .hush-link,
.hush-cert .hush-link { font-size: inherit; text-decoration: underline; }
.hush-cert {
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(31, 28, 23, 0.45);
  text-align: left;
  max-width: 36rem;
}

/* the terms page: plain words, readable measure */
.hush-terms { max-width: 640px; }
.hush-terms-body {
  margin-top: 1.5rem;
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(31, 28, 23, 0.75);
}
.hush-terms-body h2 {
  margin: 1.4rem 0 0.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--gg-ink);
}
.hush-terms-body p { margin: 0; }
.hush-terms-body strong { color: var(--gg-ink); }
.hush-file {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.82rem;
  color: rgba(31, 28, 23, 0.5);
}
.hush-file::file-selector-button {
  margin-right: 0.6rem;
  padding: 0.35rem 0.8rem;
  font: inherit;
  font-size: 0.8rem;
  color: var(--gg-ink);
  background: var(--gg-surface);
  border: 1px solid rgba(31, 28, 23, 0.3);
  border-radius: 0;
  cursor: pointer;
}
.hush-file::file-selector-button:hover { background: rgba(31, 28, 23, 0.1); }

/* ghost button: outline only */
.hush-post--ghost {
  color: var(--gg-ink);
  background: transparent;
  border: 1px solid rgba(31, 28, 23, 0.4);
}
.hush-post--ghost:hover { background: rgba(31, 28, 23, 0.1); border-color: rgba(31, 28, 23, 0.4); }

.hush-link {
  color: var(--gg-ink);
  text-decoration: none;
  font-size: 0.82rem;
}
.hush-link:hover { color: var(--gg-gold); text-decoration: underline; }
.hush-cam-link { margin-left: auto; }

/* the gapless square wall — full bleed, at most 4 columns.
   max(25%, 280px) as the track floor means 4 columns can't be exceeded (a 5th
   would need a 5th 25% slot), and below ~1120px the 280px floor drops it to 3/2/1. */
.hush-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(25%, 280px), 1fr));
  gap: 0;
  width: 100%;
}
.hush-tile {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none; /* tiles are links now */
  /* background is set inline per-post (colorFor) */
}
.hush-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.16, 0.84, 0.34, 1);
}
.hush-tile--image:hover img { transform: scale(1.05); }
.hush-tile:hover { box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.6); }
.hush-tile:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px #000;
}

/* text tiles fill the square; the body scales to the tile via container queries.
   Tiles are bright, so text is black. */
.hush-tile--text {
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  color: #000;
  container-type: inline-size;
}
.hush-tile-body {
  font-size: clamp(1rem, 7cqi, 1.7rem);
  line-height: 1.35;
}
.hush-tile-body p { margin: 0.3em 0; }
.hush-tile-body ul,
.hush-tile-body ol {
  margin: 0.3em 0;
  padding-left: 1.2em;
  text-align: left;
}

/* camera page — the shader instrument: canvas, source row, preset rack,
   grade sliders, shutter. camera.js hides whole rows with [hidden] when
   webgpu is missing, so [hidden] must beat the display rules below. */
.hush-cam {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.hush-cam [hidden] { display: none; }
.cam-canvas {
  width: 100%;
  max-width: 520px;
  height: auto;
  background: var(--gg-ink);
  border: 1px solid rgba(31, 28, 23, 0.25);
}
.cam-sources {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
/* the file input hides behind its label — the label is the whole control */
.cam-file { display: none; }
.cam-pick {
  font-size: 0.82rem;
  color: rgba(31, 28, 23, 0.65);
  text-decoration: underline;
  cursor: pointer;
}
.cam-pick:hover { color: var(--gg-ink); }
/* the preset rack: quiet outlines; the active look inverts */
.cam-rack {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  max-width: 520px;
}
.cam-preset {
  padding: 0.3rem 0.65rem;
  font: inherit;
  font-size: 0.8rem;
  text-transform: lowercase;
  color: rgba(31, 28, 23, 0.65);
  background: transparent;
  border: 1px solid rgba(31, 28, 23, 0.25);
  border-radius: 0;
  cursor: pointer;
}
.cam-preset:hover { color: var(--gg-ink); border-color: rgba(31, 28, 23, 0.5); }
.cam-preset[aria-pressed="true"] {
  color: var(--gg-on-gold);
  background: var(--gg-gold);
  border-color: var(--gg-gold);
}
/* the grade sliders: lowercase labels in a fixed gutter, monochrome ranges */
.cam-sliders {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
  max-width: 520px;
}
.cam-slider {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.82rem;
  text-transform: lowercase;
  color: rgba(31, 28, 23, 0.65);
}
.cam-slider input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 2px;
  margin: 0;
  background: rgba(31, 28, 23, 0.3);
  outline: none;
}
.cam-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: var(--gg-gold);
  border: none;
  border-radius: 0;
  cursor: pointer;
}
.cam-slider input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: var(--gg-gold);
  border: none;
  border-radius: 0;
  cursor: pointer;
}
.cam-slider input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 1px solid var(--gg-gold); outline-offset: 2px; }
.cam-slider input[type="range"]:focus-visible::-moz-range-thumb { outline: 1px solid var(--gg-gold); outline-offset: 2px; }
.cam-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.cam-status {
  min-height: 1.1rem;
  margin: 0;
  color: rgba(31, 28, 23, 0.5);
  font-size: 0.82rem;
}
.hush-cam .hush-cert { max-width: 520px; }

/* the wall's one quiet legal pointer */
.hush-foot {
  margin: 2rem 0 1.5rem;
  text-align: center;
}
.hush-foot .hush-link { color: rgba(31, 28, 23, 0.4); }
.hush-back { text-align: center; margin-top: 1.5rem; }

/* account strip + gate */
.hush-acct {
  padding: 0.6rem 1rem;
  text-align: right;
  font-size: 0.8rem;
  color: rgba(31, 28, 23, 0.6);
}
.hush-acct strong { color: var(--gg-ink); font-weight: 600; }
.hush-gateline { margin-top: 1rem; }

/* forms (login, apply) */
.hush-formwrap { max-width: 420px; margin: 0 auto; }
.hush-form { display: flex; flex-direction: column; gap: 0.75rem; }
.hush-form .hush-input { min-height: auto; }
.hush-form textarea.hush-input { min-height: 96px; resize: vertical; }
.hush-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.25rem;
}

/* admin queue cards */
.hush-appcard {
  max-width: 480px;
  margin: 0 auto 1rem;
  padding: 1rem;
  border: 1px solid rgba(31, 28, 23, 0.18);
}
.hush-appphoto {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  margin-bottom: 0.6rem;
}
.hush-apphandle { font-weight: 600; font-size: 1.05rem; }
.hush-apppitch {
  margin: 0.35rem 0 0.75rem;
  color: rgba(31, 28, 23, 0.7);
  font-size: 0.9rem;
  white-space: pre-wrap;
}
.hush-appcard .hush-form-row { justify-content: flex-end; }

/* ── the feed — a post's page. The focused post expanded, its time-ordered
   neighbors above (newer) and below (older), and an invisible intersect
   sentinel past each end that pulls the next batch as you scroll. ─────────── */

/* the click hero on the grid: a clicked link holds focus while the navigation
   snapshots, so only that tile gets named — not all of them. Typed attr()
   (Chrome 133+); browsers without it — which also lack cross-document
   transitions — just navigate. Feed cards are named inline instead: most of
   them exist on the next post's page too, so they pair and slide. */
.hush-tile:focus,
.hush-print:focus {
  view-transition-name: attr(data-vt type(<custom-ident>));
}

/* the chrome persists across pages — pair it so it holds still (or glides)
   instead of riding the push */
.hush-head { view-transition-name: hush-head; view-transition-class: hush-chrome; }
.hush-acct { view-transition-name: hush-acct; view-transition-class: hush-chrome; }

.hush-feed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  box-sizing: border-box;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}
.hush-fcard {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 1.25rem;
  color: inherit;
  text-decoration: none;
  background: var(--gg-surface);
  border: 1px solid rgba(31, 28, 23, 0.18);
  /* fragment scroll: keep a breath of black above the focused card */
  scroll-margin-top: 1rem;
}
a.hush-fcard:hover { border-color: rgba(31, 28, 23, 0.5); }
a.hush-fcard:focus-visible { outline: none; border-color: var(--gg-gold); }
.hush-fcard .hush-card-meta:last-child { margin-bottom: 0; }
.hush-head--feed { margin: 1.5rem 0; }
.hush-home { color: inherit; text-decoration: none; }

/* batch wrappers never reach layout; sentinels are invisible fetch triggers.
   Batch cards arrive still — any entrance motion fights scroll anchoring when
   the newer side prepends above the viewport. */
.hush-batch { display: contents; }
.hush-more { width: 100%; height: 1px; }

/* ── motion. Real navigations are cross-document View Transitions
   (@view-transition opts both documents in), and the law is: NOTHING FADES
   IN PLACE — things move, or they're simply there.

   The browser's default for every paired element is a crossfade of its old
   and new snapshots while the box morphs — that crossfade is the mush this
   block exists to kill. Paired elements here show only their NEW face from
   the first frame, riding the group's box morph: the clicked square visibly
   GROWS into the focused card, shared feed cards slide to their new spots,
   the chrome holds still. Unpaired cards move along their own side of the
   feed (in from the edge they live on, out the same way). The old wall is
   blasted outward past the viewport edges with opacity HELD until it is
   already gone — displacement, not dissolve. The next page never animates
   in: it is revealed. */
@view-transition { navigation: auto; }

/* paired snapshots never crossfade: drop the old face, show the new one */
::view-transition-old(*) { animation: none; opacity: 0; }
::view-transition-new(*) { animation: none; }

/* the old page exits as one plane: blasted outward (forward) or pulled back
   (back-pop), opacity held to 70% so it's past the edges before it goes */
::view-transition-old(root) {
  z-index: 1;
  opacity: 1;
  animation: hush-push-out 0.3s cubic-bezier(0.16, 0.84, 0.34, 1) both;
}
@keyframes hush-push-out {
  70% { opacity: 1; }
  to { transform: scale(2.4); opacity: 0; }
}
html:active-view-transition-type(backwards)::view-transition-old(root) {
  animation-name: hush-pull-back;
}
@keyframes hush-pull-back {
  70% { opacity: 1; }
  to { transform: scale(0.7); opacity: 0; }
}

/* unpaired feed cards travel their own side of the timeline — pure motion */
::view-transition-new(.hush-above):only-child { animation: hush-drop-in 0.35s cubic-bezier(0.16, 0.84, 0.34, 1) both; }
::view-transition-new(.hush-below):only-child { animation: hush-rise-in 0.35s cubic-bezier(0.16, 0.84, 0.34, 1) both; }
::view-transition-old(.hush-above):only-child { opacity: 1; animation: hush-lift-out 0.35s cubic-bezier(0.16, 0.84, 0.34, 1) both; }
::view-transition-old(.hush-below):only-child { opacity: 1; animation: hush-sink-out 0.35s cubic-bezier(0.16, 0.84, 0.34, 1) both; }
@keyframes hush-drop-in { from { transform: translateY(-100vh); } }
@keyframes hush-rise-in { from { transform: translateY(100vh); } }
@keyframes hush-lift-out { to { transform: translateY(-100vh); } }
@keyframes hush-sink-out { to { transform: translateY(100vh); } }

/* the box morphs — hero, chrome, shared feed cards; snappy, hush's easing */
::view-transition-group(*) {
  animation-duration: 0.35s;
  animation-timing-function: cubic-bezier(0.16, 0.84, 0.34, 1);
}

/* respect reduced motion: everything lands instantly — still no fades */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*),
  ::view-transition-old(root) { animation: none; }
}

/* ── post card pieces (feed cards, focused + not) ─────────────────────────── */
.hush-card-media {
  margin-bottom: 0.9rem;
  overflow: hidden;
}
.hush-card-media--image img {
  display: block;
  width: 100%;
  height: auto;
}
.hush-card-media--text {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 1.5rem;
  text-align: center;
  color: #000;
  font-size: 1.4rem;
  line-height: 1.4;
  /* background is set inline per-post (colorFor) */
}
.hush-card-text p { margin: 0.3em 0; }
.hush-card-text ul,
.hush-card-text ol { text-align: left; margin: 0.3em 0; padding-left: 1.2em; }

.hush-card-meta {
  margin-bottom: 0.75rem;
  color: rgba(31, 28, 23, 0.45);
  font-size: 0.8rem;
}

/* thumb reactions — icon glyphs, no counts anywhere (scores are hidden).
   The only readable state is your own mark: --mine inverts. */
.hush-react {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.hush-react-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.9rem;
  font: inherit;
  font-size: 1rem;
  color: var(--gg-ink);
  background: transparent;
  border: 1px solid rgba(31, 28, 23, 0.4);
  border-radius: 0;
  cursor: pointer;
}
.hush-react-btn:hover { background: rgba(31, 28, 23, 0.12); }
.hush-react-btn--mine { color: var(--gg-on-gold); background: var(--gg-gold); border-color: var(--gg-gold); cursor: default; }
.hush-react-btn--mine:hover { background: var(--gg-gold); }
.hush-react-btn--off { color: rgba(31, 28, 23, 0.45); border-color: rgba(31, 28, 23, 0.2); cursor: default; }
.hush-react-btn--off:hover { background: transparent; }

/* profile */
.hush-profile {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  margin: 1.5rem 0;
}
.hush-stat { text-align: center; color: rgba(31, 28, 23, 0.6); font-size: 0.85rem; }
.hush-stat-n { display: block; font-size: 2rem; font-weight: 600; color: var(--gg-ink); }

/* ── flagging — the quiet report control on a focused card. dim text in the
   meta line, no counts; clicked once it reads "flagged" and goes inert. a
   post the flags take down collapses to the one-line hushed notice. ──────── */
.hush-card-meta--focused {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.hush-flag {
  margin-left: auto;
  padding: 0;
  font: inherit;
  font-size: 0.75rem;
  text-transform: lowercase;
  color: rgba(31, 28, 23, 0.3);
  background: transparent;
  border: 0;
  cursor: pointer;
}
button.hush-flag:hover { color: rgba(31, 28, 23, 0.7); }
.hush-flag--done { cursor: default; }
.hush-hushed {
  padding: 2.5rem 0;
  text-align: center;
  color: rgba(31, 28, 23, 0.45);
}

/* the invite panel (your own profile, tier 1+) */
.hush-invites {
  max-width: 420px;
  margin: 2rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(31, 28, 23, 0.12);
  text-align: center;
}
.hush-invites-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: lowercase;
}
.hush-invite-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.6rem;
  font-size: 0.85rem;
}
.hush-invite-code {
  font-family: ui-monospace, monospace;
  color: var(--gg-ink);
  overflow-wrap: anywhere;
  text-align: left;
}
.hush-invite-used { color: rgba(31, 28, 23, 0.6); white-space: nowrap; }
.hush-invite-open { color: rgba(31, 28, 23, 0.4); white-space: nowrap; }
.hush-invite-mint { margin-top: 1rem; }

/* mint & send: the optional email beside the plain mint button */
.hush-invite-mint--send {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.hush-invite-mint--send .hush-input {
  flex: 1;
  min-width: 0;
  min-height: auto;
  font-size: 0.85rem;
}
.hush-invite-mint--send .hush-post { white-space: nowrap; }

/* the profile's quiet email section — masked even for its owner */
.hush-email {
  max-width: 420px;
  margin: 2rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(31, 28, 23, 0.12);
  text-align: center;
}
.hush-email-addr { font-family: ui-monospace, monospace; color: var(--gg-ink); }
.hush-email-resend { margin-top: 0.75rem; }
.hush-email-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.hush-email-form .hush-input {
  flex: 1;
  min-width: 0;
  min-height: auto;
  font-size: 0.85rem;
}
.hush-email-form .hush-post { white-space: nowrap; }

/* ── admin — the pages with eyes (admin.go / adminviews.templ). same black
   and white, but nothing is withheld: scores, tiers, chains, counts, IPs,
   geo, user agents all print. wide column, dense tables. ─────────────────── */
.hush-adm {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2.5rem 1rem 3rem;
}
.hush-adm .hush-head { margin-bottom: 1rem; }
.hush-adm-nav {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.hush-adm-here { font-size: 0.82rem; color: rgba(31, 28, 23, 0.4); }
.hush-adm-empty { text-align: center; }

/* the hub: each number is a door into its section */
.hush-adm-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin: 2rem 0;
}
.hush-adm-stat { text-decoration: none; }
.hush-adm-stat:hover { color: var(--gg-ink); }

/* dense tables (posts browser, member ledger) */
.hush-adm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.hush-adm-table th,
.hush-adm-table td {
  padding: 0.45rem 0.55rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(31, 28, 23, 0.12);
}
.hush-adm-table th {
  font-weight: 400;
  color: rgba(31, 28, 23, 0.4);
}
.hush-adm-content { max-width: 280px; overflow-wrap: anywhere; }
.hush-adm-thumb { display: block; width: 48px; height: 48px; object-fit: cover; }
.hush-adm-ua {
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(31, 28, 23, 0.5);
}
.hush-adm-dim { color: rgba(31, 28, 23, 0.5); }
.hush-adm-badge {
  padding: 0.05rem 0.35rem;
  font-size: 0.7rem;
  color: var(--gg-on-gold);
  background: var(--gg-gold);
}

/* moderation rulings: small quiet ghosts at table density */
.hush-adm-actions { display: flex; gap: 0.4rem; }
.hush-post--mini {
  padding: 0.15rem 0.55rem;
  font-size: 0.72rem;
  color: var(--gg-ink);
  background: transparent;
  border-color: rgba(31, 28, 23, 0.35);
}
.hush-post--mini:hover { background: rgba(31, 28, 23, 0.12); border-color: rgba(31, 28, 23, 0.5); }

/* the posts browser's filter row */
.hush-adm-filter {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.hush-adm-in {
  flex: 0 1 220px;
  min-height: auto;
  padding: 0.4rem 0.6rem;
  font-size: 0.82rem;
}

/* review cards: the flagged post rendered whole, then the rulings */
.hush-revcard {
  max-width: 640px;
  margin: 0 auto 1.25rem;
  padding: 1rem;
  border: 1px solid rgba(31, 28, 23, 0.18);
}
.hush-adm-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.82rem;
}
.hush-adm-meta,
.hush-adm-flags {
  margin-bottom: 0.6rem;
  font-size: 0.78rem;
  color: rgba(31, 28, 23, 0.5);
  overflow-wrap: anywhere;
}
.hush-adm-flags { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.hush-revcard .hush-adm-actions { justify-content: flex-end; }

/* ── admin analytics (/admin/analytics). The chart widgets ride the
   framework's dash-widget styling (app.css); these rules style only the page
   grid and the two tables — dense, monochrome, made for reading IPs. ──────── */
.hush-anl {
  max-width: 1080px;
  /* restyle pkg/chart for the spa page — the framework defaults are zinc-900 */
  --color-panel: var(--gg-surface);
  --color-panel-hover: var(--gg-bg);
  --color-line-soft: rgba(31, 28, 23, 0.10);
  --color-line-strong: rgba(31, 28, 23, 0.18);
  --color-fg-default: var(--gg-ink);
  --color-fg-muted: rgba(31, 28, 23, 0.5);
  --color-series-a: var(--gg-gold);
  --color-series-b: var(--gg-ink);
}
.hush-kpi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin: 1.5rem 0 1rem;
}
.hush-kpi-card {
  padding: 1rem 1.1rem;
  background: var(--gg-surface);
  border: 1px solid rgba(31, 28, 23, 0.12);
}
.hush-kpi-n {
  font-size: 1.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gg-ink);
  letter-spacing: -0.02em;
}
.hush-kpi-label {
  margin-top: 0.15rem;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--gg-gold);
}
.hush-kpi-sub {
  margin-top: 0.15rem;
  font-size: 0.72rem;
  color: rgba(31, 28, 23, 0.45);
}
.hush-anl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 0.25rem;
}
.hush-anl-card {
  background: var(--gg-surface);
  border: 1px solid rgba(31, 28, 23, 0.12);
  min-width: 0;
}
.hush-anl-card--wide { grid-column: 1 / -1; }
.hush-anl-card-head {
  padding: 0.85rem 1rem 0.4rem;
}
.hush-anl-card-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--gg-ink);
}
.hush-anl-card-sub {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  color: rgba(31, 28, 23, 0.45);
}
.hush-anl-card-body { padding: 0.25rem 0.5rem 0.75rem; }
.hush-turnstile { margin: 0.35rem 0 0.15rem; }
@media (max-width: 720px) {
  .hush-kpi { grid-template-columns: 1fr 1fr; }
  .hush-anl-grid { grid-template-columns: 1fr; }
  .hush-anl-card--wide { grid-column: auto; }
}
.hush-anl-scroll { height: 100%; overflow: auto; }
.hush-anl-table {
  width: 100%;
  border-collapse: collapse;
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
  color: var(--gg-ink);
}
.hush-anl-table th,
.hush-anl-table td {
  padding: 0.3rem 0.55rem;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid rgba(31, 28, 23, 0.12);
}
.hush-anl-table th {
  position: sticky; /* headers hold while the tail scrolls */
  top: 0;
  background: var(--gg-bg);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: rgba(31, 28, 23, 0.6);
}
.hush-anl-num { text-align: right; font-variant-numeric: tabular-nums; }
.hush-anl-empty { color: rgba(31, 28, 23, 0.4); }

/* ── the wall: a masonry of uncropped prints on the spa cream. images keep
   their own aspect. layout posts stay square (that's the studio canvas). ─ */
.hush-board {
  column-count: 3;
  column-gap: 1rem;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}
.hush-print {
  display: block;
  break-inside: avoid;
  margin: 0 0 1rem;
  color: inherit;
  text-decoration: none;
}
.hush-print-face {
  position: relative;
}
.hush-print--image .hush-print-face img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.hush-print--layout .hush-print-face {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #0c0a08;
}
.hush-print-text {
  display: grid;
  place-items: center;
  min-height: 12rem;
  padding: 0.85rem;
  text-align: center;
  color: #000;
  container-type: inline-size;
}
.hush-print:focus-visible {
  outline: 2px solid var(--gg-gold);
  outline-offset: 3px;
}

/* a layout print is a square of its own pieces */
.hush-collage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #0c0a08;
  overflow: hidden;
}
.hush-collage-piece {
  position: absolute;
  object-fit: cover;
  pointer-events: none;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

.hush-card-media--layout .hush-collage {
  background: #1a1712;
}

/* studio — one square of footage on the table */
.hush-studio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem 2.5rem;
}
.studio-board {
  position: relative;
  width: min(720px, 92vw);
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(120% 80% at 50% 40%, #1c1814 0%, #14110e 70%);
  outline: 1px solid rgba(179, 145, 79, 0.28);
  overflow: visible;
  touch-action: none;
}
.studio-piece {
  position: absolute;
  transform-origin: center center;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.studio-piece.is-selected {
  outline: 1.5px solid var(--gg-gold);
  outline-offset: 2px;
  cursor: move;
}
.studio-piece img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.studio-rot,
.studio-handle {
  display: none;
  position: absolute;
  background: var(--gg-gold);
  box-shadow: 0 0 0 2px #14110e;
  z-index: 3;
}
.studio-piece.is-selected .studio-rot,
.studio-piece.is-selected .studio-handle { display: block; }
.studio-rot {
  top: -36px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  cursor: grab;
}
.studio-rot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 16px;
  width: 1.5px;
  height: 20px;
  background: var(--gg-gold);
  transform: translateX(-50%);
}
.studio-handle {
  width: 12px;
  height: 12px;
}
.studio-handle--nw { top: -6px; left: -6px; cursor: nwse-resize; }
.studio-handle--ne { top: -6px; right: -6px; cursor: nesw-resize; }
.studio-handle--sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.studio-handle--se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.studio-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem;
  width: min(720px, 92vw);
  box-sizing: border-box;
  padding: 0.35rem 0.45rem;
  background: #1c1814;
  color: #f6f3ec;
}
.studio-tools[hidden] { display: none !important; }
.studio-tool {
  font: inherit;
  font-size: 0.82rem;
  line-height: 1;
  padding: 0.4rem 0.55rem;
  color: #f6f3ec;
  background: transparent;
  border: 1px solid rgba(246, 243, 236, 0.18);
  cursor: pointer;
}
.studio-tool:hover { border-color: var(--gg-gold); color: var(--gg-gold); }
.studio-tool--kill:hover { border-color: #c45c4a; color: #c45c4a; }
.studio-deg {
  min-width: 2.6rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: var(--gg-gold);
}
.studio-tools-sep {
  width: 1px;
  height: 1.15rem;
  margin: 0 0.3rem;
  background: rgba(246, 243, 236, 0.14);
}
.studio-hint {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(31, 28, 23, 0.45);
}
.studio-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  width: min(720px, 92vw);
}
.studio-meter {
  font-size: 0.82rem;
  color: rgba(31, 28, 23, 0.5);
  font-variant-numeric: tabular-nums;
}
.hush-studio .hush-cert { max-width: min(720px, 92vw); }

@media (max-width: 900px) {
  .hush-board { column-count: 2; }
}
@media (max-width: 640px) {
  .hush-board { column-count: 1; }
  .studio-tools { gap: 0.15rem; padding: 0.3rem; }
  .studio-tool { padding: 0.35rem 0.4rem; font-size: 0.78rem; }
  .studio-tools-sep { margin: 0 0.15rem; }
}