/* §32 how she feels about you — the centre-zero bar on a resident file.
   the track is cut into the bands, so the rungs are visible without labels,
   and exactly one notch is lit: the next one. */
.cs-feel{padding:10px 16px 4px;margin-top:6px;border-top:1px solid #0e4e78}
.fb-wrap{margin:0}
.fb-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.fb-lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--blue-lit);text-transform:uppercase}
.fb-num{font-family:var(--mono);font-size:11px;color:var(--yellow)}
.fb{position:relative;height:11px;background:#04223a;border:1px solid #0e4e78;overflow:hidden;display:block}
.fb-small{height:4px;border-color:#073e5f;margin-top:3px;background:#04223a}

/* the empty cells: the band, dark, with a hairline where it ends */
.fb-cell{position:absolute;top:0;bottom:0;display:block;opacity:.13;
  box-shadow:inset -1px 0 0 #04223a}

.fb-zero{position:absolute;left:50%;top:0;bottom:0;width:1px;background:#2a7fb8;opacity:.7}
/* the one notch that matters: where she is headed next */
.fb-next{position:absolute;top:-1px;bottom:-1px;width:1px;background:var(--blue-lit);
  box-shadow:0 0 4px rgba(120,200,255,.55)}

.fb-fill{position:absolute;top:0;bottom:0;display:block}
.fb-right{left:50%}
.fb-left{right:50%}

/* the bands: warm side in the brief's yellow, cold side in the alarm */
.fb-cell.f5,.fb-fill.f5{background:var(--yellow)}
.fb-cell.f4,.fb-fill.f4{background:#e8dd63}
.fb-cell.f3,.fb-fill.f3{background:#9ec96b}
.fb-cell.f2,.fb-fill.f2{background:#5f96bd}
.fb-cell.f1,.fb-fill.f1{background:#3a6f92}
.fb-cell.f0,.fb-fill.f0{background:#b87a5a}
.fb-cell.fm,.fb-fill.fm{background:#d97a5c}
.fb-cell.fx,.fb-fill.fx{background:var(--alarm)}
/* romance does not get its own bar. it gets the temperature of this one. */
.fb-fill.rom{background:#d2708f}

.fb-ends{display:flex;justify-content:space-between;margin-top:3px;
  font-family:var(--mono);font-size:8px;letter-spacing:.08em;color:#3f6f92;text-transform:uppercase}
.fb-ends span{flex:0 0 auto}
.fb-ends span:nth-child(2){text-align:center}

.cs-rost{position:relative}
.cs-rost .fb-small{display:block;width:100%;margin-top:4px}

/* §33 the chips on the TOWARD YOU line: standing, then what is going on,
   then whether she knows about it */
.ch{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.09em;
  text-transform:uppercase;padding:1px 6px;margin-right:5px;border:1px solid #0e4e78;
  color:var(--blue-lit);background:rgba(10,60,95,.35);line-height:1.5;vertical-align:1px}
.ch-f5,.ch-f4{border-color:#6b6a2a;color:var(--yellow)}
.ch-f3{border-color:#4e6b34;color:#c2dfa0}
.ch-f2,.ch-f1{border-color:#0e4e78;color:#8fb8d4}
.ch-f0,.ch-fm{border-color:#7a4430;color:#e2a98d}
.ch-fx{border-color:#8a2f22;color:var(--alarm)}
.ch-rom{border-color:#7a3450;color:#f0a8bf;background:rgba(90,25,50,.3)}
.ch-ex{border-color:#5a3a4a;color:#b088a0;background:transparent}
.ch-quiet{border-style:dashed;border-color:#4a5a2a;color:#b9c77e;background:transparent}

/* §34 the assessment block: what the panel wrote, and what you have seen */
.cs-assess{padding:8px 16px 4px}
.as{display:flex;gap:10px;align-items:baseline;font-family:var(--mono);font-size:10px;
  line-height:1.6;padding:1px 0}
.as-h{flex:0 0 150px;letter-spacing:.09em;text-transform:uppercase;color:var(--blue);
  text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-l{flex:1 1 auto;color:var(--blue-dim)}
.as-file .as-l{color:#7ea6c4}
.as-blank .as-l,.as-part .as-l{color:#3f6f92;letter-spacing:.2em}
.as-part .as-h{color:#8fb8d4}
.as-struck{opacity:.45}
.as-struck .as-l{text-decoration:line-through;text-decoration-color:var(--alarm)}
.as-yours .as-l{color:var(--yellow)}
.as-yours .as-h.as-mine{color:#6b6a2a;font-style:italic}