/* ============================================================================
   HitchTable v1 — the reusable dossier data table.

   Consumes the dossier design tokens (--bg / --panel / --line / --accent / --mono
   …) declared by the host page; it defines no colours of its own beyond blends of
   those. Drop this next to hitch-table-v1.js and it themes for free.

   Rules inherited from docs/entity-dossier-template.md §9:
     · no chart library — the in-cell bars are flexbox + gradients on tokens
     · no drop shadows for separation — borders and background steps only
     · no text below 0.7rem
   ========================================================================== */

.ht{position:relative;font-size:15px}

/* ---------------------------------------------------------------- toolbar */
.ht-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:11px}
.ht-search{position:relative;flex:1;min-width:210px;max-width:340px}
.ht-search input{width:100%;background:var(--panel2);border:1px solid var(--line);
  border-radius:100px;padding:8px 32px 8px 34px;color:var(--ink);font-family:var(--sans);
  font-size:0.88rem;font-weight:300;transition:.18s}
.ht-search input:focus{outline:none;border-color:rgba(232,161,60,.5);background:var(--panel)}
.ht-search input::placeholder{color:var(--ink-faint)}
.ht-search .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--ink-faint);font-size:0.85rem;pointer-events:none}
.ht-search .kbd{position:absolute;right:11px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:0.7rem;color:var(--ink-faint);
  border:1px solid var(--line);border-radius:4px;padding:1px 5px;pointer-events:none}
.ht-search input:focus ~ .kbd{opacity:0}

.ht-sp{flex:1}
.ht-btn{font-family:var(--mono);font-size:0.75rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-dim);border:1px solid var(--line);border-radius:100px;padding:7px 13px;
  transition:.16s;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  background:transparent}
.ht-btn:hover{color:var(--ink);border-color:var(--ink-dim)}
.ht-btn.on{color:var(--accent);border-color:rgba(232,161,60,.5);background:rgba(232,161,60,.09)}
.ht-btn .cw{font-size:0.7rem;color:var(--ink-faint)}
.ht-btn.on .cw{color:var(--accent-soft)}
.ht-btn.prime{color:#1a1206;background:var(--accent);border-color:var(--accent)}
.ht-btn.prime:hover{background:var(--accent-soft);color:#1a1206}

/* ------------------------------------------------------------ filter chips */
.ht-chips{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:11px}
.ht-chips:empty{display:none}
.ht-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:0.75rem;padding:5px 6px 5px 11px;border-radius:100px;
  color:var(--accent-soft);border:1px solid rgba(232,161,60,.34);background:rgba(232,161,60,.08)}
.ht-chip .cl{color:var(--ink-faint);text-transform:uppercase;letter-spacing:.09em;font-size:0.7rem}
.ht-chip .x{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;
  color:var(--accent-soft);font-size:0.8rem;line-height:1;transition:.15s}
.ht-chip .x:hover{background:rgba(232,161,60,.22);color:var(--ink)}
.ht-chip.clear{color:var(--ink-dim);border-color:var(--line);background:transparent;padding:5px 11px}
.ht-chip.clear:hover{color:var(--ink);border-color:var(--ink-dim)}

/* ------------------------------------------------------------------ table */
.ht-scroll{border:1px solid var(--line);border-radius:12px;background:var(--panel);
  overflow:auto;max-height:var(--ht-max,74vh);position:relative}
.ht-scroll::-webkit-scrollbar{width:11px;height:11px}
.ht-scroll::-webkit-scrollbar-track{background:transparent}
.ht-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:100px;
  border:3px solid var(--panel)}
.ht-scroll::-webkit-scrollbar-thumb:hover{background:var(--ink-faint)}

/* table-layout:fixed is load-bearing, not cosmetic. Under the default `auto`, a
   nowrap cell EXPANDS its column instead of ellipsing, so one long PSC name blew
   the Order column to 925px and the table to 2230px inside a 1319px box. Fixed
   makes the declared column widths authoritative and lets the clamps do their job. */
table.ht-t{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;
  font-size:0.92rem}

/* head — ONE control per column. Clicking the header opens a panel that carries
   both the sort direction and the filter for that column. The earlier split (label
   sorts, separate funnel icon filters) put two different affordances in a 19px gap
   and read as clutter. */
.ht-t thead th{position:sticky;top:0;z-index:5;background:var(--panel2);
  border-bottom:1px solid var(--line);padding:0;text-align:left;
  font-weight:400;vertical-align:bottom;white-space:nowrap}
.ht-t thead th::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--line)}
.ht-th{display:flex;align-items:center;gap:7px;padding:11px 12px 10px;width:100%;
  transition:.15s;font-family:var(--mono);font-size:0.72rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-faint);text-align:left}
.ht-th:hover{color:var(--ink);background:var(--hover)}
.ht-th.act{color:var(--accent)}
.ht-th .lb{overflow:hidden;text-overflow:ellipsis}
.ht-th .cr{font-size:0.7rem;line-height:1;color:var(--accent);flex:none}
.ht-th .ord{font-size:0.7rem;color:var(--accent);opacity:.75;flex:none}
.ht-th .fdot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
.ht-t th.r .ht-th{flex-direction:row-reverse;text-align:right}
.ht-t td.r{text-align:right}

/* summary metrics — above the table, because they frame it rather than close it */
.ht-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line);border-radius:11px;overflow:hidden;
  margin-bottom:13px}
.ht-stat{background:var(--panel);padding:12px 15px;display:flex;flex-direction:column;gap:5px}
.ht-stat .sl{font-family:var(--mono);font-size:0.72rem;text-transform:uppercase;
  letter-spacing:.11em;color:var(--ink-faint)}
.ht-stat .sv{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.24rem;
  color:var(--ink);line-height:1}
.ht-stat.key{background:linear-gradient(160deg,rgba(232,161,60,.10),rgba(232,161,60,.02))}
.ht-stat.key .sv{color:var(--accent)}
.ht-stat .ss{font-family:var(--mono);font-size:0.73rem;color:var(--ink-dim)}
.ht-stat .track{height:4px;border-radius:100px;background:var(--line-soft);overflow:hidden;
  margin-top:2px}
.ht-stat .fill{height:100%;border-radius:100px;
  background:linear-gradient(90deg,rgba(232,161,60,.5),var(--accent))}

/* body */
.ht-t tbody td{padding:10px 12px;border-bottom:1px solid var(--line-soft);
  vertical-align:top;position:relative}
.ht-t tbody tr:nth-child(4n+3) td{background:var(--row)}
.ht-t tbody tr.ht-row{transition:background .13s}
.ht-t tbody tr.ht-row:hover td{background:var(--panel2)}
.ht-t tbody tr.ht-row td:first-child::before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:2px;background:var(--accent);transform:scaleY(0);transform-origin:50% 50%;transition:.18s}
.ht-t tbody tr.ht-row:hover td:first-child::before,
.ht-t tbody tr.ht-row.sel td:first-child::before{transform:scaleY(1)}
.ht-t tbody tr.ht-row.sel td{background:rgba(232,161,60,.055)}
.ht-t.compact tbody td{padding:6px 12px}
.ht-t.compact .ht-ti .sub{display:none}

/* selection + expand */
.ht-t .cx{width:34px;padding-left:12px;padding-right:0}
.ht-cb{width:15px;height:15px;border-radius:4px;border:1px solid var(--line);
  display:grid;place-items:center;color:transparent;font-size:0.68rem;line-height:1;
  transition:.14s;margin-top:2px}
.ht-cb:hover{border-color:var(--ink-dim)}
.ht-cb.on{background:var(--accent);border-color:var(--accent);color:#1a1206}
.ht-cb.some{border-color:var(--accent);color:var(--accent)}
.ht-ex{width:18px;height:18px;border-radius:5px;color:var(--ink-faint);font-size:0.7rem;
  display:grid;place-items:center;transition:.16s;flex:none;margin-top:1px}
.ht-ex:hover{color:var(--ink);background:var(--hover)}
.ht-ex.on{color:var(--accent);transform:rotate(90deg)}

/* title cell */
.ht-ti{display:flex;gap:9px;align-items:flex-start;min-width:0}
.ht-ti .bd{min-width:0}
/* FPDS descriptions run to 190 characters, which wraps to six lines and turns a
   scannable table into a wall. Clamp to two lines; the full text is on the title
   attribute and in the expanded detail strip, so nothing is lost. */
.ht-ti a.t{color:var(--ink);font-size:0.92rem;line-height:1.36;
  border-bottom:1px solid transparent;transition:.15s;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ht-t.compact .ht-ti a.t{-webkit-line-clamp:1}
.ht-ti a.t:hover{color:var(--accent-soft);border-bottom-color:rgba(232,161,60,.45)}
/* One line, always. PSC long names ("IT AND TELECOM - BUSINESS APPLICATION/
   APPLICATION DEVELOPMENT SUPPORT") wrapped this metadata strip to six lines and
   made it three times taller than the title it sits under. */
.ht-ti .sub{display:block;margin-top:4px;font-family:var(--mono);font-size:0.72rem;
  color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ht-ti .sub > span{margin-right:9px}
.ht-ti .sub .no{color:var(--nd2)}
.ht-ti .sub .dot{opacity:.5}

/* generic cell text — clamped for the same reason the title is: agency names like
   "…Acquisition and Property Management Division" run to three lines and set the
   height of the whole row. Full text stays on the title attribute. */
.ht-c1{font-size:0.89rem;color:var(--ink);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ht-c2{font-family:var(--mono);font-size:0.72rem;color:var(--ink-faint);margin-top:3px;
  line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ht-t.compact .ht-c1{-webkit-line-clamp:1}
.ht-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* money cell — value over a proportional heat bar */
.ht-m{display:flex;flex-direction:column;align-items:flex-end;gap:5px;white-space:nowrap}
.ht-m .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:0.88rem;color:var(--ink)}
.ht-m .v.dim{color:var(--ink-faint)}
.ht-m .track{width:100%;max-width:96px;height:3px;border-radius:100px;background:var(--line-soft);
  overflow:hidden}
.ht-m .fill{height:100%;border-radius:100px;
  background:linear-gradient(90deg,rgba(232,161,60,.45),var(--accent))}
.ht-m .fill.blu{background:linear-gradient(90deg,rgba(111,176,232,.4),var(--blue))}
.ht-m .pct{font-family:var(--mono);font-size:0.7rem;color:var(--ink-faint)}

/* date cell */
.ht-d{display:flex;flex-direction:column;align-items:flex-end;gap:3px;white-space:nowrap}
.ht-d .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:0.86rem;color:var(--ink)}
.ht-rel{font-family:var(--mono);font-size:0.7rem;letter-spacing:.04em;padding:2px 8px;
  border-radius:100px;border:1px solid var(--line);color:var(--ink-faint);white-space:nowrap}
.ht-rel.gone{color:var(--ink-faint);border-style:dashed}
.ht-rel.hot{color:var(--red);border-color:rgba(224,123,123,.45);background:rgba(224,123,123,.08)}
.ht-rel.warm{color:var(--accent);border-color:rgba(232,161,60,.4);background:rgba(232,161,60,.07)}
.ht-rel.cool{color:var(--nd2)}

/* expanded detail strip */
.ht-t tr.ht-det td{padding:0;border-bottom:1px solid var(--line-soft);background:var(--bg-soft)}
.ht-det .in{padding:15px 18px 16px 46px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px 22px;
  border-left:2px solid rgba(232,161,60,.4)}
.ht-det .f .fl{font-family:var(--mono);font-size:0.7rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-faint)}
.ht-det .f .fv{font-size:0.87rem;color:var(--ink);margin-top:4px;line-height:1.45}
.ht-det .f .fv.mono{font-family:var(--mono);font-size:0.79rem}
.ht-det .f .fv a{color:var(--accent-soft)}

/* ------------------------------------------------------------------ popover */
.ht-pop{position:absolute;z-index:60;width:266px;background:var(--panel);
  border:1px solid var(--line);border-radius:11px;padding:12px;box-shadow:var(--lift)}
.ht-pop h4{font-family:var(--mono);font-size:0.72rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-faint);font-weight:400;margin-bottom:10px;
  display:flex;align-items:center;gap:8px}
.ht-pop h4 .rst{margin-left:auto;color:var(--accent);font-size:0.7rem;letter-spacing:.06em}
.ht-pop h4 .rst:hover{text-decoration:underline}
.ht-sort{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:11px}
.ht-sb{font-family:var(--mono);font-size:0.73rem;color:var(--ink-dim);border:1px solid var(--line);
  border-radius:7px;padding:7px 8px;transition:.15s;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.ht-sb:hover{color:var(--ink);border-color:var(--ink-dim)}
.ht-sb.on{color:var(--accent);border-color:rgba(232,161,60,.55);background:rgba(232,161,60,.11)}
.ht-pop input[type=text],.ht-pop input[type=number],.ht-pop input[type=date]{
  width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:7px;
  padding:7px 10px;color:var(--ink);font-family:var(--sans);font-size:0.85rem;font-weight:300}
.ht-pop input:focus{outline:none;border-color:rgba(232,161,60,.5)}
.ht-pop input[type=date]{font-family:var(--mono);font-size:0.79rem}
.ht-pop input::-webkit-calendar-picker-indicator{filter:invert(.7)}
.ht-two{display:grid;grid-template-columns:1fr auto 1fr;gap:7px;align-items:center}
.ht-two .to{font-family:var(--mono);font-size:0.72rem;color:var(--ink-faint)}
.ht-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ht-q{font-family:var(--mono);font-size:0.72rem;color:var(--ink-dim);border:1px solid var(--line);
  border-radius:100px;padding:4px 10px;transition:.15s}
.ht-q:hover{color:var(--ink);border-color:var(--ink-dim)}
.ht-q.on{color:var(--accent);border-color:rgba(232,161,60,.5);background:rgba(232,161,60,.1)}
.ht-list{max-height:238px;overflow-y:auto;margin-top:9px;padding-right:3px}
.ht-list::-webkit-scrollbar{width:7px}
.ht-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:100px}
.ht-o{display:flex;align-items:center;gap:9px;padding:6px 7px;border-radius:7px;
  cursor:pointer;transition:.12s;width:100%;text-align:left}
.ht-o:hover{background:var(--panel2)}
.ht-o .nm{font-size:0.85rem;color:var(--ink);flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ht-o .ct{font-family:var(--mono);font-size:0.72rem;color:var(--ink-faint)}
.ht-o.off .nm{color:var(--ink-dim)}
.ht-pop .none{font-size:0.82rem;color:var(--ink-faint);padding:10px 4px;text-align:center}

/* ------------------------------------------------------------------ footer */
.ht-foot{font-family:var(--mono);font-size:0.73rem;color:var(--ink-faint);margin-top:9px;
  display:flex;gap:14px;flex-wrap:wrap}

.ht-more{width:100%;padding:13px;font-family:var(--mono);font-size:0.75rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-dim);
  border-top:1px solid var(--line-soft);transition:.15s;text-align:center;display:block}
/* A class-level `display` outranks the UA stylesheet's [hidden]{display:none}, so the
   rule above was quietly keeping this button on screen for every state that sets
   b.hidden = true. Restore the attribute's meaning at equal-or-higher specificity. */
.ht-more[hidden]{display:none}
.ht-more:hover{color:var(--accent);background:var(--panel2)}
.ht-empty{padding:52px 20px;text-align:center;color:var(--ink-dim)}
.ht-empty .big{font-family:var(--serif);font-size:1.5rem;color:var(--ink);margin-bottom:8px}
.ht-empty .sm{font-size:0.88rem;color:var(--ink-faint)}

/* menus (columns / download) */
.ht-menu{position:absolute;z-index:60;min-width:216px;background:var(--panel);
  border:1px solid var(--line);border-radius:11px;padding:8px;box-shadow:var(--lift)}
.ht-menu .mh{font-family:var(--mono);font-size:0.7rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-faint);padding:6px 8px 8px}
.ht-mi{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:7px;width:100%;
  text-align:left;transition:.12s;font-size:0.86rem;color:var(--ink)}
.ht-mi:hover{background:var(--panel2)}
.ht-mi .k{font-family:var(--mono);font-size:0.7rem;color:var(--ink-faint);margin-left:auto}
.ht-mi.lock{opacity:.45;cursor:not-allowed}
.ht-menu .sep{height:1px;background:var(--line-soft);margin:7px 4px}

/* Narrow screens scroll the table sideways inside its own box rather than dropping
   columns. Hiding by position was worse than useless here — it took out Obligated,
   Potential and Ends, i.e. every column a reader came for, and left the two text
   columns. The page body itself never scrolls horizontally. */
table.ht-t{min-width:820px}
@media(max-width:900px){.ht-scroll{--ht-max:66vh}}
@media(prefers-reduced-motion:reduce){.ht *{transition:none!important}}

/* ---------------------------------------------------------------- light mode
   Only the rules that assumed a dark ground need saying twice; everything else
   is already on tokens the theme overrides. */
body.light .ht-cb.on,body.light .ht-btn.prime{color:#fffdf8}
body.light .ht-t tbody tr.ht-row.sel td{background:rgba(184,119,21,.07)}
body.light .ht-btn.on{background:rgba(184,119,21,.10)}
body.light .ht-chip{color:var(--accent-soft);border-color:rgba(184,119,21,.38);
  background:rgba(184,119,21,.09)}
body.light .ht-chip .x:hover{background:rgba(184,119,21,.2)}
body.light .ht-stat.key{background:linear-gradient(160deg,rgba(184,119,21,.13),rgba(184,119,21,.03))}
body.light .ht-m .fill{background:linear-gradient(90deg,rgba(184,119,21,.45),var(--accent))}
body.light .ht-m .fill.blu{background:linear-gradient(90deg,rgba(28,111,174,.4),var(--blue))}
body.light .ht-stat .fill,body.light .ht-share .fill{
  background:linear-gradient(90deg,rgba(184,119,21,.5),var(--accent))}
body.light .ht-rel.hot{color:var(--red);border-color:rgba(182,71,63,.5);
  background:rgba(182,71,63,.08)}
body.light .ht-rel.warm{color:var(--accent);border-color:rgba(184,119,21,.45);
  background:rgba(184,119,21,.08)}
body.light .ht-sb.on,body.light .ht-q.on{background:rgba(184,119,21,.11);
  border-color:rgba(184,119,21,.5)}
body.light .ht-scroll::-webkit-scrollbar-thumb{background:rgba(26,18,6,.18)}
body.light .ht-t tbody tr.ht-row td:first-child::before{background:var(--accent)}
body.light .ht-det .in{border-left-color:rgba(184,119,21,.45)}

/* ------------------------------------------------- server mode: waiting states */
.ht-scroll.wait{position:relative}
.ht-scroll.wait::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  background-size:40% 100%;background-repeat:no-repeat;animation:htbar 1.1s ease-in-out infinite}
@keyframes htbar{0%{background-position:-40% 0}100%{background-position:140% 0}}
.ht-stat.wait .sv{opacity:.45}
.ht-warn{color:var(--red)}
@media(prefers-reduced-motion:reduce){
  .ht-scroll.wait::after{animation:none;background:var(--accent);opacity:.5}
}