:root{ --blue:#1558d6; --blue-dark:#0e44ab; }
html,body,#map{height:100%;margin:0;font-family:system-ui,sans-serif;}
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

    /* Upload panel */
    #panel{position:absolute;top:20px;left:20px;z-index:1000;background:#fff;padding:8px 12px;border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,.15);display:flex;gap:8px;align-items:center;}
    #panel.dragover{box-shadow:0 0 0 2px #000 inset;background:rgba(0,0,0,.05);}
    #panel input[type=file]{display:none;}
    #panel button,#uploadLabel{cursor:pointer;background:#000;color:#fff;border:1px solid #000;padding:6px 16px;border-radius:10px;font-weight:600;transition:.15s;}
    #panel button:disabled{background:#aaa;border-color:#aaa;cursor:not-allowed;}
    #uploadLabel:hover,#panel button:hover:not(:disabled){background:#fff;color:#000;}
    #panel.is-hidden{display:none!important;}


    /* Flip controls */

/* ──────────────────────────────
   Dims pill (Variant C) + date
   ────────────────────────────── */
#dims{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  z-index:999; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
#dims.show{ opacity:1; pointer-events:auto }
#dims .dims-wrap{ display:flex; flex-direction:column; align-items:center; gap:6px }

/* segmented pill */
#dims .dims-pill{
  display:flex; align-items:center; background:rgba(0,0,0,.85); color:#fff;
  border-radius:999px; box-shadow:0 6px 16px rgba(0,0,0,.35);
  border:1px solid rgba(0,0,0,.85); overflow:hidden; cursor:pointer; user-select:none;
}
#dims .dims-pill .seg{ padding:10px 16px; font-size:14px; line-height:1 }
#dims .dims-pill .seg + .seg{ border-left:1px solid rgba(255,255,255,.15) }
#dims .dims-pill .k{ opacity:.72; margin-right:6px }

/* mini date chip */
#dims .date-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; color:#334155; background:#fff; border-radius:999px;
  padding:4px 8px; box-shadow:0 2px 8px rgba(0,0,0,.1); border:1px solid #e2e8f0;
}
#dims .date-chip svg{ width:12px; height:12px }

/* ──────────────────────────────
   Right drawer (full-height scroll)
   ────────────────────────────── */
#dimsDrawer{
  position:fixed; inset:0; z-index:1100;
  display:none; background:rgba(0,0,0,.3);
}
#dimsDrawer.show{ display:block }

#dimsDrawer .panel{
  position:absolute; right:0; top:0; height:100%;
  width:min(520px,92%);
  background:#fff; box-shadow:-12px 0 24px rgba(0,0,0,.2);
  transform:translateX(100%); transition:transform .25s ease;
  overflow-y:auto;               /* scroll entire sidebar */
}
#dimsDrawer.show .panel{ transform:translateX(0) }

#dimsDrawer .head{
  position:sticky; top:0; z-index:1; background:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid #e5e7eb;
}
#dimsDrawer .close{
  border:none; background:transparent; font-size:20px;
  cursor:pointer; padding:6px; border-radius:8px;
}
#dimsDrawer .body{ padding:16px 18px }

/* key-value cards */
#dimsDrawer .kv{
  display:grid; grid-template-columns:1fr 1fr;
  gap:12px; margin-bottom:16px;
}
#dimsDrawer .card{
  background:#f8fafc; border:1px solid #e2e8f0;
  border-radius:14px; padding:10px 12px;
}
#dimsDrawer .card .lbl{ color:#64748b; font-size:12px; text-align:center; margin:0 0 4px }
#dimsDrawer .card .val{ font-weight:500; text-align:center; text-transform:capitalize; font-size: 14px }
/* keep units and emails lowercase inside values */
#dimsDrawer .val .unit, #dimsDrawer .val a{ text-transform:none }

/* ──────────────────────────────
   Axle table (+ spacing overlay)
   ────────────────────────────── */
#dimsDrawer table{
  width:100%;
  border-collapse:separate; border-spacing:0;  /* needed for overlay row */
  font-size:14px; table-layout:fixed;
}
#dimsDrawer th, #dimsDrawer td{
  font-variant-numeric:tabular-nums;
  text-align:center;
}
#dimsDrawer thead th{
  background:#f1f5f9; text-align:center;
  padding:8px 12px; border-bottom:1px solid #e2e8f0;
}
#dimsDrawer tbody td{
  padding:4px 10px;
  height:28px;               /* tighter rows */
  vertical-align:middle;
  border-bottom:1px solid #eef2f7;
}

/* equal columns */
#dimsDrawer th.w-axle{ width:25% }
#dimsDrawer th.w-wheels{ width:25% }
#dimsDrawer th.w-weight{ width:25% }
#dimsDrawer th.w-spacing{ width:25%; text-align:center }

/* subtle zebra */
#dimsDrawer tbody tr:nth-child(odd) > td{ background:#fcfdff }

/* spacing shown BETWEEN rows (last column only) */
#dimsDrawer tr.spacing-row td{
  padding:0; height:0; border:0; position:relative;
}
#dimsDrawer td.spacing-cell{
  position:relative; overflow:visible; pointer-events:none;
}
#dimsDrawer td.spacing-cell::after{
  content:"";
  position:absolute; left:8px; right:8px; top:0;
  transform:translateY(-50%);                 /* straddle boundary */
  border-top:1px dashed #e5e7eb;
}
#dimsDrawer .spacing-chip{
  position:absolute; left:50%; top:0; transform:translate(-50%,-50%);
  font-size:14px; color:#475569; background:#fff;
  padding:0 8px; border-radius:999px; border:1px solid #dbe2ea;
  box-shadow:0 1px 2px rgba(15,23,42,.06);
}
/* ──────────────────────────────
   Summary pills (top-right)
   ────────────────────────────── */
#summary{
  position:absolute; top:70px; right:20px; z-index:1000;
  background:#fff; padding:8px 16px; border-radius:14px;
  box-shadow:0 2px 6px rgba(0,0,0,.15); display:flex; gap:10px;
}
#summary[hidden]{ display:none }

/* Temporarily hide summary panel and carousel but keep markup available */
#summary,
#carousel{
  display:none !important;
}

.pill{
  display:inline-block; min-width:26px; padding:4px 6px;
  border-radius:50%; font-weight:700; text-align:center;
  color:#fff; cursor:pointer; user-select:none;
}
.pill-cau{ background:#fa9f2c }
.pill-bad{ background:#cc2222 }

    /* Slide-in gallery */
    #carousel{position:absolute;top:50%;right:20px;transform:translateY(-50%);width:300px;background:#fff;border-radius:16px;box-shadow:0 6px 24px rgba(0,0,0,.18);padding:18px 22px 20px;font-size:.92rem;color:#1b2330;z-index:1001;display:grid;grid-template-columns:auto 1fr auto;gap:12px; align-items:center}
    #carousel[hidden]{display:none;}
    #carousel h4{margin:0 0 6px;font-size:1rem;}
    .arrow{cursor:pointer;font-size:1.6rem;font-weight:700;color:black;user-select:none;}
    .closeX{position:absolute;top:6px;right:10px;font-size:1.2rem;cursor:pointer;color:#888;}
    .detail small{display:block;color:#777777;margin-top:2px;}

   /* Card surface (DARK), left accent bar */
/* Card: compact + responsive width */
.hover-card{
  color:#fff;
  background:rgba(0,0,0,.85); /* card surface */
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  box-shadow:0 22px 60px rgba(0,0,0,.55);

  /* was: min-width:260px; max-width:380px; */
  width: clamp(220px, 32vw, 340px);
  max-width: min(360px, 80vw);
  overflow:hidden;
}
/* Title – allow wrap, clamp to 3 lines on taller cards */
.hover-card .title{
  font: 800 clamp(15px, 1.25vw, 18px)/1.28 system-ui;
  letter-spacing:.2px;
  overflow-wrap:anywhere;
  hyphens:auto;
  display:block;
  margin:0;
}

/* Body */
.hover-card .muted{
  color:#cfd6e4;
  font: 600 clamp(12px, 1.05vw, 14px)/1.32 system-ui;
}

/* Chip */
.hover-card .chip{
  display:inline-block;
  font:700 clamp(11px,1.18vw,13px)/1.1 system-ui;
  text-transform:uppercase;
  color:#fff;                    /* was #0a0c10 */
  background:var(--accent);      /* filled chip */
  padding:3px 6px;
  border-radius:999px;
}

/* If some cards still use .chip-outline, make it look filled as well */
.hover-card .chip-outline{
  color:#fff;
  background:var(--accent);
  border-color:var(--accent);
}

.hover-card.bar::before{ width:3px }     /* was 4px */
.hover-card .inner{
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
/* Rows: icon in a fixed column, text in a fluid column */
/* Rows: icon optional, text gets the rest of the width */
.hover-card .row{
  display: flex;                 /* not grid */
  align-items: flex-start;
  gap: 6px;
  margin: 2px 0;
}

/* Icon (if present) gets a fixed width; if not present, row still looks fine */
.hover-card .ico{
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  opacity: .85;
}

/* Text column should expand and wrap normally */
.hover-card .row .muted{
  flex: 1 1 auto;                /* take remaining width */
  min-width: 0;                  /* let it shrink to fit container */
  overflow-wrap: anywhere;       /* wrap long words/refs */
  word-break: break-word;        /* (belt and braces) */
}

/* If you will have rows without icons, kill the extra gap for those */
.hover-card .row:first-child .muted {} /* (no-op placeholder) */
.hover-card .divider{height:1px;background:rgba(255,255,255,.12);margin:8px 0}
.hidden{display:none}

/* Theme accents */
.theme-red  { --accent:#cc2222 }
.theme-orange{ --accent:#fa9f2c }
.theme-green{ --accent:#12b76a }

/* Make Leaflet’s wrapper transparent + remove tip */
.leaflet-popup.hover-dark .leaflet-popup-content-wrapper{background:transparent;border:0;border-radius:14px;box-shadow:none;margin:0;padding:0}
.leaflet-popup-content{margin:0;padding:0}
.leaflet-popup-tip-container{display:none}


 .theme-red .chip,
.theme-red .chip-outline {
  color: #fff !important;        /* white on red */
}

.theme-green .chip,
.theme-green .chip-outline,
.theme-orange .chip,
.theme-orange .chip-outline {
  color: #0b0e12 !important;     /* black on green/orange */
}





/* Base shape + positioning (no outline, translucent black box) */
#acceptBtn.action-btn.action-accept,
#rejectBtn.action-btn.action-reject{
  position: fixed;
  bottom: 24px;
  z-index: 3000;                 /* above Leaflet panes/controls */
  width: 56px;
  height: 56px;
  border: 0 !important;          /* no border/outline */
  border-radius: 14px !important;
  background: rgba(0,0,0,.85) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  cursor: pointer;
  user-select: none;

  /* Hide any inner text so it can't affect centering */
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden;
}

/* Corners */
#rejectBtn.action-btn.action-reject{ left: 24px; }
#acceptBtn.action-btn.action-accept{ right: 24px; }

/* Hover/active */
#acceptBtn.action-btn.action-accept:hover,
#rejectBtn.action-btn.action-reject:hover{
  filter: brightness(1.06);
  box-shadow: 0 10px 24px rgba(0,0,0,.30);
}
#acceptBtn.action-btn.action-accept:active,
#rejectBtn.action-btn.action-reject:active{
  transform: translateY(1px);
}

/* Centered icons via ::after (doesn't rely on fonts) */
#acceptBtn.action-btn.action-accept::after,
#rejectBtn.action-btn.action-reject::after{
  content: "";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 28px; height: 28px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px 28px;
}

/* Make both icons white */
#acceptBtn.action-btn.action-accept::after{
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M20 6L9 17l-5-5'/></svg>");
}

#rejectBtn.action-btn.action-reject::after{
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M6 6L18 18M6 18L18 6'/></svg>");
}

/* Respect your JS visibility logic */
#acceptBtn[hidden], #rejectBtn[hidden]{ display:none !important; }



/* Confirm modal */
.rc-overlay{
  position: fixed; inset: 0; z-index: 4000;
  display: grid; place-items: center;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}
.rc-overlay[hidden]{ display:none !important; }  /* <- stays hidden until opened */

.rc-modal{
  width: min(92vw, 460px);
  background: rgba(10,12,16,.95);
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.rc-modal h3{ margin: 2px 0 6px; font: 700 18px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; }
.rc-sub{ margin: 0 0 14px; color: #cfd6e4; font-size: 14px; }
.rc-actions{ display:flex; gap:10px; justify-content:flex-end; }
.rc-btn{ appearance:none; border:0; cursor:pointer; padding:10px 14px; border-radius:12px; font-weight:700; }
.rc-neutral{ background:#1f2937; color:#e5e7eb; }
.rc-neutral:hover{ filter:brightness(1.06); }
.rc-yes{ background:#14c38e; color:#062d22; }
.rc-yes:hover{ filter:brightness(1.06); }



/* Hide on print */
@media print{ .action-btn{ display:none !important; } }
.dims-pill .seg {
  position: relative;
  cursor: pointer;
  outline: none;
}
.dims-pill .seg:focus-visible {
  outline: 2px solid rgba(0,0,0,.35);
  border-radius: .5rem;
}


/* Tooltip bubble */
.dims-pill .seg[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 6px);
  background: rgba(17, 24, 39, .95); /* near-black */
  color: white;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: .75rem;
  line-height: 1.1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 30;
}
.dims-pill .seg[data-tip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(17, 24, 39, .95);
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 29;
}
.dims-pill .seg:hover::after,
.dims-pill .seg:focus::after,
.dims-pill .seg:hover::before,
.dims-pill .seg:focus::before {
  opacity: 1;
  transform: translate(-50%, 0);
}



/* Pick-mode hint (minimal, centered) */
.pick-hint[hidden]{ display:none !important; }
.pick-hint{
  position: fixed;
  top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 3500;
  background: rgba(0,0,0,.85);
  color: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  font: 700 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  white-space: nowrap;
}
@media (max-width: 480px){
  .pick-hint{ top: 12px; font-size: 13px; padding: 8px 12px; }
}



/* Restriction form modal layout (reuses rc-overlay / rc-modal) */
.rf-modal{ padding:16px; }

.rf-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.rf-row{ grid-column: 1 / -1; }

.rf-field{ display:flex; flex-direction:column; }
.rf-label{
  margin-bottom:6px;
  color:#cfd6e4;
  font: 700 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  display:flex; align-items:center; gap:6px;
}

.rf-input, .rf-textarea{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color:#fff;
  border-radius:12px;
  padding:10px 12px;
  outline:0;
}
.rf-input:focus, .rf-textarea:focus{
  border-color:#14c38e;
  box-shadow: 0 0 0 3px rgba(20,195,142,.18);
}
.rf-input[readonly]{
  background: rgba(255,255,255,.08);
  cursor: text;
  color:#e2e8f0;
}
.rf-input[readonly]:focus{
  border-color: rgba(255,255,255,.25);
  box-shadow: none;
}

.rf-chip{
  display:flex; align-items:center;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
  border-radius:12px;
  padding:10px 12px;
}

/* tiny info badge with hover tip */
.rf-info{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:999px;
  background: rgba(255,255,255,.15); color:#fff;
  font: 700 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  cursor: help; position: relative;
}
.rf-info .rf-tip{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom: calc(100% + 8px);
  width: 260px; padding:8px 10px;
  background: rgba(17,24,39,.95); color:#e5e7eb;
  border-radius:10px; border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  font: 600 12px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  display:none; z-index:10;
}
.rf-info:hover .rf-tip, .rf-info:focus .rf-tip{ display:block; }

@media (max-width: 520px){
  .rf-grid{ grid-template-columns: 1fr; }
}

/* Make selects readable on dark UI (closed state) */
select.rf-input{
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
select.rf-input:focus{
  border-color:#14c38e !important;
  box-shadow: 0 0 0 3px rgba(20,195,142,.18);
}
/* The dropdown list is OS-styled; ensure text is readable there */
select.rf-input option{ color:#111; background:#fff; }

/* Input wrapper anchors the suffix to the input row (not the label) */
.rf-inputwrap{ position: relative; }

/* Keep height consistent and leave room for the suffix */
.rf-input--withsuffix{
  padding-right: 56px !important;  /* space for the unit */
}

/* Slim inline suffix: no pill, perfectly centered inside the input */
.rf-suffix{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;             /* never blocks typing */
  background: transparent;
  border: 0;
  padding: 0;
  color: #e8edf6;
  font: 700 13px/1 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  opacity: .95;
}

/* Optional subtle divider before the suffix (like a searchbar icon split) */
.rf-inputwrap::after{
  content: "";
  position: absolute;
  right: 44px;                      /* ~ suffix left edge */
  top: 50%;
  transform: translateY(-50%);
  height: 60%;
  width: 1px;
  background: rgba(255,255,255,.12);
  pointer-events: none;
}

/* Remove number spinners (Value field) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"]{
  -moz-appearance: textfield;  /* Firefox */
  appearance: textfield;
}

/* Optional: if a popup ever blocks clicks, this disables popup/marker panes ONLY in pick mode */
#map.pick-mode .leaflet-popup-pane,
#map.pick-mode .leaflet-marker-pane,
#map.pick-mode .leaflet-shadow-pane { pointer-events: none !important; }

/* Make the Road name field span both grid columns */
.rf-grid label:has(#rfRoad) { grid-column: 1 / -1; }

/* Ensure the input stretches inside that row */
.rf-grid label:has(#rfRoad) .rf-input { width: 100%; box-sizing: border-box; }
/* BOTTOM SHEET — force bottom anchoring and neutralize any old "top" rules */




/* Keep the map bright and clickable behind the form */
#rfOverlay{
  background: transparent !important;
  backdrop-filter: none !important;
  pointer-events: none;        /* clicks pass through the overlay */
}

/* Right-half centered card (never crosses the screen center) */
#rfOverlay .rf-modal{
  /* tune these to taste */
  --gutter: 12px;                                 /* gap from the screen center */
  --card-min: 360px;                              /* minimum width */
  --card-ideal: 36vw;                             /* preferred width */
  --card-max: calc(50vw - (2 * var(--gutter)));   /* max so it stays in right half */

  position: fixed;
  top: 50% !important;                            /* vertical center */
  left: 75vw;                                     /* center within the right half */
  transform: translate(-50%, -50%);               /* center the card on that point */

  /* width is: clamp(min, ideal, max) — never wider than the right half */
  width: clamp(var(--card-min), var(--card-ideal), var(--card-max));
  max-width: min(560px, var(--card-max));

  height: auto;                                   /* shrink to content (no inner whitespace) */
  max-height: calc(100vh - 24px);                 /* never overflow viewport */

  margin: 0;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(17,24,39,.98);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
  overflow: auto;
  z-index: 5000;
  pointer-events: auto;                           /* card remains interactive */
}

/* Tidy up internal spacing so it "fits" without big blank areas */
#rfOverlay .rf-modal .rf-grid{ row-gap: 10px; }
#rfOverlay .rf-modal .rf-field{ margin: 6px 0; }
#rfOverlay .rf-modal .rf-actions{ margin-top: 10px; }

/* Small screens: center in the full screen (no right-half constraint) */
@media (max-width: 640px){
  #rfOverlay .rf-modal{
    left: 50vw;
    transform: translate(-50%, -50%);
    width: min(92vw, 520px);
    max-width: 92vw;
  }
}

/* Hide dims pill + date chip while the Restriction Form is open */
body:has(#rfOverlay:not([hidden])) #dims .dims-pill,
body:has(#rfOverlay:not([hidden])) #dims .date-chip{
  display: none !important;
}

.email-modal{position:relative;width:min(1100px,95vw);max-height:90vh;display:flex;flex-direction:column;padding:24px 28px 24px;}
#emailTitle{margin:0 0 12px;font-size:24px;font-weight:700;color:#f8fafc;padding-right:120px;}
.email-exit-btn{
  position:absolute;
  top:18px;
  right:24px;
  border:none;
  background:rgba(30,41,59,.88);
  color:#e2e8f0;
  font-size:12px;
  font-weight:600;
  padding:6px 14px;
  border-radius:999px;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(15,23,42,.35);
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.email-exit-btn:hover,
.email-exit-btn:focus-visible{
  background:#1e293b;
  color:#fff;
  transform:translateY(-1px);
}
.email-layout{display:flex;flex-direction:column;gap:16px;overflow:hidden;padding:24px 0 0;flex:1 1 auto;min-height:0;}
.email-pane{display:none;}
.email-pane--fields{display:none!important;}
.sel-pane{display:flex;flex-direction:column;gap:12px;width:100%;align-items:stretch;flex:1 1 auto;min-height:0;}
.sel-header{display:none;}
.sel-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:flex-start;flex:1 1 auto;}
.sel-tabs{display:flex;gap:10px;width:100%;justify-content:flex-start;flex-wrap:wrap;margin:0;}
.sel-tab{position:relative;flex:0 1 auto;min-width:130px;border:1px solid rgba(148,163,184,.18);background:rgba(12,19,34,.75);color:#cbd5f5;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;letter-spacing:.15px;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .15s ease;}
.sel-tab:hover{background:rgba(18,28,48,.85);}
.sel-tab:focus-visible{outline:2px solid rgba(59,130,246,.4);outline-offset:3px;}
.sel-tab.sel-tab--active{background:linear-gradient(135deg,rgba(59,130,246,.3),rgba(37,99,235,.3));border-color:rgba(59,130,246,.5);color:#f8fafc;}
.sel-tab.sel-tab--empty:not(.sel-tab--active){opacity:.55;}
.sel-scroll{width:100%;border:none;border-radius:0;padding:0;overflow-y:auto;overflow-x:hidden;max-height:62vh;background:transparent;box-shadow:none;-ms-overflow-style:none;scrollbar-width:none;overscroll-behavior:contain;flex:1 1 auto;min-height:0;}
.sel-scroll::-webkit-scrollbar{display:none;}
#selList{scrollbar-width:none;}
#selList::-webkit-scrollbar{width:0;height:0;}
.sel-group{display:flex;flex-direction:column;gap:12px;margin:0;}
.sel-group + .sel-group{margin-top:24px;}
.sel-group[hidden]{display:none;}
.sel-group:last-of-type{margin-bottom:0;}
.sel-group h4{display:none;}
.sel-empty{padding:20px 12px;text-align:center;font-size:13px;color:#94a3b8;}
.sel-item{position:relative;display:flex;flex-direction:column;gap:6px;padding:12px 26px 32px 46px;border-radius:16px;border:1px solid rgba(148,163,184,.16);background:rgba(15,23,42,.5);cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .15s ease,padding-bottom .2s ease;}
.sel-item:hover{background:rgba(18,28,48,.55);}
.sel-item:focus-visible{outline:2px solid rgba(59,130,246,.45);outline-offset:3px;}
.sel-item::before{content:"";position:absolute;inset:0;border-radius:18px;box-shadow:0 12px 28px rgba(15,23,42,.32);opacity:0;transition:opacity .2s ease;pointer-events:none;z-index:0;}
.sel-item::after{content:"";position:absolute;left:24px;top:12px;bottom:12px;width:4px;border-radius:999px;background:var(--accent,#38bdf8);opacity:.9;transition:opacity .2s.ease;}
.sel-item.sel-selected{border-color:var(--accent,rgba(88,175,255,.55));background:rgba(25,41,73,.65);padding-bottom:34px;}
.sel-item.sel-selected::before{opacity:1;}
.sel-item.sel-selected::after{opacity:1;}
.sel-item .sel-check{position:absolute;opacity:0;pointer-events:none;}
.sel-item .sel-content{position:relative;z-index:1;display:flex;flex-direction:row;align-items:flex-start;gap:12px;}
.sel-item .sel-main{display:flex;flex-direction:column;gap:5px;flex:1 1 auto;min-width:0;}
.sel-item .sel-main > *{margin:0;}
.sel-item .sel-title{font-size:15px;font-weight:600;line-height:1.32;color:var(--accent,#f1f5f9);letter-spacing:.15px;}
.sel-item .sel-meta,
.sel-item .sel-note{display:block;font-size:12px;line-height:1.45;color:#a9b7cf;font-weight:500;margin-top:3px;white-space:normal;}
.sel-item .sel-note{color:#cbd5f5;}
.sel-item .sel-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex:0 0 auto;margin-top:2px;}
.sel-map-btn{
  appearance:none;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(14,23,42,.78);
  color:#e2e8f0;
  font-size:12px;
  font-weight:600;
  padding:5px 11px;
  border-radius:999px;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.sel-map-btn:hover,
.sel-map-btn:focus-visible{
  background:rgba(59,130,246,.2);
  border-color:rgba(59,130,246,.45);
  transform:translateY(-1px);
  outline:none;
}
.sel-item .sel-tick{position:absolute;z-index:1;left:50%;bottom:10px;width:28px;height:28px;border-radius:999px;border:2px solid transparent;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--accent,#38bdf8);opacity:0;transform:translate(-50%,6px) scale(.9);transition:opacity .18s ease,transform .18s ease,border-color .18s ease,background .18s ease;}
.sel-item.sel-selected .sel-tick{opacity:1;transform:translate(-50%,0) scale(1);border-color:rgba(56,189,248,.35);background:rgba(56,189,248,.12);}
.sel-item a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s ease;}
.sel-item a:hover{border-color:currentColor;}
.sel-add-btn{width:48px;height:48px;border-radius:50%;border:1px solid rgba(148,163,184,.35);display:inline-flex;align-items:center;justify-content:center;font-size:28px;font-weight:600;color:#e2e8f0;background:#1f2937;cursor:pointer;transition:transform .15s ease, background .15s ease,border-color .15s ease;margin:12px auto 0;align-self:center;padding:0;aspect-ratio:1/1;flex:0 0 auto;}
.sel-add-btn:hover,
.sel-add-btn:focus{transform:translateY(-1px);background:#111827;border-color:rgba(148,163,184,.5);}

.sel-add-btn:focus{outline:2px solid rgba(255,255,255,.4);outline-offset:2px;}
.sel-add-btn span[aria-hidden="true"]{line-height:1;}
.email-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:16px;flex-wrap:wrap;}
.email-actions{margin-top:0;display:flex;justify-content:flex-end;gap:12px;}
.sel-pane[data-active-tab="sw"] .sel-add-btn{display:none!important;}
.reject-panel{width:min(400px,90vw);margin:0 auto;padding:32px 28px;background:#0f172a;border-radius:28px;color:#f8fafc;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;}
.reject-icon{width:64px;height:64px;color:#ef4444;}
.reject-title{margin:0;font-size:24px;font-weight:600;}
.reject-copy{margin:2px 0;font-size:15px;color:#94a3b8;}
.reject-copy span{color:#f87171;font-weight:600;}
.reject-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px;}
.reject-btn{border-radius:999px;padding:10px 26px;font-size:14px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;}
.reject-btn--danger{background:#dc2626;color:#fff;}
.reject-btn--danger:hover,
.reject-btn--danger:focus-visible{background:#b91c1c;transform:translateY(-1px);outline:none;}
.reject-btn--neutral{background:transparent;color:#cbd5f5;border-color:rgba(148,163,184,.4);}
.reject-btn--neutral:hover,
.reject-btn--neutral:focus-visible{background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.5);color:#f8fafc;transform:translateY(-1px);outline:none;}

.notes-toggle{color:#e2e8f0;background:#1f2937;border:1px solid rgba(148,163,184,.35);font-weight:600;font-size:12px;padding:4px 12px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:background .15s ease,border-color .15s ease,color .15s ease;white-space:nowrap;}
.notes-toggle:hover,
.notes-toggle:focus{background:#111827;border-color:rgba(148,163,184,.5);color:#f8fafc;}








  


.sel-toggle-btn{color:#e2e8f0;background:#1f2937;border:1px solid rgba(148,163,184,.35);text-decoration:none;font-weight:600;font-size:12px;padding:4px 12px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:background .15s ease,border-color .15s ease,color .15s ease;white-space:nowrap;}
.sel-toggle-btn:hover,
.sel-toggle-btn:focus{background:#111827;border-color:rgba(148,163,184,.5);color:#f8fafc;}