/* ==========================================================================
   Permit CMS — shared styles for the permits index and every permit page.
   One stylesheet for all permits: adding a permit never adds CSS.
   ========================================================================== */

.page-banner {
    position: relative;
    padding-block: clamp(4.5rem, 11vw, 8rem) clamp(3.5rem, 8vw, 6rem);
    background-size: cover;
    background-position: center 35%;
    color: var(--snow);
    overflow: clip;
}

.page-banner .legend { color: var(--marigold); }

.page-banner h1 {
    font-family: var(--ff-display);
    font-weight: 650;
    font-size: clamp(2rem, 5vw, 3.1rem);
    line-height: 1.06;
    margin: .6rem 0 1rem;
    max-width: 24ch;
}

.breadcrumb-trail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-family: var(--ff-mono);
    font-size: .78rem;
    color: #cfdce7;
    margin: 0;
}

.breadcrumb-trail a { color: #cfdce7; text-decoration: none; }
.breadcrumb-trail a:hover { color: var(--marigold); }
.breadcrumb-trail .sep { opacity: .5; }
.breadcrumb-trail .is-current { color: var(--marigold); }

/* ---------- Index ---------- */
.permit-group { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.permit-grid {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: 1fr;
    margin-top: 1.4rem;
}

@media (min-width: 620px) { .permit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .permit-grid { grid-template-columns: repeat(3, 1fr); } }

.permit-card {
    display: block;
    padding: 1.5rem;
    border: 1px solid var(--line-light);
    border-radius: var(--r-md);
    background: #fff;
    text-decoration: none;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}

.permit-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 20, 8, .10);
}

.permit-card > i { font-size: 1.5rem; color: var(--marigold); }

.permit-card h3 {
    font-family: var(--ff-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: .7rem 0 .4rem;
    line-height: 1.35;
}

.permit-card p {
    font-size: .9rem;
    line-height: 1.6;
    color: var(--stone-d);
    margin: 0 0 .9rem;
}

.permit-more {
    font-family: var(--ff-mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--marigold-d);
}

/* ---------- Detail ---------- */
.permit-lede {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--stone-d);
    max-width: 70ch;
    margin: 0 0 clamp(1.8rem, 3vw, 2.6rem);
}

.permit-layout {
    display: grid;
    gap: clamp(2rem, 4vw, 3.2rem);
    /* minmax(0,…) rather than 1fr: a grid item defaults to min-width:auto, so
       a wide table would otherwise stretch the column and scroll the page. */
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.permit-main,
.permit-side {
    min-width: 0;
}

/* Permit pages are single column: the content, and the sidebar cards in a
   row underneath. Sections — fee tables above all — get the full width. */
@media (min-width: 1000px) {
    .permit-side {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.2rem;
        align-items: start;
    }

    .permit-side .side-card {
        margin-bottom: 0;
    }
}

/* Each section is a card, so a long permit reads as distinct blocks
   rather than one continuous wall of text. */
.permit-section {
    background: #fff;
    border: 1px solid var(--line-light);
    border-radius: var(--r-md);
    padding: clamp(1.4rem, 3vw, 2.1rem);
    margin-bottom: 1.1rem;
    scroll-margin-top: 110px;
}

/* Blocks that bring their own framing do not need a second box. */
.permit-section:has(> .permit-notice) {
    background: none;
    border: 0;
    padding: 0;
}

.permit-heading {
    font-family: var(--ff-display);
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: 700;
    color: var(--text);
    margin: 0 0 1.1rem;
    padding-bottom: .7rem;
    line-height: 1.3;
    border-bottom: 2px solid var(--line-light);
    position: relative;
}

/* Marigold tick under the heading, echoing the section rule elsewhere. */
.permit-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 46px;
    height: 2px;
    background: var(--marigold);
}


.prose { font-size: 1.01rem; line-height: 1.8; color: var(--stone-d); }
.prose p { margin-bottom: 1rem; }
.prose ul, .prose ol { padding-left: 1.2rem; margin-bottom: 1rem; }
.prose h2, .prose h3, .prose h4 { color: var(--text); font-family: var(--ff-display); }
.prose a { color: var(--ink-3); }
.table-scroll {
    overflow-x: auto;
    margin-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
}

/* Imported tables arrive with fixed widths and inline styling; the widths are
   overridden here and the styling is stripped at render time. Everything else
   about them is set with the fee tables, under .permit-prose-table. */
.prose table {
    width: 100% !important;
    max-width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    font-size: .93rem;
}

.prose th,
.prose td {
    text-align: left;
    height: auto !important;
    width: auto !important;
}

.prose img { max-width: 100%; height: auto; }

/* Notice */
.permit-notice {
    display: flex;
    gap: .9rem;
    padding: 1.1rem 1.2rem;
    border-radius: var(--r-md);
    border: 1px solid #f0d9a8;
    border-left: 4px solid var(--marigold);
    background: #fdf6e7;
    color: #5c4718;
    line-height: 1.7;
}

.permit-notice i { color: var(--marigold-d); font-size: 1.1rem; margin-top: .15rem; }
.permit-notice strong { display: block; margin-bottom: .3rem; color: #4a3a12; }

/* Fee table */
.permit-fee-scroll { overflow-x: auto; }

.permit-fee-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .93rem;
    min-width: 520px;
}

.permit-fee-table th {
    background: var(--ink);
    color: var(--snow);
    font-family: var(--ff-mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .7rem .9rem;
    text-align: left;
    white-space: nowrap;
}

.permit-fee-table td {
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--line-light);
    color: var(--stone-d);
}

.permit-fee-table tbody tr:nth-child(even) { background: #fafcfd; }
.permit-fee-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    font-weight: 600;
    /* Shrink to the number. Left to itself this column swallows all the spare
       width and pushes the remarks column out of the table. */
    width: 1%;
}

@media (max-width: 620px) {
    .permit-fee-table { min-width: 0; }
    .permit-fee-table thead { display: none; }
    .permit-fee-table tr {
        display: block;
        border: 1px solid var(--line-light);
        border-radius: var(--r-sm);
        margin-bottom: .8rem;
        padding: .3rem .2rem;
    }
    .permit-fee-table td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 0;
        padding: .4rem .8rem;
        text-align: right;
    }
    .permit-fee-table td::before {
        content: attr(data-label);
        font-family: var(--ff-mono);
        font-size: .66rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--marigold-d);
        text-align: left;
    }
}

/* Documents */
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

.doc-list a {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--line-light);
    border-radius: var(--r-md);
    background: #fff;
    text-decoration: none;
    transition: border-color .2s var(--ease);
}

.doc-list a:hover { border-color: var(--marigold); }
.doc-list a > i { font-size: 1.25rem; color: var(--marigold); }
.doc-meta { flex: 1; min-width: 0; }
.doc-meta strong { display: block; color: var(--text); font-size: .97rem; }
.doc-meta small { color: var(--stone-d); font-size: .85rem; }

.doc-tag {
    font-family: var(--ff-mono);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--stone-d);
    white-space: nowrap;
}

/* FAQ */
.faq-list { display: grid; gap: .6rem; }

.faq-item {
    border: 1px solid var(--line-light);
    border-radius: var(--r-md);
    background: #fff;
    padding: 0 1.1rem;
}

.faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 1rem 0;
    font-weight: 600;
    color: var(--text);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: "\f4fe";
    font-family: "bootstrap-icons";
    color: var(--marigold);
    transition: transform .2s var(--ease);
}

.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-answer {
    padding: 0 0 1rem;
    color: var(--stone-d);
    line-height: 1.75;
    border-top: 1px solid var(--line-light);
    padding-top: .9rem;
}

/* Figure */
.permit-figure { margin: 0; }
.permit-figure img { width: 100%; border-radius: var(--r-md); display: block; }

/* Sidebar */
.side-card {
    border: 1px solid var(--line-light);
    border-radius: var(--r-md);
    background: #fff;
    padding: 1.4rem;
    margin-bottom: 1.2rem;
}

.side-card h3 {
    font-family: var(--ff-mono);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--marigold-d);
    margin: 0 0 .9rem;
}

.side-links { display: grid; gap: .1rem; }

.side-links a {
    display: block;
    padding: .6rem 0;
    border-bottom: 1px solid var(--line-light);
    color: var(--text);
    text-decoration: none;
    font-size: .94rem;
    line-height: 1.45;
}

.side-links a:last-child { border-bottom: 0; }
.side-links a:hover { color: var(--ink-3); }

.side-cta { background: var(--ink); color: var(--snow); }
.side-cta h3 { color: var(--marigold); }
.side-cta p { font-size: .92rem; line-height: 1.65; color: #cfdce7; margin: 0 0 1rem; }

/* Long "areas covered" reference, kept out of the fee table itself. */
.area-detail {
    border: 1px solid var(--line-light);
    border-radius: var(--r-md);
    padding: .9rem 1.1rem;
    margin: 1rem 0;
    background: var(--snow);
}

.area-detail summary {
    cursor: pointer;
    font-family: var(--ff-mono);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--marigold-d);
}

.area-detail ul {
    margin: .9rem 0 0;
    padding-left: 1.1rem;
    font-size: .9rem;
    line-height: 1.65;
    color: var(--stone-d);
}

.area-detail li { margin-bottom: .5rem; }

/* Rows without a single price fall back to their condition text in this
   column, so it has to be allowed to wrap — a plain amount is short enough
   that it stays on one line anyway. */
.permit-fee-table .num {
    white-space: normal;
    width: 12%;
}

/* Auto layout hands spare width to whichever column asks loudest, which left
   the name column wrapping to five lines while others sat half empty. These
   percentages are preferred widths, so the columns stay in proportion at any
   container width. */
.permit-fee-table th:first-child,
.permit-fee-table td:first-child {
    width: 30%;
    min-width: 18ch;
}

.permit-fee-table th:last-child,
.permit-fee-table td:last-child {
    width: 22%;
}

/* Links section — each link embedded, with its label and an escape hatch
   above the frame in case the site refuses to be framed. */
.link-embed-note {
    font-size: .86rem;
    line-height: 1.6;
    color: var(--stone-d);
    margin: 0 0 1rem;
}

.link-embeds {
    display: grid;
    gap: 1.1rem;
}

.link-embed {
    margin: 0;
    border: 1px solid var(--line-light);
    border-radius: var(--r-md);
    overflow: hidden;
    background: #fff;
}

.link-embed figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1.1rem;
    border-bottom: 1px solid var(--line-light);
    background: var(--snow);
}

.link-embed-meta strong {
    display: block;
    color: var(--text);
    font-size: .97rem;
}

.link-embed-meta small {
    color: var(--stone-d);
    font-size: .85rem;
}

.link-embed figcaption a {
    flex: none;
    font-family: var(--ff-mono);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--marigold-d);
    text-decoration: none;
    white-space: nowrap;
}

.link-embed figcaption a:hover {
    text-decoration: underline;
}

/* The embedded page is laid out for a full browser window, so inside a frame
   it needs three adjustments, all tunable here:
     --embed-offset  how much of the site's own header to clip away
     --embed-height  how tall the visible window is
     --embed-zoom    scales the page down so wide tables fit without the
                     visitor having to scroll sideways
   A cross-origin frame cannot be scrolled by us, hence the clip-and-shift. */
.link-embed {
    --embed-offset: 10px;
    --embed-height: clamp(600px, 85vh, 1000px);
    --embed-zoom: 0.85;
}

.link-embed-viewport {
    position: relative;
    height: var(--embed-height);
    overflow: hidden;
    background: var(--snow-2);
    /* Visitors can drag the bottom edge if they want more of the page. */
    resize: vertical;
    min-height: 320px;
}

/* With transform-origin at the top left, a point at --embed-offset down the
   page lands at the top of the viewport once scaled. */
.link-embed-viewport iframe {
    position: absolute;
    left: 0;
    top: calc(var(--embed-offset) * var(--embed-zoom) * -1);
    width: calc(100% / var(--embed-zoom));
    height: calc(100% / var(--embed-zoom) + var(--embed-offset));
    transform: scale(var(--embed-zoom));
    transform-origin: 0 0;
    border: 0;
    background: #fff;
}

.link-embed-hint {
    display: block;
    padding: .55rem 1.1rem;
    border-top: 1px solid var(--line-light);
    background: var(--snow);
    font-family: var(--ff-mono);
    font-size: .64rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--stone-d);
}

/* Kept for link rows rendered as a plain list elsewhere. */
.link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .6rem;
}

.link-list a {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--line-light);
    border-radius: var(--r-md);
    background: #fff;
    text-decoration: none;
    transition: border-color .2s var(--ease);
}

.link-list a:hover { border-color: var(--marigold); }
.link-list a > i { font-size: 1.1rem; color: var(--marigold); }
.link-meta strong { display: block; color: var(--text); font-size: .97rem; }
.link-meta small { color: var(--stone-d); font-size: .85rem; }

/* ── Fee tables, set the way a book sets them ─────────────────────────────
   The grid variant carries a two-row head (one heading spanning the season
   columns, the seasons beneath it) and a first column that merges down over
   the peaks of one range. Rules are what separate the parts, not fills — a
   heavy line under the head, a light one between lines, and a firm one
   wherever a merged cell ends. */

.permit-fee-table caption {
    caption-side: top;
    text-align: left;
    padding: 0 0 .55rem;
    font-family: var(--ff-mono);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--marigold-d, #b06c12);
}

.permit-fee-grid,
.permit-fee-plain {
    border-collapse: collapse;
    /* Fixed-width columns would starve the name; auto keeps the figures tight
       and gives the spare width to the words. */
    min-width: 640px;
}

.permit-fee-grid thead th,
.permit-fee-plain thead th {
    vertical-align: bottom;
    border-bottom: 2px solid rgba(255, 255, 255, .28);
}

.permit-fee-grid thead tr:last-child th,
.permit-fee-plain thead tr:last-child th {
    border-bottom: 0;
}

/* The heading that spans the fee columns: centred over what it covers, with
   a hairline under it so the seasons read as its subdivisions. */
.permit-fee-grid .head-span {
    text-align: center;
    letter-spacing: .07em;
    border-bottom: 1px solid rgba(255, 255, 255, .28);
}

.permit-fee-grid thead tr:last-child .num {
    text-align: right;
    font-weight: 600;
}

/* Merged first column — the range, or the area in a plain table. The head's
   own cell keeps the head's colour; only the body cells take the tint. */
.permit-fee-grid tbody .cell-group,
.permit-fee-plain tbody .cell-group {
    vertical-align: top;
    text-align: left;
    font-weight: 600;
    color: var(--text);
    background: #f6f9f5;
    border-right: 1px solid var(--line-light);
    white-space: normal;
}

.permit-fee-grid tbody .cell-group,
.permit-fee-plain tbody .cell-group {
    font-family: var(--ff-display);
    font-size: .92rem;
    padding-top: .85rem;
}

/* A merged cell's end is where one group stops and the next starts, so the
   rule goes across the whole line rather than under each cell. */
.permit-fee-grid tbody tr.group-start > *,
.permit-fee-plain tbody tr.group-start > * {
    border-top: 1px solid var(--stone-l, #c9d4cb);
}

.permit-fee-grid tbody tr:first-child > *,
.permit-fee-plain tbody tr:first-child > * {
    border-top: 0;
}

/* Zebra fills fight the merged cells, which cannot be striped along with the
   rows they span. Rules alone carry the eye across instead. */
.permit-fee-grid tbody tr:nth-child(even),
.permit-fee-plain tbody tr:nth-child(even) {
    background: transparent;
}

.permit-fee-grid tbody tr:hover,
.permit-fee-plain tbody tr:hover {
    background: #fafcfd;
}

.permit-fee-grid td,
.permit-fee-plain td {
    border-bottom: 1px solid var(--line-light);
    vertical-align: top;
}

/* Figures line up under one another and stay on one line; the words wrap. */
.permit-fee-grid .num,
.permit-fee-plain .num {
    width: 1%;
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.permit-fee-grid td:first-of-type,
.permit-fee-grid .cell-group {
    min-width: 14ch;
}

/* Undo the flat table's fixed proportions: these two lay themselves out. */
.permit-fee-grid th:first-child,
.permit-fee-grid td:first-child,
.permit-fee-grid th:last-child,
.permit-fee-grid td:last-child,
.permit-fee-plain th:first-child,
.permit-fee-plain td:first-child,
.permit-fee-plain th:last-child,
.permit-fee-plain td:last-child {
    width: auto;
}

@media (max-width: 620px) {
    /* Stacked, each line becomes a card. A merged cell belongs to the first
       card only, so the range is printed as the card's own heading instead. */
    .permit-fee-grid,
    .permit-fee-plain {
        min-width: 0;
    }

    .permit-fee-grid tbody .cell-group,
    .permit-fee-plain tbody .cell-group {
        display: none;
    }

    .permit-fee-grid tr[data-group]::before {
        content: attr(data-group);
        display: block;
        padding: .5rem .8rem .2rem;
        font-family: var(--ff-mono);
        font-size: .66rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--marigold-d, #b06c12);
    }

    .permit-fee-grid tbody tr.group-start > *,
    .permit-fee-plain tbody tr.group-start > * {
        border-top: 0;
    }

    .permit-fee-grid td,
    .permit-fee-plain td {
        border-bottom: 0;
    }
}

/* ── Fee tables, second pass: density and proportion ──────────────────────
   The first pass got the structure right and the shape wrong: rows a third
   too tall, a range column three hundred pixels wide holding two words, and
   all the spare width dumped between the name and the figures. Widths below
   are preferences under auto layout, so the columns keep these proportions at
   any container width. */

.permit-fee-grid {
    font-size: .9rem;
    min-width: 600px;
}

.permit-fee-grid th,
.permit-fee-plain th {
    padding: .55rem .8rem;
}

.permit-fee-grid td,
.permit-fee-plain td {
    padding: .5rem .8rem;
    line-height: 1.45;
}

/* The figures take the right half between them, evenly, instead of huddling
   against the edge with the slack piled up to their left. */
.permit-fee-grid .col-fee {
    width: 11%;
}

.permit-fee-grid .col-detail {
    width: 9%;
    font-weight: 500;
    color: var(--stone-d);
}

.permit-fee-grid tbody .cell-group,
.permit-fee-plain tbody .cell-group {
    width: 15%;
    padding-top: .5rem;
    /* Centred against the rows it covers, rather than floating at the top of
       a tall block with nothing beside it. */
    vertical-align: middle;
    font-size: .82rem;
    letter-spacing: .01em;
    line-height: 1.35;
}

.permit-fee-grid tbody td,
.permit-fee-plain tbody td {
    vertical-align: middle;
}

/* Alternating blocks, one shade apart — enough to hold a range together
   across the page, not enough to read as a stripe. */
.permit-fee-grid tbody tr.band > td {
    background: #f8faf8;
}

.permit-fee-grid tbody tr.band .cell-group {
    background: #eef4ee;
}

.permit-fee-grid tbody tr:hover > td,
.permit-fee-plain tbody tr:hover > td {
    background: #fff8e8;
}

/* The fee itself is what the reader came for; the season heads above it are
   quieter than the rest of the head so the figures stand out under them. */
.permit-fee-grid tbody .col-fee {
    font-weight: 600;
    color: var(--text);
}

.permit-fee-grid thead tr:last-child .col-fee {
    font-weight: 500;
}

/* ── Imported body copy ───────────────────────────────────────────────────
   The old CMS wrote its styling inline; it is stripped at render time, and
   what is left is styled here so every permit page reads as one document. */

.permit-section .prose h3 {
    font-family: var(--ff-display);
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--text);
    margin: 1.6rem 0 .6rem;
}

.permit-section .prose h4,
.permit-section .prose h5 {
    font-family: var(--ff-display);
    font-size: .98rem;
    font-weight: 700;
    color: var(--text);
    margin: 1.3rem 0 .5rem;
}

.permit-section .prose > *:first-child {
    margin-top: 0;
}

/* Tables inside imported copy — the free-peaks list, contact directories —
   set like the fee tables so the page holds together. */
.permit-prose-table {
    font-size: .9rem;
}

.permit-prose-table td,
.permit-prose-table th {
    padding: .5rem .8rem;
    border-bottom: 1px solid var(--line-light);
    vertical-align: top;
}

/* These arrive with their headings as a first body row of bold cells rather
   than a real head, so the first row is styled as one. */
.permit-prose-table.has-head tbody tr:first-child td strong {
    font-family: var(--ff-mono);
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--snow);
}

.permit-prose-table.has-head tbody tr:first-child td {
    background: var(--ink);
    border-bottom: 0;
}

.permit-prose-table tbody tr:hover td {
    background: #fff8e8;
}

.permit-prose-table.has-head tbody tr:first-child:hover td {
    background: var(--ink);
}

/* The desktop widths above are declared after the first stacked-view block,
   so they would otherwise win on a phone; re-asserted here, last, where they
   belong. A stacked card has one column and no room for a 600px minimum. */
@media (max-width: 620px) {
    .permit-fee-grid,
    .permit-fee-plain,
    .permit-prose-table {
        min-width: 0;
        font-size: .92rem;
    }

    .permit-fee-grid .col-fee,
    .permit-fee-grid .col-detail,
    .permit-fee-grid tbody .cell-group,
    .permit-fee-plain tbody .cell-group {
        width: auto;
    }

    .permit-fee-grid tbody td,
    .permit-fee-plain tbody td,
    .permit-prose-table tbody td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: .4rem .8rem;
        text-align: right;
        vertical-align: baseline;
    }

    /* Cards, not rows: the tint that separated blocks on a wide screen would
       fill a whole card here. */
    .permit-fee-grid tbody tr.band > td,
    .permit-fee-grid tbody tr:hover > td,
    .permit-fee-plain tbody tr:hover > td,
    .permit-prose-table tbody tr:hover td {
        background: transparent;
    }

    .permit-prose-table.has-head tbody tr:first-child {
        display: none;   /* its labels are repeated on every card below */
    }
}

/* A season written "Spring (Mar–May)" is two facts; the months sit under the
   season instead of stretching the column to hold them on one line. */
.permit-fee-grid .col-fee .sub {
    display: block;
    margin-top: .15rem;
    font-size: .62rem;
    letter-spacing: .02em;
    text-transform: none;
    opacity: .82;
}

/* Some fees are conditions, not amounts — "Students: NPR 10; Others: NPR 25".
   Held to the numeric column's rules they refuse to wrap and swallow the
   table, so they set as the sentences they are. */
.permit-fee-grid .col-fee.is-text {
    white-space: normal;
    min-width: 20ch;
    text-align: left;
    font-weight: 500;
    font-size: .85rem;
    line-height: 1.45;
    color: var(--stone-d);
}

/* The name is what the table is looked up by, so it gets a readable share of
   the width rather than whatever the figures leave over. */
.permit-fee-grid .col-name {
    width: 22%;
    min-width: 16ch;
}


/* On the index, a permit with no usable summary says what it prices instead. */
.permit-card-meta {
    font-family: var(--ff-mono);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--marigold-d, #b06c12);
}