/* make-interfaces-feel-better — global polish layer */

/* ── Typography ── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

p, li, figcaption, blockquote, dd, label {
  text-wrap: pretty;
}

.blog-post-content p,
.legal-body p,
article.prose p {
  text-wrap: auto;
}

time,
.tabular-nums,
.app-mrr,
.dash-stat-value {
  font-variant-numeric: tabular-nums;
}

/* ── Surfaces ── */
:root {
  --shadow-border:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 1px 2px -1px rgba(0, 0, 0, 0.06),
    0 2px 4px 0 rgba(0, 0, 0, 0.04);
  --shadow-border-hover:
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 1px 2px -1px rgba(0, 0, 0, 0.08),
    0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

img:not(.app-shot):not([data-no-outline]) {
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}

/* ── Press feedback (scale 0.96) ── */
button:not(:disabled):not([data-static]),
[type="submit"]:not(:disabled):not([data-static]),
[type="button"]:not(:disabled):not([data-static]),
.store-btn,
.tan-btn-primary,
.tan-btn-ghost,
.login-submit,
.legal-i18n-btn,
.app-support-form button,
.support-form button,
.da-app-pill,
.da-segment,
.da-subtab,
.da-btn,
.dash-nav-item,
.portfolio-nav-link,
.app-logo,
.btn {
  transition-property: scale, transform, opacity, filter, background-color, box-shadow, border-color;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

button:not(:disabled):not([data-static]):active,
[type="submit"]:not(:disabled):not([data-static]):active,
[type="button"]:not(:disabled):not([data-static]):active,
.store-btn:active,
.tan-btn-primary:active:not(:disabled),
.tan-btn-ghost:active:not(:disabled),
.login-submit:active:not(:disabled),
.legal-i18n-btn:active,
.app-support-form button:active,
.support-form button:active,
.da-app-pill:active,
.da-segment:active,
.da-subtab:active,
.da-btn:active:not(:disabled),
.dash-nav-item:active,
.portfolio-nav-link:active,
.app-logo:active,
.btn:active {
  scale: 0.96;
}

/* ── Minimum hit area (40×40) for compact controls ── */
.legal-lang-toggle,
.portfolio-nav-link {
  position: relative;
}

.legal-lang-toggle::after,
.portfolio-nav-link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
}

.portfolio-nav-link {
  display: inline-flex;
  align-items: center;
}

/* ── Concentric radius helpers ── */
.radius-concentric-outer {
  border-radius: calc(var(--inner-radius, 8px) + var(--padding, 8px));
}

.radius-concentric-inner {
  border-radius: var(--inner-radius, 8px);
}