/* call-meter.css — the ASCE call meter card, its 3D view and the "Your progress" block (assets/js/meter/call-meter.js,
   assets/js/hunt/hunt-meter.js, assets/js/meter/call-history.js). Shared by the hunts and the progress page.
   Colours: the original ASCE.html pair, ideal = orange, you = green. Every control is a 44 px target. */
.cm { --cm-ideal: #ff9a1f; --cm-user: #4fe36a; --cm-ink: #f2eee3; --cm-dim: #b8b2a2; --cm-panel: rgba(20,22,16,.88); --cm-line: rgba(255,255,255,.10);
  color: var(--cm-ink); font-size: 13px; line-height: 1.35; }
.box.cm, .cm.cm-float { position: absolute; background: var(--cm-panel); border: 1px solid var(--cm-line); border-radius: 12px; padding: 8px 10px 8px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#callMeter { left: 12px; bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--barH, 64px) + 10px); width: min(400px, calc(100vw - 24px)); z-index: 6;
  transform: translateY(0); opacity: 1; transition: transform .22s ease-out, opacity .22s ease-out; }
#callMeter:not(.in) { transform: translateY(12px); opacity: 0; }
.cm-head { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: -6px 0 0; }
.cm-title { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #e3b452; }
.cm-key { color: var(--cm-dim); font-size: 11.5px; white-space: nowrap; }
.cm-sw { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin: 0 3px 0 6px; }
.cm-sw.ideal { background: var(--cm-ideal); } .cm-sw.user { background: var(--cm-user); }
.cm-stage { position: relative; }
.cm-guide { position: absolute; top: 4px; right: 6px; font-weight: 800; font-size: 13px; white-space: nowrap; pointer-events: none;
  background: rgba(0,0,0,.6); border-radius: 6px; padding: 1px 7px; }
.cm-guide:empty { display: none; }
.cm-guide.perfect { color: #5fe0ff; } .cm-guide.good { color: var(--cm-user); } .cm-guide.warn { color: #ffb02e; }
.cm-head button { min-height: 44px; min-width: 44px; padding: 6px 10px; font-size: 12px; }
.cm-3d { margin-left: auto; } .cm-3d[hidden] + .cm-pin { margin-left: auto; }
.cm-short { display: none; }
.cm-pin[aria-pressed="true"] { border-color: #e3b452; background: #3a3420; }
.cm-x { font-size: 20px !important; line-height: 1; }
.cm-canvas { display: block; width: 100%; height: 150px; border-radius: 8px; }
.cm-sum { margin: 6px 0 2px; min-height: 1.4em; }
.cm-score { font-size: 20px; color: var(--cm-ink); }
.cm-v { font-style: normal; font-weight: 750; text-transform: uppercase; font-size: 12px; margin: 0 4px; }
.cm-v.good { color: #8fd07a; } .cm-v.edge { color: #f0c24b; } .cm-v.bad, .cm-v.very_bad { color: #e8735d; } .cm-v.unheard { color: var(--cm-dim); }
.cm-dim { color: var(--cm-dim); }
.cm-bars { display: grid; gap: 3px; }
.cm-row { display: grid; grid-template-columns: 112px 1fr 74px; gap: 6px; align-items: center; font-size: 12px; }
.cm-lab { color: var(--cm-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-tr { height: 9px; background: #23251c; border-radius: 5px; overflow: hidden; }
.cm-fl { display: block; height: 100%; border-radius: 5px; background: #e8735d; }
.cm-fl.mid { background: #f0c24b; } .cm-fl.ok { background: var(--cm-user); }
.cm-w { color: var(--cm-dim); font-size: 11.5px; text-align: right; }
.cm-tip { grid-column: 1 / -1; color: #f0c24b; font-size: 11.5px; margin: -1px 0 2px; }
.cm-fix { display: none; grid-column: 1 / -1; color: #f0c24b; font-size: 11.5px; margin-top: 2px; }
.cm-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.cm-note { color: var(--cm-dim); font-size: 11px; flex: 1 1 auto; min-width: 0; }
#meterTab[aria-expanded="true"] { border-color: #e3b452; background: #3a3420; }
/* recap: the meter sits in the finish card, static */
.cm-recap { background: rgba(0,0,0,.22); border: 1px solid var(--cm-line); border-radius: 10px; padding: 6px 10px 8px; margin: 6px 0 12px; }
.cm-recap .cm-canvas { height: 170px; }
/* 3D */
.cm3d-host { --cm-ideal: #ff9a1f; --cm-user: #4fe36a; position: fixed; z-index: 12; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(720px, calc(100vw - 32px)); height: min(460px, calc(100vh - 32px));
  height: min(460px, calc(100dvh - 32px)); background: #0e0f0b; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 12px 40px rgba(0,0,0,.6); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; }
.cm3d-host[hidden] { display: none !important; }
.cm3d-bar { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 12px; color: var(--cm-dim, #b8b2a2); font-size: 12.5px; }
.cm3d-bar b { color: #e3b452; white-space: nowrap; } .cm3d-bar span { flex: 1 1 auto; min-width: 0; }
.cm3d-x { min-width: 44px; min-height: 44px; font-size: 22px; line-height: 1; }
.cm3d-stage { flex: 1 1 auto; min-height: 0; cursor: grab; }
.cm3d-stage:active { cursor: grabbing; }
/* progress */
.pg-prof { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; margin-bottom: 10px; }
.pg-pf { display: flex; flex-direction: column; gap: 4px; }
.pg-k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #b8b2a2; }
.pg-pf select { min-height: 44px; background: #2a2d22; color: inherit; border: 1px solid #4a4e3e; border-radius: 8px; padding: 6px 8px; font: inherit; }
.pg-row { display: grid; grid-template-columns: minmax(120px, 1fr) 160px; gap: 2px 12px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.08); }
.pg-name small, .pg-t, .pg-priv, .pg-empty { color: #b8b2a2; }
/* the name column may shrink and wrap; "turkey · 6 calls" stays on one line under a long call name */
.pg-name { min-width: 0; overflow-wrap: anywhere; } .pg-name small { white-space: nowrap; }
.pg-nums { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.pg-d.up { color: #8fd07a; font-weight: 750; } .pg-d.down { color: #e8735d; font-weight: 750; }
.pg-sw { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: #b8b2a2; }
.pg-f { grid-column: 1 / -1; font-size: 13px; } .pg-f b { color: #e3b452; } .pg-f i { color: #f0c24b; font-style: normal; }
.pg-next { margin: 8px 0 0; } .pg-priv { font-size: 12px; margin: 8px 0 0; } .pg-priv a { color: #e3b452; }
.spark { display: block; justify-self: end; }
/* phones */
@media (max-width: 720px) {
  #callMeter { left: 8px; right: 8px; width: auto; bottom: calc(max(8px, env(safe-area-inset-bottom)) + var(--barH, 120px) + 8px); padding: 0 8px 6px; }
  .cm-canvas { height: 92px; }
  .cm-key { display: none; }
  .cm-fix { display: block; }
  .cm-note { display: none; }
  /* polish-w4: the sparkline shrinks with its track (it was a fixed 160 px svg in a 120 px track and slid over "6 calls") */
  .pg-row { grid-template-columns: minmax(0, 1fr) minmax(72px, 32%); }
  .pg-row .spark { width: 100%; max-width: 140px; height: auto; }
}
/* phone landscape: short screen, dock to the right half above the bar */
@media (max-height: 500px) and (orientation: landscape) {
  #callMeter { left: auto; right: 8px; width: min(46vw, 400px); bottom: calc(max(8px, env(safe-area-inset-bottom)) + var(--barH, 66px) + 8px); padding: 0 8px 4px; }
  .cm-canvas { height: 76px; }
  .cm-key, .cm-note { display: none; }
  .cm-fix { font-size: 10.5px; }
  .cm-sum { margin: 2px 0; }
  .cm-score { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { #callMeter { transition: none; } }

/* phones (either way up): the five sub-scores as one row of chips, the header holds every button */
@media (max-width: 720px), (max-height: 500px) and (orientation: landscape) {
  .cm-head { margin: 0; min-height: 44px; gap: 6px; }
  .cm-long { display: none; } .cm-short { display: inline; }
  .cm-bars { grid-template-columns: repeat(5, 1fr); column-gap: 6px; }
  .cm-row { display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; }
  .cm-row .cm-w, .cm-tip { display: none; }
  .cm-row .cm-tr { display: block; width: 100%; height: 7px; }
  .cm-fix { display: block; }
  .cm-sum { margin: 3px 0 2px; } .cm-score { font-size: 17px; }
  .cm-foot { display: none; }
}