/* Styles for the sign-in and admin pages. They reuse the planner's colors, fonts and classes from planner.css. Since UX-E2
   every page is in the new frame (Shell.jsx; its part is under "The new look" below); .authwrap is only the Loading… box. */
.authwrap { max-width: 520px; margin: 0 auto; padding: 32px max(16px, env(safe-area-inset-left, 0px)) 72px; display: grid; gap: 18px; }
.authform { display: grid; gap: 12px; }
.authform .btn { padding: 9px 14px; font-size: 14px; }
.gbtn { display: flex; gap: 10px; align-items: center; justify-content: center; text-decoration: none; color: var(--ink); }
.gbtn svg { width: 18px; height: 18px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .1em; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.msg { font-size: 14px; padding: 8px 10px; border-radius: 4px; border: 1px solid var(--line); background: var(--sunk); }
.msg.err { border-color: var(--bad); color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, var(--surface)); }
.msg.ok { border-color: var(--good); color: var(--good); background: color-mix(in srgb, var(--good) 8%, var(--surface)); }
.links { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.homelinks { justify-content: center; margin-top: 14px; }
.intro { margin: 0 0 14px; line-height: 1.5; }
.termslist { margin: 0; padding-left: 22px; line-height: 1.5; } /* the terms of use (task 3C) */
.termslist li + li { margin-top: 12px; }
/* the privacy policy (task 3B): plain headings and short lists, readable at phone width */
.policy { line-height: 1.5; }
.policy h2 { font-size: 17px; margin: 18px 0 6px; }
.policy p { margin: 0 0 8px; }
.policy ul { margin: 0 0 8px; padding-left: 22px; }
.policy li + li { margin-top: 6px; }
/* How this works (task 1Y): the jump list, one block per part, one card per item with its cost and other-lists lines */
.howto-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
/* the index uses the same boxed buttons as the Admin tabs (.rail) */
.howto-jump a { flex: 0 0 auto; text-decoration: none; color: var(--ink); font-family: var(--f-display); text-transform: uppercase; font-size: 15px; letter-spacing: .03em; padding: 6px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.howto-jump a:hover { border-color: var(--ink); }
@media (min-width: 1200px) { .howto-side .howto-jump { flex-direction: column; align-items: stretch; } }
.howto-part { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.howto-part h2 { font: 800 clamp(26px, 6vw, 34px)/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .01em; margin: 0; }
section.howto { background: none; border: 0; border-radius: 0; padding: 0; }
.howto-item { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.howto-item h3, .howto-q h3 { font-size: 15px; margin: 0; }
.howto-item h3 { font: 700 16px/1.3 var(--f-body); text-transform: none; letter-spacing: normal; }
.howto-item p, .howto-q p { margin: 0; }
.howto-item dl, .howto-words { margin: 0; display: grid; gap: 6px; font-size: 14px; }
.howto-item dl { grid-template-columns: 1fr; gap: 6px; }
.howto-item dt, .howto-words dt { color: var(--muted); font-weight: 600; }
.howto-item dt { font: 500 11px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sky); }
.howto-item dt:nth-of-type(1) { color: var(--good); }
.howto-item dd, .howto-words dd { margin: 0; }
.howto-item dd { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
.howto-words > div { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; }
.howto-words dt { color: var(--ink); }
.howto-q { display: grid; gap: 4px; padding: 8px 0; border-top: 1px solid var(--line); }
.howto-do { font-size: 14px; }
.howto-do summary { cursor: pointer; color: var(--sky); }
.howto-do ol { margin: 6px 0 0; padding-left: 22px; display: grid; gap: 4px; }
@media (max-width: 560px) { .howto-item dl { grid-template-columns: 1fr; } .howto-words > div { grid-template-columns: 1fr; } }
.utable { width: 100%; border-collapse: collapse; }
.utable th, .utable td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.utable td .row { flex-wrap: wrap; }
.copybox { display: flex; gap: 6px; }
.copybox input { flex: 1 1 auto; font-family: var(--f-mono); font-size: 12px; }
@media (max-width: 720px) { .utable thead { display: none; } .utable tr { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--line); } .utable td { border: 0; padding: 2px 0; } }
/* Edit on a person's row (Admin page, task 1B): the box opens under the row. */
.utable tr.editing td { border-bottom: 0; }
.pedit { display: grid; gap: 10px; padding: 12px; margin: 0 0 4px; background: var(--sunk); border: 1px solid var(--line); border-radius: 6px; }
.pedit .eyebrow { margin-top: 6px; }
.pdel { display: grid; gap: 10px; padding: 10px 12px; border: 1px solid var(--bad); border-radius: 6px; background: color-mix(in srgb, var(--bad) 6%, var(--surface)); }
.pdel input[type="checkbox"] { margin-top: 3px; flex: 0 0 auto; }
@media (max-width: 720px) { .utable tr.editing { border-bottom: 0; padding-bottom: 0; } .utable tr.peditrow { padding-top: 0; } .pedit { padding: 10px; } }
/* Past updates on the Update tab (task 1Z): a tap on a row opens its patch notes under it, in the same box. */
.uptable tr:not(.peditrow) { cursor: pointer; }
.upver { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.upnotes { gap: 8px; }
.upnote { display: grid; gap: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.upnote .eyebrow { margin-top: 4px; }
.upnotes p { margin: 0; }

/* The Admin dashboard's tabs (client/src/pages/Admin.jsx, task 1C): the planner's tab rail, but on a phone the tabs
   wrap onto a second row instead of scrolling sideways, so Update is never out of sight. */
.admrail { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; }
.admtab { display: grid; gap: 18px; min-width: 0; }
.admtrip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } /* which trip the trip tools are on (UX-P2) */
.admtrip .row { gap: 6px; flex-wrap: nowrap; }
.admtrip select { width: auto; min-width: 180px; }
/* A switch's tick box stays beside its words when they take two lines on a phone. */
.swrow { gap: 8px; flex-wrap: nowrap; align-items: flex-start; }
.swrow input { margin-top: 3px; flex: 0 0 auto; }

/* Site health on the Admin page (client/src/pages/AdminHealth.jsx, task 1D): four boxes side by side (one above the other
   on a phone), then which keys are on. */
.msg.warn { border-color: var(--warn); color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, var(--surface)); }
.msg.warn .hlist { color: var(--ink); }
.hgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.hbox { display: grid; gap: 4px; align-content: start; min-width: 0; overflow-wrap: anywhere; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
.hbig { font-family: var(--f-display); font-size: 32px; line-height: 1; }
.hlist { margin: 2px 0 0; padding-left: 18px; display: grid; gap: 2px; font-size: 14px; }
.hkeys { display: grid; gap: 6px 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.hkeys .eyebrow { grid-column: 1 / -1; margin-top: 4px; }
.hkey { display: flex; gap: 8px; align-items: baseline; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.hkey .pill { flex: 0 0 auto; min-width: 36px; text-align: center; }
.hkey code { display: block; font-family: var(--f-mono); font-size: 11px; color: var(--muted); }

/* Google usage on the Admin page's Google tab (client/src/pages/AdminGoogle.jsx, task 1E): numbers to the right, the
   month totals under a line. On a phone each day is a small grid, four numbers across, each with a short name above it. */
.gtable th.n, .gtable td.n { text-align: right; font-variant-numeric: tabular-nums; }
.gtable tfoot td { border-top: 2px solid var(--line); }
.gtable .lbl { display: none; }
.gtable .z { color: var(--muted); }
@media (max-width: 720px) {
  .gtable tr { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 8px; }
  .gtable td:first-child { grid-column: 1 / -1; }
  .gtable th.n, .gtable td.n { text-align: left; }
  .gtable tfoot td { border-top: 0; }
  .gtable tfoot tr { border-top: 2px solid var(--line); }
  .gtable .lbl { display: block; font-size: 11px; color: var(--muted); font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
}

/* The Admin page's Sign-ins tab (client/src/pages/AdminSignIns.jsx, task 1F): each person's phones and computers as a
   short list in their row, and the filters above the activity. On a computer the activity's when, who and from stay on
   one line each, so an email never breaks in the middle; on a phone long words wrap, and each value has a short name
   above it (like the Google tab's). */
.silist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 14px; }
.sifilter { gap: 8px 18px; align-items: end; flex-wrap: wrap; }
.sifilter .field { min-width: 200px; }
.sitable code, .msg code { font-family: var(--f-mono); font-size: 12px; }
.sitable .lbl { display: none; }
@media (min-width: 721px) { .siact td:not(:nth-child(3)) { white-space: nowrap; } }
@media (max-width: 720px) {
  .sitable td { overflow-wrap: anywhere; }
  .sitable .lbl { display: block; font-size: 11px; color: var(--muted); font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
}

/* The Admin page's Readiness tab (client/src/pages/AdminReadiness.jsx, task 1G): each rig's row has a colored pill per
   part, with what's wrong under it and the ticks still to do folded away. On a phone each value has a short name above
   it (like the Sign-ins tab's). */
.rdtable td { vertical-align: top; }
.rdtable .lbl { display: none; }
.rdlist { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 2px; font-size: 14px; }
.rdtable details { margin-top: 4px; }
.rdtable summary { cursor: pointer; font-size: 14px; color: var(--muted); }
@media (max-width: 720px) {
  .rdtable td { overflow-wrap: anywhere; }
  .rdtable .lbl { display: block; font-size: 11px; color: var(--muted); font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
}

/* "A new version is ready · Reload" after a deploy (client/src/pwa.js, task 4B). Top centre, clear of the Chat button and the trip cost box. */
.updatebar { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 50%; transform: translateX(-50%); z-index: 90; width: max-content; max-width: calc(100vw - 32px); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: center; background: var(--sign); color: var(--sign-fg); border-radius: 999px; padding: 8px 8px 8px 18px; font-size: 15px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.updatebar .btn { border-radius: 999px; padding: 6px 16px; font-size: 14px; }

/* "Offline · showing the plan from 2:15 PM" while the planner shows this phone's copy of the plan
   (client/public/planner/offline.js, task 4C). Stays at the top of the screen while scrolling. */
.offbar { position: sticky; top: 0; z-index: 80; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; justify-content: center; text-align: center; padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); background: var(--sign); color: var(--sign-fg); border-bottom: 3px solid var(--warn); font-size: 15px; font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.offbar .offh { font-size: 13px; font-weight: 400; opacity: .85; }
.offbar .btn { border-radius: 999px; padding: 4px 12px; font-size: 13px; color: var(--ink); }
/* A link that looks like a button ("Read the saved plan" on the You're offline page). */
a.btn { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; }

/* How to install (client/src/pages/Install.jsx, task 4E): numbered steps, then smaller notes under them. */
.steps { margin: 0; padding-left: 24px; display: grid; gap: 10px; }
.steps li { padding-left: 2px; }
.inotes { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.ishare { width: 1.15em; height: 1.15em; vertical-align: -.2em; }
.copybox .btn { white-space: nowrap; }
.ibtn { padding: 10px 20px; font-size: 15px; }

/* My Profile (client/src/pages/Profile.jsx, task 1A): your picture (or initials), your rig's photo, where you're signed in. */
.pfhead { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.pfpic { width: 72px; height: 72px; flex: none; border-radius: 50%; object-fit: cover; background: var(--sunk); border: 1px solid var(--line); }
.pfinit { display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-display); font-size: 28px; font-weight: 800; color: var(--muted); }
.pfrig { display: block; width: auto; height: auto; max-width: 100%; max-height: 320px; border-radius: 6px; border: 1px solid var(--line); }
/* Cropping a photo (task 1W, crop.js): the photo with a box over it; everything outside the box is dimmed. */
.cropstage { position: relative; display: inline-block; max-width: 100%; line-height: 0; background: var(--sunk); border-radius: 6px; overflow: hidden; touch-action: none; user-select: none; }
.cropstage img { display: block; max-width: 100%; max-height: 60vh; width: auto; height: auto; pointer-events: none; }
.cropbox { position: absolute; box-sizing: border-box; border: 2px solid #fff; box-shadow: 0 0 0 999px rgba(0, 0, 0, .55); cursor: move; touch-action: none; }
.crophandle { position: absolute; width: 22px; height: 22px; box-sizing: border-box; background: #fff; border: 2px solid #333; border-radius: 4px; transform: translate(-50%, -50%); touch-action: none; }
.crophandle.nw { left: 0; top: 0; cursor: nwse-resize; }
.crophandle.ne { left: 100%; top: 0; cursor: nesw-resize; }
.crophandle.sw { left: 0; top: 100%; cursor: nesw-resize; }
.crophandle.se { left: 100%; top: 100%; cursor: nwse-resize; }
.pflist { list-style: none; margin: 0; padding: 0; display: grid; }
.pflist li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pflist li:last-child { border-bottom: 0; }

/* A rig's photo at the top of its Rigs section in the planner (live.js, task 1A). */
.rigphoto { display: grid; gap: 6px; margin: 0; }
.rigphoto img { display: block; justify-self: start; width: auto; height: auto; max-width: 100%; max-height: 260px; border-radius: 6px; border: 1px solid var(--line); }
.rigphoto figcaption { font-size: 13px; color: var(--muted); }

/* The colour choices and Appearance (task 1O, /theme.js). This file is on every page, the planner too: they're in every
   page's Menu and on My Profile. */
.thicw { display: contents; }
.thic { width: 11px; height: 11px; margin-right: 5px; vertical-align: -1px; flex: none; }
.thpick { display: flex; flex-wrap: wrap; gap: 6px; }
.thpick .btn { display: inline-flex; align-items: center; }
.thpick .btn .thic { width: 14px; height: 14px; margin-right: 7px; vertical-align: 0; }
.thpick .btn[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* The planner header's Menu button and its list (live.js, task 1Q): your name, then Menu, which holds everything else.
   The list is on the page itself, under the button, since the header sign cuts off anything that sticks out of it. */
.sign .row:has(> #acct) { margin-left: auto; } /* on a phone, where it goes under "Group expedition planner": at the right */
.menubtn { display: inline-flex; align-items: center; gap: 5px; }
.whobtn.menubtn[aria-expanded="true"] { background: var(--sign-fg); color: var(--sign); opacity: 1; } /* open (live.js's hover look skips it) */
.mnic { width: 12px; height: 12px; flex: none; }
.acctmenu { position: absolute; z-index: 60; width: min(260px, calc(100vw - 32px)); display: grid; gap: 2px; padding: 6px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 14px 36px rgba(0,0,0,.25); }
.acctmenu[hidden] { display: none; }
.mitem { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 5px; padding: 10px 12px; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer; }
.mitem:hover, .mitem:focus-visible { background: var(--sunk); }
.mcolors { display: grid; gap: 6px; margin: 4px 0; padding: 10px 12px; border-block: 1px solid var(--line); }
.mcolors .thpick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.mcolors .thpick .btn { justify-content: center; padding: 6px 4px; }
.mcolors .thpick .btn .thic { margin-right: 5px; }

/* Sections your way, and the day bars (task 1T): /sections.js, planner/folds.js and Section.jsx. A section folds with
   its − / + button or a tap anywhere else on its title bar; the gear beside it opens that section's settings. */
.foldhead { cursor: pointer; }
.phead > div.row.secbtns { flex: 0 0 auto; margin-left: auto; align-self: flex-start; flex-wrap: nowrap; gap: 4px; }
.foldhead:has(> .secbtns) > div:first-child { flex: 1 1 0; min-width: 0; } /* the two buttons keep to the title's line */
/* On a phone, anything else on a title bar (Open all and Close all, Check again, the Trip profile's key) goes on a line
   of its own under it. */
@media (max-width: 640px) {
  .foldhead:has(> .secbtns) > :not(:first-child):not(.secbtns) { order: 3; flex: 1 1 100%; margin-left: 0; }
  .foldhead:has(> .secbtns) > div.row:not(.secbtns) { flex-wrap: wrap; }
}
.minbtn[data-secbtn] { min-width: 32px; padding: 2px 8px; font-size: 18px; line-height: 1.1; font-weight: 700; }
.secgear { display: inline-grid; place-items: center; width: 30px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: none; color: var(--muted); cursor: pointer; flex: none; }
.secgear:hover, .secgear[aria-expanded="true"] { color: var(--ink); border-color: var(--line); }
.secpop { position: fixed; z-index: 70; width: min(250px, calc(100vw - 16px)); display: grid; gap: 8px; padding: 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.2); font-size: 14px; }
.secpop fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 2px; }
.secpop legend { padding: 0; margin-bottom: 2px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.secpop label { gap: 8px; padding: 3px 0; cursor: pointer; flex-wrap: nowrap; justify-content: flex-start; }
.secpop label input[type=radio] { width: auto; flex: none; margin: 0; padding: 0; accent-color: var(--accent); } /* not the planner's full-width boxes */
.secpop a { font-size: 13px; }
.secpop .secdev { margin-top: -6px; font-size: 12px; color: var(--muted); } /* which set the box changes: this phone's or computer's (1V) */
.secnote { margin: 0; font-size: 12px; }
/* Back, Top of section and Top of page: one line at the bottom, beside the planner's Chat button when it's there (task
   1U; sections.js places it). data-fit 1: ↑ and ⇈ show only their arrows; 2: the × goes too; then Chat goes slim. */
.secfloat { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 28; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.secfloat[hidden], .secfloat [hidden] { display: none; }
.secfloat .btn { flex: none; background: var(--surface); box-shadow: 0 4px 14px rgba(0,0,0,.18); font-size: 13px; padding: 6px 12px; white-space: nowrap; }
.secfloat[data-fit="1"] .btn, .secfloat[data-fit="2"] .btn { padding: 6px 9px; }
.secfloat[data-fit="1"] .sfw, .secfloat[data-fit="2"] .sfw, .secfloat[data-fit="2"] [data-sf="x"] { display: none; }
.secback { display: flex; gap: 4px; min-width: 0; }
.secback .btn:first-child { flex: 0 1 auto; min-width: 0; background: var(--ink); color: var(--surface); border-color: var(--ink); max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
/* The trip cost on a phone, while it's closed (1U): a small tab with the total and ▲, as tall as Chat, so the line
   above fits beside it. The words "… trip cost" are still there for screen readers. Tapping it opens the full box. */
@media (max-width: 640px) {
  #ticket.tkfloat:not(.open) { min-width: 0; width: auto; padding: 7px 12px; border-radius: 999px; }
  #ticket.tkfloat:not(.open) .tkhead { gap: 6px; }
  #ticket.tkfloat:not(.open) .tkhead .eyebrow { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #ticket.tkfloat:not(.open) .total { font-size: 22px; line-height: 1.2; }
}
/* Chat with just its icon (1U), when the line beside it has no room otherwise; it keeps its height, and its name for
   screen readers. */
#chatFab.slim { gap: 0; padding-inline: 14px; }
#chatFab.slim span { width: 0; overflow: hidden; }
#chatFab.slim b { margin-left: 4px; }
/* Menu at the end of the planner's tab bar (1U), once the header's Menu has scrolled away. It stays put while the tabs
   swipe on a phone; the tabs slide under it. */
.rail .railmenu { position: sticky; right: 0; z-index: 1; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-display); text-transform: uppercase; font-size: 18px; letter-spacing: .03em; padding: 6px 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: -4px 0 0 var(--bg); }
.rail .railmenu.off { visibility: hidden; } /* its place kept, so the tab bar doesn't change size */
.rail .railmenu[aria-expanded="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.rail .railmenu .mnic { width: 15px; height: 15px; }
.acctmenu.fixed { position: fixed; overflow-y: auto; }
/* The day bar: a numbered box for each day, between a section's title bar and Day 1, stuck under the tabs while its
   days scroll by. One row; when it's wider than the screen it swipes sideways. Colored like the Trip length strip. */
.daybar { position: sticky; top: var(--railh, 0px); z-index: 4; display: flex; gap: 4px; overflow-x: auto; padding: 6px 2px; background: var(--bg); scrollbar-width: thin; overscroll-behavior-x: contain; }
.daybar[hidden] { display: none; }
.dbn { flex: 0 0 auto; position: relative; min-width: 32px; height: 30px; padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); font-family: var(--f-mono); font-size: 13px; cursor: pointer; box-shadow: inset 0 -3px 0 var(--pine); }
.dbn:hover { border-color: var(--ink); }
.dbn.long { box-shadow: inset 0 -3px 0 var(--warn); }
.dbn.over, .dbn.dark { box-shadow: inset 0 -3px 0 var(--bad); }
.dbn.rest { box-shadow: inset 0 -3px 0 var(--line); color: var(--muted); }
.dbn.open { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.dbn.today { outline: 2px solid var(--accent); outline-offset: 1px; }
.dbn.here::after { content: ""; position: absolute; left: 6px; right: 6px; top: -5px; height: 3px; border-radius: 2px; background: var(--accent); }
details.day, details.fpday, details.bday { scroll-margin-top: calc(var(--railh, 60px) + var(--dbh, 42px) + 8px); }
/* The Day brief's day boxes (folds.js), like the Itinerary's. */
details.bday { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
details.bday[open] { border-color: var(--muted); }
details.bday.today { border-color: var(--accent); }
details.bday > summary { list-style: none; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 4px 14px; padding: 12px 14px; cursor: pointer; align-items: center; }
details.bday > summary::-webkit-details-marker { display: none; }
@media (max-width: 560px) {
  details.bday > summary { grid-template-columns: 44px minmax(0, 1fr); }
  details.bday .dside { grid-column: 2; justify-items: start; text-align: left; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
}
/* My Profile's Sections. */
.secset { display: grid; gap: 8px; }
.secset .swrow > span { display: grid; gap: 2px; }
details.sectab { border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
details.sectab > summary { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; padding: 10px 12px; cursor: pointer; }
.sectabbody { display: grid; gap: 6px; padding: 4px 12px 12px; }
.secrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; border-top: 1px solid var(--line); }
.secrow select { width: auto; flex: none; }
/* How this works (task 1Y, Oct 31, 2026): cards on a phone; from 700px wide, one table row per item (name, what and how,
   cost, other lists). The width decides, not the device, so a tablet or a narrow window gets whichever fits. */
.howto-cols { display: none; }
.howto { container: howto / inline-size; } /* the table switches on the width of this box, not the window (1Y) */
@container howto (min-width: 700px) {
  .howto-cols { display: grid; grid-template-columns: 1.1fr 1.7fr 1fr 1fr; gap: 14px; font: 500 11px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .howto-item { grid-template-columns: 1.1fr 1.7fr 1fr 1fr; column-gap: 14px; row-gap: 6px; align-items: start; padding: 12px 0; }
  .howto-item h3 { grid-column: 1; grid-row: 1 / span 2; }
  .howto-item > p { grid-column: 2; grid-row: 1; }
  .howto-item .howto-do { grid-column: 2; grid-row: 2; }
  .howto-item dl { display: contents; }
  /* the table header already names the columns, so the per-row labels are hidden from sight but still read by screen readers */
  .howto-item dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .howto-item dt:nth-of-type(1) { grid-column: 3; grid-row: 1; }
  .howto-item dd:nth-of-type(1) { grid-column: 3; grid-row: 2; }
  .howto-item dt:nth-of-type(2) { grid-column: 4; grid-row: 1; }
  .howto-item dd:nth-of-type(2) { grid-column: 4; grid-row: 2; }
  .howto-item dd { background: none; border: 0; padding: 0; }
}
/* the how-to page's boxes may shrink to the screen, so long words wrap instead of pushing the page sideways */
.howto-part, .howto-item, .howto-do, .howto-q, .howto-words > div { min-width: 0; }
.howto-item p, .howto-item h3, .howto-do li { overflow-wrap: anywhere; }
/* How this works (1Y): on a wide screen the index sits in a column on the left and stays in view while you read; the page uses the width instead of leaving it empty. */
.howto-page { display: grid; gap: 22px; min-width: 0; }
@media (min-width: 1200px) {
  .howto-page { grid-template-columns: 220px minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .howto-side { position: sticky; top: 16px; }
  .howto-side .howto-jump { flex-direction: column; gap: 8px; }
}
/* ---------- The new look (UX-E) ----------
   Everyone's since UX-E3 (one look, no switch; look.js). NewLook.jsx draws it, from the approved sketches and
   docs/design/DESIGN-KIT.md: a phone (under 600 px) has a top bar and the five areas along the bottom, a tablet (600 to
   1023 px) a top bar and a rail of the five down the left, a computer (1024 px and up) a side menu. Every rule here is
   under .nl (the new frame), html.nl or Sun, so the planner parts inside it, and the panels on the other pages (in the
   frame since UX-E2), look as before. */
:root { --ctl: #7A857C; --map: #D6DBD1; } /* the kit's two new colours: the edges of controls (3:1), and a map's box */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ctl: #6E7F72; --map: #26302A; } }
:root[data-theme="dark"] { --ctl: #6E7F72; --map: #26302A; }
/* Bright sun, the fourth look button (theme.js): white, black text. It sets every colour the dark look sets and wins
   over it (html:root), so a phone set to dark still shows Sun when it's picked. */
html:root[data-theme="sun"] {
  --bg: #FFFFFF; --surface: #FFFFFF; --sunk: #F0F0F0; --ink: #000000; --muted: #333333; --line: #1A1A1A; --ctl: #1A1A1A;
  --pine: #1F3A2A; --sign: #000000; --sign-fg: #FFFFFF; --dirt: #7A4A1A; --accent: #FFB000; --accent-ink: #000000;
  --warn: #8A4A00; --bad: #B00020; --good: #006B2D; --sky: #00527A; --map: #E6E6E6; --map-grid: #E6E6E6; --trail-link: #6B5200;
  color-scheme: light;
}

/* The room the frame takes on each side. --nl-head is the top bar (the page already keeps clear of the phone's own
   status bar), --nl-top the same plus that status bar, for things that stick to the top. sections.js reads
   --nl-bottom to keep its corner buttons above a phone's tabs. */
:root:has(.nl) { --nl-head: 56px; --nl-top: calc(var(--nl-head) + env(safe-area-inset-top, 0px)); --nl-left: 0px; --nl-bottom: 0px; }
:root:has(.nl-trip) { --nl-bottom: 60px; }
@media (min-width: 600px) { :root:has(.nl-trip) { --nl-left: 96px; --nl-bottom: 0px; } }
@media (min-width: 1024px) { :root:has(.nl) { --nl-head: 0px; --nl-left: 230px; } }

.nlicon { flex: none; }
.nl-btn { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--ctl); border-radius: 4px; background: var(--bg); color: var(--ink); font: 600 16px/1.2 var(--f-body); text-decoration: none; white-space: nowrap; cursor: pointer; }
.nl-btn.ghost { border-color: transparent; background: transparent; }
.nl-btn:hover { background: var(--sunk); }
.nl-brand { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0 6px; font: 800 18px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-eyebrow { margin: 10px 0 2px; padding: 0 10px; font: 500 12px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* The top bar (phone and tablet): ‹ Trips, the trip's name (it opens the switcher) and Menu. */
.nl-top { position: fixed; z-index: 40; top: 0; left: 0; right: 0; height: var(--nl-top); display: flex; align-items: center; gap: 4px; padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px)); background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); }
.nl-switch { flex: 1 1 auto; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 4px; padding: 4px 6px; border: 0; border-radius: 4px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.nl-switch span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 18px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.nl-switch:hover { background: var(--sunk); }

/* The side menu (computer): My trips and the trip's name at the top, the five areas under "Plan", How this works and
   Menu at the bottom. */
.nl-side { display: none; }
.nl-link { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--ink); font: 600 16px/1.2 var(--f-body); text-align: left; text-decoration: none; cursor: pointer; }
.nl-link:hover { background: var(--sunk); }
.nl-link[aria-current="page"] { background: var(--ink); color: var(--bg); }
.nl-link.sub { padding-left: 40px; font-weight: 500; }
.nl-sidefoot { margin-top: auto; display: grid; gap: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.nl-side .nl-brand { flex: none; padding: 4px 10px 8px; }
.nl-side .nl-switch { flex: none; padding: 4px 10px; }
.nl-side .nl-switch span { white-space: normal; font-size: 22px; line-height: 1.05; }
@media (min-width: 1024px) {
  .nl-top { display: none; }
  .nl-side { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: 230px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: calc(14px + env(safe-area-inset-top, 0px)) 12px 14px max(12px, env(safe-area-inset-left, 0px)); background: var(--surface); color: var(--ink); border-right: 1px solid var(--line); }
}

/* The five areas: a rail down the left on a tablet, a bar along the bottom on a phone. */
.nl-rail, .nl-bar { display: none; }
.nl-railbtn { min-height: 64px; display: grid; place-items: center; gap: 2px; padding: 6px 4px; border: 1px solid var(--ctl); border-radius: 4px; background: var(--bg); color: var(--ink); font: 600 12px/1.15 var(--f-body); text-align: center; cursor: pointer; }
.nl-railbtn[aria-current="page"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.nl-barbtn { min-height: 60px; display: grid; place-items: center; align-content: center; gap: 2px; padding: 4px 2px; border: 0; border-top: 3px solid transparent; background: transparent; color: var(--ink); font: 500 12px/1.1 var(--f-body); text-align: center; cursor: pointer; }
.nl-barbtn[aria-current="page"] { border-top-color: var(--accent); background: var(--sunk); font-weight: 600; }
@media (min-width: 600px) and (max-width: 1023.98px) {
  .nl-rail { position: fixed; z-index: 39; top: var(--nl-top); bottom: 0; left: 0; width: 96px; overflow-y: auto; display: grid; align-content: start; gap: 8px; padding: 8px 8px max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); background: var(--surface); border-right: 1px solid var(--line); }
}
@media (max-width: 599.98px) {
  .nl-bar { position: fixed; z-index: 39; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); background: var(--surface); border-top: 1px solid var(--ctl); }
}

/* The page beside or between the bars. */
.nl-main { min-width: 0; margin-left: var(--nl-left); padding-top: var(--nl-head); padding-bottom: var(--nl-bottom); }

/* Inside a trip: today's planner, with its tab row, its Menu and its header given over to the frame. The row stays for
   the area's parts (the pills) and Undo and Redo, stuck under the top bar. */
.nl-trip .rail > a, .nl-trip #railMenu, .nl-trip #acctBtn { display: none; }
.nl-trip #rail { top: var(--nl-top); }
.nl-trip .offbar { top: var(--nl-top); }
.nl-trip .wrap > header.sign { display: none; } /* the trip's name is at the top; its summary is Days' boxes (UX-F) */
.nl-pills { order: -1; flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.nl-gtitle { margin-right: 6px; font-size: 24px; white-space: nowrap; }
.nl-pill { min-height: 44px; padding: 6px 16px; border: 1px solid var(--ctl); border-radius: 999px; background: var(--bg); color: var(--ink); font: 600 16px/1.2 var(--f-body); white-space: nowrap; cursor: pointer; }
.nl-pill[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* Each part shows only its own sections of the planner tab it shares with another part (NewLook.jsx, GROUPS). */
html[data-nlpart="days"] .nl-trip #v-plan, html:not([data-nlpart="days"]) .nl-trip #nlDays, /* Days is the React part (UX-F) */
html[data-nlpart="rigs"] .nl-trip #v-plan, html:not([data-nlpart="rigs"]) .nl-trip #nlRigs, /* Rigs is the React part (UX-G) */
html[data-nlpart="ready"] .nl-trip #v-ready > :is([data-sec="ready/personal-gear"], [data-sec="ready/shared-spare-items-and-parts"]),
html[data-nlpart="gear"] .nl-trip #v-ready, html:not([data-nlpart="gear"]) .nl-trip #nlGear, /* Gear is the React part (UX-G2) */
html[data-nlpart="map"] .nl-trip #v-map, html:not([data-nlpart="map"]) .nl-trip #nlMap, /* the Map is the React part (UX-F2) */
html[data-nlpart="fuel"] .nl-trip #v-fuelplan > :has(#fpFill), html:not([data-nlpart="fuel"]) .nl-trip #nlFuel /* the Fuel Planner is the React part (UX-H); Trail Fuel Range stays */ { display: none !important; }
/* The planner's corner pieces keep clear of the rail and the bar. */
.nl-trip .tkfloat { left: calc(var(--nl-left) + max(16px, env(safe-area-inset-left, 0px))); }
@media (max-width: 599.98px) {
  .nl-pills:has(.nl-pill) .nl-gtitle { display: none; } /* the bar already says which area it is */
  .nl-trip #chatFab, .nl-trip .tkfloat { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .nl-trip #chatPanel { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); height: min(70vh, calc(100vh - 140px)); }
}

/* My trips */
.nl-main.nl-page { display: grid; gap: 16px; align-content: start; max-width: calc(1180px + var(--nl-left)); padding: calc(var(--nl-head) + 16px) max(16px, env(safe-area-inset-right, 0px)) 32px max(16px, env(safe-area-inset-left, 0px)); font-size: 16px; line-height: 1.45; }
.nl-title { font-size: 28px; font-weight: 800; }
.nl-page > .nl-eyebrow { margin: 12px 0 0; padding: 0; }
.nl-note { margin: 0; padding: 12px 14px; border: 1px solid var(--ctl); border-radius: 6px; background: var(--surface); }
.nl-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .nl-main.nl-page { padding-inline: 24px; } .nl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .nl-main.nl-page { padding: 32px; } .nl-title { font-size: 32px; } .nl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* A trip's card: the route line, the name, the dates, who's going, what to look at, and its status. The whole card opens it. */
.nl-card { min-height: 44px; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--ctl); border-radius: 6px; background: var(--surface); color: var(--ink); text-decoration: none; }
a.nl-card:hover { border-color: var(--ink); }
.nl-card.past { background: var(--bg); }
.nl-card.off { border-style: dashed; } /* needs signal: the kit's disabled look, with the reason in its corner */
.nl-ctitle { margin: 0; display: flex; align-items: center; gap: 6px; font: 800 22px/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.nl-meta, .nl-hint { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.nl-sum { font-size: 15px; }
.nl-muted { color: var(--muted); }
.nl-foot { margin-top: auto; padding-top: 2px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.nl-st { padding: 1px 8px; border: 1px solid currentColor; border-radius: 999px; font-family: var(--f-mono); font-size: 12px; white-space: nowrap; }
.nl-st.ok { color: var(--good); } .nl-st.warn { color: var(--warn); } .nl-st.bad { color: var(--bad); } .nl-st.info { color: var(--sky); }
.nl-card.nl-new { min-height: 120px; justify-content: center; border: 2px dashed var(--ctl); background: var(--bg); color: var(--muted); }
.nl-card.nl-new.on { color: var(--ink); font: inherit; text-align: left; cursor: pointer; } /* + New trip, open (UX-P2) */
button.nl-card.nl-new.on:hover { border-color: var(--ink); }
/* A card's "what's next": the first three lines of the person's trip check (server/check.js). */
.nl-next { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 15px; }
.nl-next li { display: flex; gap: 6px; align-items: baseline; }
.nl-next li > span { flex: none; width: 1em; text-align: center; font-weight: 800; }
.nl-next li.bad > span { color: var(--bad); } .nl-next li.warn > span { color: var(--warn); }
.nl-line { display: block; height: 76px; overflow: hidden; border-radius: 4px; background: var(--map); }
.nl-line svg { display: block; width: 100%; height: 100%; }
.nl-line polyline { fill: none; stroke: var(--sky); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.nl-line circle { fill: var(--ink); }
.nl-line.nl-noline { display: grid; place-items: center; font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.nl-card.nl-ghost { min-height: 200px; border-color: var(--line); background: var(--sunk); animation: nlpulse 1.4s ease-in-out infinite alternate; }
@keyframes nlpulse { to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .nl-card.nl-ghost { animation: none; } }

/* Menu on My trips: the planner's own list (.acctmenu), under its button, or above it in the side menu. */
.nl-menuwrap { position: relative; flex: none; }
.nl-menu { top: calc(100% + 6px); right: 0; }
.nl-menu.side { position: fixed; top: auto; right: auto; left: 12px; bottom: 70px; max-height: calc(100vh - 90px); overflow-y: auto; }
html.nl .mitem { min-height: 44px; }
html.nl .mitem[aria-current="page"] { background: var(--sunk); box-shadow: inset 3px 0 0 var(--accent); } /* the page you're on (UX-E2) */
html.nl .mcolors .thpick { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* four looks with Sun */

/* The other pages in the frame (UX-E2; Shell.jsx, the kit's section 20): Admin, My Profile, How this works, the sign-in
   pages, Privacy, Terms, Support, How to install and You're offline. Signed in it's My trips' frame. Signed out
   (.nl-bare) there's no side menu: the top bar on every screen, and the page in the middle. */
@media (min-width: 1024px) {
  :root:has(.nl-bare) { --nl-head: 56px; --nl-left: 0px; }
  .nl-bare .nl-top { display: flex; }
  .nl-bare .nl-main.nl-page { padding-top: calc(var(--nl-head) + 32px); } /* under the top bar, which a computer doesn't have when signed in */
}
.nl-bare .nl-main.nl-page { margin-inline: auto; }
.nl-pg .nl-top .nl-brand { font-size: clamp(14px, 4vw, 18px); } /* the whole name beside ‹ Trips and Menu, down to a 360 px phone */
.nl-main.nl-page.nl-narrow { max-width: 704px; } /* forms and reading: about 640 px of text, inside the page's edges */
:root:has(.nl-pg) { scroll-padding-top: calc(var(--nl-top) + 8px); } /* a link to a part of a page (/profile#rig, How this works' list) stops under the top bar */
/* The Admin page's tabs: pills (the kit's section 8) in a row that stays under the top bar. On a phone the row goes up
   with the page instead: its eight pills take three rows there. */
.nl .admrail { top: var(--nl-top); gap: 6px; }
.nl .admrail a { min-height: 44px; padding: 6px 16px; border: 1px solid var(--ctl); border-radius: 999px; background: var(--bg); color: var(--ink); font: 600 16px/1.2 var(--f-body); text-transform: none; letter-spacing: normal; }
.nl .admrail a:hover { background: var(--sunk); }
.nl .admrail a[aria-current="page"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media (max-width: 599.98px) { .nl .admrail { position: static; } }

/* The trip switcher: a box over the screen, or the whole screen on a phone (‹ Back there, × on bigger screens). */
.nl-scrim { position: fixed; z-index: 75; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .45); }
.nl-win { width: min(560px, 100%); max-height: 100%; overflow-y: auto; display: grid; gap: 14px; align-content: start; padding: 18px; border: 1px solid var(--ctl); border-radius: 6px; background: var(--surface); color: var(--ink); box-shadow: 0 14px 36px rgba(0, 0, 0, .3); font-size: 16px; line-height: 1.45; }
.nl-wintop { display: flex; align-items: center; gap: 8px; }
.nl-wintop h2 { flex: 1 1 auto; font-size: 24px; }
.nl-wintop > .nl-btn:first-child { display: none; }
.nl-x { min-width: 44px; justify-content: center; font-size: 28px; line-height: 1; }
.nl-swlist { display: grid; gap: 6px; }
.nl-swrow { min-height: 52px; display: grid; gap: 2px; padding: 8px 12px; border: 1px solid var(--ctl); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.nl-swrow b { display: flex; align-items: center; gap: 6px; }
a.nl-swrow:hover, button.nl-swrow:hover { border-color: var(--ink); }
.nl-swrow[aria-current="true"] { padding: 7px 11px; border: 2px solid var(--ink); }
.nl-swrow.off { border-style: dashed; color: var(--muted); cursor: default; }

/* New trip, the guided steps (UX-P2, the kit's section 19): the same window, the steps as chips along the top, one step
   at a time, and Previous and Next in a footer that stays in sight. */
.nl-ntwin { display: flex; flex-direction: column; }
.nl-ntname { display: block; margin-top: 2px; }
.nl-ntwin h2[tabindex="-1"]:focus { outline: none; } /* the keyboard starts at the title, with no box drawn round it */
.nl-steps { flex: none; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.nl-steps .nl-pill { padding: 6px 12px; font-size: 14px; }
.nl-steps .nl-pill[aria-current="step"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.nl-steps .nl-pill[aria-disabled="true"] { border-style: dashed; color: var(--muted); cursor: default; }
.nl-ntstep { margin: 0; font: 800 20px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.nl-win .field > span { font-size: 14px; }
.nl-win input:not([type=checkbox]):not([type=radio]), .nl-win textarea { min-height: 44px; padding: 8px 10px; border-color: var(--ctl); font-size: 16px; }
.nl-choices { gap: 8px; }
.nl-choices legend { margin-bottom: 6px; }
.nl-choice { min-height: 52px; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--ctl); border-radius: 6px; background: var(--surface); cursor: pointer; }
.nl-choice:has(input:checked) { padding: 9px 11px; border: 2px solid var(--ink); }
.nl-choice:has(input:disabled) { border-style: dashed; color: var(--muted); cursor: default; }
.nl-win .nl-choice > input[type=radio] { flex: none; width: 20px; height: 20px; margin: 2px 0 0; padding: 0; accent-color: var(--accent); } /* not the planner's full-width inputs */
.nl-choice > span { display: grid; gap: 2px; }
.nl-places { display: grid; gap: 10px; }
.nl-place { display: grid; grid-template-columns: minmax(0, 1fr) 84px 44px; gap: 8px; align-items: end; }
.nl-place .nl-btn { padding: 0; }
.nl-checkrow { min-height: 44px; font-size: 16px; }
.nl-checkrow input { width: 20px; height: 20px; accent-color: var(--accent); }
.nl-plain { margin: 6px 0 0; padding-left: 20px; }
.nl-row { display: flex; flex-wrap: wrap; gap: 8px; }
.nl-btn.primary { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.nl-btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.nl-btn:disabled { opacity: .55; cursor: default; }
/* The words to send with an invite: dashed, nothing in it is sent from here (New trip's Who's going step). */
.nl-draft { display: grid; gap: 8px; padding: 12px; border: 2px dashed var(--ctl); border-radius: 6px; background: var(--bg); }
.nl-draft .nl-st { justify-self: start; font-size: 13px; }
.nl-draft textarea { opacity: 1; resize: vertical; line-height: 1.45; }
/* Who's going and trip invites (7C, TripPeople.jsx): a row per person, the ask before taking someone off or leaving
   (outlined in red, it deletes things), and the invite cards on My trips and the /join page. */
.nl-people { display: grid; gap: 10px; }
.nl-people .nl-eyebrow { margin: 6px 0 0; padding: 0; }
.nl-prow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; cursor: default; }
.nl-prow > span:first-child { display: grid; gap: 2px; }
.nl-sure { flex: 1 1 100%; display: grid; gap: 8px; padding: 10px 12px; border: 2px solid var(--bad); border-radius: 6px; background: var(--surface); }
.nl-sure p { margin: 0; }
.nl-invform { display: grid; gap: 10px; }
.nl-invform input:not([type=checkbox]):not([type=radio]) { min-height: 44px; font-size: 16px; }
.nl-invite .nl-choices { margin: 0; padding: 0; border: 0; display: grid; }
.nl-invite .nl-choice > input[type=radio] { flex: none; width: 20px; height: 20px; margin: 2px 0 0; padding: 0; accent-color: var(--accent); }
/* The check: red stops the trip, amber is worth a look, green is done (folded under Done). */
.nl-check { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.nl-ckline { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 10px; border: 1px solid var(--line); border-left: 4px solid currentColor; border-radius: 4px; background: var(--surface); }
.nl-ckline.bad { color: var(--bad); } .nl-ckline.warn { color: var(--warn); } .nl-ckline.ok { color: var(--good); }
.nl-ckmark { flex: none; width: 1.2em; text-align: center; font-weight: 800; }
.nl-cktext { flex: 1 1 auto; color: var(--ink); }
.nl-ckline .nl-btn { flex: none; color: var(--ink); }
.nl-bad { color: var(--bad); font-weight: 700; } .nl-warn { color: var(--warn); font-weight: 700; } .nl-good { color: var(--good); font-weight: 700; }
.nl-done summary { min-height: 44px; display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.nl-done summary::before { content: "›"; font-size: 22px; line-height: 1; transition: transform .15s; }
.nl-done[open] summary::before { transform: rotate(90deg); }
.nl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nl-winfoot { position: sticky; bottom: 0; margin-top: auto; display: flex; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); background: var(--surface); box-shadow: 0 40px 0 var(--surface); }
@media (max-width: 599.98px) {
  .nl-scrim { padding: 0; place-items: stretch; background: var(--bg); }
  .nl-win { width: 100%; height: 100%; max-height: none; padding: calc(8px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); border: 0; border-radius: 0; background: var(--bg); box-shadow: none; }
  .nl-wintop > .nl-btn:first-child { display: inline-flex; }
  .nl-wintop .nl-x { display: none; }
  .nl-winfoot { background: var(--bg); box-shadow: 0 40px 0 var(--bg); }
  .nl-place { grid-template-columns: minmax(0, 1fr) 72px 44px; }
}
@media (min-width: 600px) { .nl-steps { flex-wrap: wrap; overflow: visible; } } /* all six chips in sight */

/* Bright sun in the new look: 2 px edges, bigger buttons and text (the kit, section 2). */
html[data-theme="sun"] .nl :is(.nl-btn, .nl-link, .nl-pill, .nl-switch) { min-height: 52px; font-size: 18px; }
html[data-theme="sun"] .nl :is(.nl-card, .nl-swrow, .nl-pill, .nl-railbtn, .nl-note, .nl-btn:not(.ghost)) { border-width: 2px; }
html[data-theme="sun"] .nl :is(.nl-top, .nl-bar) { border-width: 2px; }
html[data-theme="sun"] .nl-main.nl-page, html[data-theme="sun"] .nl-win { font-size: 18px; }
html[data-theme="sun"] .nl-ctitle { font-size: 26px; }
html[data-theme="sun"] .nl-scrim { background: rgba(0, 0, 0, .65); }
html[data-theme="sun"] .nl :is(.nl-choice, .nl-ckline, .nl-draft, .nl-winfoot) { border-width: 2px; }
html[data-theme="sun"] .nl-win input:not([type=checkbox]):not([type=radio]), html[data-theme="sun"] .nl-win textarea { min-height: 52px; border-width: 2px; font-size: 18px; }
html[data-theme="sun"] .nl-next { font-size: 17px; }
html[data-theme="sun"] .nl .nl-x { font-size: 30px; }
html[data-theme="sun"] .nl .admrail a { min-height: 52px; border-width: 2px; font-size: 18px; } /* the Admin page's tabs (UX-E2) */

/* ---------- Days (UX-F; the kit's section 22) ----------
   Days.jsx draws it in #nlDays, in the planner's page where the Plan tab was, so it sits under the area's title and
   its round buttons. The planner's own pieces in it (the time bar, the Pick stop map, a night's hotel, camp or Airbnb
   boxes, the trail rows and the trail finder) keep the planner's look, with the kit's 44 px buttons and boxes. */
.nl-trip :is(#nlDays, #nlRigs, #nlGear, #nlFuel) { min-width: 0; }
:is(.nl-days, .nl-rigs, .nl-gear, .nl-maps, .nl-fuel) { display: grid; gap: 16px; min-width: 0; font-size: 16px; line-height: 1.45; }
.nl-dhead { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; }
.nl-dtitlebox { min-width: 0; display: grid; gap: 2px; }
.nl-dtitlebox .nl-meta { overflow-wrap: anywhere; }
.nl-dbtns { align-items: center; }
.nl-help { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sky); cursor: pointer; }
.nl-help:hover { background: var(--sunk); }
.nl-help:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.nl-more { min-width: 44px; justify-content: center; padding-inline: 8px; }
.nl-btn.danger { color: var(--bad); }
.nl-btn.armed { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--bg)); }
.nl-ripple .nl-riphead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
/* The trip at a glance: six boxes, each a button that shows what it counts. */
.nl-glance { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--ctl); border-radius: 6px; background: var(--surface); }
.nl-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 600px) { .nl-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .nl-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.nl-stat { min-height: 64px; min-width: 0; display: grid; align-content: start; gap: 2px; padding: 8px 10px; border: 1px solid var(--ctl); border-radius: 6px; background: var(--bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.nl-stat:hover { border-color: var(--ink); }
.nl-stat b { font: 800 26px/1.05 var(--f-display); }
.nl-stat span { font-family: var(--f-mono); font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.nl-stat.alert { border-color: var(--bad); border-left-width: 4px; padding-left: 7px; }
.nl-stat.alert b { color: var(--bad); }
.nl-glancefoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nl-people { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; }
.nl-person { display: inline-flex; align-items: center; gap: 5px; }
.nl-person img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.nl-flagsfor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; }
.nl-flagsfor select { width: auto; min-height: 44px; border-color: var(--ctl); }
/* The cards: Trip settings, then the Trip profile and Trip length across the page, then a card for each day. */
.nl-dcards { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .nl-dcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nl-dcards > .nl-wide { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .nl-dcards { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .nl-dcards > [data-card=profile] { grid-column: auto; } }
.nl-dcards > .nl-wide { min-width: 0; }
.nl-dcards > [data-card=trip] { align-self: start; } /* only as tall as its list */
:is(.nl-days, .nl-rigs, .nl-gear, .nl-maps, .nl-fuel) button.nl-card { font: inherit; text-align: left; cursor: pointer; }
:is(.nl-days, .nl-rigs, .nl-gear, .nl-maps, .nl-fuel) button.nl-card:hover { border-color: var(--ink); }
.nl-chead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nl-kv { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.nl-kv div { min-width: 0; }
.nl-kv dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.nl-kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.nl-key { font-size: 13px; }
.nl-days .chart-scroll { margin-inline: -2px; padding: 2px; }
.nl-days .strip button { height: 28px; cursor: pointer; }
.nl-sliders { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.nl-slider input[type=range] { min-height: 44px; }
.nl-listhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; scroll-margin-top: calc(var(--nl-top) + 64px); }
.nl-days #nlProfile { scroll-margin-top: calc(var(--nl-top) + 64px); }
.nl-daylist { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .nl-daylist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .nl-daylist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nl-day .nl-dtop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.nl-dtitle { font-weight: 700; overflow-wrap: anywhere; }
.nl-pillrow { display: flex; flex-wrap: wrap; gap: 4px; }
.nl-day .nl-foot { align-items: flex-end; }
.nl-day[aria-current="true"] { padding: 11px 13px; border: 2px solid var(--ink); } /* the day open in the tablet's pane */
/* The windows: a day's, Trip settings and the help card (Win.jsx). Over the planner's Menu and corner buttons; the
   place suggestions (.ac) show over the window. */
.nl-escrim { z-index: 76; }
html.nl .ac { z-index: 90; }
.nl-wintop .nl-save { flex: none; font-family: var(--f-mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.nl-wintop .nl-save .off { color: var(--warn); }
.nl-wintop h2:focus { outline: none; }
.nl-winsub { margin: -8px 0 0; overflow-wrap: anywhere; }
.nl-ewin .nl-winfoot { align-items: center; }
.nl-donebtn { min-width: 120px; justify-content: center; }
.nl-wsec { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.nl-wsech { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nl-wsech h3 { margin: 0; font: 800 20px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.nl-wgrid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; }
.nl-ewin select, .nl-ewin .field input[type=time], .nl-ewin .field input[type=date] { min-height: 44px; border-color: var(--ctl); font-size: 16px; }
.nl-checks { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.nl-ewin .check input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); }
.nl-ewin .x { width: 44px; height: 44px; }
.nl-ewin .tname .tlink { width: 44px; height: 44px; }
.nl-ewin .trail { grid-template-columns: minmax(0, 1fr) 64px 64px 44px; }
.nl-ewin .trail > :nth-child(4) { grid-column: 1 / -2; }
.nl-ewin .trail.head > :nth-child(4) { display: none; }
.nl-ewin .hroom { grid-template-columns: 64px 1fr auto 44px; }
.nl-ewin .hroom .pdrv { grid-column: 1 / -1; grid-row: 2; }
.nl-ewin :is(.tlist button, .tfind .btn, .list > .row .btn) { min-height: 44px; }
.nl-ewin .fix { font-size: 15px; }
.nl-dayacts .nl-btn { flex: 1 1 140px; justify-content: center; }
/* The tablet's details pane (840 to 1023 px, and a touch screen 840 or wider; PANE in Win.jsx): the window sits on the
   right, under the top bar, and the page makes room. */
.nl-escrim.pane { top: var(--nl-top); left: auto; width: min(440px, 46vw); padding: 0; place-items: stretch; background: none; pointer-events: none; }
.nl-escrim.pane .nl-win { width: 100%; height: 100%; max-height: none; border-width: 0 0 0 1px; border-radius: 0; box-shadow: -8px 0 24px rgba(0, 0, 0, .12); pointer-events: auto; }
html[data-nlpane] .nl-trip > .nl-main { margin-right: min(440px, 46vw); }
html[data-nlpane] .nl-trip #rail { min-width: 0; flex-wrap: nowrap; overflow-x: auto; } /* the area's buttons scroll beside the pane, not push the page wider */
@media (min-width: 1024px) { /* a big tablet held sideways: the side menu and the pane both take room, so the cards keep to two across */
  html[data-nlpane] .nl-daylist, html[data-nlpane] .nl-dcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-nlpane] :is(.nl-riglist, .nl-glist) { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Rigs' and Gear's cards too (UX-G, UX-G2) */
  html[data-nlpane] .nl-dcards > .nl-wide { grid-column: 1 / -1; }
  html[data-nlpane] .nl-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* The help card. */
.nl-gist { margin: 0; font-size: 17px; }
.nl-gist .nl-st { margin-right: 4px; }
.nl-hitems { display: grid; gap: 6px; }
.nl-hitem { border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.nl-hitem > summary { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-weight: 700; cursor: pointer; }
.nl-hitem > summary::before { content: "›"; font-size: 22px; line-height: 1; transition: transform .15s; }
.nl-hitem[open] > summary::before { transform: rotate(90deg); }
.nl-hitem > :not(summary) { margin: 0 12px 10px; }
.nl-hitem h3 { font-size: 15px; font-family: var(--f-body); text-transform: none; letter-spacing: 0; }
.nl-hitem ol { padding-left: 20px; }
.nl-hrel { margin: 4px 0 0; padding: 0; }
/* The walkthrough: what the step is about lit up, the rest dimmed, and the step's card beside it. */
.nl-tour { position: fixed; z-index: 95; inset: 0; }
.nl-tourlit { position: fixed; border-radius: 4px; box-shadow: 0 0 0 4px var(--accent); pointer-events: none; } /* the ring; Help.jsx dims round it */
.nl-tourdim { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); }
.nl-tourcard { position: fixed; display: grid; gap: 8px; padding: 16px; border: 1px solid var(--ctl); border-radius: 8px; background: var(--surface); color: var(--ink); box-shadow: 0 14px 36px rgba(0, 0, 0, .35); font-size: 16px; line-height: 1.45; }
.nl-tourcard:focus { outline: none; }
.nl-tourcard h2 { margin: 0; font-size: 22px; }
.nl-tourcard p { margin: 0; }
.nl-tourbtns { justify-content: space-between; align-items: center; }
@media (prefers-reduced-motion: reduce) { .nl-hitem > summary::before { transition: none; } }
html[data-theme="sun"] .nl-tourlit { box-shadow: 0 0 0 4px var(--ink); }
html[data-theme="sun"] .nl-tourdim { background: rgba(0, 0, 0, .7); }
html[data-theme="sun"] .nl :is(.nl-glance, .nl-stat, .nl-hitem) { border-width: 2px; }
html[data-theme="sun"] .nl-tourcard { border-width: 2px; font-size: 18px; }
html[data-theme="sun"] .nl-stat b { font-size: 30px; }
html[data-theme="sun"] .nl-stat span, html[data-theme="sun"] .nl-wintop .nl-save { font-size: 14px; }
html[data-theme="sun"] .nl-help { width: 52px; height: 52px; }
html[data-theme="sun"] .nl-ewin :is(select, .x, .tname .tlink) { min-height: 52px; }
/* ---------- Rigs (UX-G; the kit's section 23) ----------
   Rigs.jsx draws it in #nlRigs, where #nlDays is. Its five boxes are Days' at-a-glance boxes, its cards Days' day
   cards (with the rig's photo across the top), and a rig's window is Days' window: the planner's own boxes, with the
   kit's 44 px buttons and boxes. */
@media (min-width: 1200px) { .nl-rigstats { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.nl-riglist { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .nl-riglist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .nl-riglist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nl-rig .nl-dtop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; }
.nl-rigname { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.nl-rigname img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.nl-rigphoto { display: block; width: calc(100% + 28px); max-width: none; margin: -12px -14px 2px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px 6px 0 0; background: var(--sunk); }
.nl-rig .nl-foot { align-items: flex-end; }
.nl-rig .nl-foot .nl-hint { white-space: nowrap; }
.nl-rig[aria-current="true"] { padding: 11px 13px; border: 2px solid var(--ink); } /* the rig open in the tablet's pane */
.nl-rig[aria-current="true"] .nl-rigphoto { width: calc(100% + 26px); margin: -11px -13px 2px; }
.nl-claim { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.nl-rigfig { margin: 0; display: grid; gap: 4px; }
.nl-rigfig img { width: 100%; max-height: 320px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; background: var(--sunk); }
.nl-rigfig figcaption { font-size: 14px; }
.nl-extra { display: inline-flex; align-items: center; gap: 4px; }
.nl-lines { display: grid; gap: 8px; }
.nl-spread { justify-content: space-between; align-items: center; }
.nl-rigwin .srow { grid-template-columns: minmax(0, 120px) auto minmax(0, 120px) 44px; justify-content: start; }
.nl-rigwin .srow .field > span { min-height: 0; }
.nl-rigwin .srow-x { padding-bottom: 12px; }
html[data-theme="sun"] .nl :is(.nl-claim) { border-width: 2px; }
html[data-theme="sun"] .nl-rigwin .srow { grid-template-columns: minmax(0, 130px) auto minmax(0, 130px) 52px; }
/* ---------- Gear (UX-G2; the kit's section 24) ----------
   Gear.jsx draws it in #nlGear, where #nlRigs is: Rigs' five boxes, then two lists of cards (Personal gear and
   Shared Items), each a section with its title and (?) beside it. A gear item's window and a part's window are Rigs'
   window: the planner's own boxes and ticks, with the kit's 44 px buttons and boxes. */
.nl-gsec { display: grid; gap: 10px; min-width: 0; }
.nl-lhtitle { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
.nl-gcard { display: grid; align-content: start; gap: 6px; min-width: 0; }
.nl-gcard .nl-dtitle, .nl-gcard .nl-meta { overflow-wrap: anywhere; }
.nl-gcard .nl-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 8px; }
.nl-gcard .nl-hint { margin-left: auto; white-space: nowrap; } /* under the marks when a narrow card has no room beside them */
.nl-gcard[aria-current="true"] { padding: 11px 13px; border: 2px solid var(--ink); } /* the item or part open in the tablet's pane */
.nl-spadd { align-items: flex-end; }
.nl-spadd .field { flex: 1 1 220px; }
.nl-said.err { color: var(--bad); }
.nl-carry { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.nl-carry li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 10px; border-bottom: 1px solid var(--line); }
.nl-carry li:last-child { border-bottom: 0; }
.nl-carry .nl-checkrow { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.nl-carry label:has(input:disabled) { color: var(--muted); } /* a tick this person can't change */
/* A tablet under 840 px: the edit windows take the whole screen, like a phone's (the pane would leave the list too narrow). */
@media (min-width: 600px) and (max-width: 839.98px) {
  .nl-escrim { padding: 0; place-items: stretch; background: var(--bg); }
  .nl-escrim .nl-win { width: 100%; height: 100%; max-height: none; padding: calc(8px + env(safe-area-inset-top, 0px)) 24px 16px; border: 0; border-radius: 0; background: var(--bg); box-shadow: none; }
  .nl-escrim .nl-wintop > .nl-btn:first-child { display: inline-flex; }
  .nl-escrim .nl-wintop .nl-x { display: none; }
  .nl-escrim .nl-winfoot { background: var(--bg); box-shadow: 0 40px 0 var(--bg); }
}
/* ---------- Map (UX-F2; the kit's section 25) ----------
   Maps.jsx draws it in #nlMap: a card for each map (Route map, Gas stations & fuel prices, Lodging map), each with the
   kit's dashed "Map (not loaded)" box, so no Google map loads until a card opens (idea 8). A card opens a big window
   (?w=map&map=route|gas|lodge) and the planner's own panel moves into it, with its map, list and buttons. */
.nl-maplist { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .nl-maplist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .nl-maplist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nl-mcard { min-width: 0; }
.nl-mcard .nl-dtop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; }
.nl-mcard .nl-dtitle, .nl-mcard .nl-meta { overflow-wrap: anywhere; }
.nl-mcard .nl-foot { flex-wrap: wrap; align-items: flex-end; }
.nl-mcard .nl-hint { margin-left: auto; white-space: nowrap; }
.nl-mapph { display: grid; place-items: center; gap: 4px; min-height: 112px; padding: 10px; border: 1.5px dashed var(--ctl); border-radius: 4px; background: var(--map); color: var(--muted); font-family: var(--f-mono); font-size: 12px; text-align: center; }
.nl-mapph .nl-line { width: 100%; height: 64px; background: none; }
html[data-theme="sun"] .nl-mapph { border-width: 2px; font-size: 14px; }
/* A map's window (big): the whole screen on a phone and a tablet, either way up; a box nearly as big as the screen on
   a computer with a mouse, 1024 px and up. */
@media not all and (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .nl-escrim.big { padding: 0; place-items: stretch; background: var(--bg); }
  .nl-escrim.big .nl-win { width: 100%; height: 100%; max-height: none; padding: calc(8px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); border: 0; border-radius: 0; background: var(--bg); box-shadow: none; }
  .nl-escrim.big .nl-wintop > .nl-btn:first-child { display: inline-flex; }
  .nl-escrim.big .nl-wintop .nl-x { display: none; }
  .nl-escrim.big .nl-winfoot { background: var(--bg); box-shadow: 0 40px 0 var(--bg); }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .nl-escrim.big { padding: 24px; }
  .nl-escrim.big .nl-win { width: min(1240px, 100%); height: 100%; }
}
/* The planner's panel inside the window: no box of its own, no title (the window has it), no fold buttons, and always
   open, whatever the person's section settings say (the title bar can't fold it, so their settings don't change). */
.nl-mapbody { min-width: 0; }
.nl-mapbody > .panel { padding: 0; border: 0; border-radius: 0; background: none; }
.nl-mapbody > .panel > .phead { pointer-events: none; }
.nl-mapbody > .panel > .phead h2, .nl-mapbody :is(.secbtns, .secgear, .minbtn) { display: none !important; }
.nl-mapbody .minbody[hidden] { display: grid !important; }
.nl-mapbody .gmap, .nl-mapbody :is(#fpMapPanel, #lodgePanel) .fpmap > svg { height: clamp(320px, calc(100dvh - 330px), 900px); } /* the screen less the window's top, the controls and Done */
@media (max-width: 599.98px) { .nl-mapbody .gmap, .nl-mapbody :is(#fpMapPanel, #lodgePanel) .fpmap > svg { height: 58dvh; } }
/* From 840 px the gas and lodging maps sit beside their list (the kit's section 10), and the list scrolls beside the map. */
@media (min-width: 840px) {
  .nl-mapbody :is(#fpMapPanel, #lodgePanel) .fpwrap { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); align-items: start; }
  .nl-mapbody :is(#fpMapPanel, #lodgePanel) .fplist { grid-template-columns: minmax(0, 1fr); max-height: clamp(320px, calc(100dvh - 330px), 900px); overflow-y: auto; overscroll-behavior: contain; }
}
/* ---------- Fuel Planner (UX-H; the kit's section 26) ----------
   Fuel.jsx draws it in #nlFuel, above the planner's own Trail Fuel Range (which stays as it is). Days' pieces (the boxes
   at a glance, a card per day, the window), plus three of its own: a tank gauge per rig, a station row to tick, and the
   fuel type's pills. Marshall picked it from a test page (Nov 1, 2026). */
.nl-ftype { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nl-ftype > span { margin-right: 4px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.nl-ftype .nl-pill { min-height: 44px; }
.nl-fprices { flex: 1 1 auto; min-width: 0; align-items: center; gap: 6px 10px; }
.nl-fprices .nl-meta { flex: 1 1 240px; overflow-wrap: anywhere; }
.nl-gasnote { min-width: 0; }
.nl-warnnote { border-left: 4px solid var(--warn); }
/* Ranges & buffers and Picked stops, side by side from 600 px. */
.nl-fcards { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .nl-fcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nl-fcard { display: grid; align-content: start; gap: 6px; min-width: 0; }
.nl-fcard .nl-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 8px; }
.nl-fcard .nl-hint { margin-left: auto; white-space: nowrap; }
.nl-rrows { display: grid; gap: 4px; }
.nl-rrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.nl-rrow > b { font: 800 22px/1 var(--f-display); }
.nl-rrow .nl-meta { overflow-wrap: anywhere; }
/* A day's card: its stops and how full each tank is on arrival. */
.nl-fday .nl-dtitle, .nl-fday .nl-meta { overflow-wrap: anywhere; }
.nl-fday .nl-foot { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 8px; }
.nl-fday .nl-hint { margin-left: auto; white-space: nowrap; }
.nl-fstops { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 15px; }
.nl-fstops > :is(li, .nl-fline) { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.nl-fstops .nlicon { flex: none; align-self: center; color: var(--muted); }
.nl-fstops b { font-weight: 600; overflow-wrap: anywhere; }
.nl-arrive { display: grid; gap: 4px; }
.nl-gauge { display: grid; grid-template-columns: 3.6em minmax(48px, 1fr) auto; align-items: center; gap: 8px; font-size: 14px; }
.nl-gauge > span:first-child { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-gbar { position: relative; height: 10px; border: 1px solid var(--ctl); border-radius: 2px; background: var(--sunk); overflow: hidden; }
.nl-gbar i { position: absolute; inset: 0 auto 0 0; background: var(--pine); }
.nl-gbar i.low { background: var(--warn); } /* the rig a stop is for */
.nl-gauge .num { font-size: 12px; color: var(--muted); white-space: nowrap; }
.nl-gauge .num b { color: var(--ink); font-weight: 500; }
/* A day's window: a part per stop, the stations to tick, the arrival. */
.nl-fdayacts { align-items: center; gap: 8px 12px; }
.nl-fstop h3 small { font: 400 12px var(--f-mono); letter-spacing: 0; text-transform: none; color: var(--muted); }
.nl-fills { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.nl-fills b { overflow-wrap: anywhere; }
.nl-bigprice { display: grid; justify-items: end; font: 800 26px/1 var(--f-display); white-space: nowrap; }
.nl-bigprice small { font: 400 11px var(--f-body); color: var(--muted); }
.nl-why { margin: 0; font-size: 15px; color: var(--muted); }
.nl-sublabel { margin: 4px 0 0; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.nl-fstas { display: grid; gap: 6px; }
.nl-fsta { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 2px 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--ctl); border-radius: 6px; background: var(--bg); cursor: pointer; }
.nl-fsta input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.nl-fsta input:disabled { cursor: default; }
.nl-fsta.sug { border-color: var(--good); }
.nl-fsta.on { padding: 9px 11px; border: 2px solid var(--sky); background: color-mix(in srgb, var(--sky) 10%, var(--bg)); }
.nl-fsta.last { border-color: var(--bad); }
.nl-fsta .nm { font-weight: 700; overflow-wrap: anywhere; }
.nl-fsta .pr { font-family: var(--f-mono); font-weight: 500; white-space: nowrap; }
.nl-fsta .src { font-size: 12px; color: var(--muted); }
.nl-fsta :is(.loc, .tags, .note) { grid-column: 2 / -1; }
.nl-fsta .loc { font-family: var(--f-mono); font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.nl-fsta .tags { display: flex; flex-wrap: wrap; gap: 4px; }
.nl-fsta .tags .nl-st { white-space: normal; } /* a long one wraps, not past the phone's edge */
.nl-fsta .note { font-size: 14px; }
.nl-maplink { min-height: 44px; display: inline-flex; align-items: center; margin: -10px -6px -10px 0; padding: 0 8px; color: var(--sky); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.nl-maplink:hover { text-decoration: underline; }
html[data-theme="sun"] .nl :is(.nl-fsta, .nl-gbar) { border-width: 2px; }
html[data-theme="sun"] .nl :is(.nl-gauge, .nl-fstops) { font-size: 17px; }