/*
 * The kit's own structure: one stylesheet that lays out every hook the kit exposes (data-block, data-part,
 * data-place, data-state) at 390px first, in neutral values. It carries no look of its own. Every app wears a
 * Katagami language through its own dress, which is a whole stylesheet and replaces this one inside the frame.
 * This sheet is what the host's chrome is built on (the chrome takes a few checked values from the app's
 * dress), and what an app made before every app wore a look shows until it is given one.
 *
 * Neutral means: white ground, black ink, greys, the system's own faces, square corners, one plain shadow.
 * Depth is spent only where it says something. Sunk means fill in. Raised means press. Lifted means moved or
 * chosen. Float means it sits over the page. Content stays flat.
 */

:root{
  color-scheme:light;
  /* colour roles */
  --k-page:#FFFFFF;            /* the ground */
  --k-ink:#000000;             /* text, and anything that will work if pressed */
  --k-soft:#474747;            /* sentences that explain */
  --k-quiet:#666666;           /* by-lines, and anything that will answer "not now" */
  --k-tint:#F4F4F4;            /* wells and grooves */
  --k-tint-2:#E8E8E8;          /* sockets, a well in use */
  --k-tint-3:#DADADA;          /* hairs of detail inside a tint */
  --k-sheet:#FFFFFF;           /* what is raised or lifted is cut from this: keys, the chosen record, sheets */
  /* highlighters: a fill under black text, one job each, in greys: the look's own colours come with its dress */
  --k-here:#D2D2D2;            /* where the bead is, the current one */
  --k-here-deep:#4A4A4A;       /* the bead's edge, so it reads on any ground */
  --k-new:#EAEAEA;             /* just arrived, or just grown */
  --k-notnow:#E0E0E0;          /* the answer "Not now" */
  /* type roles and scale: the system's own faces */
  --k-font-display:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --k-font-text:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --k-font-code:ui-monospace,"SF Mono",Menlo,Consolas,monospace;   /* code and links only */
  --k-size-text:16px;          /* everything that is read */
  --k-size-lead:20px;          /* a record that stands alone */
  --k-size-head:28px;          /* the name of a kind of thing */
  --k-size-name:40px;          /* the app's name */
  --k-weight-display:400; --k-weight-text:400; --k-weight-strong:600;
  --k-track-display:-.02em;
  --k-leading:1.5;
  /* space */
  --k-space-1:4px; --k-space-2:8px; --k-space-3:12px; --k-space-4:16px; --k-space-5:24px; --k-space-6:36px; --k-space-7:56px;
  --k-gutter:24px;             /* the page's side margin */
  --k-measure:1180px;          /* the widest the page gets */
  --k-control:40px;            /* the height of a key */
  /* shape */
  --k-radius:0px; --k-round:9999px;
  /* depth: one lamp, top left. Every shadow takes the same plain shade and the same 2:5 throw. */
  --k-shade:0 0 0;
  --k-sunk:inset 1.6px 4px 6px rgb(var(--k-shade) / .1), inset -.8px -2px 5px rgb(255 255 255 / .75);
  --k-sunk-deep:inset 2px 5px 6px rgb(var(--k-shade) / .17), inset -1px -2.5px 5px rgb(255 255 255 / .8);
  --k-raised:.8px 2px 3px -.5px rgb(var(--k-shade) / .2), 2.4px 6px 10px -3px rgb(var(--k-shade) / .15), 0 13px 22px -13px rgb(var(--k-shade) / .13);
  --k-lifted:1.2px 3px 6px -1px rgb(var(--k-shade) / .08), 6px 15px 26px -8px rgb(var(--k-shade) / .15), 0 32px 52px -26px rgb(var(--k-shade) / .15);
  --k-float:1px 2px 5px -1px rgb(var(--k-shade) / .1), 4px 14px 28px -10px rgb(var(--k-shade) / .22), 0 30px 46px -30px rgb(var(--k-shade) / .16);
  /* motion: transform and opacity only */
  --k-fast:160ms; --k-time:190ms; --k-travel:210ms; --k-ease:cubic-bezier(.2,.7,.2,1);
  /* private to this sheet */
  --_bleed:14px;
}

/* ---------- ground ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--k-page)}
body{margin:0;background:var(--k-page);color:var(--k-ink);font:var(--k-weight-text) var(--k-size-text)/var(--k-leading) var(--k-font-text);letter-spacing:-.012em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ul,ol,dl,dt,dd,figure{margin:0;padding:0;font:inherit;letter-spacing:inherit}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit;border:0;border-radius:0;background:none;margin:0;padding:0;min-width:0}
button{cursor:pointer;text-align:left;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
input,select,textarea{-webkit-appearance:none;appearance:none}
textarea{resize:vertical}
mark{background:none;color:inherit}
svg{display:block}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--k-ink);outline-offset:3px}
k-path,k-moves,k-record,k-list,k-board,k-week,k-form,k-people{display:block;min-width:0}
/* still: a settled page. The host sets it while it jumps to a moment, and reduced motion always has it. */
html[data-still] *,html[data-still] *::before,html[data-still] *::after{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---------- pieces used everywhere ---------- */
/* a highlighter mark: a fill under black text */
mark{padding:1px 9px;border-radius:var(--k-radius);color:var(--k-ink);-webkit-box-decoration-break:clone;box-decoration-break:clone}
mark[data-tone="new"]{background:var(--k-new)}
mark[data-tone="notnow"]{background:var(--k-notnow)}
mark[data-tone="here"]{background:var(--k-here)}

/* a socket: sunken, something goes in it */
[data-part="socket"]{position:relative;display:grid;place-items:center;flex:none;width:var(--_socket,28px);height:var(--_socket,28px);border-radius:var(--k-round);background:var(--k-tint-2);box-shadow:var(--k-sunk-deep)}

/* the bead: a round marker in a socket, flat, with an edge so it reads on any ground */
[data-part="bead"]{--d:var(--_bead,20px);position:relative;display:block;flex:none;width:var(--d);height:var(--d);border-radius:var(--k-round);background:var(--k-here);
  box-shadow:inset 0 0 0 max(1.5px, calc(var(--d) * .07)) var(--k-here-deep)}

/* a key: raised means it will work if you press it now. A flat one will answer why not. */
/* a key's words stay on one line wherever they fit; on a page zoomed to 200 percent they wrap instead of
   pushing the page sideways */
[data-part="key"]{position:relative;isolation:isolate;display:inline-grid;place-items:center;flex:none;max-width:100%;min-height:var(--k-control);padding:0 18px;border-radius:var(--k-radius);color:var(--k-ink);font:var(--k-weight-strong) var(--k-size-text)/1.1 var(--k-font-text);text-align:center;text-wrap:balance;cursor:pointer;user-select:none;-webkit-user-select:none;transition:transform var(--k-fast) var(--k-ease)}
[data-part="key"]::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;background:var(--k-sheet);box-shadow:var(--k-raised);transition:opacity var(--k-fast) var(--k-ease)}
[data-part="key"]:active{transform:translate(.6px,1.5px)}
[data-part="key"]:active::before{opacity:.5}
[data-part="key"][data-state~="locked"]{color:var(--k-quiet);font-weight:var(--k-weight-text)}
[data-part="key"][data-state~="locked"]::before{background:var(--k-tint);box-shadow:none;opacity:1}
[data-part="key"][data-state~="locked"]:active{transform:none}
[data-part="key"][data-tone="accent"]::before{background:var(--k-here)}
[data-part="key"][data-tone="quiet"]{min-width:var(--k-control);padding-inline:6px;color:var(--k-soft);font-weight:var(--k-weight-text);text-decoration:underline;text-decoration-color:var(--k-tint-3);text-decoration-thickness:2px;text-underline-offset:5px}
[data-part="key"][data-tone="quiet"]::before{display:none}
[data-part="key-name"]{border-radius:6px;transition:opacity var(--k-fast) var(--k-ease)}
[data-part="key"][data-state~="busy"] [data-part="key-name"]{opacity:.45}
@media (hover:hover){[data-part="key"][data-tone="quiet"]:hover{color:var(--k-ink)}}

/* what just grew wears a stroke of the new highlighter under its words, quieter than a whole mark */
[data-part="key"][data-state~="fresh"] [data-part="key-name"],
[data-part="place"][data-state~="fresh"] [data-part="place-word"],
[data-part="group"][data-state~="fresh"] [data-part="group-word"]{padding-inline:3px;margin-inline:-3px;border-radius:5px;box-shadow:inset 0 -.62em 0 var(--k-new);color:var(--k-ink)}

/* a well: sunken means fill it in */
[data-part="well"]{display:flex;align-items:center;gap:8px;min-height:56px;padding:0 6px 0 20px;border-radius:calc(var(--k-radius) + 4px);background:var(--k-tint);box-shadow:var(--k-sunk)}
[data-part="well"]:focus-within{background:var(--k-tint-2);box-shadow:var(--k-sunk-deep)}
[data-part="well"] input{flex:1 1 auto;width:100%;height:56px;outline:0}
[data-part="well"] [data-part="field"]{flex:1 1 auto;display:flex;min-width:0}
input::placeholder,textarea::placeholder{color:var(--k-quiet);opacity:1}
[data-part="field"]:not([data-bare]){display:grid;gap:6px;align-content:start;align-self:start;min-width:0}
[data-part="field"] > [data-part="label"]{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;font-weight:var(--k-weight-strong)}
[data-part="needed"]{font-weight:var(--k-weight-text);color:var(--k-quiet)}
[data-part="help"]{color:var(--k-quiet)}
[data-part="field"]:not([data-bare]) > [data-part="input"]{display:block;width:100%;min-height:52px;padding:13px 18px;border-radius:var(--k-radius);background:var(--k-tint);box-shadow:var(--k-sunk);outline:0}
[data-part="field"]:not([data-bare]) > :is(input,select)[data-part="input"]{height:52px;padding-block:0;line-height:52px}
[data-part="field"]:not([data-bare]) > [data-part="input"]:focus{background:var(--k-tint-2);box-shadow:var(--k-sunk-deep)}
[data-part="field"]:not([data-bare]) > select[data-part="input"]{padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:16px}
[data-part="field"][data-kind="link"] [data-part="input"]{font-family:var(--k-font-code);letter-spacing:0}
[data-part="field"][data-state~="refused"] > [data-part="label"]{color:var(--k-ink)}
[data-part="field"][data-state~="refused"] > [data-part="label"]::after{content:"Not now";padding:1px 9px;border-radius:var(--k-radius);background:var(--k-notnow);font-weight:var(--k-weight-text)}
[data-part="choices"]{display:flex;flex-wrap:wrap;gap:8px}
[data-part="choice"]{position:relative;isolation:isolate;display:inline-grid;place-items:center;min-height:var(--k-control);padding:0 18px;border-radius:var(--k-radius);color:var(--k-quiet)}
[data-part="choice"]::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;background:var(--k-tint)}
[data-part="choice"][aria-checked="true"]{color:var(--k-ink);font-weight:var(--k-weight-strong)}
[data-part="choice"][aria-checked="true"]::before{background:var(--k-sheet);box-shadow:var(--k-lifted)}

/* an answer: what just happened, in a sentence. "Not now" is the notnow mark. */
[data-part="answer"]{min-height:1.5em;color:var(--k-soft);text-wrap:pretty}
[data-part="answer"]:empty{min-height:0}
[data-part="answer"] mark{margin-right:4px}
/* the one quiet line under a first refusal: how to ask for more */
[data-part="answer"] > [data-part="help"]{display:block;margin-top:2px}

/* named motions. The kit says what happened; this sheet says how it moves. */
[data-motion="arrive"]{animation:k-arrive var(--k-time) var(--k-ease) both}
[data-motion="glide"]{animation:k-glide var(--k-time) var(--k-ease)}
[data-motion="travel"]{animation:k-glide var(--k-travel) var(--k-ease)}
[data-motion="show"]{animation:k-show var(--k-fast) var(--k-ease)}
[data-motion="nudge"]{animation:k-nudge 180ms ease-out}
[data-motion="carve"]{animation:k-carve var(--k-time) var(--k-ease)}
@keyframes k-arrive{from{opacity:0;transform:translateY(8px)}}
@keyframes k-glide{from{transform:translate(var(--dx,0),var(--dy,0))}}
@keyframes k-show{from{opacity:0}}
@keyframes k-nudge{35%{transform:translateX(4px)}70%{transform:translateX(-3px)}}
@keyframes k-carve{from{transform:scale(.3)}}

/* ---------- collections ---------- */
[data-block="list"],[data-block="board"],[data-block="week"]{display:grid;gap:10px;align-content:start}
[data-part="group"]{display:grid;gap:2px;align-content:start;min-width:0}
[data-part="group-name"]{display:flex;align-items:baseline;gap:8px;padding-top:6px;font-weight:var(--k-weight-strong);color:var(--k-soft)}
[data-part="group"][data-state~="here"] [data-part="group-name"]{color:var(--k-ink)}
[data-part="count"]{font-weight:var(--k-weight-text);color:var(--k-quiet)}
[data-part="rows"]{display:grid;gap:2px;margin-inline:calc(var(--_bleed) * -1)}
[data-part="empty"]{color:var(--k-quiet)}

/* ---------- a record ---------- */
/* At rest a record is flat. The chosen one lifts and opens in place. */
[data-block="record"]{--_socket:28px;--_bead:20px;container:record / inline-size;position:relative;isolation:isolate;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:6px;align-items:start;padding:5px var(--_bleed) 5px calc(var(--_bleed) - 8px);border-radius:var(--k-radius)}
[data-block="record"]::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;background:var(--k-sheet);box-shadow:var(--k-lifted);opacity:0;pointer-events:none;transition:opacity var(--k-time) var(--k-ease)}
[data-block="record"][data-state~="open"]{padding-block:10px 18px;margin-block:6px 16px}
[data-block="record"][data-state~="open"]:not([data-size="hero"])::before{opacity:1}
[data-part="tick"]{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--k-round)}
[data-part="tick"] [data-part="bead"]{opacity:0;transform:scale(.4);transition:transform var(--k-fast) var(--k-ease),opacity var(--k-fast) var(--k-ease)}
[data-part="tick"][data-state~="here"] [data-part="bead"]{opacity:1;transform:none}
/* there: the record was set aside on a branch (dropped, snoozed), so it keeps a small quiet stone, not the bead */
[data-part="tick"][data-state~="there"] [data-part="bead"]{opacity:1;transform:scale(.5);background:var(--k-tint-3);box-shadow:none}
[data-part="tick"][data-state~="busy"] [data-part="socket"]{opacity:.55}
/* busy: the host is asking the person about this record, outside the frame */
[data-block="record"][data-state~="busy"] > [data-part="tick"] [data-part="socket"],[data-block="path"][data-state~="busy"] [data-part="place"][data-state~="here"] > [data-part="socket"]{opacity:.55}
[data-block="moves"][data-state~="busy"] [data-part="key-name"]{opacity:.6}
[data-part="open"]{display:grid;align-content:center;min-height:44px;min-width:0;width:100%;border-radius:calc(var(--k-radius) - 8px)}
[data-part="title"]{display:block;overflow-wrap:anywhere}
[data-part="meta"]{display:block;color:var(--k-quiet);overflow-wrap:anywhere}
[data-part="meta"]:empty{display:none}
[data-part="meta"] > span{display:inline-block;max-width:100%}
[data-part="meta"] > span:not(:last-child)::after{content:"\00a0\00b7";margin-right:.28em}
[data-part="meta"] > mark{margin-right:8px}
@media (hover:hover){[data-block="record"]:not([data-state~="open"]):has(> [data-part="open"]:hover){background:var(--k-tint)}}
[data-part="inside"]{grid-column:1 / -1;display:grid;gap:16px;min-width:0;padding:14px 8px 0}
[data-part="form-slot"]:empty{display:none}
[data-part="values"]{display:grid;gap:10px;align-content:start}
[data-part="value"]{display:grid;grid-template-columns:minmax(84px,30%) minmax(0,1fr);column-gap:14px}
[data-part="value"] > dt{color:var(--k-quiet)}
[data-part="value"] > dd{overflow-wrap:anywhere}
[data-part="value"] > dd > [data-part="help"]{display:block}
[data-part="value"][data-kind="long_text"] > dd{white-space:pre-wrap}
[data-part="value"] [data-part="url"],[data-part="url"]{font-family:var(--k-font-code);letter-spacing:0;overflow-wrap:anywhere}
[data-part="last"]{color:var(--k-quiet)}
[data-part="last"]:empty{display:none}

/* a record that stands alone: the machine is the content, so it stays flat and the object carries the depth */
[data-block="record"][data-size="hero"]{grid-template-columns:minmax(0,1fr);justify-items:center;padding:8px 0 4px;text-align:center}
[data-block="record"][data-size="hero"] > [data-part="tick"]{display:none}
[data-block="record"][data-size="hero"] > [data-part="open"]{min-height:0;justify-items:center}
[data-block="record"][data-size="hero"] [data-part="title"]{font:var(--k-weight-strong) var(--k-size-lead)/1.4 var(--k-font-text)}
[data-block="record"][data-size="hero"] [data-part="inside"]{width:100%;justify-items:center;gap:18px;padding:18px 0 0}
[data-block="record"][data-size="hero"] [data-part="keys"]{justify-content:center}
[data-block="record"][data-size="hero"] [data-part="answer"]{max-width:22em;text-wrap:balance}
[data-block="record"][data-size="hero"] [data-part="answer"]:empty{display:none}
[data-block="record"][data-size="hero"] [data-part="answer"] mark{display:table;margin:0 auto 6px}
[data-block="record"][data-size="hero"] [data-part="values"]{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 22px}
[data-block="record"][data-size="hero"] [data-part="value"]{display:flex;gap:8px}
[data-block="record"][data-size="hero"] [data-part="last"]{max-width:24em;text-wrap:balance}
[data-block="record"][data-size="hero"] + [data-block="record"][data-size="hero"]{margin-top:36px}

/* ---------- the path: places in a groove, laid out from the moves between them ---------- */
[data-block="path"]{--_groove:52px;--_socket:36px;--_bead:26px;--_gap:10px;--_cell:150px;--_lane:calc(var(--_groove) * .23);width:100%}
[data-block="path"][data-size="hero"]{--_groove:92px;--_socket:68px;--_bead:50px;--_gap:14px;--_cell:132px}
[data-block="path"] > [data-part="track"]{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));row-gap:var(--_gap);width:100%;max-width:calc(var(--cols,2) * var(--_cell))}
[data-block="path"][data-size="hero"] > [data-part="track"]{margin-inline:auto}
/* the kit says where each place sits (--col, --row); the dress decides what that means */
[data-part="groove"]{grid-column:var(--col) / var(--col-end);grid-row:var(--row);align-self:start;height:var(--_groove);border-radius:var(--k-round);background:var(--k-tint);box-shadow:var(--k-sunk)}
[data-part="groove"][data-cut~="start"]{border-top-left-radius:0;border-bottom-left-radius:0}
[data-part="groove"][data-cut~="end"]{border-top-right-radius:0;border-bottom-right-radius:0}
/* a branch is a slim lane: down from the centre of its parent's socket, then along to its own places */
[data-part="groove"][data-branch]{grid-column:var(--from-col) / var(--col-end);height:var(--_lane);margin-top:calc((var(--_groove) - var(--_lane)) / 2);margin-inline:calc(100% / var(--span) / 2 - var(--_lane) / 2)}
[data-block="path"] [data-part="link"]{grid-column:var(--from-col,var(--col));grid-row:var(--row) / var(--row-end);justify-self:center;width:var(--_lane);margin-top:calc(var(--_groove) / 2);margin-bottom:calc((var(--_groove) / 2 + var(--_gap) + var(--_lane) / 2) * -1);border-radius:var(--k-round);background:var(--k-tint);box-shadow:var(--k-sunk)}
[data-part="place"]{grid-column:var(--col);grid-row:var(--row);position:relative;display:grid;justify-items:center;align-content:start;min-width:0;min-height:var(--k-control);padding:0 2px 2px;border-radius:calc(var(--k-radius) + 4px);text-align:center}
[data-part="place"] > [data-part="socket"]{margin-block:calc((var(--_groove) - var(--_socket)) / 2)}
[data-part="place-name"]{display:block;max-width:100%;margin-top:3px;padding:1px 8px;border-radius:var(--k-radius);line-height:1.35;color:var(--k-quiet);overflow-wrap:anywhere}
/* there: a move you may do leads here, so its socket is a dish raised to be pressed */
[data-part="place"][data-state~="there"] > [data-part="socket"]{background:var(--k-sheet);box-shadow:var(--k-raised)}
[data-part="place"][data-state~="there"] > [data-part="place-name"]{color:var(--k-ink)}
[data-part="place"][data-state~="there"]:active > [data-part="socket"]{transform:translate(.6px,1.5px)}
/* here: the bead, and its name on the here highlighter in a stronger weight */
[data-part="place"][data-state~="here"] > [data-part="place-name"]{background:var(--k-here);color:var(--k-ink);font-weight:var(--k-weight-strong)}
[data-part="place"][data-state~="busy"] > [data-part="socket"]{opacity:.6}

/* ---------- moves ---------- */
[data-block="moves"]{display:grid;gap:14px}
[data-part="keys"]{display:flex;flex-wrap:wrap;gap:8px}
[data-part="keys"]:empty{display:none}

/* ---------- forms ---------- */
[data-block="form"]{display:grid;gap:10px;min-width:0}
[data-part="fields"]{display:grid;gap:16px}
[data-part="actions"]{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
[data-block="form"][data-kind="line"]:not([data-state~="open"]) > [data-part="actions"]{display:none}
[data-block="form"][data-kind="full"]{gap:18px;padding-top:10px}
[data-part="form-slot"] > [data-block="form"]{padding:4px 0 2px}

/* ---------- a week: seven days in the same groove, the bead on today ---------- */
[data-part="days"]{--_groove:52px;--_socket:36px;--_bead:34px;position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-block:2px 4px}
[data-part="days"]::before{content:"";position:absolute;inset:0 0 auto;height:var(--_groove);border-radius:var(--k-round);background:var(--k-tint);box-shadow:var(--k-sunk)}
[data-part="day"]{position:relative;display:grid;justify-items:center;align-content:start;width:100%;min-height:var(--k-control);border-radius:var(--k-radius);color:var(--k-quiet)}
[data-part="day"] > [data-part="socket"]{margin-block:calc((var(--_groove) - var(--_socket)) / 2)}
[data-part="day"] [data-part="bead"]{position:absolute;inset:calc((var(--_socket) - var(--_bead)) / 2)}
[data-part="day-num"]{position:relative;color:var(--k-soft);line-height:1}
[data-part="day-name"]{margin-top:3px;line-height:1.35}
[data-part="day"][data-state~="here"]{color:var(--k-ink)}
[data-part="day"][data-state~="here"] [data-part="day-num"],[data-part="day"][data-state~="here"] [data-part="day-name"]{color:var(--k-ink);font-weight:var(--k-weight-strong)}
[data-part="day"][data-state~="open"]:not([data-state~="here"]) > [data-part="socket"]{background:var(--k-sheet);box-shadow:var(--k-lifted)}
[data-part="day"][data-state~="open"] [data-part="day-num"],[data-part="day"][data-state~="open"] [data-part="day-name"]{color:var(--k-ink)}
[data-part="dots"]{display:flex;justify-content:center;gap:3px;height:8px;padding-top:2px}
[data-part="dots"] > i{width:5px;height:5px;border-radius:var(--k-round);background:var(--k-ink)}

/* ---------- a surface's own drawing ---------- */
/* A surface may draw its own object with the same parts, outside the kit's elements: a track that holds things
   (a day of tasks, a shelf), a socket for each thing, and the bead that drops into a socket once its thing is done.
   The surface keeps their size and place; the dress gives them their material and draws their states. A track:
   open (chosen, so it lifts out), there (what is in the hand can go here: a dish raised to be pressed). A socket:
   here (it holds the bead), fresh (it just came), open (in the hand, lifted), there (set aside, in a place the
   surface does not draw). The path's own track takes none of this. */
[data-part="track"]{position:relative;isolation:isolate;border-radius:var(--k-round);background:var(--k-tint);box-shadow:var(--k-sunk)}
[data-part="track"]::after{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;background:var(--k-sheet);box-shadow:var(--k-lifted);opacity:0;pointer-events:none;transition:opacity var(--k-time) var(--k-ease)}
[data-part="track"]:is([data-state~="open"],[data-state~="there"]){background:var(--k-tint);box-shadow:var(--k-sunk)}
[data-part="track"]:is([data-state~="open"],[data-state~="there"])::after{opacity:1}
[data-part="track"][data-state~="there"]::after{box-shadow:var(--k-raised)}
[data-block="path"] > [data-part="track"]{position:static;isolation:auto;border-radius:0;background:none;box-shadow:none}
[data-block="path"] > [data-part="track"]::after{content:none}
/* a seat in a groove at rest is a hair darker than the groove, so a thing still to do never reads as done */
:where([data-part="track"]:not([data-state~="open"])) > [data-part="socket"]{background:color-mix(in srgb,var(--k-tint-2),var(--k-ink) 6%)}
[data-part="socket"][data-state~="here"]{color:var(--k-ink)}
[data-part="socket"][data-state~="there"]{background:var(--k-page);box-shadow:none;color:var(--k-quiet)}
[data-part="socket"][data-state~="fresh"]{background:var(--k-new);box-shadow:none;color:var(--k-ink)}
[data-part="socket"][data-state~="open"]{background:var(--k-sheet);box-shadow:var(--k-lifted);color:var(--k-ink)}

/* ---------- people ---------- */
[data-block="people"]{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
[data-block="person"]{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:36px}
[data-part="face"]{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--k-round);background:var(--k-tint-2);font-weight:var(--k-weight-strong);line-height:1}
[data-part="agent"]{position:absolute;left:25px;top:23px;width:14px;height:14px;border-radius:var(--k-round);background:var(--k-ink);box-shadow:0 0 0 2.5px var(--k-page)}
[data-block="person"]:not([data-state~="here"]) > [data-part="face"]{background:var(--k-tint);color:var(--k-quiet)}
[data-part="who"]{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
[data-part="role"]{color:var(--k-quiet)}
[data-block="person"][data-state~="fresh"] [data-part="who-name"]{padding:1px 9px;margin-inline:-4px;border-radius:var(--k-radius);background:var(--k-new)}

/* ---------- reaching: a small sheet that floats where the hand is ---------- */
/* on a phone it takes the width inside the page's margins; the kit centres it there */
[data-block="reach"]{position:absolute;z-index:30;left:var(--x,12px);top:var(--y,12px);display:grid;gap:12px;width:min(400px,calc(100% - 2 * var(--k-gutter)));padding:16px 14px 14px;border-radius:calc(var(--k-radius) + 4px);background:var(--k-sheet);box-shadow:var(--k-float);outline:0}
[data-part="reach-title"]{display:grid;padding-inline:6px}
/* a record with many moves scrolls them inside the sheet, so the free line stays in reach */
[data-block="reach"] > [data-block="moves"]{max-height:236px;overflow-y:auto;overscroll-behavior:contain;margin:-6px -8px;padding:6px 8px 10px}
[data-part="reach-title"] > [data-part="title"]{font-weight:var(--k-weight-strong)}
[data-block="reach"] > [data-part="answer"]{padding-inline:6px}
[data-block="reach"] > [data-part="actions"]{margin-top:-8px}
[data-block="reach"] > [data-part="answer"]:empty{display:none}
/* a long press reaches, so it must not start a selection or the system's own menu */
[data-block="record"] > [data-part="open"],[data-part="tick"],[data-part="place"],[data-part="day"]{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}

/* ---------- very narrow phones ---------- */
@media (max-width:359px){
  :root{--k-gutter:16px;--k-size-name:34px;--_bleed:10px}
  [data-part="key"]{padding-inline:14px}
}

/* ---------- wide screens: use the width ---------- */
@media (min-width:760px){
  :root{--k-gutter:40px;--k-size-name:52px;--k-size-head:30px}
  [data-block="board"]{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));column-gap:36px}
  [data-block="week"]{grid-template-columns:repeat(auto-fill,minmax(380px,1fr));column-gap:44px;row-gap:14px}
  [data-block="week"] > [data-part="days"]{grid-column:1 / -1;max-width:560px}
  /* an open record takes the whole row, so its neighbour's column does not stand empty beside it */
  [data-block="week"] > [data-part="group"]:has([data-block="record"][data-state~="open"]:not([data-size="hero"])){grid-column:1 / -1}
  [data-part="fields"] > [data-part="field"][data-kind="long_text"]{grid-column:1 / -1;max-width:720px}
}
@media (min-width:1040px){
  :root{--k-gutter:56px;--k-size-name:60px}
  [data-block="path"][data-size="hero"]{--_groove:112px;--_socket:84px;--_bead:62px;--_cell:164px}
}
/* an open record has room: the path and the keys on the left, what the record holds on the right */
@container record (min-width:620px){
  [data-block="record"]:not([data-size="hero"]) > [data-part="inside"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:36px}
  [data-block="record"]:not([data-size="hero"]) > [data-part="inside"] > *{grid-column:1}
  [data-block="record"]:not([data-size="hero"]) > [data-part="inside"] > [data-part="values"]{grid-column:2;grid-row:1 / span 5;align-self:start}
}