/* doornav.css — the section navigator's look, shared by every portal door.
 *
 * Lifted verbatim from the homeowner portal, which is the design Paul approved
 * and the one the other doors are being brought in line with. Kept in one file
 * so the trade door cannot drift a few pixels away from the homeowner's over
 * time, which is exactly how three doors ended up with three navigations.
 *
 * The phone bar is the default; the rail appears at 900px and the bar steps
 * aside. 900px is the same breakpoint the doors already use for their phone
 * layout, so nothing has to agree with anything twice.
 */

/* Sections belonging to a tab that is not the open one. A class rather than an
   inline style so the door's own style.display keeps meaning "this job does not
   have this", which is what the rail reads to decide if a tab is live.
   !important because it has to beat the door's own inline display. */
.dn-hide { display: none !important; }

/* "Newer version ready" — the one thing a stale page must be able to say. Sits
   above everything (the modals on these doors run to z-index 340) because a
   notice you cannot see is the bug it exists to fix. */
#dn-stale {
  position: fixed; z-index: 400; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px;
  background: #101317; color: #FFFFFF; border-radius: var(--r-card);
  padding: 10px 12px 10px 16px; font-size: 13.5px;
  box-shadow: 0 12px 34px -14px rgba(0, 0, 0, .6); max-width: calc(100vw - 24px);
}
#dn-stale button {
  flex: none; font: inherit; font-weight: 700; cursor: pointer;
  background: var(--bronze, #4F7394); color: #FFFFFF; border: none;
  border-radius: var(--r-inner); padding: 7px 14px;
}
@media (min-width: 900px) { #dn-stale { bottom: 18px; } }

/* The job name and which door you are on, always in view.
   Scroll a long board and the banner left with it, so there was nothing on
   screen saying whose house this is or whether you are looking at the
   homeowner's portal, the trade portal or the design studio (Paul,
   2026-08-11: "I have no idea what board I'm on"). Sticky, opaque, and above
   the content it scrolls under — but below the tab bar and the modals. */
.pcol > header,
.frame > .pcol > header {
  position: sticky; top: 0; z-index: 30;
  background: #FFFFFF;
  margin: 0 -18px; padding-left: 18px; padding-right: 18px;
  box-shadow: 0 6px 12px -12px rgba(16, 19, 23, .5);
}
@media (min-width: 900px) { .pcol > header { margin: 0; padding-left: 0; padding-right: 0; } }

.railnav { display: none; }

#tabbar {
  position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: flex;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px);
  border-top: 1px solid #CFD6DE;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  overflow-x: auto; scrollbar-width: none;
}
#tabbar::-webkit-scrollbar { display: none; }
#tabbar button {
  flex: 1 0 auto; min-width: 74px; background: none; border: none; cursor: pointer;
  font: inherit; padding: 5px 2px 3px; color: #6C757E; border-radius: var(--r-inner); position: relative;
}
#tabbar button .ic, #tabbar button .i { font-size: 19px; line-height: 1; display: block; }
#tabbar button .tl {
  font-size: 10.5px; font-weight: 600; letter-spacing: .2px; margin-top: 3px; display: block;
}
#tabbar button.on { color: var(--bronze, #4F7394); }
/* A tab with nothing behind it yet. Dimmed rather than removed, so the viewer
   learns the section exists and hears why when they tap it. */
#tabbar button.off { opacity: .38; }
#tabbar.duck { transform: translateY(105%); }
#tabbar { transition: transform .22s ease; }

/* Unread/awaiting count on a tab. Absolute over the phone bar's icon, inline at
   the end of the rail row — set where the rail is styled, below. */
.tbadge {
  position: absolute; top: 0; right: calc(50% - 20px);
  min-width: 16px; height: 16px; padding: 0 4px; border-radius:99px;
  background: #B42318; color: #FFF; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* The ⋯ More menu (IA v2 §5.1): the overflow tabs as a floating column, same
   look as the rail's rows. Position is set inline by doornav.js against
   whichever control opened it. */
#dn-more {
  position: fixed; z-index: 60; display: flex; flex-direction: column; gap: 2px;
  background: #FFFFFF; border: 1px solid #CFD6DE; border-radius: var(--r-card);
  padding: 8px; min-width: 170px;
  box-shadow: 0 16px 44px -16px rgba(16, 19, 23, .5);
}
#dn-more button {
  display: flex; align-items: center; gap: 9px; font: inherit; font-size: 13.5px;
  color: #4A525C; padding: 10px 10px; border-radius: var(--r-inner); background: none;
  border: none; cursor: pointer; text-align: left; min-height: 42px;
}
#dn-more button:hover { background: #F2F4F6; color: #101317; }
#dn-more button.on { background: var(--bronze-soft, #EEF3F6); color: #000000; font-weight: 600; }
#dn-more button.off { opacity: .45; }
#dn-more button .tbadge { position: static; margin-left: auto; }

@media (min-width: 900px) {
  #tabbar { display: none; }
  .frame {
    display: flex; gap: 24px; max-width: 1240px; margin: 0 auto;
    align-items: flex-start; padding: 0 20px;
  }
  .frame > .pcol { flex: 1; min-width: 0; max-width: 900px; padding: 0 !important; }
  .railnav {
    display: flex; flex-direction: column; gap: 3px; position: sticky; top: 22px;
    width: 198px; flex: none; background: #FFFFFF; border: 1px solid #CFD6DE;
    border-radius: var(--r-card); padding: 14px 12px; margin-top: 26px;
    box-shadow: 0 6px 20px -18px rgba(16, 19, 23, .4);
  }
  .railnav .rbrand {
    display: flex; flex-direction: column; gap: 2px;
    padding: 2px 4px 10px; border-bottom: 1px solid #E0E0E0; margin-bottom: 8px;
  }
  .railnav .rbrand .mono { display: none; }
  .railnav .rbrand .bl {
    font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none;
    color: #4F7394; line-height: 1.2;
  }
  .railnav .rbrand .ba {
    font-size: 12px; font-weight: 400; color: #4F7394; line-height: 1.2;
  }
  .railnav button {
    display: flex; align-items: center; gap: 9px; font: inherit; font-size: 13.5px;
    color: #4A525C; padding: 9px 10px; border-radius: var(--r-inner); background: none;
    border: none; cursor: pointer; text-align: left; position: relative;
  }
  .railnav button:hover { background: #F2F4F6; color: #101317; }
  .railnav button.on { background: #FFFFFF; color: #4F7394; font-weight: 600; border: 1px solid #E0E0E0; }
  .railnav button.off { opacity: .45; }
  .railnav button .tbadge { position: static; margin-left: auto; }
}

/* Phone-matched brand: Cedar & Stone then address. White. #4F7394. Same on every door. */
.dn-brand { text-align: left; padding: 12px 0 10px; flex: 1; min-width: 0; }
.dn-brand-name { font: 600 13px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #4F7394; }
.dn-brand-addr { font: 400 12px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #4F7394; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-serif { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }
.dn-head { display: flex; align-items: center; gap: 12px; padding: 10px 4px 8px; background: #FFFFFF; }
.dn-head .dn-hide-chrome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.card { background: #FFFFFF; border: 1px solid #E0E0E0; }