/* UCEL Rooftop review tool — house palette (shared with hoist): Open Sans, #2EA3F2 accent, #f4f4f4 page, white cards. */
:root { --accent:#2EA3F2; --accent-dark:#1a8fd1; --accent-soft:#e6f4fd; --bg:#f4f4f4; --card:#fff; --fg:#333; --muted:#666; --line:#e2e2e2;
        --look:#166534; --look-bg:#dcfce7; --no:#991b1b; --no-bg:#fee2e2; --unsure:#92400e; --unsure-bg:#fef3c7; --construction:#3730a3; --construction-bg:#e0e7ff; --dark:#111; }
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.5 'Open Sans', Arial, sans-serif; min-height:100vh; display:flex; flex-direction:column; }
a { color:var(--accent-dark); }
h1 { font-size:1.5rem; font-weight:700; margin:0 0 .25rem; }
h2 { font-size:1.1rem; font-weight:700; margin:0 0 .5rem; }
.subtitle, .muted { color:var(--muted); font-size:.9rem; } .subtitle { margin:0 0 1.25rem; } .small { font-size:.85rem; }
.error { color:var(--no); font-weight:600; }

/* header */
.site-header { background:var(--card); box-shadow:0 1px 0 rgba(0,0,0,.08); position:sticky; top:0; z-index:30; }
.site-header-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:1rem; height:64px; padding:0 1rem; }
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--fg); font-size:1rem; white-space:nowrap; }
.brand img { height:38px; width:auto; } .brand b { font-weight:700; }
.navlinks { display:none; gap:.25rem; margin-left:1rem; }
.navlink { padding:.5rem .9rem; border-radius:3px; text-decoration:none; color:var(--fg); font-weight:600; font-size:.9rem; }
.navlink:hover { background:var(--accent-soft); } .navlink.active { background:var(--accent); color:#fff; }
.menubtn { margin-left:auto; width:auto; padding:.5rem .9rem; }
.accent-bar { height:4px; background:var(--accent); }
#menu { position:fixed; top:72px; right:1rem; left:1rem; max-width:360px; margin-left:auto; z-index:40; display:flex; flex-direction:column; gap:4px; padding:.5rem;
        background:var(--card); border:1px solid var(--line); border-radius:6px; box-shadow:0 8px 30px rgba(0,0,0,.18); }
.menu a { display:block; padding:.75rem .9rem; border-radius:4px; color:var(--fg); text-decoration:none; font-weight:600; }
.menu a:hover { background:var(--accent-soft); } .menu-who { padding:.5rem .9rem; color:var(--muted); font-size:.85rem; border-top:1px solid var(--line); margin-top:4px; }
.wrap { flex:1; width:100%; max-width:1200px; margin:0 auto; padding:1.25rem 1rem 2rem; }
.site-footer { text-align:center; color:var(--muted); font-size:.75rem; padding:1rem; }
.flash { background:var(--accent-soft); border-left:3px solid var(--accent); padding:.6rem 1rem; margin-bottom:1rem; border-radius:3px; }
.flash p { margin:0; }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.7rem 1.2rem; background:var(--accent); color:#fff; border:2px solid var(--accent);
       border-radius:3px; font:600 .95rem 'Open Sans', Arial, sans-serif; text-decoration:none; cursor:pointer; transition:background .15s, color .15s; line-height:1.2; }
.btn:hover { background:var(--accent-dark); border-color:var(--accent-dark); color:#fff; }
.btn.secondary { background:var(--card); color:var(--accent-dark); } .btn.secondary:hover { background:var(--accent-soft); }
.btn.ghost { background:transparent; border-color:var(--line); color:var(--fg); } .btn.ghost:hover { background:#eee; }
.btn.small { padding:.4rem .75rem; font-size:.82rem; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.actions { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:.5rem 0; } .actions.small { margin:.4rem 0 0; }
.pagehead { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; }
.count { font-size:.9rem; font-weight:600; color:var(--accent-dark); background:var(--accent-soft); padding:.15rem .6rem; border-radius:999px; vertical-align:middle; }

/* cards & tiles */
.card { background:var(--card); border-radius:3px; border-top:3px solid var(--accent); box-shadow:0 2px 8px rgba(0,0,0,.06); padding:1.25rem; margin:0 0 1rem; }
.card.dark { background:var(--dark); border-top-color:var(--accent); padding:.5rem; }
.card.auth { max-width:440px; margin:2rem auto; }
.details summary { cursor:pointer; font-weight:600; } .details ul.plain { margin:.75rem 0 0; padding-left:1.2rem; } .details li { margin:.35rem 0; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:.75rem; margin:0 0 1rem; }
.tile { background:var(--card); border-radius:3px; border-top:3px solid var(--accent); box-shadow:0 2px 8px rgba(0,0,0,.06); padding:.9rem 1rem; }
.tile .num { font-size:1.8rem; font-weight:700; line-height:1.1; } .tile .lbl { color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; }
.pills { display:flex; flex-wrap:wrap; gap:.35rem; margin:.4rem 0; }
.pill { display:inline-block; padding:.15rem .6rem; border-radius:999px; background:#eee; color:var(--fg); font-size:.78rem; font-weight:600; }
.pill.look, .pill.ev-strong { background:var(--look-bg); color:var(--look); } .pill.no { background:var(--no-bg); color:var(--no); }
.pill.unsure, .pill.ev-some { background:var(--unsure-bg); color:var(--unsure); } .pill.construction { background:var(--construction-bg); color:var(--construction); }
.pill.warn { background:#fef3c7; color:#92400e; } .pill.ev-none { background:#eee; color:var(--muted); }
.why { color:var(--muted); font-size:.85rem; margin:.3rem 0; border-left:3px solid var(--line); padding-left:.6rem; }
.chips { display:flex; flex-wrap:wrap; gap:.4rem; margin:.5rem 0 .75rem; }
.chip { display:inline-block; padding:.3rem .7rem; border:1px solid var(--line); border-radius:999px; background:#fafafa; color:var(--fg); text-decoration:none; font-size:.82rem; }
.chip:hover { border-color:var(--accent); background:var(--accent-soft); }

/* leads */
.cards { display:grid; gap:1rem; }
.lead { display:grid; grid-template-columns:160px 1fr; gap:1rem; }
.lead .thumb img { width:160px; height:160px; object-fit:cover; border-radius:3px; background:#000; display:block; }
.lead h2 { margin-bottom:.1rem; } .lead h2 .muted { font-weight:400; font-size:.85rem; }

/* tables */
.tablewrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:.9rem; }
td, th { padding:.5rem .6rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; }
.org-head { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-bottom:.25rem; } .org-head h2 { margin:0; }
td.seat { white-space:nowrap; } .seat-state { display:block; font-size:.78rem; font-weight:600; color:var(--accent-dark); min-height:1.1em; }
td.seat .btn { margin:.15rem .15rem 0 0; }

/* forms */
form label { display:block; margin:.9rem 0 .35rem; font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
form input[type=text], form input[type=email] { width:100%; padding:.65rem .875rem; font:1rem 'Open Sans', Arial, sans-serif; border:1px solid var(--line); border-radius:3px; color:var(--fg); }
form input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(46,163,242,.2); }
form .btn { margin-top:1rem; width:100%; }

/* review page */
.bar { display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:baseline; padding:.6rem 1rem; }
.bar .name { font-weight:700; font-size:1.1rem; } .facts { color:var(--muted); font-size:.85rem; } .showall { margin-left:auto; color:var(--muted); font-size:.85rem; }
.stage { position:relative; }
.imgwrap { position:relative; width:100%; max-height:76vh; overflow:auto; background:#000; }
.imgwrap img { display:block; width:100%; height:auto; user-select:none; cursor:zoom-in; }
.imgwrap.zoomed img { width:200%; cursor:zoom-out; }
.outline { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.imgwrap.zoomed .outline { width:200%; height:auto; }
.outline polygon { fill:none; stroke:#ffeb3b; stroke-width:9; stroke-linejoin:round; vector-effect:non-scaling-stroke; opacity:.5; }
.imgtools { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; padding:.5rem .25rem 0; font-size:.85rem; color:#ccc; }
.imgtools .facts { color:#aaa; } .imgtools .btn.secondary { background:#1b1b1b; border-color:#444; color:#eee; } .imgtools .btn.ghost { color:#ddd; border-color:#444; }
.buttons { display:flex; gap:.5rem; margin:.75rem 0 .5rem; flex-wrap:wrap; }
.buttons button, .typepick button { flex:1 1 120px; padding:.9rem .5rem; font:600 1rem 'Open Sans', Arial, sans-serif; border:0; border-radius:3px; color:#fff; background:#555; cursor:pointer; }
.buttons .look { background:var(--look); } .buttons .no { background:var(--no); } .buttons .unsure { background:var(--unsure); } .buttons .construction { background:var(--construction); }
.buttons .wrong { flex:0 0 auto; background:#777; }
.buttons button:hover, .typepick button:hover { filter:brightness(1.1); }
kbd { opacity:.7; font-size:.75rem; margin-left:4px; font-family:inherit; border:1px solid rgba(255,255,255,.4); border-radius:3px; padding:0 4px; }
.typepick { display:flex; gap:.4rem; align-items:center; margin:.4rem 0; flex-wrap:wrap; } .typepick span { flex:1 1 100%; font-weight:600; } .typepick button { background:var(--accent); padding:.7rem .4rem; font-size:.9rem; }
.note input { width:100%; padding:.6rem .875rem; border-radius:3px; border:1px solid var(--line); font:1rem 'Open Sans', Arial, sans-serif; }
.hidden, .gone { display:none !important; }
.verdict { margin-top:.75rem; padding:.9rem 1.1rem; background:var(--card); border-radius:3px; border-top:3px solid var(--accent); box-shadow:0 2px 8px rgba(0,0,0,.06); }
.verdict h3 { margin:.2rem 0; font-size:1rem; } .verdict p { margin:.25rem 0; } .verdict ul { margin:.25rem 0 0 1.1rem; padding:0; word-break:break-all; }
#v-evidence.strong { color:var(--look); } #v-evidence.some { color:var(--unsure); } #v-evidence.none { color:var(--muted); }
#status { min-height:1.3em; }
.done { margin-top:1rem; padding:1.25rem; background:var(--card); border-radius:3px; border-top:3px solid var(--accent); box-shadow:0 2px 8px rgba(0,0,0,.06); }
.done h2 { margin:0 0 .4rem; }

@media (min-width:760px) { .navlinks { display:flex; } }
@media (max-width:600px) { body { font-size:14px; } .lead { grid-template-columns:1fr; } .lead .thumb img { width:100%; height:200px; } .buttons button { padding:1rem .3rem; } kbd { display:none; }
                            .site-header-inner { height:56px; } .brand span { display:none; } #menu { top:64px; } .card { padding:1rem; } }