/* ============================================================================
   F32  PAID DESIGN TIERS: the tier on the job card and the Design tier block
   on the job. Tokens only, from app.css, so both themes work. The phone rules
   sit at the width app.css already folds at (700px).
   ============================================================================ */

/* ------------------------------------------------------------- the card */
.f32-card{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.f32-fee{font-size:11px;font-weight:600;color:var(--ink-2)}
.f32-good{color:var(--good)}
.f32-warn{color:var(--warn)}
.f32-info{color:var(--ink-2)}
.f32-crit{color:var(--crit)}
.f32-mute{color:var(--ink-3)}

/* ------------------------------------------------------------ on the job */
.f32-sec{margin:12px 0 4px}
.f32-free{font-size:12.5px;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.f32-h{margin:0 0 8px}
.f32-kv{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--panel-2);font-size:13px}
.f32-kv th,.f32-kv td{padding:7px 12px;border-top:1px solid var(--line);text-align:left;vertical-align:baseline;line-height:1.45}
.f32-kv tr:first-child th,.f32-kv tr:first-child td{border-top:0}
.f32-kv th{width:1%;white-space:nowrap;font-size:11.5px;font-weight:600;color:var(--ink-3)}
.f32-kv td{color:var(--ink);overflow-wrap:anywhere}
.f32-kv small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px}
.f32-kv .f32-fee{font-size:12.5px;margin-right:4px}
.f32-acts{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0}
.btn.f32-warn{border-color:var(--warn);color:var(--warn)}

@media (max-width:700px){
  .f32-kv th,.f32-kv td{display:block;width:auto;padding:6px 12px}
  .f32-kv th{padding-bottom:0;border-top:1px solid var(--line)}
  .f32-kv td{border-top:0;padding-top:2px}
  .f32-kv tr:first-child th{border-top:0}
  .f32-acts .btn{min-height:40px}
}