/* ============================================================================
   shell.css — the header, tab row and footer every signed-in page shares.

   Published at /shell.css and loaded by Blueprint, Takeoff Flow, Community-DB,
   Plan-DB, Huddle, Respec, Vendor Assignments and the Benchmark admin page.
   The public pages (the map, the Benchmark survey) do not load it.

   A page links it AFTER its own stylesheet:

     <link rel="stylesheet" href="styles.css?v=N">
     <link rel="stylesheet" href="/shell.css?v=N">

   Header and footer rules live here and nowhere else. An app's own stylesheet
   styles what is inside <main>, plus the controls only that app has (listed
   as "the app's own" below).

   ---- the markup this file styles ------------------------------------------

   <header class="topbar">
     <div class="topbar-in">
       <button class="nav-btn">…</button>                    optional, phone menu
       <button class="home-logo"><img src="logo.svg"></button>
                                                 (or <img class="home-logo">)
       <span class="title">App name
         <span class="sub">small label</span>                optional
         <select>…</select>                                  optional picker
       </span>
       <select>…</select>                                    optional picker
       <span class="demo-badge">LOCAL DEMO DATA</span>       optional (.demo-pill too)
       <div class="gs-wrap">                                 optional search box
         <input type="text">
         <div class="gs-results">…</div>                     optional results list
       </div>
       <div class="spacer"></div>
       <div class="topbar-actions">        in this order, each part optional
         <span class="save-state"></span>
         <span class="mode-toggle">                          (or .basis-toggle)
           <button class="mode on">…</button><button class="mode">…</button>
         </span>
         <span class="user-chip">email <span class="role-tag">role</span></span>
         <button class="linkbtn">What's New, Admin, Print / PDF, Console, Back</button>
         <a class="linkbtn" href="/">‹ Blueprint</a>         every app but Blueprint
         <button class="linkbtn">Dark</button>
         <button class="linkbtn">Sign out</button>           always last
       </div>
     </div>
     <div class="tabrow">                                    optional
       <nav class="tabs">
         <button class="tab active">Name <span class="count">3</span></button>
       </nav>
       <div class="scope">…</div>          optional; its controls are the app's own
     </div>
     <div class="subbar">…</div>           optional; its controls are the app's own
   </header>

   <main>…</main>

   <footer class="site-foot" id="siteFoot"></footer>         filled by /footer.js

   A tab is .tab or [role="tab"]; the current one is .active or
   [aria-selected="true"]. A button on the bar with news to show is
   .linkbtn.has-updates.

   ---- rules for changing this file -----------------------------------------

   Every selector starts at .topbar, .topbar-in, .tabrow, .subbar or
   .site-foot, so nothing here reaches into a page's content, and a control an
   app moves out of the bar (Vendor Assignments puts its actions in a side menu
   on a phone) goes back to that app's own styles.

   Nothing is wider than the window: no max-width anywhere, 18px at the sides
   of the bar, the strip and the footer. The tab row keeps 10px, so a tab's
   label lines up 26px in.

   Colours are this file's own (--shell-*), never an app's: the apps' variable
   names and their dark values differ, and in three of them --navy is a light
   text colour in dark mode. Dark values apply when <html> carries
   data-theme="dark", which every page's script sets. A page whose dark mode
   also follows the device setting when nothing is stored (Benchmark's admin
   page) adds class="shell-os-theme" to <html>.

   Selectors are one or two classes deep. An app that needs one detail to
   differ repeats the selector from this file and adds to it
   (.topbar .tabrow{…}, .topbar-in .linkbtn.mine{…}); a bare .tabrow{…} in the
   app's sheet loses, because this file loads second.

   The "we have moved" bar (/moved.js) is the first thing in <body> and is not
   sticky; the header sticks inside the page's own wrapper below it, so the
   bar scrolls away and the header then holds the top.
   ============================================================================ */

:root{
  --shell-bar:#0a2540;          /* the top bar */
  --shell-bar-ink:#fff;         /* text on the bar and on the current tab */
  --shell-bar-dim:#dbe6f5;      /* buttons and tabs at rest */
  --shell-tabrow:#0057b8;       /* the tab row */
  --shell-edge:rgba(255,255,255,.28);   /* outlines of controls on the bar */
  --shell-fill:rgba(255,255,255,.12);   /* fill of controls on the bar */
  --shell-flag:#ffd452;         /* demo badge, edit mode, a count that warns */
  --shell-flag-ink:#3a2d00;
  --shell-search-bg:#fffbe6;    /* the search box: pale yellow, as in every app */
  --shell-search-ink:#1a2433;
  --shell-search-dim:#6b5d2e;   /* its placeholder */
  --shell-search-line:#e8c86a;
  --shell-sub-bg:#fafbfd;       /* the strip under the bar */
  --shell-sub-ink:#5b6b7f;
  --shell-sub-line:#e3e8ef;
  --shell-menu-bg:#fff;         /* lists that drop down from the bar */
  --shell-menu-ink:#1a2433;
  --shell-menu-line:#e3e8ef;
  --shell-foot-ink:#5b6b7f;     /* footer text */
  --shell-link:#0057b8;         /* footer links */
}
:root[data-theme="dark"]{
  --shell-bar:#0c1929; --shell-tabrow:#2f74c8;
  --shell-sub-bg:#111a25; --shell-sub-ink:#9aa7ba; --shell-sub-line:#2a3547;
  --shell-menu-bg:#19212e; --shell-menu-ink:#e7ecf4; --shell-menu-line:#2a3547;
  --shell-foot-ink:#93a2b8; --shell-link:#7fb0ef;
  --shell-search-bg:#2a2410; --shell-search-ink:#e7ecf4; --shell-search-dim:#b9ad85;
}
/* The same dark values, for a page that follows the device setting until a
   choice is stored. Keep this block equal to the one above. */
@media (prefers-color-scheme:dark){
  :root.shell-os-theme:not([data-theme="light"]){
    --shell-bar:#0c1929; --shell-tabrow:#2f74c8;
    --shell-sub-bg:#111a25; --shell-sub-ink:#9aa7ba; --shell-sub-line:#2a3547;
    --shell-menu-bg:#19212e; --shell-menu-ink:#e7ecf4; --shell-menu-line:#2a3547;
    --shell-foot-ink:#93a2b8; --shell-link:#7fb0ef;
    --shell-search-bg:#2a2410; --shell-search-ink:#e7ecf4; --shell-search-dim:#b9ad85;
  }
}

/* ---------- the bar ---------- */
/* z-index 20 sits above every app's table headings and below every app's
   menus, side panels and dialogs (40 and up). */
.topbar{position:sticky;top:0;z-index:20;margin:0;border:0;background:var(--shell-bar);color:var(--shell-bar-ink);line-height:1.45}
.topbar-in{display:flex;align-items:center;flex-wrap:wrap;gap:14px;max-width:none;height:auto;margin:0;padding:10px 18px}
/* a white ring: the pages' own blue one cannot be seen on navy or blue */
.topbar-in :focus-visible,.tabrow :focus-visible{outline:2px solid var(--shell-bar-ink);outline-offset:2px}

.topbar-in .home-logo{display:flex;flex:none;margin:0;padding:0;border:0;border-radius:6px;background:none;cursor:pointer}
.topbar-in .home-logo img,.topbar-in img.home-logo{display:block;width:30px;height:30px}
.topbar-in img.home-logo{cursor:default}
.topbar-in .title{color:var(--shell-bar-ink);font-size:17px;font-weight:700;letter-spacing:.2px;white-space:nowrap}
.topbar-in .sub{margin-left:6px;font-size:12px;font-weight:400;opacity:.8}
.topbar-in .spacer{flex:1}
.topbar-in .topbar-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;min-width:0}
.topbar-in .demo-badge,.topbar-in .demo-pill{margin:0;padding:2px 8px;border-radius:10px;background:var(--shell-flag);color:var(--shell-flag-ink);font-size:11px;font-weight:700;letter-spacing:.04em;white-space:nowrap}

.topbar-in .user-chip{padding:4px 10px;border-radius:20px;background:rgba(255,255,255,.1);color:var(--shell-bar-ink);font-size:12.5px;opacity:.95;white-space:nowrap}
.topbar-in .role-tag{display:inline-block;margin-left:4px;padding:0 7px;border-radius:12px;background:rgba(255,255,255,.2);color:var(--shell-bar-ink);font-size:10.5px;font-weight:700;letter-spacing:0;text-transform:uppercase}
.topbar-in .save-state{color:#b9cbe3;font-size:12px;white-space:nowrap}
.topbar-in .save-state.err{padding:3px 9px;border-radius:12px;background:#b3261e;color:#fff;font-weight:600}

/* text buttons, and the link back to Blueprint */
.topbar-in .linkbtn{padding:6px 8px;border:0;border-radius:7px;background:none;color:var(--shell-bar-dim);font-family:inherit;font-size:13px;font-weight:600;line-height:1.45;text-decoration:none;white-space:nowrap;cursor:pointer}
.topbar-in .linkbtn:hover{background:var(--shell-fill);color:var(--shell-bar-ink)}
/* lit while there is news the person has not opened; the app adds its own dot */
.topbar-in .linkbtn.has-updates{position:relative;background:rgba(255,255,255,.14);color:var(--shell-bar-ink)}

/* two-way switches: View / Edit, With tax / Untaxed */
.topbar-in .mode-toggle,.topbar-in .basis-toggle{display:inline-flex;overflow:hidden;border:1px solid var(--shell-edge);border-radius:8px}
.topbar-in .mode{padding:5px 12px;border:0;background:none;color:#cfe0f5;font-family:inherit;font-size:12.5px;font-weight:600;line-height:1.45;cursor:pointer}
.topbar-in .mode:hover{background:rgba(255,255,255,.1)}
.topbar-in .mode.on{background:#fff;color:var(--shell-bar);font-weight:700}
.topbar-in .mode.on[data-mode="edit"],.topbar-in .mode.on[data-mode="make"]{background:var(--shell-flag);color:var(--shell-flag-ink)}
/* the switch clips what is outside it, so the ring is drawn inside the half, in its own text colour */
.topbar-in .mode:focus-visible{outline-color:currentColor;outline-offset:-3px}

/* a picker on the bar: a division, for one */
.topbar-in select{max-width:100%;padding:4px 8px;border:1px solid var(--shell-edge);border-radius:8px;background:var(--shell-fill);color:var(--shell-bar-ink);font-family:inherit;font-size:12.5px;font-weight:600;line-height:1.45;cursor:pointer}
.topbar-in select:hover{background:rgba(255,255,255,.2)}
/* a picker that cannot be used right now (Plan-DB's division on the Divisions tab) */
.topbar-in select:disabled{opacity:.55;cursor:default;background:var(--shell-fill)}
.topbar-in select option{background:var(--shell-menu-bg);color:var(--shell-menu-ink)}
.topbar-in .title select{margin-left:8px;vertical-align:middle}

/* the search box, and the list of results under it */
.topbar-in .gs-wrap{position:relative;flex:0 1 260px;min-width:120px}
/* Yellow means "type here to search", the same fill the search boxes in the
   pages have: pale with dark text in light, the dark yellow with light text in
   dark. The border keeps the one amber in both. Focus is the bar's white ring,
   written out so that a page's own outline:none on text boxes cannot remove it. */
.topbar-in .gs-wrap input{display:block;width:100%;margin:0;padding:5px 10px;border:1px solid var(--shell-search-line);border-radius:8px;background:var(--shell-search-bg);color:var(--shell-search-ink);font-family:inherit;font-size:13px;line-height:18px}
.topbar-in .gs-wrap input::placeholder{color:var(--shell-search-dim);opacity:1}
.topbar-in .gs-wrap input:focus{border-color:var(--shell-search-line);background:var(--shell-search-bg);outline:2px solid var(--shell-bar-ink);outline-offset:2px}
.topbar-in .gs-results{position:absolute;top:calc(100% + 6px);left:0;z-index:120;width:340px;max-width:92vw;max-height:420px;overflow:auto;padding:6px;border:1px solid var(--shell-menu-line);border-radius:10px;background:var(--shell-menu-bg);color:var(--shell-menu-ink);box-shadow:0 8px 24px rgba(0,0,0,.25)}
/* the list is light, so the pages' usual ring colour is back */
.topbar-in .gs-results :focus-visible{outline-color:var(--shell-link)}

/* the phone menu button; the app decides when it shows */
.topbar-in .nav-btn{flex:none;flex-direction:column;justify-content:center;gap:4px;width:36px;height:36px;margin:0;padding:8px;border:1px solid var(--shell-edge);border-radius:8px;background:var(--shell-fill);cursor:pointer}
.topbar-in .nav-btn span{display:block;width:100%;height:2px;border-radius:2px;background:var(--shell-bar-ink)}

/* ---------- the tab row ---------- */
.tabrow{display:flex;align-items:center;flex-wrap:wrap;gap:0 14px;max-width:none;margin:0;padding:0 10px;border:0;background:var(--shell-tabrow);color:var(--shell-bar-ink)}
.tabrow .tabs{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:2px;min-width:0;margin:0;padding:0;border:0;background:none}
.tabrow .tab,.tabrow [role="tab"]{margin:0;padding:10px 16px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:var(--shell-bar-dim);font-family:inherit;font-size:13px;font-weight:600;line-height:1.45;white-space:nowrap;cursor:pointer}
.tabrow .tab:hover,.tabrow [role="tab"]:hover{color:var(--shell-bar-ink)}
.tabrow .tab.active,.tabrow [role="tab"][aria-selected="true"]{border-bottom-color:var(--shell-bar-ink);background:var(--shell-fill);color:var(--shell-bar-ink)}
.tabrow .count{margin-left:6px;padding:1px 7px;border-radius:9px;background:rgba(255,255,255,.2);font-size:11px}
.tabrow .count:empty{display:none}
.tabrow .count.warn{background:var(--shell-flag);color:var(--shell-flag-ink)}
/* what the tabs are showing (a meeting, a month), at the right-hand end */
.tabrow .scope{display:flex;align-items:center;gap:8px;margin-left:auto;padding:5px 0}

/* ---------- the strip under the bar ---------- */
.subbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;max-width:none;margin:0;padding:8px 18px;border:0;border-bottom:1px solid var(--shell-sub-line);background:var(--shell-sub-bg);color:var(--shell-sub-ink)}

/* ---------- the footer: app name · Send feedback · the other apps ---------- */
.site-foot{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 8px;max-width:none;margin:0;padding:16px 18px;border:0;color:var(--shell-foot-ink);font-size:12.5px;line-height:1.45;text-align:left}
/* The app links sit on their own centred line under the name and the feedback link. */
.site-foot .foot-apps{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 8px;flex-basis:100%;margin-top:8px}
.site-foot .foot-dot{opacity:.5}
.site-foot a{padding:2px 0;border-radius:3px;color:var(--shell-link);font-weight:600;text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.site-foot a:focus-visible{outline:2px solid var(--shell-link);outline-offset:2px}

/* ---------- a phone ---------- */
@media (max-width:700px){
  .topbar-in{gap:8px;padding:8px 12px}
  .topbar-in .sub,.topbar-in .user-chip{display:none}
  .topbar-in .gs-wrap{flex:1 1 140px}
  /* one line of tabs that slides sideways, with the scope on a line of its own */
  .tabrow .tabs{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tabrow .tab,.tabrow [role="tab"]{padding:9px 12px}
  .tabrow .scope{flex-basis:100%;margin-left:0}
  .subbar{gap:8px;padding:8px 12px}
  .site-foot{gap:6px 8px;padding:14px 12px}
  .site-foot a{padding:4px 0}
}

/* On paper the links lead nowhere, so the footer is left off. Each app hides
   its own header for printing. */
@media print{
  .site-foot{display:none}
}