/* Option C's dashboard language for the model catalogue, the rankings, the model page tables
   and the pricing page (4 Nov 2026): model rows with a logo, borderless tables with hairline rows
   and the plan list. Linked only by resources/views/models/* and pricing (partial
   models.partials.dash-style). Candidates for brand.css section 8 as .hy-mdl, .hy-dash-rows and
   .hy-dash-table. Only --b-* tokens; flat, no shadows, square markers, one accent. */
/* the model mark: logo (or a mono initial on a band square) beside the name */
:root body .hy-mdl{display:inline-flex;align-items:center;gap:9px;min-width:0;font:500 14px/1.2 var(--b-font);color:var(--b-ink)}
:root body .hy-mdl .home-logo{width:16px;height:16px;flex:none}
:root body .hy-mdl__ini{display:inline-grid;place-items:center;flex:none;width:16px;height:16px;border-radius:var(--b-r-px);background:var(--b-band);font:500 10px/1 var(--b-mono);color:var(--b-ink-2);text-transform:uppercase}
:root body .hy-mdl__ini::before{content:attr(data-ini)}

/* catalogue rows: model, numbers, tags; one hairline between rows */
:root body .hy-dash-rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--b-line)}
:root body .hy-dash-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 230px minmax(0,320px);gap:12px 32px;align-items:start;padding:20px 0;border-bottom:1px solid var(--b-line)}
:root body .hy-dash-row__name{margin:0;font:500 16px/1.25 var(--b-font);letter-spacing:-.01em}
:root body .hy-dash-row__name a{color:var(--b-ink);text-decoration:none}
:root body .hy-dash-row__name a::after{content:"";position:absolute;inset:0}
:root body .hy-dash-row__name a:focus-visible{outline:none}
:root body .hy-dash-row:focus-within{outline:2px solid var(--b-accent);outline-offset:2px}
:root body .hy-dash-row .hy-mdl{font-size:16px}
:root body .hy-dash-row .hy-mdl .home-logo,:root body .hy-dash-row .hy-mdl__ini{width:20px;height:20px}
:root body .hy-dash-row__pub{margin:6px 0 0 29px}
:root body .hy-dash-row__desc{margin:8px 0 0 29px;max-width:620px;font-size:14px;line-height:1.5;color:var(--b-ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
:root body .hy-dash-row__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin:2px 0 0}
:root body .hy-dash-row__stats div{min-width:0}
:root body .hy-dash-row__stats dt{margin:0 0 4px}
:root body .hy-dash-row__stats dd{margin:0;font:500 14px/1.2 var(--b-font);font-variant-numeric:tabular-nums;color:var(--b-ink)}
:root body .hy-dash-row__tags{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
:root body .hy-dash-row__tags .hy-also{margin:0}
:root body .hy-dash-row .hy-st{font-size:13px}
@media (max-width:900px){
  :root body .hy-dash-row{grid-template-columns:minmax(0,1fr);gap:14px;padding:18px 0}
  :root body .hy-dash-row__stats{grid-template-columns:repeat(3,minmax(0,max-content));gap:8px 24px;margin-left:29px}
  :root body .hy-dash-row__tags{margin-left:29px}
}
@media (max-width:560px){
  :root body :is(.hy-dash-row__pub,.hy-dash-row__desc,.hy-dash-row__stats,.hy-dash-row__tags){margin-left:0}
}

/* filter rows: segmented controls that scroll sideways on a phone instead of overflowing */
:root body .hy-dash-filters{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
:root body .hy-dash-filters .hy-seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
:root body .hy-dash-filters .hy-seg::-webkit-scrollbar{display:none}
:root body .hy-seg .ct{margin-left:2px;font:400 11px/1 var(--b-mono);opacity:.7}

/* borderless dashboard table: mono-free column heads, hairline rows, tabular numbers */
:root body table.hy-dash-table.hy-dash-table{background:none;border-radius:0}
:root body .hy-dash-table.hy-dash-table thead th{padding:0 16px 10px;border-bottom:1px solid var(--b-line);background:none;font:500 12.5px/1.2 var(--b-font);text-transform:none;letter-spacing:0;color:var(--b-muted);white-space:nowrap}
:root body .hy-dash-table.hy-dash-table tbody tr > :is(td,th){padding:12px 16px;border-top:0;border-bottom:1px solid var(--b-band);background:none;vertical-align:middle;color:var(--b-ink-2);font-variant-numeric:tabular-nums}
:root body .hy-dash-table.hy-dash-table tbody tr:last-child > *{border-bottom:0}
:root body .hy-dash-table.hy-dash-table tbody tr:hover > *{background:none}
:root body .hy-dash-table.hy-dash-table tbody th{font-weight:500;color:var(--b-ink)}
:root body .hy-dash-table.hy-dash-table .is-num{font-family:var(--b-font);font-size:14px}
:root body .hy-dash-table.hy-dash-table .hy-dash-na{font:400 12px/1 var(--b-mono);color:var(--b-muted)}
:root body .hy-dash-table.hy-dash-table .rank-model a{color:var(--b-ink);text-decoration:none}
:root body .hy-dash-table.hy-dash-table .rank-model a:hover{color:var(--b-accent)}
:root body .hy-dash-table.hy-dash-table .rank-model .hy-cap{display:block;margin:4px 0 0 25px}
:root body .hy-dash-table.hy-dash-table .rank-bar{width:72px;height:4px;margin-left:12px;border-radius:var(--b-r-tick);background:var(--b-band);overflow:hidden}
:root body .hy-dash-table.hy-dash-table .rank-bar i{border-radius:inherit;background:var(--b-accent)}

/* plans (pricing): the option C plan card on x-site.cell */
:root body .hy-dash-plan__list{margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--b-line);list-style:none;display:grid;gap:10px;font-size:15px;line-height:1.45;color:var(--b-ink-2)}
:root body .hy-dash-plan__list li{position:relative;padding-left:20px}
:root body .hy-dash-plan__list li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:var(--b-r-tick);background:var(--b-accent)}
:root body .hy-dash-plan .hy-cell__vis{justify-content:flex-end;gap:16px}
:root body .hy-dash-plan__price{margin:0;padding-top:14px;border-top:1px solid var(--b-line);font:500 13px/1.45 var(--b-mono);color:var(--b-ink)}
:root body .hy-dash-plans__note{margin:24px 0 0;font-size:14px;color:var(--b-muted);text-align:center}
:root body .hy-dash-plans__note a{color:var(--b-accent);text-decoration:underline;text-underline-offset:3px}
:root body .hy-dash-jump{margin-top:32px;justify-content:center}


/* Shared catalogue columns, rankings and pricing navigation. */
:root body .hy-dash-row{grid-template-columns:minmax(0,1fr) 96px 120px 260px;gap:12px 28px;align-items:start}
:root body .hy-dash-row__stats--cols{display:contents}
:root body .hy-dash-row__col{min-width:0;margin:2px 0 0}
:root body .hy-dash-row__col dt{margin:0 0 4px}
:root body .hy-dash-row__col dd{margin:0;font:500 14px/1.2 var(--b-font);font-variant-numeric:tabular-nums;color:var(--b-ink)}
:root body .hy-dash-row__col dd + dt{margin-top:10px}
:root body .hy-dash-row__tags{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;margin-top:0}
:root body .hy-dash-row__tags .hy-also{flex-wrap:wrap}
@media (max-width:1100px){
  :root body .hy-dash-row{grid-template-columns:minmax(0,1fr) 88px 110px 200px;gap:12px 20px}
}
@media (max-width:900px){
  :root body .hy-dash-row{grid-template-columns:max-content max-content minmax(0,1fr);gap:12px 28px}
  :root body .hy-dash-row__main,:root body .hy-dash-row__tags{grid-column:1 / -1}
  :root body .hy-dash-row__col--ctx{margin-left:29px}
  :root body .hy-dash-row__col:empty{display:none}
}
@media (max-width:560px){
  :root body .hy-dash-row__col--ctx{margin-left:0}
}
:root body .rank-sec .hy-sec-head{margin-bottom:28px}
:root body .rank-sec .rank-tabs > [role="tablist"],:root body .rank-sec .hy-tabs__list{margin-bottom:32px}
/* 4 Nov 2026: the pricing jump links as the document rail (a column of chips, no centred row) */
:root body .hy-doc__rail .hy-dash-jump{margin-top:0;justify-content:flex-start}

/* ==========================================================================
   Final design pass (4 Nov 2026): pricing, tables, model page, catalogue,
   savings, document column and news tiles. Appended; the rules above stay.
   ========================================================================== */

/* pricing: the hero, the lead and the plans head read as one stack */
:root body .hy-pricing .hy-chapter--hero .hy-chapter__head{margin-bottom:40px;gap:24px}
:root body .hy-pricing #plans .hy-sec-head.hy-sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"eyebrow eyebrow" "title lead";column-gap:48px;row-gap:0;align-items:end;max-width:none;margin:0 0 32px;text-align:left}
:root body .hy-pricing #plans .hy-sec-head > .hy-eyebrow{grid-area:eyebrow;justify-content:flex-start}
:root body .hy-pricing #plans .hy-sec-head > .hy-sec-title{grid-area:title;font-size:clamp(30px,3.2vw,44px)}
:root body .hy-pricing #plans .hy-sec-head > .hy-sec-lead{grid-area:lead;max-width:520px;margin:0;justify-self:end}
@media (max-width:899px){
  :root body .hy-pricing #plans .hy-sec-head.hy-sec-head{grid-template-columns:minmax(0,1fr);grid-template-areas:"eyebrow" "title" "lead"}
  :root body .hy-pricing #plans .hy-sec-head > .hy-sec-lead{justify-self:start;margin-top:16px}
}

/* pricing plans: one inset, the price line and the buttons on one line across the three cards */
:root body .hy-dash-plan .hy-cell__text{padding:28px 28px 0}
:root body .hy-dash-plan .hy-cell__vis{flex:1 0 auto;justify-content:flex-end;gap:16px;padding:24px 28px 28px}
:root body .hy-dash-plan .hy-dash-plan__price{min-height:calc(2 * 1.45em + 14px);margin-top:0}
@media (max-width:899px){
  :root body .hy-dash-plan .hy-dash-plan__price{min-height:0}
}
@media (max-width:560px){
  :root body .hy-dash-plan .hy-cell__text{padding:22px 22px 0}
  :root body .hy-dash-plan .hy-cell__vis{padding:20px 22px 22px}
}

/* dashboard tables (pricing, rankings, model page): hairline rows; the card frame comes from brand.css (one table look, 5 Nov 2026) */
:root body table.hy-dash-table.hy-dash-table{border:0;padding:0}
:root body .hy-dash-table.hy-dash-table tbody tr > :is(td,th){height:52px;padding-top:10px;padding-bottom:10px;border-bottom:1px solid var(--b-line);font-size:14px}
:root body .hy-dash-table.hy-dash-table thead th{height:40px;vertical-align:bottom}
:root body .hy-dash-table.hy-dash-table :is(th,td).is-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* rankings: one board left means no tab bar; an empty board keeps only its column heads */
:root body .rank-sec .rank-tabs--one > .hy-tabs__list{display:none}
:root body .hy-dash-table--empty.hy-dash-table thead th{border-bottom:0}
:root body .hy-dash-table--empty.hy-dash-table tbody{display:none}
:root body .rank-sec .rank-head{margin-bottom:32px}
:root body .rank-sec .rank-note{max-width:720px;margin:20px 0 0;font-size:13px;line-height:1.55;color:var(--b-muted)}
:root body .hy-dash-table.hy-dash-table th.is-num[scope="row"]{color:var(--b-muted);font-weight:400}
:root body .hy-dash-table.hy-dash-table thead th.is-num{font:500 12.5px/1.2 var(--b-font);text-align:right}
:root body .rank-sec.rank-sec{padding-top:24px}

/* model page: stats fit their numbers, related models as quiet cards with one inset */
:root body .mp-stats.mp-stats--fit{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:2px}
:root body .mp-stats--fit .mp-stat{min-width:0}
:root body .mp-stats--fit .mp-stat b{overflow-wrap:anywhere}
:root body .mp-related.hy-models{gap:16px}
:root body .mp-related .hy-model{display:flex;flex-direction:column;gap:10px;padding:24px;background:var(--b-card);border:1px solid var(--b-line-2);border-radius:12px;box-shadow:none}
:root body .mp-related .hy-model:hover{background:var(--b-raised)}
:root body .mp-related .hy-model .mg-desc{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--b-ink-2)}
:root body .mp-related .hy-model .mp-view{margin-top:auto;padding-top:6px}
:root body .hy-table--kv.hy-dash-table tbody th{width:auto}

/* savings: a case without a figure keeps the card's anatomy; an empty stat keeps its line */
:root body .sv-case .sv-case-slot{display:block;min-height:76px}
@media (min-width:700px){:root body .hy-stats .hy-stat > .hy-stat__num.hy-stat__num:empty{display:block;min-height:1em!important;height:1em}}

/* catalogue toolbar: search, the European toggle and the sort select share one control style */
:root body .mg-row > :is(.mg-search,.hy-seg--card,.mg-select){height:44px;border:1px solid var(--b-line)!important;border-radius:8px;background-color:var(--b-band);box-shadow:none}
:root body .mg-row > .hy-seg--card{display:inline-flex;align-items:stretch;padding:0;overflow:hidden}
:root body .mg-row > .hy-seg--card > button{height:auto;padding:0 16px;border-radius:0;background:transparent;font:500 14px/1 var(--b-font);color:var(--b-ink-2)}
:root body .mg-row > .hy-seg--card > button:hover{background:var(--b-raised);color:var(--b-ink)}
:root body .mg-row > .hy-seg--card > button[aria-pressed="true"]{background:var(--b-ink);color:var(--b-paper)}
:root body .mg-row > .mg-select{padding:0 34px 0 14px;font:500 14px/1 var(--b-font);color:var(--b-ink-2);background-position:right 12px center}
:root body .mg-row > .mg-select:hover{background-color:var(--b-raised)}
:root body .mg-row > .mg-search:focus-within{background:var(--b-raised)}

/* catalogue rows: fixed columns, tags on one line each and never more than two */
:root body .hy-dash-row__tags{overflow:hidden;min-width:0}
:root body .hy-dash-row__tags .hy-also{flex-wrap:wrap;gap:8px;min-width:0}
:root body .hy-dash-row__tags .hy-also > li{white-space:nowrap}
:root body .hy-dash-row__tags .hy-also > li:nth-child(n+3){display:none}
:root body .hy-dash-row__col--price:empty{display:block}

/* filter chips on a phone: one swipeable row that snaps, with a flat fade at the edge */
@media (max-width:767px){
  :root body .hy-dash-filters{width:100%}
  :root body .hy-dash-filters .hy-seg{width:100%;flex-wrap:nowrap;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);padding-right:32px}
  :root body .hy-dash-filters .hy-seg > button{flex:none;scroll-snap-align:start}
  :root body .mg-row > :is(.hy-seg--card,.mg-select){flex:1 1 0;min-width:0}
  :root body .mg-row > .hy-seg--card > button{flex:1}
}
:root body .mg-sec .mg-row > select.mg-select.mg-select.mg-select{border:1px solid var(--b-line)!important;background-color:var(--b-band)!important}
:root body .mg-sec .mg-row > select.mg-select.mg-select.mg-select:hover{background-color:var(--b-raised)!important}
:root body .mg-sec .mg-row > select.mg-select.mg-select.mg-select:focus-visible{outline:2px solid var(--b-accent)!important;outline-offset:2px!important}

/* document column: centred when it has no rail; the rail as a collapsed list on narrow screens */
:root body .hy-doc--solo .hy-doc__body{margin-inline:auto}
:root body .hy-doc__toc a[aria-current]{background:var(--b-ink);color:var(--b-paper)}
:root body .hy-doc__mtoc{display:none}
@media (max-width:1099px){
  :root body .hy-doc__mtoc{display:block;max-width:var(--b-read);margin:0 auto 40px;border-top:1px solid var(--b-line);border-bottom:1px solid var(--b-line)}
  :root body .hy-doc--rail .hy-doc__body{margin-inline:auto}
  :root body .hy-doc__mtoc-sum{display:flex;align-items:center;justify-content:space-between;min-height:52px;cursor:pointer;list-style:none;font:400 13px/1.2 var(--b-mono);color:var(--b-ink)}
  :root body .hy-doc__mtoc-sum::-webkit-details-marker{display:none}
  :root body .hy-doc__mtoc-sum::after{content:"";width:8px;height:8px;margin-right:4px;border-right:1.5px solid var(--b-muted);border-bottom:1.5px solid var(--b-muted);transform:translateY(-2px) rotate(45deg);transition:transform .15s}
  :root body .hy-doc__mtoc[open] > .hy-doc__mtoc-sum::after{transform:translateY(2px) rotate(-135deg)}
  :root body .hy-doc__mtoc-sum:focus-visible{outline:2px solid var(--b-accent);outline-offset:2px}
  :root body :is(.hy-doc__mtoc-list,.hy-doc__mtoc-body ul){display:grid;gap:0;margin:0 0 12px;padding:0;list-style:none}
  :root body :is(.hy-doc__mtoc-list,.hy-doc__mtoc-body ul) > li{margin:0;padding:0;background:none}
  :root body :is(.hy-doc__mtoc-list,.hy-doc__mtoc-body ul) a{display:block;padding:10px 0;border-radius:0;background:none;font:400 15px/1.4 var(--b-font);color:var(--b-ink-2);text-decoration:none}
  :root body :is(.hy-doc__mtoc-list,.hy-doc__mtoc-body ul) a:hover{color:var(--b-ink)}
  :root body :is(.hy-doc__mtoc-list,.hy-doc__mtoc-body ul) a[aria-current]{color:var(--b-accent)}
}
@media (prefers-reduced-motion:reduce){:root body .hy-doc__mtoc-sum::after{transition:none}}

/* footer: seven columns (Industries has its own) that end near one line; the legal bar's parts */
@media (min-width:1181px){
  :root body .hy-foot .hy-foot__cols{grid-template-columns:.8fr 1.25fr 1fr 1fr .9fr 1.25fr .8fr;gap:32px 20px}
}
@media (min-width:901px) and (max-width:1180px){
  :root body .hy-foot .hy-foot__cols{grid-template-columns:repeat(4,minmax(0,1fr))}
}
:root body .hy-foot__bar .hy-foot__legal > .hy-foot__links{grid-column:1 / -1}

/* news tiles (App\Support\NewsTile): the tile colours come from the brand tokens */
:root body .nt{--nt-bg:var(--b-band);--nt-ink:var(--b-accent);--nt-cell:var(--b-line)}
:root body .nt--company{--nt-bg:var(--b-band);--nt-ink:var(--b-ink);--nt-cell:var(--b-line)}
:root body .nt--press{--nt-bg:var(--b-ink-band);--nt-ink:var(--b-on-ink);--nt-cell:var(--b-ink-line, var(--b-line))}
:root body .nt .nt-bg{fill:var(--nt-bg)}
:root body .nt .nt-cell{fill:var(--nt-cell)}
:root body .nt .nt-ink{fill:var(--nt-ink)}
:root body .nt:not(.nt--press) .nt-cell{opacity:.55}