/* Ventura Tickets.
 *
 * Same palette tokens as the CAITe pages and slide, so this reads as part of one family
 * rather than a separate product. Light and dark both defined: a board someone opens at
 * six in the morning should not be a white flash.
 *
 * No webfonts and no CDN. The container has no network dependency to render a page. */

:root {
  --ground:#F6F7F9; --surface:#FFFFFF; --sunken:#EFF2F6;
  --ink:#171C26; --ink-2:#4A525F; --ink-3:#7A8291;
  --rule:#DFE3E9; --rule-2:#C9D0DA;
  --accent:#23508C; --accent-soft:#E8EEF7;
  --ok:#17714F; --warn:#8A5A16; --crit:#9E2B2B;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --radius:3px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#10141C; --surface:#171C26; --sunken:#1D2330;
    --ink:#E7EAF0; --ink-2:#A2AAB8; --ink-3:#6F7887;
    --rule:#262D3A; --rule-2:#3A4454;
    --accent:#7FA9E8; --accent-soft:#1A2434;
    --ok:#4FBF92; --warn:#D4A25A; --crit:#E08585;
  }
}

* { box-sizing:border-box; }
body { margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans);
       font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px; border-radius:2px; }

/* ---------- chrome ---------- */
.topbar { display:flex; align-items:center; gap:16px; flex-wrap:wrap;
          padding:11px 20px; background:var(--surface);
          border-bottom:1px solid var(--rule); position:sticky; top:0; z-index:20; }
.brand { font-weight:680; letter-spacing:-.01em; }
.crumbs { font-size:13px; color:var(--ink-3); display:flex; gap:7px; flex-wrap:wrap; }
.crumbs a:hover { color:var(--accent); }
.whoami { margin-left:auto; display:flex; align-items:center; gap:10px; font-size:13px; }
.whoami .who { display:flex; flex-direction:column; line-height:1.25; }
.whoami .who small { color:var(--ink-3); font-size:11.5px; }
.signout { color:var(--ink-3); font-size:12.5px; border-left:1px solid var(--rule);
           padding-left:10px; }
.signout:hover { color:var(--accent); }
.demo-badge { font-family:var(--mono); font-size:10px; letter-spacing:.08em;
              text-transform:uppercase; color:var(--warn);
              border:1px solid currentColor; padding:1px 6px; border-radius:2px; }

.avatar { display:inline-flex; align-items:center; justify-content:center;
          width:28px; height:28px; flex:none; border-radius:50%;
          background:var(--accent-soft); color:var(--accent);
          font-family:var(--mono); font-size:11px; font-weight:600; }
.avatar.tiny { width:21px; height:21px; font-size:9.5px; }
/* Agents are visually distinct everywhere they appear. On a shared board it matters
   whether a person or a machine opened something. */
.avatar.is-agent { background:transparent; color:var(--ink-3);
                   border:1px dashed var(--rule-2); }

.shell { max-width:1060px; margin:0 auto; padding:26px 20px 64px; }
.boardshell { padding:22px 20px 64px; }

/* ---------- type ---------- */
h1 { font-size:23px; font-weight:660; letter-spacing:-.015em; margin:0 0 5px;
     text-wrap:balance; }
h2 { font-size:15px; font-weight:640; margin:26px 0 8px; }
h3 { font-size:13px; font-weight:640; margin:0; }
.eyebrow { font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
           text-transform:uppercase; color:var(--ink-3); margin:0 0 6px; }
.muted { color:var(--ink-2); margin:0; }
.small { font-size:12.5px; }
.tag { font-family:var(--mono); font-size:9.5px; letter-spacing:.07em;
       text-transform:uppercase; color:var(--ink-3); border:1px solid var(--rule-2);
       padding:1px 4px; border-radius:2px; vertical-align:1px; }
.notice { background:var(--accent-soft); border-left:2px solid var(--accent);
          padding:9px 13px; font-size:13px; color:var(--ink-2); margin:0 0 16px; }
.flash { background:var(--surface); border-left:2px solid var(--crit);
         padding:9px 13px; font-size:13px; margin:0 0 14px; }

.pagehead { display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap;
            margin-bottom:20px; }
.pagehead > div:first-child { flex:1 1 320px; }
.row { display:flex; align-items:center; gap:9px; }
.row.wrap { flex-wrap:wrap; }

/* ---------- controls ---------- */
.btn { display:inline-block; padding:7px 13px; font-size:13px; font-weight:560;
       background:var(--surface); color:var(--ink);
       border:1px solid var(--rule-2); border-radius:var(--radius); cursor:pointer; }
.btn:hover { border-color:var(--accent); color:var(--accent); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover { filter:brightness(1.08); color:#fff; }
.btn.small { padding:5px 10px; font-size:12.5px; }
.btn.on { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.btn:disabled { opacity:.5; cursor:default; }

input, textarea, select { width:100%; font-family:inherit; font-size:13.5px;
  padding:7px 9px; color:var(--ink); background:var(--surface);
  border:1px solid var(--rule-2); border-radius:var(--radius); }
textarea { resize:vertical; }
label { display:block; font-size:12.5px; color:var(--ink-2); }
label input, label select { margin-top:4px; }
.stack { display:flex; flex-direction:column; gap:13px; margin-top:14px; }
.stack.tight { gap:8px; }
form.inline { margin:0; }
form.inline select { width:auto; }
.row select { width:auto; min-width:170px; }

.panel { background:var(--surface); border:1px solid var(--rule);
         border-radius:var(--radius); padding:18px 20px; margin-bottom:18px; }
.panel.tight { padding:13px 15px; }
.panel.narrow { max-width:520px; margin:44px auto; }

/* ---------- board cards (index) ---------- */
.cards { display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:680px) { .cards { grid-template-columns:1fr 1fr; } }
.card { display:block; background:var(--surface); border:1px solid var(--rule);
        border-radius:var(--radius); padding:16px 18px; }
.card:hover { border-color:var(--accent); }
.card-top { display:flex; align-items:baseline; gap:10px; }
.card-top h2 { margin:0; font-size:16px; flex:1; }
.lanepips { display:flex; gap:5px; flex-wrap:wrap; margin:11px 0 0; }
.pip { font-size:11px; color:var(--ink-3); background:var(--sunken);
       border:1px solid var(--rule); padding:2px 7px; border-radius:10px; }
.card-foot { display:flex; gap:16px; margin:13px 0 0; font-family:var(--mono);
             font-size:11.5px; color:var(--ink-3); }

.role { font-family:var(--mono); font-size:10px; letter-spacing:.07em;
        text-transform:uppercase; padding:2px 7px; border-radius:2px;
        border:1px solid currentColor; white-space:nowrap; }
.role-admin { color:var(--accent); }
.role-editor, .role-contributor { color:var(--ok); }
.role-mover { color:var(--ok); }
.role-viewer, .role-commenter { color:var(--ink-3); }
.role-custom { color:var(--warn); }

/* ---------- kanban ---------- */
.lanes { display:flex; gap:14px; align-items:flex-start;
         overflow-x:auto; padding-bottom:14px; }
.lane { flex:0 0 280px; background:var(--sunken); border:1px solid var(--rule);
        border-radius:var(--radius); display:flex; flex-direction:column; }
.lane > header { display:flex; align-items:center; gap:8px; padding:10px 12px;
                 border-bottom:1px solid var(--rule); }
.lane > header h3 { flex:1; }
.count { font-family:var(--mono); font-size:11px; color:var(--ink-3); }
.dropzone { padding:10px; display:flex; flex-direction:column; gap:9px;
            min-height:56px; }
.dropzone.over { background:var(--accent-soft); outline:1px dashed var(--accent);
                 outline-offset:-4px; }

.ticket { background:var(--surface); border:1px solid var(--rule-2);
          border-left:2px solid var(--rule-2); border-radius:var(--radius); }
.ticket a { display:block; padding:10px 12px; }
.ticket[draggable="true"] { cursor:grab; }
.ticket:hover { border-color:var(--accent); }
.ticket.dragging { opacity:.4; }
.ticket.p-high { border-left-color:var(--warn); }
.ticket.p-urgent { border-left-color:var(--crit); }
.tref { font-family:var(--mono); font-size:10.5px; color:var(--ink-3);
        margin:0 0 5px; display:flex; gap:7px; align-items:center; }
.prio { color:var(--crit); text-transform:uppercase; letter-spacing:.06em; }
.ttitle { margin:0; font-size:13.5px; line-height:1.4; }
.tmeta { display:flex; align-items:center; gap:7px; margin:9px 0 0;
         font-size:11.5px; color:var(--ink-3); }
.assn { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.addcard { border-top:1px solid var(--rule); }
.addcard summary { padding:8px 12px; font-size:12.5px; color:var(--ink-3);
                   cursor:pointer; list-style:none; }
.addcard summary::-webkit-details-marker { display:none; }
.addcard summary:hover { color:var(--accent); }
.addcard form { padding:0 12px 12px; margin-top:0; }

/* Lane tabs are the mobile navigation. Hidden on desktop, where lanes sit side by side. */
.lanetabs { display:none; }

/* ---------- ticket detail ---------- */
.tdetail { display:grid; gap:20px; grid-template-columns:1fr; max-width:1060px;
           margin:0 auto; }
@media (min-width:860px) { .tdetail { grid-template-columns:1fr 300px; } }
.tmain .body { background:var(--surface); border:1px solid var(--rule);
               border-radius:var(--radius); padding:14px 16px; margin:14px 0 0;
               white-space:pre-wrap; font-size:14px; color:var(--ink-2); }
.thread { list-style:none; padding:0; margin:10px 0 18px;
          display:flex; flex-direction:column; gap:14px; }
.thread li { display:flex; gap:10px; }
.thread p { margin:0; }
.movelist { display:flex; flex-direction:column; gap:6px; margin-top:9px; }
.hist { list-style:none; padding:0; margin:9px 0 0; display:flex;
        flex-direction:column; gap:9px; font-size:12.5px; color:var(--ink-2); }
.hist em { font-style:normal; color:var(--ink); }

/* ---------- tables ---------- */
.grid { width:100%; border-collapse:collapse; font-size:13px; }
.grid th { text-align:left; font-family:var(--mono); font-size:10px;
           letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
           font-weight:500; padding:0 10px 8px 0; border-bottom:1px solid var(--rule-2);
           white-space:nowrap; }
.grid td { padding:10px 10px 10px 0; border-bottom:1px solid var(--rule);
           vertical-align:middle; }
.grid td.mid { text-align:center; }
.grid td small { display:block; font-size:11px; }
.yes { color:var(--ok); font-family:var(--mono); font-size:11px; }
.no { color:var(--ink-3); font-family:var(--mono); font-size:11px; }

/* ---------- user picker ---------- */
.userpick { list-style:none; padding:0; margin:16px 0 0;
            display:flex; flex-direction:column; gap:8px; }
.userpick button { display:flex; align-items:center; gap:11px; width:100%;
  text-align:left; padding:10px 12px; background:var(--surface);
  border:1px solid var(--rule-2); border-radius:var(--radius); cursor:pointer;
  font-family:inherit; font-size:13.5px; color:var(--ink); }
.userpick button:hover { border-color:var(--accent); }
.userpick .who { display:flex; flex-direction:column; flex:1; line-height:1.3; }
.userpick .who small { color:var(--ink-3); font-size:11.5px; }
.userpick .go { color:var(--ink-3); }

/* ---------- toast ---------- */
.toast { position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
         background:var(--ink); color:var(--ground); font-size:13px;
         padding:9px 15px; border-radius:var(--radius); z-index:50;
         max-width:calc(100vw - 32px); }
.toast.bad { background:var(--crit); color:#fff; }

/* ---------- phones ----------
 * One lane at a time. Dragging a card to a column that is off screen is unreliable on
 * touch, so the phone gets a tab strip and moves cards from the ticket page instead. This
 * is a different interaction, not a smaller version of the same one. */
@media (max-width:719px) {
  .lanetabs { display:flex; gap:6px; overflow-x:auto; margin:0 0 14px;
              padding-bottom:4px; -webkit-overflow-scrolling:touch; }
  .lanetabs button { flex:none; width:auto; background:var(--surface);
    border:1px solid var(--rule-2); border-radius:14px; padding:6px 13px;
    font-family:inherit; font-size:12.5px; color:var(--ink-2); cursor:pointer;
    display:flex; gap:6px; align-items:center; }
  .lanetabs button.on { background:var(--accent-soft); border-color:var(--accent);
                        color:var(--accent); }
  .lanes { display:block; overflow:visible; max-width:100%; }
  /* One lane at a time, as a plain block rather than a flex item: there is no row to lay
     out on a phone, so the flex basis and min-width dance is just something else to get
     wrong later.

     Note for anyone checking this with headless Chrome: it clamps its window to a 500px
     minimum, so a --window-size narrower than that lays out at 500 and crops the image.
     A lane that appears to overflow in such a screenshot is the screenshot, not the CSS. */
  .lane { display:none; flex:none; width:auto; min-width:0; max-width:100%; }
  .lane.on { display:block; }
  .dropzone { min-width:0; }
  .ttitle, .body { overflow-wrap:anywhere; }
  .topbar { padding:9px 14px; gap:10px; }
  .whoami .who { display:none; }
  .shell, .boardshell { padding:18px 14px 56px; }
  h1 { font-size:20px; }
}

/* --- the shared-password gate ------------------------------------------------
   Its own small block rather than reusing .panel.narrow, because this is the
   first thing anyone sees and it should look composed rather than like a form
   that happened to land on a page. Everything here comes from the same tokens
   as the rest of the app, so it follows light and dark without a second theme. */
.gate-shell { padding:0; max-width:none; }

.gate {
  min-height:100dvh; display:grid; place-items:center; padding:24px;
  /* A very faint wash so the card reads as raised without needing a shadow,
     which at this size looks heavier than it should. */
  background:
    radial-gradient(120% 90% at 50% 0%, var(--accent-soft) 0%, transparent 62%),
    var(--ground);
}

.gate-card {
  width:100%; max-width:370px; background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--radius);
  padding:30px 30px 24px;
}

.gate-mark {
  width:34px; height:34px; border-radius:var(--radius);
  display:grid; place-items:center; margin-bottom:16px;
  background:var(--accent-soft); color:var(--accent);
  border:1px solid var(--rule);
}

.gate-card h1 { font-size:19px; margin:2px 0 7px; letter-spacing:-.01em; }
.gate-card .flash { margin:15px 0 0; }

.gate-form { margin:19px 0 0; display:grid; gap:9px; }
.gate-form input { padding:9px 11px; font-size:14px; }
.gate-form input:focus-visible {
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.gate-form .btn { width:100%; text-align:center; padding:9px 13px; cursor:pointer; }

.gate-note {
  margin:17px 0 0; padding-top:14px; border-top:1px solid var(--rule);
  color:var(--ink-3);
}

/* Visually hidden, still read aloud. The field has a placeholder, which a screen
   reader may not announce as a label. */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (max-width:420px) {
  .gate { padding:14px; align-items:start; padding-top:56px; }
  .gate-card { padding:24px 21px 20px; }
}