/* Kitehand's frame and screens. The tokens are in styles.css, under
   :root[data-product=kitehand]. */

.hand-app {
  display:grid;
  grid-template-columns:232px minmax(0,1fr);
  min-height:100vh;
  background:var(--paper);
  color:var(--ink)
}

.hand-rail {
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  gap:28px;
  padding:26px 14px 16px;
  border-right:1px solid var(--line);
  background:var(--rail)
}

.hand-brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0 8px;
  color:var(--ink);
  font-size:21px;
  font-weight:700;
  letter-spacing:-.02em;
  text-decoration:none
}

.hand-brand .brand-mark {width:34px;height:34px;border-radius:9px}

.hand-nav {display:flex;flex-direction:column;gap:2px}

.hand-nav-link {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  padding:0 12px;
  border-radius:10px;
  color:var(--muted);
  font-size:15px;
  font-weight:600;
  text-decoration:none
}

.hand-nav-link:hover {color:var(--ink);background:#e7e2d7}
.hand-nav-link[aria-current=page] {color:var(--ink);background:var(--panel);box-shadow:0 1px 0 var(--line),0 0 0 1px var(--line)}
.hand-glyph {width:20px;height:20px;flex-shrink:0}

.hand-me {
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 6px 2px;
  border-top:1px solid var(--line)
}

.hand-me-text {display:flex;flex-direction:column;min-width:0;flex:1}
.hand-me-text strong,.hand-me-text span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hand-me-text strong {font-size:14px;font-weight:650}
.hand-me-text span {font-size:12px;color:var(--muted)}

.hand-avatar {
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--ink);
  color:var(--paper);
  font-size:13px;
  font-weight:700;
  flex-shrink:0
}

.hand-icon-button {
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  text-decoration:none;
  display:inline-grid;
  place-items:center;
  min-width:44px;
  min-height:44px;
  border-radius:10px;
  color:var(--muted)
}

.hand-icon-button:hover {color:var(--ink);background:#e7e2d7}
.hand-icon-button:focus-visible,.hand-nav-link:focus-visible,.hand-tab-link:focus-visible,.hand-brand:focus-visible {outline:2px solid var(--ai);outline-offset:2px}

.hand-body {min-width:0}
.hand-bar,.hand-tabs {display:none}

.hand-main {
  box-sizing:border-box;
  width:100%;
  max-width:1120px;
  margin-inline:auto;
  padding:44px clamp(20px,5vw,64px) 96px
}
/* While a hand works in its browser, its page widens for the screen. */
.hand-main:has(.hand-screen:not([hidden])) {max-width:1760px}

.hand-head {margin-bottom:28px}

.hand-title {
  margin:0;
  font-family:var(--hand-display);
  font-size:clamp(26px,3.2vw,34px);
  font-weight:600;
  letter-spacing:.01em;
  line-height:1.3
}

.hand-seats {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px
}

.hand-seat {
  display:flex;
  align-items:center;
  gap:14px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel)
}

.hand-seat .brand-mark {width:46px;height:46px;border-radius:12px}
.hand-seat-text {display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}

.hand-seat h2 {
  margin:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:17px;
  font-weight:650
}

.hand-pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:650;
  color:var(--muted);
  background:var(--soft)
}

.hand-pill::before {content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.hand-pill[data-kind=ok] {color:var(--ok);background:var(--ok-soft)}
.hand-pill[data-kind=wait] {color:var(--wait);background:var(--wait-soft)}
.hand-pill[data-kind=ai] {color:var(--ai);background:var(--ai-soft)}
.hand-pill[data-kind=approve] {color:#fff;background:var(--approve)}
.hand-seat-size {margin:0;font-size:13px;color:var(--muted)}

.hand-empty {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  max-width:520px;
  margin:6vh auto 0;
  padding:40px 28px;
  text-align:center
}

.hand-empty h2 {margin:8px 0 0;font-family:var(--hand-display);font-size:24px;font-weight:600}
.hand-empty p {margin:0;color:var(--muted);font-size:15px;line-height:1.8}

/* The empty seat: a chair waiting for its first hand. */
.hand-seat-art {
  width:92px;
  height:92px;
  border-radius:24px;
  border:1.5px dashed #cfc8ba;
  background:
    linear-gradient(var(--line),var(--line)) 50% 64% / 46px 6px no-repeat,
    linear-gradient(var(--line),var(--line)) 34% 82% / 5px 20px no-repeat,
    linear-gradient(var(--line),var(--line)) 66% 82% / 5px 20px no-repeat,
    linear-gradient(var(--line),var(--line)) 50% 34% / 40px 26px no-repeat
}

.hand-menu {position:relative}
.hand-menu summary {display:grid;place-items:center;min-width:44px;min-height:44px;list-style:none;cursor:pointer}
.hand-menu summary::-webkit-details-marker {display:none}
.hand-menu summary:focus-visible {outline:2px solid var(--ai);outline-offset:2px;border-radius:50%}

.hand-menu-panel {
  position:absolute;
  right:0;
  top:calc(100% + 6px);
  min-width:220px;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  box-shadow:0 12px 32px #1d202722
}

.hand-menu-panel strong {padding:4px 8px 10px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid var(--line)}
.hand-signout {margin:0}
.hand-menu-item {display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 8px;border:0;border-radius:9px;background:none;color:var(--ink);font:inherit;font-size:15px;text-align:left;cursor:pointer}
.hand-menu-item:hover {background:var(--soft)}

/* What only a screen reader reads. */
.hand-sr {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.hand-primary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 24px;
  border:0;
  border-radius:12px;
  background:var(--ink);
  color:var(--paper);
  font:inherit;
  font-size:15px;
  font-weight:650;
  text-decoration:none;
  cursor:pointer
}

.hand-primary:hover {background:#33373f}
.hand-primary:disabled {opacity:.6;cursor:progress}
.hand-primary:focus-visible,.hand-seat:focus-visible,.hand-back:focus-visible {outline:2px solid var(--ai);outline-offset:3px}
.hand-empty .hand-primary {margin-top:14px}

.hand-back {display:inline-flex;align-items:center;gap:6px;min-height:32px;margin-bottom:6px;color:var(--muted);font-size:14px;text-decoration:none}
.hand-back::before {content:"←"}
.hand-back:hover {color:var(--ink)}
.hand-lede {margin:10px 0 0;color:var(--muted);font-size:15px;line-height:1.7}
.hand-head-row {display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.hand-head-row .hand-menu {margin-left:auto}

a.hand-seat {color:inherit;text-decoration:none}
a.hand-seat:hover {border-color:#cfc8ba;box-shadow:0 2px 12px #1d20270d}
.hand-seat-new {border-style:dashed;background:transparent}
.hand-seat-plus {display:grid;place-items:center;width:46px;height:46px;border-radius:12px;border:1.5px dashed #cfc8ba;color:var(--muted);flex-shrink:0}

/* Handing over a job. */
.hand-handover {display:grid;gap:18px;max-width:680px}
.hand-kinds {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;border:0}

.hand-kind {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-height:84px;
  padding:16px;
  border:1.5px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  cursor:pointer
}

.hand-kind input {position:absolute;opacity:0;pointer-events:none}
.hand-kind:has(input:checked) {border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.hand-kind:has(input:focus-visible) {outline:2px solid var(--ai);outline-offset:3px}
.hand-kind-title {font-size:16px;font-weight:650}
.hand-kind-hint {font-size:13px;color:var(--muted)}

.hand-drop label {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:34px 20px;
  border:1.5px dashed #cfc8ba;
  border-radius:16px;
  background:#ffffff80;
  text-align:center;
  cursor:pointer
}

.hand-drop label strong {font-size:15px;font-weight:650}
.hand-drop label span {font-size:13px;color:var(--muted)}
.hand-drop.is-over label,.hand-drop label:hover {border-color:var(--ink);background:var(--panel)}
.hand-drop:has(input:focus-visible) label {outline:2px solid var(--ai);outline-offset:3px}
.hand-file {margin:10px 0 0;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-size:14px;overflow-wrap:anywhere}

.hand-line textarea,.hand-talk-composer textarea {
  box-sizing:border-box;
  width:100%;
  border:1.5px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  color:var(--ink);
  font:inherit;
  font-size:16px;
  line-height:1.6
}

.hand-line textarea {min-height:120px;padding:14px 16px;resize:vertical}
.hand-line textarea:focus,.hand-talk-composer textarea:focus {outline:none;border-color:var(--ai);box-shadow:0 0 0 3px var(--ai-soft)}
.hand-error {margin:0;min-height:1em;color:var(--wait);font-size:14px}
.hand-error:empty {display:none}
.hand-talk-error {padding:0 16px 8px}

/* A hand's page: talking with it, beside its job. */
.hand-desk {display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.hand-desk > .hand-talk,.hand-desk > .hand-screen {grid-column:1}
.hand-desk-job {position:sticky;top:24px;grid-column:2;grid-row:1 / span 2}
/* A working hand's page: its title and talk on the left, and beside them a
   panel as tall as the screen, its tabs on top and the rest scrolling. */
.hand-desk[data-tab] {grid-template-columns:minmax(0,1fr) clamp(320px,30vw,400px);grid-template-rows:auto 1fr auto;row-gap:0}
.hand-desk[data-tab] > .hand-head {grid-column:1}
.hand-desk[data-tab] > .hand-screen {margin-top:24px}
.hand-side {grid-row:1 / -1;display:flex;flex-direction:column;height:calc(100vh - 60px);min-height:420px;box-sizing:border-box;border:1px solid var(--line);border-radius:18px;background:var(--panel);overflow:hidden}
.hand-switch {flex:none;display:flex;gap:4px;margin:12px 12px 0;padding:4px;border-radius:12px;background:var(--soft)}
.hand-tab {flex:1 1 0;min-width:0;min-height:44px;padding:0 6px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:inherit;font-size:13.5px;font-weight:650;cursor:pointer}
.hand-tab:hover {color:var(--ink)}
.hand-tab[aria-selected=true] {color:var(--ink);background:var(--panel);box-shadow:0 1px 4px #1d202714}
.hand-tab:focus-visible {outline:2px solid var(--ai);outline-offset:2px}
.hand-tab[data-tab=talk] {display:none}
/* A tab's mark sits beside its name, so nothing moves when it comes. */
.hand-tab-label {position:relative;display:inline-block;white-space:nowrap}
.hand-tab-mark {position:absolute;top:-8px;left:calc(100% + 2px)}
.hand-badge {display:inline-grid;place-items:center;box-sizing:border-box;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--approve);color:#fff;font-size:11px;font-weight:700;line-height:1}
.hand-dot {display:block;width:7px;height:7px;margin-top:6px;border-radius:50%;background:var(--ai)}
.hand-panels {flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.hand-panel {display:flex;flex-direction:column;gap:22px;padding:18px 20px 22px}
.hand-panel[hidden] {display:none}
.hand-panel:focus {outline:none}
.hand-panel:focus-visible {outline:2px solid var(--ai);outline-offset:-2px}
.hand-panel h3 {margin:0 0 4px;color:var(--muted);font-size:12px;font-weight:650;letter-spacing:.06em}
.hand-panel .hand-job {padding:0;border:0;border-radius:0;background:none}
.hand-panel .hand-job h3 {margin:10px 0 2px}
.hand-panel ul {display:flex;flex-direction:column;margin:0;padding:0;list-style:none}

.hand-talk {
  display:flex;
  flex-direction:column;
  min-height:60vh;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  overflow:hidden
}

.hand-talk-log {flex:1;display:flex;flex-direction:column;gap:16px;max-height:calc(100vh - 240px);padding:22px;overflow:auto}
/* The talk as last read, while the hand wakes, reads as behind what is live. */
.hand-talk-log.is-stale > .hand-turn {opacity:.55}
.hand-talk-log.is-stale .hand-account {opacity:.55}
.hand-stale {align-self:center;text-align:center}
.hand-turn-manager {align-self:flex-end;max-width:80%}
.hand-turn-manager p {margin:0;padding:10px 14px;border-radius:16px 16px 4px 16px;background:var(--ink);color:var(--paper);font-size:15px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.hand-turn-hand {display:flex;align-items:flex-start;gap:10px;max-width:94%}
.hand-turn-hand > .brand-mark {width:30px;height:30px;border-radius:8px}
.hand-turn-hand > div {display:flex;flex-direction:column;gap:10px;min-width:0}
.hand-said {font-size:15px;line-height:1.8}
.hand-said p {margin:0 0 .6em}
.hand-said p:last-child {margin-bottom:0}
/* A list the hand writes keeps its columns readable and scrolls sideways
   in the narrow talk, rather than wrapping a cell a character at a time. */
.hand-said table {display:block;max-width:100%;overflow-x:auto;margin:0 0 .6em;border-collapse:collapse;font-size:13px;line-height:1.6}
.hand-said th,.hand-said td {min-width:7em;padding:4px 10px;border:1px solid var(--line);text-align:left;vertical-align:top}
.hand-said th {background:var(--soft);font-weight:600;color:var(--ink)}
.hand-did {margin:0;color:var(--muted);font-size:13px}
.hand-failed {color:var(--wait)}
.hand-working {display:flex;align-items:center;gap:8px;margin:0;color:var(--ai);font-size:13px}
.hand-notice {display:flex;align-items:center;gap:10px;max-width:1120px;margin:16px clamp(20px,5vw,64px) 0;padding:12px 16px;border-radius:12px;font-size:14px;line-height:1.5}
.hand-notice[data-kind=ai] {color:var(--ai);background:var(--ai-soft)}
.hand-notice[data-kind=wait] {color:var(--wait);background:var(--wait-soft)}
.hand-notice[data-kind=rest] {color:var(--ink);background:var(--panel);border:1px solid var(--line)}
.hand-app .connection-banner:has(.hand-notice) {padding:0}
.hand-working span,.hand-notice span,.hand-job.is-waiting p::before {width:7px;height:7px;border-radius:50%;background:var(--ai);animation:hand-pulse 1.2s ease-in-out infinite}
@keyframes hand-pulse {50% {opacity:.25}}

.hand-talk-composer {display:flex;align-items:flex-end;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--paper)}
.hand-talk-composer textarea {max-height:160px;padding:10px 14px;resize:none}
.hand-send {display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:var(--ink);color:var(--paper);cursor:pointer;flex-shrink:0}
.hand-send svg {width:20px;height:20px}
.hand-send:focus-visible {outline:2px solid var(--ai);outline-offset:2px}

/* An account the hand asks for. Handing it over is the manager's decision,
   so its button is vermilion. */
.hand-account {display:flex;flex-direction:column;gap:10px;max-width:420px;padding:16px 18px;border:1px solid var(--line);border-left:3px solid var(--approve);border-radius:14px;background:var(--paper)}
.hand-account-title {margin:0;font-size:15px;font-weight:650}
.hand-account label {display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.hand-account input {box-sizing:border-box;width:100%;min-height:44px;padding:8px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font:inherit;font-size:16px}
.hand-account input:focus {outline:none;border-color:var(--ai);box-shadow:0 0 0 3px var(--ai-soft)}
.hand-account-note {margin:0;font-size:12.5px;color:var(--muted)}
.hand-approve {align-self:flex-start;min-height:44px;padding:0 20px;border:0;border-radius:10px;background:var(--approve);color:#fff;font:inherit;font-size:15px;font-weight:650;cursor:pointer}
.hand-approve:disabled {opacity:.6;cursor:progress}
.hand-approve:focus-visible {outline:2px solid var(--ai);outline-offset:2px}
.hand-account .hand-choice {display:flex;flex-direction:column;gap:6px;margin:0;padding:0;border:0;font-size:14px}
.hand-choice legend {margin-bottom:4px;font-size:13px;color:var(--muted)}
.hand-choice label {flex-direction:row;align-items:center;gap:10px;min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font-size:15px}
.hand-account .hand-choice input {width:auto;min-height:0;margin:0;accent-color:var(--ink)}
.hand-account .hand-choice input.hand-own {width:100%;min-height:40px;font-size:15px}
.hand-row {display:flex;flex-wrap:wrap;gap:8px}
.hand-quiet {min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font:inherit;font-size:15px;cursor:pointer}
.hand-now-working, .hand-stopped, .hand-going {display:flex;flex-direction:column;gap:10px}
/* What the hand does now, with a way to stop it; and a message of the
   manager's it reads at its next step, which it can answer now instead. */
.hand-link {min-height:32px;padding:0 6px;border:0;background:none;color:var(--ink);font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hand-link:disabled {opacity:.5;cursor:progress}
.hand-link:focus-visible {outline:2px solid var(--ai);outline-offset:2px;border-radius:6px}
.hand-now-line {display:flex;align-items:center;gap:8px}
.hand-stop {margin-left:auto}
.hand-turn-manager.is-queued p:first-child {opacity:.75}
.hand-turn-manager .hand-queued {margin:4px 0 0;padding:0;border-radius:0;background:none;color:var(--muted);font-size:12.5px;text-align:right;white-space:normal}
.hand-history {font-size:13px;color:var(--muted)}
.hand-history summary {display:inline-flex;align-items:center;min-height:32px;cursor:pointer}
.hand-history summary:focus-visible {outline:2px solid var(--ai);outline-offset:2px;border-radius:6px}
.hand-history ol {display:flex;flex-direction:column;gap:4px;max-height:280px;margin:4px 0 0;padding-left:20px;overflow:auto;line-height:1.6;list-style:none}
.hand-history-said {color:var(--ink)}
.hand-next {margin:-4px 0 0 15px;color:var(--ink);font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.hand-files {margin:0;padding-left:18px;font-size:14px;overflow-wrap:anywhere}
.hand-save-card {max-width:560px}
.hand-save-shot {display:block;width:100%;max-height:360px;object-fit:contain;object-position:top;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
.hand-doing {margin:-6px 0 0 15px;color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}

/* The browser a hand works in, live: beside the talk on a wide screen,
   below it otherwise. The manager takes it over to sign in. */
.hand-talk .chat-browser-host {flex:none;padding:0 16px 12px}
.hand-screen .chat-browser,.hand-talk .chat-browser {display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel)}
.hand-screen .chat-browser-bar,.hand-talk .chat-browser-bar {display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;padding:10px 12px 10px 16px;font-size:13px}
.hand-screen .chat-browser-page,.hand-talk .chat-browser-page {flex:1 1 auto;min-width:0;overflow:hidden;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.hand-screen .chat-browser-state,.hand-talk .chat-browser-state {order:3;flex:1 0 100%;color:var(--ai)}
.hand-screen .chat-browser-actions,.hand-talk .chat-browser-actions {display:flex;gap:6px}
.hand-screen .chat-browser-actions .button,.hand-talk .chat-browser-actions .button {min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.hand-screen .chat-browser-actions .button:not(.secondary),.hand-talk .chat-browser-actions .button:not(.secondary) {border-color:var(--ink);background:var(--ink);color:var(--paper)}
.hand-screen .chat-browser-actions .button:disabled,.hand-talk .chat-browser-actions .button:disabled {opacity:.5;cursor:default}
.hand-screen .chat-browser-screen,.hand-talk .chat-browser-screen {position:relative;aspect-ratio:16/10;max-height:70vh;overflow:hidden;background:var(--soft)}
.hand-screen .chat-browser-screen:not(.live),.hand-talk .chat-browser-screen:not(.live) {aspect-ratio:auto;height:160px}
.hand-screen .chat-browser-screen img,.hand-talk .chat-browser-screen img {display:block;width:100%;height:100%;object-fit:contain;user-select:none}
.hand-screen .chat-browser-keys,.hand-talk .chat-browser-keys {position:absolute;top:0;left:0;width:1px;height:1px;padding:0;border:0;opacity:0;resize:none;pointer-events:none}
.hand-screen .chat-browser.closed .chat-browser-screen,.hand-screen .chat-browser.folded .chat-browser-screen,
.hand-talk .chat-browser.closed .chat-browser-screen,.hand-talk .chat-browser.folded .chat-browser-screen {display:none}
.hand-screen .chat-browser.taken {border-color:var(--approve);box-shadow:0 0 0 3px color-mix(in srgb,var(--approve) 18%,transparent)}
.hand-handed {color:var(--ok)}
.hand-handed::before {content:"✓ "}

/* A job, as agreed or as the hand writes it. Indigo marks what the AI
   writes; vermilion what the manager approves. */
.hand-job {display:flex;flex-direction:column;gap:8px;padding:20px 22px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
.hand-job.is-live {border-color:var(--ai);box-shadow:0 0 0 3px var(--ai-soft)}
.hand-job-role {font-family:var(--hand-display);font-size:20px;font-weight:600}
.hand-job-accepts {margin:8px 0 0;padding-left:12px;border-left:3px solid var(--ai);font-size:14.5px;line-height:1.7}
.hand-job h3 {margin:10px 0 2px;color:var(--muted);font-size:12px;font-weight:650;letter-spacing:.06em}
.hand-job ul {display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.hand-job-work li {display:flex;align-items:flex-start;gap:10px;font-size:14.5px}
.hand-check {display:grid;place-items:center;width:20px;height:20px;margin-top:1px;border-radius:50%;background:var(--ok-soft);flex-shrink:0}
.hand-check::before {content:"✓";color:var(--ok);font-size:12px;font-weight:700}
.hand-work {display:flex;flex-direction:column;gap:1px}
.hand-work small {color:var(--muted);font-size:12.5px}
/* What is under way: the work the hand is changing now. */
.hand-now em {font-style:normal;font-size:12.5px;font-weight:650;color:var(--muted)}
.hand-now em[data-state=working] {color:var(--ai)}
.hand-now li {display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.hand-now li:last-child {border-bottom:0}
/* What needs the manager, first on the panel: a case they answer in the
   talk leads there. */
.hand-needs h3 {color:var(--approve)}
.hand-need {display:flex;align-items:center;gap:12px;box-sizing:border-box;width:100%;min-height:44px;padding:9px 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font:inherit;font-size:14px;text-align:left}
.hand-needs li:last-child > .hand-need,.hand-needs li.hand-need:last-child {border-bottom:0}
button.hand-need {cursor:pointer}
button.hand-need:hover .hand-case > span:first-child {text-decoration:underline}
button.hand-need:focus-visible {outline:2px solid var(--ai);outline-offset:2px;border-radius:6px}
button.hand-need::after {content:"";flex-shrink:0;width:6px;height:6px;margin-right:4px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg)}
.hand-need .hand-case {display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.55;overflow-wrap:anywhere}
.hand-need-state {display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex-shrink:0;text-align:right}
.hand-need .hand-log-when {min-width:0}
.hand-need[data-state=waiting] .hand-case-state {color:var(--approve);font-weight:700}
.hand-need[data-state=failed] .hand-case-state {color:var(--wait)}
/* A time not done says what the hand found, under which it is done again
   or set aside. */
li.hand-need[data-state=failed] {flex-direction:column;align-items:stretch;gap:8px}
.hand-need-main {display:flex;align-items:center;gap:12px}
.hand-need-acts .hand-quiet {padding:0 14px;font-size:14px}
.hand-need-acts .hand-quiet:disabled {opacity:.6;cursor:progress}
.hand-need-acts .hand-quiet:focus-visible {outline:2px solid var(--ai);outline-offset:2px}
.hand-soon li {display:flex;gap:12px;align-items:baseline;padding:6px 0;font-size:14px}
.hand-soon .hand-log-when {min-width:7.5em}
.hand-soon .hand-wake-cancel {margin-left:auto;font-size:13px}
.hand-today {display:flex;align-items:center;justify-content:space-between;gap:12px;box-sizing:border-box;width:100%;min-height:44px;margin:0;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:inherit;font-size:14px;text-align:left}
button.hand-today {cursor:pointer}
.hand-runs {margin:0;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--muted);font-size:13px}
.hand-runs[data-used="true"] {border-color:#e8c8bf;background:#fbefeb;color:#9a3a26;font-weight:650}
button.hand-today:hover {border-color:#cfc8ba}
button.hand-today:focus-visible {outline:2px solid var(--ai);outline-offset:2px}
.hand-today-go {flex-shrink:0;color:var(--ai);font-size:13px;font-weight:650}
.hand-today-go::after {content:" ›"}
.hand-job-limits li {display:flex;flex-direction:column;gap:1px;font-size:14px}
.hand-job-limits span {color:var(--muted);font-size:13px}
.hand-job ul.hand-job-accounts {flex-direction:row;flex-wrap:wrap;gap:6px}
.hand-job-accounts li {padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:13px}
.hand-job.is-waiting p {display:flex;align-items:center;gap:10px;margin:0;color:var(--ai);font-size:14px}
.hand-job.is-waiting p::before {content:"";flex-shrink:0}

/* Turning on what reaches the manager's phone. */
.hand-push {display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:560px;margin-bottom:16px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--panel);font-size:14.5px;line-height:1.7}
.hand-push p {margin:0}
.hand-push-reach {margin:0 0 12px;color:var(--muted);font-size:13px}

/* What waits for the manager, one case under another. */
.hand-inbox {display:flex;flex-direction:column;gap:14px;max-width:560px}
.hand-inbox .hand-ask {max-width:none}
.hand-inbox .hand-ask[data-focus] {box-shadow:0 0 0 3px var(--approve-soft)}

/* What a hand knows of how its job is done, each note folded to its title
   and first two lines. */
.hand-notes {display:flex;flex-direction:column;gap:4px}
.hand-notes li + li {border-top:1px solid var(--line)}
.hand-notes summary {display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:44px;padding:7px 0;list-style:none;cursor:pointer}
.hand-notes summary::-webkit-details-marker,.hand-log-day > summary::-webkit-details-marker {display:none}
.hand-notes summary:focus-visible,.hand-log-day > summary:focus-visible {outline:2px solid var(--ai);outline-offset:2px;border-radius:6px}
.hand-note-head {display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;line-height:1.45}
.hand-note-title {min-width:0;overflow-wrap:anywhere}
.hand-new {flex-shrink:0;padding:1px 8px;border-radius:999px;background:var(--ai-soft);color:var(--ai);font-size:11px;font-weight:700}
.hand-note-peek {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;color:var(--muted);font-size:12.5px;line-height:1.5;overflow-wrap:anywhere}
.hand-notes details[open] .hand-note-peek {display:none}
.hand-note-text {margin:0 0 12px;color:var(--ink);font-size:14px;line-height:1.75;overflow-wrap:anywhere}
.hand-note-text p,.hand-note-text ul,.hand-note-text ol {margin:0 0 .6em}
.hand-note-text > :last-child {margin-bottom:0}
.hand-note-text ul,.hand-note-text ol {display:block;padding-left:1.3em;list-style:revert}
/* A table keeps each word whole, so its short columns stay readable beside a
   long one, and scrolls sideways when it is wider than the note. */
.hand-note-text table {display:block;max-width:100%;overflow-x:auto;margin:0 0 .6em}
.hand-note-text th,.hand-note-text td {overflow-wrap:normal}
/* A fold opens downward and closes up. */
.hand-note-head::after,.hand-log-day > summary::after {content:"";flex-shrink:0;width:6px;height:6px;margin:0 4px 3px auto;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg)}
.hand-notes details[open] .hand-note-head::after,.hand-log-day[open] > summary::after {margin-bottom:-3px;transform:rotate(-135deg)}
.hand-notes-hint {margin:0;color:var(--muted);font-size:12.5px}

/* A working hand's work diary: each day one line that opens on its work
   and the changes to how it is done, today open. */
.hand-log {display:flex;flex-direction:column;gap:4px}
.hand-log-day {border-bottom:1px solid var(--line)}
.hand-log-day > summary {display:flex;align-items:center;gap:10px;min-height:44px;list-style:none;cursor:pointer}
.hand-log-date {flex-shrink:0;font-size:14px;font-weight:650}
.hand-log-sum {min-width:0;color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.hand-sum-part {white-space:nowrap}
.hand-log-cases > summary {display:flex;flex-direction:column;list-style:none;cursor:pointer}
.hand-log-cases > summary::-webkit-details-marker {display:none}
.hand-log-cases > summary:focus-visible {outline:2px solid var(--ai);outline-offset:2px;border-radius:6px}
.hand-log-cases:not([open]) .hand-log-said {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.hand-log-day > ul {padding:0 0 6px}
.hand-log-row {display:flex;gap:12px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
/* Room for a run of times, from the first to the last, so names line up. */
.hand-log-day .hand-log-when {min-width:6.2em}
.hand-more {align-self:flex-start;min-height:44px;margin-top:6px;padding:0 16px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.hand-more:focus-visible {outline:2px solid var(--ai);outline-offset:2px}
.hand-log .hand-notes-hint {margin-top:8px}
.hand-log-when {flex-shrink:0;min-width:3.4em;color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.hand-log-row .hand-case {display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.6;overflow-wrap:anywhere}
.hand-log-said {color:var(--muted);font-size:12.5px;line-height:1.5}
.hand-case-state {flex-shrink:0;color:var(--muted);font-size:12.5px}
.hand-log-row[data-state=done] .hand-case-state {color:var(--ok)}
.hand-log-row[data-state=waiting] .hand-case-state {color:var(--approve);font-weight:700}
.hand-log-row[data-state=failed]:not([data-settled]) .hand-case-state {color:var(--wait)}
/* How a piece of work goes, as its steps say: numbered on a rail, a browser
   step's operations under it. */
.hand-how-card {margin-top:6px}
.hand-how-card summary {display:inline-flex;align-items:center;min-height:32px;color:var(--muted);font-size:12.5px;cursor:pointer}
.hand-how {display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.hand-how-step {position:relative;display:flex;gap:10px;padding:0 0 10px;font-size:13.5px;line-height:1.6}
.hand-how-step::before {content:"";position:absolute;top:22px;bottom:0;left:10px;border-left:1.5px solid var(--line)}
.hand-how-step:last-child::before {display:none}
.hand-how-n {flex-shrink:0;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:var(--soft);color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}
.hand-how-step > div {min-width:0}
.hand-how-step p {margin:0;overflow-wrap:anywhere}
.hand-how-step[data-bare=true] > div > p {color:var(--muted)}
.hand-how-ops {margin:4px 0 0;padding-left:18px;color:var(--ink);font-size:12.5px}
.hand-how-ops li {margin:2px 0;overflow-wrap:anywhere}
.hand-how-ops small {color:var(--muted)}

/* A case the hand asks about before going on: the case, what it found, and
   the manager's decision, within reach of a thumb. */
.hand-ask {display:flex;flex-direction:column;gap:10px;max-width:440px;padding:16px 18px;border:1px solid var(--line);border-left:3px solid var(--approve);border-radius:14px;background:var(--panel)}
.hand-ask.is-settled {border-left-color:var(--line);background:var(--paper)}
.hand-ask-head {margin:0;color:var(--approve);font-size:13px;font-weight:700;letter-spacing:.04em}
.hand-ask.is-settled .hand-ask-head {color:var(--muted)}
.hand-ask-case {margin:-4px 0 0;font-family:var(--hand-display);font-size:18px;font-weight:600}
.hand-ask-prompt {margin:0;font-size:15px;line-height:1.7}
.hand-ask .hand-row button {flex:1;min-height:48px}

/* A change: what the manager asked of it, above their decision. */
.hand-change-asked {display:flex;flex-direction:column;gap:4px;margin:0;padding-left:18px;font-size:14.5px;line-height:1.6}

/* The talk links to the hand's know-how, and marks a case the panel led
   to a moment. */
.hand-to-job {color:var(--ai);font-weight:650}
.hand-desk-job {scroll-margin-top:72px}
.hand-ask.is-sought,.hand-account.is-sought {box-shadow:0 0 0 3px var(--approve-soft);outline:none}

@media (min-width:1001px) {
  .hand-main:has(.hand-desk[data-tab]) {padding-bottom:24px}
  /* A working hand's page fits the screen, whatever shows above it, such as
     its waking: only the talk and the panel beside it scroll. */
  .hand-body:has(.hand-desk[data-tab]) {display:flex;flex-direction:column;height:100vh;height:100dvh}
  .hand-body:has(.hand-desk[data-tab]) > .hand-main {flex:1;min-height:0;display:flex;flex-direction:column}
  .hand-desk[data-tab] {flex:1;min-height:0;grid-template-rows:auto minmax(0,1fr) auto}
  .hand-desk[data-tab] > .hand-talk {min-height:0;align-self:stretch}
  .hand-desk[data-tab] .hand-talk-log {min-height:0;max-height:none}
  .hand-desk[data-tab] > .hand-side {height:auto;min-height:0;align-self:stretch}
}

/* On a wide screen the hand's browser stands between the talk and its job,
   as large as the page allows. */
@media (min-width:1400px) {
  .hand-desk:has(.hand-screen:not([hidden])) {grid-template-columns:minmax(380px,.8fr) minmax(0,1.2fr) 320px}
  .hand-desk:has(.hand-screen:not([hidden])) > .hand-screen {grid-column:2;grid-row:1 / -1;position:sticky;top:24px;margin-top:0}
  .hand-desk:has(.hand-screen:not([hidden])) > .hand-desk-job {grid-column:3;grid-row:1 / -1}
}

@media (max-width:1000px) {
  .hand-desk {grid-template-columns:minmax(0,1fr)}
  .hand-desk > .hand-talk,.hand-desk > .hand-screen,.hand-desk-job {grid-column:1;grid-row:auto}
  .hand-desk-job {position:static}
  /* One area at a time, chosen under the title. */
  .hand-desk[data-tab] {grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:12px}
  .hand-desk[data-tab] > .hand-head {order:-3;margin-bottom:4px}
  .hand-side {display:contents}
  .hand-switch {order:-2;position:sticky;top:8px;z-index:5;margin:0;box-shadow:0 0 0 8px var(--paper)}
  .hand-tab[data-tab=talk] {display:block}
  .hand-desk[data-tab] > .hand-screen {order:-1;margin-top:0}
  .hand-panels {border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:visible}
  .hand-desk[data-tab]:not([data-tab=talk]) > .hand-talk,.hand-desk[data-tab]:not([data-tab=talk]) > .hand-screen,.hand-desk[data-tab=talk] .hand-panels {display:none}
  /* The talk fills the screen, its newest words and its composer always in
     view. */
  .hand-body:has(.hand-desk[data-tab=talk]) {display:flex;flex-direction:column;height:100vh;height:100dvh}
  .hand-body:has(.hand-desk[data-tab=talk]) > .hand-main {flex:1;min-height:0;display:flex;flex-direction:column;padding-bottom:16px}
  .hand-desk[data-tab=talk] {flex:1;min-height:0;display:flex;flex-direction:column;align-items:stretch}
  .hand-desk[data-tab=talk] > .hand-talk {flex:1;min-height:0}
  .hand-desk[data-tab=talk] .hand-talk-log {min-height:0;max-height:none}
}

@media (max-width:680px) {
  .hand-app {grid-template-columns:minmax(0,1fr)}
  .hand-rail {display:none}

  .hand-bar {
    position:sticky;
    top:0;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:calc(8px + env(safe-area-inset-top)) 12px 8px 16px;
    border-bottom:1px solid var(--line);
    background:color-mix(in srgb,var(--paper) 92%,transparent);
    backdrop-filter:blur(10px)
  }

  .hand-bar .hand-brand {padding:0;font-size:19px}
  .hand-bar .brand-mark {width:30px;height:30px;border-radius:8px}
  .hand-main {padding:24px 16px calc(96px + env(safe-area-inset-bottom))}
  .hand-head {margin-bottom:20px}

  .hand-tabs {
    position:fixed;
    inset:auto 0 0 0;
    z-index:10;
    display:flex;
    flex-direction:row;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);
    background:color-mix(in srgb,var(--paper) 94%,transparent);
    backdrop-filter:blur(10px)
  }

  .hand-tab-link {
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    min-height:50px;
    border-radius:10px;
    color:var(--muted);
    font-size:11.5px;
    font-weight:650;
    text-decoration:none
  }

  .hand-tab-link[aria-current=page] {color:var(--ink)}
  .hand-tab-link .hand-glyph {width:22px;height:22px}
  .hand-seats {grid-template-columns:minmax(0,1fr)}
  .hand-kinds {grid-template-columns:minmax(0,1fr)}
  .hand-kind {min-height:0}
  .hand-talk {min-height:0;border-radius:14px}
  .hand-talk-log {max-height:none;min-height:40vh;padding:16px}
  .hand-turn-manager {max-width:88%}
  /* Under the bar at the top, and above the tabs fixed at the bottom. */
  .hand-switch {top:calc(69px + env(safe-area-inset-top))}
  .hand-body:has(.hand-desk[data-tab=talk]) > .hand-main {padding-bottom:calc(76px + env(safe-area-inset-bottom))}
}
.hand-plan {margin:6px 0 0;color:var(--muted);font-size:13px}

/* A hand's public links: those made, and a new one shown as the company
   will see it. */
.hand-share {display:flex;flex-direction:column;gap:24px;color:var(--ink)}
.hand-share h3 {margin:0 0 10px;color:var(--muted);font-size:12px;font-weight:650;letter-spacing:.06em}
.hand-share .hand-lede {margin:0}
.hand-share-list {display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.hand-share-link {display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:12px 16px}
.hand-share-link + .hand-share-link {border-top:1px solid var(--line)}
.hand-share-link[data-ended=true] {color:var(--muted)}
.hand-share-link-head {display:flex;align-items:center;gap:10px;flex:1 1 200px;min-width:0}
.hand-share-link-head strong {font-size:15px;overflow-wrap:anywhere}
.hand-share-facts {display:flex;flex-wrap:wrap;gap:4px 18px;margin:0}
.hand-share-facts div {display:flex;flex-direction:column}
.hand-share-facts dt {color:var(--muted);font-size:11.5px}
.hand-share-facts dd {margin:0;font-size:13.5px;font-variant-numeric:tabular-nums}
.hand-share-link .hand-row {align-items:center;margin-left:auto}
.hand-share-ask {font-size:13.5px}
.hand-share-form {display:flex;flex-direction:column;gap:18px}
.hand-share-fields {display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px}
.hand-share-field {display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:650}
.hand-share-field input,.hand-share-field select,.hand-share-field textarea,.hand-share-url input,.share-field input,.share-field textarea {
  box-sizing:border-box;
  width:100%;
  min-height:46px;
  padding:0 14px;
  border:1.5px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  color:var(--ink);
  font:inherit;
  font-size:16px;
  font-weight:400
}
.hand-share-field input:focus,.hand-share-field select:focus,.hand-share-field textarea:focus,.share-field input:focus,.share-field textarea:focus {outline:none;border-color:var(--ai);box-shadow:0 0 0 3px var(--ai-soft)}
/* The line for the company spans the row and wraps like the page shows it. */
.hand-share-line {grid-column:1 / -1}
.hand-share-field textarea {padding:12px 14px;line-height:1.5;resize:vertical}
.hand-share-pick {margin:0;padding:0;border:0}
.hand-share-pick legend {margin-bottom:8px;padding:0;font-size:13px;font-weight:650}
.hand-share-pick ul {display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.hand-share-check {display:flex;align-items:center;gap:10px;min-height:40px;font-size:14.5px;cursor:pointer}
.hand-share-check input,.hand-share-shot input {width:18px;height:18px;margin:0;accent-color:var(--ink);flex-shrink:0}
.hand-share-warn {margin:0 0 10px;padding:10px 12px;border-radius:10px;background:var(--wait-soft);color:var(--wait);font-size:13px;line-height:1.6}
.hand-share-pick ul.hand-share-shots {display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.hand-share-shot {position:relative;display:flex;flex-direction:column;gap:6px;padding:8px;border:1.5px solid var(--line);border-radius:12px;background:var(--panel);font-size:12.5px;color:var(--muted);cursor:pointer}
.hand-share-shot:has(input:checked) {border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.hand-share-shot input {position:absolute;top:14px;left:14px}
.hand-share-shot img {width:100%;aspect-ratio:16 / 10;object-fit:cover;object-position:top;border-radius:8px;background:var(--soft)}
.hand-share-preview {margin:0}
.hand-share-frame {max-height:60vh;overflow:auto;border:1px solid var(--line);border-radius:16px;background:var(--paper)}
.hand-share-frame .share {padding:28px clamp(16px,4vw,40px)}
.hand-share-form > .hand-primary {align-self:flex-start}
.hand-share-done {display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.hand-share-done h3 {margin:0;color:var(--ok);font-size:16px;letter-spacing:0}
.hand-share-done p {margin:0;font-size:14.5px}
.hand-share-url {display:flex;gap:8px;width:100%}
.hand-share-url input {flex:1;min-width:0;font-size:14px}

/* The public page of a hand, which a company reads without signing in. */
body.share-page {margin:0;background:var(--paper);color:var(--ink)}
.share-main {box-sizing:border-box;width:100%;max-width:880px;margin-inline:auto;padding:40px 16px 64px}
.share {display:flex;flex-direction:column;gap:28px}
.share-head {display:flex;flex-direction:column}
.share-brand {display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;font-size:15px;font-weight:700}
.share-brand .brand-mark {width:26px;height:26px;border-radius:7px}
.share-head .hand-lede {margin-top:8px;font-size:16px;color:var(--ink)}
.share-asof {margin:6px 0 0;color:var(--muted);font-size:13px}
.share-section {display:flex;flex-direction:column;gap:14px}
.share-section h2 {margin:0;font-family:var(--hand-display);font-size:22px;font-weight:600}
.share-result,.share-work {display:flex;flex-direction:column;gap:12px;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.share-result h3,.share-work h3 {margin:0;font-size:16px}
.share-when {margin:2px 0 0;color:var(--muted);font-size:13px}
.share-table .chat-data-name {margin:0 0 6px;color:var(--muted);font-size:12px;font-weight:650}
.share-table .chat-data-count {font-weight:400}
.share-table .chat-data-scroll {max-height:420px;overflow:auto;border:1px solid var(--line);border-radius:10px}
.share-table .chat-data-table {border-collapse:collapse;width:max-content;min-width:100%;font-size:13px}
.share-table .chat-data-table th,.share-table .chat-data-table td {padding:7px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;max-width:320px;overflow-wrap:anywhere}
.share-table .chat-data-table th {position:sticky;top:0;background:var(--soft);color:var(--ink);font-size:12.5px;font-weight:650;letter-spacing:0;text-transform:none}
.share-empty {margin:0;padding:14px 16px;border-radius:10px;background:var(--paper);color:var(--muted);font-size:14.5px}
.share-values {display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:0}
.share-values div {padding:10px 12px;border-radius:10px;background:var(--paper)}
.share-values dt {color:var(--muted);font-size:12px}
.share-values dd {margin:2px 0 0;font-size:14.5px;overflow-wrap:anywhere}
.share-report {margin:0;padding:14px 16px;border-left:3px solid var(--ai);border-radius:0 10px 10px 0;background:var(--paper)}
.share-report table {border-collapse:collapse;font-size:13px}
.share-report th,.share-report td {padding:4px 8px;border:1px solid var(--line)}
.share-shots {display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.share-shot {padding:0;border:1px solid var(--line);border-radius:10px;background:var(--soft);overflow:hidden;cursor:zoom-in}
.share-shot img {display:block;width:100%;aspect-ratio:16 / 10;object-fit:cover;object-position:top}
.share-shot:focus-visible {outline:2px solid var(--ai);outline-offset:2px}
.share-section .hand-notes {padding:6px 20px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.share-section .hand-notes ul {display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.share-form fieldset {display:flex;flex-direction:column;gap:14px;max-width:560px;margin:0;padding:0;border:0}
.share-form fieldset:disabled {opacity:.7}
.share-field {display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:650}
.share-field textarea {min-height:132px;padding:12px 14px;line-height:1.6;resize:vertical}
.share-form .hand-primary {align-self:flex-start}
/* The offer to try the hand stands out from the parts that only show it. */
.share-try {display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px 22px;border:1.5px solid var(--ai);border-radius:16px;background:var(--ai-soft)}
.share-try h2 {margin:0;font-family:var(--hand-display);font-size:22px;font-weight:600}
.share-try .hand-lede {margin:0;color:var(--ink)}
.share-try [aria-disabled="true"] {opacity:.6;cursor:default}
.share-trap {position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.share-sent {margin:0;padding:16px 18px;border-radius:14px;background:var(--ok-soft);color:var(--ok);font-size:15px}
.share-foot {display:flex;flex-direction:column;gap:6px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;line-height:1.7}
.share-foot p {margin:0}
.share-foot a {color:inherit}
.share-loading {color:var(--muted);font-size:15px}

@media (max-width:640px) {
  .hand-share-fields {grid-template-columns:minmax(0,1fr)}
  .share-main {padding-top:24px}
  .share-result,.share-work {padding:16px}
  .share-shots {grid-template-columns:minmax(0,1fr)}
}