/* Units — the unit drawer (the Card), the Units header search, and the unit
   photo grid.

   Split out of index.html alongside units.js. Only ONE contiguous run of rules
   moved, and the <style> in the shell is split in two AROUND this link, exactly
   where those rules used to sit — so the cascade is not merely equivalent, it is
   unchanged. Nothing was reordered.

   WHAT DELIBERATELY STAYED BEHIND. Units has no page wrapper and no class
   prefix of its own: its rules are written on .controls, .tab-row, .sel, .srch,
   table / thead th / tbody tr, .badge and .modal — selectors the Applications,
   Contacts, Listings, Showings and e-Sign pages are painted with too. Those are
   interleaved with the Units-only ones line by line, so pulling any of them out
   would move a shared rule past another shared rule and change the cascade for
   five other pages. Same for the Units overrides that live inside the app-wide
   2,400-line (max-width:768px) block — exactly the rule the Tasks split
   followed. The status chips, the click-a-value filter chips, the inline map
   legend, the Add-unit modal, the spreadsheet-import modal and the Units glass
   header are each their own small island in the middle of shared rules, and are
   left where they are for the same reason.

   ONE THING IN HERE IS SHARED, and stays here on purpose: the .uc-photos /
   .uc-pgrid / .uc-pthumb / .uc-padd photo grid, which the Listings editor
   renders too (see the two #listing-editor overrides below). It is the unit's
   own media, it sits in the middle of this run, and an in-place split cannot
   change how it paints anywhere.

   Loaded with a version stamp in its URL (/units.css?v=…) so a fresh shell can
   never be paired with a stale cached copy of this file. */
  /* ── UNIT CARD MODAL — glass style ── */
  #modal {
    background: radial-gradient(ellipse at center, rgba(20,40,90,0.35) 0%, rgba(5,10,30,0.55) 100%);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  }
  #modal .modal {
    /* The panel below is a FIXED light glass surface — it does not change with the
       theme. So the tokens inside it must not either: in dark mode --text2 is a pale
       grey and --bg is near-black, which puts unreadable labels and black input boxes
       on a pale blue panel. Force the light values, exactly as #app-detail-modal
       already does for the same surface. color-scheme keeps native <select>/<input>
       chrome light too, so a dark-mode OS doesn't paint the dropdowns black. */
    color-scheme: light;
    --bg:  #ffffff;
    --bg2: #f7faff;
    --bg3: rgba(255,255,255,0.55);
    --text:  #1a2f5c;
    --text2: #2a4a85;
    --text3: #5a7ab5;
    --border:  rgba(180,210,255,0.5);
    --border2: rgba(160,195,250,0.55);
    /* Settings-style toggle rows use these too; without them a toggle dropped into
       a modal renders its box near-black (#151d2e) on the pale glass in dark mode. */
    --switch-box:        #f5f8ff;
    --switch-box-hover:  #edf3ff;
    --switch-box-border: #dde7f9;
    /* LIGHT MODE: the app's page surface (:root --bg2, the warm stone the Units
       list sits on) — pure white was too harsh against it. Stated literally
       because the drawer overrides --bg2 to a blue-tinted value just above.
       The blue glass gradient is kept for DARK mode only, where it reads as a
       deliberate flourish instead of tinting every unit card. Depth in light
       mode comes from the tiles, which stay pale blue — see the block below. */
    background: #faf9f6;
    border-radius: 22px;
    border: 1px solid rgba(200,220,255,0.55);
    box-shadow:
      0 20px 60px rgba(20,50,140,0.35),
      0 8px 24px rgba(30,70,160,0.22),
      0 1px 3px rgba(0,0,0,0.12),
      inset 0 1px 0 rgba(255,255,255,0.7),
      inset 0 -1px 0 rgba(80,130,210,0.18),
      inset 1px 0 0 rgba(255,255,255,0.35),
      inset -1px 0 0 rgba(80,130,210,0.10);
    animation: none;
  }
  /* DARK MODE keeps the blue glass panel. This gradient is COPY-PASTED across ~12
     surfaces (every modal, the tasks drawer, the pickers) — change it here and
     change it everywhere, or they drift. Every stop clears 4.5:1 against --text2,
     corner shading included. Keep it that way. */
  [data-theme="dark"] #modal .modal {
    background:
      linear-gradient(160deg,
        rgba(230,241,255,0.92) 0%,
        rgba(213,231,255,0.88) 22%,
        rgba(196,219,252,0.86) 48%,
        rgba(180,208,250,0.88) 75%,
        rgba(175,209,247,0.92) 100%),
      radial-gradient(circle at 12% 8%, rgba(255,255,255,0.65) 0%, transparent 45%),
      radial-gradient(circle at 92% 96%, rgba(110,165,235,0.30) 0%, transparent 55%);
    background-blend-mode: normal, screen, normal;
    backdrop-filter: blur(28px) saturate(1.9) brightness(1.05); -webkit-backdrop-filter: blur(28px) saturate(1.9) brightness(1.05);
  }

  /* LIGHT MODE tiles. On the old gradient these were translucent white and read as
     pale blue; over a white panel that trick yields white-on-white, so the same
     blue is stated outright. Dark mode re-asserts the translucent version below. */
  :root:not([data-theme="dark"]) #modal .tc { background: #e6eefd; }
  /* Plain buttons only — :not() guards keep the primary gradient and the danger
     wash, both of which lose to these selectors on specificity otherwise. */
  :root:not([data-theme="dark"]) #modal .btn:not(.btn-primary):not(.btn-danger) { background: #f1f6ff; border-color: #d3e2fb; }
  :root:not([data-theme="dark"]) #modal .btn:not(.btn-primary):not(.btn-danger):hover { background: #e6eefd; }
  :root:not([data-theme="dark"]) #modal .modal-x { background: #f1f6ff; border-color: #d3e2fb; }
  :root:not([data-theme="dark"]) #modal .modal-x:hover { background: #e6eefd; }
  :root:not([data-theme="dark"]) #modal .modal-head,
  :root:not([data-theme="dark"]) #modal .modal-footer { background: none; }
  /* Panel tokens: --bg3 is a translucent white on the gradient, invisible on white. */
  :root:not([data-theme="dark"]) #modal .modal { --bg3: #f1f6ff; }

  #modal .modal-head {
    padding: 14px 24px 0;
    border-bottom: none;
    border-radius: 22px 22px 0 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 100%);
  }
  #modal .modal-title { font-size: 16px; font-weight: 600; color: #1a3370; letter-spacing: -0.2px; }
  #modal .modal-x {
    background: rgba(255,255,255,0.4); border: 1px solid rgba(200,220,255,0.5);
    border-radius: 8px; backdrop-filter: blur(6px); padding: 4px 8px; font-size: 14px; color: #1a3370;
  }
  #modal .modal-x:hover { background: rgba(255,255,255,0.6); }
  #modal .modal-body { padding: 10px 20px 12px; }
  #modal .lm-tabs {
    border-bottom: 1px solid rgba(200,220,255,0.45);
    margin-top: 4px; margin-bottom: 10px;
  }
  #modal .lm-tab { color: rgba(26,51,112,0.55); }
  #modal .lm-tab.active { color: #1a3370; border-bottom-color: #3a6dd8; }
  #modal .lm-tab:hover:not(.active) { color: #1a3370; }
  #modal .share-mini-map-wrap {
    border: 1px solid rgba(200,220,255,0.5); border-radius: 12px;
    box-shadow: 0 2px 8px rgba(20,50,140,0.08);
  }
  #modal .tc {
    background: rgba(255,255,255,0.45);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(200,220,255,0.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 2px 8px rgba(20,50,140,0.07);
  }
  #modal .tc-addr { color: #1a2f5c; }
  #modal .tc-meta { color: rgba(26,51,112,0.65); }
  #modal .tc-lbl { color: rgba(26,51,112,0.5); }
  #modal .tc-val { color: #1a2f5c; }
  #modal .divider { border-top-color: rgba(200,220,255,0.45); }
  #modal .tc-contact { color: rgba(26,51,112,0.5); }
  #modal .btn { background: rgba(255,255,255,0.5); border: 1px solid rgba(180,210,255,0.6); color: #1a2f5c; border-radius: 9px; backdrop-filter: blur(6px); }
  #modal .btn:hover { background: rgba(255,255,255,0.7); }
  #modal .modal-footer {
    padding: 10px 20px 14px;
    border-top: 1px solid rgba(200,220,255,0.4);
    border-radius: 0 0 22px 22px;
    background: linear-gradient(0deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
  }
  #modal .modal-footer .btn {
    background: rgba(255,255,255,0.55); border: 1px solid rgba(180,210,255,0.6); border-radius: 9px;
    padding: 8px 16px; font-size: 13px; backdrop-filter: blur(6px); color: #1a2f5c;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 2px rgba(40,80,160,0.06);
    transition: all 0.15s;
  }
  #modal .modal-footer .btn:hover { background: rgba(255,255,255,0.75); }
  #modal .modal-footer .btn-primary {
    background: linear-gradient(135deg, #3a70e8 0%, #1a50c8 100%); color: #fff;
    border: none; box-shadow: 0 2px 8px rgba(30,70,200,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
  }
  #modal .modal-footer .btn-primary:hover { background: linear-gradient(135deg, #5a90f0 0%, #2a60d8 100%); }
  #modal .modal-footer .btn-danger {
    background: rgba(254,226,226,0.6); border-color: rgba(220,38,38,0.3); color: #dc2626;
  }
  #modal .modal-footer .btn-danger:hover { background: rgba(254,226,226,0.85); }



  /* ── UNITS HEADER SEARCH ──────────────────────────────────────────
     People search this page constantly and it was behind a button, so it
     lives in the header permanently — between the title and the status
     chips. Units only: the markup sits inside .topbar-units, so no other
     page can pick it up. Below 769px the header has no room and the
     existing slide-down row (#srch-row-mobile) still does the job. */
  .uhdr-srch { display: none; }
  /* 1080px, not 769: the title, five status chips and the right-hand buttons
     already need ~530px of this bar, so anything narrower has no room to give
     and the chips end up crushed to a sliver. Under that width the existing
     Search button and slide-down row stay exactly as they were. */
  @media (min-width: 1100px) {
    .topbar-units .uhdr-srch {
      display: flex; align-items: center; gap: 9px;
      /* A search bar, not a box: it holds a real width instead of taking
         whatever is left over, which read as a stub on narrower screens. */
      flex: 0 1 380px; min-width: 200px; max-width: 420px;
      /* Same 32px as the status chips so the header sits on one line, and the
         same 10px radius as the unit row cards below, so the header and the
         list share one shape language. */
      height: 32px; padding: 0 7px 0 13px;
      background: #fff; border-radius: 10px;
      box-shadow: 0 1px 2px rgba(10,25,60,0.14), inset 0 0 0 1px rgba(255,255,255,0.5);
    }
    /* The pill replaces the button that used to reveal the search row. */
    body .topbar-units .search-btn-mobile { display: none !important; }
    body .topbar-units .topbar-left { min-width: 0; }
    /* The chips never give: a half-clipped "Lost" reads as broken, not as
       something you can scroll. The search absorbs the squeeze instead, down to
       200px, and the 1100px floor above is set so that even at its narrowest
       every chip is still whole. overflow-x is a backstop for a workspace with
       more statuses than ours, so a wide strip scrolls rather than colliding
       with the buttons on the right. */
    body .topbar-units .topbar-tabs {
      flex: 0 0 auto; min-width: 0;
      overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    }
    body .topbar-units .topbar-tabs::-webkit-scrollbar { display: none; }
  }
  .uhdr-srch > .lucide { width: 14px; height: 14px; flex: none; color: #7c8fb3; }
  .uhdr-srch input {
    flex: 1; min-width: 0;
    border: none; outline: none; background: none; padding: 0;
    font: inherit; font-size: 13px; color: #14264a;
  }
  .uhdr-srch input::placeholder { color: #97a6c2; }
  .uhdr-srch-x {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; padding: 0; cursor: pointer;
    background: none; border: none; border-radius: 50%; color: #7c8fb3;
    transition: background .12s, color .12s;
  }
  .uhdr-srch-x:hover { background: rgba(37,99,235,0.09); color: #14264a; }
  .uhdr-srch-x .lucide { width: 13px; height: 13px; }
  /* No value, no clear button — :placeholder-shown is the only state hook a
     plain input gives CSS, which is why the placeholder must stay set. */
  .uhdr-srch input:placeholder-shown ~ .uhdr-srch-x { visibility: hidden; }

  /* ══════════════════════════════════════════════════════════════════
     UNIT CARD — operations console
     Built to the Claude Design handoff. Values here are the spec's, not
     approximations: gutter 18, panel radius 11, media 212px, field
     padding 4/7 with matching negative margin so hover boxes grow
     outward instead of shifting the baseline.

     Everything is scoped to #modal.unit-drawer or #modal .uc-* — the
     same shell serves the inbox Message-templates manager, which must
     keep the plain centred-modal styling.
     ══════════════════════════════════════════════════════════════════ */
  #modal.unit-drawer .modal-title,
  #modal.unit-drawer .modal-x { display: none; }
  #modal:not(.unit-drawer) #unit-head { display: none; }
  #modal.unit-drawer .modal-head {
    display: block; padding: 0; border: none; background: none; border-radius: 0;
  }

  /* ── Header ── */
  #modal .uh-row { display: flex; align-items: center; gap: 10px; padding: 13px 18px 0; }
  #modal .uh-title {
    font-size: 16px; font-weight: 600; letter-spacing: -.015em; color: #14264a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  #modal .uh-pill {
    flex: none; display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; font-weight: 600; color: #1d4ed8;
    background: rgba(37,99,235,.09); border: 1px solid rgba(37,99,235,.18);
    border-radius: 20px; padding: 3px 8px; white-space: nowrap;
  }
  #modal .uh-dot { width: 5px; height: 5px; border-radius: 50%; background: #2563eb; flex: none; }
  #modal .uh-right { flex: none; margin-left: auto; display: flex; align-items: center; gap: 2px; }
  #modal .uh-pos {
    font-size: 10.5px; font-weight: 500; color: #8fa0bf;
    font-variant-numeric: tabular-nums; margin-right: 5px; white-space: nowrap;
  }
  #modal .uh-btn {
    width: 26px; height: 26px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid rgba(68,64,60,.12); border-radius: 6px;
    color: #14264a; cursor: pointer; padding: 0; transition: background .12s;
  }
  #modal .uh-btn:hover:not(:disabled) { background: rgba(37,99,235,.07); }
  #modal .uh-btn:disabled { opacity: .38; cursor: default; }
  #modal .uh-btn .lucide { width: 14px; height: 14px; }
  #modal .uh-btn-l { border-radius: 6px 0 0 6px; }
  #modal .uh-btn-r { border-radius: 0 6px 6px 0; border-left: none; }
  #modal .uh-btn-solo { margin-left: 6px; }
  #modal .uh-menuwrap { position: relative; display: inline-flex; }
  #modal .uh-menu {
    position: absolute; top: 31px; right: 0; z-index: 20; width: 172px;
    background: #fff; border: 1px solid rgba(68,64,60,.14); border-radius: 9px;
    box-shadow: 0 12px 28px -8px rgba(23,23,27,.28);
    padding: 5px; display: flex; flex-direction: column; gap: 1px;
  }
  #modal .uh-menu[hidden] { display: none; }
  #modal .uh-menu button {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    font: inherit; font-size: 12px; font-weight: 500; color: #14264a;
    background: none; border: none; border-radius: 6px; padding: 8px 9px; cursor: pointer;
  }
  #modal .uh-menu button:hover { background: rgba(37,99,235,.07); }
  #modal .uh-menu button .lucide { width: 14px; height: 14px; }
  #modal .uh-menu-del { color: #c2410c !important; }
  #modal .uh-menu-hr { height: 1px; background: rgba(68,64,60,.1); margin: 4px 6px; }
  #modal .uh-facts {
    padding: 5px 18px 0; font-size: 11.5px; color: #6d81a8;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #modal.unit-drawer .lm-tabs {
    padding: 11px 18px 0; margin: 0; gap: 18px; border-bottom: none;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  }
  #modal.unit-drawer .lm-tabs::-webkit-scrollbar { display: none; }
  #modal.unit-drawer .lm-tab {
    padding: 0 0 9px; margin: 0; font-size: 12px; font-weight: 500; color: #7c8fb3;
    border: none; box-shadow: none; white-space: nowrap; flex: none;
  }
  #modal.unit-drawer .lm-tab.active {
    font-weight: 600; color: #14264a; box-shadow: inset 0 -2px 0 #2563eb;
  }
  #modal.unit-drawer .lm-tab:hover:not(.active) { color: #14264a; }

  /* ── Scroller ── */
  #modal.unit-drawer .modal-body { padding: 0 0 16px; overscroll-behavior: contain; }
  #modal.unit-drawer .lm-pane { padding: 0 !important; }

  /* ── Media block: photo + map, pricing on the photo ── */
  #modal .uc-media-wrap { padding: 12px 18px 0; }
  #modal .uc-media {
    position: relative; display: grid; grid-template-columns: 1fr 168px; gap: 2px;
    height: 212px; border-radius: 12px; overflow: hidden; background: #e8e4dc;
  }
  #modal .uc-photo { position: relative; overflow: hidden; background: #e8e4dc; }
  #modal .uc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  #modal .uc-photo-none {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 7px;
    color: #8a8378; font-size: 12px;
    border: 1px dashed rgba(68,64,60,.28); border-radius: 12px 0 0 12px;
  }
  #modal .uc-photo-none .lucide { width: 24px; height: 24px; }
  #modal .uc-photo-count {
    position: absolute; left: 8px; top: 8px;
    font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
    color: #fff; background: rgba(20,26,40,.5);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    border-radius: 5px; padding: 3px 7px;
  }
  #modal .uc-photo-tools { position: absolute; right: 8px; top: 8px; display: flex; gap: 5px; }
  #modal .uc-ptool {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    font: inherit; font-size: 10.5px; font-weight: 600; color: #fff;
    background: rgba(20,26,40,.55); border: none; border-radius: 7px; padding: 5px 9px;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: background .12s;
  }
  #modal .uc-ptool:hover { background: rgba(20,26,40,.78); }
  #modal .uc-ptool .lucide { width: 13px; height: 13px; }
  #modal .uc-ptool-x { width: 25px; height: 25px; padding: 0; justify-content: center; }
  #modal .uc-ptool-lbl { position: relative; }
  /* Visually hidden, NOT display:none — display:none takes the input out of the
     tab order and made this control mouse-only. */
  #modal .uc-ptool-lbl input { position: absolute; width: 1px; height: 1px; opacity: 0; }
  #modal .uc-ptool-lbl:focus-within { background: rgba(20,26,40,.85); box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
  #modal .uc-photo-drop {
    position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
    background: rgba(37,99,235,.16); color: #fff; font-size: 13px; font-weight: 600;
    border: 2px dashed rgba(255,255,255,.75);
  }
  #modal .uc-photo.over .uc-photo-drop { display: flex; }

  /* ── Photos: the unit's whole media set, not just the cover ──────────
     Photo 0 IS the cover everywhere else — units table, listing card, flyer,
     the syndication feed and the public unit page — so the order here is the
     order a renter sees. Nothing in this block checks listingPublished: photos
     hang off the unit row, so an off-market unit carries them exactly like a
     published one does. */
  .uc-photos {
    position: relative; margin: 0 18px;
    background: #fdfdfb; border: 1px solid rgba(68,64,60,.11); border-radius: 11px;
    padding: 11px; box-shadow: 0 1px 1px rgba(23,23,27,.03);
  }
  .uc-photos.busy { opacity: .55; pointer-events: none; }
  /* The listing wizard's photo step is already inside a panel, so the grid
     drops its own frame there rather than boxing a box. */
  .uc-photos-flat { background: none; border: 0; box-shadow: none; padding: 0; }
  #listing-editor .uc-padd { background: rgba(255,255,255,.4); border-color: rgba(120,160,225,.7); color: rgba(26,51,112,.75); }
  #listing-editor.le-fullscreen .uc-padd { background: var(--bg2); border-color: var(--border2); color: var(--text2); }
  .uc-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 7px; }
  .uc-pthumb {
    position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden;
    background: #e8e4dc; border: 1px solid rgba(68,64,60,.12);
    -webkit-user-select: none; user-select: none;
  }
  .uc-pthumb[draggable="true"] { cursor: grab; }
  .uc-pthumb[draggable="true"]:active { cursor: grabbing; }
  .uc-pthumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
  .uc-pthumb.dragging { opacity: .3; }
  /* Insertion marker: which side of this thumb the dragged one lands on. */
  .uc-pthumb.drop-before { box-shadow: inset 3px 0 0 #2563eb; }
  .uc-pthumb.drop-after  { box-shadow: inset -3px 0 0 #2563eb; }
  .uc-pbadge {
    position: absolute; left: 5px; top: 5px; pointer-events: none;
    font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: #fff; background: rgba(20,26,40,.62); border-radius: 4px; padding: 2px 5px;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  }
  .uc-pacts {
    position: absolute; right: 4px; top: 4px; display: flex; gap: 3px;
    opacity: 0; transition: opacity .12s;
  }
  .uc-pthumb:hover .uc-pacts,
  .uc-pthumb:focus-within .uc-pacts { opacity: 1; }
  /* No hover on a touchscreen — hiding the controls behind it would put them
     permanently out of reach on the phone sheet and on an iPad. */
  @media (hover: none) { .uc-pacts { opacity: 1; } }
  .uc-pact {
    width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 6px; cursor: pointer; padding: 0;
    color: #fff; background: rgba(20,26,40,.62);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: background .12s;
  }
  .uc-pact:hover { background: rgba(20,26,40,.85); }
  .uc-pact-x:hover { background: #b4483c; }
  .uc-pact .lucide { width: 12px; height: 12px; }
  .uc-padd {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    aspect-ratio: 4 / 3; border-radius: 8px; cursor: pointer;
    border: 1px dashed rgba(68,64,60,.3); color: #7c90b5;
    font-size: 10.5px; font-weight: 600;
    transition: border-color .12s, color .12s, background .12s;
  }
  .uc-padd:hover { border-color: #2563eb; color: #2563eb; background: rgba(37,99,235,.05); }
  /* Visually hidden, NOT display:none — a display:none input is unreachable by
     keyboard, which made the Add tile mouse-only. */
  .uc-padd input { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .uc-padd:focus-within {
    border-color: #2563eb; color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.18);
  }
  .uc-padd .lucide { width: 16px; height: 16px; }
  .uc-phint { margin-top: 9px; font-size: 11px; color: #7c90b5; line-height: 1.5; }
  .uc-pempty { font-size: 12px; color: #8a8378; padding: 6px 2px; }
  .uc-sec-n {
    font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
    color: #4a6ea8; background: rgba(37,99,235,.1);
    border-radius: 20px; padding: 1px 7px;
  }
  .uc-pdrop {
    position: absolute; inset: 0; display: none; pointer-events: none;
    align-items: center; justify-content: center; gap: 8px;
    border-radius: 11px; border: 2px dashed #2563eb; background: rgba(37,99,235,.1);
    font-size: 13px; font-weight: 600; color: #1d4ed8;
  }
  .uc-photos.over .uc-pdrop { display: flex; }
  .uc-pdrop .lucide { width: 17px; height: 17px; }

  #modal .uc-map { position: relative; overflow: hidden; background: #e8e4dc; }
  /* Context, not interaction — the pill is the only way out to Maps. */
  #modal .uc-map iframe { pointer-events: none; }
  #modal .uc-map-pill {
    position: absolute; left: 8px; top: 8px;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 600; color: #fff; text-decoration: none;
    background: rgba(20,26,40,.55); border-radius: 6px; padding: 4px 8px;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  }
  #modal .uc-map-pill:hover { background: rgba(20,26,40,.78); }
  #modal .uc-map-pill .lucide { width: 11px; height: 11px; }

  /* Pricing overlay — right:170px keeps it on the photo, never over the map. */
  #modal .uc-pricing {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 10px;
    padding: 16px 14px 12px;
    background: linear-gradient(to top, rgba(12,17,29,.95) 0%, rgba(12,17,29,.86) 48%, rgba(12,17,29,.1) 100%);
  }
  #modal .uc-money-l {
    font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
    color: rgba(255,255,255,.72);
  }
  #modal .uc-money-v { display: flex; align-items: baseline; gap: 2px; margin-top: 2px; }
  #modal .uc-money-\$ { font-size: 11px; font-weight: 500; color: rgba(255,255,255,.68); }
  #modal .uc-money-in {
    width: 100%; min-width: 0; font: inherit; font-size: 17.5px; font-weight: 600;
    letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #fff;
    background: transparent; border: 1px solid transparent; border-radius: 6px;
    padding: 2px 5px; margin: -2px -5px;
    transition: background .12s, border-color .12s, box-shadow .12s;
  }
  #modal .uc-money-in::-webkit-outer-spin-button,
  #modal .uc-money-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  #modal .uc-money-in { -moz-appearance: textfield; }
  #modal .uc-money:hover .uc-money-in:not(:focus) { background: rgba(255,255,255,.16); }
  #modal .uc-money-in:focus {
    background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.65);
    box-shadow: 0 0 0 3px rgba(255,255,255,.2); outline: none;
  }
  #modal .uc-money-in::placeholder { color: rgba(255,255,255,.6); }
  #modal .uc-money-h {
    font-size: 9.5px; color: rgba(255,255,255,.78); margin-top: 3px;
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  }
  #modal .uc-auto {
    font-size: 8px; font-weight: 700; letter-spacing: .07em; color: #fff;
    background: rgba(255,255,255,.22); border-radius: 3px; padding: 1px 4px;
  }
  #modal .uc-reauto {
    font: inherit; font-size: 9.5px; color: rgba(255,255,255,.78);
    background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline;
  }
  #modal .uc-standin {
    display: flex; align-items: center; gap: 7px; margin-top: 8px;
    font-size: 11px; color: #6d81a8;
  }
  #modal .uc-standin .lucide { width: 13px; height: 13px; flex: none; color: #9a6a2c; }

  /* ── Panels and field rows ── */
  #modal .uc-sec-lbl {
    padding: 18px 18px 8px; display: flex; align-items: center; gap: 8px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em;
    color: #7c90b5;
  }
  #modal .uc-sec-lock .lucide { width: 12px; height: 12px; color: #9a6a2c; }
  #modal .uc-panel {
    margin: 0 18px; background: #fdfdfb;
    border: 1px solid rgba(68,64,60,.11); border-radius: 11px;
    padding: 13px 15px; display: flex; flex-direction: column; gap: 11px;
    box-shadow: 0 1px 1px rgba(23,23,27,.03);
  }
  #modal .uc-panel-tight { padding: 11px 15px; margin-top: 11px; }
  #modal .uc-panel-warm {
    background: rgba(154,106,44,.045); border-color: rgba(154,106,44,.26);
  }
  #modal .uc-pairs {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; row-gap: 11px;
  }
  #modal .uc-cell {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    min-width: 0;
  }
  #modal .uc-cell-solo { grid-column: 1 / -1; }

  /* Boxed variant (Property): one tile per field, two to a row. Eight fields
     land as four even rows, which is the point — nothing sits alone. */
  #modal .uc-boxes {
    margin: 0 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  }
  #modal .uc-box {
    background: #fdfdfb; border: 1px solid rgba(68,64,60,.11); border-radius: 9px;
    padding: 9px 12px; min-width: 0;
    box-shadow: 0 1px 1px rgba(23,23,27,.03);
    transition: border-color .12s;
  }
  #modal .uc-box:hover { border-color: rgba(68,64,60,.2); }
  /* Address tile: the input IS the tile. Google anchors its suggestion list to the
     input's box, so unless the input spans the whole tile the dropdown starts
     mid-row and truncates every suggestion. Label is positioned over it. */
  #modal .uc-box-addr { position: relative; padding: 0; }
  #modal .uc-box-addr .uc-lbl {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    z-index: 1; pointer-events: none;
  }
  #modal .uc-box-addr .uc-val { display: block; width: 100%; }
  #modal .uc-box-addr .uc-fld {
    margin: 0; padding: 9px 12px 9px 74px; border-radius: 9px;
  }
  #modal .uc-lbl { flex: none; font-size: 11.5px; color: #5d7ba9; }
  #modal .uc-val { flex: 1; min-width: 0; position: relative; text-align: right; }

  /* Fields read as plain text until hovered or focused. The negative margin
     matches the padding so the hover box grows outward and the grid never jitters. */
  #modal .uc-fld {
    width: 100%; text-align: right; font: inherit; font-size: 12.5px; font-weight: 500;
    color: #17171b; font-variant-numeric: tabular-nums;
    background: transparent; border: 1px solid transparent; border-radius: 6px;
    padding: 4px 7px; margin: -4px -7px; height: auto; min-height: 0;
    box-shadow: none; appearance: none; -webkit-appearance: none;
    transition: background .12s, border-color .12s, box-shadow .12s;
  }
  #modal .uc-cell:hover .uc-fld:not(:focus),
  #modal .uc-ta:hover .uc-fld:not(:focus) { background: #fff; border-color: rgba(68,64,60,.18); }
  #modal .uc-fld:focus {
    background: #fff; border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.16); outline: none;
  }
  #modal .uc-fld::placeholder { color: #a8b5cb; font-weight: 400; }
  #modal .uc-fld:disabled, #modal .uc-fld[readonly] { color: #17171b; opacity: 1; cursor: default; }
  /* The overlay money fields also carry .uc-fld (that's how autosave finds them),
     so the generic rules above would repaint them near-black, right-aligned, on a
     dark scrim. Restate the white-on-photo treatment here, after that block. */
  #modal .uc-money-in,
  #modal .uc-money-in:disabled, #modal .uc-money-in[readonly] {
    color: #fff; text-align: left; font-size: 17.5px; font-weight: 600;
    letter-spacing: -.03em; padding: 2px 5px; margin: -2px -5px;
  }
  /* The custom dropdown copies the select's class onto its trigger button. */
  #modal .uc-val .cs-wrap { width: 100%; }
  #modal .uc-val .cs-btn {
    justify-content: flex-end; gap: 5px; text-align: right;
  }
  #modal .uc-val .cs-btn > span { flex: 0 1 auto; }
  #modal .uc-val .cs-btn > i { width: 12px; height: 12px; color: #a9b6cd; opacity: 1; }

  #modal .uc-linkrow {
    border-top: 1px solid rgba(68,64,60,.09); padding-top: 11px;
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  }
  #modal .uc-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  #modal .uc-chipwrap { display: inline-flex; align-items: center; gap: 3px; }
  #modal .uc-chip {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    font: inherit; font-size: 11px; font-weight: 500; text-decoration: none;
    border-radius: 7px; padding: 4px 9px;
  }
  #modal .uc-chip-set {
    color: #17171b; background: #fff; border: 1px solid rgba(68,64,60,.15);
  }
  #modal .uc-chip-set:hover { border-color: rgba(37,99,235,.4); }
  #modal .uc-chip-dot { width: 5px; height: 5px; border-radius: 50%; background: #2563eb; }
  #modal .uc-chip-empty {
    color: #93a3c0; background: transparent; border: 1px dashed rgba(68,64,60,.26);
  }
  #modal .uc-chip-empty:hover { color: #14264a; border-color: rgba(37,99,235,.45); }
  #modal .uc-chip .lucide { width: 11px; height: 11px; }
  #modal .uc-chip-edit {
    display: none; align-items: center; justify-content: center;
    width: 20px; height: 20px; padding: 0; cursor: pointer;
    background: none; border: none; border-radius: 5px; color: #93a3c0;
  }
  #modal .uc-chipwrap:hover .uc-chip-edit { display: inline-flex; }
  #modal .uc-chip-edit:hover { background: rgba(37,99,235,.07); color: #14264a; }
  #modal .uc-chip-edit .lucide { width: 11px; height: 11px; }
  #modal .uc-chip-input {
    width: 190px; text-align: left; background: #fff; border-color: rgba(68,64,60,.18);
    margin: 0; font-size: 11.5px;
  }
  #modal .uc-chipwrap.editing .uc-chip,
  #modal .uc-chipwrap.editing .uc-chip-edit { display: none; }

  #modal .uc-ta { border-top: 1px solid rgba(68,64,60,.09); padding-top: 11px; }
  #modal .uc-ta .uc-lbl { display: block; margin-bottom: 6px; }
  #modal .uc-ta .form-textarea {
    width: 100%; text-align: left; font: inherit; font-size: 12.5px; line-height: 1.55;
    color: #17171b; background: #faf9f6; border: 1px solid rgba(68,64,60,.14);
    border-radius: 8px; padding: 8px 10px; margin: 0; resize: vertical;
    transition: background .12s, border-color .12s, box-shadow .12s;
  }
  #modal .uc-note {
    font-size: 11px; line-height: 1.5; color: #7a6438;
    border-bottom: 1px solid rgba(154,106,44,.18); padding-bottom: 10px;
  }

  /* ── Sensitive, locked ── */
  #modal .uc-locked {
    margin: 0 18px; display: flex; align-items: center; gap: 12px;
    background: rgba(154,106,44,.05); border: 1px solid rgba(154,106,44,.24);
    border-radius: 11px; padding: 11px 15px;
  }
  #modal .uc-locked-txt { flex: 1; min-width: 0; }
  #modal .uc-locked-t { font-size: 12px; font-weight: 500; color: #6d5228; }
  #modal .uc-locked-s { font-size: 10.5px; color: #98865f; margin-top: 2px; }
  #modal .uc-reveal, #modal .uc-hide {
    flex: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    font: inherit; font-size: 11.5px; font-weight: 600; color: #6d5228;
    background: #fff; border: 1px solid rgba(154,106,44,.3); border-radius: 7px;
    padding: 6px 11px; transition: background .12s;
  }
  #modal .uc-hide { font-size: 10.5px; padding: 4px 9px; margin-left: auto; }
  #modal .uc-reveal:hover, #modal .uc-hide:hover { background: rgba(154,106,44,.08); }
  #modal .uc-reveal .lucide, #modal .uc-hide .lucide { width: 13px; height: 13px; }

  /* ── Pace AI panel ── */
  #modal .uc-pace { flex-direction: row; align-items: center; gap: 14px; }
  #modal .uc-pace-txt { flex: 1; min-width: 0; }
  #modal .uc-pace-t { font-size: 12px; font-weight: 500; color: #17171b; }
  #modal .uc-pace-s { font-size: 10.5px; color: #8fa0bf; margin-top: 2px; }
  #modal .uc-toggle { flex: none; display: inline-block; cursor: pointer; }
  #modal .uc-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
  #modal .uc-toggle-tr {
    display: block; width: 40px; height: 23px; border-radius: 12px; padding: 2px;
    background: rgba(68,64,60,.24); transition: background .15s;
  }
  #modal .uc-toggle-tr::after {
    content: ''; display: block; width: 19px; height: 19px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s;
  }
  #modal .uc-toggle input:checked + .uc-toggle-tr { background: #2563eb; }
  #modal .uc-toggle input:checked + .uc-toggle-tr::after { transform: translateX(17px); }
  #modal .uc-toggle input:disabled + .uc-toggle-tr { opacity: .55; }

  /* ── Footer: save state, no buttons ── */
  #modal.unit-drawer .modal-footer {
    border-top: 1px solid rgba(68,64,60,.12); padding: 11px 18px; min-height: 52px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: none; border-radius: 0; flex-wrap: nowrap;
  }
  #modal .uc-save { display: flex; align-items: center; gap: 6px; font-size: 11.5px; min-width: 0; }
  #modal .uc-save .lucide { width: 13px; height: 13px; }
  #modal .uc-save-ok  { color: #7f9673; }
  #modal .uc-save-busy { color: #6d81a8; font-weight: 500; }
  #modal .uc-save-err { color: #c2410c; font-weight: 500; }
  #modal .uc-save-view { color: #8fa0bf; }
  #modal .uc-save-dot { width: 6px; height: 6px; border-radius: 50%; background: #2563eb; }
  #modal .uc-keys {
    flex: none; display: flex; align-items: center; gap: 5px;
    font-size: 10px; color: #8fa0bf; white-space: nowrap;
  }
  #modal .uc-cap {
    font-size: 10px; font-weight: 600; color: #8fa0bf;
    background: rgba(68,64,60,.06); border: 1px solid rgba(68,64,60,.1);
    border-radius: 5px; padding: 3px 6px;
  }
  #modal .uc-cap-z { margin-left: 6px; }

  /* Selection marker the stepper leaves on the row behind the drawer. */
  .u-row-active > td { background: rgba(37,99,235,.06) !important; }
  .unit-card.u-row-active { outline: 2px solid rgba(37,99,235,.35); }

  /* ── Dark mode: pale blue glass, dark text. Deliberately not inverted. ── */
  [data-theme="dark"] #modal.unit-drawer .modal {
    background: linear-gradient(176deg, #e3ecfd 0%, #c9d9f7 52%, #bacff3 100%);
    backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6);
  }
  [data-theme="dark"] #modal.unit-drawer .modal-head,
  [data-theme="dark"] #modal.unit-drawer .modal-footer {
    background: rgba(226,236,253,.72);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  [data-theme="dark"] #modal .uc-panel {
    background: rgba(255,255,255,.46); border-color: rgba(23,32,60,.13);
  }
  [data-theme="dark"] .uc-photos {
    background: rgba(255,255,255,.46); border-color: rgba(23,32,60,.13);
  }
  [data-theme="dark"] .uc-padd { border-color: rgba(23,32,60,.28); color: #2f4d88; }
  [data-theme="dark"] .uc-phint, [data-theme="dark"] .uc-pempty { color: #2f4d88; }
  [data-theme="dark"] #modal .uc-panel-warm {
    background: rgba(154,106,44,.075); border-color: rgba(154,106,44,.3);
  }
  [data-theme="dark"] #modal .uc-ta .form-textarea {
    background: rgba(255,255,255,.58); border-color: rgba(23,32,60,.14);
  }
  [data-theme="dark"] #modal .uc-lbl,
  [data-theme="dark"] #modal .uh-facts { color: #2f4d88; }
  [data-theme="dark"] #modal .uc-fld,
  [data-theme="dark"] #modal .uc-pace-t { color: #101b31; }
  /* The overlay money still sits on a dark photo scrim in either theme. */
  [data-theme="dark"] #modal .uc-money-in { color: #fff; }
  [data-theme="dark"] #modal .uc-cell:hover .uc-fld:not(:focus),
  [data-theme="dark"] #modal .uc-ta:hover .uc-fld:not(:focus) {
    background: rgba(255,255,255,.66); border-color: rgba(23,32,60,.18);
  }
  [data-theme="dark"] #modal .uc-linkrow,
  [data-theme="dark"] #modal .uc-ta { border-top-color: rgba(23,32,60,.1); }
  [data-theme="dark"] #modal.unit-drawer .modal-footer { border-top-color: rgba(23,32,60,.12); }
  [data-theme="dark"] #modal .uh-btn { background: rgba(255,255,255,.62); border-color: rgba(23,32,60,.13); }

  /* ─────────────────────────────────────────────────────────────
     UNIT DETAIL DRAWER (desktop ≥769px)
     The unit card/edit "modal" renders as a right-anchored,
     resizable glass drawer — same pattern (and same glass) as
     #app-detail-modal, so the two detail surfaces match.

     Scoped to .unit-drawer, NOT to #modal: the very same shell is
     reused by the inbox Message-templates manager, which must stay
     a centred modal. _renderListingModal() adds the class, and
     closeModal()/inboxOpenTemplateManager() strip it.

     Deliberately NON-BLOCKING: no scrim, pointer-events:none on the
     wrapper so the units list behind stays live — click the next
     unit and the drawer swaps content instead of forcing a
     close-then-reopen. Mobile keeps the bottom sheet (below 769px
     none of this applies).
     ───────────────────────────────────────────────────────────── */
  .unit-drawer-resize { display: none; }

  @media (min-width: 769px) {
    #modal.unit-drawer {
      background: transparent !important;
      backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
      padding: 0 !important;
      pointer-events: none;   /* clicks fall through to the live page */
      /* The drawer is a persistent surface, not a top-most dialog. Because the
         page behind it stays live, anything opened while it's up — the profile
         panel, a confirm, a picker — must land in FRONT of it. Every other
         .modal-overlay sits at 1000 and DOM order was deciding, which put this
         one on top. Mobile keeps the global z-index: the bottom sheet has to
         clear the fixed tab bar. */
      z-index: 900;
    }
    [data-theme="dark"] #modal.unit-drawer { background: transparent !important; }

    #modal.unit-drawer .modal {
      pointer-events: auto;
      position: fixed;
      top: 0; right: 0; bottom: 0;
      width: var(--unit-drawer-w, 560px);
      min-width: 380px;
      max-width: 96vw !important;
      max-height: none;
      height: 100vh;
      margin: 0;
      border-radius: 18px 0 0 18px;
      border: 1px solid rgba(200,220,255,0.55);
      border-right: none;
      box-shadow:
        -16px 0 48px rgba(20,50,140,0.28),
        -4px 0 16px rgba(30,70,160,0.18),
        inset 1px 0 0 rgba(255,255,255,0.55),
        inset 0 1px 0 rgba(255,255,255,0.7),
        inset 0 -1px 0 rgba(80,130,210,0.18);
      display: flex;
      flex-direction: column;
      overflow: hidden;              /* the body is the only scroller */
      animation: app-drawer-in 0.28s cubic-bezier(.4,0,.2,1);
    }

    /* Padding for the head, scroller, tabs and footer belongs to the Unit Card
       block above, which sets one 18px gutter everywhere. Re-declaring it here
       (this block is later in the file, so it wins) put the section labels and
       the tab bar 18px out of line with the tiles. Only structure lives here. */
    #modal.unit-drawer .modal-head {
      flex-shrink: 0;
      border-radius: 18px 0 0 0;
    }

    #modal.unit-drawer .modal-body {
      flex: 1; min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      /* Own GPU layer, same reason as the applicant drawer: stops the
         blank flash when flinging over the heavy backdrop-filter. */
      transform: translateZ(0);
      will-change: scroll-position;
      -webkit-overflow-scrolling: touch;
    }

    #modal.unit-drawer .modal-footer {
      flex-shrink: 0;
      border-radius: 0 0 0 18px;
    }

    /* Left-edge resize handle — drag inward to widen. */
    #modal.unit-drawer .unit-drawer-resize {
      position: absolute; top: 0; left: 0; bottom: 0;
      width: 8px; cursor: ew-resize; z-index: 6;
      display: flex; align-items: center; justify-content: center;
      user-select: none; touch-action: none;
    }
    #modal.unit-drawer .unit-drawer-resize::before {
      content: ""; width: 3px; height: 44px; border-radius: 2px;
      background: rgba(80,130,210,0.22);
      transition: background .15s, height .15s;
    }
    #modal.unit-drawer .unit-drawer-resize:hover::before,
    #modal.unit-drawer .unit-drawer-resize.dragging::before {
      background: rgba(40,90,210,0.55);
      height: 56px;
    }
  }

  /* ── Narrow: a 380px drawer and the phone bottom sheet ──
     Same markup, layout rules only. The gutter drops to 14, the two-up pairs
     become one column, and the media block stacks — side by side, the map ate
     168px of a 375px sheet and left the money with nowhere to render. */
  @media (max-width: 620px) {
    #modal .uh-row, #modal .uh-facts, #modal .uc-media-wrap { padding-left: 14px; padding-right: 14px; }
    #modal.unit-drawer .lm-tabs { padding-left: 14px; padding-right: 14px; gap: 15px; }
    #modal .uc-panel, #modal .uc-locked, #modal .uc-sec-lbl { margin-left: 14px; margin-right: 14px; }
    #modal .uc-sec-lbl { padding-left: 0; padding-right: 0; }
    #modal.unit-drawer .modal-footer { padding-left: 14px; padding-right: 14px; }

    /* Title and the controls hold row one; the status pill wraps under them.
       All three on one line needs ~380px and there isn't that much. */
    #modal .uh-row { flex-wrap: wrap; row-gap: 8px; }
    #modal .uh-title { flex: 1 1 auto; min-width: 0; }
    #modal .uh-right { order: 2; }
    #modal .uh-pill { order: 3; flex: 0 0 auto; }
    #modal .uh-pos { display: none; }

    #modal .uc-media { grid-template-columns: 1fr; grid-template-rows: 1fr 92px; height: 288px; }
    #modal .uc-pricing { padding: 14px 12px 11px; gap: 8px; }
    #modal .uc-pairs { grid-template-columns: 1fr; row-gap: 12px; }
    #modal .uc-cell-solo { grid-column: auto; }
    #modal .uc-boxes { margin-left: 14px; margin-right: 14px; grid-template-columns: 1fr; }
    #modal .uc-photos { margin-left: 14px; margin-right: 14px; }
    .uc-pgrid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
    #modal .uc-linkrow { flex-direction: column; align-items: flex-start; gap: 8px; }
    #modal .uc-chips { justify-content: flex-start; }
    /* 16px keeps iOS from zooming the sheet when a field takes focus. */
    #modal .uc-fld { font-size: 16px; }
    #modal .uc-money-in { font-size: 19px; }
    #modal .uc-ta .form-textarea { font-size: 16px; }
    #modal .uc-keys { display: none; }
  }