/* ===========================================================================
   site.css — the SHARED front-of-house stylesheet.

   This is the public, unauthenticated face of Calibr Insight: the homepage,
   the login page, and the Free Tools pages. It is the THIRD and last visual
   system in this project, and the three must not be mixed:

     admin/*    Bootstrap 5 + Inter + Remix Icons        (css/style.css)
     insight/*  Broadsheet, cyan #0088b0 / magenta       (assets/css/insight.css)
                #d6006c, Source Serif 4 -- per
                docs/design/assets/design_handoff_calibr_insight/
     PUBLIC     brand-guidelines.md -- Deep Signal navy  (THIS FILE)
                #003354 / Spark orange #F26101,
                Montserrat + Lato + Hibur Mono

   So this file is the first execution anywhere of brand-guidelines.md's own
   system. That is deliberate and scoped: it applies to pages a client or a
   stranger sees, and it changes NOTHING under admin/ or insight/, where the
   scope question is still open (CLAUDE.md, "Pending rename to Calibr Insight").

   ---------------------------------------------------------------------------
   USABLE FROM /tools, WHICH IS A DIFFERENT DOCUMENT ROOT.

   The Apache vhost mounts the Free Tools repo inside this same hostname:

       Alias /tools /srv/www/tools-dev/public      (dev)
       Alias /tools /srv/www/tools/public          (live)

   Same origin, different tree. So a Free Tools page cannot require() this
   project's bootstrap.php and cannot call asset_url() -- but it CAN link this
   file by absolute path, and should:

       <link rel="stylesheet" href="/assets/css/site.css">

   Nothing needs copying, symlinking or a second Alias. The only rule is that
   tools pages use an absolute /assets/... path, never a relative one.

   Pages inside THIS tree should go through asset_url() instead, so the link
   carries a filemtime cache-buster.

   ---------------------------------------------------------------------------
   WHAT BELONGS HERE vs site-home.css.

   Here: tokens, base typography, buttons, links, the nav bar, the page shell,
   and the two entrance animations any page might want. Anything a second page
   could reuse.

   There: the homepage hero grid and the floating dashboard scene. Those are
   one page's furniture and would be dead weight on a tools page.
   =========================================================================== */

/* --------------------------------------------------------------- tokens --- */
/*
 * Names are brand-guidelines.md's own, not generic roles, because the brand
 * doc is the thing that will be argued with later -- "--spark" can be checked
 * against it; "--accent" cannot.
 */
:root {
  --deep-signal: #003354;   /* primary navy: text, mark, outline buttons     */
  --clear-sky:   #91BED4;   /* supporting blue: secondary series, forecasts  */
  --spark:       #F26101;   /* accent orange: CTAs, eyebrow, primary series  */
  --spark-dark:  #d85601;   /* --spark hover only                            */
  --mist:        #D9E8F5;   /* hairlines, icon wells, chart gridlines        */
  --canvas:      #FFFFFF;   /* page ground                                   */
  --ink-muted:   #4a5a66;   /* secondary copy                                */

  /* NEVER IN BODY TEXT. Operator instruction, 2026-08-17, standing for all
   * frontend work: --mono is for the wordmark and for uppercase display labels
   * (kickers, eyebrows). It does not go in a sentence. The homepage originally
   * set the word "Calibr" in mono mid-paragraph in its hero copy and again on
   * the login panel; both are now plain body type.
   *
   * Hibur Mono is the brand's mono and IS NOT IN THIS REPO -- no font file
   * exists anywhere under /srv/www (checked). css/style.css has asked for it
   * by name since the admin build and has been silently falling back to the
   * system monospace all along.
   *
   * It stays FIRST in the stack so that dropping the licensed woff2 into
   * assets/fonts/ plus one @font-face rule is the whole job, with no CSS to
   * hunt down. IBM Plex Mono is the deliberate stand-in until then -- loaded
   * from Google Fonts in site-header.php, so the fallback is a chosen face
   * rather than whatever the OS happens to serve. */
  --mono: 'Hibur Mono', 'IBM Plex Mono', ui-monospace, monospace;
}

/* ----------------------------------------------------------------- base --- */
body {
  margin: 0;
  background: var(--canvas);
  color: var(--deep-signal);
  font-family: 'Lato', system-ui, sans-serif;
  text-wrap: pretty;
}

a { color: var(--spark); text-decoration: none; }
a:hover { color: var(--spark-dark); }

/* Montserrat, uppercase, tracked out -- the brand's display treatment. Used
 * for headings and card titles. NOT for body copy, which is Lato. */
.title {
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.mono { font-family: var(--mono); }

/* The wordmark as the nav sets it: "Calibr" in mono, "Insight" in Montserrat
 * 700. Kept here rather than in the header partial so the login page and a
 * tools page set it identically. */
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-word { font-size: 21px; letter-spacing: -0.01em; }
.brand-word .brand-calibr { font-family: var(--mono); color: var(--deep-signal); }
.brand-word .brand-insight {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--deep-signal);
}

/* Every public page is a full-height column: nav, then content that grows. */
.site-shell { min-height: 100vh; display: flex; flex-direction: column; }

/* ------------------------------------------------------------------ nav --- */
.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px clamp(20px, 5vw, 64px);
  border-bottom: 1px solid var(--mist);
  animation: navIn 0.6s ease-out both;
}
.site-nav__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}

.nav-link {
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 13px;
  color: var(--deep-signal);
}
.nav-link:hover { color: var(--spark); }

/* -------------------------------------------------------------- buttons --- */
/*
 * .btn is the shape, .btn-spark / .btn-outline the two treatments. Both are
 * sized so a <button> and an <a class="btn"> land on the same box -- the
 * homepage uses buttons, the nav uses a link, and they sit side by side.
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn-spark {
  background: var(--spark);
  color: #fff;
  border: none;
  padding: 13px 22px;
}
.btn-spark:hover { background: var(--spark-dark); color: #fff; }

/* 2px border, so 11/20 padding to match .btn-spark's outer box exactly. */
.btn-outline {
  background: transparent;
  color: var(--deep-signal);
  border: 2px solid var(--deep-signal);
  padding: 11px 20px;
}
.btn-outline:hover { background: var(--deep-signal); color: #fff; }

.btn-block { width: 100%; }

/* ----------------------------------------------------------------- form --- */
/*
 * Form furniture for the login page and any tools page that takes input.
 * Not in the homepage mockup -- built from the same tokens so the two pages
 * read as one site.
 */
.field { display: block; margin-bottom: 18px; }
.field__label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 12px;
  color: var(--ink-muted);
  margin-bottom: 7px;
}
.field__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Lato', system-ui, sans-serif;
  font-size: 16px;
  color: var(--deep-signal);
  background: var(--canvas);
  border: 1px solid var(--mist);
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color 0.2s ease;
}
.field__input:focus { border-color: var(--deep-signal); outline: none; }
.field__input:focus-visible { outline: 2px solid var(--spark); outline-offset: 1px; }

/*
 * A single panel centred in what is left of the shell below the nav. The
 * layout for a page that is one job and nothing else -- login today, and any
 * Free Tools page that is one form and a result.
 */
.page-centre {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 6vw, 72px) clamp(20px, 5vw, 64px);
}

/* A card for a single-purpose page (login, a tool's input panel). Same shadow
 * recipe as the homepage's dashboard cards, at a smaller radius. */
.panel {
  background: var(--canvas);
  border: 1px solid var(--mist);
  border-radius: 14px;
  box-shadow: 0 24px 60px -22px rgba(0, 51, 84, 0.22),
              0 4px 14px -6px rgba(0, 51, 84, 0.10);
  padding: 34px clamp(22px, 4vw, 38px);
}
/* Form-width, so the fields do not stretch to an unreadable line length. */
.panel--narrow { width: 100%; max-width: 420px; }

.panel__title {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  color: var(--deep-signal);
  margin: 0 0 8px;
}
.panel__sub {
  font-size: 16px;
  line-height: 24px;
  color: var(--ink-muted);
  margin: 0 0 26px;
}

.notice {
  border-left: 3px solid var(--spark);
  background: #FDF3EC;
  color: var(--deep-signal);
  font-size: 15px;
  line-height: 22px;
  padding: 13px 16px;
  border-radius: 0 8px 8px 0;
  margin: 0 0 24px;
}

/* ------------------------------------------------------------ a11y base --- */
:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }

/* ----------------------------------------------------------- animations --- */
/* Shared because any public page's first screen may want them. The scene
 * animations live in site-home.css. */
@keyframes navIn  { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/*
 * One reduced-motion block per stylesheet, listing that sheet's own animated
 * selectors. Split this way so a page including only site.css still gets a
 * complete rule -- a single combined block in site-home.css would leave the
 * nav animating for someone who asked it not to.
 */
@media (prefers-reduced-motion: reduce) {
  .site-nav {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}