/* Commander profiles. Plain CSS rather than Tailwind, so the palette is mirrored
   here as custom properties: every value below is the matching token from
   config/tailwind.config.js, named after it. Retune here, never inline a hex.
   See docs/reference/visual-style-guide.md. */
.cp-page, .cp-invitation {
  --cp-teal:#1cdeca;           /* primary */
  --cp-teal-soft:#92f4e4;      /* primary90 */
  --cp-on-teal:#003731;        /* on_primary */
  --cp-surface:#0e1513;        /* surface */
  --cp-surface-low:#161d1c;    /* surface_container_low */
  --cp-panel:#1a2120;          /* surface_container */
  --cp-surface-high:#252b2a;   /* surface_container_high */
  --cp-text:#dde4e1;           /* on_surface */
  --cp-muted:#bec9c6;          /* on_surface_variant */
  --cp-line:#3f4947;           /* outline_variant */
  --cp-outline:#899390;        /* outline */
  /* Over artwork the tokens lose contrast, so the hero carries its own set. */
  --cp-hero-text:#f3f5f2;
  --cp-hero-muted:#a5b5ae;
  --cp-hero-faint:#9eaea7;
  --cp-hero-line:#5c6e674f;
  --cp-hero-rule:#82938c;
  --cp-hero-pill:#6a7974;
  --cp-warning:#f6c979;        /* validation only; the accent stays teal */
  --cp-track:#53645f;
}
.cp-page { max-width:1280px; margin:40px auto; color:var(--cp-text); }
.cp-page *, .cp-invitation * { box-sizing:border-box; }
.cp-page [hidden], .cp-invitation [hidden] { display:none!important; }
.cp-page h1,.cp-page h2,.cp-page legend,.cp-invitation h2 { font-family:Oswald,sans-serif; font-weight:500; }
.cp-page-heading h1 { font-size:clamp(32px,4vw,54px); line-height:1.12; margin:12px 0 18px; max-width:22ch; }
.cp-page-heading p { max-width:60ch; color:var(--cp-muted); margin-bottom:36px; }
/* The signature eyebrow: 10px, tracked, teal, over a short rule. */
.cp-kicker { display:block; color:var(--cp-teal); font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.25em; }
.cp-kicker::after { content:''; display:block; width:40px; height:1px; margin-top:6px; background:var(--cp-teal); opacity:.5; }
.cp-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin:20px 0; }
.cp-toolbar>span:first-child { margin-right:auto; overflow-wrap:anywhere; }
.cp-primary,.cp-secondary { display:inline-flex; justify-content:center; align-items:center; min-height:44px; padding:10px 22px; border-radius:40px; font-weight:500; text-decoration:none; cursor:pointer; transition:background-color 180ms ease, border-color 180ms ease, color 180ms ease; }
.cp-primary { background:var(--cp-teal); color:var(--cp-on-teal); border:1px solid var(--cp-teal); }
.cp-primary:hover { background:rgba(28,222,202,.9); border-color:rgba(28,222,202,.9); }
.cp-secondary { color:var(--cp-text); border:1px solid var(--cp-line); background:var(--cp-panel); }
.cp-secondary:hover { background:var(--cp-surface-high); border-color:var(--cp-outline); }
.cp-link { color:var(--cp-teal); text-decoration:underline; text-underline-offset:4px; cursor:pointer; padding:8px 0; transition:color 180ms ease; }
.cp-link:hover { color:var(--cp-teal-soft); }
.cp-page :focus-visible,.cp-invitation :focus-visible { outline:2px solid var(--cp-teal); outline-offset:4px; }
.cp-card { position:relative; isolation:isolate; overflow:hidden; border:1px solid var(--cp-line); border-radius:16px; background:var(--cp-surface-low); min-height:600px; display:grid; grid-template-columns:1fr 230px; grid-template-rows:1fr auto; gap:25px; padding:45px; color:var(--cp-hero-text); }
.cp-art,.cp-scrim { position:absolute; inset:0; width:100%; height:100%; z-index:-2; object-fit:cover; }
.cp-art { height:125%; top:calc(var(--cp-crop,50) * -0.25%); bottom:auto; }
/* Teal corner vignette over the scrim, in the corner furthest from the name. */
.cp-scrim { z-index:-1; background:radial-gradient(ellipse at 100% 100%,rgba(28,222,202,.10) 0%,transparent 55%),linear-gradient(0deg,var(--cp-surface) 10%,rgba(14,21,19,.83) 45%,rgba(14,21,19,.2)),linear-gradient(90deg,rgba(14,21,19,.5),transparent); }
.cp-topline { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.cp-supporter { font-size:11px; padding:5px 10px; border:1px solid var(--cp-hero-pill); border-radius:20px; text-transform:capitalize; }
.cp-tier-premium .cp-supporter,.cp-tier-ultimate .cp-supporter { border-color:var(--cp-teal); }
.cp-tier-ultimate .cp-supporter { background:#1cdeca18; box-shadow:0 0 18px #1cdeca20; }
.cp-identity { min-width:0; padding-top:12px; }
.cp-card h1 { font-family:Oswald,sans-serif; font-weight:600; text-transform:uppercase; font-size:clamp(38px,5vw,76px); line-height:1.05; margin:35px 0 20px; overflow-wrap:anywhere; }
.cp-headline { font-size:20px; line-height:1.5; max-width:38ch; overflow-wrap:anywhere; }
.cp-colors { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:18px; font-size:12px; }
.cp-colors>span:last-child { margin-left:8px; }
.cp-tags { display:flex; flex-wrap:wrap; list-style:none; gap:8px; margin:22px 0; padding:0; }
.cp-tags li { border-bottom:1px solid var(--cp-hero-rule); font-size:14px; padding:5px 0; margin-right:12px; overflow-wrap:anywhere; }
.cp-favourite { align-self:center; margin:15px 0; }
.cp-favourite img { width:100%; max-width:210px; border-radius:10px; transform:rotate(5deg); box-shadow:0 15px 40px #0008; }
.cp-favourite figcaption { margin-top:24px; display:flex; flex-direction:column; gap:8px; line-height:1.4; }
.cp-favourite strong { font-size:15px; }
.cp-bottom { grid-column:1/-1; }
.cp-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; border-bottom:1px solid var(--cp-hero-line); padding-bottom:25px; }
.cp-facts strong { font:500 clamp(24px,4vw,48px)/1 Oswald,sans-serif; display:block; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.cp-facts>div:first-child strong { color:var(--cp-teal); }
.cp-facts span { display:block; margin-top:12px; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.cp-pins { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; padding:24px 0; }
.cp-pin { display:flex; gap:12px; align-items:flex-start; text-decoration:none; color:inherit; min-width:0; }
.cp-achievement-art { width:34px; height:34px; object-fit:contain; flex:none; }
.cp-accomplishment { min-width:0; }
.cp-accomplishment strong { display:block; font:500 16px/1.35 Oswald,sans-serif; overflow-wrap:anywhere; }
.cp-achievement-label { display:block; font-size:11px; line-height:1.8; margin-top:5px; color:var(--cp-muted); }
.cp-metal { display:inline-block; width:6px; height:6px; transform:rotate(45deg); margin:0 5px; }
.cp-accomplishment small { color:var(--cp-hero-muted); font-size:11px; }
.cp-signature { display:flex; justify-content:space-between; gap:20px; font-size:12px; padding:18px 0 5px; border-top:1px solid var(--cp-hero-line); overflow-wrap:anywhere; }
.cp-signature>span:first-child { color:var(--cp-teal); }
.cp-credit { position:absolute; right:16px; bottom:8px; color:var(--cp-hero-faint); font-size:9px; }
.cp-section { margin-top:44px; }
/* Section headings stay quiet Roboto; the Oswald numerals carry the weight. */
.cp-section h2 { font-family:inherit; font-size:16px; font-weight:500; letter-spacing:0; margin-bottom:18px; }
.cp-deck { display:flex; gap:18px; align-items:center; padding:20px 0; border-top:1px solid var(--cp-line); }
.cp-deck>img { width:90px; height:64px; object-fit:cover; border-radius:6px; }
.cp-deck-name { font:500 21px/1.3 Oswald,sans-serif; overflow-wrap:anywhere; transition:color 180ms ease; }
.cp-deck-name:hover { color:var(--cp-teal); }
.cp-deck p { font-size:13px; color:var(--cp-muted); }
.cp-deck-stats { display:flex; flex-wrap:wrap; gap:24px; margin-left:auto; }
.cp-deck-stats dd { font:500 26px/1.2 Oswald,sans-serif; margin:0; font-variant-numeric:tabular-nums; }
.cp-deck-stats dt { color:var(--cp-muted); font-size:11px; }
.cp-achievements { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.cp-help { font-size:13px; line-height:1.6; color:var(--cp-muted); margin:10px 0 18px; max-width:65ch; }
.cp-page .cp-status-error, .cp-invitation .cp-status-error,.cp-selection-feedback { color:var(--cp-warning); }
.cp-selection-feedback:empty { display:none; }
.cp-status { min-height:24px; color:var(--cp-teal); line-height:1.5; }
.cp-notice,.cp-privacy { padding:20px; border-left:2px solid var(--cp-teal); background:var(--cp-panel); margin:20px 0; }
.cp-privacy h2 { font-size:20px; margin-bottom:10px; }
.cp-privacy p { color:var(--cp-muted); font-size:13px; line-height:1.6; margin:10px 0; }
.cp-editor { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:55px; align-items:start; }
.cp-preview { position:sticky; top:24px; }
.cp-preview .cp-card { padding:24px; min-height:450px; grid-template-columns:1fr 110px; gap:16px; }
.cp-preview .cp-card h1 { font-size:38px; margin-top:25px; }
.cp-preview .cp-headline { font-size:16px; }
.cp-preview .cp-favourite { font-size:12px; }
.cp-preview .cp-pins { grid-template-columns:1fr; gap:14px; }
.cp-preview .cp-facts strong { font-size:28px; }
.cp-preview .cp-favourite figcaption { font-size:11px; }
.cp-fields fieldset { border:0; border-top:1px solid var(--cp-line); margin:0 0 32px; padding:24px 0 0; min-width:0; }
.cp-fields legend { font-size:25px; padding-right:16px; }
.cp-page label { display:block; font-size:14px; margin:16px 0 7px; }
.cp-page input[type=text],.cp-page input:not([type]),.cp-page input[type=search],.cp-page select,.cp-page textarea,.cp-picker input { width:100%; border:1px solid var(--cp-line); border-radius:6px; background:var(--cp-surface-low); color:var(--cp-text); padding:12px; font:inherit; height:auto; min-height:44px; }
.cp-page input[type=range] { width:100%; accent-color:var(--cp-teal); }
.cp-page input[type=checkbox] { accent-color:var(--cp-teal); flex:none; }
.cp-handle { display:flex; align-items:center; gap:8px; font-size:13px; }
.cp-handle>span { white-space:nowrap; flex:none; }
.cp-page .cp-handle input { min-width:0; width:0; flex:1; }
.cp-choices { display:flex; flex-wrap:wrap; gap:8px; }
.cp-page .cp-choice { display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--cp-line); border-radius:20px; margin:0; font-size:13px; flex-wrap:wrap; transition:background-color 180ms ease, border-color 180ms ease; }
.cp-page .cp-choice:hover { background:var(--cp-surface-high); border-color:var(--cp-outline); }
.cp-page .cp-choice:has(:checked) { border-color:var(--cp-teal); background:#1cdeca0a; }
.cp-page .cp-choice:has(:checked):hover { background:#1cdeca1a; }
.cp-page .cp-pin-choice { display:flex; align-items:center; gap:12px; padding:12px 0; margin:0; }
.cp-art-controls,.cp-editor-actions { display:flex; flex-wrap:wrap; gap:12px; }
.cp-editor-actions .cp-status { flex-basis:100%; }
.cp-order-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:10px 0; border-bottom:1px solid var(--cp-line); }
.cp-order-row>span { flex:1; }
.cp-order-row button { min-width:36px; min-height:36px; border:1px solid var(--cp-line); border-radius:5px; transition:background-color 180ms ease, border-color 180ms ease; }
.cp-order-row button:hover:not(:disabled) { background:var(--cp-surface-high); border-color:var(--cp-outline); }
.cp-picker,.cp-invitation { color:var(--cp-text); background:var(--cp-surface); border:1px solid var(--cp-line); border-radius:18px; padding:28px; width:min(940px,94vw); max-height:90vh; overflow:auto; }
.cp-picker::backdrop,.cp-invitation::backdrop { background:#000b; backdrop-filter:blur(4px); }
.cp-picker h2,.cp-invitation h2 { font:500 32px/1.15 Oswald,sans-serif; }
.cp-picker input { width:100%; }
/* The printings grid inside is the deck editor's shared partial, so it brings
   its own Tailwind layout. Only the card-name list above it is styled here. */
.cp-search-results { margin-top:20px; }
.cp-card-results { list-style:none; margin:0; padding:0; }
.cp-card-result { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:10px 12px; border-radius:8px; background:transparent; cursor:pointer; transition:background-color 180ms ease; }
.cp-card-result:hover { background:var(--cp-surface-high); }
.cp-card-result img { width:40px; border-radius:4px; flex:none; }
.cp-report { margin-top:40px; font-size:13px; color:var(--cp-muted); }
.cp-report form { max-width:500px; }
.cp-invitation .cp-card { min-height:450px; margin-top:25px; padding:28px; }
@media(max-width:800px) { .cp-editor { grid-template-columns:1fr; gap:30px; } .cp-preview { position:static; } .cp-card { padding:25px; grid-template-columns:1fr 140px; min-height:500px; } .cp-card h1 { font-size:46px; } .cp-pins { grid-template-columns:1fr; gap:16px; } .cp-achievements { grid-template-columns:repeat(2,minmax(0,1fr)); } .cp-deck { flex-wrap:wrap; } .cp-deck-stats { flex-basis:100%; margin-left:0; } }
@media(max-width:480px) { .cp-page { margin:24px auto; } .cp-card,.cp-preview .cp-card,.cp-invitation .cp-card { grid-template-columns:1fr; padding:20px; gap:18px; } .cp-card h1 { font-size:38px; } .cp-favourite { display:flex; align-items:center; gap:20px; margin:0; } .cp-favourite img { width:95px; flex:none; } .cp-favourite figcaption { margin:0; } .cp-facts { gap:10px; } .cp-facts strong { font-size:28px; } .cp-facts span { font-size:9px; letter-spacing:.05em; } .cp-achievements { grid-template-columns:1fr; } .cp-picker,.cp-invitation { padding:16px; } .cp-signature { font-size:10px; } }
@media(prefers-reduced-motion:reduce) { .cp-page *,.cp-invitation * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }

.cp-crop-labels { display:flex; justify-content:space-between; color:var(--cp-muted); font-size:12px; margin:0 0 4px; }
.cp-page input.cp-crop[type=range] { appearance:none; -webkit-appearance:none; display:block; height:32px; min-height:32px; padding:0; margin:0 0 12px; border:0; box-shadow:none; background:transparent; cursor:ew-resize; }
.cp-page input.cp-crop[type=range]::-webkit-slider-runnable-track { height:4px; background:var(--cp-track); border-radius:4px; }
.cp-page input.cp-crop[type=range]::-moz-range-track { height:4px; background:var(--cp-track); border-radius:4px; }
/* border-box on both thumbs, or Chrome renders 24px against Firefox's 18px. */
.cp-page input.cp-crop[type=range]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; box-sizing:border-box; width:18px; height:18px; margin-top:-7px; border:3px solid var(--cp-surface); border-radius:50%; background:var(--cp-teal); box-shadow:0 0 0 1px var(--cp-teal); }
.cp-page input.cp-crop[type=range]::-moz-range-thumb { box-sizing:border-box; width:18px; height:18px; border:3px solid var(--cp-surface); border-radius:50%; background:var(--cp-teal); box-shadow:0 0 0 1px var(--cp-teal); }
.cp-crop:focus-visible { outline-offset:3px; border-radius:5px; }