/* layout.css — structure only (AUTHORITATIVE)
   Updated for: dialogue is NO LONGER a terminal-plate (folder DNA removed)
   Keeps: two-column desktop, sticky dialogue, subtle alignment rail
   SAFE: preserves original body-centered site behavior
*/

html, body { height: 100%; }

/* =========================================================
   ORIGINAL CENTERING MODEL (KEEP)
   Your nav + pages already assume body is the centered rail.
========================================================= */
body{
  margin: 0;
  padding: 40px 20px;

  /* This is the centering spine your current nav expects */
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;

  background-color: var(--wall);
  color: var(--ink);
  font-family: var(--font-body);

  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* ---------------------------------------------------------
   NAV SAFETY CENTERING (does not change structure)
   If nav.view.html renders a rail wrapper, center it.
--------------------------------------------------------- */
#site-nav{
  width: 100%;
  box-sizing: border-box;
}

/* Try to catch the rendered rail element (safe, non-breaking) */
#site-nav > *{
  margin-left: auto;
  margin-right: auto;
}

/* Bottom breathing room */
.site-main{
  padding-bottom: 90px;
}

/* Default: stacked (mobile-first) */
#site-dialogue{
  margin-top: 28px;
}

@media (min-width: 980px){
  /* Desktop: content left, dialogue right */
  .site-main{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 22px;
    align-items: start;
  }

  /* Left column: ONLY content plates/boxes */
  .site-main > .content-box,
  .site-main > .terminal-plate{
    grid-column: 1;
    min-width: 0; /* prevents overflow */
  }

  /* Right column: dialogue mount */
  #site-dialogue{
    grid-column: 2;
    margin-top: 0;
    position: sticky;
    top: 20px;

    /* Integrated alignment rail (subtle) */
    border-left: 1px solid rgba(0,0,0,0.14);
    padding-left: 16px;
  }

  /* Dialogue device (now radio-plate/dialogue-plate only) */
  #site-dialogue .dialogue-plate,
  #site-dialogue .radio-plate{
    width: 100%;
    margin: 0;
    min-width: 0;
  }
}

@media (max-width: 979px){
  #site-dialogue{ position: static; }
}

/* =========================================================
   FOLDER PLACEMENT ANIMATION — KEEP ONLY THIS ONE
   (Older duplicate removed)
========================================================= */

/* physical origin: top-left corner of the folder */
.site-main .terminal-plate,
.site-main .content-box{
  transform-origin: 12% 8%;
}

@keyframes folderSlideLay {
  0% {
    opacity: 0;
    transform:
      translateX(-28px)
      translateY(-6px)
      rotate(-2.2deg)
      scale(1.01);
    filter: blur(0.6px);
    box-shadow:
      0 36px 42px rgba(0,0,0,0.20),
      0 14px 22px rgba(0,0,0,0.14);
  }

  55% {
    opacity: 1;
    transform:
      translateX(4px)
      translateY(3px)
      rotate(0.6deg)
      scale(1.00);
    filter: blur(0);
    box-shadow:
      0 22px 30px rgba(0,0,0,0.16),
      0 9px 16px rgba(0,0,0,0.12);
  }

  78% {
    transform:
      translateX(-2px)
      translateY(-1px)
      rotate(-0.25deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) rotate(0deg);
    filter: none;

    /* return to normal theme shadow after landing */
    box-shadow: var(--shadow-plate);
  }
}

/* activate animation */
.site-main .terminal-plate,
.site-main .content-box{
  animation: folderSlideLay 540ms cubic-bezier(.16,.86,.22,1) both;
}

/* reduced motion safety */
@media (prefers-reduced-motion: reduce){
  .site-main .terminal-plate,
  .site-main .content-box{
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}
/* =========================================================
   SINGLE-COLUMN CENTER MODE (REPAIRED)
   This forces the folders to ignore the 360px sidebar gap.
========================================================= */

@media (min-width: 980px) {
  body[data-layout="centered"] .site-main {
    /* 1. Turn off the grid columns */
    display: flex !important; 
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  body[data-layout="centered"] .site-main > .archive-wrap {
    /* 2. Occupy the full width so the folder can center perfectly */
    max-width: 980px !important;
    width: 100% !important;
    margin: 0 auto !important;
    
    /* 3. This is your master gap from Cork to Folder */
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important; 
  }
}
/* layout.css — structure only (AUTHORITATIVE) */

html, body { height: 100%; }

/* Centering spine */
body {
  margin: 0;
  padding: 40px 20px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--wall);
  color: var(--ink);
  font-family: var(--font-body);
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 20px 20px;
}

#site-nav { width: 100%; box-sizing: border-box; }
#site-nav > * { margin-left: auto; margin-right: auto; }
.site-main { padding-bottom: 90px; }
#site-dialogue { margin-top: 28px; }

@media (min-width: 980px) {
  .site-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 22px;
    align-items: start;
  }
  .site-main > .content-box,
  .site-main > .terminal-plate {
    grid-column: 1;
    min-width: 0;
  }
  #site-dialogue {
    grid-column: 2;
    margin-top: 0;
    position: sticky;
    top: 20px;
    border-left: 1px solid rgba(0,0,0,0.14);
    padding-left: 16px;
  }
}

/* =========================================================
   THE FOLDER ANIMATION (The "Hidden" Shifter)
========================================================= */
@keyframes folderSlideLay {
  0% { opacity: 0; transform: translateY(-6px) rotate(-2.2deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}

.site-main .terminal-plate,
.site-main .content-box {
  transform-origin: 12% 8%;
  animation: folderSlideLay 540ms cubic-bezier(.16,.86,.22,1) both;
}

/* =========================================================
   AUTHORITATIVE CENTERING OVERRIDE
   This kills the "Hidden Code" that shifts folders.
========================================================= */
@media (min-width: 980px) {
  body[data-layout="centered"] .site-main {
    display: flex !important; 
    flex-direction: column !important;
    align-items: center !important;
    grid-template-columns: none !important;
    width: 100% !important;
  }

  body[data-layout="centered"] .archive-wrap {
    max-width: 980px !important;
    width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    /* This gap is now the ONLY distance decider */
    gap: 30px !important; 
  }

  /* KILL THE JUMP: Force the folder to land at exactly 0,0 */
  body[data-layout="centered"] .terminal-plate,
  body[data-layout="centered"] .content-box {
    animation: none !important; 
    transform: none !important;
    margin-top: 0 !important;
  }
}
:root{ --rail-gap: 56px; }

body[data-layout="centered"] .site-main > .archive-wrap{
  display:flex;
  flex-direction:column;
  gap: var(--rail-gap);
}