/* ─────────────────────────────────────────────────────────────────────────────
   brand.css — ONE design for the whole dashboard face.

   Every page of the dashboard links this file FIRST and then adds only what is
   peculiar to itself. If a colour, a size or a face is decided here, no page
   redefines it: that is the entire point of the file. Before it existed the
   company map ran on a grey ground at 15px with #1B5AA6 as its primary, while
   the five desks ran on white at 14px with #12386B — the same product wearing
   two uniforms, which is exactly what a person notices first.

   Meaning is carried by colour, never decoration:
        blue   = the company, and anything you can act on
        amber  = someone is waiting on a person
        green  = done, or running by itself
        red    = blocked or refused
   ───────────────────────────────────────────────────────────────────────────── */

:root{
  /* ground & ink */
  --bg:#ffffff; --wash:#fafaf8; --ink:#1d1f21; --mut:#6f757c; --faint:#a6abb1;
  --line:#ececea; --line2:#dcdcd8;

  /* the company's blue — the Focus screens have used these two for years */
  --brand:#12386b; --brand-2:#1b5aa6; --brand-wash:#eef3fb; --brand-line:#cfe0f6;

  /* meaning */
  --amber:#9a5b00; --amber-dot:#dd9f06; --amber-bg:#fff8ea; --amber-line:#f1e2c0;
  --green:#177245; --green-bg:#edf6f0; --green-line:#cfe6d9;
  --red:#a33b2e;   --red-bg:#fbeae8;   --red-line:#efc4bf;
  --calc:#1a5e8a;

  /* type: Archivo says it, Source Serif tells the story, Plex Mono counts */
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
}

/* ── the bar every dashboard page opens with ─────────────────────────────────
   Rendered by brand.js into <div id="appbar"></div> so the markup, too, has one
   source. It is the product-level navigation: before it, a person standing at
   the sales desk could reach purchase only by going back to the map first. */
.appbar{flex:none;display:flex;align-items:center;gap:0;height:44px;padding:0 20px;
        background:var(--bg);border-bottom:1px solid var(--line);
        font-family:var(--sans);position:sticky;top:0;z-index:30}
.appbar .wordmark{font-size:14.5px;font-weight:800;letter-spacing:-.015em;color:var(--ink);
                  text-decoration:none;padding-right:16px;margin-right:4px;
                  border-right:1px solid var(--line);line-height:1}
.appbar .wordmark:hover{color:var(--brand)}
.appbar .depts{display:flex;align-items:stretch;height:100%;overflow-x:auto;
               scrollbar-width:none;margin-left:12px}
.appbar .depts::-webkit-scrollbar{display:none}
.appbar .depts a{display:flex;align-items:center;padding:0 11px;font-size:13px;color:var(--mut);
                 text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;
                 margin-bottom:-1px}
.appbar .depts a:hover{color:var(--ink)}
.appbar .depts a.on{color:var(--ink);font-weight:600;border-bottom-color:var(--brand)}
.appbar .depts a .n{margin-left:6px;font-family:var(--mono);font-size:10.5px;font-weight:600;
                    background:var(--amber-bg);border:1px solid var(--amber-line);
                    color:var(--amber);border-radius:999px;padding:0 5px}
.appbar .abright{margin-left:auto;display:flex;align-items:center;gap:14px;padding-left:16px;
                 font-size:12.5px;color:var(--mut);white-space:nowrap}
.appbar .abright a{color:var(--brand);text-decoration:none}
.appbar .abright a:hover{text-decoration:underline;text-underline-offset:3px}
.appbar .who{color:var(--faint)}
.appbar .who b{color:var(--mut);font-weight:600}

/* the mailbox, stated on every page rather than hidden in a settings menu:
   a company whose mail stopped being read must not look like a quiet day */
.mailchip{display:inline-flex;align-items:center;gap:6px;text-decoration:none;
          border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:12px}
.mailchip .dot{width:6px;height:6px;border-radius:50%;background:var(--faint);flex:none}
.mailchip.ok{border-color:var(--green-line);background:var(--green-bg);color:var(--green)}
.mailchip.ok .dot{background:var(--green)}
.mailchip.warn{border-color:var(--amber-line);background:var(--amber-bg);color:var(--amber)}
.mailchip.warn .dot{background:var(--amber-dot)}
.mailchip.bad{border-color:var(--red-line);background:var(--red-bg);color:var(--red)}
.mailchip.bad .dot{background:var(--red)}
.mailchip:hover{border-color:var(--brand-2)}

@media (max-width:860px){
  .appbar{padding:0 12px}
  .appbar .abright .who,.appbar .abright .dbl{display:none}
}

/* ── things every page draws the same way ────────────────────────────────── */
button,.btn{font-family:var(--sans);font-size:13px;font-weight:600;border:0;border-radius:7px;
            background:var(--brand);color:#fff;padding:8px 16px;cursor:pointer}
button:hover,.btn:hover{background:var(--brand-2)}
button:disabled{opacity:.45;cursor:not-allowed}
button.ghost,.btn.ghost{background:transparent;color:var(--mut);border:1px solid var(--line2)}
button.ghost:hover,.btn.ghost:hover{background:var(--wash);color:var(--ink)}
:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}

.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;
      border:1px solid var(--line);background:var(--wash);color:var(--mut)}
.pill.ok{background:var(--green-bg);border-color:var(--green-line);color:var(--green)}
.pill.warn{background:var(--amber-bg);border-color:var(--amber-line);color:var(--amber)}
.pill.bad{background:var(--red-bg);border-color:var(--red-line);color:var(--red)}

.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.narr{font-family:var(--serif)}