/* The kernel's own pages (pages.ts `shell`): the centred column a sign-in,
   a notice or a drop is drawn in, and the dashboard's frame. Everything a
   page holds is the style guide's (controls.css, /style-guide); this is only
   what no other page draws. */
/* Shared interactive controls and surfaces. Both the public site and account
   pages load these components; /style-guide contains working examples. */
@layer tokens, base, components, sections;
/* Shared paints, semantic roles, spacing and material tokens. */

/* Nunito, served from here so a first paint waits on no other site. One
   variable file per subset, and a page only fetches the subsets its text uses. */
@font-face {
  font-family: 'Nunito';
  font-weight: 400 800;
  font-display: swap;
  src: url(nunito-cyrillic-ext.88985ca614.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}
@font-face {
  font-family: 'Nunito';
  font-weight: 400 800;
  font-display: swap;
  src: url(nunito-cyrillic.63b14e3ef0.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito';
  font-weight: 400 800;
  font-display: swap;
  src: url(nunito-vietnamese.61e5958cf3.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
    U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
    U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Nunito';
  font-weight: 400 800;
  font-display: swap;
  src: url(nunito-latin-ext.2c8d792869.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-weight: 400 800;
  font-display: swap;
  src: url(nunito-latin.ba344451ea.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer tokens {
  :root {
    color-scheme: light;

    /* The paints. Nothing below this block writes a colour down. */
    --cream: #fffbf5; /* the lightest warm white */
    --linen: #fdf7ee; /* warm ground, a gold lean */
    --oat: #f1e6d8; /* pale warm, for words on a dark ground */
    --shell: #efe3d2; /* the hairline between things */
    --taupe: #c9b19c; /* oat, gone quiet */
    --clay: #785b47; /* coffee, gone quiet */
    --coffee: #523828; /* warm brown, never black */
    --bark: #4d3d34; /* the hairline, on a dark ground */
    --cocoa: #372c26; /* cards and bubbles, on a dark ground */
    --night: #2b231f; /* the dark ground itself */
    --soot: #1d1714; /* a shadow, on a dark ground */
    --meadow: #4c773e; /* readable on both light backgrounds */
    --moss: #a7c080; /* the accent, lit for the dark */
    --blush: #f8e0c8; /* what you said */
    --ember: #4e3b32; /* what you said, in the dark */
    --sky: #e5eef5; /* what it answered */
    --dusk: #34404a; /* what it answered, in the dark */
    --brick: #a8503f;
    --rose: #e67e80;
    --forest: #33493c; /* the recipe preview's background */

    /* The roles. Everything below uses these, never a paint. */
    --ground: var(--linen);
    --paper: var(--cream);
    --ink: var(--coffee);
    --soft-ink: var(--clay);
    --line: var(--shell);
    --accent: var(--meadow);
    --warn: var(--brick);
    --on-accent: var(--ground); /* words on an accent fill */
    --mine: var(--blush); /* the person's bubble */
    --theirs: var(--sky); /* the assistant's bubble */
    --preview: var(--forest); /* matches the embedded app in either theme */
    --well: color-mix(in srgb, var(--paper), var(--line) 45%); /* a field */
    --shade: color-mix(in srgb, var(--coffee) 24%, transparent);

    /* Pencil and paper. A part worth outlining is drawn: a graphite line
       around it with slightly rounded corners, given the paper's tooth by
       pencil.svg. What can be pressed sits on a hatch it slides onto. What
       is typed into is a well pressed into the paper. A surface is flat. */
    --graphite: color-mix(in srgb, var(--ink) 88%, transparent);
    --stroke: 1.5px; /* the weight of a drawn line */
    --corner: 4px; /* how round a drawn box's corners are */
    --lift: 4px; /* how far what can be pressed sits off its hatch */
    --hollow: inset 0 2px 4px var(--shade); /* how deep a well sits */
    --hatch: repeating-linear-gradient(-45deg, var(--graphite) 0 1px,
      transparent 1px 3px);
    /* A drawn rule is a line through the middle of a box --room taller on
       each side, so the pencil's wander stays inside what it draws. */
    --room: 4px;
    --rule: linear-gradient(var(--graphite) 0 0) center / 100% var(--stroke)
      no-repeat;
    /* A tab not chosen: a sheet behind the one in front. */
    --behind: color-mix(in srgb, var(--ground), var(--line) 40%);
    --edge: color-mix(in srgb, var(--line), var(--soft-ink) 32%);

    /* Type. */
    --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    --body: 1.0625rem;
    --lead: 1.125rem;
    --small: 0.9375rem;
    --fine: 0.875rem; /* what describes a thing: a hint, a status, a count */

    /* Space and shape. The gaps derive from one number, and the frame a page
       is drawn in — header to footer, style.css — is the five that open the
       list: a page kind re-points them on its own <body>, and a page that
       names no kind is one reading column with nothing beside it, its
       sections a rhythm apart so no two of them ever touch. */
    --measure: 38rem; /* reading width */
    --wide-measure: 72rem; /* multi-column layouts */
    --side: 0px; /* a sidebar before the reading column */
    --aside: 0px; /* a gutter after it */
    --rhythm: 2rem; /* how far apart what fills the column sits */
    --gap: 1rem;
    --control-height: 2.25rem;
    --quarter-gap: calc(var(--gap) / 4);
    --half-gap: calc(var(--gap) / 2);
    --wide-gap: calc(var(--gap) * 1.5);
  }

  /* A theme re-points roles. The paints above stay exactly where they are. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
      color-scheme: dark;
      --ground: var(--night);
      --paper: var(--cocoa);
      --ink: var(--oat);
      --soft-ink: var(--taupe);
      --line: var(--bark);
      --accent: var(--moss);
      --warn: var(--rose);
      --mine: var(--ember);
      --theirs: var(--dusk);
      --well: color-mix(in srgb, var(--paper), var(--ground) 65%);
      --shade: color-mix(in srgb, var(--soot) 70%, transparent);
    }
  }

  :root[data-theme='dark'] {
    color-scheme: dark;
    --ground: var(--night);
    --paper: var(--cocoa);
    --ink: var(--oat);
    --soft-ink: var(--taupe);
    --line: var(--bark);
    --accent: var(--moss);
    --warn: var(--rose);
    --mine: var(--ember);
    --theirs: var(--dusk);
    --well: color-mix(in srgb, var(--paper), var(--ground) 65%);
    --shade: color-mix(in srgb, var(--soot) 70%, transparent);
  }
}


@layer base {
  [hidden] {
    display: none !important;
  }

  /* The paper: one grain tile, speckled in ink and cream, laid over the
     whole page so cards, buttons and pictures share its tooth. It covers the
     document, not the window, so it scrolls with what is drawn on it. */
  html {
    position: relative;
    min-height: 100%;
  }
  html::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2147483647;
    background: url(paper.e48c5467b4.webp) 0 0 / 256px;
    opacity: .07;
    pointer-events: none;
  }
}

@layer components {
  .Button,
  .Field {
    box-sizing: border-box;
    height: var(--control-height);
    padding: 0 var(--control-pad-inline, .75rem);
    font: inherit;
    line-height: 1.25;
    vertical-align: middle;
  }
  /* What is drawn (tokens.css, Pencil and paper) wears its outline on
     ::after, in --pencil where a part asks for another colour and dashed
     where --pencil-style says so. Each part starts from a solid graphite
     line, so none takes the line of a box it sits in. A page's own surface
     is drawn by being a .Card. */
  .Button,
  .Card,
  a.Pill,
  .Empty,
  .Drop_Zone {
    --pencil: initial;
    --pencil-style: initial;
  }
  .Button::after,
  .Card::after,
  a.Pill::after,
  .Empty::after,
  .Drop_Zone::after {
    content: '';
    position: absolute;
    inset: -1px;
    border: var(--stroke) var(--pencil-style, solid)
      var(--pencil, var(--graphite));
    border-radius: var(--corner);
    filter: url(pencil.8a0c8518e4.svg#line);
    pointer-events: none;
  }

  /* A button is a flat fill on a hatch: the hatch is what an offset copy of
     it would show past its right and bottom edges. A hover lifts the button
     off it and a press slides the button onto it; the hatch stays put. */
  .Button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    border: 1px solid transparent;
    border-radius: var(--corner);
    background: var(--button-fill, var(--accent));
    color: var(--button-ink, var(--on-accent));
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }
  .Button::before {
    content: '';
    position: absolute;
    inset: calc(var(--lift) - 1px) calc(-1px - var(--lift))
      calc(-1px - var(--lift)) calc(var(--lift) - 1px);
    border-radius: var(--corner);
    background: var(--hatch);
    clip-path: polygon(calc(100% - var(--lift)) 0, 100% 0, 100% 100%, 0 100%,
      0 calc(100% - var(--lift)), calc(100% - var(--lift))
      calc(100% - var(--lift)));
    pointer-events: none;
  }
  .Button:hover:not(:disabled, [aria-pressed='true']) {
    --lift: 5px;
    transform: translate(-1px, -1px);
    background: color-mix(in srgb, var(--button-fill, var(--accent)),
      white 10%);
  }
  .Button:active:not(:disabled),
  .Button[aria-pressed='true'] {
    --lift: 1.5px;
    transform: translate(2.5px, 2.5px);
  }
  .Button:disabled {
    --lift: 0px;
    opacity: .55;
    cursor: not-allowed;
  }
  .Button-quiet {
    --button-fill: var(--paper);
    --button-ink: var(--ink);
  }
  /* A button that steps back beside another: it reads as a link, with no
     fill, outline or hatch. */
  .Button-link,
  .Button-link:hover:not(:disabled, [aria-pressed='true']),
  .Button-link:active:not(:disabled) {
    --lift: 0px;
    padding: 0;
    background: none;
    color: var(--accent);
    font-weight: inherit;
    text-decoration: underline;
    transform: none;
  }
  .Button-link::before,
  .Button-link::after {
    content: none;
  }
  /* A field is a well: darker than the paper, a little hollow, its edge
     drawn in pencil. The pencil keeps what lies inside the edge as it is,
     so what is typed stays crisp. Focus draws the edge in the accent. */
  .Field {
    min-width: 0;
    max-width: 100%;
    border: var(--stroke) solid var(--graphite);
    border-radius: var(--corner);
    background: var(--well);
    box-shadow: var(--hollow);
    color: var(--ink);
    filter: url(pencil.8a0c8518e4.svg#line);
  }
  .Field:focus-visible {
    outline: 0;
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent), var(--hollow);
  }
  select.Field {
    cursor: pointer;
  }
  select.Field:not(:disabled):hover {
    border-color: var(--accent);
  }
  /* A textarea is as tall as what is typed in it, from two controls' height
     up to most of the window, where it starts to scroll. */
  textarea.Field {
    field-sizing: content;
    height: auto;
    min-height: calc(var(--control-height) * 2);
    max-height: 60vh;
    padding-block: .5rem;
    vertical-align: top;
  }
  .Field:disabled {
    opacity: .55;
    cursor: not-allowed;
  }
  /* Pills: a chip, and a row of them that wraps like a handful of
     notes. The list is the same shape whether the chips are words (the home
     page) or links (the help page's questions). */
  .Pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
  }

  .Pill {
    display: inline-block;
    padding: var(--pill-pad, .3rem .75rem);
    border: var(--pill-edge, 1px solid var(--line));
    border-radius: var(--corner);
    background: var(--pill-fill, var(--paper));
    color: var(--pill-ink, var(--ink));
    font-family: var(--pill-font, inherit);
    font-size: var(--pill-size, var(--small));
    font-weight: var(--pill-weight, 600);
    line-height: 1.4;
    vertical-align: middle;
    text-decoration: none;
  }

  a.Pill {
    --pill-ink: var(--accent);
    --pill-edge: 1px solid transparent;
    --pill-weight: 700;
    position: relative;
    text-decoration: underline;
    text-underline-offset: .18em;
  }
  a.Pill:hover {
    --pencil: var(--accent);
    --pill-fill: color-mix(in srgb, var(--accent) 7%, var(--paper));
  }
  a.Pill:active {
    transform: translate(1px, 1px);
  }
  a.Pill:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
  }
  .Pill_Tag {
    margin-left: .5rem;
    color: var(--soft-ink);
    font-weight: 400;
    font-size: .85em;
  }

  /* A quiet label, such as the address in a window bar. */
  .Pill-quiet {
    --pill-fill: var(--ground);
    --pill-ink: var(--soft-ink);
    --pill-edge: 0;
    --pill-pad: 0.2rem 0.9rem;
    --pill-size: var(--small);
    --pill-weight: 600;
  }

  /* A URL somebody has to copy. */
  .Pill-code {
    --pill-pad: .2rem .5rem;
    --pill-fill: var(--ground);
    --pill-edge: 0;
    --pill-font: var(--mono);
    --pill-size: var(--small);
  }

  .Address {
    color: var(--soft-ink);
    font-weight: 400;
  }
  .Address_Name {
    color: var(--ink);
    font-weight: 800;
  }

  /* A card: one surface holding related things, flat on the page. Depth
     belongs to what is pressed, so a card casts no shadow; its pencil box is
     what draws it. What it holds stacks a gap apart, never by margins of its
     own, and its head, when it has one, runs edge to edge across the top,
     ruled off under it: what it is on the left, its actions on the right. */
  .Card {
    --pad-block: 1rem;
    --pad-inline: 1.25rem;
    position: relative;
    display: grid;
    align-content: start;
    gap: .75rem;
    min-width: 0;
    padding: var(--pad-block) var(--pad-inline);
    border: 1px solid transparent;
    border-radius: var(--corner);
    background: var(--paper);
    overflow-wrap: break-word;
  }
  .Card > * {
    min-width: 0;
    margin: 0;
  }

  /* The head: a mark, the title, how it stands, and then whatever acts on
     the whole card, pushed to the right. Its controls are a size down, so a
     head is one compact line however many it holds; it wraps on a phone. */
  .Card_Head {
    --control-height: 2rem;
    --control-pad-inline: .7rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    min-height: 3rem;
    position: relative;
    margin: calc(-1 * var(--pad-block)) calc(-1 * var(--pad-inline)) 0;
    padding: .5rem var(--pad-inline);
  }
  /* The rule under it meets the card's sides. */
  .Card_Head::after {
    content: '';
    position: absolute;
    inset: auto -1px calc(-1 * var(--room));
    height: calc(var(--stroke) + 2 * var(--room));
    background: var(--rule);
    filter: url(pencil.8a0c8518e4.svg#line);
  }
  .Card_Head:last-child {
    margin-bottom: calc(-1 * var(--pad-block));
  }
  .Card_Head:last-child::after {
    content: none;
  }
  .Card_Head:last-child::after {
    content: none;
  }
  .Card_Title {
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
  }
  .Card_Title a {
    color: inherit;
    text-decoration: none;
  }
  .Card_Title a:hover {
    color: var(--accent);
    text-decoration: underline;
  }
  .Card_Mark {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
  }
  .Card_Actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 0 auto;
  }
  .Card_Actions form {
    display: contents;
  }
  .Card_Actions .Button {
    font-size: var(--fine);
  }

  /* What the card is, in a line, under its head. */
  .Card_Sub {
    color: var(--soft-ink);
    font-size: var(--small);
  }

  /* How something stands, as a word in its role's colour beside a dot:
     -good when it works, -warn when it needs the person. */
  .Status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--status, var(--soft-ink));
    font-size: var(--fine);
    font-weight: 700;
    line-height: 1.3;
  }
  .Status::before {
    content: '';
    flex: none;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: currentColor;
  }
  .Status-good {
    --status: var(--accent);
  }
  .Status-warn {
    --status: var(--warn);
  }

  /* Like things in rows, hairlines between them: each row its name and what
     describes it on the left, what acts on it on the right. In a card the
     rows run to its edges. */
  .Rows {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .Rows_Item {
    --control-height: 2rem;
    --control-pad-inline: .7rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    padding: .75rem 0;
    border-top: 1px solid var(--line);
  }
  .Rows_Item:first-child {
    padding-top: 0;
    border-top: 0;
  }
  .Rows_Item:last-child {
    padding-bottom: 0;
  }
  .Card > .Rows {
    margin-inline: calc(-1 * var(--pad-inline));
  }
  .Card > .Rows > .Rows_Item {
    padding-inline: var(--pad-inline);
  }
  .Rows_Main {
    display: grid;
    flex: 1 1 12rem;
    gap: .15rem;
    min-width: 0;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .Rows_Name {
    color: var(--ink);
    font-weight: 700;
  }
  .Rows_Meta {
    color: var(--soft-ink);
    font-size: var(--fine);
  }
  .Rows_Actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 0 auto;
  }
  .Rows_Actions form {
    display: contents;
  }
  .Rows_Actions .Button {
    font-size: var(--fine);
  }

  /* A heading over a run of cards that belong together. */
  .Group {
    margin: var(--gap) 0 0;
    color: var(--soft-ink);
    font-size: var(--small);
    font-weight: 700;
  }
  .Group:first-child {
    margin-top: 0;
  }

  /* A form: every field its label over its control over its hint, on one
     left edge and one width, and what sends it at the end. A field never
     trails a sentence: what explains it is its hint, under it. */
  .Form {
    display: grid;
    gap: .875rem;
    margin: 0;
  }
  .Form_Field {
    display: grid;
    gap: .35rem;
    min-width: 0;
    max-width: 34rem;
  }
  .Form_Label {
    margin: 0;
    color: var(--ink);
    font-size: var(--small);
    font-weight: 700;
  }
  .Form_Optional {
    color: var(--soft-ink);
    font-weight: 400;
  }
  .Form_Field > .Field {
    width: 100%;
  }
  .Form_Hint {
    margin: 0;
    color: var(--soft-ink);
    font-size: var(--fine);
  }
  /* One field and the button that sends it, on one line while they fit. */
  .Form_Line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    margin: 0;
  }
  .Form_Line > .Field,
  .Form_Line > .At {
    flex: 1 1 12rem;
  }
  .Form_Actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
  }

  /* A field with a fixed ending beside it: the name an address takes. */
  .At {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
  }
  .At > .Field {
    flex: 1 1 auto;
  }
  .At > span {
    flex: none;
    color: var(--soft-ink);
  }

  /* A drop zone: a dashed place to drop files on, which a press also opens
     the chooser from (a phone's picker on a phone), and under it what is
     chosen, each with its name, its size, a picture where it is one, and a
     way to take it back. The input is the form's own, unseen but kept in
     the tab order, so the zone wears its focus. public/drop.js draws the
     list and takes the drop. */
  .Drop {
    display: grid;
    gap: .5rem;
    min-width: 0;
  }
  .Drop_Zone {
    --pencil: var(--edge);
    --pencil-style: dashed;
    position: relative;
    display: grid;
    place-items: center;
    gap: .25rem;
    min-height: 6rem;
    padding: 1.25rem 1rem;
    border-radius: var(--corner);
    background: var(--ground);
    text-align: center;
    cursor: pointer;
  }
  .Drop_Zone:hover,
  .Drop_Zone:has(.Drop_File:focus-visible) {
    --pencil: var(--accent);
  }
  .Drop_Zone:has(.Drop_File:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .Drop_Zone-over {
    --pencil: var(--accent);
    --pencil-style: solid;
    background: var(--paper);
  }
  .Drop_Zone:has(.Drop_File:disabled) {
    opacity: .55;
    cursor: not-allowed;
  }
  .Drop_File {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .Drop_Say {
    color: var(--ink);
  }
  .Drop_Choose {
    color: var(--accent);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .2em;
  }
  .Drop_Hint {
    color: var(--soft-ink);
    font-size: var(--fine);
  }
  .Drop_Chosen {
    display: grid;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .Drop_Chosen:empty {
    display: none;
  }
  .Drop_Item {
    --control-height: 2rem;
    --control-pad-inline: .7rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    padding: .35rem .5rem;
    border-radius: var(--corner);
    background: var(--well);
  }
  .Drop_Picture {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--corner);
    object-fit: cover;
  }
  .Drop_Name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .Drop_Size {
    flex: none;
    color: var(--soft-ink);
    font-size: var(--fine);
  }
  .Drop_Item > .Button {
    flex: none;
    font-size: var(--fine);
  }

  /* What most people never need, folded under one line that says so. */
  .More > summary {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--accent);
    font-size: var(--small);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
  }
  .More > summary::-webkit-details-marker {
    display: none;
  }
  .More > summary::before {
    content: '';
    flex: none;
    width: .4rem;
    height: .4rem;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(-45deg);
    transition: transform .15s;
  }
  .More[open] > summary::before {
    transform: rotate(45deg);
  }
  .More_Body {
    display: grid;
    gap: .875rem;
    margin-top: .75rem;
  }
  /* Markdown someone wrote (theirs.ts), such as how to get a key, ends
     where the body does. */
  .More_Body > *,
  .More_Body > .Markdown > :last-child {
    margin: 0;
  }

  /* A line the page says back: what a press did, or why it did not. */
  .Say {
    margin: 0;
    color: var(--soft-ink);
    font-size: var(--small);
  }
  .Say:empty {
    display: none;
  }
  .Say-no {
    color: var(--warn);
  }

  /* Words to paste somewhere else, in a well, with the button that copies
     them beside it (pages.ts `copyable`). */
  .Copy {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
  }
  .Pick {
    flex: 1;
    min-width: 0;
    min-height: var(--control-height);
    padding: .4rem .75rem;
    background: var(--ground);
    color: var(--ink);
    overflow-wrap: anywhere;
    user-select: all;
  }
  .Copy_Go {
    --button-fill: var(--paper);
    --button-ink: var(--accent);
    flex: none;
    font-size: var(--fine);
  }

  /* Nothing here yet: what will be, and how to start. Its pencil line is
     dashed and light, a place for something rather than a thing. */
  .Empty {
    --pencil: var(--edge);
    --pencil-style: dashed;
    position: relative;
    display: grid;
    justify-items: center;
    gap: .5rem;
    padding: 2rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--corner);
    color: var(--soft-ink);
    text-align: center;
  }
  .Empty > * {
    max-width: 30rem;
    margin: 0;
  }
  .Empty h2 {
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 800;
  }

  /* A report: a card whose head names what it counts and says the total
     where a card's actions would sit, then a bar a day and the short lists
     under it. */
  .Stats {
    gap: 1.25rem;
  }
  .Stats_Total {
    flex: none;
    margin: 0 0 0 auto;
    color: var(--ink);
    font-size: 1.25rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
  }
  .Stats_Unit {
    color: var(--soft-ink);
    font-size: var(--fine);
    font-weight: 400;
  }
  .Stats_Plot {
    display: grid;
    gap: .35rem;
    margin: 0;
  }
  /* A chart (@yaks/ui/chart): a line in pencil, ending in a dot on today, or
     a column a day. public/chart.js says the point a pointer, a finger or an
     arrow key is on, and lays a line through it at --at. */
  .Chart {
    position: relative;
    z-index: 1;
    touch-action: pan-y;
    cursor: crosshair;
  }
  .Chart:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .Chart[data-on]::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--at);
    width: 1px;
    background: var(--soft-ink);
    pointer-events: none;
  }
  .Chart-line {
    display: inline-block;
    margin-left: .5rem;
    padding: .25rem 0;
    vertical-align: middle;
    line-height: 0;
  }
  .Chart-line .Chart_Plot {
    filter: url(pencil.8a0c8518e4.svg#line);
    overflow: visible;
  }
  .Chart-bars {
    display: block;
    height: 5rem;
    border-bottom: 1px solid var(--line);
  }
  .Chart-bars .Chart_Plot {
    display: block;
    width: 100%;
    height: 100%;
  }
  .Chart_Line {
    fill: none;
    stroke: var(--graphite);
    stroke-width: var(--stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .Chart_End,
  .Chart_Bar {
    fill: var(--accent);
  }
  .Chart_Tip {
    position: fixed;
    z-index: 10;
    padding: .15rem .5rem;
    border-radius: var(--corner);
    background: var(--ink);
    color: var(--paper);
    font-size: var(--fine);
    white-space: nowrap;
    pointer-events: none;
  }
  .Stats_Span {
    display: flex;
    justify-content: space-between;
    color: var(--soft-ink);
    font-size: var(--fine);
  }
  .Stats_Tops {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
  .Stats_Column h3 {
    margin: 0 0 .5rem;
    color: var(--soft-ink);
    font-size: var(--fine);
    font-weight: 700;
  }
  /* One column as wide as the list's own, so a long name is cut short with
     an ellipsis rather than widening the row past its column and over the
     next one; the count beside it keeps its whole width and one line. */
  .Stats_List {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--small);
  }
  .Stats_List li {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
  }
  .Stats_List span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .Stats_List b {
    flex: none;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  @media (max-width: 600px) {
    .Stats_Tops {
      grid-template-columns: minmax(0, 1fr);
      gap: 1rem;
    }
  }

  /* One row of physical tabs meets one sheet. Native radios own selection,
     including arrow keys, so the component works without JavaScript. Each
     tab is drawn in pencil on its top and sides; the panel's own top line is
     every tab's foot, and the selected tab covers it, so tab and panel are
     one sheet. */
  .Tabs {
    display: flex;
    flex-wrap: wrap;
    column-gap: .3rem;
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .Tabs_Legend {
    margin-bottom: 1rem;
    padding: 0;
    color: var(--ink);
    font-weight: 800;
    text-align: left;
  }
  .Tabs_Item {
    display: contents;
  }
  .Tabs_Item > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .Tabs_Tab {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 0;
    min-height: 3rem;
    overflow-wrap: normal;
    margin: .35rem 0 0;
    padding: .55rem .45rem;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--corner) var(--corner) 0 0;
    background: var(--behind);
    color: var(--soft-ink);
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
  }
  .Tabs_Tab::after {
    content: '';
    position: absolute;
    inset: -1px -1px 0;
    border: var(--stroke) solid var(--graphite);
    border-bottom: 0;
    border-radius: var(--corner) var(--corner) 0 0;
    filter: url(pencil.8a0c8518e4.svg#line);
    pointer-events: none;
  }
  @media (max-width: 480px) {
    .Tabs_Tab {
      padding-inline: .3rem;
      font-size: .8rem;
    }
  }
  .Tabs_Tab:hover {
    color: var(--ink);
  }
  .Tabs_Panel {
    order: 1;
    flex: 1 1 100%;
    min-width: 0;
    display: none;
    position: relative;
    margin: 0;
    text-align: left;
    z-index: 1;
  }
  .Tabs_Item > input:checked ~ .Tabs_Tab {
    margin-top: 0;
    padding-top: .9rem;
    background: var(--paper);
    color: var(--ink);
    z-index: 2;
  }
  /* The gap the selected tab opens in the panel's line. It stops short of the
     tab's sides, so they meet the line, and the first tab's meets the panel's
     corner. */
  .Tabs_Item > input:checked ~ .Tabs_Tab::before {
    content: '';
    position: absolute;
    inset: auto 2px calc(-1.5 * var(--room));
    height: calc(3 * var(--room));
    background: var(--paper);
  }
  .Tabs_Item > input:checked ~ .Tabs_Panel {
    display: grid;
  }
  .Tabs_Item > input:focus-visible ~ .Tabs_Tab {
    outline: 3px solid var(--accent);
    outline-offset: -5px;
  }

  .Icon {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    flex: none;
    vertical-align: -.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* A column of links beside an edge, the edge between this nav and the
     panel it leans against. The current link is a tab drawn in pencil and
     filled with the panel, and it covers the edge, so it opens into the panel,
     which is what makes it read as the page you are on. A nav with no panel
     beside it points --nav-edge and --nav-panel at nothing, and --nav-shut at
     graphite to close the tab's open side, so its current link is a pencil
     box (.Docs_Nav, and every nav on a phone). */
  .SideNav {
    --nav-panel: var(--paper);
    --nav-edge: var(--graphite);
    --nav-shut: transparent;
    position: relative;
    display: grid;
    gap: .4rem;
  }
  .SideNav::after {
    content: '';
    position: absolute;
    inset: 0 calc(-1 * var(--room)) 0 auto;
    width: calc(var(--stroke) + 2 * var(--room));
    background: linear-gradient(var(--nav-edge) 0 0) center / var(--stroke)
      100% no-repeat;
    filter: url(pencil.8a0c8518e4.svg#line);
    pointer-events: none;
  }
  .SideNav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .8rem;
    border: 1px solid transparent;
    border-radius: var(--corner);
    color: var(--soft-ink);
    font-size: .95rem;
    text-decoration: none;
  }
  .SideNav a:hover {
    color: var(--ink);
  }
  .SideNav a[aria-current='page'] {
    background: var(--nav-panel);
    color: var(--ink);
    font-weight: 800;
    z-index: 1;
  }
  .SideNav a[aria-current='page']::after {
    content: '';
    position: absolute;
    inset: -1px 0 -1px -1px;
    border: var(--stroke) solid var(--graphite);
    border-right-color: var(--nav-shut);
    border-radius: var(--corner);
    filter: url(pencil.8a0c8518e4.svg#line);
    pointer-events: none;
  }
  /* The gap the current tab opens in the edge. */
  .SideNav a[aria-current='page']::before {
    content: '';
    position: absolute;
    inset: 2px calc(-1.5 * var(--room)) 2px auto;
    width: calc(3 * var(--room));
    background: var(--nav-panel);
  }
  /* A rule between groups of links, stopping short of the edge. */
  .SideNav hr {
    height: calc(var(--stroke) + 2 * var(--room));
    margin: calc(1rem - var(--room)) .8rem;
    border: 0;
    background: var(--rule);
    filter: url(pencil.8a0c8518e4.svg#line);
  }
  @media (max-width: 700px) {
    .SideNav {
      --nav-panel: transparent;
      --nav-edge: transparent;
      --nav-shut: var(--graphite);
      display: flex;
      flex-wrap: wrap;
    }
  }

  .Choice {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: var(--control-height);
    line-height: 1.4;
    cursor: pointer;
  }
  .Choice input {
    appearance: none;
    display: grid;
    place-content: center;
    box-sizing: border-box;
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    margin: 0;
    border: var(--stroke) solid var(--graphite);
    background: var(--paper);
    cursor: inherit;
  }
  .Choice input[type='radio'] {
    border-radius: 50%;
  }
  .Choice input::before {
    content: '';
    width: .45rem;
    height: .45rem;
    transform: scale(0);
  }
  .Choice input[type='checkbox']::before {
    width: .3rem;
    height: .6rem;
    margin-top: -.15rem;
    border: solid var(--on-accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
  }
  .Choice input[type='radio']::before {
    border-radius: 50%;
    background: var(--on-accent);
  }
  .Choice input:checked {
    background: var(--accent);
    border-color: var(--accent);
  }
  .Choice input:checked::before {
    transform: scale(1);
  }
  .Choice input[type='checkbox']:checked::before {
    transform: rotate(45deg) scale(1);
  }
  .Choice:has(input:disabled) {
    opacity: .55;
    cursor: not-allowed;
  }
  .Choice input:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
  }

  /* The agents a person connected, as rows (connected_ui.ts), or the ones
     with a web home as a line of links to open them. */
  .Agents-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .Agents_Open {
    display: inline-flex;
    align-items: center;
    gap: var(--quarter-gap);
    color: var(--accent);
    font-size: var(--small);
    font-weight: 700;
    text-underline-offset: .18em;
    white-space: nowrap;
  }

  /* An invitation not yet taken, in a person's row (render/held.ts). */
  .People_Waiting {
    color: var(--warn);
  }
}


@layer base {
  * {
    box-sizing: border-box;
  }
  body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--ground);
    color: var(--ink);
    font: 400 var(--body)/1.6 var(--font);
    -webkit-font-smoothing: antialiased;
  }
  main {
    width: 100%;
    max-width: 34rem;
    padding: 2rem 1rem;
    text-align: center;
    overflow-wrap: anywhere;
  }
  h1 {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 .5rem;
  }
  h2,
  h3 {
    line-height: 1.3;
  }
  p {
    color: var(--soft-ink);
    margin: 0 0 1rem;
  }
  a {
    color: var(--accent);
    text-underline-offset: .18em;
  }
  :focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
  }
  form {
    display: grid;
    gap: .75rem;
    margin: 1.5rem 0 1rem;
  }
  form p {
    margin: 0;
    font-size: var(--small);
  }
  input {
    text-align: center;
  }
  code {
    font-family: var(--mono);
    font-size: .875em;
    background: var(--ground);
    padding: .1rem .35rem;
    overflow-wrap: anywhere;
  }
}

@layer sections {
  .Code {
    letter-spacing: .5em;
    font-size: 1.4rem;
    font-weight: 700;
  }
  .Again {
    margin-top: 0;
  }
  .Away {
    font-size: var(--small);
  }
  .Url code {
    display: inline-block;
    padding: .5rem 1rem;
    background: var(--paper);
    font-size: var(--small);
  }
  main > .Card,
  main > .More {
    margin: 0 0 1rem;
    text-align: left;
  }
  .Card h2 {
    font-size: 1rem;
    font-weight: 800;
  }
  .Card ol {
    display: grid;
    gap: .4rem;
    margin: 0;
    padding-left: 1.2rem;
    color: var(--soft-ink);
    font-size: var(--small);
  }
  .Card li::marker {
    color: var(--accent);
    font-weight: 700;
  }
  .Card pre {
    margin: 0;
    white-space: pre-wrap;
    font: inherit;
    color: var(--soft-ink);
    text-align: left;
  }
  .Card form {
    margin: 0;
  }
  .Note {
    font-size: var(--fine);
    margin: .75rem 0 0;
  }
  .Card > .Note {
    margin: 0;
  }
  .Pills {
    justify-content: center;
    margin: 0 0 1.25rem;
  }
  .Files {
    display: grid;
    gap: .3rem;
    margin: 0;
    padding-left: 1.2rem;
    color: var(--soft-ink);
    font-size: var(--small);
  }
  .Chat_Said {
    display: grid;
    gap: .45rem;
  }
  .Chat_Said:empty {
    display: none;
  }
  .Chat_Bubble {
    max-width: 90%;
    margin: 0;
    padding: .55rem .9rem;
    background: var(--ground);
    color: var(--ink);
    white-space: pre-wrap;
  }
  .Chat_Bubble-you {
    justify-self: end;
    background: var(--accent);
    color: var(--ground);
  }
  .Chat_Bubble a {
    color: inherit;
  }
  .Chat_Tool {
    display: flex;
    gap: .4rem;
    align-items: baseline;
    margin: 0;
    padding: 0 .3rem;
    color: var(--soft-ink);
    font-size: var(--fine);
  }
  .Chat_Tool-no {
    color: var(--warn);
  }
  .Chat_Name {
    font-weight: 700;
    flex: none;
  }
  .Chat_Of {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .Chat_Built {
    --pencil: var(--accent);
    margin: .4rem 0;
    padding: 1rem;
    background: var(--ground);
    text-align: center;
  }
  .Chat_Built p {
    margin: 0 0 .6rem;
  }
  .Chat_Note {
    margin: 0;
    color: var(--soft-ink);
    font-size: var(--fine);
  }
  .Chat_Ask {
    margin: 0;
  }
  .Chat_Ask textarea {
    width: 100%;
    min-height: 4.5rem;
    resize: vertical;
  }
  .Chat_Ask textarea:disabled {
    opacity: .6;
  }
  .Fields {
    display: grid;
    gap: .55rem;
    margin: 0;
  }
  .Fields > div {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
  }
  @media (max-width: 480px) {
    .Fields > div {
      grid-template-columns: minmax(0, 1fr);
      gap: .25rem;
    }
  }
  .Fields dt {
    color: var(--ink);
    font-size: var(--small);
    font-weight: 700;
  }
  .Fields dd {
    min-width: 0;
    margin: 0;
  }
  .Connect_Icon {
    display: flex;
    align-items: center;
    gap: .65rem;
  }
  .Connect_Icon img {
    display: block;
    width: 56px;
    height: 56px;
    border: 1px solid var(--line);
  }
  .Connect_Setup {
    margin: 0 0 1.5rem;
    text-align: left;
  }
  .Connect_Path {
    margin: .25rem 0 0;
    font-size: var(--small);
    font-weight: 800;
  }
  .Connect_Next {
    display: grid;
    gap: .5rem;
    padding-top: .75rem;
    border-top: 1px solid var(--line);
  }
  .Connect_Next p {
    margin: 0;
    color: var(--ink);
    font-weight: 800;
  }

  /* The dashboard's frame: the side with the brand and the tabs, and the body
     the current tab leans into. What fills the body is the style guide's cards,
     rows and forms (public/controls.css); only what no other page draws is here. */
  .Desk {
    display: block;
  }
  .Desk main {
    display: grid;
    grid-template-columns: 13.5rem minmax(0, 1fr);
    align-items: start;
    max-width: 80rem;
    min-height: 100vh;
    margin: auto;
    padding: 0;
    text-align: left;
  }
  .Desk_Side {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    min-height: 100vh;
    padding: 2rem 1.25rem;
  }
  /* The edge between the side and the body, which the current tab opens. */
  .Desk_Side::after {
    content: '';
    position: absolute;
    inset: 0 calc(-1 * var(--room)) 0 auto;
    width: calc(var(--stroke) + 2 * var(--room));
    background: linear-gradient(var(--graphite) 0 0) center / var(--stroke)
      100% no-repeat;
    filter: url(pencil.8a0c8518e4.svg#line);
    pointer-events: none;
  }
  .Desk_Brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: var(--ink);
    font-size: 1.25rem;
    font-weight: 800;
    text-decoration: none;
  }
  .Desk_Top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .Desk_Close,
  .Desk_Bar {
    display: none;
  }
  /* The side's two sections (pages.ts `navigation`): the person's own, then
     the space they are working in, each under a small heading. */
  .Desk_Section {
    display: grid;
    gap: .4rem;
    min-width: 0;
  }
  .Desk_Group {
    margin: 0 .8rem;
    color: var(--soft-ink);
    font-size: var(--fine);
    font-weight: 700;
  }
  /* The space selector (pages.ts `chooser`): a box drawn like a button,
     naming the space, whose Change opens the list in place below it. */
  .Desk_Pick {
    display: grid;
    gap: .4rem;
  }
  .Desk_Space {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .6rem;
    padding: .5rem .6rem;
    border: var(--stroke) solid var(--graphite);
    border-radius: var(--corner);
    background: var(--paper);
    list-style: none;
    filter: url(pencil.8a0c8518e4.svg#line);
  }
  .Desk_Pick > summary {
    cursor: pointer;
  }
  .Desk_Pick > summary::-webkit-details-marker {
    display: none;
  }
  .Desk_Tile {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--corner);
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 800;
  }
  .Desk_Name {
    display: grid;
    min-width: 0;
    line-height: 1.25;
  }
  .Desk_Name b {
    overflow-wrap: anywhere;
  }
  .Desk_Name small {
    color: var(--soft-ink);
    font-size: var(--fine);
    overflow-wrap: anywhere;
  }
  .Desk_Change {
    color: var(--accent);
    font-size: var(--fine);
    font-weight: 700;
  }
  .Desk_Pick[open] .Desk_Change {
    color: var(--soft-ink);
  }
  .Desk_List {
    display: grid;
    border: 1px solid var(--edge);
    border-radius: var(--corner);
    background: var(--paper);
    overflow: hidden;
  }
  .Desk_Ask {
    margin: 0;
    padding: .5rem .7rem;
    color: var(--soft-ink);
    font-size: var(--fine);
  }
  .Desk_Row {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .6rem;
    padding: .5rem .7rem;
    border-top: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
  }
  .Desk_Row:hover {
    background: var(--well);
  }
  .Desk_Row[aria-current] {
    background: color-mix(in srgb, var(--paper), var(--accent) 12%);
  }
  .Desk_Tick {
    color: var(--accent);
    font-weight: 800;
  }
  .Desk_New {
    padding: .5rem .7rem;
    color: var(--accent);
    font-size: var(--fine);
    font-weight: 700;
    text-decoration: none;
  }
  .Desk_List .Desk_New {
    border-top: 1px solid var(--line);
  }
  /* The line over a page's title, naming the space it changes or "Your
     account". */
  .Desk_Whose {
    margin: 0;
    color: var(--soft-ink);
    font-size: var(--fine);
  }
  .Desk_Out {
    padding: 0;
    border: 0;
    background: none;
    color: var(--link, var(--accent));
    font: inherit;
    text-align: left;
    text-decoration: underline;
    cursor: pointer;
  }
  .Desk_Danger .Card_Title {
    color: var(--warn);
  }
  .Desk_Count {
    margin-left: auto;
    font-size: var(--fine);
    opacity: .8;
  }
  .Desk_Foot {
    margin-top: auto;
    display: grid;
    gap: .5rem;
    padding: .5rem .8rem;
    font-size: var(--fine);
  }
  .Desk .SideNav {
    --nav-edge: transparent;
    margin-right: -1.25rem;
  }
  .Desk_Body {
    min-width: 0;
    min-height: 100vh;
    background: var(--paper);
    padding: 2rem clamp(1.25rem, 4vw, 3rem) 3rem;
  }
  .Desk_Head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 52rem;
    margin-bottom: 1.5rem;
  }
  .Desk_Head h1 {
    font-size: 1.75rem;
    line-height: 1.2;
    margin: .15rem 0 0;
  }
  .Desk_Period {
    margin: .25rem 0 0;
    font-size: var(--small);
  }
  .Desk_Address {
    font-size: var(--fine);
    text-decoration: none;
    color: var(--soft-ink);
  }
  .Desk_Head .Button {
    flex: none;
  }
  .Desk_Content {
    display: grid;
    gap: var(--gap);
    max-width: 52rem;
    font-size: var(--small);
  }
  .Desk_Content > * {
    margin: 0;
  }
  .Desk input,
  .Desk textarea,
  .Card input,
  .Card textarea {
    text-align: left;
  }
  .Desk form > .Button {
    justify-self: start;
  }
  .Desk_Connect {
    border-color: var(--accent);
  }
  .Apps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--gap);
  }
  .Apps_Item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: .35rem;
    min-width: 0;
    min-height: 10.5rem;
    padding: 1rem 1.1rem;
    color: var(--ink);
    overflow-wrap: anywhere;
  }
  .Apps_Item:hover {
    --pencil: var(--accent);
  }
  .Apps_Item img {
    width: 40px;
    height: 40px;
    margin-bottom: .4rem;
  }
  .Apps_Item strong {
    font-size: 1rem;
    line-height: 1.3;
  }
  .Apps_Open {
    color: inherit;
    text-decoration: none;
  }
  .Apps_Open::after {
    content: '';
    position: absolute;
    inset: 0;
  }
  .Apps_Open:focus-visible {
    outline: 0;
  }
  .Apps_Open:focus-visible::after {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
  }
  .Apps_Path {
    color: var(--soft-ink);
    font-size: var(--fine);
  }
  .Apps_Tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: auto;
    padding-top: .5rem;
    color: var(--soft-ink);
    font-size: var(--fine);
    line-height: 1.4;
  }
  .Apps_Tag {
    padding: .05rem .45rem;
    background: var(--ground);
  }
  .Apps.Apps-one {
    grid-template-columns: minmax(0, 18rem);
    justify-content: center;
    margin: 1.5rem 0 0;
    text-align: left;
  }
  .Apps-one .Apps_Item {
    min-height: 0;
  }
  .Apps_Tags:empty {
    display: none;
  }
  .Apps_Tag-warn {
    position: relative;
    background: color-mix(in srgb, var(--warn) 12%, var(--paper));
    color: var(--warn);
    font-weight: 700;
    text-decoration: none;
  }
  .Apps_Tag-link {
    position: relative;
    color: var(--ink);
  }
  .Data main {
    max-width: 44rem;
    text-align: left;
  }
  .Data main > .Card {
    margin-bottom: 1rem;
  }
  .Data main .Card > .Field {
    margin-bottom: .75rem;
  }
  .Data main img {
    max-width: 6rem;
    max-height: 6rem;
  }
  .Fix_Said {
    color: var(--ink);
    font-family: var(--mono);
    font-size: var(--fine);
    overflow-wrap: anywhere;
  }
  .Desk_Options {
    display: grid;
    gap: var(--gap);
    align-items: start;
  }
  @media (min-width: 1100px) {
    .Desk_Options {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .Desk_Skip {
    position: absolute;
    top: -5rem;
    left: 1rem;
    padding: .6rem 1rem;
    background: var(--paper);
    z-index: 1;
  }
  .Desk_Skip:focus {
    top: 1rem;
  }
  @media (max-width: 700px) {
    .Desk main {
      display: block;
    }
    /* The top bar: Menu, and the page with the space it is in. */
    .Desk_Bar {
      position: sticky;
      top: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: .75rem;
      padding: .6rem 1rem;
      background: var(--ground);
      border-bottom: 1px solid var(--edge);
    }
    .Desk_Where {
      display: grid;
      min-width: 0;
      line-height: 1.2;
    }
    .Desk_Where small {
      color: var(--soft-ink);
      font-size: var(--fine);
      overflow-wrap: anywhere;
    }
    /* The same side, behind Menu: the whole screen while it is open. */
    .Desk_Side {
      display: none;
    }
    .Desk_Side:target {
      position: fixed;
      inset: 0;
      z-index: 3;
      display: flex;
      gap: 1.25rem;
      min-height: 0;
      padding: 1rem;
      overflow-y: auto;
      background: var(--ground);
    }
    .Desk_Side::after {
      display: none;
    }
    .Desk_Close {
      display: inline-flex;
    }
    .Desk_Brand {
      font-size: 1.1rem;
    }
    .Desk_Brand img {
      width: 30px;
      height: 30px;
    }
    .Desk .SideNav {
      margin-right: 0;
    }
    .Desk_Body {
      min-height: 0;
      padding: 1.5rem 1rem 2.5rem;
    }
    .Desk_Head {
      margin-bottom: 1.25rem;
    }
    .Desk_Head h1 {
      font-size: 1.5rem;
    }
    .Apps {
      grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
      gap: .75rem;
    }
    .Apps_Item {
      min-height: 10rem;
      padding: .9rem;
    }
  }

  /* The admin's directory (admin.ts): a search bar, and one card of rows with
     hairlines between them, as the style guide draws .Rows, each saying what
     it uses, each figure under the word for it; one column on a phone. */
  .Directory_Bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin: 0 0 1.5rem;
  }
  .Directory_Find {
    display: flex;
    gap: .5rem;
    flex: 1 1 20rem;
    max-width: 30rem;
    margin: 0;
  }
  .Directory_Find .Field {
    flex: 1;
  }
  .Directory_Bar > a {
    font-size: .9rem;
  }
  /* A card of rows edge to edge, a hairline between each. Each row sits in
     its own <li>, and the end rows round off with the card. */
  .Directory {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .Directory > li + li {
    border-top: 1px solid var(--line);
  }
  .Directory > li:first-child > .Directory_Row {
    border-top-left-radius: var(--corner);
    border-top-right-radius: var(--corner);
  }
  .Directory > li:last-child > .Directory_Row {
    border-bottom-left-radius: var(--corner);
    border-bottom-right-radius: var(--corner);
  }
  .Directory_Row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
    align-items: center;
    gap: .5rem 1.5rem;
    padding: .85rem 1.25rem;
  }
  .Directory_Row:hover {
    background: color-mix(in srgb, var(--ground), var(--paper) 55%);
  }
  .Directory_Who {
    display: grid;
    gap: .1rem;
    min-width: 0;
  }
  .Directory_Who .Apps_Tags {
    margin: .25rem 0 0;
    padding: 0;
  }
  .Directory_Open {
    color: var(--ink);
    text-decoration: none;
    overflow-wrap: anywhere;
  }
  .Directory_Open::after {
    content: '';
    position: absolute;
    inset: 0;
  }
  .Directory_Open:focus-visible {
    outline: 0;
  }
  .Directory_Open:focus-visible::after {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
  }
  .Directory_Sub {
    color: var(--soft-ink);
    font-size: .85rem;
    overflow-wrap: anywhere;
  }
  .Directory_Uses {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem 1rem;
    margin: 0;
  }
  .Directory_Uses dt {
    color: var(--soft-ink);
    font-size: .8rem;
  }
  .Directory_Uses dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
  }
  .Directory_Facts > div {
    grid-template-columns: 10rem minmax(0, 1fr);
  }
  .Directory_Facts dt {
    font-weight: 700;
    color: var(--soft-ink);
  }
  .Directory_Content .Group {
    margin-top: 2rem;
  }
  @media (max-width: 700px) {
    .Directory_Row {
      grid-template-columns: minmax(0, 1fr);
    }
    .Directory_Uses {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .Directory_Facts > div {
      grid-template-columns: 8rem minmax(0, 1fr);
    }
  }
}