@lovek4d/kickflip 0.0.0-stage → 0.1.0

package/board/public/style.css

@@ -0,0 +1,570 @@
+* { box-sizing: border-box; }
+html { -webkit-text-size-adjust: 100%; }
+/* clip, not hidden: hidden makes body a scroll container and breaks the sticky header. */
+body { overflow-x: clip; }
+/* app-core.js steady scrolls the board after a repaint; the browser's own scroll anchoring would correct the same shift a second time. */
+html:has(.view-board) { overflow-anchor: none; }
+body { margin: 0; background: var(--bg); color: var(--text);
+  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; }
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+button { font: inherit; color: inherit; cursor: pointer; border: 1px solid var(--line); background: var(--panel);
+  border-radius: 7px; padding: 6px 10px; }
+button:disabled { opacity: .5; cursor: default; }
+button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
+a.button { display: inline-block; border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; background: var(--panel); color: var(--text); text-decoration: none; }
+/* resolves: the button that clears a card's Action needed (board/domain.mjs resolvedBy), in that badge's notice tone. */
+:is(a, button).resolves, button.build { border-color: var(--color-notice); background: var(--color-notice); color: #1c1407; }
+button.ghost { border-color: transparent; background: transparent; font-size: 18px; padding: 2px 8px; }
+textarea, input { font: inherit; color: inherit; background: var(--panel); border: 1px solid var(--line);
+  border-radius: 8px; padding: 8px 10px; width: 100%; resize: vertical; }
+textarea:focus, input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
+.muted { color: var(--muted); }
+.small { font-size: 12px; }
+.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
+
+.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
+  padding: max(10px, env(safe-area-inset-top)) 16px 10px; background: color-mix(in srgb, var(--bg) 88%, transparent);
+  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
+.brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
+.brand :is(h1, h2) { font-size: 16px; margin: 0; }
+.nav { display: flex; align-items: center; gap: 6px; }
+.pill { border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 12px; color: var(--text); }
+.pill.hot { background: var(--accent); border-color: var(--accent); color: #fff; }
+
+main { max-width: 860px; margin: 0 auto; padding: 12px 16px 80px; }
+
+.waiting { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
+  border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
+.waiting h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 6px; color: var(--accent); }
+.waiting ul { margin: 0; padding-left: 18px; }
+.waiting li { margin: 3px 0; }
+.waiting li.prompt { list-style: none; margin: 6px 0 10px -18px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
+.prompt .prompt-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
+.prompt .prompt-head .small { overflow-wrap: anywhere; }
+.prompt p { margin: 6px 0; }
+.prompt .prompt-detail { margin: 6px 0; padding: 6px 8px; background: var(--chip); border-radius: 6px; font-size: 12.5px;
+  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 10em; overflow: auto; }
+.prompt .prompt-options { display: flex; flex-direction: column; gap: 6px; }
+.prompt .prompt-options button { display: grid; gap: 2px; text-align: left; }
+.prompt .prompt-options button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
+.prompt .prompt-options .lbl { font-weight: 600; }
+.prompt .prompt-options .det { color: var(--muted); font-size: 13px; }
+.prompt .prompt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
+.prompt button.deny { color: var(--color-danger); }
+.prompt .prompt-rule { margin: 6px 0 0; }
+
+.lane { margin-top: 14px; }
+.lane .list { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; }
+.lane .empty { padding: 10px 12px; color: var(--muted); }
+
+.item { border-top: 1px solid var(--line); }
+.item:first-child { border-top: 0; }
+.item > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 18px 1fr auto; gap: 8px;
+  align-items: center; padding: 9px 12px; }
+.item > summary::-webkit-details-marker { display: none; }
+.item > summary:hover { background: color-mix(in srgb, var(--chip) 60%, transparent); }
+.title-wrap { min-width: 0; }
+.title { overflow-wrap: anywhere; }
+.sub { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
+.meta { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
+.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--chip); border-radius: 6px;
+  padding: 1px 7px; font-size: 12px; white-space: nowrap; color: var(--text); }
+button.chip { border: 0; }
+.chip.tone-quiet { color: var(--color-quiet); } .chip.tone-normal { color: var(--color-info); } .chip.tone-notice { color: var(--color-notice); }
+.chip.tone-danger { color: var(--color-danger); } .chip.tone-ready { color: var(--color-success); }
+/* Action needed keeps the notice orange; unread takes the accent so the two never read alike. */
+.chip.unread { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
+.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--color-quiet); }
+.dot.pass { background: var(--color-success); } .dot.pending { background: var(--color-notice); } .dot.fail { background: var(--color-danger); }
+
+.status { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--color-quiet); display: inline-block; position: relative; }
+.status.progress { border-color: var(--color-notice); background: conic-gradient(var(--color-notice) 0 50%, transparent 50% 100%); }
+.status.review { border-color: var(--color-success); background: conic-gradient(var(--color-success) 0 75%, transparent 75% 100%); }
+.status.todo { border-style: dashed; }
+.sub.agent { color: var(--color-notice); }
+.sub.next { color: var(--color-info); }
+.toast-stack { position: fixed; left: 50%; bottom: calc(var(--app-bottom, 0px) + 16px + env(safe-area-inset-bottom));
+  width: min(520px, calc(100vw - 32px)); height: 0; transform: translateX(-50%); z-index: 25; pointer-events: none; }
+.toast-row { position: absolute; top: 0; left: 0; width: 100%; display: flex; justify-content: center;
+  transition: transform 200ms ease; pointer-events: none; }
+.toast { background: var(--text); color: var(--bg); border-radius: 10px; padding: 8px 14px; font-size: 14px;
+  width: max-content; max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; cursor: pointer; pointer-events: auto;
+  box-shadow: 0 4px 16px rgba(0,0,0,.2); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
+.toast:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+@media (prefers-reduced-motion: reduce) { .toast-row { transition: none; } }
+.status.done { border-color: var(--color-info); background: var(--color-info); }
+
+.detail { padding: 4px 12px 14px 38px; }
+.grid { display: grid; grid-template-columns: 110px 1fr; gap: 4px 10px; font-size: 13px; margin: 6px 0 10px; }
+.grid dt { color: var(--muted); }
+.grid dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
+.external-links-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.grid .external-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 0; }
+.external-link { white-space: nowrap; }
+.external-separator { color: var(--muted); white-space: pre; }
+.external-links a.resolves { background: transparent; border: 0; color: var(--color-notice); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
+.external-links .install.tone-notice { color: var(--color-notice); }
+.external-links .install.tone-quiet { color: var(--color-quiet); }
+.external-links [aria-disabled="true"] { color: var(--muted); }
+.actions { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
+.action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+
+.thread { border-top: 1px dashed var(--line); padding-top: 8px; }
+.msg { margin: 8px 0; padding: 7px 10px; border-radius: 10px; max-width: 100%; }
+.msg.claude { background: var(--claude); }
+.msg.love { background: var(--love); }
+.msg .who { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
+.msg .body { white-space: pre-wrap; overflow-wrap: anywhere; }
+.msg .reply { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
+.thread form { margin-top: 8px; }
+.thread-more { display: block; margin: -2px 0 2px -2px; padding: 8px 12px; background: none; border: 0; border-radius: 8px;
+  color: var(--accent); font-size: 12.5px; font-weight: 500; text-align: left; }
+.thread-more:hover { text-decoration: underline; }
+.thread-more:active { background: var(--accent-soft); }
+.thread-more:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.thread-more .n { color: var(--muted); font-weight: 400; }
+
+@media (max-width: 560px) {
+  .item > summary { grid-template-columns: 16px 1fr; }
+  .item > summary .meta { grid-column: 2; flex-wrap: wrap; justify-content: flex-start; }
+  .detail { padding-left: 12px; }
+  .grid { grid-template-columns: 92px 1fr; }
+}
+.calls ul { margin: 4px 0 8px; padding-left: 18px; font-size: 13px; }
+button.link { background: none; border: 0; color: var(--accent); padding: 8px 12px; font-size: 13px; cursor: pointer; }
+.waves { display: grid; gap: 6px; margin-top: 4px; }
+.wave { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-align: left; background: var(--panel);
+  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; color: var(--text); }
+.wave.on { border-color: var(--accent); background: var(--accent-soft); }
+.wave-name { font-weight: 600; font-size: 13px; }
+.wave .bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
+.wave .bar span { display: block; height: 100%; background: var(--color-success); }
+.nav a.icon { display: inline-flex; align-items: center; padding: 4px; color: var(--muted); }
+.nav a.icon:hover { color: var(--text); }
+.refresh { display: inline-flex; align-items: center; gap: 2px; line-height: 1.3; min-width: 0; }
+.refresh #refresh { padding: 4px; margin-left: -4px; flex: none; }
+.refresh #status { font-size: 12px; min-width: 0; }
+.refresh .late { color: var(--color-notice); font-weight: 600; }
+.lane-github { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--muted); text-align: right; }
+.lane-github .late { color: var(--color-notice); }
+.msg.other { background: transparent; border: 1px solid var(--line); }
+.status.stale { border-color: var(--color-danger); background: conic-gradient(var(--color-danger) 0 75%, transparent 75% 100%); }
+.msg .reply, .msg .small, .rep, .sent { overflow-wrap: anywhere; }
+code { overflow-wrap: anywhere; }
+/* iOS Safari zooms the page when a field under 16px takes focus, which shifts the page width. */
+@media (pointer: coarse) { textarea, input, select { font-size: 16px; } }
+
+/* Attachments */
+.attach { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
+  border-radius: 8px; color: var(--muted); cursor: pointer; flex: none; overflow: hidden; }
+.attach:hover, .attach:focus-within { color: var(--text); background: var(--chip); }
+/* A file input draws its "Choose File" text at the 16px coarse-pointer size, wider than the button; iOS Safari widens the page to fit it. */
+.attach input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; font-size: 0; }
+.row > .attach + .muted { flex: 1; min-width: 0; }
+/* The ⌘↵ / Ctrl+↵ hint left of Send: only where there is a keyboard to press it on. */
+.send-hint { display: none; color: var(--muted); font-size: 12px; white-space: nowrap; }
+@media (hover: hover) and (pointer: fine) { .send-hint { display: inline; } }
+.pending-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
+.pending-files:empty { display: none; }
+.pfile { position: relative; display: inline-flex; flex-direction: column; justify-content: center; width: 64px; height: 64px;
+  border: 1px solid var(--line); border-radius: 8px; background: var(--chip); overflow: hidden; font-size: 11px; }
+.pfile img { width: 100%; height: 100%; object-fit: cover; }
+.pfile .pname { padding: 4px 6px; overflow-wrap: anywhere; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
+.pfile.uploading img, .pfile.uploading .pname { opacity: .55; }
+.pfile .pbar { position: absolute; left: 4px; right: 4px; bottom: 4px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--panel) 70%, transparent); }
+.pfile .pbar span { display: block; height: 100%; border-radius: 2px; background: var(--color-info); transition: width .2s; }
+.pfile.error { border-color: var(--color-danger); }
+.pfile .perr { position: absolute; left: 0; right: 0; bottom: 0; background: var(--color-danger); color: #fff; font-size: 10px; text-align: center; padding: 1px 2px; }
+.pfile .unattach { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
+  background: rgba(0,0,0,.6); color: #fff; font-size: 11px; line-height: 22px; }
+.files { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin-top: 6px; }
+.file-thumb { display: block; width: 96px; height: 96px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--chip); }
+.file-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.file-link { display: inline-flex; align-items: center; max-width: 100%; padding: 3px 8px; border-radius: 6px; background: var(--chip);
+  font-size: 13px; overflow-wrap: anywhere; }
+.file-link::before { content: "📎"; margin-right: 4px; }
+.msg .body:empty { display: none; }
+.note-tools { display: flex; align-items: flex-start; gap: 6px; }
+.note-tools .pending-files { flex: 1; margin-top: 4px; }
+.note-tools .attach { margin-left: auto; margin-top: 2px; }
+
+/* Compose button and sheet */
+main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
+.fab { position: fixed; z-index: 6; right: calc(16px + env(safe-area-inset-right)); bottom: calc(var(--app-bottom, 0px) + 16px + env(safe-area-inset-bottom));
+  width: 56px; height: 56px; padding: 0; border-radius: 50%; border: 0; background: var(--accent); color: #fff;
+  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
+.fab:active { transform: scale(.96); }
+.view-board .toast-stack { bottom: calc(var(--app-bottom, 0px) + 80px + env(safe-area-inset-bottom)); }
+/* A phone sheet pads its content above the keyboard (--kb, dialogs.js fitSheet) and stays on the screen's bottom
+   edge while the keyboard covers the bar: iOS reports its height late, so moving the sheet up leaves a strip below. */
+.sheet { position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 560px;
+  max-height: calc(var(--vh, 100dvh) + var(--kb, 0px) - env(safe-area-inset-top) - 12px); overflow-y: auto; overscroll-behavior: contain;
+  padding: 0 0 var(--kb, 0px); border: 1px solid var(--line); border-bottom: 0; border-radius: 16px 16px 0 0; background: var(--panel); color: var(--text);
+  box-shadow: 0 -8px 30px rgba(0,0,0,.18); }
+/* On phones, iOS scrolls the page under a modal dialog, and a drag on the dim area pans the view and Safari's toolbar
+   even when the page can't scroll; either moves a sheet pinned to the bottom and shows the board below it. */
+@media (max-width: 899px) {
+  html:has(dialog:modal) { overflow: hidden; }
+}
+.sheet::backdrop { background: rgba(0,0,0,.35); touch-action: none; }
+/* A phone sheet sits above the bottom bar, which already pads the safe area (--app-bottom). */
+.sheet form { padding: 10px 16px max(12px, calc(env(safe-area-inset-bottom) - var(--app-bottom, 0px))); }
+/* A sheet's last row of buttons stays in view at the foot of its scrolling content. Sticking stops at the scroll
+   area's bottom padding, so the shadow covers what scrolls through that padding. */
+.sheet-actions { position: sticky; bottom: 0; z-index: 1; padding-top: 8px; background: var(--panel); box-shadow: 0 40px 0 var(--panel); }
+.sheet.kb form { padding-bottom: 10px; }
+.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
+.sheet-head h2 { font-size: 15px; margin: 0; }
+.sheet textarea { resize: none; min-height: 96px; }
+.sheet[open] { animation: sheet-in .22s ease-out; }
+.sheet[open]::backdrop { animation: fade-in .22s ease-out; }
+.sheet.closing { animation: sheet-out .18s ease-in forwards; }
+.sheet.closing::backdrop { animation: fade-in .18s ease-in reverse forwards; }
+@media (max-width: 699px) {
+  /* iOS's reported bottom edge can sit above the visible bottom; the form scrolls so the dialog can paint past it. */
+  .sheet.keyboard-sheet { max-width: none; overflow: visible; padding: 0; max-height: none;
+    --sheet-limit: max(80px, calc(var(--vh, 100dvh) + var(--kb, 0px) - max(12px, env(safe-area-inset-top)))); }
+  .sheet.keyboard-sheet::after { content: ''; position: absolute; top: calc(100% - 1px); left: -1px; right: -1px;
+    height: 100vh; height: 100lvh; background: var(--panel); pointer-events: none; }
+  .sheet.keyboard-sheet form { margin: 0; max-height: var(--sheet-limit); overflow-y: auto; overscroll-behavior: contain;
+    border-radius: 15px 15px 0 0; padding-bottom: calc(max(12px, calc(env(safe-area-inset-bottom) - var(--app-bottom, 0px))) + var(--kb, 0px)); }
+  .sheet.keyboard-sheet.kb form { padding-bottom: calc(10px + var(--kb, 0px)); }
+  #askText { font-size: 16px; }
+}
+@keyframes sheet-in { from { transform: translateY(100%); } }
+@keyframes sheet-out { to { transform: translateY(100%); } }
+@keyframes fade-in { from { opacity: 0; } }
+.confirm-sheet { position: fixed; inset: 0; margin: 0; width: 100%; max-width: none; height: 100%; max-height: none; border: 0;
+  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
+  gap: 8px; padding: 8px 8px calc(10px + env(safe-area-inset-bottom)); background: rgba(0,0,0,.4); animation: fade-in .18s ease-out; }
+.confirm-sheet .box { width: min(520px, 100%); background: var(--panel); border-radius: 14px; overflow: hidden; text-align: center;
+  box-shadow: 0 10px 40px rgba(0,0,0,.3); animation: sheet-in .22s ease-out; }
+.confirm-sheet p { margin: 0; padding: 14px 16px; font-size: 13.5px; line-height: 1.4; color: var(--muted); border-bottom: 1px solid var(--line); }
+.confirm-sheet button { display: block; width: 100%; border: 0; border-radius: 0; background: transparent; padding: 14px 6px; font-size: 17px; color: var(--accent); }
+.confirm-sheet .cancel { font-weight: 600; }
+.confirm-sheet::backdrop { background: transparent; }
+@media (min-width: 700px) {
+  .sheet { bottom: calc(var(--kb, 0px) + 24px); max-height: calc(var(--vh, 100dvh) - env(safe-area-inset-top) - 12px); padding-bottom: 0;
+    border-bottom: 1px solid var(--line); border-radius: 16px; }
+  .sheet form { padding-bottom: 14px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .sheet[open], .sheet[open]::backdrop, .sheet.closing, .sheet.closing::backdrop, .confirm-sheet, .confirm-sheet .box { animation: none; }
+  .fab:active { transform: none; }
+}
+/* The hub lives at the tailnet root, outside this site, so its link is root-absolute. */
+.brand { align-items: center; }
+.hub { display: inline-flex; flex: none; }
+.hub img { width: 32px; height: auto; display: block; image-rendering: pixelated; }
+@keyframes pulse { 50% { opacity: .35; } }
+/* A lane's folds are inset boxes in its list, so they read as part of that lane, not as more lanes. */
+.lane .list:has(> .fold) { padding-bottom: 8px; }
+.fold { margin: 8px 8px 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
+.list > .item + .fold { margin-top: 10px; }
+.fold > summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 5px 12px; background: var(--panel); font-size: 13px; font-weight: 500; color: var(--text); }
+.fold > summary::-webkit-details-marker { display: none; }
+.fold > summary .count { color: var(--muted); font-weight: 400; }
+.fold > summary:hover { background: color-mix(in srgb, var(--chip) 60%, transparent); }
+.fold-list { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--chip) 35%, transparent); }
+.ask-actions { float: right; display: flex; gap: 2px; margin: -6px -6px 0 8px; }
+.ask-actions .icon { padding: 6px; color: var(--muted); }
+.ask-actions .icon:disabled { opacity: .35; }
+.working-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-notice); margin-right: 5px; vertical-align: 1px; }
+@media (prefers-reduced-motion: no-preference) { .working-dot { animation: pulse 1.4s ease-in-out infinite; } }
+form[data-reply] .row .quick { margin-left: auto; margin-right: 6px; }
+form[data-reply] .row [data-confirm="finish"] { margin-right: 6px; }
+.q .proto { display: inline-block; margin: 0 0 8px; }
+.msg .ask-actions { margin: -4px -6px 0 8px; }
+button.attach { border: 0; background: transparent; padding: 0; }
+button.attach:disabled { opacity: .35; }
+.item > summary.work { grid-template-columns: 18px 1fr; align-items: start; }
+.item > summary.work .status { margin-top: 2px; }
+.line1 .chip { vertical-align: 1px; margin-right: 2px; }
+.line2.meta { justify-content: flex-start; margin-top: 4px; }
+.line3 { margin-top: 3px; }
+.brand { display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: 10px; row-gap: 2px; }
+.brand .hub { grid-row: 1 / span 2; align-self: center; }
+.sub .working { color: var(--color-notice); }
+.msg.link { padding: 0 10px; margin: 4px 0; font-size: 13px; }
+.msg.builder-status { padding: 0 10px; margin: 4px 0; font-size: 12px; color: var(--color-notice); overflow-wrap: anywhere; }
+.msg.builder-status .working-dot { animation: none; }
+.msg.agent { padding: 0 10px; margin: 4px 0; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
+.msg.agent.started { color: var(--color-notice); } .msg.agent.finished { color: var(--color-success); }
+.msg.agent .muted { font-weight: 400; }
+.agent-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: 1px; }
+/* INT-30: card line order */
+.line5.meta { justify-content: flex-start; margin-top: 4px; }
+/* Lane headers: Linear-style group bands */
+.lane > summary { display: flex; align-items: center; gap: 8px; margin: 0; min-height: 34px; padding: 5px 12px;
+  background: var(--band); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--text); }
+.lane > summary { list-style: none; cursor: pointer; user-select: none; }
+.lane > summary::-webkit-details-marker { display: none; }
+.lane > summary:hover { background: color-mix(in srgb, var(--band), var(--text) 5%); }
+.lane > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.lane[open] > summary { border-bottom: 0; border-radius: 10px 10px 0 0; }
+.lane[open] > .list { border-radius: 0 0 10px 10px; }
+.lane > summary .count { color: var(--muted); font-weight: 400; }
+/* INT-35: offline header */
+.view-board.offline #compose { display: none; }
+.view-board.offline main > * { opacity: .72; }
+.view-board.offline main, .view-board.offline > .top > :not(.nav), .view-board.offline > .top .nav > :not(.refresh) { pointer-events: none; }
+/* INT-28: answer banner */
+.answer-banner { display: flex; align-items: center; gap: 4px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
+  border-radius: 10px; padding: 2px 4px 2px 0; margin-bottom: 12px; }
+.answer-banner[hidden] { display: none; }
+.answer-banner .answer-open { flex: 1; min-width: 0; display: flex; align-items: baseline; border: 0; background: transparent; padding: 8px 4px 8px 12px; text-align: left; white-space: nowrap; }
+.answer-banner .answer-open strong { color: var(--accent); flex: none; }
+.answer-banner .sep, .answer-banner .more { flex: none; white-space: pre; }
+.answer-banner .more { color: var(--muted); }
+.answer-banner .text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.answer-banner .answer-dismiss { flex: none; display: inline-flex; padding: 6px; color: var(--muted); }
+/* INT-37: one header row, the title cut with an ellipsis; the GitHub line's own refresh */
+.top { gap: 8px; }
+.brand { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
+.brand :is(h1, h2) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.top .nav { flex: none; }
+.lane-github { display: inline-flex; align-items: center; gap: 2px; }
+.lane-github .github { display: inline-flex; align-items: center; gap: 4px; }
+.lane-github .gh-mark { flex: none; }
+.lane-github .gh-refresh { font-size: 15px; line-height: 1; padding: 2px 4px; margin-right: -6px; color: var(--muted); }
+.lane-github .gh-refresh[aria-disabled="true"] { opacity: .35; cursor: default; }
+/* INT-44: both refreshes rest and spin while they fetch */
+.lane-github .gh-refresh { display: inline-flex; align-items: center; justify-content: center; }
+.lane-github .gh-refresh.spinning[aria-disabled="true"] { opacity: .45; }
+@media (prefers-reduced-motion: no-preference) {
+  #refresh.spinning svg, .gh-refresh.spinning svg { animation: refresh-spin .8s linear infinite; }
+}
+@keyframes refresh-spin { to { transform: rotate(360deg); } }
+/* INT-55: the header's right group (the time then ↻, settings) sits one gap apart; each control paints disabled until app-header.js wires it */
+.top .nav { gap: 8px; }
+.top .nav .refresh { flex-direction: row-reverse; gap: 2px; }
+.top .nav #refresh, .top .nav a.icon { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 4px; border: 0; line-height: 1; }
+.top .nav #status { line-height: 1.1; white-space: nowrap; }
+.top .nav #refresh:disabled, .top .nav a.icon[aria-disabled="true"] { opacity: .35; pointer-events: none; }
+/* INT-64: offline, the header's time and refresh turn red */
+.view-board.offline .refresh #refresh, .refresh .link-state.offline { color: var(--color-danger); }
+.back { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; color: var(--accent); text-decoration: none; }
+/* The lead slot, logo or back, is one 44px tap box on the page's left edge, so every page's header lines up the same
+   (docs/adr/0048-a-questions-takes-show-inline.md). The brand keeps that height when the rail hides the logo, so the
+   board's header and the sidebar's stay level. */
+.top { padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 4px; }
+.top .brand { gap: 4px; min-height: 44px; }
+.top .hub, .top .back { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin-left: -10px; border-radius: 10px; }
+.top .back:active { background: var(--accent-soft); }
+.top .brand :is(h1, h2) { font-size: 17px; font-weight: 600; line-height: 22px; }
+/* The last visit paints dimmed until the fresh board lands; the controls ui-snapshot.js liveControls blocks rest meanwhile.
+   A changed card, or other changed line, gets a builder-orange border that fades once (app-snapshot.js flashChanged). */
+main > * { transition: opacity .25s ease; }
+.view-board[data-board="snapshot"]:not(.offline) main > * { opacity: .62; }
+.view-board[data-board="snapshot"] :is(.actions button, button[data-plan], button[data-bump], button[data-confirm="bump"], button[data-edit], button[data-withdraw], button[data-check-github], form[data-reply] button[type=submit], form[data-reply] button[data-quick], form[data-reply] button[data-proto], form[data-reply] button[data-confirm], .prompt button) { opacity: .45; pointer-events: none; }
+.flash { animation: snapshot-flash 1.6s ease-out 1; border-radius: 6px; }
+@keyframes snapshot-flash { from { box-shadow: inset 0 0 0 2px var(--color-notice); } to { box-shadow: inset 0 0 0 2px transparent; } }
+.msg .quote { margin: 4px 0 6px; padding: 2px 0 2px 8px; border-left: 2px solid var(--line); color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
+/* ADR 0040: the GitHub mark opens the Hub links sheet, with a red dot while a link is broken; a new board's setup checklist */
+.lane-github .gh-links { position: relative; display: inline-flex; align-items: center; padding: 4px; margin: -4px -2px -4px -4px; font-size: inherit; line-height: 1; color: inherit; }
+.lane-github .links-dot { position: absolute; top: 1px; right: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--color-danger); box-shadow: 0 0 0 1.5px var(--bg); }
+.sheet .sheet-body { padding: 10px 16px max(12px, calc(env(safe-area-inset-bottom) - var(--app-bottom, 0px))); }
+.hub-links { list-style: none; margin: 0; padding: 0; }
+.hub-links li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); min-width: 0; }
+.hub-links li:first-child { border-top: 0; }
+.hub-links li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
+.hub-links .dot { flex: none; transform: translateY(-1px); }
+.hub-links strong, .hub-links .sub { display: block; }
+.setup { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
+.setup h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 6px; color: var(--accent); }
+.setup-steps { list-style: none; margin: 0; padding: 0; }
+.setup-steps li { display: flex; align-items: baseline; gap: 8px; margin: 3px 0; overflow-wrap: anywhere; }
+.setup-steps .dot { flex: none; }
+
+/* The board's other views (view-settings.js, view-questions.js, view-notes.js) each scope their rules by the class on their root. */
+.view-settings .set h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); margin: 18px 0 6px; }
+.view-settings .who { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border: 1px solid var(--line);
+  border-radius: 9px; margin: 6px 0; background: var(--panel); }
+.view-settings .who.gone { opacity: .5; text-decoration: line-through; }
+.view-settings .who.new { border-color: var(--accent); }
+.view-settings .add { display: flex; gap: 6px; margin-top: 8px; }
+.view-settings .add input { flex: 1; min-width: 0; }
+.view-settings .replies .reply { margin-top: 8px; }
+.view-settings label.who { gap: 12px; cursor: pointer; }
+.view-settings label.who .sub { display: block; margin-top: 2px; }
+.view-settings input.toggle { flex: none; width: 1.4rem; height: 1.4rem; margin: 0; accent-color: var(--accent); }
+.view-settings .close-board-row { width: 100%; text-align: left; color: var(--color-danger); }
+.view-settings .repo-row { width: 100%; gap: 12px; text-align: left; }
+.view-settings .repo-row > :first-child { min-width: 0; overflow-wrap: anywhere; }
+.view-settings .repo-row > :last-child { flex: none; }
+.view-settings .close-board-row .sub { display: block; margin-top: 3px; }
+.view-settings .close-board-sheet { text-align: left; line-height: 1.5; }
+.view-settings .close-board-sheet h2 { color: var(--text); font-size: 18px; text-transform: none; letter-spacing: normal; }
+.view-settings .close-board-sheet input { display: block; width: 100%; margin-top: 8px; }
+.view-settings .close-board-sheet .danger { color: var(--color-danger); }
+.view-settings .close-board-warning:has(li) { border: 1px solid var(--color-notice); padding: 0 12px; border-radius: 10px; margin-bottom: 14px; }
+.view-questions .q { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 12px 0; }
+.view-questions .q.urgent { border-color: var(--color-notice); }
+.view-questions .q h3 { font-size: 15px; margin: 6px 0 4px; line-height: 1.3; }
+.view-questions .ctx { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
+.view-questions .opt { display: grid; grid-template-columns: 22px 1fr; gap: 6px; padding: 8px; border: 1px solid var(--line);
+  border-radius: 8px; margin: 6px 0; cursor: pointer; }
+.view-questions .opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
+.view-questions .opt input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--accent); }
+.view-questions .opt .lbl { font-weight: 600; }
+.view-questions .opt .rec { color: var(--accent); font-weight: 500; font-size: 12px; margin-left: 4px; }
+.view-questions .opt .det { color: var(--muted); font-size: 13px; }
+.view-questions .note { margin-top: 4px; }
+.view-questions .ans { background: var(--love); border-radius: 9px; padding: 7px 10px; margin-top: 8px; font-size: 13px; }
+.view-questions .rep { background: var(--claude); border-radius: 9px; padding: 7px 10px; margin-top: 6px; font-size: 13px; }
+.view-questions .q details { margin-top: 8px; }
+.view-questions .q details > summary { cursor: pointer; color: var(--muted); font-size: 13px; }
+.view-questions .topics { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; margin-bottom: 4px; }
+.view-questions .topics button { flex: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 13px;
+  background: var(--panel); color: var(--text); white-space: nowrap; }
+.view-questions .topics button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
+.view-questions .topics .n { color: var(--muted); margin-left: 4px; }
+.view-questions .topichead { margin: 2px 0 6px; }
+.view-questions details.done > summary { cursor: pointer; color: var(--muted); font-size: 13px; margin: 16px 0 4px; }
+.view-questions details.done .trow { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
+.view-questions details.done button.ghost { font-size: 14px; text-align: left; padding: 6px 2px; }
+.view-questions details.done .trow button { min-width: 0; }
+.view-questions details.done .trow span { flex: none; }
+.view-questions .bar { position: sticky; bottom: var(--app-bottom, 0px); padding: 10px 0 max(10px, env(safe-area-inset-bottom)); background: var(--bg);
+  display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--line); }
+.view-questions .bar .send-hint { margin-left: auto; }
+.view-questions .bar #qstatus { min-width: 0; }
+.view-questions .bar #qstatus.sent { color: var(--color-success); font-weight: 600; }
+.view-questions .solo { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 0; }
+
+/* A question's takes sit in as many columns as keep each at least 380px wide, one on a phone; each its option above its
+   preview, and each row's takes top-aligned, since each frame takes its own page's height. */
+.view-questions .takes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 10px; align-items: start; margin: 6px 0; }
+.view-questions .take { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); padding: 10px; }
+.view-questions .take:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
+.view-questions .take .opt, .view-questions .take .opt:has(input:checked) { border: 0; padding: 0; margin: 0; background: none; }
+/* view-questions.js sets a frame's height to its page's once measured; until then it shows nothing, so a take that turns
+   its question into the full-width layout never flashes cut off. */
+.view-questions .take-shot { position: relative; display: block; margin-top: 8px; height: 360px; border: 1px solid var(--line); border-radius: 10px;
+  overflow: hidden; transition: height .15s ease; }
+.view-questions .take-shot iframe { width: 100%; height: 100%; border: 0; background: var(--bg); }
+.view-questions .take-shot.measuring { transition: none; }
+.view-questions .take-shot.measuring iframe { visibility: hidden; }
+.view-questions .take-shot.measuring::before { content: 'Loading take…'; position: absolute; inset: 0; display: grid; place-items: center;
+  color: var(--muted); font-size: 12.5px; }
+.view-questions:has(.takes-full) main { max-width: none; }
+.view-questions .takes-full { grid-template-columns: minmax(0, 1fr); }
+.view-questions .take-choices { display: flex; flex-wrap: wrap; gap: 8px; }
+.view-questions .take-choices .opt { flex: 1 1 160px; margin: 0; }
+.view-questions .take-choices .opt[aria-current="true"] { border-color: var(--accent); }
+.view-questions .takes-full .take { padding: 0; border: 0; }
+.view-questions .takes-full .take-shot { margin-top: 0; transition: none; }
+
+/* A take with nothing to see: boxes and arrows, then what it means in practice. */
+.view-questions .flow { margin: 10px 0 4px; }
+.view-questions .flow-row { display: grid; gap: 6px; }
+.view-questions .flow-row.dense { gap: 4px; }
+.view-questions .flow-box { position: relative; display: grid; place-items: center; border: 1.5px solid var(--line); border-radius: 8px;
+  background: var(--panel); padding: 6px 7px; font-size: 12px; line-height: 1.25; text-align: center; overflow-wrap: anywhere; hyphens: auto; }
+.view-questions .flow-row.dense .flow-box { font-size: 11px; padding: 5px 2px; }
+.view-questions .flow-box.in::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
+  border: 5px solid transparent; border-top-color: var(--muted); border-bottom: 0; }
+.view-questions .flow-box.tone-info { border-color: var(--color-info); }
+.view-questions .flow-box.tone-notice { border-color: var(--color-notice); }
+.view-questions .flow-box.tone-danger { border-color: var(--color-danger); }
+.view-questions .flow-box.tone-success { border-color: var(--color-success); }
+.view-questions .flow-box.tone-quiet { border-style: dashed; color: var(--muted); }
+.view-questions .flow-conn { display: block; width: 100%; height: 18px; }
+.view-questions .flow-conn line { stroke: var(--muted); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
+.view-questions .practice { font-size: 13px; margin-top: 8px; }
+.view-questions .practice b { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
+.view-questions .practice ul { margin: 4px 0 0; padding-left: 18px; }
+.view-questions .practice li { margin: 3px 0; }
+.view-notes .plan { overflow-wrap: anywhere; line-height: 1.5; }
+.view-notes .plan h1 { font-size: 20px; line-height: 1.3; margin: 8px 0 10px; }
+.view-notes .plan h2 { font-size: 17px; margin: 22px 0 8px; }
+.view-notes .plan h3, .view-notes .plan h4, .view-notes .plan h5, .view-notes .plan h6 { font-size: 15px; margin: 18px 0 6px; }
+.view-notes .plan p, .view-notes .plan ul, .view-notes .plan ol, .view-notes .plan blockquote { margin: 8px 0; }
+.view-notes .plan ul, .view-notes .plan ol { padding-left: 22px; }
+.view-notes .plan li { margin: 3px 0; }
+.view-notes .plan li.nested { margin-left: 20px; }
+.view-notes .plan code { font-size: 12.5px; background: var(--accent-soft); border-radius: 4px; padding: 0 3px; }
+.view-notes .plan pre { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
+.view-notes .plan pre code { background: none; padding: 0; overflow-wrap: normal; }
+.view-notes .plan blockquote { border-left: 3px solid var(--line); padding-left: 10px; color: var(--muted); }
+.view-notes .plan hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
+.view-notes .plan a { color: var(--accent); }
+.view-notes .md-table { overflow-x: auto; margin: 10px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
+.view-notes .md-table table { border-collapse: collapse; font-size: 13px; line-height: 1.4; }
+.view-notes .md-table th, .view-notes .md-table td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--line); min-width: 5em; overflow-wrap: normal; }
+.view-notes .md-table th { background: var(--bg); font-weight: 600; }
+.view-notes .md-table tr:last-child td { border-bottom: 0; }
+.view-notes .md-table .wide { min-width: 14em; }
+.view-notes .md-table .wider { min-width: 24em; }
+/* A framed page (view-frame.js) fills the space beside the header, and scrolls inside its frame. */
+.view-frame { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
+.view-frame > .top { flex: none; }
+.view-frame.own-header > .top { display: none; }
+.view-frame > .frame-page { flex: 1 1 auto; display: block; width: 100%; min-height: 0; border: 0; background: var(--bg); }
+.view-frame .alone { white-space: nowrap; font-size: 13px; }
+
+.top .phone-logo { display: none; }
+@media (max-width: 899px) {
+  :root:has(body > .top, body.has-sidebar > :not(.sidebar) > .top):not(.ps-embed) {
+    --app-bottom: calc(49px + max(4px, env(safe-area-inset-bottom)));
+  }
+  body > .top, body.has-sidebar > :not(.sidebar) > .top {
+    position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 7;
+    border-bottom: 0; border-top: 1px solid var(--line); padding-top: 4px; padding-bottom: max(4px, env(safe-area-inset-bottom));
+  }
+  .top .phone-logo { display: inline-flex; margin-left: 0; }
+  .top .nav #refresh, .top .nav a.icon { min-width: 44px; min-height: 44px; }
+  body > main, body.has-sidebar > :not(.sidebar) > main { padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: calc(96px + var(--app-bottom, 0px) + env(safe-area-inset-bottom)); }
+  .view-frame:not(.own-header) { padding-bottom: var(--app-bottom, 0px); }
+  .sheet { bottom: max(0px, calc(var(--app-bottom, 0px) - var(--kb, 0px)));
+    max-height: calc(var(--vh, 100dvh) + var(--kb, 0px) - max(var(--app-bottom, 0px), var(--kb, 0px)) - env(safe-area-inset-top) - 12px); }
+  .sheet.keyboard-sheet:not(.kb)::after { height: 0; }
+  .sheet.keyboard-sheet { --sheet-limit: max(80px, calc(var(--vh, 100dvh) + var(--kb, 0px) - max(0px, calc(var(--app-bottom, 0px) - var(--kb, 0px))) - max(12px, env(safe-area-inset-top)))); }
+  .confirm-sheet { padding-bottom: calc(10px + var(--app-bottom, 0px) + env(safe-area-inset-bottom)); }
+}
+
+.settings-modal { position: fixed; inset: max(12px, env(safe-area-inset-top)) 0 calc(12px + max(var(--kb, 0px), var(--app-bottom, 0px))); margin: auto; width: min(680px, calc(100% - 24px));
+  height: fit-content; max-width: none; max-height: max(120px, calc(var(--vh, 100dvh) - max(0px, calc(var(--app-bottom, 0px) - var(--kb, 0px))) - 24px - env(safe-area-inset-top)));
+  padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); color: var(--text);
+  overflow: hidden; box-shadow: 0 20px 70px #0004; }
+.settings-modal[open] { display: flex; flex-direction: column; }
+.settings-modal::backdrop { background: #0006; touch-action: none; }
+.settings-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
+.settings-head h2 { margin: 0; font-size: 18px; }
+.settings-head p { margin: 4px 0 0; }
+.settings-body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 0 20px 16px; }
+.settings-body input { font-size: 16px; }
+.settings-footer { display: flex; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid var(--line); }
+
+.tk-section { margin: 10px 0; }
+.tk-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; margin: 8px 0; border: 1px solid var(--line); border-radius: 9px; background: var(--chip); }
+.tk-seg button { min-width: 0; min-height: 44px; padding: 6px 4px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
+.tk-seg button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
+.tk-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
+.tk-grid { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
+@media (min-width: 560px) { .tk-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
+.tk-field { display: block; min-width: 0; }
+.tk-grid + .tk-field { margin-top: 8px; }
+.tk-field > span { display: block; margin: 0 0 4px; font-size: 12px; font-weight: 600; }
+.tk-field :is(select, input), .tk-new input { display: block; width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; box-sizing: border-box;
+  color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 16px; }
+.tk-new { display: flex; gap: 6px; margin-top: 8px; }
+.tk-new input { flex: 1; min-width: 0; font-size: 16px; }
+.tk-detail > p { margin: 8px 0; }
+.tk-hublink { color: var(--accent); text-decoration: none; }
+.tk-hublink .sub, .tk-static .sub { display: block; margin-top: 2px; }
+
+#newBoardSheet .tk-detail .who { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; margin: 6px 0; background: var(--panel); }
+
+.try-spin { display: inline-block; width: 10px; height: 10px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: try-spin .8s linear infinite; flex: none; }
+@keyframes try-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .try-spin { animation: none; } }
+.install { display: inline-flex; align-items: center; gap: 4px; }
+.external-links .install.tone-ready { color: var(--color-success); }
+.external-links .install.tone-danger { color: var(--color-danger); }
+.actions button[aria-disabled="true"] { opacity: .5; cursor: default; }
+.tb-main { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 13px; }
+.tb-main svg { flex: none; color: var(--muted); }
+.tb-main-text { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
+.tb-main .meta { justify-content: flex-end; margin-left: auto; }