/* Plume, as CSS.
   ───────────────────────────────────────────────────────────────
   The design system's component layer, hand written. It depends on
   nothing but the custom properties in ds/tokens/*.css, so this file
   plus that directory is the whole design system: lift both into a
   web app and the components come with them.

   Nothing marketing specific belongs here. Page layout lives in
   site.css.

   Every rule below is the style Plume's own component emitted, read
   from ds/_ds_bundle.js (the compiled component source) and checked
   against the rendered DOM of the six shipped pages. Where a number
   looks arbitrary it is Plume's, not ours: Wordmark's mark is
   round(size * 1.35) and its gap round(size * 0.4), which is why the
   two sizes below are written out rather than derived with calc().

   Only the variants the site actually uses are here. Plume has six
   button variants and this file has four, because the site
   instantiates four. Adding one is a deliberate act, not a
   completeness exercise. */

/* ── Icon ─────────────────────────────────────────────────────── */

.pl-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: var(--pl-icon-size, var(--icon-md));
  height: var(--pl-icon-size, var(--icon-md));
  color: currentcolor;
  opacity: 1;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.pl-icon > svg { display: block; width: 100%; height: 100%; }

.pl-icon--xs  { --pl-icon-size: var(--icon-xs); }
.pl-icon--sm  { --pl-icon-size: var(--icon-sm); }
.pl-icon--md  { --pl-icon-size: var(--icon-md); }
.pl-icon--lg  { --pl-icon-size: var(--icon-lg); }
.pl-icon--2xl { --pl-icon-size: var(--icon-2xl); }
/* Two call sites pass a pixel size rather than a token. */
.pl-icon--14  { --pl-icon-size: 14px; }
.pl-icon--16  { --pl-icon-size: 16px; }

/* ── Mascot (Pip) ─────────────────────────────────────────────── */

.pl-mascot {
  display: inline-flex;
  flex: 0 0 auto;
  width: var(--pl-mascot-size, 64px);
  height: var(--pl-mascot-size, 64px);
  line-height: 0;
}
.pl-mascot > svg { overflow: visible; }

.pl-mascot--24 { --pl-mascot-size: 24px; }
.pl-mascot--26 { --pl-mascot-size: 26px; }
.pl-mascot--27 { --pl-mascot-size: 27px; }
.pl-mascot--52 { --pl-mascot-size: 52px; }
/* ── Wordmark ─────────────────────────────────────────────────── */

.pl-wordmark { display: inline-flex; align-items: center; }
.pl-wordmark__text { display: inline-flex; flex-direction: column; line-height: 1; }
.pl-wordmark__name {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tighter);
  color: var(--text-primary);
}
.pl-wordmark__tagline {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* size 20: gap round(20 * .4) = 8, mark round(20 * 1.35) = 27 */
.pl-wordmark--20 { gap: 8px; }
.pl-wordmark--20 .pl-wordmark__name { font-size: 20px; }
/* size 18: gap round(18 * .4) = 7, mark round(18 * 1.35) = 24 */
.pl-wordmark--18 { gap: 7px; }
.pl-wordmark--18 .pl-wordmark__name { font-size: 18px; }

.pl-wordmark--inverse .pl-wordmark__name { color: var(--cream); }
.pl-wordmark--inverse .pl-wordmark__tagline { color: rgba(255, 255, 255, 0.6); }

/* ── Button ───────────────────────────────────────────────────── */

.pl-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-normal);
  line-height: 1;
  border-radius: var(--radius-full);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: var(--transition-control);
  height: var(--pl-btn-h);
  padding: 0 var(--pl-btn-px);
  min-width: var(--pl-btn-h);
  font-size: var(--pl-btn-fs);
  margin-bottom: var(--pl-btn-edge);
  background: var(--pl-btn-bg);
  color: var(--pl-btn-fg);
  border: var(--pl-btn-border);
  box-shadow: 0 var(--pl-btn-edge) 0 var(--pl-btn-edge-color);
  transform: none;
}
.pl-btn:hover {
  background: var(--pl-btn-bg-hover);
  box-shadow: 0 calc(var(--pl-btn-edge) + 1px) 0 var(--pl-btn-edge-color);
  transform: translateY(-1px);
}
.pl-btn:active {
  box-shadow: 0 0 0 var(--pl-btn-edge-color);
  transform: translateY(var(--pl-btn-edge));
}

.pl-btn--sm { --pl-btn-h: var(--control-height-sm); --pl-btn-px: 14px; --pl-btn-fs: var(--text-sm);   --pl-btn-edge: 3px; }
.pl-btn--lg { --pl-btn-h: var(--control-height-lg); --pl-btn-px: 24px; --pl-btn-fs: var(--text-base); --pl-btn-edge: 4px; }

.pl-btn--primary {
  --pl-btn-bg: var(--action-primary);
  --pl-btn-bg-hover: var(--action-primary-hover);
  --pl-btn-fg: var(--action-primary-text);
  --pl-btn-border: 2px solid transparent;
  --pl-btn-edge-color: var(--action-primary-edge);
}
.pl-btn--secondary {
  --pl-btn-bg: var(--action-secondary);
  --pl-btn-bg-hover: var(--action-secondary-hover);
  --pl-btn-fg: var(--action-secondary-text);
  --pl-btn-border: 2px solid var(--action-secondary-border);
  --pl-btn-edge-color: var(--action-secondary-edge);
}
.pl-btn--inverse {
  --pl-btn-bg: var(--cream);
  --pl-btn-bg-hover: #FFFFFF;
  --pl-btn-fg: var(--ink-900);
  --pl-btn-border: 2px solid transparent;
  --pl-btn-edge-color: rgba(0, 0, 0, 0.28);
}
/* ghost has no edge, so it neither lifts nor presses */
.pl-btn--ghost {
  --pl-btn-bg: transparent;
  --pl-btn-bg-hover: var(--action-ghost-hover);
  --pl-btn-fg: var(--text-primary);
  --pl-btn-border: 2px solid transparent;
  --pl-btn-edge: 0px;
  --pl-btn-edge-color: transparent;
  box-shadow: none;
}
.pl-btn--ghost:hover { box-shadow: none; transform: none; }
.pl-btn--ghost:active { transform: none; }

/* ── Badge ────────────────────────────────────────────────────── */

.pl-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  background: var(--pl-badge-bg);
  color: var(--pl-badge-fg);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
.pl-badge--success { --pl-badge-bg: var(--success-surface);    --pl-badge-fg: var(--success-fg); }
.pl-badge--info    { --pl-badge-bg: var(--info-surface);       --pl-badge-fg: var(--info-fg); }
.pl-badge--neutral { --pl-badge-bg: var(--surface-interactive); --pl-badge-fg: var(--text-secondary); }

/* ── VerdictPill ──────────────────────────────────────────────── */
/* Only size sm is used, so the 28px size is not written out. */

.pl-verdict {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px 0 6px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  background: var(--pl-verdict-bg);
  color: var(--pl-verdict-fg);
  font-size: var(--text-2xs);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-wide);
}
.pl-verdict--clear   { --pl-verdict-bg: var(--success-surface); --pl-verdict-fg: var(--success-fg); }
.pl-verdict--warning { --pl-verdict-bg: var(--warning-surface); --pl-verdict-fg: var(--warning-fg); }
.pl-verdict--error   { --pl-verdict-bg: var(--error-surface);   --pl-verdict-fg: var(--error-fg); }
.pl-verdict--info    { --pl-verdict-bg: var(--info-surface);    --pl-verdict-fg: var(--info-fg); }

.pl-verdict--solid.pl-verdict--warning { --pl-verdict-bg: var(--warning-solid); --pl-verdict-fg: var(--ink-900); }
.pl-verdict--solid.pl-verdict--error   { --pl-verdict-bg: var(--error-solid);   --pl-verdict-fg: #FFFFFF; }
.pl-verdict--solid.pl-verdict--info    { --pl-verdict-bg: var(--info-solid);    --pl-verdict-fg: var(--ink-900); }

/* ── IconTile ─────────────────────────────────────────────────── */

.pl-tile {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--pl-tile-px);
  height: var(--pl-tile-px);
  background: var(--pl-tile-bg);
  color: var(--pl-tile-fg);
  border-radius: var(--pl-tile-radius);
  line-height: 1;
}
.pl-tile--sm { --pl-tile-px: var(--tile-sm); --pl-tile-radius: var(--radius-xs); }
.pl-tile--md { --pl-tile-px: var(--tile-md); --pl-tile-radius: var(--radius-sm); }
.pl-tile--lg { --pl-tile-px: var(--tile-lg); --pl-tile-radius: var(--radius-sm); }
.pl-tile--xl { --pl-tile-px: var(--tile-xl); --pl-tile-radius: var(--radius-md); }

/* Category tiles take their pair from the token set, so a new
   category needs no rule here beyond its two custom properties. */
.pl-tile--home   { --pl-tile-bg: var(--cat-home-tile);   --pl-tile-fg: var(--cat-home-on); }
.pl-tile--social { --pl-tile-bg: var(--cat-social-tile); --pl-tile-fg: var(--cat-social-on); }
.pl-tile--health { --pl-tile-bg: var(--cat-health-tile); --pl-tile-fg: var(--cat-health-on); }
.pl-tile--sport  { --pl-tile-bg: var(--cat-sport-tile);  --pl-tile-fg: var(--cat-sport-on); }
.pl-tile--food   { --pl-tile-bg: var(--cat-food-tile);   --pl-tile-fg: var(--cat-food-on); }
.pl-tile--school { --pl-tile-bg: var(--cat-school-tile); --pl-tile-fg: var(--cat-school-on); }
.pl-tile--drive  { --pl-tile-bg: var(--cat-drive-tile);  --pl-tile-fg: var(--cat-drive-on); }
.pl-tile--work   { --pl-tile-bg: var(--cat-work-tile);   --pl-tile-fg: var(--cat-work-on); }
.pl-tile--other  { --pl-tile-bg: var(--cat-other-tile);  --pl-tile-fg: var(--cat-other-on); }

.pl-tile--intelligence { --pl-tile-bg: var(--intelligence-primary); --pl-tile-fg: #FFFFFF; }
.pl-tile--success      { --pl-tile-bg: var(--success-solid); --pl-tile-fg: var(--ink-900); }
.pl-tile--warning      { --pl-tile-bg: var(--warning-solid); --pl-tile-fg: var(--ink-900); }
.pl-tile--error        { --pl-tile-bg: var(--error-solid);   --pl-tile-fg: #FFFFFF; }
.pl-tile--info         { --pl-tile-bg: var(--info-solid);    --pl-tile-fg: var(--ink-900); }

/* ── Avatar ───────────────────────────────────────────────────── */

.pl-avatar {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: var(--pl-avatar-px, 32px);
  height: var(--pl-avatar-px, 32px);
}
.pl-avatar--20 { --pl-avatar-px: 20px; }
.pl-avatar--26 { --pl-avatar-px: 26px; }

.pl-avatar__face {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--pl-avatar-bg);
  color: var(--pl-avatar-fg);
  font-family: var(--font-sans);
  font-size: var(--pl-avatar-fs);
  font-weight: var(--weight-extrabold);
  letter-spacing: 0.01em;
}
/* font-size is max(9, round(px * .38)) in Plume */
.pl-avatar--20 .pl-avatar__face { --pl-avatar-fs: 9px; }
.pl-avatar--26 .pl-avatar__face { --pl-avatar-fs: 10px; }

/* Avatar picks its colour pair by hashing the name, so the pairs the
   site lands on are written out per person rather than recomputed. */
.pl-avatar--ring { box-shadow: 0 0 0 2px var(--surface-default); border-radius: 999px; }

/* ── Card ─────────────────────────────────────────────────────── */

.pl-card {
  background: var(--surface-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px;
}
.pl-card--fill { height: 100%; }

/* ── AgendaItem ───────────────────────────────────────────────── */

.pl-agenda {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px var(--space-4);
  border-top: 2px solid var(--border-subtle);
  border-radius: 0;
  background: transparent;
  cursor: default;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.pl-agenda__time {
  flex: 0 0 auto;
  width: 56px;
  line-height: 1.15;
}
.pl-agenda__start {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-extrabold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.pl-agenda__end {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.pl-agenda__body { flex: 1 1 0%; min-width: 0; }
.pl-agenda__title {
  font-size: 15px;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pl-agenda__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 3px;
}
.pl-agenda__where {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The gradient rail marks an item the assistant reasoned about. */
.pl-agenda__rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--gradient-plume-vertical);
}

/* ── Notification / HouseholdRule / Confirmation ──────────────── */
/* The three intelligence surfaces the site uses share one shell. */

.pl-note {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--pl-note-bg);
  border: 2px solid var(--pl-note-border);
  border-radius: var(--radius-md);
}
.pl-note--warning { --pl-note-bg: var(--warning-surface); --pl-note-border: var(--warning-border); }
.pl-note__body { flex: 1 1 0%; min-width: 0; }
.pl-note__eyebrow { color: var(--pl-note-fg); margin-bottom: 4px; }
.pl-note--warning { --pl-note-fg: var(--warning-fg); }
.pl-note__title {
  font-size: var(--text-md);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
  line-height: var(--leading-snug);
}
.pl-note__detail {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: var(--leading-normal);
}
.pl-note__tile {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  background: var(--warning-solid);
  color: var(--ink-900);
  border-radius: var(--radius-xs);
  line-height: 1;
  margin-top: 1px;
}

/* ── DayHeader ────────────────────────────────────────────────── */

.pl-dayheader {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: var(--space-5);
  padding-bottom: var(--space-2);
}
.pl-dayheader__row {
  display: flex;
  align-items: center;
  column-gap: var(--space-3);
  row-gap: 6px;
  flex-wrap: wrap;
}
.pl-dayheader__day {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--text-primary);
}
.pl-dayheader__date {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-tertiary);
}
.pl-dayheader__today {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-size: var(--text-2xs);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-wide);
}

/* VerdictPill at size md. */
.pl-verdict--md {
  height: 28px;
  padding: 0 11px 0 8px;
  font-size: var(--text-xs);
}

.pl-mascot--32  { --pl-mascot-size: 32px; }
.pl-mascot--110 { --pl-mascot-size: 110px; }

/* Avatar colours come from hashing the person's name, so the pairs the
   site actually lands on are written out rather than recomputed. */
.pl-avatar__face--lilac     { --pl-avatar-bg: var(--lilac-100);     --pl-avatar-fg: var(--lilac-900); }
.pl-avatar__face--marigold  { --pl-avatar-bg: var(--marigold-100);  --pl-avatar-fg: var(--marigold-900); }
.pl-avatar__face--coral     { --pl-avatar-bg: var(--coral-100);     --pl-avatar-fg: var(--coral-900); }
.pl-avatar__face--bubblegum { --pl-avatar-bg: var(--bubblegum-100); --pl-avatar-fg: var(--bubblegum-900); }
.pl-avatar__face--pip       { --pl-avatar-bg: var(--cream);         --pl-avatar-fg: var(--coral-900); }

/* HouseholdRule / Confirmation */
.rule-text {
  flex: 1 1 0%;
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: var(--leading-normal);
}
.intel-card {
  position: relative;
  overflow: hidden;
  background: var(--intelligence-surface);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) + 4px);
}
.intel-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  background: var(--surface-default);
  color: var(--text-secondary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
}
.intel-chip__lead { opacity: 0.7; margin-right: 5px; }
.pl-badge--dark { --pl-badge-bg: var(--ink-900); --pl-badge-fg: var(--cream); }