/* GENERATED: copy of baskl-ai/design tools/baskl-tools.css (d8539de). Edit it there, then run its sync.sh. */
/* Baskl tools: the design system of Baskl's internal tools (everydays.baskl.ai, worker.baskl.ai).
   Baskl's look (aicolormatch.pro): black ground, white ink, amber accent, Instrument Sans, flat fills instead of
   lines and shadows, square controls. Inputs keep a 1px border, like the product UI.
   Load it before the app's own stylesheet, which keeps only what is specific to that app.
   Font: <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400..700&display=swap"> */

/* ── tokens ─────────────────────────────────────────────────────────── */
:root{
  color-scheme:dark;
  --bg:#000; --surface:#141414; --raised:#1f1f1f; --raised-hi:#2a2a2a; --field:#0a0a0a; --line:#2e2e2e;
  --ink:#fff; --muted:#a6a6a6; --dim:#808080;
  --accent:#ffaa00; --accent-hi:#ffbd33; --accent-ink:#000; --accent-tint:#2b1f00; --bad:#ff6b5e; --bad-tint:#2e110e;
  --font:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --small:13px; --body:15px; --lead:17px; --head:clamp(1.375rem,1.05rem + .9vw,1.875rem);
  --margin:clamp(1rem,2.2vw,2rem); --gutter:clamp(.75rem,1.6vw,1.5rem); --wide:1320px;
  --ease-out:cubic-bezier(.22,1,.36,1); --t-press:140ms; --t-hover:180ms;
}

/* ── base ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--body)/1.5 var(--font);font-kerning:normal;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ol,ul{margin:0}
a{color:inherit}
img,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent);color:var(--accent-ink)}
.head{font-size:var(--head);line-height:1.15;letter-spacing:-.02em;font-weight:500;text-wrap:balance}
.muted{color:var(--muted)}
.link{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:.07em;transition:color var(--t-hover) ease}
@media (hover:hover) and (pointer:fine){.link:hover{color:var(--accent)}}

/* ── top bar ────────────────────────────────────────────────────────────
   <header class="nav"><a class="nav__brand" href="/"><img src="/baskl-logo.png" alt="Baskl" width="392" height="120"></a>
     <a class="nav__product" href="/">Product</a><span class="nav__who" hidden></span><a class="nav__out" href="…">Sign out</a></header> */
.nav{display:flex;align-items:center;gap:1.25rem;height:4.5rem;max-width:var(--wide);margin:0 auto;padding:0 var(--margin);font-size:14px}
.nav__brand img{height:1.25rem;width:auto}
.nav__product{font-weight:600;text-decoration:none}
.nav__who{margin-left:auto;min-width:0;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav__out{text-decoration:none;white-space:nowrap}
.nav__who[hidden]+.nav__out{margin-left:auto}
@media (hover:hover) and (pointer:fine){.nav__product:hover,.nav__out:hover{color:var(--accent)}}
@media (max-width:560px){.nav__who{display:none}.nav__out{margin-left:auto}}
main{max-width:var(--wide);margin:0 auto;padding:0 var(--margin) 4rem}

/* ── controls ───────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:2.5rem;padding:0 1rem;border:0;border-radius:0;background:var(--accent);color:var(--accent-ink);font-size:14px;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease,color var(--t-hover) ease}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn--quiet{background:var(--raised);color:var(--ink)}
.btn--sm{min-height:2rem;padding:0 .75rem;font-size:var(--small);font-weight:500}
.btn.ok{background:var(--accent);color:var(--accent-ink);font-weight:600}
@media (hover:hover) and (pointer:fine){.btn:hover:not(:disabled){background:var(--accent-hi)}.btn--quiet:hover:not(:disabled){background:var(--raised-hi)}}
label{display:block;font-size:var(--small);color:var(--muted)}
label>input,label>select{display:block;margin-top:.35rem}
input,select,textarea{background-color:var(--field);border:1px solid var(--line);border-radius:0;padding:.5rem .65rem;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
select{appearance:none;-webkit-appearance:none;padding-right:2.1rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a6a6a6' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7rem center}
textarea{width:100%;min-height:64px;resize:vertical;font-size:14px;line-height:1.45}
/* "Saving…" / "✓ Saved" / error line under a field that saves as you type */
.savestate{font-size:12px;color:var(--dim);min-height:16px;margin-top:4px}
.savestate.ok{color:var(--ink)}
.savestate.err{color:var(--bad)}
.panel{background:var(--surface);padding:1rem 1.125rem 1.125rem}
/* one-line status strip at the top of a page */
.status{background:var(--surface);padding:.7rem 1rem;margin-bottom:var(--gutter);color:var(--muted);font-size:14px}
.status.run{color:var(--accent)}
.status.err{color:var(--bad);background:var(--bad-tint)}
.alert{background:var(--accent-tint);color:var(--accent);padding:.6rem .75rem;margin:0 0 .5rem;font-size:var(--small)}
.alert.bad{background:var(--bad-tint);color:var(--bad)}
.empty{color:var(--muted);padding:3rem 0}

/* on/off chip: <button class="toggle" aria-pressed="true">All plugins</button> */
.toggle{min-height:2.25rem;padding:0 .8rem;border:0;background:var(--raised);color:var(--muted);font-size:var(--small);font-weight:500;white-space:nowrap;transition:background-color var(--t-hover) ease,color var(--t-hover) ease,transform var(--t-press) var(--ease-out)}
.toggle:active{transform:scale(.97)}
.toggle[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);font-weight:600}
@media (hover:hover) and (pointer:fine){.toggle:hover{background:var(--raised-hi);color:var(--ink)}.toggle[aria-pressed="true"]:hover{background:var(--accent-hi);color:var(--accent-ink)}}

/* ── tables: zebra fills, no lines ──────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:.55rem .75rem;font-weight:400}
thead th{color:var(--muted);font-size:var(--small)}
tbody tr:nth-child(odd) td{background:var(--surface)}
td.n{font-variant-numeric:tabular-nums;color:var(--muted)}

/* phones: 16px fields so iOS doesn't zoom into them */
@media (max-width:760px){input,select,textarea{font-size:16px}}

/* ── sign-in page ───────────────────────────────────────────────────────
   <html class="signin"> (the page's rem is 17px) <body><header><img src="/baskl-logo.png" alt="Baskl" width="392" height="120"></header>
   <main><h1>Product</h1><p>Sign in with your … Google account.</p>
   <button id="go">{Google "G" svg}Sign in with Google</button><div class="err" role="alert"></div></main></body> */
html.signin{font:17px/1.55 var(--font)}
.signin body{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;font:inherit;font-kerning:auto;overflow-x:visible}
.signin header{display:flex;align-items:center;gap:1.25rem;height:5rem;padding:0 var(--margin)}
.signin header img{height:1.375rem;width:auto;display:block}
.signin main{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:none;margin:0;padding:0 var(--margin) 18vh}
.signin h1{font-size:clamp(2.375rem,0.9rem + 4.4vw,4.75rem);line-height:1;letter-spacing:-.035em;font-weight:500;margin:0 0 1.25rem}
.signin p{color:var(--muted);margin:0 0 2rem;max-width:30em}
.signin main>button{display:inline-flex;align-items:center;gap:.75rem;align-self:flex-start;min-height:3rem;padding:0 1.5rem;font:inherit;font-weight:600;color:#1f1f1f;background:#fff;border:0;cursor:pointer;transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease}
.signin main>button:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.signin main>button:hover{background:#e6e6e6}}
.signin main>button:disabled{opacity:.6;cursor:default}
.signin main>button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.signin .err{color:var(--bad);min-height:1.5em;margin-top:1rem;max-width:30em}

/* ── more components (added with the worker.baskl.ai dashboard; class-scoped, so pages that don't use
   them are unaffected) ─────────────────────────────────────────────────── */

/* page links in the top bar: <nav class="nav__links"><a class="active" aria-current="page" href="…">…</a></nav>
   placed after .nav__product. Under 760px they move to their own scrolling row. */
.nav__links{display:flex;gap:1.1rem;min-width:0}
.nav__links a{color:var(--muted);text-decoration:none;white-space:nowrap;transition:color var(--t-hover) ease}
.nav__links a.active{color:var(--ink)}
@media (hover:hover) and (pointer:fine){.nav__links a:hover{color:var(--accent)}}
.nav__links~.nav__who{margin-left:auto}
@media (max-width:760px){
  .nav:has(.nav__links){flex-wrap:wrap;height:auto;row-gap:0;padding-top:.9rem}
  .nav:has(.nav__links) .nav__out{margin-left:auto}
  .nav__links{order:3;flex:1 0 100%;overflow-x:auto;scrollbar-width:none;padding:.75rem 0 .8rem}
  .nav__links::-webkit-scrollbar{display:none}
}

/* page title row: <div class="page-head"><div class="page-title"><h1 class="head">Tickets</h1><div class="page-count">…</div></div>
   <div class="page-head-actions">…</div></div> */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem 1rem;flex-wrap:wrap;margin:.5rem 0 1.25rem}
.page-title{min-width:0}
.page-count{font-size:var(--small);color:var(--muted);margin-top:.2rem}
.page-head-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.page-hint{font-size:var(--small);color:var(--muted);margin:-.5rem 0 1.25rem;max-width:80ch}

/* segmented control (tabs, view switch): <div class="seg"><button class="active">Pending <span class="tab-n">3</span></button>…</div>
   a button is on with .active or aria-pressed="true" */
.seg{display:flex;gap:2px;flex-wrap:wrap}
.seg>button{display:inline-flex;align-items:center;gap:.4rem;min-height:2.25rem;padding:0 .85rem;border:0;background:var(--raised);color:var(--muted);font-size:var(--small);font-weight:500;white-space:nowrap;transition:background-color var(--t-hover) ease,color var(--t-hover) ease}
.seg>button.active,.seg>button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);font-weight:600}
@media (hover:hover) and (pointer:fine){.seg>button:not(.active):not([aria-pressed="true"]):hover{background:var(--raised-hi);color:var(--ink)}}
.tab-n{font-variant-numeric:tabular-nums;opacity:.7}

/* small label: <span class="chip">delivered</span>, --ok, --bad, --accent */
.chip{display:inline-flex;align-items:center;min-height:1.35rem;padding:0 .45rem;background:var(--raised);color:var(--muted);font-size:12px;font-weight:500;white-space:nowrap}
.chip--accent{background:var(--accent-tint);color:var(--accent)}
.chip--bad{background:var(--bad-tint);color:var(--bad)}
.chip--ok{color:var(--ink)}

/* danger action: <button class="btn btn--quiet btn--danger"> */
.btn--danger{color:var(--bad)}
@media (hover:hover) and (pointer:fine){.btn--danger:hover:not(:disabled){background:var(--bad-tint)}}

/* list of cards: <div class="entry-list"><a class="entry entry--link"><div class="entry__head"><span class="entry__title">…</span>…</div>
   <div class="entry__meta"><span>…</span></div><div class="entry__body">…</div></a></div> */
.entry-list{display:flex;flex-direction:column;gap:4px}
.entry{display:block;background:var(--surface);padding:.85rem 1rem;text-decoration:none;color:inherit;text-align:left;width:100%;border:0;font-size:14px}
.entry--link{cursor:pointer;transition:background-color var(--t-hover) ease}
@media (hover:hover) and (pointer:fine){.entry--link:hover{background:#191919}}
.entry--compact{padding:.6rem .75rem}
.entry__head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}
.entry__title{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entry__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .9rem;margin-top:.35rem;font-size:var(--small);color:var(--muted)}
.entry__body{margin-top:.35rem;color:var(--muted);font-size:var(--small);line-height:1.5}
.entry__body--pre{white-space:pre-wrap;color:var(--ink)}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* rendered Markdown: <div class="prose">…</div> */
.prose{line-height:1.6;overflow-wrap:anywhere}
.prose>*+*{margin-top:.75em}
.prose h1,.prose h2,.prose h3,.prose h4{font-size:var(--lead);font-weight:600;line-height:1.3;margin-top:1.2em}
.prose ul,.prose ol{padding-left:1.4em}
.prose a{color:var(--accent)}
.prose code{font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--field);padding:.1em .35em}
.prose pre{background:var(--field);padding:.75rem;overflow-x:auto}
.prose pre code{background:none;padding:0}
.prose blockquote{margin-left:0;padding-left:.9rem;box-shadow:inset 2px 0 var(--line);color:var(--muted)}
.prose table{font-size:var(--small)}
.prose img{max-width:100%}

/* modal: <dialog class="dialog"><article><header><h3>…</h3><button class="dialog__close" aria-label="Close"></button></header>
   <div class="dialog__body">…</div><footer>…buttons…</footer></article></dialog>, opened with showModal(); --wide for long forms */
.dialog{padding:0;border:0;background:var(--surface);color:var(--ink);width:min(560px,calc(100vw - 2rem));max-height:calc(100vh - 2rem);max-height:calc(100dvh - 2rem)}
.dialog--wide{width:min(900px,calc(100vw - 2rem))}
.dialog::backdrop{background:rgba(0,0,0,.72)}
.dialog>article{display:flex;flex-direction:column;max-height:inherit}
.dialog header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.125rem .5rem}
.dialog header h3{font-size:var(--lead);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dialog__close{flex:none;width:2.25rem;height:2.25rem;border:0;background:var(--raised);position:relative}
.dialog__close::before,.dialog__close::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%) rotate(45deg)}
.dialog__close::after{transform:translate(-50%,-50%) rotate(-45deg)}
@media (hover:hover) and (pointer:fine){.dialog__close:hover{background:var(--raised-hi)}}
.dialog__body{padding:.5rem 1.125rem 1rem;overflow-y:auto;display:flex;flex-direction:column;gap:.85rem}
.dialog__body label>input,.dialog__body label>textarea,.dialog__body label>select{width:100%;margin-top:.35rem}
.dialog footer{display:flex;justify-content:flex-end;gap:4px;padding:0 1.125rem 1.125rem}

/* toasts: <div id="toast-root"></div> once per page; each <div class="toast toast-success|error|info show">…</div> */
#toast-root{position:fixed;right:var(--margin);bottom:var(--margin);z-index:2000;display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:none;max-width:calc(100vw - 2rem)}
.toast{background:var(--raised);color:var(--ink);padding:.7rem 1rem;font-size:14px;max-width:420px;box-shadow:0 8px 30px rgba(0,0,0,.6);opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .25s var(--ease-out)}
.toast.show{opacity:1;transform:none}
.toast-success{box-shadow:inset 3px 0 var(--accent),0 8px 30px rgba(0,0,0,.6)}
.toast-error{background:var(--bad-tint);color:var(--bad)}

/* the Orb, "an AI is working": <span class="orb-slot"></span>, then ToolsOrb.mount(slot) (baskl-tools-orb.js).
   lighten lets the Orb's black ground take the surface it sits on. */
.orb-slot{flex:none;width:44px;height:44px;display:block}
.orb-slot>canvas,.orb-slot>img{display:block;width:100%;height:100%;mix-blend-mode:lighten}

/* checkboxes take the accent */
input[type="checkbox"]{accent-color:var(--accent)}