/* Hushline identity. Semantic game, relationship and chart colors stay in their modules. */
:root {
  --hushline-night: #142830;
  --hushline-mint: #a5e7ce;
  --hushline-signal: #f28b54;
  --hushline-teal: #286b60;
  --ink: #203b42;
  --dark: var(--hushline-night);
  --paper: #f4f8f6;
  --line: #d4e1dd;
  --muted: #5d746e;
  --orange: #bc531e;
  --orange-light: #ffede2;
  --green: var(--hushline-teal);
  --shadow: 0 10px 40px #14283024;
}

.topbar {
  background: var(--hushline-night);
  border-bottom-color: #a5e7ce26;
  gap: 20px;
}
.topbar .brand {
  width: 256px;
  gap: 12px;
  color: #f4f8f6;
}
.brand-mark { display: block; width: 44px; height: 44px; flex-shrink: 0; }
.brand strong { font-size: 22px; font-weight: 750; letter-spacing: 3px; }
.brand small { color: var(--hushline-mint); font-size: 7px; letter-spacing: .9px; margin-top: 6px; }
.global-search { border-color: #a5e7ce45; background: #a5e7ce08; }
.global-search input::placeholder, .global-search kbd { color: #b8cbc6; }
.global-search:focus-within { border-color: var(--hushline-mint); }
.topbar .button.dark-secondary, .topbar .entry-defaults-trigger, .save-switcher {
  background: #a5e7ce08;
  border-color: #a5e7ce50;
  color: #edf9f3;
}
.topbar .button:hover, .save-switcher:hover { background: #a5e7ce18; }
.topbar :focus-visible { outline-color: var(--hushline-mint); }
.site-nav { background: #e5eeea; border-bottom-color: var(--line); }
.site-nav button { color: #526e67; }
.site-nav button[aria-current=page] { color: var(--hushline-night); background: var(--paper); border-color: var(--hushline-teal); }
.site-nav button:hover { background: #d7e9e1; }
.button.primary { background: var(--hushline-night); border-color: var(--hushline-night); }
.button.primary:hover { background: #244952; }
.button:not(.primary):not(.dark-secondary):not(.entry-defaults-trigger):hover { background-color: #e5eee9; }
.button.active, .chip.active { border-color: var(--hushline-teal); background: #e0f2e9; color: var(--hushline-night); }
.desk-titlebar h1 { font-family: inherit; font-weight: 650; letter-spacing: -1.4px; }
.desk-titlebar .eyebrow { color: var(--hushline-teal); }
.sidebar { background: var(--paper); }
.sidebar-tabs button[aria-selected=true] { border-color: var(--hushline-teal); }
.sidebar-tabs button span { background: #e2ece6; }
.progress-card { background: #e8f3ed; border-color: #c8ded2; }
.progress-card strong, .progress-card small { color: #3c6355; }
.progress-track { background: #cbdfd4; }
.progress-track i { background: var(--hushline-teal); }
.layer-row:hover { background: #e5eee9; }
.map-options label, .source-note { color: #526e62; }
.publisher-credit { margin: 0; font-size: 10px; line-height: 1.7; color: #526d65; }
.publisher-credit strong { color: var(--hushline-night); font-weight: 650; }
.sidebar-credit { padding: 10px 24px; flex-shrink: 0; border-top: 1px solid var(--line); }
.manager-footer { background: #e7efeb; border-color: var(--line); gap: 14px; }
.manager-footer > .publisher-credit { text-align: center; }
.manager-footer button, .manager-footer a { color: #3c6357; }
.loading { background: var(--hushline-night); }
.loading-brand { display: block; margin-bottom: 22px; }
.loading h2 { font-size: 21px; font-weight: 650; letter-spacing: .3px; }
.loading p { color: var(--hushline-mint); }

/* Shared surfaces bring the operational desks into the same identity. */
.today-panel, .catalog-item, .product-row, .mix-panel, .save-dialog, .manager-dialog {
  background-color: #fcfefb;
  border-color: var(--line);
}
.today-metric, .desk-stat { background-color: #eaf3ed; border-color: #d2e2d8; }
.today-metric > strong, .desk-stat strong { color: #2c6253; }
.today-metric > span, .today-metric > small, .desk-stat span { color: #557365; }
.today-panel h2, .today-day-close h2, .mix-panel h2, .mix-comparison h2 { color: var(--hushline-night); }
.today-day-close, .store-intro, .catalog-release { background-color: #e4f0e9; border-color: #ccdfd3; }
.store-nav { background: #eaf1ec; border-color: var(--line); }
.store-nav button[aria-pressed=true] { background: #d5ebe0; color: #235c4f; border-left-color: var(--hushline-teal); }
.mix-comparison { background: #edf5ef; border-color: var(--line); }
.mix-comparison.is-selected { background: #fcfefb; border-color: var(--hushline-teal); box-shadow: inset 0 3px var(--hushline-teal); }
.mix-notice { background: #e2f0e8; border-left-color: var(--hushline-teal); color: #416753; }
.save-dialog h2, .store-intro h2, .product-row-main h2, .mix-toolbar > div:first-child strong { font-family: inherit; font-weight: 600; }

.about-hushline { text-align: center; max-width: 460px; margin: 4px auto 12px; }
.about-hushline > img { display: block; margin: 0 auto 20px; }
#guideBody .about-hushline .eyebrow { color: var(--hushline-teal); font-size: 9px; }
#guideBody .about-hushline h3 { margin: 10px 0 0; font-family: inherit; font-weight: 750; font-size: 36px; line-height: 1.3; letter-spacing: 2px; text-transform: uppercase; }
#guideBody .about-hushline .about-tagline { color: var(--hushline-teal); font-size: 17px; font-weight: 550; }
.about-publisher { padding: 16px; background: #e4f0e9; border: 1px solid var(--line); border-radius: 6px; }
.guide-tabs { gap: 18px; }

@media (max-width: 1100px) {
  .topbar .brand { width: 218px; }
  .brand strong { font-size: 20px; }
  .brand small { font-size: 6px; letter-spacing: .7px; }
}
@media (max-width: 800px), (max-width: 1000px) and (max-height: 520px) and (orientation: landscape) {
  .topbar .brand { width: auto; gap: 8px; }
  .brand-mark { width: 34px; height: 34px; }
  .brand strong { font-size: 17px; letter-spacing: 1.8px; }
  .brand small { display: none; }
  /* These settings also remain available in Quick actions on compact screens. */
  .topbar #entryDefaultsButton { display: none; }
  .manager-footer > .publisher-credit { flex-basis: 100%; order: 3; font-size: 9px; padding-bottom: 3px; }
  .guide-tabs { gap: 12px; flex-wrap: wrap; justify-content: flex-start; }
}
@media (max-width: 600px) {
  .topbar .brand > .brand-copy { display: block; }
  .topbar { gap: 7px; }
  .topbar .brand { gap: 5px; }
  .brand-mark { width: 29px; height: 32px; }
  .brand strong { font-size: 13px; letter-spacing: 1px; }
  .topbar .top-actions { gap: 1px; }
  .topbar .top-actions #quickActions { font-size: 10px; padding: 8px 6px; }
  .topbar .save-switcher { max-width: 92px !important; padding: 8px 6px; }
  .topbar .top-actions #openGuide { min-width: 34px; width: 34px; padding: 6px; }
  .desk-titlebar h1 { letter-spacing: -1px; }
  .sidebar-credit { padding: 8px 20px; }
  .guide-tabs button { font-size: 10px; }
  #guideBody .about-hushline h3 { font-size: 29px; }
}
@media (max-width: 370px) {
  .brand-mark { width: 25px; }
  .brand strong { font-size: 11px; }
  .topbar .save-switcher { max-width: 80px !important; }
  .topbar .top-actions #quickActions { max-width: 54px; white-space: normal; }
}