/* Hypha · JV partner · document: the list marked HOT, in the generic look of a shared spreadsheet: gridlines, column
   letters, row numbers, a red HOT tag on the file, the team's pictures in the corner and their coloured cell outlines
   where each is working (a shared sheet shows other people that way: no floating name flags over the words).
   It is one of their documents on the table, never the stage itself.

   <article class="doc hot">
     <header class="ht-top"><span class="ht-ic" aria-hidden="true"></span><b class="ht-file">Leads</b><span class="ht-hot">HOT</span>
       <span class="ht-avs" aria-hidden="true"><i class="av xs"></i><i class="av xs"></i><i class="av xs"></i></span></header>
     <table class="ht-grid">
       <thead><tr><th></th><th>A</th><th class="c-bz">B</th>…</tr></thead>
       <tbody>
         <tr class="ht-hd"><th>1</th><td class="c-bz">Business</td><td class="c-sg">Signal</td><td class="c-tp">Temp.</td><td class="c-ct">Contact</td><td class="c-st">Status</td><td class="c-nd">Need confirmed</td></tr>
         <tr><th>2</th><td class="c-bz">…</td><td>New locations</td><td><span class="hot">HOT</span></td>
           <td class="c-ct"><span class="v" data-v="Found"></span></td><td class="c-st"><span class="v"></span></td><td class="c-nd"><i class="fld"></i></td></tr>
       </tbody>
     </table>
     <footer class="ht-tabs"><span class="is-on">HOT</span></footer>
     <i class="ht-sel" style="--c:#e8710a" aria-hidden="true"></i>      (a teammate's outline: js places it on a cell)
   </article>
   On a phone the Business and Contact columns fold away (whole columns, never cut). */

.hot {
  --fs: 14px;
  --w: calc(48.6 * var(--fs) + 36px);
  width: var(--w);
  font-family: var(--f-sheet);
  --f-app: var(--f-google);
  font-size: var(--fs);
  color: #202124;
  border-radius: 8px;
}
.ht-top { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid #e1e3e6; }
.ht-ic { width: 18px; height: 22px; border-radius: 3px; background: linear-gradient(#0f9d58, #0f9d58) 4px 7px / 10px 2px no-repeat, linear-gradient(#0f9d58, #0f9d58) 4px 11px / 10px 2px no-repeat, linear-gradient(#0f9d58, #0f9d58) 4px 15px / 10px 2px no-repeat, #e6f4ea; box-shadow: inset 0 0 0 1.5px #0f9d58; }
.ht-file { font-family: var(--f-app, var(--f-sheet)); font-size: 16px; font-weight: 500; }
.ht-hot { padding: 2px 9px; border-radius: 999px; background: #d93025; color: #fff; font: 700 12px/18px var(--f-app, var(--f-sheet)); letter-spacing: 0.06em; }
.ht-avs { display: flex; margin-left: auto; }
.ht-avs .av { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--c, #9aa0a6); }
.ht-avs .av + .av { margin-left: 6px; }
.ht-avs .av:nth-child(1) { --c: #e8710a; }
.ht-avs .av:nth-child(2) { --c: #1a73e8; }
.ht-avs .av:nth-child(3) { --c: #12b5cb; }
.ht-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ht-grid th, .ht-grid td { height: 34px; padding: 0 8px; border: 1px solid #e1e3e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; font-weight: 400; }
.ht-grid thead th { height: 24px; background: #f8f9fa; color: #5f6368; font-size: 12px; text-align: center; }
.ht-grid tbody th { width: 34px; background: #f8f9fa; color: #5f6368; font-size: 12px; text-align: center; }
.ht-grid thead th:first-child { width: 34px; }
.ht-hd td { font-weight: 700; background: #fafafa; }
/* column widths from the cell type (the head row is 12 px, so never em): every value shows whole */
.ht-grid .c-bz { width: calc(9 * var(--fs)); }
.ht-grid .c-sg { width: calc(12.8 * var(--fs)); }
.ht-grid .c-tp { width: calc(4.2 * var(--fs)); }
.ht-grid .c-ct { width: calc(5 * var(--fs)); }
.ht-grid .c-st { width: calc(8.8 * var(--fs)); }
.ht-grid .c-nd { width: calc(8.8 * var(--fs)); }
.hot .hot-t, .ht-grid .hot { display: inline-block; padding: 0 7px; border-radius: 3px; background: #fce8e6; color: #c5221f; font-weight: 700; font-size: 12px; line-height: 20px; letter-spacing: 0.04em; width: auto; }
.ht-grid .fld { width: 100%; height: 14px; vertical-align: middle; }
.ht-grid .v { color: #202124; }
.ht-grid .v.is-new { color: #1a73e8; }
.ht-tabs { display: flex; gap: 4px; padding: 6px 12px; background: #f8f9fa; border-top: 1px solid #e1e3e6; }
.ht-tabs span { padding: 3px 12px; border-radius: 4px; font-size: 12.5px; color: #5f6368; }
.ht-tabs .is-on { background: #fff; color: #c5221f; font-weight: 700; box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); }
/* a teammate's outline on the cell they're in (placed by the scene from the cell's own box) */
.ht-sel { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border: 2px solid var(--c, #1a73e8); border-radius: 2px; pointer-events: none; opacity: 0; }
.stage.is-near .ht-sel { will-change: transform, opacity; }
/* the column nobody filled, picked out when the scene asks: a plain dark frame, never light */
.ht-grid td.c-nd.is-q, .ht-hd td.c-nd.is-q { box-shadow: inset 2px 0 0 #3c4043, inset -2px 0 0 #3c4043; }
@media (max-width: 899px) {
  .hot { --w: min(352px, calc(100vw - 32px)); --fs: 13.5px; }
  .ht-top { padding: 9px 12px; gap: 8px; }
  .ht-file { font-size: 15px; }
  .ht-grid .c-bz, .ht-grid .c-ct { display: none; }
  .ht-grid th, .ht-grid td { height: 30px; padding: 3px 5px; line-height: 1.2; }
  .ht-grid td { white-space: normal; }
  .ht-grid tbody tr { height: 38px; }
  .ht-grid thead th { height: 22px; font-size: 12px; }
  .ht-grid tbody th, .ht-grid thead th:first-child { width: 26px; font-size: 12px; }
  .ht-grid .c-sg { width: 29%; }
  .ht-grid .c-tp { width: 15%; }
  .ht-grid .c-st { width: 26%; }
  .ht-grid .c-nd { width: 22%; }
  .ht-grid .hot { font-size: 12px; padding: 0 5px; }
}