:root {
    --ink: #1b2420;
    --green: #0f4c3a;
    --green-600: #16624a;
    --green-050: #e8f0ec;
    --gold: #b3841f;
    --gold-050: #f7efdb;
    --paper: #f6f5f0;
    --card: #ffffff;
    --line: #d8d5ca;
    --line-strong: #b9b6aa;
    --muted: #5c6560;
    --warn-bg: #fbf1d9;
    --warn-line: #d9b64a;
    --radius: 6px;
    --shadow: 0 1px 2px rgba(27, 36, 32, .06), 0 6px 20px rgba(27, 36, 32, .05);
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --serif: Georgia, "Times New Roman", Cambria, serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--sans);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.5;
    font-size: 16px;
}

a { color: var(--green); }
a:hover { color: var(--green-600); }

.page { display: flex; flex-direction: column; min-height: 100vh; }

/* ---------- Masthead ---------- */
.masthead {
    background: var(--green);
    color: #fff;
    border-bottom: 4px solid var(--gold);
}
.masthead-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.seal {
    width: 46px; height: 46px;
    flex: 0 0 auto;
    display: grid; place-items: center;
    border: 2px solid var(--gold);
    border-radius: 50%;
    font-family: var(--serif);
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--gold-050);
}
.masthead-titles { flex: 1 1 auto; }
.eyebrow {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .01em;
}
.dept {
    margin: .1rem 0 0;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #cfe2d9;
}
.masthead-nav a {
    color: #fff;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    padding: .4rem .6rem;
    border-radius: var(--radius);
}
.masthead-nav a:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ---------- Content ---------- */
.content {
    flex: 1 0 auto;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 1.75rem 1.25rem 2.5rem;
}

.lede h1 {
    font-family: var(--serif);
    font-size: 2rem;
    margin: 0 0 .35rem;
    color: var(--green);
}
.lede p { margin: 0; max-width: 60ch; color: var(--muted); }

.layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
    align-items: start;
}

/* ---------- Search card ---------- */
.search-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-top: 3px solid var(--green);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.1rem 1.15rem 1.25rem;
    position: sticky;
    top: 1rem;
}
.search-card h2 {
    margin: 0 0 .75rem;
    font-size: 1.05rem;
    font-family: var(--serif);
    color: var(--green);
}
.search-card fieldset {
    border: none;
    border-top: 1px solid var(--line);
    padding: .75rem 0 0;
    margin: 0 0 .75rem;
}
.search-card legend {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    font-weight: 700;
    padding: 0;
}
.search-card label {
    display: block;
    font-size: .82rem;
    color: var(--ink);
    margin-top: .5rem;
}
.search-card input {
    width: 100%;
    margin-top: .2rem;
    padding: .45rem .55rem;
    font-size: .95rem;
    font-family: var(--sans);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #fff;
}
.search-card input:focus-visible {
    outline: 2px solid var(--green-600);
    outline-offset: 1px;
    border-color: var(--green-600);
}
.parcel-boxes {
    display: grid;
    grid-template-columns: 2fr 2.4fr 2fr 3fr;
    gap: .4rem;
    margin-top: .4rem;
}
.parcel-boxes input { margin-top: 0; text-align: center; }

.actions { display: flex; gap: .5rem; margin-top: .25rem; }

/* ---------- Buttons ---------- */
.btn {
    font: inherit;
    font-weight: 600;
    padding: .5rem .9rem;
    border-radius: var(--radius);
    border: 1px solid var(--line-strong);
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.btn:hover { background: #f2f1ec; }
.btn.primary {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}
.btn.primary:hover { background: var(--green-600); color: #fff; }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

button.link {
    background: none; border: none; padding: 0;
    color: var(--green); font: inherit; font-weight: 600;
    cursor: pointer; text-decoration: underline;
}
button.link:hover { color: var(--green-600); }

/* ---------- Notices ---------- */
.notice {
    background: var(--green-050);
    border: 1px solid #cfe0d8;
    border-radius: var(--radius);
    padding: .7rem .85rem;
    margin: 0 0 1rem;
    color: var(--ink);
}
.notice.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.muted { color: var(--muted); }

/* ---------- Results / grid ---------- */
/*
   QuickGrid renders <table class="quickgrid grid"> and the Paginator renders
   <div class="paginator"> ... <nav><button class="go-first"> etc. The arrows
   on those buttons normally come from the package's scoped-CSS bundle
   (linked in App.razor). The rules below re-draw the arrows with CSS masks in
   the site's own colors so they render correctly with or without that bundle,
   and so they pick up the county green instead of the package default black.

   NOTE: "::deep" only works inside a scoped .razor.css file. In a plain
   stylesheet the browser drops the whole rule, which is why the earlier
   ".grid ::deep th" rules never applied.
*/
.results { min-width: 0; }

.grid {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: .92rem;
}
.grid > thead > tr > th {
    text-align: left;
    background: var(--green-050);
    color: var(--green);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .55rem .7rem;
    border-bottom: 2px solid var(--green);
}
.grid > tbody > tr > td { padding: .5rem .7rem; border-bottom: 1px solid var(--line); }
.grid > tbody > tr:last-child > td { border-bottom: none; }
.grid > tbody > tr:hover > td { background: #fafaf7; }

/* Sortable header titles are rendered as <button class="col-title">; strip the
   browser button chrome so they look like the plain headers. */
.grid th .col-title {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: default;
}
.grid th button.col-title { cursor: pointer; }
.grid th button.col-title:hover { color: var(--green-600); background: none; }
.grid th button.col-title:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

/* Sort indicator: draw the chevron with a mask so it takes the header color. */
.grid th .sort-indicator {
    width: .8rem;
    height: .8rem;
    flex: 0 0 auto;
    opacity: 0;
    background-color: currentColor;
    background-image: none;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M 2 3.25 L 12 20.75 L 22 3.25 L 12 10 z"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M 2 3.25 L 12 20.75 L 22 3.25 L 12 10 z"/></svg>') center / contain no-repeat;
}
.grid th.col-sort-asc .sort-indicator,
.grid th.col-sort-desc .sort-indicator { opacity: 1; }
.grid th.col-sort-asc .sort-indicator { transform: scaleY(-1); }

/* ---------- Paginator ---------- */
.paginator {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: .6rem;
    padding: .35rem .25rem;
    border-top: 1px solid var(--line);
    font-size: .9rem;
    color: var(--muted);
}
.paginator .summary { margin: 0; }
.paginator .summary strong,
.paginator .pagination-text strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.paginator nav {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
}
.paginator .pagination-text { margin: 0 .5rem; white-space: nowrap; }

/* The four arrow buttons. They are empty <button> elements; the glyph is a
   masked SVG filled with currentColor so it inherits the green below. */
.paginator nav button.go-first,
.paginator nav button.go-previous,
.paginator nav button.go-next,
.paginator nav button.go-last {
    position: relative;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #fff;              /* overrides the package's background-image arrows */
    background-image: none;
    color: var(--green);
    cursor: pointer;
    transform: none;               /* package flips next/last via scaleX(-1); we flip the glyph instead */
}
.paginator nav button.go-first::before,
.paginator nav button.go-previous::before,
.paginator nav button.go-next::before,
.paginator nav button.go-last::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
/* Single chevron: previous / next */
.paginator nav button.go-previous::before,
.paginator nav button.go-next::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(90)" transform-origin="12 12"><path d="M 2 3.25 L 12 20.75 L 22 3.25 L 12 11 z"/></g></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(90)" transform-origin="12 12"><path d="M 2 3.25 L 12 20.75 L 22 3.25 L 12 11 z"/></g></svg>');
}
/* Chevron + bar: first / last */
.paginator nav button.go-first::before,
.paginator nav button.go-last::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(90) scale(0.8)" transform-origin="12 12"><path d="m 2,1.5 l 10,17.5 l 10,-17.5 l -10,7.75 l -10,-7.75 z"/><rect height="2" width="20" y="20.5" x="2"/></g></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(90) scale(0.8)" transform-origin="12 12"><path d="m 2,1.5 l 10,17.5 l 10,-17.5 l -10,7.75 l -10,-7.75 z"/><rect height="2" width="20" y="20.5" x="2"/></g></svg>');
}
.paginator nav button.go-next::before,
.paginator nav button.go-last::before { transform: scaleX(-1); }

.paginator nav button:not([disabled]):hover {
    background-color: var(--green-050);
    border-color: var(--green);
}
.paginator nav button:not([disabled]):active { background-color: #cfe0d8; }
.paginator nav button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.paginator nav button[disabled] {
    opacity: .4;
    cursor: default;
    color: var(--muted);
}

/* ---------- Detail card ---------- */
.detail-card {
    margin-top: 1.5rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.1rem 1.25rem 1.25rem;
}
.detail-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: .6rem;
    margin-bottom: .9rem;
}
.detail-parcel { margin: 0; font-weight: 700; font-size: 1.1rem; color: var(--green); font-variant-numeric: tabular-nums; }
.detail-owner { margin: .1rem 0 0; font-weight: 600; }
.detail-township { margin: 0; color: var(--muted); font-weight: 600; }
.detail-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.detail-columns h3 {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--muted); margin: 0 0 .5rem; border-bottom: 1px solid var(--line); padding-bottom: .3rem;
}
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-list li { padding: .3rem 0; border-bottom: 1px dotted var(--line); }
.doc-list li:last-child { border-bottom: none; }

/* ---------- Footer ---------- */
.site-footer {
    flex: 0 0 auto;
    background: #22302a;
    color: #d7e2dc;
    margin-top: 2rem;
}
.site-footer-inner {
    max-width: 1100px; margin: 0 auto; padding: 1.1rem 1.25rem;
    font-size: .85rem;
}
.site-footer p { margin: .15rem 0; }
.site-footer .muted { color: #9fb2aa; }

/* ---------- Receipt sheet ---------- */
.receipt-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    max-width: 8.5in; margin: 0 auto 1rem; gap: 1rem;
}
.receipt-toolbar > div { display: flex; gap: .5rem; }

.receipt-sheet {
    background: #fff;
    max-width: 8.5in;
    margin: 0 auto;
    padding: .75in;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    color: #000;
    font-size: 11pt;
}
.receipt-masthead {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    align-items: start;
    gap: 1rem;
    border-bottom: 2px solid #000;
    padding-bottom: .5rem;
}
.receipt-office p { margin: 0; font-weight: 700; }
.receipt-office .treasurer { font-size: 12pt; }
.receipt-title { text-align: center; }
.receipt-title h1 { font-family: var(--serif); font-size: 15pt; margin: 0; }
.receipt-title .township { margin: .2rem 0 0; font-weight: 700; }
.receipt-meta { text-align: right; }
.receipt-meta p { margin: 0; }
.receipt-meta span { color: #333; }

.receipt-parties { margin: .9rem 0 .4rem; }
.receipt-parties dl {
    display: grid; grid-template-columns: max-content 1fr;
    gap: .15rem .75rem; margin: 0;
}
.receipt-parties dt { font-weight: 400; color: #222; }
.receipt-parties dd { margin: 0; }

.reprint-notice { font-style: italic; font-size: 9.5pt; margin: .5rem 0 .75rem; }

.receipt-table { width: 100%; border-collapse: collapse; font-size: 10pt; }
.receipt-table th, .receipt-table td { padding: .3rem .4rem; text-align: left; }
.receipt-table thead th { border-bottom: 1.5px solid #000; font-size: 9pt; text-transform: uppercase; letter-spacing: .03em; }
.receipt-table tbody td { border-bottom: .5px solid #bbb; }
.receipt-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.receipt-table tfoot th, .receipt-table tfoot td { border-top: 1.5px solid #000; padding-top: .4rem; }

/* ---------- Accessibility helpers ---------- */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
    .layout { grid-template-columns: 1fr; }
    .search-card { position: static; }
    .paginator { flex-wrap: wrap; gap: .5rem; }
    .paginator nav { margin-left: 0; width: 100%; justify-content: center; }
    .detail-columns { grid-template-columns: 1fr; gap: 1rem; }
    .receipt-masthead { grid-template-columns: 1fr; text-align: left; }
    .receipt-title, .receipt-meta { text-align: left; }
}

/* ---------- Print (receipt) ---------- */
@media print {
    body { background: #fff; }
    .masthead, .site-footer, .no-print, .receipt-toolbar { display: none !important; }
    .content { padding: 0; max-width: none; }
    .receipt-sheet { border: none; box-shadow: none; margin: 0; padding: 0; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}


.pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid #c9ccc7;
    border-radius: .375rem;
    background: #fff;
    color: #1f4d3a;
    cursor: pointer;
}

    .pager-btn:hover:not(:disabled) {
        background: #eef3ef;
        border-color: #1f4d3a;
    }

    .pager-btn:disabled {
        opacity: .4;
        cursor: default;
    }

* Results pager */
.pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .75rem 1rem;
    padding: .6rem 1rem;
}

.pager-nav {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.pager-state {
    white-space: nowrap;
    padding: 0 .5rem;
}

.pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid #c9ccc7;
    border-radius: .375rem;
    background: #fff;
    color: #1f4d3a;
    cursor: pointer;
}

    .pager-btn:hover:not(:disabled) {
        background: #eef3ef;
        border-color: #1f4d3a;
    }

    .pager-btn:focus-visible {
        outline: 2px solid #1f4d3a;
        outline-offset: 2px;
    }

    .pager-btn:disabled {
        opacity: .35;
        cursor: default;
    }