/* The Sovereign Console as a window.

   The Console is a program, and it is drawn as the Sovereign application is:
   a title bar holding its tabs, a sidebar, a work area, and a status bar that
   says what has left the device. Those parts are sovereign-app.css's, class
   for class, so the two windows are one family and cannot drift apart. What
   is here is only what the Console has and the suite does not: the case in
   the sidebar above the tools, the case toolbar, and the inspector beside
   the work.

   Every colour is a theme.css token. The page is still a page with no
   script: html.sv-live, set in the head, is what turns it into the window,
   and without it the heading, the case and the tool index read top to
   bottom. */

/* ------------------------------------------------------------ the page */

.sc-page-head { max-width: 1200px; margin: 0 auto; padding: 30px 20px 0; }
.sc-page-head .page-title { margin: 0 0 8px; }
.sc-page-head .h1-code {
  font: 600 13px/1 var(--font-mono, monospace);
  color: var(--ink-faint);
  vertical-align: middle;
  margin-left: 8px;
  padding: 4px 8px;
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.sc-page-head p { color: var(--ink-soft); max-width: 74ch; margin: 0; font-size: 15px; line-height: 1.6; }
.sc-wrap { max-width: 1200px; margin: 18px auto 0; padding: 0 20px; }

/* The tool index the sidebar is built from (suite-index.mjs writes it). */
.sc-index { margin: 32px 0 0; }
.sc-index h2 { font-size: 18px; margin: 0 0 12px; }
.sc-index-group h3 { display: flex; align-items: center; gap: 10px; font-size: 14px; margin: 20px 0 6px; }
.sc-index-ico { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--ico); color: #fff; flex: none; }
.sc-index-ico svg { width: 14px; height: 14px; }
.sc-index-group ul { margin: 0; padding-left: 32px; line-height: 1.7; color: var(--ink-soft); }
.sc-index-group a { font-family: var(--font-mono); font-size: 13px; }

/* The window. The site's bar and footer belong to pages, and this is not
   one: the title bar carries the way home, Sign in and the plan, as the
   suite's does. The heading stays for anyone reading the page by its
   headings, out of sight. */
html.sv-live .os-topbar,
html.sv-live .os-footer,
html.sv-live .sc-index { display: none !important; }
html.sv-live .sc-page-head {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
html.sv-live .sc-wrap { max-width: none; margin: 0; padding: 0; }
html.sv-live body { margin: 0; }

.sc-brand-sub { font-weight: 500; color: var(--ink-soft); margin-left: 1px; }

/* ------------------------------------------------------------- sidebar */

/* The case and the tools share the sidebar, one at a time, on a switch
   under the filter. Typing in the filter shows the tools whichever is on. */
.sc-panes {
  display: flex;
  gap: 2px;
  margin: 2px 12px 4px;
  padding: 3px;
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r);
  background: var(--paper);
}
.sc-pane {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.sc-pane:hover { color: var(--ink); background: var(--sv-hover); }
.sc-pane[aria-selected="true"] { background: var(--paper-raised); color: var(--ink); box-shadow: 0 0 0 1px var(--sv-line), 0 1px 2px rgba(0, 0, 0, .06); }
#sc-app .sc-side[data-pane="case"] .sc-toolnav,
#sc-app .sc-side[data-pane="tools"] .sc-rail,
#sc-app .sc-side.sc-filtering .sc-rail { display: none; }
#sc-app .sc-side.sc-filtering .sc-toolnav { display: block; }
.sc-side .sv-nav { padding-top: 6px; }
.sc-toolnav .sv-sect:first-child { padding-top: 6px; }
.sc-toolnav .sv-group-head .sv-count { margin-left: -4px; }
.sc-tool-open { font-weight: 600; color: var(--ink); }

/* ------------------------------------------------------------------ tabs */

/* An artifact's tab: a plain document mark, with the verdict as a dot, so
   a flagged file is seen in the strip without opening it. */
.sc-evtab .sc-evico {
  position: relative;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  color: var(--ink-soft);
  flex: none;
}
.sc-evtab .sc-evico svg { width: 15px; height: 15px; }
.sc-evtab .sc-evico::after {
  content: "";
  position: absolute;
  right: -1px; bottom: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--sv-chrome);
  background: var(--rule-strong);
}
.sc-evtab[aria-selected="true"] .sc-evico::after { border-color: var(--paper); }
.sc-evtab[data-tone="ok"] .sc-evico::after,
.sc-evtab[data-tone="good"] .sc-evico::after { background: var(--good); }
.sc-evtab[data-tone="warn"] .sc-evico::after { background: var(--warn); }
.sc-evtab[data-tone="bad"] .sc-evico::after { background: var(--danger); }
.sc-evtab .sv-tab-label { font-family: var(--font-mono); font-size: 12px; }

/* ---------------------------------------------------------- the case view */

.sc-case-view { min-width: 0; }
.sc-body { position: relative; flex: 1; min-height: 0; display: flex; }
#sc-app .sc-work { flex: 1; min-width: 0; overflow: auto; }
.sc-case-view .sv-inspect { overflow-y: auto; }
#sc-app .sc-btn svg { width: 15px; height: 15px; flex: none; }
#sc-app .sc-acts .sv-sep { margin: 0 4px; }

/* The inspector: what the selected artifact is, and what can open it. */
.sv-inspect .sc-insp-name {
  margin: 0 0 4px;
  font: 600 13px/1.4 var(--font-mono);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.sv-inspect .sc-insp-sub { margin: 0 0 14px; color: var(--ink-faint); font-size: 12.5px; }
.sc-insp-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0 0 18px; font-size: 12.5px; }
.sc-insp-kv dt { color: var(--ink-faint); }
.sc-insp-kv dd { margin: 0; color: var(--ink); font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; }
.sc-insp-signals { margin: 0 0 18px; padding-left: 18px; color: var(--ink-soft); font-size: 12.5px; line-height: 1.5; }
.sc-insp-signals li { margin: 0 0 4px; }
.sc-insp-all { margin-top: 6px; }
.sv-inspect .sc-insp-empty { color: var(--ink-faint); font-size: 12.5px; line-height: 1.55; margin: 0; }
.sc-tone {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11.5px/1 var(--font-sans);
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--paper-inset);
  color: var(--ink-soft);
}
.sc-tone::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sc-tone-ok, .sc-tone-good { background: var(--good-soft); color: var(--good); }
.sc-tone-warn { background: var(--warn-soft); color: var(--warn); }
.sc-tone-bad { background: var(--danger-soft); color: var(--danger); }

/* A tool's toolbar: the evidence button sits with Open file. */
.sc-tool-view .sv-tool-actions .sv-btn { gap: 6px; }

/* ------------------------------------------------------------------ narrow */

@media (max-width: 1100px) {
  .sc-keys { display: none; }
  /* The actions keep their names for a screen reader and lose them on the
     screen, where the icons and their tooltips carry them. */
  #sc-app .sc-acts .sc-btn:not(.pri) .sc-lbl {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  #sc-app .sc-acts .sc-btn:not(.pri) { padding: 0 9px; }
}

@media (max-width: 860px) {
  .sc-case-view .sv-inspect { position: absolute; right: 0; top: 0; bottom: 0; z-index: 5; box-shadow: -12px 0 30px -18px rgba(0,0,0,.35); }
}

@media (max-width: 640px) {
  /* As in the suite: Sign in and the plan stay in the bar, and the theme
     and the way home give their room to the tabs (the theme is in the
     palette, under Cmd/Ctrl+K). */
  #scTheme, .sv-bar > a.sv-iconbtn.sc-site { display: none; }
  .sc-pane { height: 44px; }
  /* The evidence table keeps what each item is called, its size and its
     verdict in view; its type, entropy and indicators are on the item. */
  #sc-app table.sc-dash-t tr > :nth-child(2):not([colspan]), #sc-app table.sc-dash-t tr > :nth-child(4), #sc-app table.sc-dash-t tr > :nth-child(5) { display: none; }
  #sc-app table.sc-dash-t th, #sc-app table.sc-dash-t td { padding-left: 10px; padding-right: 10px; }
  #sc-app table.sc-dash-t td:first-child { min-width: 0; }
  #sc-app .sc-cbar { gap: 8px; padding: 4px 4px 4px 12px; }
  #sc-app .sc-casebox { flex: 1; }
  #sc-app .sc-casebox .cl { display: none; }
  #sc-app .sc-casename { min-width: 0; width: 100%; max-width: none; margin-left: 0; height: 44px; font-size: 16px; }
  #sc-app .sc-acts { gap: 0; }
  #sc-app .sc-acts .sv-sep { display: none; }
  #sc-app .sc-acts .sc-btn { height: 44px; width: 44px; padding: 0; justify-content: center; border-color: transparent; background: transparent; }
  #sc-app .sc-acts .sc-btn.pri { background: var(--ink); border-color: var(--ink); }
  #sc-app .sc-acts .sc-btn .sc-lbl {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  #sc-app .sc-acts .sv-iconbtn { width: 44px; height: 44px; }
  /* The report is the Report screen in the sidebar, and a new case is in
     the search, so on a phone the toolbar keeps the case's name readable. */
  #sc-app #scReportTop, #sc-app #scNew { display: none; }
  .sc-case-view .sv-inspect { width: min(320px, 88vw); }
  .sc-evtab .sv-tab-label { font-size: 11.5px; }
}

/* ------------------------------------------------------------ in the suite */

/* Opened inside the Sovereign application the window around it already has
   the way home, Sign in, the plan and the theme, so the Console keeps its
   tabs, its case and its tools and drops the rest. */
html.sv-embedded .sc-site,
html.sv-embedded .sc-brand { display: none !important; }
html.sv-embedded #sc-app main#obscuraMainContent { padding-top: 0 !important; }

/* ------------------------------------------------ the forensic workbench */

/* The Console's Pro screens (pro-code/sovereign-console-*.js) draw with the
   case's own vocabulary; these are the few parts they add: forms of
   labelled fields, step lists, a histogram, and the evidence tree. */

#sc-app .sc-pro-tag { font: 600 var(--text-2xs)/1 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--accent-strong); background: var(--accent-soft); padding: 3px 6px; border-radius: var(--radius-pill); }
#sc-app .sc-bd-flush { padding: 0; }
#sc-app .sc-faint { color: var(--ink-faint); font-family: var(--font-sans); }
#sc-app .sc-small { margin: 10px 0; font-size: var(--text-xs); line-height: 1.55; color: var(--ink-soft); max-width: 72ch; }
#sc-app .sc-status { margin: 4px 0 14px; font: var(--text-2xs)/1.5 var(--font-mono); color: var(--ink-soft); min-height: 1.5em; }

/* An artifact taken out of another sits under it in the sidebar. */
#sc-app .sc-ev-child { position: relative; }
#sc-app .sc-ev-d1 { padding-left: 20px; }
#sc-app .sc-ev-d2 { padding-left: 32px; }
#sc-app .sc-ev-d3 { padding-left: 44px; }
#sc-app .sc-ev-d4 { padding-left: 56px; }
#sc-app .sc-ev-child::before { content: ""; position: absolute; top: 50%; width: 7px; border-top: 1px solid var(--rule-strong); margin-left: -11px; }

/* Forms: a row of labelled fields that wraps. */
#sc-app .sc-form { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 12px; }
#sc-app .sc-form label { display: flex; flex-direction: column; gap: 5px; flex: 1 1 200px; min-width: 0; font: 600 var(--text-2xs)/1.3 var(--font-sans); color: var(--ink-soft); }
#sc-app .sc-form-search label:first-child { flex-basis: 320px; }
#sc-app .sc-form input[type=text] { width: 100%; min-width: 0; }
#sc-app .sc-row input[type=text]:not(.sc-casename), #sc-app .sc-row input[type=password] { flex: 1 1 180px; width: auto; min-width: 0; }
#sc-app select { font: var(--text-xs)/1.4 var(--font-sans); color: var(--ink); background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); padding: 7px 8px; max-width: 100%; }
#sc-app select:focus { outline: 2px solid var(--focus); outline-offset: -1px; border-color: transparent; }
#sc-app input[type=file] { font: var(--text-xs)/1.4 var(--font-sans); color: var(--ink-soft); max-width: 100%; }
#sc-app .sc-check { display: inline-flex; align-items: center; gap: 7px; font: var(--text-xs)/1.3 var(--font-sans); color: var(--ink-soft); cursor: pointer; }
#sc-app .sc-check input { margin: 0; }
#sc-app .sc-inline { width: 100%; min-width: 120px; padding: 5px 8px; }
#sc-app .sc-chip.on { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-strong); }
#sc-app .sc-chip:disabled { opacity: .45; cursor: not-allowed; }
#sc-app .sc-tags { gap: 6px 12px; }
#sc-app .sc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 0 0 6px; font: var(--text-xs)/1.4 var(--font-mono); color: var(--ink-faint); }

/* Search hits: the match marked in its context. */
#sc-app .sc-ctx { white-space: pre-wrap; overflow-wrap: anywhere; }
#sc-app .sc-ctx mark { background: var(--accent-soft); color: var(--accent-strong); border-radius: var(--radius-sm); padding: 0 1px; }

/* Sigma rules and recipes */
#sc-app .sc-rules { min-height: 260px; font-size: var(--text-2xs); margin-bottom: 12px; }
#sc-app .sc-steps { list-style: none; counter-reset: sc-step; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#sc-app .sc-steps li { counter-increment: sc-step; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-raised); }
#sc-app .sc-steps li::before { content: counter(sc-step); align-self: center; min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--paper-inset); font: 600 var(--text-2xs)/1 var(--font-sans); color: var(--ink-soft); }
#sc-app .sc-step-name { align-self: center; font: 600 var(--text-xs)/1.3 var(--font-sans); color: var(--ink); min-width: 140px; }
#sc-app .sc-steps label { display: flex; flex-direction: column; gap: 4px; font: 600 var(--text-2xs)/1.3 var(--font-sans); color: var(--ink-soft); flex: 1 1 150px; min-width: 0; }
#sc-app .sc-step-acts { margin-left: auto; align-self: center; white-space: nowrap; }
#sc-app .sc-rc-range, #sc-app .sc-rc-paste { display: none; }
#sc-app .sc-rc-ranged .sc-rc-range { display: flex; }
#sc-app .sc-rc-pasted .sc-rc-paste { display: block; margin-bottom: 12px; }
#sc-app .sc-rc-text, #sc-app .sc-xml { max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Event log findings and sweeps: a finding's words wrap, however long the
   command line or encoded string inside them; on a phone each row stacks. */
#sc-app .sc-fds table.sc-t td.sc-fd-meta { width: 210px; }
#sc-app .sc-fds table.sc-t td.sc-fd-meta b { display: block; color: var(--ink); font-weight: 600; }
#sc-app .sc-fds table.sc-t td.sc-fd-meta span { display: block; font: var(--text-2xs)/1.5 var(--font-mono); font-variant-numeric: tabular-nums; }
#sc-app .sc-fds table.sc-t td.sc-fd-text { white-space: normal; overflow-wrap: anywhere; color: var(--ink); }
#sc-app .sc-fds table.sc-t td.sc-fd-text .sc-cp { display: inline-block; margin: 6px 0 0; min-height: 32px; }
#sc-app .sc-sw table.sc-t td { white-space: normal; overflow-wrap: anywhere; }
#sc-app .sc-sw table.sc-t td:first-child { width: 40%; }
#sc-app .sc-sw table.sc-t td b { color: var(--ink); font-weight: 600; }
#sc-app .sc-sw table.sc-t td .sc-cp { display: inline-block; margin: 6px 0 0; min-height: 32px; }

/* The super timeline's bars: a bar is a way in to its range. */
#sc-app .sc-hist { display: block; width: 100%; height: 90px; }
#sc-app .sc-hist rect { fill: var(--accent); }
#sc-app .sc-hist rect.sc-hist-hit { fill: transparent; cursor: zoom-in; }
#sc-app .sc-hist rect.sc-hist-hit:hover { fill: var(--accent-soft); }
#sc-app .sc-stl { padding: 14px 16px 0 34px; }

/* The lock: what Pro adds, and the way to it. */
#sc-app .sc-lock-gets { list-style: none; margin: 0 0 22px; padding: 0; max-width: 72ch; }
#sc-app .sc-lock-gets li { padding: 10px 0; border-top: 1px solid var(--rule); font-size: var(--text-xs); line-height: 1.55; color: var(--ink-soft); }
#sc-app .sc-lock-gets li:last-child { border-bottom: 1px solid var(--rule); }
#sc-app .sc-lock-gets b { color: var(--ink); font-weight: 600; }
#sc-app .sc-lock-wall .pro-wall { margin: 0; max-width: 640px; }

@media (max-width: 640px) {
  #sc-app .sc-form label { flex-basis: 100%; }
  #sc-app .sc-fds table.sc-t tr:first-child, #sc-app .sc-sw table.sc-t tr:first-child { display: none; }
  #sc-app .sc-fds table.sc-t td, #sc-app .sc-sw table.sc-t td { display: block; width: auto; min-width: 0; border-bottom: none; }
  #sc-app .sc-fds table.sc-t td.sc-fd-meta, #sc-app .sc-sw table.sc-t td:first-child { width: auto; padding-bottom: 0; }
  #sc-app .sc-fds table.sc-t tr, #sc-app .sc-sw table.sc-t tr { display: block; border-bottom: 1px solid var(--sc-line); }
  #sc-app .sc-fds .sc-cp, #sc-app .sc-sw .sc-cp { min-height: 44px; padding: 0 14px; }
  #sc-app .sc-step-acts { margin-left: 0; }
  #sc-app select, #sc-app .sc-check { min-height: 44px; }
}