/* web/page_shell.css — [PGS1 page-shell-v1]
   Generic chrome for the full-page views. Everything here is .pg-*, owned by
   no single page, so Agents and Workflows can reuse it unchanged.

   Tokens only (kit alias names, the ones index.html and brandkit.css use):
   no raw hex, no one-off radius, no literal font stack.

   Element resets are load-bearing, not tidiness: assets/renderer/renderer.css
   ships BARE h1/h2/h3/p/ul/li selectors into this document (Patterns 18), so
   any heading built here inherits a margin, a colour, and on h2 a
   border-bottom, unless it is reset. */

.pg-nav, .pg-body { font-family: var(--font); }

/* ---- navbar: 64px, 1px bottom border, title left, status + menu right --- */
.pg-nav {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 64px;
  padding: 0 72px 0 var(--space-9);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.pg-nav-title {
  margin: 0; padding: 0; border: 0;           /* renderer.css h1 reset */
  flex: 1 1 auto; min-width: 0;
  color: var(--text);
  font-size: 18px; font-weight: 600; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pg-nav-right { flex: none; display: flex; align-items: center; gap: var(--space-2); }

/* Status pill, kit section 5: 32px, radius 999, 1px border-2,
   8px coloured dot + label. Status is never colour alone — the label is
   always rendered (kit section 19). */
.pg-devpill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 32px; padding: 0 var(--space-3);
  border: 1px solid var(--border-2); border-radius: 999px;
  background: transparent; color: var(--text-dim);
  font: inherit; font-size: 13px; cursor: pointer;
  transition: background-color 120ms ease-out, border-color 120ms ease-out;
}
.pg-devpill:hover { background: var(--surface-2); border-color: var(--border-hover); }
.pg-devpill:disabled { opacity: .45; cursor: not-allowed; }
.pg-dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--text-muted); }
.pg-dot-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-devpill.tone-ok    .pg-dot { background: var(--success); }
.pg-devpill.tone-warn  .pg-dot { background: var(--warning); }
.pg-devpill.tone-busy  .pg-dot { background: var(--primary); }
.pg-devpill.tone-muted .pg-dot { background: var(--text-muted); }

/* ---- ... menu ----------------------------------------------------------- */
.pg-menu { position: relative; }
.pg-iconbtn {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border: 1px solid transparent; border-radius: var(--radius-btn);
  background: transparent; color: var(--text-dim);
  font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
  transition: background-color 120ms ease-out;
}
.pg-iconbtn:hover { background: var(--surface-2); color: var(--text); }
/* Patterns 3: no overflow on this wrapper, or it would clip its own popover. */
.pg-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  min-width: 190px; padding: var(--space-2);
  background: var(--panel);
  border: 1px solid var(--border-2); border-radius: var(--radius-pop);
  box-shadow: var(--shadow-pop);
}
.pg-pop-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 9px var(--space-2);
  border: 0; border-radius: var(--radius-btn);
  background: transparent; color: var(--text);
  font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.pg-pop-item:hover { background: var(--surface-2); }
.pg-pop-item:disabled { opacity: .45; cursor: not-allowed; }

/* ---- page body: info line, toolbar, grid -------------------------------- */
.pg-body {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  padding: var(--space-6) var(--space-9) var(--space-9);
  background: var(--bg); color: var(--text);
}
.pg-info {
  margin: 0 0 var(--space-5); padding: 0; border: 0;   /* renderer.css p reset */
  max-width: 820px;                                    /* kit 4.2 */
  color: var(--text-dim); font-size: 14px; line-height: 1.5;
}

.pg-toolbar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.pg-search {
  flex: 1 1 260px; min-width: 0; max-width: 360px;
  height: 36px; padding: 0 var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border-2); border-radius: var(--radius-input);
  color: var(--text); font: inherit; font-size: 14px;
  transition: border-color 120ms ease-out;
}
.pg-search::placeholder { color: var(--placeholder); }
.pg-search:hover { border-color: var(--border-hover); }
.pg-search:focus-visible { border-color: var(--selected-border); }

.pg-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.pg-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 32px; padding: 0 var(--space-3);
  border: 1px solid var(--border-2); border-radius: 999px;
  background: transparent; color: var(--text-dim);
  font: inherit; font-size: 13px; cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.pg-chip:hover { background: var(--surface-2); }
.pg-chip[aria-pressed="true"] {
  background: var(--selected-fill); border-color: var(--selected-border);
  color: var(--accent-text); font-weight: 600;
}
.pg-chip .c { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pg-chip[aria-pressed="true"] .c { color: inherit; }

/* Segmented toggle, kit section 5: track + 1px border, padding 3, radius 10;
   segments 32px, radius 8, 13/600; active = selected-fill + accent text. */
.pg-seg {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--radius-btn);
}
.pg-seg button {
  height: 32px; padding: 0 var(--space-3);
  border: 0; border-radius: 8px;
  background: transparent; color: var(--text-dim);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.pg-seg button[aria-pressed="true"] { background: var(--selected-fill); color: var(--accent-text); }

.pg-sort {
  height: 36px; padding: 0 var(--space-2);
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--radius-input);
  color: var(--text); font: inherit; font-size: 14px; cursor: pointer;
}
.pg-spacer { flex: 1 1 auto; }
.pg-primary {
  height: 36px; padding: 0 var(--space-4);
  border: 0; border-radius: var(--radius-btn);
  background: var(--primary); color: var(--white);
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer;
  transition: background-color 120ms ease-out;
}
.pg-primary:hover { background: var(--primary-hover); }
.pg-primary:active { background: var(--primary-pressed); }

/* ---- card grid ---------------------------------------------------------- */
.pg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-5);
  /* `align-items: start` used to be here, which sizes every card to its own
     content — a project with a company line and a two-line summary came out
     taller than one without, so a row of cards had ragged bottoms. Stretch
     (the grid default) gives every card in a row the same height. */
  align-items: stretch;
}
.pg-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-card);
  transition: border-color 120ms ease-out, background-color 120ms ease-out;
}
.pg-card:hover { border-color: var(--border-2); background: var(--surface-2); }
/* The whole body is one real button: keyboard, focus ring and hit area for
   free, instead of a div with a click handler. */
.pg-card-main {
  display: flex; flex-direction: column; gap: var(--space-3); min-width: 0;
  /* Absorbs the height the card gains from stretching, so .pg-card-foot
     stays pinned to the bottom edge instead of floating up under the body. */
  flex: 1 1 auto;
  padding: var(--space-5) var(--space-5) var(--space-4);
  border: 0; border-radius: var(--radius-card);
  background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
/* The ⋯ is absolutely positioned at top/right --space-3 and is 32px wide, so
   it occupies the first (12 + 32) = 44px in from the card's right edge. The
   head only clears --space-5 (20px) of card padding, which left 24px of it
   sitting underneath the button — the Draft pill and the ⋯ overlapped, and a
   long title ran under it too. Reserve exactly that difference. */
.pg-card-head {
  display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0;
  padding-right: calc(var(--space-3) + 32px - var(--space-5));
}
.pg-card-title {
  margin: 0; padding: 0; border: 0;          /* renderer.css h3 reset — it */
  color: var(--text);                        /* also forces --dr-dim colour */
  flex: 1 1 auto; min-width: 0;
  font-size: 15px; font-weight: 600; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pg-card-company {
  margin: 0; padding: 0; border: 0;
  color: var(--text-muted); font-size: 13px; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pg-card-sum {
  margin: 0; padding: 0; border: 0;
  color: var(--text-dim); font-size: 14px; line-height: 1.5;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
/* Pinned to the bottom of the body. Cards are equal height now, and the
   slack from stretching has to land somewhere: parked above the pills it
   reads as an accidental gap, below them as deliberate spacing. Also lines
   the pill rows up across a row of cards whether or not a card carried a
   company line. */
.pg-card-doms { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }
.pg-card-foot {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: 13px;
}
.pg-card-foot .sep { color: var(--border-2); }
.pg-card-foot .when { margin-left: auto; font-variant-numeric: tabular-nums; }

.pg-pill {
  flex: none;
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid transparent;
  font-size: 12px; font-weight: 600; line-height: 1.3;
}
.pg-pill.draft {
  background: var(--warning-tint);
  border-color: var(--warning-tint-border); color: var(--warning);
}

/* The ... sits OUTSIDE the main button so it is its own tab stop. */
.pg-card-menu { position: absolute; top: var(--space-3); right: var(--space-3); }

.pg-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-9) var(--space-5); text-align: center;
  color: var(--text-dim);
}
.pg-empty h2 {
  margin: 0; padding: 0; border: 0;          /* renderer.css h2 border reset */
  color: var(--text); font-size: 18px; font-weight: 700; line-height: 1.3;
}

/* Focus ring, kit section 6: 2px selected-border, 2px gap, keyboard only. */
.pg-nav :is(button, input, select, a):focus-visible,
.pg-body :is(button, input, select, a):focus-visible {
  outline: 2px solid var(--selected-border);
  outline-offset: 2px;
}

@media (max-width: 1023px) {
  .pg-nav { padding: 0 72px 0 var(--space-6); }
  .pg-body { padding: var(--space-5) var(--space-6) var(--space-8); }
}
@media (max-width: 767px) {
  .pg-nav { padding: 0 64px 0 var(--space-4); }
  .pg-body { padding: var(--space-4) var(--space-4) var(--space-6); }
  .pg-search { max-width: none; flex-basis: 100%; }
  .pg-spacer { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-devpill, .pg-iconbtn, .pg-chip, .pg-card, .pg-card-main,
  .pg-search, .pg-primary { transition: none; }
}