/* *** v757 (the user: "light mode: color of scrollbars are not the same, they
   are darker in design and live view, make all same color as those in inspector
   and palette and log" -- then, once they were: "scrollbar in live view has
   black bg"). THE BAR FOLLOWS THE SURFACE, NOT THE IDE. ***
   The first answer was to @import /ide-scrollbar.css, the file webThemeUnit
   generates for the IDE's own panels. It matched in light mode and was WRONG in
   dark: the IDE went dark, these pages did not -- they are the user's form and
   the user's app, on their own light ground -- and a #1f1f1f track landed on a
   white form.
     So the SHAPE is shared and the COLOUR is this sheet's: the same 15px lane
   and 9px rounded thumb the IDE draws (see webThemeUnit.WebScrollbarCss for why
   those two numbers), painted from tokens a theme can move. In the IDE's light
   mode -- what the user was comparing -- the literals are the IDE's own, so the
   bars match; in dark mode each surface keeps a bar that suits it.
     AND IT SURVIVES AN EXPORT, which an @import of an IDE route would not: a
   shipped app carries this sheet and nothing to 404 on. */
::-webkit-scrollbar { width: 15px; height: 15px; }
::-webkit-scrollbar-track { background: var(--tp-sb-track, #f0f0f0); }
::-webkit-scrollbar-thumb {
  background: var(--tp-sb-thumb, #cdcdcd);
  border: 3px solid var(--tp-sb-track, #f0f0f0);
  border-radius: 7px;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--tp-sb-hover, #a6a6a6);
  border: 3px solid var(--tp-sb-track, #f0f0f0);
  background-clip: content-box;
}
::-webkit-scrollbar-corner { background: var(--tp-sb-track, #f0f0f0); }

/* Minimal VCL theme — the shared visual language for the SSR render and (later)
   the live runtime. Ported from the reference classic.css, trimmed to the
   walking-skeleton component set. */

/* v376 (port tsw2 v305, css-import.txt M3/S4): THE THEME TOKEN VOCABULARY. Component styles.css consume
   these via var(--tp-x, <classic literal>) — with NO theme every fallback IS the pre-v376 value, so the
   classic look is pixel-identical (R6). A token theme (themes\dark\dark.css) redefines them in one block
   under its .tp-theme-<name> body scope; every tokenized comp then flips coherently. Unlike tsw2 W never
   adopted a :root --tp-grad-* palette block or the v034 form shadow — so W's tokens ALWAYS carry a literal
   fallback (no :root block is needed here). The vocabulary (fallbacks vary per use — one token, many shades):

     --tp-page-bg    page <body> background            --tp-form-bg     form-host default surface
     --tp-fg         text                              --tp-fg-muted    secondary/disabled text
     --tp-surface    white surfaces (inputs, menus)    --tp-surface-2   grey chrome (panels, headers)
     --tp-border     control/frame borders             --tp-input-bg    input fill
     --tp-input-border input borders
     --tp-btn-bg / --tp-btn-fg / --tp-btn-ring         button base fill / text / 1px ring
     --tp-grad-button / --tp-grad-button-hover / --tp-grad-button-active   button base+interaction gradients
     --tp-accent     selection/links/focus rings       --tp-hover       hover wash
     --tp-tint       tinted panels (grid detail/group/aggregate strips)
     --tp-grid-line  grid separator lines              --tp-grid-row-alt alternate row banding
     --tp-accent-fg / --tp-accent-soft                 text on accent / soft highlight

   Plus the AUTO-NAMED per-class default-surface tokens: a fill surface's UNSET backgroundColor (and W's
   constant border colour) is emitted inline as var(--tp-def-<class>-bg / -border-color, <literal>) by
   BevelCssFromDfm — themes opt classes in (see themes\dark\dark.css); an instance-SET Color emits the bare
   literal and always wins. Inline style is the one place normal theme CSS can't reach, so these are the door. */

.vcl-form-host { box-sizing: border-box; }

/* Component looks now live in their packages' styles.css (served via /components.css):
   .vcl-button -> components/Standard/TButton, .vcl-label -> TLabel, .vcl-edit -> TEdit. */

.vcl-unknown {
  border: 1px dashed #c00;
  color: #c00;
  font: 10px monospace;
  box-sizing: border-box;
}

/* v447 port-fix, from tsw2 v374 (missed by the W v444 port, which brought only the 3 Pascal units):
   cross-document view transitions - same-origin navigations (menu clicks) cross-fade instead of
   hard-swapping. Chromium 126+ honors it; other engines ignore the at-rule (plain navigation, no breakage).
   classic.css is linked FIRST in every page RenderFormPage emits (preview + export), so every document
   opts in - the rule is per-document, both the old and the new page need it for the transition to run. */
@view-transition { navigation: auto; }

/* v472-version-exposure: the site-wide page footer -- a full-width block after the form, in body flow.
   Ported verbatim from tpwebide/styles/classic.css (CLAUDE.md rule 2); W's trimmed classic.css never had it,
   which is consistent with W having had no footer emitter at all until now.
   Base look only; the user's footer HTML and their own CSS override it freely. */
.vcl-page-footer {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border-top: 1px solid #d0d4da;
  background: #f5f6f8;
  color: #555;
  font: 12px/1.5 Tahoma, sans-serif;
}

/* *** v757 (the user: "outline of selected edit or memo in live view is too
   strong, make it thinner -- may be for other comps too, in selected state,
   check that"). THE RING WAS THE BROWSER'S, AND IT IS A FAT ONE. ***
   MEASURED on a focused TMemo in the running app: outline-width 3px, drawn by
   Chromium's own :focus-visible default. Nothing in this sheet had ever said
   anything about focus, so every VCL control in every app this IDE builds wore
   it -- a 3px ring around a control whose own border is 1px.
     ONE RULE FOR EVERY CONTROL, because the report is about a memo and an edit
   and the user is right that it is not only those two: any element this
   vocabulary names gets a 1px ring, inset so it sits ON the border rather than
   outside it and cannot nudge the layout.
     :focus-visible, not :focus -- a mouse click on an input should not ring it;
   that is the browser's own rule about when a focus indicator is wanted, and
   the only thing being changed here is how heavy it is. --tp-accent is this
   sheet's own token for exactly this ("selection/links/focus rings"), with the
   classic literal as the fallback every token here carries. */
[class^="vcl-"]:focus-visible,
[class*=" vcl-"]:focus-visible {
  outline: 1px solid var(--tp-accent, #3670c8);
  outline-offset: -1px;
}

input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 0;
  padding: 0;
  border: 1px solid var(--tp-fg-muted, #333);
  border-radius: 0;
  background: var(--tp-input-bg, #fff);
  color: var(--tp-fg, #333);
  vertical-align: middle;
  flex: 0 0 auto;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M2 6.5l3 3 6-6' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M2 6.5l3 3 6-6' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
input[type="radio"]:checked::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: currentColor;
}
input[type="checkbox"]:enabled:hover,
input[type="radio"]:enabled:hover {
  border-color: var(--tp-accent, #0078d7);
  color: var(--tp-accent, #0078d7);
}
input[type="checkbox"]:enabled:active,
input[type="radio"]:enabled:active {
  border-color: var(--tp-accent, #005499);
  color: var(--tp-accent, #005499);
  background: var(--tp-accent-soft, #cce4f7);
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  border-color: var(--tp-input-border, #ccc);
  color: var(--tp-input-border, #bcbcbc);
}