/* ============================================================
   BRANDIUM — ELEMENTAL · kit.css
   Shared components for every canvas. Canvases are laid out at
   true export size (1080px wide feed/story) and scaled to fit
   the window by kit.js.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62.5..125,100..900&family=Fragment+Mono:ital@0;1&display=swap');

:root{
  --paper:#F4F4F1; --panel:#EAEAE5; --line:#D3D4CC; --white:#FFFFFF;
  --carbon:#131511; --carbon-2:#1B1D19; --ink-soft:#4C4E48; --smoke:#8B8D86;
  --ultra:#2430E8; --ultra-soft:#7A84FF; --ultra-deep:#1A22B0; --red:#E8442E;
  --sans:'Archivo',Helvetica,Arial,sans-serif;
  --mono:'Fragment Mono','Courier New',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:#0C0D0B;font-family:var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased}
.export body,body.export{overflow:visible;background:transparent}
::selection{background:var(--ultra);color:#fff}

/* ---------- stage ---------- */
.stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.export .stage{position:static;display:block;overflow:visible}
.stage-inner{flex-shrink:0}
.multi .stage{overflow-x:auto;justify-content:flex-start;padding:0 40px;gap:40px}
.multi .stage-inner{display:flex;gap:40px;align-items:center}

/* ---------- canvases ---------- */
.canvas{position:relative;overflow:hidden;flex-shrink:0;background:var(--paper);color:var(--carbon);
  box-shadow:0 40px 120px -40px rgba(0,0,0,.85)}
.export .canvas{box-shadow:none}
.canvas--feed{width:1080px;height:1350px}
.canvas--square{width:1080px;height:1080px}
.canvas--story{width:1080px;height:1920px}
.canvas--xbanner{width:1500px;height:500px}
.canvas--libanner{width:1128px;height:191px}
.canvas--bebanner{width:3200px;height:410px}
.canvas--avatar{width:1000px;height:1000px}
.canvas--carbon{background:var(--carbon);color:var(--paper)}
.canvas--ultra{background:var(--ultra);color:#fff}
.canvas--white{background:var(--white)}
.canvas--panel{background:var(--panel)}
.pad{padding:86px}
.pad-sm{padding:64px}

/* measurement grid ground */
.gridbg{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:108px 108px;background-position:center}
.canvas--carbon.gridbg,.gridbg--dark{background-image:linear-gradient(rgba(244,244,241,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(244,244,241,.07) 1px,transparent 1px)}
.canvas--ultra.gridbg,.gridbg--ultra{background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px)}

/* ---------- type ---------- */
.mono{font-family:var(--mono)}
.kicker{font-family:var(--mono);font-size:22px;letter-spacing:.34em;text-transform:uppercase;color:var(--ultra);font-weight:400}
.canvas--carbon .kicker{color:var(--ultra-soft)}
.canvas--ultra .kicker{color:rgba(255,255,255,.85)}
.display{font-weight:800;font-stretch:120%;text-transform:uppercase;line-height:1.02;letter-spacing:-.012em}
.display .u{color:var(--ultra)}
.canvas--carbon .display .u,.on-photo .display .u{color:var(--ultra-soft)}
.canvas--ultra .display .u{color:var(--carbon)}
.display .dim{color:var(--smoke)}
.body-copy{font-weight:400;font-size:30px;line-height:1.5;color:var(--ink-soft)}
.canvas--carbon .body-copy{color:#B4B6AE}
.canvas--ultra .body-copy{color:rgba(255,255,255,.88)}
.reg{font-family:var(--mono);font-size:20px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.rule-u{width:120px;height:6px;background:var(--ultra)}
.canvas--ultra .rule-u{background:#fff}
.fig{font-family:var(--mono);font-size:18px;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.fig::before{content:"— "}

/* header / footer registers */
.k-top{display:flex;justify-content:space-between;align-items:center;gap:24px;
  font-family:var(--mono);font-size:19px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft)}
.k-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;
  font-family:var(--mono);font-size:18px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.canvas--carbon .k-top,.canvas--carbon .k-foot{color:var(--smoke)}
.canvas--ultra .k-top,.canvas--ultra .k-foot{color:rgba(255,255,255,.75)}
.on-photo .k-top,.on-photo .k-foot{color:rgba(244,244,241,.85)}

/* layout helpers */
.col{display:flex;flex-direction:column}
.v-center{flex:1;display:flex;flex-direction:column;justify-content:center}
.center{align-items:center;text-align:center}
.gap-sm{gap:26px}.gap-md{gap:42px}.gap-lg{gap:60px}
.z{position:relative;z-index:5}

/* ---------- the element tile (filled by kit.js) ---------- */
.bd-tile{display:flex;flex-direction:column;flex-shrink:0;font-family:var(--sans)}
.bd-tile .tn{font-family:var(--mono);display:flex;justify-content:space-between;align-items:flex-start}
.bd-tile .ts{flex:1;display:flex;align-items:center;font-weight:800;font-stretch:112%;letter-spacing:-.03em;line-height:1}
.bd-tile .tb{font-family:var(--mono);text-transform:uppercase}

/* ---------- photo drop zones ---------- */
.photo{position:relative;overflow:hidden;background:var(--panel);cursor:pointer}
.export .photo{cursor:default}
.photo .ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-placeholder{position:absolute;inset:0;background:
  repeating-linear-gradient(45deg,transparent 0 40px,rgba(19,21,17,.05) 40px 41px),var(--panel)}
.ph-placeholder i{position:absolute;background:rgba(19,21,17,.14)}
.ph-placeholder i:first-child{left:50%;top:20%;bottom:20%;width:2px}
.ph-placeholder i:last-child{top:50%;left:20%;right:20%;height:2px}
.has-img .ph-placeholder{display:none}
.ph-wash{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(36,48,232,.06) 0%,rgba(19,21,17,.28) 100%);mix-blend-mode:multiply;opacity:0}
.has-img .ph-wash{opacity:1}
.no-wash .ph-wash{opacity:0 !important}
.gridlines{position:absolute;inset:0;pointer-events:none;opacity:0;
  background-image:linear-gradient(rgba(244,244,241,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(244,244,241,.14) 1px,transparent 1px);background-size:108px 108px}
.has-img .gridlines{opacity:1}
.no-wash .gridlines{opacity:0 !important}
.grain{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.has-img .grain{opacity:.5}
.ph-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);background:rgba(244,244,241,.92);padding:12px 18px;pointer-events:none;z-index:6}
.has-img .ph-hint{opacity:0}
.photo.dragover{outline:6px dashed var(--ultra);outline-offset:-6px}
.scrim{position:absolute;left:0;right:0;bottom:0;height:52%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(19,21,17,.82))}

/* ---------- charts ---------- */
.bars{display:flex;align-items:flex-end;gap:18px}
.bars i{flex:1;background:var(--carbon);display:block}
.bars i.hot{background:var(--ultra)}
.canvas--carbon .bars i{background:#3A3C36}
.canvas--carbon .bars i.hot{background:var(--ultra-soft)}

/* ---------- month blocks (new-month card) ---------- */
.month-blocks{display:flex;gap:10px}
.month-blocks div{flex:1;height:26px}

/* ---------- circle guide (avatar / highlight covers) ---------- */
.circle-guide{position:absolute;inset:0;pointer-events:none;z-index:9}
.circle-guide::before{content:"";position:absolute;left:50%;top:50%;width:86%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:2px dashed rgba(232,68,46,.7)}
.export .circle-guide,.ui-only{display:var(--ui-display,block)}
.export .circle-guide{display:none}
.export .ui-only{display:none}

/* ---------- editing affordance ---------- */
[data-edit]{outline:none;border-radius:2px}
[data-edit]:hover{box-shadow:0 0 0 2px rgba(36,48,232,.35)}
[data-edit]:focus{box-shadow:0 0 0 2px var(--ultra)}
.export [data-edit]:hover,.export [data-edit]:focus{box-shadow:none}

/* ---------- toolbar ---------- */
.toolbar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:50;
  display:flex;align-items:center;gap:14px;background:rgba(19,21,17,.92);border:1px solid #2A2C27;
  padding:12px 16px;font-family:var(--mono);color:#B4B6AE;font-size:11px;letter-spacing:.08em;backdrop-filter:blur(8px);flex-wrap:wrap;justify-content:center;max-width:94vw}
.toolbar .hint{color:#6E7069;letter-spacing:.14em;text-transform:uppercase;font-size:10px}
.toolbar a.back{color:#B4B6AE;text-decoration:none;letter-spacing:.14em;text-transform:uppercase;font-size:10px}
.toolbar a.back:hover{color:#fff}
.toolbar button{background:var(--ultra);color:#fff;border:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:10px 16px;cursor:pointer}
.toolbar button:hover{background:var(--ultra-deep)}
.toolbar button[data-cap]{background:#2A2C27}
.toolbar button[data-cap]:hover{background:#3A3C36}
.toolbar select{background:#2A2C27;color:#EDEEE9;border:1px solid #3A3C36;font-family:var(--mono);font-size:11px;padding:8px 10px}
.toolbar .tgl{display:flex;align-items:center;gap:6px;text-transform:uppercase;font-size:10px;letter-spacing:.12em;cursor:pointer}
.export .toolbar{display:none}