/* taool.com/cli: what docs.css doesn't have. Terminal sessions, a command typed then its output (cli.js; the panel is
   docs.css's .doc .session), and the command reference that scripts/docs.py in taool-cli writes from the CLI's help. */

/* ---------- Sessions ---------- */

.term {
    padding: 16px 20px 20px;
    font: 13.5px/1.6 var(--mono);
    overflow-x: auto;
}

.term > div { white-space: pre; }
.term .in { color: var(--phosphor); }
.term .in::before { content: "$ "; color: var(--dim); }
.term .out, .term .note { margin-bottom: 12px; }
.term .note { color: var(--faint); }

/* Output styled as the CLI styles it on a terminal: plain in the phosphor a little dimmed, dim what's secondary (IDs,
   labels, hints), bold a heading, green done, amber waiting or a warning, red failed, and a pick (today's price) in reverse. */
.term .out { color: color-mix(in srgb, var(--phosphor) 82%, var(--dim)); }
.term .out .d { color: var(--dim); }
.term .out b { color: var(--phosphor); font-weight: 700; }
.term .out .ok { color: var(--ok); }
.term .out .warn { color: var(--amber); }
.term .out .err { color: var(--err); }
.term .out .hl { background: color-mix(in srgb, var(--phosphor) 82%, var(--dim)); color: var(--ink); }

/* A line not yet typed or printed: clipped away, never hidden, so a screen reader still reads it. Then printed from the
   top a line at a time, as an example's file is (docs.css's print). */
.term .waiting { clip-path: inset(0 0 100% 0); }
.term .printing { animation: print 420ms steps(14, end); }

@media (max-width: 700px) { .term { font-size: 12px; padding: 14px; } }

/* ---------- Commands ---------- */

.cmd-index { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 18px; font: 14px/1.4 var(--mono); }
.cmd-index a { color: var(--dim); text-decoration: none; }
.cmd-index a:hover { color: var(--phosphor); }

.cmd-group { margin-top: 44px; scroll-margin-top: 24px; }
.cmd-group h3 { font: 22px/1.2 var(--pixel); }
.cmd-group > p { margin-top: 8px; color: var(--dim); max-width: var(--measure); }

.cmd-entry { margin-top: 20px; padding-left: 14px; border-left: 1px solid var(--line); }
.cmd-entry .usage code { color: var(--phosphor); font: 14px/1.5 var(--mono); white-space: normal; }
.cmd-entry p { margin-top: 6px; max-width: var(--measure); }
.cmd-entry p.dim { font-size: 14px; }

.cmd-entry .opts { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 4px 16px; margin-top: 10px; font-size: 14px; }
.cmd-entry .opts dt code { color: var(--phosphor); font: 13px/1.5 var(--mono); white-space: nowrap; }
.cmd-entry .opts dd { color: var(--dim); }

@media (max-width: 700px) {
    .cmd-entry .opts { grid-template-columns: minmax(0, 1fr); }
    .cmd-entry .opts dd { margin-bottom: 6px; }
}