@charset "utf-8";
/* ==========================================================================
   Custom Heating & Air Conditioning — guided troubleshooter.

   Loaded only by /support/furnace-heat-pump-air-conditioning-troubleshooting/
   (see pages_support.py, ts_hub). Builds on style.css: same tokens, buttons,
   eyebrow, alert and field styles. Everything here is prefixed ts-.

   The #ts box renders server-side as its first screen, then troubleshoot.js
   takes it over with the same classes, so the page does not jump on load.
   Without JavaScript the tiles are links into the written-out reference
   (.ts-ref), which carries every check as plain HTML.
   ========================================================================== */

/* ------------------------------------------------------------ section ---- */
.ts-sec { padding-top: clamp(2.5rem, 5vw, 4.25rem); }
.ts-intro { display: grid; gap: .9rem 3rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.ts-intro h2 { margin: 0; text-wrap: balance; }
.ts-intro .eyebrow { margin-bottom: .7rem; }
.ts-intro p { margin: 0; font-size: 1.06rem; max-width: 62ch; }
@media (min-width: 940px) {
  .ts-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: end; }
}

/* Tones: heating red, cooling blue, both for heat pumps, ink for controls. */
.ts-tone--heat    { background: var(--brand); color: #fff; box-shadow: 0 4px 12px rgba(237,28,36,.26); }
.ts-tone--cool    { background: var(--cool); color: #fff; box-shadow: 0 4px 12px rgba(15,111,190,.26); }
.ts-tone--dual    { background: linear-gradient(135deg, var(--brand) 0 50%, var(--cool) 50% 100%); color: #fff;
                    box-shadow: 0 4px 12px rgba(20,24,31,.18); }
.ts-tone--ink     { background: var(--ink); color: #fff; box-shadow: 0 4px 12px rgba(20,24,31,.22); }
.ts-tone--neutral { background: var(--ink-2); color: #fff; }
.ts-tone--danger  { background: var(--brand); color: #fff; }

/* ----------------------------------------------------------- the frame --- */
.ts {
  position: relative; background: #fff; border: 1px solid #dfe4ea; border-radius: var(--r-xl);
  box-shadow: var(--sh-3); overflow: hidden; scroll-margin-top: calc(var(--hdr-h) + 16px);
}
.ts svg { flex: none; }

.ts__bar {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .7rem 1rem; padding: .85rem clamp(1rem, 3vw, 1.6rem) 1.05rem;
  background: var(--ink) radial-gradient(520px 150px at 0% 0%, rgba(237,28,36,.30), transparent 70%);
  color: #c3cad4;
}
.ts__brand { display: flex; align-items: center; gap: .75rem; min-width: 0; flex: 1 1 18rem; }
.ts__mark {
  width: 38px; height: 38px; border-radius: 11px; background: var(--brand); color: #fff; flex: none;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(237,28,36,.4);
}
.ts__mark svg { width: 21px; height: 21px; }
.ts__title { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 1.02rem; letter-spacing: -.01em; }

.ts__crumbs { min-width: 0; }
.ts__crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .35rem; margin: 0; padding: 0; }
.ts__crumbs li { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-size: .9rem; line-height: 1.3; color: #98a1ad; min-width: 0; }
.ts__crumbs li + li::before {
  content: ""; width: 7px; height: 7px; border-top: 2px solid #5b6472; border-right: 2px solid #5b6472;
  transform: rotate(45deg); margin-right: .25rem; flex: none;
}
.ts__crumbs li > span { overflow-wrap: anywhere; }
.ts__crumbs [aria-current] > span { color: #fff; font-family: var(--font-display); font-weight: 800; }
.ts__crumb {
  background: none; border: 0; padding: .35rem .15rem; margin: -.35rem -.15rem; cursor: pointer;
  color: #dfe4ea; font-family: var(--font-display); font-weight: 700; font-size: inherit; text-align: left;
  text-decoration: underline; text-decoration-color: rgba(255,255,255,.28); text-underline-offset: .2em;
  border-radius: 4px;
}
.ts__crumb:hover { color: #fff; text-decoration-color: currentColor; }
.ts__bar :focus-visible { outline-color: #fff; }

.ts__tools { display: flex; gap: .5rem; flex: none; }
.ts__tool {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 42px; padding: .45rem .85rem;
  border-radius: var(--r); border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06);
  color: #fff; font-family: var(--font-display); font-weight: 800; font-size: .88rem; cursor: pointer;
  transition: background var(--t), border-color var(--t), opacity var(--t);
}
.ts__tool svg { width: 17px; height: 17px; }
.ts__tool:hover:not(:disabled) { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); }
.ts__tool:disabled { opacity: .38; cursor: default; }

.ts__prog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.09); }
.ts__prog span {
  display: block; height: 100%; width: 4%; border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, var(--brand), #ff5a60); transition: width .55s cubic-bezier(.2,.8,.2,1);
}

.ts__body { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 940px) { .ts__body { grid-template-columns: minmax(0, 1fr) 312px; } }
.ts__main { padding: clamp(1.35rem, 4vw, 2.75rem); min-width: 0; transition: background var(--t); }
.ts__main.is-safety { background: linear-gradient(180deg, #fff3f3 0, #fff 340px); }
.ts__side {
  display: grid; gap: 1rem; align-content: start; min-width: 0;
  padding: clamp(1.1rem, 3vw, 1.5rem); background: var(--bg-soft); border-top: 1px solid var(--line);
}
@media (min-width: 940px) { .ts__side { border-top: 0; border-left: 1px solid var(--line); } }

/* --------------------------------------------------------- screen head --- */
@keyframes ts-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ts-screen--in { animation: ts-in .38s cubic-bezier(.2,.8,.2,1) both; }
.ts-h { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.05rem); margin-bottom: .45em; text-wrap: balance; }
.ts-h:focus { outline: none; }
.ts-lede { font-size: 1.06rem; color: var(--body); max-width: 60ch; margin-bottom: 0; }
.ts .eyebrow { margin-bottom: .7rem; }

/* ------------------------------------------------------- system tiles --- */
.ts-tiles {
  display: grid; gap: .85rem; margin-top: 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 196px), 1fr));
}
.ts-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
  width: 100%; min-height: 100%; padding: 1.15rem 1.15rem 1.2rem; text-align: left; cursor: pointer;
  font: inherit; color: inherit; text-decoration: none; background: #fff;
  border: 1.5px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.ts-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--brand-line); color: inherit; }
.ts-tile__ico {
  width: 50px; height: 50px; border-radius: 14px; margin-bottom: .8rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.ts-tile__ico svg { width: 26px; height: 26px; }
.ts-tile__name { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; color: var(--ink); line-height: 1.2; padding-right: 2rem; }
.ts-tile__sub { font-size: .9rem; color: var(--muted); line-height: 1.45; }
.ts-tile__go {
  position: absolute; top: 1.15rem; right: 1.05rem; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: var(--bg-soft); color: var(--ink);
  transition: background var(--t), color var(--t), transform var(--t);
}
.ts-tile__go svg { width: 16px; height: 16px; }
.ts-tile:hover .ts-tile__go { background: var(--brand); color: #fff; transform: translateX(3px); }

/* A slim safety line on the first screen. On a wide screen the sidebar carries
   the same thing, so this only shows where the sidebar sits below the fold. */
.ts-safebar {
  display: flex; gap: .7rem; align-items: flex-start; margin-top: 1.2rem; padding: .8rem 1rem;
  border: 1px solid var(--brand-line); background: var(--brand-soft); border-radius: var(--r);
  color: var(--brand-800); font-size: .93rem; line-height: 1.5;
}
.ts-safebar svg { width: 20px; height: 20px; color: var(--brand); margin-top: .1rem; }
.ts-safebar p { margin: 0; }
.ts-safebar b { color: var(--brand-800); }
@media (min-width: 940px) { .ts-safebar { display: none; } }
.ts-inline {
  background: none; border: 0; padding: .3rem 0; margin: -.3rem 0; font: inherit; font-weight: 700; cursor: pointer;
  color: var(--brand-700); text-decoration: underline; text-underline-offset: .18em;
}
.ts-inline:hover { color: var(--brand-800); }

/* ------------------------------------------------------ symptom options --- */
.ts-group { margin-top: 1.6rem; }
.ts-group__h {
  display: flex; align-items: center; gap: .45rem; margin: 0 0 .65rem;
  font-family: var(--font-display); font-weight: 800; font-size: .76rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.ts-group__h svg { width: 16px; height: 16px; }
.ts-group--safe { padding-top: 1.4rem; border-top: 1px dashed var(--line-2); }
.ts-group--safe .ts-group__h { color: var(--brand-700); }
.ts-opts { display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ts-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ts-opt {
  display: flex; align-items: center; gap: .85rem; width: 100%; min-height: 64px; padding: .75rem .9rem;
  text-align: left; cursor: pointer; font: inherit; color: inherit; background: #fff;
  border: 1.5px solid var(--line); border-radius: var(--r);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t), background var(--t);
}
.ts-opt:hover { border-color: var(--line-2); box-shadow: var(--sh-1); transform: translateY(-1px); }
.ts-opt__ico {
  width: 40px; height: 40px; border-radius: 11px; flex: none; box-shadow: none !important;
  display: inline-flex; align-items: center; justify-content: center;
}
.ts-opt__ico svg { width: 21px; height: 21px; }
/* Soft versions of the tones for the smaller symptom icons. */
.ts-opt__ico.ts-tone--heat    { background: var(--brand-soft); color: var(--brand-600); }
.ts-opt__ico.ts-tone--cool    { background: var(--cool-soft); color: var(--cool-600); }
.ts-opt__ico.ts-tone--neutral { background: var(--bg-soft); color: var(--ink-2); }
.ts-opt__txt { flex: 1; min-width: 0; }
.ts-opt__txt b { display: block; font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: 1rem; line-height: 1.25; }
.ts-opt__txt span { display: block; margin-top: .15rem; font-size: .86rem; line-height: 1.4; color: var(--muted); }
.ts-opt__go { color: var(--line-2); transition: color var(--t), transform var(--t); display: inline-flex; }
.ts-opt__go svg { width: 18px; height: 18px; }
.ts-opt:hover .ts-opt__go { color: var(--brand); transform: translateX(2px); }
.ts-opt--danger { border-color: var(--brand-line); background: #fff8f8; }
.ts-opt--danger:hover { border-color: var(--brand); background: var(--brand-soft); }
.ts-opt--danger .ts-opt__txt b { color: var(--brand-800); }

/* ---------------------------------------------------------------- steps --- */
.ts-step__top { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
.ts-step__num {
  width: 48px; height: 48px; border-radius: 50%; flex: none; display: inline-flex; align-items: center;
  justify-content: center; background: var(--brand); color: #fff; box-shadow: var(--sh-red);
  font-family: var(--font-display); font-weight: 900; font-size: 1.25rem;
}
.ts-step__meta { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.ts-step__count {
  font-family: var(--font-display); font-weight: 800; font-size: .76rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand-600);
}
.ts-dots { display: flex; flex-wrap: wrap; gap: 4px; }
.ts-dots i { width: 22px; height: 5px; border-radius: 3px; background: var(--line); transition: background var(--t); }
.ts-dots i.is-done { background: var(--brand-line); }
.ts-dots i.is-cur { background: var(--brand); }
.ts-step__body { font-size: 1.08rem; line-height: 1.7; color: var(--ink-2); max-width: 62ch; }
.ts-step__body b { color: var(--ink); }

.ts-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.7rem; }
.ts .btn { white-space: normal; text-align: center; }
.ts-btn--ok { --btn-bg: var(--ok); --btn-bd: var(--ok); }
.ts-btn--ok:hover { --btn-bg: #0f6b3d; --btn-bd: #0f6b3d; box-shadow: 0 6px 18px rgba(20,128,74,.28); }
@media (max-width: 559px) { .ts-actions > .btn { flex: 1 1 100%; } }
.ts-actions--quiet { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }

.ts-more { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: 1.1rem; }
.ts-flag, .ts-skip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 0; background: none; border: 0;
  cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: .93rem; text-align: left;
  text-decoration: underline; text-underline-offset: .2em; text-decoration-color: transparent;
  transition: text-decoration-color var(--t), color var(--t);
}
.ts-flag svg, .ts-skip svg { width: 17px; height: 17px; }
.ts-flag { color: var(--brand-700); }
.ts-skip { color: var(--muted); }
.ts-flag:hover, .ts-skip:hover { text-decoration-color: currentColor; }
.ts-skip:hover { color: var(--ink-2); }

/* Answers to a question. */
.ts-choices { display: grid; gap: .6rem; margin-top: 1.6rem; max-width: 560px; }
.ts-choice {
  display: flex; align-items: center; gap: .85rem; width: 100%; min-height: 56px; padding: .8rem 1rem;
  text-align: left; cursor: pointer; font: inherit; font-family: var(--font-display); font-weight: 700;
  font-size: 1.02rem; color: var(--ink); background: #fff; border: 1.5px solid var(--line-2);
  border-radius: var(--r); transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.ts-choice > svg { width: 18px; height: 18px; color: var(--muted); margin-left: auto; transition: transform var(--t), color var(--t); }
.ts-choice__l { min-width: 0; flex: 1; }
.ts-choice__mark {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); flex: none;
  display: inline-flex; align-items: center; justify-content: center; transition: border-color var(--t), box-shadow var(--t);
}
.ts-choice:hover { border-color: var(--brand); background: var(--brand-soft); }
.ts-choice:hover .ts-choice__mark { border-color: var(--brand); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 11px var(--brand); }
.ts-choice:hover > svg { color: var(--brand); transform: translateX(3px); }
.ts-choice--danger { color: var(--brand-800); border-color: var(--brand-line); }
.ts-choice--danger .ts-choice__mark { border: 0; color: var(--brand); }
.ts-choice--danger .ts-choice__mark svg { width: 20px; height: 20px; }
.ts-choice--danger:hover .ts-choice__mark { box-shadow: none; }

.ts-field { max-width: 420px; margin-top: 1.4rem; }

.ts-next {
  display: flex; align-items: flex-start; gap: .55rem; margin: 2rem 0 0; padding-top: 1.1rem;
  border-top: 1px solid var(--line); font-size: .92rem; color: var(--muted); max-width: 62ch;
}
.ts-next svg { width: 17px; height: 17px; color: var(--line-2); margin-top: .2rem; }
.ts-next b { color: var(--ink-2); font-family: var(--font-display); }
.ts-field label span { color: var(--muted); font-weight: 600; }

/* -------------------------------------------------------------- endings --- */
.ts-end__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.ts-end__head .eyebrow { margin: 0; }
.ts-end__head .eyebrow::before { display: none; }
.ts-end__badge {
  width: 58px; height: 58px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
}
.ts-end__badge svg { width: 28px; height: 28px; }
@media (max-width: 559px) {
  .ts-end__badge { width: 46px; height: 46px; }
  .ts-end__badge svg { width: 23px; height: 23px; }
}
.ts-end--ok .ts-end__badge { background: var(--ok-soft); color: var(--ok); box-shadow: 0 0 0 8px rgba(20,128,74,.07); }
.ts-end--ok .eyebrow { color: var(--ok); }
.ts-end--ok .eyebrow::before { background: var(--ok); }
.ts-end--call .ts-end__badge { background: var(--brand); color: #fff; box-shadow: 0 0 0 8px rgba(237,28,36,.1), var(--sh-red); }
.ts-end--safety .ts-end__badge { background: var(--brand); color: #fff; box-shadow: 0 0 0 8px rgba(237,28,36,.12); }
@keyframes ts-ring { 0% { box-shadow: 0 0 0 0 rgba(237,28,36,.45); } 100% { box-shadow: 0 0 0 18px rgba(237,28,36,0); } }
.ts-end--safety .ts-end__badge { animation: ts-ring 1.8s ease-out 3; }
.ts-end--safety .eyebrow { color: var(--brand-700); }
.ts-end--safety .ts-h { color: var(--brand-800); font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); }
.ts-end__small { font-size: .95rem; color: var(--muted); margin: 1.2rem 0 0; }

.ts-tip {
  display: flex; gap: .85rem; align-items: flex-start; margin-top: 1.3rem; padding: 1.05rem 1.2rem; max-width: 640px;
  background: var(--ok-soft); border: 1px solid #b8e0c8; border-radius: var(--r-lg); color: #0d5c34;
}
.ts-tip svg { width: 22px; height: 22px; color: var(--ok); margin-top: .1rem; }
.ts-tip b { display: block; color: #0d5c34; font-family: var(--font-display); }
.ts-tip p { margin: .2rem 0 0; color: #1d4d33; }

.ts-note { margin: 1.3rem 0 0; max-width: 680px; }
.ts-note p { margin: .15rem 0 0; }
.ts-note b + p b { display: inline; }

.ts-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.ts-call { font-size: clamp(1.1rem, 1rem + .7vw, 1.35rem); padding: 1.05rem 1.7rem; }
.ts-call svg { width: 24px; height: 24px; }
@media (max-width: 559px) { .ts-cta > .btn, .ts-safe__after .btn { flex: 1 1 100%; width: 100%; } }
.ts-hours { display: flex; align-items: flex-start; gap: .5rem; margin: .9rem 0 0; font-size: .9rem; color: var(--muted); }
.ts-hours svg { width: 17px; height: 17px; color: var(--brand); margin-top: .2rem; }

.ts-sum {
  margin-top: 1.7rem; padding: 1.2rem 1.25rem 1.25rem; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--r-lg); max-width: 680px;
}
.ts-sum__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.ts-sum__h { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--ink); }
.ts-copy {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .4rem .85rem; flex: none;
  border-radius: var(--r); border: 1.5px solid var(--line-2); background: #fff; color: var(--ink);
  font-family: var(--font-display); font-weight: 800; font-size: .88rem; cursor: pointer;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.ts-copy svg { width: 16px; height: 16px; }
.ts-copy:hover { border-color: var(--ink); }
.ts-copy.is-done { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); }
.ts-sum__dl { display: grid; gap: .5rem 1.5rem; margin: 0; }
@media (min-width: 560px) { .ts-sum__dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ts-sum__dl div { min-width: 0; }
.ts-sum__dl dt { font-family: var(--font-display); font-weight: 800; font-size: .72rem; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.ts-sum__dl dd { margin: .05rem 0 0; color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.ts-sub-h {
  margin: 1.15rem 0 .5rem; font-family: var(--font-display); font-weight: 800; font-size: .72rem;
  letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
}
.ts-sum__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ts-sum__list li { display: flex; gap: .55rem; align-items: flex-start; margin: 0; font-size: .95rem; line-height: 1.45; color: var(--ink-2); }
.ts-sum__list svg { width: 19px; height: 19px; color: var(--ok); margin-top: .05rem; }
.ts-sum__foot { margin: 1rem 0 0; padding-top: .85rem; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); }

.ts-likely { margin-top: 1.4rem; max-width: 680px; }
.ts-likely ul { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 .9rem; padding: 0; }
.ts-likely .lnk { display: inline; line-height: 1.45; }
.ts-likely .lnk svg { display: inline-block; vertical-align: -3px; margin-left: .3rem; }
.ts-likely li {
  margin: 0; padding: .38rem .8rem; border-radius: 100px; background: #fff; border: 1px solid var(--line);
  font-size: .88rem; font-weight: 700; color: var(--ink-2); line-height: 1.35;
}

/* Safety stop. */
.ts-safe { list-style: none; counter-reset: ts; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .7rem; max-width: 680px; }
.ts-safe li {
  counter-increment: ts; position: relative; margin: 0; padding: .9rem 1rem .9rem 3.6rem;
  background: #fff; border: 1px solid var(--brand-line); border-radius: var(--r);
  font-size: 1.04rem; line-height: 1.55; color: var(--ink);
}
.ts-safe li::before {
  content: counter(ts); position: absolute; left: .9rem; top: .8rem; width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 900; font-size: .95rem;
}
.ts-safe__after {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.6rem; padding: 1.2rem 1.25rem;
  background: var(--ink); color: #c3cad4; border-radius: var(--r-lg); max-width: 680px;
}
.ts-safe__after p { margin: 0; flex: 1 1 16rem; }
.ts-safe__after b { color: #fff; }

/* ------------------------------------------------------------- sidebar --- */
.ts-side__card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.05rem 1.1rem; font-size: .92rem; }
.ts-side__card > p { margin: 0 0 .7rem; line-height: 1.55; }
.ts-side__h {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem !important;
  font-family: var(--font-display); font-weight: 800; font-size: .98rem !important; color: var(--ink);
}
.ts-side__h svg { width: 18px; height: 18px; color: var(--brand); }
.ts-side__count {
  margin-left: auto; min-width: 26px; height: 22px; padding: 0 .45rem; border-radius: 100px;
  background: var(--bg-soft); color: var(--muted); font-size: .78rem; display: inline-flex; align-items: center; justify-content: center;
}
/* The step rail only earns its space beside the main column. */
.ts-side__rail { display: none; }
@media (min-width: 940px) { .ts-side__rail { display: block; } }

.ts-rail { list-style: none; margin: 0; padding: 0; }
.ts-rail li {
  position: relative; display: flex; gap: .7rem; align-items: flex-start; margin: 0; padding: .35rem 0 .55rem;
  font-size: .88rem; line-height: 1.35; color: var(--muted);
}
.ts-rail li:not(:last-child)::after {
  content: ""; position: absolute; left: 10px; top: 1.75rem; bottom: -.15rem; width: 2px; background: var(--line);
}
.ts-rail__dot {
  position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center; background: #fff;
  border: 2px solid var(--line-2); font-family: var(--font-display); font-weight: 800; font-size: .72rem; color: var(--muted);
}
.ts-rail__dot svg { width: 13px; height: 13px; stroke-width: 3; }
.ts-rail li > span:last-child { padding-top: .1rem; min-width: 0; }
.ts-rail em { display: block; font-style: normal; font-size: .76rem; font-weight: 700; margin-top: .1rem; }
.ts-rail b { display: block; color: var(--ink-2); font-family: var(--font-display); }
.ts-rail .is-done { color: var(--ink-2); }
.ts-rail .is-done .ts-rail__dot { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.ts-rail .is-done:not(:last-child)::after { background: var(--ink-2); }
.ts-rail .is-cur { color: var(--ink); font-weight: 700; }
.ts-rail .is-cur .ts-rail__dot { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.ts-rail .is-cur .ts-rail__dot:empty::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.ts-rail .is-fixed { color: var(--ok); font-weight: 700; }
.ts-rail .is-fixed .ts-rail__dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.ts-rail .is-stop { color: var(--brand-700); font-weight: 700; }
.ts-rail .is-stop .ts-rail__dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.ts-rail .is-skip { color: var(--muted); }
.ts-rail .is-skip .ts-rail__dot { border-style: dashed; }
.ts-rail .is-moot { opacity: .5; }
.ts-rail--how li { padding-bottom: .8rem; }
.ts-rail--how .is-cur { font-weight: 400; color: var(--ink-2); }
.ts-rail--how .is-cur b { color: var(--brand-700); }

.ts-side__safe { border-color: var(--brand-line); }
.ts-side__safe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.ts-side__safe li { margin: 0; }
.ts-side__safe-btn {
  display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 44px; padding: .5rem .7rem;
  border: 1px solid var(--brand-line); border-radius: var(--r-sm); background: #fff8f8; cursor: pointer;
  font: inherit; font-family: var(--font-display); font-weight: 700; font-size: .9rem; line-height: 1.3;
  color: var(--brand-800); text-align: left; text-decoration: none;
  transition: background var(--t), border-color var(--t);
}
.ts-side__safe-btn > span { flex: 1; min-width: 0; }
.ts-side__safe-btn svg { width: 18px; height: 18px; color: var(--brand); }
.ts-side__safe-btn svg:last-child { width: 15px; height: 15px; opacity: .6; }
.ts-side__safe-btn:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-800); }

.ts-side__tel {
  display: inline-block; font-family: var(--font-display); font-weight: 900; font-size: 1.45rem; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none; line-height: 1.2; padding: .1rem 0;
}
.ts-side__tel:hover { color: var(--brand-600); }
.ts-side__meta { margin: .35rem 0 0 !important; font-size: .84rem; color: var(--muted); }
.ts-side__card--compact .ts-side__tel { font-size: 1.25rem; }

/* What the sidebar carries depends on the screen and the width. Below 940px
   it sits under the main column, so it drops whatever the main column (or the
   site's fixed Call Now bar, below 760px) already shows. */
@media (max-width: 759px) {
  .ts-side__call { display: none; }
  .ts[data-ts-view="sym"] .ts__side { display: none; }
}
@media (max-width: 939px) {
  .ts[data-ts-view="sym"] .ts-side__safe { display: none; }
  .ts[data-ts-view="end-safety"] .ts__side { display: none; }
}

/* ------------------------------------------- the written-out reference --- */
.ts-ref__safety { display: grid; gap: .9rem; margin-bottom: 2rem; }
@media (min-width: 760px) { .ts-ref__safety { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ts-ref__safe {
  background: #fff; border: 1px solid var(--brand-line); border-top: 4px solid var(--brand);
  border-radius: var(--r-lg); padding: 1.1rem 1.2rem; font-size: .95rem; min-width: 0;
  scroll-margin-top: calc(var(--hdr-h) + 16px);
}
.ts-ref__safe h3 { display: flex; gap: .55rem; align-items: flex-start; font-size: 1.1rem; margin-bottom: .6rem; color: var(--brand-800); }
.ts-ref__safe h3 svg { width: 21px; height: 21px; color: var(--brand); flex: none; margin-top: .05rem; }
.ts-ref__safe ol { margin: 0 0 .7rem; padding-left: 1.2rem; }
.ts-ref__safe li::marker { color: var(--brand); font-weight: 800; }
.ts-ref__safe p { margin: 0; font-weight: 700; color: var(--ink-2); }

.ts-ref__jump ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; padding: 0; }
.ts-ref__jump li { margin: 0; }
.ts-ref__jump a {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .4rem .9rem; border-radius: 100px;
  background: #fff; border: 1px solid var(--line); color: var(--ink-2); font-family: var(--font-display);
  font-weight: 700; font-size: .9rem; text-decoration: none;
}
.ts-ref__jump a svg { width: 17px; height: 17px; color: var(--brand); }
.ts-ref__jump a:hover { border-color: var(--brand); color: var(--brand-700); }

.ts-ref__sys {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: .8rem;
  box-shadow: var(--sh-1); scroll-margin-top: calc(var(--hdr-h) + 16px);
}
.ts-ref__sys > summary {
  display: flex; align-items: center; gap: .9rem; padding: 1rem 1.15rem; cursor: pointer; list-style: none;
  border-radius: var(--r-lg);
}
.ts-ref__sys > summary::-webkit-details-marker { display: none; }
.ts-ref__sys > summary::after {
  content: ""; width: 22px; height: 22px; flex: none; margin-left: auto; background: var(--brand);
  -webkit-mask: no-repeat center/22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  mask: no-repeat center/22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  transition: transform var(--t);
}
.ts-ref__sys[open] > summary::after { transform: rotate(45deg); }
.ts-ref__ico { width: 42px; height: 42px; border-radius: 12px; flex: none; display: inline-flex; align-items: center; justify-content: center; box-shadow: none; }
.ts-ref__ico svg { width: 22px; height: 22px; }
.ts-ref__name { min-width: 0; }
.ts-ref__name h3 { margin: 0; font-size: 1.2rem; }
.ts-ref__name > span { display: block; font-size: .88rem; color: var(--muted); line-height: 1.4; }
.ts-ref__body {
  display: grid; gap: 0 2.5rem; padding: 0 1.15rem .4rem; border-top: 1px solid var(--line);
}
@media (min-width: 1000px) { .ts-ref__body { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ts-ref__sym { padding: 1.3rem 0; border-bottom: 1px solid var(--line); min-width: 0; scroll-margin-top: calc(var(--hdr-h) + 16px); }
.ts-ref__sym h4 { margin: 0; font-size: 1.12rem; }
.ts-ref__sub { margin: .1rem 0 .8rem; font-size: .9rem; color: var(--muted); }
.ts-ref__steps { margin: 0 0 .9rem; padding-left: 1.3rem; font-size: .94rem; line-height: 1.6; }
.ts-ref__steps > li { margin-bottom: .6rem; padding-left: .2rem; }
.ts-ref__steps > li::marker { color: var(--brand); font-family: var(--font-display); font-weight: 800; }
.ts-ref__steps b { color: var(--ink); }
/* The reference repeats these on every check, so their icons are CSS masks
   rather than a copy of the SVG each time. */
.ts-ref__fix, .ts-ref__call, .ts-ref__warn { --ts-m: none; }
.ts-ref__fix::before, .ts-ref__call::before, .ts-ref__warn::before, .ts-ref__go::after {
  content: ""; flex: none; display: inline-block; background: currentColor;
  -webkit-mask: no-repeat center/contain var(--ts-m); mask: no-repeat center/contain var(--ts-m);
}
.ts-ref__fix {
  display: block; position: relative; padding-left: 1.4rem; margin-top: .3rem; font-size: .86rem; color: #1d4d33;
  --ts-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
}
.ts-ref__fix::before { position: absolute; left: 0; top: .22rem; width: 16px; height: 16px; background: var(--ok); }
.ts-ref__fix b { color: #0d5c34; }
.ts-ref__warn {
  display: inline; color: var(--brand-800); font-weight: 700;
  --ts-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h16.9a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4.5M12 17.5h.01'/%3E%3C/svg%3E");
}
.ts-ref__warn::before { width: 15px; height: 15px; margin-right: .3rem; vertical-align: -2px; background: var(--brand); }
.ts-ref__na { color: var(--muted); font-size: .88rem; }
.ts-ref__opts { margin: .35rem 0 0; padding-left: 1.1rem; font-size: .9rem; }
.ts-ref__opts li { margin-bottom: .25rem; }
.ts-ref__call {
  position: relative; margin: 0; padding-left: 1.6rem; font-size: .92rem; color: var(--ink-2);
  --ts-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
}
.ts-ref__call::before { position: absolute; left: 0; top: .2rem; width: 17px; height: 17px; background: var(--brand); }
.ts-ref__likely { display: block; margin-top: .3rem; color: var(--muted); }
.ts-ref__go {
  display: none; align-items: center; gap: .4rem; margin-top: .8rem; font-family: var(--font-display);
  font-weight: 800; font-size: .92rem; color: var(--brand-600); text-decoration: none; padding: .35rem 0;
}
.ts-ref__go {
  --ts-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
}
.ts-ref__go::after { width: 16px; height: 16px; transition: transform var(--t); }
.ts-ref__go:hover::after { transform: translateX(3px); }
.js .ts-ref__go { display: inline-flex; }

/* ------------------------------------------------- brand-kit icons --- */
/* The systems and the symptoms with a good match use the custom set
   (brandkit.CICON, 16 Oct 2026). Those are drawn on a 48px grid with a soft
   body fill and one accent, so they sit larger than the 24px line icons and
   take their colors from the chip they sit in. */
.ts-tile__ico .ci { width: 38px; height: 38px; }
.ts-opt__ico .ci { width: 31px; height: 31px; }
.ts-ref__ico .ci { width: 32px; height: 32px; }
.ts-ref__jump a .ci { width: 22px; height: 22px; margin: -3px 0; }
.ts-side__safe-btn .ci { width: 22px; height: 22px; margin: -2px 0; }
/* Solid chips: white ink and accent, the body a shade of the chip. */
.ts-tone--heat .ci, .ts-tone--danger .ci { color: #fff; --ci-accent: #fff; --ci-soft: #f2474d; }
.ts-tone--cool .ci { color: #fff; --ci-accent: #fff; --ci-soft: #2f86cf; }
.ts-tone--dual .ci { color: #fff; --ci-accent: #fff; --ci-soft: rgba(255,255,255,.2); }
.ts-tone--ink .ci { color: #fff; --ci-accent: #ff4b51; --ci-soft: #2b323d; }
/* Soft symptom chips: the chip's ink, its accent, a white body. */
.ts-opt__ico.ts-tone--heat .ci { color: var(--brand-700); --ci-accent: var(--brand); --ci-soft: #fff; }
.ts-opt__ico.ts-tone--cool .ci { color: var(--cool-600); --ci-accent: var(--cool); --ci-soft: #fff; }
.ts-opt__ico.ts-tone--neutral .ci { color: var(--ink-2); --ci-accent: var(--brand); --ci-soft: #fff; }
/* Jump links and the sidebar: ink with the red accent. */
.ts-ref__jump a .ci, .ts-side__safe-btn .ci { color: var(--ink); --ci-accent: var(--brand); --ci-soft: var(--brand-soft); }
@media (max-width: 559px) { .ts-tile__ico .ci { width: 34px; height: 34px; } }

/* ------------------------------------------------------- small screens --- */
/* System tiles become rows on a phone: five stacked cards were a long scroll. */
@media (max-width: 559px) {
  .ts-tiles { grid-template-columns: minmax(0, 1fr); gap: .6rem; margin-top: 1.3rem; }
  .ts-tile {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: .9rem; row-gap: .1rem;
    align-items: center; padding: .85rem .95rem;
  }
  .ts-tile__ico { grid-row: 1 / span 2; width: 46px; height: 46px; margin: 0; border-radius: 13px; }
  .ts-tile__ico svg { width: 24px; height: 24px; }
  .ts-tile__name { grid-column: 2; padding-right: 0; align-self: end; font-size: 1.05rem; }
  .ts-tile__sub { grid-column: 2; align-self: start; font-size: .86rem; }
  .ts-tile__go { position: static; grid-column: 3; grid-row: 1 / span 2; width: 30px; height: 30px; }
}
@media (max-width: 479px) {
  .ts { border-radius: var(--r-lg); margin-inline: calc(var(--gutter) * -.5); }
  .ts__bar { padding-inline: 1rem; }
  .ts__brand { flex-basis: 100%; }
  .ts__tools { width: 100%; }
  .ts__tool { flex: 1; justify-content: center; }
  .ts__mark { width: 32px; height: 32px; border-radius: 9px; }
  .ts__mark svg { width: 18px; height: 18px; }
  .ts-step__num { width: 40px; height: 40px; font-size: 1.1rem; }
  .ts-dots i { width: 16px; }
}

/* ------------------------------------------------------- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .ts-screen--in, .ts-end--safety .ts-end__badge { animation: none; }
  .ts__prog span, .ts-tile, .ts-opt, .ts-choice, .ts-tile__go, .ts-opt__go, .ts-choice > svg,
  .ts-ref__go::after, .ts-ref__sys > summary::after { transition: none; }
  .ts-tile:hover, .ts-opt:hover { transform: none; }
}

/* ---------------------------------------------------------------- print --- */
@media print {
  .ts__tools, .ts__prog, .ts-side__safe, .ts-copy, .ts-actions { display: none !important; }
  .ts { box-shadow: none; }
}