/* ==========================================================================
   locations.css — Forge > Taverns + Shops (taleweaver_expansion_and_locations
   Feature C). The two procedural location sections share a generate panel + a
   preview card + (shops) a priced stock table. Roster / view / edit reuse the
   .saved-* idiom from saved.css; this file adds ONLY the generate + stock chrome.
   Reuses existing tokens + .btn / .field idioms — no new colour tokens, no radius.
   ========================================================================== */

/* Full module width to match Maps/World (Ken 2026-06-23). The former
   `max-width: 60rem` capped Shops/Taverns narrower than Maps Home (uncapped). The
   shops/taverns landing + conjure + edit wrappers carry .saved-page.loc-page, so
   both classes drop the cap together; #app-content owns the outer cap + padding. */
.loc-page {
  /* width inherits from #app-content; no local max-width cap. */
}

/* --- Generate panel ----------------------------------------------------- */
.loc-generate {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.loc-generate__bar {
  display: flex;
  align-items: flex-end;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

/* The shop-type selector sits inline with Roll Shop; it should not stretch. */
.shop-generate__type {
  flex: 0 1 14rem;
}

.loc-generate__preview {
  margin-top: var(--space-sm);
}

.loc-generate__hint {
  margin: 0;
  font-style: italic;
}

.loc-generate__save {
  margin-top: var(--space-md);
}

/* --- Preview card (mirrors the saved-view body, in-flow rather than modal) */
.loc-preview {
  padding: var(--space-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
}

.loc-preview__name {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-heading);
  letter-spacing: 0.03em;
  margin: 0 0 var(--space-sm);
  line-height: var(--lh-heading);
  word-break: break-word;
}

/* --- Roster section ----------------------------------------------------- */
.loc-roster-section__title {
  font-family: var(--font-heading-ui);
  font-size: 0.95rem;
  letter-spacing: var(--ls-cinzel-caps);
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 var(--space-md);
}

/* --- Sheet body: BANNER + TABS (KDL 2026-06-27 tabbed restyle) ----------
   SUPERSEDES the same-day accent-left-rule multi-column grid treatment
   (2026-06-25_location_sheet_multicolumn.md). The location View/Edit body now
   adopts the CHARACTER DASHBOARD structure — a name BANNER, a TAB BAR with small
   icons, and clean .char-dash__panel-style section blocks — dressed in the OSR
   location SKIN (Cinzel/blackletter, radius 0, location tokens; NOT --dash-sans /
   --dash-radius). The frame stays (surface + 1px Mortar + 3px Cornflower left-rule)
   so the record still reads as a reference sheet. The Edit body (renderEditBody)
   reuses this same .saved-view.loc-view root, so this frames BOTH View and Edit.
   The conjure-time .loc-preview keeps its OWN single-flow frame in the separate
   [data-*-preview] region (left as-is per the spec — never nested in .loc-view). */
.loc-view {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-md) var(--space-lg);
  /* Block flow now (banner -> tab nav -> tab body), not a grid. Dense rhythm
     matches the dashboard's --space-md packing (KDL 2026-06-27 §5). */
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Safety belt: if a framed .loc-preview is ever nested inside .loc-view, drop its
   inner frame so the sheet frame isn't doubled. Inert today (no such nesting). */
.loc-view .loc-preview {
  border: none;
  padding: 0;
}

/* --- NAME BANNER (the .char-dash__topbar analogue, OSR skin) -------------- */
/* Always visible above the tabs in BOTH Edit and View. Identity (blackletter name +
   Cinzel-caps muted meta) on the left, read-only stat chips on the right. No
   controls (Rule 1). Mirrors .char-dash__topbar's flex row, square (radius 0). */
.loc-banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.loc-banner__identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* Name in the blackletter heading face (reusing the .loc-preview__name ramp). */
.loc-banner__name {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-heading);
  letter-spacing: 0.03em;
  line-height: var(--lh-heading);
  margin: 0;
  word-break: break-word;
}

/* At-a-glance meta line — Cinzel-caps, small, muted (e.g. "Comfortable · known
   for spiced cider"). */
.loc-banner__meta {
  font-family: var(--font-heading-ui);
  font-size: var(--text-sm);
  letter-spacing: var(--ls-cinzel-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
  word-break: break-word;
}

/* Stat chips row — the .char-dash__stat-cards analogue, in the OSR skin. */
.loc-banner__chips {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  flex: 0 0 auto;
}

/* A single read-only chip (.char-dash__stat-card analogue): --color-bg ground,
   1px border, SQUARE (no radius), a micro Cinzel-caps label over a value. */
.loc-chip {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 5rem;
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
}

.loc-chip__label {
  font-family: var(--font-heading-ui);
  font-size: 0.62rem;
  letter-spacing: var(--ls-cinzel-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.loc-chip__value {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  word-break: break-word;
}

/* --- TAB BAR (the .char-dash__tabs analogue, OSR skin) ------------------- */
.loc-tabs {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-border);
}

/* A tab button: icon + Cinzel-caps label, underline-on-active (accent), like the
   dashboard tab — but in the location label voice (Cinzel, not --dash-sans). */
.loc-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) 0;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  font-family: var(--font-heading-ui);
  font-size: var(--text-sm);
  letter-spacing: var(--ls-cinzel-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.loc-tab svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.loc-tab:hover {
  color: var(--color-text);
}

.loc-tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.loc-tab--active {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

/* --- TAB BODY + PANELS ---------------------------------------------------- */
.loc-tabs__body {
  display: block;
}

/* A panel stacks its section blocks with the dense dashboard rhythm (KDL 2026-06-27 §5).
   Scoped to :not([hidden]) so the author `display` does NOT override the HTML
   `hidden` attribute (which the tab controller toggles to show/hide panels). The
   explicit [hidden] rule is a belt-and-braces guard against any later display rule. */
.loc-tabs__panel:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.loc-tabs__panel[hidden] {
  display: none;
}

/* --- Shared view extras (inside the info modal body) -------------------- */
.loc-view__line {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  margin: 0;
}

/* --- SECTION BLOCKS — clean .char-dash__panel idiom, OSR skin (KDL 2026-06-27 §3) ---
   Retire the prior accent-left-rule + header band. Each section is a clean square
   framed panel (surface + 1px hairline, radius 0) with an icon + Cinzel label head.
   Scoped to panels inside a tab body so the conjure preview's section titles (which
   reuse .loc-view__section-title) are unaffected. */
.loc-tabs__panel > .loc-view__section {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-md);
  margin: 0;
}

/* Section header: icon + Cinzel-caps label, on a hairline divider — NO band, NO
   accent left-rule (KDL 2026-06-27 §3). The icon glyph is muted; the label keeps the OSR
   Cinzel-caps voice. */
.loc-view__section-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-heading-ui);
  font-size: var(--text-sm);
  letter-spacing: var(--ls-cinzel-caps);
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
}

.loc-view__section-title svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-text-muted);
  flex: 0 0 auto;
}

.loc-view__bullets {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--color-text);
}

.loc-view__bullets li {
  margin: 0.15rem 0;
  word-break: break-word;
}

.loc-view__map-state {
  margin: var(--space-md) 0 0;
  font-style: italic;
}

.loc-view__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

/* #3 (2026-06-24) — "Generate map" MANUAL/DYNAMIC chooser modal body. The two
   choices sit side by side (each a clearly-labelled button), each followed by a
   muted one-line hint so the GM knows which builds the floor plan automatically
   and which opens a blank floor to draw. Stacks on narrow viewports. */
.loc-map-chooser__lede {
  margin: 0 0 var(--space-md);
}
.loc-map-chooser__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.loc-map-chooser__hint {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
}

/* #5 (2026-06-24, KDL 2026-06-27) — the select-or-roll Add modal body (Add food / drink /
   stock / goods). Hosted in the shared focus-trapped info modal; this styles only the
   inner body: a SELECT radio list (scrollable so a long pool never blows the modal
   height), a ROLL panel with the current candidate + Roll/Roll-again, and a sticky-ish
   footer carrying the current choice + the Add button. Reuses existing tokens + the
   .btn/.field idioms — no new colour tokens. Built reusable for all three location
   types (taverns/shops/houses share one modal). */
.loc-pick__lede {
  margin: 0 0 var(--space-md);
}
.loc-pick__section {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}
.loc-pick__section:first-of-type {
  /* the lede already separates the first section from the heading */
  margin-top: var(--space-sm);
}
.loc-pick__section-title {
  margin: 0 0 var(--space-sm);
  font-size: 0.95rem;
  /* The heading is a blackletter <h4>; the global h4 rule sets font-weight:600, but
     JSL-Blackletter ships ONLY weight 400, so the browser SYNTHESIZES bold and
     double-prints the ornate glyphs — Ken's "DOUBLED / overlapping" heading
     (2026-06-26 #2). Pin weight 400 + disable synthesis so the blackletter renders
     as a single crisp stroke. */
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-synthesis: none;
}
/* The selectable pool list — let it grow naturally so the MODAL BODY
   (.enc-info-modal__body) is the single vertical scroll container. Previously this
   host had its own max-height + overflow-y, which nested a second scrollbar inside
   the already-scrolling modal body (Ken, 2026-06-25 #1). One scroller only: the body
   scrolls the whole content (Select list + Roll panel + footer), footer stays
   reachable. The rows reuse the gridline idiom from .loc-menu__list (top rule +
   per-row bottom border). */
.loc-pick__list-host {
  /* no max-height / overflow — the modal body owns the scroll. */
}

/* ONE SCROLLER, NOT TWO (Ken, 2026-06-26 #4). The select-or-roll modal renders into
   the shared info modal: .enc-info-modal__card (which inherits .action-modal__card's
   own max-height + overflow-y:auto) AND .enc-info-modal__body (max-height:70vh +
   overflow-y:auto) BOTH cap height + scroll — so a long pool produced TWO vertical
   scrollbars (the card's and the body's). We already removed the inner list-host's
   overflow; this removes the CARD's so the BODY is the single scroller. Scoped to a
   card that hosts a .loc-pick body via :has() so no other info modal is affected:
   the body keeps its overflow (the lone scroller), the card grows to its content (its
   .action-modal__card max-height still caps the whole modal to the viewport, and the
   body's own max-height keeps the title + Close anchored). */
.enc-info-modal__card:has(.loc-pick) {
  overflow: visible;
  /* Drop the card's own height cap so it never becomes a second scroll container; the
     body's max-height (below) is now the single limiter that keeps the modal on-screen. */
  max-height: none;
}
/* Let the body use the card's full available height so the intro + Select list + Roll
   panel + footer scroll as ONE column. Capped to the viewport minus the card chrome
   (title row + Close actions + card padding) so the Add/Close controls stay reachable. */
.enc-info-modal__card:has(.loc-pick) .enc-info-modal__body {
  max-height: calc(85vh - 7rem);
}
.loc-pick__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}
.loc-pick__option {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.12s ease;
}
/* Row highlight on hover OR when its radio holds focus (keyboard-reachable). */
.loc-pick__option:hover,
.loc-pick__option:focus-within {
  background-color: var(--color-surface-2, rgba(255, 255, 255, 0.04));
}
.loc-pick__radio {
  /* native radio; align with the label baseline */
  margin: 0;
  flex: 0 0 auto;
}
.loc-pick__option-label {
  cursor: pointer;
  flex: 1 1 auto;
}
.loc-pick__roll-result {
  margin: 0 0 var(--space-sm);
  font-style: italic;
}
/* The chosen item is NOT muted/italic once something is picked (it is the live result). */
.loc-pick__roll-result:not(.text-muted) {
  font-style: normal;
}
.loc-pick__footer {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.loc-pick__chosen {
  margin: 0;
  flex: 1 1 12rem;
}
.loc-pick__chosen:not(.text-muted) {
  font-weight: 600;
}

/* Inline control row inside a section (menu/person reroll, hook controls):
   no top border / lighter top margin, since it groups with its own block. */
.loc-view__actions--inline {
  margin-top: var(--space-sm);
  padding-top: 0;
  border-top: 0;
}

/* --- Menu lists (food / drinks / servers / patrons / hooks) -------------- */
/* GRIDLINES (2026-06-23, KDL 2026-06-27): match the Shop view's .shop-stock__table so the
   two location views read alike (Ken likes the shop gridlines). The tavern lists are
   <ul>/<li> rather than a <table>, so we reproduce the table's row rule with a
   per-row bottom border + the same cell padding/border token. .loc-menu__list resets
   the default <ul> bullet/indent so the rows read as table-like gridded rows. */
.loc-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border); /* top rule, mirrors a thead bottom border */
}

.loc-menu__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  /* Same gridline idiom + padding as .shop-stock__table th,td. */
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
  /* ROW-HOVER HIGHLIGHT (accessible: focus-within, not hover-only) — a clearer
     accent bottom border + a faint surface tint so the user can see which row they
     are on. Transition only the colour properties (no layout shift). */
  border-bottom-color: var(--color-border);
  transition: background-color 0.12s ease, border-bottom-color 0.12s ease;
}

/* The row a pointer is over OR that holds keyboard focus (a per-row button) gets a
   2px accent bottom border + faint surface tint. focus-within keeps it keyboard-
   reachable; the per-row action buttons stay fully clickable (no overlay here). */
.loc-menu__item:hover,
.loc-menu__item:focus-within {
  background-color: var(--color-surface-hover);
  border-bottom: 2px solid var(--color-accent);
}

.loc-menu__text {
  flex: 1 1 auto;
}

/* Compact reroll affordance — smaller than a primary action, never white. */
.loc-menu__reroll {
  flex: 0 0 auto;
  padding: 0.15rem 0.5rem;
  font-size: 0.72rem;
  letter-spacing: var(--ls-cinzel-caps);
  text-transform: uppercase;
}

/* Empty-state line for a variable-length collection (food/drinks/servers/
   patrons/story-hooks) with no items yet (2026-06-23 #5/#6). Italic + muted, so an
   empty list reads as intentional ("No story hooks.") rather than broken, and its
   Add affordance still shows below. */
.loc-empty {
  margin: 0 0 var(--space-xs);
  font-style: italic;
}

/* --- Per-person story hooks (2026-06-26, Ken's choice) -------------------
   Each server/patron carries its OWN hook (KDL 2026-06-27's entry.hook). The hook sits
   BELOW the person inside their row, so it reads as belonging to that person. A
   person row therefore stacks: a head row (name + Reroll/Export/Remove) and the
   hook sub-block. We override the base .loc-menu__item flex (which is a single
   baseline row) to a column ONLY for person rows; the head keeps the original
   baseline-row treatment so the name + inline controls align exactly as before. */
.loc-person-row {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-xs);
}

.loc-person-row__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}

/* The hook line: indented under the person, dimmed + italic so it reads as a
   secondary detail. The bold Cinzel-caps "Hook:" label keeps its meaning from
   being colour-only (a11y), mirroring the proprietor secret-label idiom. The edit
   variant lays the text + Roll/Clear controls on one baseline row. */
.loc-person-hook {
  margin: 0;
  padding-left: var(--space-sm);
  border-left: 2px solid var(--color-border);
  color: var(--color-text-muted);
  font-style: italic;
  word-break: break-word;
}

.loc-person-hook--edit {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.loc-person-hook__label {
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: var(--ls-cinzel-caps);
  color: var(--color-accent);
}

.loc-person-hook__text {
  flex: 1 1 auto;
}

.loc-person-hook__roll,
.loc-person-hook__clear {
  flex: 0 0 auto;
}

/* The "list full (max 12)" note beside a disabled Add button (#2). Sits inline on
   the same .loc-view__actions--inline row; small + muted so it explains the
   disabled state without competing with the section. */
.loc-add__note {
  align-self: center;
  font-size: 0.78rem;
  font-style: italic;
}

/* Spine definition with a per-name-word reroll (UX revision #3, 2026-06-23):
   the rolled value + its compact Reroll button share one baseline row, so the
   control sits with its term value without breaking the definition list. */
.loc-spine__def {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}

/* --- Attribute / summary stat block (KDL 2026-06-27 restyle #4) -------------------- */
/* The record's at-a-glance "stat line": tavern Quality (.loc-quality), and the
   shop/house size/wealth/levels/type summary (.loc-attrs). Give it the stat-block
   surface treatment (--color-bg ground inside the surface sheet + 1px Mortar border
   + 3px accent left-rule) so it reads as canon, distinct from the body definition
   lists below it. Both classes already ride on a .saved-view__list, so the inner
   dt/dd (muted Cinzel-caps term / value) stay as-is — that term/value pairing
   already mirrors .stat-block__stat-label / __stat-value and keeps meaning
   text-based (never colour- or layout-only), per the a11y standard.
   .loc-quality is appended in taverns.js + houses.js already; .loc-attrs is the
   one-line class add in shops.js to bring the shop summary to the same parity. */
.loc-quality,
.loc-attrs {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
}

/* --- Person card (proprietor / shopkeeper) ------------------------------ */
/* Lift the named NPC to a framed sub-panel (KDL 2026-06-27 restyle #5) — the most
   "character-like" region of the sheet gets the stat-block surface so the
   proprietor/shopkeeper reads distinctly from the menu/stock lists. It already
   carries .loc-view__section, so the #3 divider handles its top separation (the
   divider is a sibling ::before, a different box, so no double top-rule). The
   blackletter name + accent Cinzel-caps secret label below are unchanged. */
.loc-person-card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-sm) var(--space-md);
}

/* Inside a tab panel, the proprietor/shopkeeper card is a clean .char-dash__panel
   block — retire the accent left-rule + --color-bg ground so it matches the other
   section blocks (surface + hairline). Also retire the accent on the Edit-only
   quality stat row + any .loc-attrs that lands in a panel. (KDL 2026-06-27 §3 — no accent
   spine, no band inside the tabbed sheet; the conjure preview + no-tabs fallback
   keep the framed-stat look via the base rules above.) */
.loc-tabs__panel > .loc-person-card,
.loc-tabs__panel > .loc-quality,
.loc-tabs__panel > .loc-attrs {
  background-color: var(--color-surface);
  border-left: 1px solid var(--color-border);
}

.loc-person-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-h4, 1.1rem);
  font-weight: 600;
  color: var(--color-heading);
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-xs);
  word-break: break-word;
}

/* GM-only secret: dimmed + italic, with a bold WORD label so the
   "owner detail" meaning is never colour-only (a11y). */
.loc-person-card__secret {
  margin: var(--space-sm) 0 0;
  font-style: italic;
  color: var(--color-text-muted);
  word-break: break-word;
}

.loc-person-card__secret-label {
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: var(--ls-cinzel-caps);
  color: var(--color-accent);
}

/* --- Shop stock table --------------------------------------------------- */
.shop-stock {
  margin-top: var(--space-xs);
}

.shop-stock__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.shop-stock__table th,
.shop-stock__table td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.shop-stock__table th {
  font-family: var(--font-heading-ui);
  font-size: 0.72rem;
  letter-spacing: var(--ls-cinzel-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ROW-HOVER HIGHLIGHT (2026-06-23, KDL 2026-06-27): the stock body rows get the SAME
   row-hover treatment as the tavern .loc-menu__item rows — a 2px accent bottom
   border + faint surface tint on the row a pointer is over OR that holds keyboard
   focus (focus-within keeps it keyboard-reachable, not hover-only). The accent
   border is applied to the row's cells (the <tr> can't carry a border under
   border-collapse), so the per-line action buttons stay fully clickable. */
.shop-stock__table tbody tr {
  transition: background-color 0.12s ease;
}

.shop-stock__table tbody tr:hover,
.shop-stock__table tbody tr:focus-within {
  background-color: var(--color-surface-hover);
}

.shop-stock__table tbody tr:hover td,
.shop-stock__table tbody tr:focus-within td {
  border-bottom: 2px solid var(--color-accent);
}

.shop-stock__name {
  color: var(--color-text);
  word-break: break-word;
}

.shop-stock__cost {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  white-space: nowrap;
}

/* Magic / priceless line: dimmed, italic price, "special order" tag. The WORD
   carries the meaning (never colour-only), per the a11y standard. */
.shop-stock__row--special .shop-stock__cost {
  font-style: italic;
  color: var(--color-text-muted);
}

.shop-stock__tag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.06rem 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--color-accent);
  border-radius: 2px;
  color: var(--color-accent);
  vertical-align: middle;
}

.shop-stock__qty-input {
  width: 4.5rem;
  padding: 0.25rem 0.4rem;
  font-size: 0.82rem;
}

/* Inline price hand-edit (tavern menu table, #1 2026-06-23 — shop-stock parity).
   Mono to match the read-only .shop-stock__cost cell; narrow so the Price column
   stays compact. Used in the Edit + conjure-preview menu tables only. */
.shop-stock__cost-input {
  width: 6rem;
  padding: 0.25rem 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.shop-stock__row-actions {
  white-space: nowrap;
}

/* Space the per-line Reroll (ADDENDUM 2026-06-21b row 12) from the Remove button
   when both share a stock row's action cell. */
.shop-stock__row-actions .btn + .btn {
  margin-left: var(--space-xs);
}

/* (Removed 2026-06-23, KDL 2026-06-27) .shop-view__regen had a stale `margin-top: --space-md`
   from when Regenerate sat alone below the stock table. In the Edit view it now
   shares the .loc-view__actions--inline flex row with "Add another stock item";
   the row's own gap handles spacing, and the margin was offsetting Regenerate 16px
   below its row-mate (vertical misalignment). Both buttons now sit on one baseline
   using the shared .btn sizing — no per-feature override. */

/* Narrow viewport (KDL 2026-06-27 §8 narrow mockup): the banner stacks its identity over the
   chips (which wrap), and the tab row stays a single tablist that wraps (matching
   .char-dash__tabrow flex-wrap). The block flow already single-columns naturally; no
   grid to collapse. ~700px is the tab/banner crowding threshold. */
@media (max-width: 700px) {
  .loc-banner {
    flex-direction: column;
    align-items: stretch;
  }
  .loc-banner__chips {
    flex: 1 1 auto;
  }
}

@media (max-width: 520px) {
  .loc-generate__bar {
    flex-direction: column;
    align-items: stretch;
  }
  .shop-generate__type {
    flex: 1 1 auto;
  }
  .shop-stock__table {
    font-size: 0.82rem;
  }
}