/* ============================================================
   vth-reset.css — scoped reset for the VTH ReSkin
   Neutralizes ONLY the inherited element styles Materialize v0.100
   sets, and ONLY inside the `.vth` scope. Never affects the rest of
   the legacy portal. Load AFTER Materialize, BEFORE vth-reskin.css.
   ============================================================ */
.vth,.vth *,.vth *::before,.vth *::after{box-sizing:border-box;}
.vth{font-family:var(--font-sans);color:var(--text-primary);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}

/* headings — Materialize sets big line-heights/weights globally */
.vth h1,.vth h2,.vth h3,.vth h4,.vth h5,.vth h6{margin:0;font-weight:var(--weight-semibold);line-height:1.2;color:var(--text-primary);text-transform:none;}
.vth p{margin:0;}
.vth ul,.vth ol{margin:0;padding:0;list-style:none;}
/* links — same split, same reason as the buttons below.

   `.vth a` is (0,1,1) and beat every single-class component rule, so an
   <a class="vth-btn vth-btn--danger"> was painted the LINK colour instead of the
   white its variant asks for, and <a class="vth-btn vth-btn--ghost"> took the link
   colour over --text-primary. Measured against the identical <button>, which was
   correct. (--secondary appeared fine only by coincidence: its colour and
   --text-link resolve to the same sector accent.)

   text-decoration is a link-wide decision and stays. Colour belongs to the
   component whenever there is one. */
.vth a{text-decoration:none;}
.vth a:not([class*="vth-"]){color:var(--text-link);}
.vth a:not([class*="vth-"]):hover{color:var(--vth-blue-hover);}
.vth img{max-width:100%;display:block;}

/* `hidden` MUST WIN INSIDE THE SCOPE.
   The attribute only hides through the UA stylesheet's `[hidden]{display:none}`, and
   ANY author declaration beats the UA origin however specific — so a component rule
   as ordinary as `.vth .vth-confirm{display:flex}` silently un-hid an element that
   markup and JS both believed was closed.

   It cost twice in one module: the Add To Account confirmation painted itself open on
   page load and could not be dismissed (closeConfirm sets hidden = true and the CSS
   kept showing it), and the action row's overflow menu stood permanently open.

   Stated once here rather than as a guard bolted onto each component, because the next
   component to set `display` on a hideable element would hit it again. `!important` is
   warranted for the same reason normalize-style resets use it: `hidden` is the markup
   saying "this is not rendered", which is not a tie to be broken by source order.
   Verified before adding: every `[hidden]` rule in the reskin CSS sets display:none,
   so nothing relies on painting a hidden element. */
.vth [hidden]{display:none !important;}

/* buttons — strip Materialize/UA defaults inside scope, WITHOUT touching our own.

   `.vth button` is (0,1,1). Every component rule in vth-reskin.css is a single class
   — `.vth-btn` is (0,1,0) — so the reset OUTRANKED the component it was meant to sit
   under, and `background:none;border:none` won. Measured consequences: a
   `.vth-btn--danger` <button> had NO red background (rgba(0,0,0,0) against the
   anchor's rgb(217,41,41)), `.vth-btn--secondary` lost the border its border-color
   was colouring, and every <button> lost the 1px border its <a> twin kept — so the
   same classes rendered differently depending on the tag.

   It is also why `.vth-btn--primary` carries !important on background and color:
   that was a patch for this, not a design decision. (The variants that never broke,
   --white and --soft, are `.vth .vth-btn--*` at (0,2,0) and already outranked it.)

   Split in two rather than given more weight. The half that is ALWAYS right —
   margin, inherited font, pointer cursor — still applies to everything. The half that
   is a RESET of someone else's paint — background and border — is withheld from
   anything in our own `vth-` namespace, because that is precisely what a component is
   there to decide. Nothing needs !important and no component rule is duplicated.

   `[class*="vth-"]` is the namespace test: CLAUDE.md requires every ReSkin component
   class to carry the `vth-` prefix, so the attribute IS the boundary between "legacy
   or bare button" and "ours". */
.vth button{margin:0;font-family:inherit;cursor:pointer;}
.vth button:not([class*="vth-"]){background:none;border:none;}

/* form controls — Materialize styles these globally (border-bottom, height, etc.) */
.vth input:not([type]),.vth input[type=text],.vth input[type=email],.vth input[type=password],
.vth input[type=number],.vth input[type=search],.vth input[type=tel],.vth input[type=url],
.vth input[type=date],.vth textarea,.vth select{
  box-sizing:border-box;height:auto;min-height:0;margin:0;padding:0;
  border:none;border-radius:0;box-shadow:none;background:transparent;
  font-family:var(--font-sans);font-size:var(--type-size-base);color:var(--text-primary);
}
.vth input:focus,.vth textarea:focus,.vth select:focus{outline:none;box-shadow:none;border:none;}

/* tables — Materialize adds display/spacing */
.vth table{border-collapse:collapse;width:100%;}
.vth th,.vth td{padding:0;text-align:left;}