/* ============================================================
   Pipezoom - css/base.css, the design tokens every stylesheet reads.
   The tokens, the 4 themes, the reset, the page frame and the controls every page uses: buttons,
   forms, alerts, headings, the footer and the skip link. The frame around the page is css/shell.css,
   in the same set (includes/manifest.php). COLOR RULE: a literal color value appears only in :root,
   and every rule below references a token. Built mobile first: the rail is a drawer under 900px and
   pins open from 900px.
   Notes: docs/notes/app.pipezoom.com/css/base.css.md
   ============================================================ */

:root{
  /* Brand source
     The brand blue, brand navy and brand gray tokens below are the
     source colors. Every other value here is derived from these 3. */
  --brand-blue:#0072ce;
  --brand-navy:#003b71;
  --brand-grey:#2f3a45;

  /* Background tokens
     A 5-step ramp on the brand gray hue. A block that comes forward gets
     a lighter background, and with no drop shadow anywhere the step in
     lightness separates 1 block from the next. */
  --surface-sunken:#0f141a;
  --surface-page:#151b22;
  --surface-raised:#1c232b;
  --surface-high:#252e39;
  --surface-hover:#2d3743;

  /* Lines */
  --line:#2f3a45;
  --line-strong:#3f4c5a;

  /* Type
     3 weights of ink. Hierarchy comes from these steps, size and
     weight, and no heading gets its own hue. */
  --ink:#e9eef3;
  --ink-soft:#a9b5c2;
  --ink-faint:#78858f;
  --ink-inverse:#ffffff;

  /* Ink on a filled accent. Because a second hue on a blue fill reads as
     a second meaning, 2 softer steps of the same white carry the
     secondary line and the hairline rule inside a selected card. */
  --on-accent-soft:#ffffffc7;
  --on-accent-line:#ffffff38;

  /* Accent
     Because the brand blue at full strength is too dark to read as type
     on a dark background, text and icons use a lightened step of the
     same hue. The true brand value stays on filled buttons under white
     text. */
  --accent:#3e9be8;
  --accent-strong:#0072ce;
  --accent-hover:#1183e2;
  --accent-wash:#1a2a3a;
  --accent-edge:#2c567c;
  --accent-ring:#3e9be866;
  --accent-ring-soft:#3e9be833;

  /* Gold
     1 domain only: money (payouts, incentive tiers, the worth of a
     deal). Because money is the thing a rep scans for, and a different
     subject from a button, it gets a second hue. Gold appears nowhere
     else. */
  --gold:#f9b311;
  --gold-ink:#f9b311;
  --gold-wash:#332810;
  --gold-edge:#6d5622;

  /* Danger
     Used only on real failure: errors, destructive actions,
     disqualifiers and unverified data. */
  --good:#1f8a54;
  --good-ink:#1f8a54;
  --good-wash:#12291d;
  --good-edge:#245c3f;

  /* The splash hues
     3 colors the site wears only when Splash of Color is on. They go on
     things that already form a group: the 2 runs, the metrics, and the
     systems a rep signs into.

     2 steps each. The first is the mark (text and glyphs) and keeps the
     same value in every theme. The second is the button, with white
     text on the color; on the dark themes it steps down to keep the
     white legible. */
  --hue-green:#6db890;
  --hue-blue:#67afdd;
  --hue-purple:#8a68d6;
  --hue-green-btn:#519a73;
  --hue-blue-btn:#59a0ce;
  --hue-purple-btn:#7c61b7;
  /* The neutral, for a chip that grades something and lands at the
     bottom of the grade: a step lighter than the 3 hues above it. */
  --hue-grey:#a8b3be;
  --hue-grey-btn:#84909c;

  --danger:#ef5f62;
  --danger-wash:#33212a;
  --danger-edge:#5e3038;
  --danger-ink:#f6ccd0;

  /* Overlays */
  --scrim:#0a0e13b3;
  --topbar-veil:#151b22f2;
  --shadow-overlay:0 16px 44px #00000085, 0 2px 6px #00000059;
  --shadow-drawer:0 0 48px #000000a6;

  /* Shell
     Separate tokens for the sidebar and the top bar let a light page
     keep a dark shell. On the dark themes they match the background
     tokens. */
  --shell-bg:#0f141a;
  --shell-raised:#1c232b;
  --shell-high:#252e39;
  --shell-line:#2f3a45;
  --shell-line-strong:#3f4c5a;
  --shell-ink:#e9eef3;
  --shell-ink-soft:#a9b5c2;
  --shell-ink-faint:#78858f;
  --shell-veil:#151b22f2;
  /* A card on the shell's color. Because a card on the band cannot
     borrow the page's white, it is its own step above the band, and its
     hover is a step above that. */
  --shell-card:#2e3947;
  --shell-card-hover:#3b4757;
  --shell-card-line:#3f4c5a;
  /* Half a step down from the card, for the 4 lines on
     Launchpad. They are a whole row of large cards there, and at the
     card's own brightness the row overpowers the band. */
  --shell-card-mid:#252e39;
  --shell-card-mid-hover:#303a48;
  --shell-card-mid-line:#374350;

  /* Decorative icons
     The glyph on a tile or a section heading. Recessive on the
     low-contrast dark themes; the accent on the light themes, to break
     up a grid of white cards. */
  --ic:#78858f;

  /* Shell metrics */
  /* The rail with the names on it: the brand row holds the 36px logo,
     154px wide, inside this width. */
  --rail-full:244px;
  /* The rail with the names taken off it. Wide enough that an 18px
     mark still has a target around it worth pressing. */
  --rail-icons:64px;
  --sidebar-w:var(--rail-full);
  --topbar-h:56px;
  --radius:10px;
  --radius-sm:7px;
  --radius-pill:999px;
  /* Chart hues
     Because the 6 categorical slots keep a fixed order, a series keeps
     its color whatever else is on the chart. Measured on this background
     for the lightness band, the chroma floor, adjacent CVD separation and
     contrast. The green and amber pair is in the 6-8 band, and the legend
     and the per-mark readout on every chart cover that pair. */
  --c1:#4f92ea;
  --c2:#c07d1e;
  --c3:#2d9d63;
  --c4:#9a68da;
  --c5:#d5506d;
  --c6:#1f92a8;
  /* 2 more, for the wins drawn beside the day's numbers. Each takes the
     hue of the work that produces it: a signature comes from FTAs and a
     referral comes from a call. The dash and the lighter step tell a win
     from its activity line, measured here at 6.73 and 6.61 contrast
     against this background. */
  --c7:#6db890;
  --c8:#67afdd;
}

/* ============================================================
   Light theme, opt in only.
   Dark above is the default. This block applies only once a reader
   turns it on, and the choice is remembered. The light theme serves
   reading in daylight, such as in a parked car at 2pm.

   Only tokens are overridden. No rule anywhere else in the site knows
   there is more than 1 theme.
   ============================================================ */
[data-theme="light"],
[data-theme="white"]{
  --surface-sunken:#e9edf2;
  --surface-page:#f5f7fa;
  --surface-raised:#ffffff;
  --surface-high:#eef1f6;
  --surface-hover:#e2e8ef;

  --line:#d7dde5;
  --line-strong:#b2bcc8;

  --ink:#16202b;
  --ink-soft:#4b5a68;
  --ink-faint:#67747f;
  --ink-inverse:#ffffff;

  /* Because the brand blue reads as type on white, this theme drops the
     lightened step the dark theme needs. */
  --accent:#0063b1;
  --accent-strong:#0072ce;
  --accent-hover:#005ba6;
  --accent-wash:#e7f1fb;
  --accent-edge:#a9cdec;
  --accent-ring:#0072ce66;
  --accent-ring-soft:#0072ce33;

  /* Because the darker text step reads as charcoal on an icon, the icon
     blue is brighter than the link blue. */
  --ic:#0f7ddb;

  /* --gold is the brand gold on every theme, for the logo mark and any
     gold graphic. On a white card #f9b311 measures 1.83:1, too low for
     text, and --gold-ink carries text there. Measured against #ffffff,
     --gold-ink reaches 4.73:1, enough for small bold text and for
     display sizes. */
  --gold:#f9b311;
  --gold-ink:#9a6a00;
  --gold-wash:#fdf1dc;
  --gold-edge:#e3c184;

  --good:#12784a;
  --good-ink:#12784a;
  --good-wash:#e6f4ec;
  --good-edge:#a8d5bd;

  /* With nothing behind it darkening the color, the button on a light
     page wears the mark's own value. */
  --hue-green-btn:#6db890;
  --hue-blue-btn:#67afdd;
  --hue-purple-btn:#8a68d6;
  --hue-grey-btn:#a2aeb9;

  --danger:#bf262c;
  --danger-wash:#fdeded;
  --danger-edge:#efb8b8;
  --danger-ink:#7a1a1e;

  --scrim:#16202ba6;
  --topbar-veil:#f5f7faf2;
  --shadow-overlay:0 16px 44px #16202b26, 0 2px 6px #16202b17;
  --shadow-drawer:0 0 48px #16202b3d;
  /* Same 6 slots, stepped for a light background. */
  --c1:#2873d1;
  --c2:#b45309;
  --c3:#15803d;
  --c4:#7e22ce;
  --c5:#be123c;
  --c6:#0e7a9c;
  /* The same 2, stepped for a light background. Against white the
     values above reach only 2.4. These 2 reach 3.36 and 3.30 and are
     still the lighter step of the hue the solid line beside them wears. */
  --c7:#3f9d6d;
  --c8:#4a94c9;
}

/* White
   Light page, light shell, for a desk and a big screen. The shell
   tokens follow the page here, and that is the only difference from
   Light. */
[data-theme="white"]{
  --shell-bg:#eef1f6;
  --shell-raised:#ffffff;
  --shell-high:#e2e8ef;
  --shell-line:#d7dde5;
  --shell-line-strong:#b2bcc8;
  --shell-ink:#16202b;
  --shell-ink-soft:#4b5a68;
  /* A touch darker than the page's own faint ink: on the shell's
     tinted gray, #67747f lands at 4.23 against it, under the 4.5 that
     inactive nav text needs to stay readable. */
  --shell-ink-faint:#5c6873;
  --shell-veil:#f5f7faf2;
  /* Because the light shell is already pale, a card on it takes the
     page's white, and its edge separates the 2. */
  --shell-card:#ffffff;
  --shell-card-hover:#f2f5fa;
  --shell-card-line:#d7dde5;
  /* Nothing to step down from on a pale shell: white is white. */
  --shell-card-mid:var(--shell-card);
  --shell-card-mid-hover:var(--shell-card-hover);
  --shell-card-mid-line:var(--shell-card-line);
}

/* Light
   Light page, dark shell. The shell gets its own slate: beside a white
   page #0f141a is too dark a block, and the lifted slate keeps less
   contrast with the page. The shell ink is stepped up with it to keep
   the nav as bright as on the dark theme. */
[data-theme="light"]{
  --shell-bg:#243040;
  --shell-raised:#2f3d4f;
  --shell-high:#394859;
  --shell-line:#3a4859;
  --shell-line-strong:#4c5c70;
  /* Near-white on the dark shell. Against it the muted page steps make
     the nav read as disabled. */
  --shell-ink:#f4f7fb;
  --shell-ink-soft:#d4dde7;
  --shell-ink-faint:#b8c4d1;
  --shell-veil:#243040;
  --shell-card:#4e5a72;
  --shell-card-hover:#5d6b85;
  --shell-card-line:#5c6a84;
  --shell-card-mid:#3e4c60;
  --shell-card-mid-hover:#4b5a6f;
  --shell-card-mid-line:#4b596e;
}

/* Black
   The dark palette with a true black page behind it. Because a black
   card on a black page has no edge, the shell and the cards keep their
   gray. */
[data-theme="black"]{
  --surface-page:#000000;
  --surface-sunken:#07090c;
  --topbar-veil:#000000f2;
  --scrim:#000000cc;
  --shell-card:#1f262f;
  --shell-card-hover:#2b333e;
  --shell-card-line:#333c47;
  --shell-card-mid:#181e26;
  --shell-card-mid-hover:#242a34;
  --shell-card-mid-line:#2b333d;
}

/* Splash of Color
   Off by default: the flat scheme of every screenshot of this site.
   Switched on, the 3 hues above reach the few things that already read
   as groups, and the green the site uses for a target met becomes the
   green in that set.

   1 attribute on the root carries it to the admin and the hub alike. */
[data-splash="on"]{
  --good:var(--hue-green-btn);
  --good-ink:var(--hue-green);
}

/* The 4 themes, as pictures
   The theme picker paints each look, including colors the page is not
   wearing. Those colors are defined here, in :root, the only place a
   literal value is allowed, and they repeat the values the theme blocks
   above set. */
:root{
  --sw-dark-page:#151b22;  --sw-dark-shell:#0f141a;
  --sw-light-page:#f5f7fa; --sw-light-shell:#243040;
  --sw-white-page:#f5f7fa; --sw-white-shell:#eef1f6;
  --sw-black-page:#000000; --sw-black-shell:#07090c;
  --sw-accent:#0072ce;
  --sw-edge:#7a8794;
}

/* Reset */
*{margin:0;padding:0;box-sizing:border-box;}
/* The browser's own [hidden]{display:none} is the weakest rule there is.
   Any class that names a display value outranks it, and the element
   renders while the script that hid it reads it as gone: a rep with no
   streak was shown a "0 day streak" pill that way. This 1 rule guards
   every class with a display value. */
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--surface-page);
  color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:15px;
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input,select,textarea{font:inherit;}

/* Because search inputs carry native platform styling that overrides the
   author's background, padding and radius, appearance:none is set here
   and the stylesheet's own values apply. */
input[type="search"]{
  -webkit-appearance:none;
  appearance:none;
  border-radius:0;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration{
  -webkit-appearance:none;
}
svg{display:block;}

/* Focus draws the same visible outline everywhere. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* Layout */
.layout{min-height:100vh;}
.content{display:flex;flex-direction:column;min-height:100vh;}
/* The page's own padding, as tokens. A block that reaches the edges of
   the column cancels exactly this much. */
:root{--page-pad-x:16px;--page-pad-t:20px;}
.page{
  flex:1;
  width:100%;
  max-width:1060px;
  margin:0 auto;
  padding:var(--page-pad-t) var(--page-pad-x) 72px;
}
.page[data-wide="1"]{max-width:none;}

/* On dark, the rail takes the page's own background. Because the band on
   Today and Launchpad is painted from the shell token, that token holds
   its darker step. The top bar is already on the page color through
   --shell-veil. */
:root:not([data-theme]) .sidebar{background:var(--surface-page);}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 15px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);
  background:var(--surface-high);
  color:var(--ink);
  font-size:.91rem;
  font-weight:600;
  transition:background .12s,border-color .12s;
}
.btn:hover{background:var(--surface-hover);text-decoration:none;}

/* The only place the true brand blue appears at full strength. */
.btn-primary{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--ink-inverse);}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
.btn-danger{background:var(--danger-wash);border-color:var(--line-strong);color:var(--ink);}
.btn-danger:hover{background:var(--danger-edge);}
.btn-sm{padding:6px 11px;font-size:.82rem;}
.btn-block{width:100%;margin-top:8px;}

/* Forms */
.form-card{
  max-width:420px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
}
.form-row{margin-bottom:13px;}
.form-label{display:block;font-size:.81rem;color:var(--ink-soft);margin-bottom:5px;}
.form-input{
  width:100%;
  background:var(--surface-page);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink);
  padding:10px 12px;
  font-size:.94rem;
  outline:none;
}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}
.form-hint{font-size:.76rem;color:var(--ink-faint);margin-top:4px;}

/* Alerts */
.alert{
  border-radius:var(--radius-sm);
  padding:11px 14px;
  font-size:.9rem;
  margin-bottom:16px;
  border:1px solid var(--line);
  background:var(--surface-high);
}
.alert-error{border-color:var(--line-strong);background:var(--danger-wash);color:var(--ink);}
.alert-ok{border-color:var(--line-strong);background:var(--accent-wash);color:var(--ink);}

/* Footer */
.site-foot{
  padding:18px;
  text-align:center;
  color:var(--ink-faint);
  font-size:.77rem;
  border-top:1px solid var(--line);
}

/* Page headings
   The steps are far enough apart for a reader scanning mid-scroll to
   tell a section from a card title from body copy without reading them. */
.page-head{margin:6px 0 26px;}
.page-head h1{font-size:1.85rem;line-height:1.2;font-weight:700;letter-spacing:-.2px;}
.page-head .lead{color:var(--ink-soft);margin-top:8px;font-size:.97rem;line-height:1.6;}

/* Because the gap above a section heading is much larger than the gap
   below, the heading reads with the content after it. */
h2{
  font-size:1.32rem;
  font-weight:700;
  letter-spacing:-.3px;
  line-height:1.3;
  margin:52px 0 10px;
  padding-top:4px;
  scroll-margin-top:calc(var(--topbar-h) + 12px);
}
h2:first-of-type{margin-top:28px;}
/* Because these are 1 or 2 sentences in a 1060px column, they have no
   measure cap. */
.sub{color:var(--ink-soft);margin-bottom:18px;font-size:.92rem;line-height:1.6;}

/* Skip link */
.skip-link{
  position:absolute;left:-9999px;top:0;
  background:var(--surface-high);color:var(--ink);
  padding:8px 14px;border-radius:0 0 var(--radius-sm) 0;z-index:100;
}
.skip-link:focus{left:0;}

/* Tablet */
@media (min-width:640px){
  :root{--page-pad-x:24px;--page-pad-t:24px;}
  .page{padding:var(--page-pad-t) var(--page-pad-x) 80px;}
}

/* Desktop */
@media (min-width:900px){
  :root{--page-pad-x:34px;--page-pad-t:30px;}
  .page{padding:var(--page-pad-t) var(--page-pad-x) 88px;}
}

/* Small phones */
@media (max-width:400px){
  .page-head h1{font-size:1.6rem;}
}