/* ============================================================
   Marrazketa Lantegia — tresnaren estilo bereziak
   (app.css-en gainean; berezuma.com-eko itxurarekin bat)
   ============================================================ */

:root{
  --vF: var(--s1);   /* altxaera */
  --vT: var(--s2);   /* oinplanoa */
  --vL: var(--s3);   /* profila */
  --dim: var(--s1);
}
.vF{color:var(--vF)} .vT{color:var(--s2-ink)} .vL{color:var(--vL)}

/* ---------- marka: hiru bista (ISO-E) ---------- */
.brand .glyph.views{position:relative; display:block}
.brand .glyph.views i{position:absolute; width:10px; height:10px; border:2.5px solid var(--ink); background:transparent; box-shadow:none}
.brand .glyph.views i:nth-child(1){left:3px; top:3px; border-color:var(--vF)}
.brand .glyph.views i:nth-child(2){left:3px; top:15px; border-color:var(--vT)}
.brand .glyph.views i:nth-child(3){left:15px; top:3px; border-color:var(--vL)}

/* ---------- SVG marrazkiak ---------- */
.sv{display:block; width:100%; height:auto; overflow:visible}
.sv-vis{stroke:var(--ink); stroke-width:.075; stroke-linecap:round; fill:none}
.sv-hid{stroke:var(--ink); stroke-width:.045; stroke-dasharray:.2 .13; fill:none; opacity:.9}
.sv-ext, .sv-dline{stroke:var(--dim); stroke-width:.028; fill:none}
.sv-arrow{fill:var(--dim)}
.sv-dtext{fill:var(--dim); font-family:var(--font-body); font-size:.44px; font-weight:700}
.sv-label{fill:var(--ink3); font-family:var(--font-body); font-size:.32px; font-weight:700}
.sv-dhit{fill:transparent; cursor:pointer}
.sv-dim.sel .sv-ext, .sv-dim.sel .sv-dline{stroke:var(--s2); stroke-width:.05}
.sv-dim.sel .sv-arrow, .sv-dim.sel .sv-dtext{fill:var(--s2-ink)}
.sv-dim.bad .sv-ext, .sv-dim.bad .sv-dline{stroke:var(--danger); stroke-width:.045}
.sv-dim.bad .sv-arrow, .sv-dim.bad .sv-dtext{fill:var(--danger)}
.sv-snap{fill:var(--sheet); stroke:var(--ink3); stroke-width:.03; opacity:0; transition:opacity .12s}
.sv-sheet.editing:hover .sv-snap{opacity:1}
.sv-snap.hid{stroke-dasharray:.05 .04}
.sv-snap.first{opacity:1; fill:var(--s2); stroke:var(--s2)}
.sv-hover{fill:none; stroke:var(--s1); stroke-width:.06; pointer-events:none}
.sv-rubber{stroke:var(--s2); stroke-width:.04; stroke-dasharray:.12 .08; pointer-events:none}
.sv-sheet.editing{cursor:crosshair; touch-action:manipulation}
.sv-iso .sv-vis{stroke-width:.06}
.sv-icon{width:34px; height:34px}
.sv-icon .sv-vis{stroke-width:.07}

/* ---------- orria ---------- */
.sheet{background:var(--sheet); border:1px solid var(--rule); position:relative; padding:12px}
.sheet-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:2px 2px 10px; border-bottom:1px solid var(--rule); margin-bottom:10px}
.sheet-body{overflow:auto}
.sheet-body .sv-sheet{max-height:70vh}

/* ---------- 3D ikustailea ---------- */
.v3d{
  position:relative; background:var(--sheet);
  border:1px solid var(--rule); min-height:320px; overflow:hidden;
  touch-action:none;
}
.v3d-canvas{display:block; width:100% !important; height:100% !important; position:absolute; inset:0}
.v3d[data-tool="add"] .v3d-canvas{cursor:copy}
.v3d[data-tool="remove"] .v3d-canvas{cursor:not-allowed}
.v3d[data-tool="replace"] .v3d-canvas{cursor:cell}
.v3d[data-tool="orbit"] .v3d-canvas{cursor:grab}
.v3d-bar{position:absolute; left:10px; right:10px; bottom:10px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; pointer-events:none}
.v3d-bar > *{pointer-events:auto}
.v3d-hint{
  position:absolute; top:10px; left:10px; font-size:13.5px;
  color:var(--ink3); pointer-events:none; background:color-mix(in srgb, var(--sheet) 85%, transparent); padding:2px 8px;
}
.seg.views button[data-v="F"].on{background:var(--vF); color:#fff}
.seg.views button[data-v="T"].on{background:var(--vT); color:#000}
.seg.views button[data-v="L"].on{background:var(--vL); color:#fff}

/* ---------- editorea ---------- */
.editor{display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); gap:18px; margin-top:14px}
.editor .v3d{height:min(68vh, 620px)}
@media (max-width:900px){
  .editor{grid-template-columns:1fr}
  .editor .v3d{height:56vh}
}
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:14px}
.palette{display:flex; gap:5px; flex-wrap:wrap; align-items:center}
.palette button{border:1px solid var(--rule); background:var(--sheet); padding:2px; cursor:pointer; line-height:0}
.palette button:hover{border-color:var(--ink3)}
.palette button.on{border-color:var(--ink); box-shadow:2px 2px 0 var(--ink)}
.palette .sv-vis{stroke:var(--ink)}
.tool-note{font-size:14.5px; color:var(--ink2)}
.kbd{font-family:var(--font-code); font-size:12px; border:1px solid var(--rule); border-bottom-width:2px; padding:0 4px; background:var(--chip)}

.issues{display:flex; flex-direction:column; gap:6px; margin-top:12px}
.issue{font-size:15px; padding:8px 12px; border-left:3px solid var(--rule); background:var(--paper)}
.issue.missing{border-left-color:var(--s2)}
.issue.dup, .issue.cycle, .issue.zero{border-left-color:var(--danger)}
.issue.hidden{border-left-color:var(--s5)}
.issue.tip{border-left-color:var(--s1); color:var(--ink2)}
.issue.ok{border-left-color:var(--ok); color:var(--ok); font-weight:700}

/* ---------- aurrerapen-barra ---------- */
.pbar{height:6px; background:var(--chip); border:1px solid var(--rule)}
.pbar > i{display:block; height:100%; background:var(--ink)}
.pbar.done > i{background:var(--ok)}

/* ---------- mailak: ibilbidea ---------- */
.levels{
  display:grid; gap:18px; grid-template-columns:repeat(5, minmax(0, 1fr));
  margin-top:18px; padding-top:24px; position:relative;
}
.levels::before{
  content:""; position:absolute; left:10%; right:10%; top:24px;
  border-top:1px dashed var(--ink3);
}
.level{
  position:relative; background:var(--sheet); border:1px solid var(--ink); box-shadow:var(--edge);
  display:flex; flex-direction:column;
}
.level.is-current{box-shadow:4px 4px 0 var(--s1)}
.level-top{padding:0 16px 12px; display:flex; flex-direction:column; gap:6px}
.level-num{
  width:46px; height:46px; margin:-24px 0 4px; border-radius:50%;
  display:grid; place-items:center; background:var(--sheet); border:1px solid var(--ink);
  font-family:var(--font-display); font-size:25px; line-height:1;
}
.level.is-current .level-num{background:var(--ink); color:var(--sheet)}
.level.is-done .level-num{background:var(--ok); border-color:var(--ok); color:#fff}
.level .eyebrow{font-weight:400; color:var(--ink3); font-size:14.5px}
.level h3{font-size:20px; line-height:1.15; hyphens:auto}
.level ul{margin:6px 0 0; padding-left:18px; font-size:14.5px; color:var(--ink2); line-height:1.45}
.level ul li{margin:2px 0}
.level-sample{padding:10px 18px; border-top:1px solid var(--rule); background:var(--paper); display:flex; justify-content:center; margin-top:auto}
.level-sample .sv{max-width:150px; max-height:104px}
.level-foot{padding:10px 16px 14px; border-top:1px solid var(--rule); display:flex; flex-direction:column; gap:8px}
.level-foot .mono{font-size:14px}

@media (max-width:1100px){
  .levels{grid-template-columns:1fr; padding:0 0 0 40px; gap:16px}
  .levels::before{left:17px; right:auto; top:26px; bottom:26px; border-top:0; border-left:1px dashed var(--ink3)}
  .level{display:grid; grid-template-columns:minmax(0, 1fr) 190px}
  .level-num{position:absolute; left:-46px; top:12px; margin:0; width:36px; height:36px; font-size:20px}
  .level-top{grid-column:1; padding:14px 16px 10px}
  .level-sample{grid-column:2; grid-row:1 / span 2; border-top:0; border-left:1px solid var(--rule); align-items:center; margin:0}
  .level-foot{grid-column:1}
}
@media (max-width:600px){
  .level{grid-template-columns:1fr}
  .level-sample{grid-column:1; grid-row:auto; border-left:0; border-top:1px solid var(--rule)}
  .level ul{display:none}
}

.ex-list{display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr))}
.ex-item{
  display:flex; align-items:center; gap:10px; border:1px solid var(--ink); background:var(--sheet); box-shadow:1px 1px 0 var(--ink);
  padding:9px 12px; text-decoration:none; color:var(--ink); font-size:15.5px;
}
.ex-item:hover{background:var(--paper)}
.ex-item .st{
  width:26px; height:26px; flex:0 0 auto; display:grid; place-items:center; border:1px solid var(--rule); border-radius:50%;
  font-size:12.5px; font-weight:700; color:var(--ink3); font-variant-numeric:tabular-nums;
}
.ex-item.done .st{background:var(--ok); border-color:var(--ok); color:#fff}
.ex-item.tried .st{border-color:var(--s2); color:var(--s2-ink)}

.theory{display:grid; gap:14px 28px; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))}
.theory article{border-left:2px solid var(--ink); padding:2px 0 2px 14px}
.theory h4{font-size:21px; margin-bottom:4px}
.theory p{margin:0; font-size:16px; color:var(--ink2); line-height:1.6}

/* ---------- ariketa ---------- */
.ex-grid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:18px; margin-top:14px}
@media (max-width:900px){ .ex-grid{grid-template-columns:1fr} }
.ex-grid .v3d{height:min(58vh, 520px)}
.ex-task{font-size:17px}
.options{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px}
.option{
  border:1px solid var(--ink); background:var(--sheet); box-shadow:var(--edge); padding:14px; cursor:pointer; position:relative;
  display:flex; align-items:center; justify-content:center; min-height:150px; font-family:inherit;
}
.option:hover{background:var(--paper)}
.option:active{transform:translate(2px, 2px); box-shadow:none}
.option .sv{max-height:190px; max-width:100%}
.option .opt-l{position:absolute; left:8px; top:5px; font-family:var(--font-display); font-size:18px; color:var(--ink3)}
.option.right{border-color:var(--ok); box-shadow:3px 3px 0 var(--ok); background:color-mix(in srgb, var(--ok) 6%, var(--sheet))}
.option.wrong{border-color:var(--danger); box-shadow:none; opacity:.6}
.option:disabled{cursor:default; transform:none}
.feedback{margin-top:16px; padding:14px 18px; border:1px solid var(--ink); background:var(--sheet); display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.feedback .big{font-family:var(--font-display); font-size:40px; line-height:1}
.feedback.ok{border-color:var(--ok); box-shadow:3px 3px 0 var(--ok)} .feedback.ok .big{color:var(--ok)}
.feedback.bad{border-color:var(--danger); box-shadow:3px 3px 0 var(--danger)} .feedback.bad .big{color:var(--danger)}
.feedback.mid{border-color:var(--s2); box-shadow:3px 3px 0 var(--s2)} .feedback.mid .big{color:var(--s2-ink)}

.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:14px; color:var(--ink2); align-items:center}
.legend i{display:inline-block; width:24px; height:0; border-top:3px solid var(--ink); vertical-align:middle; margin-right:6px}
.legend i.h{border-top-style:dashed; border-top-width:2px}
.legend i.m{border-top-color:var(--ok)}
.legend i.x{border-top-color:var(--danger)}
.legend i.w{border-top-color:var(--s2)}

/* marrazteko sarea */
.drawhost{background:var(--sheet); border:1px solid var(--rule); padding:10px; touch-action:none}
.drawgrid{display:block; width:100%; height:auto; max-height:62vh; user-select:none; -webkit-user-select:none}
.drawhost[data-mode="vis"] .drawgrid, .drawhost[data-mode="hid"] .drawgrid{cursor:crosshair}
.drawhost[data-mode="erase"] .drawgrid{cursor:not-allowed}
.dg-line{stroke:var(--grid); stroke-width:.02}
.dg-dot{fill:var(--ink3)}
.dg-vis{stroke:var(--ink); stroke-width:.1; stroke-linecap:round}
.dg-hid{stroke:var(--ink); stroke-width:.065; stroke-dasharray:.22 .14}
.dg-preview{stroke:var(--s1); stroke-width:.08; stroke-linecap:round; opacity:.7}
.dg-preview.hid{stroke-dasharray:.22 .14}
.dg-preview.erase{stroke:var(--danger)}
.dg-missing{stroke:var(--ok); stroke-width:.16; opacity:.45; stroke-linecap:round}
.dg-extra{stroke:var(--danger); stroke-width:.16; opacity:.55; stroke-linecap:round}
.dg-wrong{stroke:var(--s2); stroke-width:.18; opacity:.55; stroke-linecap:round}

/* oinplano zenbakidua */
.hgrid{display:block; max-width:260px; margin:0 auto}
.hgrid rect{fill:var(--sheet); stroke:var(--ink); stroke-width:.04}
.hgrid rect.zero{fill:var(--paper); stroke:var(--rule)}
.hgrid text{font-family:var(--font-display); font-size:.56px; fill:var(--ink)}
.hgrid .front{font-family:var(--font-body); font-size:.26px; font-weight:700; fill:var(--s1)}

/* piezen txartelak */
.piece-thumb{height:130px; display:flex; align-items:center; justify-content:center; padding:10px; border-bottom:1px solid var(--rule); background:var(--paper)}
.piece-thumb .sv{max-height:110px; max-width:80%}

/* ---------- hasierako orria: hurrengo ariketa ---------- */
.hero-next{
  display:grid; grid-template-columns:minmax(260px, 380px) minmax(0, 1fr); gap:32px; align-items:center;
  border:1px solid var(--ink); box-shadow:4px 4px 0 var(--ink); background:var(--sheet);
  padding:26px 30px; margin-top:18px;
}
.hero-next.all-done{grid-template-columns:1fr}
.hero-next h2{font-size:clamp(30px, 4vw, 42px); line-height:1.1; margin:0 0 10px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.hn-num{
  display:inline-grid; place-items:center; width:48px; height:48px; border-radius:50%; flex:0 0 auto;
  background:var(--ink); color:var(--sheet); font-size:26px; line-height:1;
}
.hn-level{font-size:16px; color:var(--ink3); margin:0 0 4px}
.hn-ex{font-size:18px; color:var(--ink2); margin:0 0 16px; max-width:36em}
.hn-ex b{color:var(--ink)}
.hn-prog{display:flex; flex-direction:column; gap:6px; max-width:420px; font-size:15px; color:var(--ink2)}
.hn-actions{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:20px}
.btn.big{font-size:18px; padding:12px 22px}

/* pieza eta bere hiru bistak */
.hn-art{display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:14px; align-items:center}
.hn-iso .sv{max-height:200px}
.hn-views{display:grid; gap:10px}
.hn-view{margin:0; display:grid; grid-template-columns:64px 1fr; gap:10px; align-items:center}
.hn-view .sv{width:64px; max-height:56px}
.hn-view figcaption{font-size:14px; line-height:1.2}
.hn-view.vF .sv-vis, .hn-view.vF .sv-hid{stroke:var(--vF)}
.hn-view.vT .sv-vis, .hn-view.vT .sv-hid{stroke:var(--vT)}
.hn-view.vL .sv-vis, .hn-view.vL .sv-hid{stroke:var(--vL)}
.hn-view.vF figcaption{color:var(--vF)} .hn-view.vT figcaption{color:var(--s2-ink)} .hn-view.vL figcaption{color:var(--vL)}
/* une bakarra: piezaren ertzak marrazten dira, gero bistak agertzen dira */
.hn-iso .sv-vis{stroke-dasharray:1; stroke-dashoffset:1; animation:hn-draw .6s ease-out forwards; animation-delay:calc(var(--i, 0) * 22ms)}
.hn-view{opacity:0; animation:hn-in .45s ease-out forwards; animation-delay:calc(.35s + var(--j, 0) * .12s)}
@keyframes hn-draw{to{stroke-dashoffset:0}}
@keyframes hn-in{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
/* mugimendu murriztua: animaziorik ez, azken egoera berehala */
@media (prefers-reduced-motion: reduce){
  .hn-iso .sv-vis{stroke-dasharray:none; stroke-dashoffset:0; animation:none}
  .hn-view{opacity:1; animation:none}
}
@media (max-width:760px){
  .hero-next{grid-template-columns:1fr; padding:20px; gap:18px}
  .hn-iso .sv{max-height:150px}
}

.section-head{display:flex; align-items:baseline; gap:8px 14px; flex-wrap:wrap; margin:48px 0 8px}
.section-head h2{font-size:34px}
.section-head.minor{margin-top:60px; padding-top:22px; border-top:1px solid var(--rule)}
.section-head.minor h2{font-size:26px}
.pieces-compact{grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:14px}
.pieces-compact .proj{min-height:0; box-shadow:1px 1px 0 var(--ink)}
.pieces-compact .piece-thumb{height:86px; padding:6px}
.pieces-compact .piece-thumb .sv{max-height:72px}
.pieces-compact .proj-top{padding:9px 12px 8px}
.pieces-compact .proj-top h3{font-size:18px}
.pieces-compact .proj-foot a{padding:6px}

@media print{
  .v3d, .toolbar, .palette{display:none !important}
  .editor{grid-template-columns:1fr}
  .sheet{border:0}
}