:root { --pico-font-size: 100%; }
.ok  { color: #2e7d32; }
.err { color: #c62828; }
.notice { border-left: 4px solid var(--pico-primary); }

.badge { font-size: .8em; padding: .1em .6em; border-radius: 1em; margin-left: .5em; white-space: nowrap; }
.green  { background: #c8e6c9; color: #1b5e20; }
.yellow { background: #fff3c4; color: #7a5c00; }
.red    { background: #ffcdd2; color: #8e0000; }
.open   { background: #e3f2fd; color: #0d47a1; }
.locked { opacity: .5; }

.tree { --line: #9aa5b1; }
.tree .topic { display: flex; align-items: center; margin: 1.2em 0; }
.tree .node { display: inline-block; border: 1.5px solid var(--line); border-radius: .4em; padding: .35em .8em;
  background: var(--pico-card-background-color); color: inherit; text-decoration: none; }
.tree a.node:hover { border-color: var(--pico-primary); }
.tree .node.green  { background: #c8e6c9; border-color: #66bb6a; }
.tree .node.yellow { background: #fff3c4; border-color: #e0b400; }
.tree .node.red    { background: #ffcdd2; border-color: #e57373; }
.tree .node.open   { background: #e3f2fd; border-color: #64b5f6; }
.tree .topic-node small { white-space: nowrap; }
.tree .topic-node { min-width: 15em; max-width: 18em; }
.tree .node.current { outline: 3px solid var(--pico-primary); }
.tree ul { position: relative; margin: 0 0 0 2.5em; padding: 0; }
.tree ul::before { content: ''; position: absolute; left: -2.5em; top: 50%; width: 2.5em; border-top: 2px solid var(--line); }
.tree li { position: relative; list-style: none; margin: 0; padding: .25em 0 .25em 1.5em; }
.tree li::before { content: ''; position: absolute; left: 0; top: 50%; width: 1.5em; border-top: 2px solid var(--line); }
.tree li::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; border-left: 2px solid var(--line); }
.tree li:first-child::after { top: 50%; }
.tree li:last-child::after { bottom: 50%; }
.tree li:only-child::after { display: none; }
.tree.compact { font-size: .85em; }
.tree.compact .topic { flex-direction: column; align-items: stretch; margin: .8em 0; }
.tree.compact .topic-node { max-width: none; }
.tree.compact ul { margin-left: 1em; }
.tree.compact ul::before { display: none; }
.tree.compact li:first-child::after { top: 0; }
@media (max-width: 760px) {
  .tree .topic { flex-direction: column; align-items: stretch; }
  .tree ul { margin-left: 1em; } .tree ul::before { display: none; } .tree li:first-child::after { top: 0; }
}
.legend .badge { margin: 0 .3em 0 0; border: 1px solid var(--pico-muted-border-color); }
.side-layout { display: grid; grid-template-columns: 18em minmax(0, 1fr); gap: 2em; align-items: start; }
.side { position: sticky; top: 1em; max-height: calc(100vh - 2em); overflow-y: auto; }
.side-head { display: flex; align-items: center; gap: .5em; }
.side-head .fold, .side .unfold { margin: 0; }
.side .unfold { display: none; }
.side-layout.collapsed { grid-template-columns: 2.5em minmax(0, 1fr); }
.side-layout.collapsed .side-head, .side-layout.collapsed .side-body { display: none; }
.side-layout.collapsed .unfold { display: block; }
.continue { display: block; margin: .8em 0; padding: .5em .8em; border-radius: .4em; background: var(--pico-primary-background);
  color: var(--pico-primary-inverse); text-decoration: none; font-size: .9em; }
@media (max-width: 900px) {
  .side-layout, .side-layout.collapsed { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; max-height: none; }
}

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16em, 1fr)); gap: 1em; }
.cards article { margin: 0; display: flex; flex-direction: column; }
.cards article h3 { margin-bottom: .3em; }
.cards article footer { margin-top: auto; }
.progress-line { display: flex; align-items: center; gap: .6em; }
.progress-line progress { margin: 0; }

.mini { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.mini span { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--line, #9aa5b1); background: var(--pico-background-color); }
.mini span.green { background: #66bb6a; border-color: #43a047; }
.mini span.yellow { background: #ffd54f; border-color: #e0b400; }
.mini span.red { background: #ef9a9a; border-color: #e57373; }
.mini span.open { background: #90caf9; }
.mini span.locked { opacity: .35; }
.mini i { width: 8px; }
.journal td { vertical-align: middle; }
.creds td, .creds th { font-family: var(--pico-font-family-monospace); }
@media print { header, .no-print, nav { display: none !important; } }

.tabs { display: flex; gap: .5em; flex-wrap: wrap; margin-bottom: 1em; }
.tabs button { width: auto; }
.timer { font-size: 1.4em; font-variant-numeric: tabular-nums; }
.inline { display: flex; gap: .5em; align-items: center; flex-wrap: wrap; }
.inline > * { width: auto; margin-bottom: 0; }
.toolbar button { padding: .2em .6em; font-size: .85em; width: auto; margin: 0 .2em .3em 0; }
.preview { border: 1px dashed var(--pico-muted-border-color); padding: 1em; border-radius: .5em; min-height: 3em; }
button.small { padding: .15em .55em; font-size: .8em; width: auto; margin: 0 0 0 .3em; }
.task-row { border-bottom: 1px solid var(--pico-muted-border-color); padding: .5em 0; }
img { max-width: 100%; }
.work img { max-height: 70vh; display: block; margin: 0 auto 1em; }

.brand { display: flex; align-items: center; gap: .5em; text-decoration: none; }
.brand img { width: 2.2em; height: 2.2em; }
hgroup.brand { display: grid; grid-template-columns: auto 1fr; column-gap: 1em; }
hgroup.brand img { width: 5em; height: 5em; grid-row: span 2; }

.narrow-only { display: none; }
@media (max-width: 640px) {
  header nav { flex-wrap: wrap; }
  .brand strong, .wide-only { display: none; }
  .narrow-only { display: inline; }
  header nav ul:last-child li { padding-left: .4em; padding-right: .4em; }
}
header nav a, .dropdown summary { white-space: nowrap; }
.dropdown summary { max-width: 14em; overflow: hidden; text-overflow: ellipsis; }