/* The menu bar every page shares: my name, a Work menu that reaches every app,
   Contact, Pat Cast, and a clock that opens two world clocks. */

:root { --menubar-h: 30px; }

.menubar, .mb-pop, .pc, .pc-hud {
  --mb-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --mb-out: cubic-bezier(0.22, 1, 0.36, 1);
  --mb-blue: #0a84ff;
  font-family: var(--mb-sans);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}
.menubar *, .mb-pop *, .pc *, .pc-hud * { box-sizing: border-box; margin: 0; padding: 0; }
.menubar button, .mb-pop button, .pc button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.menubar a, .mb-pop a, .pc a { color: inherit; text-decoration: none; }

.menubar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--menubar-h);
  display: flex; align-items: center; gap: 4px;
  padding: 0 8px 0 10px;
  font-size: 13.5px; line-height: 1;
  color: #000;
  background: rgba(246, 246, 246, 0.62);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.1);
  transition: background-color .45s var(--mb-out), color .45s var(--mb-out), box-shadow .45s;
}
html[data-ui="dark"] .menubar {
  color: #fff;
  background: rgba(28, 28, 30, 0.5);
  box-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.08);
}

/* Inside a window on the home page the window's title bar stands in for the
   bar: it is gone at once but keeps its height (the light/dark probe measures
   it), and fades back while the window opens for real. Scrolling inside the
   window never carries over to the desktop behind it. */
html[data-embedded=""] .menubar { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
html[data-embedded="leaving"] .menubar {
  transition: opacity .2s ease, background-color .45s var(--mb-out), color .45s var(--mb-out), box-shadow .45s;
}
html[data-embedded], html[data-embedded] body { overscroll-behavior: contain; }
html[data-embedded=""] .mb-pop { display: none; }

/* Every item in the bar is a pill that lights up while its menu is open. */
.mb-app, .mb-top, .mb-icon, .mb-clock {
  height: 22px; padding: 0 8px; border-radius: 6px;
  display: inline-flex; align-items: center;
  white-space: nowrap;
}
.mb-top:hover, .mb-icon:hover, .mb-clock:hover,
.mb-top[aria-expanded="true"], .mb-icon[aria-expanded="true"], .mb-clock[aria-expanded="true"] {
  background: rgba(127, 127, 127, 0.22);
}
.mb-app { font-weight: 700; overflow: hidden; }
.mb-app-name { display: block; line-height: 22px; }
.mb-app-name.swap { animation: mbSwap .42s var(--mb-out); }
@keyframes mbSwap { from { transform: translateY(70%); opacity: 0; } }
.mb-menus { display: flex; gap: 2px; }
.mb-right { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.mb-icon { width: 30px; justify-content: center; padding: 0; }
.mb-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.mb-icon.mb-mc svg { width: 17px; height: 12px; stroke-width: 1.4; }
.mb-clock { font-variant-numeric: tabular-nums; }
.mb-clock .d { margin-right: .5em; }

/* ======================================================================
   Menus and the clock widget: one glass panel hanging from the bar.
   ====================================================================== */
.mb-pop {
  position: fixed; z-index: 61; top: calc(var(--menubar-h) + 4px);
  min-width: 232px; max-width: calc(100vw - 16px);
  padding: 5px;
  border-radius: 12px;
  font-size: 13.5px; line-height: 1.2;
  color: #000;
  background: rgba(244, 244, 246, 0.78);
  -webkit-backdrop-filter: blur(36px) saturate(190%);
  backdrop-filter: blur(36px) saturate(190%);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.16), 0 12px 40px rgba(0, 0, 0, 0.18), inset 0 0.5px 0 rgba(255, 255, 255, 0.7);
  opacity: 0; transform: translateY(-3px);
  transition: opacity .14s ease, transform .18s var(--mb-out);
  pointer-events: none;
}
.mb-pop.open { opacity: 1; transform: none; pointer-events: auto; }
.mb-pop[hidden] { display: none; }
html[data-ui="dark"] .mb-pop {
  color: #fff;
  background: rgba(40, 40, 42, 0.74);
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 12px 40px rgba(0, 0, 0, 0.5), inset 0 0.5px 0 rgba(255, 255, 255, 0.12);
}

.mb-item {
  width: 100%; min-height: 26px; padding: 3px 9px 3px 7px;
  display: flex; align-items: center; gap: 8px;
  border-radius: 7px;
  text-align: left; outline: none;
}
.mb-item:hover, .mb-item:focus-visible, .mb-item.hot { background: var(--mb-blue); color: #fff; }
.mb-item .ic { width: 18px; height: 18px; flex: none; border-radius: 4.2px; object-fit: cover; }
.mb-item .tick { width: 12px; flex: none; text-align: center; font-size: 12px; visibility: hidden; }
.mb-item[aria-current="page"] .tick, .mb-item.done .tick { visibility: visible; }
.mb-item .sub { margin-left: auto; padding-left: 20px; opacity: .45; font-size: 12.5px; white-space: nowrap; }
.mb-item:hover .sub, .mb-item:focus-visible .sub, .mb-item.hot .sub { opacity: .8; }
.mb-sep { height: 1px; margin: 5px 9px; background: currentColor; opacity: .12; }

/* ---------- the clock widget ---------- */
.mb-clocks { display: flex; gap: 6px; padding: 9px; }
.mb-face {
  width: 128px; padding: 12px 0 11px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border-radius: 10px;
}
.mb-face svg { width: 92px; height: 92px; overflow: visible; }
.mb-face .dial { fill: #fff; stroke: rgba(0, 0, 0, .08); stroke-width: .6; }
.mb-face .ticks { stroke: #1d1d1f; stroke-width: 1.4; stroke-linecap: round; }
.mb-face .ticks .min { stroke-width: .6; opacity: .45; }
.mb-face .num { font: 600 9px/1 var(--mb-sans); fill: #1d1d1f; text-anchor: middle; dominant-baseline: central; }
.mb-face .hh, .mb-face .mm { stroke: #1d1d1f; stroke-linecap: round; }
.mb-face .hh { stroke-width: 3; }
.mb-face .mm { stroke-width: 2; }
.mb-face .ss { stroke: #ff9f0a; stroke-width: 1; stroke-linecap: round; }
.mb-face .hub { fill: #ff9f0a; }
.mb-face.night .dial { fill: #1c1c1e; stroke: rgba(255, 255, 255, .1); }
.mb-face.night .ticks, .mb-face.night .hh, .mb-face.night .mm { stroke: #fff; }
.mb-face.night .num { fill: #fff; }
.mb-face b { font-weight: 600; font-size: 13px; }
.mb-face span { margin-top: -5px; font-size: 12px; opacity: .55; font-variant-numeric: tabular-nums; }

/* ======================================================================
   Pat Cast: Raycast's launcher, for this site. Always dark glass.
   ====================================================================== */
.pc { position: fixed; inset: 0; z-index: 90; display: none; color: #fff; }
.pc.live { display: block; }
.pc-panel {
  position: absolute; left: 50%; top: max(calc(var(--menubar-h) + 14px), 17vh);
  width: min(750px, calc(100vw - 24px));
  transform: translateX(-50%) scale(.975); opacity: 0;
  transition: transform .24s var(--mb-out), opacity .14s ease, border-radius .28s var(--mb-out);
  border-radius: 24px;
  /* Raycast's material: a warm neutral grey the page shows through, a dark
     outer edge with a hairline of light inside it, and a deep soft shadow. */
  background: rgba(38, 36, 33, 0.8);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  backdrop-filter: blur(40px) saturate(150%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 26px 60px rgba(0, 0, 0, 0.45), 0 8px 18px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.pc.open .pc-panel { transform: translateX(-50%); opacity: 1; }
.pc.expanded .pc-panel { border-radius: 26px; }

.pc kbd {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 4px;
  border-radius: 5px;
  font: 500 11.5px/1 var(--mb-sans);
  color: rgba(255, 255, 255, 0.62);
  background: none;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.38);
}
.pc kbd + kbd { margin-left: 4px; }

.pc-bar { display: flex; align-items: center; gap: 9px; height: 64px; padding: 0 20px 0 14px; }
.pc-mark { display: grid; flex: none; color: rgba(255, 255, 255, 0.5); }
.pc-mark svg { width: 25px; height: 25px; }
.pc-input {
  flex: 1; min-width: 0; height: 100%;
  font: 400 19px/1 var(--mb-sans); letter-spacing: -0.005em;
  color: #fff; caret-color: #fff;
  background: none; border: 0; outline: none;
}
.pc-input:focus, .pc-input:focus-visible { outline: none; box-shadow: none; }
.pc-input::placeholder { color: rgba(255, 255, 255, 0.45); }
.pc .pc-side { display: none; align-items: center; gap: 9px; flex: none; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.55); }
.pc .pc-side:hover { color: rgba(255, 255, 255, 0.72); }
.pc[data-side="browse"] .pc-browse, .pc[data-side="ask"] .pc-ask { display: inline-flex; }
.pc.open[data-side="browse"] .pc-browse kbd { animation: pcNudge 1.1s .7s var(--mb-out) 2; }
@keyframes pcNudge { 0%, 100% { transform: none; } 35% { transform: translateY(3px); } }

.pc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--mb-out); }
.pc.expanded .pc-body { grid-template-rows: 1fr; }
.pc-clip { position: relative; min-height: 0; overflow: hidden; }
.pc-list {
  position: relative; /* rows measure their offsetTop against the list */
  max-height: min(500px, calc(100vh - var(--menubar-h) - 17vh - 110px));
  overflow-y: auto; overscroll-behavior: contain;
  padding: 0 10px 64px;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 64px), transparent calc(100% - 8px));
  mask-image: linear-gradient(#000 calc(100% - 64px), transparent calc(100% - 8px));
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.pc-h { padding: 14px 12px 6px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.5); }
.pc-h:first-child { padding-top: 4px; }
.pc-row {
  display: flex; align-items: center; gap: 14px;
  height: 42px; padding: 0 12px; border-radius: 12px;
  cursor: default; white-space: nowrap;
}
.pc-row.sel { background: rgba(255, 255, 255, 0.1); }
.pc-row .ic { position: static; transform: none; box-shadow: none; width: 24px; height: 24px; flex: none; border-radius: 6px; object-fit: cover; }
.pc-row .glyph { display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); }
.pc-row .glyph svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pc-row .t { font-size: 15.5px; color: #fff; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.pc-row .s { margin-left: -4px; font-size: 15.5px; color: rgba(255, 255, 255, 0.5); overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.pc-row .ty { margin-left: auto; padding-left: 14px; font-size: 14.5px; color: rgba(255, 255, 255, 0.5); flex: none; }

.pc-foot {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  pointer-events: none;
}
.pc-name, .pc-cta {
  display: inline-flex; align-items: center; height: 44px;
  border-radius: 999px; pointer-events: auto;
  background: rgba(70, 68, 65, 0.5);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 6px 20px rgba(0, 0, 0, 0.25);
}
.pc-name { gap: 9px; padding: 0 16px 0 12px; font-size: 14.5px; font-weight: 500; color: rgba(255, 255, 255, 0.8); }
.pc-name .pc-mark svg { width: 21px; height: 21px; }
.pc-cta { gap: 14px; padding: 0 9px 0 18px; min-width: 0; }
.pc-go, .pc-more { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; white-space: nowrap; }
.pc-go { color: #fff; }
.pc-more { color: rgba(255, 255, 255, 0.72); }
.pc-go:hover, .pc-more:hover { color: #fff; }
.pc-div { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.18); }

.pc-acts {
  position: absolute; right: 12px; bottom: 64px; z-index: 2;
  width: min(340px, calc(100% - 24px));
  padding: 6px;
  border-radius: 16px;
  background: rgba(44, 42, 40, 0.95);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.13), 0 18px 50px rgba(0, 0, 0, 0.5);
  opacity: 0; transform: translateY(6px) scale(.98); transform-origin: 100% 100%;
  transition: opacity .14s ease, transform .2s var(--mb-out);
}
.pc-acts.open { opacity: 1; transform: none; }
.pc-acts[hidden] { display: none; }
.pc-acts-h { padding: 8px 10px 6px; font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-act { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 36px; padding: 0 8px 0 10px; border-radius: 9px; font-size: 14.5px; cursor: default; }
.pc-act.sel { background: rgba(255, 255, 255, 0.1); }
.pc-act .keys { display: inline-flex; }
.pc-act kbd { min-width: 22px; height: 22px; font-size: 12px; }
.pc-acts-q {
  display: block; width: 100%; height: 40px; margin-top: 6px; padding: 0 10px;
  font: 400 14.5px/1 var(--mb-sans); color: #fff;
  background: none; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); outline: none;
}
.pc-acts-q::placeholder { color: rgba(255, 255, 255, 0.4); }
.pc-none { padding: 10px; font-size: 14.5px; color: rgba(255, 255, 255, 0.45); }

.pc-hud {
  position: fixed; left: 50%; bottom: 44px; z-index: 91;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px 10px 14px; border-radius: 999px;
  font: 500 14.5px/1 var(--mb-sans); color: #fff;
  background: rgba(38, 36, 33, 0.88);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 12px 30px rgba(0, 0, 0, 0.35);
  opacity: 0; transform: translate(-50%, 10px);
  transition: opacity .18s ease, transform .3s var(--mb-out);
  pointer-events: none;
}
.pc-hud.on { opacity: 1; transform: translate(-50%, 0); }
.pc-hud svg { width: 16px; height: 16px; fill: none; stroke: #30d158; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.mb-cast svg { width: 16px; height: 16px; stroke: none; }
.mb-cast dp-mark { display: block; width: 16px; height: 16px; }

@media (hover: none) {
  .pc-foot kbd, .pc-ask kbd { display: none; }
}

@media (max-width: 640px) {
  .menubar { padding: 0 4px 0 6px; gap: 0; font-size: 13px; }
  .mb-app, .mb-top { padding: 0 7px; }
  .mb-clock .d { display: none; }
  .mb-icon.mb-mc { display: none; }
  .mb-pop { left: 8px !important; right: 8px; min-width: 0; }
  .mb-clocks { justify-content: center; }
  .pc-panel { top: calc(var(--menubar-h) + 10px); width: calc(100vw - 16px); border-radius: 22px; }
  .pc.expanded .pc-panel { border-radius: 22px; }
  .pc-bar { height: 58px; padding: 0 16px 0 14px; gap: 12px; }
  .pc-input { font-size: 17px; }
  .pc-list { max-height: calc(100svh - var(--menubar-h) - 90px); padding: 0 6px 64px; }
  .pc-row .ty, .pc-row .s { display: none; }
  .pc-name { display: none; }
  .pc-foot { justify-content: flex-end; }
}
@media (max-width: 380px) {
  .mb-app { padding: 0 5px; }
  .mb-top { padding: 0 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .mb-app-name.swap { animation: none; }
  .mb-pop, .pc-panel, .pc-body, .pc-acts, .pc-hud { transition: none; }
  .pc.open[data-side="browse"] .pc-browse kbd { animation: none; }
}