/* Ask the register (DESIGN 5.3). The root is data-ui: the live thing. */
.register { position: relative; }
.register__inner { display: flex; flex-direction: column; }

.register__form { margin-top: clamp(28px, 3vw, 48px); }
.register__input {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  outline: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 7vw, 112px);
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--ink);
  caret-color: var(--accent);     /* works everywhere */
  caret-shape: block;             /* a brass block where supported (Chromium); native blink */
  text-overflow: clip;
  overflow-x: auto;
  -webkit-appearance: none;
  appearance: none;
}
.register__input::placeholder { color: var(--muted); opacity: 1; }
.register__input::selection { background: var(--accent); color: var(--accent-ink); }
.register__input:focus-visible { outline: none; }
/* the field has no box, so focus shows as a brass hairline under the line */
.register__form:focus-within { box-shadow: none; } /* taste-skill-ignore: resets a shadow to none */
.register__form { position: relative; }
.register__form::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--glass-line);
  transition: background-color 300ms ease;
}
.register__form:focus-within::after { background: var(--accent); }

.register__answer { margin-top: 40px; max-width: 620px; }
.register__panel {
  padding: 22px 24px 8px;
  border: 1px solid var(--glass-line); /* taste-skill-ignore: answer panel inside data-ui */
  border-radius: var(--radius);
  background: var(--surface);
}
.register__summary {
  font-family: var(--font-text);
  font-size: 1.3125rem;
  line-height: 1.4;
  padding-bottom: 18px;
}
.register__rows { font-family: var(--font-display); font-size: 15px; }
.register__rows:empty { display: none; }
.register__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 16px;
  min-height: 48px;
  border-top: 1px solid var(--glass-line); /* taste-skill-ignore: result rows inside data-ui */
}
.register__name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.register__cls { color: var(--muted); font-variant-numeric: tabular-nums; }
.register__val { font-variant-numeric: tabular-nums; text-align: right; min-width: 7.5em; color: var(--ink); }
.register__val--unpaid { color: #f4935a; }
.register__val--muted { color: var(--muted); }
.register__more { display: block; padding: 12px 0 14px; border-top: 1px solid var(--glass-line); /* taste-skill-ignore: result rows inside data-ui */ color: var(--muted); font-family: var(--font-display); font-size: 14px; }
.register__note {
  margin-top: 14px;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--muted);
}

.register__examples {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 28px;
  margin-top: 28px;
  font-size: 1.0625rem;
}
.register__try { color: var(--muted); font-style: italic; }
.register__example {
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(245, 165, 36, 0.6);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  padding: 4px 0;
  transition: color 240ms ease, text-decoration-color 240ms ease, transform 300ms var(--ease-out);
}
.register__example:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .register__example:hover { color: var(--accent); text-decoration-color: var(--accent); }
}

@media (max-width: 720px) {
  .register__input { font-size: 11vw; }
  .register__answer { margin-top: 32px; }
  .register__panel { padding: 18px 16px 4px; }
  .register__summary { font-size: 1.1875rem; padding-bottom: 14px; }
  .register__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; padding-block: 8px; }
  .register__cls { display: none; }
  .register__val { min-width: 0; }
  .register__examples { gap: 10px; }
  .register__try { flex: 0 0 100%; }
  .register__example {
    display: inline-flex; align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: var(--pill);
    background: var(--surface);
    text-decoration: none;
  }
}