/* ==========================================================================
   NT Map - stylesheet
   Rewritten 2026-10-28. Same identity as the 2008 original (teal #00a8ad,
   pale cyan panels #daebec, the windmill backdrop, the green NT pin) but laid
   out with modern CSS: design tokens, a sticky header, card surfaces, fluid
   width, real form controls and a responsive results grid.
   Legacy pages still emit tables and align="" attributes - those are restyled
   here rather than rewritten, so every page picks up the new look at once.
   ========================================================================== */

:root {
    --teal:        #00a8ad;
    --teal-dark:   #00787e;
    --teal-deep:   #04545c;
    --teal-ink:    #0c3f45;
    --panel:       #daebec;
    --panel-soft:  #eef7f7;
    --pin-green:   #4b7f3f;
    --ink:         #17313a;
    --ink-soft:    #4d6a73;
    --line:        #d3e3e4;
    --white:       #ffffff;
    --danger:      #b3261e;
    --radius:      14px;
    --radius-sm:   10px;
    --shadow:      0 10px 30px rgba(4, 60, 70, .10);
    --shadow-sm:   0 2px 8px rgba(4, 60, 70, .08);
    --font:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                   "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    padding: 0 0 40px;
    min-height: 100%;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: #dce9ea;
    color-scheme: light;
}

/* The 2008 windmill photo stays, but faded to a texture behind everything. */
img#bg {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .35;
    z-index: 0;
    pointer-events: none;
}

#content { position: relative; z-index: 1; }

/* --------------------------------------------------------------- top bar
   One compact teal bar: brand, nav and account on a single row (it wraps on
   narrow screens instead of stacking a second band under the first).
   ---------------------------------------------------------------------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: linear-gradient(180deg, var(--teal) 0%, var(--teal-dark) 100%);
    box-shadow: 0 4px 18px rgba(0, 120, 126, .25);
}

.topbar__inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 8px 18px;
    flex-wrap: wrap;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    border-bottom: 0;
    flex: 0 0 auto;
}
.brand img { display: block; filter: drop-shadow(0 3px 6px rgba(4, 60, 70, .35)); }

#title {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--white);
    white-space: nowrap;
}
.brand:hover #title { color: #eafcfd; }

#user {
    margin-left: auto;
    font-size: 14px;
    color: #d8f2f3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#user strong { color: var(--white); font-weight: 600; }
#user a {
    color: var(--white);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 600;
    line-height: 1.25;
    transition: .15s ease;
}
#user a:hover { background: var(--white); color: var(--teal-deep); border-color: var(--white); }

/* ------------------------------------------------------------------- nav */

#menu { flex: 1 1 auto; min-width: 0; max-width: 100%; }

.nav__inner {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    align-items: center;
    max-width: 100%;
}

#menu a {
    display: inline-block;
    padding: 8px 13px;
    font-size: 14.5px;
    font-weight: 600;
    color: #dcf5f6;
    text-decoration: none;
    border: 0;
    border-radius: 999px;
    white-space: nowrap;
    transition: .15s ease;
}
#menu a:hover { color: var(--white); background: rgba(255, 255, 255, .16); }
#menu a:visited { color: #dcf5f6; }
#menu a.on {
    color: var(--teal-deep);
    background: var(--white);
    box-shadow: 0 2px 8px rgba(4, 60, 70, .18);
}
/* "Visited Properties" and "My Profile" are too long for a phone row; the
   short labels take over below 780px (see the responsive block). */
.nav__short { display: none; }

/* ------------------------------------------------------------- admin bar */

#adminmenu {
    background: var(--teal-ink);
    color: #cfe9ea;
    font-size: 13px;
    padding: 8px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 16px;
}
#adminmenu a { color: var(--white); text-decoration: none; font-weight: 600; }
#adminmenu a:hover { color: #9fe3e5; }
#adminmenu a.on { color: var(--teal-ink); background: var(--white); border-radius: 999px; padding: 3px 12px; }
#adminleft { display: inline; font-weight: 700; letter-spacing: .4px; margin-right: 6px; }
#admincenter { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }

/* ------------------------------------------------------------ page shell */

#maintable {
    position: relative;
    max-width: 1140px;
    margin: 24px auto;
    padding: 0 20px;
    background: none;
    height: auto;
}

.page {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px 30px 32px;
    min-height: 260px;
}

.page > h2:first-child,
.page > h3:first-child { margin-top: 0; }

h2 {
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: -.2px;
    color: var(--teal-deep);
    margin: 0 0 14px;
}
h3 {
    font-size: 18px;
    color: var(--teal-dark);
    margin: 26px 0 10px;
}
h4 {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--ink-soft);
    margin: 26px 0 10px;
}

p { margin: 0 0 14px; }

a { color: var(--teal-dark); text-decoration: none; border-bottom: 1px solid rgba(0,120,126,.28); }
a:hover { color: var(--teal-deep); border-bottom-color: var(--teal); }
a:visited { color: var(--teal-dark); }

ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 6px; }

hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }

small, .smalltext { color: var(--ink-soft); font-size: 13px; }

/* ---------------------------------------------------------------- forms */

form { margin: 0 0 6px; }

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea {
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px 13px;
    width: 100%;
    max-width: 420px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { max-width: 100%; resize: vertical; min-height: 96px; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(0, 168, 173, .22);
}
input::placeholder { color: #9db4b9; }

input[type="submit"],
button,
.btn {
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--white);
    background: linear-gradient(180deg, var(--teal) 0%, var(--teal-dark) 100%);
    border: 1px solid var(--teal-dark);
    border-radius: var(--radius-sm);
    padding: 11px 22px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 120, 126, .25);
    transition: .15s ease;
}
input[type="submit"]:hover,
button:hover,
.btn:hover {
    filter: brightness(1.06);
    box-shadow: 0 6px 16px rgba(0, 120, 126, .30);
    transform: translateY(-1px);
}
input[type="image"] { cursor: pointer; border: 0; background: none; vertical-align: middle; }

label { font-size: 14px; color: var(--ink-soft); }

/* ---------------------------------------------------------------- tables
   The results grids and the little detail tables. Anything nested inside a
   grid (the map/edit/delete icon tables) is reset so it stays inline.
   ---------------------------------------------------------------------- */

/* the date pickers arrive as three <select>s joined by hyphens - keep them
   side by side instead of letting the 100%-width rule stack them */
#propaddtable select,
#memaddtable select { display: inline-block; width: auto; max-width: none; vertical-align: middle; }
#propaddtable textarea { min-height: 88px; }

/* the add-a-visit form reads as label-above-field, always top aligned */
#propaddtable,
#memaddtable {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
}
#propaddtable th,
#memaddtable th {
    background: transparent;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--line);
    padding-left: 0;
}
#propaddtable td,
#memaddtable td { border-bottom: 1px solid var(--line); }
#propaddtable tr:last-child th, #propaddtable tr:last-child td,
#memaddtable tr:last-child th, #memaddtable tr:last-child td { border-bottom: 0; }

#propaddtable th,
#propaddtable td,
#memaddtable th,
#memaddtable td { vertical-align: top; padding-top: 16px; }
#propaddtable input[type="text"],
#propaddtable textarea { display: block; width: 100%; max-width: 420px; }
#propaddtable .dateselect { white-space: normal; }
#propaddtable .dateselect select { margin: 0 2px; }

#table,
#table52,
#proptable,
#profiletable,
#memtable,
#memaddtable,
#propaddtable {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    max-width: 100%;
    margin: 0 0 18px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    font-size: 15px;
}

#table tbody,
#table52 tbody,
#proptable tbody,
#profiletable tbody,
#memtable tbody,
#memaddtable tbody,
#propaddtable tbody { background: transparent; }

#table th,
#table td,
#table52 th,
#table52 td,
#proptable th,
#proptable td,
#profiletable th,
#profiletable td,
#memtable th,
#memtable td,
#memaddtable th,
#memaddtable td,
#propaddtable th,
#propaddtable td {
    padding: 11px 14px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--line);
}

#table tr:last-child td,
#proptable tr:last-child td,
#proptable tr:last-child th,
#profiletable tr:last-child td,
#memtable tr:last-child td,
#memaddtable tr:last-child td,
#propaddtable tr:last-child td { border-bottom: 0; }

/* header rows: the old build tagged them id="header" / "header52" / "memheader" */
#table tr#header th,
#table52 tr#header52 th,
#memtable tr#memheader th,
#table th {
    background: var(--panel-soft);
    color: var(--teal-deep);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    white-space: nowrap;
    border-bottom: 1px solid var(--line);
}

#proptable th,
#profiletable th,
#memaddtable th,
#propaddtable th {
    background: var(--panel-soft);
    color: var(--teal-deep);
    font-weight: 600;
    width: 180px;
    white-space: nowrap;
}

#proptable,
#profiletable { max-width: 620px; margin-left: auto; margin-right: auto; }
#propaddtable,
#memaddtable { max-width: 620px; margin-left: auto; margin-right: auto; }
#memtable { max-width: 720px; margin-left: auto; margin-right: auto; }

/* profile / property detail: key-value pairs, no grid - just hairlines */
#profiletable,
#proptable {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
}
#profiletable th,
#proptable th {
    width: 240px;
    background: transparent;
    color: var(--ink-soft);
    font-weight: 600;
    letter-spacing: .2px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-left: 0;
}
#profiletable td,
#proptable td {
    font-weight: 600;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
}
#profiletable th b, #profiletable td b { font-weight: inherit; }
#profiletable td:empty::after { content: "\2014"; color: #9db4b9; }

/* "Show on the map" sits under the value column, right aligned */
#proptable ~ p { max-width: 620px; margin: 6px auto 20px; text-align: right; }
#profiletable tr:last-child th, #profiletable tr:last-child td,
#proptable tr:last-child th, #proptable tr:last-child td { border-bottom: 0; }

/* the two links under the profile table become buttons */
#profiletable ~ p a {
    display: inline-block;
    min-width: 260px;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 10px 18px;
    background: var(--white);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}
#profiletable ~ p a:hover { border-color: var(--teal); color: var(--teal-deep); }

#table tbody tr:hover td,
#table52 tbody tr:hover td { background: #f5fbfb; }

/* the icon cells inside a grid row */
#table table,
#table52 table,
#visitedactions,
#searchactions,
#memactions {
    width: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
    border-spacing: 2px;
}
#table table td,
#visitedactions td,
#searchactions td,
#memactions td {
    padding: 0 3px;
    border: 0;
    background: none;
}
#visitedactions a,
#searchactions a,
#memactions a { border-bottom: 0; }

.pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 20px 0 4px;
    font-size: 14px;
    color: var(--ink-soft);
}
.pager a {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 16px;
    background: var(--white);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}
.pager a:hover { border-color: var(--teal); }

/* --------------------------------------------------------- search bar */

.searchbar {
    display: flex;
    justify-content: center;
    margin: 0 0 26px;
}
.searchbar form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 640px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px;
}
.searchbar input[type="text"] { flex: 1 1 260px; max-width: none; }
.searchbar select { flex: 0 0 auto; width: auto; }

/* --------------------------------------------------------------- notices */

.notice {
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin: 0 0 18px;
    font-size: 14px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    color: var(--teal-deep);
}
.notice--ok { background: #e9f6ec; border-color: #bfe2c8; color: #256b36; }
.notice--error { background: #fdeceb; border-color: #f3c6c2; color: var(--danger); }

/* ------------------------------------------------------------------ map */

#map_canvas {
    width: 100%;
    height: min(72vh, 660px);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    z-index: 0;
}
#maplegend {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--ink-soft);
}
#maplegend img { vertical-align: -3px; }
#mapcount { font-weight: 600; color: var(--teal-deep); }

/* leaflet inherits the page font */
.leaflet-container { font-family: var(--font); }
.leaflet-popup-content { font-size: 14px; line-height: 1.45; }

/* --------------------------------------------------------------- landing */

.hero {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 40px 28px 34px;
    text-align: center;
    background:
        radial-gradient(1000px 340px at 50% -10%, rgba(0, 168, 173, .22), transparent 70%),
        linear-gradient(180deg, #f7fbfb 0%, #e6f2f3 100%);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.hero img.pin { filter: drop-shadow(0 10px 18px rgba(4, 60, 70, .25)); }
.hero h1 {
    font-size: clamp(30px, 5vw, 44px);
    line-height: 1.1;
    letter-spacing: -.8px;
    color: var(--teal-deep);
    margin: 20px 0 10px;
}
.hero .lede {
    font-size: clamp(16px, 2.1vw, 19px);
    color: var(--ink-soft);
    max-width: 620px;
    margin: 0 auto 26px;
    line-height: 1.55;
}
.hero .actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.hero .actions a {
    display: inline-block;
    border: 1px solid var(--teal-dark);
    border-radius: 999px;
    padding: 13px 28px;
    font-weight: 700;
    color: var(--white);
    background: linear-gradient(180deg, var(--teal) 0%, var(--teal-dark) 100%);
    box-shadow: 0 6px 18px rgba(0, 120, 126, .28);
    transition: .15s ease;
}
.hero .actions a:hover { transform: translateY(-1px); filter: brightness(1.06); }
.hero .actions a.secondary {
    background: var(--white);
    color: var(--teal-deep);
    border-color: var(--line);
    box-shadow: var(--shadow-sm);
}

.featuregrid {
    list-style: none;
    padding: 0;
    margin: 34px 0 0;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    text-align: left;
}
.featuregrid li {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-soft);
    box-shadow: var(--shadow-sm);
}
.featuregrid b { display: block; color: var(--teal-deep); font-size: 15px; margin-bottom: 3px; }

/* ------------------------------------------------------ login / register */

.authwrap {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.authcard {
    width: 100%;
    max-width: 430px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 34px 32px 30px;
    text-align: center;
}
.authcard--wide { max-width: 520px; }
.authcard img.pin { margin-bottom: 6px; }
.authcard h2 { font-size: 26px; margin: 6px 0 6px; }
.authcard .sub { color: var(--ink-soft); font-size: 14px; margin: 0 0 22px; }
.authcard form { text-align: left; }
.authcard .field { margin-bottom: 14px; }
.authcard .field label {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.authcard input[type="text"],
.authcard input[type="password"] { max-width: 100%; }
.authcard input[type="submit"] { width: 100%; margin-top: 6px; }
.authcard .after { margin: 18px 0 0; font-size: 14px; color: var(--ink-soft); }

/* ---------------------------------------------------------------- footer */

.sitefoot {
    margin-top: 34px;
    background: linear-gradient(180deg, var(--teal-dark) 0%, var(--teal-deep) 100%);
    color: #cfe9ea;
}
.sitefoot__inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
}
.sitefoot a { color: var(--white); border-bottom-color: rgba(255,255,255,.4); }
.sitefoot a:hover { color: #ffffff; border-bottom-color: #ffffff; }

/* --------------------------------------------------------------- helpers */

#floatleft { float: left; }
#floatright { float: right; }
#floatcenter { margin: 0 auto; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 780px) {
    .page { padding: 20px 16px 24px; border-radius: 12px; }
    #maintable { margin: 14px auto; padding: 0 12px; }
    /* The nav goes under the brand as its own row, so the bar stays two rows
       tall. Pills keep their natural width here (the full labels fit from about
       620px up); below that they share the row evenly with short labels. */
    .topbar__inner { padding: 8px 14px 0; gap: 4px 10px; max-width: 100%; }
    #title { font-size: 16px; }
    #menu { flex: 1 1 100%; order: 3; min-width: 0; margin: 0; }
    .nav__inner {
        flex-wrap: nowrap;
        gap: 4px;
        padding: 0 0 9px;
        max-width: none;
    }
    #menu a { flex: 0 1 auto; padding: 8px 12px; font-size: 13.5px; }
    #user { font-size: 13px; gap: 6px; }
    #user span { display: none; }
    /* the sticky footer sat right on the home bar */
    .sitefoot__inner { padding-bottom: 26px; }

    /* let wide result grids scroll instead of squashing */
    #table, #table52 {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        max-width: 100%;
        border-radius: 12px;
    }
    #proptable th, #profiletable th, #memaddtable th, #propaddtable th { width: auto; }
    #propaddtable, #memaddtable, #proptable, #profiletable { display: block; max-width: 100%; }
    #propaddtable tbody, #propaddtable tr,
    #memaddtable tbody, #memaddtable tr,
    #proptable tbody, #proptable tr { display: block; }
    #propaddtable td, #propaddtable th,
    #memaddtable td, #memaddtable th,
    #proptable td, #proptable th { display: block; width: auto; border-bottom: 0; padding-top: 8px; padding-bottom: 8px; }
    #proptable tr, #propaddtable tr, #memaddtable tr { border-bottom: 1px solid var(--line); }
    #map_canvas { height: 62vh; }
    .hero { padding: 30px 16px 26px; }
    .sitefoot__inner { justify-content: center; text-align: center; }
}

/* Narrow phones: five full labels do not fit, and the old answer was a strip
   that scrolled sideways - which left "My Profile" half off the screen with no
   hint that it was there. Short labels and five equal quarters instead: every
   destination is on screen, nothing is clipped, nothing to discover. */
@media (max-width: 620px) {
    #menu a {
        flex: 1 1 0;
        min-width: 0;
        padding: 8px 4px;
        font-size: clamp(11px, 3.35vw, 13.5px);
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .nav__full { display: none; }
    .nav__short { display: inline; }
}

/* dense tables: scroll inside .tablewrap rather than crushing the cells
   (without this, notes columns collapse to one word per line on a phone) */
@media (max-width: 780px) {
    #table.table--dense { min-width: 620px; }
    #table.table--dense td.notes { max-width: 240px; }
}

/* phones: .tablewrap is the one and only horizontal scroller for these grids.
   (A pinned first column was tried and abandoned - position:sticky on table
   cells held on some pages and was silently inert on others, so the cue below
   plus the card layout on the user pages does the job instead.)
   The 620px min-width of these grids means they only really overflow below
   ~676px, so the hint starts there and not at the 780 breakpoint. */
@media (max-width: 660px) {
    .tablewrap::before {
        content: "Swipe sideways for more \2192";
        position: sticky;
        left: 0;
        display: block;
        width: max-content;
        padding: 0 8px 5px;
        font-size: 11px;
        letter-spacing: .5px;
        text-transform: uppercase;
        color: var(--ink-soft);
    }
}

/* phones: the two "my stuff" grids become one card per row, so a visit can be
   read (and edited) without any sideways swiping at all. */
@media (max-width: 600px) {
    .tablewrap--cards { overflow-x: visible; }
    .tablewrap--cards::before { content: none; }
    #table.table--dense.cards {
        display: block;
        width: auto;
        min-width: 0;
        overflow: visible;
        white-space: normal;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    .cards thead { display: none; }
    .cards tbody, .cards tr, .cards td { display: block; width: auto; }
    .cards tr {
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 11px 13px;
        margin: 0 0 10px;
        box-shadow: var(--shadow-sm);
    }
    /* these need the id in the selector: #table.table--dense td.right and
       td .actions-inline (flex-end / nowrap) otherwise win and push the cost
       and the buttons out of the card */
    #table.table--dense.cards td {
        border: 0 !important;
        padding: 3px 0;
        position: static !important;
        box-shadow: none !important;
    }
    #table.table--dense.cards td.num { display: none; }
    #table.table--dense.cards td[data-l]::before {
        content: attr(data-l) ": ";
        color: var(--ink-soft);
        font-weight: 600;
        font-size: 11px;
        letter-spacing: .5px;
        text-transform: uppercase;
    }
    #table.table--dense.cards td.cardhead {
        font-size: 16px;
        font-weight: 700;
        padding: 0 0 7px;
        margin-bottom: 7px;
        border-bottom: 1px solid var(--line) !important;
    }
    #table.table--dense.cards td.cardhead::before { content: none; }
    #table.table--dense.cards td.right { text-align: left; }
    /* .actions is width:1% + nowrap in the dense-table rules, which collapses the
       buttons to nothing once the cell is display:block */
    #table.table--dense.cards td.actions {
        width: auto;
        white-space: normal;
        padding-top: 9px;
    }
    #table.table--dense.cards td.actions .actions-inline {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 6px;
    }
    /* the per-visit cost breakdown is set to 11px inline for the wide grid;
       on a card it needs to be legible */
    #table.table--dense.cards td .muted { font-size: 12.5px !important; }
}

@media (max-width: 520px) {
    .searchbar form { padding: 12px; gap: 8px; }
    .searchbar input[type="text"] { flex: 1 1 100%; }
    .searchbar select, .searchbar input[type="submit"] { flex: 1 1 46%; }
    .hero .actions a { padding: 12px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
    input[type="submit"]:hover, button:hover, .btn:hover, .hero .actions a:hover { transform: none; }
}

/* ------------------------------------------------------------------
   Admin screens: user list, user editor, restore, site status
   ------------------------------------------------------------------ */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 18px;
}
.toolbar form { display: flex; gap: 8px; flex: 1 1 320px; margin: 0; }
.toolbar input[type="text"] { flex: 1 1 auto; max-width: 340px; }
.btn--sm {
    display: inline-block;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 999px;
    text-decoration: none;
    line-height: 1.2;
}
.btn--ghost {
    background: var(--white);
    color: var(--teal-deep);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { border-color: var(--teal); }
.btn--danger { background: linear-gradient(180deg, #d9534f 0%, #b93b37 100%); border-color: #a33430; }

.statgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin: 0 0 22px;
}
.stat {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}
.stat b { display: block; font-size: 22px; color: var(--teal-deep); line-height: 1.2; }
.stat span { font-size: 12.5px; color: var(--ink-soft); }

.badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--panel-soft);
    color: var(--teal-deep);
    border: 1px solid var(--line);
    white-space: nowrap;
}
.badge--ok { background: #e9f6ec; border-color: #bfe2c8; color: #256b36; }
.badge--warn { background: #fdf4e3; border-color: #f0dcb4; color: #8a5a12; }
.badge--off { background: #fdeceb; border-color: #f3c6c2; color: var(--danger); }
.badge--info { background: #e8f4fb; border-color: #c3e0f2; color: #1c5b82; }

.muted { color: var(--ink-soft); font-size: 13px; }
.tablewrap { overflow-x: auto; }
#table.table--dense th, #table.table--dense td { padding: 9px 12px; }
#table.table--dense td { font-size: 14px; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.actions-inline { display: flex; gap: 8px; flex-wrap: wrap; }
.actions-inline form { margin: 0; }
.actions-inline input[type="submit"] { font-size: 13px; padding: 7px 12px; border-radius: 999px; }

.adminform { max-width: 560px; }
.adminform .field { margin-bottom: 14px; }
.adminform label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 4px; }
.adminform input[type="text"], .adminform input[type="email"], .adminform input[type="password"], .adminform select { width: 100%; }
.adminform .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.adminform .hint { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }

.logbox {
    background: #0d2b30;
    color: #cfeeef;
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    max-height: 320px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
/* table hygiene on the list and admin screens */
#table.table--dense th,
#table.table--dense td { vertical-align: middle; }
#table.table--dense td.num { color: var(--ink-soft); width: 1%; white-space: nowrap; }
#table.table--dense td.notes { max-width: 360px; white-space: normal; overflow-wrap: anywhere; }
#table.table--dense td.actions { width: 1%; white-space: nowrap; }
#table.table--dense td .actions-inline { justify-content: flex-end; flex-wrap: nowrap; }
a.btn, a.btn:hover, a.btn:visited { border-bottom: 0; }
#table th.right, #table td.right,
#table.table--dense th.right,
#table.table--dense td.right { text-align: right; }
#table.table--dense th { white-space: nowrap; }

.logbox--empty { background: var(--panel-soft); color: var(--ink-soft); font-family: var(--font); font-size: 14px; }

@media (max-width: 780px) {
    .adminform .row2 { grid-template-columns: 1fr; }
    .toolbar { align-items: stretch; }
    .toolbar form { flex: 1 1 100%; }
}