/* Homebrew Workshop — user-authored content.
   Deliberately reuses the token vocabulary of style-library.css (--bg, --surface,
   --text, --text-muted, --accent, --border) so the two tabs read as one
   application. All six are theme-scoped in style-base.css -- dark values on
   :root, light overrides under [data-theme="light"] -- so this file needs no
   theme blocks of its own. */

.homebrew-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

.hbw-loading,
.hbw-empty,
.hbw-error {
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
}

.hbw-view-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.hbw-view-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  margin: 0;
}

.hbw-back,
.hbw-btn {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  font: inherit;
}

.hbw-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);   /* was #fff: white on the dark theme's gold measured 1.65:1 */
}

.hbw-btn-danger {
  border-color: #a33;
  color: #a33;
}

.hbw-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Landing cards */
.hbw-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.hbw-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  color: var(--text);
}

/* The accent replaces the hairline on hover and keyboard focus, as it does on
   .lib-card next door, so the two tabs' landing grids answer the pointer the
   same way. The disabled card keeps its hairline: it is not a target. */
.hbw-card:not([disabled]):hover,
.hbw-card:focus-visible { border-color: var(--accent); }
.hbw-card[disabled] { cursor: default; opacity: 0.6; }
.hbw-card-icon { font-size: 1.8rem; }
.hbw-card-name { font-weight: 700; }
.hbw-card-desc { color: var(--text-muted); font-size: 0.9rem; }
.hbw-card-count { color: var(--text-muted); font-size: 0.85rem; margin-top: 4px; font-variant-numeric: tabular-nums; }
.hbw-card-soon {
  align-self: flex-start;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--text-muted);
}

/* Scope switch: Browse / Your Collection. One segmented control, not two
   loose pills -- the two are one choice. */
.hbw-scope {
  display: inline-flex;
  align-self: flex-start;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 16px;
}

.hbw-scope-btn {
  background: transparent;
  border: 0;
  padding: 6px 16px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: var(--text-muted);
}

.hbw-scope-btn.on {
  background: var(--accent-soft);
  color: var(--accent);
}

/* The view header's right-hand pair: the one accent button of the view, then
   Back. Both are the header's business; the rows never carry a create button. */
.hbw-view-actions { display: flex; gap: 8px; align-items: center; }

/* Filter pills: the same shape as the library's .lib-pill, so a filter reads as
   a filter on either tab. `on` uses --accent-glow, as .lib-pill.on does. */
.hbw-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.hbw-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hbw-pill:hover { border-color: var(--accent); }
.hbw-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hbw-pill.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.hbw-pill-small { font-size: 12px; padding: 3px 10px; cursor: default; }

/* The type row: one line, every pill the same width, so the row reads as a
   set of tabs rather than a bag of chips. Wraps on a phone. */
.hbw-types { flex-wrap: nowrap; margin-bottom: 12px; }
.hbw-types .hbw-pill { flex: 1 1 0; justify-content: center; white-space: nowrap; padding: 7px 8px; }
/* More pills than one line holds -- the fourteen creature types -- go in a
   grid of equal cells, two rows of seven at full width, wrapping as it narrows. */
.hbw-types-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }

.hbw-filter-row { gap: 6px; }
.hbw-filter-label {
  min-width: 110px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Advanced filters: a full-width bar that folds out. The border goes accent
   while it is open OR while anything inside is on, so a filter hidden behind
   a closed bar can never silently empty the list. */
.hbw-adv {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
  margin-bottom: 16px;
  transition: border-color 120ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hbw-adv.on { border-color: var(--accent); }

.hbw-adv-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.hbw-adv-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 9px; }

.hbw-adv-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hbw-adv-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hbw-adv-title { font-weight: 700; }
.hbw-adv-sub { color: var(--text-muted); font-size: 12px; }
.hbw-adv-active { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.hbw-adv-chevron { color: var(--text-muted); margin-left: 6px; }

/* The panel is a grid of filter cards, two or three across, each card its
   label on top and its control beneath -- no label column, so no gap between
   the word and what it governs. A wide card spans the row for a long pill set. */
.hbw-adv-panel {
  border-top: 1px solid var(--border);
  padding: 12px 14px 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  background: var(--bg);
}

.hbw-fcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Stretch, not start: the cards in one row share a height, so a short card
     (Author, one button) does not sit half-height beside a tall pill set. */
  align-self: stretch;
  min-width: 0;
  transition: border-color 120ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hbw-fcard.on { border-color: var(--accent); }
.hbw-fcard-wide { grid-column: 1 / -1; }

.hbw-fcard-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hbw-fcard-count {
  margin-left: auto;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 999px;
  padding: 0 7px;
  font-size: 10px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

/* Pills inside a card sit on --bg, one step below the card, as an input does. */
.hbw-fcard .hbw-pill { background: var(--bg); padding: 4px 10px; font-size: 12px; }
.hbw-fcard .hbw-pill.on { background: var(--accent-soft); }

/* The multi-select wears the bestiary's .lib-multi-* classes; these are the
   Workshop's additions -- a chip per pick with its own remove, and the count
   beside an option. */
.hbw-chip-pick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-color: var(--accent);
  color: var(--accent);
  padding: 2px 4px 2px 9px;
}
.hbw-chip-pick button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  line-height: 1;
  padding: 0 4px;
}
.hbw-multi-count { margin-left: auto; color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.hbw-multi .lib-multi-opt span:first-of-type { flex: 1; }

.hbw-adv-foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;
}

.hbw-adv-foot .hbw-btn { margin-left: auto; }
.hbw-btn-ghost { background: transparent; color: var(--text-muted); }
.hbw-btn-ghost:hover { color: var(--text); border-color: var(--accent); }

/* The shell puts width: 100% on every select; this one sits in a pill row. */
.hbw-author-select {
  width: auto;
  min-width: 220px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
}

/* Toolbar: search + count. The create button lives in the header now. */
.hbw-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}

.hbw-search,
.hbw-field input,
.hbw-field select,
.hbw-field textarea {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit;
}

.hbw-search { flex: 1 1 220px; max-width: 420px; border-radius: 8px; padding: 9px 12px; }
.hbw-count { margin-left: auto; color: var(--text-muted); font-size: 13px; font-variant-numeric: tabular-nums; }

/* List: one grid template, set inline as --hbw-cols by the type's config and
   shared by the header row and every row's summary, so the two cannot drift
   -- the bestiary's arrangement, for the bestiary's reason. */
.hbw-headrow {
  display: grid;
  grid-template-columns: var(--hbw-cols);
  gap: 10px;
  padding: 0 15px 2px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.hbw-sort {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 2px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: color 120ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hbw-sort:hover,
.hbw-sort[aria-sort="ascending"],
.hbw-sort[aria-sort="descending"] { color: var(--accent); }
.hbw-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.hbw-sort-arrow { font-size: 9px; }

.hbw-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }

.hbw-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 120ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hbw-row[open] { border-color: var(--border-strong); }

.hbw-row > summary {
  display: grid;
  grid-template-columns: var(--hbw-cols);
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
}

.hbw-row > summary::-webkit-details-marker { display: none; }
.hbw-row > summary:hover { background: rgba(255, 255, 255, 0.04); border-radius: 9px; }
[data-theme="light"] .hbw-row > summary:hover { background: rgba(0, 0, 0, 0.04); }
.hbw-row > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 9px; }

.hbw-row-name { font-weight: 700; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hbw-row-by { font-weight: 400; font-size: 12px; color: var(--text-muted); }
.hbw-row-muted { color: var(--text-muted); font-weight: 400; }
/* The last cell of a row carries the chevron, whatever it holds. */
.hbw-row-last { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hbw-row-traits { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbw-row-num { font-variant-numeric: tabular-nums; }
.hbw-row-chevron { margin-left: auto; color: var(--text-muted); transition: transform 0.15s; }
.hbw-row[open] .hbw-row-chevron { transform: rotate(90deg); }

.hbw-chip {
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--text-muted);
  justify-self: start;
  white-space: nowrap;
}

.hbw-chip-private { border-color: var(--accent); color: var(--accent); font-size: 10px; padding: 0 7px; vertical-align: middle; }

/* Allowed-but-noteworthy choices only (a custom resource that never resets on
   a rest). Errors stay --danger; this is its own colour on purpose. */
.hbw-chip.warn { color: var(--warn); border-color: var(--warn); }

/* The opened row: plain description first, then one line per effect with the
   value in the accent, then -- under Your Collection only -- the actions. */
.hbw-row-body {
  margin: 0 14px;
  padding: 12px 0 14px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 10px;
  font-size: 14px;
  line-height: 1.55;
}

.hbw-row-body p { margin: 0; }
/* A spell's "At higher levels." paragraph, one tier below the description. */
.hbw-row-higher { color: var(--text-muted); }
.hbw-row-higher b { color: var(--text); font-weight: 600; }

/* A species' named traits: the name in the accent, its text beside it. */
.hbw-row-traitlist { display: grid; grid-template-columns: minmax(120px, 170px) 1fr; gap: 6px 14px; }
.hbw-row-traitlist b { color: var(--accent); font-weight: 600; }
.hbw-row-traitlist small { color: var(--text-muted); font-weight: 400; }

/* A background's feature: its own block with the accent on its left edge. */
.hbw-row-feature { border-left: 3px solid var(--accent); background: var(--bg); border-radius: 0 8px 8px 0; padding: 8px 12px; display: grid; gap: 4px; }
.hbw-row-feature > b { color: var(--accent); font-weight: 600; }
.hbw-row-feature .hbw-row-effects { margin-top: 4px; }

/* A group heading inside the Advanced panel -- the bestiary's Statistics,
   Defenses & senses, and so on -- spanning the grid above its cards. */
.hbw-fgroup {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  padding: 6px 0 3px;
  border-bottom: 1px solid var(--border);
}
.hbw-fgroup:first-child { padding-top: 0; }

/* A min-to-max pair, the bestiary's own control for a range. */
.hbw-range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.hbw-range input, .hbw-range select {
  width: 100%;
  min-width: 0;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.hbw-range input.on, .hbw-range select.on { border-color: var(--accent); }
.hbw-range-dash { color: var(--text-muted); font-size: 12px; }

/* The stat block inside an opened creature row is the library's own; it sits
   on --bg one step down, as the tiles do. */
.hbw-row-statblock { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
@media (max-width: 720px) { .hbw-row-traitlist { grid-template-columns: 1fr; } }

/* A weapon's damage cell: dice first, type small and muted beside it. */
.hbw-row-damage { font-variant-numeric: tabular-nums; }
.hbw-row-damage small { color: var(--text-muted); font-size: 12px; margin-left: 5px; }

/* A suit's AC cell: the base, then the Dex rule its category implies. */
.hbw-row-ac { font-variant-numeric: tabular-nums; font-weight: 600; }
.hbw-row-ac small { color: var(--text-muted); font-weight: 400; font-size: 12px; margin-left: 5px; }

/* The stat strip of an opened row -- damage, properties, mastery, weight and
   cost for a weapon; each type's config names its own tiles. Sits on --bg
   inside the --surface row, one step down, as an input does. */
.hbw-row-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.hbw-row-stat {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hbw-row-stat span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hbw-row-stat b { font-weight: 600; font-variant-numeric: tabular-nums; }
.hbw-row-effects { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }
.hbw-row-effects b { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hbw-row-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 4px; }

.hbw-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.hbw-empty b { color: var(--text); }

/* Form */
/* ── The form as collapsible cards (mockup 11) ───────────────────────────────
   Each section is a <details> on --surface; folded it is one line -- title in
   the display face, a summary of its contents, a state chip -- and open its
   body sits on --bg above a hairline, as the filter panel does. */
/* Doubled class so this outranks the plain .hbw-form rule below it. */
.hbw-form.hbw-form-sections {
  max-width: 900px;
  padding: 0;
  background: none;
  border: 0;
  gap: 10px;
}

.hbw-sec {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: visible;
  transition: border-color 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hbw-sec[open] { border-color: var(--border-strong); }
.hbw-sec-cond { border-left: 3px solid var(--accent); }

.hbw-sec > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
}
.hbw-sec > summary::-webkit-details-marker { display: none; }
.hbw-sec > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 9px; }
.hbw-sec-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.hbw-sec-sum { flex: 1; min-width: 0; color: var(--text-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbw-sec-sum.filled { color: var(--text); }
.hbw-sec-state { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; padding: 0 7px; border: 1px solid; white-space: nowrap; }
.hbw-sec-state.done { color: var(--success); border-color: var(--success); }
.hbw-sec-state.need { color: var(--danger); border-color: var(--danger); }
.hbw-sec-chevron { color: var(--text-muted); }

.hbw-sec-body {
  border-top: 1px solid var(--border);
  padding: 12px 14px 14px;
  display: grid;
  gap: 10px;
  background: var(--bg);
  border-radius: 0 0 10px 10px;
}

/* Short fields side by side; below 720px every row is one column. */
.hbw-frow { display: grid; gap: 10px; }
.hbw-frow-2 { grid-template-columns: 1fr 1fr; }
.hbw-frow-3 { grid-template-columns: 1fr 1fr 1fr; }
.hbw-frow-4 { grid-template-columns: repeat(4, 1fr); }
.hbw-frow > .hbw-field { min-width: 0; }

/* The label row: text, the required dot, the info button. */
.hbw-form-sections .hbw-field { position: relative; }
.hbw-form-sections .hbw-field > label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.hbw-req { width: 6px; height: 6px; border-radius: 50%; background: var(--danger); display: inline-block; flex: none; }

/* The shell gives every button a touch-sized minimum; this is a glyph, so
   its own size wins. */
.hbw-info {
  width: 16px !important;
  height: 16px !important;
  min-height: 0 !important;
  min-width: 0 !important;
  border-radius: 50%;
  border: 1px solid var(--text-muted);
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 10px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: help;
  flex: none;
}
.hbw-info:hover, .hbw-info.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.hbw-info:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The glyph stays 16px, but on touch widths its hit area grows to about 36px (invisible, so the look is unchanged). */
@media (max-width: 900px) {
  .hbw-info { position: relative; }
  .hbw-info::after { content: ""; position: absolute; inset: -10px; }
}
/* Light theme: --danger is 4.4:1 on the card surface; darken the text a touch (token unchanged). */
[data-theme="light"] .hbw-btn-danger, [data-theme="light"] .hbw-sec-state.need { color: color-mix(in srgb, var(--danger) 85%, var(--text)); }

.hbw-tip {
  position: absolute;
  top: 24px;
  left: 0;
  z-index: 30;
  width: min(300px, 90vw);
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  display: grid;
  gap: 5px;
  color: var(--text);
  font-weight: 400;
}
.hbw-tip[hidden] { display: none; }
.hbw-tip > b { color: var(--accent); font-weight: 600; }
.hbw-tip code { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; font-family: inherit; }
.hbw-tip-not { color: var(--text-muted); }
[data-theme="light"] .hbw-tip { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); }

/* A field that failed validation. */
.hbw-invalid { border-color: var(--danger) !important; }
.hbw-field-err { font-size: 12px; color: var(--danger); }
.hbw-field-err[hidden] { display: none; }

/* Tags as chips: ticked ones solid with a note of their source, the rest dashed. */
.hbw-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.hbw-tags .hbw-pill { padding: 4px 10px; font-size: 12px; }
.hbw-tags .hbw-pill.sug { border-style: dashed; color: var(--text-muted); background: transparent; }
.hbw-tags .hbw-pill i { font-style: normal; font-weight: 400; color: var(--text-muted); }

/* Properties and other closed lists inside the form read as pills too. */
.hbw-form-sections .hbw-checks { gap: 5px; }
.hbw-form-sections .hbw-checks .hbw-check {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px 3px 6px;
  background: var(--surface);
  font-size: 12px;
}

/* The effect search: one accent-bordered box, grouped results, quick chips. */
.hbw-esearch { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--accent); background: var(--surface); }
.hbw-esearch .hbw-effect-filter { flex: 1; border: 0; background: transparent; padding: 4px; min-width: 0; width: auto; }
.hbw-esearch .hbw-effect-filter:focus { outline: none; }
.hbw-esearch .hbw-effect-help { white-space: nowrap; }

.hbw-eres { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); display: grid; max-height: 320px; overflow-y: auto; }
.hbw-eres-group { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); padding: 8px 11px 3px; }
.hbw-eres-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 11px; border-top: 1px solid var(--border); align-items: center; }
.hbw-eres-item:hover, .hbw-eres-item.on { background: var(--accent-soft); }
.hbw-eres-item > b { font-weight: 600; }
.hbw-eres-item > b mark { background: transparent; color: var(--accent); }
.hbw-eres-item > span { color: var(--text-muted); font-size: 12.5px; grid-column: 1; }
.hbw-eres-add { grid-row: 1 / span 2; grid-column: 2; align-self: center; font: inherit; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); background: transparent; cursor: pointer; white-space: nowrap; }
.hbw-eres .hbw-effect-empty { padding: 10px 12px; }

.hbw-effect-quick { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.hbw-effect-quick .hbw-pill { padding: 4px 10px; font-size: 12px; }
.hbw-effect-browse { width: auto; min-width: 200px; padding: 5px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 600; }
.hbw-effect-group { font-size: 10px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; }

/* The save bar stays reachable however long the form gets. */
.hbw-save-bar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  align-items: center;
  margin-top: 4px;
}
.hbw-save-bar .hbw-btn-primary { margin-left: auto; }
.hbw-save-missing { color: var(--text-muted); font-size: 13px; }

@media (max-width: 720px) {
  .hbw-frow-2, .hbw-frow-3 { grid-template-columns: 1fr; }
  .hbw-frow-4 { grid-template-columns: 1fr 1fr; }
  .hbw-sec-sum { display: none; }
  .hbw-save-bar { flex-wrap: wrap; }
  .hbw-save-missing { width: 100%; order: -1; }
}

.hbw-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
}

.hbw-field { display: flex; flex-direction: column; gap: 6px; }
.hbw-field label { font-weight: 600; font-size: 0.9rem; }
.hbw-field-hint { color: var(--text-muted); font-size: 0.8rem; }
/* For allowed-but-noteworthy choices only (a custom-recharge resource): a
   warning colour, never --danger, which stays for real errors. */
.hbw-field-warn {
  color: var(--warn);
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.78rem;
}
.hbw-field textarea { min-height: 140px; resize: vertical; }

.hbw-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* A closed vocabulary, shown in full. Wrapped rather than scrolled: the point
   of showing the list is that an author can see what is allowed, and a box
   that hides half of it behind a scrollbar does not. */
.hbw-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.hbw-checks .hbw-check { font-size: 0.85rem; font-weight: 400; }
.hbw-checks .hbw-check label { font-weight: 400; }

/* One numbered cell per key of a served vocabulary: the six ability scores,
   the six monster speeds, the senses, the eighteen skills. A fixed six columns
   rather than a wrap, because for the abilities the ORDER IS THE MEANING — an
   author reads STR DEX CON INT WIS CHA as a row, and a reflowed one reads as a
   list of unrelated numbers. The eighteen skills wrap onto three rows of six,
   which is the same grid doing the obvious thing. */
.hbw-keyed-numbers {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.hbw-keyed-cell { display: flex; flex-direction: column; gap: 4px; }
.hbw-keyed-cell span {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: center;
  /* A skill name is two words at this width and a speed key is one; breaking
     rather than truncating keeps "sleight of hand" readable in a 1/6 column. */
  overflow-wrap: anywhere;
}
.hbw-keyed-cell input { width: 100%; text-align: center; }

/* A list of sub-entries — a species' traits today. Each row names the entry and
   says how many effects it carries, because that is the thing an author cannot
   see from the name and the thing that decides whether the trait does anything
   at all. */
.hbw-subform {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.hbw-subform-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
}

.hbw-subform-name { font-weight: 600; }
.hbw-subform-meta {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-right: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hbw-subform-empty { color: var(--text-muted); font-size: 0.85rem; margin: 0; }

.hbw-btn-small { padding: 4px 10px; font-size: 0.8rem; }

.hbw-form-actions { display: flex; gap: 8px; }
.hbw-form-error { color: #a33; font-size: 0.9rem; }

.hbw-note {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 12px 14px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* "This will not compute" — what the engine will read on this entry and decline
   to apply. Built off .hbw-note's shape on purpose, because it IS a note: the
   save succeeded and nothing the author wrote is wrong. The one difference is
   the accent, which comes from --badge-info-* rather than the gold, so the panel
   reads as an aside rather than as the form's own voice. It deliberately shares
   nothing with .hbw-form-error, whose #a33 would make a successful save look
   like a rejected one — see the long note above diagnosticsNoticeHTML in
   static/js/homebrew.js for why that distinction is the whole design. */
.hbw-diag {
  background: color-mix(in srgb, var(--badge-info-bg) 45%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--badge-info-fg) 32%, transparent);
  border-left: 3px solid var(--badge-info-fg);
  border-radius: 6px;
  padding: 12px 14px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.hbw-diag b {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-size: 0.95rem;
}

.hbw-diag p { margin: 0 0 8px; line-height: 1.45; }

.hbw-diag ul { margin: 0; padding: 0; list-style: none; }

.hbw-diag li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  color: var(--text);
}

.hbw-diag-chip {
  flex: none;
  padding: 1px 7px;
  border: 1px solid color-mix(in srgb, var(--badge-info-fg) 45%, transparent);
  border-radius: 999px;
  background: var(--badge-info-bg);
  color: var(--badge-info-fg);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Effect picker — the rows an author stacks on a magic item, plus the control
   that adds another. Same six tokens as the rest of this file; the picker
   borrows .hbw-btn, .hbw-check and .hbw-form-error rather than restyling them. */
.hbw-effects { gap: 10px; }

/* The block .hbw-effects repaints. Its own column layout, because the rows, the
   picker and the two guidance lines are siblings inside it -- left as a plain
   block the inline spans run together on one line. */
.hbw-effects-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hbw-effect-row {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hbw-effect-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hbw-effect-name { font-weight: 600; }
.hbw-effect-head .hbw-btn { margin-left: auto; padding: 4px 10px; font-size: 0.8rem; }
.hbw-effect-help { color: var(--text-muted); font-size: 0.8rem; }
.hbw-effect-empty { color: var(--text-muted); font-size: 0.85rem; }

.hbw-effect-value { display: flex; flex-direction: column; gap: 8px; }

.hbw-effect-pair,
.hbw-effect-add-item,
.hbw-effect-statement,
.hbw-effect-add {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.hbw-effect-statements { display: flex; flex-direction: column; gap: 8px; }
.hbw-effect-statement label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* The shell puts width: 100% on every input, select and textarea
   (style-wizard-shell.css). That is right for the stacked fields above and
   wrong for these rows, which are horizontal: left alone, an ability picker and
   the level beside it each take a full line. Every control in a row states its
   own width instead. */
.hbw-effect-pair select,
.hbw-effect-statement select,
.hbw-effect-add select { width: auto; min-width: 120px; }

.hbw-effect-add select { flex: 1 1 220px; }

/* Qualified by the element and its row, because the shell's own rule for
   input[type="number"] outranks a bare class and would win the width back.
   align-self matters as much: a whole-number effect is the only child of a
   column, where stretching is the default, and the box came out a field tall. */
.hbw-effect-value input.hbw-effect-num,
.hbw-effect-statement input.hbw-effect-num {
  width: 90px;
  flex: 0 0 auto;
  align-self: flex-start;
}

.hbw-effect-filter,
.hbw-effect-add-item input[type="text"],
.hbw-effect-statement input[type="text"] {
  width: auto;
  flex: 1 1 180px;
  min-width: 120px;
}

.hbw-effect-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.hbw-effect-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  padding: 2px 6px 2px 10px;
  font-size: 0.8rem;
}

.hbw-effect-chip button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  padding: 0 4px;
}

/* The spell picker's chip: a level in italic and a source tag in a small
   pill, both inside the same `.hbw-effect-chip` shell every other list uses. */
.hbw-effect-chip i { font-style: normal; color: var(--text-muted); }
.hbw-effect-chip b {
  font-weight: 600;
  font-size: 10px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 6px;
}

/* An old typed spell name that matches no known book spell: danger-toned
   rather than accent-toned, with a second action ("Pick instead") beside
   Remove. */
.hbw-effect-chip-warn { border-color: var(--danger); color: var(--danger); }
.hbw-effect-chip-warn i { color: var(--danger); opacity: 0.8; }

.hbw-effect-error { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Six labelled pills need about 900px to sit on one line without clipping;
   below that they go two or three to a row rather than off the edge. */
@media (max-width: 960px) {
  .hbw-types { flex-wrap: wrap; }
  .hbw-types .hbw-pill { flex: 1 1 30%; }
}

@media (max-width: 720px) {
  .homebrew-shell { padding: 16px 12px 48px; }
  .hbw-effect-add .hbw-effect-filter { flex: 1 1 100%; }
  .hbw-effect-statement { align-items: flex-start; }
  .hbw-view-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hbw-view-actions { width: 100%; }
  .hbw-view-actions .hbw-btn-primary { flex: 1; }
  .hbw-types { flex-wrap: wrap; }
  .hbw-types .hbw-pill { flex: 1 1 45%; }
  .hbw-filter-label { min-width: 100%; }
  .hbw-adv-active .hbw-pill-small { display: none; }
  .hbw-headrow { display: none; }
  .hbw-row > summary { grid-template-columns: 1fr 1fr; }
  .hbw-row > summary .hbw-row-traits { grid-column: 1 / -1; }
  .hbw-row-actions { justify-content: stretch; }
  .hbw-row-actions .hbw-btn { flex: 1; }
}

/* The creature form's preview card: the bestiary's stat block over the draft. */
.hbw-preview .hbw-sec-body { padding: 0; gap: 0; }
.hbw-pv-head { padding: 12px 14px 8px; }
.hbw-pv-name { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 700; color: var(--accent); }
.hbw-pv-sub { color: var(--text-muted); font-style: italic; font-size: 13px; }
.hbw-preview-note { display: block; padding: 6px 14px 10px; color: var(--text-muted); font-size: 12px; }

/* Tablet widths: the shared sheets only enlarge controls up to 720px, which left the scope tabs, sort headers and
   effect pills at 18-32px. */
@media (min-width: 721px) and (max-width: 900px) {
  .hbw-btn, .hbw-scope-btn, .hbw-sort, .hbw-pill, .hbw-effect-filter { min-height: 36px; box-sizing: border-box; }
}

/* Choices editor: one bordered block per option group. */
.hbw-choice-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.hbw-choice-option input[type="text"] { flex: 1; min-width: 0; }

/* A creature option's changed fields: each field with its own "stop changing" button. */
.hbw-variant-field { border-left: 3px solid var(--hbw-line, rgba(127,127,127,.35)); padding-left: 10px; margin: 10px 0; }

/* ── Choice editor: option cards, the list generator, the skill effect ─────────
   Selected states are SOLID accent with the on-accent text, never --accent-glow
   (a 50% focus-ring alpha) behind accent-coloured text, which is what made the
   old selections vanish in the dark theme. A tick mark backs the colour. */
.hbw-ochips { display: flex; flex-wrap: wrap; gap: 6px; }
.hbw-ochip {
  font: inherit; font-size: 13px; font-weight: 600; min-height: 30px;
  padding: 4px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface2); color: var(--text);
  transition: border-color 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hbw-ochip:hover { border-color: var(--accent); }
.hbw-ochip:focus-visible, .hbw-seg button:focus-visible, .hbw-stepper button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.hbw-ochip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.hbw-ochip.on::before { content: "\2713\00a0"; }

.hbw-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.hbw-stepper button {
  font: inherit; font-size: 16px; line-height: 1; width: 34px; border: 0; cursor: pointer;
  background: var(--surface2); color: var(--text);
}
.hbw-stepper button:hover { background: var(--accent-soft); }
.hbw-stepper output {
  min-width: 38px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--text); background: var(--input-bg);
  border-left: 1px solid var(--border-strong); border-right: 1px solid var(--border-strong);
}

.hbw-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.hbw-seg button {
  font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border: 0; cursor: pointer;
  background: var(--surface2); color: var(--text);
}
.hbw-seg button + button { border-left: 1px solid var(--border-strong); }
.hbw-seg button:hover { background: var(--accent-soft); }
.hbw-seg button.on { background: var(--accent); color: var(--on-accent); }

.hbw-skillup { display: flex; flex-direction: column; gap: 10px; }
.hbw-sk-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; }
.hbw-sk-lbl { flex: 0 0 90px; padding-top: 6px; font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.hbw-sk-row > .hbw-ochips, .hbw-sk-row > .hbw-seg { flex: 1 1 260px; }
.hbw-sk-row > .hbw-seg { flex: 0 1 auto; }
.hbw-sk-preview { margin: 0; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 8px 8px 0; font-size: 13px; color: var(--text); }
@media (max-width: 720px) { .hbw-sk-lbl { flex-basis: 100%; padding-top: 0; } }

/* An option is a compact card: name, its effects as tags, then the buttons. */
.hbw-opt { border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.hbw-opt.open { border-color: var(--accent); }
.hbw-opt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; }
.hbw-opt-head input[type="text"] { flex: 0 1 190px; min-width: 120px; width: auto; }
.hbw-opt-tags { flex: 1 1 160px; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.hbw-tag { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--border-strong); }
.hbw-tag-empty { background: transparent; color: var(--text-faint); font-weight: 400; border-style: dashed; }
.hbw-opt-body { padding: 10px 12px 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.hbw-choice-note { margin: 0; font-size: 13px; color: var(--warn); background: var(--warn-soft); border-radius: 6px; padding: 6px 10px; }

.hbw-gen { border: 1px dashed var(--accent); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
.hbw-gen-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.hbw-gen-head label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.hbw-gen-head select { width: auto; min-width: 180px; }
.hbw-gen-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hbw-gen-count { font-weight: 700; color: var(--accent); margin-right: 6px; }
.hbw-gen-spacer { flex: 1 1 0; }

/* Effect rows: a name beside its range (custom sense), a situation beside its two
   pickers (situational roll), and a lone dropdown (size) stay on one line and at
   their own width. The shell's width: 100% on every input and select made each of
   them take a line of its own, so "30 ft." and the situation text floated below
   the control they belong to. */
.hbw-effect-pair input[type="text"] { width: auto; flex: 1 1 200px; min-width: 120px; }
.hbw-effect-value > select { width: auto; min-width: 200px; align-self: flex-start; }

/* ── Phone layout (UX pass 2026-10-02) ───────────────────────────────────── */
@media (max-width: 720px) {
  body .hbw-chip, body .hbw-sec-state { font-size: 11px; }

  /* Choice editor: name on its own row, tags under it, the two buttons side by side. The old flex-wrap
     left the name input at half width with Remove stranded on a third row. */
  .hbw-choice-group { padding: 10px; }
  .hbw-opt-head { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hbw-opt-head input[type="text"] { grid-column: 1 / -1; flex: none; width: 100%; }
  .hbw-opt-tags { grid-column: 1 / -1; flex: none; }
  .hbw-opt-head .hbw-btn { min-height: 40px; justify-content: center; }
  .hbw-choice-group > .hbw-form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .hbw-choice-group > .hbw-form-actions .hbw-btn { flex: 1 1 calc(50% - 4px); min-height: 40px; white-space: nowrap; justify-content: center; }
  .hbw-choice-group > .hbw-form-actions .hbw-btn:last-child { flex-basis: 100%; }
}

/* ── Phone: landing grid, effect search (UX pass 2026-10-02, items 11 and 15) ─ */
@media (max-width: 720px) {
  /* Two columns instead of ten full-width cards; the title takes the serif the Library cards use. */
  .hbw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hbw-card { padding: 14px; gap: 4px; }
  .hbw-card-icon { font-size: 1.6rem; }
  body .hbw-card-name { font-family: var(--font-display); font-size: 20px; line-height: 1.1; }
  .hbw-card-desc { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .hbw-card-count { font-size: 12px; }
  /* The count line drops under the search box so the placeholder keeps the whole row. */
  .hbw-esearch { flex-wrap: wrap; }
  .hbw-esearch .hbw-effect-filter { flex: 1 1 0; }
  .hbw-esearch .hbw-effect-help { flex: 1 0 100%; padding-left: 28px; }
}

/* Tablets too: card titles use the display serif the Library cards use (phones get it in the 720px block). */
@media (min-width: 721px) and (max-width: 900px) {
  body .hbw-card-name { font-family: var(--font-display); font-size: 20px; line-height: 1.1; }
}

/* The effect search takes the full width; shrink-wrapped it was 280px and cut its own placeholder. */
.hbw-effect-add .hbw-esearch { align-self: stretch; } /* the row is a centred column; stretch gives it the full width */