/* DEBRIEF: the results screen's debrief (ui/debrief.js, in #rExtra): the observation, the timeline, hull lost by source,
   the pinned goal, the ship's tip, Retry this loadout and Copy diagnostics. Colours are the page's tokens (styles.css
   :root): cyan for the timeline's clock, orange for hull lost, gold only for a goal done (a reward) */
.dbf{display:grid;gap:8px;padding:10px 12px 12px;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.025);text-align:left}
.dbf-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.dbf-head h3{margin:0;font:9px/1.3 var(--pix);letter-spacing:.08em;color:var(--dim);text-transform:uppercase}
.dbf-head small{font-size:12px;color:var(--faint)}
.dbf p{margin:0}   /* (a .panel p is dim with a bottom margin: the rules below are scoped to .dbf to win) */
.dbf .dbf-obs{padding:7px 10px;border-radius:10px;border-left:3px solid var(--bronze);background:rgba(243,196,142,.07);font-size:15px;font-weight:600;color:var(--ink)}
.dbf .dbf-obs.k-hull{border-left-color:var(--orange);background:rgba(255,176,61,.07)}
.dbf .dbf-obs.k-union,.dbf .dbf-obs.k-clean,.dbf .dbf-obs.k-late{border-left-color:var(--cyan);background:rgba(61,242,255,.05)}
.dbf-tl{list-style:none;margin:0;padding:0;display:grid;gap:1px;font-size:14px}
.dbf-tl li{display:grid;grid-template-columns:3.6em 1fr;gap:8px;align-items:baseline;padding:3px 8px;border-radius:6px}
.dbf-tl li:nth-child(odd){background:rgba(255,255,255,.025)}
.dbf-tl time{font:9px/1.6 var(--pix);color:var(--cyan);font-variant-numeric:tabular-nums}
.dbf-tl span{color:var(--ink)}
.dbf-tl .k-enc span,.dbf-tl .k-boss span{color:var(--dim)}
.dbf-tl .k-death span,.dbf-tl .k-revive span{color:var(--orange)}
.dbf-tl .k-clear span,.dbf-tl .k-union span{font-weight:700}
.dbf .dbf-none{font-size:13px;color:var(--faint)}
.dbf .dbf-sub{font:8px/1.3 var(--pix);letter-spacing:.06em;color:var(--faint);text-transform:uppercase}
.dbf-hull{list-style:none;margin:-2px 0 0;padding:0;display:grid;gap:3px}
.dbf-hull li{display:flex;justify-content:space-between;gap:10px;padding:3px 8px;border-radius:6px;font-size:13px;color:var(--dim);
  background:linear-gradient(90deg,rgba(255,176,61,.2) var(--p,0%),rgba(255,255,255,.02) var(--p,0%))}
.dbf-hull b{color:var(--ink);font-variant-numeric:tabular-nums}
.dbf .dbf-goal{padding:6px 10px;border-radius:10px;border:1px solid rgba(61,242,255,.26);background:rgba(61,242,255,.04);font-size:13px;color:var(--ink)}
.dbf .dbf-goal.done{border-color:rgba(255,225,77,.4);background:rgba(255,225,77,.06);color:var(--yellow)}
.dbf .dbf-goal.nofit{border-style:dashed}
.dbf .dbf-tip{display:grid;gap:1px;font-size:13px;color:var(--dim)}
.dbf-tip b{font:8px/1.5 var(--pix);letter-spacing:.06em;color:var(--bronze);text-transform:uppercase}
.dbf-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:2px}
.dbf-retry{min-height:44px;font-size:15px;padding:0 16px}
.dbf .dbf-load{font-size:12px;color:var(--faint)}
.dbf .dbf-status{font-size:12px;color:var(--dim);min-height:0}
.dbf .dbf-status:empty{display:none}
.dbf-json{width:100%;min-height:96px;resize:vertical;border-radius:8px;border:1px solid var(--line);background:rgba(5,5,12,.8);color:var(--dim);
  font:11px/1.35 ui-monospace,Menlo,Consolas,monospace;padding:6px 8px;-webkit-user-select:text;user-select:text}
@media (max-width:520px){
  .dbf{padding:8px 9px 10px}
  .dbf .dbf-obs{font-size:14px}
  .dbf-tl{font-size:13px}
  .dbf-tl li{grid-template-columns:3.4em 1fr;padding:3px 6px}
}
@media (max-height:560px){
  .dbf{gap:6px;padding:8px 10px}
  .dbf .dbf-obs{font-size:14px;padding:5px 9px}
  .dbf-tl{font-size:13px}
  .dbf-tl li{padding:2px 6px}
  .dbf-retry{min-height:40px}
}