/*
 * terminal-light — the "Terminal" direction on a light market surface.
 *
 * Kin to presets/terminal.css (mono labels, uppercase tracking, grid ground) but
 * light and navy instead of dark and amber, with soft radii. It is a separate
 * preset, not a rewrite: terminal.css keeps its own dark/amber identity.
 *
 * LIGHT ONLY, on purpose. The brokerage approved a light screen and no dark one.
 * base.css declares its palette inside :root[data-theme="light"|"dark"], which
 * outranks a bare :root, so a preset that sets colours on :root alone is silently
 * overridden the moment the visitor's OS prefers dark. Both blocks below therefore
 * carry the SAME light values: the look is identical whichever theme resolves, and
 * the render matrix still discovers two themes.
 */

/* ---- unthemed: type, rhythm, geometry ----------------------------------- */
:root {
  --font: "IBM Plex Sans", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  --font-mono: "IBM Plex Mono", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", monospace;

  --radius-card: 18px;
  --radius-field: 10px;
  --radius-btn: 12px;
  --radius-check: 5px;
  --card-pad: 32px;
  --gap: 20px;

  --title-size: 21px;
  --title-weight: 600;
  --title-tracking: -0.01em;
  --title-transform: none;
  --title-justify: flex-start;

  --label-size: 11px;
  --label-weight: 500;
  --label-tracking: 0.17em;
  --label-transform: uppercase;

  /* Lengths, not colours: base.css feeds these to margin-left and padding.
     Tuned for an underlined field, where there is no box inset to sit in. */
  --field-icon-left: 2px;
  --field-pad-icon: 30px;
  --field-pad-x: 0px;
  --field-pad-y: 14px;
  --field-size: 16px;

  --btn-size: 15px;
  --btn-weight: 600;
  --btn-tracking: 0.02em;
  --btn-transform: none;
  --btn-h: 52px;

  --frame-form-width: 460px;
  --frame-logo-width: 268px;
  --frame-logo-height: 72px;
  --frame-logo-radius: 0;
  --frame-footer-gap: 16px;
  --frame-footer-size: 13px;
  --frame-footer-tracking: 0;
  --frame-copyright-font: var(--font-mono);
  --frame-copyright-size: 10px;
  --frame-copyright-tracking: 0.12em;
}

/* Han glyphs lose legibility under Latin tracking. */
:root:lang(zh) {
  --label-tracking: 0;
  --btn-tracking: 0;
  --title-tracking: 0;
  --frame-copyright-tracking: 0;
  --label-size: 12px;
}

/* ---- the palette, identical in both themes (see header) ------------------ */
:root[data-theme="light"],
:root[data-theme="dark"] {
  --surface: #f2f4f8;
  --surface-panel: #f2f4f8;
  --card: #ffffff;
  --card-border: #dfe4ec;
  --field: #ffffff;
  --field-border: #cbd4e1;
  --field-focus: #1f4788;
  --rule-box: #eef1f6;
  --hairline: #dfe4ec;
  --accent: #1f4788;
  --accent-text: #1f4788;
  --btn-fg: #ffffff;
  --text: #0b1730;
  --text-muted: #3b4a63;
  --text-dim: #4a5a73;
  --label-color: #5a6a85;
  --icon: #5a6a85;
  --placeholder: #8a97ab;
  --check-bg: #ffffff;
  --check-border: #cbd4e1;
  --check-mark: #1f4788;
  --err-bg: #fdecee;
  --err-border: #c0334a;
  --err-text: #8c1d2b;
  --err-stroke: #c0334a;
  --ok: #1a7f4b;
  --muted: #5a6a85;
  --hero-bg: #f2f4f8;
  --hero-overlay: rgba(242, 244, 248, 0.72);
  --hero-title-color: #0b1730;
  --hero-copy-color: #4a5a73;
  --hero-eyebrow-color: #1f4788;
  --hero-eyebrow-rule: #1f4788;
  --hero-divider: linear-gradient(180deg, rgba(31, 71, 136, 0), rgba(31, 71, 136, 0.35), rgba(31, 71, 136, 0));
  --glow: rgba(31, 71, 136, 0.13);
  --rule: rgba(11, 23, 48, 0.05);
  --media-border: rgba(11, 23, 48, 0.14);
  --link-hover: #0b1730;
}

/* ---- the ground --------------------------------------------------------- */
/* base.css already composes glow + vertical rules + surface on this element,
   so feed it tokens and add only the horizontal rules and the market line. */
.auth-frame--centered {
  position: relative;
  isolation: isolate;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}

.auth-frame--centered::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: repeating-linear-gradient(0deg, var(--rule) 0 1px, transparent 1px 48px);
}

/* Background chart: a rising price line with the area under it. The area is one
   flat tint in the SVG; the mask fades the whole layer towards the bottom, which
   turns that tint into the gradient (an SVG gradient would need a url() reference
   inside the image, and the asset gates read every url() as a file). It runs down
   to the frame's bottom edge; the regulatory band paints over its tail. */
.auth-frame--centered::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  bottom: 0;
  z-index: -1;
  opacity: 0.6;
  pointer-events: none;
  background: no-repeat center / 100% 100%
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M0 203 L90 184 L150 193 L230 165 L300 176 L380 147 L450 158 L520 131 L600 140 L680 116 L750 129 L830 99 L910 110 L990 86 L1060 97 L1140 66 L1220 76 L1300 56 L1370 66 L1440 45 L1440 320 L0 320 Z" fill="%231f4788" fill-opacity="0.22"/><path d="M0 203 L90 184 L150 193 L230 165 L300 176 L380 147 L450 158 L520 131 L600 140 L680 116 L750 129 L830 99 L910 110 L990 86 L1060 97 L1140 66 L1220 76 L1300 56 L1370 66 L1440 45" fill="none" stroke="%231f4788" stroke-opacity="0.45" stroke-width="1.4" vector-effect="non-scaling-stroke"/></svg>');
  -webkit-mask-image: linear-gradient(to bottom, black 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 45%, transparent 100%);
}

/* ---- the panel: centred stack, then the full-bleed band ------------------ */
/* .auth-panel is 100vh; left at that the band is pushed past the fold. */
.auth-page .auth-centered-stack.auth-panel,
.auth-centered-stack.auth-panel {
  height: auto;
  flex: 1 1 auto;
  justify-content: center;
  background: transparent;
}

/* base.css pads the frame 32px/24px. The band is a child of it, so that padding
   is exactly what keeps it off the bottom edge and short of the side edges.
   Keep the top breathing room, drop the rest: the stack is centred and carries
   its own width, and the band is meant to be full bleed. */
.auth-page .auth-frame--centered {
  padding: 32px 0 0;
}

/* Push the band to the bottom even when the stack is shorter than the viewport. */
.auth-disclaimer { margin-top: auto; }

/* Markup order is untouched, so every other look keeps the DOM it has today. */
.auth-centered-stack > .auth-language { order: 1; }
.auth-centered-stack > .auth-footer { order: 2; }

/* The logo already reads "SITA / Corretora de Valores"; a strapline under it
   repeats the brand instead of adding anything. base.css already hides this
   block below 1024px - here it is hidden at every width. */
.auth-centered-intro { display: none; }

.auth-brand img { object-fit: contain; }

.auth-form-host {
  border-radius: var(--radius-card);
  box-shadow: 0 18px 48px rgba(11, 23, 48, 0.1);
}

/* Fields need the direction's height. The button's --btn-h is honoured by
   base.css for every preset (it used to be squashed by the 24px touch floor). */
.auth-page .auth-field { min-height: 52px; }

/* ---- underline fields ----------------------------------------------------
 * The approved screen has no boxes: icon, value and the password toggle sit on
 * one rule. base.css puts the toggle in its own grid column, so the rule has to
 * be drawn on BOTH cells (with the gap closed) instead of on the input alone -
 * otherwise the line breaks where the toggle starts. It cannot live on the
 * shell either: the validation message is grid-row 2 of that same shell, and
 * the rule would end up under the message rather than under the value.
 */
.auth-page .auth-field-block--password .auth-field-shell { column-gap: 0; }

.auth-page .auth-field,
.auth-page .auth-field-trailing {
  border: 0;
  border-bottom: 1px solid var(--field-border);
  border-radius: 0;
  background: transparent;
}

/* Same row height on both cells, or the two halves of the rule sit at
   different heights. */
.auth-page .auth-field-trailing {
  height: auto;
  align-self: stretch;
}

.auth-page .auth-field-shell:focus-within .auth-field,
.auth-page .auth-field-shell:focus-within .auth-field-trailing {
  border-bottom-color: var(--field-focus);
}

/* ---- the call to action carries the arrow -------------------------------- */
/* Drawn as a mask so it inherits the label colour and adds no markup: the
   partial is shared with every other brand. */
.auth-page button.auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.auth-page button.auth-btn::after {
  content: "";
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  background-color: currentColor;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>') center / contain no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>') center / contain no-repeat;
}

/* ---- the regulatory band ------------------------------------------------- */
.auth-disclaimer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 36px;
  width: 100%;
  box-sizing: border-box;
  padding: 20px 56px 18px;
  background: var(--card);
  border-top: 1px solid var(--hairline);
}

.auth-disclaimer-copy {
  flex-grow: 1;
  margin: 0;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--text-dim);
}

.auth-disclaimer-badges {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 96x44 was sized for bare marks. These badges carry wordmarks ("Brasil Bolsa
   Balcão", "Comissão de Valores Mobiliários"), which stop being readable at
   that box; contain keeps each one's own aspect ratio inside the larger slot. */
.auth-badge {
  width: 118px;
  height: 52px;
  object-fit: contain;
}

.auth-poweredby {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  padding-left: 24px;
  border-left: 1px solid var(--hairline);
}

.auth-poweredby-eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.auth-poweredby-name {
  font-family: "Space Grotesk", var(--font);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--text);
}

/* footer.poweredByLogo: the vendor mark replaces the name, same slot height as
   the badges so the band keeps one baseline. */
/* Block box so the markup's whitespace around the mark adds no inline gap. */
.auth-poweredby-link { display: block; }

.auth-poweredby-logo {
  display: block;
  width: auto;
  height: 48px;
  object-fit: contain;
}

/* ---- narrow screens ------------------------------------------------------
 * base.css has ONE breakpoint (width < 1024px); matching it keeps this preset
 * on the same rhythm as every shared rule instead of inventing a second one.
 */
@media (width < 1024px) {
  :root {
    /* A fixed 460px overflows any phone. Gutters stay 16px a side. */
    --frame-form-width: min(460px, 100vw - 32px);
    --card-pad: 20px;
    --field-pad-icon: 28px;
    --frame-logo-width: 240px;
    --frame-logo-height: 64px;
  }

  .auth-page .auth-frame--centered { padding: 24px 0 0; }

  /* base.css clamps the card to `min(var(--card-pad), 10px)` below 1024px so a
     304px CAPTCHA still fits a 360px screen. That 10px is what makes the form
     look pasted together on a modern phone; from 400px up there is room. */
  .auth-page .auth-form-card { padding: 20px; }

  /* Room between the mark and the card; the desktop rhythm collapses here. */
  .auth-page .auth-brand { margin-bottom: 20px; }

  /* Wrap instead of stack: the copy takes a full line, then the marks and the
     attribution share the next one. Stacking all three made the band eat a
     third of the screen. */
  .auth-disclaimer {
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
    padding: 20px 20px 24px;
  }

  .auth-disclaimer-copy {
    /* 10.5px is a desktop footnote; on a phone it stops being readable. */
    flex: 1 1 100%;
    font-size: 11.5px;
    line-height: 1.6;
  }

  .auth-disclaimer-badges { flex: 0 0 auto; }

  .auth-poweredby {
    flex: 1 1 auto;
    align-items: flex-end;
    padding-left: 20px;
  }
}

/* Below 400px base's CAPTCHA arithmetic governs again: 360 - 32 gutters
   - 2 borders - 20 padding = 306, which still clears a 304px widget. */
@media (width < 400px) {
  .auth-page .auth-form-card { padding: 10px; }
}