/* CSS viewport, not physical screen pixels, controls layout (including Windows scaling).
   Workspaces may spread out; data-entry forms retain a readable line length. */
:root {
  --site-copy: clamp(.9375rem, .875rem + .125vw, 1rem);
  --site-meta: clamp(.75rem, .6875rem + .1vw, .8125rem);
  --site-gutter: clamp(1rem, 1.55vw, 2rem);
  --site-title: clamp(1.5rem, 1.125rem + .75vw, 2rem);
}
[hidden] { display: none !important; }
body:is(.site-admin,.site-distribution,.site-material,.site-artist,.site-auth,.site-registration) {
  font-size: var(--site-copy);
  line-height: 1.55;
  min-height: 100svh;
}
body :is(.field,.panel,.stack,.fields,.form-grid,.head>div,.page-head>div,.hero>div) { min-width: 0; }
body :is(.field input,.field select,.field textarea,input[type=file]) { min-width: 0; max-width: 100%; }
body :is(h1,h2,h3,.notice,.flash,.head p,.page-head p,.hint,.upload-note) { overflow-wrap: anywhere; }
body :is(audio,iframe,canvas) { max-width: 100%; }
body :is(.hint,.sub,.upload-note,.field label .sub,.crumb,.pager span) { font-size: var(--site-meta); }
body :is(.field label,.fields>label) { font-size: var(--site-copy); }
body :is(.panel-head h2,.head h2) { font-size: 1rem; }
body :is(.panel-head span,.table th,.table td>small,.brand small) { font-size: var(--site-meta); }
body :is(.page-head h1,.head h1) { font-size: var(--site-title); }
body :is(.page-head,.head,.panel-head) { flex-wrap: wrap; }
body :is(.toolbar,.toolbar form,.inline-form,.search-toolbar,.batch-actions,.batch-actions form,.dialog-form-actions) { flex-wrap: wrap; min-width: 0; }
body :is(.toolbar input,.toolbar select,.search-toolbar input,.search-toolbar select) { min-width: 0; }
body :is(.pager,.row-actions,.actions,.page-actions,.release-filters,.view-tabs) { flex-wrap: wrap; }
body :is(.definition,.review dl) { grid-template-columns: minmax(90px,120px) minmax(0,1fr); }
body :is(.definition dd,.review dd) { min-width: 0; overflow-wrap: anywhere; }
body :is(.dialog,.workspace-dialog,.admin-dialog,.announcement-dialog,.success-dialog) {
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
}
body :is(.dialog header,.dialog-head,.dialog-actions,.workspace-dialog>header,.account-danger-zone,.contract-head) { flex-wrap: wrap; }
body :is(.contract,.contract-frame) { height: clamp(400px,70vh,800px); }

/* Administrator workspace: width follows the task, not one universal cap. */
.site-admin .app { grid-template-columns: clamp(224px,13vw,256px) minmax(0,1fr); }
.site-admin .sidebar { padding: 22px 16px; height: 100dvh; overflow-y: auto; }
.site-admin .brand b { font-size: 1rem; }
.site-admin .nav a { min-height: 44px; }
.site-admin .nav small { font-size: .75rem; }
.site-admin .side-foot { font-size: var(--site-meta); }
.site-admin .side-foot b { font-size: .875rem; overflow-wrap: anywhere; }
.site-admin .content { width: 100%; max-width: 1760px; margin-inline: auto; padding: var(--site-gutter); container: workspace / inline-size; }
.site-admin.page-accounts .content { max-width: 1440px; }
.site-admin:is(.page-announcements,.page-user-detail,.page-submission-detail,.page-settlements) .content { max-width: 1560px; }
.site-admin.page-system .content { max-width: 1660px; }
.site-admin .topbar { padding-inline: var(--site-gutter); }
.site-admin :is(.toolbar,.toolbar form) { flex-direction: row; }
.site-admin .button.small { font-size: var(--site-meta); min-height: 36px; }
.site-admin :is(.overview-item>span,.overview-item em,.account-counts span,.trend-totals span,.chart-caption,.trend-numbers summary,.trend-numbers span,.chart-tooltip,.rank-number,.ranking-entry small) { font-size: var(--site-meta); }
.site-admin :is(.rank-name,.account-counts h2) { font-size: .9375rem; }
.site-admin .overview-item { padding: clamp(18px,1.4vw,26px); }
.site-admin .overview-item strong { font-size: clamp(2rem,1.5rem + 1vw,2.5rem); }
.site-admin .account-counts { flex-wrap: wrap; gap: 18px 28px; }
.site-admin .insights-layout { grid-template-columns: minmax(0,1.8fr) minmax(320px,1fr); }
.site-admin .interactive-chart { margin-top: 18px; }
.site-admin .ranking-entry { grid-template-columns: 24px 40px minmax(0,1fr) auto; padding-block: 13px; }
.site-admin :is(.ranking-entry img,.rank-avatar) { width: 40px; height: 40px; }
.site-admin .user-card-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.site-admin .artist-library-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.site-admin .library-title { flex-wrap: wrap; }
.site-admin :is(.library-link,.artist-status) { font-size: var(--site-meta); }
.site-admin :is(.user-card-head h2,.account-card-copy b) { font-size: 1rem; }
.site-admin :is(.user-card-head>div span,.user-card-head>.status,.user-card-bottom,.user-profile-card footer,.account-card-copy span,.account-card-copy small,.account-card-state,.account-card-state small,.workspace-dialog header p,.workspace-dialog .hint,.dialog-foot-note,.account-danger-zone span,.notice-publish-state,.notice-card summary,.notice-tools span) { font-size: var(--site-meta); }
.site-admin .backend-account-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
.site-admin .release-table col:nth-child(3) { width: 21%; }
.site-admin .release-table .col-actions { width: 13%; }
.site-admin :is(.submission-note-preview,.metric span,.media h3) { font-size: var(--site-meta); }
.responsive-menu-toggle { margin-left: auto; min-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--theme-raised, #132038); font: inherit; cursor: pointer; }
@container workspace (max-width: 1000px) {
  .site-admin :is(.insights-layout,.notice-layout,.dashboard-grid,.detail-grid,.detail-grid.equal) { grid-template-columns: 1fr; }
}
@container workspace (max-width: 780px) {
  .site-admin .backend-account-list { grid-template-columns: 1fr; }
  .site-admin .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Distribution: two navigation items, dense downloads; no wide off-screen actions. */
.site-distribution .app { grid-template-columns: clamp(224px,13vw,256px) minmax(0,1fr); }
.site-distribution .main { width: 100%; max-width: 1900px; margin-inline: auto; padding: var(--site-gutter); }
.site-distribution.page-detail .main { max-width: 1480px; }
.site-distribution.page-users .main { max-width: 1760px; }
.site-distribution .head p { font-size: var(--site-copy); }
.site-distribution :is(.table td,.definition dt,.definition dd,.notice) { font-size: var(--site-copy); }
.site-distribution :is(.table th,.status,.download-status,.download-info small,.material-info,.submission-type,.submission-note-preview,.metric small,.metric span,.brand small,.panel-head span,.button.small) { font-size: var(--site-meta); }
.site-distribution .table td>small { white-space: normal; }
.site-distribution .distribution-actions .button { min-height: 38px; white-space: normal; text-align: center; }
.site-distribution .toolbar form { justify-content: flex-start; }
.site-distribution .search-toolbar input[name=q] { min-width: 0; flex: 1 1 220px; }

/* Artist pages: wider records, restrained profile and material entry. */
.site-artist .shell { width: calc(100% - 2 * var(--site-gutter)); max-width: 1440px; }
.site-artist.page-releases .shell { max-width: 1680px; }
.site-artist.page-account .shell { max-width: 1160px; }
.site-artist :is(.table td,.definition dt,.definition dd,.locked span) { font-size: var(--site-copy); }
.site-artist :is(.table th,.hint,.sub,.page-head p) { font-size: var(--site-meta); }
.site-artist .release-list-table col:first-child { width: 21% !important; }
.site-artist .release-list-table col:last-child { width: 19% !important; }
.site-artist .release-list-table .release-actions .button { min-height: 40px; white-space: normal; }
.site-artist .page-head h1 { font-size: clamp(1.75rem,1.25rem + 1vw,2.5rem); }
.site-material .shell { width: calc(100% - 2 * var(--site-gutter)); max-width: 1440px; }
.site-material .workspace { max-width: 1240px; }
.site-material :is(.sub,.hint,.upload-note,.account-copy span,.artist-head small,.track-head small) { font-size: var(--site-meta); }
.site-material :is(.fields,.track-fields,.split-artist-names) { grid-template-columns: repeat(2,minmax(0,1fr)); }
.site-material .artist-fields { grid-template-columns: repeat(3,minmax(0,1fr)); }
.site-material .artist-fields.split-platform-links { grid-template-columns: repeat(2,minmax(0,1fr)); }
.site-material .rules { grid-template-columns: minmax(0,1.25fr) repeat(2,minmax(0,1fr)); }
.site-material .artist-card { grid-template-columns: 180px minmax(0,1fr); }
.site-material .artist-card.split-platform { grid-template-columns: minmax(0,1fr); }
.site-material :is(.hero h1,.hero-title) { font-size: clamp(1.75rem,1.25rem + 1vw,2.5rem); }
.site-material .quick-nav a { white-space: nowrap; }
.site-material .account-copy { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 641px) {
  .site-material .material-basics>.field>label { min-height: 3.1em; align-content: start; }
}
.site-auth .shell { max-width: 1180px; width: calc(100% - 2 * var(--site-gutter)); }
.site-auth .auth-layout { grid-template-columns: 260px minmax(0,820px); gap: 32px; }
.site-auth :is(.fields,.review dl) { grid-template-columns: repeat(2,minmax(0,1fr)); }
.site-auth .review dl { grid-template-columns: 110px minmax(0,1fr); }
.site-auth :is(.lead,.panel-head p,.notice,.consent,.login-switch) { font-size: var(--site-copy); }
.site-auth :is(.track span,.term,.sign-tools,.sub,.upload-note) { font-size: var(--site-meta); }
.site-registration .shell { max-width: 1180px; width: calc(100% - 2 * var(--site-gutter)); }
.site-linked-register .shell { max-width: 960px; }
.site-registration .fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
.site-registration :is(.hint,.sub,.upload-note) { font-size: var(--site-meta); }

/* Tables become labelled records based on their own available width, including
   a table inside a detail panel. No duplicate buttons/forms or hidden actions. */
body .table-wrap { min-width: 0; container: table-area / inline-size; }
body .responsive-table { white-space: normal; }
body .responsive-table td { overflow-wrap: anywhere; }
body .responsive-bulk-label { display: flex; align-items: center; gap: 8px; font-size: 0; }
@container table-area (max-width: 980px) {
  body .responsive-table { display: block; min-width: 0; width: 100%; table-layout: auto; }
  body .responsive-table colgroup { display: none; }
  body .responsive-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body .responsive-table .responsive-bulk-header { display: block; position: static; width: auto; height: auto; margin: 0; clip-path: none; }
  body .responsive-bulk-header :is(tr,th:first-child) { display: block; }
  body .responsive-bulk-header th:not(:first-child) { display: none; }
  body .responsive-table .responsive-bulk-label { min-height: 44px; font-size: var(--site-meta); }
  body .responsive-table tbody { display: grid; gap: 12px; padding: 12px; }
  body .responsive-table tbody tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 18px; padding: 16px; border: 1px solid var(--theme-border, #2b3a52); border-radius: 10px; background: var(--theme-inset, #0b1526); }
  body .responsive-table tbody td { display: block; width: auto; padding: 0; border: 0; overflow: visible; white-space: normal; text-overflow: clip; text-align: left; font-size: var(--site-copy); }
  body .responsive-table tbody td::before { content: attr(data-label); display: block; margin-bottom: 3px; color: var(--theme-muted, #9aa8bd); font-size: var(--site-meta); font-weight: 400; }
  body .responsive-table :is(.responsive-title,.responsive-actions,.responsive-select,.responsive-time) { grid-column: 1 / -1; }
  body .responsive-table .responsive-title { padding-bottom: 10px; border-bottom: 1px solid var(--theme-border, #2b3a52); font-weight: 600; }
  body .responsive-table .responsive-select { justify-self: start; }
  body .responsive-table .responsive-select::before { display: none; }
  body .responsive-table :is(.row-actions,.release-actions) { display: flex; flex-direction: row; gap: 8px; align-items: stretch; flex-wrap: wrap; }
  body .responsive-table :is(.row-actions,.release-actions)>* { width: auto; flex: 1 1 140px; }
  body .responsive-table :is(.row-actions,.release-actions) .button { width: 100%; min-height: 44px; }
  body .responsive-table .responsive-group-row { display: block; border: 0; padding: 8px 4px; background: none; }
  body .responsive-table .responsive-group-row td::before { display: none; }
}
@container table-area (max-width: 420px) {
  body .responsive-table tbody tr { padding: 12px; }
}
@container table-area (max-width: 300px) {
  body .responsive-table tbody tr { grid-template-columns: minmax(0,1fr); }
}

/* Tablet and narrow laptop: reclaim the sidebar before shrinking the content. */
@media (max-width: 1100px) {
  .site-admin .app,.site-distribution .app { display: block; }
  .site-admin .sidebar { position: static; height: auto; padding: 12px var(--site-gutter); border-right: 0; border-bottom: 1px solid var(--border); }
  .site-admin .brand { padding: 0; }
  .site-admin .nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; padding-top: 12px; overflow: visible; }
  .site-admin .side-foot { position: static; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 0; margin-top: 8px; }
  .site-admin .side-foot b { margin: 0; }
  .site-admin .side-foot button { min-height: 32px; }
  .site-admin .topbar { min-height: 54px; gap: 8px; }
  .site-distribution .side { position: static; height: auto; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px 16px; padding: 16px var(--site-gutter); border-right: 0; border-bottom: 1px solid var(--line); }
  .site-distribution .brand { padding: 0; }
  .site-distribution .nav { grid-column: 1 / -1; display: flex; gap: 8px; }
  .site-distribution .nav a { flex: 1; text-align: center; margin: 0 !important; min-height: 44px; padding: 10px; }
  .site-distribution .logout { position: static; grid-column: 2; grid-row: 1; text-align: right; margin: 0; font-size: var(--site-meta); }
  .site-distribution .logout b { margin-bottom: 3px; overflow-wrap: anywhere; }
  .site-distribution .logout button { min-height: 32px; }
  .site-distribution .detail-grid { grid-template-columns: minmax(0,1fr); }
  .site-material .brandbar { flex-wrap: wrap; }
  .site-material .quick-nav { order: 3; width: 100%; margin: 0; display: flex; gap: 8px; }
  .site-material .quick-nav a { flex: 1; text-align: center; }
  .site-material .account { margin-left: auto; }
  .site-material .artist-card { grid-template-columns: minmax(0,1fr); }
  .site-material .artist-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .site-material .rules { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .site-auth .auth-layout { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .site-auth .rail { position: static; padding: 0; }
  .site-auth .rail h1 { font-size: var(--site-title); }
  .site-auth .track { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
  .site-auth .track li { display: block; min-height: auto; text-align: center; }
  .site-auth .track li::after { display: none; }
  .site-auth .track b { margin-inline: auto; }
  .site-auth .track span { display: block; }
}
@media (max-width: 800px) {
  .site-admin :is(.detail-grid,.detail-grid.equal,.insights-layout,.notice-layout,.backend-account-list) { grid-template-columns: 1fr; }
  .site-distribution .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .site-artist .detail-grid { grid-template-columns: minmax(0,1fr); }
  .site-artist .locked { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .site-artist .brandbar { flex-wrap: wrap; }
  .site-artist .brandbar .nav { width: 100%; margin: 8px 0 0; display: flex; gap: 8px; }
  .site-artist .brandbar .nav a { flex: 1; text-align: center; }
  body :is(.head,.page-head,.hero) { gap: 12px; }
  body :is(.page-actions,.head>.button) { margin-left: 0; }
}
@media (max-width: 640px) {
  :root { --site-gutter: 12px; }
  body :is(.button,.button.small,.dialog-x,.finish-actions button,.quick-nav a,.site-artist .nav a) { min-height: 44px; }
  body :is(input:not([type=checkbox]):not([type=hidden]),select,textarea) { font-size: 16px; }
  body:is(.site-admin,.site-distribution,.site-material,.site-artist,.site-auth,.site-registration) :is(.fields,.form-grid,.rules,.artist-fields,.split-artist-names,.track-fields) { grid-template-columns: minmax(0,1fr); }
  body .field.full { grid-column: 1 / -1; }
  body :is(.panel-head,.panel-body) { padding: 16px; }
  body .definition { grid-template-columns: 92px minmax(0,1fr); gap: 8px 12px; }
  body .pager { gap: 8px; padding: 12px 8px; }
  body .pager span { order: 3; flex-basis: 100%; text-align: center; }
  body .toolbar form>* { flex: 1 1 140px; max-width: none; }
  body .toolbar form>input { flex-basis: 100%; }
  .site-admin .nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .site-admin .top-actions a { padding: 8px; font-size: var(--site-meta); }
  .site-admin .user-card-grid { grid-template-columns: minmax(0,1fr); }
  .site-admin .overview-item { padding: 16px; }
  .site-admin .overview-item strong { font-size: 1.875rem; }
  .site-admin .backend-account-card { flex-wrap: wrap; gap: 12px; }
  .site-admin .account-card-state { flex-basis: 100%; text-align: left; display: flex; gap: 16px; margin: 0; padding-top: 10px; border-top: 1px solid var(--border); }
  .site-admin .account-danger-zone span { flex-basis: 100%; }
  .site-admin .chart-caption { font-size: var(--site-meta); }
  .site-distribution .brand small { max-width: 150px; }
  .site-distribution .brand img { width: 36px; height: 36px; }
  .site-distribution .metrics { gap: 10px; }
  .site-distribution .metric { min-height: 112px; padding: 14px; }
  .site-distribution .metric strong { font-size: 1.75rem; }
  .site-distribution .toolbar { gap: 12px; }
  .site-distribution .toolbar .tabs { display: flex; flex-wrap: wrap; gap: 8px; }
  .site-distribution .search-toolbar { display: flex; gap: 8px; }
  .site-distribution .search-toolbar input { flex-basis: 100%; }
  .site-distribution .distribution-actions { grid-template-columns: 1fr; }
  .site-artist .locked { grid-template-columns: minmax(0,1fr); }
  .site-artist .release-filters { gap: 6px; }
  .site-artist .release-filters a { flex: 1 1 90px; text-align: center; padding: 10px 8px; }
  .site-material .content { padding: 16px; }
  .site-material .brandbar { gap: 10px; }
  .site-material .brandbar>div { min-width: 0; }
  .site-material .account { width: 100%; margin: 0; }
  .site-material .account form { margin-left: auto; }
  .site-material .account-copy span { display: inline; }
  .site-material .quick-nav { gap: 6px; }
  .site-material .quick-nav a { font-size: .875rem; padding-inline: 8px; white-space: normal; }
  .site-material .artist-fields.split-platform-links { grid-template-columns: minmax(0,1fr); }
  .site-material .platform-name-pair { grid-template-columns: minmax(0,1fr); }
  .site-material .cover-upload { grid-template-columns: minmax(0,1fr) 80px; }
  .site-material .cover-preview { width: 80px; height: 80px; }
  .site-material .finish-actions { padding-bottom: max(12px,env(safe-area-inset-bottom)); }
  .site-auth .panel-head { padding: 22px 18px 0; }
  .site-auth form { padding: 20px 18px; }
  .site-auth .brandbar { gap: 8px; flex-wrap: wrap; }
  .site-auth .brandbar>a { font-size: .875rem; }
  .site-auth .review dl { grid-template-columns: minmax(0,1fr); }
  .site-auth .actions { position: static; margin-inline: 0; padding-inline: 0; }
  .site-registration .identity { grid-template-columns: minmax(0,1fr); }
  .site-registration :is(.header,form) { padding: 18px; }
  .site-registration .avatar-row { grid-template-columns: minmax(0,1fr); }
  body :is(.image-picker,.sign-tools,.review section) { min-width: 0; }
  body .sign-tools { flex-wrap: wrap; gap: 8px; }
}
@media (any-pointer: coarse) {
  body :is(.button,.button.small,.secondary,.dialog-x,.quick-nav a,.release-filters a,.view-tabs a) { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .responsive-menu-toggle { transition: none; }
}
