/* Domains (domains.js): the customer tab, the Domains page and the drawer. Table, cards and drawer layout come from m365.css (the m3-* classes); only what is specific to domains is here.
   Grades are always shown with their word, and every status has a word, so nothing depends on colour alone. Both themes use the app's variables. */
.dm-chip{--chip:22px;vertical-align:-5px;margin-right:8px;position:relative}
.dm-chip b{font:700 8px/1 var(--mono);letter-spacing:0;color:var(--acc)}
.lp-chip.dm-chip{vertical-align:baseline;margin-right:0}
.ph .lp-chip.dm-chip,.sh .lp-chip.dm-chip{vertical-align:-5px;margin-right:8px}
.dm-grade{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.dm-grade b{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 4px;border-radius:5px;font:700 14px/1 var(--mono);border:1.5px solid currentColor;box-sizing:border-box}
.dm-grade span{font:600 11.5px var(--font);color:var(--ink2)}
.dm-g-ok{color:var(--ok)} .dm-g-warn{color:var(--warn)} .dm-g-crit{color:var(--crit)} .dm-g-mute{color:var(--ink3)}
.dm-g-ok b{background:var(--okBg)} .dm-g-warn b{background:var(--warnBg)} .dm-g-crit b{background:var(--critBg)}
.dm-card{text-align:left;cursor:pointer;font:inherit;color:inherit;border-top:0;border-left:0}
.dm-card:hover{background:var(--sel)}
.dm-card.on{box-shadow:inset 0 -2px 0 var(--acc)}
.dm-card:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.dm-add{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.dm-add input{flex:1 1 260px;max-width:380px}
.dm-sug{margin:12px 0 4px;max-width:100ch}
.dm-sugl{display:flex;gap:6px;flex-wrap:wrap}
.dm-settings{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 8px}
.dm-t td.n{text-align:right}
.dm-panel{width:min(560px,100%)}
.dm-row{border:1px solid var(--bd);border-left-width:3px;border-radius:var(--r);background:var(--bg);padding:8px 12px;margin:0 0 8px;display:grid;gap:6px}
.dm-s-bad{border-left-color:var(--crit)} .dm-s-warn{border-left-color:var(--warn)} .dm-s-good{border-left-color:var(--ok)} .dm-s-info,.dm-s-unknown{border-left-color:var(--bd2)}
.dm-rh{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.dm-rt{font-size:13px;overflow-wrap:anywhere;min-width:0}
.dm-rd{margin:0;font-size:12.5px;color:var(--ink2);overflow-wrap:anywhere}
.dm-fix{border-top:1px dashed var(--bd);padding-top:6px;display:grid;gap:6px}
.dm-fixt{margin:0;font-size:12.5px}
.dm-rec{border:1px solid var(--bd2);border-radius:var(--r);background:var(--sf);padding:8px 10px;display:grid;gap:6px}
.dm-recrow{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:8px;align-items:start}
.dm-recrow:last-child{grid-template-columns:auto}
.dm-recrow code{overflow-wrap:anywhere;word-break:break-all;font-size:11.5px}
.dm-guide{margin:4px 0 0;padding-left:20px;display:grid;gap:5px;font-size:12.5px}
.dm-okd summary{cursor:pointer;margin-bottom:8px}
.dm-set{display:grid;gap:6px}
.dm-chk{display:flex;gap:8px;align-items:center;font-size:12.5px}
.dm-hist{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:12.5px}
.dm-ba{display:block;overflow-wrap:anywhere}
.dm-ba code{font-size:11px}
.lp-domains .lp-sub{overflow-wrap:anywhere}
@media (max-width:719px){
  .dm-add input{flex:1 1 100%;max-width:none}
  .dm-recrow{grid-template-columns:minmax(0,1fr) auto}
  .dm-recrow .i3{grid-column:1/-1}
  .dm-panel{max-height:92vh}
  .dm-t td .dm-grade span{font-size:11px}
}