.str-widget .str-open{background:#153e66;color:white;border:0;border-radius:6px;padding:11px 17px;font:600 15px/1.3 inherit;cursor:pointer}.str-widget .str-open:hover{background:#245b87}.str-overlay[hidden]{display:none!important}.str-overlay{position:fixed;inset:0;z-index:999999;background:rgba(10,25,40,.7);display:flex;align-items:center;justify-content:center;padding:12px}.str-dialog{box-sizing:border-box;width:min(960px,100%);max-height:92dvh;background:#fff;color:#162435;border-radius:10px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 16px 55px #0005;font-family:Arial,sans-serif}.str-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;background:#153e66;color:#fff}.str-head strong{display:block;font-size:19px}.str-head small{display:block;font-size:12px;margin-top:3px}.str-close{background:transparent;border:0;color:#fff;font-size:30px;cursor:pointer;line-height:1;padding:0 6px}.str-tools{padding:9px 15px;border-bottom:1px solid #dbe2e8}.str-tools label{display:flex;align-items:center;gap:10px;font-size:13px}.str-search{box-sizing:border-box;flex:1;min-width:0;border:1px solid #bbc8d3;border-radius:5px;padding:9px;font-size:14px}.str-scroll{overflow:auto;overscroll-behavior:contain;min-height:0;flex:1}.str-scroll table{border-collapse:collapse;width:100%;min-width:560px;margin:0;font-size:13px}.str-scroll th,.str-scroll td{padding:7px 10px;border-bottom:1px solid #e4e8ec;text-align:left;vertical-align:top;line-height:1.35}.str-scroll th{position:sticky;top:0;background:#e8f0f5;color:#163b58;z-index:1;font-weight:700}.str-scroll tbody tr:nth-child(even){background:#f7f9fa}.str-scroll th:nth-child(1){width:20%}.str-scroll th:nth-child(3),.str-scroll th:nth-child(4){width:10%;text-align:center}.str-center{text-align:center!important;font-size:16px;color:#166d42;font-weight:bold}.str-foot{padding:10px 15px;font-size:11px;color:#52606d;border-top:1px solid #dbe2e8}.str-empty{padding:12px}.str-widget *{box-sizing:border-box}@media(max-width:600px){.str-overlay{padding:5px}.str-dialog{max-height:96dvh}.str-head{padding:11px}.str-head strong{font-size:16px}.str-scroll table{font-size:12px}.str-scroll th,.str-scroll td{padding:6px 8px}}
/* v1.1: compact category highlighting and responsibility colour key */
.str-legend{display:flex;gap:7px 16px;flex-wrap:wrap;padding:9px 15px;background:#f8fafc;border-bottom:1px solid #dbe2e8;font:600 12px/1.5 Arial,sans-serif}
.str-legend-mcc{color:#166534}.str-legend-resident{color:#1d4ed8}.str-legend-both{color:#a16207}
.str-scroll tbody td.str-category{font-weight:700;border-left:4px solid var(--cat,#64748b);background:var(--cat-bg,#f1f5f9);color:var(--cat-text,#334155);white-space:normal}
.str-category span{display:inline-block}
.str-cat-roofing{--cat:#64748b;--cat-bg:#f1f5f9;--cat-text:#334155}
.str-cat-windows{--cat:#0284c7;--cat-bg:#e0f2fe;--cat-text:#075985}
.str-cat-heating{--cat:#ea580c;--cat-bg:#ffedd5;--cat-text:#9a3412}
.str-cat-electrical{--cat:#ca8a04;--cat-bg:#fef9c3;--cat-text:#854d0e}
.str-cat-alarms{--cat:#dc2626;--cat-bg:#fee2e2;--cat-text:#991b1b}
.str-cat-plumbing{--cat:#0891b2;--cat-bg:#cffafe;--cat-text:#155e75}
.str-cat-bathroom{--cat:#2563eb;--cat-bg:#dbeafe;--cat-text:#1e40af}
.str-cat-kitchen{--cat:#16a34a;--cat-bg:#dcfce7;--cat-text:#166534}
.str-cat-joinery{--cat:#a16207;--cat-bg:#fef3c7;--cat-text:#92400e}
.str-cat-finishes{--cat:#7c3aed;--cat-bg:#ede9fe;--cat-text:#5b21b6}
.str-cat-external{--cat:#15803d;--cat-bg:#dcfce7;--cat-text:#14532d}
.str-cat-adaptations{--cat:#be185d;--cat-bg:#fce7f3;--cat-text:#9d174d}
.str-cat-communal{--cat:#0f766e;--cat-bg:#ccfbf1;--cat-text:#115e59}
.str-scroll td.str-mcc span,.str-scroll td.str-resident span{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;border-radius:50%;font-size:15px}
.str-scroll td.str-mcc span{color:#166534;background:#dcfce7}
.str-scroll td.str-resident span{color:#1d4ed8;background:#dbeafe}
.str-scroll tbody tr:hover td:not(.str-category){background:#eef5fc}
@media(max-width:600px){.str-legend{padding:8px 10px;gap:5px 10px;font-size:11px}}
/* v1.2 iPhone/mobile fluid layout: keep all four columns visible */
.str-overlay{box-sizing:border-box;width:100%;width:100vw;max-width:100vw;overflow:hidden}
.str-dialog{min-width:0;max-width:100%;margin:0}
.str-scroll{width:100%;max-width:100%;min-width:0;-webkit-overflow-scrolling:touch;touch-action:pan-y;overflow-x:hidden;overflow-y:auto}
.str-scroll table{box-sizing:border-box}
.str-scroll tr[hidden]{display:none!important}
@media(max-width:600px){
 .str-overlay{padding:env(safe-area-inset-top, 4px) max(4px,env(safe-area-inset-right,4px)) env(safe-area-inset-bottom,4px) max(4px,env(safe-area-inset-left,4px));align-items:center}
 .str-dialog{width:100%;height:auto;max-height:calc(100dvh - 12px);border-radius:9px}
 .str-head{flex-shrink:0;padding:10px 12px}
 .str-head strong{font-size:16px;line-height:1.2}
 .str-head small{font-size:10px}
 .str-close{flex-shrink:0;min-width:40px;min-height:40px}
 .str-legend{flex-shrink:0;font-size:10px;gap:3px 9px;padding:6px 9px}
 .str-tools{flex-shrink:0;padding:7px 9px}
 .str-tools label{font-size:11px;gap:5px;min-width:0}
 .str-search{width:100%;min-width:0;font-size:16px;padding:7px}
 .str-scroll table{width:100%!important;min-width:0!important;max-width:100%!important;table-layout:fixed;font-size:11px;line-height:1.3}
 .str-scroll th,.str-scroll td{padding:6px 4px;overflow-wrap:anywhere;word-break:normal;hyphens:auto;white-space:normal;line-height:1.3}
 .str-scroll th:nth-child(1),.str-scroll td:nth-child(1){width:23%}
 .str-scroll th:nth-child(2),.str-scroll td:nth-child(2){width:43%}
 .str-scroll th:nth-child(3),.str-scroll td:nth-child(3){width:17%}
 .str-scroll th:nth-child(4),.str-scroll td:nth-child(4){width:17%}
 .str-scroll th:nth-child(3),.str-scroll th:nth-child(4){font-size:10px;text-align:center;overflow-wrap:anywhere}
 .str-scroll td.str-category{border-left-width:3px;font-size:10px;padding-left:4px}
 .str-scroll td.str-mcc span,.str-scroll td.str-resident span{width:20px;height:20px;font-size:13px}
 .str-foot{flex-shrink:0;padding:7px 9px;font-size:10px;line-height:1.3;max-height:72px;overflow:auto}
}
@media(max-width:360px){
 .str-scroll table{font-size:10px}
 .str-scroll th,.str-scroll td{padding:5px 3px}
 .str-scroll td.str-category{font-size:9px}
 .str-scroll th:nth-child(1),.str-scroll td:nth-child(1){width:22%}
 .str-scroll th:nth-child(2),.str-scroll td:nth-child(2){width:44%}
}