/* Extract to Table (version 2): the start page (.xs-*) and the live table (.xt-*).
   Loaded globally from base.html <head>: an hx-boost swap never re-injects
   <head>, so a per-page stylesheet would only apply after a hard refresh. */

/* ---------------------------------------------------------------- start page */
/* A Google-style stepper: one column of flat, rounded step cards with a
   numbered badge, quiet helper text, and a single primary action. */
.xs { max-width: 920px; margin: 0 auto; padding: .5rem 0 3rem; }
.xs__head { margin-bottom: 1.5rem; }
.xs__head h1 { font: 400 var(--title-size)/1.2 var(--font-display); letter-spacing: -.01em; margin: .35rem 0 .4rem; }
.xs__head p { color: var(--text-muted); margin: 0; max-width: 40rem; font-size: .95rem; }

.xs-step { background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem 1.5rem 1.4rem; margin-bottom: 1rem; }
.xs-step__head { display: flex; align-items: flex-start; gap: .85rem; margin-bottom: 1rem; }
.xs-step__n { flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: inline-grid; place-items: center; margin-top: .05rem;
  background: var(--brand-container); color: var(--on-brand-container);
  font: 600 .82rem/1 var(--font-sans); }
.xs-step__head h2 { font-size: 1.15rem; font-weight: 500; margin: .1rem 0 0; }
.xs-step__head p { color: var(--text-muted); font-size: .85rem; margin: .2rem 0 0; }

/* Row mode: two selectable cards. */
.xs-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.xs-mode { display: flex; gap: .75rem; align-items: flex-start; margin: 0;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: .9rem 1rem; cursor: pointer; background: var(--bg-elev);
  transition: border-color .12s, background-color .12s; }
.xs-mode:hover { background: var(--state-hover); }
.xs-mode:has(input:checked) { border-color: var(--brand); background: var(--brand-50); }
.xs-mode input { margin-top: .2rem; accent-color: var(--brand); }
.xs-mode b { display: block; font-size: .92rem; font-weight: 600; }
.xs-mode span { display: block; color: var(--text-muted); font-size: .82rem; margin-top: .15rem; }
.xs-item { margin-top: 1rem; }
.xs-item input { max-width: 30rem; }

/* Starters: filter-chip row. */
.xs-starters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.xs-starters__label { color: var(--text-subtle); font-size: .8rem; font-weight: 500; margin-right: .15rem; }
.xs-starter { display: inline-flex; align-items: center; min-height: 32px;
  border: 1px solid var(--border-strong); background: var(--bg-elev);
  border-radius: var(--radius-sm); padding: .25rem .8rem; font-size: .82rem; font-weight: 500;
  color: var(--text-muted); cursor: pointer; }
.xs-starter:hover { background: var(--state-hover); color: var(--text); }
.xs-starter.is-on { background: var(--brand-container); border-color: transparent; color: var(--on-brand-container); }

/* "Suggest columns": one pill field with the action inside it. */
.xs-suggest { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.25rem;
  min-height: 48px; padding: .35rem .4rem .35rem 1rem; border-radius: var(--radius-pill);
  background: var(--bg-tint); color: var(--text-muted); }
.xs-suggest:focus-within { background: var(--bg-elev); box-shadow: inset 0 0 0 2px var(--brand); }
.xs-suggest svg { flex: none; color: var(--brand); }
.xs-suggest input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  color: var(--text); font: inherit; font-size: .9rem; }
.xs-suggest input::placeholder { color: var(--text-subtle); }
.xs-suggest .btn { flex: none; }

/* Column editor: one label row, then compact field rows. */
.xs-cols__labels, .xs-col { display: grid;
  grid-template-columns: 1.5rem minmax(8rem, 1fr) 9.5rem minmax(10rem, 1.6fr) 2.25rem; gap: .5rem; }
.xs-cols__labels { padding-bottom: .35rem; margin-bottom: .35rem; border-bottom: 1px solid var(--border-soft);
  font-size: .75rem; font-weight: 600; color: var(--text-subtle); }
.xs-cols__labels em { font-style: normal; font-weight: 400; }
.xs-cols { display: grid; gap: .5rem; }
.xs-col { align-items: start; }
.xs-col__n { color: var(--text-subtle); font-size: .78rem; padding-top: .55rem; text-align: right;
  font-variant-numeric: tabular-nums; }
.xs-col input, .xs-col select, .xs-step input.form-control, .xs-step textarea { font-size: .875rem; }
.xs-col__choices { grid-column: 2 / 5; }
.xs-col__x { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-top: .1rem;
  border: 0; border-radius: 50%; background: none; color: var(--text-subtle); }
.xs-col__x:hover { background: var(--state-hover); color: var(--err); }
.xs-cols__foot { display: flex; gap: .25rem; flex-wrap: wrap; margin: .6rem 0 0 1.5rem; align-items: center; }
.xs-cols__foot .xs-note { margin: 0 0 0 auto; }
.xs-paste { margin-top: .75rem; }
.xs-note { color: var(--text-subtle); font-size: .8rem; }
.xs-auto { position: relative; margin: 1rem 0 0; padding-left: 1.5rem;
  color: var(--text-muted); font-size: .82rem; }
.xs-auto::before { content: ""; position: absolute; left: 0; top: .15rem; width: 1rem; height: 1rem;
  border-radius: 50%; background: var(--ok-50);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 35%, transparent); }
.xs-auto::after { content: ""; position: absolute; left: .34rem; top: .33rem; width: .32rem; height: .52rem;
  border: solid var(--ok); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.xs-save { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .85rem 0 0;
  font-size: .85rem; color: var(--text-muted); cursor: pointer; }
.xs-save .form-check-input { margin: 0; }
.xs-save input.form-control { max-width: 16rem; }

/* Documents: a dashed drop-style area with the one action. */
.xs-drop { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem 1.25rem; border: 1px dashed var(--border-strong); border-radius: var(--radius);
  background: var(--bg-elev-2); }
.xs-drop .xs-note { margin: 0; }
.xs-step .compose__files:not([hidden]) { margin-bottom: .75rem; }

/* More options: a quiet disclosure row. */
.xs-more { padding: 0; }
.xs-more > summary { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.5rem;
  list-style: none; cursor: pointer; border-radius: var(--radius-lg); }
.xs-more > summary::-webkit-details-marker { display: none; }
.xs-more > summary:hover { background: var(--state-hover); }
.xs-more > summary span { font-weight: 500; }
.xs-more > summary small { color: var(--text-subtle); font-size: .82rem; }
.xs-more__chev { margin-left: auto; color: var(--text-subtle); transition: transform .15s; }
.xs-more[open] .xs-more__chev { transform: rotate(180deg); }
.xs-more__body { padding: 0 1.5rem 1.4rem; }

/* Footer: hint left, actions right; sticks to the bottom while scrolling. */
.xs-foot { position: sticky; bottom: calc(var(--statusbar-h, 30px) + .5rem); z-index: 5;
  display: flex; gap: .5rem; justify-content: flex-end; align-items: center; flex-wrap: wrap;
  margin-top: 1.25rem; padding: .75rem .75rem .75rem 1.25rem;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm); }
.xs-foot__hint { margin-right: auto; color: var(--text-subtle); font-size: .82rem; }

/* Recent tables: a simple list. */
.xs-recent { margin-top: 2.25rem; }
.xs-recent__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .5rem; }
.xs-recent__head h2 { font-size: 1.15rem; font-weight: 500; margin: 0; }
.xs-recent ul { list-style: none; margin: 0; padding: .35rem 0; background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: var(--radius-lg); }
.xs-recent li + li { border-top: 1px solid var(--border-soft); }
.xs-recent a { display: flex; align-items: center; gap: .85rem; padding: .7rem 1.25rem;
  color: var(--text); text-decoration: none; font-size: .9rem; }
.xs-recent a:hover { background: var(--state-hover); color: var(--text); }
.xs-recent a svg { flex: none; color: var(--brand); }
.xs-recent a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xs-recent small { color: var(--text-subtle); white-space: nowrap; font-size: .8rem; }

@media (max-width: 720px) {
  .xs-step { padding: 1rem; }
  .xs-modes { grid-template-columns: 1fr; }
  .xs-cols__labels { display: none; }
  .xs-col { grid-template-columns: minmax(0, 1fr) 2.25rem; }
  .xs-col__n { display: none; }
  .xs-col > select, .xs-col > input[data-col-prompt], .xs-col__choices { grid-column: 1 / 2; }
  .xs-cols__foot { margin-left: 0; }
  .xs-suggest { flex-wrap: wrap; border-radius: var(--radius); padding: .6rem .75rem; }
  .xs-foot { border-radius: var(--radius); }
  .xs-foot__hint { flex-basis: 100%; }
}

/* ----------------------------------------------------------------- live table */
.xt { display: flex; flex-direction: column; min-height: calc(100dvh - var(--topbar-h) - var(--statusbar-h, 30px));
  padding: .75rem 1rem 1rem; gap: .6rem; }
.xt-top { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.xt-title { font: 400 1.5rem/1.25 var(--font-display); border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px); padding: .1rem .35rem; margin: 0;
  background: transparent; color: var(--text); min-width: 8rem; max-width: 36rem; }
.xt-title:hover { border-color: var(--border); }
.xt-title:focus { outline: none; border-color: var(--brand); background: var(--bg-elev); }
.xt-pill { font-size: .75rem; border-radius: 999px; padding: .12rem .55rem;
  border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; }
.xt-pill--run { color: var(--brand-600); border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.xt-progress { display: flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--text-muted); }
.xt-progress__bar { width: 9rem; height: 5px; background: var(--border); border-radius: 999px; overflow: hidden; }
.xt-progress__bar span { display: block; height: 100%; background: var(--brand); transition: width .4s ease; }
.xt-top__actions { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; }
.xt-menu { position: relative; }
.xt-menu__list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 14rem;
  background: var(--bg-elev); border: 0; border-radius: var(--radius);
  box-shadow: var(--shadow); padding: .5rem 0; }
.xt-menu__list button, .xt-menu__list a { display: block; width: 100%; text-align: left; border: 0;
  background: none; padding: .55rem 1rem; border-radius: 0; font-size: .875rem;
  color: var(--text); text-decoration: none; }
.xt-menu__list button:hover, .xt-menu__list a:hover { background: var(--state-hover); }
.xt-menu__list .is-danger { color: var(--err); }

.xt-bar { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.xt-mode { font-size: .8rem; color: var(--text-muted); background: var(--bg-elev-2);
  border: 1px solid var(--border); border-radius: 999px; padding: .2rem .65rem; }
.xt-bar__sp { flex: 1; }
.xt-bar select, .xt-bar input[type=search] { font-size: .82rem; height: auto;
  padding-top: .3rem; padding-bottom: .3rem; line-height: 1.35; }
.xt-bar input[type=search] { width: 13rem; }
.xt-stats { font-size: .8rem; color: var(--text-subtle); }

.xt-grid-wrap { flex: 1; overflow: auto; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--bg-elev); min-height: 16rem; }
table.xt-grid { border-collapse: separate; border-spacing: 0; font-size: .84rem; min-width: 100%; }
.xt-grid th, .xt-grid td { border-bottom: 1px solid var(--border-soft); border-right: 1px solid var(--border-soft);
  padding: .45rem .55rem; vertical-align: top; text-align: left; }
.xt-grid thead th { position: sticky; top: 0; z-index: 3; background: var(--bg-elev-2); border-bottom-color: var(--border); color: var(--text-muted);
  font-weight: 600; min-width: 13rem; max-width: 22rem; }
.xt-grid th.xt-lead, .xt-grid td.xt-lead { position: sticky; left: 0; z-index: 2;
  background: var(--bg-elev); min-width: 14rem; max-width: 18rem; }
.xt-grid thead th.xt-lead { z-index: 4; background: var(--bg-elev-2); }
.xt-grid th.xt-num, .xt-grid td.xt-num { width: 2.4rem; min-width: 2.4rem; color: var(--text-subtle);
  font-variant-numeric: tabular-nums; text-align: right; }
.xt-h { display: flex; align-items: flex-start; gap: .35rem; }
.xt-h__name { flex: 1; overflow-wrap: anywhere; }
.xt-h__type { display: block; font-weight: 400; font-size: .72rem; color: var(--text-subtle); }
.xt-h__btn, .xt-doc__btn { border: 0; background: none; color: var(--text-subtle); padding: 0 .15rem;
  border-radius: 4px; line-height: 1.2; }
.xt-h__btn:hover, .xt-doc__btn:hover { color: var(--text); background: var(--state-hover); }
.xt-h--add { min-width: 8rem !important; }
.xt-h--add button { border: 1px dashed var(--border-strong); background: none; border-radius: var(--radius-pill);
  color: var(--text-muted); padding: .2rem .6rem; font-size: .82rem; }
.xt-doc { display: flex; gap: .35rem; align-items: flex-start; }
.xt-doc__name { flex: 1; overflow-wrap: anywhere; font-weight: 500; }
.xt-doc__sub { display: block; color: var(--text-subtle); font-size: .74rem; font-weight: 400; }
.xt-item { display: block; font-weight: 400; color: var(--text); }

td.xt-c { cursor: pointer; max-width: 22rem; position: relative; }
td.xt-c:hover { background: var(--state-hover); }
td.xt-c.is-sel { box-shadow: inset 0 0 0 2px var(--brand); }
.xt-v { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.xt-src { font-size: .66rem; line-height: 0; margin-left: .2rem; color: var(--brand-600);
  font-weight: 700; font-style: normal; }
.xt-src--miss { color: var(--warn); }
.xt-badges { float: right; margin-left: .3rem; font-size: .72rem; color: var(--text-subtle); }
.xt-badge-ok { color: var(--ok); font-weight: 700; }
.xt-muted { color: var(--text-subtle); font-style: italic; }
.xt-warn { color: var(--warn); }
.xt-q, .xt-r { color: var(--text-subtle); font-size: .8rem; }
.xt-r::before { content: ""; display: inline-block; width: .7rem; height: .7rem; margin-right: .35rem;
  border: 2px solid var(--brand); border-right-color: transparent; border-radius: 50%;
  vertical-align: -1px; animation: xt-spin .8s linear infinite; }
@keyframes xt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .xt-r::before { animation: none; } }
td.xt-c[data-flag=red] { box-shadow: inset 3px 0 0 var(--err); }
td.xt-c[data-flag=amber] { box-shadow: inset 3px 0 0 var(--warn); }
td.xt-c[data-flag=green] { box-shadow: inset 3px 0 0 var(--ok); }
td.xt-c[data-flag=blue] { box-shadow: inset 3px 0 0 var(--info); }
tr.xt-pending td { color: var(--text-subtle); }
.xt-empty { padding: 2.5rem 1rem; text-align: center; color: var(--text-muted); }
.xt-empty b { display: block; color: var(--text); font-size: 1rem; margin-bottom: .3rem; }
.xt-more { text-align: center; padding: .6rem; }
.xt-legend { font-size: .75rem; color: var(--text-subtle); display: flex; gap: 1rem; flex-wrap: wrap; }

/* Drawer: source panel, add column, add documents, edit column */
.xt-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); z-index: 1040;
  background: var(--bg-elev); border-left: 0; border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .18s ease; }
.xt-drawer.is-open { transform: none; }
.xt-drawer__head { display: flex; align-items: flex-start; gap: .5rem; padding: .9rem 1rem .6rem;
  border-bottom: 1px solid var(--border); }
.xt-drawer__head h2 { font-size: 1.25rem; font-weight: 500; margin: 0; flex: 1; }
.xt-drawer__head small { display: block; color: var(--text-subtle); font-weight: 400; font-size: .78rem; }
.xt-drawer__x { border: 0; background: none; font-size: 1.4rem; line-height: 1; color: var(--text-subtle); width: 36px; height: 36px; border-radius: 50%; }
.xt-drawer__x:hover { background: var(--state-hover); color: var(--text); }
.xt-drawer__body { padding: .9rem 1rem 1.2rem; overflow: auto; flex: 1; font-size: .88rem; }
.xt-drawer__body label { font-size: .8rem; font-weight: 600; color: var(--text-muted); margin: .6rem 0 .2rem; display: block; }
.xt-drawer__foot { padding: .7rem 1rem; border-top: 1px solid var(--border); display: flex; gap: .5rem;
  justify-content: flex-end; flex-wrap: wrap; }
.xt-answer { font-size: 1rem; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 .4rem; }
.xt-source { border: 1px solid var(--border); border-radius: var(--radius-md); padding: .6rem .7rem;
  background: var(--bg-elev-2); margin: .5rem 0; }
.xt-source__where { display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem;
  color: var(--text-muted); margin-bottom: .35rem; }
.xt-source blockquote { margin: 0; font-family: var(--font-serif, Georgia, serif); font-size: .9rem;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.xt-check { font-size: .8rem; margin-top: .45rem; }
.xt-check.is-ok { color: var(--ok); }
.xt-check.is-miss { color: var(--warn); }
.xt-flags { display: flex; gap: .35rem; }
.xt-flag { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 2px solid transparent; }
.xt-flag.is-on { border-color: var(--text); }
.xt-flag[data-flag-set=""] { background: var(--bg-elev-2); border-color: var(--border); }
.xt-flag[data-flag-set=red] { background: var(--err); }
.xt-flag[data-flag-set=amber] { background: var(--warn); }
.xt-flag[data-flag-set=green] { background: var(--ok); }
.xt-flag[data-flag-set=blue] { background: var(--info); }
.xt-hist { color: var(--text-subtle); font-size: .78rem; margin-top: .8rem; }
.xt-sugg label { display: flex; gap: .5rem; font-weight: 400; color: var(--text); padding: .35rem 0;
  border-bottom: 1px solid var(--border); margin: 0; }
.xt-sugg small { color: var(--text-subtle); display: block; }
.xt-toast { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); z-index: 1050;
  background: var(--text); color: var(--bg); padding: .5rem .9rem; border-radius: 999px; font-size: .85rem; }
.xt-backdrop { position: fixed; inset: 0; background: rgba(27,29,34,.32); z-index: 1039; }