/* PROPOSAL · NOT CANON — Hoopdream CAD stylesheet for vudu.work/cad */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* Aria Face + Hoop Dream crystal palette (SOL/ARIA/KAI) — gold reserved Gate-only, not CAD chrome */
  --bg: #07060B; --surface: #15121F; --border: #2a2540; --text: #EDE6D6;
  --muted: #9a9288; --gold: #5B5BF0; --gold2: #9B5DE5; --danger: #c0392b;
  --indigo: #5B5BF0; --amethyst: #9B5DE5; --bone: #EDE6D6;
  --crystal-pink: #E879A9; --crystal-purple: #9B5DE5; --crystal-blue: #5B5BF0;
  --radius: 6px; --font: 'Jost', system-ui, sans-serif;
}
html, body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.5; min-height: 100dvh; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header */
.top { padding: 1.25rem 1.5rem 1rem; border-bottom: 1px solid var(--border); }
.backnav { margin-bottom: .5rem; font-size: .8rem; }
.back { color: var(--muted); letter-spacing: .05em; }
.back:hover { color: var(--gold); text-decoration: none; }
h1 { font-size: 1.1rem; font-weight: 700; letter-spacing: .12em; color: var(--gold); text-transform: uppercase; }
h1 span { color: var(--muted); font-weight: 400; font-size: .85rem; }
.sub { font-size: .8rem; color: var(--muted); margin-top: .35rem; max-width: 72ch; }

/* Step nav */
.steps { display: flex; gap: .5rem; padding: .75rem 1.5rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.steps button { background: none; border: 1px solid var(--border); color: var(--muted); padding: .35rem .9rem; border-radius: var(--radius); font: inherit; font-size: .8rem; cursor: pointer; transition: border-color .15s, color .15s; }
.steps button.on { border-color: var(--gold); color: var(--gold); }
.steps button:disabled { opacity: .35; cursor: default; }
.steps button:not(:disabled):hover { border-color: var(--gold2); color: var(--gold2); }

/* Main panels */
main { padding: 1.25rem 1.5rem 3rem; }
.panel { display: block; }
.panel[hidden] { display: none; }

/* Two-column grid */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 700px) { .grid2 { grid-template-columns: 1fr; } }

/* Drop zone */
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; border: 2px dashed var(--border); border-radius: var(--radius); padding: 2rem 1rem; cursor: pointer; text-align: center; transition: border-color .15s; min-height: 180px; }
.drop:hover, .drop:focus { border-color: var(--gold); outline: none; }
.drop input[type=file] { display: none; }
.drop strong { color: var(--gold); }
.drop small { color: var(--muted); font-size: .75rem; }
.thumb { max-width: 100%; max-height: 120px; border-radius: 4px; margin-top: .5rem; }

/* Options panel */
.opts { display: flex; flex-direction: column; gap: .85rem; }
.opts label { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; color: var(--muted); }
.opts label input[type=number], .opts label select { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: .4rem .6rem; border-radius: var(--radius); font: inherit; font-size: .85rem; }
.opts label input[type=range] { accent-color: var(--gold); width: 100%; }
.opts label output { color: var(--gold); font-size: .8rem; }
.chk { flex-direction: row !important; align-items: center; gap: .5rem !important; color: var(--text) !important; font-size: .85rem !important; cursor: pointer; }
.chk input { accent-color: var(--gold); width: 1rem; height: 1rem; }

/* Buttons */
button.primary { background: var(--gold); color: #0a0a0a; border: none; padding: .5rem 1.25rem; border-radius: var(--radius); font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; transition: background .15s; }
button.primary:hover:not(:disabled) { background: var(--gold2); }
button.primary:disabled { opacity: .4; cursor: default; }
button[data-back] { background: none; border: 1px solid var(--border); color: var(--muted); padding: .45rem 1rem; border-radius: var(--radius); font: inherit; font-size: .82rem; cursor: pointer; }
button[data-back]:hover { border-color: var(--gold2); color: var(--gold2); }
.row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

/* Stage / canvas area */
.stage { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 220px; }
.checker { background-image: repeating-conic-gradient(#1e1e1e 0% 25%, #141414 0% 50%); background-size: 16px 16px; }
.stage canvas { max-width: 100%; max-height: 400px; display: block; }

/* Sections step */
.secarea { display: flex; flex-direction: column; gap: .75rem; }
.secwrap { position: relative; display: inline-block; }
.ov { position: absolute; top: 0; left: 0; pointer-events: none; }
.pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .55; } 50% { opacity: .9; } }

/* Section card */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem 1rem; }
.cardhd { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; font-size: .85rem; font-weight: 600; }
.x { background: none; border: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; padding: 0 .25rem; }
.x:hover { color: var(--text); }
.cardrow { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-bottom: .5rem; }
.bigsw { display: block; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; }
.swbtn { display: flex; align-items: center; gap: .4rem; cursor: pointer; }
.swbtn input[type=color] { width: 0; height: 0; opacity: 0; position: absolute; }
.gen { font-size: .75rem; color: var(--muted); }
.dirbtn { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: var(--radius); padding: .3rem .6rem; font: inherit; font-size: .75rem; cursor: pointer; display: flex; align-items: center; gap: .3rem; }
.dirbtn:hover { border-color: var(--gold2); color: var(--gold2); }
.dirstate { font-size: .72rem; }
.quick { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .4rem; }
.quick button { background: none; border: 1px solid var(--border); border-radius: 50%; width: 1.4rem; height: 1.4rem; cursor: pointer; padding: 0; }
.cardwarn { font-size: .78rem; color: #e8a020; margin-top: .4rem; }

/* Stitch direction dial */
.dial { margin-top: .75rem; }
.dialface { width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--border); position: relative; cursor: pointer; margin: 0 auto .5rem; }
.dialface:focus { outline: 2px solid var(--gold); }
.needle { position: absolute; top: 50%; left: 50%; width: 2px; height: 36px; background: var(--gold); transform-origin: bottom center; transform: translateX(-50%) translateY(-100%) rotate(0deg); border-radius: 1px; }
.hub { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; transform: translate(-50%, -50%); }
.dialrow { display: flex; gap: .5rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.dialrow output { font-size: .8rem; color: var(--gold); min-width: 3rem; text-align: center; }
#dirnote { font-size: .75rem; text-align: center; margin-top: .3rem; }

/* Sections table */
.sections { width: 100%; border-collapse: collapse; font-size: .78rem; margin-top: .5rem; }
.sections th { color: var(--muted); font-weight: 500; text-align: left; padding: .3rem .4rem; border-bottom: 1px solid var(--border); }
.sections td { padding: .3rem .4rem; border-bottom: 1px solid #1e1e1e; vertical-align: middle; }
.sections tr:hover td { background: #1a1a1a; cursor: pointer; }
.sections tr.sel td { background: #1e1a12; }
.swatch { display: inline-block; width: 1rem; height: 1rem; border-radius: 2px; border: 1px solid var(--border); vertical-align: middle; }

/* Step 4 */
.draft { font-size: .78rem; color: var(--muted); margin-bottom: .75rem; font-style: italic; }
.sim { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.sim canvas { max-width: 100%; display: block; }
/* .report grid defined below in additions */
.dlrow { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .75rem; }
.dlrow button { background: none; border: 1px solid var(--gold); color: var(--gold); padding: .45rem 1rem; border-radius: var(--radius); font: inherit; font-size: .82rem; cursor: pointer; transition: background .15s; }
.dlrow button:hover:not(:disabled) { background: var(--gold); color: #0a0a0a; }
.dlrow button:disabled { opacity: .35; cursor: default; border-color: var(--border); color: var(--muted); }


.canon-err { color: var(--muted); font-size: .8rem; padding: .5rem 0; margin: 0; }

/* Busy overlay */
#busy { position: fixed; inset: 0; background: rgba(10,10,10,.72); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; z-index: 100; }
#busy[hidden] { display: none; }
.spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--gold); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#busylabel { font-size: .85rem; color: var(--muted); }

/* Misc */
.muted { color: var(--muted); font-size: .8rem; }
.tip { font-style: italic; }
#presetinfo { min-height: 1.2em; }
#isoinfo, #secinfo { min-height: 1.2em; }

/* Busy overlay spinner — HTML uses class="spin" */
.spin { display: inline-block; width: 32px; height: 32px; border: 3px solid rgba(201,169,110,.25); border-top-color: var(--gold); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; margin-right: .5rem; }
#busy > div { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.5rem; font-size: .9rem; color: var(--text); }

/* Report key-value grid */
.report { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .75rem; font-size: .8rem; align-items: baseline; }
.report b { color: var(--muted); font-weight: 500; white-space: nowrap; }
.report span { color: var(--text); }

/* Warnings list */
.warnings { list-style: none; margin-top: .6rem; display: flex; flex-direction: column; gap: .3rem; }
.warnings li { font-size: .78rem; color: #e8a020; padding: .3rem .5rem; background: rgba(232,160,32,.08); border-radius: 4px; border-left: 2px solid #e8a020; }

/* Step 4 fabric stage */
.fabric { background: #e9e6df; }

/* Section table colour swatch — HTML uses class="sw" */
.sw { display: inline-block; width: 1rem; height: 1rem; border-radius: 2px; border: 1px solid var(--border); vertical-align: middle; }

/* Section table hint text */
.hint { display: block; font-size: .7rem; color: var(--muted); margin-top: .15rem; }

/* Section table row highlight */
.sections tr.hl td { background: #181818; }
.sections tr[aria-selected=true] td, .sections tr.sel td { background: #1e1a12; }

/* Footer */
.foot { padding: .75rem 1.5rem; border-top: 1px solid var(--border); font-size: .72rem; color: var(--muted); margin-top: 2rem; }

/* Section stage secstage */
#secstage { overflow: visible; }


/* Fibonacci Pack/World/Create gate icons on Hoop Dream (LAYOUT-SPEC d-nav) */
:root {
  --f6: 8px; --f7: 13px; --f10: 55px; --f11: 89px;
  --fib-gate-nav: var(--f11);
  --fib-gate-gap: var(--f7);
}
@media (max-width: 768px) {
  :root { --fib-gate-nav: var(--f10); --fib-gate-gap: var(--f6); }
}
.cad-fib-gates.wulf-nav {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--fib-gate-gap);
  margin: 1.25rem 0 .5rem;
}
.cad-fib-gates .wulf-fib-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  opacity: .88;
  color: inherit;
}
.cad-fib-gates .wulf-fib-gate:hover,
.cad-fib-gates .wulf-fib-gate.is-active { opacity: 1; }
.cad-fib-gates .wulf-fib-gate__img {
  width: var(--fib-gate-nav);
  height: var(--fib-gate-nav);
  object-fit: contain;
  display: block;
}
.cad-fib-gates .wulf-fib-gate__label {
  font-size: .65rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Aria Face tool chrome */
.tool-mode{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--amethyst);opacity:.85;margin:0 0 .35rem}
.cad-fib-gates.wulf-nav{opacity:.85;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border)}
.top{border-bottom-color:color-mix(in srgb, var(--indigo) 35%, var(--border))}
h1{color:var(--bone)!important}
h1 span{color:var(--muted)!important}
a{color:var(--indigo)}
a:hover{color:var(--amethyst)}
button.primary{background:linear-gradient(135deg,var(--indigo),var(--amethyst));color:var(--bone)}
button.primary:hover:not(:disabled){filter:brightness(1.08)}
.steps button.on{border-color:var(--amethyst);color:var(--bone)}

/* Create-dominant Face nav on /cad/ (VOICE 2026-10-28) */
.cad-fib-gates.wulf-fib-gates--create-dominant {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  opacity: .9;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.cad-fib-gates .wulf-fib-gates__create { display: flex; justify-content: center; }
.cad-fib-gates .wulf-fib-gates__under {
  display: flex;
  justify-content: center;
  gap: clamp(28px, 6vw, 72px);
}
.cad-fib-gates .wulf-fib-gate--create .wulf-fib-gate__img { width: 233px; height: 233px; }
.cad-fib-gates .wulf-fib-gate--under .wulf-fib-gate__img { width: 144px; height: 144px; }
.cad-fib-gates .wulf-fib-gate__label {
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #EDE6D6;
}
.cad-fib-gates .wulf-fib-gate--create .wulf-fib-gate__label { font-size: 12px; }
@media (max-width: 768px) {
  .cad-fib-gates .wulf-fib-gate--create .wulf-fib-gate__img { width: 144px; height: 144px; }
  .cad-fib-gates .wulf-fib-gate--under .wulf-fib-gate__img { width: 89px; height: 89px; }
}