/* ============================================================
   Projectkop en faselint (ronde 5, P1). Alleen bestaande tokens.
   - .pjbar--compact: buiten Start standaard een regel (zelfde opbouw als
     html.is-ingeklapt in werkbank.css, maar vast).
   - .pjk-tools: Details en het actiemenu rechts in de compacte kop.
   - .phx__teller: klein getal per fase met wat openstaat.
   - .phx__vs en .pjk-vspop: fasevoorstel als pil met klein venster.
   ============================================================ */

/* ---- compacte kop ---- */
.pjbar.pjbar--compact { display: flex; align-items: center; gap: 18px; padding-top: 6px; padding-bottom: 6px; }
.pjbar--compact .pjbar__top,
.pjbar--compact .pjbar__meta,
.pjbar--compact .pjbar__tags,
.pjbar--compact .spine2__meta,
.pjbar--compact .fasevs,
.pjbar--compact .phx__label { display: none; }
.pjbar--compact .pjbar__identity { margin: 0; flex: 0 1 auto; min-width: 0; }
.pjbar--compact .pjbar__title { padding: 3px 8px; max-width: 440px; min-width: 0; }
.pjbar--compact .pjbar__title b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pjbar--compact .spine2 { flex: 1; min-width: 0; padding: 0; }
.pjbar--compact .spine2__track { padding-bottom: 0; }
.pjbar--compact .phx { min-width: 30px; gap: 0; padding: 2px; }
.pjbar--compact .phx__node { width: 22px; height: 22px; }
.pjbar--compact .phx__node b { font-size: 10.5px; }
.pjbar--compact .phx__node em { font-size: 9px; }
.pjbar--compact .phx__node svg { width: 11px; height: 11px; }
.pjbar--compact .phx.is-cur::after { left: 8px; right: 8px; bottom: -1px; height: 2px; }
.pjbar--compact .phx--spoor,
html.is-ingeklapt .phx--spoor { min-width: 44px; margin-left: 6px; }
@media (max-width: 1279px) { .pjbar--compact .pjbar__title { max-width: 300px; } }

/* ---- Details en acties ---- */
.pjk-tools { display: none; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }
.pjbar--compact .pjk-tools,
html.is-ingeklapt .pjk-tools { display: flex; }
.pjk-knop { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.pjk-knop svg { color: var(--text-3); }
.pjk-knop:hover, .pjk-knop[aria-expanded="true"] { color: var(--text); border-color: var(--line-strong); }
.pjk-knop:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.pjk-knop--inklap { height: 30px; margin-left: 4px; }

.pjk-acties { position: relative; }
.pjk-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 230px; padding: 6px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.pjk-menu__item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: 7px; background: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.pjk-menu__item svg { color: var(--text-3); }
.pjk-menu__item:hover, .pjk-menu__item:focus-visible { background: var(--bg-2); outline: none; }
.pjk-menu__item.is-cur { color: var(--brand); }
.pjk-menu__item.is-cur svg { color: var(--brand); }
.pjk-menu__lijn { height: 1px; margin: 5px 4px; background: var(--line); }
.pjk-menu__uitleg { margin: 6px 4px 2px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 11.5px; line-height: 1.45; color: var(--text-3); max-width: 250px; }

/* ---- teller per fase ---- */
.phx__teller { position: absolute; top: -6px; right: -10px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--amber); color: var(--surface); box-shadow: 0 0 0 2px var(--surface); font-size: 10px; font-weight: 700; font-style: normal; line-height: 17px; text-align: center; pointer-events: none; z-index: 2; }
.pjbar--compact .phx__teller,
html.is-ingeklapt .phx__teller { top: -7px; right: -12px; min-width: 15px; height: 15px; line-height: 15px; font-size: 9.5px; padding: 0 3px; }

/* ---- fasevoorstel als pil ---- */
.phx__vs { position: absolute; top: 50%; right: calc(50% + 21px); transform: translateY(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px 0 6px; border: 1px solid var(--brand); border-radius: 999px; background: var(--surface); color: var(--brand); font-size: 11px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.phx__vs i { font-style: normal; }
.phx__vs:hover, .phx__vs.is-open { background: var(--brand); color: #fff; }
.phx__vs:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.phx.is-voorstel .phx__node { border-color: var(--brand); border-style: dashed; }
.phx__vs.is-klein,
html.is-ingeklapt .phx__vs { right: calc(50% + 13px); width: 18px; height: 18px; padding: 0; justify-content: center; }
.phx__vs.is-klein i,
html.is-ingeklapt .phx__vs i { display: none; }

.pjk-vspop { position: fixed; z-index: 400; width: 340px; padding: 14px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); }
.pjk-vspop__txt { display: flex; gap: 8px; margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.pjk-vspop__txt svg { flex-shrink: 0; margin-top: 2px; color: var(--brand); }
.pjk-vspop__txt b { color: var(--text); font-weight: 600; }
.pjk-vspop__fout { margin: 8px 0 0; font-size: 12.5px; color: var(--neg); }
.pjk-vspop__acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.pjk-vspop__acts .btn { padding: 6px 12px; font-size: 12px; }

/* donker: het actief-accent van richting A, anders valt de pil weg tegen de balk */
html[data-theme="dark"] .phx__vs { border-color: #8BB1C8; color: #8BB1C8; }
html[data-theme="dark"] .phx.is-voorstel .phx__node { border-color: #8BB1C8; }
html[data-theme="dark"] .phx__vs:hover,
html[data-theme="dark"] .phx__vs.is-open { background: #8BB1C8; color: var(--surface); }
html[data-theme="dark"] .pjk-vspop__txt svg { color: #8BB1C8; }

/* ============================================================
   Projectmenu (vervangt de genummerde bolletjes). Elke fase met naam,
   gegroepeerd in Acquisitie, Uitvoering en Afronding; de dunne lijn
   boven een fase is de voortgang. Te smal: groepen waar je niet bent
   klappen in tot een keuzeknop (.pm--smal, gezet in shell.jsx).
   ============================================================ */
.pm { --pm-accent: var(--brand); display: flex; align-items: flex-end; gap: 16px; width: 100%; min-width: 0; padding-top: 2px; }
html[data-theme="dark"] .pm { --pm-accent: #8BB1C8; }
.pm-groep { position: relative; display: flex; flex-direction: column; gap: 4px; flex: none; }
.pm-groep--samen { margin-left: auto; }
.pm-groep__kop { display: flex; align-items: baseline; gap: 7px; padding: 0 10px; font-size: 10.5px; line-height: 14px; white-space: nowrap; }
.pm-groep__kop b { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.pm-groep__kop em { font-style: normal; color: var(--text-3); }
.pm-groep__kop em.is-nu { color: var(--pm-accent); font-weight: 600; }
.pm-groep__rij { display: flex; align-items: stretch; gap: 3px; }

.pm-item { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 3px 9px 0; border: 0; border-radius: 0 0 8px 8px; background: none; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .12s, color .12s; }
.pm-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--line-strong); }
.pm-item--los::before { display: none; }
.pm-item--los svg { color: var(--text-3); }
.pm-item--todo { color: var(--text-3); }
.pm-item--done::before { background: var(--pm-accent); }
.pm-item--active { color: var(--text); font-weight: 600; }
.pm-item--active::before { background: linear-gradient(90deg, var(--pm-accent) 50%, var(--line-strong) 50%); }
.pm-item--spoor::before { background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 10px); }
.pm-item--spoor.pm-item--active::before { background: repeating-linear-gradient(90deg, var(--pm-accent) 0 6px, transparent 6px 10px); }
.pm-item:hover { background: var(--bg-2); color: var(--text); }
.pm-item:focus-visible { outline: 2px solid var(--pm-accent); outline-offset: -2px; }
.pm-item.is-cur { background: color-mix(in srgb, var(--pm-accent) 11%, transparent); color: var(--pm-accent); font-weight: 600; box-shadow: inset 0 -2px 0 var(--pm-accent); }
.pm-item.is-cur svg { color: var(--pm-accent); }

.pm-item__mark { display: inline-flex; flex: none; color: var(--pm-accent); }
.pm-item__mark--nu { width: 8px; height: 8px; border-radius: 50%; background: var(--pm-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pm-accent) 20%, transparent); margin: 0 2px; }
.pm-item__tel { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--amber); color: var(--surface); font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; }
.pm .phx__vs { position: static; transform: none; height: 20px; }

/* ---- te smal: groep als keuzeknop ---- */
.pm-keuze__knop { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 3px 10px 0; border: 0; border-radius: 0 0 8px 8px; background: none; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.pm-keuze__knop svg { color: var(--text-3); }
.pm-keuze__knop:hover, .pm-keuze__knop.is-open { background: var(--bg-2); color: var(--text); }
.pm-keuze__knop:focus-visible { outline: 2px solid var(--pm-accent); outline-offset: -2px; }
.pm-keuze__streep { display: inline-flex; gap: 2px; }
.pm-keuze__streep i { width: 9px; height: 4px; border-radius: 2px; background: var(--line-strong); }
.pm-keuze__streep i.is-done { background: var(--pm-accent); }
.pm-keuze__streep i.is-active { background: linear-gradient(90deg, var(--pm-accent) 50%, var(--line-strong) 50%); }
.pm-keuze__lijst { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 230px; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); }
.pm-keuze__lijst .pm-item { height: 34px; padding: 0 10px 0 16px; border-radius: 7px; }
.pm-keuze__lijst .pm-item::before { top: 8px; bottom: 8px; left: 5px; right: auto; width: 3px; height: auto; }
.pm-keuze__lijst .pm-item.is-cur { box-shadow: none; }

/* ---- plaats in de projectkop: het menu krijgt een eigen regel ---- */
.pjbar .spine2 .pm { margin-top: 2px; }
.pjbar.pjbar--compact,
html.is-ingeklapt .pjbar { flex-wrap: wrap; row-gap: 2px; padding-bottom: 0; }
.pjbar--compact .pjk-tools,
html.is-ingeklapt .pjbar .pjk-tools { order: 2; }
.pjbar.pjbar--compact .spine2,
html.is-ingeklapt .pjbar .spine2 { flex: 1 1 100%; order: 3; }
html.is-ingeklapt .pm-groep__kop { display: none; }
html.is-ingeklapt .pm-item,
html.is-ingeklapt .pm-keuze__knop { height: 30px; font-size: 12.5px; }
@media (max-width: 720px) { .pm { flex-wrap: wrap; row-gap: 8px; } .pm-groep--samen { margin-left: 0; } }

/* ---- aanneemsom met bron zichtbaar (C2 uit de ketenproeven) ---- */
.pjbar__bron { display: block; margin-top: 2px; max-width: 280px; font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* h125 (Q50 punt 7): met de opdrachtsom erbij past de rij niet meer op de telefoon; daar loopt hij door op een tweede regel. */
@media (max-width: 720px) { .pjbar__meta { flex-wrap: wrap; row-gap: 12px; column-gap: 20px; margin-left: 0; } .pjbar__bron { max-width: 100%; white-space: normal; } }
.pm--iconen .pm-groep--samen .pm-item__lbl { display: none; }
.pm--iconen .pm-groep--samen .pm-groep__kop b { visibility: hidden; }
.pm-keuze__knop.is-cur { background: color-mix(in srgb, var(--pm-accent) 11%, transparent); color: var(--pm-accent); font-weight: 600; box-shadow: inset 0 -2px 0 var(--pm-accent); }
.pm-keuze__tekst i { font-style: normal; }
.pm-keuze__naam { display: none; }
html.is-ingeklapt .pm-keuze__naam { display: inline; }
html.is-ingeklapt .pm-keuze__aantal { display: none; }

/* ---- h77 (h74 punt 18): projectkop op de telefoon ----
   Compacte kop: projectnaam en Details/Acties op een regel, geen live-kop (die staat onder
   Details). Scrolt de inhoud omlaag (html.is-ingeklapt, werkbank.jsx), dan wijkt ook het
   projectmenu; bovenaan komt het terug. Hoogte nul in plaats van display none: de breedte
   blijft, zodat het projectmenu zijn ingeklapte stand houdt. Alleen op smalle schermen. */
@media (max-width: 640px) {
  .pjbar.pjbar--compact, html.is-ingeklapt .pjbar { gap: 8px; column-gap: 8px; }
  .pjbar--compact .pjbar__identity, html.is-ingeklapt .pjbar__identity { flex: 1 1 0; }
  .pjbar--compact .pjbar__title, html.is-ingeklapt .pjbar__title { max-width: none; }
  .pjbar--compact .live-kop, html.is-ingeklapt .pjbar .live-kop { display: none; }
  .pjbar--compact .pjk-knop { padding: 0 8px; }
  /* projectmenu zoals in de ingeklapte stand: geen groepskoppen, de groep noemt zijn huidige fase */
  .pjbar--compact .pm-groep__kop { display: none; }
  .pjbar--compact .pm-item, .pjbar--compact .pm-keuze__knop { height: 32px; font-size: 12.5px; }
  .pjbar--compact .pm-keuze__naam { display: inline; }
  .pjbar--compact .pm-keuze__aantal { display: none; }
  .pjbar--compact .pm { row-gap: 4px; }
  html.is-ingeklapt .pjbar .spine2 { height: 0; overflow: hidden; visibility: hidden; }
  html.is-ingeklapt .pjbar { padding-bottom: 6px; }
}
/* h84 (h77 punt 5a): het projectmenu op de telefoon op een regel in plaats van drie. Het menu
   schuift zijdelings (zonder balk); inklappen gaat door tot en met de groep waar je bent, zodat
   elke groep een keuzeknop met de huidige fase wordt. De keuzelijst staat vast in beeld (de
   positie zet shell.jsx), anders zou het schuifvlak hem afsnijden. */
@media (max-width: 640px) {
  .pjbar--compact .pm { flex-wrap: nowrap; row-gap: 0; gap: 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
  .pjbar--compact .pm::-webkit-scrollbar { display: none; }
  .pjbar--compact .pm-groep--samen { margin-left: 0; }
  .pjbar--compact .pm-keuze__streep { display: none; }
  .pjbar--compact .pm-item, .pjbar--compact .pm-keuze__knop { padding-left: 8px; padding-right: 8px; gap: 5px; }
  .pjbar--compact .pm-keuze__lijst { position: fixed; top: auto; left: 8px; max-width: calc(100vw - 16px); max-height: 60vh; overflow-y: auto; }
}