/* The Hall — WhatiMeme's look on every host, production included since
   2026-09-16. Gated on html[data-theme="hall"]; classic tokens in
   meme-school.css are untouched and still reachable with ?theme=classic.

   The room this draws is the approved mockup: a dark gallery with spot-lit
   framed work on the wall, an admission-ticket strip for navigation, and a
   carved title wall. The earlier pass kept the room in daylight plaster, which
   read as a beige website with gold trim rather than as a hall — the value
   structure (dark wall, lit art) is what makes the reference image work, so it
   is the first thing this sheet establishes.

   Only the room is dark. Every panel of working UI stays a cream placard with
   its own ink, which is why --bg and --surface remain light: 55 rules in
   meme-school.css fill small surfaces with them, and inverting those tokens
   would darken the insides of cards that still hold dark text. */

.brand-hall { display: none; }
.hall-atmosphere { display: none; }

html[data-theme="hall"] {
  color-scheme: light;

  /* Light tokens = the placards and the small fills inside them. */
  --bg: #e7e1d3;
  --surface: #f2ece0;
  --ink: #241f17;
  --ink-soft: #5b5346;
  --border: #c3b79c;
  --border-hover: #9d8f70;
  --accent: #c4a35a;
  --accent-ink: #1f1a12;
  /* Hover fill for gold buttons. #9a7b32 left dark labels at 4.32:1 (#1f1a12)
     and 3.96:1 (#2a2113); #ad8d40 gives 5.48:1 and 5.03:1 (brandcheck). */
  --accent-deep: #ad8d40;
  --accent-wash: #f1e6cb;
  --amber: #b08a3c;
  --danger: #a33b3b;
  --danger-edge: #d9a3a3;
  --danger-wash: #f6e8e8;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  --font-display: "Playfair Display", "EB Garamond", "Times New Roman", serif;

  /* The room. Gallery walls are rarely black — they are a warm mid grey that
     still sits well below the cream mats, so the work keeps the light. */
  --hall-wall: #4b453c;
  --hall-wall-deep: #39342d;
  --hall-floor: #37322c;
  /* Plaster grain: one tile of greyscale fractal noise, inline so the room
     never waits on a request and never fails to arrive. */
  --hall-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");
  --hall-light: rgba(255, 236, 196, 0.5);
  --hall-cream: #ece5d6;
  --hall-cream-soft: #b9b1a1;
  --hall-mat: #d5c9ae;
  --hall-wood: #6b4a2c;
  --hall-wood-dark: #2b1c10;
  --hall-gold: #c9a24a;
  --hall-gold-bright: #e9d08a;
  --hall-brass: #cfa951;

  /* The ticket strip. Gold rather than the reference's chartreuse, so the
     admission tickets sit in the same metal family as the plaques instead of
     cutting across them. */
  --hall-ticket: #e3c470;
  --hall-ticket-deep: #c09a3f;
  --hall-ticket-ink: #2b2008;

  scrollbar-color: #6b4a2c #14120f;
}

html[data-theme="hall"] ::selection {
  background: var(--hall-gold);
  color: #1f1a12;
}

/* ----- the room ----- */

html[data-theme="hall"] body {
  background-color: var(--hall-wall);
  /* Plaster: two fine grains at different pitches so the wall never tiles
     visibly, over a warm pool of light at the top of the room. */
  background-image:
    var(--hall-grain),
    radial-gradient(ellipse 70% 34% at 50% 0%, rgba(255, 236, 196, 0.16), transparent 70%),
    radial-gradient(ellipse 34% 26% at 12% 34%, rgba(255, 246, 222, 0.05), transparent 70%),
    radial-gradient(ellipse 30% 30% at 78% 62%, rgba(255, 242, 212, 0.045), transparent 72%),
    radial-gradient(ellipse 26% 22% at 62% 12%, rgba(0, 0, 0, 0.16), transparent 70%),
    linear-gradient(#544d43, #4a443b 62%, #3d382f);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 160px 160px, auto, auto, auto, auto, auto;
  background-attachment: fixed;
  color: var(--hall-cream);
}

/* Ceiling fixtures and the light they throw, plus the darkened side walls that
   give the room its depth. Fixed, so scrolling moves the art past the lights. */
html[data-theme="hall"] .hall-atmosphere {
  display: block;
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    /* the side walls fall away from the lit centre */
    linear-gradient(90deg, rgba(20, 16, 12, 0.5), transparent 18%, transparent 82%, rgba(20, 16, 12, 0.5)),
    /* and the room darkens towards its corners */
    radial-gradient(ellipse 118% 82% at 50% 26%, transparent 46%, rgba(18, 15, 11, 0.44));
}

html[data-theme="hall"] .site-header,
html[data-theme="hall"] main,
html[data-theme="hall"] .site-footer {
  position: relative;
  z-index: 1;
}

html[data-theme="hall"] :focus-visible {
  outline: 3px solid var(--hall-gold-bright);
  outline-offset: 2px;
}

html[data-theme="hall"] main {
  max-width: none;
  padding: 0 20px;
}

/* ----- title wall + ticket strip ----- */

html[data-theme="hall"] .site-header {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  padding: 0 !important;
  background:
    radial-gradient(ellipse 60% 120% at 50% 0%, rgba(255, 232, 186, 0.12), transparent 70%),
    #1d1a15 !important;
  border-bottom: 0 !important;
  box-shadow: none;
  position: relative !important;
  top: auto !important;
}
html[data-theme="hall"] .account-menu {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 3;
}
html[data-theme="hall"] .account-menu .btn {
  background: #16140f;
  border: 1px solid #4a4132;
  color: var(--hall-cream);
}

/* The approved lockup: the W hung in its frame, speech-bubble tail in gold,
   and the wordmark beside it. Cream and gold on the title wall, with the
   picture's own transparent margin plus this padding carrying the clear space.
   The carved-text treatment it replaces is gone: two wordmarks in one header
   read as a duplicate, and the artwork is what the owner approved. */
html[data-theme="hall"] .site-header .brand {
  order: -1;
  flex: 1 0 100% !important;
  display: flex;
  justify-content: center;
  padding: 26px 16px 22px;
  line-height: 0;
}
html[data-theme="hall"] .site-header .brand-classic { display: none; }

html[data-theme="hall"] .site-header .brand-lockup {
  display: block;
  width: min(560px, 78vw);
  height: auto;
}

/* The link is named by its aria-label; this copy keeps the wordmark in the
   accessibility tree and out of the picture. */
html[data-theme="hall"] .site-header .brand-hall {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

html[data-theme="hall"] .site-header .site-nav {
  order: 3;
  position: relative;
  flex: 1 1 100%;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 0;
  padding: 20px 12px 20px 4px;
  background:
    /* perforations, punched along both edges */
    radial-gradient(circle at 6px 3px, rgba(58, 40, 8, 0.42) 2.1px, transparent 2.6px) 0 0 / 12px 12px repeat-x,
    radial-gradient(circle at 6px calc(100% - 3px), rgba(58, 40, 8, 0.42) 2.1px, transparent 2.6px) 0 100% / 12px 12px repeat-x,
    linear-gradient(var(--hall-ticket), var(--hall-ticket-deep));
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 216, 0.62),
    0 3px 0 #8a6a2a,
    0 12px 26px rgba(0, 0, 0, 0.55);
}

/* The repeated ticket wording, injected by theme-preview.js. Decorative, so it
   is aria-hidden and never reflows the tabs. */
html[data-theme="hall"] .hall-ticket-trim {
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  white-space: nowrap;
  font: 700 8px/1 var(--font-body);
  letter-spacing: 0.2em;
  color: rgba(58, 40, 8, 0.42);
  pointer-events: none;
  user-select: none;
  padding: 0 4px;
}
html[data-theme="hall"] .hall-ticket-trim.is-top { top: 8px; }
html[data-theme="hall"] .hall-ticket-trim.is-bottom { bottom: 8px; }

html[data-theme="hall"] .site-header .site-nav a.nav-tab {
  display: inline-flex !important;
  align-items: center;
  min-height: 40px !important;
  padding: 6px 24px !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-right: 1px dashed rgba(58, 40, 8, 0.4) !important;
  background: transparent !important;
  color: var(--hall-ticket-ink) !important;
  font: 500 19px/1.2 var(--font-body) !important;
  letter-spacing: 0.005em;
  text-transform: none;
  box-shadow: none !important;
}
html[data-theme="hall"] .site-header .site-nav a.nav-tab[hidden] { display: none !important; }
html[data-theme="hall"] .site-header .site-nav a.nav-tab:hover {
  background: rgba(255, 249, 228, 0.38) !important;
  color: var(--hall-ticket-ink) !important;
}
html[data-theme="hall"] .site-header .site-nav a.nav-tab[aria-current="page"] {
  background: rgba(255, 249, 228, 0.46) !important;
  color: var(--hall-ticket-ink) !important;
  box-shadow: inset 0 -3px 0 rgba(58, 40, 8, 0.7) !important;
}

/* The collection search: a brass-cornered case under the generator button, in
   the same place the classic layout keeps it — first thing in the gallery
   controls, directly above the filters it works with. */
html[data-theme="hall"] .gallery-controls .search-field {
  position: relative;
  display: block;
  width: 100%;
  max-width: 560px;
  box-sizing: border-box;
  padding: 8px 12px 10px;
  border-radius: 4px;
  background: linear-gradient(#6f5030, #4a3421 62%, #3a2718);
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 170, 0.3),
    inset 0 0 0 1px rgba(20, 12, 6, 0.7),
    0 3px 10px rgba(0, 0, 0, 0.45);
}
html[data-theme="hall"] .gallery-controls .search-field::before {
  content: "Search the collection";
  display: block;
  margin: 0 2px 6px;
  font: 700 9px/1 var(--font-body);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #e7cf98;
}
/* four brass screws, one per corner */
html[data-theme="hall"] .gallery-controls .search-field::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 3px;
  pointer-events: none;
  background:
    radial-gradient(circle at 0 0, var(--hall-brass) 1.9px, transparent 2.4px),
    radial-gradient(circle at 100% 0, var(--hall-brass) 1.9px, transparent 2.4px),
    radial-gradient(circle at 0 100%, var(--hall-brass) 1.9px, transparent 2.4px),
    radial-gradient(circle at 100% 100%, var(--hall-brass) 1.9px, transparent 2.4px);
}
html[data-theme="hall"] .gallery-controls .search-field input {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  min-height: 40px;
  padding: 8px 36px 8px 12px;
  border: 1px solid #8a6c3c;
  border-radius: 3px;
  color: #f3e6c6;
  font-size: 16px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.55);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfa951' stroke-width='2.2' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6.5'/><path d='M15.4 15.4 21 21'/></svg>"),
    linear-gradient(#2f2416, #211a10);
  background-repeat: no-repeat;
  background-position: right 10px center, 0 0;
  background-size: 16px 16px, auto;
}
html[data-theme="hall"] .gallery-controls .search-field input::placeholder { color: #b39c6b; }
html[data-theme="hall"] .gallery-controls .search-field input:focus-visible {
  outline: 3px solid var(--hall-gold-bright);
  outline-offset: 2px;
  border-color: #cfa951;
}

/* Signed-in controls on the title wall. They used to inherit the classic
   cream button face while Hall set their text to cream — 1.07:1, unreadable —
   and the handle sat at 2.29:1 in placard ink on the dark wall. They now match
   the "Sign in with X" button they replace: dark face, cream text (14.68:1).
   Buy / Manage carries the brass edge as the account's primary action; Sign
   out stays quieter in soft cream (still 8+:1). */
html[data-theme="hall"] .account-credit { color: var(--hall-cream); }
html[data-theme="hall"] .account-identity { color: var(--hall-cream-soft); }
html[data-theme="hall"] .account-manage,
html[data-theme="hall"] .account-logout {
  background: #16140f;
  border: 1px solid #4a4132;
  color: var(--hall-cream);
  text-decoration: none;
}
html[data-theme="hall"] .account-manage {
  border-color: rgba(207, 169, 81, 0.7);
}
html[data-theme="hall"] .account-logout {
  color: var(--hall-cream-soft);
}
html[data-theme="hall"] .account-manage:hover,
html[data-theme="hall"] .account-logout:hover {
  background: #221e18;
  border-color: var(--hall-brass);
  color: var(--hall-cream);
}

/* ----- the hall: a room, not a card grid ----- */

html[data-theme="hall"] #view-templates {
  position: relative;
  padding: 10px 0 64px;
  min-height: calc(100dvh - 220px);
  overflow-x: clip;
}
html[data-theme="hall"] #view-templates > h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
html[data-theme="hall"] #view-templates > .lede { display: none; }

/* The floor: the wall stops, the boards catch a little of the light. */
html[data-theme="hall"] #view-templates::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 190px;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(255, 236, 196, 0.06), transparent 60%),
    linear-gradient(to top, var(--hall-floor) 0%, #322d27 55%, transparent 100%);
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.07);
}

html[data-theme="hall"] .templates-generator-shortcut {
  position: relative;
  z-index: 1;
  margin: 16px 5% 4px;
}
html[data-theme="hall"] .gallery-controls {
  position: relative;
  z-index: 1;
  margin: 12px 5% 0;
}
html[data-theme="hall"] .chip-label {
  color: #d9d2c4;
  background: transparent;
}
html[data-theme="hall"] .chip {
  border-radius: 3px;
  background: rgba(26, 22, 17, 0.3);
  border-color: rgba(20, 17, 12, 0.45);
  color: #e6dfd0;
}
html[data-theme="hall"] .chip:hover { border-color: var(--hall-gold); background: rgba(26, 22, 17, 0.44); color: #fff8e8; }
html[data-theme="hall"] .chip.active {
  background: var(--hall-gold);
  border-color: var(--hall-gold-bright);
  color: #1f1a12;
}

/* The wall label under the room title: how much of the collection is hanging. */
html[data-theme="hall"] .gallery-count {
  position: relative;
  z-index: 1;
  margin: 22px 0 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 250, 236, 0.62);
}

html[data-theme="hall"] .gallery {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 56px 44px;
  align-items: start;
  margin: 40px 5% 8px;
  padding: 34px 2% 96px;
}

/* A hung frame: cream mat, wood, a thin gilt line, and the shadow it throws on
   the wall. The artwork is `contain` on the mat because a meme template is the
   document here — cropping it to fill would misrepresent the frame. */
html[data-theme="hall"] .gallery-card {
  position: relative;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 0 12px;
  box-shadow: none;
  overflow: visible;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
/* the pool of light this piece is hung in */
html[data-theme="hall"] .gallery-card::before {
  content: "";
  position: absolute;
  left: -30%;
  right: -30%;
  top: -70px;
  bottom: -20px;
  z-index: -1;
  pointer-events: none;
  /* One soft pool, wide enough that its edge never lands inside the visible
     box — two stacked ellipses read as a rectangle of haze above the frame. */
  background: radial-gradient(ellipse 40% 52% at 50% 40%, rgba(255, 242, 208, 0.2), rgba(255, 242, 208, 0.08) 46%, transparent 76%);
  opacity: 0.45;
  transition: opacity 0.24s ease;
}
html[data-theme="hall"] .gallery-card a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
html[data-theme="hall"] .gallery-card img {
  display: block;
  /* Unframed means the element is the picture: sized by the artwork itself, so
     the hairline and the shadow hug the image instead of boxing it in a dark
     letterbox. A height cap keeps a tall format from running the row. */
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 300px;
  margin: 0 auto;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 18px 30px rgba(14, 11, 8, 0.5);
  transition: box-shadow 0.24s ease;
}


html[data-theme="hall"] .gallery-card .card-body {
  padding: 30px 2px 0;
  gap: 0;
  align-items: center;
  text-align: center;
}
html[data-theme="hall"] .gallery-card .tag-row { display: none; }

/* The brass plaque, screwed to the wall under the frame. */
html[data-theme="hall"] .gallery-card .name {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2a2113;
  background: linear-gradient(#e2c377, var(--hall-brass) 48%, #9d7a2e);
  padding: 7px 14px;
  border-radius: 2px;
  max-width: 88%;
  margin: 0;
  box-sizing: border-box;
  text-shadow: 0 1px 0 rgba(255, 244, 214, 0.45);
  box-shadow:
    0 1px 0 rgba(255, 240, 200, 0.35) inset,
    0 2px 5px rgba(0, 0, 0, 0.6);
}
html[data-theme="hall"] .gallery-card .situation {
  margin: 0;
  padding: 0;
  overflow: visible;
  opacity: 1;
  color: #f4ead4;
  transition: opacity 0.2s ease;
}
html[data-theme="hall"] .gallery-card:hover .situation,
html[data-theme="hall"] .gallery-card:focus-within .situation {
  height: auto;
  margin-top: 10px;
  padding: 9px 12px;
  opacity: 1;
  color: #f4ead4;
  background: rgba(12, 10, 8, 0.82);
  border: 1px solid rgba(201, 162, 74, 0.35);
  border-radius: 3px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  -webkit-line-clamp: 4;
}
html[data-theme="hall"] .gallery-card:hover { transform: translateY(-6px); }
html[data-theme="hall"] .gallery-card:hover::before { opacity: 1; }
html[data-theme="hall"] .gallery-card:hover img {
  box-shadow:
    0 0 0 1px rgba(233, 208, 138, 0.55),
    0 26px 44px rgba(14, 11, 8, 0.6),
    0 0 40px rgba(255, 232, 176, 0.16);
}

html[data-theme="hall"] .gallery-card:focus-within {
  border-color: transparent;
  outline: 3px solid var(--hall-gold-bright);
  outline-offset: 10px;
}

/* ----- every other view: a cream placard hung on the same wall ----- */

/* The editor is a workspace, not a placard: it takes the room's full width so
   the artwork gets it, and keeps its own light panels on the dark wall. */
html[data-theme="hall"] #view-freestyle {
  max-width: none;
  margin: 14px 0 0;
  padding: 14px 16px 28px;
  background: none;
  border: 0;
  box-shadow: none;
  /* The panels inside are cream, so the subtree keeps dark ink. Only the few
     things that sit directly on the wall are lifted to cream below — without
     this, every heading inherits wall-cream and disappears on its own card. */
  color: var(--ink);
}
/* Dialogs are siblings of the view, not children, so they need saying too. */
html[data-theme="hall"] .fs-modal,
html[data-theme="hall"] .fs-modal h2,
html[data-theme="hall"] .fs-modal h3 { color: var(--ink); }
/* Only what actually sits on the wall turns cream. Everything inside a panel
   keeps its ink — a blanket rule here paints cream text onto cream drawers. */
html[data-theme="hall"] #view-freestyle > .fs-header .fs-title h1,
html[data-theme="hall"] #view-freestyle > .fs-header .fs-project-name { color: var(--hall-cream); }
html[data-theme="hall"] #view-freestyle > .fs-header .pane-status,
html[data-theme="hall"] #view-freestyle > .fs-header .fs-hint { color: var(--hall-cream-soft); }

html[data-theme="hall"] .view:not(#view-templates):not(#view-freestyle) {
  max-width: 1100px;
  margin: 26px auto 56px;
  padding: 26px 28px 32px;
  background: linear-gradient(var(--surface), #e9e2d4);
  border: 1px solid #b6a988;
  /* Square-cut, like the placards and frames it hangs beside — .view carries no
     radius of its own, so the brass edge meets square corners. */
  border-top: 3px solid var(--hall-brass);
  color: var(--ink);
  box-shadow: 0 26px 50px rgba(0, 0, 0, 0.55);
}
html[data-theme="hall"] .view:not(#view-templates):not(#view-freestyle) h1,
html[data-theme="hall"] .view:not(#view-templates):not(#view-freestyle) h2,
html[data-theme="hall"] .view:not(#view-templates):not(#view-freestyle) h3 {
  color: var(--ink);
}
html[data-theme="hall"] .view:not(#view-templates):not(#view-freestyle) .lede,
html[data-theme="hall"] .view:not(#view-templates):not(#view-freestyle) p {
  color: var(--ink-soft);
}
html[data-theme="hall"] h1 {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  font-weight: 700;
}

html[data-theme="hall"] .card:not(.gallery-card),
html[data-theme="hall"] .step-card,
html[data-theme="hall"] .mode-card,
html[data-theme="hall"] .pricing-card,
html[data-theme="hall"] .field,
html[data-theme="hall"] .meme-create-panel {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
}

html[data-theme="hall"] .btn-primary:hover { background: var(--accent-deep); color: var(--accent-ink); }
html[data-theme="hall"] .btn-quiet:hover {
  background: #ded6c4;
  border-color: var(--border-hover);
}
html[data-theme="hall"] .skip-link { background: var(--hall-gold); color: var(--accent-ink); }

html[data-theme="hall"] .search-field input {
  background: #fffdf6;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--ink);
}
html[data-theme="hall"] .search-field input::placeholder { color: #8b8270; }

html[data-theme="hall"] .gallery-card .tag,
html[data-theme="hall"] .mode-tag {
  background: var(--accent-wash);
  color: #7a5e22;
  border-radius: 3px;
}
html[data-theme="hall"] .tag.community { background: #dce8df; color: #2f6a48; }
html[data-theme="hall"] .tag.popular { background: var(--accent-wash); color: #7a5e22; }
html[data-theme="hall"] .tag.trending { background: #ead9b8; color: #7a4e14; }

/* Clear canvas: findable without leading. An explicit surface here also means
   it can never fall back to a UA button face again. */
html[data-theme="hall"] .btn.danger,
html[data-theme="hall"] .fs-toolbar .btn.danger {
  background: #fbf1ee;
  color: #8f1b1b;
  border-color: #c98c8c;
}
html[data-theme="hall"] .btn.danger:hover:not(:disabled),
html[data-theme="hall"] .fs-toolbar .btn.danger:hover:not(:disabled) {
  background: #8f1b1b;
  color: #fff5f2;
  border-color: #6d1414;
}

html[data-theme="hall"] .loading-spinner {
  border-color: #4b4336;
  border-top-color: var(--hall-gold);
}

html[data-theme="hall"] .generator-ai-offline,
html[data-theme="hall"] .v-list li.v-warning,
html[data-theme="hall"] .fit-warning,
html[data-theme="hall"] .notice {
  background: var(--accent-wash);
  border-color: var(--hall-gold);
  color: var(--ink);
}
html[data-theme="hall"] .meme-choice:hover,
html[data-theme="hall"] .meme-choice:focus-visible,
html[data-theme="hall"] .fs-layer.selected,
html[data-theme="hall"] .field.is-active {
  background: var(--accent-wash);
  border-color: var(--accent);
}
html[data-theme="hall"] .editor-create .preview-pane {
  background: #ded7c7;
  border-color: var(--border);
}
html[data-theme="hall"] .example-card .ex-preview,
html[data-theme="hall"] .contributed img,
html[data-theme="hall"] .fs-layer img {
  background: #ded7c7;
}

/* Real controls that sit on the wall rather than on a placard. */
html[data-theme="hall"] .templates-generator-shortcut .btn {
  background: linear-gradient(#e2c377, var(--hall-brass) 50%, #9d7a2e);
  border: 1px solid #7d5f22;
  color: #2a2113;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}
html[data-theme="hall"] .account-menu .btn-x,
html[data-theme="hall"] .account-menu .btn.btn-primary {
  border: 1px solid #4a4132 !important;
}

html[data-theme="hall"] .site-footer {
  border-top: 1px solid #332d24;
  background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.55));
  color: rgba(236, 229, 214, 0.55);
}
html[data-theme="hall"] .site-footer a { color: rgba(236, 229, 214, 0.86); }

@media (prefers-reduced-motion: reduce) {
  html[data-theme="hall"] .gallery-card,
  html[data-theme="hall"] .gallery-card:hover { transform: none; transition: none; }
}

@media (max-width: 760px) {
  html[data-theme="hall"] main { padding: 0 12px; }
  html[data-theme="hall"] .account-menu {
    top: 8px;
    right: 8px;
  }
  html[data-theme="hall"] .site-header .brand {
    /* The account button floats over this band on small screens, so the lockup
       starts below it rather than running under it. */
    padding: 58px 10px 16px;
  }
  html[data-theme="hall"] .site-header .brand-lockup {
    width: min(320px, 70vw);
  }
  html[data-theme="hall"][data-view="templates"] .site-header .brand-lockup {
    width: min(280px, 62vw);
  }
  /* One strip, always. Wrapping put Add and Learn on a second row and made the
     tickets read as two torn stubs; the strip now scrolls sideways the way the
     classic header already does, so every tab stays on the same band. */
  html[data-theme="hall"] .site-header .site-nav {
    margin: 0;
    padding: 10px 8px;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  html[data-theme="hall"] .site-header .site-nav::-webkit-scrollbar { display: none; }
  html[data-theme="hall"] .site-header .site-nav a.nav-tab {
    flex: none;
    font-size: 15px !important;
    padding: 6px 14px !important;
    min-height: 40px !important;
  }
  html[data-theme="hall"] .hall-ticket-trim { display: none; }
  html[data-theme="hall"] .gallery {
    grid-template-columns: 1fr;
    gap: 48px;
    margin: 28px 4% 8px;
    padding: 22px 0 64px;
  }
  html[data-theme="hall"] .gallery-card,
  html[data-theme="hall"] .gallery-card:hover { transform: none; }
  html[data-theme="hall"] .gallery-card img { max-height: 260px; }
  html[data-theme="hall"] .view:not(#view-templates):not(#view-freestyle) {
    margin: 16px auto 36px;
    padding: 18px 16px 24px;
  }
  html[data-theme="hall"] #view-freestyle { padding: 10px 10px 24px; }
}

/* Hall review: readable plaques and compact browsing, September 2026. */
/* Browsing the collection wants the work high on the page, so the lockup
   steps down rather than filling the band. */
html[data-theme="hall"][data-view="templates"] .site-header .brand {
  padding: 18px 16px 14px;
}
html[data-theme="hall"][data-view="templates"] .site-header .brand-lockup {
  width: min(360px, 66vw);
}
html[data-theme="hall"][data-view="templates"] .site-header .site-nav { padding-top: 12px; padding-bottom: 12px; }
html[data-theme="hall"] #view-templates > .lede {
  display: block;
  position: relative;
  margin: 20px 5% 12px;
  font-size: 15px;
  color: #ece5d6;
}
html[data-theme="hall"] .gallery-count { font-size: 12px; color: rgba(255,250,236,.8); letter-spacing: .12em; margin-top: 16px; }
html[data-theme="hall"] .gallery { gap: 40px 32px; margin-top: 20px; padding-bottom: 32px; }
html[data-theme="hall"] .gallery-card::before { opacity: .45; transition: opacity 180ms ease-out; }
html[data-theme="hall"] .gallery-card:hover::before,
html[data-theme="hall"] .gallery-card:focus-within::before { opacity: 1; }
html[data-theme="hall"] .gallery-card:hover { transform: translateY(-3px); }
html[data-theme="hall"] .gallery-card:active { transform: none; transition-duration: 80ms; }
html[data-theme="hall"] .gallery-card .card-body { padding-top: 20px; gap: 9px; }
html[data-theme="hall"] .gallery-card .name { order: -1; font-size: 15px; letter-spacing: .01em; text-transform: none; }
html[data-theme="hall"] .gallery-card .tag-row { display: flex; justify-content: center; }
html[data-theme="hall"] .gallery-card .tag-row .popular,
html[data-theme="hall"] .gallery-card .tag-row .trending { display: none; }
html[data-theme="hall"] .gallery-card .tag { font-size: 12px; text-transform: none; }
html[data-theme="hall"] .gallery-card .situation,
html[data-theme="hall"] .gallery-card:hover .situation,
html[data-theme="hall"] .gallery-card:focus-within .situation {
  display: block; height: auto; opacity: 1; padding: 0; margin: 0;
  color: #f4ead4; background: none; border: 0; font-size: 14px;
  font-weight: 400; line-height: 1.5; overflow: visible; transition: none;
}
.gallery-art { display: block; }
.gallery-more-wrap { position: relative; text-align: center; margin: 12px 5% 40px; }
.gallery-refine { margin-top: 12px; }
.gallery-refine summary { cursor: pointer; min-height: 32px; }
.gallery-refine-fields { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
.gallery-refine label { display: flex; flex-direction: column; gap: 4px; min-width: 120px; flex: 1; }
.gallery-refine select { max-width: 100%; min-height: 40px; padding: 6px; }
#route-notice { margin: 18px 5%; padding: 12px; background: #fff1cd; color: #302315; }
@media (max-width: 760px) {
  html[data-theme="hall"] .gallery { margin-left: 5%; margin-right: 5%; }
  html[data-theme="hall"] .gallery-card:hover { transform: none; }
  /* Scoped to hall: this sheet loads in both themes, and unscoped selectors here
     changed the classic header and filter rows too. */
  html[data-theme="hall"] .chip-group,
  html[data-theme="hall"] .site-header .site-nav {
    scroll-snap-type: x proximity;
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent);
    padding-right: 24px;
  }
  html[data-theme="hall"] .chip-group .chip,
  html[data-theme="hall"] .site-nav a { scroll-snap-align: start; flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="hall"] .gallery-card,
  html[data-theme="hall"] .gallery-card:hover,
  html[data-theme="hall"] .gallery-card::before { transform: none; transition: none; }
}

/* One hanging line. Every work is given the same picture height and hangs in a
   band of that height, so the tops and bottoms line up across the row however
   tall or wide the original is, and the plaques below line up with them. Width
   follows the artwork, which is what keeps the work unframed: no mat, no
   moulding, no fill behind `contain` — just the picture, a hairline and the
   shadow it throws on the wall. */
html[data-theme="hall"] .gallery { align-items: start; }
html[data-theme="hall"] .gallery-card .gallery-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(150px, 19vw, 230px);
  padding: 0;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  transition: transform 160ms ease-out;
}
html[data-theme="hall"] .gallery-card .gallery-art img {
  width: auto;
  max-width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  object-fit: contain;
  margin: 0;
  background: transparent !important;
  border-radius: 0;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 18px 30px rgba(14, 11, 8, 0.5);
}
html[data-theme="hall"] .gallery-card .card-body { flex: 1; }
html[data-theme="hall"] .gallery-card .name { min-height: 38px; display: flex; align-items: center; justify-content: center; }
/* The Hall of Fame glint was a sheen travelling across frame glass. With the
   work hung unframed there is no glass to catch the light, and a white wash
   over the artwork itself just greys the picture — so the glint is gone and the
   pointer tilt below carries the effect on its own. */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="hall"] .gallery-card .gallery-art { transform: none !important; transition: none; }
  html[data-theme="hall"] #gallery[data-room="hall-of-fame"] .gallery-art::after { display: none; }
}

/* Small screens, browsing view: the compact-lockup rule above sits later in
   this sheet than the phone block, so the clearance for the floating account
   button is restated here rather than being overridden by it. */
@media (max-width: 760px) {
  html[data-theme="hall"][data-view="templates"] .site-header .brand {
    padding: 58px 16px 12px;
  }
}

/* Rooms and Format are ordinary members of their horizontal rows. They leave
   the viewport with the chips instead of sitting over names that pass beneath. */
@media (max-width: 760px) {
  html[data-theme="hall"] .chip-label {
    position: static;
    left: auto;
    z-index: auto;
    background: transparent;
    padding-right: 10px;
    box-shadow: none;
    scroll-snap-align: start;
  }
  html[data-theme="hall"] .chip-group {
    scroll-padding-left: 0;
  }
}

/* ----- how the wall hangs its work -----
   Default: every piece gets the same 4:3 area with a paper mat behind it, so
   tops, plaques and card edges all line up whatever the shape of the picture.
   The mat is deliberately darker than the cream wordmark (5.77:1 on the wall
   against the text's 7.56:1) — at the old #efe7d6 it was the brightest thing in
   the room and fought both the text and the brass plaques.
   ?mat=off returns to one hanging line with no mat; ?mat=43 keeps the 4:3 area
   without the paper. Neither brings back a moulding: the frames stay gone. */
html[data-theme="hall"][data-mat] .gallery-card .gallery-art {
  position: relative;
  height: auto;
  width: 100%;
  aspect-ratio: 4 / 3;
  box-sizing: border-box;
  padding: 0;
}
/* The picture is laid out absolutely inside the mat: a percentage max-height
   against an aspect-ratio box is unreliable, and `inset` alone would leave a
   100%-sized picture merely shifted off the mat's corner — which is exactly
   what the first pass did. Size and offset are both stated. */
html[data-theme="hall"][data-mat] .gallery-card .gallery-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}
html[data-theme="hall"][data-mat="43-mat"] .gallery-card .gallery-art {
  --mat-inset: 12px;
  background: var(--hall-mat);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 16px 28px rgba(14, 11, 8, 0.5);
}
html[data-theme="hall"][data-mat="43-mat"] .gallery-card .gallery-art img {
  inset: var(--mat-inset);
  width: calc(100% - 2 * var(--mat-inset));
  height: calc(100% - 2 * var(--mat-inset));
  box-shadow: none;
}

/* Phones show one card per row, so the 4:3 mat buys no grid alignment there and
   costs picture size on every tall meme. Below the breakpoint the work hangs
   the way it did before the mat: same height, own width, hairline and shadow. */
@media (max-width: 760px) {
  html[data-theme="hall"][data-mat] .gallery-card .gallery-art {
    aspect-ratio: auto;
    height: clamp(150px, 42vw, 230px);
    background: transparent;
    box-shadow: none;
    padding: 0;
  }
  html[data-theme="hall"][data-mat] .gallery-card .gallery-art img {
    position: static;
    inset: auto;
    width: auto;
    max-width: 100%;
    height: 100%;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.5),
      0 18px 30px rgba(14, 11, 8, 0.5);
  }
}

/* ----- AI surfaces ----- */

/* The generation progress bar: a dark brass-edged placard hung at the top of
   the room, rather than the classic theme's white card with a purple fill.
   Cream label on #1d1a15 is 13.83:1; the gold fill reads 5.19–8.22:1 against
   its track. */
html[data-theme="hall"] .ai-generation-progress {
  border: 1px solid rgba(207, 169, 81, 0.55);
  border-radius: 3px;
  background: linear-gradient(#2a241c, #1d1a15);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 210, 0.08),
    0 16px 34px rgba(0, 0, 0, 0.55);
}
html[data-theme="hall"] .ai-generation-progress-copy {
  color: var(--hall-cream);
  font-weight: 700;
  letter-spacing: 0.01em;
}
html[data-theme="hall"] .ai-generation-progress-mark { color: var(--hall-gold-bright); }
html[data-theme="hall"] .ai-generation-progress-track {
  height: 6px;
  border-radius: 1px;
  background: #3a3329;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}
html[data-theme="hall"] .ai-generation-progress-track span {
  border-radius: 1px;
  background: linear-gradient(90deg, var(--hall-gold), var(--hall-gold-bright));
}
/* Inside a cream dialog the same bar is printed in ink and brass instead:
   the dark placard would be a hole in the page, and the bright gold fails
   against a light track (#9a7b32 is 2.83:1; #7a5e22 is 4.30:1). */
html[data-theme="hall"] .ai-generation-progress--inline {
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 10px 0 0;
  background: transparent;
  box-shadow: none;
}
html[data-theme="hall"] .ai-generation-progress--inline .ai-generation-progress-copy { color: var(--ink); }
html[data-theme="hall"] .ai-generation-progress--inline .ai-generation-progress-mark { color: #7a5e22; }
html[data-theme="hall"] .ai-generation-progress--inline .ai-generation-progress-track {
  background: #e2d8c3;
  box-shadow: inset 0 1px 1px rgba(36, 31, 23, 0.18);
}
html[data-theme="hall"] .ai-generation-progress--inline .ai-generation-progress-track span {
  background: linear-gradient(90deg, #6f5520, #7a5e22);
}

/* Canvas dialogs (Grok Imagine edit, export, watermark): cream placards like
   every other working surface, not the browser-white sheet. */
html[data-theme="hall"] .fs-dialog {
  background: var(--surface);
  color: var(--ink);
  border: 0;
  border-top: 3px solid var(--hall-brass);
  /* Square-cut like the hall's other placards, so the brass rule runs straight
     to both corners instead of bending into a radius. */
  border-radius: 0;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6);
  font-family: var(--font-body);
}
html[data-theme="hall"] .fs-dialog::backdrop { background: rgba(14, 11, 8, 0.62); }
html[data-theme="hall"] .fs-dialog h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
}
html[data-theme="hall"] .fs-dialog label { color: var(--ink); }
html[data-theme="hall"] .fs-dialog .meme-recast-refs,
html[data-theme="hall"] .fs-dialog .meme-recast-refs * { font-family: var(--font-body); }

/* Grok actions keep Grok's dark treatment — it is their mark, and it should
   read as theirs — but in the room's warm dark instead of pure black and white.
   Cream on #221e18 is 13.22:1; the brass edge is 7.46:1. The focus ring pairs
   ink with gold so it shows on a cream panel and over the dark wall alike. */
html[data-theme="hall"] .grok-action {
  color: var(--hall-cream) !important;
  background: linear-gradient(#2a241c, #221e18) !important;
  border-color: rgba(207, 169, 81, 0.7) !important;
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.08), 0 6px 16px rgba(0, 0, 0, 0.35);
}
html[data-theme="hall"] .grok-action:hover:not(:disabled) {
  background: linear-gradient(#332c22, #2a241c) !important;
  border-color: var(--hall-brass) !important;
}
html[data-theme="hall"] .grok-action:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--hall-gold-bright);
}
html[data-theme="hall"] .grok-action:disabled { color: var(--hall-cream) !important; }

/* The Canvas hand-off button carried a purple glow from the classic sheet. */
html[data-theme="hall"] #open-in-canvas-btn,
html[data-theme="hall"] .template-canvas-cta {
  box-shadow: 0 6px 16px rgba(14, 11, 8, 0.28);
}

/* Audit review: room context and one compact strip of browsing controls. */
html[data-theme="hall"] .gallery-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  position: relative; z-index: 1; margin: 16px 5% 10px;
}
html[data-theme="hall"] #gallery-room-title {
  font: 700 28px/1.15 "Playfair Display", Georgia, serif;
  color: #fff1cf; margin: 0 0 5px;
}
html[data-theme="hall"] #gallery-room-description { color: #ece5d6; font-size: 14px; line-height: 1.4; margin: 0; }
html[data-theme="hall"] .gallery-heading .templates-generator-shortcut { margin: 0; flex-shrink: 0; }
html[data-theme="hall"] .gallery-controls {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px 12px;
  z-index: 3;
  margin-top: 0;
}
html[data-theme="hall"] .gallery-controls .search-field { grid-column: 1; grid-row: 1; max-width: none; }
html[data-theme="hall"] .gallery-refine { grid-column: 2; grid-row: 1; margin: 0; position: relative; }
html[data-theme="hall"] .gallery-refine summary {
  min-height: 52px; display: flex; align-items: center; padding: 0 14px;
  border: 1px solid #a78a4e; border-radius: 4px; color: #f5e9ce;
}
html[data-theme="hall"] .gallery-refine summary::after { content: ' ▾'; margin-left: 8px; }
html[data-theme="hall"] .gallery-refine-panel {
  position: absolute; right: 0; top: 100%; width: min(520px, 82vw); z-index: 12;
  padding: 16px; background: #f3eddf; color: #302619; border: 1px solid #b89a59;
  border-radius: 4px; box-shadow: 0 8px 24px #0006;
}
html[data-theme="hall"] .gallery-refine-panel .chip { color: #44321c; background: #e4dccb; }
html[data-theme="hall"] .gallery-refine-panel .chip.active { background: var(--hall-gold); color: #1f1a12; }
html[data-theme="hall"] .gallery-refine-panel .chip-label { color: #44321c; }
html[data-theme="hall"] #gallery-filters { grid-column: 1 / -1; min-width: 0; }
html[data-theme="hall"] #gallery-filters .chip-group {
  flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; gap: 7px;
  overscroll-behavior-x: contain; scrollbar-width: thin;
}
html[data-theme="hall"] #gallery-filters .chip-group > * { flex-shrink: 0; }
html[data-theme="hall"] .gallery-count { grid-column: 1; text-align: left; margin: 0; letter-spacing: .09em; }
/* Sits on the wall, so it must not pick up .btn-quiet's cream placard fill:
   cream text on that fill measured 1.0:1. On the wall it is 8.46:1. */
html[data-theme="hall"] #gallery-reset,
html[data-theme="hall"] #gallery-reset:hover { grid-column: 2; grid-row: 3; padding: 0; min-height: 24px; color: #fff1cf; background: transparent; border-color: transparent; box-shadow: none; text-decoration: underline; }
html[data-theme="hall"] .gallery { margin-top: 12px; padding-top: 12px; }
#template-font-status { padding: 12px; background: #fff1cd; color: #302315; border-radius: 4px; font-size: 14px; }
@media (max-width: 760px) {
  html[data-theme="hall"] .gallery-heading { gap: 10px; margin-top: 12px; }
  html[data-theme="hall"] #gallery-room-title { font-size: 23px; }
  html[data-theme="hall"] .gallery-heading .templates-generator-btn { font-size: 12px; padding: 10px; }
  html[data-theme="hall"] .gallery-refine summary { padding: 0 10px; }
}
html[data-theme="hall"] .gallery-controls .gallery-count { grid-column: 1 / -1; }
html[data-theme="hall"] .gallery-controls:has(#gallery-reset:not([hidden])) .gallery-count { grid-column: 1; }
html[data-theme="hall"] #gallery-format-filters .chip-group { flex-wrap: wrap; overflow: visible; mask-image: none; padding-right: 0; }
html[data-theme="hall"] .gallery-refine-panel { max-height: min(52dvh, 560px); overflow-y: auto; }
html[data-theme="hall"] .gallery-controls:has(.gallery-refine[open]) > #gallery-reset { visibility: hidden; }
html[data-theme="hall"] #gallery-refine-reset { margin-bottom: 12px; }

/* ---- Canvas rail ---------------------------------------------------------
   The spine is the dark wall the room is hung on; the panel is a cream
   placard. Cream-on-#1d1a15 is 12.9:1, and the selected group flips to ink on
   the brass ticket (7.5:1). The AI tools keep Grok's dark treatment, which
   .grok-action above already supplies. */
html[data-theme="hall"] .fs-rail {
  border-color: #a78a4e;
  background: var(--surface);
  border-radius: 0;
}
html[data-theme="hall"] .fs-spine { background: #1d1a15; }
html[data-theme="hall"] .fs-spine-btn { color: var(--hall-cream); }
html[data-theme="hall"] .fs-spine-btn[aria-selected="true"] {
  background: linear-gradient(#e6cd8a, var(--hall-ticket));
  color: var(--hall-ticket-ink);
}
html[data-theme="hall"] .fs-spine-btn[aria-pressed="false"] { color: #b3aa98; }
html[data-theme="hall"] .fs-rail-title,
html[data-theme="hall"] .fs-rail-panel > .fs-drawer > summary {
  font-family: var(--font-display);
  color: var(--ink);
}
html[data-theme="hall"] .fs-ai-tool { border-radius: 2px; }
html[data-theme="hall"] .fs-ai-cost {
  background: linear-gradient(#e6cd8a, var(--hall-ticket));
  border: 1px solid #a9842f;
  color: #2b2008;
}
html[data-theme="hall"] .fs-ai-tool:disabled { color: var(--hall-cream) !important; }
html[data-theme="hall"] .fs-ai-tool-host .meme-create-panel { background: none; }

/* The selected image's AI placard came from the classic sheet: a white card
   with a grey edge, which reads as a foreign object on a cream placard. */
html[data-theme="hall"] .fs-ai-image-action {
  background: #fffdf6;
  border-color: var(--border);
  border-radius: 2px;
}