/* Header */
.top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; padding-block-end: 16px }
.brand { display: flex; align-items: center; gap: 10px }
.brand svg { flex: none }
.tag { font-size: .7rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line); color: var(--muted); padding: 2px 7px; border-radius: 99px }
.tabs { display: flex; gap: 4px; background: var(--sunken); padding: 4px; border-radius: 12px; flex-wrap: wrap }
.tab { border: 0; background: transparent; padding: 7px 14px; border-radius: 9px; font-weight: 600; cursor: pointer; color: var(--muted) }
.tab[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow) }

/* Scan: intake */
.intake { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: stretch }
.drop { border: 1.5px dashed var(--line); border-radius: var(--r); padding: 18px; display: flex; flex-direction: column; gap: 12px; justify-content: center; background: var(--surface) }
.drop.over { border-color: var(--accent); background: var(--accent-soft) }
.context { padding: 18px; display: flex; flex-direction: column; gap: 8px; justify-content: center }
.context strong { font-family: var(--f-display); font-variation-settings: 'wdth' 82; font-size: 1.05rem }
.notice { font-size: .88rem; padding: 10px 12px; border-radius: 8px; background: var(--medium-soft); color: var(--ink) }

/* Scan: summary */
.summary { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 0 }
.summary > div { padding: 16px 18px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.summary > div:first-child { border-left: 0 }
.score { font-family: var(--f-display); font-variation-settings: 'wdth' 75; font-weight: 800; font-size: 3rem; line-height: 1 }
.score small { font-size: 1.1rem; font-weight: 650; color: var(--muted) }
.big { font-family: var(--f-display); font-variation-settings: 'wdth' 80; font-weight: 750; font-size: 1.7rem; line-height: 1.1 }
.meter { height: 6px; border-radius: 99px; background: var(--sunken); overflow: hidden }
.meter > span { display: block; height: 100% }
.sev-row { display: flex; gap: 8px; flex-wrap: wrap }

.scanbody { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; align-items: start }
.rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 12px) }
.pagelist { list-style: none; margin: 0; padding: 6px }
.pagebtn { width: 100%; text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 8px; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: center }
.pagebtn:hover { background: var(--sunken) }
.pagebtn[aria-pressed="true"] { background: var(--accent-soft) }
.pagebtn .meter { grid-column: 1 / -1 }
.pagebtn .rep { font-size: .72rem; color: var(--muted); grid-column: 1 / -1 }
.rules { padding: 6px 12px 12px }
.rules summary { cursor: pointer; font-weight: 650; padding: 8px 0 }
.rule-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 0; font-size: .86rem }
.rule-item input { accent-color: var(--accent) }
.filters { display: flex; gap: 6px; flex-wrap: wrap }
.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 4px 11px; font-size: .82rem; font-weight: 600; cursor: pointer }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink) }

.vcard { overflow: hidden }
.vhead { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--line); align-items: baseline }
.vhead .meta { font-size: .8rem; color: var(--muted) }
.finding { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 14px; padding: 14px 18px; border-top: 1px solid var(--line) }
.finding:first-of-type { border-top: 0 }
.finding .what { font-weight: 650 }
.finding .fix { font-size: .9rem }
.finding .path { color: var(--muted); overflow-wrap: anywhere }
.fe { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .88rem }
.fe .arrow { color: var(--muted) }
.empty { padding: 36px 18px; text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center }

/* Theme builder */
.builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 16px; align-items: start }
fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px }
legend { padding: 0; margin-bottom: 4px }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.field > span { font-size: .78rem; font-weight: 600; color: var(--muted) }
.field input[type="text"], .field input[type="number"], .field select, textarea { border: 1px solid var(--line); background: var(--surface); border-radius: 7px; padding: 6px 8px; width: 100%; min-width: 0 }
.colour { display: flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 7px; padding: 3px 6px 3px 3px; background: var(--surface) }
.colour input[type="color"] { width: 28px; height: 26px; border: 0; padding: 0; background: none; cursor: pointer; flex: none }
.colour input[type="text"] { border: 0; padding: 3px 2px; font-family: var(--f-mono); font-size: .8rem; width: 100%; min-width: 0; background: transparent }
.toggle { display: flex; gap: 8px; align-items: center; font-size: .88rem }
.toggle input { accent-color: var(--accent); width: 16px; height: 16px }
.divider { border: 0; border-top: 1px solid var(--line); margin: 6px 0 }
.presets { display: flex; flex-direction: column; gap: 12px }
.preset { border: 1px solid var(--line); border-radius: 9px; padding: 12px; display: flex; flex-direction: column; gap: 10px }
.sticky { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 12px) }
pre.code { margin: 0; background: var(--sunken); border: 1px solid var(--line); border-radius: 8px; padding: 12px; font-family: var(--f-mono); font-size: .76rem; line-height: 1.55; overflow: auto; max-height: 380px; white-space: pre }

/* Preview canvas (styled by the theme being built) */
.canvas { border-radius: 9px; padding: 14px; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line) }
.pv-card { border-radius: var(--pv-radius, 8px); padding: 12px 12px 12px 14px; position: relative; min-width: 0; overflow: hidden }
.pv-card .bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px }
.pv-card .lab { font-size: 11px }
.pv-card .val { font-weight: 700; line-height: 1.1; overflow-wrap: anywhere }
.pv-card .pn { font-size: 10px; opacity: .75; margin-top: 4px }
.pv-chart { grid-column: 1 / -1; border-radius: var(--pv-radius, 8px); padding: 12px }
.pv-chart svg { width: 100%; height: auto; display: block }

/* KPI tab */
.kpi { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; align-items: start }
.tryit { display: flex; gap: 12px; align-items: center; flex-wrap: wrap }
.tryit input[type="range"] { flex: 1 1 200px; accent-color: var(--accent) }
.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: .92rem }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 8px; font-size: .88rem; font-weight: 600; z-index: 10 }

@media (max-width: 900px) {
  .intake, .scanbody, .builder, .kpi { grid-template-columns: minmax(0, 1fr) }
  .rail, .sticky { position: static }
  .summary { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .summary > div:nth-child(3) { border-left: 0 }
  .summary > div:nth-child(n+3) { border-top: 1px solid var(--line) }
}
@media (max-width: 520px) {
  .wrap { padding-inline: 16px }
  .finding { grid-template-columns: minmax(0, 1fr) }
  .canvas { grid-template-columns: minmax(0, 1fr) }
  .score { font-size: 2.4rem }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important } }

/* Housestyle additions */
.brand { color: inherit; text-decoration: none }
.wordmark { font-family: var(--f-display); font-variation-settings: 'wdth' 78; font-weight: 800; font-size: 1.35rem; letter-spacing: -.015em; line-height: 1.1 }
.appfoot { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: .88rem }