/* The project database pages (yr/features/projects_db.py, yr/projects/render.py) and company pages. Tokens only
   (docs/DESIGN.md). The phase bar itself is in site.css §14 (it appears on other pages too). */
.pj { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.pj-head h1 { max-width: 48rem; overflow-wrap: anywhere; }
.pj-phase { padding: 1.1rem 1.2rem; border-radius: var(--r); background: var(--surface, var(--sea-2)); box-shadow: var(--hi, none);
  border: 1px solid var(--line-soft); max-width: 60rem; }
.pj-go { margin: 0; }
.pj .sp-sec { margin-top: .5rem; }
.pj .sp-facts { margin: 0; max-width: 60rem; }

/* the chain: operator -> contractors */
.chain { display: grid; grid-template-columns: minmax(0, 15rem) auto minmax(0, 1fr); gap: .75rem 1rem; align-items: start; max-width: 60rem; }
.chain ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.chain__c { display: grid; gap: .15rem; padding: .65rem .8rem; border-radius: var(--r-sm); background: var(--sea-2);
  border: 1px solid var(--line-soft); min-width: 0; }
.chain__ops .chain__c { border-color: rgb(91 157 255 / .55); }
.chain__n { font-weight: 500; color: var(--fg); overflow-wrap: anywhere; }
.chain__n a { color: inherit; }
.chain__k { font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-dim); }
.chain__r { font-size: .8125rem; color: var(--fg-muted); line-height: 1.4; overflow-wrap: anywhere; }
.chain__arrow { align-self: center; font-size: 1.5rem; color: var(--pro); }
/* who else needs the same people (yr/projects/crowding.py, v0.32) */
.cw { max-width: 60rem; }
.cw h2 { font-size: 1.25rem; margin: 0 0 .5rem; }
.cw h2 em { font-style: normal; font-size: .8125rem; font-weight: 400; color: var(--fg-dim); margin-left: .5rem; }
.cw-line { margin: 0 0 .5rem; font-size: 1.0625rem; color: var(--fg); }
.cw-chart { display: block; width: 100%; max-width: 40rem; height: auto; }
.cw-chart .cw-p { fill: var(--k-grid); }
.cw-chart .cw-s { fill: var(--k-oilgas); }
.cw-chart .cw-v { fill: var(--fg-muted); font-size: 10px; font-family: var(--font-mono); }
.cw-chart .cw-a { fill: var(--fg-dim); font-size: 10px; font-family: var(--font-mono); }
.cw-key { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin: .25rem 0 .5rem; font-size: .8125rem; color: var(--fg-muted); }
/* v0.34: typical phase length, not announced - lighter, hatched */
.cw-chart .cw-th-bg { fill: rgb(91 157 255 / .12); }
.cw-chart .cw-th-l { stroke: rgb(91 157 255 / .55); stroke-width: 1.5; }
.cw-key .k-t::before { background: repeating-linear-gradient(45deg, rgb(91 157 255 / .6) 0 1.5px, rgb(91 157 255 / .12) 1.5px 4px); }
.cw-key .k-asof { color: var(--fg-dim); font-family: var(--font-mono); font-size: .75rem; }
.cw-key .k-asof::before { display: none; }
.cw-key .k-n::before { background: rgb(91 157 255 / .45); }
.cw-how { font-size: .8125rem; }
.cw-how summary { cursor: pointer; color: var(--mist); text-decoration: underline; text-underline-offset: .2em; min-height: 1.5rem; }
.cw-how[open] { flex-basis: 100%; }
.cw-how p { margin: .4rem 0 0; max-width: 46rem; color: var(--fg-muted); }
.cw-grid td.has-t { background-image: repeating-linear-gradient(45deg, rgb(91 157 255 / .22) 0 2px, transparent 2px 6px); }
.cw-grid .cw-plus { color: var(--fg-dim); font-size: .6875rem; }
.cw-grid .cw-n, .cw-grid .cw-plus { display: block; }
.cw-key span::before { content: ""; display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: .35rem; vertical-align: -.05rem; }
.cw-key .k-p::before { background: var(--k-grid); }
.cw-key .k-s::before { background: var(--k-oilgas); }
.cw-go { margin: .75rem 0; }
.cw-form { margin: 0 0 .75rem; align-items: center; }
.cw-form select { min-height: 2.75rem; }
.cw-grid { border-collapse: collapse; font-size: .75rem; font-family: var(--font-mono); }
.cw-grid th, .cw-grid td { padding: .3rem .4rem; text-align: center; white-space: nowrap; }
.cw-grid tbody th { text-align: left; font-family: var(--font); font-weight: 400; color: var(--fg-muted); }
.cw-grid td { background: rgb(91 157 255 / calc(var(--v, 0) * .55)); color: var(--fg); border: 1px solid var(--sea); min-width: 2rem; }

/* demand per role group per month on /radar (v0.33) */
.cw-regions { margin: var(--s4) 0; }
.cw-regions a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .3rem .9rem; border-radius: 99px;
  border: 1px solid var(--edge); color: var(--mist); text-decoration: none; font-size: .875rem; }
.cw-regions a.is-on { border-color: var(--pro); color: var(--fg); background: rgb(56 225 214 / .1); }
.cw-grid--wide td { min-width: 2.4rem; }
.cw-grid thead th { color: var(--fg-dim); font-weight: 400; }

/* company pages (v0.33) */
.co-mates { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }

/* When are you needed? (yr/features/when_needed.py, v0.32) */
.wn-form { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); align-items: end; max-width: 60rem; margin-top: var(--s5); }
.wn-form .field { margin: 0; }
.wn-form select, .wn-form input { width: 100%; min-height: 2.75rem; }
.wn-go { display: flex; }
.wn { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); max-width: 60rem; }
.wn h2 { margin: 0; }
.wn-k { font-family: var(--font-mono); font-size: .75rem; font-weight: 400; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-dim); margin: var(--s4) 0 0; }
.wn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.wn-r { display: grid; gap: .35rem; padding: .8rem 1rem; border-radius: var(--r-sm); background: var(--sea-2); border: 1px solid var(--line-soft); min-width: 0; }
.wn-r h3 { margin: 0; font-size: 1.0625rem; overflow-wrap: anywhere; }
.wn-r p { margin: 0; overflow-wrap: anywhere; }
.wn-when { font-family: var(--font-mono); font-size: .75rem; color: var(--pro-hi); text-transform: uppercase; letter-spacing: .06em; }
.wn-save { margin-top: var(--s5); display: grid; gap: .5rem; justify-items: start; }
.wn-near { margin: var(--s5) 0 0; overflow-wrap: anywhere; }
.wn-near .arrow { margin-left: .5rem; white-space: nowrap; }
.wn-r--est { background: transparent; border-style: dashed; }
.wn-r--est .wn-when { color: var(--fg-muted); }
.wn-block .lead { max-width: 40rem; }
.radar-when { margin-top: var(--s5); margin-bottom: 0; }

@media (max-width: 40rem) {
  .chain { grid-template-columns: minmax(0, 1fr); }
  .chain__arrow { transform: rotate(90deg); justify-self: start; margin-left: 1rem; }
}