/* Host app: a TD-flavoured mobile banking shell, sized to fit the viewport without page scroll.
   Brand tokens are approximations - replace with the real values from the TD design system. */

:root {
  --td-green: #008a00;
  --td-green-dark: #006300;
  --td-green-deep: #00401f;
  --td-nav: #008a00;
  --td-green-bright: #54b948;
  --td-green-wash: #eaf5ea;
  --td-ink: #1c1c1c;
  --td-ink-soft: #4a4f54;
  --td-ink-faint: #767b80;
  --td-line: #dfe3e6;
  --td-bg: #ffffff;
  --td-white: #ffffff;
  --td-error: #c3202b;
  --td-error-wash: #fdeced;
  --td-amber: #b8730b;
  --td-radius: 10px;
  --td-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.04);
  --td-font:
    "TD Graphik", "Graphik", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Arial, sans-serif;

  /* How much of the device screen the assistant sheet covers when docked. */
  --cpb-sheet: 40%;
}

* {
  box-sizing: border-box;
}

/* Several elements below set display:flex, which otherwise beats the UA rule for [hidden]. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--td-font);
  color: var(--td-ink);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  background: radial-gradient(120% 100% at 50% 0%, #dfeadf 0%, #c9d6cd 55%, #b4c3ba 100%);
}

/* ---------------------------------------------------------------- demo toolbar */

.demo-bar {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 13px;
  padding: 6px 16px;
  background: #15181b;
  color: #d9dee2;
  font-size: 12px;
}

.demo-bar-tag {
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 10px;
  background: #3b4248;
  color: #fff;
  padding: 3px 7px;
  border-radius: 4px;
}

.demo-bar label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.demo-bar input[type="checkbox"] {
  accent-color: var(--td-green-bright);
  margin: 0;
}

.demo-bar select {
  background: #2a3035;
  color: #fff;
  border: 1px solid #434a50;
  border-radius: 4px;
  padding: 2px 6px;
  font: inherit;
}

.demo-bar button {
  background: #2a3035;
  color: #fff;
  border: 1px solid #434a50;
  border-radius: 5px;
  padding: 3px 10px;
  font: inherit;
  cursor: pointer;
}

.demo-bar button:hover {
  background: #363d43;
}

.demo-bar button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.demo-bar a {
  color: #d9dee2;
  text-underline-offset: 2px;
}

.demo-bar [data-live-status] {
  margin-left: auto;
  color: #aeb8bf;
}

.demo-bar-sep {
  width: 1px;
  height: 16px;
  background: #3b4248;
}

.demo-bar-voice {
  margin-left: auto;
  color: #8b949b;
  font-style: italic;
}

/* ---------------------------------------------------------------- device frame */

.stage {
  flex: 1;
  min-height: 0;
  position: relative;
  display: grid;
  place-items: center;
  padding: 14px;
  overflow: hidden;
}

/* The phone is always laid out at its real logical size; app.js shrinks it to fit the window.
   Transform scaling keeps browser hit-testing aligned with the visible Figma controls. */
.device {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 392px;
  height: 840px;
  transform: translate(-50%, -50%) scale(var(--device-scale, 1));
  transform-origin: center;
  background: #0d0f11;
  border-radius: 44px;
  padding: 11px;
  box-shadow:
    0 30px 70px rgba(0, 30, 10, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.28) inset;
}

.device-screen {
  position: relative;
  height: 100%;
  background: var(--td-bg);
  border-radius: 34px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* On a real phone, go edge to edge rather than drawing a phone inside a phone. The explicit track
   and min-height keep the frame at the stage's size, so the fitter leaves the scale at 1. */
@media (max-width: 460px) {
  .stage {
    padding: 0;
    grid-template: 100% / 100%;
  }
  .device {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
    padding: 0;
    transform: none;
  }
  .device-screen {
    border-radius: 0;
  }
}

/* ---------------------------------------------------------------- app chrome */

.app-status {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 26px 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--td-ink);
  background: #fff;
}

.app-status-icons {
  display: flex;
  align-items: center;
  gap: 5px;
}

.app-status-icons i {
  display: block;
  background: var(--td-ink);
}

.app-sig {
  width: 15px;
  height: 10px;
  clip-path: polygon(0 100%, 22% 100%, 22% 62%, 0 62%, 0 100%, 39% 100%, 39% 40%, 61% 40%, 61% 100%, 78% 100%, 78% 14%, 100% 14%, 100% 100%, 0 100%);
}

.app-wifi {
  width: 13px;
  height: 10px;
  clip-path: polygon(50% 100%, 0 32%, 14% 20%, 50% 55%, 86% 20%, 100% 32%);
}

.app-batt {
  width: 22px;
  height: 11px;
  border-radius: 3px;
  background: none !important;
  border: 1.3px solid var(--td-ink);
  position: relative;
}

.app-batt::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  width: 70%;
  background: var(--td-ink);
  border-radius: 1px;
}

.app-header {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 52px;
  padding: 4px 10px;
  background: #fff;
  color: var(--td-ink);
  border-bottom: 1px solid var(--td-line);
}

/* display:flex above would otherwise beat the UA rule for [hidden]. */
.app-header[hidden] {
  display: none;
}

.app-back,
.app-menu {
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  flex: none;
}

.app-back:hover,
.app-menu:hover {
  background: var(--td-green-wash);
}

.app-back svg,
.app-menu svg {
  width: 21px;
  height: 21px;
}

.app-nav-title {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-brand {
  flex: 1;
  display: flex;
  justify-content: center;
  padding-left: 34px;
}

.app-header.is-titled .app-brand {
  display: none;
}

.app-header:not(.is-titled) .app-nav-title {
  display: none;
}

.app-brand-mark {
  height: 26px;
  display: block;
  color: #fff;
}

/* ---------------------------------------------------------------- app body */

.app-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
  /* The widget publishes its own height here so the form can scroll clear of the docked sheet. */
  padding-bottom: var(--cpb-sheet-px, 0px);
  transition: padding-bottom 0.24s ease;
}

.app-body::-webkit-scrollbar {
  width: 0;
}

.td-screen {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
  animation: td-slide 0.26s ease;
}

@keyframes td-slide {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.td-screen h1 {
  font-size: 24px;
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.015em;
}

.td-lede {
  margin: 0;
  color: var(--td-ink-soft);
  font-size: 16px;
  line-height: 1.45;
}

.td-screen-success {
  text-align: center;
  align-items: center;
}

.td-screen-figma {
  gap: 0;
  min-height: 100%;
}

.td-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px 24px 24px;
}

.td-sticky {
  margin-top: auto;
  padding: 16px 16px 18px;
  background: #fff;
  border-top: 1px solid var(--td-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.td-screen-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #eef8ec;
  color: var(--td-green);
  display: grid;
  place-items: center;
}

.td-screen-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.td-screen-icon-success {
  width: 92px;
  height: 92px;
}

.td-screen-icon-success svg {
  width: 54px;
  height: 54px;
  stroke-width: 3;
}

.td-confirmation-content {
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
}

.td-section-label {
  margin: 4px 0 -10px;
  font-size: 15px;
  font-weight: 600;
}

.td-fineprint {
  margin: -4px 0 0;
  color: var(--td-ink-faint);
  font-size: 12px;
  line-height: 1.4;
}

.td-tick {
  width: 60px;
  height: 60px;
  margin: 10px auto 0;
  border-radius: 50%;
  background: var(--td-green-wash);
  color: var(--td-green);
  display: grid;
  place-items: center;
  font-size: 29px;
  font-weight: 700;
}

/* ---------------------------------------------------------------- stepper */

.td-stepper {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
  font-size: 10.5px;
  color: var(--td-ink-faint);
  /* The success screen centres its children, which would shrink the track until the labels collide. */
  align-self: stretch;
  width: 100%;
}

.td-stepper li {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: center;
}

.td-stepper li::before {
  content: "";
  height: 4px;
  border-radius: 2px;
  background: #dfe3e6;
}

.td-stepper li.is-active::before {
  background: var(--td-green);
}

.td-stepper li.is-done::before {
  background: var(--td-green-bright);
}

.td-stepper li.is-active {
  color: var(--td-green);
  font-weight: 700;
}

/* ---------------------------------------------------------------- forms */

.td-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.td-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-radius: var(--td-radius);
  transition: box-shadow 0.25s ease;
}

.td-field label {
  font-size: 15px;
  font-weight: 600;
  color: var(--td-ink);
}

.td-field input {
  font: inherit;
  font-size: 15px;
  padding: 13px 14px;
  border: 1px solid #6f7478;
  border-radius: 4px;
  background: #fff;
  width: 100%;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.td-field input:focus {
  outline: none;
  border-color: var(--td-green);
  box-shadow: 0 0 0 3px rgba(0, 138, 0, 0.18);
}

.td-field.has-error input {
  border-color: var(--td-error);
  background: var(--td-error-wash);
}

.td-field.is-highlighted {
  box-shadow:
    0 0 0 4px rgba(84, 185, 72, 0.45),
    0 0 0 11px rgba(84, 185, 72, 0.15);
}

.td-hint {
  font-size: 12px;
  color: var(--td-ink-faint);
}

.td-error {
  font-size: 12px;
  color: var(--td-error);
  font-weight: 600;
}

.td-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--td-ink-soft);
}

.td-check input {
  accent-color: var(--td-green);
}

.td-btn {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 20px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: block;
  width: 100%;
  transition: background 0.15s ease;
}

.td-btn-primary {
  background: var(--td-green);
  color: #fff;
}

.td-btn-primary:hover:not(:disabled) {
  background: var(--td-green-dark);
}

.td-btn-primary:disabled {
  background: #d3d8db;
  color: #8b9299;
  cursor: not-allowed;
}

.td-btn-ghost {
  background: transparent;
  color: var(--td-green);
  border-color: #c3c9cd;
}

.td-btn-link {
  background: transparent;
  color: var(--td-green-dark);
  border: 0;
}

.td-btn-link:hover {
  text-decoration: underline;
}

.td-btn-ghost:hover {
  background: var(--td-green-wash);
}

.td-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  font-size: 14px;
  padding-top: 2px;
}

.td-links a {
  color: var(--td-green);
  font-weight: 600;
  text-decoration: none;
}

.td-links a:hover {
  text-decoration: underline;
}

.td-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--td-ink-faint);
  font-size: 12px;
}

.td-divider::before,
.td-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--td-line);
}

.td-biometric {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--td-green);
  background: var(--td-green-wash);
  border: 1px solid #cfe3cf;
  border-radius: var(--td-radius);
  padding: 12px;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
}

/* ---------------------------------------------------------------- sign-in screen */

.td-logo-block {
  display: flex;
  justify-content: center;
  padding: 22px 0 6px;
}

.td-logo {
  height: 56px;
  width: auto;
  display: block;
}

.td-welcome {
  text-align: center;
}

.td-screen-signin .td-lede {
  text-align: center;
}

.td-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: -3px;
}

.td-inline-link {
  color: var(--td-green);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
}

.td-inline-link:hover {
  text-decoration: underline;
}

.td-field-wrap {
  position: relative;
  display: flex;
}

.td-field-wrap input {
  padding-right: 46px;
}

.td-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: #9aa2a8;
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}

.td-eye svg {
  width: 20px;
  height: 20px;
}

.td-eye.is-on,
.td-eye:hover {
  color: var(--td-green);
}

/* ---------------------------------------------------------------- banners */

.td-banner {
  display: flex;
  gap: 10px;
  padding: 11px 13px;
  border-radius: var(--td-radius);
  font-size: 13px;
  line-height: 1.4;
}

.td-banner p {
  margin: 0;
}

.td-banner span {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  margin-top: 1px;
}

.td-banner-info {
  background: #eef4fa;
  border: 1px solid #cfe0ef;
  color: #1f4a73;
}

.td-banner-info span {
  background: #2d6ca3;
}

.td-banner-info span::after {
  content: "i";
}

.td-banner-success {
  background: var(--td-green-wash);
  border: 1px solid #cfe3cf;
  color: #1f5a2b;
}

.td-banner-success span {
  background: var(--td-green);
}

.td-banner-success span::after {
  content: "✓";
  font-size: 11px;
}

/* ---------------------------------------------------------------- verify */

.td-masked {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid var(--td-line);
  border-radius: 4px;
}

.td-masked-label {
  font-size: 13px;
  color: var(--td-ink-faint);
  font-weight: 600;
}

.td-masked-value {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.td-methods {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--td-line);
}

.td-loading {
  grid-column: 1 / -1;
  color: var(--td-ink-faint);
  font-size: 13.5px;
  margin: 0;
}

.td-method {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 15px 2px;
  border: 0;
  border-bottom: 1px solid var(--td-line);
  border-radius: 0;
  background: #fff;
  cursor: pointer;
  font: inherit;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.td-method:hover {
  border-color: var(--td-green);
}

.td-method[aria-pressed="true"] {
  background: transparent;
  box-shadow: none;
}

.td-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #74797d;
  position: relative;
  flex: none;
}

.td-method[aria-pressed="true"] .td-radio {
  border-color: var(--td-green);
}

.td-method[aria-pressed="true"] .td-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--td-green);
}

.td-method-label {
  font-size: 15px;
  font-weight: 600;
  text-align: left;
}

.td-code-input input {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.35em;
  padding: 13px 10px;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- password rules */

.td-rules {
  list-style: none;
  margin: -6px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  font-size: 13px;
  color: var(--td-ink-faint);
}

.td-rules li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.td-rule-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #c2c8cc;
  flex: none;
  position: relative;
}

.td-rules li.is-met {
  color: var(--td-green-dark);
}

.td-rules li.is-met .td-rule-dot {
  background: var(--td-green);
  border-color: var(--td-green);
}

.td-rules li.is-met .td-rule-dot::after {
  content: "✓";
  position: absolute;
  inset: 0;
  color: #fff;
  font-size: 9px;
  display: grid;
  place-items: center;
}

.td-callout {
  display: flex;
  gap: 10px;
  font-size: 12.5px;
  color: var(--td-ink-soft);
  background: #fff;
  border: 1px solid var(--td-line);
  border-left: 3px solid var(--td-green);
  border-radius: 8px;
  padding: 10px 12px;
}

/* ---------------------------------------------------------------- Figma-derived screen system */

/*
 * Every value in this block is measured off a component instance in
 * "TD Guided Experience (Voice)", page "↪ Current PW Flows" - see harness/figma/manifest.json
 * for the node ids. Nothing here is eyeballed, and nothing above this line may contradict it.
 *
 * Canvas          375 x 812, fill #ffffff, 1px #cccccc frame
 * Top Navigation  91 (status 47 + nav 44); 110 on the OTP sheet, whose header is 66
 * Gutters         23.5 of 402 (5.846%), content width 355 - see --fg-gutter
 * Primary button  343 x 46, fill #008a00, SF Pro Text 700 17/22 #ffffff
 * Secondary       343 x 46, SF Pro 590 17/22 #038203
 * Input field     343 x 56, fill #ffffff, stroke #767676 1px, radius 4 4 0 0
 * Sticky bar      fill #f9f9f9 @ 94%, 0.5px top hairline #000000 @ 25%, pad 16 / 16 / 50
 * Home indicator  134 x 5, #1c1c1c, radius 100
 */

:root {
  --fg-green: #008a00;
  /* The shield is brand green, a full stop brighter than the #008a00 used for buttons and links. */
  --fg-green-brand: #43b02a;
  --fg-green-text: #038203;
  --fg-green-deep: #1a5336;
  --fg-green-accent: #00b624;
  --fg-ink: #1c1c1c;
  --fg-label: #616161;
  --fg-field-line: #767676;
  --fg-rule: #cccccc;
  --fg-error: #ae1100;
  --fg-error-bg: #f7e9e9;
  --fg-error-rule: #dcb5b3;
  --fg-select: #f3f3f3;
  --fg-fpo: #d9d9d9;
  /*
   * harness/figma/image.png and image_2.png put every full-width element - both fields, the
   * Login button - at x24 w355 in a 402-wide frame, so the gutter is 23.5 and the content
   * column 355. Carried as ratios rather than the old flat 16px so they track the frame: on
   * this 375-wide canvas they resolve to 21.9px and 331.2px. Percentages resolve against the
   * containing block's width, so --fg-content is only correct inside an unpadded full-width
   * parent; inside a parent already padded by --fg-gutter use width:100%.
   */
  --fg-gutter: 5.846%;
  --fg-content: 88.308%;
  --fg-font: "SF Pro Text", "SF Pro", -apple-system, "Segoe UI", Arial, sans-serif;
}

.device {
  width: 397px;
  height: 834px;
}

.device-screen {
  width: 375px;
  height: 812px;
  background: #fff;
}

/* ---------------------------------------------------------------- status bar + navigation */

.app-status {
  position: relative;
  height: 47px;
  padding: 0 25px;
  background: #fff;
  color: var(--fg-ink);
  font-family: var(--fg-font);
  font-size: 17px;
  font-weight: 600;
}

.app-status-icons i,
.app-batt::after {
  background: var(--fg-ink);
}

.app-batt {
  border-color: var(--fg-ink);
}

/*
 * The OTP steps are presented as a modal sheet: Figma draws a 66px header in which the status
 * bar reverses to white over the dimmed screen behind, and the white card re-enters with a
 * 10px top radius at y42 before squaring off at y52.
 */
.device-screen[data-sheet="true"] .app-status {
  height: 66px;
  align-items: flex-start;
  background: #2b2b2b;
  color: #fff;
}

.device-screen[data-sheet="true"] .app-status > * {
  margin-top: 13px;
}

.device-screen[data-sheet="true"] .app-status-icons i,
.device-screen[data-sheet="true"] .app-batt::after {
  background: #fff;
}

.device-screen[data-sheet="true"] .app-batt {
  border-color: #fff;
}

.device-screen[data-sheet="true"] .app-status::before,
.device-screen[data-sheet="true"] .app-status::after {
  content: "";
  position: absolute;
  background: #fff;
  pointer-events: none;
}

.device-screen[data-sheet="true"] .app-status::before {
  left: 16px;
  right: 16px;
  top: 42px;
  bottom: 0;
  border-radius: 10px 10px 0 0;
}

.device-screen[data-sheet="true"] .app-status::after {
  left: 0;
  right: 0;
  top: 52px;
  bottom: 0;
}

.app-header {
  height: 44px;
  min-height: 44px;
  padding: 0 11px;
  gap: 0;
  border-bottom: 0;
  background: #fff;
  font-family: var(--fg-font);
}

.app-back,
.app-search,
.app-settings {
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* Figma's leading chevron is green; the trailing accessories stay ink. */
.app-back {
  margin-right: auto;
  color: var(--fg-green-text);
}

.app-search,
.app-settings {
  width: 48px;
  color: var(--fg-ink);
}

.app-back svg,
.app-search svg,
.app-settings svg {
  width: 24px;
  height: 24px;
}

.app-nav-title {
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
  color: var(--fg-ink);
}

.app-body {
  position: relative;
  padding: 0 0 var(--cpb-sheet-px, 0px);
  overflow-y: auto;
  background: #fff;
}

/* ---------------------------------------------------------------- shared type */

.td-screen {
  position: relative;
  gap: 0;
  min-height: 100%;
  background: #fff;
  font-family: var(--fg-font);
  color: var(--fg-ink);
}

.td-screen h1 {
  margin: 0;
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--fg-ink);
}

.td-screen h2 {
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
}

.td-lede {
  margin: 0;
  color: var(--fg-ink);
  font-size: 15px;
  line-height: 20px;
}

.td-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.td-link {
  color: var(--fg-green-text);
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  text-decoration: none;
}

.td-link:hover {
  text-decoration: underline;
}

/* Icon slot: 57x57 at x159, glyph #1a5336 with a #00b624 accent. */
.td-screen-icon {
  width: 57px;
  height: 57px;
  flex: none;
  align-self: center;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--fg-green-deep);
}

.td-screen-icon svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------- form screens */

.td-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 59px var(--fg-gutter) 24px;
}

/* On the sheet the nav block is 110 rather than 91, so the icon lands 24 below it. */
.device-screen[data-sheet="true"] .td-content {
  padding-top: 24px;
}

.td-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.td-field {
  position: relative;
  display: block;
  gap: 0;
  border-radius: 4px 4px 0 0;
}

.td-field > label {
  position: absolute;
  z-index: 2;
  top: 17px;
  left: 12px;
  padding: 0;
  color: var(--fg-label);
  background: transparent;
  font-size: 17px;
  line-height: 22px;
  font-weight: 400;
  pointer-events: none;
  transition: 0.15s ease;
}

/* Filled state: Figma swaps the 16/12 padding for 8/12 and floats the label to 12/16. */
.td-field:focus-within > label,
.td-field:has(input:not(:placeholder-shown)) > label {
  top: 8px;
  font-size: 12px;
  line-height: 16px;
  color: var(--fg-label);
}

.td-field input {
  width: 100%;
  height: 56px;
  margin: 0;
  padding: 18px 44px 0 12px;
  border: 1px solid var(--fg-field-line);
  border-radius: 4px 4px 0 0;
  background: #fff;
  color: var(--fg-ink);
  font-family: var(--fg-font);
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
  box-shadow: none;
}

.td-field input:focus {
  outline: none;
  border-color: var(--fg-green);
  box-shadow: inset 0 0 0 1px var(--fg-green);
}

/* Error: a 2px #ae1100 rule along the bottom of the box, and the value reddens with it. */
.td-field.has-error input {
  color: var(--fg-error);
  box-shadow: inset 0 -2px 0 0 var(--fg-error);
}

.td-field.has-error > label {
  color: var(--fg-label);
}

.td-hint,
.td-error {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 16px;
}

/* `display: block` above would otherwise beat the [hidden] attribute. */
.td-hint[hidden],
.td-error[hidden] {
  display: none;
}

.td-hint {
  color: var(--fg-label);
}

.td-error {
  position: relative;
  padding-left: 22px;
  color: var(--fg-error);
  font-weight: 600;
}

.td-error::before {
  content: "!";
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  line-height: 13px;
  text-align: center;
}

.td-field-wrap {
  position: relative;
}

.td-field-wrap input {
  padding-right: 48px;
}

.td-eye {
  position: absolute;
  top: 17px;
  right: 12px;
  width: 24px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fg-ink);
  cursor: pointer;
  /*
   * The pre-Figma .td-eye above still contributes translateY(-50%), which paired with this
   * block's top:17px pulled the glyph 11px above the field-box centre. 17 + 11 = 28 = half of
   * the 56px box, so cancelling the transform is what actually centres it - and what puts it
   * on the same line as .td-infomark on the field above.
   */
  transform: none;
}

.td-eye svg {
  width: 22px;
  height: 22px;
}

/*
 * The info ring on the sign-in username field. It claims the identical 24x22 slot as .td-eye,
 * which is what puts it squarely above the password field's eye. Figma actually draws it 3.4px
 * below the box centre while the eye sits dead centre; aligning the two exactly is the better
 * reading of a design that clearly means them to stack.
 *
 * 19.2px is the measured 20.6px ring scaled from the 402-wide frame onto the 375 canvas.
 */
.td-infomark {
  position: absolute;
  top: 17px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fg-ink);
  cursor: pointer;
}

.td-infomark svg {
  width: 19.2px;
  height: 19.2px;
}

/* ---------------------------------------------------------------- page-level error banner */

/*
 * Figma's page-level error banner, re-measured from harness/figma/image.png and image_2.png
 * (402-wide frame): full-bleed #f7e9e9 between 1px #dcb5b3 hairlines, 17px of padding, a 22.5px
 * solid disc at x18 and the copy starting at x54.5. Scaled to this 370-wide screen that is 16px
 * of padding, a 21px disc at x17 and a 13px gap, which puts the copy at x51 against a target of
 * 50.2. Height follows the copy - 53px for one line here against Figma's 57 in the wider frame -
 * so nothing is pinned with min-height.
 */
.td-formbanner {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 16px 16px 16px 17px;
  background: var(--fg-error-bg);
  border-top: 1px solid var(--fg-error-rule);
  border-bottom: 1px solid var(--fg-error-rule);
  text-align: left;
}

.td-formbanner p {
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  color: var(--fg-ink);
}

.td-formbanner-icon {
  flex: none;
  width: 21px;
  height: 21px;
  background: var(--fg-error);
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
}

/* The banner takes the place of the top padding it pushes out of the way. */
.td-screen.has-form-error .td-content {
  padding-top: 24px;
}

/* ---------------------------------------------------------------- option select + radios */

.td-select {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 56px;
  padding: 8px 44px 8px 12px;
  background: var(--fg-select);
  border: 1px solid var(--fg-select);
  border-radius: 4px 4px 0 0;
}

.td-select-label {
  font-size: 12px;
  line-height: 16px;
  color: var(--fg-label);
}

.td-select-value {
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
  color: var(--fg-ink);
}

.td-select-chevron {
  position: absolute;
  top: 24px;
  right: 14px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--fg-field-line);
  border-bottom: 2px solid var(--fg-field-line);
  transform: rotate(45deg);
}

.td-divider-line {
  height: 1px;
  margin: 0;
  background: var(--fg-rule);
}

.td-methods {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 0;
}

.td-method {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.td-radio {
  width: 24px;
  height: 24px;
  border: 2px solid var(--fg-green);
  border-radius: 50%;
  background: #fff;
  flex: none;
  position: relative;
}

.td-method[aria-pressed="true"] .td-radio {
  border-width: 5px;
}

.td-method[aria-pressed="true"] .td-radio::after {
  content: none;
}

.td-method-label {
  font-size: 17px;
  line-height: 22px;
  font-weight: 400;
  text-align: left;
  color: var(--fg-ink);
}

.td-method[aria-pressed="true"] .td-method-label {
  font-weight: 700;
}

.td-fineprint {
  margin: 0;
  color: var(--fg-ink);
  font-size: 13px;
  line-height: 18px;
}

.td-rules {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
}

.td-code-input input {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3em;
}

/* ---------------------------------------------------------------- buttons + sticky bar */

.td-sticky {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: auto;
  padding: 16px var(--fg-gutter) 50px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.25);
  background: rgba(249, 249, 249, 0.94);
}

/* The confirmation and technical-error screens carry no fill behind their single button. */
.td-screen-info .td-sticky {
  border-top: 0;
  background: transparent;
}

/*
 * Figma `OTP` 9251:9328. Its sticky block is 164 rather than 174 (40px below the Cancel
 * button instead of 50), and the group gaps inside the content column are not the uniform
 * 24 the other form screens use. These offsets restate the measured deltas so the stack
 * lands on the Figma bands: select 329, divider 418, h2 450, radios 490/530, legal 586.
 */
.device-screen[data-sheet="true"] .td-sticky {
  padding-bottom: 40px;
}

.td-screen-verify .td-select {
  margin-top: -8px;
}

.td-screen-verify .td-divider-line {
  margin-top: 9px;
}

.td-screen-verify h2 {
  margin-top: 7px;
}

.td-screen-verify .td-form {
  margin-top: -8px;
}

.td-screen-verify .td-fineprint {
  margin-top: -8px;
}

.td-btn {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 46px;
  padding: 12px 16px;
  border: 0;
  /*
   * Square, not a pill. The Login button's first painted row in figma/image.png already spans
   * the full x24..377.5, so the corner radius is 0.
   */
  border-radius: 0;
  font-family: var(--fg-font);
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
  cursor: pointer;
}

.td-btn-primary {
  background: var(--fg-green);
  color: #fff;
}

.td-btn-primary:disabled {
  color: #fff;
  background: #8b8b8b;
  opacity: 0.52;
  cursor: default;
}

.td-btn-link {
  min-height: 46px;
  padding: 12px 16px;
  background: transparent;
  color: var(--fg-green-text);
  font-weight: 600;
}

/* Home indicator: 134 x 5 at x121 y799. */
.app-body::after {
  content: "";
  position: fixed;
  left: 50%;
  bottom: 10px;
  width: 134px;
  height: 5px;
  margin-left: -67px;
  border-radius: 100px;
  background: var(--fg-ink);
  pointer-events: none;
  z-index: 3;
}

/* ---------------------------------------------------------------- information screens */

.td-info-content {
  flex: 1;
  justify-content: flex-start;
  gap: 64px;
  padding: 148px 24px 24px;
  text-align: left;
}

.td-art {
  width: 150px;
  height: 150px;
  align-self: center;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--fg-green-deep);
}

/* Figma ships these as a grey #d9d9d9 "FPO" placeholder circle. The circle is reproduced; the
   magenta FPO caption is a design annotation and is deliberately not. */
.td-art-fpo,
.td-art-success {
  border-radius: 50%;
  background: var(--fg-fpo);
}

.td-art svg {
  width: 100px;
  height: 100px;
  color: var(--fg-green-deep);
}

.td-art-success svg {
  color: var(--fg-green);
}

.td-info-body {
  margin: 0;
  font-size: 17px;
  line-height: 22px;
  color: var(--fg-ink);
}

/* ---------------------------------------------------------------- sign-in (Figma 9251:9278) */

/*
 * Re-derived from harness/figma/image.png and image_2.png, the two 402x874 exports of the live
 * sign-in screen. They are the same screen in two states - a one-line banner with both fields
 * in error, and a three-line banner with the fields at rest - which is what makes them readable
 * as a layout: every band that differs between them differs by exactly the height the state
 * added, so the whole screen is in normal flow, not pinned.
 *
 * That is the structural change here. The screen used to pin every element to a band measured
 * off the old flattened 375x812 capture. Pinning cannot express the two things this screen
 * actually does - a banner that pushes the page down, and a per-field error message that pushes
 * everything below it - so the stack is now margins, and the measured Figma gaps are the
 * margins. Vertical values are Figma's raw px: the two frames are 874 and 812 tall but the
 * content areas below the top block are 758 and 765, near enough that scaling the rhythm would
 * only shrink the page away from the bottom of the screen. Horizontal values are ratios.
 *
 * Measured bands, as offsets from the top of the content area (Figma y minus the 116px top
 * block minus the banner), with both exports agreeing:
 *   shield  24, 76x68 centred        field 1  178, 56 tall
 *   greeting 112, 21 tall            field 2  256 at rest / 282 once field 1 shows an error
 *   hint     320                     link     351        checkbox 401
 *   button   461, 43 tall            footer   538
 */
.td-screen-signin {
  position: relative;
  display: block;
  padding: 0;
  text-align: center;
}

.td-signin-body {
  padding: 24px var(--fg-gutter) 0;
  min-height: 765px;
}

/*
 * The shield is the element the old capture got worst: it was pinned at 30x28 where both
 * exports put it at 76x68 in the 402-wide frame, two and a half times the area. The width is a
 * ratio of the content column (76/355) rather than of the frame, because --fg-gutter has
 * already padded this box in; aspect-ratio holds the shape and auto margins centre it.
 */
.td-signin-mark {
  width: 21.408%;
  aspect-ratio: 76 / 68;
  margin: 0 auto;
  color: var(--fg-green-brand);
}

.td-signin-mark svg {
  /*
   * display:block matters: an inline svg sits on a text baseline, and the descender gap under it
   * added 5.2px to this box, pushing the greeting and the whole stack below it off their bands.
   */
  display: block;
  width: 100%;
  height: 100%;
}

.td-signin-greeting {
  /*
   * Not Figma's raw 20px gap. The shield is the one element whose height is a ratio rather than
   * raw px - 76x68 of the 402 frame renders 70.9x63.4, so its bottom edge lands at 87.4 where
   * Figma's lands at 92. The gap absorbs that 4.6px difference plus the 1px line-box overhang,
   * which puts the greeting back on its measured band at 112.
   */
  margin: 25px 0 0;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: var(--fg-ink);
}

/*
 * The form is the only left-aligned block on an otherwise centred screen. .td-form carries a
 * 24px flex gap for the other screens; sign-in zeroes it because every gap here is a measured
 * Figma value and the two would otherwise stack.
 *
 * Each margin below states the Figma gap, then subtracts the overhang measured against the
 * live render - browser line boxes are taller than the ink Figma was measured from, and the
 * error on an eight-element stack reaches 15px by the footer. Same correction the OTP screen
 * carries. Figma gaps in order: 45, 22, 19, 33, 39, 34.
 */
.td-signin-form {
  margin-top: 42px;
  gap: 0;
  text-align: left;
}

.td-screen-signin .td-field {
  display: block;
  width: 100%;
}

.td-screen-signin .td-field + .td-field {
  margin-top: 22px;
}

/* Figma swaps the resting hint for the error message rather than showing both. */
.td-screen-signin .td-field.has-error .td-hint {
  display: none;
}

.td-signin-forgot {
  display: block;
  margin-top: 15px;
}

/*
 * A checked tick box: Figma draws a 20x22 #008a00 box with a white check, then the label at
 * 17/22. It is decorative in the demo - nothing reads it - but leaving it out moved the Login
 * button 54px up the screen.
 */
.td-signin-remember {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  font-size: 17px;
  line-height: 22px;
  color: var(--fg-ink);
  cursor: pointer;
}

.td-signin-remember input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--fg-green);
}

.td-screen-signin .td-btn-primary {
  width: 100%;
  margin-top: 38px;
  height: 46px;
  min-height: 46px;
  padding: 0;
}

/*
 * Figma puts a single centred line here, not the three text links the harness used to carry:
 * "New to TD or digital banking? Get started", with only "Get started" in the link green. Its
 * ink sits at content offset 538, x57.5..344 of the 402 frame.
 */
.td-signin-promo {
  margin-top: 30.5px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: var(--fg-ink);
}

/*
 * The welcome page's bottom action row, traced from harness/figma/bottom_welcome.png.
 *
 * Figma draws it full bleed rather than inside the content gutter: the row spans x3.75..398.25
 * of the 402 frame as three equal columns, which lands the outer icon centres on 69.5 and 332.5.
 * Equal thirds of the 355-wide content would have given 82.7 and 319.3 - 13px adrift - so the
 * row breaks out of the gutter. -5.563% is that bleed expressed against the content width.
 *
 * Row ink sits at content offset 627 (icons, 22 tall) and 668.6 (labels). The labels fall below
 * the 874 frame in Figma's own export, which is why only bottom_welcome.png evidences them.
 */
.td-signin-icons {
  display: flex;
  margin: 68.7px -5.563% 0;
}

.td-signin-icon {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--fg-green-text);
}

/* The three glyphs differ in height (22 / 21 / 17.3 frame px) and Figma centres them on a
   common 22px band, so the art sits in a fixed slot rather than sizing the row itself. */
.td-signin-icon-art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20.52px;
}

.td-signin-icon-art svg {
  display: block;
  fill: currentColor;
}

/*
 * Label size is solved from the raster, not guessed: the capital in each label measures 9.0
 * frame px tall in bottom_welcome.png, and cap height is 0.716em in this family, so the type is
 * 12.5px. The ink extents that falls out of ("Find Locations" 86.8 frame px) match the crop.
 */
.td-signin-icon-label {
  margin-top: 23.6px;
  font-size: 12.5px;
  line-height: 14.6px;
  text-align: center;
  white-space: nowrap;
}

/* ------------------------------------------- login help sheet (Figma "Bottom Sheet Option") */

/*
 * The static sheet that stands between the sign-in screen and the live assistant. It is reached
 * two ways: by tapping the "!" on the error banner, or automatically on the third failed login.
 * Its only exit into the assistant is the "Talk with our login assistant" link.
 *
 * Geometry is proportional rather than pinned, because the Figma frame is 402x874 while this
 * harness renders a 375x812 canvas. Ratios are taken from that frame:
 *   scrim   #1C1C1C, group opacity 0.4 x fill opacity 0.6 = 0.24 effective
 *   sheet   top 214/874, white BG inset 6px left/right and 6px from the bottom
 *   radius  34px 34px 58px 58px, Bottom Elevations/Medium shadow
 * The assistant sits at z-index 40, so the sheet stays below it - opening the assistant always
 * covers the sheet rather than fighting it.
 */
.td-sheet-scrim {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: rgba(28, 28, 28, 0.24);
  border: 0;
  padding: 0;
  animation: td-sheet-fade 0.24s ease-out;
}

.td-sheet {
  position: absolute;
  z-index: 31;
  left: 1.49%;
  right: 1.49%;
  bottom: 0.69%;
  height: 74.83%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 34px 34px 58px 58px;
  /* Bottom Elevations/Medium */
  box-shadow:
    0 6px 8px rgba(28, 28, 28, 0.04),
    0 1px 14px rgba(28, 28, 28, 0.06);
  overflow: hidden;
  animation: td-sheet-up 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes td-sheet-fade {
  from {
    opacity: 0;
  }
}

@keyframes td-sheet-up {
  from {
    transform: translateY(100%);
  }
}

/* Toolbar: 52px tall - a 16px grabber block over a 36px header row. */
.td-sheet-toolbar {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 52px;
}

.td-sheet-grabber {
  padding: 5px 0 0;
}

.td-sheet-grabber span {
  display: block;
  width: 36px;
  height: 5px;
  background: #ccc;
  border-radius: 100px;
}

.td-sheet-header {
  display: flex;
  align-items: center;
  align-self: stretch;
  height: 36px;
  padding: 0 0 0 16px;
}

.td-sheet-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  /* iOS/Subheadline Bold */
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.23px;
  color: #1c1c1c;
}

.td-sheet-close {
  flex: none;
  padding: 8px 16px;
  border: 0;
  background: none;
  font: inherit;
  /* iOS/Subheadline Bold */
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.23px;
  color: #038203;
  cursor: pointer;
}

/*
 * Content block, 16px below the toolbar. Figma gives the text columns and the card different
 * gutters inside the 390 sheet - 359-363 wide for text (~15px), 330 for the card (30px) - so the
 * padding lives on the children rather than on this box.
 */
.td-sheet-content {
  flex: 1;
  min-height: 0;
  margin-top: 16px;
  padding: 0 0 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* iOS scrollbars overlay rather than take layout width, which would narrow every column. */
  scrollbar-width: none;
}

.td-sheet-content::-webkit-scrollbar {
  display: none;
}

.td-sheet-content p {
  margin: 0 3.97%;
  /* iOS/Body */
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px;
  color: #000;
}

.td-sheet-content h3 {
  margin: 32px 3.46% 16px;
  /* iOS/Title 3 */
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.45px;
  color: #000;
}

/*
 * Figma draws the card as a 330x130.89 #D9D9D9 FPO rectangle at radius 15 with a magenta
 * annotation ellipse ringing the digits. The real asset already ships with this harness, so it
 * stands in at the same 330-of-390 width; the ellipse is a note to the designer and is not drawn.
 */
/*
 * 84.62% overflowed .td-sheet-content by 66px, which pushed "Talk with our login assistant" -
 * the sheet's only route into the assistant - clean off the bottom of the screen. The card is
 * the only elastic element here, so it absorbs the difference. Measured ceiling is 55.63%; 50%
 * keeps deliberate slack so a copy or font change cannot silently hide that link again.
 */
.td-sheet-card {
  display: block;
  width: 50%;
  margin: 16px auto;
  border-radius: 15px;
}

.td-sheet-link {
  display: block;
  margin: 16px 3.46% 0;
  /* iOS/Regular Link */
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: -0.43px;
  color: #008a00;
  text-decoration: none;
  cursor: pointer;
}

/* The "!" becomes the sheet's trigger on sign-in. Reset the button box so it stays the circle. */
button.td-formbanner-icon {
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

/*
 * The collapsed assistant bar is the one thing that outranks the sheet (z-index 40 against 31),
 * and it lands exactly over the "Talk with our login assistant" link. Figma shows nothing behind
 * the sheet, so the bar stands down until the sheet closes - which is also the moment the
 * assistant opens for real. The widget's own styling is untouched.
 *
 * Sign-in goes further and hides the bar outright. The screen is meant to look like the bank's
 * own login page with no assistant on it at all, so the only way in is the info ring on the
 * username field -> login-help sheet -> "Talk with our login assistant". Once that link is taken
 * the widget leaves [data-size="min"] and appears exactly as it did before, ratios included.
 */
.device-screen[data-page="signin"] .cpb[data-size="min"],
.device-screen[data-login-help="true"] .cpb[data-size="min"] {
  display: none;
}

/* ---------------------------------------------------------------- assistant affordance */

.td-field.is-highlighted input,
.td-field.is-highlighted .td-select {
  box-shadow:
    inset 0 0 0 2px var(--fg-green),
    0 0 0 4px rgba(0, 138, 0, 0.18);
}

@media (max-width: 460px) {
  .device-screen {
    width: 100%;
    height: 100%;
  }
}