/* Closeout · application skin.
 *
 * Layered on TOP of the existing .pl-* utility classes that were built
 * during the punchlist era. Remaps colors / type to the Closeout palette
 * (teal + paper) so we don't have to touch hundreds of inline rules; adds
 * brand-specific component classes (.co-wordmark, .co-tile, .co-pill,
 * .co-section-header) and a recolored module bar (.pl-bar / .pl-section-hdr).
 *
 * Import order: tokens.css → skin.css → page-specific <style>.
 */

/* ── Page chrome ───────────────────────────────────── */
body { background: var(--co-paper); color: var(--co-ink); font-family: var(--co-font-ui); }
.pl-h1 { font-family: var(--co-font-display); font-weight: 400; letter-spacing: -0.01em; }

/* ── Old palette → new palette (oxblood lives only in shop-ready now) ── */
:root {
  /* These are referenced inline (e.g. var(--pl-ox)) across the
     existing view template-literals; rebinding them here applies
     teal everywhere without rewriting hundreds of small refs. */
  --pl-ox:     var(--co-teal);
  --pl-paper:  var(--co-paper);
  --pl-ink:    var(--co-ink);
  --pl-line:   var(--co-rule);
}

/* Cards and rules pick up the new card surface */
.pl-card { background: var(--co-card); border-color: var(--co-rule); border-radius: var(--co-r-md); box-shadow: var(--co-shadow-sm); }

/* ── Module bar — teal tile + bracket wordmark ───────
 *
 * Closeout's banner used to be a rounded card inside the .pl-page
 * frame (1280px max-width, 32px side padding). That made the module
 * feel visually inset compared to bidbench / shop-pulse / field-command,
 * whose banners span the full viewport width. The negative margins
 * below break the .pl-bar out of pl-page's padding so it reads as a
 * proper full-width module strip; the page content below still sits
 * inside the 1280px frame.
 */
.pl-bar {
  background: var(--co-teal);
  color: var(--co-paper);
  padding: 16px max(32px, calc(50vw - 608px));
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: -24px calc(50% - 50vw) 18px;
  box-shadow: var(--co-shadow-md);
}
/* Anchor variant of the mark — same look, navigates back to /closeout
 * from any closeout page. Reset link styles so the bracket pseudos
 * still render correctly. */
a.pl-bar__mark { text-decoration: none; cursor: pointer; }
a.pl-bar__mark:hover { background: var(--co-paper); filter: brightness(1.05); }
.pl-bar__mark {
  /* Repurpose the existing "PL" square into the [CO] tile mark. */
  width: 44px; height: 44px;
  border-radius: var(--co-r-tile);
  background: var(--co-paper);
  color: var(--co-teal);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--co-font-mark); font-weight: 800;
  font-size: 14px; letter-spacing: -0.02em;
}
.pl-bar__mark::before { content: '['; font-size: 1.32em; line-height: 0.9; margin-right: 0.06em; }
.pl-bar__mark::after  { content: ']'; font-size: 1.32em; line-height: 0.9; margin-left:  0.06em; }
.pl-bar__title {
  /* Wraps the brand title text — render it as [WORD] in Work Sans 800. */
  font-family: var(--co-font-mark); font-weight: 800;
  font-size: 16px; letter-spacing: -0.01em;
  display: inline-flex; align-items: baseline;
}
.pl-bar__title::before { content: '['; font-size: 1.32em; line-height: 0.9; margin-right: 0.12em; }
.pl-bar__title::after  { content: ']'; font-size: 1.32em; line-height: 0.9; margin-left:  0.12em; }
.pl-bar__sub { font-size: 12px; opacity: 0.78; font-family: var(--co-font-ui); }

/* ── Section header — bracket eyebrow ──────────────── */
.pl-section-hdr { background: var(--co-card-2); border-bottom: 1px solid var(--co-rule); }
.pl-section-hdr h2 {
  font-family: var(--co-font-mark); font-weight: 800;
  font-size: 13px; letter-spacing: 0.02em; color: var(--co-teal);
  text-transform: uppercase;
  display: inline-flex; align-items: baseline;
}
.pl-section-hdr h2::before { content: '['; font-size: 1.32em; line-height: 0.9; margin-right: 0.2em; color: var(--co-teal); }
.pl-section-hdr h2::after  { content: ']'; font-size: 1.32em; line-height: 0.9; margin-left:  0.2em; color: var(--co-teal); }

/* ── Status pills (the brand extension) ────────────── */
.pl-status, .pl-pill, .due-pill {
  /* Drop the colored background and use bracketed text. */
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--co-font-mark);
  font-weight: 800;
  line-height: 1;
  font-size: 10px;
}
.pl-status::before, .pl-pill::before, .due-pill::before { content: '['; font-size: 1.32em; line-height: 0.9; margin-right: 0.3em; }
.pl-status::after,  .pl-pill::after,  .due-pill::after  { content: ']'; font-size: 1.32em; line-height: 0.9; margin-left:  0.3em; }
.pl-status--open        { color: var(--co-open); }
.pl-status--in_progress { color: var(--co-open); }
.pl-status--complete    { color: var(--co-teal); }
.pl-pill--open          { color: var(--co-open); }
.pl-pill--done          { color: var(--co-teal); }
.pl-pill--parts         { color: var(--co-blocking); }
.pl-pill--sr            { color: var(--co-info); }
.pl-pill--linked        { color: var(--co-teal); }   /* CLOS-100 cross-workspace */
.due-green              { color: var(--co-teal); }
.due-yellow             { color: var(--co-open); }
.due-red                { color: var(--co-blocking); }

/* Item number stays teal */
.pl-item__num { color: var(--co-teal); }

/* ── Buttons recolored to teal ─────────────────────── */
.pl-btn, .pl-mini, .bb-btn, .pl-select-toggle { font-family: var(--co-font-mark); font-weight: 600; }
.pl-btn--primary, .pl-btn--accent {
  background: var(--co-teal); color: var(--co-paper); border-color: var(--co-teal);
}
.pl-btn--primary:hover, .pl-btn--accent:hover { background: var(--co-teal-deep); border-color: var(--co-teal-deep); }
.pl-btn--ghost { color: var(--co-teal); }
.pl-mini--danger { color: var(--co-blocking); border-color: rgba(161,52,52,0.30); }

/* CLOS-213 (site-wide contrast fix) — core's layout ships a global anchor
   color rule (specificity ".x a") that wins on source order over the class
   rules above, so every <a class="pl-btn pl-btn--primary"> rendered with
   dark ink on the dark teal fill (unreadable). detail.ejs had its own
   local override for the same problem on .cp-btn--primary (CLOS-211); this
   promotes the fix to skin.css so it covers every page that uses the
   global pl-btn / cp-btn classes, including settings, getting-started,
   templates, marketplace, link-accept, workspace-links, etc. */
a.pl-btn--primary, a.pl-btn--primary:link, a.pl-btn--primary:visited,
a.pl-btn--primary:hover, a.pl-btn--primary:focus, a.pl-btn--primary:active,
a.pl-btn--accent, a.pl-btn--accent:link, a.pl-btn--accent:visited,
a.pl-btn--accent:hover, a.pl-btn--accent:focus, a.pl-btn--accent:active,
a.cp-btn--primary, a.cp-btn--primary:link, a.cp-btn--primary:visited,
a.cp-btn--primary:hover, a.cp-btn--primary:focus, a.cp-btn--primary:active {
  color: var(--co-paper) !important;
}

/* And the matching button-element rule — some pages reset button color
   from core's normalize, leaving dark ink on the dark fill the same way.
   Belt-and-suspenders so neither tag form regresses. */
button.pl-btn--primary, button.pl-btn--accent,
button.cp-btn--primary, input[type="submit"].pl-btn--primary,
input[type="submit"].pl-btn--accent { color: var(--co-paper) !important; }

/* CLOS-116 — Core ships .btn / .btn-primary with the homewood-internal
   blue palette (--color-blue: #2E6DA4). Closeout's core-rendered pages
   (notifications wizard, API keys, password forms, admin) pick those
   classes up and render blue submits that clash with the teal brand.
   Override them here so any core page rendered inside Closeout uses
   the teal palette without core needing to know about it. */
.btn-primary,
button.btn-primary,
input[type=submit].btn-primary {
  background: var(--co-teal) !important;
  color: var(--co-paper) !important;
  border-color: var(--co-teal) !important;
}
.btn-primary:hover,
button.btn-primary:hover,
input[type=submit].btn-primary:hover {
  background: var(--co-teal-deep) !important;
  border-color: var(--co-teal-deep) !important;
}
.btn-primary:focus-visible,
button.btn-primary:focus-visible {
  outline: 2px solid var(--co-teal-deep);
  outline-offset: 2px;
}
.btn-primary:disabled,
button.btn-primary:disabled {
  opacity: 0.55;
}
/* Core uses --color-blue for plain links in the chrome (a tags, a:hover
   inside body content). Repaint those to teal too. */
.co-app a,
.co-app .form-hint a,
.co-app .add-card__type,
.co-app .add-card__cta { color: var(--co-teal); }

/* CLOS-119 — Templates / Notifications / API-keys pages were rendering
   with a cool blue-grey border/background that read as "salmon/reddish"
   against the rest of the Closeout app's warm cream palette. Repaint
   the core's gray tokens to warm cream so cards in those pages match.
   Scoped to :root so they don't bleed into homewood-internal. */
:root {
  --color-gray-bg:     #FAF6EC;
  --color-gray-border: #d9d2c4;
  --color-gray-soft:   #F5F0E5;
}

/* ── Labels ───────────────────────────────────────── */
.pl-label, .pl-eyebrow {
  font-family: var(--co-font-mark);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--co-teal);
}

/* ── Stat cards (dashboard) ────────────────────────── */
.pl-stat { background: var(--co-card); border: 1px solid var(--co-rule); border-radius: var(--co-r-md); }
.pl-stat__label { color: var(--co-teal); font-family: var(--co-font-mark); font-weight: 800; letter-spacing: 0.1em; }
.pl-stat--alert .pl-stat__value { color: var(--co-blocking); }
.pl-stat--ok    .pl-stat__value { color: var(--co-teal); }

/* ── Activity feed ─────────────────────────────────── */
.pl-feed__who { color: var(--co-teal); }
.pl-feed__proj { color: var(--co-info); }

/* ── Module-bar tabs (legacy) — kept neutral on dark teal ── */
.bb-modulebar__tab { color: var(--co-paper); }

/* ── Reusable bracket helpers exposed for templates ── */
.co-bracket { font-family: var(--co-font-mark); font-weight: 800; font-size: 1.32em; line-height: 0.9; }