/* ALARA application surface — aligned with the BIMfabrik UI system. */
.alara-page .site-header { min-height: 56px; }
.alara-page .header-inner { min-height: 56px; }
.alara-page .brand-copy strong { font-size: 14px; letter-spacing: -.01em; }
.alara-page .brand-copy span { font-size: 11px; }
.alara-page .tool-main { padding: 32px 0 64px; }
.alara-page .tool-header { grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: 48px; align-items: start; padding-bottom: 24px; }
.alara-page .tool-header::after { content:""; grid-column:1/-1; display:block; min-height:260px; margin-top:4px; border:1px solid var(--border); border-radius:14px; background:#101522 url('/prototype-assets/lifecycle-cost.webp') center/cover no-repeat; box-shadow:0 18px 44px rgba(8,18,34,.12); }
.alara-page .breadcrumb { margin-bottom: 16px; font-size: 11px; }
.alara-page .eyebrow { margin-bottom: 8px; color: var(--muted-foreground); font-size: 11px; font-weight: 600; letter-spacing: .12em; }
.alara-page .tool-header h1 { max-width: 720px; font-size: clamp(24px, 3vw, 30px); font-weight: 650; line-height: 1.15; letter-spacing: -.025em; }
.alara-page .tool-header .lede { max-width: 680px; margin-top: 10px; font-size: 14px; line-height: 1.6; }
.alara-page .status-note { padding: 14px 16px; border-radius: 8px; background: var(--surface-subtle); }
.alara-page .status-note strong { font-size: 11px; }
.alara-page .status-note p { font-size: 11px; line-height: 1.55; }
.alara-page .tool-grid { grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); gap: 20px; padding-top: 24px; }
.alara-page .panel { overflow: hidden; border-radius: 8px; background: var(--surface); }
.alara-page .panel-header { min-height: 58px; padding: 13px 16px; }
.alara-page .panel-header h2,.alara-page .panel-header h3 { font-size: 13px; letter-spacing: -.01em; }
.alara-page .panel-header p { margin-top: 3px; font-size: 11px; line-height: 1.45; }
.alara-page .panel-body { padding: 16px; }
.alara-page .field-grid { gap: 14px 16px; }
.alara-page .field { gap: 6px; }
.alara-page .field label { font-size: 11px; font-weight: 600; }
.alara-page .field small { font-size: 10px; }
.alara-page input,.alara-page textarea { min-height: 36px; padding: 7px 10px; border-radius: 6px; background: var(--background); font-size: 13px; }
.alara-page textarea { min-height: 82px; line-height: 1.5; }
.alara-page .input-wrap input { padding-right: 112px; }
.alara-page .input-unit { right: 10px; font-size: 9px; }
.alara-page .form-actions { gap: 8px; margin-top: 16px; padding-top: 16px; }
.alara-page .form-actions .button { min-height: 36px; padding: 7px 12px; border-radius: 6px; font-size: 12px; }
.alara-page .results-stack { gap: 12px; top: 76px; }
.alara-page .metric { min-width: 0; padding: 15px 16px; }
.alara-page .metric span { font-size: 9px; line-height: 1.45; }
.alara-page .metric strong { margin-top: 7px; overflow-wrap: anywhere; font-size: clamp(17px, 2vw, 21px); line-height: 1.2; }
.alara-page .decision-block { position: relative; padding: 14px 16px 15px; border-left-width: 3px; background: var(--surface-subtle); }
.alara-page .decision-block[data-state="positive"] { background: color-mix(in oklab, var(--success) 7%, var(--surface)); }
.alara-page .decision-block[data-state="warning"] { background: color-mix(in oklab, var(--warning) 8%, var(--surface)); }
.alara-page .decision-block[data-state="error"] { background: color-mix(in oklab, var(--destructive) 7%, var(--surface)); }
.alara-page .decision-label { font-size: 9px; font-weight: 650; letter-spacing: .1em; }
.alara-page .decision-block h3 { margin: 6px 0; font-size: 14px; line-height: 1.35; }
.alara-page .decision-block p { font-size: 11px; line-height: 1.55; }
.alara-page .summary-output { min-height: 220px; padding: 14px 16px; background: var(--surface-subtle); font-size: 10px; line-height: 1.65; }
.alara-page .method-section { margin-top: 56px; padding: 48px 0 0; border-top: 1px solid var(--border); border-bottom: 0; }
.alara-page .method-section .section-intro h2 { max-width: 440px; font-size: clamp(22px, 3vw, 30px); line-height: 1.15; letter-spacing: -.025em; }
.alara-page .reference-list li { gap: 14px; padding: 14px 0; }
.alara-page .reference-list strong { font-size: 12px; }
.alara-page .reference-list p,.alara-page .disclaimer { font-size: 11px; line-height: 1.55; }
.alara-page .alara-footer { border-top: 1px solid var(--border); border-bottom: 0; }
@media (max-width: 1100px) { .alara-page .tool-grid { grid-template-columns: 1fr; } .alara-page .results-stack { position: static; } }
@media (max-width: 900px) { .alara-page .tool-header { grid-template-columns: 1fr; gap: 20px; } .alara-page .status-note { max-width: 680px; } .alara-page .tool-header::after{min-height:220px;} }
@media (max-width: 620px) { .alara-page .tool-main { padding: 24px 0 48px; } .alara-page .tool-grid { gap: 12px; padding-top: 18px; } .alara-page .field-grid,.alara-page .metric-grid { grid-template-columns: 1fr; } .alara-page .field-wide { grid-column: auto; } .alara-page .metric,.alara-page .metric:nth-child(odd) { border-right: 0; border-bottom: 1px solid var(--border); } .alara-page .metric:last-child { border-bottom: 0; } .alara-page .form-actions .button { width: 100%; } .alara-page .tool-header::after{min-height:180px;border-radius:10px;} }