/* KIS Connect — technician access
 *
 * Layered on portal.css so the brand tokens are defined once. This file only
 * adds what the customer page has no use for: forms with more than one field,
 * a token table, and the enrolment QR.
 *
 * Different audience, deliberately different density. The customer page is
 * one decision at arm's length; this one is a working console for someone who
 * uses it every day and would rather see everything at once.
 */

.tag {
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.3125rem 0.625rem;
}

main.tech {
  max-width: 34rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

main.tech .panel.wide { max-width: none; }
main.tech:has(.panel.wide[hidden="false"]) { max-width: 52rem; }

.tech h1 {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
  color: var(--color-text-heading);
}

.tech h2 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 2rem 0 0.5rem;
  color: var(--color-text-heading);
}

.tech .lede { margin: 0 0 1.75rem; color: var(--color-text); }
.tech .muted { color: var(--color-text-muted); font-size: 0.9375rem; }

/* --- forms ------------------------------------------------------------ */

.stack { display: flex; flex-direction: column; gap: 0.5rem; }
/* portal.css gives .code-input `flex: 1 1 14ch`. In a column container a
 * flex-basis is a *height*, so the field renders about 200px tall. Reset the
 * basis wherever the axis is vertical. */
.stack .code-input,
.stack .text-input { flex: 0 0 auto; width: 100%; }
.stack label { font-size: 0.875rem; color: var(--color-text-muted); margin-top: 0.75rem; }
.stack .btn { margin-top: 1.5rem; }

.row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-top: 1.5rem; }
.row .code-input, .row .text-input { flex: 1 1 12ch; min-width: 0; }

.text-input {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.8125rem 1.125rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-heading);
  transition: var(--transition);
  min-width: 0;
}
.text-input:focus,
.tech .code-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-surface-hover);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- enrolment -------------------------------------------------------- */

.qr-wrap {
  display: inline-block;
  padding: 1rem;
  background: #ffffff;      /* a QR needs true white behind it to scan reliably */
  border-radius: var(--radius-md);
  line-height: 0;
}
.qr-wrap svg { display: block; width: 13.5rem; height: 13.5rem; }

.manual { margin: 1.5rem 0 0; }
.manual summary {
  cursor: pointer;
  color: var(--color-primary);
  font-size: 0.9375rem;
  padding: 0.25rem 0;
}
.manual p { font-size: 0.9375rem; }

.secret {
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  letter-spacing: 0.08em;
  color: var(--color-text-heading);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  overflow-wrap: anywhere;
}

.warn {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  border-left: 2px solid var(--color-primary);
  padding-left: 0.875rem;
  margin: 1.5rem 0 0;
}

/* --- token console ---------------------------------------------------- */

.console-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.console-head h1 { margin-bottom: 0.125rem; }

.fresh-token {
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  background: var(--color-surface);
}
.fresh-token h2 { margin-top: 0; }

.token, .snippet {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.875rem 1rem;
  overflow-x: auto;
  color: var(--color-text-heading);
}
.token { font-size: 1rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.snippet { color: var(--color-text); line-height: 1.5; }

table.tokens {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin-top: 0.75rem;
}
table.tokens th {
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  padding: 0 0.75rem 0.5rem 0;
}
table.tokens td {
  padding: 0.75rem 0.75rem 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
table.tokens td.muted { color: var(--color-text-muted); }

.good { color: var(--color-primary); }
.bad  { color: var(--color-text-muted); text-decoration: line-through; }

.link-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-btn:hover { color: var(--color-primary); }

.error-banner {
  margin-top: 1.5rem;
  padding: 0.875rem 1.125rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-danger-edge, var(--color-border));
  background: var(--color-surface);
  color: var(--color-text-heading);
  font-size: 0.9375rem;
}

@media (max-width: 34rem) {
  main.tech { padding: 2rem 1.25rem 3rem; }
  .row { flex-direction: column; align-items: stretch; }
  /* Same trap as the customer page: a width basis becomes a height basis
   * when the container turns into a column. */
  .row .code-input, .row .text-input, .row .btn { flex: 0 0 auto; width: 100%; }
  .qr-wrap svg { width: 11rem; height: 11rem; }
  table.tokens { font-size: 0.875rem; }
}

.hint { font-size: 0.8125rem; color: var(--color-text-muted); margin: 0.25rem 0 0; }

/* --- 2026-09-04: TOTP-only login, self-enrolment, connector download --- */

/* portal.css makes .panel.wide ambitions moot because `hidden` is a boolean
 * attribute, never hidden="false". Key the width on the view instead. */
html[data-view="console"] main.tech { max-width: 52rem; }

a.wordmark { text-decoration: none; }

.email-extra { display: flex; flex-direction: column; gap: 0.5rem; }
.email-extra[hidden] { display: none; }

.enrol-cta {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.enrol-cta p { margin: 0; }

.back { margin-top: 1.5rem; }
.back a { color: var(--color-text-muted); }
.back a:hover { color: var(--color-primary); }

.notice-banner {
  margin: 0 0 1.5rem;
  padding: 0.875rem 1.125rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-hover);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9375rem;
}
.notice-banner[hidden] { display: none; }

/* --- 2026-09-04: one card per platform, detected device first ----------
 *
 * All of the "which one is for me" logic is attribute-driven CSS keyed on
 * .dl-section[data-detected|data-selected], which the server
 * stamps and tech.js may update. No script is needed for the page to be right
 * for the common case. */

.detected-line { margin: 0.25rem 0 0; font-size: 0.9375rem; color: var(--color-text); }
.detected-line .detected-other { display: none; }
.dl-section[data-detected="other"] .detected-line .detected-known { display: none; }
.dl-section[data-detected="other"] .detected-line .detected-other { display: inline; }

.dl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 1.5rem;
}

/* Three tiers in one grid, ordered by CSS: the detected card (order 0) is
 * featured full-width with the big buttons the console had before; the
 * "Other platforms" label (order 1) then the remaining cards (order 2) sit
 * below in a compact grid. */
.dl-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.125rem 1.125rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  order: 2;
}
.dl-card[data-available=""] { display: none; }   /* build not published on this server */
/* Temporary agents (amendment 14): only while the relay's release knows --temporary */
.dl-section[data-temporary=""] .btn-temp,
.mode-switch[data-temporary=""],
.temp-intro[data-temporary=""],
.temp-steps[data-temporary=""] { display: none; }
/* The mode switch decides which of each pair shows: the card's button, the
 * "temp-" in a file name, --install or --temporary in a run line, and the
 * steps that apply. Both are in the markup; no script is involved. */
.installer:has(#mode-temporary:checked) .m-install,
.installer:not(:has(#mode-temporary:checked)) .m-temp { display: none; }
.dl-card h3 {
  margin: 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.dl-card .muted { margin: 0 0 0.25rem; font-size: 0.8125rem; min-height: 2.6em; }

.dl-buttons { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
.dl-card .btn-download {
  width: 100%;
  max-width: none;
  padding: 0.6875rem 0.875rem;
  min-height: 0;
  border-radius: var(--radius-md);
}
.dl-card .btn-download:hover { box-shadow: none; }
.dl-card .btn-line { font-size: 0.9375rem; }
.dl-card .btn-sub { font-size: 0.75rem; }

.others-label {
  order: 1;
  grid-column: 1 / -1;
  margin: 0.75rem 0 -0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.dl-section[data-detected="other"] .others-label { display: none; }

/* The badge exists on every card; only the detected one shows it. */
.this-device {
  display: none;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 0.125rem 0.4375rem;
}
/* The featured card: full width, centered, with the console's original
 * large download buttons side by side. */
.dl-section[data-detected="windows"] .dl-card[data-os="windows"],
.dl-section[data-detected="legacy"]  .dl-card[data-os="legacy"],
.dl-section[data-detected="macos"]   .dl-card[data-os="macos"],
.dl-section[data-detected="macos-legacy"] .dl-card[data-os="macos-legacy"],
.dl-section[data-detected="linux"]   .dl-card[data-os="linux"] {
  order: 0;
  grid-column: 1 / -1;
  align-items: center;
  text-align: center;
  gap: 0.625rem;
  padding: 1.75rem 1.5rem 2rem;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-glow);
}
.dl-section[data-detected="windows"] .dl-card[data-os="windows"] h3,
.dl-section[data-detected="legacy"]  .dl-card[data-os="legacy"]  h3,
.dl-section[data-detected="macos"]   .dl-card[data-os="macos"]   h3,
.dl-section[data-detected="macos-legacy"] .dl-card[data-os="macos-legacy"] h3,
.dl-section[data-detected="linux"]   .dl-card[data-os="linux"]   h3 {
  font-size: var(--step-2);
  justify-content: center;
}
.dl-section[data-detected="windows"] .dl-card[data-os="windows"] .muted,
.dl-section[data-detected="legacy"]  .dl-card[data-os="legacy"]  .muted,
.dl-section[data-detected="macos"]   .dl-card[data-os="macos"]   .muted,
.dl-section[data-detected="macos-legacy"] .dl-card[data-os="macos-legacy"] .muted,
.dl-section[data-detected="linux"]   .dl-card[data-os="linux"]   .muted {
  font-size: 0.9375rem;
  min-height: 0;
  max-width: 34rem;
  margin-bottom: 0.75rem;
}
.dl-section[data-detected="windows"] .dl-card[data-os="windows"] .dl-buttons,
.dl-section[data-detected="legacy"]  .dl-card[data-os="legacy"]  .dl-buttons,
.dl-section[data-detected="macos"]   .dl-card[data-os="macos"]   .dl-buttons,
.dl-section[data-detected="macos-legacy"] .dl-card[data-os="macos-legacy"] .dl-buttons,
.dl-section[data-detected="linux"]   .dl-card[data-os="linux"]   .dl-buttons {
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
  max-width: 26rem;
}
.dl-section[data-detected="windows"] .dl-card[data-os="windows"] .btn-download,
.dl-section[data-detected="legacy"]  .dl-card[data-os="legacy"]  .btn-download,
.dl-section[data-detected="macos"]   .dl-card[data-os="macos"]   .btn-download,
.dl-section[data-detected="macos-legacy"] .dl-card[data-os="macos-legacy"] .btn-download,
.dl-section[data-detected="linux"]   .dl-card[data-os="linux"]   .btn-download {
  flex: 1 1 0;
  padding: 1.75rem 1.25rem;
  min-height: 6.5rem;
  border-radius: var(--radius-lg);
}
.dl-section[data-detected="windows"] .dl-card[data-os="windows"] .btn-download:hover,
.dl-section[data-detected="legacy"]  .dl-card[data-os="legacy"]  .btn-download:hover,
.dl-section[data-detected="macos"]   .dl-card[data-os="macos"]   .btn-download:hover,
.dl-section[data-detected="macos-legacy"] .dl-card[data-os="macos-legacy"] .btn-download:hover,
.dl-section[data-detected="linux"]   .dl-card[data-os="linux"]   .btn-download:hover {
  box-shadow: 0 0 40px 0 var(--color-primary-glow);
}
.dl-section[data-detected="windows"] .dl-card[data-os="windows"] .btn-line,
.dl-section[data-detected="legacy"]  .dl-card[data-os="legacy"]  .btn-line,
.dl-section[data-detected="macos"]   .dl-card[data-os="macos"]   .btn-line,
.dl-section[data-detected="macos-legacy"] .dl-card[data-os="macos-legacy"] .btn-line,
.dl-section[data-detected="linux"]   .dl-card[data-os="linux"]   .btn-line { font-size: var(--step-2); }
.dl-section[data-detected="windows"] .dl-card[data-os="windows"] .btn-sub,
.dl-section[data-detected="legacy"]  .dl-card[data-os="legacy"]  .btn-sub,
.dl-section[data-detected="macos"]   .dl-card[data-os="macos"]   .btn-sub,
.dl-section[data-detected="macos-legacy"] .dl-card[data-os="macos-legacy"] .btn-sub,
.dl-section[data-detected="linux"]   .dl-card[data-os="linux"]   .btn-sub { font-size: 0.9375rem; }

@media (max-width: 34rem) {
  .dl-section .dl-card .dl-buttons { flex-direction: column; }
}
.dl-section[data-detected="windows"] .dl-card[data-os="windows"] .this-device,
.dl-section[data-detected="legacy"]  .dl-card[data-os="legacy"]  .this-device,
.dl-section[data-detected="macos"]   .dl-card[data-os="macos"]   .this-device,
.dl-section[data-detected="macos-legacy"] .dl-card[data-os="macos-legacy"] .this-device,
.dl-section[data-detected="linux"]   .dl-card[data-os="linux"]   .this-device { display: inline-block; }

/* Instructions: one block per platform, only the selected one visible. */
.steps-title { margin-top: 0.5rem; }
.dl-section [data-steps-for] { display: none; }
.dl-section[data-selected="windows"] [data-steps-for="windows"],
.dl-section[data-selected="legacy"]  [data-steps-for="legacy"],
.dl-section[data-selected="macos"]   [data-steps-for="macos"],
.dl-section[data-selected="macos-legacy"] [data-steps-for="macos-legacy"],
.dl-section[data-selected="linux"]   [data-steps-for="linux"] { display: block; }
.dl-section[data-selected="other"] .steps-title { display: none; }

.run-line { display: block; margin: 0.5rem 0 0.25rem; white-space: pre-wrap; overflow-wrap: anywhere; }

.tech ol.after {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}
.tech ol.after li { margin: 0.375rem 0; }
.tech ol.after code:not(.snippet) { font-family: var(--font-mono); font-size: 0.875em; }

.dl-links a { color: var(--color-primary); }
.tech h3 {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 1.25rem 0 0.5rem;
  color: var(--color-text-heading);
}
.manual code { font-family: var(--font-mono); font-size: 0.875em; }

/* --- always-on refactor: the installer form ------------------------------
 * A customer picker and a label above the per-platform cards. The fieldset only
 * exists so one `disabled` attribute can switch off every control inside it
 * (no groups, relay down); its browser chrome is reset. */
.installer-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.installer-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 0.5rem;
}
.installer-fields .field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.installer-fields label { font-size: 0.875rem; color: var(--color-text-muted); }
.installer-fields .optional { opacity: 0.75; }
.installer-fields .text-input { width: 100%; }
select.text-input { appearance: auto; cursor: pointer; }
.installer-set[disabled] .dl-section { opacity: 0.5; }
.installer-set[disabled] .btn-download { cursor: not-allowed; }
.installer-set .hint code, .tech p.hint code { font-family: var(--font-mono); font-size: 0.9em; }
.after-note { margin: 0 0 1rem; }
.error-banner[hidden] { display: none; }
.notice-banner + .error-banner { margin-top: 0; }

/* Temporary agent | Install: two option tiles, the checked one outlined. */
.mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0 0;
}
.mode-option {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  color: var(--color-text);
}
.mode-option:hover { border-color: var(--color-border-hover); }
.mode-option:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.mode-option:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.mode-option input { margin: 0.2rem 0 0; accent-color: var(--color-primary); flex: none; }
.mode-option b { display: block; font-size: 0.9375rem; }
.mode-sub { display: block; font-size: 0.8125rem; color: var(--color-text-muted); }

@media (max-width: 34rem) {
  .installer-fields { grid-template-columns: minmax(0, 1fr); }
  .mode-switch { grid-template-columns: minmax(0, 1fr); }
}