/* ============================================================
   Kafka Roki — Digital Business Card  (shared card visuals)
   Used by demos/card.html, card-maker.html, card-admin.html, card-view.html.
   Two selectable skins via data-skin on .card (and its .screen):
     (default)            EDITORIAL LIGHT — ivory paper, hairline-ruled, dense
     [data-skin="dark"]   LUXE DARK       — ink card, gold + theme accent
   Per-card industry colour flows through --t / --t2 (set inline by KRCard.render).
   ============================================================ */
:root{--ease:cubic-bezier(.22,1,.36,1);}

/* phone frame */
.phoneRow{display:flex;justify-content:center;}
.phone{width:412px;max-width:100%;background:#0c0c0c;border-radius:46px;padding:13px;
  box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05);position:relative;}
.screen{background:#f3f1ec;border-radius:34px;overflow:hidden;height:760px;overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;position:relative;}
.screen[data-skin="dark"]{background:#0f1013;}
.screen::-webkit-scrollbar{width:0;}
.hero,.heroText{touch-action:pan-y;}
.heroText{-webkit-user-drag:none;user-select:none;}

/* ===== the card — EDITORIAL LIGHT is the base; tokens drive both skins ===== */
.card{font-size:22px;min-height:100%;color:var(--ink);background:var(--surface);
  --t:#3a5bff;--t2:#23306b;
  --surface:#f3f1ec;--surface2:#fbfaf7;
  --ink:#1b1a17;--ink2:#39352d;--body:#4d473d;--tag:#5c554a;--mut:#6c655a;--mut2:#938b7d;
  --line:rgba(26,24,20,.13);
  --tint:color-mix(in srgb,var(--t) 9%,#fff);
  --acc:var(--t);                  /* theme accent: icons, kv values, links */
  --dash:var(--t);                 /* role underline + list bullet */
  --bullet:var(--t);
  --accent2:#caa23a;               /* review stars */
  --lk:var(--t);
  --scrim:linear-gradient(to top,rgba(12,10,8,.96) 0%,rgba(12,10,8,.58) 28%,rgba(12,10,8,.04) 54%,rgba(12,10,8,.2) 100%);}

/* ----- LUXE DARK overrides (tokens + the few structural changes) ----- */
.card[data-skin="dark"]{
  --surface:#101116;--surface2:rgba(255,255,255,.05);
  --ink:#ece8df;--ink2:#d8d2c6;--body:#aaa498;--tag:#a59f93;--mut:#9a948a;--mut2:#6f6a61;
  --line:rgba(236,232,223,.13);
  --tint:color-mix(in srgb,var(--t) 22%,#15161b);
  --acc:color-mix(in srgb,var(--t) 70%,#fff);
  --dash:#c9a86a;--bullet:#c9a86a;--accent2:#c9a86a;
  --lk:color-mix(in srgb,var(--t) 60%,#ece8df);
  --scrim:linear-gradient(to top,#0e0f13 1%,rgba(14,15,19,.66) 27%,rgba(14,15,19,.05) 52%,rgba(14,15,19,.34) 100%);}

/* hero — photo-forward, name-forward */
.hero{position:relative;height:432px;overflow:hidden;background:#cfcabf;}
.card[data-skin="dark"] .hero{background:#1a1b20;}
.heroImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;
  opacity:0;transform:translate(calc(var(--tx,0)*1%),calc(var(--ty,0)*1%)) scale(var(--z,1)) scaleX(var(--fx,1));transition:opacity .6s var(--ease),transform .12s var(--ease);
  pointer-events:none;-webkit-user-drag:none;user-select:none;}
.heroImg.loaded{opacity:1;}
.hero[data-type="store"] .heroImg{object-position:center top;}
.scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--scrim);}
.heroText{position:absolute;left:26px;right:26px;bottom:38px;z-index:2;color:#fff;}
.heroText .name{font-size:41px;font-weight:800;letter-spacing:-.04em;line-height:.98;text-shadow:0 2px 24px rgba(0,0,0,.5);}
.heroText .role{display:inline-flex;align-items:center;gap:11px;font-size:22px;font-weight:600;
  color:rgba(255,255,255,.94);margin-top:11px;letter-spacing:.01em;text-shadow:0 1px 14px rgba(0,0,0,.55);}
.heroText .role::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--dash);flex:none;
  box-shadow:0 0 12px color-mix(in srgb,var(--dash) 70%,transparent);}

/* identity sheet */
.head{position:relative;z-index:3;margin:-26px 0 0;padding:26px 26px 2px;border-radius:28px 28px 0 0;background:var(--surface);}

/* brand logo — overlaid on the photo; position (left/top %) and size (height px) are data-driven, draggable in the builder */
.heroLogo{position:absolute;z-index:2;pointer-events:none;max-width:80%;}
.heroLogo img{height:34px;width:auto;max-width:100%;object-fit:contain;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45));}
.heroLogo.noshadow img{filter:none;}

/* company — inline (light) / pill (dark) */
.org{display:inline-flex;align-items:center;gap:9px;font-size:22px;font-weight:700;color:var(--ink);
  padding:0;background:none;box-shadow:none;letter-spacing:-.01em;}
.card[data-skin="dark"] .org{padding:8px 15px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);}
.org .dot{width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 4px color-mix(in srgb,var(--t) 16%,transparent);}
.tagline{font-size:22px;color:var(--tag);line-height:1.58;margin-top:13px;}

/* stats — hairline rule (light) / boxed (dark) */
.stats{display:flex;margin-top:18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.card[data-skin="dark"] .stats{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface2);margin-top:17px;}
.stats .stat{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:15px 7px;font-size:22px;font-weight:800;color:var(--ink);line-height:1.2;letter-spacing:-.01em;}
.stats .stat + .stat{border-left:1px solid var(--line);}

/* quick actions */
.actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:20px 26px 4px;}
.actions a,.actions button{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:none;padding:0;color:var(--ink);font-size:22px;font-weight:700;cursor:pointer;min-width:0;}
/* icon shrinks to fit its column on narrow cards (e.g. iPhone SE / phone mockup) so the 5th button never clips; caps at 54px on roomy cards */
.actions .ico{width:100%;max-width:54px;aspect-ratio:1;margin-inline:auto;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--surface2);border:1px solid var(--line);color:var(--acc);box-shadow:none;
  transition:transform .2s var(--ease),background .2s,color .2s,border-color .2s;}
.actions a:hover .ico,.actions button:hover .ico{transform:translateY(-3px);border-color:transparent;background:var(--t);color:#fff;
  box-shadow:0 12px 22px color-mix(in srgb,var(--t) 34%,transparent);}
.actions a:active .ico,.actions button:active .ico{transform:scale(.93);}
.actions .ic{width:25px;height:25px;display:block;}
.actions .lab{font-size:22px;transform:scale(.74);transform-origin:top center;line-height:1.1;white-space:nowrap;margin-top:-5px;color:var(--mut);font-weight:600;letter-spacing:.02em;}

/* primary CTA (background gradient set inline from the card theme) */
.cta{margin:16px 26px 0;}
.cta a{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:17px;border-radius:14px;
  font-size:23px;font-weight:800;color:#fff;letter-spacing:-.01em;
  box-shadow:0 12px 26px color-mix(in srgb,var(--t) 28%,transparent),inset 0 1px 0 rgba(255,255,255,.22);transition:.2s var(--ease);}
.cta a:hover{transform:translateY(-2px);filter:brightness(1.06);}
.cta a:active{transform:translateY(0) scale(.99);}
.cta .ic{width:24px;height:24px;}

/* sections — flat hairline list (light) / glass cards (dark) */
.sections{margin:22px 26px 0;display:flex;flex-direction:column;border-top:1px solid var(--line);}
.card[data-skin="dark"] .sections{margin:18px 26px;border-top:none;gap:9px;padding-bottom:6px;}
.sec{background:none;border:none;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;overflow:visible;
  transition:border-color .25s var(--ease);}
.card[data-skin="dark"] .sec{background:var(--surface2);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.card[data-skin="dark"] .sec[open]{border-color:color-mix(in srgb,var(--t) 32%,var(--line));}
.sec>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:13px;padding:18px 2px;font-size:23px;font-weight:800;letter-spacing:-.01em;color:var(--ink);}
.card[data-skin="dark"] .sec>summary{padding:15px;}
.sec>summary::-webkit-details-marker{display:none;}
.sec>summary .si-wrap{width:34px;height:34px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--tint);color:var(--acc);transition:.2s var(--ease);}
.card[data-skin="dark"] .sec>summary .si-wrap{width:36px;height:36px;border-radius:10px;}
.sec[open]>summary .si-wrap{background:var(--t);color:#fff;}
.sec>summary .si{width:21px;height:21px;}
.card[data-skin="dark"] .sec>summary .si{width:22px;height:22px;}
.sec>summary .sp{flex:1;}
.sec>summary .chev{width:21px;height:21px;transition:transform .3s var(--ease),color .2s;color:var(--mut2);flex:none;}
.sec[open]>summary .chev{transform:rotate(180deg);color:var(--acc);}
.secBody{padding:0 2px 20px 49px;font-size:22px;color:var(--body);line-height:1.6;}
.card[data-skin="dark"] .secBody{padding:2px 16px 17px;}
.secBody p{margin-bottom:10px;}
.secBody p:last-child{margin-bottom:0;}
.secBody ul{list-style:none;display:flex;flex-direction:column;gap:12px;}
.secBody li{display:flex;gap:12px;align-items:flex-start;}
.secBody li .b{width:6px;height:6px;border-radius:1px;margin-top:10px;flex:none;transform:rotate(45deg);background:var(--bullet);}
.secBody li b{color:var(--ink);font-weight:800;margin-right:2px;}
.secBody .kv{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);}
.secBody .kv:first-child{padding-top:2px;}
.secBody .kv:last-child{border-bottom:none;padding-bottom:0;}
.secBody .kv>span{color:var(--mut);}
.secBody .kv b{font-weight:800;color:var(--acc);font-variant-numeric:tabular-nums;white-space:nowrap;}

/* gallery */
.gal{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.gcell{overflow:hidden;border-radius:16px;background:#e2ddd2;}
.card[data-skin="dark"] .gcell{background:#22232a;}
.gcell img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;transition:transform .4s var(--ease);
  transform:translate(calc(var(--gx,0)*1%),calc(var(--gy,0)*1%)) scale(var(--gz,1)) scaleX(var(--gf,1));}

/* reviews — flat hairline (light) / glass card (dark) */
.rev{position:relative;background:none;border:none;border-top:1px solid var(--line);border-radius:0;padding:16px 0 4px;margin:0;overflow:visible;}
.rev:first-child{border-top:none;padding-top:2px;}
.card[data-skin="dark"] .rev{background:var(--surface2);border:1px solid var(--line);border-radius:13px;padding:16px 17px;margin-bottom:11px;overflow:hidden;}
.card[data-skin="dark"] .rev:last-child{margin-bottom:0;}
.rev::before{content:"";}
.card[data-skin="dark"] .rev::before{content:"\201C";position:absolute;top:2px;right:16px;font-size:58px;line-height:1;font-family:Georgia,'Times New Roman',serif;color:color-mix(in srgb,var(--accent2) 38%,transparent);}
.rev .st{font-size:22px;letter-spacing:3px;color:var(--accent2);}
.rev .tx{position:relative;font-size:22px;color:var(--ink2);margin-top:8px;line-height:1.55;font-weight:500;}
.rev .by{font-size:22px;color:var(--mut2);margin-top:10px;font-weight:700;}

/* footer */
.cardFoot{text-align:center;padding:26px 22px 34px;color:var(--mut2);font-size:22px;line-height:1.7;border-top:1px solid var(--line);margin-top:22px;}
.card[data-skin="dark"] .cardFoot{margin:18px 26px 0;padding:24px 18px 32px;}
.cardFoot .lk{color:var(--lk);font-weight:800;text-decoration:none;}
.cardFoot .lk:hover{text-decoration:underline;text-underline-offset:3px;}

/* toast */
.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px);
  background:#161512;border:1px solid #c8ff00;color:#f2efe6;font-size:22px;font-weight:700;
  padding:13px 22px;border-radius:14px;opacity:0;pointer-events:none;transition:.3s var(--ease);z-index:9999;}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0);}