/* Your account: the SQL panel. Extends ../styles.css (tokens, nav, .btn, .field, .err); nothing here
   is loaded from anywhere but this origin. No inline styles in index.html: the site's CSP can drop
   'unsafe-inline' for styles without touching this page. */

body.app { font-size: 13px; }
.app .wrap { max-width: 1536px; padding-bottom: 40px; }
.app nav.top { margin-bottom: 28px; }
.app nav.top ul { gap: 28px; }
.app .brand { font-size: 28px; }
.app .brand svg { width: 38px; height: 30px; }

.app h1 { font-size: 28px; margin: 0 0 6px; }
.app h2 { font-size: 17px; margin: 0 0 14px; max-width: none; }
.app h3 { font-size: 14px; margin: 0 0 10px; }
.app .lede { font-size: 14px; margin: 0 0 22px; max-width: 70ch; }

.hidden { display: none !important; }

/* sign-in */
.signin .field input { font-family: var(--mono); font-size: 12.5px; }
.signin details { margin: 0 0 18px; font-size: 12.5px; color: var(--muted); }
.signin summary { cursor: pointer; }

/* account bar */
.acct { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1px solid var(--rule); border-radius: 10px; background: #fff; padding: 10px 16px; margin: 0 0 20px; font-size: 12.5px; }
.acct .who { font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); }
.acct .spacer { flex: 1; }
.acct .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rule); display: inline-block; margin-right: 6px; vertical-align: -1px; }
.acct .dot.ok { background: var(--ok); }
.acct .dot.warn { background: var(--accent); }

/* layout */
.side { border: 1px solid var(--rule); border-radius: 10px; background: #fff; padding: 16px 18px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.side h3 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin: 14px 0 8px; }
.side h3:first-child { margin-top: 0; }
.tree { list-style: none; margin: 0; padding: 0; }
.tree li { margin: 0; }
.tree .ns { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); margin: 8px 0 3px; }
.tree button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 5px 8px; border-radius: 6px; font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.tree button:hover { background: var(--bg-soft); }
.tree button.on { background: var(--tint); color: var(--accent-deep); }
.tree button small { color: var(--muted); font-family: var(--mono); font-size: 10px; margin-left: 6px; }
.side .empty { color: var(--muted); font-size: 12px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin: 0 0 18px; flex-wrap: wrap; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 8px 14px; font: inherit; font-size: 13px; color: var(--ink-soft); cursor: pointer; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--accent); }
.tab { display: none; }
.tab.on { display: block; }

.box { border: 1px solid var(--rule); border-radius: 10px; background: #fff; padding: 18px 20px; margin: 0 0 18px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row .grow { flex: 1; }
.right { margin-left: auto; }

/* SQL */
.status { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
.status b { color: var(--ink); font-weight: 500; }
textarea.sql { width: 100%; min-height: 150px; resize: vertical; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--code); background: var(--dark); border: 1px solid var(--dark-2); border-radius: 8px; padding: 14px 16px; }
textarea.sql:focus { outline: 2px solid var(--accent); }
.btn.sm { font-size: 14px; padding: 8px 18px; }
.btn.xs { font-family: var(--sans); font-size: 12px; padding: 6px 12px; border-radius: 6px; }
.btn.ghost.xs { border-color: var(--rule); color: var(--ink-soft); }
.btn.ghost.xs:hover { background: var(--bg-soft); }
.btn.danger { background: transparent; color: var(--accent-deep); border: 1px solid var(--accent); }
.btn.danger:hover { background: var(--tint); }
input.num { width: 90px; padding: 7px 10px; font: inherit; font-size: 12.5px; border: 1px solid var(--rule); border-radius: 6px; }
label.inl { font-size: 12px; color: var(--ink-soft); display: inline-flex; gap: 8px; align-items: center; }

.results { overflow: auto; max-height: 60vh; border: 1px solid var(--rule); border-radius: 8px; }
.results table { border-collapse: separate; border-spacing: 0; font-size: 12px; font-family: var(--mono); min-width: 100%; }
.results th, .results td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--rule); white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.results th { position: sticky; top: 0; background: var(--bg-soft); font-weight: 500; color: var(--ink-soft); }
.results th small { display: block; color: var(--muted); font-weight: 400; font-size: 10px; }
.results td.num { text-align: right; }
.results td.null { color: var(--muted); font-style: italic; }
.results tr:last-child td { border-bottom: 0; }

.err { display: none; }
.err.on { display: block; }
.err pre { margin: 8px 0 0; font-size: 11px; white-space: pre-wrap; word-break: break-word; color: var(--ink-soft); }
/* the SQL error's LINE n and its caret: one unwrapped line, so the ^ stays under the character it points at */
#query-err pre.det { white-space: pre; word-break: normal; overflow-x: auto; }
.note { border-left: 3px solid var(--ok); background: #eef8f1; color: var(--ok-text); padding: 10px 14px; border-radius: 4px; font-size: 12.5px; margin: 0 0 14px; }
.note.warn { border-left-color: var(--accent); background: var(--tint); color: var(--accent-deep); }
.note.info { border-left-color: var(--muted); background: var(--bg-soft); color: var(--ink); }   /* neutral: something to keep, not a warning (the backup codes) */

pre.code { font-size: 11.5px; }
pre.code.wrap { white-space: pre-wrap; word-break: break-all; }
.once { border: 1px dashed var(--accent); background: var(--tint); border-radius: 8px; padding: 12px 14px; margin: 12px 0 0; }
.once b { display: block; margin-bottom: 6px; color: var(--accent-deep); }

/* forms */
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: end; margin: 0 0 12px; }
.field { margin: 0; }
.field input, .field select { width: 100%; padding: 9px 12px; font: inherit; font-size: 12.5px; color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 7px; }
.field select[multiple] { min-height: 74px; }
.cols { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 12.5px; }
.cols td, .cols th { padding: 4px 6px 4px 0; }
.cols thead th { text-align: left; font-weight: inherit; }
.cols th.req { text-align: center; width: 80px; }
.cols th.rm { width: 36px; }
.cols input, .cols select { width: 100%; padding: 7px 10px; font: inherit; font-size: 12px; border: 1px solid var(--rule); border-radius: 6px; }
.cols td.req { text-align: center; width: 80px; }
.cols td.rm { width: 36px; }
.cols button.rm { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; }

table.plain.small { font-size: 12.5px; }
table.plain.small th, table.plain.small td { padding: 6px 10px 6px 0; }
table.plain.small td:first-child { font-family: var(--mono); font-size: 12px; }
table.plain .mono { font-family: var(--mono); font-size: 11.5px; }
table.plain td .btn.xs { margin-left: 8px; }
.kv { font-size: 12.5px; margin: 0 0 14px; }
.kv dt { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .04em; align-self: center; }
.kv dd { margin: 0; font-family: var(--mono); font-size: 12px; word-break: break-all; }


/* small screens (tester 2026-09-21, item 4: horizontal overflow at 390 px, the onboarding card and the sidebar
   clipped). A grid child may shrink below its content (min-width: 0; `1fr` alone means minmax(auto, 1fr), whose
   minimum is the content), a table wider than its box scrolls inside the box, long identifiers wrap. */
.box, .side { min-width: 0; overflow-x: auto; }
.acct .who { overflow-wrap: anywhere; }
.handle input { min-width: 0; }
.kv { display: grid; gap: 6px 18px; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); }
.once-row { align-items: flex-start; gap: 8px; }
.once-row pre.code { margin: 0; flex: 1; min-width: 0; }
@media (max-width: 1000px) {
    .side { position: static; max-height: none; }
  .app .wrap { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 640px) {
  .app .wrap { padding-left: 14px; padding-right: 14px; }
  .app h1 { font-size: 32px; }
  .app nav.top ul { gap: 8px 16px; }
  .tabs button { padding: 8px 10px; font-size: 12.5px; }
  .newcat input { width: 100%; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .kv dt { margin-top: 8px; }
  .results th, .results td { max-width: 240px; }
  .cathead h2 { font-size: 17px; }
}

/* the shortcut hint inside the orange Run button */
.btn .muted { color: rgba(255, 255, 255, .78); }

/* sign-in and first-login screens (2026-09-20: OpenID Connect first, the API key a fold-out) */
.signin .row { margin: 0 0 14px; }
.signin .btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.signin details form { margin-top: 12px; }
.handle { display: flex; align-items: center; border: 1px solid var(--rule); border-radius: 7px; background: #fff; overflow: hidden; }
.handle .pre { font-family: var(--mono); font-size: 12px; color: var(--muted); padding: 0 0 0 12px; white-space: nowrap; }
.handle input { border: 0 !important; border-radius: 0 !important; font-family: var(--mono); font-size: 12.5px; padding-left: 4px !important; }
.handle input:focus { outline: none !important; }
.handle:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }   /* the ring the input gives up (#1345) */
.handle.taken { border-color: var(--accent); }
.handle.free { border-color: var(--ok); }

/* sidebar organisation picker */
.orgpick { font-size: 12.5px; margin: 0 0 6px; }
.orgpick select { width: 100%; padding: 6px 8px; font: inherit; font-size: 12.5px; border: 1px solid var(--rule); border-radius: 6px; background: #fff; }
.orgpick .h { font-family: var(--mono); font-size: 11px; color: var(--muted); word-break: break-all; }

/* levels, roles, bars */
.lvl { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; border: 1px solid var(--rule); color: var(--ink-soft); }
.lvl.write { border-color: var(--ok); color: var(--ok-text); }
.lvl.read { border-color: var(--rule); }
.lvl.none, .lvl.unknown { color: var(--muted); border-style: dashed; }
.lvl.admin { border-color: var(--accent); color: var(--accent-deep); }
.bar { height: 10px; background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; margin: 6px 0 4px; }
.bar i { display: block; height: 100%; background: var(--ok); }
.bar.warn i { background: var(--accent); }
.bar.over i { background: var(--accent-deep); }
/* a share of a total, not a level against a limit: thinner and neutral (the Usage tab's per-catalog rows) */
.bar.thin { height: 5px; margin: 5px 0 2px; }
.bar.thin i { background: var(--ink-soft); opacity: .55; }
.meter { margin: 0 0 16px; }
.meter .row { font-size: 12.5px; }
.meter .row b { font-weight: 500; }
table.plain.small select { padding: 4px 8px; font: inherit; font-size: 12px; border: 1px solid var(--rule); border-radius: 6px; background: #fff; }
table.grants td, table.grants th { text-align: center; }
table.grants td:first-child, table.grants th:first-child { text-align: left; }

/* danger zone */
.danger-zone { border-color: var(--accent); }
.danger-zone h2 { color: var(--accent-deep); }
.danger-zone p { font-size: 12.5px; }
.btn.danger.sm { font-family: var(--sans); font-size: 13px; padding: 9px 16px; }
.btn.danger[disabled] { opacity: .45; }

/* "this deployment does not serve that route yet" */
.notyet { border-left: 3px solid var(--rule); background: var(--bg-soft); color: var(--ink-soft); padding: 10px 14px; border-radius: 4px; font-size: 12.5px; margin: 0 0 14px; }
.notyet code { font-size: 11.5px; }

/* the login flow pages served by this file (docs/login.md): /app/welcome, /app/reset, /app/forgot, /app/device */
.signin form .field input[type=email], .signin form .field input[type=password], .signin form .field input[type=text] { font-family: var(--sans); font-size: 13px; }
.signin .field .hint a { color: var(--ink-soft); }
.signin .check { margin: 0 0 16px; font-size: 12.5px; }
.signin .terms { margin: 0 0 16px; }
.signin .sub { font-size: 14px; color: var(--ink-soft); max-width: 60ch; }
.signin .notyet { max-width: 60ch; }
input.usercode { font-family: var(--mono) !important; font-size: 15px !important; letter-spacing: .18em; text-transform: uppercase; max-width: 260px; }

/* the device consent screen (docs/agent-setup.md): what approving connects, and the level the person may lower */
.consent { margin: 0 0 16px; }
/* the login consent's picker (#2455): every catalog after "Add catalogs…" scrolls inside the card, the page stays one screen */
.consent .grants-scroll { max-height: 18rem; overflow-y: auto; }
.consent #device-more { margin: 0 0 14px; }
.consent #device-levels label.radio, .consent #device-agents label.radio { display: block; margin: 4px 0; }
.consent #device-cat-search { width: 100%; margin: 6px 0; }
.consent #device-wholine { margin: 0 0 10px; }
.consent .kv dd { font-family: var(--sans); font-size: 13px; word-break: normal; overflow-wrap: anywhere; }
.consent .kv dd b { font-weight: 600; }
.levels, .choices { border: 1px solid var(--rule); border-radius: 8px; padding: 10px 14px 4px; margin: 0 0 14px; }
.levels legend, .choices legend { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .04em; padding: 0 6px; }
.levels .check, .choices .check { margin: 0 0 10px; font-size: 12.5px; }
.levels label.radio { display: inline-flex; gap: 6px; align-items: center; margin: 0 14px 8px 0; font-size: 13px; }
.levels .hint { margin: 0 0 8px; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-deep); text-decoration: underline; cursor: pointer; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#signup-inline .sub { margin: 0 0 14px; font-size: 13px; }
/* "Continue in your agent": the prompt a person pastes; no credential in it */
.continue { border-color: var(--accent); background: var(--tint); }
.continue h2 { color: var(--accent-deep); }
.continue .prompt { background: #fff; color: var(--ink); border: 1px solid var(--rule); border-radius: 8px; padding: 12px 14px; font-size: 12px; line-height: 1.5; margin: 0 0 12px; white-space: pre-wrap; word-break: normal; }
.continue .form-row { max-width: 320px; }

/* the Catalogs tab, 2026-09-20 night: a list view and a catalog view (Connect · Tables · Access · Settings) */
.newcat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); }
.newcat label { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.newcat input { width: 220px; padding: 7px 10px; font: inherit; font-family: var(--mono); font-size: 12px; border: 1px solid var(--rule); border-radius: 6px; }
.newcat .hint { flex-basis: 100%; font-size: 12px; color: var(--muted); margin: 0; }
.newcat .hint code { font-size: 11px; }
table.catalogs a.catname { color: var(--ink); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--rule); }
table.catalogs a.catname:hover { color: var(--accent-deep); border-bottom-color: var(--accent); }
.crumbs { margin: 0 0 8px; font-size: 12.5px; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--accent-deep); }
.cathead { margin: 0 0 12px; }
.cathead h2 { margin: 0; font-size: 20px; }
.cathead .lvl { vertical-align: middle; }
.tabs.sub { margin: 0 0 16px; }
.tabs.sub button { font-size: 12.5px; padding: 6px 12px; }
.cvsec[role=tabpanel] { display: none; }
.cvsec[role=tabpanel].on { display: block; }
.acctsec[role=tabpanel] { display: none; }
.acctsec[role=tabpanel].on { display: block; }
.recipe { margin: 0 0 12px; }
.recipe .row { margin: 0 0 4px; }
.recipe pre.code { margin: 0; }
details.fold { margin: 12px 0 0; border-top: 1px solid var(--rule); padding-top: 10px; font-size: 12.5px; }
details.fold summary { cursor: pointer; color: var(--ink-soft); font-weight: 500; }
details.fold[open] summary { margin-bottom: 10px; }
details.fold .kv dd { font-family: var(--mono); font-size: 11.5px; }

/* The login card (2026-09-22, the LakehouseBox mockup): slim header, one centred white card, slim footer.
   Every view carrying .signin (welcome, reset, forgot, device, authorize, onboard) inherits the card; only the
   login view has the centred head (.lg-head). The ids app.js looks up are unchanged; #key-details is now the
   "Advanced connection options" fold (the API address and the API key), which the script opens when the login
   route is missing. .lg-* classes are the login redesign's own. */
.lg-top { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; min-height: 72px; margin-bottom: 56px; flex-wrap: wrap; }
.lg-new { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.lg-new a { display: inline-block; padding: 10px 0; color: var(--accent); font-weight: 500; border-bottom: 0; }
.lg-new a:hover { color: var(--accent-deep); }
/* signed in (the panel, or the first-login step): the invitation to create an account goes, the header tightens */
body:has(#panel:not(.hidden)) .lg-new, body:has(#onboard:not(.hidden)) .lg-new { display: none; }
body:has(#panel:not(.hidden)) .lg-top { margin-bottom: 28px; }

.signin { max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid var(--rule); border-radius: 14px; padding: 36px 40px 30px; box-shadow: 0 18px 50px rgba(26, 25, 23, .06), 0 1px 3px rgba(26, 25, 23, .05); }
.lg-head { text-align: center; margin: 0 0 28px; }
.lg-head .lg-mark { display: block; width: 40px; height: 40px; margin: 0 auto 18px; }
.app .lg-head h1 { font-size: 30px; font-weight: 500; letter-spacing: -.03em; line-height: 1.05; margin: 0 0 10px; }
.lg-head .sub { font-family: var(--sans); font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); margin: 0; max-width: none; }

.signin .field { margin: 0 0 20px; }
.signin .field label { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.signin .field input { min-height: 40px; border-radius: 8px; border-color: #d9d2c8; }
.signin .field input::placeholder { color: #a39b93; }
.lg-labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.lg-labelrow label { margin: 0; }
.lg-labelrow a { font-size: 12.5px; font-weight: 500; color: var(--accent); padding: 10px 0; margin: -10px 0; }
.lg-labelrow a:hover { color: var(--accent-deep); }
/* the eye: a 44px button inside the field that flips the input between password and text (app.js, eyeToggle) */
.lg-pw { position: relative; }
.lg-pw input { padding-right: 54px; }
.lg-eye { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 44px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 7px; color: var(--ink-soft); cursor: pointer; padding: 0; }
.lg-eye:hover { color: var(--ink); background: var(--bg-soft); }
.lg-eye .eye-off { display: none; }
.lg-eye[aria-pressed="true"] .eye-on { display: none; }
.lg-eye[aria-pressed="true"] .eye-off { display: inline; }
.signin .btn.lg-submit { width: 100%; justify-content: center; background: var(--accent); font-family: var(--sans); font-size: 14.5px; font-weight: 600; min-height: 46px; border-radius: 9px; margin: 4px 0 0; }
.signin .btn.lg-submit:hover { background: var(--accent-deep); }
/* passkeys (docs/login.md "Passkeys"): the second way in, under the form and in the code step; outlined, not the accent */
.signin .btn.ghost.lg-submit { background: transparent; color: var(--ink); border: 1px solid var(--ink); font-size: 13.5px; min-height: 40px; margin: 12px 0 0; }
.signin .btn.ghost.lg-submit:hover { background: var(--bg-soft); }
.signin #pk-login-row { margin: 6px 0 0; }
/* "Continue with Google" (research/82): above the form, outlined like the passkey button, Google's mark on the left */
.signin #google-row { margin: 4px 0 0; }
.signin .btn.ghost.lg-google { margin: 0; min-height: 44px; gap: 10px; align-items: center; }
.signin .btn.ghost.lg-google svg { flex: none; }
.signin .lg-google-terms { margin: 8px 0 0; text-align: center; font-size: 12px; }
.lg-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 10px; color: var(--muted); font-size: 12px; }
.lg-or::before, .lg-or::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
/* the one "or" under the passkey and Google buttons: only while one of them shows (founder, 2026-11-01) */
#lg-or { display: none; }
#pk-login-row:not(.hidden) ~ #lg-or, #google-row:not(.hidden) ~ #lg-or { display: flex; }
#pk-login-row .btn.ghost.lg-submit { margin: 0 0 10px; }
/* the "Let <client> set it up" offer folds away during a login's second step: only the step is on screen then */
#gcode-form:not(.hidden) ~ #signin-setup, #mfa-form:not(.hidden) ~ #signin-setup,
#enrol-form:not(.hidden) ~ #signin-setup, #enrol-codes:not(.hidden) ~ #signin-setup { display: none; }
.lg-setup .terms { margin: 8px 0 0; }
.lg-mfa-pk { margin: 0 0 18px; }
/* the approval pages (device, authorize) are reached signed in: no "Create an account" bar, and the help line (which
   sits after the sign-in card in the page) is not floated above them (founder, 2026-11-02) */
body:has(#device:not(.hidden)) .lg-new, body:has(#authorize:not(.hidden)) .lg-new,
body:has(#device:not(.hidden)) .lg-help, body:has(#authorize:not(.hidden)) .lg-help { display: none; }
/* a login on the way to an approval keeps ONE way to sign up (founder, 2026-11-01: four offers on one screen): the note's
   link, whose mail brings the person back to the request; the /signup bar's mail opens in a new tab without it, and the
   Google line repeats what Continue with Google already does (it keeps the request: this tab's lhbox.next survives it) */
body.lg-pending .lg-new, body.lg-pending .lg-google-terms { display: none; }
/* the consent page: what the application may do, as plain words (the scope codes are in each line's title) */
.consent-scopes { margin: 0; padding-left: 18px; }
.consent-scopes li { margin: 2px 0; }
.lg-stay { text-align: center; font-size: 12px; color: var(--muted); margin: 14px 0 0; }
.signin #idp-row { margin: 18px 0 0; flex-direction: column; align-items: stretch; }
.signin #idp-row .btn { justify-content: center; }
.signin #idp-row .small { text-align: center; }
/* the fold: the API address (self-hosted deployments) and the API key */
.signin details.lg-adv { margin: 24px 0 0; padding-top: 6px; border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--ink-soft); }
.lg-adv summary { display: flex; align-items: center; gap: 12px; min-height: 34px; list-style: none; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ink); }
.lg-adv summary::-webkit-details-marker { display: none; }
.lg-adv summary::before { content: ""; flex: none; width: 8px; height: 8px; margin: -4px 4px 0; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform .15s; }
.lg-adv[open] summary::before { transform: rotate(-135deg); margin-top: 4px; }
.lg-adv-body { padding: 8px 0 0; }
.lg-adv-body .field label { font-size: 12.5px; }
.lg-adv-body .field label .muted { font-weight: 400; }
.lg-adv-body form { margin: 0; }
.lg-adv-body .btn.sm.ghost { font-family: var(--sans); font-size: 13px; min-height: 34px; }
.lg-help { text-align: center; margin: 24px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.lg-help a { display: inline-block; padding: 10px 0; color: var(--accent); font-weight: 500; border-bottom: 0; }
.lg-help a:hover { color: var(--accent-deep); }
/* the other views keep their own head: an eyebrow, a heading, a lede, inside the same card */
.signin .eyebrow { margin-bottom: 14px; }
.signin > h1 { font-size: 24px; margin: 0 0 10px; }
.signin .lede { font-size: 13.5px; margin: 0 0 20px; }

footer.lg-foot { margin-top: 72px; border-top: 1px solid var(--rule); padding: 24px 0 36px; display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
footer.lg-foot p { margin: 0; max-width: none; }
.lg-foot-brand { font-family: var(--serif); font-weight: 600; font-size: 17px; letter-spacing: -.02em; color: var(--ink); border-bottom: 0; }
.lg-op { display: block; font-size: 11.5px; margin-top: 2px; }
footer.lg-foot ul { gap: 6px 24px; }
footer.lg-foot ul a { padding: 12px 0; }
footer.lg-foot ul a:hover { color: var(--ink); }

@media (max-width: 640px) {
  .lg-top { min-height: 60px; margin-bottom: 24px; }
  .lg-new { font-size: 13px; }
  .signin { padding: 26px 18px 20px; border-radius: 12px; }
  .app .lg-head h1 { font-size: 24px; }
  .lg-head .sub { font-size: 14px; }
  .signin > h1 { font-size: 22px; }
  footer.lg-foot { margin-top: 48px; justify-content: center; text-align: center; }
  footer.lg-foot ul { justify-content: center; }
}


/* ============================================================================================================
   The workspace (2026-09-22, the founder's mockup). One sidebar: organisation navigation above, the catalog and
   table tree below. No oversized header, no sign-in banner: the brand lives in the sidebar, the identity in its
   foot, DuckDB's readiness in the top-right corner, the connection in a one-line footer. Settings are cards with a
   short explanation beside each control; the long compatibility text folds. Serif stays for the brand and the
   page title; every other heading in the workspace is sans-serif. app.js's ids and tab roles are untouched.
   ============================================================================================================ */
body:has(#panel:not(.hidden)) { background: var(--bg); }
body:has(#panel:not(.hidden)) > .wrap { max-width: none; padding: 0; }   /* > : pre.code.wrap is not the layout wrapper (2026-09-25) */
body:has(#panel:not(.hidden)) .lg-top, body:has(#panel:not(.hidden)) footer.lg-foot { display: none; }
body:has(#panel:not(.hidden)) #main { margin: 0; }

.ws { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
.ws-side { display: flex; flex-direction: column; gap: 10px; padding: 14px 12px 12px; background: #fff; border-right: 1px solid var(--rule); position: sticky; top: 0; height: 100vh; overflow: auto; }
.ws-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; color: var(--ink); border-bottom: 0; }
.ws-side .orgpick { margin: 0; padding: 0 2px; }
.ws-side .orgpick select { font-size: 12.5px; border-radius: 8px; }
.ws-side .orgpick .h { font-size: 10.5px; margin-top: 4px; }

/* navigation: the same tablist, vertical */
.tabs.ws-nav { display: flex; flex-direction: column; gap: 2px; border: 0; margin: 4px 0 0; }
.tabs.ws-nav button { display: flex; align-items: center; width: 100%; text-align: left; border: 0; border-left: 3px solid transparent; margin: 0; padding: 9px 10px 9px 13px; border-radius: 0 8px 8px 0; font-family: var(--sans); font-size: 13px; color: var(--ink-soft); }
.tabs.ws-nav button svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tabs.ws-nav button:hover { background: var(--bg-soft); color: var(--ink); }
.tabs.ws-nav button.on { background: var(--tint); color: var(--accent-deep); border-left-color: var(--accent); font-weight: 500; }

/* the explorer: catalogs, then the selected catalog's tables */
.ws-explorer { border-top: 1px solid var(--rule); padding-top: 12px; }
.ws-explorer h3 { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin: 0 0 8px; padding: 0 2px; }
.ws-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; padding: 0; }
.ws-iconbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ws-iconbtn:hover { background: var(--bg-soft); color: var(--ink); }
.ws-explorer .tree button { font-size: 12px; padding: 4px 8px 4px 28px; position: relative; }
.ws-explorer #tree-wh .catname::before { content: ""; position: absolute; }
.ws-explorer .tree-tables { border-left: 1px solid var(--rule); padding-left: 4px; }
.ws-explorer .tree-tables button::before { content: ""; position: absolute; }

.ws-bottom { margin-top: auto; border-top: 1px solid var(--rule); padding-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.ws-bottom > a { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 13px; font-size: 12.5px; color: var(--ink-soft); border-bottom: 0; border-radius: 8px; }
.ws-bottom > a:hover { background: var(--bg-soft); color: var(--ink); }
.ws-bottom svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ws-user { display: flex; align-items: center; gap: 10px; }
.ws-avatar { flex: none; border-radius: 50%; background: var(--bg-soft); border: 1px solid var(--rule); display: inline-flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 600; color: var(--ink); }
.ws-user .who { flex: 1; min-width: 0; font-family: var(--sans); text-overflow: ellipsis; }

/* the main column */
.ws-main { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
.ws-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--rule); background: rgba(251, 248, 244, .92); position: sticky; top: 0; }
.ws-crumbs { display: flex; align-items: center; gap: 10px; font-family: var(--sans); color: var(--ink-soft); }
.ws-crumbs .sep { color: var(--muted); }
.ws-crumbs [aria-current] { color: var(--ink); }
.ws-crumbs .linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-soft); cursor: pointer; }
.ws-crumbs .linkish:hover { color: var(--accent-deep); }
.ws-content { flex: 1; }

/* titles: serif for the page title, sans for everything below */
.ws-titlerow { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin: 0 0 18px; }
.app .ws-title { font-family: var(--serif); font-weight: 500; font-size: 28px; letter-spacing: -.025em; line-height: 1.05; margin: 0; }
.ws-sub { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); margin: 0; }
.ws-h { font-family: var(--sans); font-weight: 600; font-size: 16px; letter-spacing: 0; }
.ws-h + .ws-sub { margin: 0 0 16px; }
.ws .box h2 { font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: 0; margin: 0 0 10px; }
.ws .box h3 { font-family: var(--sans); font-weight: 600; font-size: 13px; }
.ws .box { border-radius: 12px; padding: 20px 22px; }
.ws .tabs.sub { margin: 18px 0 20px; }
.ws .tabs.sub button { font-size: 13px; padding: 8px 4px; margin-right: 22px; }

/* the catalog head */
.ws .crumbs { display: none; }               /* the top bar carries the breadcrumb now */
.ws .cathead { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin: 0; }
.app .ws .cathead h1 { font-family: var(--serif); font-weight: 500; letter-spacing: -.025em; line-height: 1.05; margin: 0 0 8px; display: flex; align-items: center; flex-wrap: wrap; }
.ws .cathead h1 .lvl { padding: 5px 10px; border-radius: 6px; letter-spacing: .04em; }
.ws .cathead h1 .lvl.write { background: #eaf6ee; }
.ws .cathead #cv-meta { display: block; }

/* settings cards */
.card-head { display: flex; align-items: flex-start; gap: 16px; border-bottom: 1px solid var(--rule); }
.card-head h2 { font-family: var(--serif) !important; font-weight: 500 !important; font-size: 17px !important; letter-spacing: -.01em; margin: 0 0 2px !important; }
.ws .card-head h2 { font-family: var(--sans) !important; font-weight: 600 !important; font-size: 15px !important; }
.card-head p { margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.card-ic { flex: none; border-radius: 10px; background: var(--lake); display: inline-flex; align-items: center; justify-content: center; color: #2974a2; }
.card-ic svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.ws-warn { display: block; position: relative; border: 1px solid #f1d9a8; font-size: 12.5px; line-height: 1.5; margin: 0 0 16px; }
.ws-warn::before { position: absolute; color: #b98a1f; font-weight: 700; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.ws details.fold { border-top: 1px solid var(--rule); margin-top: 14px; padding-top: 12px; }
.ws details.fold summary { display: flex; align-items: center; gap: 10px; }
.ws details.fold summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.ws details.fold[open] summary::before { transform: rotate(45deg); }

/* SQL explorer: editor and results take the screen, the table panel sits beside them */
.sql-grid { display: grid; gap: 22px; align-items: start; }
.sql-main { min-width: 0; }
.sql-box { padding: 16px 18px; }
.sql-conn { margin: 0 0 12px; }
.ws textarea.sql { min-height: 220px; }
.ws .results { margin-top: 16px; background: #fff; }
.ws .results table { font-family: var(--sans); }
.ws .results th { font-family: var(--sans); text-transform: none; }
.ws .results th small { font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.sql-side .box { top: 64px; }
.sql-side .box h2 { font-family: var(--serif) !important; font-weight: 500 !important; font-size: 16px !important; }
.sql-about { margin: 14px 0 0; }

@media (max-width: 1100px) {
  .sql-grid { grid-template-columns: minmax(0, 1fr); }
  .sql-side .box { position: static; }
}
@media (max-width: 900px) {
  .ws { grid-template-columns: minmax(0, 1fr); }
    .ws-top, .ws-content { padding-left: 18px; padding-right: 18px; }
  .app .ws-title, .app .ws .cathead h1 { font-size: 32px; }
  .ws .cathead { flex-direction: column; }
}


/* ---- workspace, second pass (closer to the mockups) ---- */
/* sidebar: the organisation as a bordered selector row, chips, tighter brand */
.ws-brand { font-size: 17px; padding: 0 6px 4px; }
.ws-brand .mark { width: 28px; height: 28px; }
.ws-side .orgpick { border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; background: #fff; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; font-weight: 500; }
.ws-side .orgpick .lvl { margin-left: auto; border-color: transparent; }
.ws-side .orgpick .h { flex-basis: 100%; font-weight: 400; }
.ws-side .orgpick select { border: 0; padding: 0; font-weight: 500; background: transparent; flex: 1; }
.tabs.ws-nav button { padding: 6px 10px 6px 12px; font-size: 12.5px; border-radius: 8px; border-left: 0; }
.tabs.ws-nav button.on { border-left: 0; box-shadow: inset 3px 0 0 var(--accent); }
.ws-explorer h3 { font-size: 10px; }
.ws-explorer .tree button { padding: 5px 8px 5px 30px; }
.ws-explorer .tree-tables .ns { position: relative; padding-left: 30px; font-family: var(--sans); font-size: 12px; color: var(--ink-soft); }
.ws-explorer .tree-tables .ns::before { content: ""; position: absolute; border-top-width: 3px; }
.ws-explorer .tree-tables { border-left: 0; padding-left: 0; }
.ws-explorer .tree-tables button { padding-left: 46px; }
.ws-explorer .empty { padding: 4px 8px 0 30px; font-size: 12px; }
.ws-user .who { overflow: hidden; white-space: nowrap; font-size: 12px; color: var(--ink); }

/* top bar and status */
.ws-top { z-index: 5; backdrop-filter: blur(4px); padding: 8px 24px; }
.ws-crumbs { font-size: 12.5px; }
.ws-content { padding: 20px 28px 36px; }

/* the catalog head: name, then the two chips, the meta line under, Connect at the right */
.app .ws .cathead h1 { font-size: 30px; gap: 12px; margin-bottom: 6px; }
.ws .cathead h1 .lvl { font-family: var(--sans); letter-spacing: 0; font-weight: 500; padding: 5px 12px 5px 28px; border-radius: 7px; position: relative; }
.ws .cathead h1 .lvl.write { background: #eaf6ee; border-color: #cfe9d8; color: #1f6b3d; }
.ws .cathead h1 .lvl.write::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); border-radius: 50%; }
.ws .cathead h1 .lvl.write::after { margin-left: .3em; }
.ws .cathead h1 .lvl.read { padding-left: 12px; }
.ws .cathead h1 .lvl.read::after { margin-left: .3em; }
.ws .cathead h1 .lvl { display: inline-block; }
.ws-vis { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 7px; background: var(--bg-soft); border: 1px solid var(--rule); }
.ws-vis svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ws .cathead #cv-meta { font-family: var(--sans); color: var(--ink-soft); }

/* cards */
.ws .box.card { padding: 22px 24px; }
.card-head { align-items: center; }
.card-head .chip, .chip { display: inline-block; font-family: var(--sans); font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 6px; background: var(--lake); color: #2974a2; }
.card-head .chip { margin-left: auto; }
.ws #vis-state p { font-size: 13px; color: var(--ink); margin: 0 0 12px; }
.ws #vis-state p b, .ws #fmt-state p b { font-weight: 600; }
.ws #vis-form .form-row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.ws #vis-form label, .ws #del-form label { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--ink); display: block; margin-bottom: 8px; }
.ws #vis-form label code, .ws #del-form label code { font-weight: 600; }
.ws #fmt-options .check { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--rule); border-radius: 8px; padding: 12px 14px; margin: 0 0 10px; font-size: 12.5px; }
.ws #fmt-options .check:has(input:checked) { border-color: #2974a2; background: #f3f9fc; }
.ws #fmt-options .check input { margin-top: 3px; }
.ws #fmt-state p { font-size: 12.5px; margin: 0 0 14px; }
/* the app's controls are 34-36 px tall (founder, 2026-10-02: the density of a data application); the site's .btn keeps
   its 44 px touch target on the public pages */
.ws .btn { min-height: 34px; }
.ws .btn.xs { min-height: 28px; }
.ws .btn.sm { font-family: var(--sans); font-size: 13px; font-weight: 500; padding: 9px 16px; border-radius: 8px; }
.ws .btn.danger.xs { font-family: var(--sans); font-size: 12.5px; padding: 8px 14px; border-radius: 8px; }
.ws .btn.ghost.xs { font-size: 12.5px; padding: 7px 12px; border-radius: 7px; color: var(--ink); }

/* SQL explorer */
.sql-titlerow { align-items: center; }
.ws .sql-conn { font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft); max-width: none; }
.sql-head { display: flex; align-items: baseline; gap: 12px; }
.sql-head h2 { margin: 0 !important; font-size: 14px !important; }
.sql-head .muted { font-size: 12px; }
.ws textarea.sql { background: #fcfaf7; color: var(--ink); border: 1px solid #d9d2c8; border-radius: 8px; font-size: 12.5px; line-height: 1.6; padding: 14px 16px 14px 18px; text-indent: 0; padding-left: 50px; }
.ws textarea.sql:focus { outline: 2px solid #2974a2; outline-offset: -1px; }
.sql-run { margin-top: 12px; }
.ws #run { background: var(--accent); font-family: var(--sans); font-weight: 600; font-size: 13px; padding: 10px 18px; border-radius: 8px; display: inline-flex; align-items: center; gap: 10px; }
.ws #run:hover { background: var(--accent-deep); }
.ws #run[disabled] { opacity: .5; }
.sql-ro { display: inline-flex; align-items: center; gap: 6px; }
.sql-ro svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; opacity: .8; }
.results-head { display: flex; gap: 14px; margin: 0 0 12px; }
.results-head h2 { margin: 0 !important; font-size: 14px !important; }
.results-head .status { font-family: var(--sans); font-size: 12.5px; }
.results-head .status:not(:empty)::before { content: "\2713  "; color: var(--ok-text); font-weight: 700; }
.ws .results { margin-top: 0; border-radius: 8px; }
.ws .results th { color: var(--ink); font-weight: 600; }
.ws .results th small { display: block; font-weight: 500; color: var(--muted); letter-spacing: .08em; }
.ws .results .idx { color: var(--muted); }
.ws .results th.idx { text-align: right; }

/* the table panel beside the editor */
.sql-side .box { padding: 18px 20px; }
.tp-head { display: flex; justify-content: space-between; }
.tp-head h2 { font-family: var(--serif) !important; font-weight: 500 !important; font-size: 17px !important; margin: 0 !important; }
.tp-close { font-size: 16px; color: var(--muted); }
.tp-meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-soft); }
.tp-actions { margin: 0 0 16px; }
.tp-h { font-family: var(--sans); font-weight: 600; font-size: 12.5px; margin: 0 0 8px; padding-top: 12px; border-top: 1px solid var(--rule); }
.tp-cols { list-style: none; margin: 0; padding: 0; }
.tp-cols li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 12.5px; }
.tp-cols li:last-child { border-bottom: 0; }
.tp-ic { flex: none; width: 28px; font-family: var(--mono); font-size: 10px; color: var(--muted); text-align: center; }
.tp-name { flex: 1; color: var(--ink); font-weight: 500; }
.tp-name small { color: var(--accent-deep); }
.tp-more { font-size: 12.5px; }
.tp-more .kv { margin-top: 10px; }
/* the table panel's Definition and Copy for… (definition_rules.js): small code, a row of engine buttons */
.tp-code { margin: 8px 0 0; }
.tp-code pre.code { max-height: 280px; overflow: auto; margin: 0; white-space: pre; word-break: normal; }
.tp-codehead { margin-top: 8px; flex-wrap: nowrap; justify-content: space-between; align-items: center; }
.tp-codehead .right { margin-left: auto; flex: none; }
.tp-engines { margin-top: 10px; gap: 6px; flex-wrap: wrap; }
.tp-engines .btn[aria-pressed="true"] { border-color: var(--accent-deep); color: var(--accent-deep); background: var(--tint); }
.sql-side > .box > p.muted { font-size: 12.5px; }

/* the login card's help line and the "new here" header belong to the logged-out views only */
body:has(#panel:not(.hidden)) .lg-help { display: none; }

.ws-hint { margin: 10px 0 0; font-size: 12px; }
.vis-facts { margin: 6px 0 12px 18px; padding: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.vis-facts li { margin: 2px 0; }
.ws #fmt-options { margin: 0 0 6px; }
.ws #fmt-form details.fold { margin-top: 8px; }
.ws #vis-state p { font-weight: 600; }
.ws #vis-state p b { font-weight: 600; }

.ws #vis-state .vis-sub { display: block; font-weight: 400; font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }

/* styles.css animates a homepage element also called .sql (opacity 0 until revealed); the editor is not that */
.ws textarea.sql { min-height: 200px; box-shadow: inset 34px 0 0 #f3efe8, inset 35px 0 0 #e9e2d8; opacity: 1 !important; transform: none !important; animation: none !important; }


/* ---- third pass: the reviewers' punch list ---- */
.vsep { display: inline-block; width: 1px; height: 14px; background: var(--rule); margin: 0 12px; vertical-align: -2px; }
/* sidebar */
.ws-side .orgpick { position: relative; padding-left: 36px; min-height: 32px; }
.ws-side .orgpick::before { content: ""; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); }
.ws-side .orgpick .h { display: none; }
.ws-side .orgpick .lvl { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 11px; font-weight: 500; padding: 3px 8px; background: var(--bg-soft); color: var(--ink-soft); border: 1px solid var(--rule); }
.tabs.ws-nav button svg { width: 20px; height: 20px; stroke-width: 1.75; }
.tabs.ws-nav button { gap: 14px; }
.ws-explorer .tree button.on { background: transparent; color: var(--ink); font-weight: 500; }
.ws-explorer .tree-tables button.on { background: var(--lake); color: #1f5f85; }
.ws-explorer .tree button small { display: none; }
.ws-explorer #tree-wh .catname { padding-left: 30px; }
.ws-explorer .tree-tables { margin-left: 14px; }
.ws-user { padding: 12px 6px 6px 6px; }
.ws-avatar { width: 40px; height: 40px; font-size: 12px; }
.ws-bottom { padding-bottom: 8px; }
/* top-right engine status keeps a hint that it opens on demand */
/* catalog head */
.ws .cathead h1 .lvl, .ws-vis { height: 30px; box-sizing: border-box; display: inline-flex; align-items: center; font-size: 12.5px; border-radius: 6px; }
.ws .cathead h1 .lvl.write { padding-left: 30px; }
.ws .cathead h1 .lvl.write::before { width: 14px; height: 14px; left: 10px; background: #1f6b3d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 10px no-repeat; }
.ws-vis { color: var(--ink); }
.ws .cathead #cv-meta { font-size: 13px; }
/* the catalog's own tabs */
.ws .tabs.sub { width: 100%; margin: 14px 0 22px; gap: 0; }
.ws .tabs.sub button { font-family: var(--sans); font-size: 13px; padding: 10px 2px; margin-right: 40px; border-bottom-width: 3px; }
.ws .tabs.sub button.on { color: var(--accent-deep); border-bottom-color: var(--accent); font-weight: 500; }
.ws-h { margin: 4px 0 2px; }
.ws-h + .ws-sub { margin-bottom: 14px; }
/* cards */
.card-ic { width: 52px; height: 52px; }
.card-ic svg { width: 24px; height: 24px; stroke-width: 1.75; }
.card-ic.danger { background: var(--tint); color: var(--accent-deep); }
.card-head { padding-bottom: 18px; margin-bottom: 18px; }
.card-head .chip { font-size: 12px; height: 26px; display: inline-flex; align-items: center; padding: 0 12px; color: var(--ink); }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--rule); padding-top: 16px; margin-top: 16px; }
.card-foot details.fold { border-top: 0; margin: 0; padding: 0; flex: 1; }
.card-foot details.fold[open] { flex-basis: 100%; }
.ws .btn.sm[disabled], .ws .btn.danger.sm[disabled] { background: var(--bg-soft); color: var(--muted); border: 1px solid var(--rule); opacity: 1; cursor: default; }
.setting-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 8px; }
.setting-label { font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--ink); }
.setting-row select { padding: 9px 36px 9px 12px; font: inherit; font-size: 12.5px; border: 1px solid var(--rule); border-radius: 8px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f4a44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 10px center / 14px no-repeat; appearance: none; min-width: 240px; }
.chip.chip-ok { background: #eaf6ee; color: #1f6b3d; }
.setting-hint { margin: 0; }
/* Settings › General › Member permissions (platform/docs/org-policy.md): one setting a row, its hint under it */
.policy-row { margin: 0 0 16px; }
.policy-row .setting-label { min-width: 180px; }
.policy-row .btn.xs { margin-left: 4px; }
#fmt-compat p { margin: 0 0 6px; font-size: 12.5px; }
#fmt-compat b { color: var(--ink); font-weight: 600; }
.ws .danger-zone { border-color: var(--rule); }
.ws .danger-zone h2 { color: var(--ink); }
.ws .danger-zone .card-head h2 { color: var(--ink) !important; }
.ws .danger-zone > p { display: none; }
.ws-warn { background: #fff8ec; border-color: #f3d9a4; color: var(--ink); border-radius: 10px; padding: 12px 16px 12px 44px; }
.ws-warn::before { content: ""; left: 14px; top: 12px; width: 18px; height: 18px; border: 0; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c23c14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 9v5M12 17.5v.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.ws #vis-form label b, .ws #del-form label b { font-family: var(--sans); }
.ws #vis-form .form-row .field:last-child .btn, .ws #del-form .form-row .field:last-child .btn { min-width: 145px; }
/* footer */


/* ---- fourth pass: the SQL explorer punch list ---- */
.ws-crumbs [aria-current] { font-weight: 500; }
.results-box { padding: 14px 0 0; overflow: hidden; }
.results-head .status:not(:empty)::before { content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; border-radius: 50%; background: #2e9e5b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 10px no-repeat; }
.ws .results { border: 0; border-top: 1px solid var(--rule); border-radius: 0; }
.ws .results table { font-size: 12px; }
.ws .results th { background: #f5f4f2; padding: 8px 12px; border-right: 1px solid var(--rule); font-size: 12px; }
.ws .results th:last-child, .ws .results td:last-child { border-right: 0; }
.ws .results th small { font-size: 10px; margin-top: 1px; }
.ws .results td { padding: 5px 12px; height: 29px; border-right: 1px solid var(--rule); }
.ws .results td.num { font-family: var(--sans); font-variant-numeric: tabular-nums; }
.ws .results .idx { background: #efeeec; width: 40px; text-align: center; font-family: var(--sans); font-size: 11.5px; }
.ws .results tr:nth-child(even) td { background: #fff; }
.ws .results tr:nth-child(even) td.idx { background: #efeeec; }
.ws .btn.ghost.xs svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-right: 6px; vertical-align: -2px; }
#csv { display: inline-flex; align-items: center; }
.sql-head { border-bottom: 1px solid var(--rule); margin: -16px -18px 14px; padding: 12px 18px; }
.ws #run .muted { font-family: var(--sans); font-size: 11px; opacity: .75; margin-left: 4px; }
.ws #run::before { content: ""; width: 0; height: 0; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-right: 2px; }
.ws select.num { width: auto; padding: 7px 30px 7px 10px; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f4a44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 8px center / 12px no-repeat; }
.sql-actions .btn { font-size: 12px; padding: 8px 12px; border-radius: 8px; }
.ws .sql-conn { margin: 0 0 14px; }
/* the table panel */
.tp-actions .btn { white-space: nowrap; display: inline-flex; align-items: center; }
.tp-h { display: flex; align-items: center; justify-content: space-between; }
.tp-h::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); margin-right: 4px; }
.tp-ic svg { width: 15px; height: 15px; fill: none; stroke: var(--ink-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tp-type { font-family: var(--sans); font-size: 12px; color: var(--muted); }
.tp-more summary { display: flex; align-items: center; justify-content: space-between; }
.tp-more summary::before { display: none; }
.tp-more summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); margin-right: 4px; }
.tp-more[open] summary::after { transform: rotate(45deg); }
.sql-about { background: var(--lake); border: 0 !important; border-radius: 10px; padding: 14px 16px !important; margin-top: 16px !important; font-size: 12px; color: var(--ink-soft); }
.sql-about summary { display: block; cursor: pointer; }
.sql-about summary::before { display: none; }
.sql-about-lead { display: block; color: var(--ink); margin-bottom: 4px; padding-left: 24px; position: relative; }
.sql-about-lead::before { content: "i"; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #2974a2; color: #2974a2; font: 600 10px/14px var(--sans); text-align: center; }
.sql-about-link { color: #2974a2; text-decoration: underline; padding-left: 24px; }
.sql-about[open] summary { margin-bottom: 8px; }
.sql-about p { margin: 0; padding-left: 24px; }

/* ---- fifth pass: real icons in the sidebar tree and the organisation row; the panel's buttons wrap ---- */
.ws-side .orgpick::before { border: 0; border-radius: 0; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f4a44' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='8' ry='3'/%3E%3Cpath d='M4 6v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E") center / contain no-repeat; }
.ws-explorer #tree-wh .catname::before { border: 0; border-radius: 0; opacity: 1; width: 15px; height: 15px; top: 7px; left: 9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f4a44' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='8' ry='3'/%3E%3Cpath d='M4 6v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E") center / contain no-repeat; }
.ws-explorer .tree-tables .ns::before { border: 0; border-radius: 0; opacity: 1; width: 15px; height: 15px; top: 2px; left: 9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f4a44' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.ws-explorer .tree-tables button::before { border: 0; border-radius: 0; opacity: 1; width: 15px; height: 15px; top: 8px; left: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f4a44' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M3 15h18M9 4v16M15 4v16'/%3E%3C/svg%3E") center / contain no-repeat; }
.ws-explorer .tree-tables button.on::before { filter: none; }


/* ---- sixth pass: the founder's review of the live workspace ---- */
/* the engine status lives in the footer now, quietly */
/* the head chips read as the mockup: Private · Read & write */
.ws .cathead h1 .lvl { font-size: 0; text-transform: none; padding-right: 12px; }
.ws .cathead h1 .lvl::first-letter { text-transform: none; }
.ws .cathead h1 .lvl::after { font-size: 12.5px; margin-left: 0; }
.ws .cathead h1 .lvl.write::after { content: "Read & write"; }
.ws .cathead h1 .lvl.read::after { content: "Read"; }
.ws .cathead h1 .lvl.unknown::after, .ws .cathead h1 .lvl.none::after { content: "No access"; }
/* permissions */
.perm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 0 14px; }
.perm-head h2 { font-size: 16px !important; margin: 0 0 4px !important; }
.perm-head .ws-sub { margin: 0; }
.perm-grant { display: inline-flex; align-items: center; gap: 8px; }
.perm-note { display: flex; align-items: center; gap: 10px; background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 8px; padding: 10px 14px; font-size: 12.5px; color: var(--ink-soft); margin: 0 0 14px; }
.perm-note::before { content: "i"; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ink-soft); font: 600 10px/14px var(--sans); text-align: center; }
.perm-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; font-size: 12.5px; }
.perm-table th { text-align: left; font-family: var(--sans); font-weight: 600; font-size: 12px; color: var(--ink); background: var(--bg-soft); padding: 7px 12px; border-bottom: 1px solid var(--rule); }
.perm-table td { padding: 8px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.perm-table td + td, .perm-table th + th { border-left: 1px solid var(--rule); }
.perm-table tr:last-child td { border-bottom: 0; }
.perm-table .act { width: 200px; text-align: right; }
.perm-who { display: inline-flex; align-items: center; gap: 12px; }
.perm-who .ws-avatar { width: 38px; height: 38px; font-size: 11.5px; }
.perm-who .ws-avatar.tok { font-size: 0; background: var(--bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f4a44' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M10.5 12.5L20 3M15 5l3 3M12 8l3 3'/%3E%3C/svg%3E") center / 18px no-repeat; }
.perm-who b { display: block; font-weight: 600; color: var(--ink); }
.perm-who small { display: block; font-size: 12px; color: var(--muted); }
.chip.perm-write, .chip.perm-read { background: var(--lake); color: #1f5f85; font-size: 12.5px; padding: 6px 12px; }
.perm-via { color: var(--ink); }
.perm-lock { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1917' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat; }
.perm-foot { margin: 12px 0 0; }
.perm-links { display: flex; gap: 28px; margin: 14px 0 0; font-size: 12.5px; }
.perm-links .linkbtn { color: var(--ink-soft); text-decoration: none; }
.perm-links .linkbtn:hover { color: var(--accent-deep); }
/* the dialog */
.ws-dialog { border: 1px solid var(--rule); border-radius: 12px; padding: 22px 24px; width: min(420px, calc(100vw - 32px)); box-shadow: 0 24px 60px rgba(26, 25, 23, .18); color: var(--ink); font-family: var(--sans); }
.ws-dialog::backdrop { background: rgba(26, 25, 23, .35); }
.dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.dlg-head h2 { font-family: var(--sans); font-weight: 600; font-size: 16px; margin: 0 0 4px; }
.dlg-head p { margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.dlg-label { display: block; font-weight: 600; font-size: 12.5px; margin: 0 0 8px; }
.ws-dialog select { width: 100%; padding: 10px 36px 10px 12px; font: inherit; font-size: 12.5px; border: 1px solid var(--rule); border-radius: 8px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f4a44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 10px center / 14px no-repeat; appearance: none; margin: 0 0 18px; }
.perm-opts { display: grid; gap: 10px; margin: 0 0 12px; }
.perm-opt { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; cursor: pointer; }
.perm-opt:has(input:checked) { border-color: #2974a2; background: #f3f9fc; }
.perm-opt input { margin-top: 3px; }
.perm-opt b { display: block; font-weight: 600; font-size: 13px; }
.perm-opt small { display: block; font-size: 12px; color: var(--ink-soft); }
.dlg-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
/* dialogs outside .ws (the Public and the reauth dialogs sit at the page's end) get the app's buttons, not the site's serif ones */
.ws-dialog .btn { min-height: 34px; }
.ws-dialog .btn.sm { font-family: var(--sans); font-size: 13px; font-weight: 500; padding: 9px 16px; border-radius: 8px; }
.ws-dialog .btn.sm[disabled] { background: var(--bg-soft); color: var(--muted); border: 1px solid var(--rule); opacity: 1; cursor: default; }
.ws-dialog .dlg-foot { align-items: center; }
/* "Add a public catalog" */
.ws-dialog.pub-dialog { width: min(500px, calc(100vw - 32px)); }
.pub-dialog .field label { display: block; font-weight: 600; font-size: 12.5px; color: var(--ink); margin: 0 0 8px; }
.pub-dialog .field input { min-height: 38px; font-family: var(--mono); font-size: 13px; border-radius: 8px; }
.pub-dialog .field input::placeholder { color: #a39b93; }
.pub-dialog .field input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.pub-dialog .field .hint { font-size: 12px; margin-top: 6px; }
.pub-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; }
.pub-ex-label { font-size: 12px; color: var(--muted); margin-right: 2px; }
.pub-ex { border: 1px solid var(--rule); background: var(--bg-soft); border-radius: 6px; padding: 3px 8px; cursor: pointer; max-width: 100%; }
.pub-ex code { font-family: var(--mono); font-size: 11.5px; color: var(--ink); background: none; padding: 0; word-break: break-all; }
.pub-ex:hover { border-color: var(--ink-soft); }
.pub-ex:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pub-dialog .err { margin-top: 12px; }
/* download menu */
.dl-menu { position: relative; }
.dl-menu summary { list-style: none; display: inline-flex; align-items: center; cursor: pointer; }
.dl-menu summary::-webkit-details-marker { display: none; }
.dl-menu summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 8px; }
.dl-list { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 10px 30px rgba(26, 25, 23, .12); padding: 6px; min-width: 150px; z-index: 6; display: grid; }
.dl-list button { background: none; border: 0; text-align: left; padding: 8px 12px; font: inherit; font-size: 12.5px; color: var(--ink); border-radius: 6px; cursor: pointer; }
.dl-list button:hover { background: var(--bg-soft); }


/* ---- seventh pass: the Tables page (mockup #30) ---- */
.tbl-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; }
.tbl-head h2 { display: inline-flex; align-items: center; gap: 12px; font-size: 17px !important; margin: 0 !important; }
.tbl-head .count { font-size: 12px; font-weight: 600; color: var(--ink-soft); background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 6px; padding: 3px 9px; }
.tbl-create { background: var(--accent); display: inline-flex; align-items: center; gap: 8px; }
.tbl-create:hover { background: var(--accent-deep); }
.tbl-tools { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 14px; margin: 0 0 16px; }
.tbl-search, .tbl-ns { display: flex; align-items: center; gap: 10px; border: 1px solid var(--rule); border-radius: 8px; padding: 0 12px; background: #fff; min-height: 34px; }
.tbl-search svg, .tbl-ns svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tbl-search input { flex: 1; border: 0; padding: 0; font: inherit; font-size: 12.5px; min-width: 0; background: transparent; }
.tbl-search input:focus, .tbl-ns select:focus { outline: none; }
.tbl-search:focus-within, .tbl-ns:has(select:focus) { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }   /* #1345 */
.tbl-ns select { flex: 1; border: 0; padding: 0 20px 0 0; font: inherit; font-size: 12.5px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f4a44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right center / 14px no-repeat; appearance: none; }
.tbl-refresh { display: inline-flex; align-items: center; min-height: 32px; padding: 0 16px; font-size: 12.5px; border-radius: 8px; }
.tbl-refresh svg { margin-right: 8px; }
.tbl-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; font-size: 12.5px; }
.tbl-table th { text-align: left; font-family: var(--sans); font-weight: 600; font-size: 12px; color: var(--ink); background: var(--bg-soft); padding: 7px 12px; border-bottom: 1px solid var(--rule); }
.tbl-table td { padding: 8px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.tbl-table td + td, .tbl-table th + th { border-left: 1px solid var(--rule); }
.tbl-table tr:last-child td { border-bottom: 0; }
.tbl-table .act { width: 130px; text-align: right; }
.tbl-name { display: inline-flex; align-items: center; gap: 12px; }
.tbl-ic { flex: none; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f4a44' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M3 15h18M9 4v16M15 4v16'/%3E%3C/svg%3E") center / contain no-repeat; }
.tbl-link { color: #1f5f85; font-weight: 600; text-decoration: none; font-size: 13px; }
.tbl-link:hover { text-decoration: underline; }
.tbl-name small { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.chip.chip-grey { background: var(--bg-soft); color: var(--ink); border: 1px solid var(--rule); font-size: 12px; padding: 5px 10px; }
.tbl-q { font-family: var(--mono); font-size: 11px; margin-right: 8px; }
.tbl-summary { margin: 12px 0 0; }
.tbl-empty { margin: 0; }
.tbl-cta { display: flex; align-items: center; gap: 18px; padding: 16px 20px; }
.tbl-cta-ic { flex: none; width: 42px; height: 42px; border: 1.5px solid var(--ink); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.tbl-cta-ic svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tbl-cta b { display: block; font-weight: 600; font-size: 13.5px; color: var(--ink); }
.tbl-cta p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.tbl-cta-link { margin-left: auto; color: var(--accent-deep); font-weight: 500; text-decoration: none; white-space: nowrap; }
.tbl-cta-link:hover { text-decoration: underline; }
.ws-dialog-wide { width: min(640px, calc(100vw - 32px)); }
.ws-dialog .form-row { margin-bottom: 14px; }
.ws-dialog .cols { margin-bottom: 8px; }
@media (max-width: 900px) { .tbl-tools { grid-template-columns: 1fr; } .tbl-cta { flex-wrap: wrap; } .tbl-cta-link { margin-left: 0; } }

.ws .tabs.sub { flex-wrap: nowrap; max-width: none; }
.ws .tabs.sub button { margin-right: 32px; white-space: nowrap; }

/* ---- custom select (select.js, /select.css): the widget where the native select had a special shape ---- */
.field .csel-btn { min-height: 30px; padding: 8px 12px; font-size: 12.5px; border-radius: 7px; }
.cols .csel-btn { min-height: 34px; padding: 6px 10px; font-size: 12px; border-radius: 6px; }
.cols .csel-lbl, .cols .csel-desc { white-space: normal; }
table.plain.small .csel-btn { min-height: 30px; padding: 4px 8px; font-size: 12px; border-radius: 6px; }
.ws .csel.num .csel-btn { min-height: 34px; padding: 6px 10px; font-size: 12px; }
.setting-row .csel { min-width: 240px; }
.ws-dialog .csel { margin: 0 0 18px; }
.ws-dialog .cols .csel, .ws-dialog .field .csel { margin: 0; }
.ws-dialog .csel-btn { min-height: 34px; padding: 10px 12px; }
.orgpick .csel { display: block; width: 100%; }
.ws-side .orgpick .csel { flex: 1; min-width: 0; width: auto; }
.ws-side .orgpick .csel-btn, .tbl-ns .csel-btn { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.ws-side .orgpick .csel-btn { font-weight: 500; }
.ws-side .orgpick .csel-btn:focus-visible, .ws-side .orgpick .csel.open .csel-btn, .tbl-ns .csel-btn:focus-visible, .tbl-ns .csel.open .csel-btn { box-shadow: none; outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 3px; }
.tbl-ns .csel { flex: 1; min-width: 0; }
.tbl-ns .csel-pop { left: -12px; }

/* Files (the blob bucket): rows with a thumbnail column, a folder breadcrumb, the preview dialog (2026-09-22) */
.files-sub { margin: -6px 0 14px; }
.files-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; min-height: 20px; }
.files-crumbs .linkbtn { font-family: var(--mono); font-size: 12px; text-decoration: none; }
.files-crumbs .linkbtn:hover { text-decoration: underline; }
.files-crumbs .sep { color: var(--muted); }
.files-crumbs .files-cur { color: var(--ink); font-weight: 600; }
.files-table .files-thumb { width: 56px; padding: 6px 10px; text-align: center; }
.files-table td.files-thumb img { width: 44px; height: 34px; object-fit: cover; border-radius: 6px; display: block; cursor: zoom-in; background: var(--bg-soft); }
.files-ic { display: inline-block; width: 22px; height: 22px; vertical-align: middle; background: center / contain no-repeat; }
.files-ic.folder { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232974a2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
.files-ic.file { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f4a44' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l5 5v13H6z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E"); }
.files-table button.tbl-link { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: #1f5f85; cursor: pointer; text-align: left; word-break: break-all; }
.files-table button.tbl-link:hover { text-decoration: underline; }
.files-hint { display: block; font-family: var(--sans); font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.files-foot { margin-top: 12px; align-items: center; }
.files-empty { border: 1px dashed var(--rule); border-radius: 8px; padding: 16px 18px; font-size: 12.5px; }
.files-empty p { margin: 0 0 10px; }
.files-empty ul { margin: 0 0 10px; padding-left: 20px; }
.files-empty li { margin: 0 0 8px; }
.files-empty code { font-size: 11.5px; word-break: break-all; }
.files-dialog { width: min(900px, calc(100vw - 32px)); }
.files-dialog .dlg-head h2 { word-break: break-all; }
.files-dialog .dlg-head p { font-family: var(--mono); font-size: 11.5px; word-break: break-all; }
.files-preview { display: flex; align-items: center; justify-content: center; min-height: 160px; max-height: calc(100vh - 260px); background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.files-preview img { max-width: 100%; max-height: calc(100vh - 260px); object-fit: contain; display: block; }
.files-preview .files-audio { width: 100%; display: block; margin: 24px 0; }
.files-preview .files-video { max-width: 100%; max-height: calc(100vh - 260px); display: block; background: #000; }
.files-preview p { margin: 0; padding: 24px; }
.files-dlg-foot { align-items: center; }
.files-dlg-foot .btn.disabled { opacity: .5; pointer-events: none; }

/* ---- Import dialog (web/app/import.js; docs/import-dialog.md). Tokens from styles.css; the dialog frame is .ws-dialog ---- */
.tbl-actions { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
/* the founder's review (2026-10-10): Import files is the Tables section's primary action, Create table the secondary */
.tbl-import { display: inline-flex; align-items: center; gap: 8px; }
.ws .tbl-import { background: var(--action); }
.ws .tbl-import:hover { background: #9c2c0f; }
.tbl-import svg, #imp-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tbl-create-sec { display: inline-flex; align-items: center; gap: 8px; border-color: var(--rule); color: var(--ink); }
.tbl-create-sec:hover { background: var(--bg-soft); color: var(--ink); }
/* the dialog: a fixed head and footer (the Import button is always on screen), the steps scroll between them */
.imp-dialog { width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: hidden; padding: 0; position: relative; }
.imp-dialog[open] { display: flex; flex-direction: column; }
.imp-dialog > .dlg-head { padding: 20px 24px 0; margin-bottom: 14px; }
.imp-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px 24px 8px; }
.imp-dialog > .imp-foot { margin: 0; padding: 12px 24px; border-top: 1px solid var(--rule); background: #fff; border-radius: 0 0 12px 12px; }
.imp-go-wrap { display: inline-flex; align-items: center; gap: 12px; min-width: 0; margin-left: auto; }
#imp-go-why { text-align: right; }
#imp-go { display: inline-flex; align-items: center; gap: 8px; max-width: 460px; }
#imp-go-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-dialog #imp-go:not([disabled]) { background: var(--action); color: #fff; }
.ws-dialog #imp-go:not([disabled]):hover { background: #9c2c0f; }
.imp-src-switch { margin: 4px 0 0; }
.imp-src-switch .linkbtn { font-size: 12.5px; }
.imp-adv { margin-top: 6px; }
.imp-adv summary .muted { font-weight: 400; margin-left: 4px; }
.imp-adv .imp-fv { margin-top: 10px; }
/* a drag over the dialog: the whole dialog takes the files */
.imp-veil { display: none; position: absolute; inset: 8px; border: 2px dashed var(--accent); border-radius: 10px; background: color-mix(in srgb, var(--tint) 88%, transparent); align-items: center; justify-content: center; pointer-events: none; z-index: 5; font-weight: 600; font-size: 15px; color: var(--ink); }
.imp-dialog.over .imp-veil { display: flex; }
/* a drag over a catalog's page (import.js §6): the veil names the catalog the files go to, or why they cannot */
.page-drop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(26, 25, 23, .28); pointer-events: none; }
.page-drop::before { content: ""; position: absolute; inset: 12px; border: 2.5px dashed var(--accent); border-radius: 16px; }
.page-drop.page-drop-off::before { border-color: var(--muted); }
.page-drop-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 420px; padding: 28px 32px; border-radius: 14px; background: #fff; box-shadow: 0 24px 60px rgba(26, 25, 23, .22); text-align: center; color: var(--ink); font-family: var(--sans); }
.page-drop-card b { font-size: 18px; font-weight: 600; }
.page-drop-card small { font-size: 13px; color: var(--ink-soft); }
.page-drop-ic { width: 48px; height: 48px; border-radius: 12px; background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bb3614' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M4 17v3h16v-3'/%3E%3C/svg%3E") center / 24px no-repeat; }
.page-drop.page-drop-off .page-drop-ic { background-color: var(--bg-soft); filter: grayscale(1); }
/* an empty Tables list is itself the invitation */
.tbl-dropzone { display: flex; align-items: center; gap: 16px; width: 100%; margin: 4px 0 14px; padding: 22px 20px; border: 1.5px dashed var(--rule); border-radius: 12px; background: #fff; cursor: pointer; text-align: left; font: inherit; color: var(--ink-soft); }
.tbl-dropzone:hover, .tbl-dropzone:focus-visible { border-color: var(--accent); background: var(--tint); }
.tbl-dropzone b { display: block; color: var(--ink); font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.tbl-dropzone small { font-size: 12.5px; }
.imp-steps { list-style: none; margin: 0; padding: 0; }
.imp-step { position: relative; padding: 0 0 22px 34px; }
.imp-step::before { content: ""; position: absolute; left: 6px; top: 3px; width: 12px; height: 12px; border: 2px solid var(--rule); border-radius: 50%; background: #fff; box-sizing: border-box; }
.imp-step::after { content: ""; position: absolute; left: 11px; top: 19px; bottom: 6px; border-left: 2px dotted var(--rule); }
.imp-step:last-child::after { display: none; }
.imp-step:has(.imp-chip, .imp-schema, .imp-handover-ready)::before { border-color: #2974a2; background: #2974a2; box-shadow: inset 0 0 0 2px #fff; }
.imp-step h3 { font-family: var(--sans); font-weight: 600; font-size: 13px; margin: 0 0 10px; color: var(--ink); }
.imp-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 150px; border: 1.5px dashed var(--rule); border-radius: 12px; padding: 22px 18px; background: #fff; cursor: pointer; font-size: 12.5px; color: var(--ink-soft); margin: 0 0 12px; text-align: center; }
.imp-drop-text b { display: block; color: var(--ink); font-size: 14.5px; font-weight: 600; margin-bottom: 4px; }
.imp-drop-text small { display: block; font-size: 12.5px; max-width: 46ch; }
.imp-drop-more { display: none; color: var(--ink); font-weight: 500; }
.imp-drop.compact { flex-direction: row; min-height: 0; padding: 9px 14px; justify-content: flex-start; width: max-content; max-width: 100%; border-radius: 8px; }
.imp-drop.compact .imp-drop-text { display: none; }
.imp-drop.compact .imp-drop-more { display: inline; }
.imp-drop.compact .imp-drop-ic { width: 24px; height: 24px; background-size: 14px; border-width: 1.2px; }
.imp-dialog.over .imp-drop, .imp-drop:hover { border-color: var(--accent); background: var(--tint); }
.imp-drop:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.imp-drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.imp-drop-ic { flex: none; width: 36px; height: 36px; border: 1.5px solid var(--ink); border-radius: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1917' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M4 17v3h16v-3'/%3E%3C/svg%3E") center / 18px no-repeat; }
.imp-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; }
.imp-chips:empty { display: none; }
.imp-chip { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--rule); border-radius: 8px; padding: 6px 8px 6px 12px; font-size: 12.5px; background: #fff; max-width: 100%; }
.imp-chip.bad { border-color: var(--accent); background: var(--tint); }
.imp-chip-name { font-family: var(--mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.imp-chip-size { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.imp-chip-x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.imp-chip-x:hover { color: var(--accent-deep); }
.imp-keynote { border-left: 3px solid var(--ok); background: #eef8f1; color: var(--ok-text); padding: 10px 14px; border-radius: 4px; margin: 0 0 14px; }
.imp-keynote b { color: var(--ok-text); }
.imp-secret { display: flex; align-items: center; gap: 6px; }
.imp-secret input { flex: 1; min-width: 0; }
.imp-secret .ws-iconbtn svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-soft); stroke-width: 1.8; }
.imp-secret .ws-iconbtn[aria-pressed="true"] svg { stroke: var(--accent-deep); }
.imp-schema { border-collapse: separate; border-spacing: 0; font-size: 12px; width: 100%; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.imp-schema th, .imp-schema td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.imp-schema th { background: var(--bg-soft); font-weight: 500; color: var(--ink-soft); font-family: var(--sans); }
.imp-schema tr:last-child td { border-bottom: 0; }
.imp-schema tr.bad td { color: var(--accent-deep); }
.imp-schema td.mono { font-family: var(--mono); font-size: 11.5px; }
.imp-schema-wrap, .imp-rows { overflow: auto; max-height: 300px; min-width: 0; }
.imp-dialog .imp-rows.results { max-height: 196px; }
.imp-types { margin-top: 10px; }
.imp-types .imp-schema { width: auto; min-width: 50%; margin-top: 8px; }
.imp-rows.results table { width: max-content; }
.imp-sum { margin: 0 0 10px; }
.imp-empty { margin: 0; }
.imp-switch { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; cursor: pointer; font-size: 12.5px; color: var(--ink); }
.imp-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.imp-switch-ui { flex: none; width: 40px; height: 22px; border-radius: 11px; background: var(--rule); position: relative; transition: background .15s; }
.imp-switch-ui::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: left .15s; }
.imp-switch:has(input:checked) .imp-switch-ui { background: var(--ok); }
.imp-switch:has(input:checked) .imp-switch-ui::after { left: 20px; }
.imp-switch:has(input:focus-visible) .imp-switch-ui { outline: 2px solid var(--accent); outline-offset: 2px; }
.imp-switch b { display: block; font-weight: 600; }
.imp-switch small { display: block; color: var(--ink-soft); font-size: 12px; }
.imp-target.form-row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 8px; }
.imp-dialog .field .csel { margin: 0; }
.imp-handover { margin-top: 4px; }
.imp-handover > .fold, .imp-handover > .note, .imp-handover > .imp-progress { margin-top: 10px; }
.imp-why { margin: 0 0 12px; color: var(--ink-soft); }
.imp-why a { color: var(--ink-soft); border-bottom: 1px solid var(--rule); }
.imp-dialog pre.code { margin: 0 0 10px; }
.imp-dialog .row { margin: 0 0 10px; }
.imp-inline { margin: 0; font-size: 12px; align-items: center; }
.imp-inline input { margin: 0; }
.imp-dialog .dlg-foot { justify-content: space-between; gap: 12px; }
@media (max-width: 640px) {
  .imp-dialog > .dlg-head { padding: 16px 14px 0; }
  .imp-body { padding: 4px 14px 8px; }
  .imp-dialog > .imp-foot { padding: 10px 14px; }
  .imp-go-wrap { flex-direction: column-reverse; align-items: stretch; width: 100%; gap: 6px; }
  #imp-go { max-width: none; justify-content: center; }
  #imp-go-why { text-align: center; }
  .imp-step { padding-left: 26px; }
  .imp-step::before { left: 2px; } .imp-step::after { left: 7px; }
  .imp-chip-name { max-width: 160px; }
  .imp-dialog .dlg-foot { flex-wrap: wrap; }
  .tbl-actions { width: 100%; justify-content: flex-start; }
}
/* the founder's review (2026-09-22): the dialog's close button was a 28 px target; long types (a STRUCT, a CRS) are cut
   with an ellipsis and carry the full text as a tooltip; a binary cell says BINARY and its size instead of its bytes */
.dlg-head .ws-iconbtn { width: 40px; height: 40px; font-size: 24px; line-height: 1; border-radius: 8px; color: var(--ink-soft); flex: none; }
.dlg-head .ws-iconbtn:hover { background: var(--bg-soft); color: var(--ink); }
.imp-schema td.type { max-width: 36ch; overflow: hidden; text-overflow: ellipsis; }
.imp-rows th small { display: block; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; }
.results td.bin, .imp-rows td.bin { color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .02em; }

/* ---- the Catalog explorer as the place that attaches (2026-09-22, docs/sql-panel.md §10): one node per catalog ---- */
.ws-explorer-lede { margin: -2px 2px 8px; font-size: 11.5px; line-height: 1.4; }
.ws-explorer .catrow { display: flex; align-items: center; gap: 2px; }
.ws-explorer .catrow .catname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 26px !important; }
.ws-explorer .catrow .catname::before { left: 6px !important; }
.ws-explorer .catrow .chev { flex: none; width: 22px; height: 28px; padding: 0; margin-left: -4px; color: var(--muted); }
.ws-explorer .catrow .chev svg { width: 14px; height: 14px; transition: transform .12s; }
.ws-explorer li.cat.open .catrow .chev svg { transform: rotate(90deg); }
.ws-explorer .catrow .tag { flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--rule); border-radius: 4px; padding: 1px 5px; margin-left: 2px; }
.ws-explorer .catrow .tag.shared { border-color: #b9d7e4; color: #2974a2; }
.ws-explorer .catrow .tag.direct { border-style: dashed; }
.ws-explorer .catrow .tag.write { border-color: #9fcdb0; color: #1f6b3d; }
.ws-explorer .catrow .tag.err { border-color: var(--accent); color: var(--accent-deep); }
/* the attach switch: a small track, the knob slides right when on */
.ws-explorer .att-toggle { flex: none; width: 30px; height: 18px; border-radius: 9px; border: 1px solid var(--rule); background: var(--bg-soft); position: relative; cursor: pointer; padding: 0; margin: 0 4px 0 6px; }
.ws-explorer .att-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 1px solid var(--rule); box-sizing: border-box; transition: left .12s; }
.ws-explorer .att-toggle[aria-checked="true"] { background: #1f6b3d; border-color: #1f6b3d; }
.ws-explorer .att-toggle[aria-checked="true"]::after { left: 15px; border-color: #1f6b3d; }
.ws-explorer .att-toggle[aria-busy="true"] { opacity: .5; cursor: progress; }
.ws-explorer .att-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ws-explorer li.cat.attached > .catrow .catname { color: var(--ink); }
.ws-explorer li.cat.on > .catrow .catname { background: var(--tint); color: var(--accent-deep); font-weight: 500; }
.ws-explorer li.cat > .tree-tables { display: none; }
.ws-explorer li.cat.open > .tree-tables { display: block; }
.ws-explorer li.cat > .tree-tables .empty { padding-left: 30px; font-size: 11.5px; color: var(--muted); }
.ws-explorer li.cat > .tree-tables .err { padding: 4px 8px 4px 30px; font-size: 11.5px; color: var(--accent-deep); }
.ws-explorer .detach { flex: none; width: 24px; height: 24px; font-size: 13.5px; color: var(--muted); }
.ws-explorer .detach:hover { color: var(--accent-deep); }
.ws-explorer li.add button { padding-left: 30px !important; color: var(--accent-deep); }
.ws-explorer li.add button::before { content: "+"; position: absolute; left: 11px; top: 4px; font-size: 13.5px; line-height: 1; color: var(--accent-deep); }
.ws-explorer li.public { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 30px; color: var(--muted); font-size: 12.5px; position: relative; cursor: not-allowed; }
.ws-explorer li.public::before { content: ""; position: absolute; left: 9px; top: 8px; width: 15px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a948c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cellipse cx='12' cy='12' rx='4' ry='9'/%3E%3Cpath d='M3 12h18'/%3E%3C/svg%3E") center / contain no-repeat; }
.ws-explorer li.public .tag { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; border: 1px dashed var(--rule); border-radius: 4px; padding: 1px 5px; }
.ws-explorer .tree-tables button[data-shared]::before { opacity: .6; }
.sql-titlerow .ws-sub { flex: 1 1 100%; margin: 0; }
.att-dialog textarea { width: 100%; box-sizing: border-box; font: inherit; font-family: var(--mono); font-size: 11.5px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; resize: vertical; }
.att-secret-wrap { position: relative; display: block; }
.att-secret-wrap input { width: 100%; box-sizing: border-box; padding-right: 48px; }
.att-eye { width: 36px; height: 36px; right: 4px; }
.dlg-actions { margin-top: 12px; align-items: center; gap: 10px; }
.dlg-actions .status { font-size: 12px; color: var(--ink-soft); }
/* the table panel for a colleague's table: columns from DESCRIBE, no API facts */
.tp-shared .tp-meta .chip { background: var(--bg-soft); color: var(--ink-soft); }

/* The import runs in the tab (2026-09-22): the button, the step list, the outcome; the hand-over folds under "Other ways" */
.imp-run-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; }
.imp-run-row .btn svg { width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.imp-fv { margin: 10px 0 0; }
.imp-fv small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; max-width: 60ch; }
/* the order column (docs/import-dialog.md §1d): one select, one line of why */
.imp-order { margin: 14px 0 0; max-width: 420px; }
.imp-order small { display: block; font-size: 11.5px; margin-top: 6px; max-width: 60ch; line-height: 1.45; }
.imp-progress { list-style: none; margin: 0 0 12px; padding: 0; font-size: 12.5px; color: var(--ink-soft); }
.imp-pstep { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.imp-pmark { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--rule); flex: none; box-sizing: border-box; }
.imp-pstep.running .imp-pmark { border-color: var(--accent); border-top-color: transparent; animation: imp-spin .8s linear infinite; }
.imp-pstep.done .imp-pmark { border-color: var(--ok); background: var(--ok); }
.imp-pstep.done { color: var(--ink); }
.imp-pstep.skip .imp-pmark { border-color: var(--rule); background: var(--rule); }
.imp-pstep.warn .imp-pmark { border-color: #d59a2b; background: #d59a2b; }
.imp-pstep.failed .imp-pmark { border-color: var(--accent-deep); background: var(--accent-deep); }
.imp-pstep.failed { color: var(--accent-deep); }
@keyframes imp-spin { to { transform: rotate(360deg); } }
.imp-done { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.imp-done .btn { margin: 0; }
#imp-alt { margin-top: 8px; }
#imp-alt > summary { font-size: 12.5px; color: var(--ink-soft); }
/* Save as table (2026-09-23): a button in the results head, the dialog reuses the Import dialog's target and step styles */
.results-head #save-table svg { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.results-head .dl-menu { margin-left: 8px; }
#st-dialog .imp-progress { margin-top: 10px; }
/* The SQL editor (editor.js, CodeMirror): the textarea stays as the value carrier, hidden; the editor takes its place */
textarea.sql.cm-hidden { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; opacity: 0 !important; pointer-events: none; margin: 0; padding: 0; border: 0; }
.cm-host { width: 100%; margin: 0 0 4px; }
.cm-host .cm-editor { min-height: 220px; }
.cm-host .cm-scroller { overflow: auto; max-height: 60vh; }

/* two-factor authentication (Account tab, docs/login.md): the QR code app.js draws as an SVG, the backup codes */
.mfa-qr { width: 200px; height: 200px; margin: 6px 0 10px; }
.mfa-qr svg { width: 100%; height: 100%; display: block; border: 1px solid var(--rule); border-radius: 6px; }
.mfa-steps { margin: 0 0 8px; padding-left: 20px; }
#mfa-codes { margin: 0 0 18px; }
#mfa-secret { word-break: break-all; }
.mfa-codelist { font-family: var(--mono); font-size: 12.5px; columns: 2; max-width: 360px; margin: 0 0 12px; padding-left: 24px; }

/* the back office (/app/admin, docs/backoffice.md): KPI cards, a bar per day, plain tables */
.adm { max-width: 1180px; margin: 0 auto 40px; }
body:has(#admin:not(.hidden)) .lg-help, body:has(#admin:not(.hidden)) .lg-new { display: none; }
body:has(#admin:not(.hidden)) .lg-top { margin-bottom: 20px; }
.adm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.adm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 18px; }
.adm-kpi { border: 1px solid var(--rule); border-radius: 10px; background: #fff; padding: 12px 14px; }
.adm-kpi b { display: block; font-size: 24px; font-weight: 600; line-height: 1.2; }
.adm-kpi span { font-size: 12px; color: var(--muted); }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 18px; }
.adm-bars { display: flex; align-items: flex-end; gap: 2px; height: 120px; border-bottom: 1px solid var(--rule); }
.adm-bars i { flex: 1; background: var(--accent); min-height: 1px; border-radius: 2px 2px 0 0; }
.adm-bars i.zero { background: var(--rule); }
.adm-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 4px; }
.adm table { width: 100%; }
.adm td.num, .adm th.num { text-align: right; font-variant-numeric: tabular-nums; }
.adm .placeholder { border: 1px dashed var(--rule); border-radius: 8px; padding: 10px 14px; color: var(--muted); font-size: 12.5px; }
/* the back office is not inside .ws (whose grid is the workspace's sidebar layout), so the workspace's buttons, boxes and
   tables are repeated for it: before, its buttons were the site's serif and its first table column 17-19 px serif (#1343) */
.adm .btn { min-height: 34px; }
.adm .btn.xs { min-height: 28px; }
.adm .btn.sm { font-family: var(--sans); font-size: 13px; font-weight: 500; padding: 9px 16px; border-radius: 8px; }
.adm .btn.ghost.xs { font-size: 12.5px; padding: 7px 12px; border-radius: 7px; color: var(--ink); }
.adm .btn.sm[disabled], .adm .btn.danger.sm[disabled] { background: var(--bg-soft); color: var(--muted); border: 1px solid var(--rule); opacity: 1; cursor: default; }
.adm .box { border-radius: 12px; padding: 20px 22px; }
.adm .box h2 { font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: 0; margin: 0 0 10px; }
.adm .box h3 { font-family: var(--sans); font-weight: 600; font-size: 13px; }
.adm table.plain th { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.adm table.plain td { vertical-align: middle; }
.adm table.plain td:first-child, .adm table.plain.small td:first-child { font-family: var(--sans); font-size: 12.5px; font-weight: 500; }
/* Plan and limits (2026-10-24): every limit the API names, grouped in folds; a row with an override is marked, one
   edited and not saved yet is tinted, and Save says how many */
.adm-lim-bar { grid-template-columns: minmax(140px, 200px) minmax(180px, 1fr) max-content; }
.adm-lim-only label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; padding-bottom: 9px; white-space: nowrap; }
.adm-lim-only input { width: auto; }
.adm-lim-save { grid-template-columns: minmax(180px, 1fr) max-content; margin-top: 12px; }
details.adm-lim { border: 1px solid var(--rule); border-radius: 10px; margin: 0 0 8px; background: #fff; }
details.adm-lim > summary { cursor: pointer; padding: 10px 14px; font-size: 13px; font-weight: 600; }
details.adm-lim > summary .muted { font-weight: 400; font-size: 12px; margin-left: 8px; }
details.adm-lim table { margin: 0 14px 10px; width: calc(100% - 28px); table-layout: fixed; }
details.adm-lim th:nth-child(2), details.adm-lim th:nth-child(4) { width: 110px; }
details.adm-lim th:nth-child(3) { width: 200px; padding-left: 18px; }
details.adm-lim th:nth-child(5) { width: 90px; padding-left: 14px; }
.adm-lim td.lim-in { padding-left: 18px; }
.adm-lim td.lim-kind { padding-left: 14px; }
.adm-lim td.lim-plan, .adm-lim td.lim-eff { font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-lim td.lim-in { white-space: nowrap; }
.adm-lim td.lim-in input, .adm-lim td.lim-in select { width: 120px; padding: 5px 8px; font: inherit; font-size: 12.5px; border: 1px solid var(--rule); border-radius: 6px; background: #fff; }
.adm-lim td.lim-in .unit { font-size: 11.5px; color: var(--muted); margin-left: 4px; }
.adm-lim .lim-key { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--muted); font-weight: 400; }
.adm-lim .lim-hint { font-size: 11px; color: var(--muted); font-weight: 400; }
.adm-lim .lim-kind { font-size: 11px; color: var(--muted); }
.adm-lim .lim-kind.guide { font-style: italic; }
.adm-lim tr.over td.lim-eff { font-weight: 600; color: var(--accent-deep); }
.adm-lim tr.dirty td { background: var(--tint); }
@media (max-width: 700px) { .adm-lim-bar, .adm-lim-save { grid-template-columns: 1fr; } .adm-lim .lim-kind, details.adm-lim th:nth-child(5) { display: none; }
  details.adm-lim th:nth-child(2), details.adm-lim th:nth-child(4) { width: 64px; } details.adm-lim th:nth-child(3) { width: 130px; padding-left: 10px; }
  .adm-lim td.lim-in { padding-left: 10px; } .adm-lim td.lim-in input, .adm-lim td.lim-in select { width: 96px; } .adm-lim td.lim-in .unit { display: none; } }

/* ---- the founder's review of the screens package (2026-09-23): eight defects of the workspace ---- */
/* 5. the sidebar is a column flexbox that scrolls: none of its blocks may shrink, or the organisation card (min-height
   40 px) closes over its own role chip once the explorer's tree is long */
.ws-side > * { flex-shrink: 0; }
/* 4. the results head: title and status, then the actions; the status never breaks into a column */
.results-head { flex-wrap: wrap; row-gap: 8px; }
.results-head .status { white-space: nowrap; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.results-actions { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.results-actions .btn, .results-actions summary { white-space: nowrap; }
.results-head .dl-menu { margin: 0; }   /* the site's details margin (20px 0) made the actions 84 px tall: an empty band under the title, 2026-09-24 */
/* 6. the mode label under the editor: a lock while read-only, a pen once a write credential is attached */
.sql-ro.write { color: #1f6b3d; }
.sql-ro.write svg { stroke: #1f6b3d; opacity: 1; }
/* 8. the create-table dialog's example rows */
.cols tr.example input:not([type=checkbox]), .cols tr.example .csel-btn { background: var(--bg-soft); }
.cols tr.example input::placeholder { color: var(--muted); font-style: italic; }
.cols tr.example select, .cols tr.example .csel-btn, .cols tr.example input[type=checkbox] { opacity: .7; }
.ct-example-note { margin: -4px 0 12px; }
/* 7. the Files preview of a text file: a table for CSV, a <pre> for the rest */
.files-preview.text { display: block; overflow: auto; background: #fff; }
.files-preview.text .results { border: 0; border-radius: 0; max-height: none; }
.files-preview.text .results table { font-family: var(--sans); font-size: 12px; }
.files-preview.text .results th { font-family: var(--sans); text-transform: none; }
.files-preview .files-text { margin: 0; padding: 14px 16px; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; color: var(--ink); }
.files-preview .files-preview-note { margin: 0; padding: 8px 14px; border-top: 1px solid var(--rule); background: var(--bg-soft); }
.files-table td.files-thumb img.pending { background: var(--bg-soft); min-width: 44px; }
/* 3. the catalog list scrolls before it clips (the phone layout below stacks it instead) */
#wh-list, #cv-tables-list, #files-list { overflow-x: auto; }   /* the Tables and Files lists too: seen clipping at 390 px while verifying */
/* 2. the catalog's section strip: one line that scrolls sideways when it does not fit; the fade says there is more */
.ws .tabs.sub { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; position: relative; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--rule); }
/* the rule is an inset shadow now: nothing for the tab's underline to overlap, nothing for overflow to clip */
.ws .tabs.sub::-webkit-scrollbar { display: none; }
.ws .tabs.sub button { margin-bottom: 0; flex: none; scroll-margin-inline: 12px; }
.ws .tabs.sub.more { mask-image: linear-gradient(90deg, #000 calc(100% - 56px), rgba(0, 0, 0, .15)); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), rgba(0, 0, 0, .15)); }
.ws .tabs.sub.more-left { mask-image: linear-gradient(90deg, rgba(0, 0, 0, .15), #000 56px); -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .15), #000 56px); }
.ws .tabs.sub.more.more-left { mask-image: linear-gradient(90deg, rgba(0, 0, 0, .15), #000 56px, #000 calc(100% - 56px), rgba(0, 0, 0, .15)); -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .15), #000 56px, #000 calc(100% - 56px), rgba(0, 0, 0, .15)); }
/* the sticky top bar covers whatever scrolls under it: anchors and the editor keep its height clear when scrolled into view */
.ws { --ws-top-h: 56px; }
.ws-content :where(.box, .cvsec, .tabs.sub, #sql-editor, textarea.sql, #wh-listview, .ws-h, .ws-titlerow, :target) { scroll-margin-top: var(--ws-top-h); }
/* 1. the top bar's menu button: only the drawer layout shows it (shell.js also sets hidden above 900 px) */
.ws-menu { width: 40px; height: 40px; margin-left: -8px; flex: none; color: var(--ink); }
.ws-menu svg { width: 22px; height: 22px; stroke-width: 2; }
.ws-menu[hidden] { display: none; }
.ws-scrim { display: none; }

@media (max-width: 900px) {
  /* 1. the sidebar as an off-canvas drawer: fixed, slid out to the left until #panel.drawer-open, over a scrim */
    .ws-side { position: fixed; top: 0; left: 0; bottom: 0; height: 100dvh; width: min(320px, 86vw); z-index: 40; transform: translateX(-104%); transition: transform .2s ease, visibility 0s linear .2s; box-shadow: none; visibility: hidden; }
  .ws.drawer-open .ws-side { transform: none; visibility: visible; transition: transform .2s ease, visibility 0s; box-shadow: 0 0 40px rgba(26, 25, 23, .25); }
  .ws-scrim { position: fixed; inset: 0; z-index: 39; background: rgba(26, 25, 23, .4); }
  .ws-scrim[hidden] { display: none; }
  .ws.drawer-open .ws-scrim { display: block; }
  body:has(#panel.drawer-open) { overflow: hidden; }
  @media (prefers-reduced-motion: reduce) { .ws-side { transition: none; } }
  /* opaque and a little shorter on a phone: the translucent bar showed the first editor line and ghosted text through it (2026-09-24) */
  .ws { grid-template-columns: minmax(0, 1fr); --ws-top-h: 68px; }
  .ws-top { gap: 8px; background: var(--bg); backdrop-filter: none; padding-top: 8px; padding-bottom: 8px; }
  .ws-crumbs { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; line-height: 40px; }
  .ws-crumbs > * { display: inline; }
  .ws-crumbs .sep { margin: 0 6px; }
  /* 2. the strip's tabs sit closer so more of them show at once */
  .ws .tabs.sub button { margin-right: 22px; }
}
@media (max-width: 640px) {
  .ws-top, .ws-content { padding-left: 14px; padding-right: 14px; }
  .ws .box { padding: 16px 14px; }
  .ws .box.card { padding: 18px 16px; }
  .ws .tabs.sub button { margin-right: 18px; font-size: 13px; }
  /* 3. the catalog list as stacked rows: name and the Query action on the first line, level, tables and stored under it;
     created is not shown here (the catalog's Connect section has it) */
  .ws table.catalogs, .ws table.catalogs tbody { display: block; width: 100%; }
  .ws table.catalogs thead { display: none; }
  .ws table.catalogs tr { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .ws table.catalogs tr:last-child { border-bottom: 0; }
  .ws table.catalogs tr::before { content: ""; order: 3; flex-basis: 100%; height: 0; }   /* the line break after name + Query */
  .ws table.catalogs td { display: block; padding: 0; border: 0; }
  .ws table.catalogs td.c-name { order: 1; flex: 1 1 0; min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
  .ws table.catalogs td.c-act { order: 2; flex: none; }
  .ws table.catalogs td.c-act .btn { margin: 0; }
  .ws table.catalogs td.c-level, .ws table.catalogs td.c-tables, .ws table.catalogs td.c-stored, .ws table.catalogs td.c-project { order: 4; flex: none; font-size: 12px; color: var(--ink-soft); }
  .ws table.catalogs td.c-tables::before { content: "tables "; color: var(--muted); }
  .ws table.catalogs td.c-stored::before { content: "stored "; color: var(--muted); }
  .ws table.catalogs td.c-project::before { content: "project "; color: var(--muted); }
  .ws table.catalogs td.c-created { display: none; }
  /* 4. the results head on a phone: icons only, the labels stay for assistive tech through aria-label */
  .results-actions .lbl { display: none; }
  .results-actions .btn svg, .results-actions summary svg { margin-right: 0 !important; }
    .results-head { padding: 0 14px 12px; gap: 10px; row-gap: 6px; }   /* title and status on one line; the icons join it when they fit, else a tight second row */
  .results-actions .btn, .results-actions summary { padding: 7px 9px; }
  /* the confirm rows of Visibility and Delete stack: label, full-width input, then the button (the label wrapped over a half-width input) */
  .ws #vis-form .form-row, .ws #del-form .form-row { grid-template-columns: minmax(0, 1fr); }
  .ws #vis-form .form-row .field:last-child .btn, .ws #del-form .form-row .field:last-child .btn { min-width: 0; }
  .sql-run { gap: 8px 12px; }
  .sql-run .sql-ro { flex-basis: 100%; margin-left: 0; }
  /* the Files preview dialog fills the phone */
  .files-dialog { width: calc(100vw - 16px); padding: 16px 14px; }
  .files-preview { max-height: calc(100vh - 220px); }
  .files-preview img { max-height: calc(100vh - 220px); }
}
/* Sinks (research/32 §2): one card per sink, the mapping panel inside it */
.sink-card { border: 1px solid var(--rule); border-radius: var(--radius-ctl); padding: 12px 14px; margin: 0 0 10px; background: var(--surface); }
.sink-card .row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
#conns-card[hidden], .conn-form [hidden] { display: none; }
.conn-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.conn-form input, .conn-form select { min-width: 0; flex: 1 1 180px; }
.conn-form input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sink-card textarea.mono { width: 100%; box-sizing: border-box; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }

/* a logout the API did not confirm (auth.js logout): said where the person is looking, then it clears */
.ws-user .who.warn { color: var(--warn, #a15c00); white-space: normal; }
/* the account picker (2026-09-24) */
.acct-list { list-style: none; margin: 14px 0 12px; padding: 0; display: grid; gap: 8px; }
.acct-list li.acct { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; }
.acct-list .acct-who { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.acct-list .acct-who small { display: block; color: var(--muted); }
.acct-list .tag { font-size: 10.5px; color: var(--ink-soft); border: 1px solid var(--rule); border-radius: 999px; padding: 1px 8px; }
/* while the boot decides (app.js show()): the sign-in form is not shown before it is the answer */
body.booting #signin { visibility: hidden; }


/* ---- eighth pass (2026-09-25, the founder's page-by-page review): bugs, colours, consistency ----
   The review is recorded in the PR; each rule names the item it fixes. */
/* #1, and the founder's "constrained": the table panel shows only while a table is picked, so the editor and the
   results take the whole width otherwise; the whole column is sticky (the box alone slid over its sibling) */
.sql-grid { grid-template-columns: minmax(0, 1fr) 340px; }
.sql-grid:has(#table-box > p.muted:only-child) { grid-template-columns: minmax(0, 1fr); }
.sql-grid:has(#table-box > p.muted:only-child) .sql-side { display: none; }
.sql-side { position: sticky; top: 64px; align-self: start; max-height: calc(100vh - 84px); overflow: auto; }
.sql-side .box { position: static; margin: 0; }
.ws .sql-about { background: none; padding: 0 !important; margin: -6px 0 14px !important; font-size: 12px; }
.ws .sql-about summary { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ws .sql-about-lead, .ws .sql-about-link { display: inline; margin: 0; }
.ws .sql-about-lead { color: var(--ink-soft); }
.ws .sql-about-link { padding-left: 0; }
.ws .sql-about p { padding: 10px 14px; margin-top: 8px; background: var(--lake); border-radius: 8px; max-width: 110ch; }
/* #2 the panel's stats wrap instead of clipping; long names break */
.tp-head { gap: 8px; align-items: flex-start; }
.tp-head h2 { min-width: 0; overflow-wrap: anywhere; line-height: 1.2 !important; }
/* #8 engine notes: a quiet fold */
.ws details.fold.tp-notes { margin: 0 0 14px; padding-top: 0; border-top: 0; font-size: 12px; }
.ws details.fold.tp-notes summary { color: var(--ink-soft); font-weight: 500; }
.tp-notes p { margin: 0; line-height: 1.5; }
/* #3 the explorer tree: long names end in an ellipsis (the title carries the whole name), the focus ring stays inside */
.ws-explorer .tree button { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-explorer .tree button:focus-visible { outline-offset: -2px; }
.ws-explorer .catrow { min-width: 0; }
.ws-explorer .catrow .catname { min-width: 0; flex: 1 1 auto; }
/* #4 the Connect recipe: code in the hint */
.recipe .small code { font-size: 11.5px; background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 4px; padding: 0 4px; }
.recipe .row { align-items: center; margin-bottom: 8px; }
/* #5 row buttons stay on one line */
.perm-table .act .btn, table.plain .btn.xs { white-space: nowrap; }
/* #10 a role is a label, not a warning */
.lvl.role { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 500; color: var(--ink); background: var(--bg-soft); border-color: var(--rule); }
/* #11 #13 the workspace's tables: names and dates in the text face on one line, codes stay mono, rows centred */
.ws table.plain th { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.ws table.plain td { vertical-align: middle; }
.ws table.plain.small td:first-child { font-family: var(--sans); font-size: 12.5px; font-weight: 500; }
.ws table.plain .mono { font-family: var(--sans); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ws table.plain td code, .ws table.plain .kid { font-family: var(--mono); font-size: 11.5px; }
/* #12 form controls in the brand colour */
.ws input[type=radio], .ws input[type=checkbox] { accent-color: var(--action); }
/* #15 one orange for primary actions */
.ws #run, .ws .tbl-create { background: var(--action); }
.ws #run:hover, .ws .tbl-create:hover { background: #9c2c0f; }
/* #7 #16 forms in the account tabs, Members and Tokens: fields of one width, the button on their baseline */
#tab-account .form-row, #tab-members .form-row, #tab-tokens .form-row { grid-template-columns: repeat(auto-fill, minmax(200px, 320px)); align-items: end; }
#tab-account .form-row .field:last-child:has(> .btn), #tab-members .form-row .field:last-child:has(> .btn) { align-self: end; }
.ws .field .csel-btn { min-height: 32px; }
.ws .field label { display: block; margin-bottom: 6px; }
/* #17 links and paths in running text keep the text's face */
.ws .files-sub a.link, .ws .box p a.link { font-family: var(--sans); font-size: inherit; border-bottom: 1px solid var(--accent); padding: 0; }
.files-crumbs { font-family: var(--sans); font-size: 12px; color: var(--ink-soft); }

/* ---- ninth pass (2026-09-25, design round 2): the SQL explorer breathes ---- */
/* the editor starts at five lines and grows with the query; the results come into view without scrolling */
.ws .cm-host .cm-editor { min-height: 132px; }
.ws .cm-host .cm-scroller { max-height: 40vh; }
.ws .sql-box { padding-bottom: 14px; }
.ws .sql-run { margin-top: 10px; }
/* the table panel: facts as rows, one line of actions */
.tp-facts { display: grid; grid-template-columns: 1fr auto; gap: 0; margin: 0 0 14px; border: 1px solid var(--rule); border-radius: 8px; font-size: 12.5px; }
.tp-facts dt, .tp-facts dd { margin: 0; padding: 7px 12px; border-top: 1px solid var(--rule); }
.tp-facts dt:first-of-type, .tp-facts dt:first-of-type + dd { border-top: 0; }
.tp-facts dt { color: var(--ink-soft); }
.tp-facts dd { font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.tp-actions { flex-wrap: nowrap; gap: 6px; }
.tp-actions .btn { flex: 1 1 0; justify-content: center; }
.tp-actions .btn svg { margin-right: 5px !important; }
.tp-meta { margin: 4px 0 12px; }
/* results: a tighter head, the table as tall as the screen allows */
.results-head { padding: 0 18px 10px; align-items: center; }
.ws .results { max-height: calc(100vh - 240px); }
/* a warning inside the workspace is amber, an error stays red (Usage's "Incomplete" note is a warning) */
.ws .note.warn { border-left-color: #d9a441; background: #fff8ec; color: #6b4a00; }
/* the recipe's command box: no trailing blank line */
.recipe pre.code { white-space: pre-wrap; }

/* ---- tenth pass (design round 3): the SQL explorer's head is three short lines, the editor starts higher ---- */
.sql-titlerow { margin-bottom: 4px; }
.sql-statusrow { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 0 0 6px; }
.sql-statusrow .sql-conn { margin: 0 !important; }
.sql-statusrow .sql-actions .btn { padding: 6px 12px; font-size: 12px; }
.ws .sql-about { margin: 0 0 14px !important; }
/* the tokens tables: the catalogs column wraps and takes the slack, agent names stay whole (round 1 made every .mono
   cell nowrap and the Connections table ran off the page) */
.ws table.plain td.wraps { white-space: normal; min-width: 200px; line-height: 1.45; }
.ws table.plain td.ident { white-space: nowrap; }

/* ---- eleventh pass (design round 4) ---- */
/* narrow screens: one column again. Round 1's two-column .sql-grid came after the 1100 px query and beat it, which
   squeezed the editor beside the table panel on a phone (measured at 500 px, 2026-09-25) */
@media (max-width: 1100px) {
  .sql-grid, .sql-grid:has(#table-box > p.muted:only-child) { grid-template-columns: minmax(0, 1fr); }
  .sql-side { position: static; max-height: none; overflow: visible; }
}
/* the panel's three actions share the width; text only, so "Snapshots" fits at 340 px */
.tp-actions .btn { min-width: 0; padding: 7px 6px; font-size: 12px; }
.tp-actions .btn svg { display: none; }
/* row buttons at the end of the workspace tables stay inside the card */
.ws table.plain td:last-child { padding-right: 0; }
.ws table.plain .btn.danger.xs, .ws table.plain .btn.ghost.xs { padding: 6px 12px; font-size: 12px; }

/* the SQL explorer's map (map.js, 2026-09-25) */
.map-dialog { width: min(1000px, calc(100vw - 32px)); }
.map-dialog .dlg-head p { font-family: var(--mono); font-size: 11.5px; word-break: break-all; }
.map-view { position: relative; height: min(62vh, 560px); background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.map-view > p { margin: 0; padding: 24px; }
.map-pop { font-family: var(--sans); font-size: 11.5px; line-height: 1.45; }
.map-pop b { display: block; margin-bottom: 4px; }
.map-pop .k { color: var(--muted, #6b7280); font-family: var(--mono); }
.results td.geo { font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.results td.geo .btn { margin-right: 6px; }
/* ---- twelfth pass (design round 5): every workspace box opens like a Settings card ---- */
.ws .box .card-head { margin-bottom: 14px; padding-bottom: 14px; }
.ws .box .card-head h2 { margin: 0 0 2px !important; }
.ws .box .card-head p { font-size: 12.5px; }
.ws .box .card-head p code { font-size: 11.5px; }
.ws .card-ic { width: 44px; height: 34px; border-radius: 10px; }
.ws .card-ic svg { width: 21px; height: 21px; }
/* the long explanations fold under the head */
.ws details.fold.card-more { margin: -4px 0 14px; padding-top: 0; border-top: 0; font-size: 12px; }
.ws details.fold.card-more summary { color: var(--ink-soft); font-weight: 500; }
.ws details.fold.card-more p { margin: 8px 0 0; max-width: 110ch; }
.ws .tbl-head + details.fold.card-more { margin-top: 0; }
/* Profile and Organisation: plain facts, the internals in a fold */
.ws .kv.kv-plain { grid-template-columns: 140px minmax(0, 1fr); gap: 8px 16px; margin: 0 0 6px; }
.ws .kv.kv-plain dt { font-family: var(--sans); font-size: 12.5px; letter-spacing: 0; color: var(--ink-soft); }
.ws .kv.kv-plain dd { font-family: var(--sans); font-size: 12.5px; color: var(--ink); word-break: normal; overflow-wrap: anywhere; }
.ws details.fold.tech { margin: 10px 0 14px; font-size: 12px; }
.ws details.fold.tech .kv { margin: 10px 0 0; }
/* the results' right-edge cue */
.ws .results.more-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), rgba(0, 0, 0, .2)); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), rgba(0, 0, 0, .2)); }
.ws #ag-form > .row { margin-top: 16px; }

/* the ⌘K palette (palette_rules.js) */
.cmdk-open { margin-left: auto; gap: 6px; color: var(--muted); }
.cmdk-open kbd { font: 11px var(--mono, ui-monospace, monospace); border: 1px solid var(--rule); border-radius: 4px; padding: 0 4px; color: var(--muted); }
.cmdk-dialog { width: min(620px, calc(100vw - 32px)); padding: 0; margin-top: 12vh; }
.cmdk-dialog input { width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--rule); padding: 16px 18px; font: inherit; font-size: 13.5px; outline: none; background: transparent; }
.cmdk-dialog ul { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow: auto; }
.cmdk-dialog li { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 12.5px; }
.cmdk-dialog li[aria-selected="true"] { background: var(--tint); color: var(--accent-deep); }
.cmdk-dialog li .k { flex: none; width: 76px; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cmdk-dialog li .d { margin-left: auto; font-size: 11.5px; color: var(--muted); font-family: var(--mono, ui-monospace, monospace); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
.cmdk-dialog li.none { cursor: default; color: var(--muted); }
#cmdk-err { margin: 10px 14px 0; }
.cmdk-foot { margin: 0; padding: 8px 18px 12px; border-top: 1px solid var(--rule); }
@media (max-width: 720px) { .cmdk-open .lbl, .cmdk-open kbd { display: none; } }
.tp-cols li.flash { background: var(--tint); transition: background .3s; }

/* an empty state's prompt for the agent (prompts_rules.js) */
.ask-agent { margin-top: 14px; padding: 14px 16px; border: 1px dashed var(--rule); border-radius: 10px; background: var(--tint); }
.ask-agent p { margin: 0 0 8px; }
.ask-agent pre.prompt { margin: 0 0 10px; }
/* the same box as Connect's "Continue in your agent" prompt (.continue .prompt) */
.ask-agent pre.prompt, .ask-fold pre.prompt { background: #fff; color: var(--ink); border: 1px solid var(--rule); border-radius: 8px; padding: 12px 14px; font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: normal; overflow-wrap: anywhere; }
.ask-agent .ask-pick select { max-width: 100%; }
.ask-fold { margin: 0 0 14px; }
.ask-fold pre.prompt { margin: 8px 0; }

/* column profiles (profile_rules.js): a stats line under each column, a detail on click; the same under Results */
.tp-cols.prof li { display: block; padding: 0; }
.tp-cols.prof .tp-colrow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 0 2px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.tp-cols.prof .tp-colrow:disabled { cursor: default; }
.tp-cols.prof .tp-colrow[aria-expanded="true"] .tp-name { color: var(--accent-deep); }
.tp-cols.prof .tp-type { margin-left: auto; }
.tp-stat { display: flex; align-items: center; gap: 8px; min-height: 16px; padding: 0 0 7px 28px; font-size: 11px; color: var(--muted); font-family: var(--mono); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.res-prof .tp-stat { padding-left: 0; }
.nullbar { flex: none; width: 34px; height: 5px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.nullbar i { display: block; height: 100%; background: var(--accent); }
.tp-detail { margin: 0 0 10px 28px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; background: #fff; font-size: 12px; }
.res-prof .tp-detail { margin-left: 0; }
.tp-detail p { margin: 0 0 6px; }
.prof-hist { display: flex; align-items: flex-end; gap: 2px; height: 64px; margin: 6px 0 8px; border-bottom: 1px solid var(--rule); }
.prof-hist i { flex: 1; background: var(--accent); opacity: .75; border-radius: 2px 2px 0 0; min-width: 2px; }
.prof-q { grid-template-columns: auto 1fr auto 1fr; font-size: 11px; }
.prof-top { list-style: none; margin: 4px 0 0; padding: 0; }
.prof-top li { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr auto; gap: 8px; align-items: center; padding: 3px 0; font-size: 11.5px; }
.prof-top .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); }
.prof-top .bar { height: 6px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.prof-top .bar i { display: block; height: 100%; background: var(--accent); }
.prof-top .n { color: var(--muted); font-family: var(--mono); font-size: 10.5px; }
.res-profile { margin: 0 0 14px; }
.res-profile .tp-cols { columns: 2 320px; column-gap: 24px; }
.res-profile .tp-cols li { break-inside: avoid; }

.amd-label { margin: 2px 0 4px; }
.amd-preview { border: 1px solid var(--rule); border-radius: 8px; padding: 10px 14px; min-height: 420px; max-height: 70vh; overflow: auto; }
.amd-actions { margin-top: 10px; gap: 8px; align-items: center; }
@media (max-width: 760px) { .amd-preview { min-height: 240px; } }
.amd-card .tbl-head .spacer, .amd-actions .spacer { flex: 1; }
.amd-card .tbl-head { gap: 8px; }

/* ---- Agents tab (hosted agents, research/47; hosted_agents.js) ---- */
.ha-state { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; padding: 2px 7px; border-radius: 4px; border: 1px solid var(--rule); color: var(--ink-soft); white-space: nowrap; }
.ha-state.ok { border-color: var(--ok); color: var(--ok-text); }
.ha-state.warn { border-color: var(--accent); color: var(--accent-deep); }
.ha-state.bad { border-color: var(--accent-deep); color: var(--accent-deep); border-style: dashed; }
.ha-state.busy { color: var(--muted); }
.ha-bar { height: 8px; border-radius: 4px; background: var(--tint); overflow: hidden; margin: 6px 0 10px; }
.ha-bar > span { display: block; height: 100%; background: var(--accent); }
.ha-name { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-deep); text-decoration: underline; cursor: pointer; }
.ha-runs { margin-top: 14px; }
.ha-out { white-space: pre-wrap; word-break: break-word; font-size: 12px; background: var(--tint); border-radius: 6px; padding: 8px 10px; margin: 6px 0 0; }
.hi-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.hi-form input { min-width: 12em; }

/* the Agents tab: an agent's page (definition, tools, runs) */
.card-head > .btn { margin-left: auto; flex: none; }
.ha-page { margin-top: 18px; }
.ha-page:empty { display: none; }
.ha-page h3 { margin: 0 0 8px; }
.ha-page h4 { margin: 18px 0 8px; font-size: 13px; }
.ha-sec { border-top: 1px solid var(--rule); padding-top: 4px; }
.ha-field { margin: 10px 0; }
.ha-field label { display: block; font-weight: 600; margin-bottom: 4px; }
.ha-field input[type=text], .ha-field input[type=number], .ha-field textarea { width: 100%; max-width: 44rem; box-sizing: border-box; }
.ha-field textarea { font-family: inherit; }
.ha-fs { border: 0; padding: 0; margin: 12px 0; }
.ha-fs legend { font-weight: 600; margin-bottom: 4px; padding: 0; }
.ha-check { display: inline-flex; align-items: center; gap: 4px; margin: 2px 14px 2px 0; }
.ha-sched { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0; }
.ha-preview { margin-top: 6px; }
.ha-tool { margin: 10px 0; }
.ha-tool p { margin: 2px 0 0; }
.ha-toolopts { margin: 4px 0 0 22px; }
.ha-foot { display: flex; gap: 8px; align-items: center; margin: 16px 0 6px; flex-wrap: wrap; }
.ha-foot .spacer { flex: 1; }
.ha-page .bad { color: var(--bad, #b3261e); }
.ha-page .ok-note { color: var(--ok, #1b6e3a); }
/* a run's record ("What it did"): its tool calls in order */
.ha-record summary { cursor: pointer; font-size: 12px; color: var(--ink-soft); }
.ha-calls { margin: 6px 0 6px 18px; padding: 0; font-size: 12px; }
.ha-calls li { margin: 2px 0; }
.ha-what { font-family: var(--mono); font-size: 11px; word-break: break-word; }

/* 2026-10-01: a namespace row is a button that expands and collapses its tables (nsGroups) */
.ws-explorer .tree-tables li.ns > .nsrow { padding: 0; margin: 0; font: inherit; color: inherit; background: none; border-radius: 4px; display: flex; align-items: center; gap: 6px; }
.ws-explorer .tree-tables li.ns > .nsrow::before { display: none; }
.ws-explorer .tree-tables li.ns > .nsrow:hover { color: var(--ink); background: none; }
.ws-explorer .tree-tables li.ns > .nsrow small { display: inline; margin: 0; font-family: var(--sans); font-size: 11px; color: var(--muted); }
.ws-explorer .tree-tables li.ns.closed::before { opacity: .6; }

/* 2026-10-01: the footer is gone; the API banner shows only while requests fail, the engine's state sits by Run */
.ws-banner { margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--accent); border-radius: 8px; background: var(--tint); color: var(--accent-deep); font-family: var(--sans); font-size: 13px; }
/* the Terms in force not yet accepted (2026-10-17): one line, the actions at its end, never a gate */
.terms-banner:not(.hidden) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.terms-banner > span:first-child { flex: 1 1 auto; }
.terms-banner a { color: inherit; text-decoration: underline; }
.terms-banner-err:empty { display: none; }
.terms-banner-err { flex-basis: 100%; }
.sql-engine:empty { display: none; }
.sql-engine.warn { color: var(--accent-deep); }

/* ---- the reorganisation (2026-10-01, docs/app-information-architecture.md): Home, Settings, the organisation menu,
   the catalog tree inside the SQL page ---- */
/* the catalog tree is the SQL page's left column: tree · editor and results · the table panel when one is picked */
.sql-grid { grid-template-columns: 236px minmax(0, 1fr) 320px; }
.sql-grid:has(#table-box > p.muted:only-child) { grid-template-columns: 236px minmax(0, 1fr); }
.sql-tree { border: 1px solid var(--rule); border-top: 1px solid var(--rule); border-radius: 10px; background: #fff; padding: 12px 10px; position: sticky; top: 64px; align-self: start; max-height: calc(100vh - 84px); overflow: auto; }
.sql-tree .ws-explorer-lede { margin: 0 0 8px; padding: 0 2px; }
@media (max-width: 1100px) {
  .sql-grid, .sql-grid:has(#table-box > p.muted:only-child) { grid-template-columns: minmax(0, 1fr); }
  .sql-tree { position: static; max-height: 360px; }
}
/* Settings: one title and a strip over General, Members, Access keys and Usage */
.set-head { margin: 0 0 18px; }
.set-head .ws-title { margin: 0 0 10px; }
.set-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); }
.set-tabs button { border: 0; background: none; padding: 8px 12px; font: inherit; font-size: 13px; color: var(--ink-soft); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.set-tabs button:hover { color: var(--ink); }
.set-tabs button.on { color: var(--accent-deep); border-bottom-color: var(--accent); font-weight: 500; }
/* the sidebar's Settings link and the person's name: buttons that look like the links beside them */
.ws-bottom > .ws-link { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 13px; font: inherit; font-size: 12.5px; color: var(--ink-soft); background: none; border: 0; border-radius: 8px; text-align: left; cursor: pointer; }
.ws-bottom > .ws-link:hover { background: var(--bg-soft); color: var(--ink); }
.ws-bottom > .ws-link.on { background: var(--tint); color: var(--accent-deep); font-weight: 500; }
.ws-user button.who { border: 0; background: none; padding: 4px 6px; margin: 0 -6px; border-radius: 6px; text-align: left; cursor: pointer; font: inherit; }
.ws-user button.who:hover, .ws-user button.who.on { background: var(--bg-soft); }
/* the organisation menu */
.ws-side .orgpick { position: relative; }
.orgmenu { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; background: none; }
.orgmenu > summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.orgmenu > summary::-webkit-details-marker { display: none; }
.orgmenu > summary b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.orgmenu > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg) translateY(-2px); flex: none; }
.orgmenu-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: #fff; border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 10px 30px rgba(40, 30, 20, .12); padding: 6px; display: flex; flex-direction: column; }
.orgmenu-list button { display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 6px; font: inherit; font-size: 12.5px; font-weight: 400; color: var(--ink); cursor: pointer; }
.orgmenu-list button:hover { background: var(--bg-soft); }
.orgmenu-h { margin: 6px 10px 2px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
/* Home */
.home-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 0 0 22px; }
.home-act { display: flex; align-items: flex-start; gap: 12px; text-align: left; border: 1px solid var(--rule); border-radius: 10px; background: #fff; padding: 14px 16px; font: inherit; color: var(--ink); cursor: pointer; }
.home-act:hover { border-color: var(--accent); background: var(--tint); }
.home-act-ic { flex: none; width: 34px; height: 34px; border-radius: 8px; background: var(--bg-soft); display: grid; place-items: center; color: var(--accent-deep); }
.home-act-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.home-act-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.home-act-t b { font-weight: 500; font-size: 13.5px; }
.home-act-t span { font-size: 12px; color: var(--muted); }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .home-grid { grid-template-columns: minmax(0, 1fr); } }
.home-card-h { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; }
.home-card-h h2 { margin: 0; font-size: 15px; }
.home-cats { list-style: none; margin: 0; padding: 0; }
.home-cats li { display: grid; grid-template-columns: minmax(0, 1fr) auto 90px; gap: 14px; align-items: center; padding: 7px 0; border-top: 1px solid var(--rule); font-size: 12.5px; }
.home-cats li:first-child { border-top: 0; }
.home-cats .mono { text-align: right; font-variant-numeric: tabular-nums; }
.home-cat { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; font: inherit; color: var(--ink); cursor: pointer; min-width: 0; text-align: left; }
.home-cat b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-cat:hover b { color: var(--accent-deep); text-decoration: underline; }
.home-cat svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-soft); stroke-width: 1.7; flex: none; }
.home-tiles { display: flex; flex-direction: column; gap: 14px; }
.tile-l { display: block; font-size: 12px; color: var(--muted); }
.tile-f { display: block; font-size: 13px; margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.tile-f b { font-size: 18px; font-weight: 500; }
.tile .bar { height: 6px; margin: 6px 0 0; }
.tile.over .bar i { background: var(--accent-deep); }
.tile.none .tile-f b { font-size: 13px; color: var(--muted); font-weight: 400; }
/* Home: needs attention, getting started, activity (2026-10-01) */
.home-lines { list-style: none; margin: 0; padding: 0; }
.home-line { border-top: 1px solid var(--rule); }
.home-line:first-child { border-top: 0; }
.home-line-b { display: flex; align-items: baseline; gap: 12px; width: 100%; text-align: left; border: 0; background: none; padding: 8px 0; font: inherit; font-size: 12.5px; color: var(--ink); }
button.home-line-b { cursor: pointer; }
button.home-line-b:hover .home-line-t { color: var(--accent-deep); text-decoration: underline; }
.home-line-t { flex: 1; min-width: 0; }
.home-line-w { flex: none; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.home-line.bad .home-line-t::before, .home-line.warn .home-line-t::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: var(--accent); }
.home-line.bad .home-line-t::before { background: var(--accent-deep); }
.home-attn { border-color: var(--accent); }
.home-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.home-steps li button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 7px 0; font: inherit; font-size: 13px; color: var(--ink); text-align: left; cursor: pointer; }
.home-steps li button:hover { color: var(--accent-deep); }
.home-step-mark { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--rule); flex: none; }
.home-steps li.done button { color: var(--muted); text-decoration: line-through; }
.home-steps li.done .home-step-mark { background: var(--ok); border-color: var(--ok); }
.home-step-t { flex: 1; min-width: 0; position: relative; }
.home-steps li, .home-steps li.done { display: block; }
/* the catalog page (2026-10-01): Query by the title, the country chip, Overview's flow and Connect card */
#wh-view .cathead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cv-query { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.cv-query svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ws .cathead h1 .cv-place { display: inline-block; vertical-align: middle; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0; padding: 5px 10px; border-radius: 7px; border: 1px solid var(--rule); background: var(--bg-soft); color: var(--ink-soft); }
/* Overview's flow (the founder's redesign, 2026-10-23): Feeds -> Tables -> Agents as cards, each a way to its tab, the
   arrows saying which way data goes; an icon, the count, the stage, a line about it */
.cv-flow { display: flex; align-items: stretch; gap: 10px; margin: 0 0 18px; }
.cv-flow-cell { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; text-align: left; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); padding: 14px 16px; font: inherit; color: var(--ink); cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.cv-flow-cell:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(40, 30, 20, .06); }
.cv-flow-ic { flex: none; width: 40px; height: 40px; border-radius: var(--radius); display: grid; place-items: center; background: var(--lake); color: #2974a2; }
.cv-flow-ic.sinks { background: #f1ecfb; color: #6b3fa0; }
.cv-flow-ic.cagents { background: #eaf6ee; color: #1f6b3d; }
.cv-flow-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cv-flow-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cv-flow-cell b { font-size: 20px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cv-flow-l { font-size: var(--fs-body); font-weight: 500; color: var(--ink); }
.cv-flow-w { font-size: var(--fs-xs); color: var(--muted); }
.cv-flow-cell.bad { border-color: var(--accent); }
.cv-flow-cell.bad .cv-flow-w { color: var(--accent-deep); }
.cv-flow-arrow { align-self: center; color: var(--muted); font-size: 18px; flex: none; }
@media (max-width: 700px) { .cv-flow { flex-direction: column; } .cv-flow-arrow { transform: rotate(90deg); } }
.cv-conn-tabs { margin: 8px 0 12px; }
.cv-amd-body { max-height: 260px; overflow: hidden; }               /* another organisation's public catalog: its AGENTS.md's start */
.tvsec[role=tabpanel] { display: none; }
.tvsec[role=tabpanel].on { display: block; }
/* the SQL page's tree rows (2026-10-01): the name inserts it into the query, ⋯ holds the rest */
.ws-explorer .tree-tables .trow { position: relative; display: flex; align-items: center; }
.ws-explorer .tree-tables .trow > .tname { flex: 1; min-width: 0; }
.tmenu { position: relative; flex: none; }
.tmenu > summary { list-style: none; cursor: pointer; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: var(--muted); opacity: 0; }
.tmenu > summary::-webkit-details-marker { display: none; }
.trow:hover .tmenu > summary, .tmenu[open] > summary, .tmenu > summary:focus-visible { opacity: 1; }
.tmenu > summary:hover { background: var(--bg-soft); color: var(--ink); }
.tmenu-list { position: absolute; right: 0; top: 26px; z-index: 30; min-width: 200px; background: #fff; border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 10px 30px rgba(40, 30, 20, .12); padding: 6px; display: flex; flex-direction: column; }
.ws-explorer .tmenu-list button { padding: 7px 10px; border-radius: 6px; font-size: 12.5px; }
.ws-explorer .tmenu-list button::before { display: none; }
@media (hover: none) { .tmenu > summary { opacity: 1; } }
/* the quick look beside the editor, and the table page */
.tp-quick li { display: flex; gap: 8px; align-items: center; padding: 4px 0; }
.tp-page { margin: 12px 0 0; }
.tv-sep { color: var(--muted); font-weight: 400; }
.tv-cat { font-weight: 400; }
.tv-facts { margin: 0; }
.tv-grid { max-height: 560px; overflow: auto; }
/* Access keys (2026-10-01): one list, New key as a dialog with a catalog search */
.keys-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.keys .lvl { text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 11px; }
.keys tr.key-full td:first-child b { color: var(--accent-deep); }
.keys-how { margin: 14px 0 0; }
.key-cats { list-style: none; margin: 6px 0 0; padding: 0; }
.key-matches li button { border: 0; background: none; padding: 5px 8px; border-radius: 6px; font: inherit; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; }
.key-matches li button:hover { background: var(--bg-soft); color: var(--ink); }
.key-added li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--rule); font-size: 12.5px; }
.key-added li b { flex: 1; font-weight: 500; }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 7px; overflow: hidden; }
.seg button { border: 0; background: #fff; padding: 4px 10px; font: inherit; font-size: 12px; color: var(--ink-soft); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--rule); }
.seg button.on { background: var(--tint); color: var(--accent-deep); font-weight: 500; }
.seg button:disabled { opacity: .45; cursor: not-allowed; }
/* Usage (2026-10-01): tiles, one table by catalog */
.use-top { margin: 0 0 12px; }
.use-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 0 0 8px; }
.utile { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.utile .tile-f b { font-size: 22px; }
.utile .bar { height: 8px; margin: 10px 0 4px; }
.tile-p { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.utile.warn { border-color: var(--accent); }
.utile.over { border-color: var(--accent-deep); background: var(--tint); }
.tile-n { margin: 8px 0 0; color: var(--accent-deep); }
.use-h { margin: 0 0 8px; font-size: 15px; }
.use-table td, .use-table th { font-family: var(--sans); }
.use-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.use-table .use-share { width: 28%; }
.use-table .bar { margin: 0; }
.use-plan { margin-top: 4px; }

/* ==== the founder's design, 2026-10-02 (first screen: a catalog's Tables) ====
   A calmer page: one size up, fewer boxes. The sidebar: brand, the organisation as a plain row, Home · Catalogs · Agents,
   the catalogs as a tree, then Settings · Documentation · Support and the person. */
/* the sidebar's column and width on a desktop only: below 901 px it is the off-canvas drawer (the media block above), and
   these, outside a media query, put the page into a 248 px column with an empty strip beside it (founder, 2026-10-02) */
.ws-side { padding: 13px 10px 10px; gap: 4px; }
@media (min-width: 901px) { .ws-side { width: 248px; } .ws { grid-template-columns: 248px minmax(0, 1fr); } }
.ws-brand { font-size: 17px; padding: 0 6px 7px; }
.ws-brand .mark { width: 24px; height: 24px; }
/* the organisation: a plain row, the menu on click */
.ws-side .orgpick { border: 0; background: none; padding: 4px 6px 4px 32px; min-height: 0; font-size: 14px; }
.ws-side .orgpick::before { left: 12px; width: 18px; height: 18px; }
.orgmenu > summary b { font-weight: 600; flex: 0 1 auto; }
.ws-side .orgpick .lvl { margin-left: 4px; font-size: 13px; padding: 3px 6px; border-radius: 7px; }
.orgmenu > summary::after { margin-left: auto; opacity: 0; }
.orgmenu:hover > summary::after, .orgmenu[open] > summary::after { opacity: 1; }
/* Home · Catalogs · Agents */
.tabs.ws-nav button { font-size: 14px; padding: 6px 9px; gap: 10px; border-radius: 8px; color: var(--ink); }
.tabs.ws-nav button svg { width: 18px; height: 18px; stroke-width: 1.6; }
.tabs.ws-nav button.on { box-shadow: inset 3px 0 0 var(--accent); }
/* the catalogs */
.ws-cats { border-top: 1px solid var(--rule); margin-top: 9px; padding-top: 10px; min-height: 0; overflow: auto; flex: 1; }
.ws-cats-h { display: flex; align-items: center; gap: 4px; padding: 0 4px 4px 9px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.ws-cats-h span { flex: 1; }
.ws-cats-h .ws-iconbtn svg { width: 19px; height: 19px; }
.navtree, .navtree ul { list-style: none; margin: 0; padding: 0; }
.navtree ul { padding-left: 14px; }
.navtree .nav-row { display: flex; align-items: center; border-radius: 8px; }
.navtree .nav-row:hover { background: var(--bg-soft); }
.navtree .nav-row.on { background: var(--tint); }
.navtree .nav-row.on .nav-item { color: var(--ink); font-weight: 600; }
.navtree .nav-row.on .nav-item svg { stroke: var(--accent-deep); }
.navtree .nav-chev { flex: none; width: 24px; height: 30px; border: 0; background: none; padding: 0; display: grid; place-items: center; color: var(--ink-soft); cursor: pointer; }
.navtree .nav-chev svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .12s; }
.navtree .nav-chev.open svg { transform: rotate(90deg); }
.navtree .nav-item { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; border: 0; background: none; padding: 4px 4px 4px 2px; font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; }
.navtree .nav-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navtree .nav-item svg { width: 19px; height: 19px; flex: none; fill: none; stroke: var(--ink-soft); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.navtree .nav-table .nav-item { padding-left: 19px; }
.navtree .nav-note { padding: 4px 0 4px 22px; font-size: 13px; color: var(--muted); }
/* Settings · Documentation · Support, then the person */
.ws-bottom { margin-top: 0; padding-top: 9px; gap: 2px; }
.ws-bottom > a, .ws-bottom > .ws-link { font-size: 14px; padding: 6px 9px; gap: 10px; color: var(--ink); }
.ws-bottom svg { width: 18px; height: 18px; stroke-width: 1.6; }
.usermenu { position: relative; border-top: 1px solid var(--rule); margin-top: 7px; padding: 9px 4px 2px; }
.usermenu > summary { list-style: none; display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 4px 4px; border-radius: 8px; }
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary:hover { background: var(--bg-soft); }
.usermenu .who { flex: 1; min-width: 0; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu .ws-avatar { width: 30px; height: 30px; font-size: 14px; }
.usermenu .chev-d { width: 18px; height: 18px; fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.usermenu-list { position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); z-index: 30; background: #fff; border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 10px 30px rgba(40, 30, 20, .12); padding: 4px; display: flex; flex-direction: column; }
.usermenu-list button { border: 0; background: none; text-align: left; padding: 6px 7px; border-radius: 6px; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.usermenu-list button:hover { background: var(--bg-soft); }
.usermenu-list button.hidden { display: none; }
/* the top bar */
.ws-top { padding-top: 10px; padding-bottom: 10px; }
.ws-crumbs { font-size: 14px; }
.cmdk-open { justify-content: flex-start; font-size: 13px; }
@media (min-width: 721px) { .cmdk-open { min-width: 250px; } }   /* below, the icon alone (#1345) */
.cmdk-open kbd { margin-left: auto; }
/* a catalog's head: name, Private, your level; tables · size · country; Query, Connect, ⋯ */
#wh-view .cathead { align-items: flex-start; margin-top: 6px; }
.ws .cathead h1 { font-size: 30px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ws .cathead h1 .lvl.cv-level { font-size: 14px; font-family: var(--sans); font-weight: 400; color: var(--ink-soft); background: none; border: 0; padding: 0; letter-spacing: 0; text-transform: none; }
.ws .cathead h1 .lvl.cv-level::before, .ws .cathead h1 .lvl.cv-level::after { display: none; content: none; }
.ws .cathead h1 .ws-vis { font-size: 14px; padding: 4px 9px; }
#cv-meta { display: flex; gap: 7px; align-items: center; font-size: 14px; color: var(--ink-soft); margin-top: 4px; }
.cv-dot { color: var(--muted); }
.cv-actions { display: flex; align-items: center; gap: 7px; flex: none; }
.cv-actions .btn { font-size: 14px; padding: 7px 13px; border-color: var(--ink-soft); }
.cv-actions .btn svg { width: 19px; height: 19px; }
.cv-more > summary { opacity: 1; width: 34px; height: 34px; font-size: 18px; color: var(--ink); }
.cv-more .tmenu-list { top: 42px; }
.ws #wh-view > .tabs.sub { margin-top: 26px; }
.ws #wh-view > .tabs.sub button { font-size: 14px; margin-right: 32px; padding: 9px 2px; }
/* Tables: no card; bigger rows; a ⋯ per row */
/* the Connect dialog */
.conn-dialog { width: min(720px, 94vw); }
.conn-dialog .recipe pre { min-height: 0; }
/* (the founder's design) the rules above lose to older, longer selectors here: */
.tmenu, .usermenu { margin: 0; }
.app .ws .cathead h1 { font-size: 30px; gap: 10px; margin-bottom: 6px; }
.ws #cv-meta { display: flex; gap: 7px; align-items: center; font-size: 14px; color: var(--ink-soft); }
.ws-side .orgpick { font-size: 14px; }
.ws-side .orgpick .orgmenu > summary b { font-weight: 600; }
.app .ws .cv-actions .btn { font-size: 14px; padding: 8px 14px; }
.tabs.ws-nav button { padding: 7px 9px; }
.usermenu .who { flex: 1 1 auto; }
.usermenu .chev-d { margin-left: auto; }
.app .ws .cathead #cv-meta { display: flex; gap: 7px; align-items: center; font-size: 14px; color: var(--ink-soft); margin-top: 4px; }
/* ⋯ menus anywhere */
.tmenu-list button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 6px 9px; border-radius: 6px; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.tmenu-list button:hover { background: var(--bg-soft); }
.tmenu > summary { list-style: none; }
/* a table's page (the founder's design, 2026-10-02) */
.tv-back { margin: 6px 0 4px; font-size: 14px; }
.tv-back a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; border: 0; }
.tv-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app .ws .tv-head h1 { font-size: 30px; gap: 13px; }
.tv-fmt { font-family: var(--sans); font-size: 12.5px; letter-spacing: 0; background: var(--lake); color: #1f5f85; border-color: transparent; padding: 4px 7px; }
.tv-sub { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-soft); margin-top: 6px; }
.tv-copy svg, .tv-edit svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-soft); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tv-copy.copied svg { stroke: var(--ok); }
.tv-doc { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-soft); margin-top: 9px; min-height: 24px; }
.tv-doc-input { flex: 1; max-width: 640px; font: inherit; font-size: 14px; padding: 4px 7px; border: 1px solid var(--rule); border-radius: 8px; }
.app .ws .tv-query { font-size: 14px; padding: 8px 16px; }
.tv-more > summary { border: 1px solid var(--ink-soft); border-radius: 6px; width: 34px; height: 34px; }
.ws #tv-tabs { margin-top: 20px; }
.ws #tv-tabs button { font-size: 14px; margin-right: 32px; padding: 9px 2px; }
.tv-stats { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border: 1px solid var(--rule); border-radius: 10px; margin-top: 17px; padding: 10px 0; }
.tv-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tv-stat + .tv-stat { border-left: 1px solid var(--rule); }
.tv-stat span { font-size: 13px; color: var(--ink-soft); }
.tv-stat b { font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tv-updated { text-align: right; font-size: 13px; color: var(--ink-soft); margin: 6px 4px 0; }
.tv-sec-h { display: flex; align-items: baseline; justify-content: space-between; margin: 16px 0 9px; }
.app .ws .tv-sec-h h2 { font-family: var(--serif); font-size: 20px; font-weight: 500; margin: 0; }
.tv-sec-h h2 .count { font-family: var(--sans); font-size: 14px; vertical-align: middle; }
.tv-more-link { color: var(--accent-deep); font-size: 14px; text-decoration: none; }
.tv-cols-t { font-size: 14px; }
.tv-cols-t th { background: var(--bg-soft); font-weight: 600; font-size: 14px; padding: 6px 13px; }
.tv-cols-t td { background: #fff; padding: 6px 13px; }
.tv-cols-t td + td, .tv-cols-t th + th { border-left: 0; }
.tv-cols-t td.muted { color: var(--ink-soft); }
.tv-col { display: flex; align-items: center; gap: 10px; }
.tv-col .tp-ic svg { width: 17px; height: 17px; fill: none; stroke: var(--ink-soft); stroke-width: 1.7; }
.tv-note { font-size: 13px; color: var(--ink-soft); margin: 9px 0 0; }
.tv-snap { display: grid; grid-template-columns: 28px auto 1fr 1fr auto; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; font-size: 14px; }
.tv-snap > svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.tv-snap .chip { font-size: 14px; padding: 4px 9px; }
.tv-snapid { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {   /* #1345: two stats a row; a snapshot's facts wrap under its id */
  .tv-stats { grid-template-columns: repeat(2, 1fr); row-gap: 10px; }
  .tv-stat:nth-child(odd) { border-left: 0; }
  .tv-snap { grid-template-columns: 28px auto minmax(0, 1fr); gap: 6px 12px; }
  .tv-snap > * { min-width: 0; overflow-wrap: anywhere; }
  .tv-snap > :nth-child(4) { grid-column: 2; }
}
.tv-meta-fold { margin-top: 16px; font-size: 14px; }
.app .ws .tv-back a { font-family: var(--sans); font-size: 14px; }
.cv-actions .btn svg, .tv-query svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tv-sec-h h2 .count { display: inline-block; font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1; padding: 4px 6px; border-radius: 7px; background: var(--bg-soft); border: 1px solid var(--rule); color: var(--ink); margin-left: 7px; vertical-align: middle; }
.navtree .nav-table .nav-row.on { background: var(--lake); }
.navtree .nav-table .nav-row.on .nav-item, .navtree .nav-table .nav-row.on .nav-item svg { color: #1f5f85; stroke: #1f5f85; font-weight: 500; }
.app .ws details.tv-meta-fold { font-size: 14px; border-top: 0; }
.app .ws details.tv-meta-fold > summary { font-size: 14px; color: var(--ink); font-weight: 400; }
/* Agents (the founder's design, 2026-10-02) */
.ha-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 6px 0 16px; }
.app .ws .ha-head .ws-title { font-size: 30px; display: flex; align-items: center; gap: 12px; margin: 0 0 7px; }
.ha-head .ws-title .count { font-family: var(--sans); font-size: 14px; font-weight: 500; padding: 4px 7px; border-radius: 7px; background: var(--bg-soft); border: 1px solid var(--rule); letter-spacing: 0; }
.ha-head .ws-title .count:empty { display: none; }
.ha-head .ws-sub { font-size: 14px; margin: 0; }
.app .ws .ha-create { font-size: 14px; padding: 9px 16px; }
.ha-attn { display: flex; align-items: center; gap: 13px; background: #fdf3df; border: 1px solid #f1d9a6; border-radius: 10px; padding: 13px 16px; margin: 0 0 16px; }
.ha-attn-ic svg { width: 22px; height: 22px; fill: #f2a516; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; display: block; }
.ha-attn > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ha-attn b { font-size: 14px; font-weight: 600; }
.ha-attn span { font-size: 14px; color: var(--ink-soft); }
.ha-attn .linkbtn { color: var(--accent-deep); font-size: 14px; text-decoration: none; }
.ha-tools { display: grid; grid-template-columns: minmax(0, 1fr) 230px 245px 46px; gap: 13px; margin: 0 0 13px; }
.ha-tools .tbl-search { min-height: 37px; }
.ha-tools .tbl-search input { font-size: 14px; }
.ha-tools select, .ha-tools .csel-btn { font-size: 14px; min-height: 37px; }
.ha-tools .tbl-refresh { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; }
.ha-tools .tbl-refresh svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ha-table { border: 0; border-radius: 0; background: transparent; font-size: 14px; }
.ha-table th { background: transparent; font-weight: 500; font-size: 13px; padding: 7px 10px; }
.ha-table td { background: #fff; padding: 10px; vertical-align: middle; }
.ha-table td + td, .ha-table th + th { border-left: 0; }
.ha-table tr:last-child td { border-bottom: 1px solid var(--rule); }
.ha-table td.muted { color: var(--ink-soft); }
.ha-agent { display: flex; align-items: center; gap: 13px; border: 0; background: none; padding: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.ha-agent > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.ha-agent b { font-weight: 600; font-size: 14px; }
.ha-agent:hover b { color: var(--accent-deep); }
.ha-what { font-size: 13px; color: var(--ink-soft); }
.ha-ic svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ha-more { display: inline-block; margin-left: 7px; padding: 3px 6px; border-radius: 6px; background: var(--bg-soft); border: 1px solid var(--rule); font-size: 13px; color: var(--ink); }
.ha-st { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); }
.ha-st::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); }
.ha-st.attention::before { background: #f29a16; }
.ha-st.paused::before { background: #6f6a63; }
.ha-last { display: grid; grid-template-columns: 22px auto; column-gap: 7px; row-gap: 4px; align-items: center; }
.ha-last::before { content: ""; grid-row: 1; width: 20px; height: 20px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ha-last.bad::before { border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l10.5 19H1.5z' fill='%23f2a516'/%3E%3Cpath d='M12 9v5M12 17.5h.01' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.ha-last.busy::before { background: var(--rule); }
.ha-last b { font-weight: 400; }
.ha-last.bad b { color: var(--accent-deep); }
.ha-last .muted { grid-column: 2; font-size: 13px; color: var(--ink-soft); }
.ha-table .act { width: 110px; text-align: right; white-space: nowrap; }
.ha-run { width: 30px; height: 30px; display: inline-grid; place-items: center; vertical-align: middle; }
.ha-run svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.ha-run:disabled { opacity: .35; }
.ha-table .tmenu { display: inline-block; vertical-align: middle; }
.ha-table .tmenu > summary { opacity: 1; font-size: 17px; width: 28px; height: 28px; color: var(--ink); }
.ha-summary { display: flex; gap: 7px; font-size: 14px; color: var(--ink-soft); margin: 13px 0 0; }
.ha-connect { border-top: 1px solid var(--rule); margin-top: 35px; padding-top: 20px; font-size: 14px; }
.ha-connect p { margin: 0 0 4px; color: var(--ink); }
.ha-connect .linkbtn { color: var(--accent-deep); font-size: 14px; text-decoration: none; }
.ha-allow { margin-top: 26px; }
.ha-empty { padding: 13px 0; }
.ha-what { font-family: var(--sans); }
.ha-table td:nth-child(3), .ha-table td:nth-child(4), .ha-last b, .ha-last .muted { white-space: nowrap; }
.ha-table td:first-child { width: 40%; }
/* Catalogs (the founder's design, 2026-10-02) */
.wh-tools { grid-template-columns: minmax(0, 500px) 216px minmax(0, 1fr) 46px; }
@media (max-width: 900px) {   /* #1345: the search on its own row, the filters and refresh under it */
  .ha-tools, .wh-tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 46px; }
  .ha-tools > :first-child, .wh-tools > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) { .ha-tools, .wh-tools { grid-template-columns: minmax(0, 1fr) 46px; } .ha-tools > :nth-child(2), .wh-tools > :nth-child(2) { grid-column: 1 / -1; } }
.wh-vis { display: inline-flex; align-items: center; gap: 7px; }
.wh-vis svg { width: 19px; height: 19px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wh-table td.num, .wh-table th.num { text-align: right; padding-right: 35px; font-variant-numeric: tabular-nums; }
.wh-table td:first-child { width: 34%; }
.wh-table .ha-ic svg { width: 20px; height: 20px; }
.ha-table td:nth-child(2) { white-space: nowrap; }
/* the Connect dialog (the founder's design, 2026-10-02) */
.ws-dialog.conn-dialog { width: min(708px, 94vw); padding: 24px 24px 19px; position: relative; }
.conn-x { position: absolute; top: 18px; right: 18px; font-size: 19px; }
.app .ws .conn-title, .conn-title { font-family: var(--serif); font-size: 28px; font-weight: 500; letter-spacing: -.02em; margin: 0 0 6px; }
.conn-sub { font-size: 14px; color: var(--ink-soft); margin: 0 0 16px; }
.conn-dialog .cv-conn-tabs button { font-size: 14px; margin-right: 23px; padding: 7px 10px; }
.conn-seg { margin: 19px 0 19px; }
.conn-seg button { min-width: 136px; padding: 7px 13px; font-size: 14px; }
.conn-block h3, .conn-ask h3 { font-family: var(--sans); font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.conn-lede { font-size: 14px; color: var(--ink-soft); margin: 0 0 10px; }
.conn-code { display: flex; align-items: center; gap: 9px; background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 10px; padding: 9px 9px 9px 16px; }
.conn-code pre { flex: 1; margin: 0; font-family: var(--mono); font-size: 14px; color: var(--ink); white-space: pre-wrap; word-break: break-all; background: none; padding: 0; }
.conn-code .btn { flex: none; font-size: 14px; padding: 6px 12px; background: #fff; }
.conn-steps { list-style: none; counter-reset: s; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.conn-steps li { counter-increment: s; display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-soft); flex-wrap: wrap; }
.conn-steps li::before { content: counter(s); flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--bg-soft); color: var(--ink); display: grid; place-items: center; font-size: 14px; }
.conn-steps li b { color: var(--ink); }
.conn-steps .muted { font-size: 12.5px; }
.conn-ask { display: flex; align-items: center; gap: 13px; border-top: 1px solid var(--rule); margin-top: 19px; padding-top: 16px; }
.conn-ask > div { flex: 1; }
.conn-ask .conn-lede { margin: 0; }
.conn-prompt { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; padding: 7px 12px; }
.conn-prompt svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.conn-note { border-top: 1px solid var(--rule); margin: 16px 0 0; padding-top: 13px; font-size: 14px; color: var(--ink-soft); }
.conn-block + .conn-block { margin-top: 17px; }
.conn-fold { margin-top: 9px; }
.conn-foot { display: flex; align-items: center; margin-top: 13px; }
.conn-foot .link { color: var(--accent-deep); font-size: 14px; }
.conn-foot .btn { font-size: 14px; padding: 7px 19px; }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; background: #fff; }
.seg button { border: 0; background: #fff; padding: 6px 10px; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--rule); }
.seg button.on { background: var(--tint); color: var(--accent-deep); font-weight: 500; }
.app .ws .conn-dialog .cv-conn-tabs button, .conn-dialog .tabs.sub.cv-conn-tabs button { font-size: 14px; margin-right: 20px; padding: 7px 10px; }
.conn-steps li { display: grid; grid-template-columns: 34px 1fr; }
.conn-hint { margin: 9px 0 0 36px; font-size: 12.5px; }
.conn-foot .spacer { flex: 1; }
.app .ws .conn-foot .link, .conn-foot .link { font-family: var(--sans); font-size: 14px; }
/* AGENTS.md (the founder's design, 2026-10-02) */
.ws .cathead h1 .cv-ic svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; display: block; margin-right: 4px; }
/* since 2026-10-23 (the founder's redesign): one card, its head inside it */
.cv-amd { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.amd-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.amd-ic { flex: none; width: 36px; height: 36px; border-radius: var(--radius-ctl); display: grid; place-items: center; background: var(--lake); color: #2974a2; }
.amd-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.amd-titles { flex: 1; min-width: 0; }
.app .ws .amd-head h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 2px; }
.amd-meta { font: 400 var(--fs-xs)/1.3 var(--sans); color: var(--muted); }
.amd-sub { margin: 0; }
.amd-buttons { display: flex; gap: 8px; align-items: center; flex: none; }
.amd-buttons .hidden { display: none; }
.amd-more > summary.btn { opacity: 1; width: var(--ctl-h); height: var(--ctl-h); color: var(--ink); }
.amd-more .tmenu-list { top: calc(var(--ctl-h) + 4px); min-width: 200px; }
.tmenu-list .tmenu-danger { color: var(--accent-deep); margin-top: 5px; position: relative; }
.tmenu-list .tmenu-danger::before { content: ""; position: absolute; left: -6px; right: -6px; top: -4px; border-top: 1px solid var(--rule); }
.tmenu-list .tmenu-danger:hover { background: var(--tint); }
#amd-err.on { margin: 12px 18px 0; }
.amd-card { background: none; border: 0; border-radius: 0; }
#amd-view { padding: 20px 24px; }
.amd-raw { margin: 0; padding: 12px 14px; font: 12.5px/1.6 var(--mono); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; background: #fcfaf7; border: 1px solid var(--rule); border-radius: 6px; max-height: 70vh; overflow: auto; }
@media (max-width: 640px) { .amd-head { flex-wrap: wrap; } .amd-buttons { width: 100%; } #amd-view { padding: 16px; } }
.amd-tabs { display: flex; align-items: center; border-bottom: 1px solid var(--rule); padding: 0 16px; }
.amd-tabs.hidden { display: none; }
.amd-tabs button { border: 0; background: none; padding: 12px 4px 10px; margin-right: 22px; font: inherit; font-size: 14px; color: var(--ink-soft); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.amd-tabs button.on { color: var(--accent-deep); border-bottom-color: var(--accent); font-weight: 500; }
.amd-tabs .spacer { flex: 1; }
.md-edit { display: grid; grid-template-columns: 60px minmax(0, 1fr); font-family: var(--mono); font-size: 14px; line-height: 26px; }
.md-edit.hidden { display: none; }
.md-gutter { display: flex; flex-direction: column; align-items: flex-end; padding: 9px 10px 9px 0; border-right: 1px solid var(--rule); color: var(--muted); user-select: none; }
.md-gutter span { height: 26px; }
.md-stack { position: relative; min-width: 0; overflow: hidden; }
.md-hl, .md-stack textarea { margin: 0; padding: 9px 14px; font: inherit; line-height: inherit; white-space: pre; tab-size: 4; border: 0; letter-spacing: 0; }
.md-hl { position: absolute; inset: 0; overflow: hidden; color: var(--ink); background: none; pointer-events: none; }
.md-stack textarea { position: relative; display: block; width: 100%; min-height: 192px; resize: none; overflow-x: auto; overflow-y: hidden; background: transparent; color: transparent; caret-color: var(--ink); outline: none; }
.md-edit:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }   /* the ring the textarea gives up (#1345) */
.md-stack textarea::selection { background: rgba(80, 150, 200, .25); color: transparent; }
.md-h { color: #1f4fbf; font-weight: 700; }
.md-mark { color: #1f4fbf; font-weight: 700; }
.md-code { background: var(--bg-soft); border-radius: 4px; }
.md-b { font-weight: 700; }
.md-a { color: #1f4fbf; }
.amd-preview { padding: 16px 19px; font-size: 14px; min-height: 192px; }
.amd-preview.hidden { display: none; }
.amd-foot { display: flex; align-items: center; border-top: 1px solid var(--rule); padding: 10px 16px; font-size: 13px; }
.amd-foot .spacer { flex: 1; }
.amd-state { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); }
.amd-state.dirty::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #f29a16; }
.amd-note { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 18px; border-top: 1px solid var(--rule); background: var(--bg); font-size: var(--fs-xs); color: var(--muted); }
.amd-note svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.amd-note code { font-size: 11.5px; overflow-wrap: anywhere; }
/* an agent's page and its editor (the founder's design, 2026-10-02) */
#ha-listview.hidden, #ha-detail.hidden, #ha-page.hidden { display: none; }
.navtree .nav-agent .nav-item { padding-left: 9px; }
.nav-dot { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; flex: none; background: #f29a16; }
.nav-dot.paused { background: #6f6a63; }
.ha-dhead, .ha-ehead { align-items: flex-start; margin-top: 4px; }
.app .ws .ha-dhead h1 { font-size: 30px; gap: 12px; }
.ha-dhead h1 .ha-st { font-family: var(--sans); font-size: 14px; font-weight: 400; letter-spacing: 0; }
.ha-dsub { font-size: 14px; color: var(--ink-soft); margin: 6px 0 0; }
.ha-dmeta { display: flex; gap: 7px; font-size: 13px; color: var(--muted); margin: 4px 0 0; font-family: var(--mono); }
.ha-dhead .cv-actions .btn svg, .ha-ehead .cv-actions .btn svg { width: 17px; height: 17px; }
.ha-dhead .cv-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.ws .ha-dtabs { margin-top: 20px; }
.ws .ha-dtabs button { font-size: 14px; margin-right: 32px; padding: 9px 2px; }
.ha-dgrid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 1000px) { .ha-dgrid { grid-template-columns: minmax(0, 1fr); } }
.ha-prompt { white-space: pre-wrap; background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 13px 14px; font-size: 14px; line-height: 1.6; }
.ha-cats { display: flex; flex-direction: column; gap: 4px; }
.ha-cat { display: flex; align-items: center; gap: 9px; border: 0; background: #fff; border: 1px solid var(--rule); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; text-align: left; }
.ha-cat:hover { border-color: var(--accent); color: var(--accent-deep); }
.ha-cat svg, .ha-catrow svg, .ha-toolrow > svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ha-toollist { list-style: none; margin: 0; padding: 0; }
.ha-toollist li { display: flex; flex-direction: column; gap: 2px; padding: 7px 0; border-top: 1px solid var(--rule); font-size: 14px; }
.ha-toollist li:first-child { border-top: 0; }
.ha-set { margin-top: 16px; }
.app .ws .ha-set h2 { font-family: var(--sans); font-size: 15px; font-weight: 600; margin: 0 0 4px; }
/* the editor */
.ha-etitle { display: flex; align-items: center; gap: 16px; }
.ha-etitle .cv-ic svg { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; display: block; }
.app .ws .ha-ehead h1 { font-family: var(--serif); font-size: 30px; font-weight: 500; letter-spacing: -.02em; margin: 0; }
.ha-ehead .ha-dsub { margin: 4px 0 0; font-size: 15px; }
.ha-ehead .cv-actions .btn { font-size: 14px; padding: 9px 17px; }
.ha-egrid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); gap: 16px; margin-top: 17px; align-items: start; }
@media (max-width: 1100px) { .ha-egrid { grid-template-columns: minmax(0, 1fr); } }
.ha-ecol { display: flex; flex-direction: column; gap: 13px; }
.ha-card { margin: 0; padding: 16px 17px; }
.ha-card-h { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; }
.app .ws .ha-card h2 { font-family: var(--serif); font-size: 19px; font-weight: 500; margin: 0; }
.ha-card .field label, .ha-card .field .label { font-size: 14px; font-weight: 500; color: var(--ink); }
.ha-card input[type=text], .ha-card textarea, .ha-card select, .ha-card input[type=time], .ha-card input[type=number], .ha-card input[type=url] { font-size: 14px; padding: 7px 10px; }
.ha-card textarea { min-height: 208px; line-height: 1.55; width: 100%; }
.ha-lede { font-size: 14px; margin: -4px 0 9px; }
.ha-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 9px; margin: 0 0 9px; font-size: 14px; }
.ha-row:has(.hidden) { display: none; }
.ha-row select, .ha-row input { width: 100%; }
.ha-card .ha-preview { font-size: 14px; color: var(--ink-soft); margin-top: 4px; }
.ha-add { color: var(--accent-deep); font-size: 14px; text-decoration: none; }
.ha-catrows { display: flex; flex-direction: column; }
.ha-catrow { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 32px; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.ha-lvl { border: 1px solid var(--rule); border-radius: 8px; padding: 5px 10px; font-size: 14px; background: #fff; }
.ha-card .ha-foot { margin: 9px 0 0; font-size: 13px; }
.ha-card select.hidden { display: none; }
.ha-card > select { margin-top: 7px; width: 100%; }
.ha-toolrow { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--rule); }
.ha-toolrow:first-of-type { border-top: 0; }
.ha-toolrow > p, .ha-toolrow > .ha-tool { grid-column: 2 / -1; margin: 0; }
.ha-toolt { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.ha-toolt .muted { font-size: 14px; }
.ha-chip { font-size: 12.5px; padding: 4px 7px; border-radius: 999px; background: var(--bg-soft); color: var(--ink-soft); display: inline-flex; align-items: center; gap: 4px; }
.ha-chip.ok { background: #e6f4ea; color: #1f6b3d; }
.ha-chip.ok::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2f9e57; }
.ha-switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ha-adv { margin-top: 12px; font-size: 14px; }
.ha-adv > summary { font-size: 14px; color: var(--ink); font-weight: 400; }
.ha-card textarea { font-family: var(--sans); }
.ha-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ha-switch .ha-chip { cursor: pointer; }
.ha-switch:focus-within .ha-chip { outline: 2px solid var(--accent); outline-offset: 2px; }
.app .ws .ha-dtabs button { font-size: 14px; margin-right: 32px; padding: 9px 2px; }
.ha-stat-small b { font-size: 15px; }
.ha-runtable { margin-top: 16px; } .ha-runtable td { vertical-align: top; }
.tv-stat b .tv-zone { display: block; font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 4px; }

/* Home, the founder's design (2026-10-02): four actions, one attention banner, Activity and the agents' runs on the left,
   Usage and the catalogs last opened on the right */
.app .ws .home-head { display: block; margin-bottom: 16px; }
.home-head .ws-sub { margin: 4px 0 0; font-size: 14px; color: var(--ink-soft); }
.home-actions { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0 0 13px; }
.home-act { align-items: center; gap: 10px; padding: 0 14px; height: 44px; border-radius: 6px; background: #fff; color: var(--ink); }
.home-act-ic { width: 20px; height: 20px; background: none; color: var(--ink); border-radius: 0; }
.home-act-ic svg { width: 19px; height: 19px; stroke-width: 1.6; }
.home-act-t { display: block; flex: 1; font-size: 14px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-act-go svg, .home-cat-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.home-act-go { color: var(--ink); flex: none; }
.home-attn { margin: 0 0 14px; border: 1px solid #f3d6ae; background: #fdf3e6; border-radius: 6px; }
.home-attn.bad { border-color: #f2c3ae; background: #fdeee6; }
.home-attn-row { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-size: 14px; }
.home-attn-ic svg { width: 18px; height: 18px; fill: #f29a16; stroke: #fff; stroke-width: 1.6; display: block; }
.home-attn-ic svg path:first-child { stroke: #f29a16; stroke-linejoin: round; }
.home-attn.bad .home-attn-ic svg { fill: var(--accent); } .home-attn.bad .home-attn-ic svg path:first-child { stroke: var(--accent); }
.home-attn-n { color: #c25e00; font-weight: 500; font-size: 14px; padding-right: 13px; border-right: 1px solid #e9c48f; white-space: nowrap; }
.home-attn.bad .home-attn-n { color: var(--accent-deep); border-right-color: #ecb39b; }
.home-attn-what { flex: 1; min-width: 0; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-attn-what b, .home-attn-list b { font-weight: 400; }
.home-attn-dot { margin: 0 5px; color: var(--ink-soft); }
.home-attn-list { list-style: none; margin: 0; padding: 4px 16px 9px 42px; border-top: 1px solid #f3d6ae; }
.home-attn-list li { padding: 4px 0; font-size: 13px; }
.home-attn-list li.bad b { color: var(--accent-deep); }
.home-attn-list button { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.home-attn-list button:hover { text-decoration: underline; }
.home-more { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; font: inherit; font-size: 14px; color: var(--accent-deep); cursor: pointer; white-space: nowrap; }
.home-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-more:hover { text-decoration: underline; }
.home-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 414px); gap: 13px; }
.home-main, .home-side { display: flex; flex-direction: column; gap: 13px; }
.app .ws .home-card { margin: 0; padding: 14px 16px; border-radius: 6px; }
.app .ws .home-card-h { margin: 0 0 4px; padding: 0 0 10px; border-bottom: 1px solid var(--rule); }
.app .ws .home-card-h h2 { font-family: var(--sans); font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.home-card-tools { display: flex; gap: 9px; align-items: center; }
.home-period .csel-btn { min-height: 30px; padding: 4px 9px; gap: 10px; font-size: 14px; border-radius: 4px; }
.home-iconbtn { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 4px; background: #fff; cursor: pointer; color: var(--ink); }
.home-iconbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-empty { margin: 12px 0 4px; }
.home-foot { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 12.5px; }
.home-foot svg { width: 17px; height: 17px; fill: none; stroke: var(--ink-soft); stroke-width: 1.6; stroke-linecap: round; }
.home-evs { list-style: none; margin: 0; padding: 0; }
.home-evs li + li { border-top: 1px solid var(--rule); }
.home-ev { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 0; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; }
button.home-ev { cursor: pointer; }
button.home-ev:hover .home-ev-t b { text-decoration: underline; }
.home-ev-ic svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; display: block; }
.home-ev-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.home-ev-t b { font-weight: 600; }
.home-more-row { margin: 7px 0 0; }
.home-ev-t > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.home-ev-c { color: var(--ink-soft); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-ev-w { flex: none; color: var(--ink-soft); font-size: 14px; font-variant-numeric: tabular-nums; }
.home-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.home-dot.bad { background: var(--accent); } .home-dot.warn { background: #f29a16; } .home-dot.busy { background: #9a948d; }
.home-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0; border: 0; }
.app .ws .home-table th { text-align: left; font-weight: 400; color: var(--ink-soft); font-size: 13px; padding: 7px 0 6px; background: none; border: 0; border-bottom: 1px solid var(--rule); }
.app .ws .home-table td { padding: 6px 0; border: 0; border-bottom: 1px solid var(--rule); background: none; }
.home-table tr:last-child td { border-bottom: 0; }
.home-table td .home-dot { margin-right: 10px; }
.home-name { display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; font: inherit; color: var(--ink); cursor: pointer; }
.home-name svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.home-name:hover span { text-decoration: underline; }
.home-us > .home-u { padding: 13px 0; }
.home-us > .home-u + .home-u { border-top: 1px solid var(--rule); }
.home-u-h { display: flex; justify-content: space-between; align-items: baseline; gap: 9px; font-size: 14px; }
.home-u-f { white-space: nowrap; }
.home-u-f b { font-weight: 400; }
.home-u-f .muted { color: var(--ink-soft); }
.home-u-bar { display: flex; align-items: center; gap: 12px; margin: 9px 0 0; }
.home-u-track { flex: 1; height: 12px; border-radius: 6px; background: #f1ede8; overflow: hidden; }
.home-u-track i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #f07b2a, var(--accent)); }
.home-u.public .home-u-track i { background: #5d6673; }
.home-u.warn .home-u-track i { background: #f29a16; } .home-u.over .home-u-track i { background: var(--accent-deep); }
.home-u-p { flex: none; width: 34px; text-align: right; font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.home-rcats { list-style: none; margin: 0; padding: 0; }
.home-rcats li + li { border-top: 1px solid var(--rule); }
.home-rcats button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; text-align: left; }
.home-rcats button > svg:first-child { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.5; flex: none; }
.home-rcats b { font-weight: 400; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-rcats .muted { color: var(--ink-soft); font-size: 14px; white-space: nowrap; }
.home-rcats button:hover b { text-decoration: underline; }
@media (max-width: 1100px) { .home-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .home-attn-row { flex-wrap: wrap; padding: 9px 12px; } .home-attn-n { border-right: 0; padding-right: 0; } .home-attn-what { flex-basis: 100%; white-space: normal; } }
/* the sidebar's Recent (Home, SQL, Settings): items the size of the menu's, as the founder's design draws them */
.navtree .nav-recent .nav-item { gap: 10px; padding: 5px 9px; font-size: 14px; }
.navtree .nav-recent .nav-item svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .app .ws .home-card { padding: 12px; }
  .app .ws .home-card-h h2 { font-size: 17px; }
  .app .ws .home-card-h { flex-wrap: wrap; gap: 7px; }
  .home-ev { gap: 7px; }
  .home-ev-ic { display: none; }
  .home-ev-t { font-size: 13px; }
  .home-ev-w { font-size: 13px; }
  .home-table, .home-name { font-size: 14px; }
  .home-name { gap: 6px; } .home-name svg { display: none; }
  .home-table td .home-dot { margin-right: 4px; }
  .home-actions { grid-template-columns: 1fr 1fr; gap: 7px; }
  .home-act { height: 40px; padding: 0 10px; gap: 8px; } .home-act-t { font-size: 14px; } .home-act-go { display: none; }
}
.ha-card .csel-btn { min-height: 34px; padding: 6px 12px; font-size: 14px; }
@media (max-width: 640px) { .tv-cols-t { display: block; overflow-x: auto; } }
/* a table's Map view (tablemap.js, 2026-10-02): Table | Map on the Preview tab of a table with a geometry column */
.tv-seg { gap: 6px; margin: 0 0 10px; }
.tv-seg .btn[aria-pressed="true"] { border-color: var(--accent-deep); color: var(--accent-deep); background: var(--tint); }
.tv-map .tm-status { margin: 0 0 8px; }
.tv-map .tm-note:empty { display: none; }
.tv-map .tm-note { margin: 8px 0 0; max-width: 110ch; }
.tm-map { position: relative; height: min(68vh, 640px); background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }

/* Three voices (founder, 2026-10-02): the platform speaks in Inter; code (SQL, commands, JSON, Python) is JetBrains Mono
   on the SQL editor's light surface with its colours (code_rules.js, code_dom.js); what a person or an agent wrote
   (instructions, AGENTS.md, an agent's answer and emails) was set in Newsreader; since 2026-10-23 only a Markdown
   document's headings are (md.css), its text is Inter like the rest. */
.ws pre.code, .ws-dialog pre.code { background: #fcfaf7; color: var(--ink); border: 1px solid #e5ded4; border-radius: 6px; padding: 10px 12px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; overflow-x: auto; max-width: 100%; }
.ws pre.code.wrap { white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; }
.conn-code pre.code { border: 0; background: none; padding: 0; font-size: 14px; }
.tk-kw { color: #c23c14; font-weight: 600; }
.tk-type, .tk-key, .tk-flag { color: #2974a2; }
.tk-str { color: #2a7d4f; }
.tk-num { color: #8a5a00; }
.tk-com { color: #77706a; font-style: italic; }
.tk-fn { color: #6b3fa0; }
.tk-op { color: #4f4a44; }
.sq-query > summary { cursor: pointer; }
.sq-query > pre.code { margin: 8px 0 0; max-height: 420px; overflow: auto; }
/* a scheduled SQL sink made and edited on the page (2026-10-23): the editor, the schedule's fields, the preview */
.sq-new { margin-top: 12px; }
.sq-edit { margin: 8px 0; }
.sq-editor { position: relative; margin: 8px 0; }
.sq-editor .cm-host .cm-editor { min-height: 160px; }
.sq-editor .cm-host .cm-scroller { max-height: 50vh; }
.sq-form { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin: 8px 0; }
.sq-form label { display: flex; flex-direction: column; gap: 2px; flex: 1 1 140px; min-width: 0; }
.sq-form label[hidden] { display: none; }
.sq-form input, .sq-form select { min-width: 0; width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid #d9d2c8; border-radius: 8px; background: #fff; color: var(--ink); }
.sq-check { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.sq-engine { font-weight: 600; color: var(--ink-soft); }
.sq-saved { color: #1f6b3d; }
.sq-fits.ok { color: #1f6b3d; }
.sq-preview table.sq-cols { margin: 6px 0; }
.sq-preview .sq-rows { max-height: 320px; overflow: auto; margin: 6px 0; }
.ha-sql { margin: 6px 0 4px; font-size: 12px; }
code.ha-what { font-family: var(--mono); font-size: 12px; display: block; margin: 4px 0; color: var(--ink-soft); overflow-wrap: anywhere; }
/* since 2026-10-23 (the founder): authored text is set like the UI, in the sans; only a Markdown document's headings take
   the serif (md.css, which every page that renders Markdown links) */
.authored { font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.ws .ha-prompt p { margin: 0 0 10px; }
.authored code { font-family: var(--mono); font-size: 12.5px; background: var(--bg-soft); border-radius: 4px; padding: 1px 5px; overflow-wrap: anywhere; }
.ha-card textarea.authored { font-family: var(--sans); font-size: 14px; line-height: 1.6; }
.ha-prompt.authored { white-space: normal; padding: 14px 18px; }
.ha-out.authored { white-space: pre-wrap; }

/* Home's "From the lakehouse" (founder's design, 2026-10-02): the newest post with its picture, the next one as a line */
.home-post { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: center; padding: 12px 0 14px; }
.home-post-img { display: block; border-radius: 6px; background: #eaf2f8; overflow: hidden; aspect-ratio: 16 / 9; border: 0; }
.home-post-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.home-post-t { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.home-post-title { font-family: var(--serif); font-size: 24px; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); text-decoration: none; border: 0; }
.home-post-title:hover { text-decoration: underline; }
.home-post-sum { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.45; }
a.home-more { text-decoration: none; border: 0; }
.home-post-next { display: flex; align-items: center; gap: 14px; padding: 12px 0 2px; border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.home-post-next > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.home-post-next b { font-weight: 500; font-size: 14px; }
.home-post-next .muted { font-size: 13px; color: var(--ink-soft); }
.home-post-next:hover b { text-decoration: underline; }
.home-post-next > svg, .home-more svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.home-post-cat { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.home-pub { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-deep); border: 1px solid var(--accent); border-radius: 4px; padding: 2px 6px; }
@media (max-width: 640px) { .home-post { grid-template-columns: 1fr; } .home-post-title { font-size: 21px; } }
/* the blog under the catalogs (an organisation in use, home_rules.js): one column, the picture above the words */
.home-side .home-post { grid-template-columns: 1fr; gap: 12px; }
.home-side .home-post-title { font-size: 20px; }
.home-evs .home-ev { padding: 8px 0; }
.home-ev-t { gap: 1px; }

/* A wait where its data will land (founder's design, 2026-10-02; loading_dom.js): spinner, what loads, the seconds,
   Cancel, and a skeleton in the data's shape. The caller's box draws the frame. */
.ld { padding: 2px 0; }
.ld-h { display: flex; align-items: center; gap: 12px; }
.ld-spin { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid #f1ddd3; border-top-color: var(--accent); border-right-color: var(--accent); animation: ld-spin .8s linear infinite; }
.ld-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ld-title { font-weight: 600; font-size: 14px; color: var(--ink); }
.ld-sub { font-size: 12.5px; color: var(--ink-soft); }
.ld-sub:empty { display: none; }
.ld-time { margin-left: auto; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ld-cancel { flex: none; }
.ld-slow { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.ld-slow:empty { display: none; }
.ld i { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #ece8e3 0%, #f6f3ef 40%, #ece8e3 80%); background-size: 300% 100%; animation: ld-shimmer 1.4s ease-in-out infinite; }
.ld-table { display: grid; margin: 14px 0 0; border-top: 1px solid var(--rule); }
.ld-cell { padding: 11px 12px; border-bottom: 1px solid var(--rule); }
.ld-cell.ld-head { background: #faf8f5; }
.ld-cell.ld-head i { background-color: #e6e1db; }
.ld-map { position: relative; height: 340px; margin: 14px 0 0; border-radius: 6px; overflow: hidden; background: #eef0ed; }
.ld-map i { position: absolute; height: auto; border-radius: 40%; opacity: .7; }
.ld-map-a { left: 8%; top: 18%; width: 34%; aspect-ratio: 1.6; }
.ld-map-b { left: 52%; top: 40%; width: 30%; aspect-ratio: 1.3; }
.ld-map-c { left: 26%; top: 62%; width: 20%; aspect-ratio: 1.8; }
.ld-lines { margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; }
.ld-compact { padding: 6px 0; }
.ld-compact .ld-spin { width: 16px; height: 16px; border-width: 2px; }
.ld-compact .ld-title { font-weight: 400; font-size: 13px; color: var(--ink-soft); }
.ld-rows { margin: 8px 0 0; }
.ld-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--rule); }
.ld-row .ld-dot { width: 16px; height: 16px; border-radius: 4px; flex: none; }
.ld-row .ld-end { margin-left: auto; }
.navtree .ld-rows .ld-row { border-top: 0; padding: 6px 0; }
@keyframes ld-spin { to { transform: rotate(360deg); } }
@keyframes ld-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .ld-spin { animation-duration: 3s; } .ld i { animation: none; } }
.ld-row .ld-bar { width: 40%; }
.ld-row .ld-end { width: 10%; }
/* a value the Preview did not bring whole: a large geometry (type and size), cut text */
.tv-grid td.pv-heavy { color: var(--ink-soft); font-style: italic; white-space: nowrap; }
.tv-grid td.pv-cut { color: var(--ink); }
/* Settings · Billing (platform/docs/billing.md) */
.bill-status { font-weight: 600; margin: 4px 0 0; }
.bill-status.ok { color: var(--ok-text); }
.bill-status.warn { color: #8a5a00; }
.bill-status.over { color: #b3261e; }
#billing-box .box + .box { margin-top: 14px; }

/* public catalogs (2026-10-10): the sidebar's Public group (a globe: not the organisation's), the explorer's node and the
   read-only page of a public catalog */
.navtree .nav-pubh { display: flex; align-items: center; gap: 4px; margin-top: 14px; padding: 6px 4px 4px 9px; border-top: 1px solid var(--rule); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.navtree .nav-pubh span { flex: 1; }
.navtree .nav-pubh .ws-iconbtn svg { width: 17px; height: 17px; }
.navtree .nav-pub > .nav-row .nav-item svg { stroke: #2974a2; }
.ws-explorer #tree-wh li.pub .catname::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232974a2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cellipse cx='12' cy='12' rx='4' ry='9'/%3E%3Cpath d='M3 12h18'/%3E%3C/svg%3E"); }
#wh-pubview .pv-head h1 { display: flex; align-items: center; gap: 10px; }
#wh-pubview .pv-head h1 svg { width: 26px; height: 26px; flex: none; fill: none; stroke: #2974a2; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#wh-pubview .pv-sub { margin: 6px 0 0; color: var(--ink-soft); font-size: 14px; }
#wh-pubview .pv-sub .chip { margin-right: 6px; }
#wh-pubview .cv-actions .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
#wh-pubview .box { margin-top: 16px; }
#wh-pubview .tbl-table { width: 100%; }
#wh-pubview .tbl-table .num { text-align: right; font-variant-numeric: tabular-nums; }
#wh-pubview .pv-cols td.mono { font-family: var(--mono); font-size: 13px; }
#wh-pubview .tv-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; vertical-align: -3px; margin-right: 4px; }
@media (max-width: 640px) { #wh-pubview .tbl-table th:nth-child(4), #wh-pubview .tbl-table td:nth-child(4), #wh-pubview .tbl-table th:nth-child(5), #wh-pubview .tbl-table td:nth-child(5) { display: none; } }
#wh-pubview .cathead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
#wh-pubview .tp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
#wh-pubview .tp-actions .btn { flex: none; width: auto; }
#pub-dialog #pub-ref { width: 100%; box-sizing: border-box; }
#wh-pubview button.tbl-link { border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit; }
/* Grant access with no one left to grant (2026-10-10): the reason, and the two ways forward */
.gr-none { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; }
.gr-none-links { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
#st-dialog .imp-adv { margin: 0 0 12px; }
#st-dialog { width: min(520px, calc(100vw - 32px)); }
/* the page's own confirm (app.js askConfirm, 2026-10-10): the question, its consequence, the action named on the button */
.ask-dialog { width: min(440px, calc(100vw - 32px)); }
.ask-dialog h2 { font-family: var(--sans); font-weight: 600; font-size: 16px; line-height: 1.35; margin: 0 0 8px; color: var(--ink); }
.ask-dialog p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.ask-dialog .dlg-foot { margin-top: 20px; }
.att-dialog .dlg-foot .status { margin-right: auto; }
.att-manual { margin: 0 0 14px; }
.att-manual .form-row { margin-top: 10px; }
/* an empty catalog's Overview starts with the way in (2026-10-10) */
.cv-start { margin: 0 0 16px; }
.cv-start .tbl-dropzone { margin: 0 0 8px; }
.cv-start-more { margin: 0; }
/* the Files section's uploads (2026-10-10): one row per file, its progress, done or the reason it failed */
.files-actions { margin-left: auto; margin-right: 8px; }
.files-uploads { list-style: none; margin: 0 0 12px; padding: 0; border: 1px solid var(--rule); border-radius: 8px; background: #fff; }
.files-up { display: grid; grid-template-columns: minmax(0, 1fr) auto 140px minmax(0, 1.2fr); gap: 12px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--rule); font-size: 12.5px; }
.files-up:last-child { border-bottom: 0; }
.files-up-name { font-family: var(--mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-up-bar { height: 6px; border-radius: 3px; background: var(--bg-soft); overflow: hidden; }
.files-up-fill { display: block; height: 100%; width: 0; background: var(--action); transition: width .2s; }
.files-up.done .files-up-fill { background: var(--ok); }
.files-up.failed .files-up-fill { background: var(--accent); width: 100% !important; opacity: .35; }
.files-up.failed .files-up-state { color: var(--accent-deep); }
.files-table td.act { white-space: nowrap; }
.files-table .files-del { margin-left: 6px; color: var(--accent-deep); }
@media (max-width: 640px) { .files-up { grid-template-columns: minmax(0, 1fr) auto; } .files-up-bar, .files-up-state { grid-column: 1 / -1; } }
.files-up-ic { transform: rotate(180deg); }
.files-empty .tbl-dropzone { margin-bottom: 10px; }
/* the Files explorer (2026-10-10): the filter beside the path, a checkbox column, the selection bar, sortable headers */
.files-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.files-bar .files-crumbs { margin: 0; flex: 1 1 auto; min-width: 0; }
.files-filter { flex: 0 1 240px; }
.files-table th.files-pick, .files-table td.files-pick { width: 28px; padding-right: 0; }
.files-table td.files-pick input, .files-table th.files-pick input { margin: 0; }
.files-table tr.picked td { background: var(--tint); }
.files-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.files-sort.on::after { content: " \2191"; color: var(--muted); }
.files-sort.on.desc::after { content: " \2193"; }
.files-selbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; margin: 0 0 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--tint); font-size: 12.5px; }
.files-sel-n { font-weight: 600; margin-right: 6px; }
.files-sel-clear { margin-left: auto; }
.files-up-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--rule); font-size: 12.5px; font-weight: 600; background: var(--bg-soft); }
.files-nomatch { margin: 12px 0; }
.files-table td.act > * { vertical-align: middle; }
.files-table td.act .tmenu { display: inline-block; margin-left: 4px; }
.files-table .tmenu > summary { opacity: .55; }
.files-table tr:hover .tmenu > summary, .files-table .tmenu[open] > summary { opacity: 1; }
.files-table .tmenu-list button { padding: 7px 10px; border-radius: 6px; font-size: 12.5px; text-align: left; background: none; border: 0; cursor: pointer; }
.files-table .tmenu-list button:hover { background: var(--bg-soft); }
.results-more { display: flex; align-items: center; gap: 8px; padding: 10px 2px; }
.results-more:empty { display: none; }

/* Settings › Enterprise, the organisation admin console (enterprise.js, platform/docs/admin-console.md, 2026-10-16) and the
   scope of a catalog grant: 14 px text, 34 px controls (the density targets) */
#tab-enterprise .box p, #tab-enterprise .box td { font-size: 14px; }
#tab-enterprise .box .small, #tab-enterprise .box td small { font-size: 12.5px; }
#tab-enterprise .field input, #tab-enterprise .field select { height: 34px; padding: 0 10px; font-size: 13px; }
#tab-enterprise h3 { font-size: 14px; margin: 18px 0 8px; }
#tab-enterprise .form-row { align-items: start; }
#tab-enterprise .field.ent-btn { align-self: end; }
.ent-sa-btns { flex-wrap: nowrap; gap: 8px; }
.ent-hint { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.ent-actions { margin: 4px 0 0; }
.ent-url { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.ent-url code { font-family: var(--mono); font-size: 12.5px; background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 6px; padding: 5px 9px; word-break: break-all; }
.ent-url code.secret { background: #fff; }
.ent-secret p { margin: 0 0 8px; }
.ent-table { width: 100%; margin: 0 0 12px; }
.ent-table td.act { text-align: right; white-space: nowrap; }
.ent-table tr.muted td { color: var(--muted); }
.ent-id { color: var(--muted); }
.ent-warn { color: var(--accent-deep); }
.chip.ent-warn { background: var(--tint); margin-left: 8px; }
.ent-inline { margin: 8px 0 0; }
.ent-sas { display: grid; gap: 10px; margin: 0 0 14px; }
.ent-sa { border: 1px solid var(--rule); border-radius: 8px; padding: 12px 14px; }
.ent-sa.muted { background: var(--bg-soft); }
.ent-sa-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ent-sa-head p { margin: 4px 0 0; }
.ent-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.ent-chips .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; }
.chip-x { border: 0; background: none; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; color: inherit; }
.perm-table tr.perm-scoped td { background: var(--bg-soft); padding-top: 6px; padding-bottom: 6px; }
.perm-table tr.perm-scoped td:first-child { padding-left: 62px; }
.perm-scope code { font-family: var(--mono); font-size: 12px; }
.ent-records { margin: 8px 0; }
.ent-record { background: #fff; border: 1px solid var(--rule); border-radius: 6px; padding: 8px 10px; margin: 0 0 8px; }
.ent-record code { font-family: var(--mono); font-size: 12px; word-break: break-all; }
.chip.perm-none { background: var(--bg-soft); color: var(--muted); font-size: 12.5px; padding: 6px 12px; }
.tv-clustering p { margin: 4px 0; }

/* ── The design system (2026-10-23, the founder's redesign; PR 1 of 6: tokens, shell, type, buttons, badges) ──
   One set of values for every workspace page. These rules come last on purpose: they are the values, and the older
   rules above that they override are pruned tab by tab in the PRs that follow (Overview, Tables and Files, Feeds,
   Agents and Access, Settings). Type (the founder, 2026-10-23): display type is the serif (the logo, a catalog's name in
   its page header, a major page title, a Markdown document's headings); interface type is the sans (navigation, tabs, card
   and panel headings, labels, tables, buttons); code, SQL, identifiers and technical values are mono. */
/* the tokens (surface, control border, radii, control heights, type sizes) live in tokens.css, linked by this page and
   a public catalog's page */

/* headings */
/* (0,4,x): above the older `.app .ws .cathead h1` and `.app .ws .ha-head .ws-title` */
.app .ws .ws-content .cathead h1, .app .ws .ws-content .ws-title { font-family: var(--serif); font-size: var(--fs-title); font-weight: 500; letter-spacing: -.025em; line-height: 1.1; }
.ws-content h2:not(.md h2):not(.card-head h2) { font-family: var(--sans) !important; font-size: var(--fs-h) !important; font-weight: 600 !important; letter-spacing: 0; line-height: 1.3; }
.ws-content .card-head h2 { font-family: var(--sans) !important; font-size: var(--fs-card-h) !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 1.3; }
.ws-content :is(.ws-sub, .amd-sub, .perm-head .ws-sub) { font-size: var(--fs-sm); color: var(--ink-soft); }

/* counts beside a heading */
.ws-content .count { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; font: 600 var(--fs-xs)/1 var(--sans); color: var(--ink-soft); background: var(--bg-soft); border: 1px solid var(--rule); border-radius: var(--radius-badge); vertical-align: middle; }

/* buttons: two heights, one radius, one type size each; ghost buttons carry the control border, not ink */
.ws-content .btn:is(.sm, .xs) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 0; height: var(--ctl-h); padding: 0 14px; font: 500 var(--fs-body)/1 var(--sans); border-radius: var(--radius-ctl); white-space: nowrap; box-sizing: border-box; }
.ws-content .btn.xs { height: var(--ctl-h-sm); padding: 0 10px; font-size: var(--fs-sm); }
.ws-content .btn:is(.sm, .xs) svg { width: 16px; height: 16px; flex: none; margin: 0; }
.ws-content .btn.ghost:is(.sm, .xs) { background: var(--surface); border: 1px solid var(--rule-strong); color: var(--ink); }
.ws-content .btn.ghost:is(.sm, .xs):hover:not(:disabled) { background: var(--bg-soft); border-color: var(--muted); }
.ws-content .btn.danger:is(.sm, .xs):not(:disabled) { background: var(--surface); border: 1px solid #efb9a6; color: var(--accent-deep); }
.ws-content .btn.danger:is(.sm, .xs):hover:not(:disabled) { background: var(--tint); border-color: var(--accent); }
/* an icon-only button (Refresh): square, the icon centred */
.ws-content .btn.tbl-refresh { width: var(--ctl-h); padding: 0; }
.ws-content .btn.tbl-refresh svg { margin: 0; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* badges: one shape for Private, a permission, a state */
.ws-content :is(.ws-vis, .chip, .lvl.role) { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; font: 500 var(--fs-xs)/1 var(--sans); letter-spacing: 0; text-transform: none; border-radius: var(--radius-badge); box-sizing: border-box; }
.ws-content :is(.ws-vis, .chip) svg { width: 13px; height: 13px; }

/* the catalog's head: the name, Private, your level on one line; the meta line under it; Query, Connect, ⋯ */
.app .ws .ws-content .cathead h1 { gap: 10px; margin: 0 0 6px; }
.ws .cathead h1 .ws-vis { height: 22px; padding: 0 8px; font-size: var(--fs-xs); }
.ws .cathead h1 .lvl.cv-level { font-size: var(--fs-body); color: var(--ink-soft); }
.ws .cathead #cv-meta { font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; }

/* the sidebar: a long name ends in an ellipsis inside the column instead of running past it */
.usermenu, .usermenu > summary { min-width: 0; }

/* Lists (PR 3 of the redesign, 2026-10-23): Tables and Files as one kind of panel. A head (the title, its count, the
   actions, Import or Upload the primary one), a toolbar (search, a filter, Refresh at its end), the list, a summary
   line. Dense on purpose (the founder: a technical product, hierarchy over padding): 13px rows about 36px tall, one
   header style, the name the row's one link, identifiers and values in mono. */
.list-panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 16px 12px; }
.list-panel > .tbl-head { margin: 0 0 10px; gap: 12px; flex-wrap: wrap; }
.list-panel .tbl-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.ws .list-panel > .tbl-head + details.fold.card-more { margin: -4px 0 10px; }
.list-panel .tbl-tools, .list-panel .files-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.list-panel .tbl-search { flex: 1 1 260px; }
.list-panel .tbl-ns { flex: 0 1 240px; }
.list-panel .files-bar .files-crumbs { flex: 1 1 200px; margin: 0; }
.list-panel .files-filter { flex: 0 1 240px; }
.list-panel :is(.tbl-search, .tbl-ns) { box-sizing: border-box; height: var(--ctl-h); min-height: 0; padding: 0 10px; gap: 8px; border-color: var(--rule-strong); border-radius: var(--radius-ctl); }
.list-panel :is(.tbl-search, .tbl-ns) svg { width: 15px; height: 15px; }
.list-panel :is(.tbl-search input, .tbl-ns select, .tbl-ns .csel-btn) { font-size: var(--fs-body); }
.list-panel :is(.tbl-summary, .files-foot) { margin: 10px 0 0; font-size: var(--fs-xs); color: var(--muted); }
.list-panel .files-foot .small { font-size: var(--fs-xs); }

table.dlist { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--rule); border-radius: var(--radius-ctl); overflow: hidden; background: var(--surface); font-size: var(--fs-body); }
table.dlist th { text-align: left; font: 600 var(--fs-xs)/1.3 var(--sans); color: var(--ink-soft); background: var(--bg-soft); padding: 7px 12px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
table.dlist th .files-sort { font: inherit; color: inherit; }
table.dlist td { padding: 7px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; background: transparent; line-height: 20px; }
table.dlist :is(td + td, th + th) { border-left: 0; }
table.dlist tr:last-child td { border-bottom: 0; }
table.dlist tbody tr:hover td { background: #fcfaf7; }
table.dlist tbody tr.picked td { background: var(--tint); }
table.dlist .act { width: 1%; white-space: nowrap; text-align: right; }
table.dlist td.mono { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
table.dlist :is(button.tbl-name, button.tbl-link) { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; font: 600 var(--fs-body)/1.35 var(--sans); color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; }
table.dlist button.tbl-link { word-break: normal; overflow-wrap: break-word; }   /* a name breaks only when it alone is wider than the column (it broke mid-word at 400 px) */
table.dlist td.mono { white-space: nowrap; }
table.dlist :is(button.tbl-name, button.tbl-link):hover { color: var(--accent-deep); text-decoration: underline; }
table.dlist .tbl-ic { width: 16px; height: 16px; }
table.dlist .files-ic { width: 18px; height: 18px; }
table.dlist .files-thumb { width: 44px; padding: 4px 6px 4px 10px; }
table.dlist td.files-thumb img { width: 36px; height: 28px; }
table.dlist .files-hint { font-size: 11.5px; margin-top: 1px; }
table.dlist .tmenu { display: inline-block; vertical-align: middle; }
table.dlist .tmenu > summary { opacity: .55; width: 26px; height: 26px; font-size: 16px; color: var(--ink); }
table.dlist tr:hover .tmenu > summary, table.dlist .tmenu[open] > summary, table.dlist .tmenu > summary:focus-visible { opacity: 1; }
@media (hover: none) { table.dlist .tmenu > summary { opacity: 1; } }


/* Agents and Access (PR 5 of the redesign, 2026-10-23): the list panel and the dense list of PR 3; an empty state when a
   list was read and holds nothing (an icon, what is missing, the one way to change it); the permission rows denser */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 28px 16px 24px; border: 1px dashed var(--rule-strong); border-radius: var(--radius-ctl); }
.empty-ic { width: 40px; height: 40px; border-radius: var(--radius); display: grid; place-items: center; background: #eaf6ee; color: #1f6b3d; margin-bottom: 4px; }
.empty-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.empty-h { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.empty-p { margin: 0 0 8px; max-width: 52ch; font-size: var(--fs-xs); color: var(--ink-soft); }
.list-panel .cag-intro { margin: -4px 0 10px; font-size: var(--fs-xs); }
.list-panel .perm-head { margin: 0 0 10px; }
.list-panel .perm-head h2 { margin: 0 0 2px !important; }
.list-panel .perm-note { padding: 8px 12px; margin: 0 0 10px; font-size: var(--fs-xs); }
table.dlist.perm-table .perm-who { gap: 10px; }
table.dlist.perm-table .perm-who .ws-avatar { width: 28px; height: 28px; font-size: 10.5px; }
table.dlist.perm-table .perm-who b { font-size: var(--fs-body); }
table.dlist.perm-table .perm-who small { font-size: 11.5px; }
.list-panel .perm-foot { margin: 10px 0 0; font-size: var(--fs-xs); }
.perm-links { margin: 10px 0 0; font-size: var(--fs-xs); }
/* on a phone the permissions list scrolls in its own box, as Tables and Files do (it pushed the page sideways at 400px) */
#grants-list { overflow-x: auto; }
table.dlist.perm-table .chip { white-space: nowrap; }

/* Settings and the consistency pass (PR 6 of the redesign, 2026-10-23). Every workspace card has the list panel's
   spacing (it was 22-24px around, the widest of the page); a card's head is denser; Details and Delete are folds that
   start closed (their head is the summary, a chevron says so), and Delete sits apart under "Danger zone". */
.ws .box.card { padding: 16px 18px; border-radius: var(--radius); margin: 0 0 12px; }
.ws .ws-content .card-head { gap: 12px; padding-bottom: 12px; margin-bottom: 14px; }
.ws .ws-content .card-ic { width: 32px; height: 32px; border-radius: var(--radius-ctl); }
.ws .ws-content .card-ic svg { width: 17px; height: 17px; }
.ws .ws-content .card-head p { font-size: var(--fs-xs); }
.fold-card > summary.card-head { list-style: none; cursor: pointer; }
.fold-card > summary.card-head::-webkit-details-marker { display: none; }
.fold-card > summary.card-head:hover h2 { color: var(--accent-deep); }
.fold-card .fold-chev { flex: none; margin-left: auto; width: 18px; height: 18px; fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.fold-card[open] .fold-chev { transform: rotate(180deg); }
.ws .ws-content .fold-card:not([open]) > summary.card-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.danger-label { margin: 22px 0 8px; font: 600 var(--fs-xs)/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-deep); }
.ws .box.card.danger-zone { border-color: #f3c3b1; }
@media (prefers-reduced-motion: reduce) { .fold-card .fold-chev { transition: none; } }
/* text inside a card at the page's sizes (the site's .small is 14px and a card's loose paragraphs were 15px) */
.ws .ws-content .box.card :is(.small, .ws-hint) { font-size: var(--fs-sm); }
.ws .ws-content .box.card > p:not(.ws-warn), .ws .ws-content .box.card [id$="-state"] p { font-size: var(--fs-body); }
/* the Catalogs list: the list panel and the dense list of a catalog's Tables (shared styles only; the page keeps its
   title, its description line per catalog and its columns) */
.wh-panel .wh-tools { margin: 0 0 10px; }
.wh-panel .wh-tools :is(.tbl-search, .csel-btn, select) { height: var(--ctl-h); min-height: 0; box-sizing: border-box; font-size: var(--fs-body); border-color: var(--rule-strong); border-radius: var(--radius-ctl); }
.wh-panel .ha-summary { margin: 10px 0 0; font-size: var(--fs-xs); color: var(--muted); }
table.dlist.wh-table .ha-agent { display: flex; align-items: flex-start; gap: 10px; text-align: left; }
table.dlist.wh-table .ha-agent b { font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
table.dlist.wh-table .ha-agent:hover b { color: var(--accent-deep); text-decoration: underline; }
table.dlist.wh-table .ha-what { display: block; font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; margin-top: 1px; }
table.dlist.wh-table .ha-ic svg { width: 16px; height: 16px; }
table.dlist.wh-table .wh-vis { font-size: var(--fs-body); }
table.dlist.wh-table td.num { font-variant-numeric: tabular-nums; }
/* Feeds (PR 4 of the redesign, 2026-10-23): a card per feed. The head: its kind's icon (a push feed, scheduled SQL), the
   name and its table, a line of what is happening, the state (Active, Paused, Not running: sinks_rules.feedState); then
   only the fields that hold something, the actions on one row, and the rest of the record in a fold. Dense. */
.feed-head { display: flex; align-items: flex-start; gap: 12px; }
.feed-ic { flex: none; width: 32px; height: 32px; border-radius: var(--radius-ctl); display: grid; place-items: center; background: #f1ecfb; color: #6b3fa0; }
.feed-ic.sql { background: var(--lake); color: #2974a2; }
.feed-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.feed-titles { flex: 1; min-width: 0; }
.feed-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: var(--fs-body); }
.feed-name b { font-weight: 600; color: var(--ink); }
.feed-to { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.feed-kind { font: 500 11px/1 var(--sans); padding: 3px 7px; border-radius: var(--radius-badge); background: #f1ecfb; color: #6b3fa0; }
.feed-kind.sql { background: var(--lake); color: #2974a2; }
.feeds-intro { margin: 0 0 10px; }
.h2-sub { font: 400 var(--fs-xs)/1 var(--sans); color: var(--muted); margin-left: 4px; }
.feed-line { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--ink-soft); }
.feed-why { color: var(--accent-deep); }
.feed-state { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--radius-badge); font: 500 var(--fs-xs)/1 var(--sans); background: var(--bg-soft); color: var(--ink-soft); border: 1px solid var(--rule); }
.feed-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.feed-state.active { background: #eaf6ee; color: #1f6b3d; border-color: #cfe9d8; }
.feed-state.paused { background: #fff8ec; color: #8a5a00; border-color: #f3d9a4; }
.feed-state.stopped { background: var(--tint); color: var(--accent-deep); border-color: #f3c3b1; }
.sink-card.feed .feed-kv { margin: 8px 0 0 44px; gap: 3px 14px; }
.sink-card.feed .feed-kv dt { font-family: var(--sans); font-size: var(--fs-xs); letter-spacing: 0; color: var(--muted); }
.sink-card.feed .sq-slot { margin: 6px 0 0 44px; font-size: var(--fs-xs); }
.sink-card.feed .sq-query > summary { font-size: var(--fs-xs); color: var(--ink-soft); }
.sink-card.feed .sq-query > summary.small { margin: 0; }
.feed-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0 44px; }
.ws details.fold.feed-more { margin: 0 0 0 6px; padding: 0; border: 0; font-size: var(--fs-xs); }
.ws details.fold.feed-more[open] summary { margin-bottom: 4px; }
.feed-more > summary { color: var(--ink-soft); cursor: pointer; }
.ws details.fold.feed-more[open] { flex-basis: 100%; margin: 2px 0 0; }
.feed-more .kv { margin: 6px 0 2px; }
.feed-cli { white-space: pre-wrap; margin: 6px 0 2px; color: var(--ink-soft); }
.sink-card.feed .sink-body:not(:empty) { margin: 8px 0 0 44px; }
@media (max-width: 640px) { .sink-card.feed :is(.feed-kv, .sq-slot, .feed-actions, .sink-body:not(:empty)) { margin-left: 0; } }

/* a connection's kind (bearer, header, basic), on the cards under Feeds: the shared badge shape, neutral */
.sink-card .row .pill { margin-left: auto; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-badge); font: 500 var(--fs-xs)/1 var(--sans); background: var(--bg-soft); color: var(--ink-soft); border: 1px solid var(--rule); }

/* Settings and Account (the design audit, PR B, 2026-10-23): the tables of these pages (members, keys, usage, sessions,
   domains, plan details: table.plain) take the dense list's look; one form row (32px fields, one label style); a key
   that acts as you is flagged in amber, not in the error red; a catalog's name in a table is interface type */
.ws .ws-content table.plain { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--rule); border-radius: var(--radius-ctl); overflow: hidden; background: var(--surface); font-size: var(--fs-body); }
.ws .ws-content table.plain th { text-align: left; background: var(--bg-soft); font: 600 var(--fs-xs)/1.3 var(--sans); color: var(--ink-soft); padding: 7px 12px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.ws .ws-content table.plain th::first-letter { text-transform: uppercase; }   /* "made by" reads "Made by", as every other list */
.ws .ws-content table.plain td { padding: 7px 12px; border-bottom: 1px solid var(--rule); line-height: 20px; vertical-align: middle; }
.ws .ws-content table.plain tr:last-child td { border-bottom: 0; }
.ws .ws-content table.plain td:last-child { padding-right: 12px; }
.ws .ws-content table.plain th.num, .ws .ws-content table.plain td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ws .ws-content table.plain a.link { font: 600 var(--fs-body)/1.35 var(--sans); color: var(--ink); border-bottom: 0; padding: 0; }
.ws .ws-content table.plain a.link:hover { color: var(--accent-deep); text-decoration: underline; }
.keys tr.key-full td:first-child b { color: var(--ink); }
.ws .ws-content .keys .lvl { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-badge); font: 500 var(--fs-xs)/1 var(--sans); background: var(--bg-soft); color: var(--ink-soft); border: 1px solid var(--rule); }
.ws .ws-content .keys .lvl.admin { background: #fff8ec; color: #8a5a00; border-color: #f3d9a4; }

/* one form row in Settings and Account: label, field and button at the same height */
.ws :is(#tab-org, #tab-members, #tab-tokens, #tab-usage, #tab-billing, #tab-account, #tab-enterprise) .field label { font: 600 var(--fs-sm)/1.3 var(--sans); color: var(--ink); margin-bottom: 6px; }
.ws :is(#tab-org, #tab-members, #tab-tokens, #tab-usage, #tab-billing, #tab-account, #tab-enterprise) .field :is(input:not([type=checkbox]):not([type=radio]), select, .csel-btn) { box-sizing: border-box; height: var(--ctl-h); min-height: 0; padding: 0 10px; font-size: var(--fs-body); border-color: var(--rule-strong); border-radius: var(--radius-ctl); }
.ws :is(#tab-org, #tab-members, #tab-tokens, #tab-usage, #tab-billing, #tab-account, #tab-enterprise) .form-row { align-items: flex-end; gap: 10px; }

/* Account: the line under the title, as on every page; Delete account apart under "Danger zone" as a catalog's Delete */
.ws .ws-content #tab-account .ws-titlerow { flex-direction: column; align-items: flex-start; gap: 4px; }
.ws .ws-content #tab-account .box.danger-zone { border-color: #f3c3b1; }
/* Detail pages and shared details (the design audit, PR C, 2026-10-23) */
/* a table's page and an agent's: no "← Tables" link (the breadcrumb names the way back, as on a catalog's page); ⋯ is the
   bare icon button of the catalog's head, not a boxed one */
#wh-tableview > .tv-back { display: none; }
.ws .ws-content .tv-more > summary { border: 0; border-radius: var(--radius-ctl); width: var(--ctl-h); height: var(--ctl-h); }
.ws .ws-content .cv-more > summary:hover { background: var(--bg-soft); }
/* a table's qualified name and a column's type are identifiers: mono */
.ws #tv-meta .mono-ish { font-family: var(--mono); font-size: 12.5px; }
.ws .tp-cols .tp-type { font-family: var(--mono); font-size: 12px; }
table.dlist.tv-cols-t .tv-col { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
/* the SQL explorer's tags (read-only, table by table, public, failed): the shared badge, sentence case; a catalog's name
   keeps its room (it was cut to "t…" beside a tag) */
.ws-explorer .catrow .tag, .ws-explorer li.public .tag { font: 500 11px/1 var(--sans); letter-spacing: 0; text-transform: none; border-radius: var(--radius-badge); padding: 3px 6px; border-style: solid; flex: none; white-space: nowrap; }
.ws-explorer .catrow .tag.direct { background: var(--bg-soft); }
/* a catalog's tags on their own line under its name (beside it, a 230px panel cut the name to "t…" or the tag to "ta") */
.ws-explorer .catrow { flex-wrap: wrap; row-gap: 3px; }
.ws-explorer .catrow .catname { flex: 1 1 0; min-width: 0; }
.ws-explorer .catrow .att-toggle { order: 1; }
.ws-explorer .catrow::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
.ws-explorer .catrow .tag { order: 3; }
.ws-explorer .catrow .catname + .tag { margin-left: 46px; }   /* the first tag: it follows the name in the DOM */
/* one link style in the workspace: orange words, underlined on hover, in the type around them (the site's serif .link,
   a blue underlined one and ink with an orange rule were all in use); a Markdown document keeps its own */
.ws .ws-content :is(p, li, dd, label) > a:not([class]):not(.md a), .ws .ws-content a.link:not(.md a):not(td a), .ws .ws-content .sql-about-link {   /* a name in a list stays ink (table.plain, the dense list) */
  color: var(--accent-deep); border-bottom: 0; text-decoration: none; font-family: inherit; font-size: inherit; padding: 0; }
.ws .ws-content :is(p, li, dd, label) > a:not([class]):not(.md a):hover, .ws .ws-content a.link:not(.md a):not(td a):hover, .ws .ws-content summary:hover .sql-about-link { text-decoration: underline; }
/* the ⌘K palette: a row's description is words, not code */
.cmdk-dialog li .d { font-family: var(--sans); font-size: 12px; }

/* the design audit's last pass (2026-10-23) */
/* every "Danger zone" card the same: a catalog's Delete, an account's, an agent's (an older .ws .danger-zone greyed it) */
.ws .ws-content .box.danger-zone { border-color: #f3c3b1; }
/* a focused field: the accent border and a light halo, not the 2px outline that read as an error (Create a catalog, New key) */
:is(.ws, .ws-dialog) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not(.tbl-search input):not(.cmdk-dialog input), select):focus-visible,   /* a search box's label draws its own */
:is(.ws, .ws-dialog) textarea:not(.md-stack textarea):focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(224, 71, 28, .14); }
/* on a phone a list scrolls inside its own box instead of being cut at the screen's edge (a table's columns at 400px) */
@media (max-width: 640px) { .ws .ws-content :is(table.dlist, table.plain) { display: block; overflow-x: auto; } }
/* the design audit's bugs (2026-10-23) */
/* a toggle button shows when it is on (aria-pressed): a table's Connect engines read as four equal buttons, none chosen */
.ws-content .btn.ghost[aria-pressed="true"] { background: var(--tint); border-color: var(--accent); color: var(--accent-deep); }
/* a table's Connect tab shows the engine snippets open: the fold's rule, padding and summary drew an empty band above them */
#tv-connect details.fold { margin: 0; padding: 0; border-top: 0; }
#tv-connect details.fold > summary { display: none; }
#tv-connect .tp-engines { margin: 0 0 10px; }
/* the Tables tab's description column (2026-10-23): one line, cut with an ellipsis (the whole text in its title); gone on
   narrow screens, where the name and the namespace need the room */
table.dlist td.tbl-desc { max-width: 0; width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
@media (max-width: 900px) { table.dlist .tbl-desc { display: none; } }
/* the agent's Brief tab (#2460): what needs the owner, its recent runs, the memory as the agent sees it */
.ha-brief .ha-bsec h3 { margin: 14px 0 6px; }
.ha-needs { list-style: none; padding: 0; margin: 0; }
.ha-needs li { padding: 6px 0; border-bottom: 1px solid var(--rule); }
.ha-needs li:last-child:last-child { border-bottom: 0; }
details.ha-bsec > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
details.ha-bsec[open] > summary { margin-bottom: 8px; }
.ha-topic ul { margin: 0; padding-left: 18px; }
.ha-sum { margin: 0 0 6px; color: var(--ink-soft); }
.ha-needs li { display: flex; gap: 8px; align-items: center; }
.ha-needs .ha-state, .ha-bsec .ha-state { margin: 0; }          /* the page-wide .warn note block gives it 16px */
.ha-needs .ha-reply { margin-left: auto; }
.ha-talk textarea { width: 100%; box-sizing: border-box; margin: 6px 0; }
.ha-talk-go { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.ha-about { margin-top: 6px; }
.ha-exchange { border-top: 1px solid var(--rule); padding: 10px 0; margin-top: 10px; display: grid; gap: 6px; }
.ha-said .authored { white-space: pre-wrap; }
.ha-diff { margin: 4px 0; padding: 8px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; border: 1px solid var(--rule); }
.ha-diff-add { color: var(--ok-text); }
.ha-diff-del { color: var(--accent-deep); text-decoration: line-through; }
.ha-diff-same { color: var(--muted); }

/* ---- an agent's pages, laid out again (2026-11-06): the Brief in two columns with the chat beside it, runs as rows
   that open in place, the agent's Markdown rendered, long instructions folded */
.ha-dbody { margin-top: 18px; }
.ha-tznote { margin: 0 0 8px; }
.ha-bsec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.ha-bsec-h h2 { margin: 0; }
.ha-battn { align-items: flex-start; margin: 0 0 18px; }
.ha-battn ul { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; gap: 4px; }
.ha-battn li { display: flex; gap: 12px; align-items: baseline; font-size: 14px; color: var(--ink); }
.ha-battn li.ha-needs-bad { font-weight: 600; }
.ha-battn .ha-reply { margin-left: auto; font-size: 13px; }
.ha-bgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 18px; align-items: start; }
.ha-bgrid.solo { grid-template-columns: minmax(0, 1fr); }
.ha-bmain > .box:last-child { margin-bottom: 0; }
.ha-bmain > .box:first-child { margin-top: 0; }
.ha-bside { position: sticky; top: calc(var(--ws-top-h, 56px) + 12px); }
@media (max-width: 1100px) { .ha-bgrid { grid-template-columns: minmax(0, 1fr); } .ha-bside { position: static; } }

/* the latest result: the agent's own words, folded at ~18 lines */
.ha-stale { background: var(--bg-soft); border-radius: 6px; padding: 6px 10px; margin: 0 0 12px; color: var(--ink-soft); }
.ha-md.ha-folded { max-height: 420px; overflow: hidden; position: relative; }
.ha-md.ha-folded.open { max-height: none; }
.ha-md.ha-folded:not(.open)::after { content: ""; position: absolute; inset: auto 0 0 0; height: 56px; background: linear-gradient(rgba(255,255,255,0), #fff); }
.ha-md :is(h2, h3, h4) { font-family: var(--sans); font-size: 15px; margin: 16px 0 6px; }
.ha-md hr { border: 0; border-top: 1px solid var(--rule); margin: 12px 0; }
.ha-more-btn { margin-top: 8px; font-size: 13px; }
.ha-more-btn.hidden { display: none; }
.ha-rlist-brief .ha-rrow { grid-template-columns: 7.5rem 9rem minmax(0, 1fr) 18px; }
.ha-rlist-brief .ha-rcost { display: none; }

/* runs: a grid row per run; the Runs tab's open in place, the Brief's go to the Runs tab */
.ha-rlist { border: 1px solid var(--rule); border-radius: 10px; background: #fff; overflow: hidden; }
.ha-bsec .ha-rlist { border: 0; border-radius: 0; margin: 0 -20px; }
.ha-rrow { display: grid; grid-template-columns: 8.5rem 9rem minmax(0, 1fr) 5.5rem 18px; gap: 14px; align-items: center; padding: 10px 16px; font-size: 14px; border-top: 1px solid var(--rule); width: 100%; box-sizing: border-box; text-align: left; }
.ha-bsec .ha-rrow { padding: 10px 20px; }
.ha-rhead { border-top: 0; font-size: 12.5px; color: var(--muted); padding-top: 8px; padding-bottom: 8px; background: var(--bg-soft); }
.ha-bsec .ha-rlist > :first-child { border-top: 1px solid var(--rule); }
.ha-rlist > .ha-rrow:first-child, .ha-rlist > :first-child > .ha-rrow { border-top: 0; }
.ha-rhead + .ha-rdet > .ha-rrow { border-top: 0; }
.ha-rdet + .ha-rdet > .ha-rrow, .ha-rhead + .ha-rdet > .ha-rrow { border-top: 1px solid var(--rule); }
.ha-rdet > summary { list-style: none; cursor: pointer; }
.ha-rdet > summary::-webkit-details-marker { display: none; }
.ha-rrow:hover { background: #fcfaf7; }
.ha-rhead:hover { background: var(--bg-soft); }
.ha-rlink { background: none; border: 0; border-top: 1px solid var(--rule); font: inherit; color: inherit; cursor: pointer; }
.ha-rlist-brief > .ha-rlink:first-child { border-top: 1px solid var(--rule); }
.ha-rwhen { white-space: nowrap; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; gap: 1px; }
.ha-rtrig { font-size: 12px; color: var(--muted); }
.ha-rdet { margin: 0; }
.ha-rstate { min-width: 0; }
.ha-rstate .ha-state { margin: 0; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; font-family: var(--sans); font-size: 12px; letter-spacing: 0; padding: 2px 8px; border-radius: 999px; }
.ha-rline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.ha-rline.bad { color: var(--accent-deep); }
.ha-rcost { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.ha-rchev svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; transition: transform .15s; }
.ha-rdet[open] > summary .ha-rchev svg { transform: rotate(90deg); }
.ha-rdet[open] > summary { background: #fcfaf7; }
.ha-rdet[open] > summary .ha-rline { white-space: normal; }
.ha-rbody { padding: 4px 16px 16px calc(17.5rem + 44px); display: grid; gap: 12px; }
.ha-rerr { font-size: 14px; }
.ha-rbody .ha-record { margin: 0; }
@media (max-width: 900px) {
  .ha-rrow { grid-template-columns: minmax(0, 1fr) auto 18px; row-gap: 4px; }
  .ha-rhead { display: none; }
  .ha-rwhen { grid-column: 1; grid-row: 1; flex-direction: row; gap: 8px; }
  .ha-rstate { grid-column: 2; grid-row: 1; }
  .ha-rchev { grid-column: 3; grid-row: 1; }
  .ha-rline { grid-column: 1 / -1; grid-row: 2; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .ha-rcost { display: none; }
  .ha-rbody { padding: 4px 16px 16px; }
}

/* the memory: each value as the lines the agent wrote */
.ha-mem > summary { display: flex; align-items: baseline; gap: 8px; }
.ha-memval { white-space: pre-wrap; font-size: 13px; line-height: 1.55; color: var(--ink-soft); background: var(--bg-soft); border-radius: 8px; padding: 10px 12px; max-height: 260px; overflow: auto; }
.ha-mem .ha-topic h3 { font-size: 13px; margin: 14px 0 6px; }

/* the chat */
.ha-talk { display: flex; flex-direction: column; padding: 0; margin: 0; max-height: calc(100vh - var(--ws-top-h, 56px) - 40px); min-height: 420px; }
.ha-talk-h { display: flex; gap: 12px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--rule); }
.ha-talk-h h2 { margin: 0; font-size: 16px; }
.ha-talk-h p { margin: 2px 0 0; }
.ha-talk-h .cv-ic svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ha-talks { flex: 1; overflow: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 14px; }
.ha-talk-empty { margin: auto 0; text-align: center; }
.ha-exchange { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ha-said { display: flex; flex-direction: column; gap: 3px; }
.ha-said.me { align-items: flex-end; }
.ha-said.me .ha-bubble { background: var(--bg-soft); border-radius: 12px 12px 4px 12px; padding: 8px 12px; max-width: 88%; white-space: pre-wrap; font-size: 14px; }
.ha-said.it .ha-bubble { background: #fff; border: 1px solid var(--rule); border-radius: 12px 12px 12px 4px; padding: 10px 13px; max-width: 94%; font-size: 14px; }
.ha-talk-in { border-top: 1px solid var(--rule); padding: 12px 18px 14px; }
.ha-talk-box { display: flex; gap: 8px; align-items: flex-end; border: 1px solid var(--rule); border-radius: 10px; padding: 6px 6px 6px 10px; background: #fff; }
.ha-talk-box:focus-within { border-color: var(--accent); }
.ha-talk .ha-talk-box textarea { border: 0; outline: 0; margin: 0; padding: 4px 0; resize: none; flex: 1; font: inherit; font-size: 14px; min-height: 40px; background: transparent; }
.ha-send { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; flex-shrink: 0; }
.ha-send svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.ha-talk-foot { margin: 6px 0 0; }
.ha-about { margin-bottom: 6px; }
@media (max-width: 1100px) { .ha-talk { max-height: none; min-height: 0; } .ha-talks { max-height: 480px; } }

/* the instructions on the Overview, folded */
.ha-prompt.ha-fold { max-height: 460px; overflow: hidden; position: relative; }
.ha-prompt.ha-fold.open { max-height: none; }
.ha-prompt.ha-fold:not(.open)::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(rgba(255,255,255,0), #fff); border-radius: 0 0 10px 10px; }
.ws .box.ha-talk { padding: 0; }
.ws .ha-talk-h h2 { margin: 0; }
@media (max-width: 600px) { .ha-mem > summary .muted { display: none; } }
.ha-md.ha-mail { border: 1px solid var(--rule); border-radius: 8px; padding: 10px 14px; margin-top: 6px; background: var(--bg-soft); font-size: 13px; }