/* graft tickets. Light tokens first, dark under prefers-color-scheme. */
:root {
  color-scheme: light dark;
  --ground: #EDEFF2;
  --paper: #FFFFFF;
  --ink: #1A1E24;
  --muted: #5D6570;
  --rule: #D8DCE2;
  --cambium: #3E7B27;
  --cambium-down: #356B21;
  --lane: #E3E6EA;
  --hover: #F4F5F7;
  --rule-2: #C2C8D0;
  --wash: #E3EEDB;
  --focus: #3E7B27;
  --open: #1A7F37;
  --merged: #8250DF;
  --closed: #CF222E;
  --draft: #6E7781;
  --urgent: #C4291F;
  --high: #9A5B00;
  --story: #2E7D32;
  --scrim: rgba(26, 30, 36, .34);
  --lift: 0 12px 32px rgba(26, 30, 36, .16), 0 1px 3px rgba(26, 30, 36, .10);
  --top-h: 53px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #15191E;
    --paper: #1E232A;
    --ink: #E5E8EC;
    --muted: #9AA3AE;
    --rule: #2E353E;
    --cambium: #3E7B27;
    --cambium-down: #468B2D;
    --lane: #1A1E24;
    --hover: #262C34;
    --rule-2: #434C57;
    --wash: #1F2E1C;
    --focus: #7DBB5F;
    --open: #3FB950;
    --merged: #A371F7;
    --closed: #F85149;
    --draft: #8B949E;
    --urgent: #FF7B6E;
    --high: #E3A13B;
    --story: #5DBB63;
    --scrim: rgba(0, 0, 0, .5);
    --lift: 0 12px 32px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .4);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font: 14px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
svg { flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.grow { flex: 1; }

.av { display: block; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--lane); object-fit: cover; }
.av-none { display: block; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px dashed var(--rule-2); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--paper); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--hover); }
.btn:disabled { opacity: .6; cursor: default; }
.btn-go { background: var(--cambium); border-color: var(--cambium); color: #fff; }
.btn-go:hover { background: var(--cambium-down); border-color: var(--cambium-down); }
.btn-ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--ink); opacity: .9; }
.btn-red { background: var(--urgent); border-color: var(--urgent); color: #fff; }
.btn-red:hover { background: var(--urgent); opacity: .9; }
@media (prefers-color-scheme: dark) { .btn-red { color: #1A1E24; } }
.btn-sm { height: 26px; padding: 0 10px; font-size: 12px; }
.x {
  display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px;
  border: 0; border-radius: 6px; background: none; color: var(--muted);
}
.x:hover { background: var(--hover); color: var(--ink); }
.err { color: var(--urgent); font-size: 12px; line-height: 1.4; }

/* sign-in */
.signin { display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; }
.signin-box { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: 300px; max-width: 100%; }
.brand.brand-lg { font-size: 22px; gap: 10px; }
.signin-repo { margin-top: -8px; color: var(--muted); font-size: 13px; }
.signin .btn { height: 36px; padding: 0 14px; font-size: 14px; }
.signin .err { font-size: 13px; }

/* top bar */
.top {
  display: flex; align-items: center; gap: 14px;
  height: var(--top-h); padding: 0 20px;
  background: var(--paper); border-bottom: 1px solid var(--rule);
}
.brand { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.brand svg { color: var(--cambium); }
@media (prefers-color-scheme: dark) { .brand svg { color: var(--focus); } }
.repo { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted); font-size: 13px; text-decoration: none; }
.repo:hover { color: var(--ink); }
.search {
  display: flex; align-items: center; gap: 6px; width: 220px; height: 30px; padding: 0 8px;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--ground); color: var(--muted);
}
.search:focus-within { border-color: var(--focus); }
.search input { width: 100%; min-width: 0; border: 0; outline: none; background: none; font-size: 13px; color: var(--ink); }
.search input::placeholder { color: var(--muted); }
.search input::-webkit-search-cancel-button { display: none; }
.people { display: flex; gap: 2px; }
.person { padding: 2px; border: 0; border-radius: 50%; background: none; }
.person .av { width: 24px; height: 24px; }
.person[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--focus); }
.people.on .person[aria-pressed="false"] .av { opacity: .4; }
.sync {
  display: flex; align-items: center; gap: 6px; height: 30px; max-width: 280px; padding: 0 8px;
  border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 12px;
}
.sync:hover:not(:disabled) { background: var(--hover); color: var(--ink); }
.sync:disabled { cursor: default; }
.sync .when { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync.bad { color: var(--urgent); }
.sync.busy .i-sync { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.menu-wrap { position: relative; }
.me { display: block; padding: 0; border: 0; border-radius: 50%; background: none; }
.me .av { width: 28px; height: 28px; }
.menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 180px; padding: 6px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--lift);
}
.menu-who { padding: 6px 8px 8px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.menu-who b { display: block; color: var(--ink); font-size: 13px; font-weight: 600; }
.menu-item { display: block; width: 100%; padding: 6px 8px; border: 0; border-radius: 5px; background: none; text-align: left; font-size: 13px; }
.menu-item:hover { background: var(--hover); }

/* board */
.tabs { display: none; }
.board {
  display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 14px; align-items: start;
  padding: 16px 20px 40px; overflow-x: auto;
}
.col { min-width: 0; border-radius: 8px; }
.col-head { display: flex; align-items: baseline; gap: 8px; padding: 2px 4px 10px; font-size: 13px; font-weight: 600; }
.col-head .n { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.lane { display: flex; flex-direction: column; gap: 6px; min-height: 96px; padding: 2px; margin: -2px; border-radius: 8px; }
.col.over .lane { background: var(--wash); }
.marker { height: 2px; margin: -4px 2px; border-radius: 1px; background: var(--focus); }
.first {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 64px;
  border: 1.5px dashed var(--rule-2); border-radius: 6px; background: none; color: var(--muted); font-size: 13px;
}
.first:hover { color: var(--ink); border-color: var(--muted); }
.card {
  display: block; padding: 9px 11px 10px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 6px;
  text-decoration: none; cursor: grab; -webkit-user-drag: element;
}
.card:hover { border-color: var(--rule-2); }
.card:active { cursor: grabbing; }
.card.sel { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.card.dragging { opacity: .4; }
.card.fresh { animation: fresh 1.6s ease-out; }
@keyframes fresh { from { background: var(--wash); border-color: var(--focus); } }
.meta { display: flex; align-items: center; gap: 8px; min-height: 20px; font-size: 12px; color: var(--muted); }
.key { font-variant-numeric: tabular-nums; font-weight: 500; }
.meta .av, .meta .av-none { margin-left: auto; }
.flag { font-weight: 500; }
.flag.urgent { color: var(--urgent); }
.flag.high { color: var(--high); }
.ty-bug { color: var(--urgent); }
.ty-story { color: var(--story); }
.title { margin-top: 3px; font-size: 14px; line-height: 1.38; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.done .title { color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px 0 4px;
  border-radius: 4px; background: var(--hover); color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums;
}
.chip.sha { font-family: var(--mono); font-size: 11px; }
.talk { display: inline-flex; align-items: center; gap: 3px; margin-left: 2px; color: var(--muted); font-size: 12px; }
.s-open { color: var(--open); }
.s-merged, .s-done { color: var(--merged); }
.s-closed { color: var(--closed); }
.s-draft, .s-commit, .s-none { color: var(--draft); }

/* drawer */
.drawer {
  position: fixed; top: var(--top-h); right: 0; bottom: 0; z-index: 20;
  width: 520px; max-width: 100%; overflow: auto; overscroll-behavior: contain;
  padding: 14px 18px 32px; background: var(--paper); border-left: 1px solid var(--rule); box-shadow: var(--lift);
  animation: slide .16s ease-out;
}
.drawer:focus { outline: none; }
@keyframes slide { from { transform: translateX(14px); opacity: 0; } }
.d-top { display: flex; align-items: center; gap: 4px; padding: 0 6px; color: var(--muted); font-size: 13px; }
.d-top .key { margin-right: auto; }
.d-missing { padding: 24px 6px; color: var(--muted); }
.d-title {
  display: block; width: 100%; margin-top: 6px; padding: 4px 6px; overflow: hidden;
  border: 1px solid transparent; border-radius: 6px; background: none; resize: none;
  font-size: 20px; font-weight: 650; line-height: 1.3; letter-spacing: -.012em;
}
.d-title:hover { border-color: var(--rule); }
.d-title:focus { outline: none; border-color: var(--focus); }
#d-title-err, #d-fields-err, #d-desc-err, #d-link-err, #d-say-err, #d-del-err { padding: 4px 6px 0; }
.fields {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) 76px minmax(0, 1fr); align-items: center; gap: 2px 12px;
  margin: 12px 0 14px; padding: 0 6px; font-size: 13px;
}
.fields dt { color: var(--muted); }
.fields dd { display: flex; align-items: center; gap: 4px; min-width: 0; margin: 0; }
.fields dd .av, .fields dd .av-none { margin-right: 2px; }
.pick {
  appearance: none; -webkit-appearance: none; min-width: 0; max-width: 100%; height: 28px; padding: 0 22px 0 6px;
  border: 1px solid transparent; border-radius: 6px; font-size: 13px; text-overflow: ellipsis;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%238A929C' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 7px center;
  cursor: pointer;
}
.pick:hover { border-color: var(--rule); }
.pick option { background: var(--paper); color: var(--ink); }
.fields .pick { margin-left: -6px; }
.fields dd .av + .pick, .fields dd .av-none + .pick { margin-left: 0; }
.desc { min-height: 34px; padding: 6px; border-radius: 6px; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
.desc:hover { background: var(--hover); }
.desc.empty { color: var(--muted); }
.desc a, .comments .body a { color: inherit; text-decoration-color: var(--rule-2); text-underline-offset: 2px; }
.desc a:hover, .comments .body a:hover { text-decoration-color: currentColor; }
.desc-edit textarea, .say textarea {
  display: block; width: 100%; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--paper); resize: vertical; font-size: 14.5px; line-height: 1.55;
}
.desc-edit textarea:focus, .say:focus-within { outline: none; border-color: var(--focus); }
.desc-edit .row { display: flex; gap: 6px; margin-top: 6px; }
.sec { margin-top: 22px; }
.sec h3 { margin: 0 0 4px; padding: 0 6px; font-size: 13px; font-weight: 600; }
.links { margin: 0; padding: 0; list-style: none; }
.links li { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 0 0 6px; border-radius: 6px; font-size: 13px; }
.links li:hover { background: var(--hover); }
.links .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.links a.t:hover { text-decoration: underline; }
.links .num { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.links .sha { font-family: var(--mono); font-size: 12px; }
.links .t.sha { color: var(--ink); }
.links .state { flex: none; font-size: 12px; font-weight: 500; }
.links .why { flex: none; margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.links .x { width: 26px; height: 26px; }
.field {
  display: flex; align-items: center; gap: 6px; height: 34px; margin: 6px 6px 0; padding: 0 4px 0 8px;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); color: var(--muted); font-size: 13px;
}
.field:focus-within { border-color: var(--focus); }
.field input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 13px; color: var(--ink); }
.field input::placeholder { color: var(--muted); }
.add { height: 26px; padding: 0 8px; border: 0; border-radius: 5px; background: none; color: var(--muted); font-size: 12px; font-weight: 500; }
.add:hover { background: var(--hover); color: var(--ink); }
.comments { margin: 0; padding: 0 6px; list-style: none; }
.comments li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 0 10px; padding: 8px 0; }
.comments .av { width: 24px; height: 24px; }
.comments .who { font-size: 13px; font-weight: 600; }
.comments .when { margin-left: 6px; color: var(--muted); font-size: 12px; font-weight: 400; }
.comments .body { grid-column: 2; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.say { margin: 4px 6px 0; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); }
.say textarea { border: 0; resize: none; font-size: 14px; outline: none; }
.say-row { display: none; justify-content: flex-end; padding: 0 6px 6px; }
.say:focus-within .say-row, .say.has .say-row { display: flex; }
.foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 26px; padding: 12px 6px 0;
  border-top: 1px solid var(--rule); color: var(--muted); font-size: 12px;
}
.del { margin-left: auto; padding: 4px 6px; border: 0; border-radius: 6px; background: none; color: var(--urgent); font-size: 12px; font-weight: 500; }
.del:hover { background: var(--hover); }
.confirm { display: flex; align-items: center; gap: 6px; margin-left: auto; color: var(--ink); font-size: 12px; font-weight: 500; }

/* new ticket */
.create {
  width: 620px; max-width: calc(100% - 32px); margin: 12vh auto auto; padding: 0;
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--lift);
}
.create::backdrop { background: var(--scrim); }
.create[open] { animation: rise .14s ease-out; }
@keyframes rise { from { transform: translateY(6px); opacity: 0; } }
.create form { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 14px; }
.create h2 { padding: 0 6px; color: var(--muted); font-size: 13px; font-weight: 500; }
.c-title, .c-desc { display: block; width: 100%; padding: 4px 6px; border: 0; outline: none; background: none; resize: none; }
.c-title { font-size: 20px; font-weight: 650; letter-spacing: -.012em; }
.c-desc { font-size: 14.5px; line-height: 1.55; }
.c-title::placeholder, .c-desc::placeholder { color: var(--muted); font-weight: inherit; }
.c-fields { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 6px 0; }
.pill {
  display: inline-flex; align-items: center; height: 28px; padding-left: 9px;
  border: 1px solid var(--rule); border-radius: 14px; color: var(--muted); font-size: 12px;
}
.pill:focus-within { border-color: var(--focus); }
.pill .pick { height: 26px; padding-left: 5px; border: 0; color: var(--ink); font-size: 12px; font-weight: 500; }
.pill .pick:focus-visible { outline: none; }
#c-err { padding: 2px 6px 0; }
.c-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--rule); }

/* toast */
.toast {
  position: fixed; left: 20px; bottom: 20px; z-index: 50; max-width: min(420px, calc(100% - 32px));
  padding: 9px 12px; background: var(--ink); color: var(--paper); border-radius: 8px; box-shadow: var(--lift); font-size: 13px;
}

/* phone */
@media (max-width: 760px) {
  :root { --top-h: auto; }
  .top { flex-wrap: wrap; height: auto; gap: 8px 10px; padding: 10px 16px; }
  .repo-name, .sync .when, .sync:disabled { display: none; }
  .repo { padding: 4px; }
  .search { order: 5; flex: 1 1 60%; width: auto; height: 34px; }
  .search input { font-size: 16px; }
  .people { order: 6; }
  .btn-go .label { display: none; }
  #new { width: 32px; padding: 0; }
  .tabs {
    display: flex; gap: 6px; overflow-x: auto; padding: 12px 16px 0; scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    flex: none; height: 30px; padding: 0 11px; border: 1px solid var(--rule); border-radius: 15px;
    background: var(--paper); font-size: 13px; font-weight: 500; white-space: nowrap;
  }
  .tab .n { margin-left: 5px; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
  .tab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .tab[aria-pressed="true"] .n { color: inherit; opacity: .7; }
  .board { grid-template-columns: minmax(0, 1fr); padding: 12px 16px 32px; overflow: visible; }
  .col:not(.cur) { display: none; }
  .col-head { display: none; }
  .lane { min-height: 0; }
  .drawer { top: 0; width: 100%; border-left: 0; padding: 10px 10px 32px; animation: none; }
  .fields { grid-template-columns: 76px minmax(0, 1fr); }
  .desc-edit textarea, .say textarea, .field input { font-size: 16px; }
  .create { width: auto; max-width: none; margin: 0; max-height: none; inset: 0 0 auto; border-width: 0 0 1px; border-radius: 0 0 12px 12px; }
  .c-title { font-size: 18px; }
  .c-desc { font-size: 16px; }
  .toast { left: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}