/* Site-level interface for two LIO CMS pilots; Core stays untouched. */
:root{--lio-wrapper-max:1320px}
body{background:#f7f8f6;color:#283329}
body:has(.pilot--sly){--accent:#277463;--border:#d6e5de;--muted:#60716a;background:#f6f9f7;color:#23372f}
body:has(.pilot--smet){--accent:#a65b2c;--border:#eadfd1;--muted:#766f65;background:#faf8f5;color:#302e29}
.site-header{background:#fff;border-bottom:1px solid var(--border)}
.site-header .wrap{min-height:75px}
.site-header .brand{font-size:24px;font-weight:700;letter-spacing:-.045em}
.site-header nav{align-items:center;gap:clamp(12px,2vw,30px)}
.site-header nav a{font-size:14px;font-weight:550}
.site-header nav a:hover{color:var(--accent)}
.site-footer{background:transparent;border-top:1px solid var(--border)}
.page-hero{padding:clamp(38px,5vw,66px) 0 26px;grid-template-columns:1fr}
.page-hero__content{gap:16px}
.page-hero h1{font-weight:500;letter-spacing:-.044em;font-size:clamp(38px,4.8vw,68px);max-width:1000px}
.page-hero__summary{color:var(--muted);max-width:950px;line-height:1.6}
.content{padding:22px 0 90px;font-size:16px;border-top:0}
.content h2,.content h3{font-weight:560;letter-spacing:-.025em}
.pilot{--pilot-surface:#fff;--pilot-border:var(--border);--pilot-faint:#f0f6f2;font-size:16px}
.pilot--smet{--pilot-faint:#fbf0e6}
.pilot a{text-decoration:none}
.pilot-intro{background:linear-gradient(118deg,var(--pilot-faint),#fff 85%);border:1px solid var(--pilot-border);border-radius:24px;padding:clamp(25px,4vw,52px);max-width:100%}
.pilot-intro h2{font-size:clamp(28px,3.3vw,44px);line-height:1.16;max-width:800px;margin:18px 0 16px}
.pilot-intro p{max-width:810px;font-size:clamp(16px,1.25vw,19px);line-height:1.65;color:var(--muted);margin:0}
.pilot-tag{font-size:12px;text-transform:uppercase;font-weight:730;letter-spacing:.095em;color:var(--accent)}
.pilot-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.pilot-button{border:1px solid var(--accent);display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:49px;padding:12px 20px;background:var(--accent);color:#fff!important;font-size:15px;font-weight:680;border-radius:12px;cursor:pointer;line-height:1.25;text-align:center;text-decoration:none!important;transition:transform .14s,background .14s}
.pilot-button:hover{transform:translateY(-1px);filter:brightness(.93)}
.pilot-button:focus-visible,.pilot :is(input,select):focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 30%,white);outline-offset:2px}
.pilot-button--quiet{background:transparent!important;color:var(--accent)!important}
.pilot-button--wide{width:100%}
.pilot-button--secondary{border-color:var(--pilot-border);background:#fff;color:var(--accent)!important}
.pilot-section{padding-top:clamp(36px,5vw,64px)}
.pilot-section-heading h2,.pilot-section>h2{font-size:clamp(25px,2.6vw,36px);line-height:1.2;margin:9px 0 23px}
.pilot-overline{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--accent)}
.pilot-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pilot-card{border:1px solid var(--pilot-border);border-radius:18px;padding:clamp(22px,2.5vw,31px);background:#fff;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;color:inherit!important;transition:border-color .16s,transform .16s}
a.pilot-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.pilot-card__icon{display:inline-flex;align-items:center;justify-content:center;width:39px;height:39px;border-radius:12px;background:var(--pilot-faint);color:var(--accent);font-weight:750}
.pilot-card h3{font-size:20px;line-height:1.28;margin:7px 0 0;font-weight:630}
.pilot-card p{font-size:15px;line-height:1.6;color:var(--muted);margin:0;flex:1}
.pilot-card>span:last-child:not(.pilot-card__icon){font-size:13px;font-weight:700;color:var(--accent)}
.pilot-card--planned{opacity:.7}
.pilot-note{border:1px solid var(--pilot-border);background:#fff;border-radius:17px;margin-top:32px;padding:22px 26px;max-width:100%}
.pilot-note strong{display:block;color:var(--accent);font-size:15px}
.pilot-note p{margin:6px 0 0;color:var(--muted)}
.pilot-tool-head{max-width:850px;margin-bottom:24px}
.pilot-tool-head h2{font-size:clamp(27px,3vw,43px);line-height:1.2;margin:12px 0 12px}
.pilot-tool-head p{color:var(--muted);line-height:1.65;margin:0}
.pilot-app-grid{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(340px,1.1fr);gap:22px;align-items:start}
.pilot-form,.pilot-result{border:1px solid var(--pilot-border);border-radius:20px;background:#fff;padding:clamp(20px,2.4vw,32px);min-width:0}
.pilot-form{display:grid;gap:19px}
.pilot-field{display:grid;gap:7px;min-width:0}
.pilot-field label{font-size:14px;font-weight:650;color:#353d36}
.pilot-field :is(input,select){width:100%;min-width:0;min-height:47px;padding:11px 12px;border-radius:10px;border:1px solid #d2d7d1;background:#fff;color:#202b25;font-family:inherit;font-size:15px;line-height:1.2;appearance:auto}
.pilot-field :is(input,select):focus{border-color:var(--accent)}
.pilot-fields-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pilot-form-hint{font-size:13px;line-height:1.5;color:var(--muted);margin:-5px 0 0}
.pilot-result{min-height:300px;position:sticky;top:15px}
.pilot-result__empty{display:grid;place-items:start;align-content:center;min-height:235px;color:var(--muted)}
.pilot-result__empty span{font-size:41px;color:var(--accent);font-weight:700}
.pilot-result__empty h3{margin:10px 0 5px;color:#27382e;font-size:23px}
.pilot-result__empty p{margin:0;max-width:400px}
.pilot-result h3{font-size:22px;line-height:1.3;margin:0 0 12px}
.pilot-result h4{font-size:16px;margin:19px 0 10px}
.pilot-status{border-radius:999px;font-size:12px;font-weight:720;padding:6px 11px;display:inline-flex;background:var(--pilot-faint);color:var(--accent);margin-bottom:15px}
.pilot-status--alert{background:#fff2e6;color:#93521e}
.pilot-result ol{padding-left:22px;line-height:1.6;margin:6px 0 12px}
.pilot-result li{margin:8px 0}
.pilot-result p{font-size:14px;line-height:1.65}
.pilot-caveat{border-left:3px solid #d9a26c;padding:12px 15px;background:#fff9f1;border-radius:0 10px 10px 0;font-size:14px;line-height:1.55;margin:14px 0}
.pilot-source{font-size:13px;margin-top:16px;padding-top:12px;border-top:1px solid var(--pilot-border)}
.pilot-source a{color:var(--accent);text-decoration:underline}
.pilot-results-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pilot-kpi{background:var(--pilot-faint);padding:15px;border-radius:13px}
.pilot-kpi small{display:block;color:var(--muted);font-size:12px;line-height:1.4}
.pilot-kpi strong{font-size:26px;display:block;color:#2a362d;line-height:1.3;margin-top:6px}
.pilot-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px}
.pilot-table th{font-size:12px;text-transform:uppercase;letter-spacing:.045em;color:var(--muted);font-weight:650;text-align:left}
.pilot-table th,.pilot-table td{padding:11px 7px;border-bottom:1px solid var(--pilot-border);overflow-wrap:anywhere;vertical-align:top}
.pilot-table td:last-child,.pilot-table th:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.pilot-actions--result{margin-top:18px}
.pilot-note-small{font-size:12px!important;line-height:1.55!important;color:var(--muted);margin:16px 0 0}
.pilot-message-error{background:#fff2f0;color:#9c3423;border:1px solid #eebdb7;border-radius:10px;padding:13px 16px;font-size:14px}
@media(max-width:950px){.pilot-app-grid{grid-template-columns:1fr}.pilot-result{position:static}.pilot-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.site-header .wrap{align-items:center;gap:10px;padding-top:16px;padding-bottom:16px}.site-header nav{gap:9px 16px}.site-header nav a{font-size:13px}.page-hero{padding:28px 0 16px}.pilot-cards{grid-template-columns:1fr}.pilot-fields-two{grid-template-columns:1fr 1fr;gap:10px}.pilot-form,.pilot-result{padding:19px}.pilot-intro{padding:25px}.pilot-actions{display:grid}.pilot-button{width:100%}.pilot-result__empty{min-height:170px}}
@media print{.site-header,.site-footer,.pilot-form,.pilot-tool-head,.pilot-section,.pilot-actions--result,.pilot-intro{display:none!important}.pilot-app-grid{display:block}.pilot-result{border:0;padding:0}.pilot{font-size:12pt}.content{padding:0}.pilot-note-small{display:block}}

/* SmetoList P0.2: compact and responsive cutting diagram. */
.pilot-wall-plan{padding-left:20px!important;font-size:14px;line-height:1.7}
.pilot-wall-plan li{margin:6px 0!important}
.pilot-cut-list{display:grid;gap:9px;margin:13px 0}
.pilot-cut-row{display:grid;grid-template-columns:38px minmax(0,1fr) 95px;gap:8px;align-items:center}
.pilot-cut-label,.pilot-cut-rest{font-size:12px;color:var(--muted);white-space:nowrap}
.pilot-cut-track{height:36px;display:flex;align-items:stretch;min-width:0;background:#f0f1eb;border:1px solid var(--pilot-border);border-radius:8px;overflow:hidden}
.pilot-cut-segment{display:flex;align-items:center;justify-content:center;background:var(--accent);color:white;font-size:11px;min-width:0;border-right:2px solid white;overflow:hidden;white-space:nowrap}
@media(max-width:650px){.pilot-cut-row{grid-template-columns:31px minmax(0,1fr)}.pilot-cut-rest{grid-column:2;text-align:right;margin-top:-5px}}


/* Material guides: custom blocks inside a wide LIO wrapper, not narrow cards. */
.material-checklist{display:grid;gap:12px;margin:18px 0 30px;padding-left:23px}
.material-checklist li{padding:8px 10px 8px 4px;line-height:1.6;max-width:820px}
.pilot-cards--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.material-guide>.pilot-note a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.material-guide>.pilot-note p{max-width:900px}
@media(max-width:760px){.pilot-cards--two{grid-template-columns:1fr}}
@media(max-width:420px){.pilot-field input,.pilot-field select{font-size:16px}.pilot-fields-two{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.pilot-button,.pilot-card{transition:none}}


/* Better mobile interaction and keyboard access. */
@media(max-width:950px){.pilot-result{scroll-margin-top:18px}}
@media(max-width:650px){.pilot-field :is(input,select){font-size:16px}.pilot-actions--result{display:grid;grid-template-columns:1fr;gap:10px}}
@media(max-width:390px){.pilot-fields-two{grid-template-columns:1fr}}
.pilot-card:focus-visible,.pilot :is(a,button):focus-visible{outline:3px solid var(--accent);outline-offset:3px}


/* Window slope panel cutting: compact, readable across breakpoints. */
.slope-sheets{display:grid;gap:12px}
.slope-sheet{padding:14px 17px;border:1px solid var(--pilot-border);background:var(--pilot-faint);border-radius:12px}
.slope-sheet h5{font-size:14px;font-weight:650;margin:0 0 8px}
.slope-sheet ol{margin:0;padding-left:22px;font-size:14px;line-height:1.6}
.slope-sheet li{margin:3px 0}
@media(max-width:390px){.slope-sheet{padding:12px}.pilot-results-grid{grid-template-columns:1fr}}

/* SmetoList P0.7: calculator form legibility and printer-friendly shopping sheets. */
.pilot-form-heading{font-size:17px!important;font-weight:600!important;margin:6px 0 -5px!important;padding-top:11px;border-top:1px solid var(--pilot-border)}
.pilot--smet .pilot-result h4{margin-top:24px}.pilot--smet .pilot-result .pilot-table{margin-bottom:12px}
.pilot--smet .pilot-field label{line-height:1.45}
@media(max-width:420px){.pilot--smet .pilot-field :is(input,select){min-height:50px}}
@media print{.pilot-result{position:static!important}.pilot-result .pilot-source{font-size:10pt}.page-hero{padding:0}.page-hero h1{font-size:21pt}.pilot-caveat{break-inside:avoid}}

/* SmetoList P0.7: real rectangular placements from slope solver, not a decorative picture. */
.slope-diagram{display:block;width:100%;height:auto;max-height:260px;border-radius:8px;background:#fff;border:1px solid var(--pilot-border);margin:7px 0 13px}
.slope-piece{fill:#e8af78;stroke:#98582b;stroke-width:.4;vector-effect:non-scaling-stroke}
.slope-piece--1{fill:#cbdcc9}.slope-piece--2{fill:#afcbd3}
@media print{.slope-diagram{max-height:190px}.slope-sheet{break-inside:avoid}}

/* P0.8: compact procurement export, legible on narrow phones and printable. */
.pilot--smet .pilot-procurement-table small{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-top:5px;font-weight:400}
.pilot--smet .pilot-procurement-table td:first-child{width:68%}
.pilot--smet .pilot-procurement-table td:last-child{white-space:normal}
.tilearea-diagram{display:block;width:100%;height:auto;max-height:275px;background:#f5f3ef;border:1px solid var(--pilot-border);border-radius:10px;margin:12px 0}
.tilearea-full{fill:#b3c9bc;stroke:#527e69;stroke-width:.003;vector-effect:non-scaling-stroke}
.tilearea-cut{fill:#efc18a;stroke:#92592f;stroke-width:.003;vector-effect:non-scaling-stroke}
.tilearea-opening{fill:white;stroke:#9b8b7a;stroke-width:.006;vector-effect:non-scaling-stroke}
.pilot--smet .pilot-table-wrap{max-width:100%;overflow-x:auto}
.pilot--smet .pilot-actions--result{gap:9px}
@media(max-width:650px){.pilot--smet .pilot-procurement-table{font-size:13px}.pilot--smet .pilot-procurement-table th,.pilot--smet .pilot-procurement-table td{padding:10px 4px}.pilot--smet .pilot-procurement-table small{font-size:11px}}
@media print{.tilearea-diagram{max-height:210px;page-break-inside:avoid}.pilot--smet .pilot-procurement-table{break-inside:avoid}}

/* P0.8 mobile QA: avoid duplicate hero headings and reveal optional materials on demand. */
.pilot--smet .pilot-tool-head h2{display:none}
.pilot--smet .pilot-tool-head{margin-bottom:18px}
.pilot-optional{border:1px solid var(--pilot-border);border-radius:12px;padding:13px 15px;background:#fdfaf7}
.pilot-optional>summary{font-size:15px;font-weight:650;color:var(--accent);cursor:pointer;list-style-position:inside}
.pilot-optional[open]>summary{margin-bottom:16px}
.pilot-optional .pilot-fields-two{margin-top:12px}
.pilot-optional .pilot-form-hint{margin:12px 0}
@media print{.pilot-optional{display:none}}
