/* main.css — loaded AFTER theme.css, layout.css, components.css via parallel <link> tags */
/* =========================================
   FIX MOBILE EXPERIENCE (NO ZOOM / FAST TAP)
   ========================================= */

/* 1. Eliminar Zoom en Inputs y Texto */
html, body {
    overflow-x: hidden;
}

body {
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation; /* Elimina delay en taps */
}

/* 2. user-select: content is selectable by default (accessibility).
   Only interactive elements block selection (defined in theme.css). */
input, textarea {
    user-select: text;
    -webkit-user-select: text;
}

/* Allow copy/select in long-form content (recipes, SOP, costing) */
.sop-shell, .sop-shell *,
.food-detail, .food-detail * {
    user-select: text;
    -webkit-user-select: text;
}

/* 3. GPU-accelerated interactions (only on active state, not permanently) */
.btn-arch, .tech-card, .nav-item {
    transform: translateZ(0);
    touch-action: manipulation;
}

/* 4. Fix específico iOS: Inputs hacen zoom si la letra es chica (only touch devices) */
@media (hover: none) and (pointer: coarse) {
  input, select, textarea {
      font-size: 16px !important; 
  }
}

/* ==========================================================================
   PREMIUM MODES UI (Barista / Negocio)
   ========================================================================== */
.mode-btn{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--txt);
  font-size: 0.72rem;
  letter-spacing: .8px;
  text-transform: uppercase;
  cursor:pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .12s ease, background .18s ease, border-color .18s ease;
}
.mode-btn i{ opacity:.9; }
.mode-btn span{ opacity:.9; }
.mode-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.06); }
.mode-btn.active{
  border-color: rgba(194,124,46,0.55);
  background: linear-gradient(135deg, rgba(194,124,46,0.22), rgba(255,255,255,0.04));
  box-shadow: 0 10px 30px rgba(194,124,46,0.10);
}
.mode-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}
.biz-metrics{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
}
.biz-metric{
  flex: 1 1 140px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.22);
}
.biz-metric .k{ font-size:0.72rem; color:var(--txt-dim); text-transform:uppercase; letter-spacing:1px;}
.biz-metric .v{ font-size:1.05rem; margin-top:6px; font-weight:800; }
.biz-metric .s{ font-size:0.78rem; color:var(--txt-dim); margin-top:4px; }

/* ==========================================================================
   FOUNDATIONS (Phase 2) – Topic Renderer
   ========================================================================== */
.data-table{
  display:grid;
  gap:10px;
}
.data-cell{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.18);
}
.data-label{
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--txt-dim);
}
.data-val{
  font-weight:800;
  color:var(--txt);
}

.fx-card{
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.18);
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  /* Prevent wide children (tables) from forcing page overflow */
  overflow:hidden;
}
.fx-h{
  font-weight:900;
  letter-spacing:0.04em;
  margin-bottom:8px;
}
.fx-text{
  color: var(--txt-dim);
  font-size:0.95rem;
  line-height:1.5;
}
.fx-ul{
  margin:10px 0 0 18px;
  color: var(--txt-dim);
}
.fx-ul li{ margin:6px 0; }


/* Foundations: collapsible sections (Store-ready readability + perf) */
.fx-details{
  border:0;
  padding:0;
  margin:0 0 12px 0;
}
.fx-details-sum{
  list-style:none;
  cursor:pointer;
  user-select:none;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.12);
  color: var(--txt);
  font-weight:900;
  letter-spacing:0.03em;
}
.fx-details-sum::-webkit-details-marker{ display:none; }
.fx-details[open] > .fx-details-sum{
  background: rgba(0,0,0,0.18);
}
.fx-details-body{
  margin-top:10px;
}

/* Micro-feedback when toggling “Hecho” */
.fx-pulse{
  animation: fxPulse 420ms ease-out;
}
@keyframes fxPulse{
  0%{ transform: scale(1); }
  35%{ transform: scale(1.05); }
  100%{ transform: scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .fx-pulse{ animation:none; }
}

/* Foundations: matrix tables (columns + rows) */
.fx-table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:6px;
}

.fx-table{
  /* On mobile prefer horizontal scroll over squeezing columns.
     This prevents the “descuadre” look where headers/rows wrap inconsistently. */
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.fx-table th,
.fx-table td{
  text-align:left;
  vertical-align:top;
  padding:10px 12px;
  /* Avoid aggressive breaking that makes columns look “desalineadas” */
  word-break: normal;
  overflow-wrap: anywhere;
}
.fx-table thead th{
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--txt-dim);
  opacity:0.95;
  position:sticky;
  top:0;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
}

/* Column sizing helpers for common 3–4 column “map” tables */
.fx-table th:nth-child(1),
.fx-table td:nth-child(1){ min-width: 120px; }
.fx-table th:nth-child(2),
.fx-table td:nth-child(2){ min-width: 190px; }
.fx-table th:nth-child(3),
.fx-table td:nth-child(3){ min-width: 190px; }
.fx-table th:nth-child(4),
.fx-table td:nth-child(4){ min-width: 190px; }
.fx-table tbody tr td{
  background: rgba(0,0,0,0.14);
  border:1px solid rgba(255,255,255,0.08);
}
.fx-table tbody tr td:first-child{
  border-top-left-radius:14px;
  border-bottom-left-radius:14px;
  font-weight:900;
  letter-spacing:0.02em;
}
.fx-table tbody tr td:last-child{
  border-top-right-radius:14px;
  border-bottom-right-radius:14px;
}

/* Foundations interactive controls (Latte Art Academy) */
.fx-check{ display:flex; align-items:flex-start; gap:10px; font-size:0.95rem; }
.fx-check input{ margin-top:3px; transform: scale(1.05); accent-color: var(--accent); }
.fx-check span{ color: var(--txt-dim); }

.fx-callout{
  display:flex;
  gap:12px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  box-sizing:border-box;
  width:100%;
}
.fx-callout-ic{ color: var(--accent); font-size:1.1rem; margin-top:2px; }
.fx-warn{ border-color: rgba(255, 165, 0, 0.35); background: rgba(255,165,0,0.07); }
.fx-pro{ border-color: rgba(194,124,46,0.35); background: rgba(194,124,46,0.08); }

.fx-sources{ display:grid; gap:10px; }
.fx-src{ padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.14); }
.fx-src-name{ font-weight:900; letter-spacing:0.02em; }
.fx-src-note{ color: var(--txt-dim); font-size:0.9rem; margin-top:4px; }
.fx-link{ display:inline-block; margin-top:6px; font-size:0.86rem; color: var(--accent); word-break: break-all; }


/* ---------- DRINKS | Quick size selector ---------- */
.drinks-size-quickbar{
  margin: 0 0 16px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015)),
    rgba(0,0,0,0.18);
  box-shadow: 0 16px 34px rgba(0,0,0,0.22);
}
.drinks-size-quickbar-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.drinks-size-quickbar-kicker{
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.16em;
  color:var(--accent);
  font-weight:900;
}
.drinks-size-quickbar-title{
  font-size:1rem;
  font-weight:950;
  letter-spacing:0.02em;
  margin-top:4px;
}
.drinks-size-quickbar-hint{
  font-size:0.82rem;
  color:var(--txt-dim);
}
.drinks-size-quickrail{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:4px;
}
.size-quick-badge{
  appearance:none;
  border:1px solid var(--border-dim);
  background:rgba(255,255,255,0.02);
  color:var(--txt-dim);
  border-radius:16px;
  min-width:112px;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  cursor:pointer;
  transition:all .18s ease;
  box-shadow:none;
}
.size-quick-badge:active{ transform:scale(.99); }
.size-quick-badge-k{
  font-size:0.88rem;
  font-weight:900;
  letter-spacing:0.03em;
}
.size-quick-badge-v{
  font-family:var(--font-data);
  font-size:0.82rem;
  opacity:.85;
}
@media (max-width: 640px){
  .drinks-size-quickbar{ padding:12px; }
  .size-quick-badge{ min-width:104px; }
}

/* ---------- Latte Art (Academy + Latte Lab) UI polish ---------- */
.latte-intro-head{ display:flex; justify-content:space-between; gap:14px; align-items:flex-start; flex-wrap:wrap; }
.latte-intro-main{ min-width:260px; flex:1; }
.latte-intro-side{ display:flex; flex-direction:column; gap:10px; align-items:flex-end; min-width:180px; }
.latte-actions{ display:flex; flex-direction:column; gap:10px; width:100%; align-items:stretch; }

/* Academy progress block should never look "stuck" to the right on mobile */
.latte-prog-bar{ max-width:260px; }

/* Tools Latte Lab topbar back button */
.tools-topbar{ display:flex; align-items:center; gap:10px; }
.tools-backbtn{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:12px; }
.tools-backbtn i{ opacity:0.9; }

/* Latte Lab topbar: true centered title + back button does not push/overlap */
.tools-topbar.tools-topbar-centered{ position:relative; justify-content:center; min-height:44px; }
.tools-topbar.tools-topbar-centered .tools-topbar-title{ flex:none; text-align:center; }
.tools-topbar.tools-topbar-centered .tools-backbtn{ position:absolute; left:0; }

/* IMPORTANT: .btn-arch defaults to width:100%; Latte Lab back button must NOT be full-width */
.tools-backbtn{ width:auto !important; display:inline-flex; }

/* Reserve space so the centered title never gets overlapped by the absolute back button */
.tools-topbar.tools-topbar-centered{ padding-left:86px; padding-right:18px; }

/* Never let long diagnostic text break layout */
.fx-callout .fx-text,
.fx-card .fx-text{ overflow-wrap:anywhere; word-break:break-word; line-height:1.5; }

@media (max-width: 600px){
  /* Academy header: stack, breathe, and keep progress full-width */
  .latte-intro-head{ flex-direction:column; align-items:stretch; }
  .latte-intro-main{ min-width:unset; }
  .latte-intro-side{ width:100%; align-items:stretch !important; min-width:unset; }
  .latte-intro-side > div{ text-align:left !important; }
  .latte-prog{ text-align:left !important; }
  .latte-prog-bar{ width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; }
  .latte-actions button{ width:100%; }
  /* Latte Lab action buttons should fill width on mobile */
  #ll-sym-run,
  [data-ll-diagnose],
  #ll-save{ width:100% !important; }
}

/* Tools topbar: keep title readable (no overlap with back button) */
.tools-topbar{ justify-content:flex-start; }
.tools-topbar-title{ flex:1; text-align:center; font-weight:900; letter-spacing:0.04em; }

@media (max-width: 420px){
  .tools-backbtn-txt{ display:none; }
  .tools-backbtn{ padding:8px 10px; }
}

.fx-src-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
.fx-src-url{ color: var(--txt-dim); font-size:0.78rem; margin-top:6px; word-break: break-all; opacity:0.9; }

/* Dashboard gadget: Coffee Compass (filter) */
/* Legacy compass styles kept (other screens may reference them) */
.compass-wrap{ margin-top:10px; }
.compass-legend{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.compass-ui{ display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; }
.compass-readout{ flex:1; min-width:220px; }
.cr-title{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--txt-dim); }
.cr-state{ margin-top:6px; font-weight:900; letter-spacing:0.04em; }
.cr-actions{ margin-top:10px; display:grid; gap:6px; color:var(--txt-dim); font-size:0.92rem; line-height:1.45; }
.cr-li{ padding-left:2px; }
.cr-foot{ margin-top:10px; color:var(--txt-dim); font-size:0.78rem; line-height:1.35; }

/* Dashboard gadget: Coffee Compass (wheel replica) */
.cc-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.cc-kicker{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.18em; color:var(--accent); }
.cc-title{ font-size:1.15rem; font-weight:950; letter-spacing:0.04em; margin-top:4px; }
.cc-sub{ font-size:0.88rem; color:var(--txt-dim); margin-top:4px; line-height:1.35; }
.cc-ico{ color:rgba(255,255,255,0.55); font-size:1.1rem; margin-top:2px; }

.cc-grid{ display:grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap:14px; align-items:start; max-width:100%; }
@media (max-width: 720px){
  .cc-grid{ grid-template-columns: 1fr; }
}

.cc-wheel-col{ position:relative; }
.cc-axis{ position:absolute; inset:0; pointer-events:none; }
.cc-axis-top{ position:absolute; top:-2px; left:50%; transform:translateX(-50%); font-size:0.72rem; letter-spacing:0.14em; color:rgba(255,255,255,0.55); }
.cc-axis-bot{ position:absolute; bottom:-2px; left:50%; transform:translateX(-50%); font-size:0.72rem; letter-spacing:0.14em; color:rgba(255,255,255,0.55); }
.cc-axis-left{ position:absolute; left:-6px; top:50%; transform:translateY(-50%) rotate(-90deg); transform-origin:left center; font-size:0.68rem; letter-spacing:0.12em; color:rgba(255,255,255,0.5); }
.cc-axis-right{ position:absolute; right:-6px; top:50%; transform:translateY(-50%) rotate(90deg); transform-origin:right center; font-size:0.68rem; letter-spacing:0.12em; color:rgba(255,255,255,0.5); }

.cc-wheel{
  width:320px;
  height:320px;
  max-width:100%;
  margin:0 auto;
  position:relative;
  border-radius:999px;
  touch-action:none;
  user-select:none;
  perspective: 900px;
  transform-style: preserve-3d;
  will-change: transform;
  /* subtle tilt controlled by JS */
  transform: rotateX(var(--cc-tilt-x, 0deg)) rotateY(var(--cc-tilt-y, 0deg));
}

/* Outer bezel + depth */
.cc-wheel::before{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:999px;
  background:
    radial-gradient(120px 120px at 30% 25%, rgba(255,255,255,0.12), rgba(255,255,255,0) 55%),
    radial-gradient(180px 180px at 65% 75%, rgba(0,0,0,0.55), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.26));
  filter: blur(0.2px);
  opacity: 0.95;
  pointer-events:none;
}

.cc-wheel::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:999px;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.10),
    inset 0 -18px 28px rgba(0,0,0,0.35);
  pointer-events:none;
}

.cc-wheel-inner{
  position:absolute;
  inset:0;
  transform:rotate(0deg) translateZ(14px);
  will-change: transform;
  transform-style: preserve-3d;
}

/* Gloss sweep */
.cc-svg{ position:absolute; inset:0; width:100%; height:100%; border-radius:999px; }
.cc-wheel .cc-gloss{
  position:absolute;
  inset:10px;
  border-radius:999px;
  background: linear-gradient(120deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.18) 35%, rgba(255,255,255,0.0) 70%);
  opacity: 0.35;
  mix-blend-mode: screen;
  transform: translateZ(18px) rotate(8deg);
  animation: ccGloss 6.5s ease-in-out infinite;
  pointer-events:none;
}

@keyframes ccGloss{
  0%{ transform: translateZ(18px) rotate(8deg) translateX(-10px); opacity:0.26; }
  50%{ transform: translateZ(18px) rotate(10deg) translateX(10px); opacity:0.42; }
  100%{ transform: translateZ(18px) rotate(8deg) translateX(-10px); opacity:0.26; }
}
@keyframes blink{
  0%,100%{ opacity:1; }
  50%{ opacity:0.3; }
}
.cc-ring{ position:absolute; inset:0; display:block; }
.cc-ring-note{ position:absolute; left:50%; top:50%; transform-origin:center; translate:-50% -50%;
  /* Default: small tick (clean, no clutter) */
  width:10px; height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.86);
  font-size:0.62rem;
  padding:0;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.cc-ring-note.is-major{
  width:auto; height:auto;
  padding:6px 8px;
  background:rgba(0,0,0,0.26);
  border:1px solid rgba(255,255,255,0.10);
  max-width:120px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cc-ring-note:hover{ background:rgba(255,255,255,0.10); }
.cc-ring-note.is-major:hover{ background:rgba(0,0,0,0.40); }
.cc-ring-note.is-active{ border-color: rgba(194,124,46,0.70); box-shadow: 0 0 0 2px rgba(194,124,46,0.18); }

.cc-indicator{ position:absolute; left:50%; top:-8px; transform:translateX(-50%); width:0; height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:14px solid rgba(194,124,46,0.95);
  filter: drop-shadow(0 8px 10px rgba(0,0,0,0.55));
}
.cc-rotate-hint{ position:absolute; right:10px; bottom:10px; font-size:0.72rem; color:rgba(255,255,255,0.55); background:rgba(0,0,0,0.28); border:1px solid rgba(255,255,255,0.08); padding:6px 10px; border-radius:999px; }

.cc-panel{ min-width:0; }
.cc-search{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; border:1px solid rgba(255,255,255,0.08); background:rgba(0,0,0,0.16); }
.cc-search i{ color:rgba(255,255,255,0.55); }
.cc-search input{ flex:1; background:transparent; border:none; outline:none; color:var(--txt-main); font-size:0.95rem; }
.cc-section{ margin-top:12px; padding:12px; border-radius:16px; border:1px solid rgba(255,255,255,0.08); background:rgba(0,0,0,0.12); }
.cc-label{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.14em; color:rgba(255,255,255,0.55); }
.cc-picked{ margin-top:6px; font-size:1.05rem; font-weight:950; letter-spacing:0.02em; }
.cc-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.cc-pill{ display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,0.10); background:rgba(0,0,0,0.18); color:rgba(255,255,255,0.78); font-size:0.78rem; }

.cc-actions{ display:grid; gap:8px; margin-top:10px; }
.cc-actions-title{ font-weight:950; letter-spacing:0.02em; }
.cc-action{ 
  color:var(--txt-dim);
  font-size:0.92rem;
  line-height:1.4;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(0,0,0,0.16);
 }

.cc-notes{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.cc-note{ border:1px solid rgba(255,255,255,0.10); background:rgba(0,0,0,0.18); color:rgba(255,255,255,0.80); border-radius:999px; padding:8px 10px; font-size:0.82rem; cursor:pointer; }
.cc-note:hover{ background:rgba(0,0,0,0.32); }
.cc-note.is-active{ border-color: rgba(194,124,46,0.60); box-shadow: 0 0 0 2px rgba(194,124,46,0.16); }

.cc-card{ overflow:hidden; }

.cc-legend-body{ margin-top:8px; display:grid; gap:8px; }
.cc-legend-row{ display:flex; justify-content:space-between; gap:10px; }
.cc-legend-k{ color:rgba(255,255,255,0.65); font-weight:850; }
.cc-legend-v{ color:rgba(255,255,255,0.78); }
.cc-legend-hint{ color:rgba(255,255,255,0.55); font-size:0.86rem; line-height:1.3; }

.cc-sca-wrap{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(150px, 176px); gap:12px; align-items:center; margin-top:10px; }
.cc-sca-chart{
  position:relative;
  min-height:180px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0/20% 100%,
    linear-gradient(0deg, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0/100% 20%,
    linear-gradient(180deg, rgba(120,170,255,0.10), rgba(255,120,95,0.08));
  overflow:hidden;
}
.cc-sca-chart::before,
.cc-sca-chart::after{
  content:'';
  position:absolute;
  pointer-events:none;
  background:rgba(255,255,255,0.10);
}
.cc-sca-chart::before{ left:50%; top:0; bottom:0; width:1px; }
.cc-sca-chart::after{ top:50%; left:0; right:0; height:1px; }
.cc-sca-window{
  position:absolute;
  left:40%;
  width:40%;
  top:35%;
  height:29%;
  border-radius:14px;
  border:1px solid rgba(194,124,46,0.50);
  background:rgba(194,124,46,0.12);
  box-shadow:0 0 0 1px rgba(194,124,46,0.08) inset;
}
.cc-sca-dot{
  position:absolute;
  width:16px;
  height:16px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,0.92);
  background:var(--accent);
  box-shadow:0 8px 20px rgba(0,0,0,0.30);
  transform:translate(-50%, -50%);
  transition:left .2s ease, top .2s ease;
}
.cc-sca-axis{
  position:absolute;
  font-size:0.62rem;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.58);
  pointer-events:none;
  white-space:nowrap;
}
.cc-sca-axis-top{
  top:10px;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
}
.cc-sca-axis-bottom{
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
}
.cc-sca-axis-left{
  left:8px;
  top:50%;
  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  text-orientation:mixed;
  letter-spacing:0.08em;
  text-align:center;
}
.cc-sca-axis-right{
  right:8px;
  top:50%;
  transform:translateY(-50%);
  writing-mode:vertical-rl;
  text-orientation:mixed;
  letter-spacing:0.08em;
  text-align:center;
}
.cc-sca-readout{ display:grid; gap:8px; }
.cc-sca-metric{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(0,0,0,0.16);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.cc-sca-metric span{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.12em; color:rgba(255,255,255,0.55); }
.cc-sca-metric b{ font-size:0.96rem; letter-spacing:0.02em; }
@media (max-width: 720px){
  .cc-sca-wrap{ grid-template-columns:1fr; }
}


/* ==============================
   FOUNDATIONS: MAP (How to read a bag)
   ============================== */
.fx-map{ display:grid; gap:10px; }
.fx-map-item{
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  border-radius:14px;
  padding:12px;
}
.fx-map-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.fx-map-n{
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px;
  background: rgba(194,124,46,0.18);
  border:1px solid rgba(194,124,46,0.35);
  color: var(--accent);
  font-weight:900;
  font-family: var(--font-data);
}
.fx-map-label{ font-weight:900; letter-spacing:0.03em; }
.fx-map-row{ display:flex; gap:10px; margin-top:6px; }
.fx-map-k{
  min-width:88px;
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color: var(--txt-dim);
}
.fx-map-v{
  color: var(--txt-dim);
  font-size:0.92rem;
  line-height:1.45;
}

#viewport{ padding-bottom: calc(90px + env(safe-area-inset-bottom)); }


.cc-rule{ font-size:0.88rem; color:var(--txt); line-height:1.35; padding:10px 12px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:12px; }

/* Prevent horizontal drift in scroll containers (iOS rubber-band) */
#viewport, #app-shell { overflow-x: hidden; }
#viewport .view { max-width: 100%; overflow-x: hidden; }

/* ==========================================================================
   PRODUCTION POLISH v2.0
   ========================================================================== */

/* Smoother scrollbars (Webkit) */
#viewport::-webkit-scrollbar { width: 4px; }
#viewport::-webkit-scrollbar-track { background: transparent; }
#viewport::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
}
#viewport::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }

/* Skeleton loading shimmer (reusable) */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius, 12px);
}

/* Smooth page transitions */
.fade-in {
  animation: fadeSlideIn 0.28s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Print: hide nav, show content */
@media print {
  #top-bar, #bottom-dock, #toast-host, .ux-modal-overlay { display: none !important; }
  #viewport { padding: 0 !important; overflow: visible !important; }
  body { background: #fff !important; color: #000 !important; }
}