/* Zira Universe — Technology Tags + Modal
   Loaded on every chapter page alongside inc/reader-template.php's
   inline theme. Self-contained fallback values so it also renders
   correctly if ever included somewhere without that theme's :root vars.

   Two-layer color system:
     Layer 1 (primary)  = status  -> badge, glow, CTA card, buttons
     Layer 2 (secondary)= category -> small label under the title only
   Each status defines a full set of precomputed rgba() accent
   variables (no color-mix() — not reliably supported in every
   rendering engine this page runs in, even where it parses). */

.zu-tech-section{
  --tm-bg: var(--zu-bg, #05070d);
  --tm-bg2: var(--zu-bg2, #0a0e1a);
  --tm-panel: var(--zu-panel, rgba(255,255,255,.03));
  --tm-border: var(--zu-border, rgba(255,255,255,.09));
  --tm-cyan: var(--zu-cyan, #38c6e0);
  --tm-cyan2: var(--zu-cyan2, #7fe3f2);
  --tm-text: var(--zu-text, #e7ebf3);
  --tm-muted: var(--zu-muted, #8993a8);
  --tm-muted2: var(--zu-muted2, #626d82);

  --tm-emerald: #22d3ab;
  --tm-blue: #38c6e0;
  --tm-amber: #f0b64c;
  --tm-violet: #9b7bf5;

  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--tm-border);
}

.zu-tech-heading{ margin-bottom: 16px; }
.zu-tech-eyebrow{
  font-family:'Kanit',sans-serif; font-size:11.5px; font-weight:700;
  letter-spacing:2.5px; color: var(--tm-cyan); text-transform:uppercase;
  margin-bottom:4px;
}
.zu-tech-tagline{
  font-family:'Playfair Display',serif; font-style:italic;
  font-size:14.5px; color: var(--tm-muted);
}

.zu-tech-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.zu-tech-tag{
  --dot: var(--tm-blue); --dot-a10: rgba(56,198,224,.10); --dot-a35: rgba(56,198,224,.35);
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:9px 16px;
  border-radius:999px; border:1px solid var(--tm-border);
  background: var(--tm-panel); color: var(--tm-text);
  font-family:'Sarabun',sans-serif; font-size:13.5px; font-weight:500;
  cursor:pointer; text-align:left;
  transition: border-color .15s ease, background .15s ease, transform .1s ease, box-shadow .15s ease;
}
.zu-tech-tag:hover{ border-color: var(--dot); background: var(--dot-a10); box-shadow: 0 0 0 1px var(--dot-a35); }
.zu-tech-tag:active{ transform: scale(.97); }
.zu-tech-tag .dot{ width:8px; height:8px; border-radius:50%; flex:none; background: var(--dot); box-shadow: 0 0 8px var(--dot); }
.zu-tech-tag[data-status="tmic-capability"]{ --dot: #22d3ab; --dot-a10: rgba(34,211,171,.10); --dot-a35: rgba(34,211,171,.35); }
.zu-tech-tag[data-status="real-technology"]{ --dot: #38c6e0; --dot-a10: rgba(56,198,224,.10); --dot-a35: rgba(56,198,224,.35); }
.zu-tech-tag[data-status="emerging-technology"]{ --dot: #f0b64c; --dot-a10: rgba(240,182,76,.10); --dot-a35: rgba(240,182,76,.35); }
.zu-tech-tag[data-status="zira-future"]{ --dot: #9b7bf5; --dot-a10: rgba(155,123,245,.10); --dot-a35: rgba(155,123,245,.35); }

/* ---- Modal shell ---- */
.zu-tech-overlay{
  position:fixed; inset:0; background:rgba(2,3,7,.78);
  backdrop-filter: blur(3px);
  display:flex; align-items:flex-start; justify-content:center;
  padding: 6vh 16px 40px; overflow-y:auto;
  z-index:200; opacity:0; pointer-events:none;
  transition: opacity .2s ease;
}
.zu-tech-overlay.is-open{ opacity:1; pointer-events:auto; }

.zu-tech-modal{
  /* Default (real-technology-ish) accent set; overridden per data-status below */
  --acc: #38c6e0;
  --acc-soft: rgba(56,198,224,.13);
  --acc-a06: rgba(56,198,224,.06);
  --acc-a12: rgba(56,198,224,.12);
  --acc-a14: rgba(56,198,224,.14);
  --acc-a16: rgba(56,198,224,.16);
  --acc-a35: rgba(56,198,224,.35);
  --acc-a38: rgba(56,198,224,.38);
  --acc-a40: rgba(56,198,224,.40);
  --acc-a45: rgba(56,198,224,.45);
  --acc-a50: rgba(56,198,224,.50);
  --acc-a55: rgba(56,198,224,.55);

  width:100%; max-width:min(680px, 92vw);
  position:relative;
  background:
    radial-gradient(120% 90% at 15% -10%, var(--acc-a16), transparent 60%),
    linear-gradient(180deg, var(--tm-bg2), var(--tm-bg));
  border:1px solid var(--acc-a45);
  border-radius:20px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.02) inset, 0 0 60px -20px var(--acc-a55);
  padding: 34px 32px 30px;
  transform: translateY(10px) scale(.98);
  transition: transform .2s ease;
  overflow:hidden;
}
.zu-tech-overlay.is-open .zu-tech-modal{ transform: translateY(0) scale(1); }

.zu-tech-modal[data-status="tmic-capability"]{
  --acc:#22d3ab; --acc-soft:rgba(34,211,171,.13); --acc-a06:rgba(34,211,171,.06); --acc-a12:rgba(34,211,171,.12);
  --acc-a14:rgba(34,211,171,.14); --acc-a16:rgba(34,211,171,.16); --acc-a35:rgba(34,211,171,.35);
  --acc-a38:rgba(34,211,171,.38); --acc-a40:rgba(34,211,171,.40); --acc-a45:rgba(34,211,171,.45);
  --acc-a50:rgba(34,211,171,.50); --acc-a55:rgba(34,211,171,.55);
}
.zu-tech-modal[data-status="real-technology"]{
  --acc:#38c6e0; --acc-soft:rgba(56,198,224,.13); --acc-a06:rgba(56,198,224,.06); --acc-a12:rgba(56,198,224,.12);
  --acc-a14:rgba(56,198,224,.14); --acc-a16:rgba(56,198,224,.16); --acc-a35:rgba(56,198,224,.35);
  --acc-a38:rgba(56,198,224,.38); --acc-a40:rgba(56,198,224,.40); --acc-a45:rgba(56,198,224,.45);
  --acc-a50:rgba(56,198,224,.50); --acc-a55:rgba(56,198,224,.55);
}
.zu-tech-modal[data-status="emerging-technology"]{
  --acc:#f0b64c; --acc-soft:rgba(240,182,76,.13); --acc-a06:rgba(240,182,76,.06); --acc-a12:rgba(240,182,76,.12);
  --acc-a14:rgba(240,182,76,.14); --acc-a16:rgba(240,182,76,.16); --acc-a35:rgba(240,182,76,.35);
  --acc-a38:rgba(240,182,76,.38); --acc-a40:rgba(240,182,76,.40); --acc-a45:rgba(240,182,76,.45);
  --acc-a50:rgba(240,182,76,.50); --acc-a55:rgba(240,182,76,.55);
}
.zu-tech-modal[data-status="zira-future"]{
  --acc:#9b7bf5; --acc-soft:rgba(155,123,245,.14); --acc-a06:rgba(155,123,245,.06); --acc-a12:rgba(155,123,245,.12);
  --acc-a14:rgba(155,123,245,.14); --acc-a16:rgba(155,123,245,.16); --acc-a35:rgba(155,123,245,.35);
  --acc-a38:rgba(155,123,245,.38); --acc-a40:rgba(155,123,245,.40); --acc-a45:rgba(155,123,245,.45);
  --acc-a50:rgba(155,123,245,.50); --acc-a55:rgba(155,123,245,.55);
}

.zu-tech-modal-top{ display:flex; justify-content:flex-end; margin-bottom:2px; position:relative; z-index:1; }
.zu-tech-modal-close{
  flex:none; width:38px; height:38px; border-radius:10px;
  border:1px solid var(--tm-border); background: var(--tm-panel);
  color: var(--tm-text); cursor:pointer; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition: border-color .15s ease, color .15s ease;
}
.zu-tech-modal-close:hover{ border-color: var(--acc); color: var(--acc); }
.zu-tech-modal-close svg{ width:16px; height:16px; }

.zu-tech-modal-image{
  width:100%; max-height:220px; object-fit:cover;
  border-radius:12px; border:1px solid var(--tm-border);
  margin-bottom:20px; display:block; position:relative; z-index:1;
}

.zu-tech-modal-name{
  font-family:'Playfair Display',serif; font-weight:700;
  font-size:clamp(26px,3.6vw,34px); color:#fff; line-height:1.2; margin-bottom:6px;
  position:relative; z-index:1;
}

.zu-tech-modal-category{
  font-family:'Kanit',sans-serif; font-size:11.5px; font-weight:600;
  letter-spacing:1.5px; text-transform:uppercase; color: var(--tm-muted2);
  margin-bottom:16px; position:relative; z-index:1;
}

.zu-tech-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Kanit',sans-serif; font-size:11.5px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  padding:8px 16px; border-radius:999px; margin-bottom:22px;
  border:1px solid var(--acc-a55);
  background: var(--acc-soft); color: var(--acc);
  box-shadow: 0 0 18px -6px var(--acc);
  position:relative; z-index:1;
}
.zu-tech-badge .dot{ width:7px; height:7px; border-radius:50%; background: var(--acc); box-shadow: 0 0 6px var(--acc); flex:none; }
.zu-tech-badge .sub{ color: var(--tm-muted); font-weight:600; }

.zu-tech-modal-body{
  font-family:'Sarabun',sans-serif; font-size:15.5px; line-height:1.8; color: var(--tm-text);
  margin-bottom:22px; position:relative; z-index:1;
}

/* ---- Icon rows ---- */
.zu-tech-row{ display:flex; gap:14px; padding:18px 0; border-top:1px solid var(--tm-border); position:relative; z-index:1; }
.zu-tech-row .icon-sq{
  flex:none; width:42px; height:42px; border-radius:11px;
  border:1px solid var(--tm-border); background: var(--tm-panel);
  display:flex; align-items:center; justify-content:center; color: var(--tm-text);
}
.zu-tech-row .icon-sq svg{ width:20px; height:20px; }
.zu-tech-row .body{ min-width:0; flex:1; padding-top:2px; }
.zu-tech-row .label{
  font-family:'Kanit',sans-serif; font-size:11.5px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; color: var(--tm-muted);
  margin-bottom:6px;
}
.zu-tech-row .text{ font-family:'Sarabun',sans-serif; font-size:14.5px; line-height:1.7; color: var(--tm-text); }
.zu-tech-row .check-line{ display:flex; align-items:center; gap:9px; font-size:14.5px; color: var(--tm-text); }
.zu-tech-row .check-line svg{ width:18px; height:18px; color: var(--acc); flex:none; }
.zu-tech-row .cross-line{ display:flex; align-items:flex-start; gap:9px; font-size:14.5px; color: var(--tm-text); }
.zu-tech-row .cross-line svg{ width:18px; height:18px; color: var(--tm-muted2); flex:none; margin-top:1px; }

.zu-tech-related{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.zu-tech-related span{
  font-family:'Kanit',sans-serif; font-size:12px; font-weight:600; color: var(--acc);
  background: var(--acc-soft); border:1px solid var(--acc-a40);
  border-radius:999px; padding:5px 13px;
}

.zu-tech-link-list{ list-style:none; display:flex; flex-direction:column; gap:8px; margin-top:2px; }
.zu-tech-link-list a{
  font-family:'Sarabun',sans-serif; font-size:14.5px; color: var(--acc);
  text-decoration:none; display:inline-flex; align-items:center; gap:5px; font-weight:600;
}
.zu-tech-link-list a:hover{ text-decoration:underline; }

/* ---- TMIC capability card ---- */
.zu-tech-tmic-card{
  position:relative; z-index:1; overflow:hidden;
  margin-top:22px; padding:26px 26px 24px;
  border-radius:16px;
  border:1.5px solid var(--acc-a55);
  background:
    radial-gradient(90% 140% at 100% 0%, var(--acc-a14), transparent 65%),
    var(--acc-a06);
}
.zu-tech-tmic-eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Kanit',sans-serif; font-size:10.5px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color: var(--acc);
  padding:5px 12px; border-radius:999px;
  border:1px solid var(--acc-a50);
  background: var(--acc-soft);
  margin-bottom:14px;
}
.zu-tech-tmic-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background: var(--acc); box-shadow: 0 0 6px var(--acc); flex:none; }
.zu-tech-tmic-title{ font-family:'Playfair Display',serif; font-weight:800; font-size:22px; color:#fff; letter-spacing:.5px; margin-bottom:10px; }
.zu-tech-tmic-note{ font-size:14.5px; line-height:1.75; color: var(--tm-text); margin-bottom:16px; }
.zu-tech-tmic-services{ list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:22px; }
.zu-tech-tmic-services li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; line-height:1.55; color: var(--tm-text); }
.zu-tech-tmic-services svg{ width:18px; height:18px; color: var(--acc); flex:none; margin-top:2px; }

.zu-tech-cta{ display:flex; gap:10px; flex-wrap:wrap; position:relative; z-index:1; }
.zu-tech-cta a{
  flex:1; min-width:170px; min-height:48px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  border-radius:11px; padding:13px 18px; text-decoration:none;
  font-family:'Kanit',sans-serif; font-size:13.5px; font-weight:700;
  letter-spacing:.3px; text-align:center;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.zu-tech-cta a .arrow{ transition: transform .15s ease; }
.zu-tech-cta a:hover .arrow{ transform: translateX(3px); }
.zu-tech-cta a.primary{ background: var(--acc); color:#04211c; box-shadow: 0 8px 24px -8px var(--acc); }
.zu-tech-cta a.primary:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px -8px var(--acc); }
.zu-tech-cta a.secondary{ border:1.5px solid var(--acc-a55); color: var(--acc); background: transparent; }
.zu-tech-cta a.secondary:hover{ background: var(--acc-soft); }

/* ---- Emerging / Future status cards ---- */
.zu-tech-status-card{
  position:relative; z-index:1; margin-top:6px; padding:16px 18px;
  border-radius:12px; border:1px solid var(--acc-a38);
  background: var(--acc-soft);
}

.zu-tech-future-tag{
  font-family:'Kanit',sans-serif; font-size:11.5px; color: var(--tm-muted2);
  border-top:1px solid var(--tm-border); padding-top:16px; margin-top:24px;
  position:relative; z-index:1;
}

.zu-tech-modal-footer{
  margin-top:26px; padding-top:18px; border-top:1px solid var(--tm-border);
  text-align:center; position:relative; z-index:1;
  font-family:'Kanit',sans-serif; font-size:10.5px; letter-spacing:3px;
  text-transform:uppercase; color: var(--tm-muted2);
}

@media (min-width:900px){
  .zu-tech-modal{ max-width:760px; padding:40px 44px 36px; }
  .zu-tech-modal-name{ font-size:clamp(28px,2.6vw,38px); }
  .zu-tech-modal-body{ font-size:16.5px; }
  .zu-tech-row .text, .zu-tech-row .check-line, .zu-tech-row .cross-line{ font-size:15px; }
  .zu-tech-tmic-card{ padding:30px 34px 28px; }
}

@media (min-width:1280px){
  .zu-tech-modal{ max-width:820px; }
}

@media (max-width:480px){
  .zu-tech-modal{ padding:26px 20px 22px; border-radius:16px; }
  .zu-tech-overlay{ padding: 4vh 10px 24px; }
  .zu-tech-tmic-card{ padding:20px 18px 18px; }
}