/*
  Cockpit brand skin - "cyan block".

  The look from the brand guide applied to the app: white furniture, one big
  flat colour block for the header, black type, and the second brand colour
  used as a highlighter on status.

  Loaded after each board's own <style>, so it overrides the chrome without
  twelve separate edits and can be removed in one line if it is not wanted.

  Why black type and not white: white fails WCAG AA on every brand colour
  (cyan 2.3:1, pink 2.7:1, orange 1.6:1). Black passes on all of them
  (cyan 9.0:1, pink 7.7:1, orange 13.0:1), which is also how the guide sets
  its own posters.
*/

:root {
  /* Warm paper for the interior, white for the cards that sit on it. A flat
     white canvas with white cards gives nothing to read the cards against;
     the paper tone separates them and takes the chill off. */
  --bg: #f7f5f0;
  --panel: #ffffff;
  --fg: #000000;
  --line: #000000;
  --muted: #5a5a5a;
}

/* the content area, between the block and the foot */
.pad { background: #f7f5f0; }
.main { background: #f7f5f0; }

/* ---- sidebar: white, black rule, colour block marks the active board ---- */
aside {
  background: #ffffff;
  color: #000000;
  border-right: 1px solid #000000;
}
.brandrow b { color: #000000; }
/* the mark artwork is white, so it disappeared on the white sidebar */
.brandrow .mark { filter: invert(1); }
nav { padding: 10px 0; gap: 0; }
nav a {
  color: #000000;
  border-radius: 0;
  padding: 11px 16px;
  font-weight: 600;
}
nav a:hover { background: #f7f5f0; color: #000000; }
nav a.on {
  background: var(--blue);
  color: #000000;
  font-weight: 700;
}
aside .foot { color: #5a5a5a; }

/* ---- top bar: white with a hard rule under it ---- */
header.bar {
  background: #ffffff;
  color: #000000;
  border-bottom: 1px solid #000000;
}
header.bar .lbl { color: #000000; font-weight: 600; }
header.bar .lbl b { color: #000000; }
.who span { color: #000000; }
.who button, .who a { color: #000000; }
.who button:hover, .who a:hover { background: #f7f5f0; }
.who select {
  background: #ffffff;
  color: #000000;
  border: 1px solid #000000;
  border-radius: 0;
}

/* ---- the block: brand colour, black type ---- */
.hero { background: var(--blue); }
.hero .eyebrow { color: #000000; }
.hero h2 { color: #000000; }
.hero p { color: #000000; }
.hero .star { opacity: 0.22; }

/* ---- cards: hard black outline, square corners ---- */
.card {
  border: 1px solid #000000;
  border-radius: 0;
  background: #ffffff;
}
.card h3 { color: #000000; }
.card .link { color: #000000; text-decoration: underline; }

/* ---- controls ---- */
.btn {
  background: #000000;
  color: #ffffff;
  border-radius: 0;
  font-weight: 700;
}
.btn:hover { background: #333333; }
.btn.ghost {
  background: #ffffff;
  color: #000000;
  box-shadow: inset 0 0 0 1px #000000;
}
.btn.ghost:hover { background: #f7f5f0; }
.btn.danger { color: #000000; box-shadow: inset 0 0 0 1px #000000; border-radius: 0; }
input, select, textarea { border-radius: 0; border-color: #000000; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue); outline-offset: 0; }

/* ---- pink as the highlighter, exactly as the guide uses it ---- */
.pill, .chip {
  background: var(--pink, #ff66a9);
  color: #000000;
  border-radius: 0;
}
.metric { border: 1px solid #000000; border-radius: 0; background: #ffffff; }
.metric .l { color: #000000; }
.holding { border: 1px dashed #000000; border-radius: 0; background: #ffffff; color: #000000; }
.leadcard, .krrow, .col, .kcard, .pickrow, .sw {
  border-radius: 0;
}
.col { background: #efece5; border: 1px solid #000000; }
.kcard { border: 1px solid #000000; border-left-width: 5px; }
.owner, .leadav { border-radius: 0; color: #000000; background: var(--blue); }
.mpick button { border-radius: 0; border: 1px solid #000000; color: #000000; }
.mpick button[aria-current="true"] { background: var(--blue); color: #000000; }
.tabs button { border-radius: 0; color: #000000; }
.tabs button[aria-selected="true"] { background: var(--blue); color: #000000; box-shadow: none; }
table.grid th { color: #000000; border-bottom: 1px solid #000000; }
.preview-banner { border-bottom: 1px solid #000000; }

/* Keep the account name, client picker and sign-out control usable on phones. */
@media (max-width: 600px) {
  .main { min-width: 0; }
  .pad, .metrics { grid-template-columns: minmax(0, 1fr); }
  .card { min-width: 0; max-width: 100%; }
  .mx-tools { min-width: 0; max-width: 100%; }
  .mx-tools select { min-width: 0; max-width: 100%; }
  header.bar {
    height: auto;
    min-height: 66px;
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 10px;
  }
  header.bar .lbl { max-width: 100%; }
  .who {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    gap: 8px;
  }
  .who span { max-width: 100%; overflow-wrap: anywhere; }
  .who select { min-width: 0; max-width: 100%; }
  .envbar { padding: 8px 12px; gap: 6px; }
}