/* Learn: 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 index draws with the core's .ps-asidebox, .ps-progress, .ps-meta and
   .ps-row, and a lesson with its .ps-checklist, all lifted from the prototype.
   What is here is only what the prototype did not have: the minutes and done
   count on a lesson row, the line under a step that says how it was proved,
   the checkbox on a step only the person can prove, and the external link. */

/* The lesson rows: "5 min · 2 of 3 done" after the blurb, muted like the rest
   of the row's description, and on its own line when the row wraps. */
#ps-network-concept .lesson-meta{display:inline-block;white-space:nowrap;color:var(--ps-muted)}

/* The card on the index. The core's box already has the border and padding;
   the heading size is restated because a section inside a section would
   otherwise take the section heading's. */
#ps-network-concept .lesson-next h2{font-size:16px}
#ps-network-concept .lesson-next .ps-actions{margin-top:14px}

/* A lesson's steps. */
#ps-network-concept .lesson-steps{margin:6px 0 0}
#ps-network-concept .lesson-steps .ps-checkicon svg{width:22px;height:22px}
#ps-network-concept .lesson-steps h3{margin:0}
#ps-network-concept .lesson-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;margin-top:8px}
#ps-network-concept .lesson-foot .ps-textbtn{padding:0}

/* How a step was proved. A server proof reads green with a check; a step the
   server has not proved reads muted, in words, so nobody mistakes it for a
   thing they can tick. */
#ps-network-concept .lesson-proof{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ps-muted)}
#ps-network-concept .lesson-proof svg{width:14px;height:14px}
#ps-network-concept .lesson-proof.is-proved{color:var(--ps-good)}

/* The step only the person can prove: a real checkbox, big enough for a thumb,
   with its label as the thing you press. */
#ps-network-concept .lesson-tick{display:inline-flex;align-items:center;gap:8px;min-height:36px;font-size:12px;color:var(--ps-muted);cursor:pointer;user-select:none}
#ps-network-concept .lesson-tick input{width:18px;height:18px;flex:none;margin:0;accent-color:var(--ps-good);cursor:pointer}
#ps-network-concept .lesson-tick.is-ticked{color:var(--ps-good)}

/* The link out to the written tutorials, under the paths. */
#ps-network-concept .lesson-external{margin:22px 0 0;font-size:14px}
#ps-network-concept .lesson-external a{display:inline-flex;align-items:center;gap:6px}
#ps-network-concept .lesson-external svg{width:14px;height:14px}

@media(max-width:600px){
  #ps-network-concept .lesson-meta{display:block;white-space:normal;margin-top:2px}
  #ps-network-concept .lesson-foot{gap:4px 16px}
}