/* ============================================================
   IMECA3D — Material guide pages (PLA, PETG, ABS, Nylon...)
   Loaded only on pages whose settings block says:  css: material-guide
   Shared styles (menu, footer, buttons, sections) live in style.css
   ============================================================ */
:root { --green: #22c55e; --amber: #f59e0b; --red: #ef4444; }
/* ---- Breadcrumb ---- */
.breadcrumb{background:var(--dark);border-bottom:1px solid var(--border-dark);padding:12px 0;}
.breadcrumb__inner{display:flex;align-items:center;gap:8px;font-size:0.8rem;color:rgba(255,255,255,0.4);}
.breadcrumb__inner a{color:rgba(255,255,255,0.4);transition:color 0.15s;}
.breadcrumb__inner a:hover{color:rgba(255,255,255,0.8);}
.breadcrumb__inner span{color:rgba(255,255,255,0.7);}

/* ---- Hero ---- */
.guide-hero{background:var(--dark);padding:56px 0 0;overflow:hidden;}
.guide-hero__inner{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:end;}
.guide-hero__label{font-size:0.75rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}
.guide-hero__title{color:#fff;margin-bottom:16px;}
.guide-hero__desc{color:rgba(255,255,255,0.6);font-size:1.05rem;max-width:480px;margin-bottom:28px;}
.guide-hero__tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px;}
.guide-hero__tag{padding:5px 14px;border-radius:100px;font-size:0.78rem;font-weight:600;border:1.5px solid rgba(255,255,255,0.15);color:rgba(255,255,255,0.65);}
.guide-hero__tag--accent{border-color:rgba(232,90,26,0.5);color:var(--accent);background:rgba(232,90,26,0.08);}
.guide-hero__visual{align-self:end;display:flex;justify-content:center;}
.guide-hero__visual svg{width:100%;max-width:320px;}
@media(max-width:820px){
  .guide-hero__inner{grid-template-columns:1fr;}
  .guide-hero__visual{display:none;}
}

/* ---- Sticky TOC ---- */
.toc-bar{background:var(--light-2);border-bottom:1px solid var(--border);position:sticky;top:var(--nav-h);z-index:90;}
.toc-bar__inner{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;}
.toc-bar__inner::-webkit-scrollbar{display:none;}
.toc-link{padding:14px 20px;font-size:0.82rem;font-weight:600;color:var(--text-3);white-space:nowrap;border-bottom:2px solid transparent;transition:all 0.15s;}
.toc-link:hover,.toc-link.active{color:var(--accent);border-bottom-color:var(--accent);}

/* ---- Characteristics grid ---- */
.chars-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media(max-width:640px){.chars-grid{grid-template-columns:1fr;}}
.char-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 22px;}
.char-card__label{font-size:0.8rem;font-weight:600;color:var(--text-2);margin-bottom:10px;}
.char-card__bar-wrap{height:6px;background:var(--light-2);border-radius:3px;overflow:hidden;margin-bottom:6px;}
.char-card__bar{height:100%;border-radius:3px;transition:width 1s ease;}
.bar--excellent{background:var(--green);width:95%;}
.bar--good{background:#3b82f6;width:70%;}
.bar--moderate{background:var(--amber);width:45%;}
.bar--poor{background:var(--red);width:18%;}
.char-card__rating{font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;}
.rating--excellent{color:var(--green);}
.rating--good{color:#3b82f6;}
.rating--moderate{color:var(--amber);}
.rating--poor{color:var(--red);}

/* ---- Two-col layout ---- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
@media(max-width:768px){.two-col{grid-template-columns:1fr;}}

/* ---- Spec table ---- */
.spec-table{width:100%;border-collapse:collapse;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);font-size:0.88rem;}
.spec-table th{background:var(--dark);color:#fff;padding:12px 18px;text-align:left;font-family:var(--font-head);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;}
.spec-table td{padding:12px 18px;color:var(--text-2);border-bottom:1px solid var(--border);vertical-align:top;}
.spec-table tr:last-child td{border-bottom:none;}
.spec-table tbody tr:nth-child(even){background:var(--light);}
.spec-table td:first-child{font-weight:600;color:var(--text);width:48%;}

/* ---- Settings cards ---- */
.settings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:720px){.settings-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:420px){.settings-grid{grid-template-columns:1fr;}}
.setting-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;}
.setting-card__icon{font-size:1.4rem;margin-bottom:8px;}
.setting-card__label{font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-3);margin-bottom:4px;}
.setting-card__value{font-family:var(--font-head);font-size:1rem;font-weight:700;color:var(--text);}
.setting-card__note{font-size:0.75rem;color:var(--text-3);margin-top:2px;}

/* ---- Design tips ---- */
.tips-list{display:flex;flex-direction:column;gap:14px;}
.tip{display:flex;gap:14px;align-items:flex-start;}
.tip__icon{width:36px;height:36px;border-radius:50%;background:rgba(232,90,26,0.1);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;margin-top:2px;}
.tip__body h4{font-size:0.92rem;margin-bottom:2px;}
.tip__body p{font-size:0.84rem;color:var(--text-2);line-height:1.6;}

/* ---- Applications ---- */
.app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:720px){.app-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:420px){.app-grid{grid-template-columns:1fr;}}
.app-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;display:flex;align-items:flex-start;gap:12px;}
.app-card__icon{font-size:1.4rem;flex-shrink:0;}
.app-card h4{font-size:0.9rem;margin-bottom:3px;}
.app-card p{font-size:0.8rem;color:var(--text-2);line-height:1.5;}

/* ---- Warning box ---- */
.warning-box{background:rgba(232,90,26,0.06);border:1px solid rgba(232,90,26,0.2);border-left:4px solid var(--accent);border-radius:var(--radius-lg);padding:22px 24px;}
.warning-box h3{font-size:0.95rem;margin-bottom:10px;color:var(--text);}
.warning-list{display:flex;flex-direction:column;gap:8px;}
.warning-item{display:flex;align-items:flex-start;gap:10px;font-size:0.85rem;color:var(--text-2);}
.warning-item::before{content:"⚠";font-size:0.85rem;flex-shrink:0;margin-top:1px;}

/* ---- Alternatives strip ---- */
.alt-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px;}
@media(max-width:640px){.alt-strip{grid-template-columns:1fr;}}
.alt-card{background:var(--light);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px;display:flex;align-items:center;gap:12px;}
.alt-card__badge{background:var(--dark);color:#fff;font-family:var(--font-head);font-size:0.75rem;font-weight:700;padding:4px 10px;border-radius:6px;flex-shrink:0;}
.alt-card p{font-size:0.8rem;color:var(--text-2);line-height:1.5;}

/* ---- CTA ---- */
.guide-cta{background:var(--dark);padding:64px 0;text-align:center;}
.guide-cta h2{color:#fff;margin-bottom:14px;}
.guide-cta p{color:rgba(255,255,255,0.6);margin-bottom:32px;max-width:480px;margin-left:auto;margin-right:auto;}
.cta-btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}

/* ---- Scroll reveal ---- */
.js .reveal{opacity:0;transform:translateY(32px);transition:opacity 0.65s cubic-bezier(0.16,1,0.3,1),transform 0.65s cubic-bezier(0.16,1,0.3,1);}
.reveal.visible{opacity:1;transform:none;}
.js .reveal-left{opacity:0;transform:translateX(-32px);transition:opacity 0.65s cubic-bezier(0.16,1,0.3,1),transform 0.65s cubic-bezier(0.16,1,0.3,1);}
.reveal-left.visible{opacity:1;transform:none;}
.js .reveal-scale{opacity:0;transform:scale(0.93);transition:opacity 0.55s cubic-bezier(0.16,1,0.3,1),transform 0.55s cubic-bezier(0.16,1,0.3,1);}
.reveal-scale.visible{opacity:1;transform:scale(1);}
.stagger-1{transition-delay:0.05s!important;}
.stagger-2{transition-delay:0.12s!important;}
.stagger-3{transition-delay:0.19s!important;}
.stagger-4{transition-delay:0.26s!important;}
.stagger-5{transition-delay:0.33s!important;}
.stagger-6{transition-delay:0.40s!important;}

/* ---- Card hover elevation ---- */
.char-card{transition:transform 0.22s ease,box-shadow 0.22s ease,border-color 0.22s ease;}
.char-card:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(232,90,26,0.1);border-color:rgba(232,90,26,0.3);}
.app-card{transition:transform 0.22s ease,box-shadow 0.22s ease,border-color 0.22s ease;}
.app-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,0.1);border-color:rgba(232,90,26,0.25);}
.setting-card{transition:transform 0.22s ease,box-shadow 0.22s ease,border-color 0.22s ease;}
.setting-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,0.1);border-color:rgba(232,90,26,0.25);}
.alt-card{transition:transform 0.22s ease,box-shadow 0.22s ease;}
.alt-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,0.12);}
.tip{transition:transform 0.22s ease;}
.tip:hover{transform:translateX(4px);}

/* ---- 3D tilt (applied via JS) ---- */
.tilt-card{transform-style:preserve-3d;will-change:transform;}

/* ---- Button ripple ---- */
.btn{position:relative;overflow:hidden;}
.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple-out 0.55s ease-out forwards;background:rgba(255,255,255,0.25);pointer-events:none;}
@keyframes ripple-out{to{transform:scale(4);opacity:0;}}



/* ---- Section label accent bar ---- */
.section-label{position:relative;display:inline-flex;align-items:center;gap:8px;}
.section-label::before{content:'';display:inline-block;width:14px;height:2px;background:var(--accent);border-radius:2px;flex-shrink:0;}

/* ---- Smooth hero tag entrance ---- */
.guide-hero__label,.guide-hero__title,.guide-hero__desc,.guide-hero__tags,.guide-hero__tag{opacity:0;animation:hero-in 0.7s cubic-bezier(0.16,1,0.3,1) forwards;}
.guide-hero__label{animation-delay:0.1s;}
.guide-hero__title{animation-delay:0.2s;}
.guide-hero__desc{animation-delay:0.32s;}
.guide-hero__tags{animation-delay:0.44s;}
@keyframes hero-in{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}

/* ---- Hero SVG float ---- */
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.guide-hero__visual svg{animation:float 5s ease-in-out infinite;}

/* ---- Progress bar on scroll ---- */
#scrollBar{position:fixed;top:0;left:0;height:3px;background:var(--accent);z-index:200;width:0%;transition:width 0.1s linear;pointer-events:none;}

/* ---- Accessibility: no motion for visitors who turn animations off ---- */
@media (prefers-reduced-motion: reduce){
  .js .reveal,.js .reveal-left,.js .reveal-scale{opacity:1;transform:none;transition:none;}
  .guide-hero__label,.guide-hero__title,.guide-hero__desc,.guide-hero__tags,.guide-hero__tag{opacity:1;animation:none;}
  .guide-hero__visual svg{animation:none;}
}

/* ---- Added for PETG / ABS / Nylon guides ---- */
.bar--verygood{background:#84cc16;width:82%;}
.rating--verygood{color:#65a30d;}
.char-card__note{font-size:0.72rem;color:var(--text-3);}
.guide-note{color:var(--text-2);font-size:0.92rem;line-height:1.7;margin:16px 0;}
.spec-table--wide td:first-child{width:28%;}
.table-wrap-plain{overflow-x:auto;}
.tip__body h3{font-size:0.95rem;margin-bottom:2px;}
a.alt-card{color:inherit;}
a.alt-card:hover .alt-card__badge{background:var(--accent);}
.guide-hero__full{font-size:0.62em;display:inline-block;margin-top:6px;color:rgba(255,255,255,0.85);}

/* ============================================================
   Material guide v2 layout (16 Oct 2026): key figures, rating list,
   clearance chart, thermal scale, settings cards, tip cards
   ============================================================ */
.guide-hero{padding-bottom:0;}
.guide-keys{margin-top:48px;border-top:1px solid var(--border-dark);background:rgba(255,255,255,0.02);}
.guide-keys__inner{display:grid;grid-template-columns:repeat(5,1fr);}
.guide-key{padding:22px 18px;border-left:1px solid var(--border-dark);}
.guide-key:first-child{border-left:none;padding-left:0;}
.guide-key__label{display:block;font-size:0.7rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.45);margin-bottom:6px;}
.guide-key__value{font-family:var(--font-head);font-size:1.25rem;color:#fff;font-variant-numeric:tabular-nums;}
@media(max-width:860px){.guide-keys__inner{grid-template-columns:repeat(2,1fr);}.guide-key{border-left:none;border-top:1px solid var(--border-dark);padding-left:0;}.guide-key:nth-child(-n+2){border-top:none;}}

.guide-overview{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start;}
.glance-card{background:var(--light);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px;position:sticky;top:calc(var(--nav-h) + 70px);}
.glance-card h3{font-size:1rem;margin-bottom:14px;}
.glance-card .btn{width:100%;justify-content:center;margin-top:20px;}
@media(max-width:900px){.guide-overview{grid-template-columns:1fr;gap:28px;}.glance-card{position:static;}}

.rating-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:8px 28px;}
.rating-list{list-style:none;margin:0;padding:0;}
.rating-row{display:grid;grid-template-columns:minmax(0,1.3fr) 1fr 86px;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--border);}
.rating-list:last-child .rating-row:last-child{border-bottom:none;}
.rating-row__label{font-size:0.88rem;font-weight:600;color:var(--text);}
.rating-row__label small{display:block;font-weight:400;font-size:0.72rem;color:var(--text-3);margin-top:2px;}
.rating-row__track{height:6px;background:var(--light-2);border-radius:3px;overflow:hidden;}
.rating-row__track .char-card__bar{display:block;height:100%;border-radius:3px;transition:width 1s ease;}
.rating-row__value{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;text-align:right;}
.rating-key{font-size:0.75rem;color:var(--text-3);margin-top:12px;}
@media(max-width:820px){.rating-grid{grid-template-columns:1fr;padding:4px 18px;}.rating-list:first-child .rating-row:last-child{border-bottom:1px solid var(--border);}}

.accuracy-badge{display:inline-flex;flex-direction:column;background:var(--dark);color:#fff;border-radius:var(--radius);padding:14px 20px;margin-bottom:8px;}
.accuracy-badge span{font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.55);}
.accuracy-badge strong{font-family:var(--font-head);font-size:1.4rem;color:var(--accent);}
.fit-chart{background:var(--light);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px;}
.fit-chart h3{font-size:1rem;margin-bottom:18px;}
.fit-rows{display:flex;flex-direction:column;gap:14px;}
.fit-row,.fit-axis{display:grid;grid-template-columns:130px 1fr 96px;gap:12px;align-items:center;}
.fit-row__label{font-size:0.85rem;font-weight:600;color:var(--text);}
.fit-row__track{position:relative;height:22px;background:var(--white);border:1px solid var(--border);border-radius:4px;}
.fit-row__range{position:absolute;top:3px;bottom:3px;background:var(--accent);border-radius:3px;min-width:6px;}
.fit-row__value{font-size:0.82rem;color:var(--text-2);font-variant-numeric:tabular-nums;text-align:right;}
.fit-axis{margin-top:8px;font-size:0.7rem;color:var(--text-3);}
.fit-axis__ticks{display:flex;justify-content:space-between;}
@media(max-width:520px){.fit-row,.fit-axis{grid-template-columns:96px 1fr;}.fit-row__value{grid-column:2;text-align:left;margin-top:-8px;}.fit-axis>span:last-child{display:none;}}

.t-scale{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:56px 22px 18px;}
.t-scale__bar{position:relative;height:14px;border-radius:7px;background:linear-gradient(90deg,#3b82f6 0%,#22c55e 35%,#f59e0b 60%,#ef4444 100%);opacity:0.9;}
.t-band{position:absolute;top:-6px;bottom:-6px;background:repeating-linear-gradient(45deg,rgba(12,12,15,0.35) 0 4px,transparent 4px 8px);border:1px dashed var(--dark);border-radius:3px;}
.t-marker{position:absolute;top:-8px;bottom:-8px;width:3px;margin-left:-1px;background:var(--dark);border-radius:2px;}
.t-marker--range{width:auto;margin-left:0;background:rgba(12,12,15,0.25);border-left:3px solid var(--dark);border-right:3px solid var(--dark);}
.t-marker__label{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:0.75rem;font-weight:700;color:var(--text);background:var(--white);padding:2px 6px;border-radius:4px;border:1px solid var(--border);}
.t-marker--hdt .t-marker__label{bottom:auto;top:calc(100% + 6px);}
.t-scale__ticks{display:flex;justify-content:space-between;font-size:0.7rem;color:var(--text-3);margin-top:34px;}
.t-scale__legend{font-size:0.75rem;color:var(--text-2);margin-top:12px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;}
.t-legend{display:inline-block;width:14px;height:10px;border-radius:2px;margin-right:4px;vertical-align:middle;}
.t-legend--hdt,.t-legend--tg{background:var(--dark);width:3px;}
.t-legend--band{background:repeating-linear-gradient(45deg,rgba(12,12,15,0.4) 0 3px,transparent 3px 6px);border:1px dashed var(--dark);}

.settings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:8px;}
.setting-card--wide{grid-column:span 2;}
@media(max-width:520px){.setting-card--wide{grid-column:auto;}}
.setting-card__value{font-size:1.02rem;line-height:1.35;}
.setting-card__note{font-size:0.78rem;line-height:1.5;margin-top:6px;}

.tip-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.tip-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px 26px;position:relative;}
.tip-card__num{font-family:var(--font-head);font-size:0.85rem;font-weight:700;color:var(--accent);letter-spacing:0.05em;}
.tip-card h3{font-size:1rem;margin:6px 0 8px;}
.tip-card p{font-size:0.88rem;line-height:1.65;color:var(--text-2);}
@media(max-width:760px){.tip-grid{grid-template-columns:1fr;}}

.use-grid{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;}
.use-card{background:var(--light);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px 16px 44px;font-size:0.9rem;color:var(--text);position:relative;line-height:1.5;}
.use-card::before{content:'✓';position:absolute;left:16px;top:15px;color:var(--accent);font-weight:700;}
.summary-box{margin-top:40px;background:var(--dark);border-radius:var(--radius-lg);padding:32px 36px;}
.summary-box p{color:rgba(255,255,255,0.8);font-size:1.02rem;line-height:1.75;max-width:860px;}
.settings-grid{grid-auto-flow:dense;}