/* ==========================================================================
   Lore.land — Refactored CSS (mobile-first, tokenized, low specificity)
   - Uses @layer to keep overrides sane
   - Reduces selector weight via :where()
   - Improves a11y focus, spacing, and responsiveness
   ========================================================================== */

/* === Theme tokens ======================================================= */
:root{
  /* Neutrals */
  --bg-deep:#1a0f0a; --bg-warm:#2b1a12;
  --fg-hi:#f2e7cf; --fg:#e6d4b8; --fg-muted:#d7c6a9;

  /* Accents */
  --gold:#d6a34e; --copper:#b87749; --edge:rgba(214,163,78,.55);

  /* Jewel tones */
  --plum:#6d3b52; --rose:#b77b7b; --teal:#2f6f75; --aqua:#87c0c9; --moss:#7e8a4f; --bone:#d7c7a8;

  /* Surfaces */
  --surface-0:rgba(0,0,0,0);
  --surface-1:rgba(0,0,0,.35);
  --surface-2:rgba(0,0,0,.55);
  --surface-3:rgba(0,0,0,.72);

  /* Typography */
  --ff-serif: Georgia,'Times New Roman',serif;
  --ff-mono: ui-monospace, Menlo, Consolas, monospace;

  /* Radii / shadows / motion */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px;
  --shadow-1:0 10px 24px rgba(0,0,0,.35);
  --shadow-2:0 18px 40px rgba(0,0,0,.45);
  --inner-glow:inset 0 0 0 1px rgba(255,255,255,.05), inset 0 14px 28px rgba(255,255,255,.04);
  --dur-1:120ms; --dur-2:220ms; --dur-3:400ms; --ease:cubic-bezier(.2,.8,.2,1);

  /* Spacing scale */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;

  /* Component tokens */
  --ring: 2px solid color-mix(in oklab, var(--accent) 92%, #000 8%);
  --ring-offset: 2px;
  --btn-min: 44px;

  /* Realm defaults (lore.land) */
  --accent:var(--gold);
  --accent-2:var(--copper);
}

/* Realm themes */
html[data-realm="boon.land"]{ --accent:#8ea648; --accent-2:#d8d0b6; }
html[data-realm="bane.land"]{ --accent:#c66a4b; --accent-2:#6d3b52; }
html[data-realm="bone.land"]{ --accent:#d7c7a8; --accent-2:#6f6a62; }
html[data-realm="bonk.land"]{ --accent:#d7788b; --accent-2:#7fd3da; }
html[data-realm="honk.land"]{ --accent:#7fd3da; --accent-2:#d6a34e; }

/* === Base layer ========================================================= */
@layer base{
  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; color-scheme:dark; }
  body{
    margin:0; color:var(--fg); font-family:var(--ff-serif);
    min-height:100vh; display:flex; flex-direction:column; overflow:auto;
    background:
      radial-gradient(1200px 700px at 80% -10%, rgba(255,255,255,.04), transparent 55%),
      radial-gradient(1000px 600px at -20% 110%, rgba(255,255,255,.04), transparent 55%),
      linear-gradient(to bottom, var(--bg-warm), var(--bg-deep));
    text-shadow:0 0 2px rgba(255,165,0,.45);
  }
  body::before{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
    background:
      radial-gradient(120% 100% at 50% 0%, rgba(0,0,0,.25), transparent 60%),
      repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 2px, rgba(255,255,255,0) 2px 4px);
    mix-blend-mode:soft-light;
  }
  a{ color:var(--accent); text-underline-offset:2px; }
  a:hover{ text-decoration:underline; }
  h1,h2,h3{ color:var(--accent); margin-block-start:0; }
  h2,h3{ font-size:clamp(1.1rem,3.6vw,1.6rem); }

  .sr-only{
    position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  /* Header / Footer */
  header, footer{ flex-shrink:0; background:rgba(0,0,0,.75); border-color:var(--accent-2); }
  header{ border-bottom:2px solid; padding:18px; text-align:center; }
  header h1{ margin:0; font-size:clamp(1.9rem,4.2vw,2.8rem); color:var(--accent); animation:flicker 1.8s ease-in-out infinite alternate; }
  header p{ margin:.35rem 0 0; color:var(--fg-muted); }

  nav{
    display:flex; justify-content:center; gap:10px; padding:10px 0;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  nav::-webkit-scrollbar{ display:none; }
  nav a{ text-decoration:none; font-weight:700; white-space:nowrap; padding-inline:4px; }
  nav a[aria-current="page"]{ text-decoration:underline; text-underline-offset:4px; }

  footer{
    border-top:2px solid; padding:8px 12px; text-align:center;
    position:sticky; bottom:0; background:rgba(0,0,0,.88);
    padding-bottom:calc(8px + env(safe-area-inset-bottom)); backdrop-filter:saturate(120%) blur(6px);
  }
  .footer-row{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:nowrap; font-size:.95rem; }

  kbd{
    font-family:var(--ff-mono); font-size:.85em; padding:2px 6px; border-radius:6px;
    border:1px solid var(--accent-2); background:rgba(255,255,255,.06);
  }
}

/* === Components layer =================================================== */
@layer components{
  /* Layout */
  main.workbench-container{
    display:flex; flex-direction:column; gap:14px; padding:14px; flex-grow:1; position:relative;
  }
  .tool-shelf,.workbench{ padding:4px; }
  .workbench{ order:-1; }
  .tool-shelf{
    display:flex; flex-direction:row; gap:12px; padding:8px 12px;
    overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; position:relative;
  }
  .tool-shelf > section{ flex:0 0 85%; scroll-snap-align:start; }

  /* Panels */
  section{
    background:var(--surface-2); border:1px solid var(--accent-2); border-radius:var(--r-xs);
    padding:12px; margin:12px 0; box-shadow:var(--shadow-2); transition:border-color .2s, box-shadow .2s;
  }
  section:focus, section:focus-within{ border-color:var(--accent); box-shadow:0 0 10px var(--accent); }

  .card{
    background:linear-gradient(to bottom, rgba(255,255,255,.04), rgba(0,0,0,.28)), var(--surface-2);
    border:1px solid var(--accent-2); border-radius:var(--r-sm); padding:12px; margin:10px 0;
    box-shadow:var(--shadow-2), var(--inner-glow); position:relative; z-index:1;
  }
  .card::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:
      radial-gradient(300px 140px at 20% 0%, rgba(255,255,255,.06), transparent 60%),
      radial-gradient(300px 140px at 80% 100%, rgba(255,255,255,.03), transparent 60%);
    mix-blend-mode:screen;
  }

  .grid{ display:grid; gap:10px; }
  .g-2{ grid-template-columns:repeat(2,1fr); }

  .controls-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
  .cluster{ display:flex; flex-wrap:wrap; gap:8px; }

  /* Buttons */
  .btn{
    --b: color-mix(in oklab, var(--accent) 86%, black 14%);
    background: conic-gradient(from 210deg at 30% 20%, rgba(255,255,255,.25), transparent 30%), var(--b);
    color:#1b110c; border:1px solid color-mix(in oklab, var(--accent) 70%, black 30%);
    border-radius:var(--r-xs); padding:8px 12px; font-weight:700; cursor:pointer;
    min-height:var(--btn-min); min-width:44px; touch-action:manipulation; font-size:1rem;
    box-shadow:0 6px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
    transition:transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), filter var(--dur-1) var(--ease);
  }
  .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.3); }
  .btn:active{ transform:translateY(0); box-shadow:0 4px 10px rgba(0,0,0,.35), inset 0 3px 6px rgba(255,255,255,.25); }
  .btn:disabled{ opacity:.6; cursor:not-allowed; }
  .btn.small{ padding:6px 12px; border-radius:10px; font-size:.9rem; min-height:36px; }

  /* Inputs */
  textarea, input[type="text"], input[type="number"], select{
    width:100%; background:rgba(255,255,255,.08); border:1px solid var(--accent-2); color:var(--fg);
    border-radius:var(--r-xs); padding:10px; font-family:var(--ff-serif); font-size:16px;
  }
  textarea{ min-height:8lh; resize:vertical; }
  label{ display:inline-flex; align-items:center; gap:6px; }

  /* Pills & listbox options */
  .pill{
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--accent-2); padding:3px 8px; border-radius:999px; margin:2px;
    font-family:var(--ff-mono);
    background:linear-gradient(to bottom, rgba(255,255,255,.08), rgba(0,0,0,.2)); box-shadow:var(--inner-glow);
    min-height:var(--btn-min); min-width:44px; font-size:1rem; touch-action:manipulation;
  }
  ul{ list-style:none; padding:0; margin:0; }
  [role="option"]{ cursor:pointer; }
  ul li{ padding:8px; border-bottom:1px dashed rgba(212,167,106,.35); border-radius:8px; }
  [aria-selected="true"]{ background:rgba(255,215,0,.15); }
  .pill[aria-selected="true"]{
    background:linear-gradient(to bottom, color-mix(in oklab, var(--accent) 88%, white 12%), var(--accent));
    color:#1c110b; border-color:color-mix(in oklab, var(--accent) 70%, black 30%);
  }

  /* Focus ring */
  :where(:focus-visible, [role="option"]:focus, [role="button"]:focus, section:focus){
    outline:var(--ring); outline-offset:var(--ring-offset);
    border-radius:8px;
  }

  /* HUD */
  #action-bar{
    position:fixed; left:0; right:0; bottom:calc(0px + env(safe-area-inset-bottom));
    background:rgba(0,0,0,.75); border:1px solid var(--accent-2); border-radius:0;
    padding:10px 12px; font-family:var(--ff-mono); font-size:.9rem;
    opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:100;
    transform:none;
  }
  #action-bar.visible{ opacity:1; }

  /* Micro-interactions */
  @keyframes savedPulse{ 0%{box-shadow:0 0 0 rgba(214,163,78,0)} 30%{box-shadow:0 0 32px rgba(214,163,78,.45)} 100%{box-shadow:0 0 0 rgba(214,163,78,0)} }
  .saved-new{ animation:savedPulse 1200ms ease-out 1; }
  .new-item-flash{ animation:savedPulse 1200ms ease-out 1; }
  .btn[data-state="copied"], .btn[data-state="success"]{ filter:saturate(125%); transform:translateY(-1px); }

  /* Moodboard & capture */
  #image-grid{ display:grid; gap:10px; }
  .prompt-overlay{
    background:rgba(0,0,0,.55); border:1px solid var(--accent-2);
    border-radius:var(--r-sm); padding:10px; color:var(--fg-hi); white-space:pre-wrap;
  }

  body.capture-mode{ background:black; overflow:hidden; }
  body.capture-mode header, body.capture-mode footer, body.capture-mode nav,
  body.capture-mode .tool-shelf:not(#moodboard), body.capture-mode .workbench:not(#moodboard){ display:none; }
  body.capture-mode #moodboard{ margin:0; padding:0; border:none; box-shadow:none; background:none; }
  body.capture-mode #image-grid{
    display:flex; flex-wrap:wrap; justify-content:center; gap:0; margin:0;
  }
  body.capture-mode #image-grid img{ max-width:none; width:auto; height:auto; box-shadow:none; }
  body.capture-mode .prompt-overlay{
    position:absolute; inset:auto 0 0 0; background:rgba(0,0,0,.7); padding:10px; font-size:.95rem;
  }

  /* AR presets */
  [data-ar="1:1"]  #image-grid{ aspect-ratio:1/1; }
  [data-ar="4:5"]  #image-grid{ aspect-ratio:4/5; }
  [data-ar="16:9"] #image-grid{ aspect-ratio:16/9; }
  [data-ar="9:16"] #image-grid{ aspect-ratio:9/16; }

  /* Map Grok [data-ar] to #capture-box variables (if used) */
  [data-ar="1:1"]  #capture-box{ --ar-w:1;  --ar-h:1 }
  [data-ar="4:5"]  #capture-box{ --ar-w:4;  --ar-h:5 }
  [data-ar="16:9"] #capture-box{ --ar-w:16; --ar-h:9 }
  [data-ar="9:16"] #capture-box{ --ar-w:9;  --ar-h:16 }

  /* Shelf glow hints */
  .tool-shelf.show-left::before, .tool-shelf.show-right::after{
    content:""; position:absolute; top:0; bottom:0; width:20px;
    background:linear-gradient(to right, rgba(0,0,0,.5), transparent);
    pointer-events:none; z-index:1;
  }
  .tool-shelf.show-left::before{ left:0; }
  .tool-shelf.show-right::after{ right:0; background:linear-gradient(to left, rgba(0,0,0,.5), transparent); }

  /* Keyboard capture (visual hint) */
  body.keyboard-capture-mode :where(section, .card){
    box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 0 20px rgba(214,163,78,.18);
  }
}

/* === Utilities layer ==================================================== */
@layer utilities{
  .muted{ color:var(--fg-muted); }
}

/* === Motion & effects =================================================== */
@media (prefers-reduced-motion:no-preference){
  .card,.pill,.btn{
    transition:background var(--dur-2) var(--ease), border-color var(--dur-1) var(--ease),
               box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), filter var(--dur-1) var(--ease);
  }
  [role="option"]:focus{ transform:translateY(-1px); }
}
@keyframes flicker{
  0%,100%{ opacity:1; text-shadow:0 0 4px rgba(255,165,0,.6) }
  50%{ opacity:.92; text-shadow:0 0 8px rgba(255,165,0,.85) }
}
@media (prefers-reduced-motion:reduce){
  .saved-new,.new-item-flash{ animation:none; }
}

/* === Breakpoints ======================================================== */
/* Tablet */
@media (min-width:768px){
  body{ height:100vh; overflow:hidden; }
  main.workbench-container{
    display:grid; grid-template-columns:1fr; gap:14px; padding:14px; overflow:visible;
  }
  .tool-shelf{ display:block; overflow-y:auto; overflow-x:hidden; scroll-snap-type:none; }
  .tool-shelf > section{ flex:unset; scroll-snap-align:unset; }
  .workbench{ order:unset; }
  section,.card{ padding:16px; margin-bottom:16px; border-radius:var(--r-sm); }
  .btn,.pill{ min-height:unset; min-width:unset; font-size:unset; }
  .btn.small{ padding:3px 8px; font-size:.85rem; min-height:unset; }
  nav{ gap:18px; overflow-x:visible; }
  #action-bar{
    bottom:10px; left:50%; right:auto; transform:translateX(-50%) translateY(10px);
    border-radius:8px; padding:8px 16px;
  }
  #action-bar.visible{ transform:translateX(-50%) translateY(0); }
  footer{ position:static; background:rgba(0,0,0,.75); padding:10px; padding-bottom:unset; backdrop-filter:unset; }
  .footer-row{ justify-content:center; flex-wrap:wrap; font-size:unset; }
}

/* Desktop */
@media (min-width:1024px){
  main.workbench-container{
    grid-template-columns:minmax(320px,1fr) 1.5fr minmax(320px,1fr);
    gap:16px; padding:20px; overflow:hidden;
  }
  .tool-shelf,.workbench{ overflow-y:auto; }
  .workbench-container::after{
    content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; pointer-events:none;
    background:linear-gradient(to bottom, transparent, rgba(214,163,78,.35), transparent);
    filter:blur(.3px); opacity:.35; transform:translateX(-.5px);
  }
}
/* --- FIX: scrolling ----------------------------------------------- */
/* Tablet and below: let the page scroll normally */
@media (min-width:768px){
  body{
    height:auto;
    min-height:100svh; /* better than 100vh on mobile browsers */
    overflow:auto;
  }
}

/* Desktop: lock the page and scroll inside columns */
@media (min-width:1024px){
  body{
    height:100svh;
    overflow:hidden;
  }
  /* allow inner scrolling to work inside grid tracks */
  .tool-shelf,
  .workbench{
    overflow-y:auto;
    overscroll-behavior:contain;
    min-height:0;          /* IMPORTANT for scrollable grid children */
  }
  /* ensure all immediate grid children can shrink for scrolling */
  main.workbench-container > *{ min-height:0; }
}

/* Prevent last items from hiding under the sticky footer on small screens */
main.workbench-container{ padding-bottom:calc(14px + env(safe-area-inset-bottom)); }