/* ==================================================================
   SpecHub stage 25 (2 Nov 2026): one consistent experience on every page.
   Kashif: "the point is to have a consistent experience all over the website."
   Linked once from sh_bar() in includes/chrome.php, after ux14-1.css. Some pages link their
   own sheet after sh_bar(), so the rules here start with "body" to win over them.

   The standard page head (the pattern of Product Library, Compliance, Knowledge, Site guide):
     36px of light band above the head, reaching up to the menu bar (--k-up),
     .k-head: breadcrumb, orange kicker, h1.k-h1 (44px, weight 600), lead (62ch),
     page body in the 1440 container, 24px from the edge (16px on a phone).
   ================================================================== */

/* ---------- 1. one h1 in every page head (desk, support requests and others had 36px, weight 800) ---------- */
body .k-head:not(.k-head--tight) h1.k-h1{font-size:clamp(32px,3.2vw,44px);font-weight:600;letter-spacing:-.03em;line-height:1.08}
body .k-head .k-lead{max-width:62ch}
body .k-head h1,body .k-head .k-lead{overflow-wrap:break-word}   /* a long title such as "Existing site/buildings/services" breaks on a phone instead of widening the page */

/* ---------- 2. buttons under the lead, as on every page that has them ---------- */
body .k-head .k-btns{margin-top:22px}
body .k-head .k-btns .k-link{font-size:14.5px}

/* ---------- 3. a head with something at its right (ARMOUR levels, a picture): two columns, no box in the band ---------- */
body .k-head.k-head--side{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:24px 56px;align-items:start}
body .k-head--side>*{min-width:0}
@media(max-width:960px){body .k-head.k-head--side{grid-template-columns:minmax(0,1fr)}}

/* ---------- 4. the same space above the head on pages with their own wrapper ---------- */
/* Site guide and Support had 30px, Specifications 0 (the head sat 36px higher), the flooring finder's band
   stopped short of the menu bar, ARMOUR had 28px and its own head. */
body main.hlp,body main.sup,body .spz,body main.dfn,body .ffd__in,body .dbp{padding-top:36px!important;--k-up:36px!important}
/* Design Desk: My projects and My learning start like every page (the project pages keep their own head) */
body main.bd:has(>.dk-head){padding-top:36px;--k-up:36px!important}

/* the same space under the page body, above the footer, as the .ch sections (96px, 64px on smaller screens) */
body main.hlp,body main.sup,body .spz,body main.dfn,body .ffd__in,body .dbp,body main.bd,body main.kcity:not(.hm) .kcity__in{padding-bottom:96px!important}
@media(max-width:900px){body main.hlp,body main.sup,body .spz,body main.dfn,body .ffd__in,body .dbp,body main.bd,body main.kcity:not(.hm) .kcity__in{padding-bottom:64px!important}}

/* ---------- 5. one left edge: 24px inside the 1440 container ---------- */
body main.dfn .dfn__in,body .kcity--sw .kcity__in{padding-left:24px;padding-right:24px}
body .kt .mx-ctxrow{padding-left:24px!important;padding-right:24px!important}

/* ---------- 6. DCP City project type and place: the standard head (it was centred on the picture, 28px in) ---------- */
body .kcity .k-head.kcity__typehead,body .kcity .k-head.kcity__reshead{margin-top:36px;--k-up:36px!important;padding:30px 0 34px;margin-bottom:34px;align-items:start}
body .kcity .kcity__typehead .k-crumb,body .kcity .kcity__reshead .k-crumb{margin-bottom:22px}
body .kcity .kcity__typehead .k-kicker,body .kcity .kcity__reshead .k-kicker{margin-bottom:12px}
body .kcity .kcity__typehead .kcity__h1,body .kcity .kcity__reshead .kcity__h1{margin:0 0 14px}
body .kcity .kcity__typehead .kcity__lead,body .kcity .kcity__reshead .kcity__lead{margin:0;font-size:17px;max-width:62ch}
body .kcity .kcity__reshead{max-width:none}
body .kcity .kcity__typehead{grid-template-columns:minmax(0,1fr) 420px;gap:24px 56px}
@media(max-width:960px){body .kcity .kcity__typehead{grid-template-columns:minmax(0,1fr)}}
@media(max-width:900px){body .kcity .k-head.kcity__typehead,body .kcity .k-head.kcity__reshead{padding:22px 0 26px;margin-bottom:26px}}

/* tool title rows (Facade Studio, Terrazzo Studio) like MIXDESIGN-IQ, CFRP-IQ and FLOOR-IQ: breadcrumb, kicker, a compact h1, 24px in;
   the "choose a project" box in orange tint, never amber */
body .fs-head{padding:22px 24px 18px;align-items:flex-end}
body .fs-head .k-crumb{margin-bottom:6px}
body .fs-head h1{font-size:clamp(26px,2.6vw,34px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
body .fs-ctx.is-warn{border-color:#F3C3AE;background:#FFF8F4}body .fs-ctx.is-warn b{color:#C24E1C}
@media(max-width:640px){body .fs-head,body .tz-ctxrow{padding:18px 16px 16px}}
/* Terrazzo Designer: the head text starts at the top, like every head with a picture at its right */
body .k-head.tz-head{align-items:start}

/* ---------- 7. ARMOUR: the standard head (armour.php now uses k-h1 and k-lead) ---------- */
body main.dfn .k-head{margin-bottom:34px}
/* the three levels: a plain list at the right of the head, hairlines between, no boxes */
.dfn-lv{margin:0;padding:0;list-style:none;border-top:1px solid var(--k-line,#E9E2D9)}
.dfn-lv li{display:grid;grid-template-columns:40px 90px minmax(0,1fr);gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--k-line,#E9E2D9);font-size:14px;line-height:1.45;color:#5E5759}
.dfn-lv b{font-size:14.5px;color:#211D22}
.dfn-lv__go{display:inline-block;margin-top:12px;font-size:14px;font-weight:700;color:#C24E1C;text-decoration:none}
.dfn-lv__go:hover{text-decoration:underline}

/* ---------- 8. a page you read (Terms of use): a readable column, the side panel at the right ---------- */
.k-read{display:grid;grid-template-columns:minmax(0,760px) minmax(280px,360px);gap:40px 56px;align-items:start}
.k-read__body{font-size:16.5px;line-height:1.7;color:#211D22}
.k-read__body h2{font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.25;margin:0 0 12px;color:#211D22}
.k-read__list{margin:0;padding:0;list-style:none;counter-reset:kr}
.k-read__list li{counter-increment:kr;position:relative;padding:18px 0 18px 46px;border-top:1px solid #E9E2D9}
.k-read__list li:first-child{border-top:0;padding-top:4px}
.k-read__list li::before{content:counter(kr);position:absolute;left:0;top:18px;width:28px;height:28px;border-radius:50%;border:1.5px solid #F06C38;color:#D9561F;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.k-read__list li:first-child::before{top:4px}
.k-read__list b{display:block;font-size:17px;margin:0 0 2px}
.k-read__side{position:sticky;top:24px;border:1px solid #E9E2D9;background:#FAF8F5;padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.k-read__side h2{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#211D22;margin:0}
.k-read__side p{margin:0;font-size:15px;line-height:1.55;color:#3A3537}
@media(max-width:1000px){.k-read{grid-template-columns:minmax(0,1fr)}.k-read__side{position:static}}

/* ---------- 9. libraries and Specifications: the breadcrumb stays at the top of the head ---------- */
/* stage 14 (UX-01) hid it under the choice trail, so these heads started higher than every other page */
html body.ux14:has(.s9t) .k-head .k-crumb{display:flex}

/* ---------- 10. one section heading size (the kit's .k-h2: 22px, weight 700) ---------- */
body .hlp__s h2,body .dk-sec h2,body .kn-shelf__h,body .sup-sec-h h2,body .sup-ask h2,body .man h2,body .kn-strip__h h2,body .kn-grp__h h2,body .kn-rel>h2,body .cmi-h2{font-size:22px;font-weight:700;letter-spacing:-.01em}

/* ---------- 11. one field: 46px high, a 1px warm line, 15px text (the kit's .k-input) ---------- */
/* Support's form, the Site guide filter and the tools' project picker had "font:15px inherit" (not valid CSS), so they fell back to 13px */
body .sup-f input,body .sup-f select,body .sup-f textarea,body .sup-reply textarea,body .hlp__find,body .pkl input,body .pkl select{font-size:15px;line-height:1.45;font-family:inherit}
body .s9c__find input,body .bd-find input,body .kn-bar input,body .kn-bar select,body .hlp__find{min-height:46px;box-sizing:border-box;border:1px solid #D8D0C5;font-family:inherit;font-size:15px}
body .s9c__find input:focus,body .bd-find input:focus{border-color:#F06C38;outline:2px solid #F06C38;outline-offset:-1px}

/* ---------- 12. admin pages (not redesigned): the same 1440 container and left edge as the site, and nothing wider than the screen ---------- */
body .cp{max-width:var(--container,1440px)}
body .cp form:has(>table.wptbl){overflow-x:auto}
@media(max-width:760px){
  body .cp table{display:block;max-width:100%;overflow-x:auto}
  body .cp .k-grid,body .cp .tr-grid{grid-template-columns:minmax(0,1fr)!important}
  body .cp .k-check{white-space:normal}
  body .cp{overflow-x:clip}
}

/* ---------- 13. nothing wider than a phone: the ARMOUR system page's "taken" bar, the Specifications lists' fact chips ---------- */
@media(max-width:640px){
  body .s9gd__r a{flex-wrap:wrap;row-gap:4px}body .s9gd__r a b{flex-basis:100%;min-width:0}
  body .spx .tkbar,body .spx .tkbar .tk1{min-width:0;max-width:100%}body .spx .tkbar .tk1>*{min-width:0}body .spx .tkbar select{width:100%;max-width:100%}
  /* a long trail on a phone: one line back to the parent, as the seminar pages do ("← The seminar") */
  html body.ux14:has(.s9t) .k-head .k-crumb>*{display:none}
  html body.ux14:has(.s9t) .k-head .k-crumb>a:last-of-type{display:inline-flex;font-weight:700;color:var(--k-ink,#211D22)}
  html body.ux14:has(.s9t) .k-head .k-crumb>a:last-of-type::before{content:"\2190\00a0"}
}
@media(max-width:900px){body .s9l__r{grid-template-columns:minmax(0,1fr) auto}body .s9l__r>*{min-width:0}body .s9l__f i{white-space:normal}}

/* ---------- 14. one phone gutter: 16px from the edge, header, page and footer alike ---------- */
@media(max-width:640px){
  body .ubar .ubar__in,body .nav .nav__in{padding-left:16px;padding-right:16px}
  body .ch__in,body .kcity--sw .kcity__in,body main.dfn .dfn__in,body .foot__cols,body .foot__in,body main.bd,body .ffd__in{padding-left:16px;padding-right:16px}
  body main.hlp,body main.sup,body .spz,body .dbp,body .cp{padding-left:16px;padding-right:16px}
  body .kt .mx-ctxrow{margin-left:0!important;padding:18px 16px 16px!important}
}