/* ============================================================================
   F36  QUOTE HEALTH SCORE: GREEN, ORANGE OR RED
   Tokens only, from app.css, so both themes work without a second set of
   colours. Green is --good, orange is --warn, red is --crit: the colours the
   console already uses for the same three meanings.
   ============================================================================ */

/* ------------------------------------------------------------------ chips */
.f36-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.01em;line-height:1.3;white-space:nowrap;
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink-2)}
.f36-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.f36-chip.sm{padding:2px 7px;font-size:11.5px}
.f36-chip.f36-green{color:var(--good);background:var(--good-bg);border-color:transparent}
.f36-chip.f36-orange{color:var(--warn);background:var(--warn-bg);border-color:transparent}
.f36-chip.f36-red{color:var(--crit);background:var(--crit-bg);border-color:transparent}
.f36-chip.f36-none{color:var(--ink-3)}
.f36-cell .f36-given{display:block;margin-top:3px;font-size:11px;color:var(--ink-3)}
/* The star on a score with installation not counted, and its words for a
   screen reader (kept in the page, just not drawn). */
.f36-chip > span{position:relative}
.f36-star{font-weight:800}
.f36-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0}
/* Under a quotes table: what the star means, and Margin against Health. */
.f36-foot{margin:6px 0 10px;font-size:12px;line-height:1.45;color:var(--ink-3)}
.f36-foot span{display:block}

/* ------------------------------------------------------------------- band */
.f36-band{margin:8px 0 10px;padding:10px 12px;border:1px solid var(--line);border-left:4px solid var(--line);
  border-radius:var(--r);background:var(--panel-2);font-size:13px;color:var(--ink)}
.f36-band.f36-green{border-left-color:var(--good)}
.f36-band.f36-orange{border-left-color:var(--warn)}
.f36-band.f36-red{border-left-color:var(--crit);background:var(--crit-bg)}
.f36-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.f36-left{font-size:13px;color:var(--ink-2)}
.f36-left b{color:var(--ink);font-size:15px}
.f36-why{margin:6px 0 0;line-height:1.45}
.f36-break{display:grid;grid-template-columns:1fr auto;gap:4px 12px;margin:8px 0 0;font-size:12.5px}
.f36-break dt{margin:0;color:var(--ink-2)}
.f36-break dt small{display:block;font-size:11px;color:var(--ink-3);line-height:1.35}
.f36-break dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.f36-break .f36-tot{padding-top:4px;border-top:1px solid var(--line);font-weight:700;color:var(--ink)}
.f36-gaps{margin:8px 0 0;padding-left:18px;font-size:12px;color:var(--ink-2);line-height:1.45}
.f36-gaps li{margin:2px 0}
.f36-note{margin:6px 0 0;font-size:12px;color:var(--ink-2);line-height:1.45}
.f36-band .f36-note{color:var(--ink)}

/* ------------------------------------------------- the drawer's own parts */
.f36-sec [hidden]{display:none !important}
.f36-reason{margin:6px 0 8px;padding:8px 10px;border-radius:var(--r);border:1px solid var(--line);
  border-left:3px solid var(--crit);font-size:12.5px;line-height:1.5;color:var(--ink)}
.f36-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:8px 0}
.f36-in .frm-err,.f36-in .btnrow{grid-column:1 / -1}
.f36-in label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-2)}
.f36-in input{min-height:36px;padding:6px 8px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--panel);color:var(--ink);font:inherit;font-size:13px}
.f36-in small{font-size:11px;color:var(--ink-3)}
.f36-job-reasons{margin:6px 0 10px}

/* ----------------------------------------------------- F13's form inputs */
.f36-form-in{margin:10px 0 0;padding:10px 0 0;border-top:1px solid var(--line-soft)}
.f36-form-in h5{margin:0 0 6px;font-size:12px;font-weight:700;color:var(--ink-2);text-transform:none}
.f36-form-in .f36-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}

/* ------------------------------------------------------------ the question
   Above the drawer (61), the notice strip (62), the comment button (70) and
   the phone menu (75), the same layer F17's question uses: it must be
   answered or cancelled. */
.f36-ask-wrap{position:fixed;inset:0;z-index:85;display:flex;align-items:center;justify-content:center;
  padding:16px;background:var(--scrim)}
.f36-ask{width:100%;max-width:480px;max-height:calc(100vh - 32px);overflow:auto;padding:18px 20px;
  border-radius:8px;border:1px solid var(--line);border-top:3px solid var(--crit);background:var(--panel);
  color:var(--ink);box-shadow:var(--shadow)}
.f36-ask h3{margin:0 0 10px;font-size:16px}
.f36-ask-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 8px}
.f36-ask .f36-ask-why{margin:0 0 8px;font-size:13px;line-height:1.5}
.f36-ask .f36-ask-rule{margin:0 0 12px;font-size:12px;line-height:1.5;color:var(--ink-2)}
.f36-ask .f36-ask-l{display:block;margin:0 0 4px;font-size:12px;font-weight:600;color:var(--ink-2)}
.f36-ask textarea{display:block;width:100%;box-sizing:border-box;min-height:72px;padding:8px 10px;
  border-radius:var(--r);border:1px solid var(--line);background:var(--panel-2);color:var(--ink);
  font:inherit;font-size:13px;resize:vertical}
.f36-ask .f36-ask-err{margin:8px 0 0;font-size:12.5px;color:var(--crit)}
.f36-ask .btnrow{margin-top:12px;justify-content:flex-end}

/* ------------------------------------------------------------------ phone */
@media (max-width:700px){
  .f36-in,.f36-form-in .f36-form-grid{grid-template-columns:1fr}
  .f36-ask{padding:16px}
  .f36-ask .btnrow .btn{flex:1 1 auto;min-height:40px}
}