/* Shared components every page uses, whichever stylesheet family it belongs
   to (app.css or business.css): the Go to menu, the privacy menu and the
   privacy mode banner. Values come from tokens.css. */

/* ---- The dock (nav.js) ----
   A floating glass pill, bottom centre, on every page at every width. The
   area you are in glows electric blue and names the page you are on. An
   area's pages rise out of the dock as art cards. Hidden, it is one orb. The
   page keeps --nav-b of room at the bottom so nothing sits under it. */
:root { --dock-h: 60px; --dock-gap: 14px; }
.ez-has-nav { --nav-b: calc(var(--dock-h) + var(--dock-gap) * 2 + env(safe-area-inset-bottom)); }
.ez-has-nav.ez-nav-min { --nav-b: calc(52px + var(--dock-gap) * 2 + env(safe-area-inset-bottom)); }
.ez-has-nav body { padding-bottom: var(--nav-b); }

.ez-dock {
  position: fixed; left: 50%; bottom: calc(var(--dock-gap) + env(safe-area-inset-bottom)); z-index: 60;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; height: var(--dock-h); padding: 0 8px;
  max-width: calc(100vw - 20px);
  background: rgba(14, 16, 21, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 22px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 22px 50px -18px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
}
.ez-dock-home {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px;
  background: linear-gradient(150deg, var(--accent-soft), var(--accent-deep)); color: #fff;
  box-shadow: 0 8px 20px -8px rgba(59, 130, 246, 0.9);
}
.ez-dock-home:hover { filter: brightness(1.1); }
.ez-dock-areas { display: flex; align-items: center; gap: 2px; padding: 0 6px; margin: 0 4px; border-left: 1px solid rgba(255,255,255,.07); border-right: 1px solid rgba(255,255,255,.07); min-width: 0; }
.ez-dock-a {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px;
  border: 0; border-radius: 14px; background: none; color: var(--subtle); cursor: pointer;
  font: 600 13.5px var(--font); white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s;
}
.ez-dock-a:hover, .ez-dock-a.open { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.ez-dock-a.here { color: #fff; background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent-line); }
.ez-dock-a.here svg { color: var(--accent-soft); filter: drop-shadow(0 0 6px rgba(59, 130, 246, .7)); }
/* The glowing dot under the area you are in. */
.ez-dock-a.here::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent-soft); box-shadow: 0 0 8px var(--accent); }
.ez-dock-a .c { color: var(--accent-soft); font-weight: 600; }
.ez-dock-a .c::before { content: "›"; margin-right: 6px; color: var(--subtle-2); }
.ez-dock-tools { display: flex; gap: 2px; }
.ez-dock-t { width: 40px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 12px; background: none; color: var(--subtle-2); cursor: pointer; }
.ez-dock-t:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.ez-dock a:focus-visible, .ez-dock button:focus-visible, .ez-orb:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }

/* An area's pages, rising out of the dock. */
.ez-rise {
  position: fixed; left: 50%; bottom: calc(var(--dock-h) + var(--dock-gap) * 2 + env(safe-area-inset-bottom) - 4px); z-index: 61;
  transform: translateX(-50%); width: min(720px, calc(100vw - 20px)); max-height: min(70vh, 560px); overflow-y: auto;
  padding: 14px; border-radius: 20px;
  background: rgba(17, 19, 24, 0.96); border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: var(--shadow-pop); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  animation: ez-rise .2s cubic-bezier(.2, .8, .2, 1) both;
}
.ez-rise-h { display: flex; align-items: center; gap: 8px; padding: 2px 4px 12px; font: 700 11.5px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-soft); }
.ez-rise-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.ez-card {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; text-decoration: none; color: var(--text);
  background: var(--bg-0); border: 1px solid var(--line); transition: border-color .15s, transform .15s;
}
.ez-card:hover, .ez-card:focus-visible { border-color: var(--accent-line); transform: translateY(-2px); outline: none; }
.ez-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 10px 30px -14px rgba(59, 130, 246, .6); }
.ez-card-art { position: relative; height: 72px; display: grid; place-items: center; overflow: hidden; color: var(--accent-soft);
  background: radial-gradient(120% 120% at 50% 0%, rgba(59, 130, 246, .22), transparent 70%), var(--surface); }
.ez-card-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.ez-card-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--bg-0)); }
.ez-card-t { display: grid; gap: 2px; padding: 8px 12px 12px; }
.ez-card-t .n { font: 650 14.5px var(--font); }
.ez-card-t .d { font: 400 12px/1.4 var(--font); color: var(--subtle); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ez-card.on .ez-card-t .n::after { content: "You are here"; margin-left: 8px; font: 700 9.5px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-soft); }

/* Hidden: one orb, same place, glowing softly. */
.ez-orb {
  position: fixed; left: 50%; bottom: calc(var(--dock-gap) + env(safe-area-inset-bottom)); z-index: 60;
  width: 52px; height: 52px; margin-left: -26px; border-radius: 50%; border: 0; display: none; place-items: center; cursor: pointer;
  color: #fff; background: radial-gradient(circle at 35% 30%, var(--accent-soft), var(--accent-deep));
  box-shadow: 0 0 0 6px rgba(59, 130, 246, .12), 0 12px 30px -8px rgba(59, 130, 246, .8);
  animation: ez-breathe 3.2s ease-in-out infinite;
}
.ez-nav-min .ez-dock { opacity: 0; pointer-events: none; transform: translate(-50%, 120%); visibility: hidden; transition: transform .28s, opacity .2s, visibility 0s .28s; }
.ez-nav-min .ez-orb { display: grid; }
@keyframes ez-rise { from { opacity: 0; transform: translate(-50%, 12px) scale(.98); } }
@keyframes ez-breathe { 50% { box-shadow: 0 0 0 10px rgba(59, 130, 246, .06), 0 12px 34px -8px rgba(59, 130, 246, .95); } }

/* Tablets: labels only on the area you are in. */
@media (max-width: 820px) {
  .ez-dock-a:not(.here) .l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ez-dock-a:not(.here) { padding: 0 11px; }
}
/* Phones: the dock spans the width, six icons with small labels under them. */
@media (max-width: 640px) {
  :root { --dock-gap: 8px; --dock-h: 62px; }
  .ez-dock { left: 8px; right: 8px; transform: none; max-width: none; padding: 0 4px; gap: 0; border-radius: 20px; }
  .ez-nav-min .ez-dock { transform: translateY(120%); }
  .ez-dock-home { display: none; }
  .ez-dock-areas { flex: 1; border: 0; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .ez-dock-a, .ez-dock-a:not(.here) { flex-direction: column; justify-content: center; gap: 3px; height: 54px; padding: 0; font-size: 9.5px; letter-spacing: -.01em; border-radius: 14px; }
  .ez-dock-a .l, .ez-dock-a:not(.here) .l { position: static; width: auto; height: auto; clip: auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .ez-dock-a .c, .ez-dock-a.here::after { display: none; }
  .ez-dock-tools { flex-direction: column; gap: 0; }
  .ez-dock-t { width: 34px; height: 27px; }
  .ez-rise { left: 8px; right: 8px; transform: none; width: auto; bottom: calc(var(--dock-h) + var(--dock-gap) * 2 + env(safe-area-inset-bottom)); max-height: 66vh; animation-name: ez-rise-m; }
  .ez-rise-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ez-card { flex-direction: row; align-items: stretch; }
  .ez-card-art { width: 84px; height: auto; flex: none; }
  .ez-card-art::after { background: linear-gradient(90deg, transparent 40%, var(--bg-0)); }
  .ez-card-t { padding: 11px 12px; align-content: center; }
}
@keyframes ez-rise-m { from { opacity: 0; transform: translateY(12px); } }

/* Anything else pinned to the bottom sits above the dock. */
.ez-has-nav .toast { bottom: calc(var(--nav-b) + 6px); }
.ez-has-nav .ez-pbtn { bottom: calc(var(--dock-gap) + env(safe-area-inset-bottom) + 8px); }
.ez-has-nav .ez-pbanner { bottom: calc(var(--nav-b) + 6px); }
@media (max-width: 640px) { .ez-has-nav .ez-pbtn { bottom: calc(var(--nav-b) + 6px); } }
@media print { .ez-dock, .ez-rise, .ez-orb { display: none !important; } .ez-has-nav body { padding: 0 !important; } }

/* ---- Go to panel ---- */
.ez-nav-open, .ez-nav-open body { overflow: hidden; }
.ez-nav-scrim {
  position: fixed; inset: 0; z-index: 9990; background: rgba(0, 0, 0, 0.72);
  display: flex; align-items: flex-start; justify-content: center;
  padding: max(56px, 8vh) 16px 16px; animation: ez-fade .12s ease both;
}
.ez-nav {
  width: 100%; max-width: 980px; max-height: calc(100vh - 96px); overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-pop); outline: none; animation: ez-pop .14s ease both;
}
.ez-nav-head { position: sticky; top: 0; z-index: 1; display: flex; gap: 10px; align-items: center; padding: 14px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.ez-nav-q {
  flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px;
  background: var(--bg-0); border: 1px solid var(--line); color: var(--text); font: 500 16px var(--font); outline: none;
}
.ez-nav-q:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.ez-nav-x { height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: none; color: var(--subtle); font: 600 12px var(--font); cursor: pointer; }
.ez-nav-x:hover { color: var(--text); }
.ez-nav-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 18px; padding: 14px 16px 6px; }
.ez-nav-col { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; }
.ez-nav-col.hide, .ez-nav-link.hide { display: none; }
.ez-nav-col h3 { margin: 4px 0 6px; padding: 0 10px; font: 700 11px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-soft); }
.ez-nav-link {
  display: grid; gap: 2px; padding: 9px 10px; border-radius: 10px;
  text-decoration: none; color: var(--text); border: 1px solid transparent;
}
.ez-nav-link .n { font: 600 14.5px var(--font); }
.ez-nav-link .d { font: 400 12.5px/1.4 var(--font); color: var(--subtle-2); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ez-nav-link:hover, .ez-nav-link:focus-visible { background: var(--surface-2); outline: none; border-color: var(--line); }
.ez-nav-link.on { background: var(--accent-wash); border-color: var(--accent-line); }
.ez-nav-link.on .n { color: #fff; }
.ez-nav-foot { display: flex; gap: 18px; flex-wrap: wrap; padding: 10px 26px 14px; border-top: 1px solid var(--line); font: 500 12px var(--font); color: var(--subtle-2); }
.ez-nav-foot kbd { font: 600 11px var(--font); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg-0); color: var(--subtle); margin-right: 4px; }
@media (max-width: 820px) { .ez-nav-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .ez-nav-scrim { padding: 0; align-items: stretch; }
  .ez-nav { max-width: none; max-height: none; height: 100%; border-radius: 0; border: 0; padding-bottom: env(safe-area-inset-bottom); }
  .ez-nav-head { padding-top: calc(12px + env(safe-area-inset-top)); }
  .ez-nav-cols { grid-template-columns: 1fr; }
  .ez-nav-link { padding: 12px 10px; }
  .ez-nav-link .d { -webkit-line-clamp: 1; }
  .ez-nav-foot { display: none; }
}
@keyframes ez-fade { from { opacity: 0; } }
@keyframes ez-pop { from { opacity: 0; transform: translateY(-6px) scale(.99); } }

/* ---- privacy menu (privacy.js) ---- */
.ez-pmenu {
  position: fixed; z-index: 9999; min-width: 260px; padding: 6px;
  background: var(--surface-2); border: 1px solid var(--line-hi); border-radius: 14px;
  box-shadow: var(--shadow-pop); font: 500 14px var(--font); color: var(--text);
}
.ez-pmenu button {
  display: block; width: 100%; text-align: left; background: transparent; border: 0; color: inherit;
  padding: 10px 11px; border-radius: 10px; cursor: pointer; font: inherit;
}
.ez-pmenu button:hover { background: var(--surface-3); }
.ez-pmenu button.on { background: var(--accent-wash); }
.ez-pmenu .t { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.ez-pmenu .t i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; }
.ez-pmenu .s { font-size: 12px; color: var(--subtle); margin-top: 2px; }
.ez-pmenu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }

/* The floating privacy button (pages without one of their own). */
.ez-pbtn {
  position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 55;
  width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center;
  border: 1px solid var(--line-hi); background: rgba(17, 19, 24, 0.92); color: var(--subtle);
  cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ez-pbtn:hover { color: var(--text); border-color: var(--accent-line); }
.ez-pbtn[data-mode="hide"], .privacy-btn[data-mode="hide"] { color: var(--warning); border-color: rgba(251, 191, 36, 0.5); }

/* While money is hidden, a slim bar says so, so a screenshot taken in this
   mode is never mistaken for the real numbers and the way back is obvious. */
.ez-pbanner {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 9997;
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 8px 7px 14px; border-radius: 999px;
  background: rgba(17, 19, 24, 0.94); border: 1px solid rgba(251, 191, 36, 0.45); color: var(--text);
  font: 600 12.5px var(--font); box-shadow: var(--shadow-pop); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ez-pbanner i { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); }
.ez-pbanner button { border: 1px solid var(--line-hi); background: var(--surface-2); color: var(--text); border-radius: 999px; padding: 5px 11px; font: 600 12px var(--font); cursor: pointer; }
.ez-pbanner button:hover { border-color: var(--accent-line); }
@media print { .ez-pbtn, .ez-pbanner, .ez-nav-btn { display: none !important; } }

/* Phones: an area with a short name shows it, so all six labels fit. */
@media (max-width: 640px) {
  .ez-dock-a .l[data-short] { font-size: 0; }
  .ez-dock-a .l[data-short]::after { content: attr(data-short); font-size: 9.5px; }
}

/* Dock buttons are links now (one tap, straight there). */
a.ez-dock-a { text-decoration: none; }
/* More: every other page under small headings. */
.ez-more { width: min(860px, calc(100vw - 20px)); }
.ez-more .ez-rise-h:not(:first-child) { margin-top: 14px; }
.ez-more .ez-rise-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.ez-more .ez-card-art { height: 56px; }
@media (max-width: 640px) { .ez-more .ez-rise-grid { grid-template-columns: minmax(0, 1fr); } .ez-more { width: auto; } }
/* More: cards stretch so every row is full, whatever a section holds. */
.ez-more .ez-rise-grid { display: flex; flex-wrap: wrap; }
.ez-more .ez-card { flex: 1 1 180px; }