/**
 * Resonance Atlas Styles
 * Interactive Flower-of-Life geometry tool
 */

/* Design Tokens + Global Polish */
:root{
  /* Palette (adjust once, everywhere updates) */
  --bg-0:#060c16;           /* page */
  --bg-1:#0b1029;           /* panels / toolbar */
  --bg-2:rgba(255,255,255,.05);
  --ink-0:#e5e7eb;          /* primary text */
  --ink-1:#9ca3af;          /* secondary text */
  --ink-2:#a0c0ff;          /* accent text */

  --line-0:rgba(255,255,255,.10);
  --line-1:rgba(255,255,255,.06);

  --accent:#64ffda;         /* teal accent */
  --brand-0:#4169e1;        /* primary button start */
  --brand-1:#6496ff;        /* primary button end */

  --radius-0:8px;
  --radius-1:12px;

  --shadow-0:0 1px 2px rgba(0,0,0,.25);
  --shadow-1:0 4px 16px rgba(0,0,0,.30);

  --gap-0:.5rem;
  --gap-1:1rem;
  --gap-2:1.5rem;

  --focus:#a5b4fc;          /* focus ring */
  --menu:#0b1029;           /* dropdown bg */

  --panel-w:min(420px,28vw);
}

html,body{background:var(--bg-0); color:var(--ink-0);}
[hidden]{display:none !important;}
::selection{background:rgba(100,150,255,.25);}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

/* Main Layout */
.ra-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.ra-title {
    font-size: 2rem;
    color: #f0f0f0;
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
}

.ra-sub {
    color: #a0c0ff;
    margin: 0.5rem 0 0 0;
    font-size: 1rem;
}

.ra-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Grid Layout */
/* Docking Logic (Right ↔ Bottom) */
/* Default: viewer left, panel right */
.ra-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--panel-w, 420px);
  grid-template-areas:"scene panel";
  gap:var(--gap-2, 1.5rem);
  min-height:600px;
}
.ra-scene{ grid-area:scene; }
.ra-panel{ grid-area:panel; }

/* Bottom dock (what your JS calls 'ra-wide') */
body.ra-wide .ra-grid{
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:
    "scene"
    "panel";
}

/* When docked bottom, let the panel breathe */
body.ra-wide .ra-panel{
  max-height:none;
  overflow:visible;
}

/* Scene Area */
.ra-scene{
  position:relative;
  background:linear-gradient(135deg, rgba(6,12,22,.92), rgba(16,24,40,.92));
  border:1px solid var(--line-0); border-radius:var(--radius-1); overflow:hidden;
}

/* Make the viewer "front & center" (height + spacing) */
/* Give the canvas a taller, responsive floor */
#raCanvas{
  width:100%;
  height:100%;
  display:block;
  min-height:60vh;   /* was 500px; this feels properly hero-sized */
}

/* Reduce extra margin between toolbar → viewer and viewer → panel */
.ra-viewer-section{ margin-top:.75rem; margin-bottom:2rem; }

/* Toolbar & Menu Skin */
.ra-toolbar{
  background:var(--bg-1);
  border:1px solid rgba(100,255,218,.2);
  border-radius:var(--radius-1);
  box-shadow:var(--shadow-1);
}

/* Inline groups */
.ra-toolbar .tg{display:inline-flex; gap:var(--gap-0); align-items:center}

/* Dropdown panel */
.ra-toolbar details>summary{list-style:none;}
.ra-toolbar details>summary::-webkit-details-marker{display:none;}
.ra-toolbar .menu{
  background:var(--menu);
  border:1px solid var(--line-0);
  border-radius:var(--radius-0);
  box-shadow:var(--shadow-1);
}
.ra-toolbar .menu .button{width:100%; text-align:left;}

/* Scene/Overlays Readability */
.ra-hint{
  position:absolute; bottom:12px; left:12px;
  color:rgba(255,255,255,.75); font-size:.9rem;
  background:rgba(0,0,0,.45); padding:.45rem .8rem; border-radius:6px; backdrop-filter:blur(4px);
}

.ra-overlay,.ra-mode,.ra-hud{
  position:absolute; left:12px; top:12px; color:#cfe9ff;
  background:rgba(0,0,0,.35); border:1px solid var(--line-1);
  border-radius:6px; padding:.35rem .6rem; font-size:.85rem;
}
#raLegend{right:12px; left:auto;}

/* Side Panel */
/* Panel scroll tidy */
.ra-panel{
  display:flex; flex-direction:column; gap:var(--gap-1);
  max-height:82vh; overflow:auto;
  scrollbar-color: rgba(100,150,255,.3) rgba(255,255,255,.05); /* Firefox */
}

/* Cards */
/* Cards = Real Accordion */
.ra-card{
  background:rgba(0,0,0,.40);
  border:1px solid var(--line-0);
  border-radius:var(--radius-0);
  overflow:hidden;
  box-shadow:var(--shadow-0);
}

/* Head/Title */
.ra-card-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem; background:var(--bg-2); border-bottom:1px solid var(--line-0);
}
.ra-card-head h3{margin:0; font-size:1.05rem; color:var(--ink-0);}

/* Body */
.ra-card-body{padding:1rem;}

/* Collapsed state */
.ra-card.collapsed .ra-card-body{display:none;}
.ra-card-toggle{
  background:none; border:none; color:var(--ink-1);
  font-size:1.1rem; cursor:pointer; padding:.25rem .4rem; border-radius:6px;
}
.ra-card-toggle:hover{background:rgba(255,255,255,.08);}
.ra-card-toggle:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}

/* Data Display */
/* Data Views (KV/List) Tighten Up */
.ra-kv{display:grid; gap:.5rem; font-size:.9rem;}
.ra-kv-item{display:flex; justify-content:space-between; padding:.25rem 0; border-bottom:1px solid var(--line-1);}
.ra-kv-item:last-child{border-bottom:none;}
.ra-kv-key{color:var(--ink-2); font-weight:500;}
.ra-kv-value{color:var(--ink-0); font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;}

.ra-list{list-style:none; padding:0; margin:0; font-size:.9rem;}
.ra-list li{padding:.5rem 0; border-bottom:1px solid var(--line-1); color:var(--ink-0);}
.ra-list li:last-child{border-bottom:none;}


/* Buttons */
/* Buttons: Consistent Variants, Better Focus/Active */
.button{
  --btn-bg:rgba(255,255,255,.10);
  --btn-bd:rgba(255,255,255,.20);
  padding:.5rem 1rem; background:var(--btn-bg); color:var(--ink-0);
  border:1px solid var(--btn-bd); border-radius:6px; cursor:pointer;
  font-size:.9rem; text-decoration:none; display:inline-block;
  transition:transform .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease;
  will-change:transform;
}
.button:hover{background:rgba(255,255,255,.15); transform:translateY(-1px);}
.button:active{transform:translateY(0);}
.button:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}

/* Primary */
.button.primary{
  background:linear-gradient(135deg,var(--brand-0),var(--brand-1));
  color:#fff; border-color:rgba(100,150,255,.4);
}
.button.primary:hover{
  filter:saturate(1.05) brightness(1.03);
}

/* Ghost & Export */
.button.ghost{
  --btn-bg:transparent; --btn-bd:rgba(255,255,255,.18);
  background:transparent;
}
.button.export{
  border-color:var(--accent); color:var(--accent);
}

/* Toggle-y buttons (use .active class) */
.button.active{box-shadow:inset 0 0 0 1px var(--accent); color:var(--accent);}

/* Special Elements */
.ra-proof-links {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ra-fallback {
    margin-top: 2rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.ra-fallback summary {
    color: #a0c0ff;
    cursor: pointer;
    font-weight: 500;
}

.ra-fallback pre {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    font-size: 0.8rem;
    color: #9ca3af;
    overflow-x: auto;
}

/* Canvas Containers */
#cp1canvas {
    border-radius: 4px;
    cursor: crosshair;
    /* Ensure pointer events behave consistently on touch devices */
    touch-action: none;
    user-select: none;
}

#raRot {
    width: 100% !important;
    height: 200px !important;
}

/* Responsive Design */
/* Keep it stacked on smaller screens, even without ra-wide */
@media (max-width: 1200px){
  .ra-grid{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "scene"
      "panel";
  }
  .ra-panel{ max-height:none; overflow:visible; }
}

@media (max-width: 768px) {
    .ra-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .ra-controls {
        justify-content: center;
    }
    
    .ra-title {
        font-size: 1.5rem;
    }
    
    .button {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
    
    #raCanvas {
        min-height: 300px;
    }
}

/* Animations */
@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.ra-pulse {
    animation: pulse 2s infinite;
}

@keyframes glow {
    0%, 100% { 
        box-shadow: 0 0 5px rgba(100, 150, 255, 0.3);
    }
    50% { 
        box-shadow: 0 0 20px rgba(100, 150, 255, 0.6);
    }
}

.ra-glow {
    animation: glow 3s infinite;
}

/* Help Panel */
/* Dropdown/Help/Debug Readability */
#raHelp{
  backdrop-filter:blur(8px);
  box-shadow:0 8px 32px rgba(0,0,0,.5);
  border:1px solid var(--line-0);
}
#raHelp ul{font-size:.95rem;}
#raHelp li{margin-bottom:.5rem; color:#c7d2fe;}

#raDebug{
  background:rgba(0,0,0,.65);
  border:1px solid var(--line-1);
  border-radius:8px;
  color:#a0b3c8; font-size:12px; line-height:1.2;
}

/* Loading States */
.ra-loading {
    opacity: 0.5;
    pointer-events: none;
}

.ra-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid #6496ff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Custom Scrollbar */
.ra-panel::-webkit-scrollbar {
    width: 8px;
}

.ra-panel::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.ra-panel::-webkit-scrollbar-thumb {
    background: rgba(100, 150, 255, 0.3);
    border-radius: 4px;
}

/* Scrollbar (keep existing, add hover polish) */
.ra-panel::-webkit-scrollbar-thumb:hover{background:rgba(100,150,255,.55);}

/* Small Utility Helpers */
.container{max-width:1400px; margin-inline:auto; padding:1.25rem 1rem;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.ra-proof-links{margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line-0);}