/* Buttons as in VISUAL_STYLE_GUIDE.md: compact (32–36px), radius 8px,
   orange primary, purple secondary, neutral ghost, quick transitions. */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:34px;
  padding:0 14px;
  border:1px solid var(--line-strong);
  background:#fff;
  color:var(--text);
  border-radius:var(--radius-control);
  cursor:pointer;
  font-family:inherit;
  font-size:13px;
  font-weight:500;
  line-height:1.2;
  white-space:nowrap;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
}

.btn:hover{
  border-color:var(--muted-soft);
  background:var(--panel-soft);
}

.btn:active{
  background:#f1f1f1;
}

.btn:focus-visible{
  outline:2px solid var(--highlight);
  outline-offset:2px;
}

.btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}

.btn.primary{
  background:var(--highlight);
  border-color:var(--highlight);
  color:#fff;
  font-weight:600;
}

.btn.primary:hover{
  background:var(--highlight-hover);
  border-color:var(--highlight-hover);
}

.btn.primary:disabled:hover{
  background:var(--highlight);
  border-color:var(--highlight);
}

.btn.secondary{
  background:#fff;
  border-color:var(--accent);
  color:var(--accent);
  font-weight:600;
}

.btn.secondary:hover{
  background:var(--accent);
  color:#fff;
}

.btn.ghost{
  background:transparent;
  border-color:var(--line-strong);
  color:var(--muted);
}

.btn.ghost:hover{
  background:rgba(204,78,0,.05);
  border-color:rgba(204,78,0,.3);
  color:var(--text);
}

.btn.danger{
  background:#fff;
  border-color:var(--danger);
  color:var(--danger);
}

.btn.danger:hover{
  background:var(--danger);
  color:#fff;
}

.btn.small{
  min-height:28px;
  padding:0 10px;
  font-size:12px;
}

/* Back arrow next to the screen title */
.title-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.back-btn{
  width:32px;
  height:32px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-control);
  background:var(--panel);
  color:var(--muted);
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}

.back-btn:hover{ border-color:rgba(204,78,0,.3); background:rgba(204,78,0,.05); color:var(--highlight); }
.back-btn:focus-visible{ outline:2px solid var(--highlight); outline-offset:2px; }
.back-btn .btn-icon{ width:16px; height:16px; }

/* Selected states in dark, as the header of VISUAL_STYLE_GUIDE.md: #111114 with
   white text. */
.btn.toggle.is-on{
  background:var(--header-bg);
  border-color:var(--header-bg);
  color:#fff;
  font-weight:600;
}

/* Wizard steps */
.stepper{
  display:flex;
  margin-bottom:18px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  overflow:hidden;
}

.stepper-step{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:0 16px;
  border:0;
  background:var(--panel);
  color:var(--muted-soft);
  font-family:inherit;
  font-size:13px;
  font-weight:500;
  text-align:left;
  cursor:default;
  transition:background-color .15s ease, color .15s ease;
}

.stepper-step + .stepper-step{ border-left:1px solid var(--line); }
.stepper-step.is-done{ background:var(--panel-soft); color:var(--muted); }
.stepper-step.is-link{ cursor:pointer; }
.stepper-step.is-link:hover{ background:rgba(204,78,0,.05); color:var(--text); }
.stepper-step:focus-visible{ outline:2px solid var(--highlight); outline-offset:-2px; }

.stepper-step.is-active{
  background:var(--header-bg);
  color:#fff;
  font-weight:600;
}

.step-num{
  width:22px;
  height:22px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:var(--panel);
  color:var(--muted-soft);
  font-size:11px;
  font-weight:700;
}

.is-done > .step-num{ border-color:transparent; background:var(--highlight-soft); color:var(--highlight-hover); }
.is-active > .step-num{ border-color:transparent; background:var(--highlight); color:#fff; }

/* Tabs of the project detail */
.tabs{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.tab{
  min-height:34px;
  padding:0 14px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-control);
  background:var(--panel);
  color:var(--muted);
  font-family:inherit;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}

.tab:hover{ border-color:rgba(204,78,0,.3); background:rgba(204,78,0,.05); color:var(--text); }
.tab:focus-visible{ outline:2px solid var(--highlight); outline-offset:2px; }

.tab.is-active{
  background:var(--header-bg);
  border-color:var(--header-bg);
  color:#fff;
  font-weight:600;
}

/* Segmented control: Configure / Analyze, All / Differences */
.seg{
  display:inline-flex;
  gap:2px;
  padding:2px;
  background:var(--panel);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-control);
}

.seg-btn{
  min-height:28px;
  padding:0 12px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--muted);
  font-family:inherit;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}

.seg-btn:hover{ background:rgba(204,78,0,.06); color:var(--text); }
.seg-btn:focus-visible{ outline:2px solid var(--highlight); outline-offset:1px; }
.seg-btn.is-active{ background:var(--header-bg); color:#fff; font-weight:600; }

/* Lighter variant for the row filter (All rows / Diffs) */
.seg.soft{ border-color:transparent; background:transparent; }
.seg.soft .seg-btn{ border-radius:var(--radius-pill); }
.seg.soft .seg-btn.is-active{ background:#efefef; color:var(--text); }

.badge{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:var(--fs-label);
  font-weight:700;
  letter-spacing:.02em;
  background:var(--panel-soft);
  color:var(--muted);
  white-space:nowrap;
}

/* State colours of the style guide: success, pending/warning, error/rejected
   and closed/corporate. A plain .badge is the "unknown" grey. */
.badge.ok{
  background:#dcfce7;
  border-color:#bbf7d0;
  color:#166534;
}

.badge.warn{
  background:#fef3c7;
  border-color:#fde68a;
  color:#92400e;
}

.badge.bad{
  background:#fee2e2;
  border-color:#fecaca;
  color:#991b1b;
}

.badge.closed{
  background:#ede9fe;
  border-color:#ddd6fe;
  color:#5b21b6;
}

/* HC revisions, apart from commercial versions: purple, as the HC editor notice. */
.badge.type-hc{
  background:#f3e8ff;
  border-color:#e3ccf7;
  color:var(--accent-active);
}

/* Inputs of the style guide: --line-strong border, 8px radius, orange focus. */
.input,.select{
  border:1px solid var(--line-strong);
  background:#fff;
  padding:10px 12px;
  border-radius:var(--radius-control);
  color:var(--text);
  font-size:var(--fs-copy-sm);
  line-height:1.35;
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}

.input::placeholder{
  color:var(--muted-soft);
}

.input:focus,.select:focus{
  outline:none;
  border-color:var(--highlight);
  box-shadow:0 0 0 3px rgba(204,78,0,.12);
}

.select{
  appearance:none;
}

/* Text input with a list of suggestions below it. */
.combo{ position:relative; }
.combo-list{ position:absolute; z-index:20; top:calc(100% + 4px); left:0; right:0; margin:0; padding:4px; list-style:none; background:var(--panel); border:1px solid var(--line); border-radius:9px; box-shadow:var(--shadow-popup); max-height:220px; overflow:auto; }
.combo-option{ padding:8px 10px; border-radius:6px; font-size:13px; line-height:1.3; cursor:pointer; }
.combo-option:hover,.combo-option.is-active{ background:var(--highlight-soft); }

/* Forms in dialogs ---------------------------------------------------------- */
.field{ display:grid; gap:6px; min-width:0; }
.field > label{ font-size:10.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.field .input,.field .select{ width:100%; }
.field-hint{ font-size:12px; color:var(--muted-mid); line-height:1.4; }
.field-error{ font-size:12px; color:var(--danger); }
.form-grid-2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 18px; }

/* Data tables ---------------------------------------------------------------- */
.table-scroll{ width:100%; overflow-x:auto; }
.dt{ width:100%; border-collapse:collapse; font-size:13px; }
/* Table header of the style guide: 10.5px, 600, uppercase, .07em. */
.dt th{
  text-align:left;
  background:var(--panel-soft);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted);
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.dt td{ padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.dt tbody tr:last-child td{ border-bottom:0; }
.dt .num{ text-align:right; white-space:nowrap; }
.dt .nowrap{ white-space:nowrap; }
.dt .cell-main{ font-weight:700; color:var(--text); }
.dt .cell-sub{ font-size:11px; color:var(--muted-mid); margin-top:2px; }
.dt td.hl{ background:#fff7e6; box-shadow:inset 3px 0 0 var(--highlight-strong); }
.dt .section-cell{ background:#FFF1E6; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--text); box-shadow:inset 5px 0 0 #F6862A; }
.matrix-ro td{ vertical-align:top; }

/* Callouts ------------------------------------------------------------------- */
.callout{ display:block; padding:10px 14px; border-radius:10px; font-size:13px; line-height:1.45; border:1px solid var(--line); background:var(--panel-soft); color:var(--muted); }
.callout.warn{ background:#fff8e1; border-color:#ffe082; color:#8d6e00; }

/* Modal ---------------------------------------------------------------------- */
.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; padding:24px; z-index:1000; }
.modal{ width:min(640px, 100%); max-height:calc(100vh - 48px); overflow:auto; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-panel); box-shadow:var(--shadow-popup); }
.modal.wide{ width:min(920px, 100%); }
.modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:12px 16px; background:var(--header-bg); color:#fff; }
.modal-title{ font-size:15px; font-weight:600; margin:0; color:#fff; }
.modal-sub{ font-size:12px; color:rgba(255,255,255,.75); margin-top:4px; line-height:1.45; }
.modal-body{ padding:16px; display:grid; gap:14px; }
.modal-foot{ display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--line); }
.modal-close{ border:0; background:none; cursor:pointer; color:#fff; padding:4px; }
.modal-close svg{ width:16px; height:16px; }

/* Toast ---------------------------------------------------------------------- */
.toast-host{ position:fixed; right:20px; bottom:20px; display:grid; gap:8px; z-index:1100; }
.toast{ min-width:260px; max-width:420px; background:var(--header-bg); color:#fff; border-radius:10px; padding:10px 14px; font-size:13px; box-shadow:0 8px 28px rgba(0,0,0,.16); }
.toast.bad{ background:var(--danger); }

/* Misc ----------------------------------------------------------------------- */
.btn-icon{ width:14px; height:14px; vertical-align:-2px; }
.row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.stack{ display:grid; gap:16px; }
.muted{ color:var(--muted-soft); }
.small{ font-size:12px; }
.diff-from{ color:#c62828; text-decoration:line-through; }
.diff-to{ color:#2e7d32; font-weight:700; }