/* Extends the existing DoubleTree management trial's visual language.
   The supporting ivory/copper palette is presentation styling; the Hilton mark
   itself is the source asset documented under static/brand/SOURCES.md. */
:root {
  --dt-navy: #191c4c;
  --dt-navy-deep: #101335;
  --dt-copper: #b56d3a;
  --dt-copper-dark: #8c4e26;
  --dt-ivory: #f6f1e9;
  --dt-surface: #fffdfa;
  --dt-soft: #fbf7f1;
  --dt-line: rgba(79, 59, 48, .14);
  --ink: #201d1b;
  --muted: #746a64;
  --line: var(--dt-line);
  --paper: var(--dt-ivory);
  --white: var(--dt-surface);
}

body { background: var(--dt-ivory); }
h1, h2, h3, h4 { line-height: 1.45; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible { outline-color: var(--dt-copper); }

.topbar {
  background: rgba(255, 253, 250, .97);
  color: var(--dt-navy);
  border-bottom: 1px solid var(--dt-line);
  box-shadow: 0 8px 26px rgba(43, 31, 23, .045);
}
.topbar__inner { max-width: 1360px; min-height: 84px; }
.wordmark { gap: 14px; }
.dt-logo { display: block; width: 85px; height: 61px; object-fit: contain; }
.wordmark__line { height: 42px; background: var(--dt-line); }
.product-lockup { display: grid; gap: 4px; }
.product-lockup small { color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.4; }
.product-mark { font: 700 25px/1 Georgia, serif; letter-spacing: -.045em; white-space: nowrap; }
.product-mark b { color: var(--dt-navy); }
.product-mark em { color: var(--dt-copper-dark); font-size: .75em; font-style: normal; letter-spacing: -.04em; }
.topbar__actions a, .topbar__actions button {
  background: var(--dt-surface); color: var(--dt-navy);
  border: 1px solid var(--dt-line); border-radius: 10px;
  font-weight: 700;
}
.topbar__actions a:hover, .topbar__actions button:hover {
  background: var(--dt-soft); border-color: rgba(181, 109, 58, .42);
}

.hero {
  background: linear-gradient(120deg, #fffdfa, #f4ebdf);
  color: var(--dt-navy);
  border-bottom: 1px solid var(--dt-line);
}
.hero::after { display: none; }
.hero__inner {
  max-width: 1360px; padding: 21px 24px 24px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 24px; align-items: center;
}
.hero .eyebrow { grid-column: 1 / -1; margin-bottom: 5px; color: var(--dt-copper-dark); }
.eyebrow { line-height: 1.45; }
.hero h1 { margin: 0; font-size: clamp(25px, 2.5vw, 34px); line-height: 1.45; letter-spacing: -.018em; }
.hero p:not(.eyebrow) { color: var(--muted); max-width: 540px; font-size: 13px; line-height: 1.7; }
.demo-mark {
  grid-column: 1 / -1; justify-self: start; margin-top: 8px; padding: 4px 10px;
  border: 1px solid rgba(181, 109, 58, .25); border-radius: 999px;
  background: rgba(181, 109, 58, .07); color: var(--dt-copper-dark);
  font-size: 11px;
}
.main { max-width: 1360px; margin: 0 auto 54px; padding: 0 24px; }
.card, .stats > div, .report-card {
  background: var(--dt-surface); border-color: var(--dt-line);
  box-shadow: 0 8px 28px rgba(43, 31, 23, .045);
}
.login { margin: 24px auto 0; }
.login h2, .section-bar h2, .queue-head h3, .transfer h3 { color: var(--dt-navy); }
.eyebrow { color: var(--dt-copper-dark); }
input, select, textarea { border-color: var(--dt-line); background: #fff; color: var(--ink); }
input:hover, select:hover, textarea:hover { border-color: rgba(181, 109, 58, .45); }
.primary { background: var(--dt-navy); border-color: var(--dt-navy); color: #fff; }
.primary:hover { background: #26295e; border-color: #26295e; }
.section-bar { margin: 26px 0 17px; }
.section-bar h2 { font-size: 25px; }
.section-bar__actions a, .section-bar__actions button,
.transfer__controls a, .transfer__controls button:not(.primary), .load-more {
  color: var(--dt-navy); background: var(--dt-surface);
  border-color: var(--dt-line); border-radius: 10px; font-weight: 700;
}
.section-bar__actions a:hover, .section-bar__actions button:hover,
.transfer__controls a:hover, .transfer__controls button:not(.primary):hover,
.load-more:hover { background: var(--dt-soft); border-color: rgba(181, 109, 58, .38); }
.stats > div { border-radius: 13px; }
.stats strong { color: var(--dt-navy); }
.stats > div:last-child strong { color: var(--dt-copper-dark); }
.queue-head { border-color: var(--dt-line); }
.report-card { border-radius: 13px; }
.report-card h4 { color: var(--dt-navy); }
.report-card__details summary { color: var(--dt-navy); }
.report-card__details summary::before { border-color: var(--dt-line); color: var(--dt-copper-dark); }
.report-card__details[open] { border-color: var(--dt-line); }
.report-card__actions { border-color: var(--dt-line); }
.report-card__actions label { color: var(--muted); }
.report-card__actions button { border-color: var(--dt-navy); background: var(--dt-navy); color: #fff; }
.report-card__actions button:hover { background: #26295e; }
.report-card__actions button.danger { background: #fff7f4; color: #8d4632; border-color: #c8a398; }
.pill { background: #f4ede4; color: var(--dt-copper-dark); }
.pill.urgent { background: #fae9dc; color: #a64e24; }
.pill.done { background: #eaf7f0; color: #24715a; }
.pill.neutral { background: #f4ede4; color: var(--dt-copper-dark); }
.empty { border-color: rgba(181, 109, 58, .3); }
.state-panel { border-color: rgba(181, 109, 58, .3); background: var(--dt-surface); }
.state-panel svg { color: var(--dt-copper-dark); }
.state-panel button { color: var(--dt-navy); border-color: var(--dt-line); }
.state-panel button:hover { background: var(--dt-soft); }
.loading-card { border-color: var(--dt-line); background: var(--dt-surface); }
.loading-card__line { background: linear-gradient(100deg, #eee6dc 20%, #fffaf4 35%, #eee6dc 50%); background-size: 240% 100%; }
.transfer__controls label[for="importFile"] { color: var(--dt-navy); border-color: var(--dt-line); border-radius: 10px; }
.transfer__controls label[for="importFile"]:hover { background: var(--dt-soft); }
.transfer__controls label[for="importFile"]:has(+ .file-input:focus-visible) { outline-color: var(--dt-copper); }
.transfer { margin-top: 28px; }
.preview-change { background: var(--dt-soft); border-color: var(--dt-line); }
.preview-change__line { border-color: var(--dt-line); }
.page-footer { background: var(--dt-ivory); color: var(--muted); border-top: 1px solid var(--dt-line); }
.page-footer .bithrah-signature strong { color: var(--dt-navy); }

@media (max-width: 800px) {
  .hero__inner { grid-template-columns: 1fr; padding: 19px 20px 20px; }
  .hero p:not(.eyebrow) { margin-top: 3px; }
  .main { padding-inline: 18px; }
}
@media (max-width: 520px) {
  .topbar__inner { min-height: 68px; padding: 8px 16px; row-gap: 4px; }
  .dt-logo { width: 65px; height: 48px; }
  .wordmark__line { height: 34px; }
  .product-mark { font-size: 21px; }
  .product-lockup small { max-width: 145px; font-size: 9px; }
  .topbar__actions { gap: 6px; }
  .topbar__actions a, .topbar__actions button { min-height: 44px; padding: 7px 10px; }
  .hero__inner { padding: 12px 18px 13px; }
  .hero .eyebrow { margin-bottom: 1px; }
  .hero h1 { font-size: 23px; }
  .hero p:not(.eyebrow) { font-size: 12px; line-height: 1.5; }
  .demo-mark { margin-top: 4px; }
  .main { padding-inline: 14px; }
  .section-bar { margin: 16px 0 12px; gap: 8px; }
  .section-bar .eyebrow { display: none; }
  .section-bar h2 { font-size: 20px; }
  .section-bar__actions { gap: 6px; }
  .section-bar__actions a, .section-bar__actions button { min-height: 44px; padding: 8px 9px; }
  .stats { gap: 8px; margin-bottom: 16px; }
  .stats > div { padding: 10px 12px; }
  .stats strong { font-size: 25px; }
  .queue-head { margin-bottom: 10px; }
  .report-card { gap: 8px; padding: 13px; }
  .report-card h4 { font-size: 16px; line-height: 1.5; }
}