/* ==========================================================================
   TPM Labs ID — visual concept pass (PROTOTYPE)
   apps.theomerino.com

   This file is additive and disposable. It introduces no new design language:
   every colour, radius, curve and type step below is taken from styles.css.

   TO REMOVE ENTIRELY: delete identity.css + identity.js and remove the two
   lines they add to index.html. Launcher returns to its approved state.

   NOTHING HERE IS WIRED TO A BACKEND. See identity.js.
   ========================================================================== */

:root {
  /* Local surfaces only. Existing tokens are never redefined. */
  --tid-sheet: rgba(18, 22, 26, .74);
  --tid-scrim: rgba(4, 6, 8, .55);
  --tid-row: rgba(255, 255, 255, .05);
  --tid-rowh: rgba(255, 255, 255, .085);
  --tid-hatch: rgba(255, 255, 255, .07);
  --tid-sheetR: 28px;

  /* PIN cell edge. Square by construction: one token drives BOTH axes, so the
     two can never drift apart. Floor 52px keeps the target comfortably above
     the 44px touch minimum on a 320px phone. */
  --tid-pinCell: clamp(52px, 15.5vw, 62px);
}

@media (prefers-color-scheme: light) {
  :root {
    --tid-sheet: rgba(255, 255, 255, .84);
    --tid-scrim: rgba(118, 122, 128, .34);
    --tid-row: rgba(255, 255, 255, .6);
    --tid-rowh: rgba(255, 255, 255, .85);
    --tid-hatch: rgba(0, 0, 0, .06);
  }
}

/* --------------------------------------------------------------------------
   The hamburger becomes a real toggle. Sits above the scrim so the nav pill
   stays crisp and keeps reading as the anchor the sheet came from.
   -------------------------------------------------------------------------- */

/* A labelled pill rather than an icon — same height and position, same glass,
   but the control now names what it opens. Full pill, per the geometry rule. */
.nav__menu {
  width: auto;
  min-width: 34px;
  height: 34px;
  box-sizing: border-box;
  flex-direction: row;
  gap: 0;
  padding: 0 13px;
  border: 1px solid var(--gedge);
  transition: opacity .2s ease, transform .2s var(--ease),
              background .28s var(--ease), border-color .28s var(--ease);
}

.nav__id {
  font-weight: 590;
  font-size: 13.5px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--t1);
  transition: color .28s var(--ease);
}

/* While the panel is open the control reads as the current surface. */
.nav__menu.is-open {
  background: var(--btn);
  border-color: transparent;
}

.nav__menu.is-open .nav__id { color: var(--btnfg); }

/* --------------------------------------------------------------------------
   Scrim — the same two-layer depth stack the launch overlay already uses.
   z-index 15 keeps it above main (1) and the footer (10), below the nav (20).
   -------------------------------------------------------------------------- */

.tid-scrim {
  position: fixed;
  inset: 0;
  z-index: 15;
  background: var(--tid-scrim);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: tpm-fade .3s var(--ease) both;
}

.tid-scrim[hidden],
.tid-anchor[hidden] { display: none; }

.tid-scrim.is-closing { animation: tid-fade-out .24s var(--ease) both; }

/* --------------------------------------------------------------------------
   Anchor + rail — mirrors the nav's own centring so that on desktop the sheet
   hangs from the right edge of the nav pill at every width.
   -------------------------------------------------------------------------- */

.tid-anchor {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  pointer-events: none;
}

.tid-rail {
  width: 100%;
  max-width: var(--maxW);
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   The sheet
   -------------------------------------------------------------------------- */

.tid-sheet {
  pointer-events: auto;
  width: 100%;
  height: min(88dvh, 780px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border-radius: var(--tid-sheetR) var(--tid-sheetR) 0 0;
  background: var(--tid-sheet);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  backdrop-filter: blur(30px) saturate(190%);
  border: 1px solid var(--gedger);
  border-bottom: none;
  box-shadow: var(--gtopr), 0 -18px 60px rgba(0, 0, 0, .5);
  animation: tid-rise .42s var(--ease) both;
  overflow: hidden;
}

.tid-sheet.is-closing { animation: tid-sink .26s var(--ease) both; }

.tid-sheet:focus { outline: none; }

@media (min-width: 760px) {
  .tid-anchor {
    padding: calc(12px + var(--navH) + 10px + env(safe-area-inset-top, 0px))
             var(--padR) var(--pad) var(--padL);
  }

  .tid-rail {
    align-items: flex-start;
    justify-content: flex-end;
  }

  .tid-sheet {
    width: 420px;
    max-width: 100%;
    height: min(640px, 100%);
    border-radius: 24px;
    border-bottom: 1px solid var(--gedger);
    box-shadow: var(--gtopr), 0 24px 60px rgba(0, 0, 0, .5);
    animation: tid-drop .42s var(--ease) both;
  }

  .tid-sheet.is-closing { animation: tid-lift .26s var(--ease) both; }
}

@media (min-width: 1180px) {
  .tid-sheet { width: 460px; height: min(700px, 100%); }
}

/* --------------------------------------------------------------------------
   Top bar — back / title / close
   -------------------------------------------------------------------------- */

.tid-topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Top padding carries the clearance the removed grip used to provide. */
  padding: 18px 12px 14px 16px;
  border-bottom: 1px solid var(--hair);
}

@media (min-width: 760px) {
  .tid-topbar { padding: 14px 14px 14px 18px; }
}

.tid-title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 590;
  font-size: 16px;
  letter-spacing: -.014em;
  color: var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tid-title .wordmark { font-size: 16px; }

/* Panel title reads "TPM Labs ID" — only ID takes the heavier weight. */
.wordmark__id {
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--t1);
}

/* Circular glass controls — same recipe as .nav__menu */
.tid-icon {
  flex: none;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass);
  cursor: pointer;
  transition: opacity .2s ease, transform .2s var(--ease);
  outline-offset: 4px;
}

.tid-icon:hover { opacity: .9; }
.tid-icon:active { transform: scale(.985); }
.tid-icon:focus-visible { outline: 2px solid var(--t1); }
.tid-icon[hidden] { display: none; }

.tid-chev-l,
.tid-chev {
  display: block;
  width: 7px;
  height: 7px;
  border-right: 1.6px solid var(--t2);
  border-bottom: 1.6px solid var(--t2);
}

.tid-chev-l { transform: rotate(135deg) translate(-1px, -1px); }

.tid-chev {
  flex: none;
  border-color: var(--t4);
  transform: rotate(-45deg);
}

.tid-x {
  position: relative;
  display: block;
  width: 13px;
  height: 13px;
}

.tid-x::before,
.tid-x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 13px;
  height: 1.6px;
  border-radius: 2px;
  background: var(--t2);
}

.tid-x::before { transform: rotate(45deg); }
.tid-x::after  { transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   Scrolling view area
   -------------------------------------------------------------------------- */

.tid-viewport {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* The sheet is full-bleed on mobile, so its own content carries the
     horizontal insets. 0px in portrait and on desktop. */
  padding: 16px calc(16px + env(safe-area-inset-right, 0px))
           calc(24px + env(safe-area-inset-bottom, 0px))
           calc(16px + env(safe-area-inset-left, 0px));
}

@media (min-width: 760px) {
  /* Anchored below the nav on desktop, never against a hardware edge. */
  .tid-viewport { padding: 18px 18px 24px; }
}

.tid-view { animation: tid-in .32s var(--ease) both; }
.tid-view.is-back { animation: tid-in-back .32s var(--ease) both; }

/* --------------------------------------------------------------------------
   Identity summary card
   -------------------------------------------------------------------------- */

.tid-idcard {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  box-sizing: border-box;
  border: 1px solid var(--gedge);
  border-radius: 20px;
  background: var(--tid-row);
  box-shadow: var(--gtop);
  text-align: left;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s var(--ease);
  outline-offset: 4px;
  font: inherit;
  color: inherit;
}

.tid-idcard:hover { opacity: .9; }
.tid-idcard:active { transform: scale(.994); }
.tid-idcard:focus-visible { outline: 2px solid var(--t1); }

/* Avatar — the icon tile's geometry, achromatic instead of app-coloured. */
.tid-avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--glass);
  border: 1px solid var(--gedge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  font-weight: 590;
  font-size: 17px;
  letter-spacing: -.02em;
  color: var(--t1);
}

.tid-avatar--sm { width: 38px; height: 38px; border-radius: 12px; font-size: 13px; }

.tid-idcard__meta { min-width: 0; flex: 1 1 auto; }

.tid-name {
  font-weight: 590;
  font-size: 17px;
  letter-spacing: -.02em;
  color: var(--t1);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tid-handle {
  margin: 3px 0 0;
  font: 400 12.5px ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--t3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   Chips — the .status pill, reused
   -------------------------------------------------------------------------- */

.tid-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.tid-chip {
  height: 24px;
  padding: 0 10px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--glass);
  border: 1px solid var(--gedge);
  font: 500 9px ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .13em;
  color: var(--t2);
  white-space: nowrap;
}

.tid-chip__dot {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--t3);
}

.tid-chip--muted { color: var(--t4); }

/* Suspended reads as withdrawn, not alarming — hatched rather than coloured. */
.tid-chip--off {
  color: var(--t4);
  background: repeating-linear-gradient(135deg, var(--tid-hatch) 0 2px, transparent 2px 7px);
}

/* --------------------------------------------------------------------------
   Grouped lists
   -------------------------------------------------------------------------- */

.tid-group { margin-top: 24px; }
.tid-group:first-child { margin-top: 0; }

.tid-group__label {
  margin: 0 0 10px 4px;
  font: 500 10px ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .16em;
  color: var(--t4);
}

.tid-list {
  border: 1px solid var(--gedge);
  border-radius: 18px;
  overflow: hidden;
  background: var(--tid-row);
  box-shadow: var(--gtop);
}

.tid-row {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 12px 16px;
  margin: 0;
  border: none;
  border-top: 1px solid var(--hair);
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  outline-offset: -2px;
}

.tid-row:first-child { border-top: none; }

button.tid-row { cursor: pointer; transition: background .2s ease; }
button.tid-row:hover { background: var(--tid-rowh); }
button.tid-row:active { background: var(--tid-rowh); }
button.tid-row:focus-visible { outline: 2px solid var(--t1); }

.tid-row__text { min-width: 0; flex: 1 1 auto; }

.tid-row__label {
  display: block;
  font-size: 15px;
  letter-spacing: -.01em;
  color: var(--t1);
}

.tid-row__sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--t3);
}

.tid-row__value {
  flex: none;
  max-width: 46%;
  font-size: 14px;
  color: var(--t2);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tid-row__value--mono { font: 400 13px ui-monospace, "SF Mono", Menlo, monospace; }

/* --------------------------------------------------------------------------
   Toggle — achromatic. On = the same fill the Open pill uses.
   -------------------------------------------------------------------------- */

.tid-toggle {
  flex: none;
  position: relative;
  width: 48px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--gedge);
  border-radius: 100px;
  background: var(--glass);
  cursor: pointer;
  transition: background .28s var(--ease), opacity .2s ease;
  outline-offset: 4px;
}

.tid-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--t2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  transition: transform .28s var(--ease), background .28s var(--ease);
}

.tid-toggle[aria-checked="true"] { background: var(--btn); border-color: transparent; }
.tid-toggle[aria-checked="true"]::after { transform: translateX(18px); background: var(--btnfg); }
.tid-toggle:focus-visible { outline: 2px solid var(--t1); }
.tid-toggle:disabled { cursor: default; opacity: .45; }

/* --------------------------------------------------------------------------
   Buttons — every one a full pill, per the geometry rule
   -------------------------------------------------------------------------- */

.tid-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 0 22px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 100px;
  background: var(--glass);
  color: var(--t1);
  font: inherit;
  font-weight: 590;
  font-size: 16px;
  letter-spacing: -.012em;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s var(--ease), background .2s ease;
  outline-offset: 4px;
}

.tid-btn:hover { opacity: .9; }
.tid-btn:active { transform: scale(.985); }
.tid-btn:focus-visible { outline: 2px solid var(--t1); }

.tid-btn--primary { background: var(--btn); color: var(--btnfg); }
.tid-btn--quiet { background: transparent; border-color: var(--gedge); color: var(--t2); }

/* Destructive: distinguished by treatment, not hue, so the launcher chrome
   stays achromatic. Outlined + hatched + mono caps reads as "different kind
   of action" without importing a colour the design system does not have. */
.tid-btn--danger {
  background: repeating-linear-gradient(135deg, var(--tid-hatch) 0 2px, transparent 2px 8px);
  border-color: var(--t4);
  color: var(--t1);
  font: 500 11px ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .14em;
}

.tid-btn--danger.is-armed {
  background: repeating-linear-gradient(135deg, var(--tid-hatch) 0 3px, transparent 3px 6px);
  border-color: var(--t1);
  border-width: 1.5px;
}

.tid-btn + .tid-btn { margin-top: 10px; }

.tid-actions { margin-top: 22px; }

/* A destructive group is fenced off with its own hairline and caution label. */
.tid-fence {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px dashed var(--hair);
}

.tid-fence__label {
  margin: 0 0 12px 4px;
  font: 500 10px ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .16em;
  color: var(--t4);
}

/* Inline destructive control inside a row */
.tid-mini {
  flex: none;
  height: 32px;
  padding: 0 14px;
  border-radius: 100px;
  border: 1px solid var(--gedge);
  background: transparent;
  color: var(--t2);
  font: 500 9.5px ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .13em;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s var(--ease);
  outline-offset: 3px;
}

.tid-mini:hover { opacity: .9; }
.tid-mini:active { transform: scale(.985); }
.tid-mini:focus-visible { outline: 2px solid var(--t1); }
.tid-mini.is-armed {
  border-color: var(--t1);
  color: var(--t1);
  background: repeating-linear-gradient(135deg, var(--tid-hatch) 0 3px, transparent 3px 6px);
}
.tid-mini:disabled { opacity: .4; cursor: default; }

/* --------------------------------------------------------------------------
   Fields
   -------------------------------------------------------------------------- */

.tid-field {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  box-sizing: border-box;
  border: 1px solid var(--gedge);
  border-radius: 16px;
  background: var(--tid-row);
  color: var(--t1);
  /* 16px minimum keeps iOS from zooming the page on focus. */
  font: 400 16px -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  letter-spacing: -.01em;
  outline-offset: 3px;
}

.tid-field::placeholder { color: var(--t4); }
.tid-field:focus-visible { outline: 2px solid var(--t1); }

.tid-search { margin-bottom: 16px; }

/* Two-stage sign-in (mirrors Round & Round's username -> PIN pattern) */

.tid-label {
  display: block;
  margin: 0 0 8px 4px;
  font-size: 12.5px;
  color: var(--t3);
}

/* Inline validation. Distinguished by CONTRAST, not hue: full-strength text
   against the muted note colour, plus a brightened field border. Round & Round
   uses red here, but the launcher chrome is achromatic by rule, so the error
   reads as "this line is different" rather than importing a colour the design
   system does not have. One token away from red if that is ever wanted. */
.tid-fielderror {
  min-height: 18px;
  margin: 8px 4px 0;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--t1);
}

.tid-field.is-error { border-color: var(--t1); }

/* "Signing in as @handle" on the PIN step */
.tid-signinas { margin: 0 0 18px 4px; }

.tid-signinas__label {
  display: block;
  font-size: 12.5px;
  color: var(--t3);
}

.tid-signinas__handle {
  display: block;
  margin-top: 4px;
  font: 590 17px ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: -.01em;
  color: var(--t1);
}

.tid-note {
  margin: 10px 4px 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--t4);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   PIN entry — four cells, one hidden input
   -------------------------------------------------------------------------- */

.tid-pinrow { margin-top: 14px; }
.tid-pinrow:first-child { margin-top: 0; }

.tid-pinrow__label {
  display: block;
  margin: 0 0 8px 4px;
  font-size: 12.5px;
  color: var(--t3);
}

.tid-pin {
  position: relative;
  display: flex;
  justify-content: center;   /* the row stays centred at any cell size */
  gap: 8px;                  /* tightened from 10px */
}

.tid-pin__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: none;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
}

.tid-pin__cell {
  /* Was `flex: 1 1 0` + `height: 56px` with the inherited content-box, which
     produced 77.75 x 58 rectangles whose declared height was not their real
     height. Fixed square, border-box, so the number below IS the outer size. */
  flex: none;
  box-sizing: border-box;
  width: var(--tid-pinCell);
  height: var(--tid-pinCell);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gedge);
  border-radius: 16px;
  background: var(--tid-row);
  /* Declared once so the focus/error rules only ever change the ring, never
     the border width — nothing here can alter layout. */
  box-shadow: none;
  transition: box-shadow .2s ease;
}

.tid-pin__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--t1);
  transform: scale(0);
  transition: transform .2s var(--ease);
}

.tid-pin__cell.is-filled .tid-pin__dot { transform: scale(1); }

/* Focus and error are drawn as INSET rings.
   An inset box-shadow paints inside the border box and is not part of layout,
   so the cell's outer dimensions are byte-identical in every state — no
   growth, no reflow, no shift as focus moves along the row. The border width
   itself never changes; only what is painted within it does.
   The old rule swapped border-color from .12 to .62 alpha, which did not
   resize anything but read as a heavier — and therefore larger — box. */
.tid-pin:focus-within .tid-pin__cell.is-next {
  box-shadow: inset 0 0 0 1.5px var(--t3);
}

.tid-pin.is-error .tid-pin__cell {
  box-shadow: inset 0 0 0 1px var(--t2);
}

/* --------------------------------------------------------------------------
   Toast — every mock action lands here instead of doing something
   -------------------------------------------------------------------------- */

.tid-toast {
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border-radius: 100px;
  /* Themed, not hardcoded. These were fixed dark-glass values, so in the LIGHT
     appearance the pill blurred to near-white while the label stayed #f4f7f8 —
     white text on a white bubble. The tokens resolve correctly in both
     appearances and the pill/glass treatment is unchanged: in dark mode
     --glassr/--gedger/--gtopr are exactly the literals that were here before,
     so this is a no-op there and a fix in light. */
  background: var(--glassr);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  backdrop-filter: blur(30px) saturate(190%);
  border: 1px solid var(--gedger);
  box-shadow: var(--gtopr), 0 18px 44px rgba(0, 0, 0, .28);
  font: 500 12.5px -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  letter-spacing: -.008em;
  color: var(--t1);
  text-align: center;
  animation: tid-toast-in .32s var(--ease) both;
}

.tid-toast[hidden] { display: none; }
.tid-toast.is-closing { animation: tid-fade-out .24s var(--ease) both; }

/* Standing reminder that none of this is real. */
.tid-mockbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px dashed var(--hair);
  font: 500 9.5px ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .12em;
  color: var(--t4);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Motion — one curve, borrowed from the design system
   -------------------------------------------------------------------------- */

@keyframes tid-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes tid-sink { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(30px); } }
@keyframes tid-drop { from { opacity: 0; transform: translateY(-10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes tid-lift { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-10px) scale(.985); } }
@keyframes tid-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes tid-in-back { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes tid-toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes tid-fade-out { from { opacity: 1; } to { opacity: 0; } }