/* ── Molstudio Lab · console layer ───────────────────────────────────────────
 *
 * The Lab was laid out as a document: a sidebar of cards, a centre column of
 * stacked strips, a second sidebar of browsable capability cards with a headline
 * and a paragraph of prose under each one, and the molecule in a small window in
 * the middle of it all. Reading matter arranged around a picture.
 *
 * Structural biology software is laid out as an instrument. ICM-Pro, PyMOL and
 * Coot all resolve to the same three facts: the graphics window is the surface and
 * everything else is thin furniture docked around it; the object tree carries its
 * controls on every row rather than in a panel somewhere else; and the console
 * keeps what it printed. Nothing explains itself — the software reports state.
 *
 * This layer restates the Lab on those terms. It sits after the component
 * stylesheet, which keeps every layout behaviour that file guarantees — the
 * toolbar that wraps rather than crushing its labels, the responsive columns, the
 * absolutely-positioned display rack — and changes what the workbench *is*:
 *
 *   · The viewport goes from a fifth of the window to nearly half. Panels lose
 *     100px each, the toolbar loses 23px, and the sequence strip stops being a
 *     stacked panel and becomes a ribbon of viewport furniture.
 *   · Density roughly doubles. Rows go 61px → 22px, headings 49px → 24px,
 *     buttons 36px → 22px. Eleven tools fit where four did.
 *   · Monospace becomes the interface face, not a decoration for code. Numbers
 *     line up in a column down the panel, which is the entire point of a readout.
 *   · One accent. The acid green already used for "run" now means live state and
 *     nothing else; every other colour is a neutral or an evidence class.
 *
 * The palette is the Lab's own dark chrome — #102a26 from the masthead — pulled
 * out into a full ladder, with the viewport as the darkest surface in the app so
 * the structure inside it is the brightest thing on screen.
 */

:root{
  /* Surfaces, darkest first. */
  --cn-void:#040908;          /* the viewport well */
  --cn-shell:#0a1211;         /* app ground */
  --cn-chrome:#0e1917;        /* docked panels */
  --cn-raise:#142120;         /* rows, inputs, wells inside panels */
  --cn-raise-2:#1b2b28;       /* hover */
  --cn-rule:#1e2e2a;          /* hairline */
  --cn-rule-2:#2b403a;        /* hairline, emphasised */

  /* Type, four steps. Nothing is white: the brightest text sits at #c4d2cc, which is
     about 78% luminance rather than 100%, because a full-white glyph on a near-black
     ground haloes and is tiring to read down a column for an hour. The molecule is
     allowed to be the brightest thing on screen and the interface is not. */
  --cn-text:#c4d2cc;
  --cn-text-2:#8c9f99;
  --cn-text-3:#687a74;
  --cn-text-4:#4d5c57;

  /* One accent, and it means one thing: this is live, or this is the thing that runs.
     The acid is spent on the current tool, the current tab, and the two primary
     actions — nothing else. Availability, readiness and provenance were all shouting
     in three different colours at once; they are neutral now, and only the states that
     need attention keep a hue.

     The evidence classes stay coloured because they carry meaning a shape cannot —
     deposited against predicted against derived — but they are damped to sit under the
     accent rather than compete with it. */
  --cn-live:#d7ee67;
  --cn-live-dim:#6f8235;
  --cn-teal:#3f9d8a;
  --cn-cyan:#3f9dab;
  --cn-blue:#6484b8;
  --cn-amber:#c08346;
  --cn-violet:#8b7ab5;
  --cn-red:#c26761;

  --cn-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  --cn-cond:"IBM Plex Sans Condensed","IBM Plex Sans",ui-sans-serif,sans-serif;

  /* Furniture heights. Every one of these was between two and three times larger. */
  --cn-mast:34px;
  --cn-bar:26px;
  --cn-ribbon:21px;
  --cn-row:22px;
  --cn-console:78px;
  --cn-status:20px;

  color-scheme:dark;
  /* One accent means one accent. color-scheme:dark alone leaves native controls on the operating
     system's own accent, so a ticked checkbox, a selected radio and a dragged range thumb came up
     system blue in an interface whose only colour is the acid green — three widgets disagreeing
     with everything around them, and not ours to leave to a setting outside the page. */
  accent-color:var(--cn-live);
}

/* Retarget the component layer's tokens onto the console ladder, so the 474 places
   that already ask for a surface or a rule get the right one without being touched. */
:root{
  --sw-paper:var(--cn-shell);
  --sw-panel:var(--cn-chrome);
  --sw-panel-2:var(--cn-raise);
  --sw-ink:var(--cn-text);
  --sw-ink-2:var(--cn-text-2);
  --sw-muted:var(--cn-text-3);
  --sw-faint:var(--cn-text-4);
  --sw-line:var(--cn-rule);
  --sw-line-strong:var(--cn-rule-2);
  --sw-deep:#0b1513;
  --sw-deep-2:#122019;
  --sw-teal:var(--cn-teal);
  --sw-cyan:var(--cn-cyan);
  --sw-blue:var(--cn-blue);
  --sw-amber:var(--cn-amber);
  --sw-violet:var(--cn-violet);
  --sw-red:var(--cn-red);
  --sw-shadow:0 12px 34px rgba(0,0,0,.55);
}

html,body{background:var(--cn-shell);color:var(--cn-text)}
body{font-family:var(--cn-mono);font-size:11px;letter-spacing:.01em}

/* ── Shell ─────────────────────────────────────────────────────────────────── */

.sw-app{
  grid-template-rows:var(--cn-mast) minmax(0,1fr) var(--cn-console) var(--cn-status);
  background:var(--cn-shell);
}

/* The masthead halves in height and drops to one weight of type. A title bar on an
   instrument names the instrument and the specimen; it is not a place to design. */
/* The specimen title is the one thing here that can be any length, so it is the only
   column allowed to give ground. Everything else keeps its natural width, which stopped
   the state chips being crushed to 73px and overlapping the actions beside them. */
.sw-masthead{
  min-height:var(--cn-mast);height:var(--cn-mast);gap:0;padding:0;
  background:var(--cn-chrome);border-bottom:1px solid var(--cn-rule-2);
  grid-template-columns:auto minmax(0,1fr) auto auto;
}
.sw-masthead>*{min-width:0}
.sw-masthead-state,.sw-header-actions{flex:none;white-space:nowrap}
.sw-masthead::after{display:none}
.sw-brand{gap:7px;padding:0 11px;border-right:1px solid var(--cn-rule)}
.sw-brand svg{width:17px;height:17px}
.sw-brand-wordmark{font-family:var(--cn-mono);font-size:10px;letter-spacing:.17em;color:var(--cn-text-2)}
.sw-brand-wordmark strong{color:var(--cn-text)}
.sw-brand-wordmark span{color:var(--cn-live)}
.sw-project-heading{gap:8px;padding:0 11px;border-left:0;border-right:1px solid var(--cn-rule)}
.sw-kicker{display:none}
.sw-project-name{
  max-width:100%;padding:0;font-family:var(--cn-mono);font-size:11px;font-weight:500;
  letter-spacing:.01em;color:var(--cn-text-2);
}
.sw-project-name>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;display:block}
.sw-project-heading{min-width:0;overflow:hidden}
.sw-project-name svg{width:11px;height:11px}
.sw-masthead-state{gap:0;padding-right:8px}
.sw-state-chip{
  min-height:var(--cn-bar);padding:0 9px;border:0;border-left:1px solid var(--cn-rule);
  background:transparent;color:var(--cn-text-3);
  font:500 9px var(--cn-mono);letter-spacing:.13em;
}
.sw-header-actions{gap:0;padding-right:6px}
.sw-header-actions>.sw-button{
  min-height:var(--cn-bar);height:var(--cn-bar);padding:0 10px;border:0;
  border-left:1px solid var(--cn-rule);border-radius:0;background:transparent;
  color:var(--cn-text-2);font:500 9.5px var(--cn-mono);letter-spacing:.12em;
}
.sw-header-actions>.sw-button:hover{background:var(--cn-raise-2);color:var(--cn-text)}
.sw-header-actions>.sw-button--transfer{
  margin-left:7px;padding:0 11px;border:1px solid var(--cn-live);
  background:var(--cn-live);color:#0b1513;font-weight:600;
}
.sw-header-actions>.sw-button--transfer:hover{background:#eefb9e;border-color:#eefb9e}

/* ── Docked panels ─────────────────────────────────────────────────────────────
 *
 * 268px and 344px of furniture around a 500px viewport is a document with a
 * picture in it. 206 and 252 around a 700px viewport is a workbench. */
.sw-workspace{grid-template-columns:206px minmax(0,1fr) 252px;background:var(--cn-shell)}
.sw-structure-panel,.sw-notebook{background:var(--cn-chrome);scrollbar-color:var(--cn-rule-2) transparent}
.sw-structure-panel{border-right:1px solid var(--cn-rule-2)}
.sw-notebook{border-left:1px solid var(--cn-rule-2)}
.sw-center{background:var(--cn-void)}

/* Panel title bars: 24px, one line, no headline. */
.sw-panel-heading{
  min-height:24px;height:24px;padding:0 8px;
  background:var(--cn-raise);border-bottom:1px solid var(--cn-rule-2);
}
.sw-panel-heading h2{
  font:600 9px var(--cn-mono)!important;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cn-text-3);
}
.sw-panel-heading .sw-index,.sw-index{
  width:13px;height:13px;border-radius:0;background:var(--cn-rule-2);color:var(--cn-text-2);
  font:600 8px var(--cn-mono);display:inline-grid;place-items:center;
}
.sw-icon-button{width:18px;height:18px;border-color:var(--cn-rule-2);border-radius:0;font-size:12px;color:var(--cn-text-2)}
.sw-icon-button:hover{background:var(--cn-raise-2);color:var(--cn-text)}

.sw-section-label{font-size:8.5px;letter-spacing:.16em;color:var(--cn-text-4)}
.sw-count{font-size:8.5px;color:var(--cn-text-4)}
.sw-source-summary,.sw-identity-controls,.sw-tree-section,.sw-state-key{
  padding:8px 8px 9px;border-bottom:1px solid var(--cn-rule);
}
.sw-section-row{margin-bottom:5px}

.sw-source-empty{
  grid-template-columns:20px 1fr;gap:7px;margin-top:6px;padding:6px 7px;
  border:1px dashed var(--cn-rule-2);background:var(--cn-raise);
}
.sw-empty-mark{width:18px;height:18px;font-size:11px}
.sw-source-empty strong{font:600 10px var(--cn-mono);color:var(--cn-text-2)}
.sw-source-empty small,.sw-source-empty span small{font-size:9px;color:var(--cn-text-4);line-height:1.35}
.sw-source-loaded{margin-top:6px}
.sw-source-loaded>span{padding:1px 4px;background:var(--cn-rule-2);color:var(--cn-text-2);font-size:8px}
.sw-source-loaded strong{
  display:block;margin-top:4px;font:500 10.5px var(--cn-mono);line-height:1.35;color:var(--cn-text);
  /* A four-line deposition title is a caption, not a heading. */
  max-height:2.7em;overflow:hidden;
}
.sw-source-loaded small{font-size:9px;color:var(--cn-text-4)}

/* Identity selects: label and control on one 20px line. */
.sw-identity-controls label{grid-template-columns:52px minmax(0,1fr);gap:6px;margin-top:5px}
.sw-identity-controls label>span{font-size:9px;color:var(--cn-text-3)}
.sw-identity-controls select,.sw-center select,.sw-command-bar select{
  min-height:20px;height:20px;padding:0 5px;border:1px solid var(--cn-rule-2);border-radius:0;
  background:var(--cn-raise);color:var(--cn-text);font:500 10px var(--cn-mono);
}
.sw-identity-controls>p{margin-top:7px;font-size:9px;line-height:1.4;color:var(--cn-text-4)}

/* ── Object tree ───────────────────────────────────────────────────────────────
 *
 * The tree was a list of cards. In every viewer that does this well, each row of
 * the tree carries its own controls — visibility, representation, colour — because
 * that is what the tree is for. Rows are 22px and monospaced so chain ids, residue
 * counts and atom counts form columns you can read down. */
.sw-tree{font-family:var(--cn-mono);font-size:10px}
.sw-tree-empty{padding:8px;border-left:2px solid var(--cn-rule-2);color:var(--cn-text-4)}
.sw-tree-empty span{font-size:10px;color:var(--cn-text-3)}
.sw-tree-empty small{font-size:9px;line-height:1.4}
.sw-scene-object,.sw-scene-object-row{
  min-height:var(--cn-row);padding:0 6px;border:0;border-bottom:1px solid var(--cn-rule);
  border-radius:0;background:transparent;
}
.sw-scene-object:hover,.sw-scene-object-row:hover{background:var(--cn-raise-2)}
.sw-scene-object-main{gap:6px;font:500 10px var(--cn-mono)}
.sw-scene-object-main strong{font-weight:500;color:var(--cn-text)}
.sw-scene-object-provenance,.sw-scene-object-actions{font-size:8.5px;color:var(--cn-text-4)}

.sw-state-key dl>div{padding:3px 0;border-top:1px solid var(--cn-rule)}
.sw-state-key dt{font-size:8.5px;letter-spacing:.1em;color:var(--cn-text-3)}
.sw-state-key dd{margin:1px 0 0;font-size:9px;line-height:1.35;color:var(--cn-text-4)}
[data-kind]{width:6px;height:6px}

/* ── Viewport furniture ────────────────────────────────────────────────────────
 *
 * The toolbar and the sequence strip were two stacked panels totalling 132px above
 * the graphics window. They are now 26px of controls and a 23px ribbon, and both
 * read as furniture attached to the viewport rather than as sections of a page. */
.sw-context-toolbar{
  min-height:var(--cn-bar);gap:0 8px;padding:0 7px;
  background:var(--cn-chrome);border-bottom:1px solid var(--cn-rule-2);
}
.sw-tool{
  min-height:20px;height:20px;padding:0 8px;border:0;border-radius:0;background:transparent;
  color:var(--cn-text-2);font:500 10px var(--cn-mono);letter-spacing:.04em;
}
.sw-tool:hover{background:var(--cn-raise-2);color:var(--cn-text)}
.sw-tool.is-active,.sw-tool[aria-pressed="true"]{background:var(--cn-live);color:#0b1513;font-weight:600}
.sw-tool>span[aria-hidden]{opacity:.75;margin-right:1px}
.sw-view-controls{gap:6px}
.sw-view-controls>*{font-size:10px}

.sw-sequence-strip{min-height:0;background:var(--cn-chrome);border-bottom:1px solid var(--cn-rule-2)}
.sw-sequence-heading{
  height:var(--cn-ribbon);min-height:var(--cn-ribbon);padding:0 8px;
  border-bottom:1px solid var(--cn-rule);background:var(--cn-raise);
}
.sw-sequence-heading strong,.sw-sequence-heading span{font:600 8.5px var(--cn-mono);letter-spacing:.15em;color:var(--cn-text-3)}
.sw-sequence-meta{font-size:8.5px;color:var(--cn-text-4)}
/* ── Sequence ruler ────────────────────────────────────────────────────────────
 *
 * The letters carried no numbering at all, so a residue could be picked out of the
 * row but not named without hovering it. Every sequence viewer worth using puts a
 * ruler over the letters, and the numbers on it are the deposited ones: a chain that
 * begins at 10, or that has a gap where residues were not modelled, must not be
 * labelled with positions that do not exist in the file.
 *
 * Cells are a fixed 11px so the ruler and the letters stay in register, and a number
 * is allowed to overhang its own cell — three digits do not fit in eleven pixels and
 * centring them on their tick is what makes the ruler readable. */
.sw-sequence-content{padding:0;background:var(--cn-chrome)}
.sw-sequence-chain{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:0 6px;padding:2px 8px 3px}
.sw-sequence-chain-label{
  grid-row:1/3;align-self:center;min-width:13px;height:15px;display:inline-grid;place-items:center;
  background:var(--cn-rule-2);color:var(--cn-text-2);font:600 9px var(--cn-mono);
}
.sw-sequence-ruler{grid-column:2;display:flex;height:11px;overflow:hidden}
.sw-sequence-tick{
  position:relative;flex:none;width:11px;height:11px;
  font:500 8px var(--cn-mono);color:var(--cn-text-4);
}
.sw-sequence-tick[data-mark="number"]{
  overflow:visible;white-space:nowrap;
  /* Centred on its own tick and free to overhang the neighbours, which have nothing in
     them: a three-digit number is 18px wide and its cell is 11. */
  display:grid;place-items:end center;
}
.sw-sequence-tick[data-mark="number"]::after{
  content:"";position:absolute;left:50%;bottom:-1px;width:1px;height:3px;background:var(--cn-rule-2);
}
.sw-sequence-tick[data-mark="half"]::after{
  content:"";position:absolute;left:50%;bottom:-1px;width:1px;height:2px;background:var(--cn-rule);
}
.sw-sequence-letters{grid-column:2;display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.sw-residue{
  flex:none;width:11px;height:15px;padding:0;border:0;border-radius:0;background:transparent;
  color:var(--cn-text-2);font:500 10px var(--cn-mono);text-align:center;
}
.sw-residue:hover{background:var(--cn-raise-2);color:var(--cn-text)}
.sw-residue[aria-pressed="true"],.sw-residue.is-selected{background:var(--cn-live);color:#0b1513}
.sw-residue[data-observed="false"]{color:var(--cn-text-4)}
.sw-sequence-empty{padding:6px 8px;font:400 9.5px var(--cn-mono);color:var(--cn-text-4)}
.sw-sequence-content>p{padding:6px 8px;margin:0;font-size:9.5px;color:var(--cn-text-4)}

/* The well. Darkest surface in the application, so the structure is the brightest
   thing in it — which is the whole reason these programs are dark. */
.sw-viewport-shell{background:var(--cn-void)}
.sw-viewport-shell::before{
  background:radial-gradient(circle at 50% 44%,rgba(69,200,173,.055),transparent 62%);
}
.sw-viewport-grid{
  opacity:.5;
  background-image:linear-gradient(rgba(120,168,152,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(120,168,152,.045) 1px,transparent 1px);
}
.sw-viewport-readout{font-size:8.5px;letter-spacing:.12em;color:var(--cn-text-3)}
.sw-axis-triad{left:12px;bottom:30px;width:42px;height:42px}

/* ── Tool palette ──────────────────────────────────────────────────────────────
 *
 * Each tool was a 61px card: name, a line of description, and a state chip. The
 * description is documentation — it belongs in a tooltip, not in the palette. As a
 * 22px row with the state right-aligned, eleven tools fit where four did, and the
 * state chips line up into a column you can scan. */
.sw-notebook-tabs{
  top:24px;height:22px;background:var(--cn-raise);border-bottom:1px solid var(--cn-rule-2);
}
.sw-notebook-tab{
  border:0;background:transparent;color:var(--cn-text-3);
  font:600 9px var(--cn-mono);letter-spacing:.15em;
}
.sw-notebook-tab[aria-selected="true"],.sw-notebook-tab.is-active{
  background:var(--cn-chrome);color:var(--cn-text);box-shadow:inset 0 -2px 0 var(--cn-live);
}
.sw-notebook-body{padding-bottom:6px}

.sw-family-bar{gap:0;padding:0;border-bottom:1px solid var(--cn-rule)}
.sw-family-bar>button{
  min-height:20px;padding:0 7px;border:0;border-right:1px solid var(--cn-rule);border-radius:0;
  background:transparent;color:var(--cn-text-3);font:500 9px var(--cn-mono);letter-spacing:.1em;
}
.sw-family-bar>button:hover{background:var(--cn-raise-2);color:var(--cn-text)}
.sw-family-bar>button[aria-pressed="true"],.sw-family-bar>button.is-active{
  background:var(--cn-raise-2);color:var(--cn-text);box-shadow:inset 0 -2px 0 var(--cn-live);
}

.sw-family-search input,.sw-notebook input[type="search"],.sw-notebook input[type="text"]{
  min-height:22px;height:22px;padding:0 7px;border:1px solid var(--cn-rule-2);border-radius:0;
  background:var(--cn-raise);color:var(--cn-text);font:400 10px var(--cn-mono);
}
.sw-family-search{margin:6px;}

/* The editorial headline goes. A palette section needs a label, not a title and a
   paragraph explaining what the section is for. */
.sw-domain-heading{padding:0 8px;height:20px;display:flex;align-items:center;background:var(--cn-raise);border-bottom:1px solid var(--cn-rule)}
.sw-domain-heading>span{font:600 8.5px var(--cn-mono);letter-spacing:.16em;color:var(--cn-text-3)}
.sw-domain-heading h3{display:none}
.sw-domain-heading p{display:none}

.sw-capability{
  min-height:var(--cn-row);padding:0 8px;gap:6px;
  border-bottom:1px solid var(--cn-rule);background:transparent;
}
.sw-capability:hover{background:var(--cn-raise-2)}
.sw-capability>span{display:flex;align-items:center;gap:6px;min-width:0}
.sw-capability strong{font:500 10.5px var(--cn-mono);color:var(--cn-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw-capability small{display:none}
.sw-capability em{
  flex:none;max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:0 4px;font:500 8px var(--cn-mono);letter-spacing:.1em;text-transform:uppercase;
  font-style:normal;color:var(--cn-text-4);border:1px solid var(--cn-rule);background:transparent;
}
/* "Built in · current polymer" wrapped to three lines and made its row 33px where the
   others are 22, so the palette lost the column the rows were forming. The chip keeps
   its own words — a reader needs to know *what* is missing, not merely that something
   is — and clips on one line, with the full phrase on the title one hover away.

   Ready is the quiet case and reads as a neutral. Only the states that want something
   from you take a hue, which is why most of this column is now grey. */
/* Availability was three filled pills in three different hues — a mint one for ready, a
   sand one for a provider, a lilac one for setup — stacked eleven deep down a 250px
   column. Eleven lit chips is not information, it is a pattern. Ready is the ordinary
   case and goes silent; only a state that wants something from you keeps a hue, and even
   then it is the outline that carries it rather than a fill. */
[data-availability]{background:transparent!important;border-color:var(--cn-rule)!important;color:var(--cn-text-4)!important}
[data-availability="needs"],[data-availability="setup"],[data-availability="provider"]{
  color:var(--cn-amber)!important;border-color:rgba(192,131,70,.34)!important;
}
[data-availability="service"]{color:var(--cn-cyan)!important;border-color:rgba(63,157,171,.3)!important}
.sw-capability[data-unmet="true"] strong{color:var(--cn-text-3)}
.sw-capability[disabled] strong,.sw-capability[aria-disabled="true"] strong{color:var(--cn-text-3)}

/* ── Console ───────────────────────────────────────────────────────────────────
 *
 * A command line with no scroll-back is a text box. What makes PyMOL's console the
 * centre of the program is that it keeps what it printed, so the session has a
 * record you can read back. The strip becomes a log with an input under it. */
.sw-command-bar{
  grid-template-columns:minmax(0,1fr);gap:0;padding:0;
  background:var(--cn-chrome);border-top:1px solid var(--cn-rule-2);
  display:grid;grid-template-rows:minmax(0,1fr) var(--cn-bar);
  /* Stretch, not centre. The component layer centres this bar's children, which was right when
     it held one row of controls and is wrong now that it holds a log: a grid item aligned to
     centre is sized to its own content rather than to its track, so the scroll-back grew with
     every line it printed and painted upward over the viewport instead of scrolling. Adding a
     ligand prints four lines, which was enough to cover the structure completely — the viewport
     looked blank and the molecule was behind it the whole time. */
  align-items:stretch;align-content:stretch;
}
.sw-command-label{display:none}
.sw-console-log{
  /* Belt and braces: an explicit height, so the scroll-back is bounded by arithmetic and not by
     whatever a parent's alignment happens to be. A log that can grow is a log that can hide the
     thing you are looking at. */
  height:calc(var(--cn-console) - var(--cn-bar) - 1px);
  max-height:calc(var(--cn-console) - var(--cn-bar) - 1px);
  min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 9px 3px;
  background:var(--cn-void);font:400 10px var(--cn-mono);line-height:1.5;color:var(--cn-text-3);
  scrollbar-width:thin;scrollbar-color:var(--cn-rule-2) transparent;
}
.sw-console-line{display:flex;gap:8px;white-space:pre-wrap;word-break:break-word}
.sw-console-line::before{content:attr(data-mark);flex:none;width:9px;color:var(--cn-text-4)}
.sw-console-line[data-level="run"]{color:var(--cn-text)}
.sw-console-line[data-level="run"]::before{color:var(--cn-live)}
.sw-console-line[data-level="warn"]{color:var(--cn-amber)}
.sw-console-line[data-level="error"]{color:var(--cn-red)}
.sw-console-line em{font-style:normal;color:var(--cn-text-4)}
.sw-console-input{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:0;
  border-top:1px solid var(--cn-rule-2);background:var(--cn-chrome);
}
/* Everything in the input row is exactly the row's height. The base stylesheet sizes the command
   field at 36px, which was right for a 7px-padded strip and is ten pixels taller than the 26px
   track it sits in here — so it painted up over the scroll-back, the same fault as the log
   overflowing the bar and the module list overflowing the status strip. The row clips as a
   backstop: nothing inside a status furniture row should ever be taller than the row. */
.sw-console-input{overflow:hidden}
.sw-console-input>*{max-height:var(--cn-bar)}
.sw-command-mode{display:flex;align-items:center;height:var(--cn-bar);padding-left:6px;border-right:1px solid var(--cn-rule)}
.sw-command-mode select{min-height:20px;height:20px;margin-right:6px;border:0;background:transparent;color:var(--cn-text-2);font:500 10px var(--cn-mono)}
.sw-command-input{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;min-width:0;height:var(--cn-bar);border:0}
.sw-prompt{display:inline-grid;place-items:center;width:20px;color:var(--cn-live);font:600 12px var(--cn-mono)}
.sw-shortcut{display:flex;align-items:center;height:var(--cn-bar);gap:4px;padding:0 9px;border-left:1px solid var(--cn-rule);color:var(--cn-text-4);font:500 9px var(--cn-mono)}
.sw-shortcut kbd{min-width:0;height:15px;padding:0 3px;border:1px solid var(--cn-rule-2);border-bottom-width:1px;background:var(--cn-raise);font:500 9px var(--cn-mono);color:var(--cn-text-3)}
.sw-command-bar input[type="text"],.sw-command-bar input:not([type]){
  min-height:var(--cn-bar);height:var(--cn-bar);padding:0 8px;border:0;border-radius:0;
  background:transparent;color:var(--cn-text);font:400 11px var(--cn-mono);
}
.sw-command-bar input::placeholder{color:var(--cn-text-4)}
.sw-command-bar .sw-button--run,.sw-command-bar button[type="submit"]{
  min-height:var(--cn-bar);height:var(--cn-bar);min-width:56px;padding:0 12px;border:0;border-radius:0;
  background:var(--cn-live);color:#0b1513;font:600 10px var(--cn-mono);letter-spacing:.14em;
}
.sw-command-prompt{
  display:inline-grid;place-items:center;width:20px;height:var(--cn-bar);
  color:var(--cn-live);font:600 11px var(--cn-mono);
}

/* ── Status readout ────────────────────────────────────────────────────────────
 *
 * A status bar on an instrument reads out state. This one listed which code
 * modules had loaded, which is a fact about the program rather than about the
 * work — so it moves to the right and shrinks, and the state comes first. */
.sw-provenance-strip{
  min-height:var(--cn-status);height:var(--cn-status);padding:0 9px;gap:12px;
  background:var(--cn-chrome);border-top:1px solid var(--cn-rule-2);
  /* A status bar is a fixed row: it reports state, it does not resize to fit what it has to
     say. Without this the module list wrapped to two lines inside a twenty-pixel strip and
     printed over the console above it, and the privacy note was cut off mid-word with no
     ellipsis to say it had been. The strip clips; the tracks decide who gives way. */
  align-items:center;overflow:hidden;
  /* The operating state on the left keeps its width; the two boilerplate readouts share what is
     left and give way together. Letting the note take its natural width starved the lamps down
     to one entry, which is not a readout either. */
  grid-template-columns:auto minmax(0,1fr) minmax(0,1.1fr);
}
.sw-provenance-primary{gap:7px;font:500 9.5px var(--cn-mono);color:var(--cn-text-2);min-width:0;overflow:hidden}
.sw-provenance-primary [data-workbench-status]{color:var(--cn-text);overflow:hidden;text-overflow:ellipsis}
.sw-provenance-note,.sw-module-status{font-size:8.5px;letter-spacing:.09em;color:var(--cn-text-4)}
/* The note is a claim about where the data goes, so it truncates last and says so with an
   ellipsis when it must. The module lamps give way first — see below for why. */
.sw-provenance-note{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw-module-status{
  gap:7px;min-width:0;overflow:hidden;flex-wrap:nowrap;white-space:nowrap;
  /* Truncation should look chosen, not broken. A hard cut through the middle of a module name
     reads as a rendering fault; a fade says the list continues and there was not room. */
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
}
.sw-module-status span{flex:none;white-space:nowrap}
/* Eleven lamps all lit is not a readout, it is decoration — the modules being loaded
   is the normal case and says nothing. They stay legible and stop being green. */
.sw-module-status i{background:var(--cn-text-4)!important;width:4px;height:4px}
.sw-module-status span{color:var(--cn-text-4)}
.sw-module-status span[data-module][data-state="error"] i{background:var(--cn-red)!important}
.sw-signal{width:5px;height:5px}

/* ── Range controls ────────────────────────────────────────────────────────────
 *
 * accent-color paints the filled half of a slider and leaves the rest to the
 * browser, which under a dark scheme still draws a pale track — a white bar
 * running across the toolbar beside the slab depth. Both halves are ours. */
.sw-command-bar input[type="range"],.sw-center input[type="range"],
.sw-view-slab input[type="range"],.sw-layer-opacity input[type="range"],
.sw-tool-dock input[type="range"],.sw-panel input[type="range"]{
  appearance:none;-webkit-appearance:none;height:14px;background:transparent;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:3px;border:0;border-radius:0;background:var(--cn-rule-2);
}
input[type="range"]::-moz-range-track{height:3px;border:0;border-radius:0;background:var(--cn-rule-2)}
input[type="range"]::-moz-range-progress{height:3px;background:var(--cn-live)}
input[type="range"]::-webkit-slider-thumb{
  appearance:none;-webkit-appearance:none;width:9px;height:13px;margin-top:-5px;
  border:0;border-radius:0;background:var(--cn-live);
}
input[type="range"]::-moz-range-thumb{width:9px;height:13px;border:0;border-radius:0;background:var(--cn-live)}
input[type="range"]:disabled::-webkit-slider-thumb{background:var(--cn-text-4)}
input[type="range"]:disabled::-moz-range-thumb{background:var(--cn-text-4)}

/* ── Everything that was a card ────────────────────────────────────────────── */
.sw-button{min-height:22px;border-radius:0;border-color:var(--cn-rule-2);background:var(--cn-raise);color:var(--cn-text);font:500 10px var(--cn-mono)}
.sw-button:hover{background:var(--cn-raise-2)}
.sw-button--primary{background:var(--cn-live);border-color:var(--cn-live);color:#0b1513;font-weight:600}
.sw-button--primary:hover{background:#eefb9e;border-color:#eefb9e}
.sw-button--outline{background:transparent;border-color:var(--cn-teal);color:var(--cn-teal)}
.sw-button--outline:hover{background:rgba(69,200,173,.1)}

.sw-welcome{
  padding:16px 18px;border:1px solid var(--cn-rule-2);background:var(--cn-chrome);
  box-shadow:var(--sw-shadow);border-top:2px solid var(--cn-live);
}
.sw-welcome h1{font:600 17px var(--cn-cond);letter-spacing:.01em;color:var(--cn-text);text-transform:none}
.sw-welcome-intro{font-size:10.5px;line-height:1.5;color:var(--cn-text-2)}
.sw-welcome-label{font:600 8.5px var(--cn-mono);letter-spacing:.16em;color:var(--cn-text-3)}
.sw-welcome-close{width:22px;height:22px;border-color:var(--cn-rule-2);font-size:13px}
.sw-import-mode{border-color:var(--cn-rule-2);background:var(--cn-raise);color:var(--cn-text-2)}
.sw-import-mode:hover{background:var(--cn-raise-2)}
/* The chosen mode is marked by its rule and its type going bright, not by a fill — a
   filled card next to an unfilled one reads as two different kinds of thing rather than
   as one of them being current. */
.sw-import-mode[aria-pressed="true"],.sw-import-mode.is-active{
  border-color:var(--cn-live-dim);background:var(--cn-raise-2);color:var(--cn-text);
  box-shadow:inset 2px 0 0 var(--cn-live);
}
.sw-import-mode[aria-pressed="true"] strong,.sw-import-mode.is-active strong{color:var(--cn-text)}
.sw-import-mode[disabled],.sw-import-mode[aria-disabled="true"]{opacity:.5}
.sw-import-mode strong{font:500 11px var(--cn-mono);color:var(--cn-text)}
.sw-import-mode small{font-size:9.5px;color:var(--cn-text-4)}
.sw-rcsb-import input{min-height:26px;border-radius:0;border-color:var(--cn-rule-2);background:var(--cn-raise);color:var(--cn-text);font-family:var(--cn-mono)}
.sw-welcome-classes>div{border-color:var(--cn-rule);background:var(--cn-raise)}
.sw-welcome-classes strong{font:600 8.5px var(--cn-mono);letter-spacing:.13em}
.sw-welcome-classes p{font-size:9px;line-height:1.4;color:var(--cn-text-4)}

.sw-display-rack{border-color:var(--cn-rule-2);border-top-color:var(--cn-live);background:rgba(14,25,23,.97)}
.sw-results-empty>span{color:var(--cn-rule-2);font-size:26px}
.sw-results-empty strong{font:500 11px var(--cn-mono);color:var(--cn-text-2)}
.sw-results-empty p{font-size:9.5px;color:var(--cn-text-4)}
.sw-provider-state{margin:6px;padding:7px;border-color:var(--cn-rule);background:var(--cn-raise)}
.sw-capability-setup{margin:6px;padding:7px;border-color:var(--cn-rule-2);border-left-color:var(--cn-amber);background:var(--cn-raise)}
.sw-context-menu{border-color:var(--cn-rule-2);background:var(--cn-chrome);box-shadow:var(--sw-shadow)}
/* Toasts sat forty-two pixels up, which cleared the old single-row command strip and lands in
   the middle of the console scroll-back now that the console is a log with a status bar under
   it. They clear the whole bottom chrome. */
.sw-toast-region{bottom:calc(var(--cn-console) + var(--cn-status) + 10px)}
.sw-toast-region>*{border-color:var(--cn-rule-2);background:var(--cn-chrome);color:var(--cn-text)}
/* Same for the in-viewport message, which is positioned against the viewport rather than the
   window and so only needs to clear the viewport's own bottom readout. */
.sw-view-message{bottom:34px;background:var(--cn-chrome);border-color:var(--cn-rule-2);color:var(--cn-text-2);box-shadow:0 6px 20px rgba(0,0,0,.5)}

::selection{background:var(--cn-live);color:#0b1513}
*:focus-visible{outline:2px solid var(--cn-live);outline-offset:1px}

/* ── Task workspace ────────────────────────────────────────────────────────────
 *
 * Opening Tools left the workbench entirely for a page that asked "What do you want
 * to do?" in forty-pixel type, over six cards each 145px tall with their text pushed
 * to the bottom and a hundred pixels of nothing above it. Below the grid, two thirds
 * of the screen was empty.
 *
 * An instrument does not ask. It shows the families and what is in them, at the
 * density of the palette they came from, so moving between the workbench and this
 * screen is not a change of medium.
 */
/* It was a full-bleed opaque takeover: the workbench vanished and 300 pixels of content
   sat at the top of an 840px void. As a bounded panel over a dimmed workbench it reads as
   what it is — a chooser — and the space around it is margin rather than emptiness. */
.sw-task-portal{
  background:rgba(4,9,8,.78);backdrop-filter:blur(2px);
  display:grid;grid-template-rows:auto minmax(0,auto);grid-template-columns:min(1000px,100%);
  place-content:center;justify-items:stretch;padding:26px;
}
/* The header and the body are two elements and have to read as one panel, so the border is
   split between them rather than drawn twice with a gap down the middle. */
.sw-task-portal>*{background:var(--cn-chrome);border-inline:1px solid var(--cn-rule-2)}
.sw-task-portal>.sw-task-header{
  border-top:1px solid var(--cn-rule-2);border-bottom:1px solid var(--cn-rule-2);
  box-shadow:var(--sw-shadow);
}
.sw-task-portal>.sw-task-body{
  min-height:0;overflow-y:auto;overscroll-behavior:contain;
  border-bottom:1px solid var(--cn-rule-2);box-shadow:var(--sw-shadow);
}
.sw-task-header{
  min-height:30px;height:30px;padding:0 10px;gap:10px;
  background:var(--cn-chrome);border-bottom:1px solid var(--cn-rule-2);
}
.sw-task-header>div>span{font:600 8.5px var(--cn-mono);letter-spacing:.16em;color:var(--cn-text-4)}
.sw-task-header h2{font:500 11px var(--cn-mono)!important;letter-spacing:.02em;color:var(--cn-text);text-transform:none}
.sw-task-header>span:last-child{font:600 8.5px var(--cn-mono);letter-spacing:.14em;color:var(--cn-text-4)}
.sw-button--back{
  min-height:20px;height:20px;padding:0 9px;border:1px solid var(--cn-rule-2);border-radius:0;
  background:var(--cn-raise);color:var(--cn-text-2);font:500 9.5px var(--cn-mono);letter-spacing:.1em;
}
.sw-button--back:hover{background:var(--cn-raise-2);color:var(--cn-text)}

.sw-task-body{padding:0}
/* The headline and its paragraph restated the header directly above them. */
.sw-task-intro{
  display:flex;align-items:center;gap:9px;min-height:26px;padding:0 10px;
  border-bottom:1px solid var(--cn-rule);background:var(--cn-raise);
}
.sw-task-intro h1,.sw-task-intro h2,.sw-task-intro h3{
  font:600 9px var(--cn-mono)!important;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cn-text-3);margin:0;font-size:9px!important;
}
.sw-task-intro p{margin:0;font:400 9.5px var(--cn-mono);color:var(--cn-text-4)}
.sw-task-intro>span:first-child{
  display:inline-grid;place-items:center;min-width:0;width:auto;height:15px;padding:0 5px;
  border:1px solid var(--cn-rule-2);background:transparent;
  font:600 8px var(--cn-mono);letter-spacing:.15em;color:var(--cn-text-3);
}

.sw-task-quick{gap:0;padding:0;border-bottom:1px solid var(--cn-rule);background:var(--cn-chrome)}
.sw-task-quick button{
  min-height:24px;height:24px;padding:0 10px;border:0;border-right:1px solid var(--cn-rule);border-radius:0;
  background:transparent;color:var(--cn-text-2);font:500 9.5px var(--cn-mono);letter-spacing:.11em;
}
.sw-task-quick button:hover{background:var(--cn-raise-2);color:var(--cn-text)}
.sw-task-quick button[data-action="send-to-studio"]{background:var(--cn-live);color:#0b1513;font-weight:600}

/* Families as rows, not posters: title and what is inside it, on two lines, in a
   column narrow enough to read across. */
.sw-task-grid{
  display:grid!important;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0;
  border-top:1px solid var(--cn-rule);
}
.sw-task-grid>button{
  display:grid!important;align-content:start;gap:2px;min-height:0!important;height:auto;
  padding:8px 11px 9px;border:0;border-right:1px solid var(--cn-rule);border-bottom:1px solid var(--cn-rule);
  border-radius:0;background:transparent;text-align:left;
}
.sw-task-grid>button:hover{background:var(--cn-raise-2)}
.sw-task-grid>button>strong{font:500 11px var(--cn-mono);letter-spacing:.02em;color:var(--cn-text);text-transform:none}
.sw-task-grid>button>small{font:400 9.5px var(--cn-mono);line-height:1.45;color:var(--cn-text-4)}

.sw-task-detail{padding:0}
.sw-task-detail-mount{padding:0}
.sw-task-home{padding:0}

/* The docked tool's state line was printing in the accent, which reserves that colour for
   things that are live or that run. A tool being docked is neither. */
.sw-tool-dock-state{color:var(--cn-text-3)!important;font:500 9px var(--cn-mono);letter-spacing:.1em}
.sw-tool-dock-bar{
  min-height:24px;padding:0 8px;background:var(--cn-raise);
  border-bottom:1px solid var(--cn-rule-2);
}
.sw-tool-dock-bar strong{font:500 10.5px var(--cn-mono);color:var(--cn-text)}
.sw-automation-ledger{border-color:var(--cn-rule-2)!important}

/* A docked tool restated its own name at seventeen pixels with a paragraph under it, directly
   below the row you clicked to open it. The palette already said which tool this is; what the
   panel owes you is its controls. The name stays as a label and the description as a line. */
.sw-tool-dock h3{font:600 10px var(--cn-mono)!important;letter-spacing:.15em;color:var(--cn-text-2);margin:0;text-transform:uppercase}
.sw-tool-dock h3+p,.sw-tool-dock>div>p:first-of-type{margin:3px 0 0;font:400 9.5px var(--cn-mono);line-height:1.45;color:var(--cn-text-4)}
.sw-tool-dock>div{padding:8px 9px}
.sw-tool-dock label>span,.sw-tool-dock .sw-field-label{font:600 8.5px var(--cn-mono);letter-spacing:.14em;color:var(--cn-text-3)}
.sw-tool-dock textarea,.sw-tool-dock input[type="text"],.sw-tool-dock input:not([type]){
  border:1px solid var(--cn-rule-2);border-radius:0;background:var(--cn-raise);color:var(--cn-text);
  font:400 10.5px var(--cn-mono);padding:6px 7px;
}
.sw-tool-dock textarea:focus,.sw-tool-dock input:focus{border-color:var(--cn-live-dim);outline:0}
/* Example expressions are things to click, not chips to admire. */
.sw-expression-examples button,.sw-tool-dock .sw-example{
  min-height:20px;padding:0 7px;border:1px solid var(--cn-rule);border-radius:0;background:transparent;
  color:var(--cn-text-3);font:400 9.5px var(--cn-mono);
}
.sw-expression-examples button:hover,.sw-tool-dock .sw-example:hover{background:var(--cn-raise-2);color:var(--cn-text)}

/* Virtual screening. The hit table is a heuristic ordering and nothing more, and the screening
   module now computes the evidence that says so: how strongly this particular order tracks
   ligand size, which rows found no pose rather than a poor one, and what the ranking is not.
   A caveat that stays in the JSON is not a caveat to whoever is reading the table, so these sit
   above and below it at the weight of the table itself rather than inside a title attribute. */
.sw-screening-evidence{
  margin:8px 0 0;padding:7px 9px;
  border:1px solid var(--cn-rule);border-left:2px solid var(--cn-rule-2);background:var(--cn-raise);
}
.sw-screening-evidence>strong{
  display:block;font:600 8.5px var(--cn-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--cn-text-3);
}
.sw-screening-evidence p{margin:4px 0 0;font:400 10px/1.5 var(--cn-mono);color:var(--cn-text-2)}
.sw-screening-evidence code{font:inherit;color:var(--cn-text-3)}
.sw-screening-figure{color:var(--cn-text)!important;font-variant-numeric:tabular-nums}
/* The accent means live or running, so a ranking that has turned out to be a size ordering
   takes the warning colour instead. */
.sw-screening-evidence[data-size-ordered="true"]{border-left-color:var(--cn-amber)}
.sw-screening-evidence[data-size-ordered="true"]>strong,
.sw-screening-evidence[data-size-ordered="true"] p strong,
.sw-screening-evidence[data-size-ordered="true"] .sw-screening-figure{color:var(--cn-amber)!important}

.sw-screening-conventions{margin:6px 0 0;font:400 9.5px/1.5 var(--cn-mono);color:var(--cn-text-4)}
.sw-screening-conventions span{
  margin-right:7px;font-weight:600;font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--cn-text-3);
}
.sw-screening-conventions code{font:inherit;color:var(--cn-text-3)}

/* A row that found nothing must not read as a row that scored badly: it is named in the last
   column and its whole line is tinted, so the order cannot be skimmed as if every rank were a
   measurement. */
.sw-torsion-table tr[data-flagged="true"]{background:rgba(192,131,70,.07)}
.sw-torsion-table td.sw-screening-flag{
  text-align:left;color:var(--cn-amber);font-size:9px;letter-spacing:.04em;
}
.sw-screening-legend{display:grid;gap:4px;margin:6px 0 0;padding:0;list-style:none}
.sw-screening-legend li{font:400 9.5px/1.5 var(--cn-mono);color:var(--cn-text-3)}
.sw-screening-legend em{
  margin-right:6px;font:600 8.5px var(--cn-mono);font-style:normal;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cn-amber);
}

.sw-screening-diagnostics{display:grid;gap:4px;margin:8px 0 0;padding:0;list-style:none}
.sw-screening-diagnostics li{
  padding-left:8px;border-left:2px solid var(--cn-rule-2);
  font:400 9.5px/1.5 var(--cn-mono);color:var(--cn-text-3);
}
.sw-screening-diagnostics li[data-severity="warning"],
.sw-screening-diagnostics li[data-severity="error"]{border-left-color:var(--cn-amber);color:var(--cn-amber)}
.sw-screening-diagnostics em{
  margin-right:6px;font:600 8.5px var(--cn-mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;
}

.sw-screening-limits{margin:8px 0 0;padding-top:6px;border-top:1px solid var(--cn-rule)}
.sw-screening-limits>strong{
  display:block;font:600 8.5px var(--cn-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--cn-text-3);
}
.sw-screening-limits ul{display:grid;gap:3px;margin:4px 0 0;padding:0 0 0 13px}
.sw-screening-limits li{font:400 9.5px/1.5 var(--cn-mono);color:var(--cn-text-4)}

/* The interaction diagram's caveats. The record behind that panel computes which of its own
   numbers are undetermined — an orientation nothing in the molecule fixes, a residue ring grown
   to fit its labels, atoms sitting on top of each other in projection — and the panel printed
   one of them into a status line. They are a block under the drawing now, and they need the
   console's own ladder: label, warning, note, in that order of weight. */
.sw-diagram{border-radius:0;border-color:var(--cn-rule-2)}
.sw-diagram-caveats{margin-top:11px;padding-top:9px;border-top:1px solid var(--cn-rule)}
.sw-diagram-caveats h4{
  margin:11px 0 0;font:600 8.5px var(--cn-mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--cn-text-3);
}
.sw-diagram-caveats .sw-label-summary{margin-top:0}
.sw-diagram-caveats .sw-label-diagnostics,.sw-diagram-caveats .sw-label-limitations{
  margin:5px 0 0;padding-left:13px;font:400 10px/1.5 var(--cn-mono);color:var(--cn-text-2);opacity:1;
}
/* The limitations read one step under the diagnostics and no further. Italic small print at the
   faintest step is how a caveat gets published without being read. */
.sw-diagram-caveats .sw-label-limitations{font-style:normal;color:var(--cn-text-3)}
.sw-diagram-caveats li{margin-top:4px}
/* One accent means live, so a warning here takes the amber and nothing else does. */
.sw-diagram-caveats .sw-label-diagnostics li[data-severity="warning"]{color:var(--cn-amber)}
.sw-diagram-overlap-list{margin:7px 0 0;font:400 10px/1.5 var(--cn-mono);color:var(--cn-amber)}

/* The cartoon panel's report of what the drawing leaves out. science-cartoon reports every
   residue it dropped, every run it could not spline, every place it cut the trace and every
   stretch where the ribbon's roll is a display choice — and none of it reached the eye until
   the panel had somewhere to put it. Warnings take the amber because something is missing from
   or arbitrary in the picture; notes stay neutral because they are choices, not defects. */
.sw-cartoon-report{display:grid;gap:8px;margin-top:9px}
.sw-cartoon-heading{grid-column:1/-1;margin:0;font:600 8.5px var(--cn-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--cn-text-3)}
.sw-cartoon-runs,.sw-cartoon-diagnostics{margin:0;padding-left:14px;font:400 10px var(--cn-mono);line-height:1.5;color:var(--cn-text-2)}
.sw-cartoon-runs li,.sw-cartoon-diagnostics li{margin:0 0 3px}
.sw-cartoon-runs li strong,.sw-cartoon-diagnostics li strong{font-weight:600;color:var(--cn-text)}
.sw-cartoon-diagnostics li[data-severity="warning"],.sw-cartoon-runs li[data-break="distance"]{color:var(--cn-amber)}
.sw-cartoon-diagnostics li[data-severity="warning"] strong,.sw-cartoon-runs li[data-break="distance"] strong{color:var(--cn-amber)}
/* A cut found by distance is the one that contradicts the file, so it keeps the hairline that
   draws the eye down the list to it. */
.sw-cartoon-runs li[data-break="distance"]{padding-left:6px;margin-left:-6px;box-shadow:inset 2px 0 0 var(--cn-amber)}
/* The limitations are the point of the panel, not its small print, so they read at the same
   step as the diagnostics rather than being dimmed to the edge of legibility. */
.sw-cartoon-report .sw-label-limitations{margin:0;padding-left:14px;font:400 10px var(--cn-mono);font-style:normal;line-height:1.5;color:var(--cn-text-3)}
.sw-cartoon-report .sw-label-summary{margin:0}
.sw-cartoon-refusal{margin:0;padding:5px 7px;border:1px solid var(--cn-rule-2);border-left:2px solid var(--cn-amber);background:var(--cn-raise);font:400 10px var(--cn-mono);line-height:1.5;color:var(--cn-amber)}
.sw-cartoon-conventions summary{min-height:var(--cn-row);display:flex;align-items:center;font:600 8.5px var(--cn-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--cn-text-3);cursor:pointer}
.sw-cartoon-conventions dl{display:grid;gap:4px;margin:2px 0 0}
.sw-cartoon-conventions dt{font:600 8.5px var(--cn-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cn-text-4)}
.sw-cartoon-conventions dd{margin:0;font:400 10px var(--cn-mono);line-height:1.5;color:var(--cn-text-3)}
/* The shape legend says what each subtype is for. It was wearing the limitations class, which
   made a list of eight display choices read as eight caveats. */
.sw-cartoon-shapes{grid-column:1/-1;margin:0;padding-left:14px;font:400 10px var(--cn-mono);line-height:1.5;color:var(--cn-text-3)}
.sw-cartoon-shapes li strong{font-weight:600;color:var(--cn-text-2)}

/* ── Narrow windows ────────────────────────────────────────────────────────────
 *
 * This layer had no media queries at all while the layer under it has eleven, and
 * every rule here is later in the cascade at equal specificity — so a stylesheet
 * written for one window size quietly won at all of them. Below 780px the base
 * layer stops being a fixed-height instrument and becomes a scrolling column: the
 * app grows a `mobile` row for the panel tabs, one panel shows at a time, and
 * every control that a finger has to hit is given 44px. All of that was overridden
 * back to desktop furniture, so the tabs stretched to 570px, the command bar and
 * the status strip landed on top of one another, and every touch target came out
 * at 20 to 26px.
 *
 * The console aesthetic is kept — the same palette, the same monospace, the same
 * one accent. What is given back is the geometry, because a 20px row is a design
 * decision about a mouse and there is not one here. */
@media(max-width:780px){
  /* Five rows and a document that scrolls, as the layer below intends. Naming the
     areas again matters: without the `mobile` row the panel tabs have no track of
     their own and take the height of whatever they land in. */
  .sw-app{
    height:auto;min-height:100dvh;overflow:visible;
    grid-template-rows:auto 45px auto auto auto;
    grid-template-areas:"mast" "mobile" "workspace" "command" "status";
  }
  .sw-mobile-panel-tabs button{min-height:44px;height:auto;color:var(--cn-text-2);font:600 9px var(--cn-mono)}
  .sw-mobile-panel-tabs button[aria-selected="true"]{background:var(--cn-raise);box-shadow:inset 0 -2px var(--cn-live);color:var(--cn-live)}

  /* Furniture heights are for a pointer that can hit a 20px row. A finger cannot.
     The console keeps its scroll-back and stops being a fixed 78px slab. */
  .sw-command-bar{height:auto;grid-template-rows:auto auto}
  .sw-console-log{height:auto;max-height:96px;min-height:52px}
  .sw-console-input{height:auto;overflow:visible;grid-template-columns:auto minmax(0,1fr) auto}
  .sw-console-input>*{max-height:none}
  .sw-command-input,.sw-command-mode,.sw-command-mode select{height:44px;min-height:44px}
  .sw-command-bar input[type="text"],.sw-command-bar input:not([type]){height:44px;min-height:44px;font-size:16px}
  .sw-command-bar .sw-button--run,.sw-command-bar button[type="submit"]{height:44px;min-height:44px}
  .sw-command-prompt,.sw-prompt{height:44px}
  /* The keyboard hint is a keyboard hint. */
  .sw-shortcut{display:none}

  /* The status strip stacks instead of clipping, because at this width there is no
     spare inch for the module lamps to give way into. */
  .sw-provenance-strip{
    height:auto;min-height:56px;padding:8px 10px;
    grid-template-columns:minmax(0,1fr);align-items:start;overflow:visible;
  }
  .sw-provenance-primary{white-space:normal;overflow:visible}
  .sw-module-status{order:2;overflow:visible;flex-wrap:wrap;white-space:normal;-webkit-mask-image:none;mask-image:none}
  .sw-provenance-note{white-space:normal;overflow:visible;text-overflow:clip}

  /* Anything a finger selects from. */
  .sw-tool,.sw-capability,.sw-button{min-height:44px}
  .sw-identity-controls select,.sw-center select{min-height:44px;height:44px}
  .sw-toast-region{bottom:16px}
}

/* Coarse pointers are not always narrow ones — a tablet in landscape is a wide
   window with no mouse in front of it, and the row heights above are a statement
   about a mouse. */
@media(pointer:coarse){
  /* The console grows by exactly what the input row gains, so the scroll-back keeps
     the four lines it is worth having rather than being squeezed to two. */
  :root{--cn-console:104px;--cn-bar:44px}
  .sw-tool,.sw-capability,.sw-button,.sw-button--run{min-height:44px}
  .sw-command-input,.sw-command-mode select{min-height:44px}
  .sw-console-input>*{max-height:none}
}