/* Avendar components. Load after tokens.css. Pure CSS: no images, no generated text.
   Everything that looks like ASCII (frame edges, dashes, corners, junctions, column dividers, the `>` prompt,
   list dashes) is DRAWN as a CSS mask cut from the DejaVu Sans Mono outlines, so screen readers never see it.
   Grid: one column = 1ch, one row = var(--space-line) = 1.5rem. Keep both exact.
   Needs mask-image, mask-composite and round(): Chrome 125, Firefox 118, Safari 15.4 or newer. */

/* ---------- glyph masks: generated by tools/make_glyphs.py from DejaVuSansMono.ttf; do not edit ---------- */
:where(:root){
  --av-g-fwd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1233 2384' preserveAspectRatio='none'%3E%3Cpath transform='translate(0 1901) scale(1 -1)' d='M889 1493H1079L293 -190H102Z'/%3E%3C/svg%3E");
  --av-g-back:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1233 2384' preserveAspectRatio='none'%3E%3Cpath transform='translate(0 1901) scale(1 -1)' d='M293 1493 1079 -190H889L102 1493Z'/%3E%3C/svg%3E");
  --av-g-gt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1233 2384' preserveAspectRatio='none'%3E%3Cpath transform='translate(0 1901) scale(1 -1)' d='M88 961V1143L1145 725V559L88 141V324L938 641Z'/%3E%3C/svg%3E");
  --av-g-dash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1233 2384' preserveAspectRatio='none'%3E%3Crect x='356' y='1258' width='521' height='164'/%3E%3C/svg%3E");
  --av-g-bar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1233 1' preserveAspectRatio='none'%3E%3Crect x='530' width='172' height='1'/%3E%3C/svg%3E");
  --av-g-bar2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2466 1' preserveAspectRatio='none'%3E%3Crect x='530' width='172' height='1'/%3E%3Crect x='1763' width='172' height='1'/%3E%3C/svg%3E");
  --av-g-jtop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2466 2384' preserveAspectRatio='none'%3E%3Cpath transform='translate(0 1901) scale(1 -1)' d='M293 1493 1079 -190H889L102 1493Z'/%3E%3Cpath transform='translate(1233 1901) scale(1 -1)' d='M889 1493H1079L293 -190H102Z'/%3E%3C/svg%3E");
  --av-g-jbot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2466 2384' preserveAspectRatio='none'%3E%3Cpath transform='translate(0 1901) scale(1 -1)' d='M889 1493H1079L293 -190H102Z'/%3E%3Cpath transform='translate(1233 1901) scale(1 -1)' d='M293 1493 1079 -190H889L102 1493Z'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
:where(html){background:var(--bg);color:var(--ink);font:400 1rem/1.5rem var(--font-mono);-webkit-text-size-adjust:100%;text-size-adjust:100%}
:where(body){margin:0}
:where(p,ul,ol,dl,pre,blockquote,figure){margin:0 0 var(--space-line)}
:where(h1,h2,h3,h4,h5,h6){margin:0;font-size:inherit;font-weight:700}
:where(dd){margin:0}
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:2px}
::selection{background:var(--ink);color:var(--bg)}

/* ---------- drawing kit ----------
   One cell = 1ch wide by one row (--av-line) tall. Slashes, the chevron, the hyphen and the bar are the
   font's own outlines (the --av-g-* masks above). Slash, bar and chevron cells are scaled to the row, the way a
   terminal sets them. The hyphen keeps its natural size and sits at the font's height in the row. */
:where(:root){
  --av-line:var(--space-line,1.5rem);                  /* one row */
  --av-gh:1.1641em;                                    /* the font's cell: ascent + descent */
  --av-dy:calc(var(--av-line) * .5621 - .6544em);      /* top of a natural cell, so the hyphen sits where the font puts it */
  --av-ln:var(--rule);                                 /* ink for every drawn line */
}

/* ---------- Frame: a box with drawn edges. Frames stack with no gap ---------- */
.av-frame{
  --av-x0:calc(2ch + var(--av-col-a,12ch) + 1ch);      /* left edge of a junction, from the frame's left */
  --av-jw:2ch;                                         /* width of a junction: two cells, \/ or /\ */
  position:relative;box-sizing:border-box;
  inline-size:min(100%,var(--frame-width,80ch));margin-inline:auto;
  padding:var(--av-line) 2ch;                          /* 1 col border + 1 col space; top and bottom rows hold the edges */
}
.av-frame{inline-size:min(round(down,100%,1ch),var(--frame-width,80ch))}
.av-frame>:first-child{margin-top:0}
.av-frame>:last-child{margin-bottom:0}
/* a plain frame has no junction: collapse it and let the dashes run through */
.av-frame:not(.av-frame--cols){--av-x0:1ch;--av-jw:0px}
.av-frame::before{
  content:"";position:absolute;inset:0;pointer-events:none;background:var(--av-ln);
  /* layers, top to bottom: 4 corners, 2 junctions, 2 sides | clip for the dashes | top dashes, bottom dashes.
     The clip is intersected with the two dash rows, which keeps the dashes out of corner and junction cells. */
  mask-image:
    var(--av-g-fwd),var(--av-g-back),var(--av-g-back),var(--av-g-fwd),
    var(--av-g-jtop),var(--av-g-jbot),var(--av-g-bar),var(--av-g-bar),
    linear-gradient(to right,transparent 1ch,#000 1ch,#000 var(--av-x0),transparent var(--av-x0),transparent calc(var(--av-x0) + var(--av-jw)),#000 calc(var(--av-x0) + var(--av-jw)),#000 calc(100% - 1ch),transparent calc(100% - 1ch)),
    var(--av-g-dash),var(--av-g-dash);
  mask-size:
    1ch var(--av-line),1ch var(--av-line),1ch var(--av-line),1ch var(--av-line),
    var(--av-jw) var(--av-line),var(--av-jw) var(--av-line),
    1ch calc(100% - 2 * var(--av-line)),1ch calc(100% - 2 * var(--av-line)),
    100% 100%,
    1ch var(--av-gh),1ch var(--av-gh);
  mask-position:
    0 0,100% 0,0 100%,100% 100%,
    var(--av-x0) 0,var(--av-x0) 100%,
    0 var(--av-line),100% var(--av-line),
    0 0,
    0 var(--av-dy),left 0 bottom calc(var(--av-line) - var(--av-dy) - var(--av-gh));
  mask-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat-x,repeat-x;
  mask-composite:add,add,add,add,add,add,add,add,intersect,add,add;
}

/* ---------- Columns: two columns split by a drawn || divider, which meets the frame's \/ and /\ ---------- */
.av-cols{display:grid;grid-template-columns:var(--av-col-a,12ch) 4ch minmax(0,1fr);position:relative}
.av-cols::before{content:"";position:absolute;inset-block:0;inset-inline-start:calc(var(--av-col-a,12ch) + 1ch);inline-size:2ch;pointer-events:none;
  background:var(--av-ln);mask:var(--av-g-bar2) 0 0 / 100% 100% no-repeat}
.av-cols>:first-child,.av-cols>dt{grid-column:1;min-inline-size:0}
.av-cols>:last-child,.av-cols>dd{grid-column:3;min-inline-size:0;margin:0}
.av-cols>div>:last-child{margin-bottom:0}
.av-cols>dt{color:var(--ink-soft)}
@media (max-width:36rem){
  .av-frame--cols{--av-jw:0px}
  .av-cols{grid-template-columns:minmax(0,1fr)}
  .av-cols::before{display:none}
  .av-cols>:first-child,.av-cols>:last-child,.av-cols>dt,.av-cols>dd{grid-column:1}
  .av-cols>div:last-child{margin-top:var(--av-line)}
  .av-cols>dd{margin-bottom:calc(var(--av-line) / 2)}
}

/* ---------- Dashed rows: one row tall, hyphens at the font's own spacing ---------- */
.av-rule,.av-prose hr,.av-prose h2::after,.av-table th::after,.av-table tbody tr:last-child td::after{
  background:var(--av-ln);
  mask:var(--av-g-dash) 0 var(--av-dy) / 1ch var(--av-gh) repeat-x}
.av-rule{display:block;border:0;margin:0 -1ch;block-size:var(--av-line)}   /* inside a frame: reaches the columns next to the border */
.av-rule--open{margin-inline:0}                                             /* outside a frame */

/* ---------- Prompt: a drawn ">" at the font's own size and height ---------- */
.av-prompt{display:inline-block;flex:none;inline-size:2ch;block-size:var(--av-line);vertical-align:top;background:var(--prompt);
  mask:var(--av-g-gt) 0 calc((var(--av-line) - var(--av-gh)) / 2) / 1ch var(--av-gh) no-repeat}
.av-cursor{display:inline-block;inline-size:1ch;block-size:var(--av-gh);background:var(--ink-bright);vertical-align:text-bottom}

/* ---------- Header: brand at the left; sections as commands beside it, sub-sections as a second row ---------- */
.av-head{--av-brand-rows:1;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:3ch;align-items:start;padding-inline:2ch}
.av-head>nav{grid-column:2;min-inline-size:0}
.av-brand{grid-column:1;grid-row:1 / span 2;display:block;color:var(--ink-bright);font-weight:700;text-decoration:none}
.av-brand:hover,.av-brand:focus-visible{background:var(--ink-bright);color:var(--on-fill)}
.av-brand :where(img,svg){display:block;block-size:calc(var(--av-line) * var(--av-brand-rows));inline-size:auto;fill:currentColor}
@media (max-width:48rem){
  .av-head{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .av-brand{grid-row:auto}
  .av-head>nav{grid-column:1}
}

.av-nav{display:flex;flex-wrap:wrap;column-gap:3ch;list-style:none;margin:0;padding:0}
.av-nav a,.av-btn{display:inline-flex;color:var(--ink);text-decoration:none}
.av-nav a:hover,.av-btn:hover{background:var(--ink);color:var(--on-fill)}
.av-nav a:hover .av-prompt,.av-btn:hover .av-prompt{background:var(--on-fill)}
.av-nav a[aria-current]{color:var(--ink-bright);font-weight:700;text-decoration:underline;text-underline-offset:.2em}
.av-nav a[aria-current]:hover{color:var(--on-fill)}
.av-btn{font:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:start}
.av-btn[hidden]{display:none}
.av-nav .av-nav__end{margin-inline-start:auto}

/* the second row, for pages inside a section: dimmer, and indented under the nav */
.av-subnav{padding-inline-start:2ch}
.av-subnav .av-nav a{color:var(--ink-soft)}
.av-subnav .av-nav a:hover{color:var(--on-fill)}
.av-subnav .av-nav a[aria-current]{color:var(--ink-bright)}
.av-subnav .av-prompt{background:var(--ink-soft)}
.av-subnav a:hover .av-prompt{background:var(--on-fill)}
.av-subnav a[aria-current] .av-prompt{background:var(--ink-bright)}

/* ---------- Console: the last lines of the page. Recent commands fade by age; the current one is newest ---------- */
.av-console{margin:0;padding-inline:2ch}
.av-console ol{list-style:none;margin:0;padding:0}
.av-cmd{display:flex;margin:0;min-block-size:var(--av-line);overflow-wrap:anywhere}
.av-cmd a{color:inherit;text-decoration:none;display:flex}
.av-cmd a:hover,.av-cmd a:focus-visible{text-decoration:underline;text-underline-offset:.2em}
.av-console li[data-age] .av-prompt{background:currentColor}     /* the whole line fades, prompt included */
.av-console li[data-age="1"]{color:var(--ink)}
.av-console li[data-age="2"]{color:var(--ink-soft)}
.av-console li[data-age="3"]{color:var(--ink-dim)}
.av-cmd--current{padding-inline:2ch;color:var(--ink-bright);font-weight:700}
.av-console:not([hidden])+.av-cmd--current{margin-top:0}

/* ---------- Stat grid: label: value pairs ---------- */
.av-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(20ch,1fr));column-gap:2ch;align-content:start;margin:0}
.av-stats--stack{grid-template-columns:minmax(0,1fr)}
.av-stat{display:flex;gap:1ch;min-inline-size:0}
.av-stat dt{color:var(--ink-soft)}
.av-stat dt::after{content:":"}
@supports (content:"" / ""){.av-stat dt::after{content:":" / ""}}
.av-stat dd{margin:0;color:var(--ink)}

/* ---------- Prose (articles, help text, lore) ---------- */
.av-prose :where(p,ul,ol,dl,pre,blockquote,figure,.av-table-wrap){margin:0 0 var(--av-line)}
.av-prose :where(h1,h2,h3,h4){margin:0;font-weight:700;color:var(--ink-bright)}
.av-prose h1,.av-title{font:700 2rem/3rem var(--font-mono);margin:0;color:var(--ink-bright)}
.av-prose h2{margin-top:var(--av-line)}
.av-prose h2::after{content:"";display:block;block-size:var(--av-line)}
.av-prose h3{margin-top:var(--av-line)}
.av-prose :where(h2,h3,h4):first-child{margin-top:0}
.av-frame a,.av-prose a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.av-frame a:visited,.av-prose a:visited{color:var(--link-visited)}
.av-frame a:hover,.av-prose a:hover{background:var(--link);color:var(--on-fill);text-decoration:none}
.av-frame a:visited:hover,.av-prose a:visited:hover{background:var(--link-visited)}
.av-prose em,.av-prose cite{font-style:oblique}
.av-prose strong{font-weight:700;color:var(--ink-bright)}
.av-prose mark{background:none;color:var(--mark);font-weight:700}
.av-prose ul{list-style:none;padding:0}
.av-prose ul>li{position:relative;padding-inline-start:3ch}
.av-prose ul>li::before{content:"";position:absolute;inset:0 auto auto 1ch;inline-size:1ch;block-size:var(--av-line);background:var(--ink-soft);
  mask:var(--av-g-dash) 0 var(--av-dy) / 1ch var(--av-gh) no-repeat}
.av-prose ol{padding-inline-start:3ch}
.av-prose ol>li::marker{color:var(--ink-soft)}
.av-prose :where(ul,ol) :where(ul,ol){margin:0}
.av-prose :where(code,kbd,samp){font:inherit;background:var(--bg-hl);padding:0 .5ch}
.av-prose pre{background:var(--bg-hl);padding:0 1ch;overflow-x:auto;white-space:pre}
.av-prose pre code{background:none;padding:0}
.av-prose blockquote{padding-inline-start:4ch;color:var(--ink-soft);font-style:oblique}
.av-prose hr{border:0;margin:0 0 var(--av-line);block-size:var(--av-line)}
.av-prose .av-label{font-weight:700}
.av-label--note{color:var(--note)}.av-label--warn{color:var(--mark)}.av-label--danger{color:var(--danger)}

/* ---------- Table: a dashed row under the header and under the last row ---------- */
.av-table-wrap{overflow-x:auto}
.av-table{border-collapse:collapse;inline-size:100%}
.av-table caption{text-align:start;color:var(--ink-soft);padding:0}
.av-table :where(th,td){position:relative;padding:0 2ch 0 0;text-align:start;vertical-align:top;block-size:var(--av-line)}
.av-table :where(th:last-child,td:last-child){padding-inline-end:0}
.av-table th{font-weight:700;color:var(--ink-bright);padding-block-end:var(--av-line)}
.av-table tbody tr:last-child td{padding-block-end:var(--av-line)}
.av-table th::after,.av-table tbody tr:last-child td::after{content:"";position:absolute;inset-block-end:0;inset-inline:0 2ch;block-size:var(--av-line)}
.av-table th:last-child::after,.av-table tbody tr:last-child td:last-child::after{inset-inline-end:0}
@supports (width:round(down,1px,1px)){   /* whole columns only, so no half hyphen is left at the end of a cell */
  .av-table th::after,.av-table tbody tr:last-child td::after{inset-inline-end:auto;inline-size:round(down,100% - 2ch,1ch)}
  .av-table th:last-child::after,.av-table tbody tr:last-child td:last-child::after{inline-size:round(down,100%,1ch)}
}
.av-table tbody tr:hover{background:var(--bg-hl)}
.av-table .av-num{text-align:end}

/* ---------- Page shell ---------- */
.av-page{box-sizing:border-box;inline-size:min(100% - 2ch,var(--frame-width,80ch));margin:var(--space-line) auto var(--space-2line)}
.av-page{inline-size:min(round(down,100% - 2ch,1ch),var(--frame-width,80ch))}
.av-page>*+*{margin-top:var(--space-line)}
.av-footer{padding-inline:2ch;color:var(--ink-dim);margin-block-end:0}
.av-footer a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
.av-footer a:hover{background:var(--ink-dim);color:var(--on-fill);text-decoration:none}
.av-skip{position:absolute;inset-inline-start:0;inset-block-start:0;padding:0 1ch;background:var(--bg-hl);color:var(--ink-bright);transform:translateY(-100%)}
.av-skip:focus{transform:none;z-index:1}
.av-sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- Forced colors: keep the drawing, in the system's text color ---------- */
@media (forced-colors:active){
  .av-frame::before,.av-cols::before,.av-rule,.av-prose hr,.av-prose h2::after,.av-prose ul>li::before,
  .av-table th::after,.av-table tbody tr:last-child td::after,.av-prompt,.av-cursor{forced-color-adjust:none;background:CanvasText}
  .av-console li[data-age] .av-prompt{background:CanvasText}
}