/* MapFun — components: top bar, buttons, panels, picker, search, info card, coords, toasts, help */

/* ---------- Top bar ------------------------------------------------------ */
#topbar {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 14px;
  background: var(--panel);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--panel-border);
  transition: background-color var(--t-theme), border-color var(--t-theme);
}
.wordmark {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: 0.01em;
  color: var(--ink); margin-right: 6px; white-space: nowrap;
}
.wordmark .mark { width: 24px; height: 24px; color: var(--accent); }
.wordmark .mark .spin { transform-origin: 12px 12px; animation: globe-spin 22s linear 3; }
@keyframes globe-spin { to { transform: rotate(360deg); } }

.topbar-spacer { flex: 1; min-width: 4px; }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 12px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border: 1px solid transparent;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
  white-space: nowrap; font-weight: 500; font-size: 13.5px; line-height: 1;
}
.btn:hover { background: color-mix(in srgb, var(--ink) 11%, transparent); }
.btn:active { transform: translateY(1px); }
.btn.icon { width: 34px; padding: 0; justify-content: center; }
.btn.primary { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.btn[aria-pressed="true"], .btn.active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn .kbd { margin-left: 2px; }

#projection-btn { max-width: 300px; font-family: var(--font-display); font-size: 14px; padding-right: 10px; }
#projection-btn .label { overflow: hidden; text-overflow: ellipsis; }
#projection-btn .chev { opacity: .6; transition: transform var(--t-med); }
#projection-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

.mode-tabs { display: inline-flex; padding: 3px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 6%, transparent); gap: 2px; }
.mode-tabs .tab {
  height: 28px; padding: 0 12px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--ink-muted);
  position: relative; transition: background-color var(--t-fast), color var(--t-fast);
}
.mode-tabs .tab[aria-selected="true"] { background: var(--panel-solid); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.mode-tabs .tab:disabled { opacity: .5; }

.kbd {
  display: inline-block; min-width: 18px; padding: 1px 5px; border-radius: 4px; font-family: var(--font-mono); font-size: 11px; line-height: 16px;
  color: var(--ink-muted); background: color-mix(in srgb, var(--ink) 8%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); text-align: center;
}

/* ---------- Search ------------------------------------------------------- */
.search { position: relative; }
.search .field {
  display: flex; align-items: center; gap: 8px; height: 34px; width: 240px; padding: 0 10px 0 10px;
  border-radius: var(--radius-sm); background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid transparent;
  transition: border-color var(--t-fast), background-color var(--t-fast), width var(--t-med);
}
.search .field:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: var(--panel-solid); width: 300px; }
.search .field svg { width: 15px; height: 15px; color: var(--ink-muted); flex: none; }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--ink); font-size: 13.5px; }
.search input:focus-visible { outline: none; }
.search input::placeholder { color: var(--ink-muted); }
.search .field .kbd { flex: none; }
.search .results {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; width: 320px; max-height: 360px; overflow: auto;
  padding: 6px; border-radius: var(--radius); background: var(--panel-solid); border: 1px solid var(--panel-border); box-shadow: var(--shadow);
  animation: pop-in var(--t-med); z-index: 30;
}
.search .result {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 6px; text-align: left; color: var(--ink);
}
.search .result .sub { font-size: 12px; color: var(--ink-muted); }
.search .result[aria-selected="true"], .search .result:hover { background: var(--accent-soft); }
.search .result mark { background: none; color: var(--accent); font-weight: 600; }
.search .empty { padding: 12px 10px; color: var(--ink-muted); font-size: 13px; }

/* ---------- Panels ------------------------------------------------------- */
.panel {
  background: var(--panel); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid var(--panel-border); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink);
  transition: background-color var(--t-theme), border-color var(--t-theme), color var(--t-theme);
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes slide-in-right { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Projection picker ------------------------------------------- */
.scrim { position: absolute; inset: var(--topbar-h) 0 0 0; z-index: 24; background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: fade-in var(--t-med); }
#picker {
  position: absolute; left: 12px; right: 12px; top: calc(var(--topbar-h) + 10px); margin: 0 auto; max-width: 1180px;
  max-height: calc(100vh - var(--topbar-h) - 24px); max-height: calc(100dvh - var(--topbar-h) - 24px);
  display: flex; flex-direction: column; z-index: 25; animation: pop-in var(--t-med);
}
#picker .picker-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--panel-border); flex-wrap: wrap; }
#picker .picker-head h2 { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 600; }
#picker .picker-head .hint { color: var(--ink-muted); font-size: 12.5px; }
#picker .picker-head .close { margin-left: 4px; }
#picker .filters { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 500; letter-spacing: .01em;
  color: var(--ink-muted); background: color-mix(in srgb, var(--ink) 7%, transparent); border: 1px solid transparent; white-space: nowrap;
}
.chip.sm { height: 20px; padding: 0 7px; font-size: 10.5px; }
button.chip:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--ink); }
.chip[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
/* property colours (chips on cards / in the info card, and the dot on the picker's filter chips) */
:root { --c-equal-area: #8fd694; --c-conformal: #f2b56b; --c-compromise: #b8b3ff; --c-equidistant: #7fd3f0; --c-gnomonic: #f7a1c4; }
:root[data-theme="atlas"] { --c-equal-area: #2f6b34; --c-conformal: #9b5a10; --c-compromise: #4b3f9e; --c-equidistant: #145f7a; --c-gnomonic: #a2335f; }
.chip.equal-area { color: var(--c-equal-area); } .chip.conformal { color: var(--c-conformal); } .chip.compromise { color: var(--c-compromise); } .chip.equidistant { color: var(--c-equidistant); } .chip.gnomonic, .chip.perspective { color: var(--c-gnomonic); }
/* filter chips stay neutral until pressed; the dot carries the property colour so the row does not read as "four filters on" */
.chip .dot { width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; background: currentColor; flex: none; }
.chip .dot.equal-area { color: var(--c-equal-area); } .chip .dot.conformal { color: var(--c-conformal); } .chip .dot.compromise { color: var(--c-compromise); } .chip .dot.equidistant { color: var(--c-equidistant); }
.chip[aria-pressed="true"] .dot { color: var(--accent); }

#picker .grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px; padding: 14px 16px 16px; overflow: auto;
}
#picker .group-title { grid-column: 1 / -1; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); margin: 6px 0 -2px; font-weight: 600; }
.pcard {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 9px; border-radius: 9px; text-align: left; color: var(--ink);
  background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px solid transparent;
  transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.pcard:hover, .pcard:focus-visible { background: color-mix(in srgb, var(--ink) 9%, transparent); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.pcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pcard[aria-selected="true"] { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: var(--accent-soft); }
.pcard canvas { width: 100%; aspect-ratio: 16 / 10; border-radius: 6px; background: var(--ocean-deep); }
.pcard .pname { font-weight: 600; font-size: 13px; line-height: 1.25; display: flex; align-items: baseline; gap: 6px; }
.pcard .pname .name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pcard .pname .year { flex: none; white-space: nowrap; font-weight: 400; color: var(--ink-muted); font-size: 11px; font-family: var(--font-mono); }
.pcard .meta { display: flex; gap: 4px; flex-wrap: wrap; }
.pcard .rank { position: absolute; top: 12px; left: 12px; font-family: var(--font-mono); font-size: 10px; color: var(--ink); background: rgba(0,0,0,.45); padding: 1px 5px; border-radius: 4px; opacity: 0; transition: opacity var(--t-fast); }
.pcard:hover .rank { opacity: .85; }
:root[data-theme="atlas"] .pcard .rank { background: rgba(255,250,240,.75); }
.pcard .oneliner {
  position: absolute; left: 6px; right: 6px; bottom: calc(100% - 4px); padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.4; color: var(--ink);
  background: var(--panel-solid); border: 1px solid var(--panel-border); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(4px);
  transition: opacity var(--t-fast), transform var(--t-fast); z-index: 5;
}
.pcard[data-flip="below"] .oneliner { bottom: auto; top: calc(100% - 4px); transform: translateY(-4px); }
.pcard:hover .oneliner, :root.kbd-nav .pcard:focus-visible .oneliner { opacity: 1; transform: none; transition-delay: 250ms; }

/* ---------- Left rail (skins placeholder) -------------------------------
   Only until src/ui/skinbar.js mounts and adds .skinbar. These are ID-specificity rules and css/skins.css
   styles the real rail by class, so an unscoped `#skinbar .skin` here *outranks* the real tile sizing: it was
   squeezing every thumbnail into a 42 px grid cell and letting the names overflow across each other, worst of
   all in the phone strip. :not(.skinbar) keeps the placeholder honest and hands the mounted rail over cleanly. */
#skinbar:not(.skinbar) { display: flex; flex-direction: column; gap: 6px; padding: 6px; width: var(--rail-w); }
#skinbar:not(.skinbar) .skin {
  width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-muted); position: relative;
  transition: background-color var(--t-fast), color var(--t-fast);
}
#skinbar:not(.skinbar) .skin:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); }
#skinbar:not(.skinbar) .skin[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
#skinbar:not(.skinbar) .skin:disabled, #skinbar:not(.skinbar) .skin[aria-disabled="true"] { opacity: .35; cursor: not-allowed; }
#skinbar:not(.skinbar) .skin[aria-disabled="true"]:hover { background: none; color: var(--ink-muted); }
#skinbar:not(.skinbar) .skin svg { width: 20px; height: 20px; }
#skinbar:not(.skinbar) .rail-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; text-align: center; color: var(--ink-muted); padding: 4px 0 2px; }
.tip { position: relative; }
.tip::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(-4px); white-space: nowrap;
  padding: 5px 9px; border-radius: 6px; font-size: 12px; color: var(--ink); background: var(--panel-solid); border: 1px solid var(--panel-border); box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity var(--t-fast), transform var(--t-fast); z-index: 40;
}
.tip:hover::after, .tip:focus-visible::after { opacity: 1; transform: translateY(-50%); }
.tip.tip-below::after { left: 50%; top: calc(100% + 8px); transform: translate(-50%, -4px); }
.tip.tip-below:hover::after, .tip.tip-below:focus-visible::after { transform: translate(-50%, 0); }
/* the last top-bar button sits 14 px from the viewport edge: anchor its tip to the right so it cannot clip */
#help-btn.tip-below::after { left: auto; right: 0; transform: translate(0, -4px); }
#help-btn.tip-below:hover::after, #help-btn.tip-below:focus-visible::after { transform: none; }
/* no hover on touch: a tapped button would keep its tooltip until focus moves */
@media (pointer: coarse) { .tip::after { display: none; } }

/* ---------- Info card ---------------------------------------------------- */
#infocard {
  width: 340px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - var(--topbar-h) - 24px); max-height: calc(100dvh - var(--topbar-h) - 24px);
  display: flex; flex-direction: column; animation: slide-in-right var(--t-med); overflow: hidden;
}
#infocard.collapsed { width: auto; left: auto; bottom: auto; max-height: none; }
/* The card shares the right-hand edge with #attribution, which is a credit and has to stay readable: on
   desktop it stops one credit line short of the bottom instead of covering it at a higher z-index. */
@media (min-width: 721px) {
  #infocard { max-height: calc(100dvh - var(--topbar-h) - 58px); }
}
#infocard.collapsed .card-body, #infocard.collapsed .tabs, #infocard.collapsed .peek { display: none; }
#infocard .card-head { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 12px; }
#infocard .tabs { display: flex; gap: 2px; flex: 1; }
#infocard .tabs .tab { height: 28px; padding: 0 10px; border-radius: 6px; font-size: 13px; color: var(--ink-muted); font-weight: 500; }
#infocard .tabs .tab[aria-selected="true"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
#infocard .tabs .tab:disabled { opacity: .45; }
#infocard.collapsed .card-head { padding: 6px; }
#infocard .peek { display: none; flex: 1; min-width: 0; align-items: baseline; gap: 8px; text-align: left; padding: 4px 4px; border-radius: 6px; }
#infocard .peek .peek-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#infocard .peek .peek-sub { color: var(--ink-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#infocard.peek .tabs, #infocard.peek .card-body { display: none; }
#infocard.peek .peek { display: flex; }
#infocard .card-body { padding: 4px 16px 16px; overflow: auto; }
#infocard .eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; margin: 6px 0 4px; }
#infocard h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -0.005em; }
#infocard .byline { color: var(--ink-muted); font-size: 13px; margin-bottom: 10px; }
#infocard .chips { display: flex; gap: 5px; flex-wrap: wrap; margin: 4px 0 12px; }
#infocard p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; }
#infocard p.lead { font-size: 14.5px; color: var(--ink); }
#infocard .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 8px 0 12px; }
#infocard .fact { padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
#infocard .fact .k { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; }
#infocard .fact .v { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }
#infocard .fact .v.text { font-size: 13px; font-weight: 500; line-height: 1.45; }
#infocard .fact:has(.v.text) { grid-column: 1 / -1; }
#infocard .muted { color: var(--ink-muted); font-size: 12.5px; }
#infocard .actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
#infocard .empty { padding: 14px 0 8px; color: var(--ink-muted); font-size: 13.5px; }

/* ---------- Coords readout ---------------------------------------------- */
#coords {
  display: flex; gap: 14px; align-items: center; padding: 6px 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-muted);
  pointer-events: none; font-variant-numeric: tabular-nums; border-radius: 8px;
}
#coords .v { color: var(--ink); }
#coords .sep { opacity: .35; }
#coords .fps { min-width: 4ch; text-align: right; }

/* ---------- Attribution / toasts ---------------------------------------- */
/* .panel background so the 11 px text meets AA over any map colour (bare --ink-muted over atlas land was ~3.5:1) */
#attribution { font-size: 11px; color: var(--ink-muted); pointer-events: auto; letter-spacing: .01em; padding: 4px 9px; border-radius: 8px; }
#attribution a { color: inherit; }
#attribution a:hover { color: var(--ink); }
#toasts { display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.toast {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; font-size: 13px;
  background: var(--panel-solid); color: var(--ink); border: 1px solid var(--panel-border); box-shadow: var(--shadow);
  animation: toast-in var(--t-med); max-width: min(92vw, 520px);
}
.toast.leaving { animation: toast-out var(--t-med) forwards; }
.toast .kbd { margin-left: 2px; }
.toast .toast-action { color: var(--accent); font-weight: 600; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(.97); } }

/* ---------- Help popover ------------------------------------------------- */
#help {
  position: absolute; right: 12px; top: calc(var(--topbar-h) + 10px); width: 360px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - var(--topbar-h) - 24px); max-height: calc(100dvh - var(--topbar-h) - 24px);
  overflow: auto; z-index: 26; padding: 14px 16px 16px; animation: pop-in var(--t-med);
}
#help .help-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
#help h2 { margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 600; }
#help .shortcuts { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; font-size: 13px; }
#help .shortcuts .keys { display: flex; gap: 3px; justify-content: flex-end; }
#help .section { margin-top: 12px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; grid-column: 1 / -1; }
#help p { font-size: 13px; color: var(--ink-muted); margin: 6px 0 0; }

/* ---------- Auto-rotate feedback: the wordmark globe keeps turning while it is on ---- */
:root.auto-rotating .wordmark .mark .spin { animation: globe-spin 14s linear infinite; }
@media (prefers-reduced-motion: reduce) { .wordmark .mark .spin { animation: none; } }

/* ---------- Timeline placeholder ---------------------------------------- */
#timeline { width: min(880px, calc(100vw - 24px)); height: 56px; }

/* ---------- Picker open: quieten the floating chrome behind the scrim --- */
:root.picker-open #infocard, :root.picker-open #coords, :root.picker-open #attribution, :root.picker-open #skinbar { opacity: 0; pointer-events: none; transition: opacity var(--t-fast); }

/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 960px) {
  .search .field { width: 180px; }
  .search .field:focus-within { width: 240px; }
  #projection-btn { max-width: 200px; }
}
@media (max-width: 720px) {
  #skinbar, #coords, #attribution { display: none; }
  /* two rows: wordmark · projection · theme · help  /  tabs + search */
  #topbar { flex-wrap: wrap; padding: 6px 10px; row-gap: 6px; min-height: 0; }
  /* row 1 must always hold wordmark + projection + theme + help (93 + 34vw + 34 + 34 + gaps < 375 px), the search takes row 2 alone */
  #projection-btn { max-width: 34vw; }
  .mode-tabs { order: 3; }
  .search { order: 4; flex: 1 1 100%; min-width: 0; }
  .search .field, .search .field:focus-within { width: 100%; }
  .search .results { width: min(320px, calc(100vw - 20px)); }
  /* bottom sheet: never more than 60% of the screen, and the collapsed/peek states keep their bottom anchor */
  #infocard { right: 8px; left: 8px; width: auto; top: auto; bottom: calc(8px + var(--safe-b)); max-height: 60vh; max-height: 60dvh; animation: pop-in var(--t-med); }
  #infocard.collapsed { top: auto; bottom: calc(8px + var(--safe-b)); left: auto; right: 8px; }
  #infocard.peek { max-height: none; }
  #picker { left: 6px; right: 6px; }
  #picker .picker-head { padding: 10px 12px; gap: 8px; }
  #picker .picker-head .hint { display: none; }
  #picker .filters { flex-wrap: nowrap; overflow-x: auto; margin-left: 0; flex: 1 1 100%; order: 5; padding-bottom: 2px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } /* right-edge fade = "scrolls" */
  #picker .filters .chip { height: 36px; padding: 0 13px; font-size: 12.5px; }
  #picker .picker-head .close { margin-left: auto; }
  #picker .filters::-webkit-scrollbar { display: none; }
  #picker .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); padding: 10px 10px 12px; }
  #help { left: 8px; right: 8px; width: auto; }
}
/* very narrow panes (< 340 px, below any phone): keep the four row-1 controls on one row by dropping the wordmark text */
@media (max-width: 340px) { .wordmark span { display: none; } .wordmark { margin-right: 0; } }