/* Common chrome and controls. Application layouts and printed cards stay local. */
body {
  font-family: var(--font-ui);
  color: var(--ink);
  background-color: var(--bg);
}

/* Match logo ink to the active palette even before scripts synchronize src,
   or when a restored page changes data-theme without an appearance event. */
:root img[data-companion-logo="mark"] {
  content: url("/brand/kt-companion/mark-dark.png");
}

:root img[data-companion-logo="logo"] {
  content: url("/brand/kt-companion/logo-dark.png");
}

:root[data-theme="light"] img[data-companion-logo="mark"] {
  content: url("/brand/kt-companion/mark-light.png");
}

:root[data-theme="light"] img[data-companion-logo="logo"] {
  content: url("/brand/kt-companion/logo-light.png");
}

/* One checkbox treatment across services, independent of browser/OS chrome.
   Keep the native input for labels, Space, forms and screen readers. The root
   specificity also overrides service input resets (including Bootstrap). */
:root input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  padding: 0;
  margin: 0;
  vertical-align: middle;
  border: 1px solid var(--quiet);
  border-radius: 4px;
  background: var(--surface-input) center / 14px 14px no-repeat;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .12);
  cursor: pointer;
  accent-color: var(--accent);
  transition: background-color .12s, border-color .12s, box-shadow .12s;
}

:root input[type="checkbox"]:is(:checked, :indeterminate) {
  border-color: var(--accent);
  background-color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent-dark);
}

:root input[type="checkbox"]:checked {
  /* Dark ink on orange, matching --on-accent in both site themes. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8 3 3 7-7' fill='none' stroke='%23050505' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:root input[type="checkbox"]:indeterminate {
  background-image: linear-gradient(var(--on-accent), var(--on-accent));
  background-size: 10px 2px;
}

@media (hover: hover) {
  :root input[type="checkbox"]:enabled:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .14);
  }

  :root input[type="checkbox"]:enabled:checked:hover {
    background-color: var(--accent-hover);
  }
}

:root input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

:root input[type="checkbox"]:disabled {
  opacity: .45;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  :root input[type="checkbox"] { transition: none; }
}

/* Respect Windows High Contrast rather than relying on a background image. */
@media (forced-colors: active) {
  :root input[type="checkbox"] {
    -webkit-appearance: auto;
    appearance: auto;
    border: revert;
    background: revert;
    box-shadow: none;
    opacity: 1;
  }

  :root input[type="checkbox"]:is(:checked, :indeterminate, :enabled:hover) {
    border-color: revert;
    background: revert;
    box-shadow: none;
  }

  :root input[type="checkbox"]:focus-visible { outline-color: Highlight; }
}

.companion-utility {
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
  min-height: 64px;
  padding: 10px 24px;
  color: var(--ink);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font: 14px/1.4 var(--font-ui);
}

.companion-utility a {
  color: var(--ink);
  text-decoration: none;
}

.companion-utility a:hover {
  color: var(--accent);
}

.companion-service-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 750;
  min-width: 0;
}

.companion-service-brand img {
  flex: none;
  object-fit: contain;
}

.companion-logo-link {
  display: grid;
  place-items: center;
  width: 56px;
  height: 50px;
  flex: none;
  border-radius: 6px;
}

.companion-service-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 50px;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.companion-service-name {
  font: 850 16px/1.2 var(--font-ui);
  letter-spacing: .025em;
}

.companion-service-tool {
  color: var(--accent-text);
  font: 750 11px/1.4 var(--font-ui);
  letter-spacing: .19em;
}

/* Account composition shared by every full Companion service. */
.companion-account-bar { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:var(--kt-control-gap) 24px; min-width:0; max-width:100%; }
.companion-tools { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:var(--kt-control-gap); min-width:0; }
.companion-account { display:flex; align-items:center; min-width:0; }
.companion-account-status { flex-basis:100%; color:var(--danger); font-size:12px; }
.companion-account-status:empty { display:none; }
/* Notification content keeps its own layout instead of toolbar button sizing. */
:root .companion-utility :is(button,.companion-login,.shared-notifications>summary):not(:where(.notification-panel *)) {
  box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; flex:none;
  gap:8px; width:auto; min-width:var(--button-height); height:var(--button-height); min-height:var(--button-height);
  margin:0; padding:var(--button-padding); border:1px solid var(--line-strong); border-radius:var(--button-radius);
  font:var(--button-font-weight) var(--button-font-size)/var(--button-line-height) var(--font-ui);
  letter-spacing:normal; text-transform:none; white-space:nowrap; text-decoration:none; list-style:none;
  background:var(--panel-2); color:var(--ink); box-shadow:none; cursor:pointer;
}
:root .companion-utility .companion-login { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
:root .companion-utility :is(button,.companion-login,.shared-notifications>summary):not(:where(.notification-panel *)):not(:disabled):hover { border-color:var(--accent); color:var(--accent-text); }
:root .companion-utility .companion-login:hover { background:var(--accent-hover); color:var(--on-accent); }
.companion-theme-switch { display:flex; gap:4px; }
:root .companion-utility :is(.companion-theme-button,.notification-toggle,.shared-notifications>summary,.menu-toggle) { width:var(--button-height); padding:0; }
:root .companion-utility .menu-toggle { flex-direction:column; gap:5px; padding:9px; }
:root .companion-utility .menu-toggle span { margin:0; }
:root .companion-utility :is(.companion-theme-button[aria-pressed="true"],.notification-toggle[aria-expanded="true"],details[open]>summary) { background:rgb(var(--accent-rgb)/.14); border-color:var(--accent); color:var(--accent-text); }
:root .companion-utility button:disabled { opacity:.45; cursor:not-allowed; }
:root .companion-utility :is(.companion-theme-button,.notification-toggle,.shared-notifications>summary) svg { display:block; flex:none; width:22px; height:22px; pointer-events:none; }
.companion-notifications { position:relative; display:flex; }
.companion-notifications:has(> [data-notification-control][hidden]) { display:none; }
.companion-notifications .notification-panel { position:absolute; top:calc(100% + 12px); right:0; }
:root .companion-utility .notification-badge { top:-6px; right:-6px; display:grid; place-items:center; min-width:20px; height:20px; padding:0 4px; border:2px solid var(--surface); border-radius:999px; background:var(--accent); color:var(--on-accent); font:800 10px/1 var(--font-ui); }

.companion-utility :focus-visible,
.page-shell :is(a,button,input,select,summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.page-shell {
  grid-template-columns: minmax(0,1fr);
  width: min(1120px,calc(100% - 32px));
}

.page-shell .hero {
  background: var(--surface);
  box-shadow: var(--shadow);
}

.page-shell button {
  font: var(--button-font-weight) var(--button-font-size)/var(--button-line-height) var(--font-ui);
  min-height: 40px;
  border-radius: var(--button-radius);
  text-transform: none;
  color: var(--on-accent);
}

.page-shell button.secondary {
  color: var(--ink);
}

.page-shell :is(input,textarea,select) {
  font: inherit;
}

.page-shell .log-preview {
  color: var(--muted);
}

.page-shell :is(h1,h2,h3) {
  font-family: var(--font-ui);
}

.page-shell h1 {
  font-size: clamp(26px,3vw,36px);
}

.page-shell h2 {
  font-size: 20px;
}

.page-shell .tool-card h3 {
  font-size: 18px;
}

.page-shell h2,
.page-shell .tool-card h3,
.page-shell .stat b {
  color: var(--accent-text);
}

.page-shell .support-card,
.page-shell .tool-card {
  box-shadow: none;
}

.companion-home-brand {
  display: flex;
  align-items: center;
  margin: 0 0 18px;
}

.companion-home-brand img {
  display: block;
  width: min(100%, 350px);
  height: auto;
  object-fit: contain;
}

.companion-gate {
  box-sizing: border-box;
  max-width: 640px;
  margin: 70px auto;
  padding: 32px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font: 16px/1.6 var(--font-ui);
}

body[data-companion-section="tournament"] {
  --topbar-controls-gutter: 18px;
}

body[data-companion-section="tournament"] .topbar {
  top: var(--companion-bar-height,64px);
}

body[data-companion-section="tournament"] .app-brand {
  display: none;
}

.companion-tournament-menu:has(.menu-toggle) {
  display: none;
}

@media (min-width:901px) {
  body[data-companion-section="tournament"] .sidebar {
    top: calc(var(--companion-bar-height,64px) + 14px);
  }
}

body[data-companion-section="tournament"] .auth-layout {
  min-height: calc(100dvh - var(--companion-bar-height,64px));
}

body[data-companion-section="studio"] .workspace {
  min-height: calc(100vh - var(--companion-bar-height,64px) - 128px);
}

.tool-help {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.tool-help summary {
  cursor: pointer;
  width: fit-content;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tool-help summary::before {
  content: "▸";
}

.tool-help[open] summary::before {
  content: "▾";
}

.tool-help p {
  margin: 8px 0 0;
}

.segmented input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.segmented span {
  text-transform: none;
}

.result-box {
  top: calc(var(--companion-bar-height,64px) + 16px);
}

.tracker-controls {
  top: calc(var(--companion-bar-height,64px) + 16px);
}

@media (max-width:900px) {
  .companion-utility {
    padding: 10px 14px;
    gap: 8px;
  }

  .companion-service-brand {
    font-size: 14px;
  }

  .companion-tournament-menu:has(.menu-toggle) {
    display: flex;
  }

  body.sidebar-open .companion-utility {
    pointer-events: none;
  }

  .companion-notifications .notification-panel {
    position: fixed;
    top: calc(var(--companion-bar-height,104px) + 8px);
    right: 10px;
    left: 10px;
    width: auto;
    max-height: calc(100dvh - var(--companion-bar-height,104px) - 20px);
  }
}

@media (max-width:600px) {
  .companion-utility {
    position: relative;
    padding: 8px 12px;
  }

  .companion-service-brand {
    flex: 1 1 100%;
  }

  .companion-service-name {
    font-size: 13px;
  }

  .companion-logo-link,
  .companion-logo-link img {
    width: 44px;
    height: 42px;
  }


  .companion-notifications .notification-panel {
    top: 12px;
    max-height: calc(100dvh - 24px);
  }

  body[data-companion-section="tournament"] .topbar {
    top: 0;
  }

  .page-shell {
    width: calc(100% - 20px);
    padding-top: 14px;
  }

  .companion-home-brand img {
    width: min(100%, 280px);
  }

  .tools-grid {
    grid-template-columns: minmax(0,1fr);
  }

  .tools-section {
    border: 0;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  .tools-section>section {
    padding: 14px;
  }

  .companion-gate {
    margin: 24px 14px;
    padding: 24px;
  }

  .page-shell .hero {
    padding: 14px;
    margin-bottom: 14px;
  }

  .page-shell .players {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
  }

  .page-shell .player {
    padding: 10px;
  }

  body[data-companion-section="initiative"] .panel {
    padding: 14px;
  }

  body[data-companion-section="initiative"] .hero p {
    font-size: 15px;
  }

  .page-shell .player .group-title {
    margin-top: 12px;
    margin-bottom: 6px;
  }

  .page-shell .player h3 {
    font-size: 15px;
  }

  .page-shell .player label {
    gap: 6px;
    font-size: 14px;
    min-height: 32px;
  }

  .page-shell .check-list,
  .page-shell .ability-list {
    gap: 6px;
    min-height: 0;
  }

  .page-shell .initiative-controls {
    grid-template-columns: minmax(0,1fr) auto;
  }

  .page-shell .initiative-controls button {
    min-height: 44px;
    padding: 0 12px;
  }

  .page-shell .result-box {
    padding: 14px;
  }

  .page-shell .tracker-layout {
    border: 0;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  .page-shell .tracker-controls {
    position: static;
    padding: 14px;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
  }

  .tracker-controls>h2,
  .tracker-controls>.field:nth-of-type(3),
  .tracker-controls>.tool-help {
    grid-column: 1/-1;
  }

  .tracker-controls h2 {
    margin: 0;
  }

  .page-shell .summary:has(.stat) {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 6px;
    padding: 8px;
  }

  .page-shell .stat {
    padding: 10px 6px;
  }

  .page-shell .stat b {
    font-size: 24px;
    overflow-wrap: anywhere;
  }

  .page-shell .stat span {
    font-size: 11px;
  }

  .page-shell .track {
    grid-template-columns: repeat(2,minmax(0,1fr));
    padding: 10px;
  }

  .page-shell .slot {
    min-height: 100px;
  }

  .page-shell .slot-title {
    font-size: 14px;
  }
}

@media print {
  .companion-utility {
    display: none !important;
  }
}

/* The profile slots have the same layout for session and tournament data. */
.companion-profile-slot { min-width:0; max-width:100%; }
:root .companion-utility .companion-profile { display:flex; align-items:center; gap:10px; min-width:0; max-width:100%; min-height:var(--button-height); padding:0; border-radius:var(--button-radius); color:var(--accent-text); text-decoration:none; }
:root .companion-profile .tournament-header-identity { display:contents; }
:root .companion-profile :is(.companion-profile-name,.tournament-header-name) { min-width:0; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:800 16px/1.3 var(--font-ui); text-transform:uppercase; }
:root .companion-profile :is(.companion-avatar,.avatar-button) { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; flex:none; width:var(--button-height); height:var(--button-height); overflow:hidden; border:2px solid var(--accent); border-radius:50%; background:var(--surface-medallion); color:#ffb14a; box-shadow:none; font:800 14px/1 var(--font-ui); }
:root .companion-profile :is(.companion-avatar,.avatar-button) img { display:block; width:100%; height:100%; object-fit:cover; }
:root .companion-profile :is(.companion-rating,.rating-pill) { display:inline-flex; align-items:center; flex:none; min-height:28px; padding:0 9px; border:0; border-radius:var(--button-radius); background:var(--accent); color:var(--on-accent); font:800 13px/1 var(--font-ui); white-space:nowrap; }
@media(max-width:600px) {
  .companion-account-bar { width:100%; justify-content:flex-start; gap:12px; }
  .companion-profile-slot { flex:1 1 100%; }
  .companion-tools { justify-content:flex-start; }
  .companion-notifications .notification-panel { top:calc(var(--companion-bar-height,180px) + 8px); }
}

/* Standard action buttons. Content cards, text links, fields and dense table controls
   retain their own semantics; they are not implicitly converted into buttons. */
:root body :is(
  body[data-companion-section="initiative"] .page-shell button, body[data-companion-section="tracker"] .page-shell button,
  body[data-companion-section="tournament"] :is(.primary-button,.ghost-button,.danger-button,.small-button),
  .account-page button, .email-page button, .email-page .action,
  .training-content .button, .lab-shell .lab-button,
  .dice-controls button:not(.team-choice):not(.face-tab), .dice-preview .panel-title button, .export-panel button,
  .mini-shell .primary, .mini-shell .secondary, .mini-shell .danger,
  body[data-companion-section="faq"] button.primary, body[data-companion-section="faq"] button.secondary,
  body[data-companion-section="faq"] button[id="new-entry"], body[data-companion-section="faq"] button[id="load-more"]
) {
  box-sizing:border-box; min-height:var(--button-height); height:auto; padding:var(--button-padding);
  border-radius:var(--button-radius); font:var(--button-font-weight) var(--button-font-size)/var(--button-line-height) var(--font-ui);
  text-transform:none; letter-spacing:normal; box-shadow:none;
}

/* Match the kit's primary and secondary fills as well as its dimensions. */
:root body :is(.account-page button.primary,.training-content .button.primary,.primary-button) { color:var(--on-accent); border:1px solid var(--accent); }
:root body[data-companion-section="initiative"] .page-shell button:not(.secondary) { border:1px solid var(--accent); }
:root body[data-companion-section="initiative"] .page-shell button.secondary { background:var(--panel-2); border-color:var(--line-strong); }
:root body :is(.lab-shell .lab-button-secondary,.mini-shell .secondary) { border-color:var(--line-strong); }