/* Shared finishing layer. Load after the existing appearance and layout sheets.
   Compact number boards remain compact; Larger numbers is an explicit choice. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html { --a11y-focus: #fff; --a11y-focus-halo: #07131c; }
html[data-appearance="light"] { --a11y-focus: #07131c; --a11y-focus-halo: #fff; }

/* Two-tone focus remains visible on chrome artwork, status colors and both themes. */
html :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
html[data-appearance] :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--a11y-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--a11y-focus-halo);
}
html :is(.spot, .spot-button):focus-visible {
  position: relative;
  z-index: 4;
  outline-offset: 1px;
}
:is(input, textarea, select, button, a, summary, [tabindex]) {
  scroll-margin-block: 110px 100px;
}
.skip-link {
  position: fixed;
  inset-block-start: -200px;
  inset-inline-start: 16px;
  z-index: 10000;
  max-inline-size: calc(100vw - 32px);
  min-block-size: 44px;
  padding: 12px 18px;
  border: 2px solid #fff;
  border-radius: 8px;
  background: #102535;
  color: #fff;
  font: 700 1rem/1.4 Arial, sans-serif;
  text-decoration: underline;
  overflow-wrap: anywhere;
}
.skip-link:focus { inset-block-start: 16px; top: 16px; }
.skip-link:not(:focus){clip-path:inset(50%);inline-size:1px;block-size:1px;padding:0;overflow:hidden;white-space:nowrap;}

/* Dense controls outside the numbered board still need comfortable hit targets. */
:is(.btn, .button, .site-button, .text-button, .site-text-button,
  .appearance-toggle, .team-switch, .operator-nav-link, .growth-tabs > button,
  .manage-nav > button, .campaign-view-tabs > button, .board-layout-tabs > button,
  .board-statuses > button, .board-filters > button, .boat-album-filters > button,
  .media-tabs > button, .media-photo-views > button, .shortlist-chip) {
  min-block-size: 44px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  touch-action: manipulation;
}
:is(.icon-btn, .icon-button, .dialog-close, .gallery-close, .carousel-arrow,
  .site-theme-button, .gallery-nav button, .gallery-thumbnails > button,
  .boat-thumbnails > button, .giveaway-photo-thumbnails > button) {
  min-inline-size: 44px;
  min-block-size: 44px;
  flex-shrink: 0;
  touch-action: manipulation;
}
summary {
  min-block-size: 44px;
  padding-block: 12px;
  line-height: 1.45;
  cursor: pointer;
  overflow-wrap: anywhere;
}
:is(.check-field, .check-row, .signup-consent) {
  min-block-size: 44px;
  align-items: flex-start;
  line-height: 1.5;
  cursor: pointer;
}
input:is([type="checkbox"], [type="radio"]) {
  flex-shrink: 0;
  accent-color: var(--team-primary, #006b94);
}

/* Theme variables replace inherited low-contrast gray labels in the private UI. */
html[data-appearance] :is(#app, #sheet, #participant-app) .field {
  color: var(--ink);
  font-size: .875rem;
  line-height: 1.5;
}
html[data-appearance] :is(#app, #sheet, #participant-app) :is(
  .field small, .list-sub, .form-note, .field-note, .form-hint, .muted,
  .participant-footnote, .consent-history span, .participant-table th,
  .participant-table td small, .data-table th, .audience-contact small,
  .audience-status small, .operator-nav-group > p) {
  color: var(--muted);
  line-height: 1.55;
}
html[data-appearance] :is(#app, #sheet, #participant-app) :is(
  .field small, .list-sub, .form-note, .field-note, .form-hint,
  .participant-footnote, .data-table th, .participant-table th) {
  font-size: .8125rem;
}
:is(.field, .search, .public-number-form, .signup-form, .public-flow, .flow-card)
  :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
:is(#sheet, #participant-app) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-inline-size: 0;
  max-inline-size: 100%;
  font-size: 1rem;
  line-height: 1.5;
}
html[data-appearance] :is(#app, #sheet, #participant-app) :is(input, textarea)::placeholder {
  color: var(--muted);
  opacity: 1;
}
:is(input, select, textarea)[aria-invalid="true"] {
  border: 2px solid var(--error, #a12e2e);
}
:is(#app, #sheet, #participant-app, .public-flow, .flow-card) [role="alert"] {
  padding: 12px 14px;
  border: 1px solid var(--error, #a12e2e);
  border-inline-start-width: 4px;
  border-radius: 8px;
  background: var(--error-bg, #fff0ef);
  color: var(--error, #a12e2e);
  font-size: .875rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
:is([data-insights-status], [data-announcement-status], [data-growth-status]):not(:empty) {
  margin-block: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line, #b7cbd9);
  border-inline-start-width: 4px;
  border-radius: 8px;
  background: var(--team-soft, #e1ecf3);
  color: var(--ink, #142c3c);
  font-size: .875rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* New operational modules share the existing readable surfaces and form rhythm. */
.campaign-insights > :is(.card, details),
.party-events .detail-box,
[data-jay-announcements] details {
  min-inline-size: 0;
  margin-block: 16px;
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid var(--line, #b7cbd9);
  border-radius: 14px;
  background: var(--paper, #fff);
  color: var(--ink, #142c3c);
}
:is(.campaign-insights, .party-events, [data-jay-announcements]) {
  min-inline-size: 0;
  font-size: .9375rem;
  line-height: 1.55;
}
:is(.campaign-insights, .party-events, [data-jay-announcements]) :is(h2, h3, h4) {
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.campaign-insights :is(.field, .button-row),
[data-jay-announcements] form > .field { margin-block: 14px; }
:is(.campaign-insights, .party-events, [data-jay-announcements]) :is(
  .panel-head, .section-heading, .detail-line, .action-row, .form-actions, .button-row) {
  flex-wrap: wrap;
  min-inline-size: 0;
  gap: 12px;
}
[data-jay-announcements] :is(.action-row, .form-actions),
.campaign-insights .button-row { display: flex; }
:is(.campaign-insights, .party-events, [data-jay-announcements]) :is(p, li, td, th, input[readonly]) {
  overflow-wrap: anywhere;
}
.message-preview {
  max-inline-size: 100%;
  padding: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  line-height: 1.6;
}
:is(.campaign-insights, [data-jay-announcements]) .table-wrap {
  max-inline-size: 100%;
  overflow: auto;
  padding: 6px;
  overscroll-behavior-inline: contain;
}
:is(.campaign-insights, [data-jay-announcements]) table {
  inline-size: 100%;
  min-inline-size: 520px;
  border-collapse: collapse;
  color: inherit;
  font-size: .875rem;
}
:is(.campaign-insights, [data-jay-announcements]) :is(th, td) {
  padding: 13px 10px;
  border-block-end: 1px solid var(--line, #b7cbd9);
  text-align: start;
  vertical-align: top;
  line-height: 1.5;
}
:is(.campaign-insights, [data-jay-announcements]) :is(th, td) small { display: block; }

/* Text zoom and narrow viewports: let controls wrap instead of overlapping. */
@media (max-width: 64rem) {
  .operator-sidebar { position: static; max-block-size: none; overflow: visible; }
  :is(.section-heading, .page-heading, .panel-head, .complete-board-top,
    .presentation-board-heading, .participants-toolbar, .audience-toolbar,
    .public-board-toolbar) { flex-wrap: wrap; min-inline-size: 0; }
  :is(.button-row, .form-actions, .toolbar, .growth-tabs, .board-layout-tabs) {
    flex-wrap: wrap;
    max-inline-size: 100%;
  }
  :is(.campaign-view-tabs, .manage-nav) { flex-wrap: wrap; }
  .site-header-inner .site-nav { flex-wrap: wrap; }
}
@media (max-width: 48rem) {
  :is(.form-grid, .settings-grid, .starter-steps) { grid-template-columns: minmax(0, 1fr); }
  :is(.operator-layout, .operator-content, .workspace, .presentation-shell,
    .campaign-insights, .party-events, [data-jay-announcements]) { min-inline-size: 0; }
  .operator-layout { grid-template-columns: minmax(0, 1fr); }
  .operator-nav-link { font-size: .8125rem; }
  :is(.campaign-insights, .party-events, [data-jay-announcements]) .form-actions > .btn {
    flex: 1 1 160px;
    max-inline-size: 100%;
  }
  .campaign-insights .section-heading > button { max-inline-size: 100%; }
}
@media (max-width: 30rem) {
  dialog { inline-size: calc(100% - 16px); max-inline-size: calc(100% - 16px); max-block-size: calc(100dvh - 16px); }
  :is(.sheet-top, .public-dialog-header, .dialog-header, .public-gallery-top) { gap: 12px; padding-inline: 16px; }
  :is(.sheet-top, .public-dialog-header, .dialog-header, .public-gallery-top) > div { min-inline-size: 0; }
  :is(.sheet-top, .public-dialog-header, .dialog-header, .public-gallery-top) h2 { overflow-wrap: anywhere; }
  :is(.sheet-body, .public-dialog-body, .dialog-body) { padding-inline: 16px; }
  :is(.public-number-form, .quick-number-form) { flex-wrap: wrap; }
  :is(.public-number-form, .quick-number-form) > label { flex-basis: 100%; min-inline-size: 0; }
  :is(.shortlist-bar, .group-selection, .full-board-selection) { position: static; }
  :is(.campaign-insights, .party-events, [data-jay-announcements]) :is(.panel-head, .section-heading, .detail-line) { align-items: flex-start; }
}

/* Deliberate opt-in expansion, preserving every number in both board layouts. */
.complete-board-canvas.large-number-mode .full-number-grid,
.board-canvas.large-numbers .public-board-grid {
  grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
}
.complete-board-canvas.large-number-mode .full-number-grid .spot,
.board-canvas.large-numbers .public-board-grid .spot-button {
  min-block-size: 44px;
  min-inline-size: 44px;
  block-size: auto;
  font-size: .9375rem;
  line-height: 1.4;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
  }
}
@media (forced-colors: active) {
  html :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid Highlight;
    box-shadow: none;
  }
  :is(.spot.selected, .spot-button.selected) { outline: 3px double Highlight; }
  :is(.spot, .spot-button) { border: 1px solid ButtonText; }
}