/*
 * Work Instruction App - shared design core (2026-10), used by the commercial site and the app (/start/).
 * Tokens, fonts, base, buttons, links, logo switch and the Bootstrap harmonisation shared by both.
 * Site-only chrome and homepage sections live in style/wia.css; app-only rules in start/style/app.css.
 * Dark mode follows the OS: header.php / start/inc_head.php set data-bs-theme on <html> before first paint,
 * so Bootstrap components and these tokens switch together (without JS everything stays light).
 */

/* ---------------------------------------------------------------- fonts (self-hosted, OFL) */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}

/* ---------------------------------------------------------------- tokens */
:root{
  --bg:#fff;--bg2:#f6f6f5;--bg3:#ececea;--fg:#141518;--fg2:#4d525a;--line:#e6e6e3;--line2:#d2d2ce;
  --red:#dc3545;--red-hover:#c42a39;--red-ink:#c42a39;--device:#1c1d20;--hdr:rgba(255,255,255,.86);
  --logo:grayscale(1) opacity(.6);
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --gutter:clamp(20px,4vw,40px);--sec:clamp(64px,9vw,128px);
  /* Bootstrap bridge */
  --bs-body-font-family:var(--sans);--bs-body-color:var(--fg);--bs-body-color-rgb:20,21,24;--bs-body-bg:var(--bg);
  --bs-emphasis-color:var(--fg);--bs-secondary-color:var(--fg2);--bs-border-color:var(--line);
  --bs-link-color:var(--fg);--bs-link-color-rgb:20,21,24;--bs-link-hover-color:var(--red-ink);--bs-link-hover-color-rgb:196,42,57;
  --bs-heading-color:var(--fg);--bs-tertiary-bg:var(--bg2);--bs-secondary-bg:var(--bg3);
  --bs-dark-rgb:20,21,24;--bs-light-rgb:246,246,245;
  scroll-padding-top:80px;color-scheme:light
}
:root[data-bs-theme=dark]{
  --bg:#0d0e10;--bg2:#141518;--bg3:#1c1e21;--fg:#ececee;--fg2:#a3a8b0;--line:#24262a;--line2:#363940;
  --red-ink:#f2707b;--device:#2b2d31;--hdr:rgba(13,14,16,.86);--logo:grayscale(1) invert(1) brightness(1.3) opacity(.55);
  --bs-body-color-rgb:236,236,238;--bs-link-color-rgb:236,236,238;--bs-link-hover-color-rgb:242,112,123;
  --bs-light-rgb:20,21,24;--bs-dark-rgb:20,21,24;color-scheme:dark
}

body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}
.wia-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wia-skip{position:absolute;left:-9999px;top:12px;z-index:2000;background:var(--fg);color:var(--bg)!important;padding:10px 16px;border-radius:6px;font-weight:600;text-decoration:none}
.wia-skip:focus{left:16px}
.wia-wrap{max-width:1200px;margin:0 auto;padding:0 var(--gutter)}

/* ---------------------------------------------------------------- buttons */
.wia-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:40px;padding:0 16px;border-radius:8px;background:var(--red);border:1px solid var(--red);color:#fff!important;font:600 15px/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer}
.wia-btn:hover{background:var(--red-hover);border-color:var(--red-hover);color:#fff}
.wia-btn--lg{height:52px;padding:0 24px;font-size:16px}
.wia-btn--ghost{background:transparent;border-color:var(--line2);color:var(--fg)!important;font-weight:500}
.wia-btn--ghost:hover{background:transparent;border-color:var(--fg)}
.wia-btn--block{display:flex;width:100%}
.wia-link{font-weight:600;font-size:15px;text-decoration:none;color:var(--red-ink)!important;white-space:nowrap}
.wia-link:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------------- logo (images/logo/): light/dark variant follows data-bs-theme; below 480px a header shows only the mark */
.wia-brand{display:flex;align-items:center;gap:10px;flex:none;color:var(--fg)}
.wia-brand img{display:block;height:28px;width:auto}
.wia-brand--ftr img{height:24px}
.wia-brand .wia-mark,.wia-brand .wia-logo--dark{display:none}
:root[data-bs-theme=dark] .wia-brand .wia-logo--light{display:none}
:root[data-bs-theme=dark] .wia-brand .wia-logo.wia-logo--dark{display:block}
@media (max-width:479.98px){
  .wia-hdr .wia-brand .wia-logo{display:none!important}
  .wia-hdr .wia-brand .wia-mark.wia-logo--light{display:block}
  :root[data-bs-theme=dark] .wia-hdr .wia-brand .wia-mark.wia-logo--light{display:none}
  :root[data-bs-theme=dark] .wia-hdr .wia-brand .wia-mark.wia-logo--dark{display:block}
}

/* ---------------------------------------------------------------- Bootstrap harmonisation (shared) */
/* primary = ink, like .btn-primary; red stays the brand/CTA colour (.wia-btn, .btn-danger) */
:root{--bs-primary:#141518;--bs-primary-rgb:20,21,24;--bs-primary-text-emphasis:#141518;--bs-primary-bg-subtle:#ececea;--bs-primary-border-subtle:#d2d2ce}
:root[data-bs-theme=dark]{--bs-primary:#ececee;--bs-primary-rgb:236,236,238;--bs-primary-text-emphasis:#ececee;--bs-primary-bg-subtle:#1c1e21;--bs-primary-border-subtle:#363940}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-weight:600;letter-spacing:-.02em;color:var(--fg)}
.display-1,.display-2,.display-3,.display-4,.display-5,.display-6{font-weight:600;letter-spacing:-.03em}
.lead{font-weight:400;color:var(--fg2)}
/* links: no underline; content links in red-ink, underlined on hover. :where() keeps this at element
   specificity, so every component class (.nav-link, .dropdown-item, cards, ...) still wins. */
a{text-decoration:none}
:where(main,#maincontent) a:where(:not(.btn,.wia-btn,.wia-card,.wia-link,.nav-link,.dropdown-item,.page-link,.list-group-item)){color:var(--red-ink);font-weight:500}
:where(main,#maincontent) a:where(:not(.btn,.wia-btn,.wia-card,.wia-link,.nav-link,.dropdown-item,.page-link,.list-group-item)):hover{text-decoration:underline;text-underline-offset:3px}
.wia-txt a{color:var(--red-ink);text-decoration:none}
.wia-txt a:hover{text-decoration:underline;text-underline-offset:3px}
.text-muted,.text-secondary{color:var(--fg2)!important}
.bg-light{background-color:var(--bg2)!important}
.bg-white{background-color:var(--bg)!important}
.bg-dark{background-color:#141518!important}
.border,.border-top,.border-bottom{border-color:var(--line)!important}
:root[data-bs-theme=dark] .text-dark:not(.badge){color:var(--fg)!important}
:root[data-bs-theme=dark] .link-dark{color:var(--fg)!important}
.btn{--bs-btn-border-radius:8px;--bs-btn-font-weight:600;font-family:var(--sans)}
.btn-lg{--bs-btn-padding-y:.75rem;--bs-btn-padding-x:1.5rem;--bs-btn-font-size:1rem;--bs-btn-border-radius:8px}
.btn-danger{--bs-btn-bg:var(--red);--bs-btn-border-color:var(--red);--bs-btn-hover-bg:var(--red-hover);--bs-btn-hover-border-color:var(--red-hover);--bs-btn-active-bg:var(--red-hover);--bs-btn-active-border-color:var(--red-hover)}
.btn-outline-danger{--bs-btn-color:var(--red-ink);--bs-btn-border-color:var(--line2);--bs-btn-hover-bg:transparent;--bs-btn-hover-color:var(--fg);--bs-btn-hover-border-color:var(--fg);--bs-btn-active-bg:transparent;--bs-btn-active-color:var(--fg);font-weight:500}
.btn-primary{--bs-btn-bg:var(--fg);--bs-btn-border-color:var(--fg);--bs-btn-color:var(--bg);--bs-btn-hover-bg:var(--fg2);--bs-btn-hover-border-color:var(--fg2);--bs-btn-hover-color:var(--bg)}
.card{--bs-card-border-color:var(--line);--bs-card-border-radius:12px;--bs-card-bg:var(--bg);--bs-card-color:var(--fg)}
.shadow-sm{box-shadow:none!important}
.rounded-3{border-radius:16px!important}
.accordion{--bs-accordion-border-color:var(--line);--bs-accordion-bg:var(--bg);--bs-accordion-active-bg:var(--bg2);--bs-accordion-active-color:var(--fg);--bs-accordion-btn-focus-box-shadow:none;--bs-accordion-btn-color:var(--fg)}
.table{--bs-table-bg:transparent;--bs-table-color:var(--fg);--bs-table-border-color:var(--line)}
.form-control,.form-select{border-color:var(--line2);border-radius:8px;background-color:var(--bg);color:var(--fg)}
.form-control:focus,.form-select:focus{border-color:var(--fg2);box-shadow:0 0 0 3px rgba(220,53,69,.18)}
.breadcrumb{font-size:14px;margin-top:16px;--bs-breadcrumb-divider-color:var(--fg2);--bs-breadcrumb-item-active-color:var(--fg2)}
.breadcrumb a{color:var(--fg2);text-decoration:none}
.breadcrumb a:hover{color:var(--red-ink)}
.btn-outline-primary{--bs-btn-color:var(--fg);--bs-btn-border-color:var(--line2);--bs-btn-hover-bg:var(--bg2);--bs-btn-hover-color:var(--fg);--bs-btn-hover-border-color:var(--fg);--bs-btn-active-bg:var(--bg3);--bs-btn-active-color:var(--fg);--bs-btn-active-border-color:var(--fg)}
.btn-secondary{--bs-btn-bg:var(--bg3);--bs-btn-border-color:var(--bg3);--bs-btn-color:var(--fg);--bs-btn-hover-bg:var(--line2);--bs-btn-hover-border-color:var(--line2);--bs-btn-hover-color:var(--fg);--bs-btn-active-bg:var(--line2);--bs-btn-active-color:var(--fg)}
.btn-outline-secondary,.btn-outline-dark{--bs-btn-color:var(--fg);--bs-btn-border-color:var(--line2);--bs-btn-hover-bg:var(--bg2);--bs-btn-hover-color:var(--fg);--bs-btn-hover-border-color:var(--fg);--bs-btn-active-bg:var(--bg3);--bs-btn-active-color:var(--fg);--bs-btn-active-border-color:var(--fg)}
.btn-light{--bs-btn-bg:var(--bg2);--bs-btn-border-color:var(--line);--bs-btn-color:var(--fg);--bs-btn-hover-bg:var(--bg3);--bs-btn-hover-border-color:var(--line2);--bs-btn-hover-color:var(--fg)}
.form-check-input:checked{background-color:var(--fg);border-color:var(--fg)}
:root[data-bs-theme=dark] .form-check-input:checked{--bs-form-check-bg-image:none}
.form-check-input:focus{box-shadow:0 0 0 3px rgba(220,53,69,.18)}.btn:focus-visible,.btn-wia:focus-visible,.form-check-input:focus-visible{outline:2px solid var(--red);outline-offset:2px;box-shadow:none}
.form-range{accent-color:var(--fg)}
.alert{--bs-alert-border-radius:12px}
.badge{font-weight:600;letter-spacing:.01em}
.nav-tabs{--bs-nav-tabs-border-color:var(--line);--bs-nav-tabs-link-active-color:var(--fg);--bs-nav-tabs-link-active-bg:var(--bg);--bs-nav-tabs-link-active-border-color:var(--line) var(--line) var(--bg);--bs-nav-tabs-link-hover-border-color:var(--line) var(--line) var(--line)}
.nav{--bs-nav-link-color:var(--fg2);--bs-nav-link-hover-color:var(--fg)}
.nav-pills{--bs-nav-pills-link-active-bg:var(--fg);--bs-nav-pills-link-active-color:var(--bg);--bs-nav-pills-border-radius:8px}
.dropdown-menu{--bs-dropdown-bg:var(--bg);--bs-dropdown-color:var(--fg);--bs-dropdown-border-color:var(--line);--bs-dropdown-border-radius:12px;--bs-dropdown-link-color:var(--fg);--bs-dropdown-link-hover-bg:var(--bg2);--bs-dropdown-link-hover-color:var(--fg);--bs-dropdown-link-active-bg:var(--bg3);--bs-dropdown-link-active-color:var(--fg);--bs-dropdown-box-shadow:0 24px 48px -24px rgba(0,0,0,.18);box-shadow:var(--bs-dropdown-box-shadow)}
.modal{--bs-modal-bg:var(--bg);--bs-modal-color:var(--fg);--bs-modal-border-color:var(--line);--bs-modal-border-radius:16px;--bs-modal-header-border-color:var(--line);--bs-modal-footer-border-color:var(--line)}
.pagination{--bs-pagination-color:var(--fg);--bs-pagination-bg:var(--bg);--bs-pagination-border-color:var(--line);--bs-pagination-hover-color:var(--fg);--bs-pagination-hover-bg:var(--bg2);--bs-pagination-hover-border-color:var(--line2);--bs-pagination-active-bg:var(--fg);--bs-pagination-active-border-color:var(--fg);--bs-pagination-active-color:var(--bg);--bs-pagination-focus-box-shadow:0 0 0 3px rgba(220,53,69,.18)}
.list-group{--bs-list-group-bg:var(--bg);--bs-list-group-color:var(--fg);--bs-list-group-border-color:var(--line);--bs-list-group-border-radius:12px;--bs-list-group-action-hover-bg:var(--bg2);--bs-list-group-action-hover-color:var(--fg);--bs-list-group-active-bg:var(--fg);--bs-list-group-active-border-color:var(--fg);--bs-list-group-active-color:var(--bg)}
.progress{--bs-progress-bg:var(--bg3);--bs-progress-bar-bg:var(--fg);--bs-progress-border-radius:999px}
.popover{--bs-popover-bg:var(--bg);--bs-popover-border-color:var(--line);--bs-popover-header-bg:var(--bg2);--bs-popover-body-color:var(--fg)}
.toast{--bs-toast-bg:var(--bg);--bs-toast-border-color:var(--line);--bs-toast-header-bg:var(--bg2);--bs-toast-header-color:var(--fg)}