/* Layer: 06-chrome.css
 * forced mobile, stardew polish, links, brand, scrollbars, HUD
 *
 * Split out of app.css, which had grown to 8346 lines. Loaded in
 * order by app.css; do not reorder the @import lines there. Several rules in
 * the later layers override earlier ones by source order alone.
 */
/* Forced mobile preview — only when override=Mobile on a wide viewport */
html[data-layout-preview='1'] body {
  max-width: 390px;
  margin: 0 auto;
  border-left: 2px solid #1a1008;
  border-right: 2px solid #1a1008;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}

html[data-layout='mobile'] .app-body {
  flex-direction: column;
}

html[data-layout='mobile'] .guild-chat {
  flex: 0 0 auto;
  width: 100%;
  max-height: 32vh;
  max-height: 32dvh;
  border-right: 0;
  border-bottom: 2px solid var(--border, #3a2818);
}

html[data-layout='mobile'] .map-stage {
  display: flex;
  flex-direction: column;
  overflow: visible;
}

html[data-layout='mobile'] .map-canvas {
  position: relative;
  inset: auto;
  width: 100%;
  height: 62vh;
  height: 62dvh;
  min-height: 260px;
  max-height: 62vh;
  max-height: 62dvh;
  aspect-ratio: auto;
  overflow: hidden;
  flex: 0 0 auto;
}

html[data-layout='mobile'] .map-canvas .map-root,
html[data-layout='mobile'] .map-canvas .map-root svg {
  width: 100%;
  height: 100%;
  max-height: 100%;
}

html[data-layout='mobile'] .map-modes--rail {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0;
}

html[data-layout='mobile'] .map-chrome-left {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  max-width: none;
  margin: 8px;
  flex-direction: column;
}

html[data-layout='mobile'] .map-master-notes {
  max-width: none;
  width: 100%;
}

html[data-layout='mobile'] .map-modes--rail .mode-btn__label {
  display: inline;
  font-size: 0.72rem;
}

html[data-layout='mobile'] .map-modes--rail .mode-btn {
  width: auto;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  padding: 8px 10px;
}

html[data-layout='mobile'] .hud-vault--map {
  position: relative;
  top: auto;
  right: auto;
  width: auto;
  max-height: none;
  margin: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html[data-layout='mobile'] .region-panel--overlay,
html[data-layout='mobile'] .map-legend--overlay {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  width: auto;
  max-height: none;
  margin: 8px;
}

html[data-layout='mobile'] .schedule-strip-host--overlay {
  position: relative;
  left: auto;
  transform: none;
  width: auto;
  max-width: none;
  margin: 8px;
}

html[data-layout='mobile'] .map-hud__board {
  max-width: 100%;
}

html[data-layout='mobile'] .npc-dossier {
  grid-template-columns: 1fr;
}

html[data-layout='mobile'] .npc-dossier__tags {
  flex-direction: row;
  flex-wrap: wrap;
  max-height: none;
}

@media (max-width: 720px) {
  .map-canvas {
    width: 100%;
    aspect-ratio: auto;
    max-height: none;
  }

  .npc-dossier {
    grid-template-columns: 1fr;
  }

  .npc-dossier__tags {
    flex-direction: row;
    flex-wrap: wrap;
    max-height: none;
  }
}

/* —— Stardew + classic RPG polish —— */
a {
  color: var(--link, #8a4a18);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--link-hover, #5a3010);
}

a:focus-visible,
.btn:focus-visible,
.nav-btn:focus-visible {
  outline: 2px solid var(--brass, #e0b040);
  outline-offset: 2px;
}

/* Never default browser blue for in-app / abyss links */
a[href*="bp_nri"],
a[href*="t.me"],
.schedule-compact__channel,
.app-footer__links a {
  color: var(--ink, #2b1a0e);
  text-decoration: none;
  font-family: var(--font-pixel, monospace);
  font-size: 1.05rem;
  padding: 4px 10px;
  border: 2px solid var(--border, #4a2c14);
  border-radius: var(--btn-radius, 6px);
  background: linear-gradient(180deg, #f5d1a0, #e0b878);
  box-shadow: var(--bevel-out);
  display: inline-block;
}

a[href*="bp_nri"]:hover,
.schedule-compact__channel:hover,
.app-footer__links a:hover {
  color: var(--ink, #2b1a0e);
  filter: brightness(1.05);
}

.rpg-frame {
  border: 3px solid var(--border, #4a2c14);
  border-radius: 8px;
  background: var(--panel, #f3dfb8);
  color: var(--ink, #2b1a0e);
  box-shadow: var(--bevel-out), inset 0 0 0 1px rgba(240, 216, 120, 0.35);
}

.rpg-plaque {
  display: inline-block;
  padding: 6px 14px 8px;
  border: 3px solid var(--border, #4a2c14);
  border-radius: 8px;
  background: linear-gradient(180deg, #f0c878, #d89040);
  box-shadow: var(--bevel-out);
}

/* Plain readable brand title — no plank texture */
.app-header__brand--sign {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  padding: 2px 4px;
  border: none;
  border-radius: 0;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none;
  min-height: 0;
  box-sizing: border-box;
  overflow: visible;
  max-width: min(560px, 62vw);
  flex: 1 1 auto;
  min-width: 0;
}

.app-header__brand--sign h1 {
  color: #f7edd8 !important;
  font-family: var(--font-lore, Georgia, 'Times New Roman', serif) !important;
  font-weight: 700 !important;
  font-size: clamp(1.25rem, 2.2vw, 1.85rem) !important;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-wrap: balance;
  overflow: visible;
  -webkit-text-stroke: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

.rpg-plaque h1,
.app-header__brand h1 {
  color: var(--ink, #2b1a0e) !important;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.5);
}

.app-header__brand--sign h1 {
  color: #f7edd8 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

.app-header__tagline {
  color: var(--ink-soft, #4a3220) !important;
  opacity: 1;
}

.app-role {
  color: var(--gold-ui, #f0d878);
  background: rgba(30, 18, 8, 0.45);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(240, 216, 120, 0.35);
}

.header-tools {
  align-items: center;
}

.header-tools__primary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.header-tools__always {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.header-guide-btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--border, #4a2c14);
  font-weight: 700;
  line-height: 1;
}

.header-tools__more {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 60;
}

/* Scrollbars — wood/gold */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--wood-mid, #8a5228) var(--parchment-deep, #e8bc7a);
}

*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

*::-webkit-scrollbar-track {
  background: var(--parchment-deep, #e8bc7a);
  border: 1px solid var(--border-soft, #7a4a28);
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--brass, #e0b040), var(--wood, #6b3c1a));
  border: 2px solid var(--border, #4a2c14);
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
  filter: brightness(1.1);
}

/* HUD threat + vault */
.map-hud {
  color: var(--ink, #2b1a0e);
  gap: 8px;
  align-items: stretch;
  flex-wrap: nowrap;
}

.map-hud__next {
  display: none;
}

.map-hud__board {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 8px 10px;
  width: auto;
  max-width: min(920px, 100%);
  margin-right: 0;
}

.map-hud__board--threats,
.map-hud__board--strip {
  max-width: min(920px, 100%);
}

.hud-threats {
  display: grid;
  gap: 8px;
}

.hud-threats--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: flex-end;
}

.hud-threats--inline .hud-threat {
  min-width: 120px;
  flex: 0 1 140px;
}

.hud-vault--row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.hud-vault--row .hud-vault__item {
  min-width: 64px;
  padding: 4px 6px;
}

.hud-threat__head {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-pixel, monospace);
  font-size: 1.05rem;
  color: var(--ink, #2b1a0e);
}

.hud-threat__track {
  height: 12px;
  border: 2px solid var(--border, #4a2c14);
  border-radius: 4px;
  background: #3a2818;
  overflow: hidden;
  box-shadow: var(--bevel-in);
}

.hud-threat__fill {
  height: 100%;
  transition: width 0.35s ease;
}

.hud-threat--green .hud-threat__fill {
  background: var(--threat-green);
}
.hud-threat--yellow .hud-threat__fill {
  background: var(--threat-yellow);
}
.hud-threat--orange .hud-threat__fill {
  background: var(--threat-orange);
}
.hud-threat--red .hud-threat__fill {
  background: var(--threat-red);
}
.hud-threat--burgundy .hud-threat__fill {
  background: var(--threat-burgundy);
}

.hud-threat__band {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  font-family: var(--font-clerk, monospace);
  color: var(--ink-soft, #4a3220);
}

.hud-vault {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 8px;
}

.hud-vault__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border: 2px solid var(--border-soft, #7a4a28);
  border-radius: 6px;
  background: linear-gradient(180deg, #faebc8, #f0d8a0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.hud-vault__k {
  font-family: var(--font-pixel, monospace);
  font-size: 0.95rem;
  color: var(--ink-soft, #4a3220);
}

.hud-vault__v {
  font-family: var(--font-clerk, monospace);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink, #2b1a0e);
}

.next-step {
  background: linear-gradient(90deg, #faebc8, #f0d8a0);
  border: 2px solid var(--border, #4a2c14);
  border-radius: 6px;
  color: var(--ink, #2b1a0e);
  box-shadow: var(--bevel-out);
}

.next-step__label {
  color: var(--accent, #d87a24);
}

.next-step__text {
  color: var(--ink, #2b1a0e);
  opacity: 1;
}

.schedule-compact {
  background: var(--panel, #f3dfb8);
  border: 2px solid var(--border, #4a2c14);
  border-radius: 8px;
  color: var(--ink, #2b1a0e);
}

.schedule-compact__toggle,
.schedule-compact__label,
.schedule-compact__summary {
  color: var(--ink, #2b1a0e);
}

.region-panel,
.map-legend {
  background: var(--panel, #f3dfb8);
  color: var(--ink, #2b1a0e);
  border: 2px solid var(--border, #4a2c14);
  border-radius: 8px;
}

.guild-chat {
  background: var(--panel, #f3dfb8) !important;
  color: var(--ink, #2b1a0e);
  border-right: 3px solid var(--border, #4a2c14);
}

.guild-chat__head {
  color: var(--ink, #2b1a0e);
  background: linear-gradient(180deg, #f0c878, #d89040);
  border-bottom: 2px solid var(--border, #4a2c14);
}

.guild-chat__name,
.guild-chat__text,
.guild-chat__hint,
.guild-chat__empty {
  color: var(--ink, #2b1a0e);
  opacity: 1;
}

.guild-chat--collapsed {
  max-height: 44px !important;
  overflow: hidden;
}

.guild-chat--collapsed .guild-chat__body {
  display: none;
}

/* Rooms: ink on parchment, not light-on-light */
.news-room--tavern-wall {
  color: var(--parchment, #f5d1a0);
}

.news-room--tavern-wall .gossip-hero__copy h2,
.news-room--tavern-wall .gossip-feed__title,
.news-room--tavern-wall h3 {
  color: var(--torch-glow, #ffe08a);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

.news-room--tavern-wall .gossip-lead,
.news-room--tavern-wall .gossip-muted {
  color: #f5e6c8;
  opacity: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.gossip-sheet,
.gossip-sticker,
.gossip-learned.gossip-sticker {
  color: var(--ink, #2b1a0e);
}

.work-room--clerk {
  color: var(--ink, #2b1a0e);
}

.work-room--clerk h2,
.work-room--clerk h3 {
  color: var(--ink, #2b1a0e);
  text-shadow: none;
  background: linear-gradient(180deg, #f0c878, #e0a848);
  display: inline-block;
  padding: 4px 12px;
  border: 2px solid var(--border, #4a2c14);
  border-radius: 6px;
  box-shadow: var(--bevel-out);
}

.work-lead,
.work-muted,
.work-preview {
  color: var(--ink-soft, #4a3220);
  opacity: 1;
}

.work-section--desk {
  color: var(--parchment, #f5d1a0);
}

.work-section--desk .work-muted,
.work-section--desk label {
  color: var(--parchment, #f5d1a0);
}

.npc-room--dossier {
  color: var(--ink, #2b1a0e);
}

.npc-room__title {
  color: var(--ink, #2b1a0e) !important;
  background: linear-gradient(180deg, #f0c878, #e0a848);
  display: inline-block;
  padding: 4px 12px;
  border: 2px solid var(--border, #4a2c14);
  border-radius: 6px;
}

.npc-room__lead,
.npc-muted {
  color: var(--ink-soft, #4a3220);
  opacity: 1;
}

.npc-dossier__blank {
  color: var(--ink, #2b1a0e);
}

.work-slot {
  border-radius: 8px;
}

.work-contract {
  border-radius: 8px;
}