:root {
  --teal: #1f8a8a;
  --coral: #e4572e;
  --gold: #f2b134;
  --ink: #14161a;
  --night: #13161c;
  --bg: #fbfaf7;
  --surface: #fff;
  --text: #14161a;
  --muted: #565d6a;
  --rule: #e3e1db;
  --link: #176e6e;
  --draft: #b3421f;
  --tint-teal: rgba(31, 138, 138, 0.09);
  --tint-coral: rgba(228, 87, 46, 0.09);
  --tint-gold: rgba(242, 177, 52, 0.14);
  --zebra: #f6f4ef;
  --stripe: linear-gradient(90deg, var(--teal) 0 33.3%, var(--coral) 33.3% 66.6%, var(--gold) 66.6%);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #13161c;
    --surface: #1b1f27;
    --text: #f3f1ec;
    --muted: #a3a9b4;
    --rule: #2c313b;
    --link: #62c9c9;
    --draft: #f2936f;
    --tint-teal: rgba(31, 138, 138, 0.16);
    --tint-coral: rgba(228, 87, 46, 0.14);
    --tint-gold: rgba(242, 177, 52, 0.12);
    --zebra: #20252e;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.bar, main { max-width: 52rem; margin: 0 auto; padding: 0 16px; }

a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }


.top { padding-top: 5px; background: var(--stripe) top / 100% 5px no-repeat, var(--surface); border-bottom: 1px solid var(--rule); }
.top .bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.brand img { display: block; height: 34px; width: auto; transition: opacity .15s; }
.brand:hover img, .brand:focus-visible img { opacity: .75; }
.brand-text { font-weight: 700; font-size: 1.4rem; line-height: 34px; }
.top nav { display: flex; gap: 4px 20px; flex-wrap: wrap; font-size: 15px; font-weight: 600; }
.top nav a { color: var(--text); text-decoration: none; }
.top nav a:hover { color: var(--link); }
.top nav:has(.flow) { width: 100%; justify-content: space-between; }
.top .bar:has(nav .flow) { max-width: 68rem; }
.top nav .flow, .top nav .account { display: flex; gap: 4px 20px; flex-wrap: wrap; }
.top nav .account { font-weight: 500; }
.top nav .account a { color: var(--muted); }
.page-data .top a[href="/data"], .page-teams .top a[href="/teams"], .page-kappy .top a[href="/kappy"],
.page-tasks .top a[href="/tasks"], .page-organization .top a[href="/organization"],
.page-support .top a[href="/support"] { color: var(--link); text-decoration: underline 2px; text-underline-offset: 6px; }
.top .bar { position: relative; }
.top .tools { display: flex; align-items: center; gap: 12px; margin-left: auto; font-size: 15px; font-weight: 500; }
.top .tools a { color: var(--muted); text-decoration: none; }
.top .tools a:hover { color: var(--link); }
.menu-open { display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--rule);
  border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; }
.menu-open svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-open[aria-expanded="true"] { background: var(--tint-teal); border-color: var(--teal); }
.menu-open:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.org-switch { font-size: 15px; font-weight: 500; color: var(--muted); }
.org-switch[hidden] { display: none; }
.org-switch select { font: inherit; padding: 4px 6px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--text); }
@media (max-width: 900px) {
  .top .bar { padding-top: 10px; padding-bottom: 0; gap: 4px 12px; }
  .menu-open { display: grid; }
  .top nav:has(.flow) { flex-wrap: nowrap; }
  .top nav .flow { flex-wrap: nowrap; gap: 20px; overflow-x: auto; scrollbar-width: none; white-space: nowrap;
    min-width: 0; margin: 0 -16px; padding: 6px 16px 12px; width: calc(100% + 32px);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .top nav .flow::-webkit-scrollbar { display: none; }
  .top nav .account { display: none; position: absolute; z-index: 20; top: 58px; right: 16px;
    flex-direction: column; gap: 0; min-width: 14rem; padding: 6px; background: var(--surface); border: 1px solid var(--rule);
    border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
  .top.menu-shown nav .account { display: flex; }
  .top nav .account a { padding: 10px 12px; border-radius: 8px; color: var(--text); }
  .top nav .account a:hover { background: var(--tint-teal); }
  .top nav .account a[hidden] { display: none; }
  .top nav .account .org-switch { display: grid; gap: 4px; padding: 10px 12px; border-top: 1px solid var(--rule); }
  .top nav .account .org-switch[hidden] { display: none; }
  main { padding-top: 24px; }
}


main { flex: 1; width: 100%; padding-top: 40px; padding-bottom: 64px; }

h1 { font-size: clamp(30px, 6vw, 42px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 20px; }
h1::after { content: ""; display: block; width: 96px; height: 6px; margin-top: 16px; border-radius: 3px; background: var(--stripe); }
h2 { font-size: 24px; line-height: 1.3; letter-spacing: -0.01em; margin: 44px 0 12px; }
h3 { font-size: 19px; margin: 28px 0 8px; }

h2.step { display: flex; align-items: center; gap: 12px; }
.n { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: 17px; color: #fff; }
.n.c1 { background: var(--teal); }
.n.c2 { background: var(--coral); }
.n.c0 { background: var(--gold); color: var(--ink); }

.page-start main { max-width: 76rem; }
.steps { list-style: none; padding: 0; margin: 32px 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px; }
.steps li { position: relative; display: flex; }
.steps li + li::before { content: "→"; position: absolute; left: -23px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 20px; }
.steps a { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px 14px; background: var(--surface); border: 1px solid var(--rule); border-top: 5px solid var(--teal); border-radius: 12px; color: var(--text); text-decoration: none; }
.steps a:hover { border-color: var(--link); }
.steps strong { font-size: 17px; line-height: 1.3; }
.steps span:not(.n) { font-size: 14px; line-height: 1.5; color: var(--muted); }
.steps .c1 .n { background: var(--teal); }
.steps .c2 a { border-top-color: var(--coral); }
.steps .c2 .n { background: var(--coral); }
.steps .c0 a { border-top-color: var(--gold); }
.steps .c0 .n { background: var(--gold); color: var(--ink); }
.steps .back a { border-style: dashed; border-top-style: solid; background: var(--tint-gold); }
@media (max-width: 1100px) and (min-width: 761px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .steps li:nth-child(3n + 1)::before { content: none; }
}
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: 26px; }
  .steps li + li::before { content: "↓"; left: 50%; top: -24px; transform: translateX(-50%); }
  .steps a { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
  .steps span:not(.n) { grid-column: 2; }
}

.draft {
  display: inline-block; margin: 0 0 8px; padding: 2px 12px; border-radius: 999px;
  border: 1px solid currentColor; color: var(--draft); font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
}

ul, ol { padding-left: 1.3em; }
li { margin: 4px 0; }
li::marker { color: var(--teal); }
hr { border: 0; height: 1px; background: var(--rule); margin: 40px 0; }

blockquote { margin: 20px 0; padding: 4px 20px; border-left: 4px solid var(--gold); background: var(--tint-gold); border-radius: 0 8px 8px 0; }

code { font: 0.86em/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--tint-teal); padding: 1px 5px; border-radius: 4px; }
pre { background: var(--ink); color: #f3f1ec; padding: 16px 18px; border-radius: 10px; border-left: 4px solid var(--teal); overflow-x: auto; }
pre code { background: none; padding: 0; font-size: 14px; }

.table { overflow-x: auto; margin: 20px 0; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
tr:last-child td { border-bottom: 0; }
th { background: var(--tint-teal); font-weight: 650; }


.hero { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px 40px; margin: 8px 0 48px; }
.hero h1 { font-size: clamp(34px, 7vw, 52px); }
.hero p:not(.draft) { font-size: 19px; color: var(--muted); max-width: 32rem; }
.hero-mark {
  display: grid; place-items: center; width: clamp(200px, 26vw, 260px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, var(--tint-teal), transparent 60%),
              radial-gradient(circle at 80% 40%, var(--tint-coral), transparent 60%),
              radial-gradient(circle at 45% 85%, var(--tint-gold), transparent 60%), var(--surface);
  box-shadow: 0 0 0 1px var(--rule); overflow: hidden;
}
.hero-mark img { display: block; width: 115%; height: auto; margin-left: 8%; }
@media (max-width: 640px) {
  .hero { grid-template-columns: 1fr; }
  .hero-mark { grid-row: 1; }
  .hero-mark { width: 120px; height: 120px; }
}

.button {
  display: inline-block; margin: 6px 6px 6px 0; padding: 11px 18px; border-radius: 10px;
  background: var(--teal); color: #fff; font-weight: 650; text-decoration: none;
}
.button:hover { background: #187474; text-decoration: none; }
.button.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--rule); }
.button.ghost:hover { box-shadow: inset 0 0 0 2px var(--coral); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--rule); border-top: 5px solid var(--teal); border-radius: 12px; padding: 4px 20px 8px; }
.card h3 { margin-top: 18px; }
.card p { font-size: 16px; }
.card.coral { border-top-color: var(--coral); }
.card.gold { border-top-color: var(--gold); }


footer { padding-top: 5px; background: var(--stripe) top / 100% 5px no-repeat, var(--night); color: #a3a9b4; }
footer .bar { padding-top: 32px; padding-bottom: 40px; }
.footer-logo { height: 30px; width: auto; display: block; margin-bottom: 16px; }
footer nav { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 15px; }
footer a { color: #f3f1ec; text-decoration: none; }
footer a:hover { color: #62c9c9; }
footer p { font-size: 14px; margin: 16px 0 0; }

.page-soon { min-height: 100vh; display: flex; flex-direction: column; }
.soon { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
        text-align: center; padding: 48px 24px; max-width: none; }
.soon h1 { margin: 0; }
.soon h1::after { content: none; }
.soon img { display: block; width: min(480px, 80vw); height: auto; }
.soon .tagline { margin: 28px 0 0; font-size: 1.25rem; color: var(--muted); }
.soon .soon-what { list-style: none; margin: 36px 0 0; padding: 22px 0 0; max-width: 38rem; font-size: 1.05rem;
                   line-height: 1.5; border-top: 3px solid; border-image: var(--stripe) 1; }
.soon .soon-what li { text-wrap: balance; }
.soon .soon-what li + li { margin-top: 10px; }
.soon-top { display: flex; justify-content: flex-end; padding: 16px 16px 0; }
.soon-top .button { margin: 0; padding: 9px 20px; box-shadow: inset 0 0 0 2px var(--teal); }
footer.soon-footer { background: none; text-align: center; padding: 24px; font-size: 0.85rem; }
footer.soon-footer a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }


.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kappy-intro { margin-bottom: 24px; }
.kappy-intro p { font-size: 19px; color: var(--muted); max-width: 40rem; }

.kappy { background: var(--surface); border: 1px solid var(--rule); border-top: 5px solid var(--teal); border-radius: 12px; padding: 16px; }
.kappy-log { max-height: min(60vh, 560px); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 4px 2px 12px; }
.msg { display: flex; gap: 10px; align-items: flex-start; }
.msg.from-you { justify-content: flex-end; }
.msg .avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--tint-teal); padding: 7px; }
.msg .avatar img { display: block; width: 100%; height: 100%; }
.bubble { max-width: min(36rem, 85%); padding: 10px 14px; border-radius: 14px; font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.bubble p, .bubble ul, .bubble ol { margin: 0 0 8px; }
.bubble > :last-child { margin-bottom: 0; }
.msg.from-kappy .bubble { background: var(--tint-teal); border-top-left-radius: 4px; }
.msg.from-you .bubble { background: var(--tint-gold); border-top-right-radius: 4px; }
.kappy-thinking { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px 4px; color: var(--muted); font-size: 15px; font-style: italic; }
.kappy-thinking[hidden] { display: none; }
.kappy-thinking .dots { display: inline-flex; gap: 5px; }
.kappy-thinking .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal, #1f8a8a); opacity: 0.25; animation: kappy-dot 1.2s ease-in-out infinite; }
.kappy-thinking .dots i:nth-child(2) { animation-delay: 0.2s; }
.kappy-thinking .dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes kappy-dot { 0%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kappy-thinking .dots i { animation: none; opacity: 0.6; } }
.kappy-form textarea {
  width: 100%; resize: vertical; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 16px;
}
.kappy-form textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.kappy-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.kappy-actions button { border: 0; cursor: pointer; font: inherit; font-weight: 650; }
.kappy-actions button:disabled { opacity: 0.55; cursor: default; }
.kappy-error { margin: 8px 0 0; color: var(--draft); font-size: 15px; }

.kappy-proposal { background: var(--surface); border: 1px solid var(--rule); border-top: 5px solid var(--coral); border-radius: 12px; padding: 4px 16px 16px; min-width: 0; }
.kappy-proposal h2 { margin-top: 18px; }
.kappy-name { all: unset; cursor: text; border-radius: 6px; overflow-wrap: anywhere; }
.kappy-name::after { content: "✎"; margin-left: 8px; font-size: 0.7em; font-weight: 400; color: var(--muted); }
.kappy-name:hover { text-decoration: underline dashed var(--muted); text-underline-offset: 4px; }
.kappy-name:hover::after { color: var(--text); }
.kappy-name:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.kref { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--rule); }
.kref[hidden] { display: none; }
.kref.asking { border: 2px solid var(--teal); background: color-mix(in srgb, var(--teal) 8%, var(--bg));
               box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 18%, transparent); animation: kref-pulse 1.6s ease-in-out 3; }
@keyframes kref-pulse { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--teal) 10%, transparent); } }
@media (prefers-reduced-motion: reduce) { .kref.asking { animation: none; } }
.kref-tag { display: inline-block; margin-bottom: 6px; padding: 1px 8px; border-radius: 999px; background: var(--teal);
            color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .3px; }
.kref h3 { margin: 0 0 4px; font-size: 17px; }
.kref p { margin: 0 0 10px; font-size: 14px; }
.kref small { display: block; color: var(--muted); font-size: 12.5px; }
.kref-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.kref-row .button { border: 0; cursor: pointer; font: inherit; font-weight: 650; }
.kref-row .button.ghost { box-shadow: inset 0 0 0 2px var(--rule); background: transparent; color: inherit; }
.kref figure { margin: 0 0 8px; padding: 8px; border: 2px dashed var(--muted); border-radius: 10px; display: inline-block; }
.kref figcaption { font-size: 14px; margin-bottom: 4px; }
.kref-thumb { position: relative; display: inline-block; }
.kref-thumb img { display: block; height: 96px; width: auto; border-radius: 8px; }
.kref-thumb b { position: absolute; top: 4px; left: 4px; padding: 1px 6px; border-radius: 4px; background: var(--text);
                color: var(--bg); font-size: 11px; letter-spacing: .5px; }
.kref-pictures { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; margin-top: 10px; }
.kref-pictures[hidden] { display: none; }
.kref-pictures p { grid-column: 1 / -1; margin: 0; }
.kref-pictures button { all: unset; cursor: pointer; border-radius: 8px; overflow: hidden; aspect-ratio: 1; }
.kref-pictures button:focus-visible, .kref-pictures button:hover { outline: 3px solid var(--teal); }
.kref-pictures img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kappy-rename { display: inline; margin: 0; }
.kappy-rename input { font: inherit; width: 100%; box-sizing: border-box; padding: 2px 8px; border: 1px solid var(--rule);
  border-radius: 6px; background: var(--surface); color: var(--text); }
.kappy-updated { display: none; vertical-align: middle; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: var(--tint-gold); color: var(--text); font-size: 13px; font-weight: 650; }
.kappy-proposal.updated .kappy-updated { display: inline-block; animation: kappy-fade 10s forwards; }
@keyframes kappy-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.kappy-note { align-self: center; margin: 0; padding: 4px 12px; border-radius: 999px; background: var(--tint-gold); color: var(--muted); font-size: 14px; }
.kappy-tabs { display: flex; gap: 4px; margin: 4px 0 8px; border-bottom: 1px solid var(--rule); clear: both; }
.kappy-tabs button { margin-bottom: -1px; padding: 8px 14px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); font: inherit; font-weight: 650; cursor: pointer; }
.kappy-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--coral); }
.kappy-report iframe { display: block; width: 100%; height: calc(100vh - 260px); min-height: 480px; border: 1px solid var(--rule); border-radius: 8px; background: #fff; }
.kappy-sub { color: var(--muted); font-size: 15px; }
.kappy-phone { width: min(390px, 100%); height: 760px; max-height: 85vh; margin: 16px auto 20px; border: 10px solid #1d2128; border-radius: 34px; overflow: hidden; background: var(--bg); box-shadow: 0 6px 24px rgba(0, 0, 0, .15); }
.kappy-phone iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 480px) { .kappy-phone { border-width: 6px; border-radius: 24px; } }
.notes { font-size: 16px; }

.page-kappy main { max-width: 68rem; }
.kappy-main { display: grid; gap: 16px; align-items: start; grid-template-areas: "side" "chat" "panel"; }
.kappy-side { grid-area: side; display: grid; gap: 12px; min-width: 0; }
.kappy { grid-area: chat; min-width: 0; }
.kappy-proposal { grid-area: panel; }
.kappy-main:not(:has(.kappy-past:not([hidden]))) .kappy-side { display: none; }
.kappy-switch { display: none; }
@media (max-width: 899px) {
  .kappy-main { grid-template-areas: "side" "switch" "view"; }
  .kappy, .kappy-proposal { grid-area: view; }
  .kappy-main.show-task .kappy, .kappy-main:not(.show-task) .kappy-proposal { display: none; }
  .kappy-switch { grid-area: switch; display: flex; position: sticky; top: 0; z-index: 1; background: var(--bg); border-bottom: 1px solid var(--rule); }
  .kappy-switch button { flex: 1; padding: 12px 8px; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; background: none; color: var(--muted); font: inherit; font-weight: 650; cursor: pointer; }
  .kappy-switch button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--teal); }
  .kappy-switch button[data-view="task"][aria-selected="true"] { border-bottom-color: var(--coral); }
}
.kappy-dot { display: none; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--coral); vertical-align: middle; }
.kappy-switch .fresh .kappy-dot { display: inline-block; }
@media (min-width: 900px) {
  .kappy-main { grid-template-columns: minmax(0, 1fr) 26rem; grid-template-areas: "side side" "chat panel"; }
  .kappy-side { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: start; }
  .kappy-proposal { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
}
@media (min-width: 1100px) {
  .page-kappy main { max-width: 90rem; }
  .kappy-main { grid-template-columns: 15rem minmax(0, 1fr) 26rem; grid-template-areas: "side chat panel"; }
  .kappy-main:not(:has(.kappy-past:not([hidden]))) { grid-template-columns: minmax(0, 1fr) 26rem; grid-template-areas: "chat panel"; }
  .kappy-side { grid-template-columns: none; }
}
.kappy-past { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 4px 8px; min-width: 0; }
.kappy-past summary { cursor: pointer; padding: 8px; font-weight: 650; }
.kappy-past ol { list-style: none; margin: 0; padding: 0 0 6px; display: grid; gap: 2px; }
.kappy-past li { margin: 0; }
.kappy-past button { display: grid; width: 100%; text-align: left; gap: 2px; padding: 8px; border: 0; border-radius: 8px;
                     background: none; color: var(--text); font: inherit; font-size: 15px; cursor: pointer; }
.kappy-past button:hover { background: var(--tint-teal); }
.kappy-past button[aria-current="true"] { background: var(--tint-teal); box-shadow: inset 3px 0 0 var(--teal); }
.kappy-past button span { overflow-wrap: anywhere; }
.kappy-past a { display: grid; gap: 2px; padding: 8px; border-radius: 8px; color: inherit; text-decoration: none; }
.kappy-past a:hover { background: var(--tint-teal); }
.kappy-past a small { color: var(--muted); }
.kappy-side-note { margin: 0; padding: 0 8px 8px; color: var(--muted); font-size: 13px; }
.kappy-side-note a { display: inline; padding: 0; color: var(--teal); text-decoration: underline; }
.filters.kappy-filters { flex-direction: column; gap: 6px; margin: 0; padding: 0 8px 8px; }
.filters.kappy-filters input, .filters.kappy-filters select { flex: none; width: 100%; font-size: 14px; padding: 6px 8px; }
.filters.kappy-filters[hidden] { display: none; }
#kappy-datasets-list { gap: 8px; }
.kappy-set { display: flex; align-items: center; gap: 4px; border: 1px solid rgba(31, 138, 138, .45);
  border-radius: 10px; background: rgba(31, 138, 138, .14); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.kappy-set:hover { border-color: var(--teal); background: rgba(31, 138, 138, .2); }
.kappy-set:has(button[aria-current="true"]) { border: 2px solid var(--teal); box-shadow: inset 4px 0 0 var(--teal);
  background: rgba(31, 138, 138, .26); }
.kappy-set button { flex: 1; min-width: 0; }
.kappy-set { min-width: 0; }
.kappy-set button small { overflow-wrap: anywhere; }
.kappy-past .kappy-set button { background: none; box-shadow: none; }
.kappy-set > a { display: inline; padding: 4px 8px; font-size: 13px; color: var(--teal); }
.kappy-dataset { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
.kappy-dataset strong { color: var(--text); }
.kappy-lock { margin: 0 0 10px; padding: 10px 14px; border-radius: 10px; background: var(--tint-teal);
  box-shadow: inset 3px 0 0 var(--teal); }
.kappy-lock a { color: var(--teal); }
.needs-dataset .kappy-log, .needs-dataset .kappy-form { opacity: .45; }
.needs-dataset .kappy-form textarea { cursor: not-allowed; }
.needs-dataset #kappy-datasets, #kappy-datasets.flash { border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--tint-teal), 0 0 0 4px var(--teal); }
.needs-dataset #kappy-datasets { animation: kappy-call 1.6s ease-in-out 3; }
@keyframes kappy-call { 50% { box-shadow: 0 0 0 7px var(--tint-teal), 0 0 0 8px var(--teal); } }
#kappy-datasets.flash { animation: kappy-call 1s ease-in-out 1 forwards; }
@media (prefers-reduced-motion: reduce) { .needs-dataset #kappy-datasets, #kappy-datasets.flash { animation: none; } }
.kappy-past small { color: var(--muted); font-size: 13px; }
.kappy-viewing { background: var(--tint-gold); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
.kappy-viewing p { margin: 0 0 6px; }
.kappy-viewing[hidden], .kappy-form[hidden], .kappy-past[hidden], .kappy-actions .button[hidden] { display: none; }
.kappy-viewing button { border: 0; cursor: pointer; font: inherit; font-weight: 650; }

.signin form { display: grid; gap: 14px; width: min(360px, 100%); margin-top: 32px; }
.signin label { display: grid; gap: 6px; font-weight: 600; font-size: 0.95rem; }
.signin input { font: inherit; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px;
  background: var(--surface); color: var(--text); }
.signin input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.signin button { border: 0; cursor: pointer; font: inherit; font-weight: 650; }
.signin button:disabled { opacity: 0.55; cursor: default; }
.signin .password { position: relative; display: grid; }
.signin .password input { padding-right: 72px; }
.signin .password-show { position: absolute; top: 4px; right: 4px; bottom: 4px; padding: 0 12px; border-radius: 6px;
  background: transparent; color: var(--teal); font-size: 0.9rem; }
.signin .password-show[aria-pressed="true"] { background: var(--rule); color: var(--text); }
.signin .password-show:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.signin label.accept { display: flex; justify-content: center; align-items: flex-start; gap: 10px; font-weight: 400; }
.signin .accept input { flex: none; margin: 2px 0 0; padding: 0; width: 18px; height: 18px; accent-color: var(--teal); }
.signin-error { margin: 0; color: var(--draft); }
.signin-intro { margin: 28px 0 0; max-width: 360px; text-align: center; }
.signin small { font-weight: 400; color: var(--muted); font-size: 0.85rem; }
.signin form[hidden], .signin label[hidden], .signin div[hidden] { display: none; }
.signin form > div { display: grid; gap: 14px; }
.signin-links { margin: 0; text-align: center; font-size: 0.9rem; }
.signin-note { margin: 20px 0 0; color: var(--muted); font-size: 0.9rem; text-align: center; }
.approve-request { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 24px 0 0; max-width: 420px; width: 100%; }
.approve-request dt { color: var(--muted); }
.approve-request dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.approve-done { margin: 24px 0 0; max-width: 420px; width: 100%; padding: 14px 18px; background: var(--surface); border: 1px solid var(--rule); border-left: 5px solid var(--teal); border-radius: 10px; }
.approve-done[hidden] { display: none; }
.approve-pictures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0 0; max-width: 420px; width: 100%; }
.approve-pictures[hidden], .approve-priority[hidden] { display: none; }
.approve-pictures img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.approve-pictures p { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.approve-priority { display: block; margin: 18px 0 12px; }
.approve-done p { margin: 0; overflow-wrap: anywhere; }
.approve-done-title { font-weight: 650; color: var(--teal); margin-bottom: 4px !important; }

.org-intro { font-size: 19px; color: var(--muted); }
.org-sub { color: var(--muted); font-size: 15px; }
.org-form { display: grid; gap: 12px; max-width: 28rem; }
.org-form label { display: grid; gap: 4px; font-weight: 600; font-size: 15px; }
.org-form small { font-weight: 400; color: var(--muted); }
.org-form fieldset { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.org-form fieldset[hidden], .org-form label[hidden] { display: none; }
.data-steps { margin: 6px 0 0; padding-left: 1.4em; display: grid; gap: 4px; }
.data-cli { min-width: 0; }
.data-cli summary { cursor: pointer; font-weight: 650; }
.data-cli pre { margin: 8px 0; font-size: 13px; white-space: pre; max-height: 420px; overflow: auto; }
.org-form input, .org-form select, select.org-role { font: inherit; font-weight: 400; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--text); }
.org-form .button { justify-self: start; border: 0; cursor: pointer; font: inherit; font-weight: 650; }
.org-form .button:disabled { opacity: 0.55; cursor: default; }
.org-sent { margin: 0; color: var(--link); font-size: 15px; }
.org-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.org-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; padding: 10px 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); }
.org-list li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.org-actions { display: flex; align-items: center; gap: 14px; }
.org-list small { display: block; color: var(--muted); font-size: 13px; }
.org-link { border: 0; background: none; padding: 0; color: var(--link); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: underline; }
.org-error { color: var(--draft); }
#org[hidden], #org-inviting[hidden], .org-error[hidden], .org-sent[hidden], .org-sub[hidden] { display: none; }

.data-sample { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.data-sample figure { margin: 0; }
.data-sample img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--rule); background: var(--surface); }
.data-sample video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: #000; }
.data-sample .item-text { aspect-ratio: 4 / 3; overflow: hidden; padding: 8px; font-size: 13px; border-radius: 8px; border: 1px solid var(--rule); background: var(--surface); }
.data-sample figcaption { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
#dataset progress { width: 100%; max-width: 28rem; accent-color: var(--teal); }
#dataset progress[hidden], #data-report[hidden], #data-adding[hidden], #data-list[hidden], #data-new[hidden], #data-check[hidden], #dataset-failed[hidden] { display: none; }
.subtabs { display: flex; gap: 6px; margin: 8px 0 16px; border-bottom: 1px solid var(--rule); }
.subtabs[hidden] { display: none; }
.subtabs a { --c: var(--teal); --tint: var(--tint-teal); display: flex; align-items: center; gap: 8px; margin-bottom: -1px;
  padding: 9px 16px; border-radius: 10px 10px 0 0; border-bottom: 3px solid transparent; color: var(--muted);
  font-weight: 650; text-decoration: none; }
.subtabs a#data-tab-add { --c: var(--coral); --tint: var(--tint-coral); }
.subtabs a:hover { color: var(--text); background: var(--tint); }
.subtabs a[aria-selected="true"] { color: var(--text); background: var(--tint); border-bottom-color: var(--c); }
.subtabs svg { width: 20px; height: 20px; fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.subtab-count { padding: 1px 8px; border-radius: 999px; background: var(--c); color: #fff; font-size: 13px; }
.subtab-count:empty { display: none; }
.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 12px; margin: 12px 0 20px; }
.way { --c: var(--teal); --tint: var(--tint-teal); display: grid; justify-items: start; gap: 6px; padding: 16px;
  text-align: left; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--rule);
  border-top: 5px solid var(--c); border-radius: 12px; cursor: pointer; }
.way[data-way="s3"] { --c: var(--coral); --tint: var(--tint-coral); }
.way[data-way="example"] { --c: var(--gold); --tint: var(--tint-gold); }
.way:hover { border-color: var(--c); }
.way:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.way[aria-pressed="true"] { border-color: var(--c); box-shadow: inset 0 0 0 1px var(--c); background: var(--tint); }
.way svg { width: 36px; height: 36px; padding: 6px; border-radius: 10px; background: var(--tint); fill: none;
  stroke: var(--c); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.way small { color: var(--muted); font-size: 14px; }
.way[data-way="example"] svg { stroke: #c4861a; }
#data-new { border-left: 4px solid var(--teal); padding-left: 16px; }
#data-new:has(#data-from-bucket:not([hidden])) { border-left-color: var(--coral); }
#data-new:has(#data-from-example:not([hidden])) { border-left-color: var(--gold); }
.data-format { margin: 0; font-size: 13px; white-space: pre; overflow-x: auto; }
.org-form small.org-error { color: var(--draft); font-weight: 600; }
#data-add-error[hidden], #data-name-taken[hidden] { display: none; }
#data-new h3 { margin: 0; }
.org-form label.choice { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-weight: 400; }
.org-form label.choice small { flex-basis: 100%; padding-left: 24px; color: var(--muted); }

#task progress { width: 100%; max-width: 28rem; accent-color: var(--teal); }
.bar3 { display: flex; width: 100%; max-width: 28rem; height: 0.6rem; margin: 3px 0 2px; border-radius: 999px;
        overflow: hidden; background: var(--rule); }
.bar3 .done { background: var(--teal); }
.bar3 .pending { background: color-mix(in srgb, var(--teal) 40%, transparent); }
.bar3 .unsent { background: repeating-linear-gradient(-45deg, transparent 0 4px, var(--tint-teal) 4px 8px); }
#task-progress small { display: block; }
.tstate { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }
.tstate::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--muted); }
.tstate.running::before { background: var(--teal); }
.tstate.done::before { background: transparent; box-shadow: inset 0 0 0 2px var(--teal); }
.tstate.stopped::before { background: var(--gold); }
.tstate.waiting::before { background: var(--coral); }
.tstate.busy::before { background: var(--teal); animation: tstate-pulse 1s ease-in-out infinite alternate; }
@keyframes tstate-pulse { to { opacity: 0.25; } }
.task-progress-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.task-progress-row #task-progress { flex: 0 1 28rem; margin: 0; }
.task-add-dataset { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.task-add-dataset[hidden] { display: none; }
.task-add-dataset select { max-width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 8px;
  background: var(--surface); color: var(--text); }
.task-datasets { margin: -4px 0 12px; padding-left: 1.2rem; }
.task-datasets li { margin: 2px 0; }
#task-add, #task-add-dataset-go { border: 0; cursor: pointer; font: inherit; font-weight: 650; }
#task-add[hidden] { display: none; }
#task-add:disabled, #task-add-dataset-go:disabled { opacity: 0.55; cursor: progress; }
table.sorted .bar3 { width: 8rem; }
#task progress[hidden], #task-form[hidden], #task-waiting[hidden], #task-problems[hidden], #task-note[hidden],
#task-form-no-data[hidden], #task-waiting-manage[hidden], #task-manage[hidden] { display: none; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters input, .filters select { font: inherit; font-size: 15px; padding: 7px 10px; border: 1px solid var(--rule);
  border-radius: 8px; background: var(--surface); color: var(--text); }
.filters input { flex: 1 1 12rem; min-width: 0; }
.filters select { max-width: 100%; }
.page-tasks main, .page-data main { max-width: 68rem; }
table.sorted { font-size: 13px; }
table.sorted tbody tr:nth-child(even) { background: var(--zebra); }
table.sorted .where { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
table.sorted td, table.sorted th { vertical-align: middle; padding: 9px 12px; }
table.sorted tr.shelf td { border-top: 1px solid var(--rule); }
table.sorted tr.shelf svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
table.sorted tr.shelf small { display: inline; margin-left: 8px; }
table.sorted .pick { width: 1%; padding-right: 0; }
table.sorted .pick input { width: 16px; height: 16px; margin: 0; accent-color: var(--teal); cursor: pointer; }
table.sorted th.pick { padding: 9px 0 9px 12px; }
table.sorted td.name small a { color: inherit; }
.picked { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; padding: 8px 12px;
  border-radius: 10px; background: var(--tint-teal); font-size: 14px; }
.picked[hidden] { display: none; }
.picked select { font: inherit; padding: 6px 8px; border-radius: 6px; }
.picked .button { margin: 0; padding: 5px 14px; border: 0; cursor: pointer; font: inherit; font-weight: 650; }
.picked .button.ghost { color: var(--link); }
h2 svg.folder { width: 24px; height: 24px; margin-right: 8px; fill: none; stroke: var(--muted); stroke-width: 1.8;
  stroke-linejoin: round; vertical-align: -3px; }
table.sorted th { padding: 0; white-space: nowrap; }
table.sorted th button { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 9px 12px; cursor: pointer; }
table.sorted th button:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
table.sorted th[aria-sort] button::after { content: " ▲"; font-size: 11px; }
table.sorted th[aria-sort="descending"] button::after { content: " ▼"; }
table.sorted th.num, table.sorted td.num { text-align: right; white-space: nowrap; }
.tr-by-dataset button { border: 0; background: none; padding: 0; font: inherit; color: var(--link); cursor: pointer;
  text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.tr-by-dataset tr[aria-current="true"] td { background: var(--tint-teal); }
.tr-by-dataset tr.all td { font-weight: 650; border-top: 1px solid var(--rule); }
table.sorted td.run .button { margin: 0; padding: 5px 14px; border: 0; cursor: pointer; font: inherit; font-weight: 650; }
table.sorted td.run a.button { display: inline-block; white-space: nowrap; text-decoration: none; }
table.sorted td.name { min-width: 14rem; }
table.sorted td.when .who { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.sorted td.run { width: 1px; white-space: nowrap; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.more { position: relative; }
.more summary { list-style: none; cursor: pointer; padding: 2px 8px; border-radius: 6px; font-size: 18px; line-height: 1.2;
  color: var(--muted); }
.more summary::-webkit-details-marker { display: none; }
.more summary:hover, .more[open] summary { background: var(--tint-teal); color: var(--text); }
.more summary:focus-visible { outline: 2px solid var(--teal); }
.more > div { position: fixed; z-index: 20; display: grid; min-width: 9rem; padding: 4px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); }
.more > div button { all: unset; padding: 6px 10px; border-radius: 6px; font-size: 14px; cursor: pointer; }
.more > div button:hover, .more > div button:focus-visible { background: var(--tint-teal); }
.more > div button.warn { color: var(--draft); }
@media (max-width: 700px) {
  #tasks-table thead { display: none; }
  #tasks-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "star name problems" ". when when" ". state state" ". run run"; padding: 8px 4px; }
  #tasks-table td { display: block; border: 0; padding: 2px 8px; min-width: 0; }
  #tasks-table td.star { grid-area: star; width: auto; padding: 0 2px 0 8px; }
  #tasks-table td.name { padding-left: 6px; }
  #tasks-table td.name { grid-area: name; min-width: 0; }
  #tasks-table td.when { grid-area: when; display: flex; gap: 8px; white-space: normal; color: var(--muted); }
  #tasks-table td.when .who { max-width: none; flex: 1; min-width: 0; }
  #tasks-table td.state { grid-area: state; }
  #tasks-table td.num { grid-area: problems; }
  #tasks-table td.num:not(.warn) { display: none; }
  #tasks-table td.num.warn::before { content: "⚠ "; }
  #tasks-table td.run { grid-area: run; width: auto; padding-top: 6px; }
  #tasks-table .row-actions { justify-content: flex-start; flex-wrap: wrap; }
  #tasks-table tbody tr + tr { border-top: 1px solid var(--rule); }
}
.button[hidden] { display: none; }
.button.pause { background: #c63d1c; color: #fff; }
.button.pause:hover { background: #a83215; }
.button[aria-busy="true"] { cursor: progress; opacity: 0.75; }
table.sorted td.run .button.ghost { background: transparent; color: var(--link); box-shadow: inset 0 0 0 2px var(--rule); }
table.sorted th.num button { text-align: right; }
table.sorted td small { display: block; color: var(--muted); font-size: 12px; }
table.sorted td.name { min-width: 10rem; }
table.sorted td.when, table.sorted td.state { white-space: nowrap; }
table.sorted progress { display: block; width: 8rem; margin: 3px 0 1px; accent-color: var(--teal); }
table.sorted .rename { display: flex; align-items: center; gap: 10px; margin: 0; min-width: 20rem; }
table.sorted .rename input { font: inherit; padding: 5px 8px; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--surface); color: var(--text); min-width: 0; flex: 1 1 8rem; }
table.sorted .org-link { font-size: 13px; }
table.sorted td.star { width: 1px; padding-right: 0; }
table.sorted td.star button { all: unset; cursor: pointer; font-size: 20px; line-height: 1; color: var(--muted); padding: 2px; border-radius: 4px; }
table.sorted td.star button[aria-pressed="true"] { color: var(--gold); }
table.sorted td.star button:hover { color: var(--gold); }
table.sorted td.star button:focus-visible { outline: 2px solid var(--teal); }
table.sorted .warn { color: var(--draft); font-weight: 650; }
table.sorted th.plain { padding: 9px 12px; }
#tasks-unmatched[hidden], #data-unmatched[hidden], .filters[hidden], .table[hidden] { display: none; }
#task-bar[hidden], #task-tabs[hidden], #task-name[hidden] { display: none; }
.task-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 6px 20px; margin: 0 -16px; padding: 10px 16px; background: var(--bg);
  border-bottom: 1px solid var(--rule); font-size: 15px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; min-width: 0; }
.crumbs a { color: var(--link); font-weight: 600; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs > * + *::before { content: "›"; margin: 0 8px; color: var(--muted); font-weight: 400; }
.crumbs [aria-current] { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24rem; }
.task-tabs { display: flex; gap: 4px; }
.task-tabs a { padding: 4px 12px; border-radius: 999px; color: var(--text); font-weight: 600; text-decoration: none; }
.task-tabs a:hover { color: var(--link); }
.task-tabs a[aria-current] { background: var(--rule); color: var(--text); }
h2.task-title { margin-top: 28px; }
#task .org-actions .button { border: 0; cursor: pointer; font: inherit; font-weight: 650; }
#task .org-actions .button.ghost { box-shadow: inset 0 0 0 2px var(--rule); }
#task-report[hidden], #tr-loading[hidden], #tr-body[hidden], #tr-error[hidden], #tr-more[hidden],
#tr-histogram-box[hidden], #tr-shapes-field[hidden], #tr-drawn-legend[hidden], #tr-drawn-alone[hidden], #tr-dissent-legend[hidden], #tr-agreement-range[hidden], #tr-dissent-field[hidden], .tr-filters select[hidden] { display: none; }
#tr-more { border: 0; cursor: pointer; font: inherit; font-weight: 650; }
#tr-more.ghost { box-shadow: inset 0 0 0 2px var(--rule); }
.tr-filters { align-items: center; margin: 12px 0 4px; }
.tr-range { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 15px; color: var(--muted); }
.tr-filters .tr-range input { flex: 0 0 5.5rem; width: 5.5rem; }
.tr-check { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; white-space: nowrap; }
.filters .tr-check input { flex: none; }
.tr-count { margin: 4px 0 0; font-size: 15px; font-weight: 650; }
.tr-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 12px 0 8px; }
.tr-tile { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.tr-label, .tr-note { color: var(--muted); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.tr-value { font-size: 24px; font-weight: 650; line-height: 1.3; }
.tr-histogram svg { display: block; width: 100%; max-width: 600px; height: auto; overflow: visible; }
.tr-histogram { display: grid; gap: 4px; max-width: 640px; }
.tr-cat { display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr auto; align-items: center; gap: 10px;
          padding: 4px 6px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit;
          font-size: 14px; text-align: left; cursor: pointer; }
.tr-cat:hover, .tr-cat:focus-visible, .tr-cat[aria-pressed="true"] { background: var(--tint-teal); }
.tr-cat[aria-pressed="true"] .tr-cat-label { font-weight: 700; }
.tr-cat-bar { height: 14px; border-radius: 4px; background: var(--zebra); overflow: hidden; }
.tr-cat-bar span { display: block; height: 100%; border-radius: 4px; }
.tr-agreed .tr-cat-bar span { background: var(--teal); }
.tr-near .tr-cat-bar span { background: var(--gold); }
.tr-low .tr-cat-bar span { background: var(--coral); }
.tr-cat-n { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-bar { fill: var(--teal); }
.tr-hit { fill: transparent; }
.tr-bin { cursor: pointer; outline: none; }
.tr-bin:hover .tr-hit, .tr-bin:focus-visible .tr-hit { fill: var(--tint-teal); }
.tr-grid { stroke: var(--rule); stroke-width: 1; }
.tr-axis { fill: var(--muted); font-size: 11px; }
@media (max-width: 600px) { .tr-axis { font-size: 20px; } }
.tr-downloads { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; font-size: 15px; }
.tr-downloads > span:first-child { font-weight: 650; }
.tr-downloads span span { color: var(--muted); }
.tr-item { border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; background: var(--surface); }
.tr-item header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tr-item h4 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.tr-where { margin: 0 0 10px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.tr-badge { flex: none; font-size: 13px; padding: 1px 10px; border-radius: 12px; border: 1px solid var(--rule); color: var(--muted); }
.tr-badge.tr-complete { color: var(--link); border-color: var(--link); }
.tr-badge.tr-low { color: var(--draft); border-color: var(--draft); }
.tr-item-body { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 520px) { .tr-item-body { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; } }
.tr-thumbs { display: grid; gap: 8px; }
.tr-thumb { all: unset; display: block; cursor: zoom-in; border-radius: 8px; }
.tr-thumb:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.tr-frame { position: relative; margin: 0; width: 100%; border-radius: 8px; overflow: hidden; background: var(--bg); }
.tr-frame img, .tr-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tr-dots { position: absolute; inset: 0; pointer-events: none; }
.tr-dotcell { position: absolute; box-sizing: border-box; display: flex; flex-wrap: wrap; align-content: flex-start;
              gap: 2px; padding: 3px; overflow: hidden; }
.tr-adot { width: 15px; height: 15px; border-radius: 50%; color: #fff; font: 700 10px/15px system-ui, sans-serif;
           text-align: center; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85); }
.tr-hide-annotators .tr-dots { display: none; }
.tr-who { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; }
.tr-who small { color: var(--muted); }
.tr-who .tr-dot { margin-right: 2px; }
.tr-item video { display: block; width: 100%; border-radius: 8px; background: #000; }
.tr-video { background: #000; }
.tr-stage { position: absolute; inset: 0; }
.tr-video video { position: absolute; inset: 0; height: 100%; object-fit: fill; border-radius: 0; }
.tr-video svg { pointer-events: none; }
.tr-full-button { position: absolute; top: 6px; right: 6px; z-index: 1; width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 6px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 18px; line-height: 1;
  cursor: pointer; }
.tr-full-button:focus-visible { outline: 2px solid var(--teal); }
.tr-video:fullscreen, .tr-video.tr-full { display: flex; align-items: center; justify-content: center;
  width: 100vw; height: 100vh; max-width: none; aspect-ratio: auto !important; border-radius: 0; }
.tr-video.tr-full { position: fixed; inset: 0; z-index: 1000; height: 100dvh; }
.tr-video:fullscreen .tr-stage, .tr-video.tr-full .tr-stage { position: relative; inset: auto;
  width: min(100vw, calc(100vh * var(--ar))); aspect-ratio: var(--ar); }
.tr-video.tr-full .tr-stage { width: min(100vw, calc(100dvh * var(--ar))); }
.tr-video:fullscreen .tr-full-button, .tr-video.tr-full .tr-full-button { top: 12px; right: 12px; }
html.tr-full-open { overflow: hidden; }
.tr-item .tr-text { max-height: 9rem; overflow: auto; font-size: 13px; }
.tr-zoom { width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 12px; border: 0;
  border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); }
.tr-zoom::backdrop { background: rgba(20, 22, 26, 0.7); }
.tr-zoom header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 8px; }
.tr-zoom h4 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.tr-zoom .tr-frame { width: auto; max-width: 100%; max-height: calc(100vh - 110px); margin: 0 auto; }
.tr-text { padding: 10px; border: 1px solid var(--rule); border-radius: 8px; white-space: pre-wrap; font-size: 15px; }
.tr-halo { stroke: rgba(0, 0, 0, 0.55); }
.tr-cell { fill: rgba(31, 138, 138, 0.3); stroke: rgba(255, 255, 255, 0.55); stroke-width: 0.002; }
.tr-hide-annotators .tr-annotator, .tr-zoom.tr-hide-annotators .tr-annotator { display: none; }
.tr-specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 4px 24px; align-content: start; }
.tr-specs > p { grid-column: 1 / -1; margin: 0; }
.tr-spec { margin-bottom: 8px; font-size: 15px; min-width: 0; }
.tr-q { font-weight: 650; }
.tr-consensus-line { margin: 2px 0; }
.tr-consensus-line small { color: var(--muted); font-size: 13px; }
.tr-swatch { display: inline-block; width: 14px; height: 4px; margin-right: 8px; border-radius: 2px; background: var(--teal); vertical-align: middle; }
.tr-ok { color: var(--link); font-size: 13px; font-weight: 650; }
.tr-warn { color: var(--draft); font-weight: 650; }
.tr-consensus-line .tr-warn { font-size: 13px; }
.tr-answers { list-style: none; margin: 4px 0 0; padding: 0; font-size: 14px; }
.tr-answers li { padding: 1px 0; overflow-wrap: anywhere; }
.tr-answers small { color: var(--muted); }
.tr-dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; }
.kappy-run { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 14px; }
.kappy-run .button { border: 0; cursor: pointer; font: inherit; font-weight: 650; }
.kappy-run .button:disabled { opacity: 0.55; cursor: default; }
.kappy-run small { color: var(--muted); }
.kappy-run-error { color: var(--draft); }
.kappy-run-error[hidden] { display: none; }

.demo-only { display: none; }
html[data-demo] .demo-only { display: block; }
html[data-demo] span.demo-only { display: inline; }
html[data-demo] .demo-hide { display: none; }
.demo-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: -16px 0 24px; padding: 10px 14px;
  border-radius: 10px; background: var(--tint-gold); }
.demo-line .demo-said { flex-basis: 100%; }
[data-demo-request] { border: 0; cursor: pointer; font: inherit; font-weight: 650; }
[data-demo-request]:disabled { opacity: 0.6; cursor: default; }
.demo-said { display: block; color: var(--muted); }
.demo-said[hidden] { display: none; }
.demo-said.demo-error { color: var(--draft); }
.kappy-demo { margin: 4px 0 14px; padding: 12px 14px; border-radius: 10px; background: var(--tint-gold); }
.kappy-demo p { margin: 0 0 8px; }
.kappy-demo p:last-child { margin: 0; }

.soon .soon-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 32px 0 0; }
.soon .soon-actions .button { margin: 0; }
.soon .soon-actions .button.ghost { box-shadow: inset 0 0 0 2px var(--teal); }
.soon .soon-team { margin: 18px 0 0; font-size: 0.95rem; color: var(--muted); }
.soon .soon-team a { white-space: nowrap; }
.signin textarea { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; resize: vertical;
  background: var(--surface); color: var(--text); }
.signin textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.signin .pilot-choice { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.signin .pilot-choice legend { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: 0.95rem; }
.signin .pilot-choice label { display: flex; align-items: center; gap: 10px; font-weight: 400; }
.signin .pilot-choice input { margin: 0; width: 18px; height: 18px; accent-color: var(--teal); }
.signin .pilot-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.signin .optional { font-weight: 400; color: var(--muted); }

.org-switch { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.org-switch[hidden] { display: none; }
.org-switch select { font: inherit; color: var(--text); background: var(--surface); padding: 6px 8px;
  border: 1px solid var(--rule); border-radius: 8px; max-width: 14rem; }

.top nav .account a[aria-busy] { cursor: progress; opacity: 0.6; }
.report { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 24px; border: 0;
  border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); }
.report::backdrop { background: rgba(20, 22, 26, 0.45); }
.report h2 { margin: 0 0 16px; }
.report form { display: flex; flex-direction: column; gap: 14px; }
.report form[hidden] { display: none; }
.report label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.report textarea { font: inherit; font-weight: 400; color: var(--text); background: var(--surface); padding: 10px;
  border: 1px solid var(--rule); border-radius: 8px; resize: vertical; }
.report-shot { font-weight: 500; }
.report-shot[hidden] { display: none; }
.report-shot span { display: flex; align-items: center; gap: 8px; }
.report-shot img { max-height: 160px; width: auto; max-width: 100%; align-self: flex-start; border: 1px solid var(--rule);
  border-radius: 6px; }
.report-shot:has(input:not(:checked)) img { opacity: 0.3; }
.report-note { margin: 0; font-size: 14px; color: var(--muted); }
.report-actions { display: flex; justify-content: flex-end; gap: 12px; margin: 0; }
.report-actions .button { margin: 0; border: 0; cursor: pointer; font: inherit; font-weight: 650; }
.report-actions .button:disabled { opacity: 0.6; cursor: progress; }
.report-done { margin: 0; font-size: 17px; }

details.how { margin: 4px 0 14px; color: var(--muted); font-size: 15px; line-height: 1.55; }
details.how[hidden] { display: none; }
details.how > summary { width: fit-content; cursor: pointer; color: var(--link); font-weight: 600; font-size: 14px; }
details.how > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }
details.how[open] { padding: 8px 14px 4px; border-left: 3px solid var(--rule); }
details.how[open] > summary { margin-bottom: 4px; }
details.how p, details.how ol, details.how ul { margin: 6px 0 10px; }
details.how h4 { margin: 14px 0 4px; color: var(--text); font-size: 15px; }
.kappy-intro details.how p { font-size: 15px; }
.org-form details.how { margin: -6px 0 0 24px; }
.next-step { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px;
  margin: 12px 0 20px; padding: 12px 16px; border: 1px solid var(--rule); border-left: 5px solid var(--teal);
  border-radius: 10px; background: var(--surface); }
.next-step[hidden] { display: none; }
html[data-demo] .next-step { display: none; }
.next-step p { flex: 1 1 18rem; margin: 0; font-size: 16px; }
.next-step small { display: block; color: var(--muted); font-size: 13px; font-weight: 650; text-transform: uppercase;
  letter-spacing: 0.04em; }
.next-step .button { margin: 0; border: 0; cursor: pointer; font: inherit; font-weight: 650; }
.next-step .button:disabled { opacity: 0.6; cursor: progress; }
.next-step .next-error { flex-basis: 100%; }
.next-step .next-error[hidden] { display: none; }
#task .next-step { margin-top: 0; }
@media (max-width: 640px) { .next-step .button { flex: 1 1 100%; text-align: center; } }
.button.ghost.pause { background: transparent; color: var(--draft); box-shadow: inset 0 0 0 2px var(--rule); }
.button.ghost.pause:hover { box-shadow: inset 0 0 0 2px var(--coral); }
#task-add.ghost, #task-add-dataset-go.ghost { color: var(--link); }
#data-table .phone-only { display: none; }
@media (max-width: 700px) {
  #data-table thead { display: none; }
  #data-table tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; padding: 8px 4px;
    grid-template-areas: "pick star name items" ". . when when" ". . state state" ". . failed failed" ". . tasks tasks" ". . act act"; }
  #data-table tr.shelf { grid-template-areas: "pick star name name"; }
  #data-table td { display: block; border: 0; padding: 2px 8px; min-width: 0; }
  #data-table td.pick { grid-area: pick; padding: 2px 0 0 8px; }
  #data-table td.star { grid-area: star; width: auto; padding: 0 2px 0 8px; }
  #data-table td.name { grid-area: name; min-width: 0; padding-left: 6px; }
  #data-table td.when { grid-area: when; display: flex; gap: 8px; white-space: normal; color: var(--muted); }
  #data-table td.when .phone-only { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  #data-table td.by, #data-table td.from, #data-table td.size, #data-table td.tasks:not(:has(a)) { display: none; }
  #data-table td.failed { grid-area: failed; }
  #data-table td.failed:not(.warn) { display: none; }
  #data-table td.state { grid-area: state; }
  #data-table td.items { grid-area: items; }
  #data-table .phone-only { display: inline; }
  #data-table td.tasks { grid-area: tasks; }
  #data-table td.num { text-align: left; }
  #data-table td.act { grid-area: act; }
  #data-table .org-actions { flex-wrap: wrap; gap: 4px 14px; }
  #data-table tbody tr + tr { border-top: 1px solid var(--rule); }
}
.tr-more-filters { display: none; }
@media (max-width: 640px) {
  .tr-more-filters { display: inline-block; border: 0; background: none; padding: 7px 0; font: inherit; font-size: 15px;
    font-weight: 650; color: var(--link); cursor: pointer; }
  .tr-filters:not(.tr-open) .tr-extra { display: none; }
  .tr-filters #tr-search { flex-basis: 100%; }
}
.tr-agreement-on { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 15px; color: var(--muted); }
.tr-agreement-on[hidden] { display: none; }
@media (max-width: 640px) {
  .tr-by-dataset .tr-wide { display: none; }
  table.sorted.tr-by-dataset th, table.sorted.tr-by-dataset th.num { white-space: normal; }
  table.sorted.tr-by-dataset td, table.sorted.tr-by-dataset th { padding: 8px 6px; }
}
.kappy-card { position: relative; display: flex; gap: 12px; margin: 0 0 24px; padding: 14px 48px 10px 16px;
  border: 1px solid var(--rule); border-left: 5px solid var(--teal); border-radius: 10px; background: var(--surface); }
.kappy-card[hidden] { display: none; }
.kappy-card .avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--tint-teal); padding: 7px; }
.kappy-card .avatar img { display: block; width: 100%; height: 100%; }
.kappy-card-body { min-width: 0; font-size: 16px; line-height: 1.55; }
.kappy-card-body p, .kappy-card-body ul { margin: 0 0 8px; }
.kappy-card-body ul { padding-left: 20px; }
.kappy-card-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kappy-card-ask span { color: var(--muted); font-size: 14px; font-weight: 650; }
.kappy-card-ask .button { margin: 0; padding: 7px 12px; font-size: 15px; }
.kappy-card-close { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border: 0; border-radius: 8px;
  background: none; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; }
.kappy-card-close:hover { background: var(--tint-teal); color: var(--text); }
.kappy-card-close:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.kappy-card-ask button.button { border: 0; cursor: pointer; font: inherit; font-size: 15px; font-weight: 650;
  text-align: left; }
.kappy-card-ask button.button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.kappy-card-ask button.button[aria-expanded="true"] { background: var(--tint-teal); }
.kappy-card-answer { flex: 1 1 100%; margin: 0 0 4px; padding: 8px 12px; border-left: 3px solid var(--teal);
  background: var(--tint-teal); border-radius: 0 8px 8px 0; font-size: 15px; line-height: 1.55; }
.kappy-card-answer[hidden] { display: none; }
.kappy-card-answer p { margin: 0 0 4px; }
.kappy-card-more { font-weight: 650; font-size: 14px; }
@media (max-width: 640px) { .kappy-card .avatar { display: none; } .kappy-card-ask .button { flex: 1 1 100%; } }