/* strata.css · P38, Strata: the layout of the console, the page against
   SQLite and the inside of the database on the design system's tokens.
   The buttons, fields, tabs, tree, banners, badges and tables are the
   design system's; this file places them and draws what a SQL console has
   that the design system does not: the editor with colored SQL, the plan
   as a tree with its rows and times, and the bytes of a page. Every class
   it adds starts with st-, so none can match a class of the page around
   it. */

.st { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--paper); overflow: hidden; }
.st-spacer { flex: 1; }
.st-meta { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.st-dim { color: var(--ink-3); font-weight: var(--fw-450); }
/* a chosen row or button has a tinted ground, where the third gray falls under 4.5:1 */
[aria-pressed="true"] .st-dim, [aria-selected="true"] .st-dim { color: var(--ink-2); }
.st-h { margin: 0; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-550); color: var(--ink-2); }
.st-note { margin: 0; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
.st-acts { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
.st-mono, .st-code, .st-hex, .st-sql, .st-editor textarea, .st-hl { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* the bar above the console */
.st-top { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 8px 16px; border-bottom: var(--px) solid var(--line-1); }
.st-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.st > [data-r="banner"] { margin: 8px 16px 0; }

/* two columns: the schema and history, then the editor and the result */
.st-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.st-side { min-height: 0; overflow: auto; padding: 12px 12px 24px; display: flex; flex-direction: column; gap: 18px; border-right: var(--px) solid var(--line-1); }
.st-sec { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.st-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.st-schema { display: flex; flex-direction: column; gap: 10px; }
.st-tbl { display: flex; flex-direction: column; gap: 2px; }
.st-tbl-head { display: flex; align-items: center; gap: 6px; min-height: 26px; }
.st-tbl-head .st-tbl-name { flex: 1; min-width: 0; justify-content: flex-start; }
.st-tbl-head .st-tbl-name > span { overflow: hidden; text-overflow: ellipsis; }
.st-cols, .st-idx { margin: 0; padding: 0 0 0 10px; list-style: none; display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
.st-cols li, .st-idx li { display: flex; justify-content: space-between; gap: 8px; min-width: 0; }
.st-cols li > span:first-child, .st-idx li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-idx { margin-top: 2px; color: var(--ink-3); }
.st-type { flex: none; color: var(--ink-3); font-size: var(--fs-11); line-height: var(--lh-12); }
.st-history { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.st-history li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.st-hist-btn { flex: 1; min-width: 0; justify-content: flex-start; }
.st-hist-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-hist-meta { flex: none; }

/* the editor: a textarea over the same text, colored */
.st-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 16px; overflow: auto; }
.st-presets { display: flex; gap: 4px; flex-wrap: wrap; }
.st-editor { position: relative; flex: none; height: 220px; border-radius: var(--r-contain); background: var(--ground); box-shadow: inset 0 0 0 var(--px) var(--line-2); }
.st-editor:focus-within { box-shadow: inset 0 0 0 var(--px) var(--accent-line), 0 0 0 3px var(--accent-tint); }
.st-editor textarea, .st-hl { position: absolute; inset: 0; margin: 0; padding: 10px 12px; border: 0; font-size: var(--fs-13); line-height: var(--lh-13); tab-size: 2; white-space: pre; overflow: auto; }
/* the textarea keeps its ink for the caret and for anything that reads its color; its glyphs are drawn by the colored copy under it */
.st-editor textarea { width: 100%; height: 100%; resize: none; background: transparent; color: var(--ink); -webkit-text-fill-color: transparent; caret-color: var(--ink); outline: none; z-index: 1; }
.st-editor textarea::selection { background: var(--accent-tint); -webkit-text-fill-color: transparent; }
.st-hl { color: var(--ink); pointer-events: none; overflow: hidden; }
.st-k { color: var(--accent-ink); }
.st-s { color: var(--success-ink); }
.st-n { color: var(--info-ink); }
.st-f { color: var(--warning-ink); }
.st-p { color: var(--danger-ink); }
.st-q { color: var(--ink-2); }
.st-c { color: var(--ink-3); }
.st-run { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-main > [data-r="banner"] { flex: none; }
.st-tabs { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; border-bottom: var(--px) solid var(--line-1); padding-bottom: 4px; }
.st-panel { min-height: 0; }
.st-panel[hidden] { display: none; }
.st-result { min-width: 0; }
.st-table { max-width: 100%; overflow: auto; }
.st-result .st-table { max-height: 520px; }
.st-table td[data-class="null"] { color: var(--ink-3); font-style: italic; }
.st-table td[data-class="blob"] { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--fs-12); }

/* the plan: each step a box with its rows and time, the steps under it below */
.st-plan, .st-plan ul { margin: 0; padding: 0; list-style: none; }
.st-plan ul { margin-left: 18px; padding-left: 12px; border-left: var(--px) solid var(--line-2); }
.st-plan li { margin: 6px 0 0; }
.st-node { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: baseline; gap: 2px 10px; padding: 6px 10px; border-radius: var(--r-press); background: var(--ground); box-shadow: inset 0 0 0 var(--px) var(--line-2); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); max-width: 760px; }
.st-node-label { font-weight: var(--fw-550); color: var(--ink); white-space: nowrap; }
.st-node-detail { min-width: 0; overflow-wrap: anywhere; }
.st-node-nums { grid-column: 1 / -1; display: flex; gap: 4px 14px; flex-wrap: wrap; font-variant-numeric: tabular-nums; color: var(--ink); }
.st-bar { grid-column: 1 / -1; height: 3px; border-radius: var(--r-round); background: var(--line-1); overflow: hidden; }
.st-bar i { display: block; height: 100%; background: var(--accent); }

/* the page against SQLite and the inside of the database */
.st-judge, .st-inside { flex: 1; min-height: 0; overflow: auto; background: var(--paper); }
.st-judge-in, .st-inside-in { padding: 24px 24px 48px; max-width: 1280px; }
.st-judge-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 12px; }
.st-judge-head h1 { margin: 0 0 6px; font-size: var(--fs-20); line-height: var(--lh-20); font-weight: var(--fw-550); color: var(--ink); }
.st-judge-head p { margin: 0; max-width: 820px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
.st-sum { margin: 12px 0 8px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink); font-variant-numeric: tabular-nums; }
.st-progress { height: 4px; border-radius: var(--r-round); background: var(--line-1); overflow: hidden; margin-bottom: 12px; }
.st-progress i { display: block; height: 100%; width: 0; background: var(--accent); }
.st-rule { max-width: 820px; margin-bottom: 12px; }
.st-groups { display: flex; gap: 4px 16px; flex-wrap: wrap; margin: 0 0 8px; font-size: var(--fs-13); line-height: var(--lh-13); }
.st-groups a { color: var(--ink-2); text-decoration: none; }
.st-groups a:hover { color: var(--ink); text-decoration: underline; }
.st-groups a span { margin-left: 6px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.st-group { margin-top: 24px; }
.st-group h2, .st-h2 { margin: 0 0 4px; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); color: var(--ink); }
.st-group-note { margin: 0 0 8px; max-width: 820px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
.st-group td { vertical-align: top; }
.st-detail-row > td { background: var(--ground); }
.st-stmts { margin: 4px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.st-stmt-head { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.st-code { flex: 1; min-width: 0; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.st-answers { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; margin: 4px 0 0 4px; font-size: var(--fs-12); line-height: var(--lh-12); }
.st-answers dt { color: var(--ink-3); }
.st-answers dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.st-why { color: var(--danger-ink); }

/* inside the database */
.st-block { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; }
.st-block > .st-note { max-width: 820px; }
.st-inside-in > [data-r="banner"] { margin-top: 8px; }
.st-objects { display: flex; gap: 4px; flex-wrap: wrap; }
.st-objects [data-r="button"] .st-dim { margin-left: 6px; }
.st-tree-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.st-tree { max-height: 520px; overflow: auto; padding: 4px; border-radius: var(--r-contain); box-shadow: inset 0 0 0 var(--px) var(--line-2); }
.st-tree [data-part="label"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-tree [data-part="label"] b { font-weight: var(--fw-550); }
/* the box scrolls; its rows keep the tree's own height instead of shrinking to fit */
.st-tree > [data-r="tree-item"] { flex: none; }
.st-page { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.st-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font-size: var(--fs-12); line-height: var(--lh-12); }
.st-facts div { display: flex; gap: 6px; }
.st-facts dt { color: var(--ink-3); }
.st-facts dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.st-hex, .st-sql { margin: 0; padding: 8px 10px; border-radius: var(--r-contain); background: var(--ground); box-shadow: inset 0 0 0 var(--px) var(--line-2); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); white-space: pre; overflow: auto; }
.st-page .st-table { max-height: 320px; }
.st-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; max-width: 860px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
.st-how { margin: 0; padding-left: 16px; font-size: var(--fs-12); line-height: var(--lh-12); }
.st-how b { font-weight: var(--fw-550); color: var(--ink); }
.st-block .st-table { max-height: 460px; }

/* a narrower screen: the schema goes above the editor */
@media (max-width: 900px) {
  .st { overflow: auto; }
  .st-grid { display: flex; flex-direction: column-reverse; flex: none; }
  .st-side { border-right: 0; border-top: var(--px) solid var(--line-1); overflow: visible; }
  .st-main { overflow: visible; }
  .st-tree-grid { grid-template-columns: minmax(0, 1fr); }
}
/* a phone */
@media (max-width: 600px) {
  .st-judge-in, .st-inside-in { padding: 16px 16px 32px; }
  .st-main { padding: 12px; }
  .st-editor { height: 200px; }
  .st-plan ul { margin-left: 8px; padding-left: 8px; }
  .st-node-label { white-space: normal; }
}
/* where the database is kept: a badge and the files' sizes, on the inside page */
.st-files { display: flex; align-items: baseline; gap: 8px; margin: 8px 0; max-width: 820px; }
.st-files > span:last-child { min-width: 0; }
.st-tbl-note { margin: 0 0 2px 8px; }