/* ============================================================================
   UI v125 — separate boxes, square edges, a settings page that works, and one
   focus ring. Loaded last.
   ========================================================================== */

/* ── 1. ONE BOX PER BOX ───────────────────────────────────────────────────
   Reported, with a screenshot: "if you are having separate boxes then why do
   you have a continuous background - remove that, just have the box".

   Measured on the vehicle form: .veh-modal-pane is white, has its own border,
   an 8px radius and 16px of padding, and runs 8763px tall behind the whole
   column. Each .veh-form-sec card inside it is ALSO white, ALSO bordered, ALSO
   rounded (14px). So every section was a white box on a white box - two
   borders, two backgrounds, and a rounded corner inside a rounded corner. The
   pane was doing nothing except adding a second surface.

   The pane keeps its job as a layout column and stops painting. */
body .veh-modal-pane{
  background:none;border:0;border-radius:0;box-shadow:none;
  padding:0;display:flex;flex-direction:column;gap:16px}
/* the same trap spacing-v112 exists to fix, and I walked into it here: giving
   the pane a gap while the cards kept margin-bottom:16 and margin-top:18 put
   48px between boxes. The container owns the rhythm.
   Two rules outrank a bare "body .veh-modal-pane>*", so the selector names the
   card: polish-v68's .veh-form-sec.vfs-card9 (margin 0 0 16px) and type-v89's
   "body .card+.card" (margin-top 18px). */
body .veh-modal-pane>*,
body .veh-modal-pane>.veh-form-sec,
body .veh-modal-pane>.card+.card{margin:0}

/* ── 2. STRAIGHT EDGES ────────────────────────────────────────────────────
   "don't have rounded curved edges, instead straight edges" - on the boxes.
   Controls keep their own small radius; this is about the panels. */
body .veh-form-sec,
body .veh-form-sec.vfs-card9,
body .veh-form-sec .vfs-head9,
body .set-card,
body .setx-content .card{
  border-radius:0}
/* a card header is the top edge of its box, so it must not round independently */
body .veh-form-sec .vfs-head9{border-top-left-radius:0;border-top-right-radius:0}

/* ── 3. SETTINGS: THE NAV WAS UNREACHABLE ─────────────────────────────────
   The settings nav is `.seg.setx-tabs`. Two breakpoints disagreed about what
   the page is:

     .settings-page2  stacks to one column at  max-width: 900px
     .seg.setx-tabs   flips to a row at        max-width: 1023px

   Between 901px and 1023px the page is therefore still a two-column layout
   with a 340px vertical rail, while the nav inside that rail lays itself out
   horizontally. Measured in that band: the row is 11,693px wide inside a 308px
   box with overflow:visible, holding 49 children - 35 of them entirely off
   screen with no way to scroll to them. Only "User Profile" was reachable.
   That is the settings page the owner called horrible, and it is a dead
   navigation, not a styling complaint.

   The row treatment now starts where the page actually stacks. */
@media (min-width:901px){
  body .seg.setx-tabs{
    display:flex;flex-direction:column;align-items:stretch;
    width:100%;gap:2px;overflow:visible}
  body .seg.setx-tabs .seg-btn{
    width:100%;flex:0 0 auto;justify-content:flex-start;text-align:left;
    height:34px;padding:0 10px;border-radius:6px}
  /* group captions are headings in a column, not items in a strip */
  body .seg.setx-tabs .setx-group9{
    width:100%;flex:0 0 auto;margin:14px 0 4px;padding:0 10px;
    font-size:11px;font-weight:680;letter-spacing:.07em;text-transform:uppercase;
    color:var(--muted)}
  body .seg.setx-tabs .setx-group9:first-of-type{margin-top:4px}
  body .seg.setx-tabs .setx-search{width:100%;flex:0 0 auto;margin-bottom:8px}
}
/* Below 901px the page really is stacked, so a horizontal strip is right - but
   it has to be reachable. flex-start, not centre: a centred row that overflows
   puts its first item at a negative x that scrollLeft:0 is already past. */
@media (max-width:900px){
  body .seg.setx-tabs{
    display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;gap:2px;width:100%}
  body .seg.setx-tabs::-webkit-scrollbar{display:none}
  body .seg.setx-tabs .seg-btn{flex:0 0 auto;width:auto;white-space:nowrap;padding:0 12px}
  /* a group caption means nothing inside a horizontal strip */
  body .seg.setx-tabs .setx-group9{display:none}
}

/* ── 4. SETTINGS: GIVE THE CONTENT THE ROOM ───────────────────────────────
   The rail was 340px of a 972px page - 35% spent on navigation - and the
   content column carried 44px side padding on top of that. */
body .setx-rail{flex:0 0 258px;width:258px;padding:16px 12px 24px}
body .setx-content{padding:28px 28px 56px}
@media (max-width:900px){
  body .setx-rail{flex:0 0 auto;width:auto;padding:10px 12px}
  body .setx-content{padding:18px 16px 40px}
}

/* ── 5. ONE FOCUS RING, ON THE FIELD ITSELF ───────────────────────────────
   Reported: the highlight covers more than the field it belongs to.

   Two rules were stacking:
     app.css:3728  :where(button,a,input,select,textarea,[tabindex]):focus-visible
                   { outline:3px solid …; outline-offset:2px }
     app.css:96    .input:focus { box-shadow:0 0 0 3px var(--accent-ring) }

   A 3px outline pushed 2px OUTSIDE the control, plus a 3px shadow spreading
   outside it, is 8px of highlight around a 42px box - it reaches into whatever
   sits next to the field. And `[tabindex]` in that list means any focusable
   CONTAINER - a table row, a card - gets the same 3px ring around the whole
   thing, which is the "it highlights more than the field" case exactly.

   One ring: 2px, tight to the border, on controls only. :where() has zero
   specificity so this wins without !important. */
body :where(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:none;outline-offset:0}
body input:focus-visible,body select:focus-visible,body textarea:focus-visible,
body .input:focus-visible,body .btn:focus-visible,body .icon-btn:focus-visible,
body .seg-btn:focus-visible,body .chip:focus-visible{
  outline:2px solid var(--accent);outline-offset:0;
  border-color:var(--accent);box-shadow:none}
/* the mouse-click state must not draw a second, wider ring */
body .input:focus,body input:focus,body select:focus,body textarea:focus{
  box-shadow:none}
body .input:focus:not(:focus-visible),body input:focus:not(:focus-visible),
body select:focus:not(:focus-visible),body textarea:focus:not(:focus-visible){
  border-color:var(--accent);outline:none}
/* a composite field is one control, so the ring goes on the box, not the input */
body .ac-wrap:focus-within,body .list-search:focus-within,
body .tb-search:focus-within,body .money-row:focus-within{
  outline:2px solid var(--accent);outline-offset:0}
body .ac-wrap:focus-within input,body .list-search:focus-within input,
body .tb-search:focus-within input,body .money-row:focus-within input{
  outline:none}
/* a focusable ROW or CARD is not a field - it gets a subtle inset, never a ring
   drawn outside itself over its neighbours */
body .dtr:focus-visible,body .card:focus-visible,body .vcard:focus-visible,
body .row:focus-visible,body .settings-row:focus-visible{
  outline:none;box-shadow:inset 0 0 0 2px var(--accent)}

/* ── 6. A CHECKBOX AND ITS LABEL ARE ONE ROW ──────────────────────────────
   A checkbox is 16px and its label is 18-20px of text, so aligning the boxes by
   their tops leaves the tick sitting high. They align on the text's centre, sit
   one consistent gap apart, and the whole row is the click target. */
body .check-lbl9,
body .field-wrap:has(>input[type=checkbox]),
body label:has(>input[type=checkbox]),
body .set-row:has(input[type=checkbox]){
  display:flex;align-items:center;gap:9px;
  margin:0;padding:0;cursor:pointer;line-height:1.45}
body .check-lbl9>input[type=checkbox],
body .field-wrap:has(>input[type=checkbox])>input[type=checkbox],
body label:has(>input[type=checkbox])>input[type=checkbox]{
  flex:0 0 16px;width:16px;height:16px;margin:0}
body .check-lbl9>span,
body .field-wrap:has(>input[type=checkbox])>.field-label{
  margin:0;font-weight:500}
/* a hint under a checkbox lines up with the LABEL, not the box */
body .field-wrap:has(>input[type=checkbox])>.field-hint{
  flex:1 0 100%;margin:3px 0 0 25px}
/* stacked checkbox rows keep one rhythm instead of inheriting field spacing */
body .check-lbl9+.check-lbl9{margin-top:8px}

/* ── 7. LABEL CHIPS ───────────────────────────────────────────────────────
   The picker itself works - verified: choosing a label adds a chip, clicking
   the chip removes it, "New label..." creates one. What it lacked was the chip
   reading as a removable thing. The "x" is part of the label's text, so it
   cannot be targeted separately; the chip as a whole is the remove control, and
   it says so on hover instead of pretending to be a static tag. */
body .veh-labelpick9{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:36px}
body .veh-labelpick9 .badge{
  display:inline-flex;align-items:center;gap:0;
  height:26px;padding:0 9px;border-radius:6px;
  font-size:12.5px;font-weight:560;line-height:1;
  border:1px solid var(--line-2);background:var(--surface-2);color:var(--fg-2);
  cursor:pointer}
@media (hover:hover){
  body .veh-labelpick9 .badge:hover{
    border-color:var(--danger);color:var(--danger);background:var(--panel)}
}
body .veh-editlabels9{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;
  border:1px dashed var(--line-2);border-radius:6px;background:none;
  color:var(--muted);font-size:12.5px;font-weight:560;cursor:pointer}
@media (hover:hover){
  body .veh-editlabels9:hover{border-style:solid;border-color:var(--accent);color:var(--accent)}
}
body .veh-editlabels9 svg{width:13px;height:13px}

/* ── 8. MENUS MATCH THE BOXES ─────────────────────────────────────────────
   With the panels squared off, a 12px-rounded dropdown next to a square card
   reads as a leftover from the old style. Measured first: the menus themselves
   position correctly - the create menu and the row menu both sit fully on
   screen (0px past either edge) and their only "empty space" is 4px of padding,
   so this is appearance, not layout. */
body .top-pop,body .pop-menu,body .wv-pop,body .lbl-pop9{border-radius:0}
body .top-pop-row,body .pop-menu button{border-radius:0}
/* ── 9. TOUCH TARGETS IN THE MOBILE DRAWER ───────────────────────────────
   Swept every route at 375px. Layout came back clean - no overlaps, no
   horizontal scroll, nothing painting outside the viewport, no content stranded
   in a scroller, no clipped text, and the map controls, record pages, modals
   and the drawer scrim all behave. The one real defect was the size of the
   things you have to hit.

   Measured with the drawer open: all 53 rows are 28px, 32px or 36px tall.
   Apple asks for 44pt and Material for 48dp, and these are dense rows stacked
   directly on top of each other, so a near-miss lands on the wrong page rather
   than on nothing. Desktop density is untouched - this only applies where the
   sidebar is a drawer you operate with a thumb. */
@media (max-width:900px){
  body .sidebar .nav-item,
  body .sidebar .nav-grp,
  body .sidebar .nav-kid,
  body .sidebar .nav-parent{
    min-height:44px;padding-top:0;padding-bottom:0;
    display:flex;align-items:center}
  /* the row grows, the text does not - this is reach, not emphasis */
  body .sidebar .nav-kid{padding-left:38px}
  body .sidebar .nav-ico{flex:0 0 20px}
  /* the bottom bar is thumb-first too */
  body .mob-nav a,body .mob-nav button,body .bottom-nav a{min-height:48px}
  /* and the two chrome buttons that sit beside the drawer */
  body .menu-btn,body .tb-btn{min-width:40px;min-height:40px}
}