/* ══════════════════════════════════════════════════════════════════
   Servei · Gestió del coneixement — «El problema» (sections 01–03)
   ------------------------------------------------------------------
   Live styles for the week strip, the relleus simulator, the perimeter
   and the entreacte. Behaviour: assets/srv-coneixement-problema.js.

   Every rule that changes the shell's no-JS fallback is gated behind
   the `.is-live` class the script adds to a mount once its live UI is
   built, so a script failure leaves the fallback exactly as the shell
   drew it. Classes created by the script (.gc-week__seg, .gc-sim__ctl,
   .gc-pl*, .gc-ent__wipe…) only exist when it ran.

   Accents: amnèsia and shadow-ai use magenta (loss) + teal (captured);
   the entreacte keeps the shell's single yellow hl. Hairlines only, no
   shadows, radius 0–2px.
   ══════════════════════════════════════════════════════════════════ */

/* ═══ 1 · Week strip ═════════════════════════════════════════════ */
.gc-mount--week.is-live .gc-week__cell {
  position: relative;
  overflow: hidden;
  background-color: rgba(17, 17, 17, .07);
}
.gc-week__seg {
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.gc-week__seg--a { background: var(--gc-wk-a); }
.gc-week__seg--b { background: var(--gc-wk-b); }
.gc-week__seg--c { background: var(--gc-wk-c); }
.gc-week__seg--d { background: var(--gc-wk-d); }
.gc-week.is-in .gc-week__seg { transform: scaleX(1); }
.gc-week.is-instant .gc-week__seg { transition: opacity 200ms ease !important; }
.gc-week__seg.is-dim { opacity: .14; }

/* A wide cell (tablet 2×2, or a roomy column) shows the week as one
   continuous row of 40 hours, as the blueprint draws it. */
@container (min-width: 420px) {
  .gc-mount--week.is-live .gc-week {
    grid-template-columns: repeat(40, minmax(0, 1fr));
    gap: 2px;
    max-width: 440px;
  }
}

.gc-week__key {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 0;
  padding: 2px 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: opacity 240ms ease, color 240ms ease;
}
.gc-week__key:hover,
.gc-week__key[aria-pressed="true"] { color: var(--gc-fg); }
.gc-week__key[aria-pressed="true"] > span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.gc-week__key.is-dim { opacity: .4; }

/* Compact legend: one row of hour chips, sentence in a tooltip. */
.gc-week__legend.is-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-top: 8px;
}
.gc-week__legend.is-compact li { display: block; position: relative; }
.gc-week__legend.is-compact .gc-week__key {
  position: relative;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  font-size: 11.5px;
  color: var(--gc-fg);
  font-variant-numeric: tabular-nums;
}
.gc-week__legend.is-compact .gc-week__sw { width: 10px; height: 10px; transform: none; }
.gc-week__legend.is-compact .gc-week__key[aria-pressed="true"] > span { text-decoration: none; }
.gc-week__legend.is-compact .gc-week__key[aria-pressed="true"] .gc-week__h {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.gc-week__legend.is-compact .gc-week__tip {
  position: absolute;
  left: -6px;
  bottom: calc(100% + 6px);
  z-index: 5;
  width: max-content;
  max-width: 220px;
  padding: 7px 9px;
  background: var(--pz-ink);
  color: var(--pz-bone);
  border-radius: 2px;
  font-size: 11.5px;
  line-height: 1.4;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.gc-week__legend.is-compact li:last-child .gc-week__tip { left: auto; right: -6px; }
.gc-week__legend.is-compact .gc-week__key:hover .gc-week__tip,
.gc-week__legend.is-compact .gc-week__key:focus-visible .gc-week__tip,
.gc-week__legend.is-compact .gc-week__key[aria-pressed="true"] .gc-week__tip {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .gc-week__legend.is-compact .gc-week__tip { transition: none; }
}

/* ═══ 2 · Simulador de relleus ═══════════════════════════════════ */
.gc-mount--sim.is-live .gc-sim__waffle { max-width: 600px; overflow: visible; }

.gc-sim__lattice { opacity: 0; transition: opacity 420ms var(--gc-ease); }
.gc-mount--sim.is-on .gc-sim__lattice { opacity: 1; }
.gc-sim__latframe {
  fill: none;
  stroke: var(--gc-hair-strong);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.gc-sim__slot { fill: none; stroke: rgba(17, 17, 17, .16); stroke-width: 1; }
.gc-sim__latlabel {
  font-family: var(--gc-mono);
  font-size: 10px;
  letter-spacing: .16em;
  fill: var(--gc-fg);
}
.gc-sim__latp {
  font-family: var(--gc-mono);
  font-size: 8px;
  letter-spacing: .04em;
  fill: var(--gc-mute);
}
.gc-mount--sim.is-live .gc-sim__sw--base { transition: background-color 300ms ease, border-color 300ms ease; }
/* «Sense base»: only the swatch goes hollow. The label is still content,
   so it keeps full --gc-mute contrast instead of fading out. */
.gc-mount--sim.is-off .gc-sim__sw--base {
  background: transparent;
  border: 1px dashed var(--pz-teal);
}

/* The table stays as the text alternative (and the SVG's caption). */
.gc-mount--sim.is-live .gc-sim__table {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.gc-sim__ctl { display: flex; flex-direction: column; gap: 26px; }

.gc-sim__fhead {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 16px;
  margin-bottom: 10px;
}
.gc-sim__label,
.gc-sim__rlabel {
  font-family: var(--gc-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gc-mute);
}
.gc-sim__out {
  font-family: var(--gc-mono);
  font-size: 12px;
  color: var(--gc-fg);
  font-variant-numeric: tabular-nums;
}

.gc-sim__range {
  --gc-sim-v: 0;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.gc-sim__range::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(90deg,
    var(--gc-fg) 0 calc(9px + var(--gc-sim-v) * (100% - 18px)),
    var(--gc-line-strong) calc(9px + var(--gc-sim-v) * (100% - 18px)) 100%);
}
.gc-sim__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -8px;
  border: 0;
  border-radius: 1px;
  background: var(--gc-fg);
  transition: transform 200ms var(--gc-ease);
}
.gc-sim__range:active::-webkit-slider-thumb { transform: scale(1.18); }
.gc-sim__range::-moz-range-track { height: 2px; background: var(--gc-line-strong); }
.gc-sim__range::-moz-range-progress { height: 2px; background: var(--gc-fg); }
.gc-sim__range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 1px;
  background: var(--gc-fg);
}
.gc-sim__ticks {
  display: flex;
  justify-content: space-between;
  padding: 0 5px;
  margin-top: 4px;
  font-family: var(--gc-mono);
  font-size: 10px;
  color: var(--gc-mute);
  font-variant-numeric: tabular-nums;
}
.gc-sim__ticks span { width: 8px; text-align: center; }

.gc-sim__modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--gc-line-strong);
  border-radius: 2px;
}
.gc-sim__mode {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: var(--gc-mute);
  font: 500 14px/1.25 var(--gc-body);
  text-align: left;
  cursor: pointer;
  transition: background-color 240ms ease, color 240ms ease;
}
.gc-sim__mode + .gc-sim__mode { border-left: 1px solid var(--gc-line-strong); }
.gc-sim__mode:hover { color: var(--gc-fg); }
.gc-sim__mode[aria-checked="true"] { background: var(--gc-fg); color: var(--gc-bg); }
.gc-sim__modesw { width: 9px; height: 9px; flex: none; }
.gc-sim__mode--off .gc-sim__modesw { border: 1.5px solid var(--pz-magenta); }
.gc-sim__mode--on .gc-sim__modesw { background: var(--pz-teal); }

.gc-sim__readout {
  --gc-sim-mem: 1;
  padding-top: 18px;
  border-top: 1px solid var(--gc-line);
}
.gc-sim__rval {
  margin-top: 10px;
  font-family: var(--gc-display);
  font-weight: 800;
  font-size: clamp(64px, 8vw, 120px);
  line-height: .9;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Memory bar: ink = what the team still knows; the magenta remainder
   is what walked out of the door. */
.gc-sim__bar {
  position: relative;
  display: block;
  height: 4px;
  margin-top: 14px;
  background: var(--pz-magenta);
  overflow: hidden;
}
.gc-sim__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gc-fg);
  transform: scaleX(var(--gc-sim-mem));
  transform-origin: 0 50%;
}
.gc-sim__state {
  min-height: 3em;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--gc-fg);
}

/* ═══ 3 · El perímetre ═══════════════════════════════════════════ */
.gc-mount--perimeter.is-live .gc-per__options { display: none; }

.gc-pl__door {
  fill: none;
  stroke: rgba(243, 240, 234, .55);
  stroke-width: 1;
  stroke-dashoffset: var(--gc-pl-gap, 64);
  transition: stroke-dashoffset 700ms var(--gc-ease);
}
.gc-pl.is-alt .gc-pl__door { stroke-dashoffset: 0; }

.gc-pl__path {
  fill: none;
  stroke: var(--pz-magenta);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  opacity: 0;
  transition: opacity 500ms var(--gc-ease), stroke 500ms ease;
}
.gc-pl.is-none .gc-pl__path.is-leak { opacity: .85; }
.gc-pl.is-ban .gc-pl__path.is-leak { opacity: .08; }
.gc-pl.is-alt .gc-pl__path {
  opacity: .5;
  stroke: var(--pz-teal);
  stroke-width: 1;
  stroke-dasharray: none;
}
.gc-pl.is-alt .gc-pl__path.is-res {
  opacity: .55;
  stroke: var(--pz-magenta);
  stroke-dasharray: 3 4;
}
.gc-pl.is-run.is-none .gc-pl__path.is-leak,
.gc-pl.is-run.is-ban .gc-pl__path.is-leak,
.gc-pl.is-run.is-alt .gc-pl__path.is-res { animation: gc-pl-flow 2.4s linear infinite; }
@keyframes gc-pl-flow { to { stroke-dashoffset: -21; } }

.gc-pl__box { transition: opacity 600ms var(--gc-ease); }
.gc-pl.is-alt .gc-pl__box { opacity: .12; }
.gc-pl.is-alt .gc-pl__box.is-res { opacity: .4; }

.gc-pl__node { opacity: 0; transition: opacity 500ms var(--gc-ease); }
.gc-pl__nodebox { transform: scale(.6); transition: transform 700ms var(--gc-ease); }
.gc-pl.is-alt .gc-pl__node { opacity: 1; }
.gc-pl.is-alt .gc-pl__nodebox { transform: scale(1); }
.gc-pl__nodeframe { fill: rgba(27, 182, 162, .08); stroke: var(--pz-teal); stroke-width: 1; }
.gc-pl__bit { fill: var(--pz-teal); opacity: 0; transition: opacity 260ms ease; }
.gc-pl__bit.is-on { opacity: 1; }
.gc-pl__nodelabel,
.gc-pl__hidden {
  font-family: var(--gc-mono);
  font-size: 10px;
  letter-spacing: .08em;
}
.gc-pl__nodelabel {
  fill: rgba(243, 240, 234, .88);
  /* Knock the label out of the teal paths it sits on: a stroke in the
     section's own ink surface painted under the fill (not a shadow). */
  paint-order: stroke fill;
  stroke: var(--gc-bg);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.gc-pl__hidden {
  fill: var(--pz-magenta);
  opacity: 0;
  transition: opacity 500ms ease;
}
.gc-pl.is-ban .gc-pl__hidden { opacity: .95; }

.gc-pl__dots { transition: opacity 500ms ease; }
.gc-pl.is-ban .gc-pl__dots { opacity: .22; }
.gc-pl__dot { fill: var(--pz-magenta); }
.gc-pl.is-alt .gc-pl__dot { fill: var(--pz-teal); }
.gc-pl.is-alt .gc-pl__dot.is-res,
.gc-pl__dot.is-back { fill: var(--pz-magenta); }

/* Panel: the policy picker */
.gc-pl__modes {
  display: grid;
  margin-top: 24px;
  border: 1px solid var(--gc-line-strong);
  border-radius: 2px;
}
.gc-pl__mode {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  margin: 0;
  padding: 12px 16px 12px 20px;
  border: 0;
  background: transparent;
  color: var(--gc-mute);
  font-family: var(--gc-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
  transition: background-color 240ms ease, color 240ms ease;
}
.gc-pl__mode + .gc-pl__mode { border-top: 1px solid var(--gc-line); }
.gc-pl__mode::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  background: var(--pz-magenta);
  transform: scaleY(0);
  transition: transform 300ms var(--gc-ease);
}
.gc-pl__mode--alt::before { background: var(--pz-teal); }
.gc-pl__mode:hover { color: var(--gc-fg); }
.gc-pl__mode[aria-checked="true"] { background: rgba(243, 240, 234, .06); color: var(--gc-fg); }
.gc-pl__mode[aria-checked="true"]::before { transform: none; }
.gc-pl__modeidx {
  font-family: var(--gc-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--gc-mute);
}

.gc-pl__reads { margin: 24px 0 14px; }
/* Labels may wrap to two lines: the figures still share one baseline. */
.gc-pl__read { display: flex; flex-direction: column; }
.gc-pl__read dt { margin-bottom: 6px; }
.gc-pl__reads dd {
  margin-top: auto;
  font-size: clamp(28px, 2.8vw, 40px);
}
/* The traceability readout is a word, not a number: it is set smaller
   so «completa» / «complete» / «full» fit a third of the panel. */
.gc-pl__read--r3 dd {
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.43;
  white-space: nowrap;
}
.gc-pl__read--r3 dd.is-full::before {
  content: "";
  display: inline-block;
  width: .26em;
  height: .26em;
  margin-right: .18em;
  vertical-align: .12em;
  background: var(--pz-teal);
}
.gc-pl__reads dd.is-swap { animation: gc-pl-swap 420ms var(--gc-ease); }
@keyframes gc-pl-swap {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.gc-pl__note {
  min-height: 4.65em;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--gc-mute);
}

/* ═══ 4 · Entreacte ═════════════════════════════════════════════ */
/* The wrapper is the panel's own height plus 70svh of pinned travel
   (170svh when the panel fits the screen). A panel taller than the
   viewport sticks by its bottom edge: --gc-ent-top goes negative.
   The ink moves from the mount to a layer inside the panel, and the
   mount's negative bottom margin slides the bone «El servei» block one
   viewport under the stage, so the opening hole lands on real copy. */
.gc .gc-mount--entreacte.is-live {
  background-color: transparent;
  margin-bottom: calc(-1 * var(--gc-ent-ov, 100vh));
}
.gc-mount--entreacte.is-live .gc-ent { height: calc(var(--gc-ent-ph, 100vh) + 70vh); }
@supports (height: 1svh) {
  .gc-mount--entreacte.is-live .gc-ent { height: calc(var(--gc-ent-ph, 100svh) + 70svh); }
}
.gc-mount--entreacte.is-live .gc-ent__panel {
  position: sticky;
  top: var(--gc-ent-top, 0px);
  z-index: 10;                    /* above the bone block that slides under */
  isolation: isolate;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: calc(var(--gc-nav-h) + clamp(20px, 4vh, 48px)) 0 clamp(20px, 4vh, 48px);
}
@supports (height: 1svh) {
  .gc-mount--entreacte.is-live .gc-ent__panel {
    min-height: 100svh;
    padding: calc(var(--gc-nav-h) + clamp(20px, 4svh, 48px)) 0 clamp(20px, 4svh, 48px);
  }
}
.gc-mount--entreacte.is-live .gc-ent__inner {
  width: 100%;
  will-change: transform, opacity;
}
.gc-mount--entreacte.is-live .gc-eq {
  font-size: min(var(--gc-fs-eq), 10vh);
  margin-top: clamp(20px, 3vh, 40px);
}
@supports (height: 1svh) {
  .gc-mount--entreacte.is-live .gc-eq { font-size: min(var(--gc-fs-eq), 10svh); }
}
.gc-mount--entreacte.is-live .gc-eq__line {
  display: block;
  overflow: hidden;
}
.gc-mount--entreacte.is-live .gc-eq__line > span {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  will-change: transform;
}
.gc-mount--entreacte.is-live .gc-eq__op { opacity: 0; }
.gc-mount--entreacte.is-live .gc-eq__rule { transform: scaleX(0); }
.gc-mount--entreacte.is-live .gc-ent__dot {
  visibility: hidden;             /* the wipe draws the dot at its place */
  margin-top: clamp(20px, 3vh, 40px);
}
.gc-mount--entreacte.is-live .gc-ent__foot { margin-top: clamp(20px, 3.5vh, 48px); }
.gc-mount--entreacte.is-live .gc-kicker,
.gc-mount--entreacte.is-live .gc-ent__lead,
.gc-mount--entreacte.is-live .gc-ent__stat,
.gc-mount--entreacte.is-live .gc-ent__maxim { opacity: 0; }

.gc-ent__ink {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--pz-ink);
}
.gc-ent__dotfx {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pz-bone);
  opacity: 0;
  pointer-events: none;
}
.gc-mount--entreacte.is-wiped .gc-ent__panel { pointer-events: none; }
.gc-ent__probe {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 100vh;
  visibility: hidden;
  pointer-events: none;
}
@supports (height: 1svh) {
  .gc-ent__probe { height: 100svh; }
}

/* ═══ Reduced motion and pause ═══════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .gc-pl__path,
  .gc-pl.is-run .gc-pl__path { animation: none !important; }
  .gc-pl__dots { display: none; }
  .gc-pl__reads dd.is-swap { animation: none; }
}

/* ═══ Responsive ═════════════════════════════════════════════════ */
/* Tablets: the single-column card is far wider than the waffle's 600px
   cap, so centre the figure and its legend instead of leaving a void. */
@media (min-width: 641px) and (max-width: 1024px) {
  .gc-mount--sim.is-live .gc-sim__viz { align-items: center; }
}
@media (max-width: 640px) {
  .gc-pl__reads dd { font-size: 24px; }
  .gc-pl__read--r3 dd { font-size: 17px; line-height: 1.6; }
  .gc-pl__mode { font-size: 16px; }
  .gc-sim__ctl { gap: 22px; }
  .gc-sim__mode { padding: 10px 12px; font-size: 13.5px; }
  /* The waffle scales down to ~0.97 here; 10 units keep P1–P5 near 10px. */
  .gc-sim__latp { font-size: 10px; }
  /* The dock becomes a 56px bar here: keep the maxim clear of it while
     the panel is pinned by its bottom edge. */
  .gc-mount--entreacte.is-live .gc-ent__panel {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }
}

/* Four rows (three terms + result): a step smaller so the pinned panel
   keeps its kicker and foot on screen. */
.gc-mount--entreacte.is-live .gc-eq:has(.gc-eq__row:nth-child(4)) { font-size: min(calc(var(--gc-fs-eq) * .8), 7.6vh); }
@supports (height: 1svh) {
  .gc-mount--entreacte.is-live .gc-eq:has(.gc-eq__row:nth-child(4)) { font-size: min(calc(var(--gc-fs-eq) * .8), 7.6svh); }
}