/* Print Your Brand — shared theme: colour tokens (light/dark/glass/own palette, set by core/look.ts), the legacy
   variable names the screens use, the aurora background and the Appearance drawer. Loaded by the staff app (before
   nx.css) and by the customer portal (after app.css), so both follow the same look and the same drawer. */

:root {
  --accent: #1d3f73; --accent-rgb: 29, 63, 115; --accent-fg: #fff;
  --accent-soft: rgba(var(--accent-rgb), .10);
  --accent-2: #d9622b; --accent-text: var(--accent);
  --bg: #fbfaf6; --surface: #ffffff; --surface-2: #f5f3ed; --surface-3: #eeebe3; --surface-solid: #ffffff; --overlay: #ffffff;
  --fg: #1c1b18; --fg-2: #4a4843; --fg-3: #86847e; --fg-4: #b8b5ae;
  --border: rgba(28, 27, 24, .08); --border-strong: rgba(28, 27, 24, .14);
  --ok: #15803d; --warn: #b45309; --err: #b91c1c; --info: #1d4ed8;
  --radius: 12px; --radius-sm: 7px; --radius-lg: 17px;
  --font-sans: 'Nunito', system-ui, sans-serif; --font-serif: 'Baloo 2', 'Nunito', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --shadow-sm: 0 1px 2px rgba(28, 27, 24, .04), 0 1px 1px rgba(28, 27, 24, .03);
  --shadow: 0 10px 34px -16px rgba(28, 27, 24, .22);
  --top-h: 76px; --side-w: 236px;
  --blur: 0px; --glass-a: .62; --glass-edge: transparent;
  --blob-1: rgba(var(--accent-rgb), .85); --blob-2: #f39a63; --blob-3: #8fc3ea;
}
/* glass, light: translucent white over the aurora; --glass-a is the opacity slider */
:root[data-look="glass"] {
  --bg: #e9edf3; --surface: rgba(255, 255, 255, var(--glass-a)); --surface-2: rgba(255, 255, 255, calc(var(--glass-a) + .14));
  --surface-3: rgba(255, 255, 255, calc(var(--glass-a) + .26)); --surface-solid: #f6f7fa; --overlay: rgba(252, 252, 254, .97);
  --border: rgba(22, 33, 58, .09); --border-strong: rgba(22, 33, 58, .15); --glass-edge: rgba(255, 255, 255, .75);
  --shadow: 0 12px 38px -18px rgba(20, 36, 72, .32);
}
/* data-theme is always set by look.ts (system resolved there), so no prefers-color-scheme copies are needed here */
:root[data-theme="dark"] {
  --bg: #131210; --surface: #1c1b18; --surface-2: #242320; --surface-3: #2c2b27; --surface-solid: #1c1b18; --overlay: #22211e;
  --fg: #f5f3ed; --fg-2: #c8c5bd; --fg-3: #8a877f; --fg-4: #5a5852;
  --border: rgba(245, 243, 237, .08); --border-strong: rgba(245, 243, 237, .14);
  --ok: #42d1a8; --warn: #f0b252; --err: #ff7d95; --info: #8db8f0;
  --accent-soft: rgba(var(--accent-rgb), .26); --icon: color-mix(in srgb, var(--accent) 45%, #fff); --accent-text: color-mix(in srgb, var(--accent) 40%, #fff);
  --shadow: 0 12px 38px -18px rgba(0, 0, 0, .7);
  --blob-1: #23477f; --blob-2: #8a3d17; --blob-3: #1d5a7a;
}
:root[data-theme="dark"][data-look="glass"] {
  --bg: #0b0e16; --surface: rgba(30, 34, 47, var(--glass-a)); --surface-2: rgba(42, 47, 63, calc(var(--glass-a) + .12));
  --surface-3: rgba(54, 60, 78, calc(var(--glass-a) + .22)); --surface-solid: #1b1f2b; --overlay: rgba(30, 34, 46, .97);
  --border: rgba(255, 255, 255, .08); --border-strong: rgba(255, 255, 255, .14); --glass-edge: rgba(255, 255, 255, .07);
}

/* legacy names used across the screens; [data-theme] so these win over app.css (also loaded by the portal) */
:root, :root[data-theme] {
  --glass: var(--surface); --glass-strong: var(--surface-2); --glass-border: var(--border-strong); --glass-blur: var(--blur);
  --text: var(--fg); --text-2: var(--fg-2); --text-3: var(--fg-3); --line: var(--border);
  --danger: var(--err); --font: var(--font-sans); --mono: var(--font-mono);
  --row-sel: var(--accent);
  /* top bar and sidebar can get their own colour in an own palette (look.ts); by default they are surfaces */
  --side-bg: var(--surface); --side-fg: var(--fg); --side-fg-2: var(--fg-2); --side-fg-3: var(--fg-3); --side-hover: var(--surface-2); --side-line: var(--border); --side-active: var(--accent-text);
  --top-bg: var(--surface); --top-fg: var(--fg); --top-fg-2: var(--fg-2); --top-fg-3: var(--fg-3); --top-hover: var(--surface-2); --top-line: var(--border); --top-active: var(--accent-text);
  /* page values frozen here, for pop-ups that open inside the top bar or sidebar */
  --page-fg: var(--fg); --page-fg-2: var(--fg-2); --page-fg-3: var(--fg-3); --page-surface-2: var(--surface-2); --page-border: var(--border); --page-accent-text: var(--accent-text);
}
:root:not([data-theme="dark"]) { --icon: var(--accent); }

html, body { font-family: var(--font-sans); background: var(--bg); color: var(--fg); font-size: 14px; line-height: 1.5; }
/* the page colour lives on html only: a body background is painted over the z-index:-1 aurora and hid the glass */
body { background: transparent; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
:root[data-aurora="off"] .aurora { display: none; }
.aurora span { opacity: .55; }
.aurora span:nth-child(1) { background: var(--blob-1); }
.aurora span:nth-child(2) { background: var(--blob-2); }
.aurora span:nth-child(3) { background: var(--blob-3); opacity: .4; }
:root[data-theme="dark"] .aurora span { opacity: .5; }

/* Frosted glass only on the fixed layers (top bar, sidebar) and on overlays. Content cards are translucent over the
   already blurred aurora: no backdrop-filter there, because it turns every card into a containing block for
   position:fixed children and makes nested pop-ups see-through, and blurring every list row makes scrolling slow. */
:root[data-look="glass"] :is(.nx-top, .nx-side, .modal, .toast, .nx-pop, .nx-drawer, .ac-list, .col-chooser) {
  backdrop-filter: blur(var(--blur)) saturate(170%); -webkit-backdrop-filter: blur(var(--blur)) saturate(170%);
}
.glass { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  backdrop-filter: none; -webkit-backdrop-filter: none; }
:root[data-look="glass"] :is(.glass, .widget, .acc-row, .m-card, .filters-bar) { box-shadow: var(--shadow), inset 0 1px 0 var(--glass-edge); }

/* ---------- appearance drawer ---------- */
.nx-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(20, 18, 14, .28); opacity: 0; pointer-events: none; transition: opacity .25s; }
.nx-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; width: min(380px, 100vw); display: flex; flex-direction: column;
  background: var(--overlay); color: var(--fg); border-left: 1px solid var(--border-strong); box-shadow: var(--shadow); transform: translateX(105%); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
#look-drawer.open .nx-scrim { opacity: 1; pointer-events: auto; }
#look-drawer.open .nx-drawer { transform: none; }
.nx-drawer header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.nx-drawer h2 { font-family: var(--font-serif); font-weight: 500; font-size: 26px; }
.nx-drawer h2 em { color: var(--accent-text); font-style: normal; }
.lk-body { flex: 1; overflow: auto; padding: 8px 20px 20px; display: flex; flex-direction: column; gap: 4px; }
.lk-body section { padding: 12px 0; border-bottom: 1px solid var(--border); }
.lk-body h4 { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-3); font-weight: 500; margin-bottom: 8px; }
.lk-row { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-opt { padding: 7px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); font-size: 13px; color: var(--fg-2); background: var(--surface); }
.lk-opt.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); font-weight: 700; }
.lk-cards { display: grid; grid-template-columns: 1fr 1fr; }
.lk-opt.card { height: 78px; display: flex; align-items: flex-end; padding: 10px; border-radius: var(--radius); font-weight: 600; position: relative; overflow: hidden; }
.lk-opt.glass-card { background: linear-gradient(135deg, rgba(var(--accent-rgb), .35), rgba(217, 98, 43, .25)); }
.lk-opt.glass-card::before { content: ''; position: absolute; inset: 14px 14px 30px; border-radius: 8px; background: rgba(255,255,255,.55); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.7); }
.lk-opt.flat-card { background: #fbfaf6; color: #4a4843; }
.lk-opt.flat-card::before { content: ''; position: absolute; inset: 14px 14px 30px; border-radius: 8px; background: #fff; border: 1px solid rgba(28,27,24,.12); }
.lk-swatches .sw { width: 30px; height: 30px; border-radius: 50%; background: var(--sw); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border-strong); cursor: pointer; }
.lk-swatches .sw.on { box-shadow: 0 0 0 2px var(--fg); }
.lk-swatches .custom { display: grid; place-items: center; overflow: hidden; background: conic-gradient(#e53, #fc3, #3c6, #39f, #93f, #e53); }
.lk-swatches .custom input { opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.lk-body input[type=range] { width: 100%; accent-color: var(--accent); }
.nx-drawer { width: min(420px, 100vw); }
.lk-modes { display: grid; grid-template-columns: repeat(4, 1fr); }
.lk-modes .lk-opt { padding: 7px 4px; text-align: center; }
.lk-sub { margin-top: 12px; }
.lk-check { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--fg-2); }
.lk-check input { accent-color: var(--accent); width: 16px; height: 16px; }
.lk-make { margin-top: 10px; }
.lk-fonts { display: grid; gap: 8px; }
.lk-fonts label { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-2); }
.lk-sel { font: inherit; font-size: 13px; padding: 6px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface-solid); color: var(--fg); }
.lk-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.lk-preset { display: flex; flex-direction: column; gap: 4px; padding: 5px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface-solid); font-size: 11.5px; color: var(--fg-2); }
.lk-preset:hover { border-color: var(--accent); }
.lk-preset i { position: relative; display: block; height: 34px; border-radius: 5px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.lk-preset i b { position: absolute; left: 0; top: 0; bottom: 0; width: 28%; }
.lk-preset i s { position: absolute; left: 38%; top: 9px; width: 34%; height: 7px; border-radius: 4px; }
.lk-preset i u { position: absolute; left: 38%; top: 20px; width: 16%; height: 7px; border-radius: 4px; }
.lk-colours { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.lk-colour { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 12.5px; color: var(--fg-2); cursor: pointer; }
.lk-colour input { width: 28px; height: 28px; padding: 0; border: 1px solid var(--border-strong); border-radius: 7px; background: none; cursor: pointer; flex: none; }
.lk-colour input::-webkit-color-swatch-wrapper { padding: 2px; }
.lk-colour input::-webkit-color-swatch { border: 0; border-radius: 5px; }
.lk-share { margin-top: 12px; }
.lk-share summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--fg-2); }
.lk-share textarea { width: 100%; margin: 6px 0; font-family: var(--font-mono); font-size: 11px; padding: 6px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface-solid); color: var(--fg); resize: vertical; }
.lk-share textarea.bad { border-color: var(--err); }
.nx-drawer footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
/* saved looks (0.29) */
.lk-saved { background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: var(--radius-sm); padding: 10px 12px !important; }
.lk-prof { display: inline-flex; align-items: stretch; }
.lk-prof .lk-opt { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.lk-prof.on .lk-opt { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.lk-prof-x { padding: 0 9px; border: 1px solid var(--border-strong); border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface); color: var(--fg-3); }
.lk-prof-x:hover { color: var(--danger, #c33); }
.lk-prof-new { margin-top: 8px; flex-wrap: nowrap; }
.lk-prof-new input { flex: 1; min-width: 0; }