/* A computer's top bar (Nov 2026, the owner's design): the title cartouche at the top left with a square ≡ in its
   frame, the search docked to its right, and at the top right one framed plate (the passport, Crews, the Boat Show, the
   Workshop, Games, the language) with the tip jar's red glass beside it. The plate and the search speak the
   cartouche's language: paper, a 1.5px ink border and a 1px ink rule inside it (a double rule), 3px corners, one
   shadow; the plate's buttons are plain, a hairline between them. The search and the plate are the same height
   (--bar-h) on the title's top line, at every width. app.js fitBar folds the plate's labels into their icons where the
   row is tight, and fitSearch docks the search (--search-x, --search-y, --search-w), a row down where the top row
   leaves it too little room. Everything here is for a computer (761px and wider); a phone keeps its tab bar and top
   row (css/mobile-shell.css). */

/* a computer's ≡ and the bar's captions exist only there */
.c-menu, .bar-caps { display: none; }

@media (min-width: 761px) {
  /* the frame: the title's distance from the window's top and left edges, the plate's from the right (16px; 12px on a
     laptop, below), the bar's height, and the glass with its gap from the plate */
  :root { --bar-edge: 16px; --bar-h: 48px; --glass: 40px; --glass-gap: 8px; }

  /* ---- the title: a square ≡ at its left, inside its frame (its own 1px rule, like the name's) ------------------- */
  .cartouche { display: flex; align-items: stretch; gap: 5px; }           /* (the gap: the frame's padding) */
  .c-inner { flex: 1; min-width: 0; }
  .c-menu { flex: none; display: grid; place-items: center; width: 50px; padding: 0; border: 1px solid var(--ink); border-radius: 0;
    background: radial-gradient(ellipse at 50% 0%, #fbf5e6, var(--paper) 70%); color: var(--ink); pointer-events: auto; transition: background .15s; }
  .c-menu .ic { width: 24px; height: 24px; }
  .c-menu:hover { background: var(--paper-2); }
  /* the Chart Room under it (as wide: app.js --cart-w), on the same paper with the same ink edge */
  .chartroom { border: 1.5px solid var(--ink); border-radius: 3px; background: var(--paper); }

  /* ---- the plate ------------------------------------------------------------------------------------------------- */
  .hud { top: var(--bar-edge); right: calc(var(--bar-edge) + var(--glass) + var(--glass-gap)); height: var(--bar-h); gap: 0; padding: 4px; align-items: stretch;
    background: var(--paper); border: 1.5px solid var(--ink); border-radius: 3px; box-shadow: var(--shadow); }
  .hud::before { content: ''; position: absolute; inset: 2px; border: 1px solid var(--ink); border-radius: 1px; pointer-events: none; }
  /* its buttons: plain, no box of their own, a hairline between them (the passport comes first) */
  .hud > * { flex: none; height: auto; margin: 0; border: 0; border-radius: 1px; background: none; box-shadow: none; }
  .hud > #rankBtn ~ * { border-left: 1px solid var(--line-2); }
  .hud > .hud-btn { gap: 7px; padding: 0 13px; font: 700 13.5px var(--sans); letter-spacing: 0; color: var(--ink); }
  .hud > .hud-btn .ic, .hud > .academy-btn .ic { color: var(--red); }
  .hud > .hud-btn:hover, .hud > .rank:hover, .hud .lang-pill .lang-btn:hover { background: var(--paper-2); }
  .hud > .hud-btn.folded, .hud > .rank.folded { width: 44px; padding: 0; justify-content: center; }
  /* the passport: its book, "Passport" with the rank as a gold tag, the ports and the quests waiting under it (ui.js
     rankHTML), a red dot at its corner when there's news in the quests */
  .hud > .rank { position: relative; gap: 9px; padding: 0 16px 0 10px; }
  .hud .rank-ic { width: 22px; height: 22px; color: var(--red); animation: none; }
  .hud .rank-txt { gap: 4px; }
  .hud .rank-name { display: flex; align-items: center; gap: 7px; font: 400 15px/1 var(--serif-sc); letter-spacing: .04em; color: var(--ink); white-space: nowrap; }
  .hud .rank-tag { padding: 1px 7px 2px; border: 1px solid #dcc38a; border-radius: 9px; background: #f3e3bd; color: #8a6420; font: italic 400 12px/1 var(--serif); letter-spacing: 0; }
  .hud .rank-sub { font: 600 11.5px/1.15 var(--sans); color: var(--ink-2); white-space: nowrap; }
  .hud .rank-sub b { color: var(--red); font-weight: 800; }
  /* tight (app.js fitBar): the passport compact before anything folds: no rank tag, no ports count, the quests kept */
  .hud .rank-short, .hud > .rank.compact .rank-tag, .hud > .rank.compact .rank-sub:not(.rank-short) { display: none; }
  .hud > .rank.compact .rank-short { display: block; }
  .hud > .rank.compact { padding-right: 14px; }
  .hud .rank-dot { position: absolute; top: 4px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--paper); }
  /* the language: the plate's last button, as tall as the others */
  .hud > .lang-pill { display: flex; align-items: stretch; }
  .hud .lang-pill .lang-btn { height: auto; padding: 0 10px 0 12px; gap: 6px; border-radius: 1px; font: 800 13.5px var(--sans); letter-spacing: .06em; }
  .hud .lang-pill .lang-globe { width: 18px; height: 18px; }

  /* ---- the tip jar's red glass: outside the plate, at its right, on its middle line (its look and its glint:
     css/mobile-shell.css) -------------------------------------------------------------------------------------------- */
  .tip-btn { position: absolute; z-index: 7; top: calc(var(--bar-edge) + (var(--bar-h) - var(--glass)) / 2); right: var(--bar-edge); width: var(--glass); height: var(--glass);
    box-shadow: 0 0 0 1px rgba(110, 30, 24, .5), var(--shadow); transition: right .42s cubic-bezier(.2, .8, .2, 1), opacity .25s, background .15s; }
  .tip-btn .ic { width: 20px; height: 20px; }
  .tip-btn:hover { background: #8f2b23; }
  .drawer-open .tip-btn { opacity: 0; pointer-events: none; }                    /* (the panel takes the bar's place: style.css) */

  /* ---- the search: docked to the title (app.js fitSearch), framed like the plate and as tall -------------------- */
  #app .search, #app.search-below:not(.drawer-open) .search { left: var(--search-x, 300px); top: var(--search-y, var(--bar-edge)); right: auto; width: var(--search-w, 360px);
    min-width: 0; transform: none; transition: left .42s cubic-bezier(.2, .8, .2, 1), top .42s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
  .search input { height: var(--bar-h); padding: 0 16px 0 44px; border: 1.5px solid var(--ink); border-radius: 3px; background: var(--paper);
    box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--ink), var(--shadow); }
  .search input:focus { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--ink), 0 0 0 3px rgba(181, 138, 60, .3), var(--shadow); }
  .search-ic { left: 17px; top: calc((var(--bar-h) - 16px) / 2); }
  .search-results { top: calc(var(--bar-h) + 6px); border-radius: 12px; }

  /* ---- the ≡ menu (js/shell.js menuHTML): a sheet over the title, from the top left, framed like it ---------------- */
  #modal.menu-open { place-items: start; padding: var(--bar-edge); }
  #modal.menu-open .modal-backdrop { background: rgba(40, 28, 14, .3); backdrop-filter: none; }
  #modal.menu-open > .modal-card { width: 340px; max-height: calc(100vh - 2 * var(--bar-edge)); padding: 5px; border: 1.5px solid var(--ink); border-radius: 3px;
    transform: translateX(-12px); }
  #modal.menu-open.on > .modal-card { transform: none; }
  #modal.menu-open .shell-menu { min-height: 0; border: 1px solid var(--ink); background: radial-gradient(ellipse at 50% 0%, #fbf5e6, var(--paper) 140px); }
  #modal.menu-open .modal-x { right: 10px; top: 10px; }
  #modal.menu-open .sm-head { padding: 14px 60px 12px 18px; }
  #modal.menu-open .sm-head b { font-size: 24px; }
  .sm-list > li > button, .sm-list > li > a, .sm-lang > summary { min-height: 46px; padding: 4px 18px; font-size: 15px; }
  .sm-lang li button { min-height: 40px; padding: 0 18px 0 54px; font-size: 14.5px; }
  .sm-list .ic { width: 20px; height: 20px; }
  .sm-fine { padding: 12px 18px 14px; font-size: 13.5px; }

  /* ---- once, after the tour: what the plate's buttons and the glass are (app.js barHint), a caption under each ----- */
  .bar-caps { display: block; position: fixed; inset: 0; z-index: 9; pointer-events: none; transition: opacity .35s; }
  .bar-caps.out { opacity: 0; }
  .bar-cap { position: absolute; z-index: 1; padding: 5px 11px; border-radius: 999px; background: #2b2219; color: #f4e6c0; box-shadow: var(--shadow);
    font: 600 12.5px/1.2 var(--sans); white-space: nowrap; animation: barCapIn .4s ease-out both; }
  .bar-cap::after { content: ''; position: absolute; top: -4px; left: var(--ax, 50%); width: 9px; height: 9px; margin-left: -4.5px; background: inherit; rotate: 45deg; border-radius: 2px 0 0 0; }
  /* (a caption a row lower, clear of its neighbours': a thin line leads up to its button) */
  .bar-cap.low { z-index: 0; }
  .bar-cap.low::before { content: ''; position: absolute; bottom: 100%; left: var(--ax, 50%); width: 1.5px; height: var(--lead, 20px); margin-left: -.75px; background: #2b2219; }
  .bar-cap:nth-child(2) { animation-delay: .08s; } .bar-cap:nth-child(3) { animation-delay: .16s; } .bar-cap:nth-child(4) { animation-delay: .24s; }
  .bar-cap:nth-child(5) { animation-delay: .32s; } .bar-cap:nth-child(6) { animation-delay: .4s; } .bar-cap:nth-child(7) { animation-delay: .48s; }
  @keyframes barCapIn { from { opacity: 0; transform: translateY(-6px); } }

  /* ---- the tour's "What's aboard" (js/tour.js): a mini tile for each of the plate's sections; the one under the
     pointer or the focus lights its button ----------------------------------------------------------------------------- */
  .tour-card:has(.tc-tiles) { width: min(440px, calc(100vw - 20px)); }
  .tc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 2px 0 12px; padding: 0; list-style: none; }
  .tc-tiles li:first-child { grid-column: 1 / -1; }
  .tc-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 9px; align-items: center; width: 100%; height: 100%; padding: 7px 10px 8px;
    border: 1px solid var(--line-2); border-radius: 3px; background: var(--paper); text-align: left; transition: border-color .15s, background .15s; }
  .tc-tile .ic { grid-row: span 2; width: 20px; height: 20px; color: var(--red); }
  .tc-tile b { font: 400 15px/1.15 var(--serif-sc); letter-spacing: .03em; color: var(--ink); }
  .tc-tile small { font: 600 11.5px/1.3 var(--sans); color: var(--ink-3); }
  .tc-tile:hover, .tc-tile:focus-visible, .tc-tile.on { border-color: var(--ink); background: #fffaf0; box-shadow: inset 0 0 0 2px #fffaf0, inset 0 0 0 3px rgba(51, 41, 31, .35); }
}

/* a laptop (style.css's compact chart frame): the title 12px from the edges, its frame's padding 4px */
@media (min-width: 761px) and (max-height: 900px), (min-width: 761px) and (max-width: 1440px) {
  :root { --bar-edge: 12px; }
  .cartouche { gap: 4px; }
  .c-menu { width: 48px; }
}

/* a wide desktop with a panel open: the plate stays beside it (style.css), the glass at its right as ever */
@media (min-width: 1400px) {
  .drawer-open .hud { right: calc(452px + 14px + 14px + var(--glass) + var(--glass-gap)); }
  .drawer-open .tip-btn { right: calc(452px + 14px + 14px); opacity: 1; pointer-events: auto; }
}