:root{
  --error: #ff6b6b;
  --bg: #0b0f14;
  --panel: #121924;
  --text: #eaf2ff;
  --muted: #b9c7dd;

  --accent-off: #6db6ff;   /* light blue */
  --accent-on:  #69db87;   /* light green */

  --card-radius: 14px;
  --card-border: 2px;
  --gap: 16px;
}

*{ box-sizing: border-box; }
html, body { height: 100%;   /* keep background static on scroll */
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(1200px 800px at 20% -10%, #10243a 0%, #0b0f14 50%, #0b0f14 100%);
  background: none;
}

.page-header{
  padding: 24px 20px 12px;
  text-align:center;
}
.page-header h1{
  margin:0;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.1;
}

.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 20px 60px;
}

.section{ margin-block: 18px; }

.file-drop{
  position: relative;
  border: var(--card-border) dashed var(--accent-off);
  border-radius: var(--card-radius);
  padding: 28px;
  background: rgba(255,255,255,0.02);
  display:flex;
  align-items:center;
  justify-content:center;
  transition: border-color .2s ease, box-shadow .2s ease;
  cursor: pointer;
  outline: none;
}
.file-drop:focus-visible{
  box-shadow: 0 0 0 3px rgba(109,182,255,0.4);
}
.file-drop.dragover{
  border-color: var(--accent-on);
  box-shadow: 0 0 0 3px rgba(105,219,135,0.25);
}
.file-drop input[type="file"]{
  position:absolute;
  inset:0;
  opacity:0;
  cursor: pointer;
}
.file-instructions{ text-align:center; }
.file-title{ margin: 0 0 4px; color: var(--muted); font-weight: 600; }
.file-sub{ margin: 0 0 6px; color: var(--muted); font-size: 0.95rem; }
.file-note{ margin: 0; color: var(--muted); font-size: 0.9rem; opacity: 0.9; }
.file-status{ margin-top: 8px; color: var(--muted); font-size: 0.95rem; }

/* Bars */
.bar{
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y; /* allow vertical scroll without triggering taps */
  cursor: pointer;
  background: var(--panel);
  border: var(--card-border) solid var(--accent-off);
  border-radius: var(--card-radius);
  padding: 12px 14px;
  text-align:center;
  color: var(--muted);
  font-weight: 600;
}

/* User Selection */
.section-title{
  margin: 6px 0 10px;
  letter-spacing: 0.18em;
  font-size: 0.9rem;
  color: var(--muted);
  opacity: 0.9;
}
.group{ margin-block: 10px 16px; }
.group-title{ margin: 0 0 10px; font-size: 1.05rem; color: var(--muted); }

.grid{ display:grid; gap: var(--gap); }
.grid-1{ grid-template-columns: 1fr; }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }

.toggle-card{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 14px 16px;
  border-radius: var(--card-radius);
  border: var(--card-border) solid var(--accent-off);
  background: var(--panel);
  color: var(--accent-off);
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: transform .1s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.toggle-card .check{
  width: 18px; height: 18px; border-radius: 999px;
  border: 2px solid var(--accent-off);
  display:inline-block;
}
.toggle-card:hover{ transform: translateY(-1px); }
.toggle-card:active{ transform: translateY(0); }
.toggle-card.on{
  border-color: var(--accent-on);
  color: var(--accent-on);
  box-shadow: 0 0 0 2px rgba(105,219,135,0.15) inset;
}

.toggle-card.on .check{
  border: none;
  background-color: var(--accent-on); /* the green tint */
  -webkit-mask: url("/static/icons/toggle-on.png") center/contain no-repeat;
  mask: url("/static/icons/toggle-on.png") center/contain no-repeat;
}

/* Selections layout */
.selections-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gap);
}
.sel-col .bar{ margin-bottom: 10px; }

/* Process button */
.process-section.center{
  display: flex;
  justify-content: center;
}
.process-btn{
  padding: 12px 18px;
  border-radius: 12px;
  border: 2px solid var(--accent-off);
  background: transparent;
  color: var(--accent-off);
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, box-shadow .2s ease;
}
.process-btn.state-on{
  border-color: var(--accent-on);
  color: var(--accent-on);
  box-shadow: 0 0 0 3px rgba(105,219,135,0.25);
}

/* Outputs */
.outputs{ display:flex; flex-direction: column; gap: 14px; }
.output-row{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  align-items: center; /* aligns copy button to the output field's axis */
}
.copy-btn{
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid var(--accent-off);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  font-weight: 600;
  transition: border-color .15s ease, color .15s ease, transform .12s ease;
}
.copy-btn:hover{ transform: translateY(-1px); }
.copy-btn:active{ transform: translateY(0); }
.output{
  min-height: 120px;
  border-radius: 10px;
  border: 2px solid #243449;
  background: #0f1622;
  color: var(--text);
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.95rem;
  resize: vertical;
}

/* Toast */
.toast{
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: #101a28;
  color: var(--text);
  border: 1px solid #2a3d57;
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  z-index: 1000;
}

/* A11y */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip: rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Responsive */
@media (max-width: 980px){
  .selections-grid{
    grid-template-columns: 1fr;
  }
  .output-row{
    grid-template-columns: 1fr;
  }
}


/* === Section width ratios per spec ===
   Desktop: Class:Archetype:Set ≈ 1:2:4
   Medium:  Class:Archetype:Set ≈ 1:1.5:2.5
   Small:   stacked (already defined)
*/

@media (min-width: 981px) and (max-width: 1280px){
  .selections-grid{
    grid-template-columns: 1fr 1.5fr 2.5fr;
  }
}

@media (min-width: 1281px){
  .selections-grid{
    grid-template-columns: 1fr 2fr 4fr;
  }
}

/* Card text handling for longer labels (~15 chars) without overflow */
.toggle-card .label{
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Allow wrapping on ultra-narrow cards if needed */
@container (max-width: 240px){
  .toggle-card .label{
    white-space: normal;
  }
}

/* Ensure internal grids breathe within the wider columns */
.sel-col .grid-2{ gap: calc(var(--gap) * 0.9); }
.sel-col .grid-3{ gap: calc(var(--gap) * 0.9); }


/* Tier section styles */
.tier-section{ margin-top: 8px; }
.tier-row{
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: var(--gap);
}
.tier-card{
  justify-content: center;
}
@media (max-width: 620px){
  /* Mobile: 3 on first row, 2 centered on second */
  .tier-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);
  }
  /* Each card takes ~1/3 width minus gaps so we get 3 per line */
  .tier-card{
    flex: 0 1 calc((100% - 2 * var(--gap)) / 3);
    max-width: calc((100% - 2 * var(--gap)) / 3);
  }
}


/* Left column stacks the Copy button above the label */
.left-stack{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.output-label{
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.2;
}

/* Increase left column width slightly to fit label comfortably */
.output-row{
  grid-template-columns: 200px 1fr;
}

/* Add spacing between tier header and tier boxes */
.tier-row.mt-between{
  margin-top: 10px;
}


/* Hide legacy status line under the dropbox */
.file-status{ display: none !important; }

/* Ready state: subtle green border glow */
.file-drop.ok{
  border-color: var(--accent-on);
  box-shadow: 0 0 0 3px rgba(105,219,135,0.18);
}


/* Ready check icon inside the dropbox */
.file-drop.ok .file-instructions{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-align: left; /* the box stays centered overall; text aligns with the icon */
}

.file-drop.ok .file-instructions::before{
  content: "";
  display: inline-block;
  width: 10px;
  height: 18px;
  border-right: 3px solid var(--accent-on);
  border-bottom: 3px solid var(--accent-on);
  transform: rotate(45deg);
  border-radius: 1px;
}


/* Show icon ONLY when invalid */
.process-btn .check{ display:none; }
.process-btn.invalid .check{ display:inline-block; }



/* Invalid (requirements not met): force red style even when disabled */
.process-btn.invalid,
.process-btn.invalid:disabled{
  border-color: var(--error) !important;
  color: var(--error) !important;
  box-shadow: none;
  opacity: 1; /* keep readable, not dimmed like other disabled states */
}

/* Red "no" icon (circle + slash) only in invalid state */
.process-btn.invalid .check{
  width: 18px; height: 18px;
  border-radius: 999px;
  border: 2px solid var(--error);
  position: relative;
}
.process-btn.invalid .check::after{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 2px; height: 120%;
  background: var(--error);
  transform: translate(-50%, -50%) rotate(-45deg);
  border-radius: 2px;
}



/* === Force invalid (red) visuals with high specificity === */
button#processBtn.process-btn.invalid,
button#processBtn.process-btn.invalid:disabled{
  border-color: var(--error) !important;
  color: var(--error) !important;
  filter: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

button#processBtn.process-btn.invalid .btn-text{
  color: var(--error) !important;
}

/* Ensure the red "no" icon is visible only when invalid */
button#processBtn.process-btn.invalid .check{ 
  display: inline-block !important; 
  width: 18px; height: 18px; 
  border-radius: 999px; 
  border: 2px solid var(--error); 
  position: relative; 
}
button#processBtn.process-btn.invalid .check::after{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 2px; height: 120%;
  background: var(--error);
  transform: translate(-50%, -50%) rotate(-45deg);
  border-radius: 2px;
}


/* Mobile: allow the Process button message to wrap nicely */
@media (max-width: 520px){
  #processBtn.process-btn{
    gap: 8px;
    padding: 10px 12px;
    align-items: flex-start;            /* lets multi-line text align naturally with icon */
  }
  #processBtn.process-btn .btn-text{
    white-space: normal;                /* allow wrapping on small screens */
    line-height: 1.2;
    text-align: left;
  }
  #processBtn.process-btn.invalid .check{
    margin-top: 2px;                    /* small visual nudge for vertical alignment */
  }
}


/* === Process button: tidy spacing & alignment === */
#processBtn.process-btn{
  display: inline-flex;
  align-items: center;          /* center icon vs text vertically */
  justify-content: center;
  gap: 10px;                    /* space between icon and text */
  padding: 10px 16px;           /* comfortable target size */
  line-height: 1.15;            /* avoid tall text boxes */
  min-height: 40px;             /* stable height */
  max-width: 100%;
}

#processBtn.process-btn .btn-text{
  display: inline-block;
  line-height: 1.2;
  text-align: center;           /* keeps message centered */
  white-space: normal;          /* allow wrap if needed */
  text-wrap: balance;           /* nicer wraps where supported */
}

/* Icon only visible when invalid */
#processBtn.process-btn .check{ display:none; }

#processBtn.process-btn.invalid .check{
  display: inline-grid !important; /* grid centers the slash perfectly */
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 2px solid var(--error);
  border-radius: 999px;
  /* tiny optical nudge so the circle aligns with text x-height */
  margin-top: 1px;
}

/* Slash inside the "no" icon */
#processBtn.process-btn.invalid .check::after{
  content: "";
  width: 2px;
  height: 12px;
  background: var(--error);
  transform: rotate(-45deg);
  border-radius: 1px;
}


/* ===== Output section (clean alignment) ===== */
.outputs{ display:flex; flex-direction: column; gap: 18px; }

.output-row{
  display: grid;
  grid-template-columns: 220px 1fr;  /* left column width */
  gap: 16px;
  align-items: start;                /* top-align with the textarea */
}

.left-stack{
  display: grid;
  grid-template-rows: auto auto;     /* label on top, button below */
  align-content: start;
  align-items: start;
  justify-items: start;              /* keep both left-aligned */
  gap: 8px;
  min-width: 0;                      /* allow label to wrap instead of pushing layout */
}

.output-label{
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.3;
  white-space: normal;               /* wrap long labels nicely */
  text-wrap: balance;                /* nicer breaks where supported */
  max-width: 100%;
}

.copy-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  min-width: 112px;                  /* stops the “squished to the edge” look */
  border-radius: 10px;
  font-weight: 600;
}

/* textarea keeps breathing room relative to the left stack */
.output{
  min-height: 140px;
}

/* Narrow screens: stack cleanly */
@media (max-width: 980px){
  .output-row{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .left-stack{
    grid-template-rows: auto;        /* label and button side-by-side on one row */
    grid-auto-flow: column;
    align-items: center;
    gap: 12px;
  }
  .output-label{ margin-right: 12px; }
}


/* ===== Output section: desktop refinement ===== */
@media (min-width: 981px){
  .outputs .output-row{
    display: grid;
    grid-template-columns: 260px 1fr;  /* wider, stable left column */
    gap: 20px;
    align-items: start;                /* top-align with textarea */
  }
  .outputs .left-stack{
    display: grid;
    grid-template-rows: auto auto;     /* label above button */
    align-content: start;
    align-items: start;
    justify-items: start;
    gap: 10px;
    min-width: 0;
  }
  .outputs .output-label{
    font-size: 1rem;
    line-height: 1.35;
    white-space: normal;
    text-wrap: balance;
  }
  .outputs .copy-btn{
    min-width: 124px;                  /* avoid squish on desktop */
    padding: 9px 16px;
  }
  .outputs .output{
    min-height: 160px;                 /* comfortable textarea height */
  }
}


/* ===== Output section: desktop centered alignment ===== */
@media (min-width: 981px){
  .outputs .output-row{
    display: grid;
    grid-template-columns: 260px 1fr;   /* stable left column */
    gap: 24px;
    align-items: stretch;               /* make both columns equal height */
  }
  .outputs .left-stack{
    display: grid;
    grid-template-rows: auto auto;      /* label above button */
    justify-items: center;              /* center horizontally within column */
    align-content: center;              /* center vertically relative to the textarea height */
    gap: 12px;
    height: 100%;                       
    min-width: 0;
    text-align: center;
  }
  .outputs .output-label{
    white-space: normal;
    text-wrap: balance;
    line-height: 1.35;
    font-size: 1rem;
    max-width: 240px;                   /* keep nice line lengths */
  }
  .outputs .copy-btn{
    min-width: 128px;
    padding: 10px 16px;
  }
  .outputs .output{
    align-self: stretch;                 /* ensures the textarea spans the row height */
    min-height: 180px;
  }
}


/* Fixed background layer (isolated; does not affect layout) */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(1200px 800px at 20% -10%, #10243a 0%, #0b0f14 50%, #0b0f14 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}



/* === Mobile-only accordion for selection groups === */
@media (max-width: 720px){
  .user-selection .bar{
    cursor: pointer;
    position: relative;
  }
  .user-selection .bar::after{
    content: "▾";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.18s ease;
    opacity: 0.85;
  }
  .sel-col.collapsed .bar::after{
    transform: translateY(-50%) rotate(-90deg);
  }

  /* Smooth accordion panel (the element right after .bar) */
  .sel-col .bar + *{
    overflow: hidden;
    max-height: 9999px;
    opacity: 1;
    transition: max-height 220ms ease, opacity 180ms ease;
    will-change: max-height, opacity;
  }
  .sel-col.collapsed .bar + *{
    max-height: 0;
    opacity: 0;
  }
}

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce){
  .sel-col .bar + *{
    transition: none !important;
  }
}
@media (min-width: 721px){
  .user-selection .bar{ cursor: default; }
  .user-selection .bar::after{ content: none; }
  .sel-col .group{ display: block; }
}


/* === Accordion animation: height-only (no opacity) === */
@media (max-width: 720px){
  .sel-col .bar + *{
    overflow: hidden;
    max-height: 9999px;
    transition: max-height 200ms ease;
    /* ensure clicks work when open */
    pointer-events: auto;
  }
  .sel-col.collapsed .bar + *{
    max-height: 0;
    /* when collapsed, don't let hidden children intercept clicks */
    pointer-events: none;
  }
}

/* Desktop: ensure panels are fully open and interactive */
@media (min-width: 721px){
  .sel-col .bar + *{
    max-height: none !important;
    pointer-events: auto !important;
  }
}

/* === Mobile layout tweak: make Archetype (grid-2) and Set (grid-4) one-per-row === */
@media (max-width: 720px){
  .grid-2,
  .grid-4{
    grid-template-columns: 1fr !important; /* each card spans full row */
  }
}

/* === Mobile layout tweak (extended): include Set grid (.grid-3) as one-per-row === */
@media (max-width: 720px){
  .grid-3{
    grid-template-columns: 1fr !important;
  }
}




/* === MACC styles (opt-in, isolated) === */
@media (max-width:768px){
  [data-macc]{
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.75rem;
    margin-bottom: 0.5rem;
    background: rgba(0,0,0,0.12);
  }
  [data-macc-header]{
    display:flex; align-items:center; justify-content:space-between;
    padding: 0.75rem 1rem; font-weight:600; user-select:none; cursor:pointer;
    -webkit-tap-highlight-color: transparent;
  }
  [data-macc-content]{ overflow:hidden; max-height:0; transition:max-height 240ms ease; }
  [data-macc][data-macc-open] [data-macc-content]{ max-height: 1200px; }
}
@media (min-width:769px){
  [data-macc] { border: none; background: transparent; }
  [data-macc-content]{ max-height: none !important; overflow: visible; }
}
/* === End MACC styles === */


/* === Mobile visibility fix: MACC open state beats legacy .collapsed opacity === */
@media (max-width: 768px){
  [data-macc][data-macc-open] .bar + *,
  [data-macc][data-macc-open] [data-macc-content]{
    opacity: 1 !important;
  }
}