:root {
    --columnWidth: 360px;

    /* The minimum grid track for a ModelHandle listing. 160 is derived: an ordinary desktop column is 560px
       (Control.Desktop.DeckColumnWidth), leaving ~520 inside the window chrome and the grid's 2px padding,
       and with a 13px gutter three tracks of 160 cost 3×160 + 2×13 = 506 — they fit, four cost 679 — they
       do not. So a card is a third of the row, and as the container widens auto-fill adds a column rather
       than letting a third get arbitrarily wide.

       There is no companion --handle-width any more, and no breakpoint: the card takes its track's width,
       so it adapts continuously instead of stepping at 480px. A phone at 360 gets two across (~167 each)
       from the same one number. */
    /* WIDE AND LOW. A card is a name first, and a 160px track cut every name after a word or two. The track
       is now 280px, or half the listing when half is less: a phone's column of ~360 still gets two across
       (~173 each), and every column wide enough for a third 280px card gets it. */
    --handle-column: min(calc(50% - 7px), 280px);

    /* Minds control design tokens. New controls use these instead of embedding a second theme model.
       Existing controls can migrate incrementally without changing their Concept/data contracts. */
    color-scheme: dark;
    --minds-bg: #0004;
    --minds-surface: #0004;
    --minds-surface-raised: #ffffff14;
    --minds-input: #0006;
    --minds-line: #ffffff33;
    /* White, and actually white. The primary was #f3f6fa — a blue-tinted off-white that is only four points
       down from #fff on paper and reads as grey on a dark ground, where the eye judges text against black
       rather than against the next lightest thing on the page. Text the reader is meant to READ is #fff.

       The ramp moved up a step rather than collapsing: what was primary is now the secondary tone, so a
       caption or a timestamp still sits back from the sentence above it without either of them going grey.
       Hierarchy on a dark surface has very little room below white before it stops looking deliberate and
       starts looking faded, which is why it is three close values and not a spread. */
    --minds-text: #ffffff;
    --minds-text-muted: #f3f6fa;
    --minds-text-subtle: #dde6ee;
    /* A LINK — a name or label whose press takes you to it (a handle's name, a pane's label, Control.Label): a clear
       blue, #abc7e3 (hsl 210°, 50%, 78%) — bright enough to read on the dark glass, a calm blue, not neon. One definition. */
    --minds-link: #abc7e3;
    --minds-accent: #7ddde3;
    --minds-success: #4ade80;
    /* THE GO-AHEAD: the one button that makes the move — Invite, Accept, Request contact, Send. Green, as a
       signal; a hover tints over it. Every such button says style.background: var(--minds-go). */
    --minds-go: #238636;
    /* THE AIR ON A WINDOW, one value: its header's inset from the window's edges (Control.Window headerDiv margin), its
       content's padding all round — so under the header too (contentFrame) — and the gap between a dashboard's cards
       (Control.Dashboard). The cards stand as far from each other as from the header and the window's edges. */
    --minds-gap: 10px;
    --minds-warning: #fbbf24;
    --minds-danger: #f87171;
    --minds-running: #38bdf8;
    --minds-approval: #f5c518;
    --minds-external: #a78bfa;
    --minds-selected: #38bdf822;
    --minds-radius: 8px;
    --minds-function-button-material: radial-gradient(circle at 27% 23%, #ffffff40 0%, #ffffff12 68%, #0003 100%);
    /* A hairline, not a ring. It was #d9fbff99 — a pale cyan at 60%, drawn when these buttons sat on a
       light panel; on the dark command layer every one of them became a hard bright chip, and a row of
       them read as the loudest thing on screen.

       White at low alpha rather than black, because the command layer floats over a photograph the person
       chose. Black is absolute: over dark water there is no border at all, over bright sky it is the
       harshest line on the screen. A translucent white is RELATIVE — it lightens whatever is behind it by
       the same amount either way, so one value holds over any wallpaper. The seated, raised look that a
       dark edge was reaching for is the shadow's job, not the border's.

       Halved, from #ffffff44. A rim's job on this layer is to say where a button ENDS, and at 44 it was
       doing more than that: on a row of them the eye read the grid of rims before it read any of the
       icons. One value, so the toolbar, the context-menu rows and the command bar's own cluster all
       soften together — they are one material and a rim that differs between them is the tell. */
    --minds-function-button-border: #ffffff22;
    /* The command layer tint: a flat, neutral #0001 over the aligned wallpaper copy. Flat is the point.
       Gradients here were stated in percentages of the panel box, so every resize — opening the list,
       dragging, a narrower desktop — restretched them and repainted the layer a different shade; and a
       blue wash reads as a second brand colour arriving on top of whatever wallpaper the person chose.
       A single tint has no geometry to restretch and no hue of its own — and a gradient stated in a
       DIRECTION rather than in percentages of the box has neither either: `to bottom right` means the same
       thing at every size, so opening the list or dragging the shell cannot repaint it a different shade.
       Neutral black at two depths, matching the panels, so the command layer and a dialog read as one
       material rather than two. */
    --minds-data-material: #0004;
    /* The tint on a cut-out surface — every window and every dialog. It is the ONLY tint they show:
       Desktop.ApplyWallpaperCutout paints this as a background LAYER above the aligned wallpaper copy, on
       the element itself. Setting a panel background and expecting a dialog to change is the mistake this
       variable exists to prevent — the same material Control.Panel wears, stated where a cut-out surface
       actually reads it.

       A ramp, but a SHORT one, and that is the whole design. A gradient is sized to the element it paints,
       so a wide pair means one thing on a 680x942 window and another on the small Actions shell: the window
       shows the whole ramp and the shell only its head, and the two read as different materials while
       measuring as the same tint. Keeping the stops close is what makes one value look like one value at
       every size.

       Both stops are the knob: the first says how dark the surface is everywhere, the second how much
       deeper its far corner goes. #0004 → #0009, lightest up-left (#000c in its far corner read as black there, Sep 2026; briefly #0003 → #0008, which was too light; before that #0006 → #0009, and #0009 → #000e before that, when windows and dialogs read as black) is settled by eye against the wallpaper — enough
       corner-to-corner shading that a surface reads as a pane of something rather than a sheet of colour,
       little enough that the picture under it stays a picture. Tuning it is a matter of looking, not
       arithmetic: this tint only ever darkens toward the wallpaper copy beneath, so if a surface still
       reads too black at low values, the darkness is coming from that copy and not from here. */
    /* THE SURFACE OF A MODEL — every ModelCard and ModelHandle. White at #fff1 (#fff2 washed the white text out), still a step lighter than a
       dropdown's #ffffee0a, so a model standing among dropdowns reads as a thing of its own rather than as
       one more fold of the page. It was the dark data material (#0004), which made every card a black tile. */
    --minds-model-material: #fff1;
    --minds-window-tint-from: #0004;
    --minds-window-tint-to: #0009;
    --minds-window-tint: linear-gradient(to bottom right, var(--minds-window-tint-from), var(--minds-window-tint-to));
    /* EVERY MODEL WEARS ITS COLOUR. Model.ColorCode() — the concept's colorCode, a model's own colorCode
       property where one is set, or a stable colour from the concept name — is laid over the surface of its
       ModelHandle and ModelCard at this share. A window wears the colour on its header only; its body keeps
       the plain black --minds-window-tint.
       24%: twice the first 12%, which read as a hint rather than a colour. */
    --minds-model-tint-share: 24%;
    /* Dark, like everything it outlines. These sit on --minds-data-material (#0004) inside a dark window,
       so a white rim at 58% was the brightest thing on the surface — an outline around a card rather than
       the card's own edge. Black at the same alpha deepens that edge instead of lighting it. */
    --minds-data-border: #00000094;
    /* The rim on a command-layer panel — the toolbar, the context menu, the feature and helper panels.
       It was #b2e9f95e, a pale cyan at 37%, written in four places when these panels were light cards.
       Two things were wrong with it on a dark layer: the colour, which was the last light-mode remnant
       visible on screen; and the alpha, because these panels paint a copy of the wallpaper as their own
       background and a 37% rim lets that copy through — brightest exactly on the curve of a corner, which
       is where the edge disappeared. Blackish, at the window frame's own alpha, so a panel and a window
       are edged by the same line. */
    --minds-panel-border: #0000009c;
    /* How soft the wallpaper is under a floating surface: a window, a dialog, a menu, a toolbar, the
       Actions list. It sits on the CONTENT of those surfaces, never on the surface itself — each of them
       paints its own copy of the wallpaper as its background, and backdrop-filter blurs what is behind an
       element, so a surface can never blur its own copy. The content lies on top of it, and can.

       One value, because these are one material — when they each carried their own number (4, 9, 11, 12)
       none of them reached anything, since every one of those was stated on the surface. */
    /* 18px (Sep 2026): the blur every dialog, window, tooltip and toolbar shows — one number, stated here. */
    --minds-surface-blur: blur(18px);
    /* What a drop target lights up in while something is dragged over it. White read as the same grey
       hairline an input wears when it is focused, so the one edge that means "let go here" looked like
       the one that means "you are typing here". */
    --minds-drop-target: #38bdf8;
    /* The CONTEXT LAYER — Control.ContextPanel and the hover toolbar: a light-mode island floating over the
       dark desktop. These two values are for what stands ON it; the panels' own glass is in their own style.

       The tint is the fill of every control ON the panel — the inner menu's rows, the addon cards, the
       toolbar buttons. Text on that fill is dark, because on a fill this light white letters go grey. */
    --minds-context-tint: #fffc;
    --minds-context-text: #000;
    --minds-context-material: radial-gradient(circle at 18% 12%, #ffffff24, #0004);
    --minds-panel-shadow: 0 9px 28px #10354c35;
    --minds-function-content-tint: #ffffff14;
    --minds-font-family: Calibri, sans-serif;
    --minds-space-1: 4px;
    --minds-space-2: 7px;
    --minds-space-3: 10px;
    --minds-space-4: 14px;
}

html, body {
    width: 100%;
    height: 100%;
    font-family: var(--minds-font-family);
    margin: 0;
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    color: var(--minds-text);
    /* Paint the desktop material before JavaScript/session hydration finishes; never flash a blank white
       page while the first controls are being constructed. */
    background: #000000 url('images/fjord.jpg') center/cover no-repeat fixed;
}

div {
    border-radius: 5px;
    font-family: inherit;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow: visible
}

*::-webkit-scrollbar {
    display: none
}

* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

input {
    font-family: inherit;
    font-size: inherit;
    background: transparent;
    border: 1px solid #888;
    border-radius: .5rem;
    color: var(--minds-text);
}

button {
    font-family: inherit;
    font-size: inherit;
    margin: 1px 4px;
    background: transparent;
    border: 1px solid #888;
    border-radius: .5rem;
    color: var(--minds-text);
}

select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: var(--minds-text);
}

[contenteditable] {
    outline: 0px solid transparent;
}

/* The focus ring. Left to the browser it was a 2px pure-white outline — the loudest thing on a dark screen,
   and thicker than any border in the layer. One pixel, and a colour of its own so that "this has focus" does
   not read as "this is emphasised": everything else here is white, so the ring is the one thing that is not. */
:focus-visible {
    outline: 1px solid #00a;
    outline-offset: 1px;
}

/* A field being TYPED IN is a different state from a control being selected, and wants a quieter mark: you
   are looking at your own words, not at the box around them. Grey rather than white for the same reason the
   ring above is blue — white is what the text is, so a white rim competes with it. */
[contenteditable]:focus, input:focus, textarea:focus, select:focus {
    outline: 1px solid #bbb;
    outline-offset: 1px;
}

table {
    width: 100%;
    border-spacing: 0;
}

th, td {
    padding: 4px;
    border-left: 1px solid #bbb;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #f8f8f8;
}

tr:last-child td {
    border-bottom: none;
}

td:first-child, th:first-child {
    border-right: none;
}

/* Highly specific selector with */
#editable.editable {
    -webkit-line-break: normal;
}

/* NO CONTROL'S LOOK IS HERE. A control's look is its concept's `style` (and `childStyle`), in its own file — states,
   parts and animations included, as selector keys (Dom.StyleRules). This file holds the tokens every concept reads, and
   what the page's own elements look like before any control is on them. */