/* PAOL: the section stylesheet. Every rule in it is scoped under
   #ps-network-concept, for the reason the header of /css/account-app.css gives:
   this page also carries the site's own style.css, and the scope is why the two
   can share it. Loaded after the core's stylesheet, so a rule here at the same
   specificity wins.

   The prototype's classes for this section - .ps-quote, .ps-flow, .ps-flowstep,
   .ps-steps, .ps-code, .ps-content, .bill-run-cost - are already in the core's
   stylesheet. What is here is what the port adds: the validator's report, the
   precheck list, the compiled net, the placeholder states, the reason line of
   a failed run, and the phone layout of the four-step flow, which the core
   never gave a narrow rule because no view of its own drew it. */

/* The validator's verdict line: a tag and the counts beside it. */
#ps-network-concept .paol-summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:6px 0 14px;font-size:13px;color:var(--ps-muted)}
#ps-network-concept .paol-summary .ps-tag{margin:0}

/* A finding of severity error. The core has green and amber; the validator
   has a third word and it needs its own colour. */
#ps-network-concept .ps-tag.paol-error{background:#fbe9e7;color:#9b2c1c}

/* The precheck sentences, each one thing missing, in the form's order. */
#ps-network-concept .paol-precheck{margin:14px 0;padding:14px 16px 14px 34px;background:#fff8ef;border-left:3px solid #d2781d;color:var(--ps-navy);font-size:13px;line-height:1.7}
#ps-network-concept .paol-precheck li{margin:0}

/* What the run waits on: the same list shape as the trace, with a glyph in
   the circle instead of a number. */
#ps-network-concept .paol-waiting .ps-stepnum svg{width:14px;height:14px}
#ps-network-concept .paol-waiting strong small{display:inline;font-weight:400;color:var(--ps-muted);margin:0 0 0 6px}

/* The compiled net: places with their marking on the left, transitions on
   the right. A simple list; the drawing is the core's when it arrives. */
#ps-network-concept .paol-net{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:8px 0}
#ps-network-concept .paol-net h3{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ps-muted);margin:0 0 6px;font-weight:600}
#ps-network-concept .paol-net ul{list-style:none;margin:0;padding:0}
#ps-network-concept .paol-net li{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:8px 0;border-bottom:1px solid var(--ps-line);font-size:13px}
#ps-network-concept .paol-net li small{color:var(--ps-muted)}

/* A placeholder's state on the run page, from the server's done and granted
   flags: green once its pending place is empty, amber while its gate is marked
   and the next round will fire it, the plain circle while it waits. */
#ps-network-concept .paol-waiting li.paol-is-done .ps-stepnum{background:#e6f4ea;color:#1e7a3c}
#ps-network-concept .paol-waiting li.paol-is-granted .ps-stepnum{background:#fff3d6;color:#8a5a00}

/* A heading inside a section: the quote's "The run will wait on", a result's
   ref under "Results so far". Same voice as the net's column heads. */
#ps-network-concept .paol-subhead{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ps-muted);margin:14px 0 6px;font-weight:600}

/* The bodies spliced into the net: ref, skill, process id. */
#ps-network-concept .paol-realized{list-style:none;margin:0;padding:0}
#ps-network-concept .paol-realized li{padding:8px 0;border-bottom:1px solid var(--ps-line);font-size:13px}

/* The reason a run failed or stalled, in the server's words. Red, because it
   is the one line on the page that says the run will not continue by itself. */
#ps-network-concept .paol-reason{background:#fbe9e7;color:#9b2c1c;border-left:3px solid #9b2c1c}

/* The findings table wraps its message column rather than forcing a scroll;
   the message is the finding. */
#ps-network-concept .ps-table td:last-child{overflow-wrap:anywhere}

/* The flow on a phone: two columns rather than four squeezed into 358px. */
@media(max-width:600px){
  #ps-network-concept .ps-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0}
  #ps-network-concept .paol-net{grid-template-columns:1fr;gap:18px}
  #ps-network-concept .bill-run-cost{flex-direction:column;align-items:flex-start}
}