/* Brand layer ("Cotton and thread"): loaded after base.css. Tokens first, then this app's parts.
   Light by default; dark only when the visitor picks it (cookie, html[data-theme=dark]). */
@font-face{font-family:"Sora";src:url(/fonts/sora-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Sora";src:url(/fonts/sora-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Karla";src:url(/fonts/karla-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Karla";src:url(/fonts/karla-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Karla";src:url(/fonts/karla-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --bg:#f8f6f1; --surface:#ffffff; --surface-2:#f0ece3; --ink:#1c1f1e; --muted:#59605d; --line:#e4dfd4; --line-strong:#cbc4b5;
  --primary:#0b6e63; --primary-hover:#08564d; --primary-ink:#ffffff; --primary-soft:#d7ece8; --link:#0a6258;
  --accent:#f2b33d; --accent-ink:#3a2700; --accent-soft:#fdf0d3;
  --sample:#5a4a2c; --sample-bg:#f4ead3;
  --ok:#1d6b43; --ok-bg:#e3f2e8; --warn:#7f4706; --warn-bg:#fdf0d8; --bad:#a3221b; --bad-bg:#fbe7e5;
  --font-body:"Karla",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --font-head:"Sora",var(--font-body);
  --radius:14px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(28,31,30,.05),0 8px 24px rgba(28,31,30,.07);
  --shirt-line:rgba(0,0,0,.18);
}
html[data-theme=dark]{
  --bg:#0f1514; --surface:#172120; --surface-2:#1f2c2a; --ink:#eef3f1; --muted:#a7b5b1; --line:#2a3836; --line-strong:#3c4e4b;
  --primary:#4fd1bd; --primary-hover:#79e0d0; --primary-ink:#04201c; --primary-soft:#163a35; --link:#7fe3d3;
  --accent:#f5c463; --accent-ink:#2a1c00; --accent-soft:#3a2f17;
  --sample:#ecdcb8; --sample-bg:#3a3122;
  --ok:#8fd5ab; --ok-bg:#183326; --warn:#f2bb6b; --warn-bg:#3a2a12; --bad:#f4a39d; --bad-bg:#3d1c1a;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --shirt-line:rgba(255,255,255,.22);
}
body{line-height:1.6}
h1,h2,h3{letter-spacing:-.025em}
h1{font-size:clamp(26px,4vw,36px)}
h2.first,h3.first{margin-top:0}
.site-header{position:sticky;top:0;z-index:5;background:var(--surface)}
.mark-tile{fill:var(--primary)} .mark-tee{fill:var(--primary-ink)} .mark-peel{fill:var(--accent)} .mark-fold{fill:var(--primary-ink)}
.brand-name{font-size:21px}
.site-nav a.signin{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.site-nav a.signin:hover{background:var(--primary-hover);color:var(--primary-ink)}
button.link{background:none;border:0;min-height:0;padding:0;color:var(--muted);font:600 var(--t-sm) var(--font-body);text-decoration:underline;cursor:pointer}
button.link:hover{background:none;color:var(--ink)}
.notice{margin:var(--s3) 0}
.notice ul{margin:var(--s2) 0 0;padding-left:20px}
.tag.sample{background:var(--sample-bg);color:var(--sample);border:1px dashed var(--sample);text-transform:none;letter-spacing:0;font-size:13px}
.tag.status{background:var(--primary-soft);color:var(--link);border-color:transparent;text-transform:none;letter-spacing:0;font-size:14px}
.tag.bad{background:var(--bad-bg);color:var(--bad)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin:var(--s4) 0}
.btnrow{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s2) 0}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--s5)}
.narrow{max-width:520px}
.prose{max-width:720px}.prose li{margin-bottom:6px}
table tr.total td{font-weight:700;border-top:2px solid var(--line-strong)}

/* front page */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s6);align-items:center;padding:var(--s5) 0 var(--s4)}
.hero h1{font-size:clamp(30px,5vw,50px);line-height:1.05;letter-spacing:-.035em;margin-bottom:var(--s4)}
.lead{font-size:var(--t-lg);color:var(--muted);max-width:560px}
.facts{list-style:none;padding:0;margin:var(--s5) 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--s2) var(--s4)}
.facts li{padding-left:16px;border-left:3px solid var(--accent)}
.hero-art{background:radial-gradient(circle at 50% 45%,var(--primary-soft),transparent 70%);border-radius:var(--radius-lg);padding:var(--s4)}
.two-col{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
@media (max-width:760px){.hero{grid-template-columns:1fr}.hero-art{max-width:360px;margin:0 auto}}

/* shirt pictures */
.mockup{display:block;width:100%;height:auto}
.mockup .shirt,.stage .shirt{stroke:var(--shirt-line);stroke-width:.08}
.collar{fill:rgba(0,0,0,.08)}
.printbox{fill:none;stroke:var(--primary);stroke-width:.05;stroke-dasharray:.25 .2;opacity:.8}
.design-card{display:flex;flex-direction:column;gap:var(--s2);text-decoration:none;color:var(--ink);padding:var(--s4)}
.design-card:hover{border-color:var(--line-strong)}
.design-title{font-weight:700;font-family:var(--font-head);letter-spacing:-.015em}
.views{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:var(--s4);margin:var(--s4) 0}
.views.small{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
.views figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3)}
figcaption{color:var(--muted);font-size:var(--t-sm);margin-top:var(--s2)}
.files{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s2) 0 0}
.files .button{min-height:36px;padding:6px 12px;font-size:var(--t-sm)}

/* designer */
body.wide main{max-width:1280px}
.d-title{margin-bottom:var(--s4)}
.d-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:var(--s5);align-items:start}
.d-stage{position:sticky;top:76px}
.stage-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4);box-shadow:var(--shadow)}
.stage{display:block;width:100%;height:auto;touch-action:none;user-select:none}
.stage:focus-visible{outline:3px solid var(--primary);outline-offset:4px;border-radius:var(--radius-sm)}
.stage [data-i]{cursor:move}
.selbox{fill:none;stroke:var(--accent);stroke-width:.06;stroke-dasharray:.2 .12}
.side-tabs{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s3)}
.tab{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--pill);min-height:38px;padding:6px 14px;font-size:15px}
.tab:hover{background:var(--surface-2)}
.tab.on{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.blank-choices{display:flex;flex-wrap:wrap;gap:var(--s2)}
.blank{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--pill);min-height:38px;padding:4px 12px 4px 6px;font-size:14px;gap:8px}
.blank:hover{background:var(--surface-2)}
.blank.on{border:2px solid var(--primary)}
.chip{display:inline-block;width:22px;height:22px;border-radius:50%;border:1px solid var(--shirt-line)}
.d-panel{display:flex;flex-direction:column;gap:var(--s3)}
.d-panel .card{padding:var(--s4)}
.d-panel h3{font-size:var(--t-md);margin-bottom:var(--s2)}
.say{min-height:1.4em;margin:var(--s2) 0 0;font-weight:600}
.say.bad{color:var(--bad)}
.trace-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.trace-pair figure{margin:0}
.trace-pair img,.trace-prev{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:var(--surface-2);border-radius:var(--radius-sm)}
table.mini td{padding:6px 4px}
.save-out a{word-break:break-all}
@media (max-width:860px){.d-grid{grid-template-columns:1fr}.d-stage{position:static}}

/* ordering */
.order-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s5);align-items:start}
.order-layout .views{grid-template-columns:1fr}
.sizes{grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr))}
.quote{margin:var(--s4) 0;background:var(--surface-2);border-radius:var(--radius-sm);padding:var(--s3)}
.quote table td{border-color:var(--line-strong)}
@media (max-width:760px){.order-layout{grid-template-columns:1fr}}
.status-line{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.code-big{font-family:var(--font-mono);font-size:var(--t-2xl);letter-spacing:.12em}
.history{list-style:none;padding:0}
.history li{padding:6px 0;border-bottom:1px solid var(--line)}

/* admin */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:var(--s3);margin:var(--s4) 0}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4);display:flex;flex-direction:column}
.stat .n{font-family:var(--font-head);font-size:var(--t-2xl);font-weight:700;font-variant-numeric:tabular-nums}
.filters a{display:inline-block;margin:0 var(--s2) var(--s2) 0;font-weight:600}
.filters a.on{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--primary)}
.card .row{grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr))}
input[type=color]{width:100%;min-height:44px;padding:4px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface)}
.card+.card,form.card+form.card,section.card+section.card{margin-top:var(--s3)}
table.prices td input{min-width:90px}
.print-preview{max-width:100%;height:auto;border:1px solid var(--line);background:repeating-conic-gradient(#ddd 0 25%,#fff 0 50%) 0 0/16px 16px}
@media print{.site-header,.site-footer,.actions{display:none}body{background:#fff;color:#000}}
[hidden]{display:none!important}
.site-footer .legal{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4)}
.design-card .tag{align-self:flex-start}
.grid>.card,.two>.card,.views>figure{margin-top:0}
@media (max-width:480px){.grid{grid-template-columns:1fr 1fr;gap:var(--s3)}.design-card{padding:var(--s2)}.design-title{font-size:var(--t-sm)}}