/* ═══════════════════════════════════════════════════════════════════════════
   Arsenal — base
   Reset, type utilities, focus policy, and the application skeleton:
   rail · topbar · views · work area · query bar.

   Requires tokens.css. Load order: tokens.css → base.css → components.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%}
html{overflow:hidden}          /* the console does not scroll; panes do */

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-ui);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}

button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer;text-align:inherit}
button:disabled{cursor:not-allowed}
a{color:inherit}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
img,svg{display:block;max-width:100%}
svg{stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none !important}

/* ── Focus ─────────────────────────────────────────────────────────────────
   Achromatic, per the thesis: the focus ring must not read as a verdict.
   Always visible for keyboard users, never a mouse artefact. */
:focus{outline:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ── Scrollbars ────────────────────────────────────────────────────────── */
*{scrollbar-width:thin;scrollbar-color:var(--line-hard) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line-hard);border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--ink-3);border:3px solid transparent;background-clip:content-box}

/* ── Type utilities ────────────────────────────────────────────────────── */
.struct{
  font-family:var(--f-struct);
  text-transform:uppercase;
  letter-spacing:var(--tr-mid);
}
.data{
  font-family:var(--f-data);
  font-variant-numeric:tabular-nums;
}
.micro{font-size:var(--t-micro);line-height:var(--lh-micro);letter-spacing:var(--tr-wide)}
.label{font-size:var(--t-label);line-height:var(--lh-label)}
.lead{font-size:var(--t-lead);line-height:var(--lh-lead)}
.head{font-size:var(--t-head);line-height:var(--lh-head)}
.num{font-size:var(--t-num);line-height:var(--lh-num);font-family:var(--f-data);font-variant-numeric:tabular-nums}
.ink-2{color:var(--ink-2)}
.ink-3{color:var(--ink-3)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp{flex:1;min-width:0}

/* Screen-reader-only, but focusable when it needs to be (skip link). */
.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:fixed;top:var(--s-2);left:var(--s-2);z-index:var(--z-modal);
  transform:translateY(-200%);
  background:var(--raised);color:var(--ink);
  border:1px solid var(--line-hard);border-radius:var(--r-control);
  padding:var(--s-2) var(--s-3);
  font-family:var(--f-struct);text-transform:uppercase;letter-spacing:var(--tr-mid);
  font-size:var(--t-label);text-decoration:none;
  transition:transform var(--m-fast) var(--ease);
}
.skip:focus{transform:translateY(0)}

/* ═══════════════════════════════════════════════════════════════════════════
   APPLICATION SKELETON
   ┌────┬──────────────────────────────────────────┐
   │    │ topbar                                   │
   │rail├──────────────┬───────────────────────────┤
   │    │ intake       │ view body                 │
   │    ├──────────────┴───────────────────────────┤
   │    │ query bar                                │
   └────┴──────────────────────────────────────────┘
   ═══════════════════════════════════════════════════════════════════════════ */

/* minmax(0,…) at every level of the chain, not just the innermost one: a grid
   or flex track's automatic minimum is its content, so one long SHA-256 or one
   wide KQL line propagates all the way up and makes the whole console scroll
   sideways. Each container below must be allowed to be narrower than what it
   holds, so the overflow lands in the pane that owns it. */
.app{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  height:100vh;
  height:100dvh;
  overflow:hidden;
}

/* ── Rail ──────────────────────────────────────────────────────────────────
   44px, fixed. It does not expand on hover — labels live in tooltips and in
   the command palette (Ctrl+K). */
.rail{
  grid-column:1;
  background:var(--pane);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;
  padding:var(--s-2) 0;gap:2px;
  min-height:0;
}
.rail-mark{
  width:26px;height:26px;
  border:1px solid var(--line-hard);
  color:var(--ink-2);
  display:grid;place-items:center;
  margin-bottom:var(--s-3);flex-shrink:0;
}
.rail-mark svg{width:14px;height:14px}
.rail-btn{
  width:32px;height:32px;flex-shrink:0;
  display:grid;place-items:center;
  color:var(--ink-3);position:relative;
  transition:color var(--m-fast) var(--ease);
}
.rail-btn svg{width:17px;height:17px}
.rail-btn:hover{color:var(--ink)}
.rail-btn[aria-current="page"]{color:var(--ink)}
.rail-btn[aria-current="page"]::before{
  content:'';position:absolute;left:-6px;top:6px;bottom:6px;
  width:2px;background:var(--ink);
}
.rail-sp{flex:1;min-height:var(--s-2)}

/* ── Shell (everything right of the rail) ──────────────────────────────── */
.shell{
  grid-column:2;
  display:grid;
  /* The column is declared, not implicit. An implicit grid column is auto —
     sized to max-content — so the shell would silently grow to the width of
     the longest KQL line and drag the queue's verdict column off screen. */
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:var(--topbar) minmax(0,1fr) var(--kql);
  min-width:0;min-height:0;
  overflow:hidden;
}
.shell.kql-collapsed{grid-template-rows:var(--topbar) 1fr auto}

/* History and Settings are documents, not workspaces: there is no generated
   query to show, so the row is removed entirely rather than left empty. */
.shell.no-qbar{grid-template-rows:var(--topbar) 1fr}
.shell.no-qbar .qbar{display:none}

/* ── Topbar ────────────────────────────────────────────────────────────── */
.topbar{
  display:flex;align-items:center;gap:var(--s-4);
  padding:0 var(--s-4);
  background:var(--pane);
  border-bottom:1px solid var(--line);
  min-width:0;
}
.tabs{display:flex;gap:2px;margin-left:-10px;flex-shrink:0}
.tab{
  font-family:var(--f-struct);text-transform:uppercase;letter-spacing:var(--tr-mid);
  font-size:var(--t-label);
  height:26px;padding:0 10px;
  color:var(--ink-3);
  border:1px solid transparent;border-radius:var(--r-control);
  transition:color var(--m-fast) var(--ease),border-color var(--m-fast) var(--ease);
}
.tab:hover{color:var(--ink-2)}
.tab[aria-current="page"]{
  color:var(--ink);
  border-color:var(--line-hard);
  background:var(--raised);
}

/* ── Views ─────────────────────────────────────────────────────────────────
   All views are mounted; only the current one is displayed. Hash-routed. */
.view{display:none;min-width:0;min-height:0}
.view[data-active]{display:grid}

/* Hunt and Phish share this two-column work area.
   minmax(0,1fr) rather than 1fr: a grid track's automatic minimum is its
   content, so a single long value (a SHA-256, a deep URL) would otherwise
   stretch the track past the viewport and force the whole app to scroll
   sideways. */
.view--work{grid-template-columns:var(--intake) minmax(0,1fr)}

/* History and Settings are single-column documents. */
.view--doc{grid-template-columns:1fr;overflow:auto}
.doc{max-width:940px;padding:var(--s-8) var(--s-6);width:100%}
.doc-h{
  font-family:var(--f-struct);text-transform:uppercase;letter-spacing:var(--tr-mid);
  font-size:var(--t-head);line-height:var(--lh-head);
  margin-bottom:var(--s-2);
}
.doc-sub{color:var(--ink-3);margin-bottom:var(--s-6)}

/* ── Intake column ─────────────────────────────────────────────────────── */
.intake{
  background:var(--pane);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  min-height:0;overflow:hidden;
}
.intake-scroll{flex:1;min-height:0;overflow:auto}
.sec{padding:var(--s-4);border-bottom:1px solid var(--line-soft)}
.sec:last-child{border-bottom:none}
.sec-h{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2);
  font-family:var(--f-struct);text-transform:uppercase;letter-spacing:var(--tr-wide);
  font-size:var(--t-micro);line-height:var(--lh-micro);
  color:var(--ink-3);
  margin-bottom:var(--s-2);
}
.sec-h .hint{
  font-family:var(--f-data);letter-spacing:0;text-transform:none;
  font-variant-numeric:tabular-nums;
}

/* ── Work body (the queue side) ────────────────────────────────────────── */
.body{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.body-scroll{flex:1;min-height:0;min-width:0;overflow:auto}

/* ── Query bar shell ───────────────────────────────────────────────────────
   Permanent, resizable, collapsible. The generated query is this tool's
   product; it is not hidden behind a hover-reveal drawer. */
.qbar{
  background:var(--pane);
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;
  min-height:0;
}
.qbar-grip{
  height:5px;flex-shrink:0;cursor:ns-resize;
  border-bottom:1px solid var(--line-soft);
  background:transparent;
  transition:background var(--m-fast) var(--ease);
}
.qbar-grip:hover,.qbar-grip:focus-visible{background:var(--line-hard)}
.qbar-head{
  display:flex;align-items:center;gap:var(--s-3);
  padding:0 var(--s-4);height:30px;flex-shrink:0;min-width:0;
}
.qbar-title{
  font-family:var(--f-struct);text-transform:uppercase;letter-spacing:var(--tr-wide);
  font-size:var(--t-micro);color:var(--ink-2);flex-shrink:0;
}
.qbar-body{flex:1;min-height:0;overflow:auto;background:var(--sunken);display:flex}
.shell.kql-collapsed .qbar-body,
.shell.kql-collapsed .qbar-grip{display:none}

/* ── Responsive ────────────────────────────────────────────────────────────
   Mobile is not a shipping target, but the layout must not break. Below
   1100px the intake column collapses above the queue. */
@media (max-width:1100px){
  .view--work{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .intake{
    border-right:none;border-bottom:1px solid var(--line);
    max-height:44vh;
  }
}
@media (max-width:720px){
  :root{--rail:40px;--intake:100%}
  .topbar{gap:var(--s-2);overflow-x:auto}
}