/* HMG Pre-flight · app-specific styles (the shared shell is hmg-app.css). */
:root { --c-rebuild: #ed1c24; --c-check: #ffb020; --c-info: #5aa9ff; --c-clean: #3f5446; }

.sev-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.sev-dot.s-rebuild { background: var(--c-rebuild); box-shadow: 0 0 8px rgba(237, 28, 36, .7); }
.sev-dot.s-check { background: var(--c-check); box-shadow: 0 0 8px rgba(255, 176, 32, .6); }
.sev-dot.s-info { background: var(--c-info); box-shadow: 0 0 8px rgba(90, 169, 255, .6); }
.sev-dot.s-all { background: linear-gradient(135deg, var(--c-rebuild), var(--c-check) 50%, var(--c-info)); }
.side-card ul { list-style: none; padding: 0; }
.side-card strong { color: var(--text); font-weight: normal; }

/* check settings */
.rules-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.rset-item { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 9px; border: 1px solid var(--line); background: rgba(0, 0, 0, .3); cursor: default; }
.rset-item > span:first-child { font-family: var(--label); letter-spacing: 1px; text-transform: uppercase; font-size: 13px; color: var(--cream); }
.rset-item small { display: block; font-family: var(--body); text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--muted); margin-top: 3px; max-width: 360px; }
.rset-in { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.rset-in input[type=number] { width: 70px; text-align: center; font-size: 16px; font-family: var(--label); }
#sev-enable button { display: inline-flex; align-items: center; }
#sev-enable button[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.rule-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 14px; padding: 14px; border-radius: 9px; border: 1px dashed var(--line-2); background: rgba(0, 0, 0, .25); }
.rp-col h4 { margin: 0 0 8px; font-family: var(--label); text-transform: uppercase; letter-spacing: 1.2px; font-size: 12px; color: var(--cream); }
.rp-col .check { display: flex; padding: 3px 0; font-size: 13px; }
.rp-col .check input:disabled + * { opacity: .5; }

/* verdict */
.headline { font-family: var(--label); font-size: 21px; letter-spacing: .6px; color: var(--cream); margin: 0 0 14px; }
.headline b { color: #fff; font-weight: 600; }
.verdict { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vcard { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; cursor: pointer; text-align: left; background: #101010; transition: transform .12s, border-color .12s; }
.vcard::before { content: ""; position: absolute; inset: 0; opacity: .9; pointer-events: none; }
.vcard > * { position: relative; }
.vcard:hover { transform: translateY(-2px); }
.v-rebuild::before { background: radial-gradient(260px 140px at 0% 0%, rgba(237, 28, 36, .32), transparent 70%); }
.v-check::before { background: radial-gradient(260px 140px at 0% 0%, rgba(255, 176, 32, .24), transparent 70%); }
.v-info::before { background: radial-gradient(260px 140px at 0% 0%, rgba(90, 169, 255, .24), transparent 70%); }
.v-clean { cursor: default; }
.v-clean:hover { transform: none; }
.v-clean::before { background: radial-gradient(260px 140px at 0% 0%, rgba(61, 220, 132, .16), transparent 70%); }
.vcard.active { border-color: currentColor; }
.v-rebuild.active { border-color: var(--c-rebuild); box-shadow: 0 0 0 1px var(--c-rebuild), 0 10px 30px rgba(237, 28, 36, .2); }
.v-check.active { border-color: var(--c-check); box-shadow: 0 0 0 1px var(--c-check); }
.v-info.active { border-color: var(--c-info); box-shadow: 0 0 0 1px var(--c-info); }
.vcard.off { opacity: .4; cursor: default; }
.vtop { display: flex; align-items: baseline; gap: 8px; }
.vcard .n { font-family: var(--display); font-size: 46px; line-height: 1; letter-spacing: .5px; }
.vcard .u { font-family: var(--label); text-transform: uppercase; letter-spacing: 1px; font-size: 12px; color: var(--muted); }
.vcard .l { font-family: var(--label); letter-spacing: 1.4px; text-transform: uppercase; font-size: 14px; margin-top: 6px; font-weight: 600; }
.vcard .cl { color: var(--cream); font-size: 13px; margin-top: 2px; }
.vcard .d { color: var(--muted); font-size: 12px; margin-top: 4px; }
.v-rebuild .n, .v-rebuild .l { color: var(--c-rebuild); }
.v-check .n, .v-check .l { color: var(--c-check); }
.v-info .n, .v-info .l { color: var(--c-info); }
.v-clean .n, .v-clean .l { color: var(--ok); }

/* timeline */
.tl-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.tl-legend { display: flex; gap: 6px; flex-wrap: wrap; }
.lg { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .4); cursor: pointer; color: var(--text); font-size: 12.5px; }
.lg i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid; }
.lg b { font-family: var(--label); font-weight: 600; }
.lg small { color: var(--muted); }
.lg[aria-pressed="false"] { opacity: .4; }
.lg-rebuild i { background: #6a0f13; border-color: var(--c-rebuild); }
.lg-check i { background: #5a4308; border-color: var(--c-check); }
.lg-info i { background: #13304f; border-color: var(--c-info); }
.lg-clean i { background: #243029; border-color: var(--c-clean); }
.tl-zoom { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tl-zoom .btn.ghost { width: 30px; justify-content: center; padding: 4px 0; font-size: 16px; }
.tl-slider { width: 150px; accent-color: var(--red); }
.tl-zlabel { font-family: var(--label); font-size: 12px; letter-spacing: .8px; color: var(--muted); min-width: 104px; text-transform: uppercase; }
.tl-seq { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.tl-seq:empty { display: none; }
.tl-seq-l { font-family: var(--label); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.tl-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .35); }
.tl-chip i { width: 8px; height: 8px; border-radius: 50%; }
.tl-chip.s-rebuild i { background: var(--c-rebuild); } .tl-chip.s-check i { background: var(--c-check); } .tl-chip.s-info i { background: var(--c-info); }

.tl-view { position: relative; overflow: auto; max-height: 380px; border: 1px solid var(--line); border-radius: 10px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 80px), #090909; outline: none; }
.tl-view:focus-visible { border-color: var(--red); }
.tl-canvas { position: relative; min-width: 100%; padding-bottom: 8px; }
.tl-ruler { position: sticky; top: 0; z-index: 3; display: flex; height: 24px; background: linear-gradient(180deg, #161616, #101010); border-bottom: 1px solid var(--line); }
.tl-corner { position: sticky; left: 0; z-index: 4; flex: 0 0 56px; background: #141414; border-right: 1px solid var(--line); font-family: var(--label); font-size: 10px; letter-spacing: 1px; color: var(--gray); display: grid; place-items: center; }
.tl-ticks { position: relative; flex: 0 0 auto; }
.tl-ticks .tk { position: absolute; top: 0; bottom: 0; padding-left: 4px; border-left: 1px solid #333; font-family: var(--mono); font-size: 10px; line-height: 24px; color: var(--muted); white-space: nowrap; }
.tl-lanes { padding-top: 6px; }
.lane { display: flex; margin: 3px 0; }
.lane .lname { position: sticky; left: 0; z-index: 2; flex: 0 0 56px; display: flex; align-items: center; justify-content: center; font-family: var(--label); font-size: 12px; letter-spacing: .6px; color: var(--cream); background: linear-gradient(90deg, #141414, #101010); border-right: 1px solid var(--line); }
.lane.audio .lname { font-size: 10px; color: var(--muted); }
.lane.off .lname { color: var(--gray); text-decoration: line-through; }
.ltrack { position: relative; flex: 0 0 auto; }
.blk { position: absolute; top: 0; bottom: 0; background: linear-gradient(180deg, #2c3a32, #243029); border: 1px solid var(--c-clean); border-radius: 4px; min-width: 2px; cursor: pointer; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.blk.s-rebuild { background: linear-gradient(180deg, #7d141a, #5a0c10); border-color: var(--c-rebuild); }
.blk.s-check { background: linear-gradient(180deg, #6a510c, #4c3906); border-color: var(--c-check); }
.blk.s-info { background: linear-gradient(180deg, #17395d, #102a45); border-color: var(--c-info); }
.blk.muted { background: #1a1a1a; border-color: #333; }
.blk.aud { background: linear-gradient(180deg, #232323, #1b1b1b); border-color: #333; cursor: default; }
.blk.dim { opacity: .22; }
.blk:hover { filter: brightness(1.35); }
.blk.sel { outline: 2px solid #fff; outline-offset: 1px; z-index: 1; }
.blk .bl { position: absolute; left: 6px; right: 6px; top: 3px; font-size: 11px; color: rgba(255, 255, 255, .9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: bold; text-shadow: 0 1px 2px #000; }
.blk .pips { position: absolute; left: 4px; bottom: 3px; display: flex; gap: 3px; }
.blk .pips i { min-width: 8px; height: 8px; border-radius: 4px; font: 700 9px/10px var(--body); font-style: normal; color: #000; text-align: center; padding: 0 3px; }
.blk .pips i:not(:empty) { height: 12px; line-height: 12px; min-width: 14px; border-radius: 6px; }
.p-rebuild { background: var(--c-rebuild); } .p-check { background: var(--c-check); } .p-info { background: var(--c-info); }
.tl-mark { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; transform: rotate(45deg); border: 2px solid #000; cursor: pointer; z-index: 1; }
.tl-mark.s-rebuild { background: var(--c-rebuild); } .tl-mark.s-check { background: var(--c-check); } .tl-mark.s-info { background: var(--c-info); }
.tl-mark.dim { opacity: .25; }
.tl-mini { position: relative; height: 16px; margin-top: 8px; border-radius: 4px; background: #0b0b0b; border: 1px solid var(--line); cursor: pointer; overflow: hidden; }
.tl-mini-track i { position: absolute; top: 3px; bottom: 3px; border-radius: 1px; }
.tl-mini-track i.s-rebuild { background: var(--c-rebuild); } .tl-mini-track i.s-check { background: var(--c-check); } .tl-mini-track i.s-info { background: var(--c-info); }
.tl-mini-win { position: absolute; top: 0; bottom: 0; border: 1px solid var(--cream); background: rgba(255, 237, 223, .08); border-radius: 3px; pointer-events: none; }

/* clip inspector */
.inspector { margin-top: 14px; border: 1px solid var(--line-2); border-radius: 10px; background: linear-gradient(180deg, #181818, #111); padding: 14px 16px; }
.ins-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.ins-k { font-family: var(--label); text-transform: uppercase; letter-spacing: 1.2px; font-size: 11px; color: var(--muted); }
.ins-head h3 { margin: 0; font-size: 17px; color: var(--cream); }
.ins-meta { color: var(--muted); font-size: 12.5px; font-family: var(--mono); }
.ins-meta .path { font-family: var(--body); }
.ins-list { display: grid; gap: 8px; }
.ins-item { display: grid; grid-template-columns: auto 1fr minmax(180px, 280px); gap: 12px; align-items: start; padding: 10px 12px; border-radius: 8px; background: rgba(0, 0, 0, .3); border-left: 3px solid var(--line-2); }
.ins-item.s-rebuild { border-left-color: var(--c-rebuild); } .ins-item.s-check { border-left-color: var(--c-check); } .ins-item.s-info { border-left-color: var(--c-info); }
.ins-txt b { color: var(--cream); } .ins-txt span { color: var(--muted); }
.ins-txt p { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; }

/* issue tabs */
.sev-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.stab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .35); cursor: pointer; font-family: var(--label); letter-spacing: 1px; text-transform: uppercase; font-size: 13.5px; color: var(--muted); }
.stab b { color: var(--cream); font-weight: 600; font-size: 15px; }
.stab small { text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: 11.5px; color: var(--muted); margin-left: 2px; }
.stab:hover { color: var(--cream); }
.stab[aria-selected="true"] { color: #fff; border-color: transparent; }
.stab.st-rebuild[aria-selected="true"] { background: linear-gradient(135deg, rgba(237, 28, 36, .45), rgba(139, 0, 0, .35)); box-shadow: 0 0 0 1px var(--c-rebuild); }
.stab.st-check[aria-selected="true"] { background: linear-gradient(135deg, rgba(255, 176, 32, .35), rgba(120, 80, 0, .3)); box-shadow: 0 0 0 1px var(--c-check); }
.stab.st-info[aria-selected="true"] { background: linear-gradient(135deg, rgba(90, 169, 255, .35), rgba(20, 60, 110, .3)); box-shadow: 0 0 0 1px var(--c-info); }
.stab.st-all[aria-selected="true"] { background: var(--panel-3); box-shadow: 0 0 0 1px var(--line-2); }
.tab-hint { margin-bottom: 12px; }

.rules { display: grid; gap: 10px; }
details.rule { border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, .3); border-left: 3px solid var(--line-2); }
details.rule.s-rebuild { border-left-color: var(--c-rebuild); } details.rule.s-check { border-left-color: var(--c-check); } details.rule.s-info { border-left-color: var(--c-info); }
details.rule > summary { list-style: none; cursor: pointer; padding: 11px 14px; display: flex; gap: 10px; align-items: center; }
details.rule > summary::-webkit-details-marker { display: none; }
details.rule[open] > summary { border-bottom: 1px solid var(--line); }
.chev { width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; margin-left: 6px; }
details[open] > summary .chev { transform: rotate(45deg); }
.pill { font-family: var(--label); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.pill.s-rebuild { background: var(--c-rebuild); color: #fff; }
.pill.s-check { background: var(--c-check); color: #000; }
.pill.s-info { background: var(--c-info); color: #000; }
.rtitle { font-weight: bold; color: var(--cream); }
.rnotes { font-size: 11.5px; color: var(--cream); background: rgba(255, 237, 223, .1); border: 1px solid rgba(255, 237, 223, .25); padding: 1px 8px; border-radius: 999px; }
.rcount { margin-left: auto; color: var(--cream); font-family: var(--label); font-size: 14px; background: rgba(255, 255, 255, .06); border-radius: 999px; padding: 0 10px; }
.rbody { padding: 12px 14px 14px; display: grid; gap: 10px; }
.why-fix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.why-fix p { margin: 0; padding: 10px 12px; border-radius: 8px; background: rgba(255, 255, 255, .025); border: 1px solid var(--line); }
.why-fix b { display: block; color: var(--muted); font-family: var(--label); text-transform: uppercase; letter-spacing: 1.2px; font-size: 11px; margin-bottom: 3px; }
.seq-row { display: grid; grid-template-columns: auto 1fr minmax(180px, 300px); gap: 10px; align-items: center; }
.tc-link { border: 0; background: none; color: var(--cream); font: inherit; cursor: pointer; padding: 0; text-decoration: underline dotted; text-underline-offset: 3px; }
.tc-link:hover { color: var(--red-hi); }
.note-cell { min-width: 200px; }
tr.flash td { background: #3a1010; transition: background .6s; }
.clean { padding: 18px; border: 1px solid #1f6e46; border-radius: 10px; color: var(--ok); font-family: var(--label); letter-spacing: 1px; text-transform: uppercase; background: rgba(61, 220, 132, .05); }
.clean.small { padding: 10px 12px; font-size: 12px; }

/* hand-off */
.handoff { display: grid; gap: 18px; }
.empty { text-align: center; padding: 50px 20px; }
.empty h2 { font-family: var(--display); font-size: 30px; letter-spacing: 1px; margin: 0 0 6px; color: var(--cream); }
.empty .btn { margin-top: 14px; }
#export-sev button { display: inline-flex; align-items: center; }
#export-sev button[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }

/* guide */
.g-sev { font-size: 14px; font-weight: normal; color: var(--muted); display: flex; align-items: center; gap: 10px; margin: 16px 0 8px; }
.g-rule { border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; margin-bottom: 6px; background: rgba(0, 0, 0, .25); }
.g-rule summary { cursor: pointer; color: var(--cream); font-weight: bold; }
.g-rule p { margin: 6px 0 0; color: var(--text); }
.g-rule p b { color: var(--muted); font-family: var(--label); text-transform: uppercase; letter-spacing: 1px; font-size: 11px; margin-right: 4px; }
#view-guide p { margin: 0 0 8px; }

@media (max-width: 1100px) {
  .verdict { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exports { grid-template-columns: 1fr; }
  .why-fix { grid-template-columns: 1fr; }
  .ins-item { grid-template-columns: auto 1fr; }
  .ins-item .note-in { grid-column: 1 / -1; }
  .seq-row { grid-template-columns: 1fr; }
}

/* the printed report: shared document styles live in hmg-doc.css */
@media print { @page { size: letter portrait; margin: 12mm 12mm 16mm; } }

@media (max-width: 720px) {
  .rules-set { grid-template-columns: 1fr; }
  .rset-item { flex-direction: column; align-items: flex-start; }
  .verdict { grid-template-columns: 1fr 1fr; gap: 8px; }
  .vcard .n { font-size: 36px; }
  .tl-zoom { width: 100%; }
  .tl-slider { flex: 1; }
  .tl-zlabel { display: none; }
}
#results { display: grid; gap: 18px; min-width: 0; }