/* Readable workspace typography. These explicit floors only match a signed-in
   wallet; authentication, headings and large balance/price figures keep theirs. */
#app:has(.app-layout) { font-size: 14px; }

/* Header, profile details and app navigation. */
#app:has(.app-layout) :is(
  small, .brand-sub, .topbar-center, .hide-control, .profile-button strong,
  .avatar.small, .nav-item, .profile-status,
  .balance-block > span, .currency-label, .subtle-link,
  .sidebar-accounts > div:not(.section-head), .sidebar-accounts > div > strong,
  .sidebar-accounts .section-head h3, .sidebar-activity .section-head h3,
  .activity-label strong, .activity-amount strong, .eyebrow,
  .sidebar-promo p, .sidebar-promo a, .sidebar-foot,
  .demo-bar, .demo-bar p, .demo-bar a
) { font-size: 14px; }

/* Market metadata, account tables, badges and supplementary workspace copy. */
#app:has(.app-layout) :is(
  .market-categories button, .account-name strong, .market-value span,
  .market-footer, .market-promo a, .module-tabs a, .page-heading p,
  .count, .stat-tile > span, .stat-tile em, .account-table-head,
  .type-pill, .account-balance > strong, .mini-label, .approval-status,
  .table-footer, .bottom-grid h3, .primary-panel p, .text-note,
  .discover-panel p, .coins-panel > p, .coin-toggle > span:first-child,
  .coins-foot, .main-footer
) { font-size: 14px; }

/* Actions retain their approved states and colors; only the small type changes. */
#app:has(.app-layout) :is(
  .button, .text-button, .tab, button[data-edit-sub], .control-list button
) { font-size: 14px; }
#app:has(.app-layout) input[type="file"]::file-selector-button { font-size: 14px; }

/* Forms and other wallet modules share the same minimum readable copy size. */
#app:has(.app-layout) :is(
  .form label, .generated-request label, .section-number > span, .form .optional,
  .input-with-unit > span, .wallet-field-suffix, .notice, .explainer p,
  .explain-step, .explain-step b, .outline-badge, .generated-request p,
  .success-view p, .form-error, .radio-body strong, .resource-box > div,
  .resource-box strong, .mini-help p, .summary-list > div,
  .scan-art > span, .resolved p, .resolved > span,
  .allocation .section-head > span, .legend > div, .legend strong,
  .portfolio-note p, .portfolio-metrics span, .asset-table-head, .asset-row,
  .asset-row > span:last-child strong, .compact-select select,
  .settings-panel .summary-list dt, .settings-panel .summary-list dd,
  .connection-row strong, .feature-list, .empty, .governance-card p,
  .governance-summary p
) { font-size: 14px; }

/* Existing floating inputs already use 16px. Native form/search controls that
   have not been enhanced also remain readable, without reducing amount inputs. */
#app:has(.app-layout) :is(
  .search-field input, .generated-request input, .inline-form input,
  .form select, .form textarea
) { font-size: 16px; }
#app:has(.app-layout) .form input:not(.wallet-field-input):not(.input-with-unit input) {
  font-size: 16px;
}
#app:has(.app-layout) .fineprint { font-size: 14px !important; }

/* The shared dialog and toast live outside #app, but follow the same floor only
   while the wallet workspace is mounted. Large dialog titles/amounts stay large. */
body:has(.app-layout) #modal :is(
  small, .eyebrow, .account-name strong, .account-detail-top p,
  .sub-list > div > span, .control-list button, .account-guide p,
  .notification-list strong, .notification-list p, .profile-modal p,
  .leg-list strong, .button, .text-button, button[data-edit-sub],
  .form label, .generated-request label, .form .optional, .notice,
  .form-error, .wallet-field-suffix, .input-with-unit > span,
  .summary-list > div, .radio-body strong, .resource-box > div,
  .resource-box strong, .success-view p, .type-pill, .mini-label,
  .approval-status
) { font-size: 14px; }
body:has(.app-layout) #modal :is(.inline-form input, .form select, .form textarea) {
  font-size: 16px;
}
body:has(.app-layout) #modal .form input:not(.wallet-field-input):not(.input-with-unit input) {
  font-size: 16px;
}
body:has(.app-layout) #modal .fineprint { font-size: 14px !important; }
body:has(.app-layout) #toast { font-size: 14px; }

/* Inactive rail icons stay white; only the selected icon uses its own static
   blue-to-white SVG gradient. The 1.5x emphasis also applies to the mobile rail. */
#app:has(.app-layout) .navigation .nav-item > svg {
  width: 23px;
  height: 23px;
  color: #fff;
  animation: none;
  transform-box: view-box;
  transform-origin: 50% 50%;
}
#app:has(.app-layout) .navigation .nav-item.active > svg {
  width: 34.5px;
  height: 34.5px;
}
/* Click animation stays small and white until its rotation and outline drawing
   have finished. WAAPI supplies only the temporary transform/dash properties. */
#app:has(.app-layout) .navigation .nav-item.is-activating > svg {
  width: 23px;
  height: 23px;
  stroke: #fff;
  transition: none;
}

/* A compact icon rail expands on hover or keyboard focus. Keeping --rail fixed
   makes expansion an overlay, not a horizontal jump of the wallet content. */
@media (min-width: 701px) {
  body:has(.app-layout) { --rail: 72px; }
  #app:has(.app-layout) .navigation .nav-item {
    width: 56px;
    height: 82px;
    min-height: 82px;
    padding: 8px 2px;
    gap: 8px;
    transition: width .25s ease;
  }
  #app:has(.app-layout) .navigation .nav-item.active { padding-block: 2px; }
  #app:has(.app-layout) .navigation .nav-item.active.is-activating { padding-block: 8px; }
  #app:has(.app-layout) .navigation .nav-item > span {
    width: 92px;
    max-width: none;
    /* Reserve the same two-line label slot while hidden so hover never moves
       a link's hit area or its icon away from the pointer. */
    height: 35px;
    min-height: 35px;
    max-height: 35px;
    flex: 0 0 35px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    line-height: 1.25;
    letter-spacing: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    transition: opacity .15s ease, visibility 0s linear .25s;
  }
  #app:has(.app-layout) .navigation:is(:hover, :focus-within) .nav-item {
    width: 96px;
  }
  #app:has(.app-layout) .navigation:is(:hover, :focus-within) .nav-item > span {
    opacity: 1;
    visibility: visible;
    transition: opacity .18s ease .08s, visibility 0s;
  }
  @media (prefers-reduced-motion: reduce) {
    #app:has(.app-layout) .navigation .nav-item,
    #app:has(.app-layout) .navigation .nav-item > span,
    #app:has(.app-layout) .navigation:is(:hover, :focus-within) .nav-item,
    #app:has(.app-layout) .navigation:is(:hover, :focus-within) .nav-item > span {
      transition: none;
    }
  }
}

#app:has(.app-layout) .topbar .brand-sub { letter-spacing: 0; }

@media (max-width: 700px) {
  #app:has(.app-layout) .topbar .brand-sub {
    max-width: 12ch;
    line-height: 1.15;
    white-space: normal;
  }
  #app:has(.app-layout) .navigation {
    height: calc(96px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  #app:has(.app-layout) .navigation .nav-items { align-items: stretch; }
  #app:has(.app-layout) .navigation .nav-item {
    width: calc((100vw - 16px) / 4);
    max-width: none;
    min-height: 88px;
    padding: 6px 2px;
    gap: 6px;
  }
  #app:has(.app-layout) .navigation .nav-item > span {
    max-width: 100%;
    line-height: 1.15;
    letter-spacing: -.2px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #app:has(.app-layout) .app-layout {
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  }
  body:has(.app-layout) #toast {
    bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  }
}