/* Roof review — the proving ground */
.rr-gate{display:flex;gap:22px;align-items:center;padding:14px 18px;border:1px solid var(--line);border-left:3px solid var(--warn,#b8860b);background:var(--bg-1);margin-bottom:16px;border-radius:6px;flex-wrap:wrap}
.rr-gate.met{border-left-color:var(--good)}
.rr-gate-n{display:flex;flex-direction:column;line-height:1.1;font-size:23px;font-weight:600;font-variant-numeric:tabular-nums}
.rr-gate-n span{font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
.rr-gate p{margin:0;font-size:13px;color:var(--text-dim);flex:1;min-width:220px}
.rr-warn{padding:9px 12px;border-left:3px solid var(--warn,#b8860b);background:var(--bg-1);font-size:13px;margin-bottom:14px;border-radius:4px}
.rr-main{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:20px;align-items:start}
.rr-frame{position:relative;background:var(--bg-1);border:1px solid var(--line);border-radius:6px;overflow:hidden;line-height:0}
.rr-frame img{width:100%;height:auto;display:block}
.rr-ring{position:absolute;border:2.5px solid #ef2d2d;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.35);pointer-events:none}
.rr-ring.approved{border-color:#2dbb7f}
.rr-ring.corrected{border-color:#e0a13a}
.rr-ring.removed{display:none}
.rr-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 2px;font-size:13px}
.rr-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:0;max-height:calc(100vh - 80px);overflow:auto}
.rr-h{font-size:13.5px;margin:0 0 8px}
.rr-mark{padding:10px 0;border-top:1px solid var(--line-2,var(--line))}
.rr-mark:first-of-type{border-top:0}
.rr-mark.removed{opacity:.5}
.rr-mark-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:13.5px}
.rr-sells{margin:3px 0 0;color:var(--text-dim)}
.rr-seg{display:flex;margin-top:8px}
.rr-seg button{font-size:11.5px;padding:3px 10px}
.rr-seg button.good:hover{color:var(--good);border-color:var(--good)}
.rr-seg button.bad:hover{color:var(--bad,#b3261e);border-color:var(--bad,#b3261e)}
.rr-reasons{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.rr-reason{text-align:left;font-size:12px;padding:5px 9px;border:1px solid var(--line);background:var(--bg-0);border-radius:4px;cursor:pointer;font-family:inherit}
.rr-reason:hover{border-color:var(--brand);color:var(--brand)}
.rr-line{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:5px 0;border-top:1px solid var(--line-2,var(--line))}
.rr-line:first-of-type{border-top:0}
.rr-needs{flex-basis:100%;font-size:11.5px}
.rr-total{display:flex;justify-content:space-between;margin-top:9px;padding-top:9px;border-top:2px solid var(--line);font-size:15px}
.rr-reroof{margin:9px 0 0;font-size:12px;color:var(--text-dim);font-style:italic}
.rr-labels{display:flex;flex-direction:column;gap:5px}
.rr-label{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:4px 0;border-bottom:1px solid var(--line-2,var(--line))}
.rr-rate{font-variant-numeric:tabular-nums;font-weight:600}
.rr-rate.good{color:var(--good)}.rr-rate.warn{color:var(--warn,#b8860b)}.rr-rate.bad{color:var(--bad,#b3261e)}
.rr-rate.thin{color:var(--text-dim);font-weight:500}
@media (max-width:1000px){.rr-main{grid-template-columns:1fr}.rr-side{position:static;max-height:none}}

/* The trustworthiness stack, made visible while judging. Every number here answers a different
   question, and the screen has to keep them apart or it is lying the same way the data used to. */
.rr-level{display:flex;align-items:baseline;gap:9px;padding:8px 11px;margin:0 2px 2px;border:1px solid var(--line);border-radius:5px;background:var(--bg-1);font-size:12.5px;color:var(--text-dim);flex-wrap:wrap}
.rr-level b{color:var(--text);font-weight:600}
.rr-lv{flex:none;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:3px;border:1px solid currentColor;font-variant-numeric:tabular-nums}
.rr-lv.lv1,.rr-lv.lv2{color:var(--bad,#b3261e)}
.rr-lv.lv3{color:var(--warn,#b8860b)}
.rr-lv.lv4,.rr-lv.lv5{color:var(--good)}
/* A call the photo cannot support must not read like a finding. */
.rr-ring.beyond{border-style:dashed;border-color:var(--warn,#b8860b);opacity:.8}
.rr-sig{display:flex;flex-wrap:wrap;gap:5px;margin:5px 0 4px}
.rr-chip{font-size:10.5px;letter-spacing:.04em;padding:1.5px 6px;border-radius:3px;border:1px solid var(--line);color:var(--text-dim);font-variant-numeric:tabular-nums;cursor:help;white-space:nowrap}
.rr-chip.sure{border-color:currentColor}
.rr-chip.sure.s1,.rr-chip.sure.s2{color:var(--bad,#b3261e)}
.rr-chip.sure.s3{color:var(--warn,#b8860b)}
.rr-chip.sure.s4,.rr-chip.sure.s5{color:var(--good)}
.rr-chip.seen{color:var(--brand);border-color:var(--brand)}
.rr-beyond{margin:4px 0 0;padding:6px 9px;border-left:2px solid var(--warn,#b8860b);background:var(--bg-1);font-size:12px;line-height:1.45;border-radius:0 4px 4px 0}
@media (max-width:720px){.rr-main{grid-template-columns:minmax(0,1fr)}.rr-side{position:static;max-height:none}}

/* Point at a finding and its circle answers. Without this the description and the circle are two
   unrelated lists and he has to guess which is which. */
.rr-ring{pointer-events:auto;cursor:pointer;transition:border-width .12s ease,box-shadow .18s ease,opacity .18s ease}
.rr-ring.dim{opacity:.28}
.rr-ring.on{border-width:4px;box-shadow:0 0 0 2px rgba(0,0,0,.5),0 0 16px 4px rgba(239,45,45,.6);animation:rr-pulse 1s ease-out 2}
.rr-ring.on.approved{box-shadow:0 0 0 2px rgba(0,0,0,.5),0 0 16px 4px rgba(45,187,127,.6)}
.rr-ring.on.corrected{box-shadow:0 0 0 2px rgba(0,0,0,.5),0 0 16px 4px rgba(224,161,58,.6)}
.rr-ring.on.beyond{border-style:dashed;box-shadow:0 0 0 2px rgba(0,0,0,.5),0 0 16px 4px rgba(184,134,11,.65)}
@keyframes rr-pulse{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
.rr-mark{cursor:pointer;transition:background .15s ease,box-shadow .15s ease}
.rr-mark.on{background:var(--bg-1);box-shadow:inset 3px 0 0 var(--brand)}
.rr-mark.on .rr-mark-h b{color:var(--brand)}
@media (prefers-reduced-motion:reduce){.rr-ring.on{animation:none}.rr-ring{transition:none}}

/* Zoom, and marking what the AI missed — the half of accuracy that cannot be measured without him. */
.rr-tools{display:flex;align-items:center;gap:10px;padding:0 2px 8px;flex-wrap:wrap}
.rr-hint{flex:1;min-width:140px}
.rr-zoombtns button{font-size:12px;padding:3px 10px;font-variant-numeric:tabular-nums}
.rr-frame{overflow:hidden}
.rr-zoom{position:relative;line-height:0;transition:transform .18s ease}
.rr-frame.adding{cursor:crosshair}
.rr-frame.adding .rr-ring{pointer-events:none}
.btn.rr-arm{border-color:var(--brand);color:var(--brand);font-weight:600}
.rr-ring.pending{border-color:var(--brand);border-style:dashed;animation:rr-pulse 1s ease-out infinite}
.rr-picker{border-left:3px solid var(--brand)}
.rr-picklist{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0}
.rr-pick{font-size:11.5px;padding:3px 8px;border:1px solid var(--line);background:var(--bg-0);border-radius:4px;cursor:pointer;font-family:inherit}
.rr-pick:hover{border-color:var(--brand);color:var(--brand)}
.rr-missed{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:5px 0 0;padding:5px 8px;border-left:2px solid var(--brand);background:var(--bg-1);font-size:12px;border-radius:0 4px 4px 0}

/* Tight shapes: a pin for one slate, a rectangle for a run, the old ring for what the AI drew. */
.rr-ring.rr-rect{border-radius:3px}
.rr-ring.rr-pin{width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border-width:3px;background:rgba(239,45,45,.22)}
.rr-ring.rr-pin.on{width:22px;height:22px;margin:-11px 0 0 -11px}
.rr-ring.rr-pin.pending,.rr-ring.rr-rect.pending{border-color:var(--brand);border-style:dashed}
.rr-band{position:absolute;border:2px dashed var(--brand);background:rgba(45,125,210,.14);border-radius:3px;pointer-events:none}
.rr-tighten{margin-top:6px}
.rr-tighten .btn{font-size:11.5px;padding:3px 9px}
.rr-why{width:100%;box-sizing:border-box;margin:6px 0;padding:7px 9px;border:1px solid var(--line);border-radius:4px;
  background:var(--bg-0);color:var(--text);font-family:inherit;font-size:12.5px;line-height:1.45;resize:vertical}
.rr-why:focus{outline:none;border-color:var(--brand)}
.rr-why::placeholder{color:var(--text-dim);opacity:.75}

/* Type what you see. The list is a suggestion, not a gate. */
.rr-type{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--line);border-radius:4px;
  background:var(--bg-0);color:var(--text);font-family:inherit;font-size:14px;margin-top:6px}
.rr-type:focus{outline:none;border-color:var(--brand)}
.rr-sugg{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 0}
.rr-newname{margin:6px 0 0}
.rr-picker-act{display:flex;gap:6px;margin-top:4px}

/* The measured roof, in 3D. Every line typed and dimensioned — a valley answers "V-01, 14 ft". */
.rr3{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.rr3-stage{background:var(--bg-1);border:1px solid var(--line);border-radius:6px;overflow:hidden;min-height:460px;height:62vh;cursor:grab}
.rr3-stage:active{cursor:grabbing}
.rr3-side{display:flex;flex-direction:column;gap:14px}
.rr3-legend{display:flex;flex-direction:column;gap:3px;margin-top:10px}
.rr3-row{display:grid;grid-template-columns:12px 1fr auto auto;gap:8px;align-items:center;font-size:12.5px;padding:2px 0}
.rr3-dot{width:10px;height:10px;border-radius:2px}
.rr3-t{text-transform:capitalize}
.rr3-n{font-variant-numeric:tabular-nums;font-weight:600}
.rr3-c{font-size:11px}
.rr3-hint{margin-top:10px}
.rr3-sel{margin:0;font-size:13.5px;text-transform:capitalize}
.rr-viewseg{display:inline-flex;margin-right:8px}
.rr-viewseg button{font-size:11.5px;padding:3px 10px}
.rr-viewseg button.on{background:var(--bg-1);color:var(--brand);border-color:var(--brand);font-weight:600}
.rr-3dbtn{margin-right:6px}
@media (max-width:860px){.rr3{grid-template-columns:minmax(0,1fr)}}

/* ---- Rule book ---- */
.rb .rb-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 14px; }
.rb .rb-q { flex:1 1 260px; min-width:220px; padding:8px 10px; border:1px solid var(--line, #d9d6d0); border-radius:8px; background:var(--card, #fff); color:inherit; }
.rb .rb-sys { padding:8px 10px; border:1px solid var(--line, #d9d6d0); border-radius:8px; background:var(--card, #fff); color:inherit; }
.rb .rb-h2 { font-size:15px; margin:22px 0 8px; letter-spacing:.01em; }
.rb .rb-rule { margin-bottom:10px; }
.rb .rb-rule.off { opacity:.55; }
.rb .rb-head { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.rb .rb-id { font:600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; padding:4px 6px; border-radius:6px; background:rgba(120,110,95,.12); }
.rb .rb-sev { font-size:11px; padding:3px 7px; border-radius:999px; background:#eee; }
.rb .rb-sev.s4, .rb .rb-sev.s5 { background:#f4dcd6; } .rb .rb-sev.s3 { background:#f6ebd2; }
.rb .rb-off { font-size:11px; padding:3px 7px; border-radius:999px; background:#ddd; }
.rb .rb-norm { margin:8px 0 6px; max-width:70ch; }
.rb .rb-params { margin:0 0 8px; padding-left:18px; font-size:12.5px; color:var(--muted,#6b665e); columns:2; column-gap:24px; }
.rb .rb-dl { display:grid; grid-template-columns:150px 1fr; gap:6px 14px; margin:0; font-size:13.5px; }
.rb .rb-dl dt { color:var(--muted,#6b665e); font-size:12px; text-transform:uppercase; letter-spacing:.04em; padding-top:2px; }
.rb .rb-dl dd { margin:0; max-width:78ch; }
.rb .rb-chips { display:flex; flex-wrap:wrap; gap:6px; }
.rb .rb-chip { font-size:12px; padding:3px 8px; border-radius:999px; background:rgba(120,110,95,.12); }
.rb .rb-chip.lab { background:#e3ecf7; }
.rb .rb-era { border-left:3px solid #c9a86a; padding-left:10px; }
.rb .rb-note { margin-top:10px; display:grid; gap:6px; }
.rb .rb-note textarea { width:100%; box-sizing:border-box; padding:8px 10px; border:1px solid var(--line,#d9d6d0); border-radius:8px; background:var(--card,#fff); color:inherit; font:inherit; resize:vertical; }
.rb .rb-note-btns { display:flex; gap:8px; }
.rb .rb-table { width:100%; border-collapse:collapse; font-size:13px; }
.rb .rb-table th, .rb .rb-table td { text-align:left; vertical-align:top; padding:8px 8px; border-bottom:1px solid var(--line,#e6e3dd); }
.rb .rb-table tr.off { opacity:.5; }
.rb .rb-owner li { margin:0 0 8px; max-width:80ch; }
@media (max-width: 720px) { .rb .rb-dl { grid-template-columns:1fr; } .rb .rb-params { columns:1; } }

/* marks link to the rules that name them */
.rr-rules { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:4px 0 2px; }
.rr-rule { font:600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; padding:4px 6px; border-radius:6px; background:rgba(120,110,95,.12); color:inherit; text-decoration:none; }
.rr-rule:hover { background:#e3ecf7; }

/* ---- Diagnostics by item (Photos › Diagnostics) ---- */
.dg .dg-wrap { display:grid; grid-template-columns:270px minmax(0,1fr); gap:18px; align-items:start; }
.dg .dg-list { display:grid; gap:6px; position:sticky; top:12px; max-height:calc(100vh - 24px); overflow:auto; }
.dg .dg-item { text-align:left; display:grid; gap:2px; padding:8px 10px; border:1px solid var(--line,#d9d6d0); border-radius:8px; background:var(--card,#fff); color:inherit; cursor:pointer; font:inherit; }
.dg .dg-item.on { border-color:#8a7a5c; background:rgba(120,110,95,.10); }
.dg .dg-item.off { opacity:.55; }
.dg .dg-main { border:1px solid var(--line,#e6e3dd); border-radius:10px; padding:16px 18px; background:var(--card,#fff); }
.dg .dg-main.off { opacity:.7; }
.dg .dg-head { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.dg .dg-head h2 { margin:0; font-size:20px; }
.dg .dg-what { max-width:80ch; margin:8px 0 10px; }
.dg .dg-links { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.dg .dg-sec { margin-top:16px; }
.dg .dg-sec h3 { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted,#6b665e); margin:0 0 6px; }
.dg .dg-sec ul { margin:0; padding-left:20px; max-width:90ch; }
.dg .dg-sec li { margin:3px 0; }
.dg .dg-steps { margin:0; padding-left:22px; }
.dg .dg-steps > li { margin:0 0 12px; max-width:95ch; }
.dg .dg-where { font-weight:600; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.dg .dg-where .rb-chips { display:inline-flex; }
.dg .dg-look { margin:2px 0; }
.dg .dg-if { padding:6px 10px; border-left:3px solid #c9a86a; background:rgba(201,168,106,.10); border-radius:0 6px 6px 0; margin-top:4px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.dg .dg-if .dg-cause { flex-basis:100%; }
.dg .dg-arrow { color:var(--muted,#6b665e); font-size:12px; }
.dg .dg-act { font-size:12px; padding:2px 8px; border-radius:999px; background:#e8f1e6; white-space:nowrap; }
.dg .dg-two { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.dg .dg-scroll { overflow-x:auto; }
.dg .rb-era { margin-top:14px; }
.rr-rule.dg { background:#e8f1e6; }
@media (max-width: 860px) { .dg .dg-wrap { grid-template-columns:1fr; } .dg .dg-list { position:static; max-height:none; } .dg .dg-two { grid-template-columns:1fr; } }
.dg .dg-seg{display:flex;gap:4px;flex-wrap:wrap}
.dg .dg-prop ul{padding-left:20px}
.dg .dg-prop li{margin:4px 0}