/* ===== Fonts =====
   Served from this site (SIL Open Font Licence, see wwwroot/fonts) rather than
   Google Fonts, so pages don't wait on another server. The Latin files are
   preloaded in App.razor; the Latin Extended ones only download when a page
   needs those characters. */
@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/public-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/public-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== Base styles =====
   Adapted from Bootstrap v5.3.3 Reboot (https://getbootstrap.com/).
   Copyright (c) 2011-2024 The Bootstrap Authors. MIT licence; full text at /credits.
   The site used to load Bootstrap in full; this part is
   kept so pages render exactly as before. */
*,
*::before,
*::after {
  box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: 1px solid;
  opacity: 0.25;
}
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
}
h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.5rem;
  }
}
h2, .h2 {
  font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 2rem;
  }
}
h3, .h3 {
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.75rem;
  }
}
h4, .h4 {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  h4, .h4 {
    font-size: 1.5rem;
  }
}
h5, .h5 {
  font-size: 1.25rem;
}
h6, .h6 {
  font-size: 1rem;
}
p {
  margin-top: 0;
  margin-bottom: 1rem;
}
abbr[title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}
address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}
ol,
ul {
  padding-left: 2rem;
}
ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}
dt {
  font-weight: 700;
}
dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}
blockquote {
  margin: 0 0 1rem;
}
b,
strong {
  font-weight: bolder;
}
small, .small {
  font-size: 0.875em;
}
mark, .mark {
  padding: 0.1875em;
  color: #212529;
  background-color: #fff3cd;
}
sub,
sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
a {
  color: rgb(13, 110, 253);
  text-decoration: underline;
}
a:hover {
  color: rgb(10, 88, 202);
}
a:not([href]):not([class]), a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}
pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}
pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  font-size: 0.875em;
}
pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}
code {
  font-size: 0.875em;
  color: #d63384;
  word-wrap: break-word;
}
a > code {
  color: inherit;
}
kbd {
  padding: 0.1875rem 0.375rem;
  font-size: 0.875em;
  color: #fff;
  background-color: #212529;
  border-radius: 0.25rem;
}
kbd kbd {
  padding: 0;
  font-size: 1em;
}
figure {
  margin: 0 0 1rem;
}
img,
svg {
  vertical-align: middle;
}
table {
  caption-side: bottom;
  border-collapse: collapse;
}
caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: rgba(33, 37, 41, 0.75);
  text-align: left;
}
th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}
thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}
label {
  display: inline-block;
}
button {
  border-radius: 0;
}
button:focus:not(:focus-visible) {
  outline: 0;
}
input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
button,
select {
  text-transform: none;
}
[role=button] {
  cursor: pointer;
}
select {
  word-wrap: normal;
}
select:disabled {
  opacity: 1;
}
[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
  display: none !important;
}
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}
button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
  cursor: pointer;
}
::-moz-focus-inner {
  padding: 0;
  border-style: none;
}
textarea {
  resize: vertical;
}
fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: calc(1.275rem + 0.3vw);
  line-height: inherit;
}
@media (min-width: 1200px) {
  legend {
    font-size: 1.5rem;
  }
}
legend + * {
  clear: left;
}
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: 0;
}
::-webkit-inner-spin-button {
  height: auto;
}
[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-color-swatch-wrapper {
  padding: 0;
}
::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}
::file-selector-button {
  font: inherit;
  -webkit-appearance: button;
}
output {
  display: inline-block;
}
iframe {
  border: 0;
}
summary {
  display: list-item;
  cursor: pointer;
}
progress {
  vertical-align: baseline;
}
[hidden] {
  display: none !important;
}

/* The few Bootstrap classes the pages used. */
.nav-link {
    display: block;
    text-decoration: none;
    background: none;
    border: 0;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .nav-link { transition: none; }
}
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.text-danger { color: #dc3545 !important; }

/* ===== Skewed Tools ===== */
:root {
    color-scheme: light;
    --bed: #E9EDF0;        /* page: glass build plate */
    --paper: #F7F9FA;      /* raised surfaces */
    --ink: #18222D;        /* text, primary buttons */
    --ink-soft: #4A5866;   /* secondary text */
    --rule: #C9D1D8;       /* lines, mesh */
    --pei: #D9962B;        /* accent: PEI sheet amber */
    --teal: #2C7A70;
    --teal-text: #256A61;  /* teal for link text: 5.4:1 on --bed, passes WCAG AA */
    --skew: -9deg;
    --wrap: 72rem;
    --font-display: "Bricolage Grotesque", "Segoe UI", sans-serif;
    --font-body: "Public Sans", "Segoe UI", system-ui, sans-serif;
}

html, body {
    background: var(--bed);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
}

h1, h2, h3 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--ink);
}

h1:focus { outline: none; }

a { color: var(--teal-text); text-underline-offset: 0.2em; }
a:hover { color: var(--ink); }

:focus-visible {
    outline: 3px solid var(--pei);
    outline-offset: 3px;
    border-radius: 2px;
}

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

@media (min-width: 720px) {
    .wrap { padding-inline: 2rem; }
}

/* ----- Header ----- */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: color-mix(in srgb, var(--bed) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--rule);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: var(--ink);
}

.brand:hover { color: var(--ink); }

.brand-mark {
    width: 1.35rem;
    height: 1.35rem;
    transform: skewX(var(--skew));
    background: repeating-linear-gradient(180deg, var(--pei) 0 3px, #B97C1C 3px 4px);
    border-radius: 2px;
}

.brand-name {
    font-family: var(--font-display);
    font-weight: 750;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.site-nav { display: flex; gap: 0.25rem; }

@media (max-width: 440px) {
    .header-inner { gap: 0.5rem; }
    .brand-name { font-size: 1.05rem; }
    .site-nav { gap: 0; }
    .site-nav .nav-link { padding-inline: 0.4rem; font-size: 0.88rem; }
}

.site-nav .nav-link {
    color: var(--ink-soft);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
}

.site-nav .nav-link:hover { color: var(--ink); background: var(--paper); }
.site-nav .nav-link.active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--pei); border-radius: 0; }
.nav-short { display: none; }

/* Small screens: the logo already links home, and the long nav label gets a short one. */
@media (max-width: 560px) {
    .site-nav .nav-home { display: none; }
}
@media (max-width: 440px) {
    .site-nav .nav-link { padding-inline: 0.45rem; font-size: 0.9rem; }
    .nav-long {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap;
    }
    .nav-short { display: inline; }
}

/* ----- Hero ----- */
.hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5.5rem);
    border-bottom: 1px solid var(--rule);
}

.bed-mesh {
    position: absolute;
    inset: -10% -20%;
    background-image:
        linear-gradient(var(--rule) 1px, transparent 1px),
        linear-gradient(90deg, var(--rule) 1px, transparent 1px);
    background-size: 48px 48px;
    transform: skewX(var(--skew));
    mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 0%, transparent 75%);
    opacity: 0.7;
    pointer-events: none;
}

.hero-inner {
    position: relative;
    display: grid;
    gap: 2.5rem;
}

.hero-title {
    margin: 0;
    font-size: clamp(4rem, 15vw, 10.5rem);
    font-weight: 800;
    font-variation-settings: "opsz" 96;
    line-height: 0.88;
    letter-spacing: -0.045em;
    transform: skewX(var(--skew));
    transform-origin: bottom left;
}

.hero-title .line {
    display: block;
    width: fit-content;
    /* layer lines, like a print seen from the side */
    background: repeating-linear-gradient(180deg, var(--ink) 0 0.055em, #33424F 0.055em 0.07em);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-right: 0.08em;
    animation: print-up 1.5s steps(22, end) both;
}

.hero-title .line-2 {
    margin-left: 0.55em;
    animation-delay: 0.45s;
}

@keyframes print-up {
    from { clip-path: inset(100% 0 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

.hero-copy { max-width: 38rem; }

.lede {
    font-size: clamp(1.15rem, 2vw, 1.35rem);
    line-height: 1.55;
    color: var(--ink);
    margin-bottom: 1.75rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin: 0;
}

.hero-note { color: var(--ink-soft); font-size: 0.95rem; }

.btn-ink {
    display: inline-block;
    background: var(--ink);
    color: var(--paper);
    font-weight: 650;
    text-decoration: none;
    padding: 0.8rem 1.35rem;
    border-radius: 6px;
    box-shadow: 4px 4px 0 var(--pei);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn-ink:hover {
    color: var(--paper);
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--pei);
}

@media (min-width: 960px) {
    .hero-inner {
        grid-template-columns: 1.3fr 1fr;
        align-items: end;
        column-gap: 4rem;
    }
    .hero-copy { padding-bottom: 0.75rem; }
}

/* ----- Toolbox ----- */
.toolbox { padding-block: clamp(3.5rem, 8vw, 6rem); }

.section-head { max-width: 40rem; margin-bottom: 2.5rem; }
.section-head h2 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 750; margin-bottom: 0.5rem; }
.section-head p { color: var(--ink-soft); margin: 0; }

.tool-groups {
    display: grid;
    gap: 2.5rem 2rem;
}

@media (min-width: 760px) {
    .tool-groups { grid-template-columns: repeat(2, 1fr); gap: 3rem 3rem; }
}

.tool-group {
    border-top: 4px solid var(--swatch);
    padding-top: 1.1rem;
}

.tool-group h3 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.45rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.swatch {
    width: 0.9rem;
    height: 0.9rem;
    background: var(--swatch);
    transform: skewX(var(--skew));
    border-radius: 2px;
}

.group-blurb { color: var(--ink-soft); margin-bottom: 1.25rem; }

.tool-list { list-style: none; margin: 0; padding: 0; }

.tool-list li {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--rule);
}

.tool-list li:first-child { border-top: 1px solid var(--rule); }

.tool-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    font-weight: 650;
}

.tool-list p { margin: 0.2rem 0 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; }

.status {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--paper);
    border: 1px solid var(--rule);
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* ----- Why skewed ----- */
.why {
    background: var(--paper);
    border-block: 1px solid var(--rule);
    padding-block: clamp(3.5rem, 8vw, 6rem);
}

.why-inner { display: grid; gap: 2.5rem; align-items: center; }

@media (min-width: 860px) {
    .why-inner { grid-template-columns: 1fr 1.2fr; gap: 4rem; }
}

.why-copy { max-width: 36rem; }
.why-copy h2 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 750; margin-bottom: 1rem; }
.site-version { color: var(--ink-soft); font-size: 0.85rem; margin: 1.5rem 0 0; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; overflow-wrap: anywhere; cursor: help; }

.skew-figure { margin: 0; }
.skew-figure svg { width: 100%; max-width: 26rem; height: auto; display: block; }
.skew-figure figcaption { color: var(--ink-soft); font-size: 0.9rem; margin-top: 0.75rem; }

.fig-ideal { fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-dasharray: 5 4; }
.fig-skewed { fill: color-mix(in srgb, var(--pei) 22%, transparent); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.fig-diag { stroke: var(--teal); stroke-width: 2; }
.fig-diag-b { stroke: var(--pei); }
.fig-label { font-family: var(--font-body); font-size: 12px; fill: var(--ink-soft); text-anchor: middle; }

/* ----- Footer & simple pages ----- */
.site-footer { padding-block: 2rem; color: var(--ink-soft); font-size: 0.9rem; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; }
.footer-inner p { margin: 0; }

.simple-page { padding-block: clamp(3rem, 10vw, 7rem); max-width: 40rem; margin-left: max(0px, calc((100% - var(--wrap)) / 2)); }
.simple-page h1 { font-size: clamp(2.25rem, 6vw, 3.5rem); font-weight: 800; transform: skewX(var(--skew)); transform-origin: bottom left; margin-bottom: 1rem; }
.simple-page p { color: var(--ink-soft); margin-bottom: 1.5rem; }

/* ----- Credits & licences ----- */
.credits-section { max-width: 48rem; margin-bottom: 3rem; }
.credits-section .section-lede { color: var(--ink-soft); }
.credit-list .credit-meta { font-size: 0.85rem; }
.licence-text { background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 0.75rem 1rem; }
.licence-text summary { cursor: pointer; font-weight: 650; }
.licence-text p { font-size: 0.9rem; color: var(--ink-soft); margin: 0.75rem 0 0; }

@media (prefers-reduced-motion: reduce) {
    .hero-title .line { animation: none; }
    .btn-ink { transition: none; }
}

/* ----- Blazor error UI ----- */
#blazor-error-ui {
    color-scheme: light only;
    background: #FFF4D6;
    color: var(--ink);
    bottom: 0;
    box-shadow: 0 -1px 0 var(--rule);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* ----- Forms (kept from template) ----- */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* ----- Tool pages ----- */
.tool-list a { color: var(--ink); text-decoration-color: var(--pei); text-decoration-thickness: 2px; }
.tool-list a:hover { color: var(--teal); }

.tool-page { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3.5rem, 8vw, 6rem); }

.crumbs { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 1.25rem; }

.tool-head { max-width: 42rem; margin-bottom: 2.5rem; }
.tool-head h1 {
    font-size: clamp(2.25rem, 6vw, 3.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    transform: skewX(var(--skew));
    transform-origin: bottom left;
    margin-bottom: 1rem;
}
.tool-head p { color: var(--ink-soft); font-size: 1.1rem; margin: 0; }

.tool-layout { display: grid; gap: 2rem; align-items: start; }

@media (min-width: 900px) {
    .tool-layout { grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 1fr); gap: 3rem; }
    .tool-result { position: sticky; top: 5.5rem; }
}

.tool-form { min-width: 0; }
.tool-form fieldset {
    min-width: 0;
    border-top: 1px solid var(--rule);
    padding: 1.25rem 0 1.75rem;
    margin: 0;
}
.tool-form legend {
    float: none;
    width: auto;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding: 0;
}
.optional { font-family: var(--font-body); font-size: 0.85rem; font-weight: 400; color: var(--ink-soft); margin-left: 0.4rem; }

.field-row { display: grid; gap: 0 1.25rem; }
.field-row > * { min-width: 0; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

.field { display: block; margin-bottom: 1rem; }
.field-narrow { max-width: 14rem; }
.field-label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.35rem; }

.input-affix, .tool-form select {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: var(--paper);
    border: 1px solid #AEB9C3;
    border-radius: 6px;
    min-height: 2.75rem;
}
.input-affix:focus-within, .tool-form select:focus-visible { outline: 3px solid var(--pei); outline-offset: 1px; }
.input-affix input {
    flex: 1 1 3rem;
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0.5rem 0.75rem;
    font: inherit;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}
.input-affix input:focus { outline: none; }
.affix { display: flex; align-items: center; padding-inline: 0.7rem; color: var(--ink-soft); background: var(--bed); font-size: 0.92rem; white-space: nowrap; }
.affix:first-child { border-radius: 5px 0 0 5px; border-right: 1px solid var(--rule); }
.affix:last-child { border-radius: 0 5px 5px 0; border-left: 1px solid var(--rule); }
.input-affix input + .affix:not(:last-child) { border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.tool-form select { padding: 0.5rem 0.75rem; font: inherit; color: var(--ink); }

.field-hint { font-size: 0.9rem; color: var(--ink-soft); margin: -0.25rem 0 0; }
.field-hint.warn { color: #9A5B00; }

.segmented {
    display: inline-flex;
    background: var(--bed);
    border: 1px solid #AEB9C3;
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 1.25rem;
}
.segmented label { position: relative; padding: 0.4rem 1rem; border-radius: 6px; font-weight: 600; font-size: 0.95rem; color: var(--ink-soft); cursor: pointer; }
.segmented label.on { background: var(--ink); color: var(--paper); }
.segmented input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmented label:has(input:focus-visible) { outline: 3px solid var(--pei); outline-offset: 1px; }

.tool-result {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-top: 4px solid var(--pei);
    border-radius: 0 0 8px 8px;
    padding: 1.5rem;
}
.tool-result h2 { font-size: 1.1rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 0.25rem; }
.result-total {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(3rem, 8vw, 4.25rem);
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin: 0 0 1.25rem;
}
.breakdown { margin: 0 0 1.25rem; }
.breakdown div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-top: 1px solid var(--rule); }
.breakdown dt { font-weight: 600; }
.breakdown dt span { display: block; font-weight: 400; font-size: 0.85rem; color: var(--ink-soft); }
.breakdown dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.result-note { font-size: 0.92rem; color: var(--ink-soft); margin: 0; }

.mobile-total {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 1.5rem -1.25rem 0;
    padding: 0.8rem 1.25rem;
    background: var(--ink);
    color: var(--paper);
    border-top: 4px solid var(--pei);
}
.mobile-total strong { font-family: var(--font-display); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .mobile-total { display: none; } }

/* ----- QR code generator ----- */
.tool-form textarea {
    display: block;
    width: 100%;
    background: var(--paper);
    border: 1px solid #AEB9C3;
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    font: inherit;
    color: var(--ink);
    resize: vertical;
}
.tool-form textarea:focus-visible { outline: 3px solid var(--pei); outline-offset: 1px; }

.ecc-hint { margin: -0.5rem 0 1.25rem; }

@media (min-width: 560px) { .field-row-3 { grid-template-columns: repeat(3, 1fr); } }

.colour-pair { display: flex; gap: 1.25rem; }
.colour-pair input[type=color] {
    width: 3.25rem;
    height: 2.75rem;
    padding: 3px;
    background: var(--paper);
    border: 1px solid #AEB9C3;
    border-radius: 6px;
    cursor: pointer;
}

.qr-preview {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 0.75rem;
    margin: 0.75rem 0 0.5rem;
}
.qr-preview svg { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.qr-meta { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 1.25rem; }

.download-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 1.25rem; }
.download-row button { font: inherit; border: 0; cursor: pointer; }
.download-row .btn-ink { font-weight: 650; }

.btn-line {
    background: transparent;
    color: var(--ink);
    font-weight: 650;
    padding: 0.75rem 1.1rem;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1.5px var(--ink);
}
.btn-line:hover { background: var(--bed); }

.png-size { margin-bottom: 0; }
.png-size select {
    width: 100%;
    background: var(--paper);
    border: 1px solid #AEB9C3;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font: inherit;
    color: var(--ink);
}

.qr-empty {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    margin-top: 0.75rem;
    border: 2px dashed var(--rule);
    border-radius: 4px;
    padding: 1.5rem;
    text-align: center;
    color: var(--ink-soft);
}
.qr-empty p { margin: 0; max-width: 16rem; }

/* ----- STL viewer ----- */
.viewer-layout { display: grid; gap: 2rem; align-items: start; }
.viewer-layout > * { min-width: 0; }
@media (min-width: 900px) {
    .viewer-layout { grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr); gap: 2.5rem; }
    .viewer-panel { position: sticky; top: 5.5rem; }
}

.viewer-stage {
    position: relative;
    aspect-ratio: 1;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 8px;
    overflow: hidden;
}
@media (min-width: 600px) { .viewer-stage { aspect-ratio: 4 / 3; } }
.viewer-stage.is-dragging { outline: 3px dashed var(--pei); outline-offset: -8px; }

.viewer-canvas, .viewer-canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.viewer-canvas canvas { touch-action: none; cursor: grab; }
.viewer-canvas canvas:active { cursor: grabbing; }

.viewer-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 1.5rem;
    text-align: center;
    color: var(--ink-soft);
    background: color-mix(in srgb, var(--paper) 70%, transparent);
}
.viewer-empty p { margin: 0 0 0.75rem; }
.viewer-empty-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--ink); }
.viewer-empty label.btn-ink { cursor: pointer; }

.viewer-hint {
    position: absolute;
    left: 0.75rem;
    bottom: 0.6rem;
    right: 0.75rem;
    margin: 0;
    font-size: 0.82rem;
    color: var(--ink-soft);
    pointer-events: none;
}

.viewer-error { color: #9A3B1C; font-size: 0.92rem; }

.viewer-file {
    font-family: var(--font-display);
    font-size: 1.3rem !important;
    color: var(--ink) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 1rem !important;
}

.viewer-controls { margin-bottom: 1.25rem; }
.swatches { display: flex; gap: 0.5rem; margin-bottom: 0.9rem; }
.swatch-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--paper);
    background: var(--c);
    box-shadow: 0 0 0 1px #AEB9C3;
    cursor: pointer;
}
.swatch-btn.on { box-shadow: 0 0 0 2px var(--ink); }

.check { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.95rem; cursor: pointer; }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--ink); }

.viewer-panel .download-row label.btn-ink { cursor: pointer; }

/* ----- Generators ----- */
.preview-3d {
    position: relative;
    aspect-ratio: 1;
    margin: 0.75rem 0 0.5rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 4px;
    overflow: hidden;
}
.preview-3d .viewer-hint { font-size: 0.78rem; }

.check-list { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0.25rem 0 1rem; }
.field-row-spaced { margin-top: 1rem; }
.field-hint.tight { margin: 0 0 1rem; }

.temp-table { width: 100%; max-width: 22rem; border-collapse: collapse; margin-bottom: 1.25rem; font-variant-numeric: tabular-nums; }
.temp-table th { text-align: left; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); padding: 0 0 0.4rem; }
.temp-table td { padding: 0.35rem 0; border-top: 1px solid var(--rule); }
.temp-table td:last-child, .temp-table th:last-child { text-align: right; }

.tool-form textarea.code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.85rem;
    white-space: pre;
    overflow-x: auto;
    background: var(--bed);
}

.tool-form .download-row { margin-top: 0.75rem; }

/* ----- Print time estimator ----- */
.pt-stage { margin-bottom: 0.75rem; }
.pt-file { margin: 0 0 0.5rem; }
.pt-range { color: var(--ink-soft); font-size: 0.95rem; margin: -0.5rem 0 1.25rem; }
.dd-sub { display: block; font-weight: 400; font-size: 0.85rem; color: var(--ink-soft); text-align: right; }
.link-button { color: var(--teal); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; margin-left: 0.25rem; }
.link-button:hover { color: var(--ink); }
a.btn-line { display: inline-block; text-decoration: none; }

/* ----- Material reference ----- */
.mat-filter { margin-bottom: 2rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0 0.6rem; }
.chip {
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid #AEB9C3;
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    cursor: pointer;
}
.chip:hover { border-color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip-clear { background: transparent; border-color: transparent; color: var(--teal); text-decoration: underline; text-underline-offset: 0.2em; }
.chip-clear:hover { border-color: transparent; color: var(--ink); }
.mat-matches { margin: 0; min-height: 1.5em; }

.dim { opacity: 0.32; }
.chart-row, .mat { transition: opacity 0.15s ease; }
@media (prefers-reduced-motion: reduce) { .chart-row, .mat { transition: none; } }

.temp-chart {
    --name-col: 8.5rem;
    --end-gap: 4rem;
    margin: 0 0 3.5rem;
    padding: 1.25rem 1.25rem 1rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 8px;
}
.temp-chart figcaption { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; align-items: center; font-size: 0.9rem; margin-bottom: 1rem; }
.legend { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.legend-note { color: var(--ink-soft); }
.key { width: 1.1rem; height: 0.6rem; border-radius: 2px; display: inline-block; }
.key-nozzle, .bar-nozzle { background: var(--pei); }
.key-bed, .bar-bed { background: var(--teal); }

.chart-axis {
    position: relative;
    height: 1.2rem;
    margin: 0 var(--end-gap) 0.25rem var(--name-col);
    font-size: 0.78rem;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}
.chart-axis span { position: absolute; transform: translateX(-50%); }

.chart-row {
    display: grid;
    grid-template-columns: var(--name-col) 1fr;
    align-items: center;
    min-height: 2.4rem;
    color: var(--ink);
    text-decoration: none;
    border-top: 1px solid var(--rule);
}
.chart-row:hover { background: var(--bed); color: var(--ink); }
.chart-name { font-weight: 650; padding-right: 0.75rem; }
.chart-track { position: relative; height: 1.6rem; margin-right: var(--end-gap); }
.gridline { position: absolute; top: -0.4rem; bottom: -0.4rem; width: 1px; background: var(--rule); }
.bar { position: absolute; height: 0.55rem; border-radius: 2px; }
.bar-nozzle { top: 0.15rem; }
.bar-bed { top: 0.9rem; }
.bar-label-bed { top: 0.7rem !important; }
.bar-label { position: absolute; top: -0.05rem; margin-left: 0.4rem; font-size: 0.78rem; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
    .temp-chart { --name-col: 5.5rem; --end-gap: 3.2rem; padding-inline: 0.75rem; }
    .chart-axis .minor, .bar-label-bed { display: none; }
    .chart-name { font-size: 0.88rem; }
}

.mat-list { display: grid; gap: 0; }
.mat {
    display: grid;
    gap: 1.25rem 3rem;
    padding: 2rem 0 2.25rem;
    border-top: 1px solid var(--rule);
    scroll-margin-top: 5rem;
}
.mat-head h2 { font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 750; margin-bottom: 0.35rem; }
.mat-head p { color: var(--ink-soft); margin: 0; max-width: 36rem; }

.mat-specs { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.mat-specs div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: 0.45rem 0; border-top: 1px solid var(--rule); }
.mat-specs div:first-child { border-top: 0; }
.mat-specs dt { font-weight: 600; font-size: 0.92rem; }
.mat-specs dd { margin: 0; font-size: 0.95rem; }

.mat-notes { display: grid; gap: 1rem; align-content: start; }
.mat-notes h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.2rem; }
.mat-notes p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }

@media (min-width: 900px) {
    .mat { grid-template-columns: 1.1fr 1fr; }
    .mat-head { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .mat-specs div { grid-template-columns: 7.5rem 1fr; gap: 0.75rem; }
}

/* ----- Corner protector ----- */
.segmented-small { margin: 0.5rem 0 0; }
.segmented-small label { padding: 0.3rem 0.8rem; font-size: 0.88rem; }

/* ----- Multi-section tool pages (unit converter, tolerance guide) ----- */
.jump-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: -1.25rem 0 2rem; font-size: 0.95rem; }
.tool-section { scroll-margin-top: 5.5rem; }
.tool-section + .tool-section, .tool-layout + .tool-section { margin-top: clamp(3rem, 7vw, 4.5rem); }
.section-title { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 750; margin-bottom: 1rem; }
.section-lede { color: var(--ink-soft); max-width: 42rem; margin-bottom: 1.25rem; }
.scale-picker { min-width: 0; }

/* ----- Filament length and weight ----- */
.tool-result .temp-table { max-width: none; }

/* ----- Tolerance and clearance guide ----- */
.fit-options { display: grid; gap: 0.5rem; }
@media (min-width: 560px) { .fit-options { grid-template-columns: 1fr 1fr; } }
.fit-option {
    position: relative;
    display: block;
    padding: 0.65rem 0.85rem;
    background: var(--paper);
    border: 1px solid #AEB9C3;
    border-radius: 6px;
    cursor: pointer;
}
.fit-option:hover { border-color: var(--ink); }
.fit-option.on { border-color: var(--ink); box-shadow: inset 4px 0 0 var(--pei); }
.fit-option input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.fit-option:has(input:focus-visible) { outline: 3px solid var(--pei); outline-offset: 1px; }
.fit-name { display: block; font-weight: 650; }
.fit-feel { display: block; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.4; }

.table-scroll { overflow-x: auto; }
.ref-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.ref-table th, .ref-table td { text-align: left; vertical-align: top; padding: 0.55rem 1rem 0.55rem 0; border-top: 1px solid var(--rule); }
.ref-table thead th { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); border-top: 0; padding-top: 0; }
.ref-table tbody th { font-weight: 650; white-space: nowrap; }
.ref-table td { color: var(--ink-soft); }
.ref-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }
.ref-table th:last-child, .ref-table td:last-child { padding-right: 0; }
.ref-table tr.current th { box-shadow: inset 4px 0 0 var(--pei); padding-left: 0.6rem; }
.tips-grid { grid-template-columns: 1fr; gap: 1.5rem 2.5rem; }
@media (min-width: 720px) { .tips-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559px) { .ref-table .hide-narrow { display: none; } .ref-table { font-size: 0.9rem; } }

/* ----- Lithophane maker ----- */
.litho-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 10rem;
    margin-bottom: 0.75rem;
    padding: 1.25rem;
    text-align: center;
    color: var(--ink-soft);
    background: var(--paper);
    border: 2px dashed var(--rule);
    border-radius: 8px;
}
.litho-drop p { margin: 0 0 0.5rem; }
.litho-drop p:last-child { margin-bottom: 0; }
.litho-drop label { cursor: pointer; }
.litho-drop.is-dragging { border-color: var(--pei); background: color-mix(in srgb, var(--pei) 8%, var(--paper)); }
.litho-file { display: flex; flex-direction: column; max-width: 100%; }
.litho-file strong { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.litho-file span { font-size: 0.9rem; }
.litho-lit {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    margin: 0.75rem 0 0.5rem;
    padding: 0.75rem;
    background: #10161C;
    border-radius: 4px;
}
.litho-detail { display: block; margin-top: 1.25rem; }
.litho-lit canvas { max-width: 100%; max-height: 100%; box-shadow: 0 0 2.5rem rgba(255, 214, 150, 0.25); }

/* ----- Troubleshooting ----- */
.ts-hero { max-width: 42rem; margin-bottom: clamp(2.5rem, 6vw, 3.5rem); }
.ts-search { margin: 0 0 1.5rem; }
.ts-search .field-label { font-size: 1rem; }
.ts-combo { position: relative; }
.ts-input {
    display: flex;
    align-items: center;
    background: var(--paper);
    border: 1px solid #AEB9C3;
    border-radius: 8px;
    min-height: 3.25rem;
    padding-left: 0.85rem;
}
.ts-input:focus-within { outline: 3px solid var(--pei); outline-offset: 1px; }
.ts-icon { width: 1.15rem; height: 1.15rem; flex: none; fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; }
.ts-input input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0.6rem 0.75rem;
    font: inherit;
    font-size: 1.05rem;
    color: var(--ink);
}
.ts-input input:focus { outline: none; }
.ts-input input::-webkit-search-cancel-button { cursor: pointer; }
.ts-go {
    align-self: stretch;
    margin: 4px;
    padding: 0 1.1rem;
    border: 0;
    border-radius: 5px;
    background: var(--ink);
    color: var(--paper);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}
.ts-go:hover { background: var(--teal); }
.ts-list {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-top: 4px solid var(--pei);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 12px 28px rgb(24 34 45 / 0.14);
    max-height: min(26rem, 60vh);
    overflow-y: auto;
}
.ts-option a {
    display: block;
    padding: 0.55rem 0.7rem;
    border-radius: 5px;
    color: var(--ink);
    text-decoration: none;
}
.ts-option a:hover, .ts-option.active a { background: var(--bed); }
.ts-option.active a { box-shadow: inset 3px 0 0 var(--pei); }
.ts-option-title { display: block; font-weight: 600; line-height: 1.35; }
.ts-option-title mark { background: none; color: inherit; font-weight: 800; padding: 0; text-decoration: underline; text-decoration-color: var(--pei); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.ts-option-meta { display: block; font-size: 0.85rem; color: var(--ink-soft); }
.ts-none { margin: 0.6rem 0 0; font-size: 0.92rem; color: var(--ink-soft); }
.ts-common .chips { list-style: none; padding: 0; }
a.chip { display: inline-block; text-decoration: none; }
.ts-results { margin-bottom: clamp(3rem, 7vw, 4.5rem); max-width: 42rem; }
.ts-browse .section-title { margin-bottom: 1.5rem; }
.ts-browse .tool-group { scroll-margin-top: 5.5rem; }

/* Issue page */
.ts-layout { grid-template-columns: minmax(0, 1fr); }
.ts-layout > * { min-width: 0; }
@media (min-width: 900px) { .ts-layout { grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 1fr); } }
.ts-causes-title { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 750; margin-bottom: 0.35rem; }
.ts-causes { list-style: none; margin: 0; padding: 0; counter-reset: cause; }
.ts-cause {
    counter-increment: cause;
    position: relative;
    padding: 1.4rem 0 1.6rem 3.5rem;
    border-top: 1px solid var(--rule);
}
.ts-cause::before {
    content: counter(cause);
    position: absolute;
    left: 0;
    top: 1.3rem;
    width: 2.3rem;
    height: 2.3rem;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    transform: skewX(var(--skew));
}
.ts-cause:first-child::before { background: var(--swatch, var(--pei)); }
.ts-cause h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.35rem; }
.ts-detail { color: var(--ink-soft); margin: 0 0 0.6rem; max-width: 40rem; }
.ts-fixes { margin: 0 0 0.25rem; padding-left: 1.15rem; max-width: 40rem; }
.ts-fixes li { margin-bottom: 0.35rem; }
.ts-fixes li::marker { color: var(--pei); }
.ts-tool { margin-top: 0.75rem; padding: 0.55rem 0.95rem; font-size: 0.95rem; }
.ts-aside h2 { color: var(--ink); font-size: 1.3rem; }
.ts-aside .result-note { margin-bottom: 0.75rem; }
.ts-related { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.ts-related li { padding: 0.5rem 0; border-top: 1px solid var(--rule); }
.ts-related a { color: var(--ink); font-weight: 600; text-decoration-color: var(--pei); text-decoration-thickness: 2px; }
.ts-related a:hover { color: var(--teal); }
.ts-search-compact { margin: 0; }
.ts-search-compact .field-label { font-size: 0.95rem; }
.ts-search-compact .ts-input { min-height: 2.75rem; }
.ts-search-compact .ts-input input { font-size: 0.98rem; padding-inline: 0.5rem; }
.ts-search-compact .ts-go { padding: 0 0.8rem; font-size: 0.92rem; }
@media (max-width: 480px) {
    .ts-cause { padding-left: 2.9rem; }
    .ts-cause::before { width: 2rem; height: 2rem; font-size: 1rem; }
}

/* Home page band */
.ts-band { padding-block: clamp(2.5rem, 6vw, 4rem); background: var(--paper); border-block: 1px solid var(--rule); }
.ts-band-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 2rem; }
.ts-band .section-head { margin-bottom: 1rem; }
.ts-band .hero-actions { margin: 0 0 1rem; }

/* ----- Troubleshooting: other names for a problem ----- */
.tool-head .ts-aliases { margin-top: 0.85rem; font-size: 0.95rem; line-height: 1.5; }
.ts-aliases-label { font-weight: 600; color: var(--ink); margin-right: 0.1rem; }
.ts-aliases-label::after { content: ":"; }

/* ----- Common problems at the foot of a tool page ----- */
.tool-issues { padding-block: 0 clamp(3.5rem, 8vw, 5rem); }
.tool-page + .tool-issues { margin-top: calc(-1 * clamp(1.5rem, 4vw, 3rem)); }
.tool-issues h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); font-weight: 750; margin-bottom: 0.35rem; }
.tool-issues-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0 2rem;
    max-width: 56rem;
}
@media (min-width: 700px) { .tool-issues-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tool-issues-list li { padding: 0.55rem 0; border-top: 1px solid var(--rule); }
.tool-issues-list a { color: var(--ink); font-weight: 600; text-decoration-color: var(--pei); text-decoration-thickness: 2px; }
.tool-issues-list a:hover { color: var(--teal-text); }
.tool-issues-more { margin: 0; font-size: 0.95rem; }

/* ----- Tools page ----- */
.tools-help { max-width: 42rem; margin-top: clamp(2.5rem, 6vw, 4rem); }
.tools-help h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); font-weight: 750; margin-bottom: 0.35rem; }
.tools-help p { color: var(--ink-soft); margin: 0; }