/* THE ONE TOUCHDOWN HEADER (founder, 25 Sep 2026; revised the same day: the
   workspace switcher and the photo menu are now ONE account control). One set
   of measurements, the storefront's: a 1240px container, 86px and a 1px rule,
   the wordmark at 169x24 (in the partners area the PARTNERS tag sits under
   it, right-aligned to it, taking no width), the menu at 16px/600 with 30px gaps
   starting 300px in, and the account zone on the right, 24px apart: currency
   58 (the storefront's only, until the account has bought) · the shortcut,
   My trips, as wide as its words · the account control; no divider
   (founder, 25 Sep 2026).
   THE ACCOUNT CONTROL (polished 26 Sep 2026): photo, "Account" (the
   workspace's name inside one, your photo on its corner), chevron; no
   outline, a quiet wash on hover and while open. It is anchored right and as
   wide as what it says, never wider than a bound, so a long company name ends
   in an ellipsis (whole in its title and in the menu); the utilities sit
   24px apart, each icon 8px from its word. The menu is anchored left in its
   own column, so nothing the account zone says moves it. The currency picker
   shows only until the account has bought (site-header.js lockedCurrency).
   WIDTHS (the area's menu stays in the bar down to 1024):
     1300 and up  all of it
     1200-1299    the same; the partner pages' longer menu (24px apart) with
                  the currency's code and My trips as its icon, 16px apart
     1120-1199    compact: currency code, My trips as its icon, 16px apart;
                  the partner pages' account control narrower (132)
     1024-1119    compact, and the account control narrower (132); below
                  1080 the partner pages' is the photo alone (80)
     800-1023     the menu button: the area's menu moves into its sheet
     below 800    the phone: logo (+ PARTNERS under it), photo and short
                  label, menu button
   Kept identical in touchdown-storefront/public/site-header.css,
   touchdown-portal/src/header.css and touchdown-ops/src/header.css: change
   one, copy it to the others. */
/* Runway's colours, one set for both apps (26 Sep 2026): its ink, its tint
   (the brand green at low strength, the same lightness as the menu's mint and
   blue squares) and its hover, and its mark's green. The storefront's Runway
   chips (buying.css, checkout.css), the portal's Runway card and its Runway
   options, and the account menu's Runway mark all read these. */
:root{--td-runway:#326953;--td-runway-wash:#e5f3ed;--td-runway-wash-hover:#d8ebe1;--td-runway-mark:#2f7d5b}
.tdh{--tdh-ink:#192728;--tdh-muted:#596363;--tdh-line:#dfe5e3;--tdh-orange:#cb4222;--tdh-soft:#f4f6f4;--tdh-menu-gap:30px;--tdh-acct-gap:24px;--tdh-cur-w:58px;--tdh-globe:block;--tdh-short-w:auto;--tdh-short-words:block;--tdh-short-show:flex;--tdh-me-w:228px;--tdh-me-gap:8px;--tdh-tile-agency:#e8f0ee;--tdh-tile-agency-ink:#14654f;--tdh-tile-business:#e5ecf3;--tdh-tile-business-ink:#1d5e8c;--tdh-tile-affiliate:#f9e6df;--tdh-tile-affiliate-ink:#cb4222;--tdh-runway-mark:var(--td-runway-mark);position:relative;z-index:50;background:#fff;border-bottom:1px solid var(--tdh-line);color:var(--tdh-ink);font:500 16px/1.5 Hanken,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-align:left}
.tdh[data-sticky]{position:sticky;top:0;z-index:55}
.tdh *,.tdh *::before,.tdh *::after{box-sizing:border-box}
.tdh a{color:inherit;text-decoration:none}
.tdh button{font:inherit;color:inherit;background:none;border:0;border-radius:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
.tdh details{margin:0;padding:0;border:0}
.tdh summary{list-style:none;cursor:pointer;margin:0;padding:0;font-size:inherit;font-weight:inherit;justify-content:flex-start}
.tdh summary::-webkit-details-marker{display:none}
.tdh-i{width:18px;height:18px;flex:none;display:block}
.tdh-in{width:min(1240px,calc(100% - 80px));height:86px;margin-inline:auto;display:grid;grid-template-columns:300px minmax(0,1fr) auto;align-items:center}
.tdh-brand{grid-column:1;justify-self:start;display:flex;align-items:center;min-width:0;position:relative}
.tdh-logo{display:block;flex:none}
.tdh-logo img{display:block;width:169px;height:24px}
/* PARTNERS under the wordmark (founder, 25 Sep 2026): the wordmark keeps its
   place, the tag hangs beneath it, its last letter ending under the full
   stop's right edge (the negative right offset takes back the spacing after
   that letter), so it takes no width from the menu. */
.tdh-tag{position:absolute;right:-.24em;top:calc(100% + 5px);font-size:9.5px;font-weight:700;letter-spacing:.24em;line-height:1;color:var(--tdh-muted);white-space:nowrap}
.tdh-menu{grid-column:2;display:flex;align-items:center;gap:var(--tdh-menu-gap);min-width:0;font-weight:600}
.tdh-menu>a{padding:16px 0;white-space:nowrap}
.tdh-menu>a:hover,.tdh-menu>a[aria-current=page]{color:var(--tdh-orange)}
.tdh-acct{grid-column:3;display:flex;align-items:center;gap:var(--tdh-acct-gap);font-weight:600}
.tdh-cur,.tdh-me{position:relative}
.tdh-cur>summary{width:var(--tdh-cur-w);min-height:44px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.tdh-cur>summary>.tdh-i{display:var(--tdh-globe)}
.tdh-short{display:var(--tdh-short-show);width:var(--tdh-short-w);min-height:44px;align-items:center;justify-content:center;gap:8px;white-space:nowrap;flex:none}
.tdh-short>span{display:var(--tdh-short-words)}
/* My trips' SIM in the bar a sixth larger than the 18px globe (the founder, 26 Sep 2026), its line kept at the globe's weight (1.7 at 18px = 1.457 at 21px), centred on its word, 8px from it. */
.tdh-short>.tdh-i{width:21px;height:21px;stroke-width:1.457}
.tdh-cur>summary:hover,a.tdh-short:hover,a.tdh-short[aria-current=page],.tdh-signin:hover,.tdh-signup:hover{color:var(--tdh-orange)}

/* The account control, and "Sign in" with "Sign up" beside it in the same
   place (the founder, 26 Sep 2026), right-aligned; the pair never narrower
   than the control, and wider only where the control is narrower than them. */
/* The slot is as wide as its control (24px from My trips, like the other utilities) and never wider than the bound, so a long company name ends in an ellipsis; the menu, left-anchored in its own column, never moves. While the session is still being asked for, the empty slot keeps the control's usual width. */
.tdh-slot{max-width:var(--tdh-me-w);min-width:0;min-height:44px;display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto}
.tdh-slot:empty{width:125px}
.tdh-me{min-width:0;max-width:100%}
/* No outline (26 Sep 2026): photo, the label and the chevron, sized to what they say and anchored right in the slot; a quiet wash on hover and while the menu is open. A long company name ends in an ellipsis within the slot, so nothing to its left moves. */
.tdh-me>summary{max-width:100%;min-height:44px;border-radius:10px;display:flex;align-items:center;white-space:nowrap}
.tdh-signin,.tdh-signup{min-height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.tdh-slot:has(.tdh-signup){max-width:none;gap:4px}
.tdh-me>summary{padding:0 8px 0 6px;gap:var(--tdh-me-gap)}
.tdh-signin{padding:0 10px}
.tdh-signup{padding:0 14px;border:1px solid var(--tdh-line)}
.tdh-me>summary:hover,.tdh-me[open]>summary{background:var(--tdh-soft)}
.tdh-signup:hover{border-color:#bbc9c4}
.tdh-me-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.tdh-av{width:28px;height:28px;border-radius:50%;background:#e8f0ee;color:#35564d;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none;font-size:12px;font-weight:700}
.tdh-av img{display:block;width:100%;height:100%;object-fit:cover}
.tdh-chev{width:14px;height:14px;color:var(--tdh-muted);transition:transform .15s}
.tdh details[open]>summary .tdh-chev{transform:rotate(180deg)}
/* A company's square: its logo, else its initials (and, while its logo is
   still being asked for, the square alone). Inside its own workspace the
   account control shows it with your photo small on its corner, ringed. */
/* A partner place's square by its kind (the founder, 26 Sep 2026): a travel agency mint, a business a calm blue at the same lightness, the affiliate dashboard the brand orange; an uploaded logo covers it. */
.tdh-sq{position:relative;width:28px;height:28px;border-radius:8px;background:var(--tdh-tile-agency);color:var(--tdh-tile-agency-ink);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none;font-size:11px;font-weight:700;letter-spacing:.02em;outline:1px solid #19272814;outline-offset:-1px}
.tdh-sq img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.tdh-sq-business{background:var(--tdh-tile-business);color:var(--tdh-tile-business-ink)}
.tdh-sq-affiliate{background:var(--tdh-tile-affiliate);color:var(--tdh-tile-affiliate-ink)}
.tdh-org{position:relative;flex:none;margin-right:2px}
/* The initials sit up and left, clear of your photo on the corner. */
.tdh-org>.tdh-sq{padding:0 8px 8px 0;font-size:10px}
.tdh-org>.tdh-av{position:absolute;right:-4px;bottom:-4px;width:16px;height:16px;font-size:8px;box-shadow:0 0 0 2px #fff}

/* Popovers: currency and the account menu. */
.tdh-pop{position:absolute;top:calc(100% + 14px);right:0;z-index:60;width:300px;padding:10px;background:#fff;border:1px solid var(--tdh-line);border-radius:12px;box-shadow:0 16px 48px #1927281f;font-size:14px;font-weight:500;line-height:1.4}
.tdh-cur>.tdh-pop{width:236px}
.tdh-pop a,.tdh-pop button{width:100%;min-height:40px;padding:9px 12px;border-radius:6px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left}
.tdh-pop a:hover,.tdh-pop button:hover{background:var(--tdh-soft)}
.tdh-pop a>span{min-width:0;overflow-wrap:anywhere}
/* The menu's square tiles read at a glance (the founder, 26 Sep 2026): a third larger, 24px to 32px, their initials and icons with them; the rows keep their height (the name and its line beside the tile are taller than it) and the text stays centred on the tile. */
.tdh-pop a>.tdh-sq{width:32px;height:32px;border-radius:8px;font-size:12px}
.tdh-pop .tdh-sq>.tdh-i{width:18px;height:18px;color:inherit}
.tdh-pop a>.tdh-sq+span,.tdh-pop a>.tdh-glyph+span{flex:1}
/* My trips and the affiliate dashboard: a plain icon, no tile, in the tiles' own 32px place so every label lines up (26 Sep 2026). */
.tdh-pop a>.tdh-glyph{width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex:none;color:var(--tdh-ink)}
.tdh-pop .tdh-glyph>.tdh-i{width:24px;height:24px;color:inherit}
/* The Runway row stays a plain row; its mark is the brand's Runway green (26 Sep 2026). */
.tdh-pop .tdh-runway-row>.tdh-glyph{color:var(--tdh-runway-mark)}
.tdh-pop small{display:block;margin-top:1px;font-size:12px;font-weight:400;color:var(--tdh-muted)}
.tdh-pop .tdh-i{width:16px;height:16px;color:var(--tdh-muted)}
.tdh-pop [aria-current]>.tdh-i,.tdh-pop [aria-pressed=true]>.tdh-i{color:var(--tdh-orange)}
/* The place you are in, and only that one, is lit (and carries the check). */
.tdh-pop a[aria-current]{font-weight:700;background:var(--tdh-soft)}
.tdh-pop-h{margin-top:8px;padding:6px 12px 4px;font-size:12px;font-weight:600;line-height:1.3;color:var(--tdh-muted)}
.tdh-who{padding:6px 12px 12px;margin-bottom:6px;border-bottom:1px solid var(--tdh-line);display:flex;flex-direction:column;gap:2px}
.tdh-who strong{font-size:15px;font-weight:700}
.tdh-who span{font-size:12.5px;color:var(--tdh-muted);overflow-wrap:anywhere}
/* The Traveller ID under the email (the founder, 26 Sep 2026: "the code should just appear naturally not dedicate a row"; then "you can make the traveller ID in the dropdown copyable without making it obvious to copy it"): the number alone, the email's muted colour, in monospace a touch smaller, only when the engine sends one. A button for the keyboard that looks like the line it is, as wide as its words: the menu rows' own wash on hover (.tdh-pop button:hover) and on keyboard focus, its text where the email's starts. A tap copies it, and "Copied" stands in the number's own cell for two seconds; its status is heard, never seen. */
.tdh-who .tdh-ref{align-self:flex-start;display:grid;gap:0;width:auto;min-height:0;margin:-1px -4px;padding:1px 4px;border-radius:4px;font-family:ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Code","Roboto Mono",Menlo,Consolas,monospace;font-size:11.5px;letter-spacing:.04em}
.tdh-who .tdh-ref>span{grid-area:1/1;font-size:inherit}
.tdh-who .tdh-ref>span+span,.tdh-who .tdh-ref[data-copied]>span:first-child{visibility:hidden}
.tdh-who .tdh-ref[data-copied]>span+span{visibility:visible}
.tdh-who .tdh-ref:focus-visible{background:var(--tdh-soft)}
.tdh-said{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
/* The Runway held, as a plain row under who you are, only when there is
   some (26 Sep 2026: no coloured chip in the menu). */
.tdh-pop a.tdh-runway-row{font-weight:500}
.tdh-sep{margin:6px 0;border-top:1px solid var(--tdh-line)}
.tdh-pop .tdh-quiet{color:var(--tdh-muted)}
.tdh-cur-line{display:flex;align-items:center;gap:12px}
.tdh-cur-line b{width:20px;font-size:17px;font-weight:700;text-align:center}

/* The compact account zone (1024-1199): the currency's code, My trips as its
   icon (its label is its accessible name and tooltip), 16px apart. Below 1120
   the account control narrows. */
@media (min-width:1024px) and (max-width:1199px){
  .tdh{--tdh-acct-gap:16px;--tdh-cur-w:36px;--tdh-globe:none;--tdh-short-w:36px;--tdh-short-words:none}
}
@media (min-width:1024px) and (max-width:1119px){
  .tdh{--tdh-me-w:132px;--tdh-me-gap:6px}
}
/* The partner pages: four programmes in the menu beside the same account
   zone. From 1300 it is the shop's; below, the menu 24px apart and the zone
   compact from 1299; the account control narrower from 1199 (132), and below
   1080 the photo alone (its label stays its title and accessible name). */
@media (min-width:1024px) and (max-width:1299px){
  .tdh[data-area=partners]:has(.tdh-short){--tdh-menu-gap:24px;--tdh-acct-gap:16px;--tdh-cur-w:36px;--tdh-globe:none;--tdh-short-w:36px;--tdh-short-words:none}
}
@media (min-width:1024px) and (max-width:1199px){
  .tdh[data-area=partners]:has(.tdh-short){--tdh-me-w:132px;--tdh-me-gap:6px}
}
@media (min-width:1024px) and (max-width:1079px){
  .tdh[data-area=partners]:has(.tdh-short){--tdh-me-w:80px}
  .tdh[data-area=partners]:has(.tdh-short) .tdh-me-label{visibility:hidden}
}

/* The menu button and its sheet: below 1024px the area's menu moves in. */
.tdh-more{display:none}
.tdh-burger{width:24px;height:44px;display:flex;align-items:center;justify-content:center}
.tdh-burger .tdh-i{width:22px;height:22px}
.tdh-sheet{position:absolute;top:100%;left:0;right:0;z-index:60;max-height:calc(100vh - 100px);overflow:auto;padding:6px 0 20px;background:#fff;border-bottom:1px solid var(--tdh-line);box-shadow:0 24px 40px -24px #19272840}
.tdh-sheet-in{width:min(1240px,calc(100% - 80px));margin-inline:auto;display:flex;flex-direction:column}
.tdh-sheet-in>a,.tdh-sheet-phone>a{padding:14px 0;border-bottom:1px solid var(--tdh-line);font-size:18px;font-weight:600;display:flex;align-items:center;gap:10px}
.tdh-sheet-in>a[aria-current=page]{color:var(--tdh-orange)}
.tdh-sheet-phone{display:none}
.tdh-sheet-cur{padding:16px 0 4px;display:flex;gap:8px}
.tdh-sheet-cur button{flex:1;min-height:44px;border:1px solid var(--tdh-line);border-radius:8px;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:600}
.tdh-sheet-cur button[aria-pressed=true]{border-color:var(--tdh-ink);background:var(--tdh-soft)}

@media (max-width:1023px){
  .tdh-in{grid-template-columns:auto minmax(0,1fr) auto;gap:24px}
  .tdh-menu{display:none}
  .tdh-more{display:block}
}
@media (max-width:1150px){
  .tdh-in,.tdh-sheet-in{width:calc(100% - 64px)}
}
/* The phone: the control is the photo and a short label (no frame, no
   chevron); the whole name is in its menu. */
@media (max-width:799px){
  .tdh-in{width:calc(100% - 32px);height:60px;grid-template-columns:auto minmax(0,1fr);gap:12px}
  .tdh-sheet-in{width:calc(100% - 32px)}
  .tdh-logo img{width:130px;height:auto}
  .tdh-tag{right:-.22em;top:calc(100% + 4px);font-size:8.5px;letter-spacing:.22em}
  .tdh-acct{grid-column:2;justify-self:end;min-width:0;max-width:100%;gap:10px}
  .tdh-cur,.tdh-short,.tdh-chev{display:none}
  .tdh-slot{width:auto;min-width:0;flex:0 1 auto}
  .tdh-me{min-width:0}
  .tdh-slot:has(.tdh-signup){min-width:0}
  .tdh-me>summary,.tdh-signin{min-width:0;border:0;padding:0;gap:6px}
  .tdh-signin,.tdh-signup{font-size:15px}
  .tdh-signin{padding:0 8px}
  .tdh-signup{padding:0 12px;min-height:40px}
  .tdh-me-label{font-size:13px}
  .tdh-av{width:26px;height:26px;font-size:11px}
  .tdh-org>.tdh-sq{width:26px;height:26px;border-radius:7px}
  .tdh-me{position:static}
  .tdh-pop{top:calc(100% + 8px);left:16px;right:16px;width:auto}
  /* The account menu, pinned to the screen under the header with its own
     scroll (the founder, 26 Sep 2026: "on mobile the account dropdown in the
     corner doesn't respond to scroll"): 69px is the phone header's 60px row
     and its 1px rule, plus 8px, sticky or not; it never runs past the
     screen's bottom, scrolls inside itself, and a scroll that reaches its end
     never carries on into the page behind. No ancestor is transformed or
     filtered at this width, so fixed is the screen. */
  .tdh-me>.tdh-pop{position:fixed;top:69px;max-height:calc(100dvh - 85px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .tdh-sheet-phone{display:flex;flex-direction:column}
}
@media (max-width:360px){
  .tdh-logo img{width:116px}
}
/* The narrowest phones keep Sign in; the same screen creates an account. */
@media (max-width:349px){
  .tdh-signup{display:none}
}