/*
 * The host chrome of a Katagami app: what the host page draws outside the frame, because it must be trusted.
 * As little as there can be: one quiet menu key at the bottom, whose panel holds Copy link, who can use the app, a
 * change that waits, the people and the history, one line each; one sentence when the app's own interface is not on
 * screen; and what the frame asked the person to confirm. The app's own interface has the whole page.
 * It is the site's own stylesheet and never an agent's. It reads the custom properties and the shared pieces
 * (key, well, mark, bead, person) of the kit's own structure, kit.css, which the host page links first. An
 * app's dress reaches the chrome only as a few checked values (ground, ink, the highlighters for here and
 * new, two font families, the radius, the text size, the motion time, and how a key and what floats are lifted), so the
 * menu key and its sheet are cut and lifted the way the viewer's language does it. None of them can remove the edge
 * between the chrome and the frame: that edge is drawn with this file's own constants and the ink, which a
 * dress cannot bring close to its ground.
 */

/* The chrome's own wells, sockets, faces and shadows are made from the ground and the ink it was given, so
   under any dress the chrome is cut from the same paper as the app. */
[data-block="host"]{
  --k-tint:color-mix(in oklab,var(--k-page) 96.7%,var(--k-ink));
  --k-tint-2:color-mix(in oklab,var(--k-page) 93.5%,var(--k-ink));
  --k-tint-3:color-mix(in oklab,var(--k-page) 89.9%,var(--k-ink));
  --k-sheet:var(--k-page);
  --_ink-08:color-mix(in oklab,var(--k-ink) 8%,transparent);
  --_ink-14:color-mix(in oklab,var(--k-ink) 14%,transparent);
  --_ink-22:color-mix(in oklab,var(--k-ink) 22%,transparent);
  --k-raised:0 1px 0 var(--_ink-08),.6px 1.6px 3px -.5px var(--_ink-22),0 8px 12px -9px var(--_ink-22);
  --k-sunk:inset 0 1.5px 3px var(--_ink-08);
  --k-sunk-deep:inset 0 2px 4px var(--_ink-14);
  --k-float:0 1px 0 var(--_ink-08),0 2px 6px -2px var(--_ink-14),0 14px 24px -16px var(--_ink-22);
  /* the edge between the chrome and the frame: a hair of ink, a constant grey and a short shadow, never a halo */
  --_edge:0 1px 0 var(--_ink-08),0 1px 1px rgb(128 128 128 / .1),0 7px 10px -8px var(--_ink-22);
  --_side:max(var(--k-gutter),calc((100% - var(--k-measure)) / 2 + var(--k-gutter)));
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
/* Under a dress, the chrome's two greys for words are its ink let down toward its ground, never the kit's own
   greys on another paper. They stay at 4.5 to 1 or more on any ground the chrome accepts (7 to 1 with its ink). */
:root[style*="--k-ink"] [data-block="host"]{
  --k-soft:color-mix(in oklab,var(--k-ink) 90%,var(--k-page));
  --k-quiet:color-mix(in oklab,var(--k-ink) 82%,var(--k-page))}

/* ---------- one sentence when the interface is not on screen (and, in a chat, one Reconnect line). Never sticky ---------- */
[data-block="said"],[data-block="reconnect"]{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;width:100%;padding:14px var(--_side);color:var(--k-soft);text-wrap:pretty}
[data-block="reconnect"]{padding-block:8px;font-size:14px}

/* ---------- the menu: one quiet key at the bottom, where the thumb is, and its panel. Nothing else over the app.
   Square and delicate: the panel and its rows have no radius; only the key and the dots are round ---------- */
/* room under the app, so its last row can scroll clear of the menu key */
[data-block="host"]{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
[data-block="menu"]{position:fixed;z-index:15;right:calc(12px + env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));display:grid;justify-items:end;gap:8px;pointer-events:none}
[data-block="menu"] > *{pointer-events:auto}
[data-part="menu-key"]{position:relative;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:999px;background:color-mix(in oklab,var(--k-page) 88%,transparent);color:var(--k-soft);box-shadow:var(--k-raised);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
[data-part="menu-key"]:hover,[data-part="menu-key"][aria-expanded="true"]{color:var(--k-ink)}
[data-part="menu-key"]:focus-visible{outline:2px solid var(--k-ink);outline-offset:2px}
[data-part="menu-key"] > svg{width:18px;height:18px;fill:currentColor}
[data-part="menu-key"] > [data-part="dot"]{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:999px;background:var(--k-here);box-shadow:0 0 0 2px var(--k-page)}
[data-block="menu"] > [data-part="sheet"]{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;width:min(380px,calc(100vw - 24px));max-height:min(78vh,640px);overflow:auto;overscroll-behavior:contain;padding:6px 0 14px;border-radius:0;background:var(--k-page);box-shadow:var(--_edge),var(--k-float);font-size:16px;line-height:1.4}
@media (prefers-reduced-motion:no-preference){
  [data-block="menu"] > [data-part="sheet"]{animation:k-arrive var(--k-time) var(--k-ease) both}
}
/* one line each: a press does it, or opens what is under it */
[data-part="sheet"] > [data-part="item"]{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:10px 18px;border:0;border-radius:0;background:none;color:var(--k-ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
[data-part="sheet"] > [data-part="item"]:hover{background:var(--k-tint)}
[data-part="sheet"] > [data-part="item"]:focus-visible{outline:2px solid var(--k-ink);outline-offset:-2px}
[data-part="item"][data-kind="copy"]{font-weight:var(--k-weight-strong)}
/* "Copied" is marked like a highlighter, the row itself stays still */
[data-part="item"][data-kind="copy"] > [data-part="item-name"]{flex:none;margin-left:-6px;padding:1px 6px}
[data-part="item"][data-kind="copy"][data-state="done"] > [data-part="item-name"]{background:var(--k-here)}
[data-part="item"] > [data-part="item-name"]{flex:1 1 auto;min-width:0;text-wrap:pretty}
[data-part="item"] > [data-part="count"]{flex:none;color:var(--k-quiet);font-variant-numeric:tabular-nums}
[data-part="item"] > [data-part="chevron"]{flex:none;width:12px;height:12px;fill:none;stroke:var(--k-quiet);stroke-width:1.5}
[data-part="item"][aria-expanded="true"] > [data-part="chevron"]{transform:rotate(90deg)}
[data-part="item"][data-state="attention"] > [data-part="item-name"]::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;border-radius:999px;background:var(--k-here);vertical-align:.1em}
[data-part="sheet"] > [data-part="fold"]{display:grid;gap:14px;padding:2px 18px 14px;font-size:15px}
[data-part="sheet"] > [data-part="note"]{padding:10px 18px 4px;color:var(--k-soft);font-size:15px;text-wrap:pretty}
[data-part="sheet"] > [data-part="said"]{padding:0 18px 8px;color:var(--k-ink);font-size:15px;text-wrap:pretty}
[data-part="sheet"] > [data-part="foot"]{padding:12px 18px 0;color:var(--k-quiet);font-size:14px;line-height:1.4;text-wrap:pretty}
@media (prefers-reduced-motion:no-preference){
  [data-part="item"] > [data-part="chevron"]{transition:transform var(--k-time) var(--k-ease)}
  [data-part="item"][data-kind="copy"] > [data-part="item-name"]{transition:background var(--k-time) var(--k-ease)}
}

/* who can use the app: the owner's answers, one line each, the chosen one with a filled dot; one quiet line under */
[data-block="who"]{display:grid;gap:2px;padding:8px 0 10px}
[data-block="who"] > [data-part="heading"]{padding:4px 18px 4px;color:var(--k-quiet);font:var(--k-weight-strong) 14px/1.4 var(--k-font-text)}
[data-part="audiences"]{display:grid}
[data-part="audience"]{display:flex;align-items:center;gap:12px;min-height:40px;padding:8px 18px;border:0;border-radius:0;background:none;color:var(--k-soft);font:inherit;text-align:left;cursor:pointer}
[data-part="audience"]:hover{background:var(--k-tint);color:var(--k-ink)}
[data-part="audience"][aria-checked="true"]{color:var(--k-ink)}
[data-part="audience"]:focus-visible{outline:2px solid var(--k-ink);outline-offset:-2px}
[data-part="audience"] > [data-part="dot"]{flex:none;width:14px;height:14px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--k-quiet)}
[data-part="audience"][aria-checked="true"] > [data-part="dot"]{box-shadow:inset 0 0 0 4.5px var(--k-ink)}
/* a choice on its way: chosen at once, its dot in the quiet ink until the app has it */
[data-part="audience"][aria-checked="true"][data-state="pending"] > [data-part="dot"]{box-shadow:inset 0 0 0 4.5px var(--k-quiet)}
[data-block="who"] > [data-part="line"]{padding:2px 18px 0;color:var(--k-quiet);font-size:14.5px;text-wrap:pretty}
[data-block="who"] > [data-part="pending"]{padding:2px 18px 0;color:var(--k-quiet);font-size:14px}
[data-block="who"] > [data-part="said"]{padding:4px 18px 0;color:var(--k-ink);font-size:15px}

/* what opens under a row: the change that waits, the people, the history. Flat, in the panel's own margins */
[data-block="change"]{display:grid;gap:10px}
[data-block="change"] > ul{display:grid;gap:3px}
[data-part="line"]{color:var(--k-soft);text-wrap:pretty}
[data-part="line"]:is([data-kind="removes"],[data-kind="alters"],[data-kind="widens"]){color:var(--k-ink);font-weight:var(--k-weight-strong)}
[data-block="change"] > [data-part="detail"]{color:var(--k-ink)}

[data-block="members"]{display:grid;gap:4px}
[data-block="members"] > [data-block="person"]{display:flex;align-items:center;min-height:36px}
[data-block="members"] > [data-block="person"] > [data-part="face"]{width:26px;height:26px;font-size:12px}
[data-block="members"] > [data-block="person"] [data-part="role"]{color:var(--k-quiet)}
[data-block="members"] > [data-block="person"] > [data-part="key"]{min-height:30px;margin-left:auto;font-size:14.5px}
[data-block="members"] > [data-part="said"]{color:var(--k-ink)}
[data-block="host"] [data-part="face"]{border-radius:999px}

/* what others changed: who and when, why in their own words, what it did, and Undo on the one in place now. One the
   owner had not seen yet carries a small dot while it is open */
[data-block="lately"]{display:grid;gap:12px}
[data-part="entry"]{display:grid;gap:3px}
[data-part="entry"] > [data-part="said"]{color:var(--k-ink);text-wrap:pretty}
[data-part="entry"] > [data-part="said"] > time{margin-left:4px;color:var(--k-quiet);white-space:nowrap}
[data-part="entry"][data-state="new"] > [data-part="said"]::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:999px;background:var(--k-here);vertical-align:.12em}
[data-part="entry"] > [data-part="why"]{color:var(--k-soft);text-wrap:pretty}
[data-part="entry"] > ul{display:grid;gap:2px}
[data-part="entry"] > [data-part="detail"]{color:var(--k-quiet)}
[data-part="entry"] > [data-part="keys"]{padding-top:4px}

/* what happened lately: one quiet line each, newest first, the time at the end */
[data-block="activity"]{display:grid;gap:6px}
[data-block="activity"] > h2,[data-block="versions"] > h2{color:var(--k-quiet);font:var(--k-weight-strong) 14px/1.4 var(--k-font-text)}
[data-block="activity"] > ul{display:grid;gap:4px}
[data-part="happened"]{display:flex;justify-content:space-between;gap:12px;color:var(--k-soft);text-wrap:pretty}
[data-part="happened"] > [data-part="when"]{flex:none;color:var(--k-quiet);font-variant-numeric:tabular-nums}
[data-part="happened"]:is([data-state="waiting"],[data-state="failed"]) > [data-part="what"]{color:var(--k-ink)}

/* the owner's versions: number, who did what, when, and Restore on any not in use; why beneath */
[data-block="versions"]{display:grid;gap:6px}
[data-block="versions"] > ol{display:grid;grid-template-columns:1.4em minmax(0,1fr) auto auto;column-gap:10px;row-gap:2px}
[data-part="version"]{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:baseline;padding-block:3px;color:var(--k-soft)}
[data-part="version"] > [data-part="number"]{color:var(--k-quiet);font-variant-numeric:tabular-nums}
[data-part="version"] > [data-part="what"]{text-wrap:pretty}
[data-part="version"] > [data-part="when"]{grid-column:3;grid-row:1;color:var(--k-quiet);font-variant-numeric:tabular-nums}
[data-part="version"] > [data-part="why"]{grid-column:2 / -1;grid-row:2;color:var(--k-ink);text-wrap:pretty}
[data-part="version"] > [data-part="key"]{grid-column:4;grid-row:1;min-height:0;min-width:0;padding-inline:0;font-size:inherit}
[data-part="version"][data-state="live"] > [data-part="what"]{color:var(--k-ink)}

/* ---------- the frame ---------- */
[data-block="frame"]{display:block;flex:1 0 auto;width:100%;border:0;background:var(--k-page)}

/* ---------- the foot ---------- */
/* what the frame asked for that needs the person: a sheet over the foot, where the thumb is, in the host's words */
[data-block="confirm"]{position:fixed;z-index:20;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:grid;gap:10px;max-width:560px;margin-inline:auto;padding:20px 20px 16px;border-radius:calc(var(--k-radius) + 6px);background:var(--k-page);box-shadow:var(--_edge),var(--k-float);outline:0}
[data-block="confirm"] > [data-part="said"]{font-weight:var(--k-weight-strong);text-wrap:pretty}
[data-block="confirm"] > [data-part="detail"]{font-family:var(--k-font-code);letter-spacing:0;color:var(--k-soft);overflow-wrap:anywhere}
[data-block="confirm"] > [data-part="keys"]{padding-top:4px;align-items:center}
@media (prefers-reduced-motion:no-preference){
  [data-block="confirm"]{animation:k-arrive var(--k-time) var(--k-ease) both}
}

/* the mock host's own controls and notes: for people building a surface, never part of an app */
[data-block="mock"]{width:100%;padding:24px var(--_side) 28px;color:var(--k-soft)}
[data-block="mock"] > summary{display:inline-flex;align-items:center;min-height:var(--k-control);color:var(--k-quiet);cursor:pointer}
[data-block="mock"] [data-part="mock-body"]{display:grid;gap:18px;padding-top:8px}
[data-block="mock"] [data-part="keys"]{align-items:center}
[data-block="mock"] [data-part="log"]{font:400 var(--k-size-text)/1.5 var(--k-font-code);letter-spacing:0;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--k-soft)}
[data-block="mock-note"]{width:100%;padding:10px var(--_side);background:var(--k-new);color:var(--k-ink);text-wrap:pretty}

@media (min-width:760px){
  [data-block="confirm"]{bottom:calc(28px + env(safe-area-inset-bottom,0px));padding:22px 24px 18px}
}