/*
 * The How-to's of the Diagnostic menu: howto.html / howto-pl.html list the guides, and each guide has a page of its
 * own per language (howto-memhound-ram(-pl).html, howto-nas-speed(-pl).html). The pages use the site's shell
 * (site.css: tokens, masthead, footer); this sheet adds the list of guides, the breadcrumb, the reading bar, the
 * "on this page" list (beside the article on a wide screen, a bar under the header on a narrow one), the escalation
 * ladder, the numbered steps, the rule lists, the callouts, the command block with its Copy button, the films, and
 * the plates that hold the Workbench windows (cut-outs of the real Workbench in inert frames, assets/howto/, made by
 * tools/node/site-howto-cutouts.mjs) scaled to the column by assets/howto.js.
 */
.ht{padding-block:clamp(28px,4vw,56px) clamp(56px,7vw,96px)}
.ht-wrap{max-width:none;margin:0}
/* the guides use the site's full page width (.wrap, --page) like every other page: prose keeps a readable measure,
   the Workbench frames take the whole column, and a film sits beside its caption, left and right in turn */
.ht-art > :not(figure):not(.ht-ladder):not(.ht-steps):not(.ht-notes):not(.ht-paths):not(.ht-tbl):not(.ht-ratio):not(.ht-shot):not(.ht-shots){max-width:80ch}
@media (min-width:1100px){
  .ht-fig.ht-vid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(220px,1fr);gap:28px;align-items:center}
  .ht-fig.ht-vid figcaption{margin:0;font-size:15px;line-height:1.6;padding-left:18px;border-left:2px solid var(--led)}
  .ht-fig.ht-vid.ht-alt{grid-template-columns:minmax(220px,1fr) minmax(0,1.7fr)}
  .ht-fig.ht-vid.ht-alt > .ht-video{order:2}
  .ht-fig.ht-vid.ht-alt figcaption{text-align:right;padding:0 18px 0 0;border-left:0;border-right:2px solid var(--led)}
}
.ht .eyebrow{margin-bottom:22px}
.ht h1{margin:0 0 14px}
.ht-lang{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.ht-lang a,.ht-lang span{padding:4px 10px;border:1px solid var(--rule);border-radius:999px;color:var(--dim);text-decoration:none}
.ht-lang a,.ht-lang span{display:inline-flex;align-items:center;gap:7px}
.ht-lang .flag{width:18px;height:12px;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.18);flex:none}
.ht-lang span{color:var(--ink);border-color:var(--rule-hi);background:rgba(255,255,255,.04)}
.ht-lang a:hover,.ht-lang a:focus-visible{color:var(--led);border-color:var(--led)}

/* the contents: one row per article, the anchor below the header (scroll-padding comes from --mast) */
.ht-toc{margin:0 0 clamp(34px,5vw,56px);padding:16px 18px;border:1px solid var(--rule);border-radius:10px;background:var(--panel)}
.ht-toc h2{margin:0 0 10px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.ht-toc ol{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.ht-toc a{display:flex;gap:12px;align-items:baseline;color:var(--ink);text-decoration:none}
.ht-toc a:hover,.ht-toc a:focus-visible{color:var(--led)}
.ht-toc a small{font-family:var(--mono);font-size:11.5px;color:var(--dim)}

.ht-art h1,.ht-art h2{font-family:var(--cond);font-weight:700;font-size:clamp(26px,2.6vw,34px);line-height:1.15;margin:0 0 18px;text-wrap:balance}
.ht-art h3{scroll-margin-top:calc(var(--mast,64px) + 64px)}
.ht-art h3{font-family:var(--cond);font-weight:600;font-size:clamp(20px,1.8vw,23px);line-height:1.25;margin:clamp(40px,5vw,60px) 0 14px;color:var(--ink)}
.ht-art h3 .n{font-family:var(--mono);font-weight:500;font-size:.72em;color:var(--led);margin-right:10px;letter-spacing:.04em}
.ht-art h4{font-family:var(--cond);font-weight:600;font-size:17px;margin:30px 0 10px;color:var(--ink)}
.ht-art p,.ht-art li{font-size:16px;line-height:1.65;color:color-mix(in srgb,var(--ink) 92%,transparent)}
.ht-art p{margin:0 0 14px;text-wrap:pretty}
.ht-art .lead{font-size:17.5px;color:var(--ink)}
.ht-art code{font-family:var(--mono);font-size:.88em;background:rgba(255,255,255,.06);padding:1px 6px;border-radius:3px;color:var(--ink);
  overflow-wrap:anywhere}   /* a long path in a line of Chinese or Japanese has no space to break at (2026-10-11: 4 px wider than a phone) */
.ht-art b,.ht-art strong{color:var(--ink);font-weight:600}

/* numbered steps: the number in the mono type, the text beside it */
.ht-steps{list-style:none;margin:0 0 18px;padding:0;counter-reset:st;display:grid;gap:10px}
.ht-steps > li{counter-increment:st;position:relative;margin:0;padding-left:40px}
.ht-steps > li::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:4px;font-family:var(--mono);font-size:12px;line-height:1.4;color:var(--led)}

/* the rules of a verdict: a bulleted list, each rule led by its name in bold */
.ht-rules{margin:0 0 18px;padding-left:20px;display:grid;gap:10px}
.ht-rules > li::marker{color:var(--led)}

/* the escalation ladder: five rungs, the one a section is about lit */
.ht-ladder{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:22px 0 26px;padding:0;list-style:none}
.ht-ladder li{position:relative;padding:10px 10px 9px;border:1px solid var(--rule);border-radius:8px;background:var(--panel);min-width:0}
.ht-ladder li:not(:last-child)::after{content:"";position:absolute;right:-6px;top:50%;width:6px;height:1px;background:var(--rule-hi)}
.ht-ladder b{display:block;font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--ink)}
.ht-ladder small{display:block;margin-top:3px;font-size:12px;line-height:1.35;color:var(--dim)}
.ht-ladder li:nth-child(1){border-top:2px solid var(--ok)}
.ht-ladder li:nth-child(2){border-top:2px solid #6FB3D9}
.ht-ladder li:nth-child(3){border-top:2px solid var(--led)}
.ht-ladder li:nth-child(4){border-top:2px solid var(--orange)}
.ht-ladder li:nth-child(5){border-top:2px solid var(--fail)}
@media (max-width:640px){.ht-ladder{grid-template-columns:minmax(0,1fr)}.ht-ladder li:not(:last-child)::after{display:none}}

/* callouts: a note (cyan edge) and a warning (the site's amber, the triangle) */
.ht-call{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;margin:18px 0 22px;padding:14px 16px 12px;
  border:1px solid var(--rule);border-left:3px solid #6FB3D9;border-radius:8px;background:rgba(111,179,217,.06)}
.ht-call svg{width:20px;height:20px;margin-top:2px;color:#6FB3D9}
.ht-call p{margin:0 0 6px;font-size:15px}
.ht-call.warn{border-left-color:var(--led);background:var(--led-soft)}
.ht-call.warn svg{color:var(--led)}

/* the command block: the lines, a Copy button in its corner */
.ht-cmd{position:relative;margin:14px 0 22px}
.ht-cmd pre{margin:0;padding:16px 18px;padding-right:92px;font-size:13.5px;line-height:1.7;white-space:pre;overflow-x:auto}
.ht-cmd pre .c{color:var(--dim)}
.ht-cmd pre .p{color:var(--lime);user-select:none}
.ht-cmd button{position:absolute;top:10px;right:10px;font-family:var(--cond);font-weight:600;font-size:13px;
  background:var(--led-soft);color:var(--led);border:1px solid rgba(255,176,32,.42);border-radius:999px;padding:5px 14px;cursor:pointer}
.ht-cmd button.done{background:var(--lime);color:#101507;border-color:var(--lime)}

/* a Workbench window: a cut-out laid out at the width it was cut at (--w, --h), scaled to the column (--k) */
.ht-fig{margin:18px 0 26px}
/* the cut-out carries the window's own frame and shadow, so the plate adds none; it is never drawn larger than cut */
.ht-plate{position:relative;display:block;overflow:hidden;max-width:calc(var(--w) * 1px);aspect-ratio:var(--w) / var(--h)}
.ht-plate iframe{position:absolute;left:0;top:0;display:block;border:0;width:calc(var(--w) * 1px);height:calc(var(--h) * 1px);
  transform-origin:0 0;transform:scale(var(--k,1));pointer-events:none;
  color-scheme:light}   /* the cut-outs declare no scheme: a frame of another scheme than its page is painted opaque */
.ht-fig figcaption{margin-top:9px;font-size:13px;line-height:1.5;color:var(--dim)}
.ht-fig figcaption b{color:var(--ink);font-weight:500}
@media (scripting:none){.ht-plate{display:none}}

.ht-sep{height:1px;border:0;background:var(--rule);margin:clamp(48px,6vw,80px) 0}

/* ── the list of guides (howto.html) ───────────────────────────────────────────────────────────────────────────── */
.ht-hub-h{font-family:var(--cond);font-weight:700;font-size:clamp(28px,3vw,40px);line-height:1.12;margin:0 0 12px;text-wrap:balance}
.ht-hub-lead{font-size:17px;line-height:1.6;color:color-mix(in srgb,var(--ink) 90%,transparent);max-width:720px;margin:0 0 30px}
.ht-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:20px;margin:0 0 20px}
.ht-card{display:flex;flex-direction:column;gap:10px;padding:0 0 20px;border:1px solid var(--rule);border-radius:12px;overflow:hidden;
  background:var(--panel);color:var(--ink);text-decoration:none;transition:border-color .2s ease,transform .2s ease}
.ht-card:hover,.ht-card:focus-visible{border-color:var(--led);transform:translateY(-2px)}
.ht-card > :not(.ht-thumb){margin-inline:22px}
.ht-thumb{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-bottom:1px solid var(--rule);margin-bottom:6px}
.ht-card .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--led)}
.ht-card h2{font-family:var(--cond);font-weight:700;font-size:23px;line-height:1.2;margin:0;text-wrap:balance}
.ht-card p{margin:0;color:var(--dim);font-size:15px;line-height:1.55}
.ht-card .ht-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ht-card .ht-meta span{font-family:var(--mono);font-size:11.5px;padding:3px 9px;border:1px solid var(--rule);border-radius:999px;color:var(--dim)}
.ht-card .go{font-family:var(--cond);font-weight:600;font-size:15px;color:var(--led);margin-top:6px}
@media (prefers-reduced-motion:reduce){.ht-card{transition:none}.ht-card:hover{transform:none}}

/* ── a guide's page: the breadcrumb, the reading bar, "on this page", the next guide ─────────────────────────────── */
.ht-crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin:0 0 14px;font-family:var(--mono);font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.ht-crumbs a{color:var(--dim);text-decoration:none}
.ht-crumbs a:hover,.ht-crumbs a:focus-visible{color:var(--led)}
.ht-crumbs [aria-current]{color:var(--ink);text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:13px}
/* the reading bar: under the header, and at the very top once a phone's header has tucked away (site.js .mast.tuck) */
.ht-progress{position:fixed;left:0;right:0;top:var(--mast,64px);height:2px;z-index:39;pointer-events:none;transition:top .25s ease}
.ht-progress i{display:block;height:100%;background:var(--led);transform-origin:0 50%;transform:scaleX(var(--p,0))}
body:has(.mast.tuck) .ht-progress{top:0}
/* "on this page": one <details>, a sticky list beside the article from 1240px, a sticky bar above it below that */
.ht-otp{margin:0 0 26px;border:1px solid var(--rule);border-radius:10px;background:var(--panel)}
.ht-otp summary{list-style:none;display:flex;gap:12px;align-items:baseline;padding:11px 16px;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.ht-otp summary::-webkit-details-marker{display:none}
.ht-otp summary b{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font:600 13.5px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink)}
.ht-otp ol{list-style:none;margin:0;padding:0 8px 10px;display:grid;gap:2px}
.ht-otp a{display:flex;gap:10px;padding:6px 8px;border-left:2px solid transparent;border-radius:0 6px 6px 0;
  color:var(--dim);text-decoration:none;font-size:13.5px;line-height:1.35;transition:color .15s ease,background-color .15s ease}
.ht-otp a .n{font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--led);opacity:.75}
.ht-otp a:hover,.ht-otp a:focus-visible{color:var(--ink);background:rgba(255,255,255,.03)}
.ht-otp a.on{color:var(--ink);border-left-color:var(--led);background:rgba(255,176,32,.07)}
@media (max-width:1239px){
  .ht-otp{position:sticky;top:var(--mast,64px);z-index:30;transition:top .25s ease;
    background:color-mix(in srgb,var(--panel) 94%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  body:has(.mast.tuck) .ht-otp{top:0}
  .ht-otp[open] ol{max-height:60vh;overflow:auto}
  .ht-otp summary::after{content:"▾";margin-left:auto;color:var(--dim)}
  .ht-otp[open] summary::after{content:"▴"}
}
@media (min-width:1240px){
  .ht-wrap.ht-doc{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) 260px;column-gap:56px;align-items:start}
  .ht-doc > *{grid-column:1}
  .ht-doc > .ht-otp{grid-column:2;grid-row:1 / span 6;position:sticky;top:calc(var(--mast,64px) + 26px);margin:0}
  .ht-otp summary{cursor:default;pointer-events:none}
  .ht-otp summary b{display:none}
}
/* ── a guide's foot (tools/node/site-menu.mjs writes it in every language, 2026-10-11): the previous guide on the left,
   the next on the right, each with its title; under them the product's page and the How-to list. A first guide has
   no previous card, so its next card keeps the right-hand column and the direction still reads. ──────────────────── */
.ht-next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:clamp(44px,5vw,70px) 0 0;
  padding-top:26px;border-top:1px solid var(--rule)}
.ht-pg{display:flex;flex-direction:column;gap:8px;min-width:0;padding:18px 20px 20px;border:1px solid var(--rule);
  border-radius:12px;background:var(--panel);color:var(--ink);text-decoration:none;
  transition:border-color .35s var(--ease-seat),background-color .35s var(--ease-seat)}
.ht-pg-prev{grid-column:1}
.ht-pg-next{grid-column:2;align-items:flex-end;text-align:end}
.ht-pg .k,.ht-pg-prod .k{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--led)}
.ht-pg .k i{font-style:normal;letter-spacing:0;font-size:14px;line-height:1;transition:transform .45s var(--ease-seat)}
.ht-pg b{font-family:var(--cond);font-weight:700;font-size:clamp(18px,1.4vw,20px);line-height:1.28;text-wrap:balance;
  overflow-wrap:anywhere}
.ht-pg:hover,.ht-pg:focus-visible{border-color:var(--led);background:color-mix(in srgb,var(--led) 4%,var(--panel))}
.ht-pg-prev:hover .k i,.ht-pg-prev:focus-visible .k i{transform:translateX(-4px)}
.ht-pg-next:hover .k i,.ht-pg-next:focus-visible .k i{transform:translateX(4px)}
.ht-pg-row{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px 24px;margin-top:4px}
.ht-pg-prod{display:inline-flex;align-items:center;gap:12px;min-width:0;padding:7px 18px 7px 7px;
  border:1px solid var(--rule);border-radius:999px;background:var(--panel);color:var(--ink);text-decoration:none;
  transition:border-color .35s var(--ease-seat)}
.ht-pg-prod:hover,.ht-pg-prod:focus-visible{border-color:var(--led)}
.ht-pg-prod img{flex:none;width:32px;height:32px;border-radius:8px}
.ht-pg-prod > span{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.2}
.ht-pg-prod .k{font-size:10px;letter-spacing:.18em}
/* Japanese and Chinese have no capitals to space out: the kickers keep a light tracking there */
.ht-pg .k:is(:lang(ja),:lang(zh-TW)),.ht-pg-prod .k:is(:lang(ja),:lang(zh-TW)){letter-spacing:.06em}
.ht-pg-prod b{font-family:var(--cond);font-weight:600;font-size:16px;color:var(--ink)}
.ht-next-all{font-family:var(--cond);font-weight:600;color:var(--dim);text-decoration:none}
.ht-next-all:hover,.ht-next-all:focus-visible{color:var(--led)}
@media (max-width:640px){
  .ht-next{grid-template-columns:minmax(0,1fr)}
  .ht-pg-prev,.ht-pg-next{grid-column:1}
  .ht-pg-next{align-items:flex-start;text-align:start}
}
@media (prefers-reduced-motion:reduce){
  .ht-pg,.ht-pg .k i,.ht-pg-prod{transition:none}
  .ht-pg:hover .k i,.ht-pg:focus-visible .k i{transform:none}
}

/* ── a walkthrough film: the poster arrives near the screen, the video only on Play (preload="none") ───────────── */
.ht-video{position:relative;aspect-ratio:16/10;border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:#07090b}
.ht-video video{display:block;width:100%;height:100%;object-fit:contain;background:#07090b}
.ht-vsub{display:block;margin-top:2px;font-family:var(--mono);font-size:11.5px;color:var(--dim)}
/* the quality of an adaptive film: Auto or a pinned level, and the level playing now */
.ht-q{display:inline-flex;gap:8px;align-items:center;margin-left:10px;vertical-align:middle}
.ht-q select{font-family:var(--mono);font-size:11.5px;color:var(--ink);background:var(--panel);border:1px solid var(--rule);border-radius:6px;padding:2px 6px}
.ht-q b{font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--led)}

/* RAM in a NAS (the RAM guide's section 05): the appendix of the performance guide as a grid of note blocks,
   each with an icon, its own heading and its list; the OOM block runs the full width under them */
.ht-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:18px;margin:22px 0 10px}
.ht-note{position:relative;padding:20px 22px 16px;border:1px solid var(--rule);border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,color-mix(in srgb,var(--led) 7%,var(--panel)) 0%,var(--panel) 42%)}
.ht-note::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--led);opacity:.75}
.ht-note-wide{grid-column:1 / -1}
.ht-note header{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.ht-note header svg{flex:none;width:34px;height:34px;padding:7px;border-radius:10px;fill:none;stroke:var(--led);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;background:var(--led-soft);border:1px solid rgba(255,176,32,.28)}
.ht-note h4{margin:0;font-family:var(--cond);font-weight:700;font-size:19px;line-height:1.25;color:var(--ink)}
.ht-note p{margin:0 0 10px;font-size:15px;line-height:1.6}
.ht-note .ht-rules{margin:0 0 6px}
.ht-note .ht-rules li{font-size:15px}
.ht-note-wide .ht-rules{columns:2 340px;column-gap:32px}
.ht-note-wide .ht-rules li{break-inside:avoid}

/* the RAM guide's two ways in, under the ladder: a routine test (01 QTS or 02 QuTS hero) and the full test (03) */
.ht-paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;margin:26px 0 8px}
.ht-path{display:flex;flex-direction:column;gap:8px;padding:20px 22px;border:1px solid var(--rule);border-radius:14px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--led) 8%,var(--panel)) 0%,var(--panel) 50%)}
.ht-path-full{background:linear-gradient(160deg,color-mix(in srgb,#6FB3D9 9%,var(--panel)) 0%,var(--panel) 50%)}
.ht-path h2{margin:0;font-family:var(--cond);font-weight:700;font-size:21px;line-height:1.2;color:var(--ink)}
.ht-path p{margin:0;font-size:15px;line-height:1.55;color:var(--dim)}
.ht-path-go{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:8px}
.ht-path-go a{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--rule-hi);border-radius:10px;
  color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;background:rgba(255,255,255,.03);
  transition:border-color .2s ease,background-color .2s ease,transform .2s ease}
.ht-path-go a .n{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--led)}
.ht-path-full .ht-path-go a .n{color:#6FB3D9}
.ht-path-go a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.ht-path-go a:hover,.ht-path-go a:focus-visible{border-color:var(--led);background:var(--led-soft);transform:translateX(2px)}
.ht-path-full .ht-path-go a:hover,.ht-path-full .ht-path-go a:focus-visible{border-color:#6FB3D9;background:rgba(111,179,217,.08)}
@media (prefers-reduced-motion:reduce){.ht-path-go a{transition:none}.ht-path-go a:hover{transform:none}}

/* elementary knowledge (from the owner's technical atlas): tables, grade chips, the vCPU:pCPU ratio bar */
.ht-tbl{overflow-x:auto;margin:14px 0 22px;border:1px solid var(--rule);border-radius:12px;background:var(--panel)}
.ht-tbl table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.5}
.ht-tbl caption{caption-side:top;text-align:left;padding:12px 14px 4px;font-family:var(--cond);font-weight:700;font-size:17px;color:var(--ink)}
.ht-tbl th,.ht-tbl td{text-align:left;vertical-align:top;padding:9px 14px;border-top:1px solid var(--rule)}
.ht-tbl thead th{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);border-top:0}
.ht-tbl td:first-child{font-weight:600;color:var(--ink)}
/* no column is held wider than its content: cells wrap between words, and a code token breaks only when it alone
   is wider than its column */
.ht-tbl td code,.ht-tbl th code{overflow-wrap:break-word}
/* a table marked ht-cards is one card per row on a phone, and a table of seven or more columns already on a tablet:
   each cell under its column's name (data-th, written from the table's own header by tools/site-howto-tables.py
   and tools/site-howto-i18n.py), so nothing scrolls sideways */
@media (max-width:560px){
  .ht-tbl.ht-cards{overflow:visible;border:0;border-radius:0;background:none}
  .ht-tbl.ht-cards table,.ht-tbl.ht-cards tbody,.ht-tbl.ht-cards tr,.ht-tbl.ht-cards td,.ht-tbl.ht-cards tbody th{display:block;width:auto}
  .ht-tbl.ht-cards caption{display:block;padding:0 0 8px}
  .ht-tbl.ht-cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ht-tbl.ht-cards tr{margin:0 0 10px;padding:10px 14px 12px;border:1px solid var(--rule);border-radius:12px;background:var(--panel)}
  .ht-tbl.ht-cards td,.ht-tbl.ht-cards tbody th{padding:5px 0 0;border-top:0}
  .ht-tbl.ht-cards td:first-child,.ht-tbl.ht-cards tbody th:first-child{padding-top:0}
  .ht-tbl.ht-cards td[data-th]::before,.ht-tbl.ht-cards tbody th[data-th]::before{content:attr(data-th);display:block;margin:0 0 1px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
  .ht-tbl.ht-cards tbody tr:hover td{background:none}
}
@media (min-width:561px) and (max-width:900px){
  .ht-tbl.ht-cards:has(thead th:nth-child(7)){overflow:visible;border:0;border-radius:0;background:none}
  .ht-tbl.ht-cards:has(thead th:nth-child(7)) table,.ht-tbl.ht-cards:has(thead th:nth-child(7)) tbody,.ht-tbl.ht-cards:has(thead th:nth-child(7)) tr,.ht-tbl.ht-cards:has(thead th:nth-child(7)) td,.ht-tbl.ht-cards:has(thead th:nth-child(7)) tbody th{display:block;width:auto}
  .ht-tbl.ht-cards:has(thead th:nth-child(7)) caption{display:block;padding:0 0 8px}
  .ht-tbl.ht-cards:has(thead th:nth-child(7)) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ht-tbl.ht-cards:has(thead th:nth-child(7)) tr{margin:0 0 10px;padding:10px 14px 12px;border:1px solid var(--rule);border-radius:12px;background:var(--panel)}
  .ht-tbl.ht-cards:has(thead th:nth-child(7)) td,.ht-tbl.ht-cards:has(thead th:nth-child(7)) tbody th{padding:5px 0 0;border-top:0}
  .ht-tbl.ht-cards:has(thead th:nth-child(7)) td:first-child,.ht-tbl.ht-cards:has(thead th:nth-child(7)) tbody th:first-child{padding-top:0}
  .ht-tbl.ht-cards:has(thead th:nth-child(7)) td[data-th]::before,.ht-tbl.ht-cards:has(thead th:nth-child(7)) tbody th[data-th]::before{content:attr(data-th);display:block;margin:0 0 1px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
  .ht-tbl.ht-cards:has(thead th:nth-child(7)) tbody tr:hover td{background:none}
}
/* questions and answers: an app's message, where it shows, then what it means and what to do */
.ht-faq{margin:14px 0 22px;padding:0;border-top:1px solid var(--rule);max-width:80ch}
.ht-faq-i{padding:14px 0 16px;border-bottom:1px solid var(--rule)}
.ht-faq dt{margin:0;padding:2px 0 2px 14px;border-left:2px solid var(--led);color:var(--ink);font-weight:500;line-height:1.5}
.ht-faq dd{margin:8px 0 0;line-height:1.6}
.ht-faq dd.ht-faq-w{margin:6px 0 0 16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--dim)}
.ht-faq code{overflow-wrap:break-word}
.ht-tbl tbody tr:hover td{background:rgba(255,255,255,.02)}
.ht-g{display:inline-block;padding:1px 8px;border-radius:999px;font-family:var(--mono);font-size:11.5px;font-weight:600;white-space:nowrap;border:1px solid}
.ht-g.ok{color:var(--lime);border-color:color-mix(in srgb,var(--lime) 45%,transparent);background:color-mix(in srgb,var(--lime) 10%,transparent)}
.ht-g.warn{color:var(--led);border-color:rgba(255,176,32,.45);background:var(--led-soft)}
.ht-g.bad{color:#FF6B6B;border-color:rgba(255,107,107,.45);background:rgba(255,107,107,.08)}
.ht-note .ht-g{margin-left:auto}
.ht-ratio{display:grid;grid-template-columns:3fr 2fr 2fr;gap:4px;margin:16px 0 8px;font-family:var(--mono);font-size:12.5px}
.ht-ratio span{padding:10px 12px;border-radius:8px;color:#101507;font-weight:600}
.ht-ratio span:nth-child(1){background:var(--lime)}
.ht-ratio span:nth-child(2){background:var(--led)}
.ht-ratio span:nth-child(3){background:#FF6B6B}
.ht-ratio small{display:block;font-weight:400;opacity:.8}
@media (max-width:560px){.ht-ratio{grid-template-columns:1fr}}
.ht-see{margin:22px 0 0;padding:12px 16px;border:1px dashed var(--rule-hi);border-radius:10px;font-size:15px}
/* field cut-outs of the *arr guide: drawn at their own CSS size (the files are 2x), rounded and transparent around */
.ht-shot{display:block;max-width:100%;height:auto;margin:10px 0 4px;filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))}
.ht-shots{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-start;margin:10px 0 4px}
.ht-shots .ht-shot{margin:0;min-width:0;flex:0 1 auto}
.ht-art > .ht-shot,.ht-art > .ht-shots{max-width:100%}
.ht-note-shots{font-size:14px;color:var(--dim)}