/* Shared control vocabulary. Load after page styles; never style Discord mockups. */

/* Actions have a visible edge and a small raised base. Panels keep their quiet border. */
.button, .icon-button {
  border-color: transparent;
  box-shadow: 0 2px 0 var(--control-edge);
  font-weight: 650;
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.button.secondary, .icon-button {
  color: var(--ink);
  background: var(--control-bg);
  border: 1px solid var(--control-border);
}
.button:not(:disabled):not([aria-disabled='true']):hover,
.icon-button:not(:disabled):hover {
  filter: none;
  box-shadow: 0 3px 0 var(--control-edge);
}
.button.secondary:not(:disabled):not([aria-disabled='true']):hover,
.icon-button:not(:disabled):hover { background: var(--control-hover); border-color: var(--accent-text); }
.button:not(:disabled):active, .icon-button:not(:disabled):active { transform: translateY(1px); box-shadow: none; }
.button.danger-button { color: var(--danger); background: var(--surface); border-color: var(--danger); }
.button:disabled, .button[aria-disabled='true'], .icon-button:disabled {
  color: var(--disabled-ink);
  background: var(--disabled-bg);
  border: 1px dashed var(--control-border);
  box-shadow: none;
  opacity: 1;
  transform: none;
  filter: none;
  cursor: not-allowed;
}
:where(#dashboard-view, .bo-body, .customer-main) :is(button, a, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 3px;
}

/* Available choices remain prominent even when they are not selected. */
.welcome-tabs button, .ws-tabs a, .ws-tabs button, .server-tabs a {
  position: relative;
  display: block;
  min-height: 44px;
  background: var(--control-bg);
  color: var(--ink);
  border: 1px solid var(--control-border);
  border-radius: 8px;
  padding: 12px 36px 12px 16px;
  font-weight: 650;
  text-decoration: none;
  box-shadow: 0 2px 0 var(--control-edge);
  transition: background-color .15s, border-color .15s, transform .15s;
}
.welcome-tabs button::after, .ws-tabs :is(a,button)::after, .server-tabs a::after {
  content: ''; position: absolute; right: 14px; top: 17px; width: 6px; height: 6px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}
.welcome-tabs button.active, .ws-tabs .active, .server-tabs a.active {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-color: var(--accent);
  box-shadow: inset 0 -3px 0 var(--accent);
  font-weight: 750;
}
.welcome-tabs button.active::after, .ws-tabs .active::after, .server-tabs a.active::after { width: 5px; height: 10px; top: 14px; transform: rotate(45deg); }
.welcome-tabs button:not(:disabled):hover, .ws-tabs :is(a,button):not(:disabled):hover, .server-tabs a:hover {
  background: var(--control-hover); border-color: var(--accent-text);
}
.welcome-tabs button:not(:disabled):active, .ws-tabs :is(a,button):active, .server-tabs a:active { transform: translateY(1px); }
.welcome-tabs button:disabled, .ws-tabs button:disabled {
  background: var(--disabled-bg); color: var(--disabled-ink); border-style: dashed; box-shadow: none; opacity: 1;
}
.welcome-tabs button:disabled::after { display: none; }
.welcome-tabs button small { color: var(--muted); font-weight: 400; }
.server-tabs { gap: 8px; padding-bottom: 12px; }
.server-tabs a { white-space: nowrap; }

/* Navigation is lighter than action buttons, with a persistent selected rail. */
.side-link, .bo-nav {
  color: var(--ink);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--control-bg) 45%, transparent);
  min-height: 44px;
}
.side-link:hover, .bo-nav:hover { background: var(--control-hover); border-color: var(--control-border); }
.side-link.active, .bo-nav.active {
  color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent); font-weight: 750;
}
a.ws-list-row, button.ws-list-row, #ca-search-results button.ws-list-row, a.bo-stat {
  color: var(--ink); border: 1px solid var(--control-border); background: var(--control-bg);
  border-radius: 8px; box-shadow: 0 2px 0 var(--control-edge); text-decoration: none;
}
a.ws-list-row, button.ws-list-row { margin: 8px 0; }
a.ws-list-row::after, button.ws-list-row::after {
  content: ''; margin-left: auto; flex: 0 0 7px; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}
a.ws-list-row:hover, button.ws-list-row:hover, #ca-search-results button.ws-list-row:hover, a.bo-stat:hover {
  background: var(--control-hover); border-color: var(--accent-text);
}

/* A disclosure header is a full control, not a line of informational copy. */
:where(#dashboard-view, .bo-body, .customer-main) details > summary {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 12px 14px; border: 1px solid var(--control-border);
  border-radius: 8px; background: var(--control-bg); color: var(--ink);
  font-weight: 650; cursor: pointer; list-style: none; box-shadow: 0 2px 0 var(--control-edge);
}
:where(#dashboard-view, .bo-body, .customer-main) details > summary::-webkit-details-marker { display: none; }
:where(#dashboard-view, .bo-body, .customer-main) details > summary::marker { content: ''; }
:where(#dashboard-view, .bo-body, .customer-main) details > summary::before {
  content: ''; flex: 0 0 8px; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s;
}
:where(#dashboard-view, .bo-body, .customer-main) details[open] > summary::before { transform: rotate(45deg); }
:where(#dashboard-view, .bo-body, .customer-main) details > summary:hover { background: var(--control-hover); border-color: var(--accent-text); }
#dashboard-view details > summary, .bo-body details > summary, .customer-main details > summary { color: var(--ink); }
:where(#dashboard-view, .bo-body, .customer-main) details > summary:active { box-shadow: none; }
:where(#dashboard-view, .bo-body, .customer-main) details[open] > summary { margin-bottom: 16px; }
.welcome-options { border: 0; padding: 0; }
.welcome-options > summary small { margin-left: auto; font-size: 12px; }
.welcome-options[open] > summary { padding-bottom: 12px; }
.bo-body details.bo-revoke > summary { color: var(--danger); }

/* Inputs are inset and labeled; they must not look like readonly status cards. */
#dashboard-view :is(.welcome-editor, .voice-form, .local-selection-grid, .server-filter, .server-switch) :is(input:where(:not([type=checkbox]):not([type=radio]):not([type=color])), select, textarea),
:is(.bo-editor, .ws-filter, .ws-global-search, .ws-module-selection, .ws-reply, .customer-main) :is(input:where(:not([type=checkbox]):not([type=radio]):not([type=hidden])), select, textarea) {
  color: var(--ink); background: var(--field-bg); border: 1px solid var(--control-border);
  border-radius: 7px; min-height: 44px; box-shadow: inset 0 2px 3px var(--control-edge);
}
#dashboard-view .search-field { background: var(--field-bg); border-color: var(--control-border); min-height: 44px; box-shadow: inset 0 2px 3px var(--control-edge); }
#dashboard-view .search-field:hover { border-color: var(--accent-text); }
:where(#dashboard-view, .bo-body, .customer-main) :is(input,select,textarea):not(:disabled):hover { border-color: var(--accent-text); }
:where(#dashboard-view, .bo-body, .customer-main) :is(input,select,textarea):focus-visible { border-color: var(--accent); }
#dashboard-view :is(.welcome-editor, .voice-form, .local-selection-grid) :is(input,select,textarea):disabled,
:is(.bo-editor, .ws-filter, .ws-reply, .customer-main) :is(input,select,textarea):disabled {
  color: var(--disabled-ink); background: var(--disabled-bg); border-style: dashed; box-shadow: none; cursor: not-allowed;
}
#dashboard-view :is(input,select,textarea)[aria-invalid='true'],
:is(.bo-body, .customer-main) :is(input,select,textarea)[aria-invalid='true'] { border: 2px solid var(--danger); }
.welcome-error:not(:empty) { border-left: 3px solid var(--danger); padding-left: 10px; }
.voice-form .form-body label.local-control-choice { border-color: var(--control-border); background: var(--control-bg); }
.voice-form .form-body label.local-control-choice:has(input:checked) { box-shadow: inset 3px 0 var(--accent); }
.voice-form .form-body label.local-control-choice:has(input:disabled) { border-style: dashed; background: var(--disabled-bg); }
.switch { border-color: var(--control-border); background: var(--control-bg); }
.switch:not(:disabled):hover { border-color: var(--accent-text); }
.switch.on { background: var(--accent); border-color: var(--accent); }
.switch:disabled { border-style: dashed; opacity: .6; cursor: not-allowed; }

/* Labels describe state, with a pill silhouette instead of a raised button edge. */
:is(.badge, .bo-badge):not(:where(.welcome-message *, .discord-preview *)) { border-radius: 999px; box-shadow: none; font-weight: 500; }
.welcome-save-bar { border-left: 3px solid var(--accent); }
.welcome-form { border-top: 3px solid var(--control-border); }
.welcome-editor-label { display: block; margin-bottom: 20px; color: var(--muted); font-size: 11px; letter-spacing: 1.2px; }
.welcome-preview { border-top: 3px solid var(--accent); }
.welcome-preview > .eyebrow { letter-spacing: 1.2px; }
.welcome-template-tools > .button:first-child::before {
  content: ''; width: 12px; height: 12px; flex: 0 0 12px;
  background: linear-gradient(currentColor,currentColor) center / 12px 2px no-repeat,
              linear-gradient(currentColor,currentColor) center / 2px 12px no-repeat;
}

/* Internal support notes retain their warning treatment, distinct from replies. */
.ws-internal-composer [data-message-submit] { color: var(--warning); background: var(--warning-bg); border-color: var(--warning); }
@media (max-width: 600px) {
  .welcome-tabs { gap: 10px; }
  .welcome-tabs button { padding: 12px 28px 12px 12px; }
  .welcome-tabs button::after { right: 10px; }
  .ws-tabs { gap: 8px; }
  .ws-tabs :is(a,button) { padding: 11px 30px 11px 12px; }
  .bo-body .button.small { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .icon-button, .welcome-tabs button, .ws-tabs :is(a,button), .server-tabs a,
  :where(#dashboard-view, .bo-body, .customer-main) details > summary::before { transition: none; }
}
/* Reusable field help: non-interactive content, keyboard/touch trigger. */
.field-help { position: relative; display: inline-flex; flex: none; vertical-align: middle; }
.field-help-button { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; }
.field-help-button > span { display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid currentColor; border-radius: 50%; }
.field-help-button:hover,.field-help-button[aria-expanded=true] { color: var(--accent-text); background: var(--accent-soft); }
.field-help-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.field-help-text { position: absolute; z-index: 40; top: calc(100% + 6px); left: var(--help-shift,0px); width: min(280px,calc(100vw - 32px)); padding: 12px 14px; border: 1px solid var(--accent); border-radius: 8px; color: var(--ink); background: var(--surface); box-shadow: var(--shadow); font-size: 13px; font-weight: 400; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
.field-help-text[hidden] { display: none; }
@media(pointer:coarse),(max-width:700px) { .field-help-button { width:44px; height:44px; } }