/* ==========================================================================
   Town Compare in the Watchdog board design. Presentation only: the
   town-intelligence and budget-pressure tools render every number.
   Each compared town keeps one color across its chip, card and table
   column: navy, blue, teal, sand. Scoped to this page because the same
   town card also appears on Property Home and Fairness.
   ========================================================================== */
html body[data-sidebar-page="town-compare"]{
  --tb-bg:#f3f1ec;--tb-surface:#fbfaf7;--tb-line:#e3dfd6;--tb-ink:#0e2248;--tb-muted:#5d6877;
  --tb-navy:#0e2248;--tb-blue:#1456a0;--tb-blue-bright:#2f6df6;--tb-gold:#b8972a;
  --tb-sky:#e3edfb;--tb-sky-deep:#b9d0f2;--tb-teal:#dff1ec;--tb-teal-deep:#9fd3c5;--tb-sand:#f6efd9;--tb-sand-deep:#e4cf8e;
  --tb-display:"Libre Franklin",system-ui,sans-serif;
}
html body[data-sidebar-page="town-compare"],
html body[data-sidebar-page="town-compare"] .db-workspace,
html body[data-sidebar-page="town-compare"] #tc-main{background:var(--tb-bg)!important}
html body[data-sidebar-page="town-compare"] .wdx-topbar{background:rgba(251,250,247,.94)!important}
html body[data-sidebar-page="town-compare"] .wdx-btn{border-radius:8px!important}
html body[data-sidebar-page="town-compare"] .wdx-btn.primary{background:var(--tb-navy)!important;border-color:var(--tb-navy)!important}
html body[data-sidebar-page="town-compare"] #tc-main .tc-wrap{word-spacing:.05em}

/* Picker */
html body[data-sidebar-page="town-compare"] #tc-main .tc-picker{border:0!important;border-radius:12px!important;background:#fff!important;box-shadow:none!important}
html body[data-sidebar-page="town-compare"] #tc-main .tc-picker :is(input,select){border-radius:8px!important;border-color:var(--tb-line)!important;background:var(--tb-surface)!important;color:var(--tb-ink)!important;padding-left:16px!important}
html body[data-sidebar-page="town-compare"] #tc-add{border-radius:8px!important;background:var(--tb-navy)!important;border-color:var(--tb-navy)!important;box-shadow:none!important;color:#fff!important;padding:0 20px!important}
html body[data-sidebar-page="town-compare"] #tc-add:hover{background:var(--tb-blue)!important}
html body[data-sidebar-page="town-compare"] #tc-selected span{border:0!important;border-radius:8px!important;font-weight:700!important;color:var(--tb-ink)!important}
html body[data-sidebar-page="town-compare"] #tc-selected span button{border-radius:50%!important;background:rgba(255,255,255,.7)!important;color:inherit!important}
html body[data-sidebar-page="town-compare"] #tc-selected span:nth-child(1){background:var(--tb-navy)!important;color:#fff!important}
html body[data-sidebar-page="town-compare"] #tc-selected span:nth-child(1) button{background:rgba(255,255,255,.18)!important}
html body[data-sidebar-page="town-compare"] #tc-selected span:nth-child(2){background:var(--tb-sky)!important}
html body[data-sidebar-page="town-compare"] #tc-selected span:nth-child(3){background:var(--tb-teal)!important}
html body[data-sidebar-page="town-compare"] #tc-selected span:nth-child(4){background:var(--tb-sand)!important}

/* Empty state and note */
html body[data-sidebar-page="town-compare"] #tc-output .blank{border:0!important;border-radius:12px!important;background:#fff!important}
html body[data-sidebar-page="town-compare"] #tc-main .tc-limit{border:0!important;border-radius:12px!important;background:#fff!important;box-shadow:none!important}

/* Town cards: one color per town */
html body[data-sidebar-page="town-compare"] #tc-output .tc-cards{gap:16px!important}
html body[data-sidebar-page="town-compare"] #tc-output .tc-cards>div{display:grid;gap:10px;align-content:start}
html body[data-sidebar-page="town-compare"] #tc-output .ti-report{border:0!important;border-radius:12px!important;box-shadow:none!important;overflow:hidden!important;background:#fff!important}
html body[data-sidebar-page="town-compare"] #tc-output .ti-report-head{position:relative;overflow:hidden;border:0!important}
html body[data-sidebar-page="town-compare"] #tc-output .ti-report-head::after{content:"";position:absolute;right:92px;bottom:-26px;width:96px;height:96px;opacity:.55;pointer-events:none;background:no-repeat center/contain}
html body[data-sidebar-page="town-compare"] #tc-output .tc-cards>div:nth-child(1) .ti-report-head{background:var(--tb-navy)!important;color:#fff!important}
html body[data-sidebar-page="town-compare"] #tc-output .tc-cards>div:nth-child(1) .ti-report-head::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 116'%3E%3Cpath fill='%231456a0' d='M50 2 94 18v34c0 30-19 52-44 62C25 104 6 82 6 52V18Z'/%3E%3C/svg%3E")}
html body[data-sidebar-page="town-compare"] #tc-output .tc-cards>div:nth-child(n+2) .ti-report-head{color:var(--tb-ink)!important}
html body[data-sidebar-page="town-compare"] #tc-output .tc-cards>div:nth-child(n+2) .ti-report-head :is(h2,h3,h4,b,strong,span,small,p,div){color:var(--tb-ink)!important}
html body[data-sidebar-page="town-compare"] #tc-output .tc-cards>div:nth-child(2) .ti-report-head{background:var(--tb-sky)!important}
html body[data-sidebar-page="town-compare"] #tc-output .tc-cards>div:nth-child(2) .ti-report-head::after{opacity:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpath fill='%23b9d0f2' d='M50 4 96 42h-12v46H62V62H38v26H16V42H4Z'/%3E%3C/svg%3E")}
html body[data-sidebar-page="town-compare"] #tc-output .tc-cards>div:nth-child(3) .ti-report-head{background:var(--tb-teal)!important}
html body[data-sidebar-page="town-compare"] #tc-output .tc-cards>div:nth-child(3) .ti-report-head::after{opacity:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='42' cy='42' r='28' fill='none' stroke='%239fd3c5' stroke-width='14'/%3E%3Cpath stroke='%239fd3c5' stroke-width='16' stroke-linecap='round' d='m64 64 26 26'/%3E%3C/svg%3E")}
html body[data-sidebar-page="town-compare"] #tc-output .tc-cards>div:nth-child(4) .ti-report-head{background:var(--tb-sand)!important}
html body[data-sidebar-page="town-compare"] #tc-output .tc-cards>div:nth-child(4) .ti-report-head::after{opacity:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 100'%3E%3Cpath fill='%23e4cf8e' d='M40 2C19 2 4 17 4 37c0 26 36 61 36 61s36-35 36-61C76 17 61 2 40 2Z'/%3E%3C/svg%3E")}
html body[data-sidebar-page="town-compare"] #tc-output .tc-cards>div:nth-child(n+2) .ti-score{background:rgba(255,255,255,.7)!important;border-color:transparent!important;color:var(--tb-ink)!important}
html body[data-sidebar-page="town-compare"] #tc-output .tc-cards>div:nth-child(n+2) .ti-score *{color:var(--tb-ink)!important}
html body[data-sidebar-page="town-compare"] #tc-output .tc-cards>div:nth-child(1) .ti-score{background:rgba(255,255,255,.1)!important;border-color:rgba(255,255,255,.2)!important}
html body[data-sidebar-page="town-compare"] #tc-output .ti-links a{font-weight:700!important}
/* Budget pressure strip: rounded card, no side stripe */
html body[data-sidebar-page="town-compare"] #tc-output .bp-mini{border:0!important;border-radius:18px!important;background:#fff!important;margin-top:0!important;overflow:hidden}

/* Comparison table with matching column colors */
html body[data-sidebar-page="town-compare"] #tc-output .tc-table{border:0!important;border-radius:12px!important;background:#fff!important;box-shadow:none!important;overflow:auto}
html body[data-sidebar-page="town-compare"] #tc-output .tc-table thead th{background:var(--tb-surface)!important;color:var(--tb-muted)!important;border-color:var(--tb-line)!important}
html body[data-sidebar-page="town-compare"] #tc-output .tc-table thead th:nth-child(n+2)::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:50%;vertical-align:0}
html body[data-sidebar-page="town-compare"] #tc-output .tc-table thead th:nth-child(2)::before{background:var(--tb-navy)}
html body[data-sidebar-page="town-compare"] #tc-output .tc-table thead th:nth-child(3)::before{background:var(--tb-sky-deep)}
html body[data-sidebar-page="town-compare"] #tc-output .tc-table thead th:nth-child(4)::before{background:var(--tb-teal-deep)}
html body[data-sidebar-page="town-compare"] #tc-output .tc-table thead th:nth-child(5)::before{background:var(--tb-sand-deep)}
html body[data-sidebar-page="town-compare"] #tc-output .tc-table td,html body[data-sidebar-page="town-compare"] #tc-output .tc-table tbody th{border-color:#efebe4!important}
html body[data-sidebar-page="town-compare"] #tc-output .tc-table td.win{color:var(--tb-ink)!important;font-weight:800!important}
html body[data-sidebar-page="town-compare"] #tc-output .tc-table td.win::after{content:"";display:inline-block;width:6px;height:6px;margin-left:6px;border-radius:50%;background:var(--tb-gold);vertical-align:2px}
html body[data-sidebar-page="town-compare"] #tc-main :focus-visible{outline:3px solid var(--tb-blue-bright)!important;outline-offset:2px}

@media (max-width:640px){html body[data-sidebar-page="town-compare"] #tc-output .ti-report-head::after{right:70px;width:70px;height:70px}}
@media print{html body[data-sidebar-page="town-compare"] #tc-output .ti-report-head{background:#fff!important;color:#000!important}html body[data-sidebar-page="town-compare"] #tc-output .ti-report-head::after{display:none}}