/* Clips Page — Gen Z design layer. Loaded last; overrides shared tokens + restyles core primitives.
   Self-hosted fonts (CSP font-src falls back to 'self'). Light-only to match the app's color-scheme. */

@font-face{font-family:'BagelFatOne';src:url('/static/fonts/bagel-fat-one-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Figtree';src:url('/static/fonts/figtree-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Figtree';src:url('/static/fonts/figtree-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Figtree';src:url('/static/fonts/figtree-latin-800-normal.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Figtree';src:url('/static/fonts/figtree-latin-900-normal.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Caveat';src:url('/static/fonts/caveat-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}

/* ---- palette + token remap (wins over styles.css / polish.css :root, being last) ---- */
:root{
  --gz-ink:#17142B; --gz-muted:#5A5774; --gz-paper:#F5F6FB; --gz-dot:#D8DBEC; --gz-surface:#FFFFFF;
  --gz-line:#17142B; --gz-hair:#DADDEE;
  --gz-tomato:#FF6A4A; --gz-butter:#FFD84D; --gz-pool:#56CCFF; --gz-mint:#72E6B3; --gz-pink:#FF9EE0; --gz-lilac:#C7B8FF;
  --gz-display:'BagelFatOne','Arial Black',Impact,system-ui,sans-serif;
  --gz-body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gz-hand:'Caveat','Segoe Print','Comic Sans MS',cursive;
  /* remap the app's own tokens so untouched areas shift too */
  --ink:var(--gz-ink); --muted:var(--gz-muted); --paper:var(--gz-paper); --canvas:var(--gz-paper);
  --line:var(--gz-hair); --navy:var(--gz-ink);
  --blue:var(--gz-tomato); --accent:var(--gz-tomato); --accent-soft:#FFE4DD; --mint:var(--gz-mint);
  --radius:20px;
  font-family:var(--gz-body)!important;
}
body{
  font-family:var(--gz-body);
  background-color:var(--gz-paper);
  background-image:radial-gradient(var(--gz-dot) 1.2px,transparent 1.3px);
  background-size:22px 22px;
  color:var(--gz-ink);
}

/* ---- display headings ---- */
h1,.heading h1,.student-heading,.teen-studio-heading,.lock-page h1,.lock-page h2,.modal h2,#modal-title{
  font-family:var(--gz-display)!important;font-weight:400!important;letter-spacing:.2px;line-height:1.02;
}
h2,.panel>h3:first-child{font-family:var(--gz-display)!important;font-weight:400!important}
.eyebrow,.side-label,.teen-preview-label,.student-privacy-caption{font-family:var(--gz-body)!important;font-weight:800!important;letter-spacing:.12em}
.brand,.brand-name,.brand span{font-family:var(--gz-display)!important;font-weight:400!important}

/* ---- buttons: chunky ink outline + hard offset shadow ---- */
.btn,button.btn,.nav-button,.teen-filter,.student-card-actions .btn{
  border:2.5px solid var(--gz-line)!important;border-radius:14px!important;font-weight:800!important;
  box-shadow:3px 3px 0 var(--gz-ink);transition:transform .08s,box-shadow .08s;
}
.btn{background:var(--gz-surface);color:var(--gz-ink)}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--gz-ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--gz-ink)}
.btn:not(.secondary):not(.ghost):not(.danger){background:var(--gz-tomato)!important;color:var(--gz-ink)!important}
.btn.secondary{background:var(--gz-butter)!important;color:var(--gz-ink)!important}
.btn.ghost{box-shadow:none!important;background:transparent!important;border-color:var(--gz-hair)!important}
.btn.ghost:hover{background:#ECEEF7!important;transform:none}
.btn.danger{background:#FFE1DE!important;color:#C92A2A!important;border-color:#C92A2A!important}
.btn svg{stroke-width:2.4}

/* ---- surfaces: panels, cards ---- */
.panel,.media-card,.teen-collection,.row.identity,.notice,.showcase,.lock-page,.modal,.teen-preview,.student-card{
  border-radius:22px!important;
}
.panel,.media-card,.teen-collection,.modal,.teen-preview{
  border:2.5px solid var(--gz-line)!important;background:var(--gz-surface);box-shadow:5px 5px 0 var(--gz-ink);
}
.media-card{overflow:hidden}
.notice{border:2.5px solid var(--gz-line)!important;background:#EEF0FA!important;border-radius:18px!important;box-shadow:none}
.notice.warning{background:var(--gz-butter)!important;color:var(--gz-ink)!important}

/* ---- badges / chips ---- */
.badge{border:2px solid var(--gz-line)!important;border-radius:999px!important;font-weight:800!important;background:var(--gz-surface)!important;color:var(--gz-ink)!important}
.badge.private{background:var(--gz-butter)!important}
.badge.demo{background:var(--gz-pink)!important}

/* ---- parent sidebar ---- */
.sidebar{background:var(--gz-ink)!important;border-right:2.5px solid var(--gz-line)}
.sidebar .nav-button{background:transparent!important;border:0!important;box-shadow:none!important;color:#E8E6FF!important;border-radius:12px!important;font-weight:800!important}
.sidebar .nav-button.active{background:var(--gz-butter)!important;color:var(--gz-ink)!important;box-shadow:3px 3px 0 var(--gz-tomato)}
.sidebar .brand,.sidebar .brand span,.brand-tagline,.side-label{color:#fff!important}
.sidebar-note{background:#272341!important;border:2px solid #3a3560;border-radius:16px}
.user-chip{background:#272341!important;border-radius:16px}

/* ---- teen top nav ---- */
.student-navigation .btn,.student-navigation button{border:2.5px solid var(--gz-line)!important;border-radius:14px!important;box-shadow:3px 3px 0 var(--gz-ink)!important;font-weight:800!important}
.student-navigation .active,.student-navigation [aria-current="page"]{background:var(--gz-ink)!important;color:var(--gz-paper)!important;box-shadow:3px 3px 0 var(--gz-tomato)!important}

/* ---- flatten the studio welcome banner to a flat pop panel ---- */
.studio-welcome{background:var(--gz-lilac)!important;color:var(--gz-ink)!important;border:2.5px solid var(--gz-line)!important;border-radius:24px!important;box-shadow:5px 5px 0 var(--gz-ink)}
.studio-welcome *{color:var(--gz-ink)!important}
.studio-welcome .btn:not(.secondary):not(.ghost){background:var(--gz-surface)!important}

/* ---- handwriting accents ---- */
.teen-name-handwritten,.teen-preview-note,.handwritten{font-family:var(--gz-hand)!important;font-weight:700}

/* ---- inputs ---- */
.input,input[type=text],input[type=email],select,textarea{border:2.5px solid var(--gz-line)!important;border-radius:14px!important}
.input:focus,textarea:focus,select:focus{outline:3px solid var(--gz-tomato);outline-offset:2px}

/* ---- fixture banner stays readable ---- */
.synthetic-fixture-banner{font-family:var(--gz-body)!important}

/* Gen Z font-picker options for name_style (self-hosted fonts already declared above) */
.showcase[data-name-style=bubble] h1,.student-shell[data-student-ui="teen"] .teen-name-bubble{font-family:'BagelFatOne','Arial Black',system-ui!important;letter-spacing:.3px;font-weight:400}
.showcase[data-name-style=script] h1,.student-shell[data-student-ui="teen"] .teen-name-script{font-family:'Caveat','Segoe Print',cursive!important;font-weight:700;letter-spacing:0}

/* Trading cards + binder (teen Cards tab) */
.trade-card{position:relative;border:3px solid var(--gz-line);border-radius:18px;padding:12px;background:var(--ca,#164b48);color:#fff;box-shadow:4px 4px 0 var(--gz-ink);width:180px;max-width:100%;aspect-ratio:5/7;display:flex;flex-direction:column;overflow:hidden}
.trade-card .tc-top{display:flex;justify-content:space-between;font-weight:900;font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.trade-card .tc-win{flex:1;margin:8px 0;border:3px solid var(--gz-line);border-radius:12px;background:var(--cb,#176f60);display:grid;place-items:center}
.trade-card .tc-badge{width:48px;height:48px;border-radius:14px;background:#fff;color:var(--gz-ink);display:grid;place-items:center;font:400 26px/1 var(--gz-display);border:2.5px solid var(--gz-line)}
.trade-card .tc-name{font:400 22px/1 var(--gz-display);overflow-wrap:anywhere}
.trade-card .tc-hl{font-size:11px;font-weight:700;opacity:.92;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px}
.cards-top{display:flex;gap:22px;flex-wrap:wrap;align-items:center;margin-bottom:24px}
.cards-actions{display:grid;gap:10px;align-content:center;min-width:240px;flex:1}
.binder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:16px}
.binder-slot{border:0;background:none;padding:0;cursor:pointer}
.binder-slot .trade-card{width:100%}
.binder-slot:hover .trade-card{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--gz-ink)}
.binder-title{font-family:var(--gz-display)!important;font-weight:400!important;margin:8px 0 14px}
.trade-code-big{font:400 40px/1 var(--gz-display);letter-spacing:5px;text-align:center;background:var(--gz-butter);color:var(--gz-ink);border:3px solid var(--gz-line);border-radius:14px;padding:16px 10px;margin:8px 0}
.trade-qr{display:flex;justify-content:center;padding:6px}
.trade-qr svg,.trade-qr img{width:190px!important;height:190px!important;border:3px solid var(--gz-line);border-radius:12px;display:block}

/* Card note (back of the card, like writing on a school photo) */
textarea.handin{font:700 20px/1.3 var(--gz-hand)!important}
.binder-view{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.binder-view .trade-card{width:160px}
.binder-view-back{flex:1;min-width:170px;display:grid;gap:12px}
.card-back-note{border:2.5px solid var(--gz-line);border-radius:14px;padding:12px 14px;background:repeating-linear-gradient(var(--gz-surface),var(--gz-surface) 27px,var(--gz-soft) 28px)}
.card-back-note small{font-size:10px;letter-spacing:.14em;font-weight:900;color:var(--gz-muted)}
.card-back-note p{font:700 24px/1.17 var(--gz-hand);margin:4px 0 0;overflow-wrap:anywhere}