/* LAIS end-of-day mood picker (PREVIEW Nov 2 2026). Readout under the 0–10 row and the "What each number means" key.
   Classic (dark) is the base; Maroon / Enterprise (light) and Sky get their own inks. Colors never carry meaning alone. */
.workload-panel { --fp-burnout: #F43F5E; --fp-heavy: #FB7185; --fp-stretched: #FB923C; --fp-okay: #FACC15; --fp-good: #34D399;
  --fp-ink: #f4effc; --fp-muted: #c4b5e0; --fp-well: rgba(255,255,255,.05); --fp-line: rgba(255,255,255,.14); }
html[data-theme="maroon"] body .workload-panel { --fp-burnout: #6B0F24; --fp-heavy: #C2343F; --fp-stretched: #B4661C; --fp-okay: #8A6D12; --fp-good: #1F7A4C;
  --fp-ink: var(--q-ink, #2A1E23); --fp-muted: var(--q-muted, #5E5559); --fp-well: #FBF8F5; --fp-line: #E4DADF; }
html[data-theme="enterprise"] body .workload-panel { --fp-burnout: #7A1D2A; --fp-heavy: #B42318; --fp-stretched: #B4661C; --fp-okay: #8A6A04; --fp-good: #1B6E45;
  --fp-ink: var(--q-ink, #14233A); --fp-muted: #405068; --fp-well: #F7F9FC; --fp-line: #D5DDE7; }
html[data-theme="sky"] body .workload-panel { --fp-ink: var(--sk-ink, #e3e3e3); --fp-muted: var(--sk-ink-2, #c4c7c5); --fp-well: rgba(255,255,255,.04); --fp-line: var(--sk-outline-soft, rgba(255,255,255,.16)); }
.workload-panel [data-mood="burnout"] { --fp-c: var(--fp-burnout); }
.workload-panel [data-mood="heavy"] { --fp-c: var(--fp-heavy); }
.workload-panel [data-mood="stretched"] { --fp-c: var(--fp-stretched); }
.workload-panel [data-mood="okay"] { --fp-c: var(--fp-okay); }
.workload-panel [data-mood="good"] { --fp-c: var(--fp-good); }

.feel-readout { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-height: 44px; margin-top: 2px;
  padding: 10px 12px; border-radius: 10px; background: var(--fp-well); border: 1px solid var(--fp-line);
  border-left: 4px solid var(--fp-c, var(--fp-line)); color: var(--fp-ink); font-size: 14px; line-height: 1.35; }
.feel-readout b { font-weight: 700; font-size: 15px; }
.feel-readout span { color: var(--fp-muted); }
.feel-readout .fr-hint { font-size: 13px; }

.feel-key { margin-top: 10px; font-size: 13px; color: var(--fp-muted); }
.feel-key summary { cursor: pointer; font-weight: 600; color: var(--fp-ink); padding: 4px 0; list-style-position: inside; }
.feel-key summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
.feel-key ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
.feel-key li { display: grid; grid-template-columns: 26px minmax(0, 11em) 1fr; gap: 8px; align-items: baseline; padding: 5px 6px;
  border-left: 3px solid var(--fp-c, var(--fp-line)); border-radius: 4px; background: var(--fp-well); }
.feel-key li b { font-variant-numeric: tabular-nums; color: var(--fp-ink); text-align: right; }
.feel-key li .fk-l { font-weight: 600; color: var(--fp-ink); }
.feel-key li .fk-m { color: var(--fp-muted); }
@media (max-width: 480px) { .feel-key li { grid-template-columns: 22px 1fr; } .feel-key li .fk-m { grid-column: 2; } }
/* Nov 3 2026 polish: in a narrow column (e.g. the CMC interpreter panel at desktop width) the meaning text had ~80px
   and wrapped one word per line — stack the meaning under the name whenever the key itself is narrow. */
.feel-key { container-type: inline-size; }
@container (max-width: 420px) { .feel-key li { grid-template-columns: 22px 1fr; } .feel-key li .fk-m { grid-column: 2; } }
/* Light themes: the helper line under the question was pale pink/blue on a light card — give it the readable muted ink. */
html[data-theme="maroon"] body .workload-panel .pm-q,
html[data-theme="enterprise"] body .workload-panel .pm-q { color: var(--fp-muted) !important; opacity: 1 !important; }