/*
 * assets/article-v2.css: version 2 of the article pages (the How-to guides, the Download Station answer page and the
 * MailServerPro and WebHostPro product pages; site decision S57). Every rule waits for <html data-v2>, which
 * tools/site-v2.py writes into a page together with the link to this file, so a page without the mark draws exactly
 * as before. The parts, named in data-v2:
 *
 *   title  the title runs across the article's column (site.css caps every h1 at 10.26em for the front pages'
 *          headlines, which stacked a guide's title in four short lines), at a display size, balanced; on the
 *          How-to lists and the licence page, which carry this part alone, the heading only loses the cap;
 *   rail   the article as a magazine page: a left rail that holds the section numbers, the words in a reading measure
 *          of 75 to 88 characters to the right of it, and the wide things (tables, pictures, films, code, the ladder,
 *          note grids) across the rail and the words, so every right edge still lines up (S16). From 960 px; below
 *          that one column as before. The deck under the title is larger; each section opens with a hairline.
 *
 * The page's own markup is untouched apart from data-v2-wide on a field cut-out wider than the words' measure
 * (tools/site-v2.py), which then runs across the rail as well instead of shrinking.
 */

/* ── the preview's band (the same as assets/page-v2.css, S54) ── */
html[data-v2] .v2-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;padding:9px var(--gut,16px);
  font:500 12.5px/1.4 var(--mono,monospace);letter-spacing:.04em;color:#101507;background:var(--led,#FFB020)}
html[data-v2] .v2-band b{font-weight:700;letter-spacing:.12em;text-transform:uppercase}
html[data-v2] .v2-band a{color:inherit;text-decoration:underline;text-underline-offset:3px}
html[data-v2] .v2-band a:focus-visible{outline:2px solid #101507;outline-offset:2px}

/* ── title ── */
html[data-v2~="title"] .ht-art > h1{
  max-width:none;
  font-size:clamp(30px,calc(1.9vw + 18px),48px);line-height:1.08;letter-spacing:-.018em;
  margin:0 0 clamp(16px,1.6vw,22px);
  text-wrap:balance;overflow-wrap:break-word;hyphens:manual;
}
/* the How-to lists and the licence page carry the title part alone: their headings keep their size and lose the cap */
html[data-v2~="title"] :is(h1.ht-hub-h,.src > h1){max-width:none;text-wrap:balance}
/* Japanese and Chinese set a title without spaces: no negative tracking there */
html[data-v2~="title"] .ht-art > h1:is(:lang(ja),:lang(zh-TW)){letter-spacing:0;line-height:1.2}
/* Japanese breaks a title between phrases, not inside a word (where the browser knows how); with the rail, the
   section headings too */
html[data-v2~="title"] .ht-art > h1:lang(ja),
html[data-v2~="rail"] .ht-art > :is(h3,h4):lang(ja){word-break:auto-phrase}

/* ── rail ── */
html[data-v2~="rail"] .ht-art{
  container-type:inline-size;   /* the rail is measured on the article (cqi), also inside a heading */
  --indent:0px;          /* the rail and its gap: where the words start */
  --rule-lit:28px;       /* the lit end of a section's hairline, over its number */
}
/* links in the words: an amber hairline under the word, the word itself amber on hover */
html[data-v2~="rail"] .ht-art :is(p,li,dd,td,.ht-call) a:not([class]){
  text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.22em;
  text-decoration-color:color-mix(in srgb,var(--led) 55%,transparent);
  transition:color .15s ease,text-decoration-color .15s ease;
}
html[data-v2~="rail"] .ht-art :is(p,li,dd,td,.ht-call) a:not([class]):hover{color:var(--led);text-decoration-color:var(--led)}
html[data-v2~="rail"] .ht-art ::selection{background:rgba(255,176,32,.3);color:#fff}
html[data-v2~="rail"] .ht-art .ht-tbl td{font-variant-numeric:tabular-nums}

/* the deck: the paragraph under the title, from the title's edge, in a measure of its own */
html[data-v2~="rail"] .ht-art > p.lead{
  font-size:clamp(18px,calc(.45vw + 15px),20px);line-height:1.55;color:color-mix(in srgb,var(--ink) 94%,transparent);
  max-width:38em;margin:0 0 clamp(8px,1vw,14px);text-wrap:pretty;
}
/* the first section follows the deck a little closer than one section follows another */
html[data-v2~="rail"] .ht-art > p.lead + h3,
html[data-v2~="rail"] .ht-art > p.lead + ul.ht-rules[aria-label] + h3{margin-top:clamp(36px,4vw,56px)}

/* the words: a little larger on a computer, a little more leading for light type on a dark ground */
html[data-v2~="rail"] .ht-art :is(p,li){line-height:1.7}
@media (min-width:1100px){
  html[data-v2~="rail"] .ht-art :is(p,li){font-size:17px}
  html[data-v2~="rail"] .ht-art :is(.ht-tbl,.ht-note,.ht-path,.ht-fig) :is(p,li){font-size:15px}
  html[data-v2~="rail"] .ht-art .ht-call p{font-size:16px}
}

/* a section opens with a hairline across the column; its number sits under the lit end of it */
html[data-v2~="rail"] .ht-art > h3{
  --pt:clamp(18px,1.8vw,24px);   /* from the hairline to the heading */
  position:relative;
  font-size:clamp(21px,calc(1vw + 12px),27px);line-height:1.22;letter-spacing:-.005em;
  margin:clamp(52px,5.4vw,76px) 0 16px;padding-top:var(--pt);
  text-wrap:balance;
}
html[data-v2~="rail"] .ht-art > h3::before{
  content:"";position:absolute;top:0;left:calc(-1 * var(--indent));right:0;height:1px;
  background:linear-gradient(90deg,var(--led) 0 var(--rule-lit),var(--rule-hi) var(--rule-lit));
}
html[data-v2~="rail"] .ht-art > h3 .n{font-size:.62em;letter-spacing:.06em;vertical-align:.12em}
/* the steps' numbers keep to the first line of the larger words */
html[data-v2~="rail"] .ht-art .ht-steps > li::before{top:.42em;font-size:12.5px}
html[data-v2~="rail"] .ht-art > h4{font-size:clamp(17px,calc(.4vw + 13px),19px);line-height:1.35;margin:2em 0 .5em}

/* the facts under a product page's lead ("At a glance"): one panel */
html[data-v2~="rail"] .ht-art > p.lead + ul.ht-rules[aria-label]{
  margin:6px 0 10px;padding:16px 20px 16px 38px;border:1px solid var(--rule);border-radius:12px;background:var(--panel);gap:8px;
}

@media (min-width:960px){
  /* the rail and its gap take about a third of the column, so the words keep about 75 to 88 characters a line */
  html[data-v2~="rail"] .ht-art{--indent:clamp(180px,33cqi,330px);--rule-lit:clamp(30px,3.2cqi,40px)}
  /* the words, the headings and the callouts start at the rail's edge; the title and the deck span the column */
  html[data-v2~="rail"] .ht-art > :is(p:not(.lead),ul,ol:not(.ht-ladder),h3,h4,dl,.ht-call,.ht-faq,.ht-see,div.lead,img.ht-shot:not([data-v2-wide])){
    margin-left:var(--indent);
  }
  html[data-v2~="rail"] .ht-art > p.lead + ul.ht-rules[aria-label]{margin-left:0}
  /* a field cut-out keeps its own size where it fits beside the rail */
  html[data-v2~="rail"] .ht-art > img.ht-shot:not([data-v2-wide]){max-width:calc(100% - var(--indent))}
  /* the number hangs in the rail, in the site's mono, under the hairline's amber end */
  html[data-v2~="rail"] .ht-art > h3 .n{
    position:absolute;left:calc(-1 * var(--indent));top:calc(var(--pt) + .1em);margin:0;
    font-size:clamp(22px,2.4cqi,28px);font-weight:400;line-height:1.2;letter-spacing:.02em;vertical-align:baseline;opacity:1;
  }
}
@media (prefers-reduced-motion:reduce){
  html[data-v2~="rail"] .ht-art :is(p,li,dd,td,.ht-call) a:not([class]){transition:none}
}