/* HourNerd light brand: demo surfaces and interaction states.
   Load after the component styles and brand-theme.css. */

/* Product pages, case studies and the portfolio. */
.portfolio-intro,
.delivery-section,
.product-section,
.tinted,
.showcase-block.tinted,
.booth-section {
  background: var(--off);
}

.portfolio-card,
.product-card,
.product-step,
.case-card,
.showcase-shell {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

.portfolio-lead,
.portfolio-card p,
.product-card p,
.product-list,
.product-step,
.case-card p,
.showcase-note,
.booth-caption {
  color: var(--muted);
}

.portfolio-tag,
.demo-overline,
.product-kicker,
.product-step::before,
.case-card h4,
.case-secondary {
  color: var(--green-ink);
}

.portfolio-status {
  background: var(--off);
  color: var(--muted);
}

.product-band {
  background: var(--green-soft);
  color: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.product-band p {
  color: var(--muted);
}

.product-note {
  background: var(--green-soft);
  border-color: var(--green);
  color: var(--green-ink);
}

/* Tabbed workflow demos. */
.demo-section {
  background: var(--off);
  color: var(--ink);
}

.demo-section .kicker {
  color: var(--green-ink);
}

.demo-section .portfolio-lead,
.portfolio-caveat,
.portfolio-caveat.dark,
.demo-header p,
.demo-meta {
  color: var(--muted);
}

.demo-tab {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
}

.demo-tab:hover {
  background: var(--green-soft);
}

.demo-tab.active {
  background: var(--green);
  border-color: var(--green-ink);
  color: var(--ink);
}

.demo-panel {
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.sample-badge {
  background: var(--orange-soft);
  color: var(--orange-ink);
}

.roster-toolbar input,
.roster-toolbar select,
.showcase-toolbar input:not([type=checkbox]),
.showcase-toolbar select,
.invoice-row input {
  background: var(--paper);
  color: var(--ink);
  border-color: #969ca1;
}

.showcase-toolbar input[type=checkbox] {
  accent-color: var(--green-ink);
}

.mini-btn {
  background: var(--paper);
  color: var(--green-ink);
  border: 1px solid #9aa46c;
}

.mini-btn:hover {
  background: var(--green-soft);
}

.demo-table th,
.showcase-table th {
  background: var(--off);
  color: var(--ink);
}

.demo-table th,
.demo-table td,
.showcase-table th,
.showcase-table td {
  border-color: var(--line);
}

.soft-pill,
.showcase-status {
  background: var(--green-soft);
  color: var(--green-ink);
}

.showcase-status {
  border-color: var(--green);
}

.showcase-jump a {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
}

.showcase-jump a:hover {
  background: var(--orange-soft);
  color: var(--orange-ink);
  border-color: var(--orange);
}

/* Main Exhibit Manager map. */
.booth-frame,
.booth-panel {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

.booth-head strong {
  color: var(--ink);
}

.booth-tag,
.booth-legend,
.booth-map-footer,
.booth-panel p {
  color: var(--muted);
}

.booth-toolbar button,
.booth-panel button {
  background: var(--paper);
  color: var(--ink);
  border-color: #969ca1;
}

.booth-toolbar button:hover,
.booth-toolbar button:focus-visible,
.booth-panel button:hover {
  background: var(--green-soft);
  color: var(--green-ink);
  border-color: var(--green-ink);
}

.booth-viewport {
  background: repeating-linear-gradient(
    0deg, #f5f5f3 0, #f5f5f3 29px, #e4e5e1 30px
  );
  border-color: var(--line);
}

.booth-stage::before {
  color: var(--muted);
}

.booth-cell {
  background: #e9efc1;
  color: #3d4809;
  border-color: #89983b;
}

.booth-cell.premium:not(:disabled) {
  background: var(--green);
  color: var(--ink);
  border-color: var(--green-ink);
}

.booth-cell:hover:not(:disabled),
.booth-cell:focus-visible:not(:disabled) {
  box-shadow: 0 0 0 3px rgba(82, 97, 10, .25);
}

.booth-cell:disabled,
.booth-cell.reserved,
.booth-cell.premium.reserved {
  background: #e1e3e5;
  color: #464d54;
  border-color: #989fa5;
}

.booth-cell:disabled::after {
  background: #20262c;
  border-color: var(--paper);
}

.booth-cell.reserved::after {
  color: #20262c;
  text-shadow: none;
}

.booth-cell.reserved:hover,
.booth-cell.reserved:focus-visible {
  outline-color: var(--orange-ink);
  filter: none;
}

.booth-cell.selected,
.booth-cell.premium.selected:not(:disabled) {
  background: #ffc178;
  color: #653000;
  border-color: var(--orange-ink);
  box-shadow: 0 0 0 3px rgba(244, 144, 28, .25);
}

.booth-map-footer {
  border-color: #a8adb0;
}

.booth-dot {
  background: #e9efc1;
  border: 1px solid #89983b;
}

.booth-dot.premium {
  background: var(--green);
  border-color: var(--green-ink);
}

.booth-dot.reserved {
  background: #e1e3e5;
  border-color: #989fa5;
}

.booth-dot.chosen {
  background: #ffc178;
  border-color: var(--orange-ink);
}

.booth-result {
  background: var(--green-soft);
  color: var(--ink);
}

.booth-result strong {
  color: var(--green-ink);
}

.booth-tooltip {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--green-ink);
  box-shadow: 0 12px 32px rgba(48, 56, 66, .2);
}

.booth-exhibitor-card strong,
.booth-result .booth-exhibitor-card,
.booth-result .booth-exhibitor-card strong,
.booth-result .booth-exhibitor-card span {
  color: var(--ink);
}

.booth-exhibitor-card small,
.booth-result .booth-exhibitor-card small {
  color: var(--green-ink);
}

.booth-exhibitor-card em,
.booth-result .booth-exhibitor-card em {
  color: var(--muted);
}

/* Keep the fictional logo lettering legible on its own brand color. */
.booth-result .booth-exhibitor-card .booth-logo {
  color: #ffffff;
}

.showcase-image {
  border-color: var(--line);
  box-shadow: var(--shadow);
}

/* Other booth examples keep the same available/reserved/selected key. */
.booth-key,
.ex-small,
.ex-meta {
  color: var(--muted);
}

.key-dot.free,
.legend-open {
  background: #e9efc1;
  border-color: #89983b;
}

.key-dot.taken,
.legend-reserved {
  background: #b4b9be;
  border-color: #989fa5;
}

.key-dot.selected,
.legend-selected {
  background: #ffc178;
  border-color: var(--orange-ink);
}

.booth-button,
.ex-cell {
  background: #e9efc1;
  color: #3d4809;
  border-color: #89983b;
}

.booth-button:disabled,
.ex-cell.reserved {
  background: #e1e3e5;
  color: #464d54;
  border-color: #989fa5;
}

.ex-cell.reserved::after {
  color: #20262c;
}

.booth-button.selected,
.ex-cell.selected {
  background: #ffc178;
  color: #653000;
  border-color: var(--orange-ink);
}

.ex-viewport,
.ex-side,
.event-bars {
  background: var(--off);
  color: var(--ink);
  border-color: var(--line);
}

.ex-map {
  background: var(--paper);
  border-color: #e1e3e0;
  box-shadow: var(--shadow);
}

.ex-stage {
  background: #e9ebe7;
  color: var(--muted);
}

.ex-exhibitor strong {
  color: var(--ink);
}

.event-bar .bar {
  background: linear-gradient(180deg, var(--green), #7e9029);
}

/* Illustrative exhibitor pricing and add-ons. */
.price-demo {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

.price-demo:has([data-addon]:checked) {
  border-color: var(--green-ink);
}

.price-demo h3,
.price-addon strong,
.price-summary h4,
.price-row strong {
  color: var(--ink);
}

.price-demo p,
.price-addon small,
.price-empty,
.price-disclaimer,
.price-row span {
  color: var(--muted);
}

.price-demo .price-eyebrow,
.price-addon b {
  color: var(--green-ink);
}

.price-addon {
  background: var(--off);
  border-color: var(--line);
}

.price-addon:hover {
  border-color: #969ca1;
}

.price-addon:has(input:checked) {
  background: var(--green-soft);
  border-color: var(--green-ink);
}

.price-addon input {
  accent-color: var(--green-ink);
}

.price-summary {
  background: var(--orange-soft);
  border-color: #e6b57e;
}

.price-row {
  border-color: #e2cdb5;
}

.price-row.grand span,
.price-row.grand strong {
  color: var(--orange-ink);
}

.price-actions button {
  background: var(--paper);
  color: var(--ink);
  border-color: #a79887;
}

.price-actions button:hover {
  background: #ffe4c4;
  color: var(--orange-ink);
  border-color: var(--orange-ink);
}

/* Focus remains visible on white, grey, orange and green surfaces. */
.demo-tab:focus-visible,
.mini-btn:focus-visible,
.booth-toolbar button:focus-visible,
.booth-panel button:focus-visible,
.booth-cell:focus-visible,
.booth-button:focus-visible,
.ex-cell:focus-visible,
.price-demo button:focus-visible,
.price-addon:focus-within {
  outline: 2px solid var(--orange-ink);
  outline-offset: 3px;
}