/* H8a WATCH + CHANGES (add-ons 1, 7, 8, 10). Family rules only: every colour is a core token (static/d/system.css); no colour
   literal lives here. State elements take .is-ga / .is-tn (--c, --c-ink, --c-deep, --c-1..3). No underlines; focus keeps the outline. */
.wx{display:grid;gap:16px;margin-block:28px}
.wx-card{display:grid;gap:10px;padding:20px;background:var(--sheet);border:1px solid var(--rule);border-radius:8px}
.wx-card .h-title{margin:0}
.wx-card .small,.wx-card .fine{margin:0;max-width:62ch}
.wx-row{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:0}
.wx-ok{color:var(--ink)}
.wx-on{margin:0}
.wx a{text-decoration:none}
.wx-reasons{display:grid;gap:0;margin:4px 0 0}
.wx-reason{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 0;border-top:1px solid var(--rule)}
.wx-reason dt{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--fs-label);line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.wx-reason dd{margin:0;color:var(--ink);max-width:62ch;text-wrap:pretty}
.wx-dot{width:9px;height:9px;border-radius:50%;background:var(--sage);flex:none}
.wx-unknown .wx-dot{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.wx-unknown dd{color:var(--ink-2)}
.wx-nk{padding:1px 8px;border-radius:999px;background:var(--well);color:var(--ink-2);font-size:var(--fs-label);letter-spacing:.04em;text-transform:none;font-weight:600}
.wx-quote{display:block;margin-top:8px;padding:8px 12px;border-left:2px solid var(--rule-2);color:var(--ink-2);font-size:var(--fs-small);quotes:"\201C" "\201D"}
.wx-reason .datum{margin-top:6px}
.wx .datum,.wx-col .datum{display:block}
.wx-awards{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:6px;font-size:var(--fs-small);color:var(--ink-2)}
.wx-awards a{color:var(--link)}
@media (hover: hover) and (pointer: fine){.wx-awards a:hover{color:var(--link-hover)}}
@media (min-width:768px){
  .wx-reason{grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:24px}
  .wx-reason dt{padding-top:4px}
}
/* ---- pages ---- */
.wx-head .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.wx-head h1,.wx-add .h-title,.wx-what .h-title,.wx-what .h-block{overflow-wrap:break-word}
.wx-head .label a{color:inherit;text-decoration:none}
@media (hover: hover) and (pointer: fine){.wx-head .label a:hover{color:var(--ink)}}
.wx-head h1{margin:0}
.wx-head .lede{margin:0;max-width:56ch}
.wx-plates{display:grid;grid-template-columns:minmax(0,260px);margin-top:12px}
.wx-plates .plate{--c:var(--c-ink,var(--ink))}
.wx-col{display:grid;gap:24px;justify-items:start}
.wx-col>*{margin:0;min-width:0;max-width:min(100%,860px)}
.wx-gate{display:grid;gap:14px;padding:22px;border-radius:8px;width:100%}
.wx-gate .body{margin:0}
/* the addenda, oldest first, on one line */
.wx-line{list-style:none;margin:0;padding:0 0 0 22px;display:grid;gap:36px;border-left:2px solid var(--c-3,var(--rule-2));width:100%}
.wx-add{position:relative;display:grid;gap:10px;min-width:0}
.wx-add>*{margin:0;min-width:0}
/* an addendum's file name, as the agency named it: the sans at a firm weight (round 2: no ALL-CAPS file name in the display face) */
.wx-file{font-family:var(--font);margin:0;font-size:var(--fs-body);font-weight:700;line-height:1.3;letter-spacing:0;color:var(--ink);overflow-wrap:anywhere}
.wx-pin{position:absolute;left:-30px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 3px var(--c-ink,var(--ink))}
.wx-diff{display:grid;gap:8px;padding:14px 16px;border-radius:6px;border-left:3px solid var(--rule-2);background:var(--sheet);min-width:0}
.wx-diff .label,.wx-diff .fine{margin:0}
.wx-diff .fine{color:var(--ink-2)}
.wx-diff ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:var(--fs-small);line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.wx-dated{border-left-color:var(--c-ink,var(--ink));background:var(--c-1,var(--sheet))}
.wx-dated ul{font-size:var(--fs-body);font-weight:600}
.wx-added{border-left-color:var(--sage);background:var(--sage-1)}
.wx-added .label{color:var(--sage-deep)}
.wx-removed{border-left-color:var(--gold);background:var(--gold-1)}
.wx-removed .label{color:var(--gold-deep)}
.wx-quote-block{margin:0;padding:12px 16px;border-left:3px solid var(--c-3,var(--rule-2));background:var(--sheet);color:var(--ink-2);font-size:var(--fs-small);line-height:1.5;display:grid;gap:6px;overflow-wrap:anywhere;min-width:0}
.wx-quote-block p{margin:0}
.wx-since{display:grid;gap:8px;padding-top:24px;border-top:1px solid var(--rule);width:100%}
.wx-since>*{margin:0}
.wx-col .datum a,.wx-col .small a,.wx-col .body a{color:var(--link);text-decoration:none}
@media (hover: hover) and (pointer: fine){.wx-col .datum a:hover,.wx-col .small a:hover,.wx-col .body a:hover{color:var(--link-hover)}}
/* the radar: expected dates on one rail */
.wx-rail{display:grid;gap:8px;margin-top:8px;max-width:760px}
.wx-rail-line{position:relative;height:28px;margin-inline:9px;border-bottom:2px solid var(--c-ink,var(--ink))}
.wx-rail-dot{position:absolute;bottom:-7px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--c-ink,var(--ink));box-shadow:0 0 0 3px var(--c-2,var(--paper))}
.wx-rail-ends{display:flex;justify-content:space-between;font-size:var(--fs-fine);color:var(--ink-2)}
.wx-renewals{list-style:none;margin:0;padding:0;display:grid;gap:16px;width:100%}
.wx-renewal{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:20px;border-radius:8px;border-left:3px solid var(--c,var(--rule-2));min-width:0}
.wx-when{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.wx-when .label{flex-basis:100%}
.wx-when-m{font-size:30px;line-height:1;font-weight:560;letter-spacing:-.02em}
.wx-when-y{font-size:var(--fs-body);color:var(--ink-2)}
.wx-when-to{flex-basis:100%;font-size:var(--fs-fine);color:var(--ink-2)}
.wx-what{display:grid;gap:10px;min-width:0}
.wx-what>*{margin:0;min-width:0}
.wx-passed .wx-renewal{border-left-color:var(--rule-2)}
.wx-passed-h{margin-top:16px}
@media (min-width:768px){
  .wx-renewal{grid-template-columns:120px minmax(0,1fr);gap:24px;padding:24px}
  .wx-when{display:grid;gap:4px;align-content:start;padding-right:16px;border-right:1px solid var(--rule)}
  .wx-passed .wx-renewal{grid-template-columns:minmax(0,1fr)}
}
/* /account/alerts */
.wx-alerts{display:grid;gap:16px;width:100%}
.wx-alert{display:grid;gap:10px;margin:0;padding:20px;border-radius:8px;min-width:0}
.wx-alert legend{padding:0 6px;margin-left:-6px}
.wx-alert>p{margin:0;max-width:62ch}
.wx-alert[disabled]{background:var(--well)}
.wx-states{display:flex;flex-wrap:wrap;gap:10px 18px}
.wx-check{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.wx-check input{width:22px;height:22px;accent-color:var(--ink)}
.wx-watched{display:grid;gap:10px;width:100%}
.wx-watched>*{margin:0}
.wx-watchlist{list-style:none;margin:0;padding:0;display:grid}
.wx-watchlist li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 0;border-top:1px solid var(--rule)}
.wx-watchlist a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:600;text-decoration:none;min-width:0;overflow-wrap:anywhere}
@media (hover: hover) and (pointer: fine){.wx-watchlist a:hover{color:var(--link-hover)}}
.wx-watchlist form{margin:0}
.wx-saved{margin:0}
.wx-watched-h{margin-top:16px}
.wx-what .h-title,.wx-add .h-title,.wx-what .h-block,.wx-head h1{text-wrap:balance}
.wx-how{width:100%}
@media (max-width:374px){.wx-head h1.h-section{font-size:24px}}