/* The top bar, copied from abdulalali.com (site/index.html .top) and shared by the hub and every map
   page: his name back to the home page, the quiet word "Maps", the Chicago clock, then Appearance, X
   and LinkedIn as 44px icons. Each page sets the tokens (--ink, --ink-3, --gut) and the row's padding. */
.top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.top .left{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap}
.top .who{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none;touch-action:manipulation}
.top .who:active{opacity:.6}
.top b{font-weight:600;font-size:15px;letter-spacing:-.01em}
.top .where{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:15px;color:var(--ink-3)}
.top .right{display:flex;align-items:center;gap:4px;flex:none}
.top .clock{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.soc{display:inline-grid;place-items:center;width:44px;height:44px;margin:0 -12px 0 0;padding:0;border:0;background:none;font:inherit;
  color:var(--ink-3);cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.soc .ico{width:15px;height:15px}
.soc:active{opacity:.6}
@media (hover:hover) and (pointer:fine){.soc:hover{color:var(--ink)}}
/* Brand marks, drawn in the text colour so they follow the theme. */
.ico{display:inline-block;width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ico-x{--m:url(assets/icon-x.png)}.ico-linkedin{--m:url(assets/icon-linkedin.png)}
/* Appearance: half filled; it turns over in light. */
.ico-mode{width:13px;height:13px;border-radius:50%;border:1.5px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 0);
  transition:transform .2s cubic-bezier(.16,1,.3,1)}
:root[data-theme="light"] .ico-mode{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.ico-mode{transition:none}}
/* The row needs about 359px plus its gutters (12px each on a phone). Narrower phones (375, 360) drop the
   clock rather than overflow; past that, "Maps" truncates before anything leaves the screen. */
@media (max-width:385px){.top .clock{display:none}}