/* Website controls. Loaded only by the website and its explicitly owned frames. */
:root[data-ws-controls] {
  color-scheme: dark;
  --ui-text: #f7f0e8;
  --ui-muted: #c4b8bc;
  --ui-gold: #ead3a7;
  --ui-gold-ink: #2c171e;
  --ui-line: rgb(238 219 211 / 15%);
  --ui-line-strong: rgb(238 219 211 / 27%);
  --ui-control: rgb(248 226 220 / 7%);
  --ui-hover: rgb(248 226 220 / 13%);
  --ui-selected: rgb(234 211 167 / 17%);
  --ui-field: rgb(10 5 8 / 28%);
  --ui-panel: #28191f;
  --ui-glass: rgb(42 26 34 / 94%);
  --ui-ring: #f3dbaf;
  --ui-radius: 18px;
  --ui-pill: 999px;
  --ui-shadow: 0 12px 36px rgb(0 0 0 / 22%), inset 0 1px rgb(255 255 255 / 5%);
  --ui-ease: cubic-bezier(.2,.75,.2,1);
}

/* Native semantic controls keep their keyboard, form and assistive behavior. */
:root[data-ws-controls] :where(button, input, select, textarea, a, summary) {
  -webkit-tap-highlight-color: transparent;
}
:root[data-ws-controls] :where(button, .btn, input, select, textarea, summary, [role="tab"]) {
  transition: background-color 160ms var(--ui-ease), border-color 160ms var(--ui-ease),
    color 160ms var(--ui-ease), box-shadow 160ms var(--ui-ease), opacity 160ms var(--ui-ease);
}
:root[data-ws-controls] :where(button, .btn, select, summary) { touch-action: manipulation; }
:root[data-ws-controls] :where(button, .btn) {
  border-color: var(--ui-line);
  filter: none;
}
:root[data-ws-controls] :where(button, .btn):hover { filter: none; }
:root[data-ws-controls] :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible:where(:root:not([data-ws-input="pointer"]) *) {
  outline: 2px solid var(--ui-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgb(234 211 167 / 13%);
}
:root[data-ws-controls] :where(button, .btn):disabled {
  cursor: not-allowed;
  opacity: .46;
  filter: none;
  transform: none;
  box-shadow: none;
}
:root[data-ws-controls] :where(input, select, textarea):disabled { opacity: .6; }
:root[data-ws-controls] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
  border: 1px solid var(--ui-line-strong);
  background-color: var(--ui-field);
  color: var(--ui-text);
  border-radius: 13px;
  min-height: 40px;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 8%);
}
:root[data-ws-controls] :where(input, textarea)::placeholder { color: #ad9da5; opacity: 1; }
:root[data-ws-controls] :where(input, select, textarea):hover:not(:disabled) { border-color: rgb(234 211 167 / 45%); }
:root[data-ws-controls] :where(input, select, textarea):focus { border-color: var(--ui-gold); }
:root[data-ws-controls] :where(input, select, textarea)[aria-invalid="true"] { border-color: #f49fa9; }
:root[data-ws-controls] select {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23dfc7a7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
:root[data-ws-controls] select option { background: #2d1b24; color: var(--ui-text); }
:root[data-ws-controls] textarea { line-height: 1.55; }
:root[data-ws-controls] input:is([type="checkbox"], [type="radio"]) {
  accent-color: var(--ui-gold);
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  cursor: pointer;
}
:root[data-ws-controls] input[type="range"] {
  accent-color: var(--ui-gold);
  width: 100%;
  min-height: 32px;
  cursor: pointer;
  background: transparent;
}
:root[data-ws-controls] input[type="file"]::file-selector-button {
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-pill);
  padding: 10px 16px;
  margin-right: 12px;
  background: var(--ui-control);
  color: var(--ui-text);
  font: inherit;
  cursor: pointer;
}

/* Actions are pills; list rows, artwork and whole cards retain useful geometry. */
:root[data-ws-controls] :is(.btn, .text-link, .mi-actions button, .mi-toolbar button,
 .mi-command-buttons button, .menu-controls button, .audit-tabs button, .audit-toolbar button,
 .modal-actions button, .desktop-card-tools button, .btg-full-tools button,
 .stack-action button, .stack-top button, .desktop-stack-wines button,
 .category-tabs button, .view-switch button, .filter-presets button, .filter-chips button,
 .map-controls button, .btg-toolbar button, .report-toolbar-actions button) {
  min-height: 38px;
  padding: 9px 16px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-pill);
  background: var(--ui-control);
  color: var(--ui-text);
  font-weight: 550;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: inset 0 1px rgb(255 255 255 / 4%);
}
:root[data-ws-controls] :is(.btn, .text-link, .mi-actions button, .mi-toolbar button,
 .mi-command-buttons button, .menu-controls button, .audit-tabs button, .audit-toolbar button,
 .modal-actions button, .desktop-card-tools button, .btg-full-tools button,
 .stack-action button, .category-tabs button, .view-switch button,
 .filter-presets button, .filter-chips button, .map-controls button):hover:not(:disabled) {
  background-color: var(--ui-hover);
  border-color: var(--ui-line-strong);
}
:root[data-ws-controls] :is(.btn.primary, button.primary, .mi-actions button.primary) {
  background: var(--ui-gold);
  border-color: transparent;
  color: var(--ui-gold-ink);
  box-shadow: 0 2px 9px rgb(0 0 0 / 12%), inset 0 1px rgb(255 255 255 / 28%);
}
:root[data-ws-controls] :is(.btn.primary, button.primary):hover:not(:disabled) { background: #f4dfba; }
:root[data-ws-controls] :is(.btn, .category-tabs button, .view-switch button, .audit-tabs button,
 .filter-presets button, .menu-controls button):is(.active, .selected, [aria-selected="true"], [aria-pressed="true"]) {
  background: var(--ui-selected);
  color: #f6e3bd;
  border-color: rgb(234 211 167 / 32%);
  box-shadow: inset 0 1px rgb(255 255 255 / 7%);
}
:root[data-ws-controls] :is(.category-tabs, .view-switch, .audit-tabs) {
  gap: 4px;
  padding: 4px;
  border-radius: 23px;
  background: rgb(5 3 5 / 24%);
  border: 1px solid var(--ui-line);
  width: fit-content;
  max-width: 100%;
}
:root[data-ws-controls] :is(.category-tabs, .view-switch, .audit-tabs) button { border-color: transparent; background: transparent; }

/* Persistent navigation and tools sit on gently translucent material. */
:root[data-ws-controls="website"] .sidebar {
  background-color: #25131c;
  border-right: 1px solid var(--ui-line);
}
:root[data-ws-controls="website"] .nav-btn {
  border: 1px solid transparent;
  border-radius: var(--ui-pill);
  margin: 2px 0;
  padding: 10px 12px;
  min-height: 40px;
  color: #cabbc2;
  font-weight: 450;
  box-shadow: none;
  background: transparent;
}
:root[data-ws-controls="website"] .nav-btn:hover { background: var(--ui-control); color: var(--ui-text); }
:root[data-ws-controls="website"] .nav-btn.active {
  background: linear-gradient(105deg, rgb(234 211 167 / 17%), rgb(234 211 167 / 7%));
  color: #fae9ce;
  border-color: rgb(234 211 167 / 19%);
  box-shadow: inset 0 1px rgb(255 255 255 / 5%), 0 2px 8px rgb(0 0 0 / 8%);
  font-weight: 600;
}
:root[data-ws-controls="website"] .nav-btn .count { border-radius: var(--ui-pill); }
:root[data-ws-controls="website"] .stack-nav {
  border-radius: 20px;
  background: linear-gradient(130deg, rgb(137 79 93 / 26%), rgb(234 211 167 / 7%));
  border-color: rgb(234 211 167 / 22%);
  box-shadow: inset 0 1px rgb(255 255 255 / 5%);
}
:root[data-ws-controls="website"] .stack-nav:hover { border-color: rgb(234 211 167 / 45%); }
:root[data-ws-controls="website"] :is(.workspace, body) { background: #190e14; }
:root[data-ws-controls="website"] .desk-search {
  border-radius: var(--ui-pill);
  border: 1px solid var(--ui-line-strong);
  background: rgb(255 235 227 / 5%);
  min-height: 46px;
  padding-left: 17px;
  box-shadow: inset 0 1px rgb(255 255 255 / 3%);
}
:root[data-ws-controls="website"] .desk-search:focus-within:where(:root:not([data-ws-input="pointer"]) *) { border-color: var(--ui-gold); box-shadow: 0 0 0 3px rgb(234 211 167 / 10%); }
:root[data-ws-controls="website"] .desk-search input { background: transparent; border: 0; border-radius: 0; box-shadow: none; outline: none; }
:root[data-ws-controls="website"] .desk-search button {
  border: 0;
  border-radius: 50%;
  background: var(--ui-gold);
  color: var(--ui-gold-ink);
  min-width: 34px;
  min-height: 34px;
}
:root[data-ws-controls="website"] :is(.toolbar, .btg-toolbar, .menu-toolbar, .audit-toolbar, .selection-bar) {
  border-radius: var(--ui-radius);
  border-color: var(--ui-line);
  background: var(--ui-glass);
  box-shadow: inset 0 1px rgb(255 255 255 / 4%);
}
:root[data-ws-controls="website"] :is(.filter-popover, .filter-menu[open], dialog, .inspector, .stack-action, .mi-dialog) {
  border: 1px solid var(--ui-line-strong);
  border-radius: 22px;
  background: var(--ui-glass);
  color: var(--ui-text);
  box-shadow: var(--ui-shadow);
}
:root[data-ws-controls] dialog::backdrop { background: rgb(7 3 6 / 62%); backdrop-filter: blur(5px); }
:root[data-ws-controls="website"] :is(.modal-head, .inspector-head) { border-color: var(--ui-line); }
:root[data-ws-controls="website"] :is(.modal-head, .inspector-head) > button,
:root[data-ws-controls] .mi-close {
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  border-radius: 50%;
  background: var(--ui-control);
  border: 1px solid var(--ui-line);
  color: var(--ui-text);
}
:root[data-ws-controls="website"] :is(.filter-menu > summary, .menu-integrity-details > summary) {
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-pill);
  background: var(--ui-control);
  padding: 10px 15px;
  min-height: 38px;
  color: var(--ui-text);
}
:root[data-ws-controls="website"] .filter-menu[open] > summary { background: var(--ui-selected); }
:root[data-ws-controls="website"] :is(.facet-options label, .check) { border-radius: 9px; padding-block: 7px; }
:root[data-ws-controls="website"] .facet-options label:hover { background: var(--ui-control); }
:root[data-ws-controls="website"] :is(.mi-meter, .editorial-card, .daily-agenda, .compare-card,
 .plan-summary, .audit-report-card, .form-section, .desktop-turn, .notice, .panel-empty, .map-catalog) {
  border-color: var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: inset 0 1px rgb(255 255 255 / 3%);
}
:root[data-ws-controls="website"] :is(.mi-meter, .audit-report-card, .desktop-turn) { background: #2b1922; }
:root[data-ws-controls="website"] .mi-meter .mi-actions button { width: 100%; text-align: left; }
:root[data-ws-controls="website"] :is(.table-wrap, .revisions-table-wrap, .docs-list, .menu-preview) { border-radius: 16px; border-color: var(--ui-line); }
:root[data-ws-controls="website"] :is(td, th, .doc-row, .mi-finding) { border-color: var(--ui-line); }
:root[data-ws-controls="website"] tbody tr { transition: background-color 140ms var(--ui-ease); }
:root[data-ws-controls="website"] tbody tr:hover { background-color: rgb(242 220 211 / 5%); }
:root[data-ws-controls="website"] tbody tr.selected { background-color: var(--ui-selected); }
:root[data-ws-controls="website"] :is(.status, .roster-tag, .filter-chips button, .map-version, .mi-stock-badge) { border-radius: var(--ui-pill); }
:root[data-ws-controls="website"] :is(.agenda-week button, .calendar-date) { border-radius: 12px; }
:root[data-ws-controls="website"] .agenda-week button:hover { background: var(--ui-control); }
:root[data-ws-controls="website"] .agenda-week button.today { background: var(--ui-selected); border-color: var(--ui-line-strong); }
:root[data-ws-controls="website"] :is(.daily-event, .agenda-timeline button) { border-radius: 12px; transition: background-color 160ms var(--ui-ease); }
:root[data-ws-controls="website"] :is(.daily-event, .agenda-timeline button):hover { background: var(--ui-control); }
:root[data-ws-controls="website"] :is(.event-arrow, .editorial-actions button > span:last-child) { transition: translate 160ms var(--ui-ease); }
:root[data-ws-controls="website"] button:hover > .event-arrow { translate: 2px 0; }
:root[data-ws-controls="website"] #toast { border-radius: var(--ui-pill); background: #3e2934; color: var(--ui-text); border: 1px solid var(--ui-line-strong); box-shadow: var(--ui-shadow); }

@supports (backdrop-filter: blur(12px)) {
  :root[data-ws-controls="website"] :is(.toolbar, .menu-toolbar, .selection-bar, .filter-popover, dialog, .mi-dialog) {
    background-color: rgb(42 26 34 / 88%);
    backdrop-filter: blur(16px) saturate(1.15);
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :root[data-ws-controls] :is(.btn, .text-link, .nav-btn, .mi-actions button, .menu-controls button):active:not(:disabled) { scale: .98; }
  :root[data-ws-controls] :is(.btn, .text-link, .nav-btn, .mi-actions button, .menu-controls button) { transition: scale 100ms var(--ui-ease), background-color 160ms var(--ui-ease), border-color 160ms var(--ui-ease), box-shadow 160ms var(--ui-ease); }
}
@media (prefers-reduced-motion: no-preference) {
  :root[data-ws-controls] dialog[open] { animation: ws-control-enter 180ms var(--ui-ease); }
  @keyframes ws-control-enter { from { opacity: 0; translate: 0 5px; } to { opacity: 1; translate: 0 0; } }
}
@media (max-width: 700px), (pointer: coarse) {
  :root[data-ws-controls] :is(.btn, .text-link, .mi-actions button, .menu-controls button, .audit-tabs button, .modal-actions button, .nav-btn) { min-height: 44px; }
  :root[data-ws-controls] :is(input, select, textarea) { font-size: 16px; }
  :root[data-ws-controls="website"] :is(.modal-head, .inspector-head) > button, :root[data-ws-controls] .mi-close { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-ws-controls] *, :root[data-ws-controls] *::before, :root[data-ws-controls] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-transparency: reduce) {
  :root[data-ws-controls] { --ui-glass: #2a1a22; --ui-control: #3a2932; --ui-hover: #49343f; --ui-field: #20121a; }
  :root[data-ws-controls="website"] :is(.toolbar, .menu-toolbar, .selection-bar, .filter-popover, dialog, .mi-dialog) { background-color: #2a1a22; backdrop-filter: none; }
  :root[data-ws-controls] dialog::backdrop { backdrop-filter: none; background: rgb(7 3 6 / 85%); }
}
@media (forced-colors: active) {
  :root[data-ws-controls] :is(button, .btn, input, select, textarea, summary) { border: 1px solid ButtonText; box-shadow: none; }
  :root[data-ws-controls] :is(button, a, input, select, textarea, summary):focus-visible { outline-color: Highlight; }
  :root[data-ws-controls] select { appearance: auto; background-image: none; }
}
@media print {
  :root[data-ws-controls] { --ui-text: #111; --ui-muted: #444; --ui-line: #bbb; --ui-glass: white; }
  :root[data-ws-controls] :is(dialog, .toolbar, .menu-toolbar, .mi-meter) { backdrop-filter: none; box-shadow: none; }
}

/* Overview meter controls and disclosure chevrons. */
:root[data-ws-controls="website"] .mi-command-buttons button { font-size: 11px; min-height: 36px; }
:root[data-ws-controls="website"] .mi-card-footer button { border-radius: var(--ui-pill); padding: 10px 13px; background: var(--ui-control); border: 1px solid var(--ui-line); }
:root[data-ws-controls="website"] .mi-card-footer button:hover { background: var(--ui-hover); }
:root[data-ws-controls="website"] details > summary { cursor: pointer; }
:root[data-ws-controls="website"] details > summary :is(.chevron, .mi-bin-chevron) { transition: rotate 180ms var(--ui-ease); }
:root[data-ws-controls="website"] .event-date-link { min-height: 38px; border-radius: var(--ui-pill); padding: 8px 12px; }
:root[data-ws-controls="website"] .footer { gap: 8px; }
:root[data-ws-controls] * { scrollbar-width: thin; scrollbar-color: #6d525f transparent; }
:root[data-ws-controls] ::-webkit-scrollbar { width: 7px; height: 7px; }
:root[data-ws-controls] ::-webkit-scrollbar-thumb { background: #6d525f; border-radius: 999px; }
:root[data-ws-controls] ::-webkit-scrollbar-track { background: transparent; }
/* The assistant form has its own ID-based legacy styles. */
:root[data-ws-controls="website"] #desktop-stack textarea { border: 1px solid var(--ui-line-strong); border-radius: 16px; background: var(--ui-field); color: var(--ui-text); padding: 14px; }
:root[data-ws-controls="website"] #desktop-stack-form button { min-height: 44px; border-radius: var(--ui-pill); padding: 10px 18px; border: 1px solid var(--ui-line); font-weight: 550; }
:root[data-ws-controls="website"] #desktop-stack-form button.primary { background: var(--ui-gold); color: var(--ui-gold-ink); border-color: transparent; }
:root[data-ws-controls="website"] .compare-card header > button { width: 38px; height: 38px; min-width: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--ui-line); background: var(--ui-control); color: var(--ui-text); }
:root[data-ws-controls="website"] .compare-card header > button:hover { background: var(--ui-hover); }
@media (max-width: 700px), (pointer: coarse) { :root[data-ws-controls="website"] .compare-card header > button { width: 44px; height: 44px; min-width: 44px; } }
:root[data-ws-controls="website"] .stack-flag-answer { min-height: 38px; border-radius: var(--ui-pill); padding: 8px 14px; border-color: var(--ui-line-strong); background: var(--ui-control); color: var(--ui-gold); }
:root[data-ws-controls="website"] .stack-flag-answer:hover:not(:disabled) { background: var(--ui-hover); }
@media (max-width: 700px), (pointer: coarse) { :root[data-ws-controls="website"] .stack-flag-answer { min-height: 44px; } }