/* /mot/<make>/<model>/<year> (views/families/mot-year.js). Builds on tokens.css, bundle.css and kit.css.
   Mobile first: tables become cards under 640px (td[data-label]), the chart scales to the column, no
   horizontal page scroll, 44px tap targets. */
.my-sec{margin:var(--space-12) 0 0}
.my-sec h2{font-weight:300;font-size:26px;line-height:1.2;letter-spacing:-0.02em;color:var(--primary);margin:0 0 var(--space-3)}
.my-sec p{font-size:16px;line-height:1.65;color:var(--text);max-width:70ch}
.my-h3{font-weight:600;font-size:16px;line-height:1.4;margin:var(--space-6) 0 var(--space-2);color:var(--primary)}
.my-note{font-size:13px!important;line-height:1.55;color:var(--text-secondary)!important}
.my-tw{max-width:100%}
.my-table{width:100%;border-collapse:collapse;font-size:14px;line-height:20px;font-variant-numeric:tabular-nums}
.my-table th{text-align:left;font:700 10px/15px var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);padding:var(--space-2) var(--space-2) var(--space-2) 0;border-bottom:1px solid var(--border)}
.my-table td{padding:var(--space-2) var(--space-2) var(--space-2) 0;border-bottom:1px solid var(--border-subtle);vertical-align:top;overflow-wrap:anywhere}
.my-table .r{text-align:right}
.my-table tr.my-old td{color:var(--text-muted)}
.my-sub{display:block;font-size:11px;line-height:15px;color:var(--text-secondary)}
.my-tag{display:inline-block;font-size:11px;line-height:16px;padding:0 6px;border-radius:9999px;background:var(--bg-secondary);color:var(--text-secondary);margin-left:4px}
@media (max-width:639px){
  .my-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .my-table,.my-table tbody,.my-table tr,.my-table td{display:block;width:100%}
  .my-table tr{border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-2) var(--space-3);margin:0 0 var(--space-2)}
  .my-table td{display:flex;justify-content:space-between;gap:var(--space-3);border:0;padding:4px 0;text-align:right}
  .my-table td::before{content:attr(data-label);flex:none;max-width:45%;text-align:left;font-size:12px;color:var(--text-secondary)}
  .my-table td.r{text-align:right}
}
.my-chart{margin:var(--space-4) 0 0}
.my-chart svg{display:block;width:100%;max-width:560px;height:auto}
.my-chart figcaption{font-size:13px;line-height:1.55;color:var(--text-secondary);margin:var(--space-2) 0 0;max-width:70ch}
.my-bar rect{fill:var(--border-strong)}
.my-bar--cur rect{fill:var(--accent)}
.my-bar--old{opacity:.45}
.my-ci{stroke:var(--text-secondary);stroke-width:1.5}
.my-zero{stroke:var(--text-muted);stroke-width:1}
.my-ax{font:500 10px var(--font-sans);fill:var(--text-secondary)}
.my-val{font:700 11px var(--font-sans);fill:var(--text)}
.my-chips{list-style:none;margin:var(--space-3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.my-chips a,.my-chips span{display:inline-flex;align-items:center;justify-content:center;min-width:56px;min-height:44px;border:1px solid var(--border-subtle);background:var(--surface);border-radius:var(--radius-2xl);padding:0 var(--space-3);font-size:14px;font-variant-numeric:tabular-nums;color:var(--text);text-decoration:none}
.my-chips a:hover{border-color:var(--accent-line);color:var(--accent-text)}
.my-chips span.my-chip-plain{color:var(--text-secondary)}
.my-chips span[aria-current]{border-color:var(--primary);color:var(--primary);font-weight:700}
.my-pnrow{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3)}
.my-pn{display:inline-flex;align-items:center;min-height:44px;color:var(--primary)}
.my-list{margin:0;padding-left:var(--space-5,20px);display:grid;gap:var(--space-2);font-size:15px;line-height:1.55}
.my-list a{color:var(--primary)}