/* AD Report # 17: ADUC Extra Console. Hand-written. Three colour styles on <html data-style>, from the
   "AD Report 17 – ADUC + · Colour Schemes" design canvas (Graphite, Classic Server and Harbour Navy). */
:root, [data-style="graphite"] {
  --plus: #FF7B6E;
  --font: "IBM Plex Sans", system-ui, sans-serif;
  --ground: #16181B; --title: #1F2226; --title-ink: #E3E6E9; --bar: #22252A; --pane: #1C1F23; --head: #25292E; --line: #353A41;
  --ink: #E3E6E9; --ink2: #A3AAB2; --muted: #6C737B; --sel: #2B4257; --sel-line: #4F7697; --hover: #2A2E34;
  --accent: #7AA9D6; --accent2: #7AA9D6; --btn-ink: #14181C; --folder: #B9A06A; --ou: #7AA9D6; --user1: #8FB3D6; --user2: #5E87AE;
  --alert-bg: #3B2624; --alert-ink: #F2AE9F; --alert-line: #6E3D35; --warn-bg: #3A3221; --warn-ink: #E8C37C; --warn-line: #5E5030;
  --info-bg: #23303C; --info-ink: #B7CCE0; --ok: #8FC9A3; --dlg: #22252A; --tab-off: #2A2E34; --shadow: rgba(0,0,0,.55);
}
[data-style="classic"] {
  --plus: #C42B1C;
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --ground: #F0F0F0; --title: #FFFFFF; --title-ink: #1B1B1B; --bar: #F9F9F9; --pane: #FFFFFF; --head: #F7F7F7; --line: #D9D9D9;
  --ink: #1B1B1B; --ink2: #5C5C5C; --muted: #8A8A8A; --sel: #CCE8FF; --sel-line: #99D1FF; --hover: #E5F3FF;
  --accent: #005FB8; --accent2: #3A6EA5; --btn-ink: #FFFFFF; --folder: #E8C26A; --ou: #3A7BD5; --user1: #6C9BD2; --user2: #3A6EA5;
  --alert-bg: #FDE7E9; --alert-ink: #A4262C; --alert-line: #F1BBBC; --warn-bg: #FFF4CE; --warn-ink: #7A5500; --warn-line: #EBD58F;
  --info-bg: #EEF4FA; --info-ink: #2F4F6F; --ok: #0F7B0F; --dlg: #F3F3F3; --tab-off: #EAEAEA; --shadow: rgba(0,0,0,.25);
}
[data-style="harbour"] {
  --plus: #FF8A7A;
  --font: Inter, system-ui, sans-serif;
  --ground: #E2E7ED; --title: #1E3048; --title-ink: #FFFFFF; --bar: #F4F6F9; --pane: #FFFFFF; --head: #F0F3F7; --line: #CCD4DE;
  --ink: #1C2733; --ink2: #4D5A68; --muted: #86929F; --sel: #D1E6E7; --sel-line: #7DB2B6; --hover: #E8F1F2;
  --accent: #2B777D; --accent2: #7DB2B6; --btn-ink: #FFFFFF; --folder: #D2B371; --ou: #2B777D; --user1: #6D93B5; --user2: #1E3048;
  --alert-bg: #F6E0DC; --alert-ink: #93372A; --alert-line: #E2B3AA; --warn-bg: #F3EAD0; --warn-ink: #6D5416; --warn-line: #DECB94;
  --info-bg: #E8EEF5; --info-ink: #2E4157; --ok: #2E6D4E; --dlg: #F6F8FB; --tab-off: #E6EBF1; --shadow: rgba(20,30,45,.25);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--ground); color: var(--ink); font: 12.5px/1.4 var(--font); }
body.dragging { cursor: col-resize; user-select: none; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.app { height: 100vh; min-height: 560px; display: flex; flex-direction: column; overflow: hidden; }

.titlebar { flex: none; height: 32px; display: flex; align-items: center; gap: 8px; padding-left: 10px; background: var(--title); color: var(--title-ink); border-bottom: 1px solid var(--line); }
.titlebar .ti { width: 16px; height: 16px; flex: none; }
.titlebar h1 { flex: 1; min-width: 0; margin: 0; font-size: 12.5px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titlebar small { opacity: .85; font-size: 11.5px; }
.titlebar .plus { color: var(--plus); font-weight: 600; }
.wbtn { width: 46px; height: 100%; display: flex; align-items: center; justify-content: center; color: inherit; }
.wbtn svg { width: 10px; height: 10px; }
a.wbtn:hover { background: rgba(127,127,127,.18); }
a.wbtn.x:hover { background: #A35A48; color: #fff; }
.menubar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 2px 6px; background: var(--bar); }
.menubar button { border: 0; background: transparent; padding: 4px 8px; border-radius: 3px; }
.menubar button:hover, .toolbar > button:hover, .home-link:hover { background: var(--hover); }
.menubar .mb-grow { flex: 1; min-width: 12px; }
.mb-refresh { display: inline-flex; align-items: center; gap: 5px; color: var(--ink2); }
.mb-refresh svg { width: 13px; height: 13px; }
.mb-refresh[disabled] { opacity: .6; }
.mb-refresh.spin svg { animation: mb-spin .7s linear infinite; }
@keyframes mb-spin { to { transform: rotate(360deg); } }
.mb-updated { color: var(--ink2); font-size: 11.5px; padding: 0 6px 0 2px; white-space: nowrap; }
@media (max-width: 560px) { .mb-refresh span { display: none; } .mb-updated { font-size: 11px; } }
.toolbar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 3px 8px; background: var(--bar); border-bottom: 1px solid var(--line); }
.toolbar > button { width: 28px; height: 26px; border: 0; background: transparent; border-radius: 3px; display: flex; align-items: center; justify-content: center; color: var(--ink2); }
.toolbar > button[disabled] { opacity: .4; }
.toolbar svg { width: 16px; height: 16px; fill: currentColor; }
.toolbar .sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.toolbar .grow { flex: 1; }
.home-link { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: 3px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.home-link svg { fill: var(--accent); }
.pick, .find { display: flex; align-items: center; gap: 6px; color: var(--ink2); margin-left: 8px; }
.pick select, .find input { height: 24px; border: 1px solid var(--line); border-radius: 3px; padding: 0 6px; background: var(--pane); color: var(--ink); }
.find input { width: 190px; max-width: 40vw; padding: 0 8px; }

.loading { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; color: var(--ink2); font-size: 13px; text-align: center; }
.loading[hidden], .panes[hidden], .empty[hidden], .dlg-back[hidden] { display: none; }
.panes { flex: 1; min-height: 0; display: flex; padding: 4px; }
.tree, .list { background: var(--pane); border: 1px solid var(--line); }
.tree { flex: none; width: 300px; overflow: auto; padding: 0 0 4px; }
.tree-bar { position: sticky; top: 0; z-index: 1; display: flex; gap: 4px; padding: 4px 6px; background: var(--pane); border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.tree-bar button { border: 1px solid var(--line); background: var(--head); border-radius: 3px; padding: 2px 8px; font-size: 11.5px; color: var(--ink2); }
.tree-bar button:hover { background: var(--hover); color: var(--ink); }
.split { flex: none; width: 6px; border: 0; padding: 0; background: transparent; cursor: col-resize; }
.split:hover, .split:focus-visible { background: var(--sel-line); outline: none; }
.list { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.tr { display: flex; align-items: center; height: 22px; padding-right: 8px; white-space: nowrap; }
.tw { width: 16px; height: 16px; flex: none; padding: 0; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; color: var(--ink2); }
.tn { display: flex; align-items: center; gap: 5px; height: 20px; padding: 0 5px 0 3px; border: 1px solid transparent; background: transparent; border-radius: 2px; white-space: nowrap; cursor: default; color: var(--ink); }
button.tn:hover { background: var(--hover); }
.tn.sel { background: var(--sel); border-color: var(--sel-line); }
.tn.dead { color: var(--muted); }
.tn.dead .ic { opacity: .5; }
.tb-badge { margin-left: 4px; min-width: 16px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--alert-bg); color: var(--alert-ink); font-size: 10.5px; font-weight: 600; line-height: 15px; text-align: center; }
.tb-badge.warn { background: var(--warn-bg); color: var(--warn-ink); }
.tb-badge + .tb-badge { margin-left: 3px; }
.ic { flex: none; display: block; }

.list-head { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; padding: 5px 10px; border-bottom: 1px solid var(--line); color: var(--ink2); }
.ou-alerts { display: flex; gap: 6px; flex-wrap: wrap; }
.lv-wrap { flex: 1; min-height: 0; overflow: auto; }
.lv { width: 100%; border-collapse: collapse; table-layout: fixed; }
.lv th { position: sticky; top: 0; z-index: 1; background: var(--head); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 0; text-align: left; font-weight: 400; height: 24px; }
.lv th button { width: 100%; height: 24px; border: 0; background: transparent; text-align: left; padding: 0 8px 0 3px; white-space: nowrap; overflow: hidden; }
.lv th button:hover { background: var(--hover); }
.lv .ar { color: var(--accent); font-size: 9px; }
.lv .c-ic { width: 24px; padding: 0 0 0 5px; border-right: 0; }
.lv th.fill, .lv td.fill { border-right: 0; padding: 0; }
.lv th button.grip { position: absolute; top: 0; right: 0; width: 7px; height: 24px; border: 0; padding: 0; background: transparent; cursor: col-resize; z-index: 2; }
.lv th button.grip:hover, .lv th button.grip:focus-visible { background: var(--sel-line); outline: none; }
.lv td { height: 22px; padding: 0 8px 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv tr.lr[tabindex] { cursor: pointer; }
.lv tr.lr:hover td { background: var(--hover); }
.lv tr.lr.sel td { background: var(--sel); }
.lv tr.lr.dead td { color: var(--muted); cursor: default; }
.lv tr.lr.dead:hover td { background: transparent; }
.lv tr.lr.dead .ic { opacity: .5; }
.chip { display: inline-block; padding: 0 7px; border-radius: 9px; font-size: 11px; font-weight: 600; line-height: 17px; white-space: nowrap; }
.chip.alert { background: var(--alert-bg); color: var(--alert-ink); }
.chip.warn { background: var(--warn-bg); color: var(--warn-ink); }
.chip.off, .chip.none { background: var(--tab-off); color: var(--ink2); font-weight: 400; }
.chip.ok { color: var(--ok); padding-left: 0; }
.empty { padding: 18px 12px; color: var(--ink2); }
.lv-foot { flex: none; padding: 4px 10px; border-top: 1px solid var(--line); background: var(--head); color: var(--ink2); }
.statusbar { flex: none; height: 22px; display: flex; gap: 14px; align-items: center; padding: 0 10px; border-top: 1px solid var(--line); background: var(--bar); color: var(--ink2); white-space: nowrap; overflow: hidden; }

/* Properties pop-up */
.dlg-back { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.28); }
.dlg { width: 880px; max-width: 100%; height: min(760px, 92vh); display: flex; flex-direction: column; background: var(--dlg); color: var(--ink); border: 1px solid var(--sel-line); box-shadow: 0 16px 44px var(--shadow); }
.dlg-bar { flex: none; height: 32px; display: flex; align-items: center; justify-content: space-between; padding-left: 12px; background: var(--title); color: var(--title-ink); border-bottom: 1px solid var(--line); }
.dlg-bar { cursor: move; user-select: none; touch-action: none; }
.dlg-bar button { cursor: default; }
body.dragging-dlg { user-select: none; cursor: move; }
.dlg-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlg-bar button { width: 44px; height: 32px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; color: inherit; }
.dlg-bar button:hover { background: #A35A48; color: #fff; }
.dlg-bar svg { width: 10px; height: 10px; }
.dlg-tabs { flex: none; display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 12px 0; }
.dlg-tabs button { padding: 5px 11px; border: 1px solid var(--line); background: var(--tab-off); margin-bottom: -1px; cursor: pointer; }
.dlg-tabs button[aria-selected="true"] { background: var(--pane); border-bottom-color: var(--pane); font-weight: 600; }
.tab-n { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 8px; font-size: 10.5px; line-height: 15px; text-align: center; }
.tab-n.alert { background: var(--alert-bg); color: var(--alert-ink); } .tab-n.warn { background: var(--warn-bg); color: var(--warn-ink); }
.dlg-body { flex: 1; min-height: 0; overflow: auto; margin: 0 12px; padding: 16px; border: 1px solid var(--line); background: var(--pane); }
.dlg-body h3 { margin: 16px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.dlg-body h3:first-child { margin-top: 0; }
.dlg-btns { flex: none; display: flex; justify-content: flex-end; gap: 6px; padding: 10px 12px; }
.dlg-btns button { min-width: 84px; height: 28px; border: 1px solid var(--line); background: var(--pane); border-radius: 4px; }
.dlg-btns button.def { border-color: var(--accent); background: var(--accent); color: var(--btn-ink); }
.sum-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sum-name { font-size: 16px; font-weight: 600; word-break: break-all; }
.sum-sub { color: var(--ink2); }
.finds { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
li.find { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; border: 1px solid; border-radius: 4px; }
li.find b { flex: none; width: 58px; }
li.find.alert { background: var(--alert-bg); color: var(--alert-ink); border-color: var(--alert-line); }
li.find.warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
li.find.info { background: var(--info-bg); color: var(--info-ink); border-color: transparent; }
.ok-line { color: var(--ok); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; margin: 4px 0 6px; }
.facts > div { display: flex; flex-direction: column; gap: 1px; padding-bottom: 6px; border-bottom: 1px solid var(--line); min-width: 0; }
.facts .k { color: var(--ink2); font-size: 11px; }
.facts .v { word-break: break-word; }
.passed { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
.passed li { display: flex; gap: 7px; align-items: flex-start; }
.passed li .si { margin-top: 1px; }
.passed li.no { color: var(--alert-ink); }
/* status icons: a filled circle with a white mark */
.si { display: inline-flex; flex: none; width: 16px; height: 16px; vertical-align: -3px; }
.si svg { display: block; }
.si-ok circle { fill: #2E8B4F; } .si-fail circle { fill: #C63D2F; } .si-info circle { fill: #8A939C; } .si-q circle { fill: #D9822B; } .si-wfail circle { fill: #C9971C; }
.si-text { display: inline-flex; gap: 6px; align-items: flex-start; }
.si-text .si { margin-top: 1px; }
.tbl th.th-st, .tbl td.td-st { width: 1%; white-space: nowrap; text-align: left; padding-right: 12px; }
.tbl td.td-st .si-text { text-align: left; white-space: normal; min-width: 180px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.open-line { margin: 16px 0 0; }
.link { border: 0; background: none; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; }
.kv { display: grid; grid-template-columns: minmax(140px, 38%) minmax(0, 1fr); gap: 6px 14px; }
.kv .k { color: var(--ink2); word-break: break-word; }
.kv .v { word-break: break-word; user-select: text; }
.kv .v.unset { color: var(--muted); }
.none { color: var(--ink2); margin: 0 0 8px; }
.tbl { overflow-x: auto; margin-bottom: 4px; }
.tbl table { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { text-align: left; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font-weight: 600; color: var(--ink2); white-space: nowrap; }
.tbl td { overflow-wrap: break-word; white-space: pre-line; }
.tbl td.st-pass { color: var(--ok); font-weight: 600; }
.tbl td.st-fail { color: var(--alert-ink); font-weight: 600; }
.tbl td.st-warn { color: var(--warn-ink); font-weight: 600; }
.tbl td.st-off { color: var(--ink2); }

/* Group Policy pane, right of the list: the GPOs that apply to the container shown, highest precedence first */
.gp[hidden], .split[hidden], .gp-card[hidden] { display: none; }
.gp { flex: none; width: 320px; display: flex; flex-direction: column; background: var(--pane); border: 1px solid var(--line); min-width: 0; }
.gp-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 10px; border-bottom: 1px solid var(--line); color: var(--ink2); }
.gp-count { min-width: 18px; padding: 0 6px; border-radius: 9px; background: var(--head); border: 1px solid var(--line); font-size: 11px; line-height: 16px; text-align: center; }
.gp-count:empty { display: none; }
.gp-body { flex: 1; min-height: 0; overflow: auto; padding: 6px 0 8px; }
.gp-sub p { margin: 0 10px 6px; color: var(--ink2); font-size: 11.5px; }
.gp-sub p.gp-note { padding: 5px 8px; border-radius: 3px; background: var(--info-bg); color: var(--info-ink); }
.gp-list { list-style: none; margin: 0; padding: 0; }
.gp-row { display: flex; gap: 8px; align-items: flex-start; padding: 5px 10px; border-top: 1px solid transparent; border-bottom: 1px solid transparent; cursor: default; }
.gp-row:hover, .gp-row:focus-visible { background: var(--hover); }
.gp-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.gp-n { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--sel); color: var(--ink); border: 1px solid var(--sel-line); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.gp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gp-name { display: flex; align-items: center; gap: 5px; min-width: 0; }
.gp-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-meta { color: var(--ink2); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.gp-tag { padding: 0 6px; border-radius: 8px; background: var(--tab-off); color: var(--ink2); font-size: 10.5px; line-height: 15px; }
.gp-tag.enf { background: var(--info-bg); color: var(--info-ink); font-weight: 600; }
.gp-tag.warn { background: var(--warn-bg); color: var(--warn-ink); }
.gp-tag.bad { background: var(--alert-bg); color: var(--alert-ink); }
.gp-row.off .gp-n { background: transparent; border-color: var(--line); color: var(--muted); }
.gp-row.off .gp-name { color: var(--muted); }
.gp-row.off .ic { opacity: .5; }
.gp-none { padding: 6px 10px; color: var(--ink2); }
#gp-skip h4 { margin: 12px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.gp-foot { flex: none; padding: 4px 10px; border-top: 1px solid var(--line); background: var(--head); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tb-gp[aria-pressed="true"] { background: var(--sel); color: var(--ink); }
/* the GPO's hover card */
.gp-card { position: fixed; z-index: 8; width: 380px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto; padding: 12px 14px; background: var(--dlg); color: var(--ink); border: 1px solid var(--sel-line); border-radius: 4px; box-shadow: 0 12px 32px var(--shadow); pointer-events: none; }
.gc-head { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 8px; }
.gc-head .ic { margin-top: 2px; }
.gc-name { font-size: 13.5px; font-weight: 600; word-break: break-word; }
.gc-sub { color: var(--ink2); font-size: 11.5px; }
.gc-desc { margin: 0 0 10px; padding: 6px 8px; border-left: 3px solid var(--accent); background: var(--pane); }
.gc-warn { margin: 0 0 10px; padding: 6px 8px; border-radius: 3px; background: var(--warn-bg); color: var(--warn-ink); }
.gc-kv { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px 10px; }
.gc-kv .k { color: var(--ink2); }
.gc-kv .v { word-break: break-word; }
.gc-kv .v.bad, .gp-card .bad { color: var(--alert-ink); }
.gc-kv .v.warn { color: var(--warn-ink); }
.gp-card code { font: 11px/1.4 Consolas, "Cascadia Mono", monospace; color: var(--ink2); word-break: break-all; }
.gp-card h5 { margin: 12px 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.gc-ext { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.gc-ext li { display: flex; gap: 5px; padding: 0 7px; border-radius: 8px; background: var(--tab-off); font-size: 11px; line-height: 17px; }
.gc-ext b { font-weight: 600; }
.gc-set { margin: 0; padding-left: 16px; color: var(--ink2); }
.gc-set li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-set li.more { list-style: none; margin-left: -16px; font-style: italic; }
.gc-none { margin: 0; color: var(--ink2); }

.gc-hint { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--line); color: var(--accent); font-size: 11.5px; }
.gp-row { cursor: pointer; }

/* GPO report window: GPMC's report for one GPO, its sections as <details>, in the current style */
.dlg.gr { width: 960px; }
.gr-tools { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; }
.gr-sub { flex: 1; min-width: 0; color: var(--ink2); }
.gr-tools button { height: 24px; padding: 0 10px; border: 1px solid var(--line); border-radius: 3px; background: var(--pane); color: var(--ink); font-size: 11.5px; display: inline-flex; align-items: center; text-decoration: none; cursor: pointer; }
.gr-tools button:hover { background: var(--hover); }
.gr-body-wrap { padding: 12px 14px; }
.gr-wait { margin: 0; color: var(--ink2); }
.gr-sec { margin: 0 0 4px; }
.gr-sec > summary { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 3px; background: var(--head); cursor: pointer; list-style: none; font-weight: 600; }
.gr-sec > summary::-webkit-details-marker { display: none; }
.gr-sec > summary::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent var(--ink2); transition: transform .12s; flex: none; }
.gr-sec[open] > summary::before { transform: rotate(90deg); }
.gr-sec > summary:hover { background: var(--hover); }
.gr-l0 { margin-bottom: 10px; }
.gr-l0 > summary { background: var(--sel); border-color: var(--sel-line); font-size: 13px; }
.gr-l2 > summary, .gr-l3 > summary, .gr-l4 > summary { font-weight: 500; background: transparent; }
.gr-body { padding: 6px 0 6px 16px; overflow-wrap: anywhere; }
.gr-body .he4i { margin: 2px 0 8px; }
.gr-tbl { overflow-x: auto; margin: 4px 0 8px; }
.gr-body table { width: 100%; border-collapse: collapse; }
.gr-body th, .gr-body td { text-align: left; vertical-align: top; padding: 4px 10px 4px 0; border-bottom: 1px solid var(--line); }
.gr-body th { font-weight: 600; color: var(--ink2); white-space: nowrap; }
.gr-body table.info td:first-child[scope="row"], .gr-body table.info tr > td:first-child:not(:only-child) { color: var(--ink2); width: 34%; }
.gr-body table.subtable, .gr-body table.subtable_frame { margin: 2px 0 6px; background: var(--ground); border: 1px solid var(--line); }
.gr-body table.subtable td, .gr-body table.subtable_frame td { padding: 3px 8px; font-size: 12px; }
.gr-body td > .gr-tbl { margin: 0; }
.gr-body b { display: inline-block; margin-top: 6px; }
.gr-explain-btn { border: 0; background: none; padding: 0; color: var(--accent); text-align: left; text-decoration: underline dotted; text-underline-offset: 2px; cursor: pointer; }
.gr-explain { margin: 6px 0 4px; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--info-bg); color: var(--info-ink); white-space: pre-line; }
.gr-ex-path { font-weight: 600; }
.gr-ex-sup { margin: 2px 0 6px; font-size: 11.5px; opacity: .85; }

@media (max-width: 820px) {
  .app { height: auto; min-height: 100vh; }
  .titlebar small, .home-link span { display: none; }
  .panes { flex-direction: column; gap: 4px; }
  .tree { width: auto !important; height: 300px; }
  .split { display: none; }
  .gp { width: auto !important; max-height: 420px; }
  .list { height: 520px; flex: none; }
  .facts, .passed { grid-template-columns: minmax(0, 1fr); }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
  .kv .v { margin-bottom: 6px; }
  .dlg-back { padding: 0; }
  .dlg { height: 100vh; max-height: none; }
}