/* ==========================================================================
   BOATS ARCHIVE + THE CHART TABLE  —  hr-archive.css   (needs hr-core.css)
   The page never reflows while you filter: fixed-geometry panel, reserved
   toolbar/chip heights, tabular figures. Also the grid / table / map views.
   ========================================================================== */

#site {
  .ar-td-owner.is-awaiting{display:inline-flex;align-items:center;gap:10px;font-style:italic;color:rgba(11,42,63,.62);white-space:nowrap}
  .ar-td-owner .avatar.sm.is-anchor::after{inset:6px}
  /* ==========================================================================
     BOATS ARCHIVE + THE CHART TABLE
     The page never reflows while you filter: the panel is a fixed-geometry surface,
     the toolbar and chip rows have reserved heights, and the apply button lives
     outside the panel's scroll area with tabular figures so its label can't shift.
     ========================================================================== */
  /* Breadcrumbs sit exactly where the boat page puts them (.bp-crumbs top:96px),
       so the two pages start identically under the nav pill. Flat px, not vw: the nav
       is a fixed-height pill, so scaling the clearance with the viewport is what put a
       dead band under it on wide screens. */
  .ar-head{padding:96px 0 clamp(44px,6vw,64px);position:relative}
  .ar-head::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
      background:linear-gradient(90deg,transparent,rgba(255,179,71,.55),transparent)}
  .ar-crumbs{display:flex;flex-wrap:wrap;gap:8px;font:600 11px/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;margin-bottom:44px}
  .ar-crumb{display:flex;align-items:center;gap:8px}
  .ar-crumb-sep{color:rgba(245,242,236,.3)}
  .ar-crumbs span[aria-current]{color:rgba(245,242,236,.55)}
  .ar-title{margin:0;font-family:ui-serif,Georgia,'Times New Roman',serif;font-weight:600;
      font-size:clamp(34px,5.2vw,56px);line-height:1.03;letter-spacing:-.01em}
  .ar-intro{margin:18px 0 0;max-width:620px;font:400 16px/1.6 system-ui,sans-serif;color:rgba(245,242,236,.68);text-wrap:pretty}
  .ar-stats{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,56px);margin-top:clamp(28px,4vw,38px)}
  .ar-stat{display:flex;align-items:baseline;gap:9px}
  .ar-stat-n{font:700 clamp(24px,3vw,32px)/1 system-ui,sans-serif;color:var(--accent);font-variant-numeric:tabular-nums}
  .ar-stat-l{font:600 11px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,242,236,.5)}
  .ar-head .ar-search{margin-top:clamp(28px,4vw,40px);max-width:440px}
  .ar-search{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;border-radius:100px}
  .ar-search-ico{font-size:15px}
  .ar-body{padding-top:clamp(32px,4vw,44px)}
  .ar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
      min-height:52px;padding-bottom:16px;border-bottom:1px solid rgba(11,42,63,.1)}
  .ar-count{font:600 12px/1 system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;
      color:rgba(11,42,63,.5);font-variant-numeric:tabular-nums}
  .ar-tools{display:flex;align-items:center;gap:14px}
  .ar-open{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 22px;border-radius:100px;cursor:pointer;
      font:700 12px/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}
  .ar-open-ico{font-size:15px;letter-spacing:0}
  .ar-open-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;
      border-radius:100px;font:700 11px/1 system-ui,sans-serif;letter-spacing:0;font-variant-numeric:tabular-nums}
  .ar-sort{display:flex;align-items:center;gap:10px;font:600 11px/1 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgba(11,42,63,.45)}
  /* the chip row keeps its height whether or not chips are in it */
  .ar-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:56px;padding-top:18px}
  .ar-chip{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border-radius:100px;
      font:600 12px/1 system-ui,sans-serif;color:var(--ink);background:rgba(194,112,63,.12);cursor:pointer}
  .ar-chip:hover{background:rgba(194,112,63,.2)}
  .ar-chip.is-q{cursor:default;background:rgba(11,42,63,.08)}
  .ar-chip.is-ctx{background:rgba(11,42,63,.1)}
  .ar-chip-x{font-size:15px;line-height:1;color:var(--rust)}
  .ar-reset{font:600 12px/1 system-ui,sans-serif;color:var(--rust);cursor:pointer;padding:6px 4px;text-decoration:underline}
  .ar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:26px;
      padding:26px 40px 56px;margin:-8px -40px -56px}
  .ar-grid .boat-card{width:auto;flex:none;position:relative}
  .ar-empty{padding:56px 0;text-align:center;color:rgba(11,42,63,.6);font:400 16px/1.6 system-ui,sans-serif}
  .ar-more-wrap{display:flex;justify-content:center;margin-top:38px}
  .ar-more{min-height:46px;padding:0 28px;border-radius:100px;cursor:pointer;
      font:700 12px/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
  /* ---------- the chart table ---------- */
  .ct-scrim{position:fixed;inset:0;z-index:1500;background:rgba(4,18,28,.62);backdrop-filter:blur(3px);
      opacity:0;pointer-events:none;transition:opacity .28s}
  .ct-scrim.is-on{opacity:1;pointer-events:auto;overscroll-behavior:contain}
  .ct{position:fixed;z-index:1600;left:50%;top:50%;width:min(1040px,94vw);height:min(660px,86vh);
      transform:translate(-50%,-48%) scale(.985);opacity:0;pointer-events:none;
      display:flex;flex-direction:column;overflow:hidden;border-radius:22px;
      background:var(--warm);color:var(--ink);
      /* the head is deep navy, so on the dark sections the panel's own top edge would
         dissolve into the page — a light ring keeps it reading as a lifted object */
      box-shadow:0 0 0 1px rgba(245,242,236,.16),0 40px 110px rgba(4,18,28,.62);
      transition:opacity .26s,transform .26s cubic-bezier(.33,0,.2,1)}
  .ct.is-open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
  .ct-head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
      padding:22px 26px 18px;background:var(--deep);color:var(--mist);
      border-bottom:1px solid rgba(255,179,71,.32)}
  .ct-eyebrow{font:700 10px/1 system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:9px}
  .ct-title{margin:0;font:600 24px/1.1 ui-serif,Georgia,serif}
  .ct-x{width:40px;height:40px;font-size:26px;line-height:1;cursor:pointer;color:rgba(245,242,236,.7)}
  .ct-body{flex:1;min-height:0;display:grid;grid-template-columns:224px minmax(0,1fr)}
  .ct-rail{display:flex;flex-direction:column;gap:2px;padding:16px 12px;overflow:auto;
      background:rgba(11,42,63,.05);border-right:1px solid rgba(11,42,63,.1)}
  .ct-rail-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;
      min-height:46px;padding:0 14px;border-radius:12px;cursor:pointer;text-align:left;
      font:600 14px/1.2 system-ui,sans-serif;color:rgba(11,42,63,.72)}
  .ct-rail-btn:hover{background:rgba(11,42,63,.06);color:var(--ink)}
  .ct-rail-btn.is-on{background:#fff;color:var(--ink);box-shadow:0 4px 14px rgba(11,42,63,.09)}
  .ct-rail-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;
      border-radius:100px;background:var(--rust);color:#fff;font:700 11px/1 system-ui,sans-serif;font-variant-numeric:tabular-nums}
  /* contain: a wheel event that reaches the end of the pane must stop there rather
       than scrolling the archive behind the modal. */
  .ct-pane{position:relative;overflow:auto;overscroll-behavior:contain;padding:24px 26px 26px}
  .ct-pane-in{display:flex;flex-direction:column;gap:18px}
  .ct-hint{margin:0;font:400 13px/1.55 system-ui,sans-serif;color:rgba(11,42,63,.55);max-width:52ch}
  .ct-row{display:flex;align-items:center;gap:11px;min-height:40px;padding:4px 2px;cursor:pointer;
      font:400 14px/1.2 system-ui,sans-serif;color:rgba(11,42,63,.85)}
  .ct-row input{position:absolute;opacity:0;width:0;height:0}
  .ct-row .ar-opt-box{flex:none;width:17px;height:17px;border-radius:5px;border:1.5px solid rgba(11,42,63,.3);
      background:#fff;position:relative;transition:border-color .18s,background .18s}
  .ct-row input:checked+.ar-opt-box{background:var(--rust);border-color:var(--rust)}
  .ct-row input:checked+.ar-opt-box::after{content:'';position:absolute;left:4px;top:1px;width:5px;height:9px;
      border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(42deg)}
  .ct-row input:focus-visible+.ar-opt-box{outline:2px solid var(--accent);outline-offset:2px}
  .ct-row-label{flex:1;min-width:0}
  .ct-row-n{font:400 12px/1 system-ui,sans-serif;color:rgba(11,42,63,.4);font-variant-numeric:tabular-nums}
  /* a choice that would return nothing stays exactly where it is */
  .ct-row.is-zero{cursor:not-allowed;opacity:.38}
  .ct-row.is-cls{font:600 16px/1.2 system-ui,sans-serif;color:var(--ink)}
  .ct-fleet{display:flex;flex-direction:column;gap:6px}
  .ct-cls{border-bottom:1px solid rgba(11,42,63,.09);padding-bottom:6px}
  .ct-cls:last-child{border-bottom:0}
  .ct-cls-head{display:flex;align-items:center;gap:16px}
  .ct-cls-head .ct-row{flex:1}
  .ct-exp{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 12px;border-radius:100px;cursor:pointer;
      font:600 11px/1 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--rust)}
  .ct-exp-chev{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
      transform:rotate(45deg);transition:transform .2s}
  .ct-exp.is-open .ct-exp-chev{transform:rotate(225deg)}
  .ct-models{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0 22px;
      padding:4px 0 10px 28px}
  .ct-find{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 15px;border-radius:100px;max-width:320px}
  .ct-geo{display:flex;flex-direction:column;gap:20px}
  .ct-cont-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
      padding-bottom:6px;border-bottom:1px solid rgba(11,42,63,.09)}
  .ct-cont-name{font:700 11px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--rust)}
  .ct-cont-all{font:600 11px/1 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;
      color:rgba(11,42,63,.5);cursor:pointer;padding:6px 2px}
  .ct-cont-all:hover{color:var(--ink)}
  .ct-cont-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0 22px}
  .ct-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
  .ct-choice{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-height:76px;padding:16px 18px;
      border-radius:14px;cursor:pointer;text-align:left;background:#fff}
  .ct-choice-label{font:600 15px/1.2 system-ui,sans-serif;color:var(--ink)}
  .ct-choice-n{font:400 12px/1 system-ui,sans-serif;color:rgba(11,42,63,.45);font-variant-numeric:tabular-nums}
  .ct-range{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
  .ct-num{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border-radius:12px;background:#fff;
      font:600 11px/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:rgba(11,42,63,.45)}
  .ct-unit{font:600 14px/1 system-ui,sans-serif;letter-spacing:0;text-transform:none;color:rgba(11,42,63,.6)}
  .ct-range-dash{padding-bottom:14px;color:rgba(11,42,63,.4)}
  .ct-presets{display:flex;flex-wrap:wrap;gap:9px}
  .ct-preset{min-height:36px;padding:0 15px;border-radius:100px;cursor:pointer;
      font:600 12px/1 system-ui,sans-serif;color:var(--ink)}
  .ct-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
      padding:16px 26px;background:#fff;border-top:1px solid rgba(11,42,63,.1)}
  .ct-foot-right{display:flex;align-items:center;gap:12px}
  .ct-clear, .ct-cancel{font:600 12px/1 system-ui,sans-serif;letter-spacing:.06em;cursor:pointer;padding:12px 6px;color:rgba(11,42,63,.6)}
  .ct-clear:hover, .ct-cancel:hover{color:var(--ink)}
  .ct-apply{min-height:48px;padding:0 26px;border-radius:100px;cursor:pointer;
      font:700 12px/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}
  .ct-apply-n{font-variant-numeric:tabular-nums}
  /* ---- theme-bleed isolation (the reset strips input/select/button chrome) ---- */
  .ar-head .ar-search{background:rgba(245,242,236,.1)!important;border:1px solid rgba(245,242,236,.2)!important;border-radius:100px!important}
  .ar-head .ar-search input{font:400 15px/1 system-ui,sans-serif!important;color:var(--mist)!important;width:100%;background:transparent!important}
  .ar-head .ar-search input::placeholder{color:rgba(245,242,236,.5)!important;opacity:1}
  .ar-head .ar-search-ico{color:rgba(245,242,236,.55)!important}
  .ar-open{background:transparent!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1.5px rgba(11,42,63,.24)!important;border-radius:100px!important}
  .ar-open:hover{box-shadow:inset 0 0 0 1.5px var(--rust)!important;color:var(--rust)!important}
  .ar-open-n{background:var(--rust)!important;color:#fff!important;border-radius:100px!important}
  .ar-sort select, .ct-find input, .ct-num input{background:#fff!important;color:var(--ink)!important;border-radius:100px!important;cursor:pointer;
    font:600 12px/1 system-ui,sans-serif!important;letter-spacing:.04em;min-height:38px!important;padding:0 32px 0 13px!important;
    border:1px solid rgba(11,42,63,.14)!important;
    background-image:linear-gradient(45deg,transparent 50%,rgba(11,42,63,.5) 50%),linear-gradient(135deg,rgba(11,42,63,.5) 50%,transparent 50%)!important;
    background-position:calc(100% - 18px) 17px,calc(100% - 13px) 17px!important;
    background-size:5px 5px,5px 5px!important;background-repeat:no-repeat!important}
  .ct-find{background:#fff!important;border:1px solid rgba(11,42,63,.14)!important;border-radius:100px!important}
  .ct-find input, .ct-num input{border:0!important;background-image:none!important;padding:0!important;
    border-radius:0!important;font:400 14px/1 system-ui,sans-serif!important;letter-spacing:0;cursor:text;min-height:auto!important}
  .ct-find input::placeholder{color:rgba(11,42,63,.42)!important;opacity:1}
  .ct-num input{width:96px;font:600 16px/1 system-ui,sans-serif!important;font-variant-numeric:tabular-nums}
  .ct-num{box-shadow:inset 0 0 0 1px rgba(11,42,63,.14)}
  .ct-choice{background:#fff!important;border-radius:14px!important;box-shadow:inset 0 0 0 1.5px rgba(11,42,63,.12)!important}
  .ct-choice:hover{box-shadow:inset 0 0 0 1.5px rgba(194,112,63,.5)!important}
  .ct-choice.is-on{box-shadow:inset 0 0 0 2px var(--rust)!important}
  .ct-preset{background:transparent!important;border-radius:100px!important;box-shadow:inset 0 0 0 1.5px rgba(11,42,63,.16)!important}
  .ct-preset.is-on{box-shadow:inset 0 0 0 2px var(--rust)!important;color:var(--rust)!important}
  .ct-rail-btn{background:transparent!important;border-radius:12px!important}
  .ct-rail-btn.is-on{background:#fff!important}
  .ct-x, .ct-clear, .ct-cancel, .ct-exp, .ct-cont-all{background:transparent!important}
  /* The theme sets display on button, which un-flexes ours: the chevron spans stop
     being flex items, stay inline, and an inline box ignores width/height/transform —
     so the chevron rendered as a bare vertical border line. Same collapse put
     .ct-choice's label and count on one line with no space between them. */
  .ct-exp, .ar-th-btn{display:inline-flex!important;align-items:center!important;
    gap:8px!important;padding:0 12px!important}
  .ar-th-btn{padding:0!important;gap:7px!important}
  .ct-exp-chev, .ar-th-chev{display:block!important;flex:none!important;
    box-sizing:border-box!important;background:transparent!important}
  .ct-exp-chev{width:6px!important;height:6px!important}
  .ar-th-chev{width:5px!important;height:5px!important}
  .ct-choice{display:flex!important;flex-direction:column!important;
    align-items:flex-start!important;gap:7px!important;text-align:left!important}
  .ar-table th{text-align:left!important;vertical-align:bottom!important}
  .ct-apply{background:var(--accent)!important;color:var(--ink)!important;border-radius:100px!important;
    box-shadow:0 8px 26px rgba(255,179,71,.42)!important}
  .ct-apply:hover{box-shadow:0 10px 32px rgba(255,179,71,.62)!important}
  .ar-more{background:transparent!important;box-shadow:inset 0 0 0 1.5px rgba(11,42,63,.22)!important;border-radius:100px!important}
  .ar-more:hover{box-shadow:inset 0 0 0 1.5px var(--rust)!important;color:var(--rust)!important}
  .ar-chip, .ar-chip.is-ctx{border-radius:100px!important}
  .ar-reset{background:transparent!important}
  .ar-crumbs a{color:rgba(245,242,236,.62)!important}
  .ar-crumbs a:hover{color:var(--accent)!important}
  a.ar-chip{color:var(--ink)!important}
  /* ==========================================================================
     ARCHIVE VIEWS — grid (default) / table / map
     ========================================================================== */
  .ar-views{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:100px;background:rgba(11,42,63,.07)}
  .ar-view{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 14px;border-radius:100px;cursor:pointer;
      font:600 11px/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:rgba(11,42,63,.55)}
  .ar-view:hover{color:var(--ink)}
  .ar-view-ico{font-size:13px;letter-spacing:0}
  .ar-view-lock{font-size:9px;letter-spacing:0;opacity:.7}
  /* While rows are being fetched: dim only, never move — opacity cannot reflow,
     so the row you were about to click stays exactly where it is. */
  .ar-body.is-busy .ar-grid, .ar-body.is-busy .ar-table-wrap{opacity:.5;transition:opacity .16s}
  .ar-body.is-busy{cursor:progress}

  /* ---- table ---- */
  .ar-table-wrap{overflow-x:auto;padding:22px 0 6px}
  .ar-table{width:100%;border-collapse:collapse;font:400 14px/1.4 system-ui,sans-serif}
  .ar-table th{text-align:left;padding:0 16px 12px;white-space:nowrap;
      font:700 10px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--rust)}
  .ar-table th.is-num, .ar-table td.is-num{text-align:right;font-variant-numeric:tabular-nums}
  .ar-th-btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit}
  .ar-th-chev{width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.35}
  .ar-th-btn.is-on .ar-th-chev{opacity:1}
  .ar-tr{cursor:pointer;background:#fff;transition:background .15s,box-shadow .15s}
  .ar-tr:hover{background:#fff;box-shadow:0 6px 20px rgba(11,42,63,.1)}
  .ar-table td{padding:15px 16px;border-top:1px solid rgba(11,42,63,.09);vertical-align:middle;color:rgba(11,42,63,.8)}
  .ar-table tbody tr:first-child td{border-top:0}
  .ar-td-name{font:600 15px/1.2 system-ui,sans-serif;color:var(--ink)}
  .ar-tr:hover .ar-td-name{color:var(--rust)}
  .ar-td-country{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
  .ar-td-owner{display:inline-flex;align-items:center}
  .ar-td-price{font:700 14px/1 system-ui,sans-serif;color:var(--rust);font-variant-numeric:tabular-nums}
  /* ---- map ---- */
  /* isolate: Leaflet's own panes go up to z-index 1000 and, without a stacking
       context here, painted over the chart table. */
  .ar-map{height:min(680px,72vh);margin:22px 0 6px;border-radius:18px;overflow:hidden;
      position:relative;z-index:0;isolation:isolate;
      background:var(--deep);box-shadow:0 18px 50px rgba(11,42,63,.18)}
  .ar-map-gate{margin:22px 0 40px;border-radius:18px;overflow:hidden;background:var(--deep);color:var(--mist);
      display:flex;align-items:center;justify-content:center;min-height:min(520px,60vh);
      background-image:radial-gradient(120% 90% at 50% 0%,rgba(255,179,71,.14),transparent 60%)}
  .ar-map-gate-in{max-width:440px;padding:40px 32px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
  .ar-map-gate-t{margin:0;font:600 26px/1.15 ui-serif,Georgia,serif}
  .ar-map-gate-p{margin:0;font:400 15px/1.6 system-ui,sans-serif;color:rgba(245,242,236,.68);text-wrap:pretty}
  .ar-map-gate .cta{margin-top:6px}
  /* The popup card must carry its OWN panel: Leaflet's wrapper is made transparent
     so the card's 18px corners are the popup's corners, which means every panel
     property (background, radius, clipping, width) has to be stated here rather
     than inherited from the rail's .boat-card. */
  .ar-pop .leaflet-popup-content-wrapper{padding:0;background:transparent;box-shadow:none;border-radius:18px}
  .ar-pop .leaflet-popup-content{margin:0!important;width:260px!important;line-height:1.4}
  .ar-pop .boat-card.is-popup{display:block;width:260px;background:#fff!important;
      border:1px solid rgba(11,42,63,.1)!important;border-radius:18px!important;overflow:hidden!important;
      box-shadow:0 18px 40px rgba(11,42,63,.35)!important;transform:none!important}
  .ar-pop .boat-card.is-popup:hover{transform:none!important;box-shadow:0 18px 40px rgba(11,42,63,.35)!important}
  .ar-pop .boat-card.is-popup .boat-photo{height:150px;border-radius:0}
  .ar-pop .boat-card.is-popup .boat-body{padding:16px 18px 18px}
  .ar-pop .leaflet-popup-tip{background:#fff;box-shadow:none}
  .ar-pop .leaflet-popup-close-button{color:var(--ink)!important;background:#fff!important;
      width:22px!important;height:22px!important;border-radius:50%!important;
      font:700 15px/22px system-ui,sans-serif!important;text-align:center;padding:0!important;
      top:8px!important;right:8px!important;box-shadow:0 2px 6px rgba(11,42,63,.25)!important;opacity:.9}
  .ar-pop .leaflet-popup-close-button:hover{opacity:1}
  .ar-view{background:transparent!important;border-radius:100px!important}
  .ar-view.is-on{background:#fff!important;color:var(--ink)!important;box-shadow:0 3px 10px rgba(11,42,63,.12)!important}
  .ar-th-btn{background:transparent!important}
  .ar-table{border-collapse:collapse!important;border-spacing:0!important;width:100%!important;
    border:0!important;font:400 14px/1.4 system-ui,sans-serif!important}
  .ar-table tr, .ar-table thead, .ar-table tbody{border:0!important;background:transparent!important}
  .ar-table th, .ar-table td{border:0!important;border-radius:0!important;background:transparent!important;
    vertical-align:middle!important;text-align:left!important;width:auto!important}
  .ar-table th{padding:0 16px 12px!important;
    font:700 10px/1 system-ui,sans-serif!important;letter-spacing:.14em!important;
    text-transform:uppercase!important;color:var(--rust)!important}
  .ar-table td{padding:15px 16px!important;border-top:1px solid rgba(11,42,63,.09)!important;
    font:400 14px/1.4 system-ui,sans-serif!important;color:rgba(11,42,63,.8)!important}
  .ar-table td.ar-td-name-cell, .ar-table .ar-td-name{font:600 15px/1.2 system-ui,sans-serif!important;color:var(--ink)!important}
  .ar-table tbody tr:first-child td{border-top:0!important}
  .ar-table th.is-num, .ar-table td.is-num{text-align:right!important}
  .ar-table tbody tr:first-child td{border-top:0!important}
  .ar-tr{background:#fff!important}
  .ar-map-gate .cta{background:var(--accent)!important;color:var(--ink)!important;border-radius:100px!important;
    min-height:48px;display:inline-flex;align-items:center;padding:0 26px;
    font:700 12px/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}
}

@media(max-width:680px) {
  #site {
  .ar-td-owner.is-awaiting{display:inline-flex;align-items:center;gap:10px;font-style:italic;color:rgba(11,42,63,.62);white-space:nowrap}
  .ar-td-owner .avatar.sm.is-anchor::after{inset:6px}
    /* The nav pill's bottom edge sits at ~86px on a phone (22px offset + 64px pill),
       so the old 84px tucked the breadcrumbs UNDER it. Clear the pill, then buy the
       height back off the crumb-to-title gap. */
    .ar-head{padding-top:112px}
    .ar-crumbs{margin-bottom:26px}
    .ar-grid{grid-template-columns:1fr;padding:20px 24px 44px;margin:-8px -24px -44px}
    /* Count on its own line, then view switch + chart table, then sort full width:
       the three controls do not fit across a phone, and squeezing them clipped the
       sort select against the gutter. */
    .ar-toolbar{align-items:flex-start}
    .ar-tools{width:100%;flex-wrap:wrap;row-gap:12px;justify-content:space-between}
    .ar-view-label{display:none}
    .ar-view{min-height:44px;padding:0 16px}
    .ar-sort{flex:1 1 100%;min-width:0;justify-content:space-between}
    .ar-sort select{flex:1 1 auto;min-width:0;max-width:100%;min-height:44px!important}
    .ct-clear, .ct-cancel{min-height:44px}
    /* Full-bleed scroller: the table is wider than a phone, so let it run to both
       edges — a scroll area that starts inside the gutter reads as a cut-off table. */
    .ar-table-wrap{margin:0 -24px;padding:22px 24px 6px;-webkit-overflow-scrolling:touch}
    .ar-table td, .ar-table th{white-space:nowrap}
    .ar-table td{padding:14px 14px}
    .ar-map{height:60vh}
  }
}

@media(max-width:820px) {
  #site {
  .ar-td-owner.is-awaiting{display:inline-flex;align-items:center;gap:10px;font-style:italic;color:rgba(11,42,63,.62);white-space:nowrap}
  .ar-td-owner .avatar.sm.is-anchor::after{inset:6px}
    .ct{width:100vw;height:100dvh;max-height:none;border-radius:0;top:0;left:0;transform:translateY(2%);}
    .ct.is-open{transform:none}
    .ct-body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
    .ct-rail{flex-direction:row;gap:8px;overflow-x:auto;padding:12px;border-right:0;
      border-bottom:1px solid rgba(11,42,63,.1)}
    .ct-rail-btn{flex:none;min-height:40px;white-space:nowrap}
    .ct-models, .ct-cont-grid{grid-template-columns:1fr;padding-left:28px}
    .ct-cont-grid{padding-left:0}
  }
}