/* Compare screen */
.cmp-page{max-width:none;padding-top:18px}
.cmp-actions{display:flex;gap:8px;flex-wrap:wrap}
.cmp-controls{display:flex;gap:18px 32px;align-items:flex-start;flex-wrap:wrap;margin-bottom:12px}
.cmp-checks{display:flex;gap:4px 24px;flex-wrap:wrap;align-items:center;padding-top:20px}
.cmp-notes{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.legend{font-size:14px;color:var(--ink-2)}
.cmp-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);overflow:clip}
table.cmp{font-size:14px;table-layout:fixed}
table.cmp th,table.cmp td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left;overflow-wrap:anywhere}
table.cmp thead th{position:sticky;top:var(--header-h);z-index:6;background:#fff;border-bottom:2px solid var(--line-2);font-weight:400}
table.cmp th.rowhead{width:190px;position:sticky;left:0;z-index:3;background:#fff;font-weight:600;border-right:1px solid var(--line)}
table.cmp thead th.rowhead{z-index:8;vertical-align:bottom}
.cmp-count{font-weight:500;color:var(--muted);font-size:13px}
table.cmp tbody tr:hover td,table.cmp tbody tr:hover th.rowhead{background:#fafcfe}
table.cmp th.ph{padding-top:12px}
table.cmp th.ph.base{background:var(--blue-bg)}
.ph-top{display:flex;align-items:baseline;gap:8px;margin-bottom:3px}
.ph .yr{font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--navy)}
.ph .tagtxt{font-weight:650;color:var(--navy);font-size:13px}
.ph-name{display:block;font-weight:650;color:var(--navy);text-decoration:none;line-height:1.3}
.ph-name:hover{text-decoration:underline}
.ph-sub{color:var(--muted);font-size:13px;margin-top:2px}
.ph-acts{display:flex;flex-wrap:wrap;gap:2px;margin-top:6px;margin-left:-8px}
th.ph.dragging{opacity:.5}
th.ph.dropping{outline:2px dashed var(--blue);outline-offset:-3px}
th.ph[draggable="true"]{cursor:grab}
tr.sec th{background:var(--tint);padding:0;border-bottom:1px solid var(--line-2);position:static}
.secbtn{display:flex;align-items:center;gap:8px;width:100%;padding:9px 12px;background:none;border:0;font-weight:650;font-size:14px;text-align:left}
.secbtn:hover{background:var(--tint-2)}
.secbtn .icon{width:16px;height:16px;transition:transform .15s}
.secbtn[aria-expanded="false"] .icon{transform:rotate(-90deg)}
tr.grp th{background:#fafbfd;font-weight:600;color:var(--ink-2);font-size:13px;padding:7px 12px}
table.cmp td.c-better{background:var(--good-bg)}
table.cmp td.c-worse{background:var(--bad-bg)}
table.cmp td.c-blank{background:#fafbfd}
.val.v-mixed{}
.srcline{font-size:12.5px;color:var(--muted);margin-top:3px}
.srcline a{color:var(--muted)}
.srcline .icon{width:12px;height:12px}
.v-print{display:none}
.cmp-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.cmp-pager .pos{font-weight:600}
@media (max-width:899px){
  .cmp-page{padding-left:10px;padding-right:10px}
  table.cmp{min-width:0}
  table.cmp th.rowhead{width:34%;position:static}
  table.cmp th,table.cmp td{padding:8px 8px}
  table.cmp th.ph{min-width:0}
  .ph .yr{font-size:17px}
  .cmp-controls{gap:10px}
  .cmp-checks{padding-top:0;gap:0 18px}
  .cmp-controls .hint{display:none}
  .cmp-controls{padding:12px 14px}
  .ph-top{flex-direction:column;gap:0;margin-bottom:2px}
  .ph .yr{white-space:nowrap}
  table.cmp{font-size:13px}
  table.cmp th.rowhead{width:31%}
  .ph-name{font-size:13px}
  .ph-acts{margin-left:-6px}
  .note{font-size:13px;padding:10px 12px}
  .legend{font-size:13px}
  table.cmp thead th{top:var(--header-h)}
}

.why{display:block;font-size:12.5px;line-height:1.35;color:var(--muted);font-weight:400;margin-top:3px}
.ph-code{font-size:12.5px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
table.cmp td.c-equiv{background:#f7f9fc}

/* "Why" under a colored value: the explanation is one click away, and Explain every change opens them all */
.why-short{display:inline-block;margin-left:6px;font-size:12px;color:var(--muted);font-weight:400}
.why-d{margin-top:2px}
.why-d summary{display:inline;cursor:pointer;font-size:12.5px;color:var(--blue);font-weight:500;list-style:none}
.why-d summary::-webkit-details-marker{display:none}
.why-d summary:hover{text-decoration:underline}
.why-d[open] summary{margin-bottom:0}
@media print{.why-d>summary{display:none}}