/* =========================================================
   FEASIBILITY APP
   Same paper / ink as the Systems page.
   Left: inputs. Right: results.
   ========================================================= */

:root {
    --ink: #111;
    --paper: #e0dfda;
    --paper-2: #d6d5cf;
    --line: rgba(17, 17, 17, 0.18);
    --red: #8a3b3b;
    --green: #2f5e3e;
}

body.app {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Work Sans', sans-serif;
}

.header.solid { background: var(--paper); }

/* style.css styles every button; reset ours */
.app-main button {
    font: inherit;
    color: inherit;
    background: none;
    border: 1px solid var(--ink);
    padding: 0.6rem 1rem;
    cursor: pointer;
}

.app-main { padding: 9rem 6vw 6rem; }

.eyebrow {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.25rem;
    text-transform: uppercase;
    opacity: 0.55;
    margin-bottom: 0.8rem;
}

.small { font-size: 0.8rem; opacity: 0.6; }


/* ---------- title ---------- */

.app-head { max-width: 760px; margin-bottom: 3.5rem; }

.app-head h1 {
    font-family: 'Cinzel', serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 1.2rem;
}

.app-head p { line-height: 1.7; opacity: 0.85; }

.key { display: flex; gap: 1.6rem; flex-wrap: wrap; font-size: 0.85rem; }


/* ---------- Given / Assumed / Derived squares (same as Systems page) ---------- */

.sq {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    vertical-align: -0.05rem;
    margin: 0 0.35rem;
    flex-shrink: 0;
}
.sq.a { border: 1px dashed currentColor; }
.sq.g { border: 1px solid currentColor; background: currentColor; }
.sq.d { border: 1px solid currentColor; background: repeating-linear-gradient(135deg, currentColor 0 1px, transparent 1px 4px); }


/* ---------- layout ---------- */

.app-grid {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
}

@media (max-width: 860px) {
    .app-grid { grid-template-columns: 1fr; gap: 3rem; }
}


/* ---------- inputs ---------- */

.inputs { display: flex; flex-direction: column; gap: 2rem; position: sticky; top: 7rem; }

@media (max-width: 860px) { .inputs { position: static; } }

fieldset { border: none; border-top: 1px solid var(--line); padding: 1.2rem 0 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }

legend {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.1rem;
    padding-right: 0.8rem;
}

label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; }
label > span { display: flex; align-items: center; }

label.check { flex-direction: row; align-items: center; gap: 0.5rem; }

input[type=number], select {
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ink);
    padding: 0.35rem 0;
    width: 100%;
}

input[type=number]:focus, select:focus { outline: none; border-bottom-width: 2px; }

input[type=checkbox] { accent-color: var(--ink); width: 1rem; height: 1rem; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.guess { border-top-style: dashed; }


/* ---------- results ---------- */

.results { display: flex; flex-direction: column; gap: 2.6rem; min-width: 0; }

.verdict strong {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    line-height: 1;
    margin-bottom: 0.8rem;
}

.verdict p { margin: 0; line-height: 1.6; max-width: 620px; }

.verdict.short strong { color: var(--red); }


/* drawing */

.draw { border: 1px solid var(--line); background: var(--paper-2); }

#iso { width: 100%; height: auto; display: block; }

#iso .plot { fill: none; stroke: var(--ink); stroke-width: 1.2; }
#iso .setback { fill: none; stroke: var(--ink); stroke-width: 0.8; stroke-dasharray: 5 4; opacity: 0.6; }
#iso .face-top { fill: #f2f1ec; stroke: var(--ink); stroke-width: 0.8; }
#iso .face-l { fill: #bdbcb5; stroke: var(--ink); stroke-width: 0.8; }
#iso .face-r { fill: #cfcec8; stroke: var(--ink); stroke-width: 0.8; }
#iso .floor { fill: none; stroke: var(--ink); stroke-width: 0.4; opacity: 0.35; }
#iso .road { fill: none; stroke: var(--ink); stroke-width: 0.6; opacity: 0.4; }
#iso text { font-family: 'Work Sans', sans-serif; font-size: 11px; fill: var(--ink); }

.draw-tabs { display: flex; flex-wrap: wrap; border-top: 1px solid var(--line); }

.draw-tabs button { border: none; border-right: 1px solid var(--line); font-size: 0.8rem; padding: 0.7rem 1rem; opacity: 0.55; }
.draw-tabs button.on { opacity: 1; background: var(--paper); }
.draw-tabs button:disabled { cursor: default; text-decoration: line-through; }


/* key figures */

.figures {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1.6rem 2rem;
    margin: 0;
}

.figures div { border-top: 1px solid var(--line); padding-top: 0.7rem; }
.figures dt { font-size: 0.75rem; opacity: 0.6; display: flex; align-items: center; }
.figures dt .sq { margin-left: 0; }
.figures dd { margin: 0.3rem 0 0; font-size: 1.25rem; font-variant-numeric: tabular-nums; }


/* scenarios */

.scen { display: flex; flex-direction: column; gap: 1.2rem; }

.scen-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1rem; align-items: center; }

@media (max-width: 560px) { .scen-row { grid-template-columns: 1fr; gap: 0.4rem; } }

.scen-name { font-size: 0.85rem; }

.bars { display: flex; flex-direction: column; gap: 0.35rem; }

.bar { position: relative; height: 1.5rem; background: rgba(17, 17, 17, 0.07); }
.bar i { position: absolute; inset: 0 auto 0 0; background: var(--ink); max-width: 100%; transition: width 0.5s ease; }
.bar.money i { background: transparent; border: 1px solid var(--ink); }
.bar.over i { background: var(--red); border-color: var(--red); }
.bar span { position: relative; z-index: 1; font-size: 0.75rem; line-height: 1.5rem; padding-left: 0.5rem; mix-blend-mode: difference; color: #fff; }
.bar.money span { mix-blend-mode: normal; color: var(--ink); }

.scen-row.off { opacity: 0.4; }


/* lists */

.block ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; line-height: 1.6; }

.warn ul li { color: var(--red); }
.warn.empty ul li { color: var(--green); }

.assumed { list-style: none; padding-left: 0 !important; }
.assumed li::before { content: ""; display: inline-block; width: 0.7rem; height: 0.7rem; border: 1px dashed currentColor; margin-right: 0.6rem; vertical-align: -0.05rem; }

.foot { border-top: 1px solid var(--line); padding-top: 1.6rem; }