/* Wanted Poster module - local fonts (no external requests). */
@font-face { font-family: "Pirata One"; src: url("wanted/fonts/pirata_one.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Rye"; src: url("wanted/fonts/rye.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Marcellus"; src: url("fonts/marcellus.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("fonts/permanent_marker.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/caveat.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Rock Salt"; src: url("wanted/fonts/rock_salt.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Homemade Apple"; src: url("wanted/fonts/homemade_apple.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fredericka the Great"; src: url("wanted/fonts/fredericka.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IM Fell English"; src: url("wanted/fonts/im_fell_english.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------------------------------------------------------------------------
   OKTOBARRRFEST "dark tavern" design tokens.
   Everything the module paints gets an explicit value: the host theme (often a
   dark theme) must never be able to bleed a near-white heading colour onto the
   parchment card. Scoped selectors + !important on the text-bearing elements.
   --------------------------------------------------------------------------- */
:root {
  --hlw-ink: #3a2a1a;
  --hlw-ink-soft: #6d5638;
  --hlw-parchment: #f6e8c8;
  --hlw-parchment-hi: #fffaf0;
  --hlw-parchment-lo: #ead6ab;
  --hlw-edge: #c9ab7a;
  --hlw-edge-strong: #b3946a;
  --hlw-gold: #d9a441;
  --hlw-gold-hi: #f0c266;
  --hlw-leather: #5c3a1a;
  --hlw-leather-hi: #7a4f24;
  --hlw-header-font: "Pirata One", "Trebuchet MS", serif;
  --hlw-body-font: "Trebuchet MS", "Segoe UI", sans-serif;
}

/* --- Clean embed page: dark tavern backdrop ------------------------------- */

body.hlw-clean-body {
  margin: 0;
  background-color: #191319;
  background-image:
    radial-gradient(120% 90% at 50% 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.62) 100%),
    linear-gradient(160deg, #191319 0%, #201512 45%, #25100b 100%);
  background-attachment: fixed;
  color: var(--hlw-ink);
  font-family: var(--hlw-body-font);
}

body.hlw-clean-transparent,
body.hlw-clean-transparent .hlw-shell {
  background: transparent !important;
}

/* Inside the iframe the parent sizes us from the resize message - never force
   a viewport-tall body or the reported height would always be at least 100vh. */
body.hlw-iframe-body {
  height: auto !important;
  min-height: 0 !important;
}

/* Embed skin: inside a partner iframe (Carrd) the page must not paint a dark
   slab over the host design. Same solution the lantern embed settled on: body
   AND shell go transparent, so the parchment cards sit directly on the host
   page - identical to the explicit ?hlw_bg=transparent mode, just automatic
   whenever the page detects it is framed. */
body.hlw-clean-body.hlw-iframe-body,
body.hlw-iframe-body .hlw-shell {
  background: transparent !important;
}

/* --- Shell ---------------------------------------------------------------- */

.hlw-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 10px 0;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(160deg, #f3e5c8 0%, #e6cfa2 100%);
  font-family: var(--hlw-body-font);
  color: var(--hlw-ink);
  box-sizing: border-box;
}

.hlw-shell *,
.hlw-shell *::before,
.hlw-shell *::after {
  box-sizing: border-box;
}

/* On the clean page the dark backdrop is the "shell" - the cream panel would
   only box the cards in a second time. */
body.hlw-clean-body .hlw-shell {
  background: transparent;
  max-width: 1400px;
  margin: 0 auto;
  padding: 22px clamp(12px, 3vw, 32px) 40px;
  gap: 24px;
}

.hlw-editor-shell {
  grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
  align-items: start;
}

body.hlw-clean-body .hlw-editor-shell {
  grid-template-columns: minmax(380px, 440px) minmax(0, 1fr);
}

/* --- Cards ---------------------------------------------------------------- */

.hlw-card {
  border: 1px solid var(--hlw-edge);
  border-radius: 14px;
  background: linear-gradient(170deg, #faf1dd 0%, var(--hlw-parchment) 55%, var(--hlw-parchment-lo) 100%);
  box-shadow: 0 10px 30px rgba(15, 8, 4, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  padding: 18px;
  color: var(--hlw-ink);
}

.hlw-box {
  padding: 14px;
  border-radius: 10px;
  background: #faf1dd;
  border: 1px solid var(--hlw-edge);
  color: var(--hlw-ink);
}

/* --- Headings (the theme-bleed bug lived here) ---------------------------- */

.hlw-title,
#hlw-poster-root .hlw-title,
#hlw-photographer-root .hlw-title {
  font-family: var(--hlw-header-font) !important;
  font-size: 32px;
  line-height: 1.1;
  margin: 0 0 14px;
  padding: 0 0 10px;
  color: #4a3520 !important;
  background: none;
  letter-spacing: 1px;
  text-shadow: 0 1px 0 rgba(255, 250, 235, 0.6);
  border-bottom: 2px solid var(--hlw-gold);
}

.hlw-subtitle,
#hlw-poster-root .hlw-subtitle,
#hlw-photographer-root .hlw-subtitle,
#hlw-poster-root .hlw-group-title,
#hlw-poster-root .hlw-preview-title {
  font-family: var(--hlw-header-font) !important;
  font-size: 22px;
  line-height: 1.15;
  margin: 0 0 10px;
  color: #4a3520 !important;
  background: none !important;
  letter-spacing: 0.5px;
}

#hlw-poster-root .hlw-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

#hlw-poster-root .hlw-group-title::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--hlw-gold) 0%, rgba(217, 164, 65, 0) 100%);
}

#hlw-photographer-root h3 {
  font-family: var(--hlw-header-font) !important;
  color: #4a3520 !important;
  background: none !important;
  font-size: 20px;
  margin: 18px 0 8px;
}

#hlw-poster-root p,
#hlw-photographer-root p,
#hlw-poster-root span,
#hlw-photographer-root span,
#hlw-poster-root li,
#hlw-photographer-root li {
  color: var(--hlw-ink);
}

#hlw-poster-root a,
#hlw-photographer-root a {
  color: #7a4f24;
  text-decoration: underline;
}

#hlw-poster-root a:hover,
#hlw-photographer-root a:hover {
  color: #4a3520;
}

#hlw-poster-root :focus-visible,
#hlw-photographer-root :focus-visible {
  outline: 2px solid var(--hlw-gold);
  outline-offset: 2px;
}

/* --- Fields --------------------------------------------------------------- */

.hlw-label,
#hlw-poster-root .hlw-label,
#hlw-photographer-root .hlw-label {
  display: block;
  font-family: var(--hlw-body-font);
  font-weight: 600;
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #6b4a26 !important;
  background: none !important;
}

.hlw-group {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

.hlw-field {
  margin: 0 0 12px;
  min-width: 0;
}

.hlw-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.hlw-shell input[type="text"],
.hlw-shell input[type="password"],
.hlw-shell input[type="file"],
.hlw-shell textarea,
.hlw-shell select,
#hlw-poster-root input[type="text"],
#hlw-poster-root textarea,
#hlw-poster-root select,
#hlw-photographer-root input[type="text"],
#hlw-photographer-root input[type="password"],
#hlw-photographer-root input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 10px;
  border: 1px solid var(--hlw-edge-strong) !important;
  border-radius: 8px;
  background: var(--hlw-parchment-hi) !important;
  color: var(--hlw-ink) !important;
  font-family: var(--hlw-body-font);
  font-size: 15px;
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
}

.hlw-shell select,
#hlw-poster-root select {
  padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, #6b4a26 50%), linear-gradient(135deg, #6b4a26 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Font picker previews: every option renders in the font it selects (same
   pattern as the hanami editor, assets/form.css). The select itself gets the
   chosen family from JS on change + init. */
#hlw-font option[value="pirata"] { font-family: "Pirata One", serif; }
#hlw-font option[value="rye"] { font-family: "Rye", serif; }
#hlw-font option[value="marcellus"] { font-family: "Marcellus", serif; }
#hlw-font option[value="permanent_marker"] { font-family: "Permanent Marker", cursive; }
#hlw-font option[value="caveat"] { font-family: "Caveat", cursive; }
#hlw-font option[value="rock_salt"] { font-family: "Rock Salt", cursive; }
#hlw-font option[value="homemade_apple"] { font-family: "Homemade Apple", cursive; }
#hlw-font option[value="fredericka"] { font-family: "Fredericka the Great", serif; }
#hlw-font option[value="im_fell"] { font-family: "IM Fell English", serif; }

.hlw-shell textarea {
  resize: vertical;
  min-height: 60px;
}

.hlw-shell input::placeholder,
.hlw-shell textarea::placeholder {
  color: #a3906f;
  opacity: 1;
}

.hlw-shell input:focus,
.hlw-shell textarea:focus,
.hlw-shell select:focus {
  border-color: var(--hlw-gold) !important;
  outline: 2px solid var(--hlw-gold);
  outline-offset: 1px;
}

/* Range sliders - warm leather track, gold knob, in both engines. */
.hlw-shell input[type="range"] {
  width: 100%;
  margin: 6px 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  accent-color: var(--hlw-gold);
}

.hlw-shell input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 4px;
  background: linear-gradient(90deg, #b3946a 0%, #8a6a3f 100%);
}

.hlw-shell input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 4px;
  background: linear-gradient(90deg, #b3946a 0%, #8a6a3f 100%);
}

.hlw-shell input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 50%;
  border: 1px solid #6b4a26;
  background: radial-gradient(circle at 35% 30%, var(--hlw-gold-hi), var(--hlw-gold) 70%);
  cursor: pointer;
}

.hlw-shell input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #6b4a26;
  background: radial-gradient(circle at 35% 30%, var(--hlw-gold-hi), var(--hlw-gold) 70%);
  cursor: pointer;
}

.hlw-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
  flex-wrap: wrap;
}

.hlw-row input[type="text"],
.hlw-row input[type="password"] {
  flex: 1;
  min-width: 140px;
}

.hlw-row-buttons {
  margin: 0 0 12px;
}

/* --- Buttons -------------------------------------------------------------- */

.hlw-btn,
#hlw-poster-root .hlw-btn,
#hlw-photographer-root .hlw-btn {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid #3a2410 !important;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--hlw-leather-hi) 0%, var(--hlw-leather) 100%) !important;
  color: #fbeccd !important;
  font-family: var(--hlw-body-font);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.hlw-btn:hover,
#hlw-poster-root .hlw-btn:hover,
#hlw-photographer-root .hlw-btn:hover {
  background: linear-gradient(180deg, var(--hlw-gold-hi) 0%, var(--hlw-gold) 100%) !important;
  border-color: #6b4a26 !important;
  color: #2b1a09 !important;
}

.hlw-btn:disabled,
.hlw-btn:disabled:hover {
  opacity: 0.55;
  cursor: not-allowed;
  background: linear-gradient(180deg, #8a7a68 0%, #6c5c4a 100%) !important;
  color: #f2e6d0 !important;
}

.hlw-btn-primary {
  width: 100%;
  margin-top: 6px;
  font-size: 19px;
  padding: 13px 16px;
  font-family: var(--hlw-header-font) !important;
  letter-spacing: 1.5px;
}

.hlw-btn-small {
  padding: 6px 10px;
  font-size: 13px;
}

/* --- Feedback / hints ----------------------------------------------------- */

.hlw-feedback {
  min-height: 20px;
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--hlw-ink);
}

.hlw-feedback.hlw-ok,
#hlw-poster-root .hlw-feedback.hlw-ok,
#hlw-photographer-root .hlw-feedback.hlw-ok {
  color: #2e6b2e !important;
}

.hlw-feedback.hlw-error,
.hlw-error,
#hlw-poster-root .hlw-error,
#hlw-photographer-root .hlw-error {
  color: #a03022 !important;
}

.hlw-hint,
#hlw-poster-root .hlw-hint,
#hlw-photographer-root .hlw-hint {
  font-size: 13px;
  color: var(--hlw-ink-soft) !important;
  margin: 4px 0 0;
}

/* --- Photographer bits ---------------------------------------------------- */

.hlw-qr {
  margin: 14px auto;
  width: 220px;
  min-height: 20px;
  padding: 10px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--hlw-edge);
}

.hlw-qr img,
.hlw-qr canvas {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

.hlw-session-list ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.hlw-session-list li {
  font-size: 13px;
  margin-bottom: 4px;
  word-break: break-all;
}

body.hlw-clean-body #hlw-photographer-root {
  max-width: 720px;
}

/* --- Decor props ---------------------------------------------------------- */

.hlw-stickers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hlw-sticker-option {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--hlw-edge-strong);
  border-radius: 8px;
  padding: 5px 8px;
  background: var(--hlw-parchment-hi);
  color: var(--hlw-ink) !important;
  cursor: pointer;
  font-size: 13px;
}

.hlw-sticker-option img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 4px;
}

/* The palette entries are buttons now - reset the UA button look. */
button.hlw-sticker-option {
  font: inherit;
  font-family: var(--hlw-body-font);
  text-align: left;
  line-height: 1.2;
}

button.hlw-sticker-option:hover {
  border-color: var(--hlw-gold);
  background: #fff4dd;
}

.hlw-prop-controls[hidden] {
  display: none;
}

/* Opacity/blend are prop-only - they are hidden while the headline layer is
   selected (the selected-layer panel is shared). */
.hlw-prop-controls .hlw-field[hidden] {
  display: none;
}

.hlw-prop-controls {
  margin-top: 10px;
  padding: 12px;
  border: 1px dashed var(--hlw-edge-strong);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.75);
}

/* Per-prop colour tint: one small round swatch per PROP_TINTS preset, built by
   assets/wanted-form.js into #hlw-prop-tint (prop-only, like opacity/blend). */
.hlw-tint-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

button.hlw-tint-swatch,
#hlw-poster-root button.hlw-tint-swatch {
  width: 24px;
  height: 24px;
  padding: 0;
  font: inherit;
  line-height: 1;
  border: 1px solid var(--hlw-edge-strong);
  border-radius: 50%;
  background-color: var(--hlw-parchment-hi);
  cursor: pointer;
}

button.hlw-tint-swatch:hover {
  border-color: var(--hlw-gold);
}

button.hlw-tint-swatch:disabled {
  cursor: default;
  opacity: 0.5;
}

.hlw-tint-swatch-active,
#hlw-poster-root .hlw-tint-swatch-active {
  border-color: var(--hlw-leather) !important;
  box-shadow: 0 0 0 2px var(--hlw-gold);
}

/* "Original" leaves the artwork alone - crossed out, like the "None" thumbnail
   of the template pickers. */
.hlw-tint-swatch-none {
  background-image:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--hlw-edge-strong) calc(50% - 1px), var(--hlw-edge-strong) calc(50% + 1px), transparent calc(50% + 1px));
}

.hlw-check,
#hlw-poster-root .hlw-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hlw-ink) !important;
  cursor: pointer;
}

.hlw-check input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: var(--hlw-leather);
}

/* --- Per-field text style toolbars ----------------------------------------
   One row of four toggle buttons under the field it styles (pirate name, and
   the smaller lines). aria-pressed carries the state; .hlw-style-btn-active
   only mirrors it, so the two can never disagree. */

.hlw-style-row,
#hlw-poster-root .hlw-style-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
}

.hlw-style-row-label,
#hlw-poster-root .hlw-style-row-label {
  flex: 1 1 100%;
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.3px;
  color: #6b4a26 !important;
}

/* Compact squares in the leather look of .hlw-btn. */
.hlw-style-btn,
#hlw-poster-root .hlw-style-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #3a2410 !important;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--hlw-leather-hi) 0%, var(--hlw-leather) 100%) !important;
  color: #fbeccd !important;
  font-family: var(--hlw-body-font);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.hlw-style-btn:hover,
#hlw-poster-root .hlw-style-btn:hover {
  background: linear-gradient(180deg, var(--hlw-gold-hi) 0%, var(--hlw-gold) 100%) !important;
  border-color: #6b4a26 !important;
  color: #2b1a09 !important;
}

/* Pressed: the gold of the hover state, held, plus an inset shadow so the
   toggle still reads as "down" while the pointer sits on it. */
.hlw-style-btn-active,
.hlw-style-btn-active:hover,
#hlw-poster-root .hlw-style-btn-active,
#hlw-poster-root .hlw-style-btn-active:hover {
  background: linear-gradient(180deg, var(--hlw-gold) 0%, #b6842c 100%) !important;
  border-color: #6b4a26 !important;
  color: #2b1a09 !important;
  box-shadow: inset 0 2px 5px rgba(58, 36, 16, 0.55);
}

.hlw-style-btn:disabled,
.hlw-style-btn:disabled:hover {
  opacity: 0.55;
  cursor: not-allowed;
  background: linear-gradient(180deg, #8a7a68 0%, #6c5c4a 100%) !important;
  color: #f2e6d0 !important;
  box-shadow: none;
}

/* --- Bounty currency chips ------------------------------------------------
   Same toggle look and the same aria-pressed / .hlw-style-btn-active contract
   as the style toolbars, but exactly one chip is active at a time and the word
   chips (GIL, GOLD, HUGS) need to grow past the 34px square. */

.hlw-currency-row,
#hlw-poster-root .hlw-currency-row {
  margin: 8px 0 0;
}

.hlw-currency-btn,
#hlw-poster-root .hlw-currency-btn {
  width: auto;
  min-width: 34px;
  padding: 0 9px;
  font-size: 13px;
  letter-spacing: 0.4px;
}

/* Each glyph shows what it does. */
.hlw-style-btn-bold {
  font-weight: 800;
}

.hlw-style-btn-italic {
  font-style: italic;
  font-weight: 600;
}

.hlw-style-btn-caps {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.hlw-style-btn-shadow {
  font-weight: 700;
  text-shadow: 1px 1px 0 rgba(20, 10, 2, 0.55);
}

/* --- Template pickers (Background / Sheet / WANTED lettering) -------------
   The native <select> is the state holder and stays in the DOM; it is only
   hidden visually (never display:none) so it keeps its id, its role and its
   focusability while the picker button below renders the thumbnail. */

.hlw-picker {
  position: relative;
}

/* The hidden native select stays focusable - surface its focus on the visible
   button so keyboard users never land on an invisible tab stop. */
.hlw-picker:focus-within .hlw-picker-btn {
  outline: 2px solid #d9a441;
  outline-offset: 2px;
}

.hlw-shell select.hlw-picker-native,
#hlw-poster-root select.hlw-picker-native {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

#hlw-poster-root .hlw-picker-btn,
.hlw-picker-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--hlw-edge-strong);
  border-radius: 8px;
  background: var(--hlw-parchment-hi);
  color: var(--hlw-ink) !important;
  font-family: var(--hlw-body-font);
  font-size: 14px;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

#hlw-poster-root .hlw-picker-btn:hover,
.hlw-picker-btn:hover {
  border-color: var(--hlw-gold);
  background: #fff4dd;
}

#hlw-poster-root .hlw-picker-btn:disabled,
.hlw-picker-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.hlw-picker-btn-label,
.hlw-picker-row-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.hlw-picker-chevron {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #6b4a26;
}

.hlw-picker-thumb-box {
  display: flex;
  flex: 0 0 auto;
}

.hlw-picker-thumb {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  border: 1px solid var(--hlw-edge);
  background: rgba(255, 255, 255, 0.6);
  overflow: hidden;
}

.hlw-picker-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* "None" entries (no background / no lettering): an empty, crossed-out square. */
.hlw-picker-thumb-none {
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--hlw-edge-strong) calc(50% - 1px), var(--hlw-edge-strong) calc(50% + 1px), transparent calc(50% + 1px)),
    rgba(255, 255, 255, 0.6);
}

.hlw-picker-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 40;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--hlw-edge);
  border-radius: 10px;
  background: linear-gradient(170deg, #fdf6e4 0%, var(--hlw-parchment) 60%, var(--hlw-parchment-lo) 100%);
  box-shadow: 0 8px 20px rgba(20, 10, 4, 0.32);
}

.hlw-picker-panel[hidden] {
  display: none;
}

#hlw-poster-root .hlw-picker-row,
.hlw-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 4px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--hlw-ink) !important;
  font-family: var(--hlw-body-font);
  font-size: 13px;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

#hlw-poster-root .hlw-picker-row:hover,
.hlw-picker-row:hover,
#hlw-poster-root .hlw-picker-row:focus-visible,
.hlw-picker-row:focus-visible {
  border-color: var(--hlw-gold);
  background: #fff4dd;
}

#hlw-poster-root .hlw-picker-row-active,
.hlw-picker-row-active {
  border-color: var(--hlw-gold);
  background: #fff2d4;
  box-shadow: inset 0 0 0 1px rgba(217, 164, 65, 0.5);
}

/* --- Preview (the star of the page) --------------------------------------- */

.hlw-preview {
  padding: 14px;
  position: sticky;
  top: 16px;
  align-self: start;
}

#hlw-poster-root .hlw-preview-title {
  text-align: center;
  margin-bottom: 10px;
}

#hlw-canvas {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
  touch-action: none;
  cursor: grab;
  background: #e2c493;
  box-shadow: 0 6px 18px rgba(20, 10, 4, 0.28);
}

#hlw-canvas.hlw-dragging {
  cursor: grabbing;
}

/* A disabled slider (Text Size while Auto-fit is on) must read as inert. */
.hlw-shell input[type="range"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- Layer list (preview column, under the canvas) ------------------------ */

.hlw-layer-list {
  position: relative;
  margin: 14px auto 0;
  max-width: 760px;
  padding: 10px 10px 12px;
  border: 1px solid var(--hlw-edge);
  border-radius: 10px;
  background: linear-gradient(170deg, #fdf6e4 0%, var(--hlw-parchment) 60%, var(--hlw-parchment-lo) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 3px 10px rgba(20, 10, 4, 0.18);
}

#hlw-poster-root .hlw-layer-list-title {
  font-family: var(--hlw-header-font) !important;
  font-size: 18px;
  letter-spacing: 0.5px;
  color: #4a3520 !important;
  background: none !important;
  margin: 0 0 4px;
  padding: 0 0 6px;
  border-bottom: 2px solid var(--hlw-gold);
}

#hlw-poster-root .hlw-layer-hint {
  font-size: 12px;
  color: var(--hlw-ink-soft) !important;
  margin: 6px 0 8px;
}

.hlw-layer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  padding: 5px 7px;
  border: 1px solid var(--hlw-edge-strong);
  border-left: 4px solid transparent;
  border-radius: 8px;
  background: var(--hlw-parchment-hi);
  color: var(--hlw-ink);
  font-size: 13px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.hlw-layer-row-move {
  cursor: grab;
}

.hlw-layer-row-move:hover {
  border-color: var(--hlw-gold);
  background: #fff4dd;
}

.hlw-layer-row-selected,
.hlw-layer-row-selected:hover {
  border-left-color: var(--hlw-gold);
  background: #fff2d4;
  box-shadow: inset 0 0 0 1px rgba(217, 164, 65, 0.5);
}

.hlw-layer-row-dragging {
  opacity: 0.55;
  cursor: grabbing;
}

/* The photo row: selectable like a movable layer, but it keeps its place in the
   stack (it always draws under the texts), so it is a click target, not a drag
   handle. */
.hlw-layer-row-photo {
  cursor: pointer;
}

.hlw-layer-row-photo:hover {
  border-color: var(--hlw-gold);
  background: #fff4dd;
}

/* Fixed, non-draggable orientation rows at the bottom of the stack. */
.hlw-layer-row-fixed {
  opacity: 0.55;
  border-style: dashed;
  background: rgba(255, 250, 240, 0.6);
  cursor: default;
}

.hlw-layer-grip {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: 14px;
  flex: 0 0 auto;
}

.hlw-layer-grip i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--hlw-edge-strong);
}

.hlw-layer-thumb {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  border: 1px solid var(--hlw-edge);
  background: rgba(255, 255, 255, 0.6);
  overflow: hidden;
}

.hlw-layer-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

#hlw-poster-root .hlw-layer-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--hlw-ink) !important;
}

#hlw-poster-root .hlw-layer-del {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #3a2410;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--hlw-leather-hi) 0%, var(--hlw-leather) 100%);
  color: #fbeccd;
  cursor: pointer;
  font-size: 14px;
}

#hlw-poster-root .hlw-layer-del:hover {
  background: linear-gradient(180deg, var(--hlw-gold-hi) 0%, var(--hlw-gold) 100%);
  color: #2b1a09;
}

#hlw-poster-root .hlw-layer-del:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.hlw-layer-drop {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 3px;
  border-radius: 3px;
  background: var(--hlw-gold);
  box-shadow: 0 0 6px rgba(217, 164, 65, 0.9);
  pointer-events: none;
}

.hlw-layer-drop[hidden] {
  display: none;
}

.hlw-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
}

.hlw-disabled {
  color: var(--hlw-ink-soft);
}

/* The controls card is far taller than the viewport (especially inside the
   Carrd embed), so its header pins to the top while the options scroll away
   underneath - the same trick the preview column uses. Negative margins
   stretch the strip across the card padding up to the card border; its own
   parchment fill and gold edge keep the scrolling content from showing
   through, and the soft bottom shadow reads as a proper ledge.
   Lives ABOVE the responsive section on purpose: the phone breakpoint below
   un-sticks it with the same specificity, so source order has to favour the
   media query. */
#hlw-poster-root .hlw-controls > .hlw-title {
  position: sticky;
  /* A logged-in admin gets the WP admin bar pinned over the viewport top -
     without this offset the strip would slide underneath it. Core publishes
     the height as --wp-admin--admin-bar--height (two dashes before height);
     the single-dash spelling is kept as a second fallback, and 0px covers
     every logged-out visitor. */
  top: var(--wp-admin--admin-bar--height, var(--wp-admin--admin-bar-height, 0px));
  z-index: 30;
  margin: -18px -18px 14px;
  padding: 16px 18px 10px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(170deg, #faf1dd 0%, var(--hlw-parchment) 92%);
  border-bottom: 2px solid var(--hlw-gold);
  box-shadow: 0 6px 14px -8px rgba(15, 8, 4, 0.55);
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
  .hlw-editor-shell,
  body.hlw-clean-body .hlw-editor-shell {
    grid-template-columns: 1fr;
  }

  /* Phone: the poster comes first, controls scroll underneath it. */
  .hlw-editor-shell .hlw-preview {
    order: -1;
    position: static;
    top: auto;
  }

  /* The card header follows the preview: a pinned strip would eat a good part
     of a phone viewport that is already scrolling the poster past it. */
  #hlw-poster-root .hlw-controls > .hlw-title {
    position: static;
    top: auto;
    margin: 0 0 14px;
    padding: 0 0 10px;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
}

@media (max-width: 520px) {
  .hlw-grid-2 {
    grid-template-columns: 1fr;
  }

  .hlw-title,
  #hlw-poster-root .hlw-title,
  #hlw-photographer-root .hlw-title {
    font-size: 27px;
  }
}