/* AU ONE ERP · tracker-progress-setup.css
   PRESENTATION ONLY — the Project ▸ Progress and Project ▸ Setup tabs.

   WHY THIS FILE EXISTS
   Both tabs were built as full-width label-left / input-right rows. On a wide
   desktop that stretches one field across ~2000px, so the label and its value
   end up at opposite ends of the screen with a vast empty gap between them —
   hard to read, and it looks unfinished. This file centres both tabs in a
   comfortable measure and rebuilds the rows as compact cards.

   SCOPED, NOT GLOBAL. Every rule is nested under .pgwrap or .stwrap, two
   wrapper divs added around those two tab bodies. No other screen can be
   affected, and deleting this <link> restores the previous appearance exactly.

   NO OVERLAP / NO SIDE-SCROLL is a hard requirement here: every grid track uses
   minmax(...,1fr) with min-width:0 on the shrinkable child, labels wrap instead
   of colliding, and long values use tabular numerals so columns stay aligned.
   Loaded after tracker-pro.css so it layers without needing !important. */

/* ══ shared shell ══════════════════════════════════════════════════════════ */
.pgwrap, .stwrap {
  --pg-max: 1060px;
  max-width: var(--pg-max);
  margin-inline: auto;
  width: 100%;
}
.pgwrap *, .stwrap * { min-width: 0; }          /* nothing may force a sideways scroll */

/* ══ PROGRESS ▸ overall hero ═══════════════════════════════════════════════ */
.pghero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  margin: 0 0 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(var(--olive-rgb, 111 125 51), .10), transparent 60%),
    var(--paper2);
  box-shadow: var(--shadow, 0 8px 22px -14px rgba(0, 0, 0, .35));
}
.pghero-dial { position: relative; width: 116px; height: 116px; flex: none; }
.pghero-ring { width: 116px; height: 116px; display: block; }
.pgr-bg { fill: none; stroke: var(--line2); stroke-width: 9; }
.pgr-fg {
  fill: none; stroke: var(--olive); stroke-width: 9; stroke-linecap: round;
  transition: stroke-dashoffset .6s cubic-bezier(.16, 1, .3, 1);
}
.pghero-ringv {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
}
.pghero-ringv b {
  font-size: 22px; font-weight: 850; letter-spacing: -.6px; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.pghero-ringv b i { font-size: 12px; font-style: normal; font-weight: 800; color: var(--muted); margin-left: 1px; }
.pghero-ringv span { margin-top: 3px; font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }

.pghero-body { min-width: 0; }
.pghero-hd { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
.pghero-hd h3 { font-size: 14px; font-weight: 850; letter-spacing: -.2px; color: var(--ink); flex: none; }
.pghero-bar {
  flex: 1 1 auto; min-width: 60px; height: 7px; border-radius: 4px;
  background: var(--line2); overflow: hidden;
}
.pghero-bar > i {
  display: block; height: 100%; width: calc(var(--pg, 0) * 1%);
  border-radius: 4px; background: linear-gradient(90deg, var(--olive), var(--ok));
  transition: width .6s cubic-bezier(.16, 1, .3, 1);
}

.pgstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.pgstat {
  padding: 8px 10px; border: 1px solid var(--line2); border-radius: 11px;
  background: var(--paper3); display: flex; flex-direction: column; gap: 2px;
}
.pgstat.ok { border-color: color-mix(in srgb, var(--ok) 42%, transparent); }
.pgstat-l { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pgstat-v { font-size: 15px; font-weight: 850; color: var(--ink); letter-spacing: -.3px;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pgstat-v i { font-size: 10px; font-style: normal; font-weight: 800; color: var(--muted); margin-left: 1px; }
.pgstat.ok .pgstat-v { color: var(--ok); }
.pgstat-s { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 12-month sparkline — fixed 12 tracks, so it never scrolls sideways */
.pgspark { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; margin-top: 12px; }
.pgsp { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.pgsp-t { font-size: 8.5px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums;
  line-height: 1; height: 10px; white-space: nowrap; }
.pgsp-b { width: 100%; height: 40px; border-radius: 4px; background: var(--line2);
  display: flex; align-items: flex-end; overflow: hidden; }
.pgsp-b > i { display: block; width: 100%; border-radius: 4px;
  background: linear-gradient(180deg, var(--olive), var(--olive-d));
  transition: height .5s cubic-bezier(.16, 1, .3, 1); }
.pgsp-m { font-size: 9px; font-weight: 800; color: var(--muted); line-height: 1; }
.pgsp.none .pgsp-b { background: repeating-linear-gradient(45deg,
    var(--line2) 0 4px, transparent 4px 8px); }
.pgsp.now .pgsp-b { outline: 1.5px solid var(--olive); outline-offset: 1px; }
.pgsp.now .pgsp-m { color: var(--olive-d); }

/* ══ PROGRESS ▸ month rows ════════════════════════════════════════════════ */
.pgwrap .motrk { gap: 7px; }
.pgwrap details.moblkD { border-radius: 12px; }
/* summary becomes label | meter | value — the meter is the shrinkable track */
.pgwrap details.moblkD > .mosum {
  display: grid;
  grid-template-columns: minmax(88px, auto) minmax(0, 1fr) minmax(96px, auto);
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
}
.pgwrap .mosumL { grid-column: 1; white-space: nowrap; }
.pgwrap .mosumR { grid-column: 3; text-align: right; white-space: nowrap; }
/* The month meter is drawn entirely from the --pg custom property set on the
   <details>, so the row markup stays as it was. Grid placement is explicit:
   a pseudo-element is the LAST child in DOM order, so without grid-column it
   would auto-place after .mosumR instead of between the two. */
.pgwrap details.moblkD > .mosum::after {
  content: '';
  grid-column: 2; grid-row: 1; align-self: center;
  height: 6px; border-radius: 3px; background: var(--line2);
  background-image: linear-gradient(90deg, var(--olive) 0, var(--ok) 100%);
  background-repeat: no-repeat;
  background-size: calc(var(--pg, 0) * 1%) 100%;
  box-shadow: inset 0 0 0 1px var(--line2);
}
.pgwrap details.moblkD[data-pg="0"] > .mosum::after { background-image: none; }
.pgwrap .morow2 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.pgwrap .morow2 .trkf {
  display: flex; flex-direction: column; align-items: stretch; gap: 5px;
  padding: 9px 10px; border: 1px solid var(--line2); border-radius: 10px;
  background: var(--paper3);
}
.pgwrap .morow2 .trkf label {
  flex: none; font-size: 10px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); display: flex; align-items: center;
  gap: 5px; flex-wrap: wrap;
}
.pgwrap .moin { text-align: right; font-weight: 700; }
.pgwrap .mobill { border-radius: 12px; }
/* wrap rather than overflow: the amount is long and the label is a full phrase */
.pgwrap .mobillrow { display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px 12px; flex-wrap: wrap; }
.pgwrap .mobillrow > b { font-variant-numeric: tabular-nums; }
.pgwrap .mobillbrk { overflow-wrap: anywhere; }
.pgwrap .motoggle { max-width: 340px; margin-inline: auto; display: block; }
.pgwrap > .hint { text-align: center; max-width: 720px; margin-inline: auto; }
.pgwrap .mobar { justify-content: center; }

/* ══ SETUP ═══════════════════════════════════════════════════════════════ */
/* The card becomes a responsive grid of field cards. Anything that is not a
   field (heading, hints, derived-info strips, the Head-only block) spans the
   full width, so nothing can ever land beside something it should sit under. */
.stwrap .card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
  gap: 8px;
  align-content: start;
  padding: 14px;
  border-radius: 16px;
}
.stwrap .card > * { grid-column: 1 / -1; }
.stwrap .card > .trkf { grid-column: auto; }
/* The PIC row carries a badge plus a button — give it the full width so the
   badge can never collide with the Assign button on a narrow track. */
/* `1 / -1` is safe at every width. `span 2` is NOT: once auto-fit resolves to a
   single column, a span-2 item creates an implicit auto-sized second column and
   the whole grid collapses to slivers (labels render one letter per line). So
   the wider treatment is opted into only where two tracks certainly exist. */
.stwrap .card > .trkf:has(.trkpicrow) { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .stwrap .card > .trkf:has(.trkpicrow) { grid-column: span 2; }
}

.stwrap .card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.stwrap .card-head h3 { font-size: 15px; font-weight: 850; letter-spacing: -.2px; }

.stwrap .trkf {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  padding: 7px 10px 8px;
  border: 1px solid var(--line2); border-bottom: 1px solid var(--line2);
  border-radius: 11px; background: var(--paper3);
  transition: border-color .15s, background .15s;
}
.stwrap .trkf:last-child { border-bottom: 1px solid var(--line2); }
.stwrap .trkf:focus-within { border-color: var(--olive); background: var(--paper2); }
.stwrap .trkf label {
  flex: none; font-size: 10px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
  line-height: 1.35; overflow-wrap: anywhere;
}
.stwrap .trkf input {
  flex: none; width: 100%; max-width: none;
  text-align: left; font-weight: 700; font-size: 13px;
  padding: 7px 9px; border-radius: 9px;
  background: var(--paper2); font-variant-numeric: tabular-nums;
}
.stwrap .trkf input:disabled { background: var(--paper); color: var(--muted); font-weight: 600; }
.stwrap .trkf input:focus { outline: none; border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(var(--olive-rgb, 111 125 51), .16); }
.stwrap .trkpicrow { margin-top: 0 !important; }

.stwrap .card > .hint { font-size: 11px; color: var(--muted); margin: -2px 0 2px; line-height: 1.4; }
.stwrap .derinfo { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-top: 2px; }
.stwrap .derinfo > span {
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 10px; border: 1px solid var(--line2); border-radius: 11px;
  background: var(--paper2); font-size: 10.5px; color: var(--muted);
}
.stwrap .derinfo b { font-size: 14px; font-weight: 850; color: var(--ink); font-variant-numeric: tabular-nums; }
.stwrap .derinfo em { font-style: normal; font-size: 10px; color: var(--muted); }
.stwrap .trkdet { border: 1px solid var(--line2); border-radius: 12px; overflow: hidden; background: var(--paper3); }
.stwrap .trkdet > summary { padding: 9px 12px; font-weight: 800; font-size: 12.5px; cursor: pointer; }
.stwrap .trkdetbody {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
  gap: 8px; padding: 0 12px 12px;
}
.stwrap .trkdel { display: block; margin: 12px auto 0; max-width: 300px; }
.stwrap .setonce { margin-left: auto; }

/* ══ narrow screens ═══════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .pghero { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 12px; padding: 14px; }
  .pghero-hd { justify-content: center; }
  .pgstat { text-align: left; }
  .pgwrap details.moblkD > .mosum { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .pgwrap details.moblkD > .mosum::after { display: none; }   /* meter would be too thin to read */
  .pgwrap .mosumR { grid-column: 2; }                          /* only two tracks left here */
  .pgsp-t { display: none; }
  .pgsp-b { height: 32px; }
  /* One field per row below the two-column threshold, so nothing can span. */
  .stwrap .card, .stwrap .trkdetbody { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .pgstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pghero-dial, .pghero-ring { width: 96px; height: 96px; }
  .pghero-ringv b { font-size: 19px; }
  /* the caption must stay inside the smaller dial, never ride over the stroke */
  .pghero-ringv span { font-size: 8px; letter-spacing: .03em; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .pgr-fg, .pghero-bar > i, .pgsp-b > i { transition: none; }
}