/*
CCS - Projects v2 additions.

@web @ccs
Progress/budget bars (Today, project list, wizard), the guided-wizard step
shell (centered column, huge mono target number, back/next nav), the
live-scale tuner (huge live weight, delta line, horizontal gauge with
tolerance band + gliding needle), and the amber "not set yet" standing
note. Everything else reuses card/btn/frm/badge/grid from styles.css —
kept intentionally small. Class prefix: pj-.
Keywords: projects, wizard, progress bar, budget bar, warn note, mobile,
live tuner, gauge, needle, tare, pour
*/

/* ---- progress / budget bars (Today budget, project cast progress, wizard steps) ---- */
.pj-bar {
  width: 100%; height: 10px; background: var(--paper-2); border: 1.5px solid var(--ink);
  overflow: hidden; margin: .3rem 0;
}
.pj-bar-fill { height: 100%; background: var(--oxide); transition: width .2s ease; }
.pj-bar-fill.over { background: var(--bad); }

/* ---- amber standing note (sealer not set, over budget, water-carry note, ...) ---- */
.pj-warn {
  font-family: var(--mono); font-size: .82rem; color: var(--warn);
  border: 1.5px solid var(--warn); background: #f7ecd9; padding: .5rem .7rem;
}

/* green standing note (a check passed) */
.pj-ok {
  font-family: var(--mono); font-size: .82rem; color: var(--good, #2f6f3a);
  border: 1.5px solid var(--good, #2f6f3a); background: #e7f2e8; padding: .5rem .7rem;
}

/* ---- Today block cards — a touch more separation than a bare .card ---- */
.pj-block { margin-bottom: 1.4rem; }

/* ---- guided wizard shell ---- */
.pj-step { max-width: 560px; margin: 0 auto; }
.pj-target {
  font-family: var(--mono); font-weight: 600; font-size: 2.2rem;
  border: 2px solid var(--ink); background: var(--card); box-shadow: var(--shadow);
  padding: .7rem 1rem; text-align: center; margin: .6rem 0;
}
.pj-actual-input {
  font-family: var(--mono) !important; font-size: 1.3rem !important; font-weight: 600;
  text-align: center; padding: .6rem !important;
}
.pj-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; gap: 1rem; }
.pj-next { font-size: .92rem; padding: .7rem 1.6rem; }
.pj-next.ready { background: var(--good); border-color: var(--good); }

/* ---- live-scale tuner (tare/pour phases of a weigh step) ---- */
.pj-live-huge { font-size: 2.4rem; }
.pj-delta { font-family: var(--mono); font-size: 1.05rem; text-align: center; margin: .5rem 0 1rem; }
.pj-offline-note { font-family: var(--mono); font-size: .78rem; color: var(--ink-soft); margin: .5rem 0; }

/* horizontal gauge: 0 -> 112% of target, tolerance band + notch, gliding needle */
.pj-gauge { position: relative; height: 34px; background: var(--paper-2); border: 2px solid var(--ink); margin: 1rem 0 .3rem; }
.pj-gauge-band { position: absolute; top: 0; bottom: 0; background: rgba(76, 107, 60, .25); }
.pj-gauge-notch { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--ink); }
.pj-gauge-needle {
  position: absolute; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: var(--ink-soft);
  transition: left .12s ease, background-color .12s ease;
}
.pj-gauge.st-add .pj-gauge-needle { background: var(--ink); }
.pj-gauge.st-slowly .pj-gauge-needle { background: var(--warn); }
.pj-gauge.st-perfect .pj-gauge-needle { background: var(--good); }
.pj-gauge.st-remove .pj-gauge-needle { background: var(--bad); }
.pj-gauge.flash-good { animation: pj-gaugeflash .5s ease; }
@keyframes pj-gaugeflash { 30% { box-shadow: inset 0 0 0 3px var(--good); } }
.pj-gauge-label { font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; text-align: center; font-weight: 600; margin-bottom: .8rem; }
.pj-gauge-label.st-add { color: var(--ink-soft); }
.pj-gauge-label.st-slowly { color: var(--warn); }
.pj-gauge-label.st-perfect { color: var(--good); }
.pj-gauge-label.st-remove { color: var(--bad); }

@media (max-width: 700px) {
  .pj-nav { flex-direction: column-reverse; align-items: stretch; }
  .pj-next { width: 100%; }
  .pj-step input, .pj-step select, .pj-step textarea { font-size: 1.4rem; }
  .pj-target { font-size: 1.8rem; }
  .pj-live-huge { font-size: 1.9rem; }
  /* Today block tables: the type chip repeats what the title says — drop the
     column on phones so task titles breathe in the 330px that's left. Tables
     whose first column carries real content opt out with .keep-first. */
  .pj-block table.tbl:not(.keep-first) th:first-child,
  .pj-block table.tbl:not(.keep-first) td:first-child { display: none; }
  .pj-block .tbl td { padding: .45rem .3rem; }
}