/* TinyBank components. Square, line-drawn, tracked uppercase for anything that acts. */
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }

.tb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-4) 0 calc(var(--space-4) + 0.24em);
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; line-height: 16px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink); background: transparent;
  border: var(--stroke-hairline) solid var(--line); border-radius: var(--radius-0);
  cursor: pointer; transition: background-color .15s ease, color .15s ease, transform 160ms var(--ease-out);
}
.tb-btn:hover { background: var(--surface-raised); }
.tb-btn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(0.97); }
.tb-btn:focus-visible { outline: var(--stroke-focus) solid var(--line); outline-offset: 3px; }
.tb-btn-primary { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.tb-btn-primary:hover { background: var(--ink-muted); border-color: var(--ink-muted); }
.tb-btn-quiet { border-color: transparent; padding-left: 0.24em; padding-right: 0; min-height: 32px; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.tb-btn-quiet:hover { background: transparent; color: var(--ink-muted); }
.tb-btn:disabled, .tb-btn[aria-disabled="true"] { color: var(--ink-muted); background: transparent; border-color: var(--line-subtle); cursor: not-allowed; }

.tb-frame {
  display: inline-block; max-width: 100%;
  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 0.3em);
  border: var(--stroke-hairline) solid var(--line); border-radius: var(--radius-0);
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; line-height: 20px;
  letter-spacing: 0.3em; text-transform: uppercase; text-align: center; color: var(--ink);
}

.tb-tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) 10px var(--space-1) calc(10px + 0.14em);
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; line-height: 16px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-muted); border: var(--stroke-hairline) solid currentColor; border-radius: var(--radius-0);
}
.tb-tag::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.tb-tag-positive { color: var(--positive); }
.tb-tag-caution { color: var(--caution); }
.tb-tag-negative { color: var(--negative); }

.tb-logo-tile { display: block; background: #000000; }
.tb-logo-tile img { display: block; width: 100%; height: auto; }