clavarium 0.0.2 → 0.1.0-next.2

package/web/style.css

@@ -0,0 +1,1006 @@
+/* The terminal owns the screen. On a wide screen the list sits beside it; on
+   a narrow one, the list and the conversation are two screens. */
+:root {
+  --bg: #0f141a; --bar: #161d26; --panel: #131a22; --line: #2b3745; --ink: #e7edf4; --ink2: #a3b1c2;
+  --brass: #d2a94e; --on-brass: #1b1405; --ok: #5fc39d; --warn: #e39a5c; --danger: #ee7f79;
+  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
+}
+/* A light screen, for whoever reads better dark on light. The terminal gets
+   colours of its own for it (app.js): a tool's "white" must stay readable. */
+:root[data-theme="light"] {
+  --bg: #fbfbfa; --bar: #eef0f3; --panel: #ffffff; --line: #c5cdd8; --ink: #17202b; --ink2: #4f5d6d;
+  --brass: #c79a3a; --on-brass: #1b1405; --ok: #1f7a5a; --warn: #a3581a; --danger: #b3261e; --button: #e6eaef;
+}
+* { box-sizing: border-box; }
+/* TEXT IS IN rem: one size at the root (set per device by app.js, as a
+   share of the browser's own text size) scales every text of the page. */
+html { font-size: 100%; touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
+html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
+body { font: .875rem var(--sans); }
+body { height: 100dvh; padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0); }
+[hidden] { display: none !important; }
+button { font: 600 .8125rem var(--sans); color: var(--ink); background: var(--button, #222c38); border: 1px solid var(--line); border-radius: 7px; padding: 7px 11px; cursor: pointer; }
+button.primary { background: var(--brass); border-color: var(--brass); color: var(--on-brass); }
+button:focus-visible, input:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
+/* The list on the left, the three places under it, the conversation beside them. */
+#app { display: grid; grid-template-columns: 260px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; height: 100%; }
+#app:has(> #list[hidden]) #room { grid-column: 1 / -1; }
+#list { grid-column: 1; grid-row: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; }
+#list .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+#items { display: flex; flex-direction: column; gap: 6px; }
+.item { display: block; width: 100%; text-align: left; padding: 9px 10px; background: var(--bar); font-weight: 400; }
+.item[aria-current="true"] { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass); }
+.item b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.item small { color: var(--ink2); }
+.item .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--ink2); }
+.item[data-phase="ready"] .dot { background: var(--ok); }
+.item[data-phase="building"] .dot, .item[data-phase="restarting"] .dot, .item[data-busy="true"] .dot { background: var(--warn); animation: pulse 1.2s ease-in-out infinite; }
+.item[data-phase="failed"] .dot { background: var(--danger); }
+@keyframes pulse { 50% { opacity: .25; } }
+@media (prefers-reduced-motion: reduce) { .item .dot { animation: none !important; } }
+#create { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--bar); border: 1px solid var(--line); border-radius: 8px; }
+#create label, #create .legend { font-size: .75rem; color: var(--ink2); }
+#create input { font: .875rem var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; min-width: 0; }
+.choices { display: flex; flex-wrap: wrap; gap: 6px; }
+.choices button[aria-checked="true"] { border-color: var(--brass); background: rgba(210, 169, 78, .16); }
+.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.hint { color: var(--ink2); font-size: .75rem; margin: 0; }
+.error { color: var(--danger); font-size: .8125rem; margin: 0; }
+#room { grid-column: 2; grid-row: 1 / span 2; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
+/* The bar wraps onto a second line rather than squeeze the name away or break a button's label in two. */
+header { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 6px 10px; background: var(--bar); border-bottom: 1px solid var(--line); min-height: 44px; }
+header b { flex: 1 0 auto; min-width: 6ch; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+header button { padding: 5px 9px; white-space: nowrap; }
+#back { font-size: 1.25rem; line-height: 1; padding: 2px 10px; }
+.tag { font-size: .6875rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--brass); color: var(--brass); white-space: nowrap; }
+#state { font-size: .75rem; color: var(--ink2); white-space: nowrap; }
+#state::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--ink2); }
+#state[data-state="live"]::before { background: var(--ok); }
+#state[data-state="waiting"]::before, #state[data-state="ended"]::before { background: var(--warn); }
+/* Running, but its machine is not well: not green. */
+#state[data-state="live"][data-health="warn"]::before { background: var(--warn); }
+#state[data-state="live"][data-health="bad"]::before { background: var(--danger); }
+main { position: relative; flex: 1; min-height: 0; }
+#terminal { position: absolute; inset: 0; padding: 4px; }
+/* Over the chat screen (a question asked must be seen), under a sheet the person opened (which is shut before any question is asked). */
+#notice { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; background: rgba(15, 20, 26, .92); }
+/* On a light screen the veil is light too: dark text on the dark veil could not be read (seen on the welcome of a device). */
+:root[data-theme="light"] #notice { background: rgba(251, 251, 250, .94); }
+#notice p { margin: 0; max-width: 36ch; font-size: 1rem; }
+/* The wheel while a machine is built or its work moved; still for those who ask for less motion. */
+#notice .spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .18); border-top-color: #d2a94e; }
+@media (prefers-reduced-motion: no-preference) { #notice .spin { animation: notice-spin .9s linear infinite; } @keyframes notice-spin { to { transform: rotate(360deg); } } }
+/* A START TOLD STEP BY STEP (app.js, progressPanel): what it is and "Step 3
+   of 6" with its clock; the step under way large, with its wheel; those
+   passed on one small line of checks; those to come dimmed. */
+#notice-head { display: grid; gap: 2px; }
+#notice #notice-title { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brass); }
+#notice #notice-count { font-size: .9375rem; color: var(--ink2); font-variant-numeric: tabular-nums; }
+#notice-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; max-width: 34rem; font-size: .9375rem; }
+#notice-steps li { color: var(--ink2); }
+#notice-steps li[data-state="done"] { font-size: .75rem; color: var(--ok); opacity: .85; }
+#notice-steps li[data-state="done"]::before { content: "\2713\00a0"; }
+#notice-steps li[data-state="now"] { flex-basis: 100%; order: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 14px 0 12px; font-size: 1.375rem; font-weight: 600; color: var(--ink); }
+#notice-steps li[data-state="now"] small { font-size: .8125rem; font-weight: 400; color: var(--ink2); }
+#notice-steps li[data-state="later"] { flex-basis: 100%; order: 2; font-size: .875rem; opacity: .7; }
+#notice-steps li[data-state="later"]::before { content: "\25CB\00a0"; }
+#notice-steps li[data-state="now"] small { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
+#notice-steps li[data-state="now"] progress { width: 7rem; height: 6px; border: 0; border-radius: 3px; background: var(--line); accent-color: var(--brass); overflow: hidden; }
+#notice-steps li[data-state="now"] progress::-webkit-progress-bar { background: var(--line); border-radius: 3px; }
+#notice-steps li[data-state="now"] progress::-webkit-progress-value { background: var(--brass); border-radius: 3px; }
+#notice-steps li[data-state="now"] progress::-moz-progress-bar { background: var(--brass); border-radius: 3px; }
+#notice-steps li[data-state="later"]::before { content: "\25CB\00a0"; }
+:root[data-theme="light"] #notice .spin { border-color: rgba(23, 32, 43, .14); border-top-color: var(--brass); }
+#notice button { padding: 10px 18px; font-size: .9375rem; }
+footer { display: flex; gap: 6px; padding: 6px 8px; background: var(--bar); border-top: 1px solid var(--line); overflow-x: auto; }
+footer button { flex: 0 0 auto; min-width: 44px; padding: 9px 12px; }
+footer button.wide { flex: 1 0 auto; background: var(--brass); border-color: var(--brass); color: var(--on-brass); }
+@media (max-width: 700px) {
+  #app { grid-template-columns: minmax(0, 1fr); }
+  #list, #room { grid-column: 1; grid-row: 1; border-right: 0; }
+  #app[data-view="room"] #list, #app[data-view="list"] #room { display: none; }
+}
+@media (min-width: 701px) { #back { display: none; } }
+/* The list folded away with one click, on a wide screen: the terminal takes the room. */
+@media (min-width: 701px) { #app[data-list="folded"] #list, #app[data-list="folded"] #nav { display: none; } #app[data-list="folded"] #room { grid-column: 1 / -1; } }
+@media (max-width: 700px) { #fold { display: none; } }
+#fold { font-size: 1rem; line-height: 1; padding: 4px 9px; }
+.chips { display: flex; gap: 5px; min-width: 0; overflow: hidden; }
+.chip { font-size: .6875rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink2); white-space: nowrap; }
+.chip[data-access="write"] { color: var(--ok); border-color: var(--ok); }
+.sheet { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--panel); overflow-y: auto; }
+.panel-top { display: flex; align-items: center; justify-content: space-between; }
+#panel-rows { display: flex; flex-direction: column; }
+.folder { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
+.folder b { flex: 1; min-width: 100px; overflow: hidden; text-overflow: ellipsis; }
+.levels { display: flex; }
+.levels button { border-radius: 0; margin-left: -1px; }
+.levels button:first-child { border-radius: 7px 0 0 7px; margin-left: 0; }
+.levels button:last-child { border-radius: 0 7px 7px 0; }
+.levels button[aria-pressed="true"] { background: rgba(210, 169, 78, .18); border-color: var(--brass); position: relative; }
+#folder-new { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
+#folder-new label { font-size: .75rem; color: var(--ink2); }
+#folder-new input { flex: 1; min-width: 0; font: .875rem var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; }
+code { font-family: ui-monospace, Menlo, Consolas, monospace; }
+@media (max-width: 700px) { #chips { display: none; } }
+.path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: .8125rem; color: var(--ink2); }
+.path button { padding: 3px 8px; font-weight: 400; }
+#files-rows { display: flex; flex-direction: column; }
+.file { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; background: none; border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0; text-align: left; font-weight: 400; width: 100%; }
+.file .kind { flex: 0 0 34px; font-size: .625rem; font-weight: 700; text-align: center; padding: 3px 0; border: 1px solid var(--line); border-radius: 5px; color: var(--ink2); }
+.file[data-folder="true"] .kind { color: var(--brass); border-color: var(--brass); }
+.file .label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.file small { color: var(--ink2); white-space: nowrap; }
+.choices button[aria-selected="true"] { border-color: var(--brass); background: rgba(210, 169, 78, .16); }
+#shortcuts { background: var(--bar); border-top: 1px solid var(--line); padding: 6px 8px 0; }
+.chips-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
+.chips-row button { flex: 0 0 auto; border-radius: 999px; padding: 6px 12px; font-weight: 500; }
+.chips-row button.saved { border-color: var(--brass); background: rgba(210, 169, 78, .14); }
+.chips-row button.saved[data-enter="false"] { border-style: dashed; }
+.chips-row button.removing { border-color: var(--danger); color: var(--danger); }
+.chips-row button.quiet { color: var(--ink2); }
+#shortcut-new { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 8px; max-width: 520px; }
+#shortcut-new input:not([type]) , #shortcut-new input[maxlength] { font: .875rem var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; min-width: 0; }
+.check { font-size: .8125rem; color: var(--ink2); display: flex; align-items: center; gap: 6px; }
+footer#keys { border-top: 0; }
+#voice-line { margin: 0; padding: 5px 12px; font-size: .8125rem; color: var(--ink2); background: var(--bar); border-top: 1px solid var(--line); overflow-wrap: anywhere; }
+#voice-line::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: var(--ok); }
+#voice-line[data-state="hearing"]::before { background: var(--danger); }
+#voice-line[data-state="transcribing"]::before, #voice-line[data-state="calibrating"]::before { background: var(--warn); }
+#mic[aria-pressed="true"] { background: var(--danger); border-color: var(--danger); color: #1b0606; }
+#auto[aria-pressed="true"] { border-color: var(--brass); color: var(--brass); }
+#sharing-qr { width: 220px; max-width: 70%; background: #fff; padding: 10px; border-radius: 10px; }
+.link { overflow-wrap: anywhere; user-select: all; font-family: ui-monospace, Menlo, Consolas, monospace; }
+.device { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
+.device b { flex: 1; min-width: 120px; } .device small { color: var(--ink2); }
+button.danger { border-color: var(--danger); color: var(--danger); }
+html[data-door="device"] #app { display: block; }
+html[data-door="device"] #room { height: 100%; }
+#secret-rows { display: flex; flex-direction: column; }
+#secret-new { display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
+#secret-new label { font-size: .75rem; color: var(--ink2); }
+#secret-new input { flex: 1; min-width: 120px; font: .875rem var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; }
+.chip[data-access="offline"] { color: var(--warn); border-color: var(--warn); }
+#signin-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; background: rgba(210, 169, 78, .14); border-bottom: 1px solid var(--brass); font-size: .8125rem; }
+#signin-text { flex: 1; min-width: 160px; }
+a.button { font: 600 .8125rem var(--sans); text-decoration: none; border-radius: 7px; padding: 7px 11px; background: var(--brass); color: var(--on-brass); }
+#signin-form input { flex: 1; min-width: 130px; font: .875rem var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; }
+/* On a narrow screen the key row wraps instead of hiding its end, and
+   dictation comes first: by voice is how a phone is used. */
+@media (max-width: 700px) {
+  footer#keys { flex-wrap: wrap; overflow-x: visible; }
+  #mic, #auto { order: -1; flex: 1 0 auto; }
+  #mic { flex-basis: 55%; padding-block: 12px; }
+}
+.item[data-asleep="true"] .dot { background: var(--ink2); }
+footer button.careful { border-style: dashed; color: var(--ink2); }
+/* On a touch screen every control is at least a fingertip high. */
+@media (max-width: 700px) {
+  button, a.button, .file { min-height: 44px; }
+  .chips-row button { padding-block: 10px; }
+  #state, .tag { font-size: .8125rem; }
+  footer button.careful { order: 5; }
+}
+#copy-text { flex: 2; min-height: 160px; width: 100%; resize: none; font: .8125rem/1.4 ui-monospace, Menlo, Consolas, monospace; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 10px; white-space: pre; overflow: auto; }
+#paste-text { flex: 1; min-height: 70px; width: 100%; resize: none; font: .8125rem/1.4 ui-monospace, Menlo, Consolas, monospace; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 10px; }
+/* The page never scrolls or zooms under a finger on the terminal: the drag is for the terminal. */
+#terminal { touch-action: none; }
+
+/* Adding a mailbox: folded away until asked for. */
+#mailbox-box, #git-box { margin: 12px 0; }
+#mailbox-box summary, #git-box summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
+#mailbox-new, #git-new { display: grid; gap: 6px; }
+.folder small.hint { font-weight: normal; }
+/* Under the access buttons of a repository, across the whole row. */
+.folder .auto-send { flex-basis: 100%; }
+.auto-send fieldset { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 0; padding: 0; border: 0; min-width: 0; }
+.auto-send label:not(.check) { display: flex; flex-direction: column; gap: 4px; }
+#mailbox-new input, #git-new input { min-width: 0; min-height: 40px; font: .875rem var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; }
+#mailbox-new .row input, #git-new .row input { flex: 1; }
+#mailbox-new #mailbox-port { flex: 0 0 90px; }
+#mailbox-new label, #git-new label { font-size: .8125rem; color: var(--muted, inherit); margin-top: 4px; }
+
+/* A file, shown in a window over the screen. */
+#viewer { position: absolute; inset: 0; z-index: 6; display: flex; align-items: stretch; justify-content: center; padding: 10px; background: rgba(8, 11, 15, 0.72); }
+#viewer-card { display: flex; flex-direction: column; gap: 8px; width: min(1100px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-height: 0; }
+#viewer .row { align-items: center; gap: 8px; flex-wrap: wrap; }
+#viewer .sp { flex: 1; }
+#viewer #preview-name { overflow-wrap: anywhere; }
+#viewer a.button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 8px; background: var(--brass); color: var(--on-brass); font-weight: 600; text-decoration: none; }
+#viewer button { min-height: 40px; }
+#viewer p { margin: 0; }
+#preview-body { overflow: auto; flex: 1; min-height: 0; }
+#preview-body img, #preview-body canvas { display: block; max-width: 100%; height: auto; margin: 0 auto 10px; background: #fff; border-radius: 4px; }
+#preview-body pre { white-space: pre-wrap; overflow-wrap: anywhere; font: .8125rem/1.45 ui-monospace, Menlo, Consolas, monospace; color: var(--ink); margin: 0; }
+
+#others-add { display: grid; gap: 6px; margin-top: 12px; }
+#others-add input { flex: 1; min-width: 0; min-height: 40px; font: .875rem var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; }
+
+/* A word said for a moment (text copied). */
+#flash { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 7; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 8px 14px; border-radius: 999px; background: var(--panel); color: var(--ink); border: 1px solid var(--brass); font-weight: 600; font-size: .8125rem; pointer-events: none; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); }
+#flash[data-menu="true"] { pointer-events: auto; }
+#flash-act { min-height: 40px; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* What a device was given, thing by thing. */
+.device .given { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
+.device .given .chip { display: inline-flex; align-items: center; gap: 6px; }
+.device .given .chip button { min-height: 0; padding: 0 7px; border-radius: 999px; font-size: .75rem; }
+#sharing-what { display: flex; flex-direction: column; }
+
+/* What can be unfolded looks like it can. */
+#panel details > summary { list-style: none; cursor: pointer; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--button, #222c38); font-weight: 600; }
+#panel details > summary::before { content: '+ '; }
+#panel details[open] > summary::before { content: '- '; }
+#sharing-label { min-height: 40px; font: .875rem var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; }
+#sharing label { font-size: .8125rem; }
+
+/* A repository: what would go out. */
+#gitview pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: .75rem/1.45 ui-monospace, Menlo, Consolas, monospace; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
+#gitview pre:empty { display: none; }
+#gitview .commit { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); }
+#gitview .commit code { color: var(--ink2); }
+#gitview .commit small { color: var(--ink2); }
+#gitview-remote, #gitview-keep { display: grid; gap: 6px; margin-top: 8px; }
+#gitview-keep input:not([type=checkbox]), #gitview-keep textarea, #gitview-target, #gitview-newbranch { min-width: 0; min-height: 40px; font: .875rem var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; }
+#gitview-target { max-width: 100%; }
+#gitview-origin code { overflow-wrap: anywhere; font: .75rem/1.45 ui-monospace, Menlo, Consolas, monospace; }
+#gitview-checks-state.passed { color: var(--ok); }
+#gitview-checks-state.failed { color: var(--danger); }
+#gitview-log .logline { padding: 4px 0; border-top: 1px solid var(--line); font-size: .8125rem; overflow-wrap: anywhere; }
+#gitview-log .logline.bad { color: var(--ink2); }
+#gitview-remote input { flex: 1; min-width: 0; min-height: 40px; font: .875rem var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; }
+#gitview details > summary { cursor: pointer; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--button, #222c38); font-weight: 600; list-style: none; }
+
+/* Sharing: a basket, the code, and who has what. */
+#sharing { gap: 12px; }
+#share-compose, #share-code, #share-manage { display: flex; flex-direction: column; gap: 10px; }
+#share-name-row { display: flex; flex-direction: column; gap: 6px; }
+#sharing-label, #share-search, .device input { min-height: 40px; font: .875rem var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; }
+.share-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
+.share-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+@media (max-width: 900px) { .share-cols { grid-template-columns: 1fr; } }
+#share-basket .folder, #share-add .folder { align-items: center; }
+#share-add button, #share-basket button, .given-row button, .device button { min-height: 40px; }
+.share-foot { position: sticky; bottom: -14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 0; background: var(--panel); border-top: 1px solid var(--line); }
+.share-foot p { flex: 1 1 260px; margin: 0; }
+#share-who button[aria-checked="true"], #share-filters button[aria-pressed="true"], #share-manage .choices button[aria-pressed="true"] { border-color: var(--brass); color: var(--brass); }
+#sharing .levels button[data-rights="rw"][aria-pressed="true"] { border-color: var(--warn); color: var(--warn); }
+#sharing-qr { width: min(280px, 70vw); background: #fff; padding: 10px; border-radius: 8px; }
+#share-waiting { font-size: 1rem; font-weight: 600; margin: 0; }
+.device { flex-direction: column; align-items: stretch; }
+.device-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.device-head small { flex: 1; color: var(--ink2); }
+.device-head small.warn { color: var(--warn); }
+.given-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0 6px 12px; border-top: 1px dashed var(--line); }
+.given-row > span:first-child { flex: 1 1 160px; min-width: 0; }
+.thing { border-top: 1px solid var(--line); padding: 6px 0; }
+.thing > summary { cursor: pointer; font-weight: 600; min-height: 40px; display: flex; align-items: center; }
+.item .shared-mark { display: block; color: var(--brass); }
+/* A sheet is open on a small screen: the keys of the terminal are not for it, and would take half the
+   screen from it. On a wide screen they stay: taking them away would resize the terminal under the
+   sheet each time, and the tool would redraw for nothing (a test caught the screen moving). */
+@media (max-width: 900px) { #room:has(.sheet:not([hidden])) #keys, #room:has(.sheet:not([hidden])) #shortcuts { display: none; } }
+/* A device's card: one full-width line per thing it has. */
+.device .given { display: block; flex-basis: auto; }
+.device > button { align-self: flex-start; }
+.given-row > .hint, .given-row > .levels { flex: 0 0 auto; }
+/* A conversation given in parts: Terminal, Chat -- two boxes to tick, at least one. */
+.parts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; flex: 0 1 auto; }
+.parts label.check { min-height: 40px; font-size: .875rem; color: var(--ink); cursor: pointer; }
+.parts input { width: 18px; height: 18px; accent-color: var(--brass); }
+.parts label.check:has(input[aria-disabled="true"]) { cursor: default; }
+.parts .parts-need { flex-basis: 100%; }
+.parts .parts-off { flex-basis: 100%; color: var(--warn); }
+.given > .parts-off { color: var(--warn); margin: 6px 0 2px; font-size: .8125rem; }
+
+/* The left column: conversations, then the platform's three entries, always in sight. */
+#list #items { flex: 1 1 auto; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
+/* Assets: one row per thing; opened, it says who may do what with it. */
+#assets section { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
+#assets section .panel-top small { margin-left: 8px; }
+.asset { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding: 4px 0; }
+.asset-head { flex: 1 1 320px; display: grid; grid-template-columns: minmax(120px, 1fr) minmax(140px, 1.4fr) minmax(120px, 1.4fr); gap: 10px; align-items: center; text-align: left; background: transparent; border: 0; padding: 8px 4px; min-height: 44px; font-weight: 400; }
+.asset-head b { overflow-wrap: anywhere; }
+.asset-head[aria-expanded="true"] b { color: var(--brass); }
+/* A card opens: a small arrow says so, turned down when it is open. */
+.asset-head b::before { content: "\25B8"; display: inline-block; width: 1.1em; color: var(--dim); transition: transform .15s; }
+.asset-head[aria-expanded="true"] b::before { transform: rotate(90deg); color: var(--brass); }
+@media (prefers-reduced-motion: reduce) { .asset-head b::before { transition: none; } }
+.asset-inside { flex-basis: 100%; padding: 0 0 8px 12px; display: flex; flex-direction: column; gap: 4px; }
+@media (max-width: 700px) { .asset-head { grid-template-columns: 1fr; gap: 2px; } }
+#assets details > summary, #access-advanced > summary, #settings-advanced > summary { cursor: pointer; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--button, #222c38); font-weight: 600; list-style: none; align-self: flex-start; }
+#assets details > summary::before, #access-advanced > summary::before, #settings-advanced > summary::before { content: '+ '; }
+#assets details[open] > summary::before, #access-advanced[open] > summary::before, #settings-advanced[open] > summary::before { content: '- '; }
+#assets details form, #access-advanced > div, #settings-advanced > div { margin-top: 8px; }
+#attach-picker { border: 1px solid var(--brass); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
+#chips { cursor: pointer; }
+#settings .row { align-items: center; gap: 10px; }
+/* One kind of event a line: its name, then its level, wrapped under it on a narrow screen. */
+.thread-levels { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
+.thread-levels label { min-width: 0; }
+.thread-levels small { display: block; color: var(--ink2); font-size: .8125rem; }
+.thread-levels select { min-height: 40px; min-width: 10rem; font: .875rem var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; }
+@media (max-width: 420px) { .thread-levels { grid-template-columns: minmax(0, 1fr); } .thread-levels select { justify-self: start; margin-bottom: 6px; } }
+
+/* What is done to the conversation itself sits at the foot of its own sheet. */
+#conversation-actions { align-items: center; gap: 8px; }
+#conversation-actions .sp { flex: 1; }
+#conversation-actions button { min-height: 40px; }
+
+/* A page written by the tool: a frame with a visible edge, so it never passes for this site. */
+#preview-body iframe { display: block; width: 100%; height: min(70vh, 900px); border: 2px solid var(--brass); border-radius: 8px; background: #fff; }
+#preview-body > button { margin-bottom: 8px; min-height: 40px; }
+
+/* Answers in the owner's place. */
+#answerer-fields textarea { width: 100%; min-height: 4.5rem; resize: vertical; font: inherit; padding: .5rem .6rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
+#answerer-fields label { display: block; margin: .7rem 0 .25rem; }
+#answerer-limit { width: 8rem; }
+#answerer-fields .row { margin-top: .8rem; }
+.needs-mark { display: block; color: var(--brass); font-weight: 700; }
+.answered { border-top: 1px solid var(--line); padding: .4rem 0; }
+.answered[data-outcome="human"] > summary { color: var(--brass); }
+.answered pre { max-height: 14rem; overflow: auto; font-size: .78rem; }
+
+/* Wake-ups. */
+.wakeup { border-top: 1px solid var(--line); padding: .6rem 0; }
+.wakeup .hint { margin: .15rem 0; }
+#wakeups-new label, #wakeups-box > label { display: block; margin: .7rem 0 .25rem; }
+#wakeups-new textarea { width: 100%; min-height: 4.5rem; resize: vertical; font: inherit; padding: .5rem .6rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
+#wakeups-new label.check { display: flex; gap: .5rem; align-items: center; }
+#wakeups-limit { width: 8rem; }
+
+.notice-box { border: 1px solid var(--brass); border-radius: 10px; padding: .7rem .8rem; margin: .6rem 0; }
+.notice-box input { width: 100%; font-family: ui-monospace, monospace; font-size: .82rem; margin: .4rem 0; }
+
+/* The simple screen lies over the terminal, which stays laid out underneath. */
+#simple { position: absolute; inset: 0; z-index: 1; overflow: auto; background: var(--bg); padding: 14px 16px 24px; }
+#simple-state { margin: 0 0 12px; font-size: 1.05rem; font-weight: 600; }
+#simple-state[data-needs="true"] { color: var(--brass); }
+#simple-say label { display: block; font-weight: 700; margin-bottom: 6px; }
+#simple-text { width: 100%; min-height: 4.2rem; resize: vertical; font: inherit; font-size: 1.05rem; padding: .6rem .7rem; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
+#simple-say .row { margin-top: 8px; }
+#simple-say button.primary { min-height: 46px; padding: 0 1.6rem; font-size: 1.05rem; }
+#simple-files { display: grid; gap: 6px; }
+#simple-files .file { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; width: 100%; text-align: left; min-height: 46px; padding: .5rem .8rem; }
+#simple-says { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .86rem; line-height: 1.45; border: 1px solid var(--line); border-radius: 10px; padding: .6rem .7rem; background: var(--panel); color: var(--ink2); max-height: 22rem; overflow: auto; }
+#simple .panel-top { margin-top: 16px; }
+/* Without its terminal, the keys of a terminal are of no use; ready answers and the voice stay. */
+#room[data-simple] #keys > button:not(#mic):not(#auto) { display: none; }
+/* Under the chat, its own box has dictation and the ready answers: the bar's, which type into the terminal, are not shown. */
+#room[data-chat] #shortcuts, #room[data-chat] #keys, #room[data-chat] #voice-line { display: none !important; }
+
+/* The conversation with the tool is drawn by Parley; here, only where it sits and this page's colours. */
+/* The chat takes the whole screen: its box stays at the bottom, the messages scroll above it. */
+/* On a light screen, brass text is too pale to read: the words in that colour are darker; the buttons keep it. */
+:root[data-theme="light"] #simple-thread { --parley-ask: #8a5d00; }
+#chat-off { margin: auto; max-width: 36ch; text-align: center; padding: 24px 8px; }
+#chat-off p { margin: 0 0 10px; font-size: 1rem; }
+#chat-off p + p { color: var(--ink2); }
+#simple[data-chat] { display: flex; flex-direction: column; overflow: hidden; padding: 10px 14px 12px; }
+#simple-thread { flex: 1; min-height: 0; --parley-bg: var(--bg); --parley-text: var(--ink); --parley-dim: var(--ink2); --parley-line: var(--line); --parley-agent: var(--panel); --parley-person: var(--bar); --parley-ask: var(--brass); --parley-action: var(--brass); --parley-on-action: #1b1405; --parley-live: var(--danger); }
+
+
+/* Private repositories: how the server gets in, and the keys made here. */
+#git-via { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
+#git-via label { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; font-weight: 400; }
+.git-via-part { display: flex; flex-direction: column; gap: 4px; }
+.warn { color: var(--warn); }
+p.warn { margin: 0; font-size: .75rem; }
+textarea.public-key { flex: 1 1 260px; min-width: 0; font: .75rem ui-monospace, Menlo, Consolas, monospace; padding: .4rem .5rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); resize: vertical; overflow-wrap: anywhere; }
+.git-key { flex-direction: column; align-items: stretch; }
+.git-key .row { flex-wrap: wrap; }
+#git-new input[type="radio"] { min-height: 0; padding: 0; margin: 0; }
+#git-new select, #gitview-sshkey { min-height: 40px; min-width: 10rem; font: .875rem var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; }
+
+#settings-advanced > div { display: grid; gap: 6px; }
+#git-hosts .folder code { overflow-wrap: anywhere; font: .75rem/1.45 ui-monospace, Menlo, Consolas, monospace; }
+#gitview .commit pre { flex-basis: 100%; margin: 2px 0 0; white-space: pre-wrap; color: var(--ink2); font-size: 0.85em; }
+#gitview #gitview-guards ul { margin: 4px 0 8px; padding-left: 20px; }
+#gitview #gitview-guards li { overflow-wrap: anywhere; }
+
+/* ---------- this conversation: chapters that fold, as a project's settings ---------- */
+#panel { gap: 12px; }
+#panel details.chapter { border: 1px solid var(--line); border-radius: 10px; background: var(--bar); }
+#panel details.chapter > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 12px 14px; border: 0; background: none; border-radius: 10px; min-height: 48px; }
+#panel details.chapter > summary::-webkit-details-marker { display: none; }
+#panel details.chapter > summary::before { content: none; }
+#panel details.chapter > summary::after { content: "Expand"; margin-left: auto; font-size: .75rem; font-weight: 600; color: var(--ink2); border: 1px solid var(--line); border-radius: 7px; padding: 3px 9px; }
+#panel details.chapter[open] > summary::after { content: "Collapse"; }
+#panel details.chapter[open] > summary { border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; }
+.chapter-title { font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
+.chapter-about { font-size: .8125rem; font-weight: 400; color: var(--ink2); flex: 1 1 14rem; }
+.chapter-body { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; background: var(--panel); border-radius: 0 0 10px 10px; }
+.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
+.facts dt { color: var(--ink2); }
+.facts dd { margin: 0; overflow-wrap: anywhere; }
+#machine-size { display: flex; flex-direction: column; gap: 6px; max-width: 30rem; }
+#machine-size label { font-size: .8125rem; color: var(--ink2); }
+#machine-size select { width: 100%; min-height: 40px; font: .875rem var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; }
+.health-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
+.health-lines li { padding-left: 1.3em; position: relative; }
+.health-lines li::before { content: ""; position: absolute; left: .2em; top: .45em; width: .55em; height: .55em; border-radius: 50%; background: var(--ok); }
+.health-lines li[data-level="info"]::before { background: var(--ink2); }
+.health-lines li[data-level="warn"]::before { background: var(--warn); }
+.health-lines li[data-level="bad"]::before { background: var(--danger); }
+.health-lines li[data-level="bad"] { color: var(--danger); }
+
+/* The machine is not well: said over the terminal, with what can be done. */
+#health-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; background: rgba(227, 154, 92, .14); border-bottom: 1px solid var(--warn); font-size: .8125rem; }
+#health-strip[data-level="bad"] { background: rgba(238, 127, 121, .14); border-color: var(--danger); }
+#health-text { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
+.health-actions { display: flex; flex-wrap: wrap; gap: 6px; }
+.health-actions button[hidden] { display: none; }
+#notice .health-lines { text-align: left; max-width: 36rem; }
+
+/* ---------- text size: one setting of this device ---------- */
+.text-size { display: inline-flex; }
+.text-size button { border-radius: 0; margin-left: -1px; min-width: 44px; }
+.text-size button:first-child { border-radius: 7px 0 0 7px; margin-left: 0; }
+.text-size button:last-child { border-radius: 0 7px 7px 0; }
+header .text-size { display: none; }
+#menu { display: none; font-size: 1.25rem; line-height: 1; padding: 2px 12px; }
+#menu-items { display: contents; }
+#keys-more { display: none; }
+footer button[data-keys="backspace"] { display: none; }
+
+/* ---------- a phone: the terminal first ---------- */
+@media (max-width: 700px) {
+  /* The bar is one line: what does not fit is behind "...", which opens over the terminal. */
+  header { flex-wrap: nowrap; position: relative; padding: 4px 8px; gap: 6px; min-height: 44px; }
+  header b { flex: 1 1 auto; min-width: 0; }
+  #chips, header #tool { display: none; }
+  #menu { display: inline-block; flex: 0 0 auto; }
+  #state { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+  #menu-items { display: none; }
+  header[data-menu="open"] #menu-items { display: flex; flex-direction: column; gap: 6px; position: absolute; z-index: 8; top: 100%; right: 6px; min-width: 14rem; max-width: calc(100vw - 12px); padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
+  header[data-menu="open"] #menu-items > button { text-align: left; }
+  header[data-menu="open"] .text-size { display: flex; }
+  header[data-menu="open"] .text-size button { flex: 1 1 0; }
+  /* The keys: one line, and the rest behind "More". */
+  footer#keys { flex-wrap: wrap; overflow: visible; gap: 3px; padding: 4px; }
+  footer#keys > button { flex: 1 1 0; min-width: 0; padding: 6px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  footer#keys > button.wide { flex: 1.4 1 0; }
+  footer#keys > #keys-more { flex: 1.3 1 0; }
+  footer#keys > button.extra { display: none; }
+  footer#keys[data-more="true"] > button.extra:not([hidden]) { display: block; order: 10; flex: 1 1 22%; }
+  /* The extra keys start a line of their own. */
+  footer#keys[data-more="true"]::after { content: ""; order: 9; flex: 0 0 100%; height: 0; }
+  /* The row is as wide as the screen: its labels grow with the text only as far as they fit. */
+  footer#keys > button { font-size: min(.8125rem, 3.4vw); }
+  /* What is wrong with the machine: two lines at most, its buttons beside. */
+  #health-strip { flex-wrap: wrap; padding: 6px 8px; gap: 4px 6px; }
+  #health-text { flex-basis: 100%; -webkit-line-clamp: 2; }
+  /* Its buttons on one line. */
+  .health-actions { flex-wrap: nowrap; gap: 4px; min-width: 0; }
+  #health-strip .health-actions button { padding: 4px 7px; white-space: nowrap; }
+  #health-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .75rem; }
+  #health-strip button { min-height: 36px; padding: 4px 8px; font-size: .75rem; }
+  footer#keys > button[data-keys="backspace"] { display: none; }
+  footer#keys[data-more="true"] > button[data-keys="backspace"] { display: block; }
+  #keys-more { display: block; }
+  #mic, #auto { order: 0; flex: 1 1 0; padding-block: 6px; }
+  #mic { flex-basis: 0; padding-block: 6px; }
+  /* Short labels for two of them; the words stay for whoever reads them aloud. */
+  footer#keys > #kbd, footer#keys > #mic { font-size: 0; }
+  #kbd::before, #mic::before { content: attr(data-short); font-size: min(.8125rem, 3.4vw); }
+  footer button.careful { order: 10; }
+  /* Ready-made answers: when the tool asks, or when asked for. */
+  #room:not([data-asking]):has(#keys[data-more="false"]) #shortcuts { display: none; }
+}
+#words-lang { min-height: 40px; min-width: 12rem; max-width: 100%; font: .875rem var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; }
+#words-own { width: 100%; font: .8125rem ui-monospace, Menlo, Consolas, monospace; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 8px; }
+#words-all { white-space: pre-wrap; max-height: 16rem; overflow: auto; }
+
+/* WHO GETS WHAT and FLOWS (links.js). A link's colour says what it gives;
+   the colour of a box's mark says what it is. */
+:root {
+  --k-term: #f59e0b; --k-chat: #60a5fa; --k-both: #a78bfa; --k-read: #4ade80; --k-write: #fb7185; --k-use: #22d3ee;
+  --k-device: #7fb6e0; --k-device-bg: #172634; --k-conv: #e2b56a; --k-conv-bg: #2e2416; --k-asset: #84c99a; --k-asset-bg: #16291d; --k-pick: #fb923c;
+}
+:root[data-theme="light"] {
+  --k-term: #b45309; --k-chat: #2563eb; --k-both: #7c3aed; --k-read: #15803d; --k-write: #be123c; --k-use: #0e7490;
+  --k-device: #2f6f9f; --k-device-bg: #e6f0f7; --k-conv: #8a5a14; --k-conv-bg: #f8eedc; --k-asset: #3d7a4f; --k-asset-bg: #e4f2e8; --k-pick: #c2410c;
+}
+#links, #flows { gap: 8px; }
+#links .panel-top .row, #flows .panel-top .row { flex-wrap: nowrap; }
+.lk-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.lk-tabs button { border-radius: 999px; padding: 5px 13px; }
+.lk-tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
+.lk-switch { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: .8125rem; color: var(--ink2); cursor: pointer; }
+.lk-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .75rem; color: var(--ink2); }
+.lk-key { display: inline-flex; align-items: center; gap: 6px; }
+.lk-key i { display: inline-block; width: 22px; border-top: 3px solid currentColor; }
+#links .lk-legend:empty { display: none; }
+@media (max-width: 600px) { #links .lk-legend { margin: 0 0 10px; } .lk-key i { width: 9px; height: 9px; border: 0; border-radius: 50%; background: currentColor; } }
+.lk-key i.dash { border-top-style: dashed; }
+.lk-key-w { color: var(--ink2); }
+.lk-dim { color: var(--ink2); }
+.lk-pending-key { display: inline-block; width: 18px; height: 12px; border: 1.5px dashed var(--ink2); border-radius: 4px; }
+.lk-scroller { container-type: inline-size; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); flex: none; }
+/* One screen high, whatever the lists: each column scrolls on its own, so both ends of a link can be in sight. */
+.lk-board { position: relative; display: grid; gap: 0 clamp(56px, 10vw, 150px); padding: 0 14px 30px; height: clamp(320px, calc(100dvh - 250px), 900px); }
+.lk-board.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
+.lk-board.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.lk-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 0 18px 14px 0; margin-right: -18px; scrollbar-width: thin; position: relative; z-index: 2; }
+.lk-col h3 { position: sticky; top: 0; z-index: 3; margin: 0; padding: 10px 0 6px; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); background: var(--bg); }
+.lk-gap { height: 12px; flex: none; }
+.lk-node { position: relative; flex: none; display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); border-radius: 10px; padding: 7px 10px; background: var(--panel); cursor: pointer; user-select: none; min-width: 0; }
+.lk-node.pending { border-style: dashed; }
+.lk-ic { font: 600 .75rem ui-monospace, Menlo, monospace; width: 1.9em; height: 1.9em; border-radius: 6px; display: grid; place-items: center; flex: none; }
+.lk-node.lk-c-device .lk-ic { background: var(--k-device-bg); color: var(--k-device); }
+.lk-node.lk-c-conversation .lk-ic { background: var(--k-conv-bg); color: var(--k-conv); }
+.lk-node.lk-c-asset .lk-ic { background: var(--k-asset-bg); color: var(--k-asset); }
+.lk-tx { min-width: 0; display: flex; flex-direction: column; }
+.lk-nm { font-weight: 700; overflow-wrap: anywhere; line-height: 1.25; }
+.lk-sb { font-size: .75rem; color: var(--ink2); }
+@media (hover: hover) { .lk-node:hover { border-color: var(--ink2); } .lk-node.can:hover { border-color: var(--k-pick); } }
+.lk-node.picked { border-color: var(--k-pick); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-pick) 25%, transparent); }
+.lk-node.can { border-style: dashed; border-color: var(--ink2); }
+.lk-node.faded { opacity: .3; }
+.lk-cnt { margin-left: auto; flex: none; font: 700 .6875rem var(--sans); color: var(--ink2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 6px; display: none; }
+.lk-board.simple .lk-cnt { display: inline-block; }
+/* The dot to drag from: 28px to touch, drawn 14px. */
+.lk-handle { position: absolute; right: -14px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; cursor: crosshair; touch-action: none; display: grid; place-items: center; z-index: 4; }
+.lk-handle::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--panel); border: 2px solid var(--ink2); }
+.lk-handle:hover::after { border-color: var(--k-pick); background: var(--k-pick); }
+.lk-edge { position: absolute; z-index: 4; transform: translateX(-50%); font: 700 .6875rem/1 var(--sans); padding: 5px 10px; border-radius: 999px; background: var(--bar); color: var(--ink2); border: 1px solid var(--line); white-space: nowrap; }
+.lk-edge:hover { color: var(--ink); border-color: var(--ink2); }
+.lk-edge.up { transform: translateX(-100%); }
+/* Where the links of a box go, out of sight: named small, at the end of their hook. */
+.lk-hook { position: absolute; z-index: 3; transform: translateY(-50%); font: 600 .6875rem/1.2 var(--sans); padding: 2px 7px; border-radius: 999px; background: var(--bar); color: var(--ink2); border: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.lk-hook.in { transform: translate(-100%, -50%); }
+.lk-hook.inbox { transform: translate(-100%, -50%); z-index: 4; }
+.lk-start { display: flex; flex-direction: column; gap: 14px; }
+.lk-hook:hover { color: var(--ink); border-color: var(--ink2); }
+.lk-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
+svg.lk-links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; pointer-events: none; }
+svg.lk-links path { fill: none; stroke-width: 2.6; stroke-linecap: round; }
+svg.lk-links path.hit { stroke: transparent !important; stroke-width: 18; pointer-events: stroke; cursor: pointer; }
+svg.lk-links path.dash { stroke-dasharray: 7 5; }
+svg.lk-links path.later { stroke-dasharray: 2 4; opacity: .7; }
+svg.lk-links path.away { opacity: .35; stroke-dasharray: 2 5; }
+svg.lk-links path.dim { opacity: .12; }
+/* Many links: all drawn, thin and pale, gathered in trunks; those of the box touched in full over them. */
+svg.lk-links path.pale { stroke-width: 1.4; opacity: .5; }
+svg.lk-links path.pale.dim { opacity: .14; }
+svg.lk-links path.pale.dash { stroke-dasharray: 4 4; }
+svg.lk-links path.pale.hook { opacity: .55; }
+svg.lk-links path.temp { stroke: var(--k-pick); stroke-dasharray: 4 4; }
+/* At rest: no line, each box says how many links it has; a tapped box shows its own. */
+.lk-board.simple svg.lk-links path:not(.on):not(.temp), .lk-board.simple .lk-knob:not(.on), .lk-board.simple .lk-edge { display: none; }
+.lk-knob { position: absolute; z-index: 3; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid var(--bg); cursor: pointer; padding: 0; box-shadow: 0 0 0 1px var(--line); }
+.lk-knob.dim { opacity: .2; }
+.lk-pop { position: absolute; z-index: 6; width: min(330px, calc(100vw - 48px)); max-height: calc(100% - 16px); overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
+.lk-pop h4 { margin: 0 0 6px; font-size: .9375rem; overflow-wrap: anywhere; }
+.lk-pop h4 small { display: block; font-weight: 400; color: var(--ink2); font-size: .75rem; }
+.lk-pop label { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; cursor: pointer; }
+.lk-pop label small { display: block; color: var(--ink2); font-size: .75rem; }
+.lk-sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; margin: 4px 6px 0 0; }
+.lk-note { margin: 4px 0 0; font-size: .75rem; color: var(--ink2); }
+.lk-pop .lk-note[role="alert"] { color: var(--danger); }
+.lk-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+.lk-pop .lk-row { justify-content: space-between; margin-top: 8px; }
+.lk-ask { margin: 10px 0 0; font-weight: 600; }
+.lk-rm { color: var(--danger); }
+.lk-pop .auto-send { margin-top: 6px; }
+.lk-card { flex: none; max-height: 32vh; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bar); font-size: .8125rem; }
+.lk-card h3 { margin: 0 0 6px; font-size: .9375rem; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
+.lk-card h3 small { font-weight: 400; color: var(--ink2); }
+.lk-card-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
+.lk-card-actions button { border-radius: 999px; padding: 3px 11px; }
+.lk-card ul { margin: 0; padding-left: 1.1rem; }
+.lk-card li { margin: 2px 0; }
+.lk-via { color: var(--ink2); }
+.lk-none { color: var(--ink2); font-size: .8125rem; margin: 0; }
+/* On a phone: no drawing. A list, then one box and its links as rows. */
+.lk-phone { display: none; }
+@media (max-width: 600px) {
+  #links .lk-scroller, #links-hint, #links-card, #links-tabs, .map-bar .lk-switch { display: none !important; }
+  .lk-phone { display: block; }
+}
+.lk-kinds { display: flex; align-items: center; gap: 6px; margin: 4px 0 12px; }
+.lk-kinds button { flex: 1; border-radius: 999px; padding: 8px 4px; }
+.lk-kinds button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
+.lk-plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.lk-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font-weight: 400; background: var(--bar); border-radius: 12px; padding: 12px; }
+.lk-item.pending { border-style: dashed; }
+.lk-item .lk-tx { flex: 1; }
+.lk-dots { display: flex; gap: 3px; flex: none; }
+.lk-dots i { width: 9px; height: 9px; border-radius: 50%; display: block; }
+.lk-chev { color: var(--ink2); flex: none; font-size: 1.1rem; }
+/* The icons of the map: the chat's set (Lucide), drawn the same whatever the fonts. */
+.lk-ic .lk-svg { width: 1.05rem; height: 1.05rem; }
+.lk-chev .lk-svg { width: 1.1rem; height: 1.1rem; display: block; }
+.lk-hook, .lk-edge { display: inline-flex; align-items: center; gap: 3px; }
+.lk-arrow { width: 1em; height: 1em; flex: none; }
+.lk-bar { margin: 4px 0; }
+.lk-bar button { border-radius: 999px; }
+.lk-ptitle { margin: 6px 0 0; font-size: 1.25rem; overflow-wrap: anywhere; }
+.lk-phone h4 { margin: 16px 0 8px; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
+.lk-phone p.lk-sb { margin: 0 0 8px; }
+.lk-rows { display: flex; flex-direction: column; gap: 8px; }
+.lk-prow { background: var(--bar); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
+.lk-top { display: flex; align-items: center; gap: 8px; }
+.lk-top i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
+.lk-top b { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.lk-x { border: 0; background: none; color: var(--ink2); font-size: 1.3rem; line-height: 1; padding: 0 6px; }
+.lk-seg { display: flex; gap: 6px; }
+.lk-seg button { flex: 1; padding: 8px 4px; border-width: 1.5px; color: var(--ink2); background: var(--panel); }
+.lk-seg button[aria-pressed="true"] { border-color: currentColor; }
+.lk-add { width: 100%; margin-top: 12px; border: 1.5px dashed var(--line); background: none; border-radius: 12px; padding: 12px; }
+/* Flows. */
+.lk-files { gap: 8px; }
+.lk-tpick select { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; max-width: 100%; }
+.lk-tscroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
+.lk-tboard { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 150px); gap: 0 34px; padding: 16px 18px 20px; width: max-content; min-width: 100%; justify-content: center; }
+.lk-tcol { display: flex; flex-direction: column; justify-content: center; gap: 12px; position: relative; z-index: 2; }
+.lk-tcol h5 { margin: 0 0 2px; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); text-align: center; }
+.lk-tnode { display: block; border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--panel); text-align: left; font-weight: 400; }
+.lk-tnode b { display: block; overflow-wrap: anywhere; }
+.lk-tnode small { color: var(--ink2); font-size: .75rem; }
+.lk-tnode.lk-c-device { border-left: 4px solid var(--k-device); } .lk-tnode.lk-c-conversation { border-left: 4px solid var(--k-conv); } .lk-tnode.lk-c-asset { border-left: 4px solid var(--k-asset); }
+.lk-tnode.pending { border-style: dashed; }
+.lk-tnode.me { border-color: var(--k-pick); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-pick) 25%, transparent); }
+.lk-tboard svg.lk-links path { stroke-width: 2.2; }
+.lk-words { margin: 6px 0 0; font-size: .8125rem; }
+.lk-words summary { cursor: pointer; color: var(--ink2); }
+.lk-steps { margin: 6px 0 0; padding-left: 1.2rem; }
+.lk-steps ul { padding-left: 0; list-style: none; }
+.lk-steps li { margin: 3px 0; }
+.lk-step { display: block; font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); margin-top: 6px; }
+.lk-island { margin: 0 0 16px; }
+.lk-island h4 { margin: 0 0 6px; font-size: .9375rem; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
+.lk-island h4 small { font-weight: 400; color: var(--ink2); font-size: .75rem; }
+.lk-island h4 .lk-row { margin-left: auto; }
+.lk-island h4 input { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px; }
+.lk-alone { margin: 4px 0 0; font-size: .8125rem; color: var(--ink2); }
+@media (max-width: 600px) { .lk-tscroll { display: none; } .lk-words summary { display: none; } }
+/* An import, shown whole before anything is made. */
+.lk-preview { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--bar); display: flex; flex-direction: column; gap: 6px; }
+.lk-preview h3 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
+.lk-preview h3 small { display: block; font-weight: 400; color: var(--ink2); font-size: .75rem; }
+.lk-preview h4 { margin: 8px 0 0; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
+.lk-preview select, .lk-preview input:not([type]) { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px; }
+.lk-said { margin: 0; font-weight: 600; }
+.lk-plan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.lk-plan li { padding: 6px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
+.lk-plan li[data-status="refused"] { color: var(--ink2); }
+.lk-plan p { margin: 2px 0 0; font-size: .75rem; }
+.lk-plan .lk-row { margin-top: 4px; }
+.lk-tag { display: inline-block; font-size: .6875rem; border-radius: 999px; padding: 1px 8px; margin-right: 6px; border: 1px solid var(--line); color: var(--ink2); }
+.lk-tag.lk-c-device { color: var(--k-device); } .lk-tag.lk-c-conversation { color: var(--k-conv); } .lk-tag.lk-c-asset { color: var(--k-asset); }
+.lk-text { margin-top: 4px; }
+.lk-text small { color: var(--ink2); }
+.lk-text pre { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: .8125rem ui-monospace, Menlo, monospace; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; max-height: 14rem; overflow: auto; }
+.lk-plan pre { white-space: pre-wrap; overflow-wrap: anywhere; font: .75rem ui-monospace, Menlo, monospace; margin: 2px 0 0; }
+.lk-confirm { display: flex; gap: 6px; align-items: flex-start; margin-top: 4px; font-size: .75rem; }
+.lk-sticky { position: sticky; bottom: -14px; background: var(--bar); padding: 8px 0; }
+.lk-job { margin: 0; padding-left: 1.2rem; font-size: .8125rem; }
+.lk-job li[data-state="failed"] { color: var(--danger); }
+.lk-job li[data-state="skipped"] { color: var(--ink2); }
+.lk-job li[data-state="doing"]::marker { color: var(--brass); }
+/* Where the board is narrow (a phone across, a tablet beside the list), the three columns still fit: names only. */
+@container (max-width: 700px) {
+  .lk-board.three { gap: 0 40px; padding: 0 8px 30px; }
+  .lk-board.three .lk-node { padding: 5px 6px; gap: 0; flex-direction: column; align-items: flex-start; }
+  .lk-board.three .lk-ic, .lk-board.three .lk-sb { display: none; }
+  .lk-board.three .lk-node.lk-c-device { border-left: 4px solid var(--k-device); } .lk-board.three .lk-node.lk-c-conversation { border-left: 4px solid var(--k-conv); } .lk-board.three .lk-node.lk-c-asset { border-left: 4px solid var(--k-asset); }
+}
+
+.lk-shared { font-size: .75rem; font-weight: 600; color: var(--k-pick); border: 1px solid currentColor; border-radius: 999px; padding: 1px 8px; }
+.lk-check { margin: 0; padding-left: 1.1rem; font-size: .875rem; }
+.lk-check li[data-line="Refused"] b { color: var(--danger); }
+.lk-own { font-size: .6875rem; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--danger); border-radius: 999px; padding: 2px 8px; margin-right: 6px; }
+.lk-more summary { cursor: pointer; color: var(--ink2); margin-top: 6px; }
+
+/* ---------- the three places: Conversations, Access, Settings ---------- */
+#nav { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 10px; background: var(--panel); border-right: 1px solid var(--line); border-top: 1px solid var(--line); }
+#nav button { display: flex; align-items: center; gap: 10px; min-height: 40px; text-align: left; background: transparent; border-color: transparent; font-weight: 600; color: var(--ink2); }
+#nav button:hover { color: var(--ink); border-color: var(--line); }
+#nav button[aria-current="page"] { color: var(--ink); background: var(--bar); border-color: var(--line); box-shadow: inset 3px 0 0 var(--brass); }
+.nav-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+#nav button[aria-current="page"] .nav-ic { stroke: var(--brass); }
+/* On a wide screen the list above is the menu, always there (the « button shows it when folded): the bar holds only the places of the whole. A phone keeps it: there the list is a screen of its own. */
+@media (min-width: 701px) { #nav #nav-conversations { display: none; } }
+@media (max-width: 700px) {
+  /* A phone: a bar along the bottom, above the system's own strip; gone inside a conversation and while typing. */
+  #nav { grid-row: 2; flex-direction: row; gap: 0; padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0)); border-right: 0; }
+  /* The bar takes the system's strip at the bottom; where it is not shown, the page keeps it clear. */
+  html:has(#nav:not([hidden])):has(#app:is([data-view="list"], [data-place="access"], [data-place="settings"])) body { padding-bottom: 0; }
+  #nav button { flex: 1 1 0; flex-direction: column; gap: 2px; min-height: 52px; padding: 4px 2px; font-size: .75rem; text-align: center; justify-content: center; border-radius: 10px; }
+  #nav button[aria-current="page"] { box-shadow: none; background: transparent; border-color: transparent; color: var(--brass); }
+  #nav .nav-ic { width: 24px; height: 24px; }
+  #app[data-view="room"][data-place="conversations"] #nav { display: none; }
+  #app:has(input:not([type=checkbox]):not([type=radio]):not([type=file]):focus, textarea:not(.xterm-helper-textarea):focus) #nav { display: none; }
+  /* Access and Settings take the whole screen: the bar of the conversation behind them is not theirs. */
+  #app:is([data-place="access"], [data-place="settings"]) #room > :is(header, #health-strip, #signin-strip, #voice-line, #shortcuts, #keys) { display: none !important; }
+  #access-close, #settings-close { display: none; }
+}
+
+/* ---------- Access: one page, three tabs ---------- */
+#access { gap: 10px; }
+.access-top { gap: 8px; flex-wrap: wrap; }
+.access-top > b { font-size: 1.0625rem; }
+.access-files { margin-left: auto; flex-wrap: nowrap; gap: 6px; }
+/* Said where it is decided: next to Export, never in a tooltip only. */
+#export-note { font-size: .75rem; line-height: 1.25; max-width: 13.5em; text-align: right; margin-left: auto; }
+#export-note + .access-files { margin-left: 0; }
+.for-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border: 1px solid var(--brass); border-radius: 999px; background: rgba(210, 169, 78, .14); max-width: 100%; min-width: 0; }
+.for-badge b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.for-badge button { border: 0; background: none; padding: 2px 8px; min-height: 28px; font-size: 1rem; line-height: 1; border-radius: 999px; color: var(--ink2); }
+.for-badge button:hover { color: var(--ink); }
+#flows-said:empty { display: none; }
+/* Segmented: three tabs of one width. */
+.seg { display: flex; padding: 3px; gap: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); max-width: 32rem; flex: none; }
+.seg button { flex: 1 1 0; border: 0; background: transparent; border-radius: 7px; min-height: 36px; color: var(--ink2); }
+.seg button[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 1px 3px rgba(0, 0, 0, .25); }
+.pane { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
+#access-map { gap: 8px; }
+.map-mode { align-self: flex-start; }
+.map-mode button { min-height: 32px; padding: 4px 14px; }
+#access-map .lk-board { height: clamp(300px, calc(100dvh - 330px), 900px); }
+#sharing-top { gap: 8px; }
+#sharing-top b { font-size: 1rem; }
+.to-access { margin-top: 2px; }
+.to-access .hint { flex: 1 1 14rem; }
+@media (max-width: 700px) {
+  #access { padding: 10px 12px 16px; }
+  .seg { max-width: none; }
+  .seg button { min-height: 40px; }
+  .access-top > b { font-size: 1.25rem; }
+}
+
+/* Asset and device cards fold as the chapters of a conversation do. */
+.asset, .device.card { border: 1px solid var(--line); border-radius: 10px; background: var(--bar); padding: 0 8px 0 0; margin-top: 6px; gap: 0 8px; }
+.asset-head { position: relative; padding: 8px 6.5rem 8px 12px; border-radius: 10px; }
+.asset-head::after { content: "Expand"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: .75rem; font-weight: 600; color: var(--ink2); border: 1px solid var(--line); border-radius: 7px; padding: 3px 9px; }
+.asset-head[aria-expanded="true"]::after { content: "Collapse"; }
+.asset-head b::before { content: none; }
+.asset > .given-row.for-row { flex-basis: 100%; margin: 0 0 0 12px; padding: 8px 0 10px; border-top: 1px dashed var(--line); }
+.asset-inside { background: var(--panel); border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; padding: 8px 12px 10px; margin-right: -8px; }
+.asset > button:not(.asset-head) { margin: 6px 0; }
+.git-key { padding: 8px 12px; }
+.device.card { display: block; padding: 0; }
+.device.card .device-head { padding: 10px 12px; min-height: 48px; }
+.device.card .device-head b { font-size: 1rem; flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
+.device-sub { flex: 1 1 12rem; font-size: .75rem; }
+.device.card .device-head small.device-count { color: var(--brass); }
+.card-fold { margin-left: auto; min-height: 32px !important; padding: 3px 9px; font-size: .75rem; color: var(--ink2); background: transparent; }
+.device.card .card-body { background: var(--panel); border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; padding: 4px 12px 10px; display: flex; flex-direction: column; gap: 6px; }
+.device.card .given-row { padding-left: 0; }
+.device-acts { padding-top: 6px; }
+
+/* On a phone, a box of the map touched: its links rise from the bottom. */
+.lk-sheet-wrap { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; background: rgba(8, 11, 15, .55); }
+.lk-sheet { width: 100%; max-height: 75dvh; overflow-y: auto; background: var(--panel); border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0)); display: flex; flex-direction: column; gap: 10px; box-shadow: 0 -8px 24px rgba(0, 0, 0, .35); }
+.lk-sheet::before { content: ""; align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin-bottom: 4px; }
+.lk-sheet-top { display: flex; align-items: center; gap: 10px; }
+.lk-sheet-top .lk-tx { flex: 1; }
+.lk-sheet.lk-c-device .lk-ic { background: var(--k-device-bg); color: var(--k-device); }
+.lk-sheet.lk-c-conversation .lk-ic { background: var(--k-conv-bg); color: var(--k-conv); }
+.lk-sheet.lk-c-asset .lk-ic { background: var(--k-asset-bg); color: var(--k-asset); }
+.lk-sheet-links { margin: 0; padding-left: 1.1rem; font-size: .875rem; display: flex; flex-direction: column; gap: 4px; }
+.lk-sheet-acts button { flex: 1 1 0; min-height: 44px; }
+
+/* The map's own bar: Map or Flows, then (the map only) what it shows. */
+.map-bar { gap: 8px 14px; }
+#access-map:has(#flows:not([hidden])) :is(#links-tabs, .map-bar .lk-switch) { display: none; }
+.lk-show { margin-right: 2px; }
+.lk-tabs button { min-height: 32px; padding: 4px 12px; }
+.seg button[aria-selected="true"] { font-weight: 700; background: var(--button, #222c38); box-shadow: inset 0 -2px 0 var(--brass), 0 0 0 1px var(--line); }
+.for-row > span:first-child { color: var(--ink2); font-size: .8125rem; }
+.lk-kinds button { min-height: 36px; padding: 4px; }
+@media (max-width: 700px) {
+  .access-top .access-files { order: 2; margin-left: auto; }
+  #export-note { order: 4; flex: 1 0 100%; max-width: none; margin: -4px 0 0; }
+  .access-top .for-badge { order: 3; }
+}
+/* On a light screen, brass words are too pale: the place shown is said in a darker brass. */
+:root[data-theme="light"] #nav button[aria-current="page"] { color: #8a5d00; }
+:root[data-theme="light"] #nav button[aria-current="page"] .nav-ic { stroke: #8a5d00; }
+/* A device's card: its name and the fold on the first line, what it has and when it was seen under them. */
+.device.card .device-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; }
+.device.card .device-head > :first-child { grid-column: 1; grid-row: 1; justify-self: start; max-width: 100%; }
+.device.card .card-fold { grid-column: 2; grid-row: 1; }
+.device.card .device-sub { grid-column: 1 / -1; }
+/* Access or Settings open over a conversation on a wide screen: its keys keep their room (the terminal is not
+   resized under the page) but cannot be touched by mistake. With no conversation, its bar says nothing: gone. */
+#app:is([data-place="access"], [data-place="settings"]) #room > :is(#keys, #shortcuts) { visibility: hidden; }
+#app[data-current=""]:is([data-place="access"], [data-place="settings"]) #room > header { display: none; }
+
+/* The form that makes a conversation keeps its height, and the conversations
+   under it keep theirs: on a phone the whole column scrolls (seen: rows
+   squashed under the open form). */
+#create { flex: 0 0 auto; }
+.item { flex-shrink: 0; }
+#list:has(> #create:not([hidden])) #items { flex: 0 0 auto; overflow: visible; }
+
+/* ---------- Files: list or icons, changes by hand, uploads, the editor ---------- */
+#files { --t: var(--ink2); }
+.files-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
+.files-bar .path { flex: 1 1 200px; min-width: 0; }
+.path button { overflow-wrap: anywhere; text-align: left; }
+#files-views button { padding: 5px 12px; font-weight: 600; }
+#files-actions { gap: 6px; }
+#files-status { flex-basis: 100%; }
+#files-status:empty { display: none; }
+.files-card { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--bar); border: 1px solid var(--line); border-radius: 10px; }
+.files-card .sp { flex: 1; }
+.files-card b { overflow-wrap: anywhere; }
+#files-ask, #files-progress { position: sticky; top: 0; z-index: 2; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
+#files-ask { border-color: var(--brass); }
+#files-name input { font: .875rem var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; min-width: 0; width: min(100%, 420px); }
+#files-name label { font-size: .75rem; color: var(--ink2); }
+.bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
+.bar > span { display: block; height: 100%; width: 0; background: var(--brass); transition: width .2s; }
+@media (prefers-reduced-motion: reduce) { .bar > span { transition: none; } }
+
+/* One entry: its row (or tile), its "..." button, and its actions when opened. */
+.entry { position: relative; display: flex; flex-wrap: wrap; align-items: center; min-width: 0; }
+#files-rows[data-view="list"] .entry { border-top: 1px solid var(--line); }
+#files-rows[data-view="list"] .entry .file { flex: 1 1 0; border-top: 0; }
+.entry .more { flex: 0 0 auto; min-width: 40px; padding: 4px 8px; font-size: 1.125rem; line-height: 1; background: transparent; border-color: transparent; color: var(--ink2); }
+.entry .more:hover, .entry .more[aria-expanded="true"] { border-color: var(--line); background: var(--button, #222c38); color: var(--ink); }
+.entry .acts { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 0 10px 44px; }
+.entry .acts label { font-size: .75rem; color: var(--ink2); flex-basis: 100%; }
+.entry .acts select { font: .875rem var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; min-height: 36px; max-width: 100%; }
+.entry .acts .sure { margin: 0; flex-basis: 100%; color: var(--ink); font-weight: 600; }
+.entry .acts .hint { flex-basis: 100%; }
+.entry.dragging { opacity: .45; }
+.drop-on, .path button.drop-on { outline: 2px dashed var(--brass); outline-offset: -2px; background: rgba(210, 169, 78, .16) !important; }
+#files-rows > form { flex-basis: 100%; }
+
+/* ICONS: a grid of tiles; a picture is its own thumbnail. */
+#files-rows[data-view="icons"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; align-items: start; }
+#files-rows[data-view="icons"] > form { grid-column: 1 / -1; }
+#files-rows[data-view="icons"] .entry { display: block; }
+#files-rows[data-view="icons"] .entry.open { z-index: 3; }
+#files-rows[data-view="icons"] .entry .acts { position: absolute; top: calc(100% - 4px); left: 0; z-index: 3; width: 240px; padding: 8px; flex-direction: column; align-items: stretch; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
+#files-rows[data-view="icons"] .entry .acts.toward-left { left: auto; right: 0; }
+#files-rows[data-view="icons"] .entry .acts button { text-align: left; }
+/* A mouse: the "..." of a tile shows on the tile pointed at, or when it has the focus. */
+@media (pointer: fine) {
+  #files-rows[data-view="icons"] .entry:not(:hover):not(:focus-within):not(.open) > .more { opacity: 0; }
+}
+#files-rows[data-view="icons"] .file { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 8px 6px; border: 1px solid transparent; border-radius: 10px; text-align: center; min-height: 0; }
+#files-rows[data-view="icons"] .file:hover, #files-rows[data-view="icons"] .file:focus-visible { border-color: var(--line); background: var(--bar); }
+#files-rows[data-view="icons"] .look { display: flex; align-items: center; justify-content: center; width: 100%; height: 92px; border-radius: 8px; overflow: hidden; }
+#files-rows[data-view="icons"] .look img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; background: repeating-conic-gradient(var(--bar) 0 25%, var(--panel) 0 50%) 0 0 / 14px 14px; }
+#files-rows[data-view="icons"] .label { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: .8125rem; line-height: 1.3; width: 100%; }
+#files-rows[data-view="icons"] .file small { font-size: .6875rem; }
+#files-rows[data-view="icons"] .entry > .more { position: absolute; top: 4px; right: 4px; min-width: 34px; min-height: 34px; padding: 2px 6px; background: var(--panel); border-color: var(--line); }
+.icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 68px; color: var(--t); }
+.file[data-folder="true"] .icon { width: 72px; height: 60px; }
+.icon svg { width: 100%; height: 100%; overflow: visible; }
+.icon .body { fill: color-mix(in srgb, currentColor 16%, var(--panel)); stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
+.icon .line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
+.icon .ext { position: absolute; left: 0; right: 0; bottom: 12px; font: 700 .625rem var(--sans); letter-spacing: .04em; text-align: center; color: currentColor; }
+/* Drawn with the chat's icons (Lucide): the icon, its kind written under it. */
+.icon[data-drawn="lucide"] { flex-direction: column; gap: 2px; }
+.icon[data-drawn="lucide"] svg { width: 46px; height: 46px; stroke-width: 1.5; fill: color-mix(in srgb, currentColor 10%, transparent); }
+.file[data-folder="true"] .icon[data-drawn="lucide"] svg { width: 60px; height: 52px; }
+.icon[data-drawn="lucide"] .ext { position: static; }
+.icon.file-ic { width: 22px; height: 22px; flex: none; }
+.icon.file-ic svg { width: 22px; height: 22px; stroke-width: 1.8; fill: none; }
+.icon[data-type="folder"] { color: var(--brass); }
+.icon[data-type="image"] { color: #4fa3e0; }
+.icon[data-type="pdf"] { color: #e5605a; }
+.icon[data-type="code"] { color: #9a86f0; }
+.icon[data-type="sheet"] { color: #3fb27f; }
+.icon[data-type="doc"] { color: #5b8ff0; }
+.icon[data-type="archive"] { color: #c9a227; }
+.icon[data-type="audio"] { color: #de7fb7; }
+.icon[data-type="video"] { color: #e08a4f; }
+:root[data-theme="light"] .icon[data-type="image"] { color: #1f6fb2; }
+:root[data-theme="light"] .icon[data-type="pdf"] { color: #b3261e; }
+:root[data-theme="light"] .icon[data-type="code"] { color: #6247c9; }
+:root[data-theme="light"] .icon[data-type="sheet"] { color: #1f7a5a; }
+:root[data-theme="light"] .icon[data-type="doc"] { color: #2a5fc9; }
+:root[data-theme="light"] .icon[data-type="archive"] { color: #8a6d0b; }
+:root[data-theme="light"] .icon[data-type="audio"] { color: #a83c7a; }
+:root[data-theme="light"] .icon[data-type="video"] { color: #a3581a; }
+:root[data-theme="light"] .icon[data-type="folder"] { color: #9a7220; }
+
+/* Dropped from the computer: the whole sheet says where it goes. */
+#files-drop { position: absolute; left: 8px; right: 8px; z-index: 4; display: flex; align-items: center; justify-content: center; padding: 20px; border: 3px dashed var(--brass); border-radius: 14px; background: color-mix(in srgb, var(--panel) 82%, transparent); pointer-events: none; }
+#files-drop[data-allowed="false"] { border-color: var(--ink2); }
+#files-drop p { margin: 0; font-size: 1.125rem; font-weight: 600; text-align: center; overflow-wrap: anywhere; max-width: 32ch; }
+
+/* The editor: the text, its lines, Save and Cancel. */
+#preview-body:has(> .editor) { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
+.editor { flex: 1 1 auto; min-height: 200px; width: 100%; resize: none; font: .8125rem/1.5 ui-monospace, Menlo, Consolas, monospace; tab-size: 4; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; white-space: pre; overflow: auto; }
+.editor:focus-visible { outline: 2px solid var(--brass); outline-offset: 0; }
+.edit-bar { gap: 8px; }
+.edit-bar small { flex: 1 1 160px; }
+.edit-ask { border-color: var(--warn); }
+@media (max-width: 700px) {
+  #files-rows[data-view="icons"] { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }
+  #files-rows[data-view="icons"] .look { height: 78px; }
+  #files-rows[data-view="icons"] .entry .acts { width: min(240px, calc(100vw - 40px)); }
+  .entry .acts { padding-left: 0; }
+  .entry .more { min-height: 44px; min-width: 44px; }
+  #files-actions { gap: 6px 6px; }
+}
+
+.entry .acts .acts-name { display: none; overflow-wrap: anywhere; font-size: .8125rem; }
+#files-rows[data-view="icons"] .entry .acts .acts-name { display: block; padding: 2px 4px 4px; }
+#files-actions .short { display: none; }
+@media (max-width: 700px) {
+  /* One row of short labels on a phone: the files come first. */
+  #files-actions button { flex: 1 1 0; min-width: 0; padding-inline: 6px; }
+  #files-actions .long { display: none; }
+  #files-actions .short { display: inline; }
+}
+.diff { margin: 0; max-height: 40vh; overflow: auto; font: .75rem/1.45 ui-monospace, Menlo, Consolas, monospace; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
+.diff span { display: block; padding: 0 10px; }
+.diff .add { background: color-mix(in srgb, var(--ok) 18%, transparent); }
+.diff .del { background: color-mix(in srgb, var(--danger) 18%, transparent); }
+.diff .gap { color: var(--ink2); }
+/* While a text is edited, Save is the main action: Download steps back. */
+/* What is being edited is not what was read: no copy of the old text then. */
+#viewer[data-editing="true"] #preview-copy { display: none; }
+#viewer[data-editing="true"] #preview-download { background: var(--button, #222c38); color: var(--ink); border: 1px solid var(--line); }
+/* Read-only said plainly, where the buttons would be. */
+#files-readonly { padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; background: var(--bar); color: var(--ink); font-size: .8125rem; }
+/* What its tool is told about where it is: one quiet line, the text behind "see". */
+#guide-box { margin: 8px 0 4px; }
+.guide-line { margin: 0; color: var(--ink2); font-size: .8125rem; }
+button.inline { background: none; border: 0; padding: 4px 2px; min-height: 0; color: var(--ink); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
+button.inline:hover { color: var(--brass); }
+#guide-shown { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
+#guide-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: .75rem/1.5 ui-monospace, Menlo, Consolas, monospace; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; max-height: 22rem; overflow: auto; }
+#guide-shown label { font-size: .75rem; color: var(--ink2); }
+#guide-lines { width: 100%; min-height: 4.5rem; resize: vertical; font: inherit; padding: .5rem .6rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
+#guide-said:empty { display: none; }
+
+/* THIS SERVER (Settings): a meter per resource, the reserve marked on it,
+   what takes the room under it. Status colours carry a word too ("Short"). */
+#settings-server, #server-disks { display: grid; gap: 14px; outline: none; }
+.server-block { display: grid; gap: 6px; }
+.server-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
+.server-figures { color: var(--ink2); font-size: .8125rem; margin-left: auto; font-variant-numeric: tabular-nums; }
+.server-state { font-size: .75rem; font-weight: 700; color: var(--warn); border: 1px solid currentColor; border-radius: 999px; padding: 0 7px; }
+.server-meter { position: relative; height: 10px; border-radius: 5px; background: var(--bar); border: 1px solid var(--line); overflow: hidden; }
+.server-meter .fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--ok); }
+.server-meter[data-level="warn"] .fill { background: var(--warn); }
+.server-meter[data-level="bad"] .fill { background: var(--danger); }
+.server-meter .zone { position: absolute; top: 0; bottom: 0; right: 0; background: repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--ink2) 45%, transparent) 3px 5px); }
+.server-meter .mark { position: absolute; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; background: var(--ink); opacity: .7; }
+.server-note { margin: 0; font-size: .75rem; color: var(--ink2); }
+.server-parts { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; margin: 2px 0 0; font-size: .8125rem; max-width: 30rem; }
+.server-parts dt { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
+.server-parts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.server-parts .sub { font-weight: normal; color: var(--ink2); }
+.server-parts dt.sub { padding-left: 14px; }
+.reserve-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
+.reserve-row label { display: inline-flex; align-items: center; gap: 6px; }
+.reserve-row input { width: 5.5em; min-height: 40px; font: .875rem var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; }
+
+/* UPDATES (Settings): the version, one line of state, three settings, the way back. */
+#updates { display: grid; gap: 10px; outline: none; }
+.updates-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
+#updates-state { color: var(--ink2); font-size: .8125rem; flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; }
+.updates-news { margin: 0; font-size: .8125rem; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--warn); background: var(--bar); overflow-wrap: anywhere; }
+.updates-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 14px; max-width: 30rem; }
+.updates-grid select, .updates-window input { min-height: 40px; font: .875rem var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; max-width: 100%; }
+.updates-window { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--ink2); font-size: .8125rem; }
+#updates-back { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+#updates-back .hint { margin: 0; }
+.updates-history { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; font-size: .8125rem; }
+.updates-history li { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; }
+.updates-history time { color: var(--ink2); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.updates-history small { grid-column: 2; color: var(--ink2); overflow-wrap: anywhere; }
+.updates-history [data-result="rolled-back"], .updates-history [data-result="failed"] { color: var(--danger); }
+
+/* The small gauge at the bottom of the list, only when the server is short of room. */
+#server-gauge { flex: 0 0 auto; cursor: pointer; display: grid; gap: 4px; width: 100%; padding: 8px 10px; text-align: left; font-size: .75rem; background: var(--bar); border: 1px solid var(--warn); border-radius: 8px; color: var(--ink); }
+#server-gauge .gauge-title { font-weight: 700; color: var(--warn); }
+#server-gauge .gauge-line { display: grid; grid-template-columns: 4.2em 1fr auto; align-items: center; gap: 8px; }
+#server-gauge .gauge-bar { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink2) 35%, var(--panel)); overflow: hidden; }
+#server-gauge .gauge-more { color: var(--ink2); font-weight: 600; }
+#server-gauge:hover .gauge-more { color: var(--ink); }
+#server-gauge .gauge-bar > span { display: block; height: 100%; background: var(--ok); }
+#server-gauge [data-level="warn"] .gauge-bar > span { background: var(--warn); }
+#server-gauge [data-level="bad"] .gauge-bar > span { background: var(--danger); }
+#server-gauge .gauge-n { color: var(--ink2); font-variant-numeric: tabular-nums; white-space: nowrap; }
+#server-gauge [data-level="ok"] .gauge-word { color: var(--ink2); }