/* Shared UI typography. Geometry lives in studio.css/auth.css; no external font requests. */
:root {
  --font-ui: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --type-page: 1.75rem;
  --type-section: 1.25rem;
  --type-body: 1rem;
  --type-control: 1rem;
  --type-caption: .875rem;
  --type-price: 1.25rem;
  --type-number: 2rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-page: 1.4;
  --leading-section: 1.5;
  --leading-body: 1.7;
  --leading-control: 1.5;
  --leading-caption: 1.5;
  --leading-price: 1.4;
  --leading-number: 1.3;
  --muted: #606359;
  --text-danger: #9b3c2b;
  --text-positive: #526039;
}
html { font-size: 100%; }
body { font: var(--weight-regular) var(--type-body)/var(--leading-body) var(--font-ui); }
*, *::before, *::after { letter-spacing: normal; }
button, input, select, textarea { font: inherit; }
button, input, select, textarea, .upload-action {
  font-size: var(--type-control);
  font-weight: var(--weight-medium);
  line-height: var(--leading-control);
}
button { min-height: 2.75rem; }
input, select, textarea { min-height: 2.75rem; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
h1, #authTitle, .auth-story h1 {
  font: var(--weight-bold) var(--type-page)/var(--leading-page) var(--font-ui);
  text-wrap: balance;
}
h2, .heading-count {
  font: var(--weight-semibold) var(--type-section)/var(--leading-section) var(--font-ui);
  text-wrap: balance;
}
h3, p, .product-name, .shop-preview-head p, .store-preview-card > p {
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
}
label { font-size: var(--type-body); font-weight: var(--weight-medium); line-height: var(--leading-control); }
.wordmark, .auth-brand, .auth-mobile-brand {
  font: var(--weight-bold) 1.75rem/var(--leading-page) var(--font-ui);
}
.numeric, .money, .date, .metric-value, .nav-count, .product-controls, .payout-breakdown dd,
.payout-confirm strong, .detail-list dd, input[type=number] { font-variant-numeric: tabular-nums; }
.numeric, .money, .date { white-space: nowrap; }
.numeric-cell { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 6.5rem; }
.product-price, .offer-price, .order-content strong, .proposal-amount, .preview-items .product-price {
  font: var(--weight-semibold) var(--type-price)/var(--leading-price) var(--font-ui);
}
.metric-value, .payout-amount, .payout-confirm strong {
  font: var(--weight-bold) var(--type-number)/var(--leading-number) var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.metric-value { flex-wrap: wrap; gap: .25rem .5rem; }
.metric-unit { font-size: var(--type-body); font-weight: var(--weight-regular); margin-left: 0; }
/* Supplemental text is never smaller than 14px at the browser's standard root size. */
small, .notice, .page-heading p, .product-meta, .product-controls, .image-status,
.metric-label, .trend, .nav-count, .status, .demo-note, .offer-copy p,
.offer-price small, .payout-date, .order-top, .order-content p, .settings-form > p,
.store-preview-card > span, .required, .modal-product p, .payout-confirm span,
.shop-preview-head .muted, .auth-eyebrow, .auth-tag, .auth-story-foot,
.auth-kicker, .auth-subtitle, .auth-divider, .auth-account-hint, .auth-footer,
.auth-footer p, .auth-error, .auth-notice, .art-card > span, .auth-mobile-brand small,
.upload #photoPreview > span:not(.catalog-photo), #toast {
  font-size: var(--type-caption);
  font-weight: var(--weight-regular);
  line-height: var(--leading-caption);
}
.muted, .notice, .page-heading p, .product-meta, .product-controls, .image-status,
.metric-label, .metric small, .offer-copy p, .offer-copy small, .offer-price small,
.payout-date, .order-top, .demo-note, .sales-bars small, .store-preview-card > span,
.required, .payout-confirm span, .detail-list dt, .auth-eyebrow, .auth-tag,
.auth-story-copy > p, .auth-story-foot, .auth-kicker, .auth-subtitle, .auth-divider,
.auth-account-hint, .auth-footer, .art-card > span, .auth-mobile-brand small,
.auth-tabs button, .auth-reset-row button, .password-wrap button, .auth-back,
.upload #photoPreview > span:not(.catalog-photo) { color: var(--muted); }
.text-link, .period-label select, .account-settings-link { color: var(--ink); }
.price-down, .danger, .trend { color: var(--text-danger); }
.price-up { color: var(--text-positive); }
.status { color: #67502e; }
.status.success { color: #46532f; }
.status.subtle { color: #5f594d; }
.auth-notice { color: #465332; }
.auth-error { color: #943c2d; }
.primary, .auth-content .auth-submit { color: #fff; }
.auth-tabs [aria-selected=true], .nav-link.active, .filter-tabs .selected { color: var(--ink); }
/* Table type stays at 14px, including text buttons inside cells. */
table, th, td, table button, table .status, table .money {
  font-size: var(--type-caption);
  font-weight: var(--weight-regular);
  line-height: var(--leading-caption);
}
th { color: var(--muted); }
.pricing-table :is(td, th) { padding-top: .75rem; padding-bottom: .75rem; }
.pricing-table td:first-child { min-width: 10rem; white-space: normal; }
.pricing-table td button { white-space: normal; }
.table-scroll { overscroll-behavior-x: contain; }
.product-name, .offer-copy h3, .order-content h3, .preview-items h3,
.shop-preview-head h2, .store-preview-card h2 { overflow-wrap: anywhere; white-space: normal; }
.product-meta { flex-wrap: wrap; white-space: normal; gap: .25rem 0; }
.product-brand { flex-basis: 100%; max-width: none; overflow: visible; white-space: normal; }
.product-size { max-width: none; overflow: visible; white-space: normal; }
.product-meta > .meta-dot:nth-child(2), .product-meta > .meta-dot:nth-child(4) { display: none; }
.product-meta .product-price { flex-basis: 100%; margin-top: .25rem; color: var(--ink); }
.product-controls { flex-wrap: wrap; gap: .5rem; }
.product-controls > .muted { white-space: nowrap; }
.order-top > span:first-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.inventory button { width: 2.75rem; min-height: 2.75rem; }
.section-heading { flex-wrap: wrap; gap: .5rem 1rem; }
.heading-count { white-space: nowrap; }
.compact.offer-card { display: grid; grid-template-columns: 4.25rem minmax(0,1fr) auto; gap: .25rem .75rem; padding: .75rem; }
.compact .offer-thumb { grid-column: 1; grid-row: 1 / 3; width: 4.25rem; height: 5.5rem; }
.compact .offer-copy { grid-column: 2; grid-row: 1; align-self: end; }
.compact .offer-price { grid-column: 2; grid-row: 2; align-self: start; min-width: 0; }
.compact .offer-actions { grid-column: 3; grid-row: 1 / 3; }
.offer-actions button { min-width: 4rem; min-height: 2.75rem; padding: .5rem .75rem; }
.offer-price small { white-space: normal; }
.nav-count { min-width: 1.375rem; }
.nav-link, .filter-tabs button { min-height: 2.75rem; }
.payout-breakdown > div { font-size: var(--type-body); line-height: var(--leading-body); font-weight: var(--weight-regular); }
.payout-breakdown dd { white-space: nowrap; }
.upload b { font-size: var(--type-control); font-weight: var(--weight-medium); }
.actions, .actions.spread > div { flex-wrap: wrap; }
.modal-product > div:not(.catalog-photo), .page-heading > div, .heading-actions,
.order-content > div, .toolbar > *, .two > *, .settings-form { min-width: 0; }
.detail-list > div { font-size: var(--type-body); flex-wrap: wrap; }
.detail-list dd { max-width: 100%; overflow-wrap: anywhere; }
.demo-note { display: block; text-align: center; }
.demo-dot { display: inline-block; vertical-align: middle; margin-right: .375rem; }
.account-name { color: var(--ink); }
.auth-mobile-brand small { margin-top: .375rem; }
.google-mark { font-size: 1.125rem; font-weight: var(--weight-bold); }
.line-mark { font-size: var(--type-caption); font-weight: var(--weight-bold); }
.art-badge { font: var(--weight-regular) var(--type-body)/var(--leading-body) var(--font-ui); }
.art-card { width: 15rem; height: 16rem; }
.art-card > span { white-space: nowrap; }
.auth-art { height: 19rem; }
.auth-divider { gap: .625rem; }
.empty, .store-monogram { color: var(--muted); }
.toolbar { align-items: flex-end; }
.search-label { margin: 0 0 .5rem; }
.search-wrap svg { top: auto; bottom: .875rem; }
/* Preserve existing 650px layout breakpoint; reflow sooner when larger text needs room. */
@media (max-width: 1200px) and (min-width: 651px) {
  .dashboard { grid-template-columns: minmax(0,1.5fr) minmax(20rem,1fr); }
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .manage-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 1100px) {
  .topbar { height: auto; min-height: 7rem; display: grid; grid-template-columns: 1fr auto; gap: 0 1.25rem; padding: .75rem 1.5rem 0; }
  .wordmark { height: auto; min-height: 2.75rem; justify-self: start; }
  .top-account { grid-column: 2; grid-row: 1; border: 0; padding: 0; min-width: 0; }
  .topnav { grid-column: 1 / -1; grid-row: 2; overflow: auto; height: auto; min-height: 3rem; gap: 1.5rem; scrollbar-width: none; }
  .nav-link:after { bottom: 0; }
  .top-account .account-name { display: block; }
  .metric { padding-left: 1rem; padding-right: .75rem; }
}
@media (max-width: 850px) {
  .dashboard { display: flex; flex-direction: column; }
  .dashboard-main, .dashboard-aside { display: contents; }
  .listing-section { order: 1; }
  .offer-section { order: 2; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
  .pricing-section { order: 3; }
  .payout-section { order: 4; }
}
@media (max-width: 650px) {
  :root { --type-page: 1.5rem; --type-number: 1.75rem; }
  .topbar { padding: .625rem 1.125rem 0; gap: 0 .75rem; }
  .topnav { flex-wrap: wrap; gap: 0 1rem; overflow: visible; }
  .account-button { max-width: 11rem; gap: .5rem; }
  .top-account .account-name { max-width: 7rem; }
  .wordmark { font-size: 1.625rem; }
  .metric { min-height: 6.5rem; }
  .metric:nth-child(odd) { padding-left: 0; }
  .metric:nth-child(even) { padding-left: 1rem; }
  .page-heading { flex-wrap: wrap; align-items: center; }
  .heading-actions { gap: .625rem; }
  .heading-actions:has(.period-label) { width: 100%; justify-content: space-between; }
  .heading-actions .period-label { order: 0; width: auto; margin-top: 0; text-align: left; }
  .period-label select { min-height: 2.75rem; }
  .offer-list { gap: .75rem; }
  .pricing-table :is(th:last-child, td:last-child) { display: table-cell; }
  .pricing-table td:first-child { min-width: 10rem; max-width: none; }
  .toolbar { flex-wrap: wrap; }
  .search-wrap { flex-basis: 100%; max-width: none; }
  .toolbar > select { width: auto; min-width: 10rem; }
  .offers-page .offer-card { display: grid; grid-template-columns: 4.625rem minmax(0,1fr); gap: .375rem .875rem; }
  .offers-page .offer-thumb { grid-column: 1; grid-row: 1 / 3; }
  .offers-page .offer-copy { grid-column: 2; min-width: 0; }
  .offers-page .offer-price { grid-column: 2; margin-right: 0; }
  .offers-page .offer-actions { grid-column: 1 / -1; padding-top: .75rem; margin-top: .375rem; }
  .order-content > div:not(.catalog-photo) { min-width: 0; flex-basis: calc(100% - 5.625rem); }
  .order-content > button { margin-top: .25rem; }
  .two { grid-template-columns: 1fr; gap: 0; }
  .modal-product .catalog-photo { width: 5rem; height: 6rem; }
  .actions.spread > div { justify-content: flex-end; }
  .detail-list > div { gap: .25rem .75rem; }
  .auth-mobile-brand { font-size: var(--type-page); }
}