/* Shared interface type system. Artwork font previews intentionally keep the
   customer's chosen embroidery font; these rules only style the application. */
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/fonts/InstrumentSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("/fonts/InstrumentSans-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("/fonts/DMSans-Bold.woff2") format("woff2");
}
:root {
  --font-ui: "Instrument Sans", Arial, sans-serif;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-body: 13px;
  --focus-ring: #000;
  font-family: var(--font-ui);
}
body { font-family: var(--font-ui); font-size: var(--text-body); line-height: 1.5; }
/* One black focus treatment across customer, team and private admin screens.
   A thin white backing keeps the black ring visible on dark surfaces too. */
:root body :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible,
:root body .upload-choice:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #fff;
}
button, input, select, textarea { font-family: var(--font-ui); }
/* Keep every native dropdown readable and visually consistent. Reserving the
   arrow gutter prevents the selected label from colliding with the chevron,
   including when a select sits beside another action button. */
select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  min-height: 42px;
  padding-right: 42px !important;
  text-overflow: ellipsis;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
  background-position:
    calc(100% - 17px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px) !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
}
select:not([multiple]):not([size])::-ms-expand { display: none; }
h1, h2, h3, b, strong { font-weight: 600; }
.brand { gap: 12px; flex-shrink: 0; }
.brand-logo {
  display: block; width: 42px; height: 40px; object-fit: contain;
  filter: invert(1); mix-blend-mode: screen; flex-shrink: 0;
}
html[data-theme=light] .brand-logo { filter: none; mix-blend-mode: multiply; }
.brand-word, .customer .brand-word {
  font-family: "DM Sans", var(--font-ui);
  font-size: 15px; font-weight: 700; letter-spacing: 0; line-height: 1.25;
}
.brand-word small {
  font-family: var(--font-ui);
  font-size: var(--text-xs); font-weight: 400; letter-spacing: 0;
  color: var(--muted); margin-top: 3px;
}
.header-tagline { font-size: var(--text-sm); letter-spacing: 0; }
.header-tagline span { color: var(--ink); margin-left: 4px; }
.text-button, .stage-controls button, .stage-foot, .group-label, .badge,
.admin-nav h2, .asset-row small {
  text-transform: none; letter-spacing: 0;
}
.text-button { font-size: var(--text-sm); font-weight: 500; }
.eyebrow, .stage-identity .eyebrow, .customer .section-head .eyebrow,
.team-hero .eyebrow, .roster-heading .eyebrow {
  font-size: var(--text-xs); font-weight: 500; letter-spacing: 0; line-height: 1.5;
}
h1, .stage-identity h1 {
  font: 600 28px/1.2 var(--font-ui); letter-spacing: -.5px;
}
.stage-identity h1 { margin: 8px 0; }
.stage-identity p { font-size: var(--text-sm); letter-spacing: 0; }
.section-head h2, .customer .section-head h2, .team-settings .section-head h2,
.team-roster h2, .admin-form h2 {
  font: 600 22px/1.3 var(--font-ui); letter-spacing: -.35px;
}
.customer .section-head p, .section-head p, .hint { font-size: var(--text-sm); line-height: 1.6; }
.customer .group-label, .group-label, .field>label {
  font-size: var(--text-sm); font-weight: 500; letter-spacing: 0;
}
.customer .choice b, .choice b { font-size: var(--text-body); font-weight: 500; }
.choice small { font-size: var(--text-xs); }
.customer .step-tab { font-size: 10px; line-height: 1.3; }
.customer .step-tab span { font-size: var(--text-xs); }
.customer .secondary, .customer .primary, .secondary, .primary {
  font-size: var(--text-sm); font-weight: 600; letter-spacing: 0;
}
.design-toolbar button, .design-toolbar>label, .randomize,
.customer .stage-controls button, .preset-chips button, .quick-zones button,
.section-row, .layer-row b, .tuner-row label, .lock-aspect {
  font-size: var(--text-sm); letter-spacing: 0;
}
.customer .stage-foot { font-size: 10px; letter-spacing: 0; }
.customer .price-line strong, .price-line strong {
  font: 600 26px/1.2 var(--font-ui); letter-spacing: -.4px;
  font-variant-numeric: tabular-nums;
}
.price-line span, .customer .save-status, .customer .message,
.layer-row small, .team-page .notice, .team-export p, .team-logo-wrap label,
.player-info small, .player-actions .secondary, .player-actions .text-button,
.ready-dot, .team-export .primary { font-size: var(--text-xs); letter-spacing: 0; }
.editor-heading { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0; }
.layer-icon, .web-symbol { font: 500 20px/1 var(--font-ui); }
.team-hero h1 { font: 600 40px/1.15 var(--font-ui); letter-spacing: -1px; }
.team-hero h1 span { color: var(--muted); }
.team-hero p { font-size: var(--text-body); }
.team-hero-stat strong { font: 600 52px/1 var(--font-ui); letter-spacing: -1px; }
.team-hero-stat span { font-size: var(--text-xs); letter-spacing: 0; }
.team-logo-preview { font: 500 24px/1 var(--font-ui); }
.player-avatar { font: 600 16px/1 var(--font-ui); }
.roster-empty h3, .team-export h3 { font: 600 18px/1.3 var(--font-ui); letter-spacing: -.2px; }
.roster-empty p, .player-form input, .player-form select { font-size: var(--text-sm); }
.badge { font-size: var(--text-xs); }
@media(max-width:760px) {
  .customer .brand-word { font-size: 14px; }
  .brand-logo { width: 36px; height: 35px; }
  .stage-identity h1 { font-size: 23px; }
  .stage-identity .eyebrow, .stage-identity p { font-size: 10px; }
  .customer .step-tab { font-size: 10px; }
  .customer .step-tab span { font-size: 11px; }
  .customer .stage-foot { font-size: 9px; }
  .customer .stage-controls button, .randomize { font-size: 11px; }
  .design-toolbar button, .design-toolbar>label { font-size: 10px; }
  .team-hero h1 { font-size: 32px; }
  .team-hero p { font-size: 12px; }
  .team-page .header-right .text-button { font-size: 11px; }
}
@media(max-width:480px) {
  .brand-word small { display: none; }
  .customer .brand { gap: 7px; }
  .customer .brand-word { font-size: 12px; }
  .customer .header-right { gap: 8px; }
  .customer .header-right .text-button { font-size: 11px; }
  .theme-pill { padding: 7px 9px; }
  .header-tagline { display: none; }
}
@media(max-width:370px) {
  .customer .brand-word { display: none; }
}
.context-menu details{margin:14px 0}.context-menu .swatch{width:27px;height:27px}
.context-menu .cards{margin-top:16px}
.surface-palette{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 10px;padding:5px}
.surface-palette-group+.surface-palette-group{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.surface-palette-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 5px 8px}
.surface-palette-heading b{font-size:var(--text-sm);letter-spacing:.2px}
.surface-palette-heading span{font-size:var(--text-xs);color:var(--muted)}
.surface-swatch{display:block;width:100%;aspect-ratio:1;border-radius:50%;border:1px solid #7778;background:var(--swatch,var(--bg));padding:0;overflow:visible;position:relative;cursor:pointer}
.surface-swatch.material{border-color:#8a8a8a}
.surface-swatch img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.surface-swatch.material.tinted{background:var(--swatch)}
.surface-swatch.material.tinted img{opacity:.48;mix-blend-mode:luminosity}
.surface-swatch.material.procedural{background:#111}
.metallic-swatch{display:block;width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,#fff9 0%,transparent 22%,#0006 48%,transparent 72%,#fff8 100%),var(--swatch);box-shadow:inset 0 0 0 1px #fff5,inset -7px -5px 11px #0003}
.surface-swatch.material.patent{background:var(--swatch)}
.patent-swatch{display:block;width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,#0002 0 34%,#fff9 43%,#fff2 51%,#0003 72%,transparent 100%);box-shadow:inset 0 0 0 1px #fff7,inset -5px -4px 9px #0003}
.palette-media.patent{background:var(--swatch)}
.palette-media.patent .patent-swatch{position:absolute;inset:0}
.surface-swatch::after{content:attr(data-label);position:absolute;z-index:120;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,3px);width:max-content;max-width:180px;padding:6px 8px;border-radius:5px;background:#000;color:#fff;font:600 10px/1.25 var(--font-ui);letter-spacing:0;text-align:center;white-space:normal;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease,transform .12s ease;box-shadow:0 5px 18px #0004}
.surface-swatch:hover::after,.surface-swatch:focus-visible::after{opacity:1;visibility:visible;transform:translate(-50%,0)}
.surface-swatch:nth-child(6n+1)::after{left:0;transform:translate(0,3px)}
.surface-swatch:nth-child(6n+1):is(:hover,:focus-visible)::after{transform:translate(0,0)}
.surface-swatch:nth-child(6n)::after{left:auto;right:0;transform:translate(0,3px)}
.surface-swatch:nth-child(6n):is(:hover,:focus-visible)::after{transform:translate(0,0)}
.surface-swatch.active{box-shadow:0 0 0 3px var(--panel),0 0 0 5px #000;border-color:#000}
.surface-palette-note{font-size:var(--text-xs);line-height:1.45;color:var(--muted);margin:10px 5px 0}
.context-menu .surface-palette{gap:9px 8px;padding:4px}
.context-menu .surface-palette-group+.surface-palette-group{margin-top:14px;padding-top:13px}
.context-menu .surface-palette-heading{margin:0 4px 7px}
.context-menu .surface-palette-heading b{font-size:10px}
.context-menu .surface-palette-note{font-size:10px;margin-bottom:14px}
.context-menu .context-apply-all{margin:14px 0 16px}
.context-layers{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}
.context-layer-row{width:100%;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--ink);padding:9px 10px;margin-top:6px;text-align:left}
.context-layer-row span{display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--line);border-radius:4px;font:15px Georgia}
.context-layer-row b{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.context-layer-row.active{border-color:var(--ink);background:var(--raised)}
.context-layer-editor{border:1px solid var(--line);border-radius:8px;padding:11px;margin-top:9px;background:var(--bg)}
.context-layer-editor-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;font-size:10px}
.context-layer-editor label{display:grid;grid-template-columns:1fr auto;gap:4px;font-size:9px;color:var(--muted);margin:9px 0}
.context-layer-editor output{color:var(--ink);font-variant-numeric:tabular-nums}
.context-layer-editor input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--ink)}
.context-layer-editor .text-button{font-size:9px;margin-top:5px}