/* ©HomeHub LLC 2026 */

:root {
  --bg: #eceeea;
  --sheet: #f8f9f6;
  --ink: #1d2422;
  --muted: #5d6763;
  --rule: #cfd4cf;
  --accent: #e8a317;
  --accent-ink: #2a1e00;
  --done: #2f7d4f;
  --chip: #dde8f2;
  --chip-ink: #2d5f8a;
  --danger: #b23b2e;
  --focus: #2d5f8a;
  --f-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151a19; 
    --sheet: #1d2422; 
    --ink: #e6ebe7; 
    --muted: #9aa49f; 
    --rule: #333d3a;
    --accent: #f0b232; 
    --accent-ink: #231800; 
    --done: #58b07c; 
    --chip: #1f3245; 
    --chip-ink: #8db8de; 
    --danger: #e07a6c; 
    --focus: #8db8de;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #151a19; 
  --sheet: #1d2422; 
  --ink: #e6ebe7; 
  --muted: #9aa49f; 
  --rule: #333d3a;
  --accent: #f0b232; 
  --accent-ink: #231800; 
  --done: #58b07c; 
  --chip: #1f3245; 
  --chip-ink: #8db8de; 
  --danger: #e07a6c; 
  --focus: #8db8de;
  color-scheme: dark;
}
 
.fnav, .dock {
  --fn-ease: cubic-bezier(.22, 1, .36, 1);
  font-family: var(--f-body);
  box-sizing: border-box;
}
.fnav *, .dock * { 
  box-sizing: border-box; 
  -webkit-tap-highlight-color: transparent; 
}
.fnav :focus-visible, .dock :focus-visible { 
  outline: 2px solid var(--focus); 
  outline-offset: 2px; 
}
 
/* ---------- Top bar ---------- */
.fnav {
  position: fixed; z-index: 50;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: 50%; 
  transform: translateX(-50%);
  width: min(1120px, calc(100% - 32px));
  /* Three columns: brand on the left, greeting in the true middle, buttons on the right */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 8px 8px 8px 16px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 6px 20px -10px rgba(0,0,0,.35);
  transition: width .5s var(--fn-ease), padding .5s var(--fn-ease), top .5s var(--fn-ease);
}
.fnav.is-compact {
  width: min(760px, calc(100% - 32px));
  padding-block: 5px;
  top: calc(10px + env(safe-area-inset-top, 0px));
}
.fnav-brand {
  display: flex; 
  align-items: center; 
  gap: 8px;
  font-family: var(--f-display); 
  font-weight: 700; 
  font-size: 24px; 
  line-height: 1;
  text-transform: uppercase; 
  letter-spacing: .02em;
  color: var(--ink); 
  text-decoration: none; 
  white-space: nowrap;
}
.fnav-mark {
  width: 22px; 
  height: 22px; 
  display: grid; 
  place-items: center;
  border-radius: 4px; 
  background: var(--accent); 
  color: var(--accent-ink);
}
.fnav-links {
  position: relative; 
  display: flex; 
  gap: 2px; 
  padding: 3px;
  border: 1px solid var(--rule); 
  border-radius: 6px; 
  background: var(--bg);
}
.fnav-links a {
  position: relative; 
  z-index: 1; 
  padding: 6px 14px; 
  border-radius: 4px;
  color: var(--muted); 
  text-decoration: none;
  font-family: var(--f-mono);
  font-size: 12px; 
  font-weight: 500;
  letter-spacing: .12em; 
  text-transform: uppercase;
  transition: color .25s;
}
.fnav-links a:hover, .fnav-links a[aria-current="page"] { 
  color: var(--ink); 
}
/* Sliding highlight behind the current link. Amber underline echoes the floor headings. */
.fnav-pill {
  position: absolute; 
  z-index: 0; 
  top: 3px; 
  bottom: 3px; 
  left: 0; 
  width: 0;
  border-radius: 4px; 
  background: var(--sheet);
  box-shadow: inset 0 0 0 1px var(--rule), inset 0 -2px 0 var(--accent);
  transition: transform .45s var(--fn-ease), width .45s var(--fn-ease);
}
.fnav-actions { 
  display: flex; 
  align-items: center; 
  gap: 6px; 
}
/* Buttons match .btn / .btn.primary from the punch list */
.fnav-btn {
  font: 500 14px var(--f-body);
  min-height: 40px; 
  padding: 8px 14px;
  border: 1px solid var(--rule); 
  border-radius: 6px;
  cursor: pointer; 
  white-space: nowrap;
  display: inline-flex; 
  align-items: center; 
  text-decoration: none;
  /* color: white; */
}
.fnav-btn--ghost { 
  background: var(--sheet); 
  color: var(--ink); 
}
.fnav-btn--ghost:hover { 
  border-color: var(--muted); 
}
.fnav-btn--primary { 
  background: var(--ink); 
  color: var(--bg); 
  border-color: var(--ink); 
}
.fnav-btn--primary:hover { 
  opacity: .88; 
}
 
/* ---------- Bottom dock ---------- */
/* The dock bar is the "ink" color and the + button is amber, the same two-tone as the primary button and the open-items pill.
   Icons use --bg so they stay readable in both light and dark mode. */
.dock {
  position: fixed; z-index: 50; left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  transition: transform .5s var(--fn-ease), opacity .4s;
}
.dock.is-hidden { 
  transform: translate(-50%, 140%); 
  opacity: 0; 
}
.dock-shape { 
  position: absolute; 
  inset: -10px; 
  filter: url(#fn-goo) drop-shadow(0 8px 14px rgba(0,0,0,.25)); 
  pointer-events: none; 
}
.dock-shape span { 
  position: absolute; 
}
.dock-bar { 
  left: 10px; 
  top: 10px; 
  bottom: 10px; 
  right: 76px; 
  border-radius: 999px; 
  background: var(--ink); 
}
.dock-blob {
  right: 10px; 
  top: 50%; 
  width: 64px; 
  height: 64px; 
  margin-top: -32px;
  border-radius: 50%; 
  background: var(--accent);
  transition: transform .5s var(--fn-ease);
}
.dock:hover .dock-blob { 
  transform: translateX(4px);
}
.dock-items { 
  position: relative; 
  display: flex; 
  align-items: center; 
  gap: 4px; 
  padding: 8px 10px; 
}
.dock-items a {
  position: relative; 
  width: 52px; 
  height: 48px; 
  display: grid; 
  place-items: center;
  color: var(--bg); 
  opacity: .6; 
  border-radius: 10px; 
  text-decoration: none;
  transition: opacity .25s, background .25s;
}
.dock-items a:hover { 
  opacity: 1; 
  background: color-mix(in srgb, var(--bg) 14%, transparent); 
}
.dock-items a[aria-current="page"] { 
  opacity: 1; 
  background: color-mix(in srgb, var(--bg) 14%, transparent); 
}
.dock-items a::after {
  content: ""; 
  position: absolute; 
  bottom: 4px; 
  left: 50%; 
  width: 5px; 
  height: 5px; 
  margin-left: -2.5px;
  border-radius: 50%; 
  background: var(--accent);
  transform: scale(0); 
  transition: transform .35s var(--fn-ease);
}
.dock-items a[aria-current="page"]::after { 
  transform: scale(1); 
}
.dock-tip {
  position: absolute; 
  bottom: calc(100% + 10px); 
  left: 50%; 
  transform: translate(-50%, 4px);
  padding: 4px 9px; 
  border-radius: 4px;
  background: var(--ink); 
  color: var(--bg);
  font-family: var(--f-mono); 
  font-size: 11px; 
  letter-spacing: .05em; 
  text-transform: uppercase;
  white-space: nowrap; 
  opacity: 0; 
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.dock-items a:hover .dock-tip, .dock-items a:focus-visible .dock-tip { 
  opacity: 1; 
  transform: translate(-50%, 0); 
}
.dock-fab {
  width: 64px; 
  height: 64px; 
  margin-left: 14px; 
  margin-right: -8px;
  border: 0; 
  border-radius: 50%; 
  background: transparent;
  color: var(--accent-ink); 
  cursor: pointer; 
  display: grid; 
  place-items: center;
}
.dock-fab svg { 
  transition: transform .45s var(--fn-ease); 
}
.dock-fab[aria-expanded="true"] svg { 
  transform: rotate(135deg); 
}
/* The create menu looks like a punch list room card */
.dock-menu {
  position: absolute; 
  right: 0;
  bottom: calc(100% + 14px); 
  min-width: 200px;
  display: grid; 
  gap: 2px; 
  padding: 6px; 
  border-radius: 8px;
  background: var(--sheet); 
  border: 1px solid var(--rule);
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.45);
  transform-origin: bottom right; 
  transform: scale(.9) translateY(8px);
  opacity: 0; 
  pointer-events: none;
  transition: transform .35s var(--fn-ease), opacity .2s;
}
.dock-menu.is-open { 
  transform: none; 
  opacity: 1; 
  pointer-events: auto; 
}
.dock-menu button {
  display: flex; 
  align-items: center; 
  gap: 10px; 
  min-height: 40px; 
  padding: 9px 12px;
  border: 0; 
  border-radius: 6px; 
  background: transparent; 
  color: var(--ink);
  font: 500 14px var(--f-body); 
  text-align: left; 
  cursor: pointer;
}
.dock-menu button:hover { 
  background: var(--chip); 
  color: var(--chip-ink); 
}
/* Was nested inside .dock-menu before; flattened so it works in every browser */
.dock-menu a { 
  text-decoration: none; 
  color: inherit; 
}
.fn-icon { 
  width: 22px; 
  height: 22px; 
  fill: none; 
  stroke: currentColor; 
  stroke-width: 1.6; 
  stroke-linecap: round; 
  stroke-linejoin: round; 
}
 
/* ---------- Signed-in state ---------- */
/* The dock stays hidden, and the Login/Sign up area stays invisible, until Firebase says who's here.
   This avoids a flash of the wrong state on page load. */
.dock { display: none; }
html.signed-in .dock { display: block; }

.fnav-actions { visibility: hidden; }
html.auth-ready .fnav-actions { visibility: visible; }

html.signed-in .fnav-guest { display: none; }
.fnav-out { display: none; }
html.signed-in .fnav-out { display: inline-flex; }

/* Left: "HomeHub" with the workspace (company logo + name) underneath */
.fnav-left { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.fnav-actions { justify-self: end; }
.fnav-ws,
.fnav-hello {
  display: none;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  padding: 2px 6px 2px 2px;
  margin-left: -2px;
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
  transition: background .2s, color .2s;
}
.fnav-ws:hover, .fnav-hello:hover { background: var(--bg); color: var(--ink); }
html.signed-in .fnav-ws:not([hidden]),
html.signed-in .fnav-hello { display: flex; }
.fnav-ws { font: 500 12px var(--f-mono); letter-spacing: .02em; }
.fnav-ws-name, .fnav-hello-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Middle: page links (when there are any) and "[photo] Hello, Name" on one line */
.fnav-center { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 0; }
.fnav-links:not(:has(a)) { display: none; }   /* no links yet: don't draw an empty box */
.fnav-hello { max-width: 260px; font: 500 14px var(--f-body); color: var(--ink); }

/* Workspace logo is a rounded square (a company mark); the person's photo is a circle */
.fnav-ws-logo, .fnav-av { flex: none; object-fit: contain; }
.fnav-ws-logo { width: 22px; height: 22px; border-radius: 5px; background: var(--bg); border: 1px solid var(--rule); }
.fnav-av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid var(--rule); }
.fnav-letter { display: grid; place-items: center; font: 600 11px var(--f-body); border: 0; }
.fnav-ws-logo.fnav-letter { background: var(--ink); color: var(--bg); }
.fnav-av.fnav-letter { background: var(--accent); color: var(--accent-ink); font-size: 12px; }


/* ---------- Responsiveness ---------- */
@media (max-width: 760px) {
  .fnav-links { 
    display: none; 
  }
  .fnav, .fnav.is-compact { 
    padding: 6px 6px 6px 16px; 
  }
  .fnav-btn--ghost { 
    display: none; 
  }
  .fnav { gap: 10px; }
  .fnav-hello-text { display: none; }   /* phones: just the photo in the middle */
  .fnav-hello { padding: 2px; }
}
@media (max-width: 420px) {
  .dock-items a { 
    width: 44px; 
  }
  .dock-bar { 
    right: 70px; 
  }
}
@media (prefers-reduced-motion: reduce) {
  .fnav, .fnav *, .dock, .dock * { 
    transition-duration: .01ms !important; 
  }
}
/* ---------- Glass top bar ----------
   Every page now sits on the dark glowing backdrop, so the bar is always frosted dark glass
   (in light and dark mode alike) and lets the glows show through. Its colors are set here,
   on .fnav only, so nothing else on the page changes. */
.fnav {
  --sheet: rgba(255, 255, 255, .10);    /* sliding pill behind the current link */
  --bg: rgba(255, 255, 255, .06);       /* link tray, hover backgrounds */
  --ink: #fff;
  --muted: rgba(255, 255, 255, .7);
  --rule: rgba(255, 255, 255, .16);
  --accent: #f0b232;
  --accent-ink: #231800;
  --focus: #fff;
  color-scheme: dark;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
}
/* Browsers without blur support get a solid dark bar instead of a see-through one */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fnav { background: rgba(22, 22, 22, .94); }
}

/* Buttons: white outline, and an amber "Sign up" like the main button on the home page */
.fnav-btn {
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 8px;
  font-weight: 500;
  transition: background .2s, border-color .2s;
}
.fnav-btn:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .6); }
.fnav-actions a.fnav-btn[href$="signup.html"] { background: #f0b232; color: #231800; border-color: transparent; font-weight: 600; }
.fnav-actions a.fnav-btn[href$="signup.html"]:hover { background: #ffc54d; }

/* Keep Login / Sign up in the right-hand column even when the middle (page links) is empty */
.fnav-actions { grid-column: 3; }

/* ---------- Bottom dock ----------
   The "goo" filter (#fn-goo, in each page's HTML) melts the bar and the amber + button together.
   The filter needs solid shapes: it can't blur what's behind the bar (no frosted glass), and it erases
   see-through fills. So the bar is a solid dark color that matches the glass top bar on the dark backdrop. */
.dock {
  --bg: #fff;                           /* icon color */
  --ink: #fff;
  --sheet: rgba(30, 30, 30, .72);       /* create menu: heavier glass */
  --rule: rgba(255, 255, 255, .16);
  --chip: rgba(141, 184, 222, .16);
  --chip-ink: #8db8de;
  --focus: #fff;
  color-scheme: dark;
}
.dock-shape { filter: url(#fn-goo) drop-shadow(0 10px 18px rgba(0, 0, 0, .5)); }
.dock-bar { right: 76px; background: #232626; }
@media (max-width: 420px) { .dock-bar { right: 70px; } }
.dock:hover .dock-blob { transform: translateX(6px); }  /* stretches the gooey neck between bar and + */

/* Hover labels and the create menu: dark glass with white text */
.dock-tip { background: rgba(30, 30, 30, .72); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: #fff; border: 1px solid rgba(255, 255, 255, .14); }
.dock-menu {
  border-color: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* Copyright line at the bottom of every page (extra bottom space keeps it clear of the dock) */
.site-copy {
  padding: 28px 16px 110px;
  text-align: center;
  font-size: 13px;
  opacity: .7;
}

/* "Soon" tag next to a menu item that isn't built yet */
.dock-menu .soon { margin-left: 8px; font-size: 11px; font-weight: 500; opacity: .6; }