/* Purple Party — shared shell: cross-page chrome, motion, demo affordances.
   The four surfaces are Claude Design canvas documents; nothing here changes
   their layout, only the frame around them and the states they can be put in. */

/* This file predates the design system. It used to declare its own :root
   palette under the same --pp-* names, and because shell.css loads AFTER
   tokens.css it silently overrode the real tokens on every page that loaded
   both — --pp-ink resolved to #211E1B rather than #1C1A17, and --pp-amber-ink
   kept the value that fails AA. tokens.css is now the single source.

   The names below are shell-only aliases that tokens.css does not define, kept
   so the older rules in this file keep working. Do not add colour values here:
   if a token is missing, add it to tokens.css. */
:root {
  --pp-bg:          var(--pp-ground);
  --pp-purple:      var(--pp-converge);
  --pp-purple-deep: var(--pp-converge-deep);
  --pp-lilac:       var(--pp-converge-wash);
  --pp-lilac-line:  var(--pp-converge-line);
  --pp-muted:       var(--pp-ink-3);
  --pp-faint:       var(--pp-ink-4);
  --pp-card:        var(--pp-surface);
  --pp-amber-ink:   var(--pp-earned-ink);
  --pp-amber-bg:    var(--pp-earned-wash);
  --pp-amber-line:  var(--pp-earned-line);
}

/* ---------------------------------------------------------------- top bar */

.pp-top {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--pp-rule);
  padding-bottom: 14px;
  margin-bottom: 34px;
}

.pp-top .pp-mark {
  font-family: var(--pp-serif);
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pp-purple);
  border-bottom: none;
  flex: 0 0 auto;
}
.pp-top .pp-mark:hover { color: var(--pp-purple-deep); }

.pp-top .pp-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: baseline;
  flex: 1 1 auto;
}

.pp-top .pp-nav a {
  font-family: var(--pp-sans);
  font-size: 13.5px;
  color: var(--pp-muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: color .15s ease, border-color .15s ease;
}
.pp-top .pp-nav a:hover { color: var(--pp-ink); border-bottom-color: var(--pp-rule); }
.pp-top .pp-nav a[aria-current="page"] {
  color: var(--pp-purple-deep);
  border-bottom-color: var(--pp-purple);
}

.pp-top .pp-viewer {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 12px;
  color: var(--pp-muted);
  flex: 0 1 auto;
}
.pp-top .pp-viewer-name { color: var(--pp-ink); }

/* ------------------------------------------------------------ page motion */

#dc-root { animation: pp-rise .34s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes pp-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------ acknowledgeable actions */

/* Reaction chips and compose buttons: real controls, local state only. */
.pp-act {
  font-family: var(--pp-sans);
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.pp-act:hover { border-color: var(--pp-lilac-line) !important; color: var(--pp-purple-deep) !important; }
.pp-act:active { transform: translateY(1px); }
.pp-act.pp-on {
  background: var(--pp-lilac) !important;
  border-color: var(--pp-purple) !important;
  color: var(--pp-purple-deep) !important;
}
.pp-act .pp-count {
  color: var(--pp-purple);
  margin-left: 6px;
  font-size: .92em;
}

/* --------------------------------------------------------------- toasts */

.pp-toasts {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 2147483000;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 48px));
}

.pp-toast {
  font-family: var(--pp-sans);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--pp-ink);
  background: var(--pp-card);
  border: 1px solid var(--pp-rule);
  border-left: 2px solid var(--pp-purple);
  border-radius: 3px;
  box-shadow: 0 8px 26px rgba(33, 30, 27, .12);
  padding: 11px 15px;
  animation: pp-toast-in .26s cubic-bezier(.2, .7, .3, 1) both;
}
.pp-toast .pp-toast-sub {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--pp-faint);
}
.pp-toast.pp-leaving { animation: pp-toast-out .22s ease forwards; }
@keyframes pp-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pp-toast-out {
  to { opacity: 0; transform: translateY(6px); }
}

/* --------------------------------------------------------------- composer */

.pp-modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  background: rgba(33, 30, 27, .34);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 20px 20px;
  animation: pp-fade .18s ease both;
  overflow-y: auto;
}
@keyframes pp-fade { from { opacity: 0 } to { opacity: 1 } }

.pp-modal {
  font-family: var(--pp-sans);
  width: 100%;
  max-width: 560px;
  background: var(--pp-card);
  border: 1px solid var(--pp-rule);
  border-radius: 3px;
  box-shadow: 0 20px 60px rgba(33, 30, 27, .22);
  padding: 26px 28px 22px;
  animation: pp-rise .26s cubic-bezier(.2, .7, .3, 1) both;
}
.pp-modal h2 {
  font-family: var(--pp-serif);
  font-weight: 400;
  font-size: 22px;
  margin: 0 0 6px;
  color: var(--pp-ink);
}
.pp-modal .pp-modal-note {
  font-size: 12px;
  line-height: 1.65;
  color: var(--pp-faint);
  margin: 0 0 18px;
  max-width: 56ch;
}
.pp-modal textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 130px;
  resize: vertical;
  font-family: var(--pp-serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--pp-ink);
  background: var(--pp-bg);
  border: 1px solid var(--pp-rule);
  border-radius: 2px;
  padding: 14px 15px;
}
.pp-modal textarea:focus {
  outline: none;
  border-color: var(--pp-lilac-line);
  background: #fff;
}
.pp-modal .pp-modal-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}
.pp-modal .pp-modal-meta { font-size: 11.5px; color: var(--pp-faint); }

.pp-btn {
  font-family: var(--pp-sans);
  font-size: 13px;
  cursor: pointer;
  border-radius: 2px;
  padding: 9px 16px;
  transition: background-color .14s ease, color .14s ease;
}
.pp-btn-primary {
  border: 1px solid var(--pp-purple);
  background: var(--pp-purple);
  color: #fff;
}
.pp-btn-primary:hover { background: var(--pp-purple-deep); border-color: var(--pp-purple-deep); }
.pp-btn-primary:disabled { opacity: .4; cursor: default; }
.pp-btn-quiet {
  border: 1px solid var(--pp-rule);
  background: transparent;
  color: var(--pp-muted);
}
.pp-btn-quiet:hover { color: var(--pp-ink); border-color: var(--pp-lilac-line); }

/* ---------------------------------------------------------- demo controls */

.pp-demo-open {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 2147481000;
  font-family: var(--pp-sans);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pp-purple-deep);
  background: var(--pp-card);
  border: 1px solid var(--pp-lilac-line);
  border-radius: 20px;
  padding: 9px 17px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(33, 30, 27, .1);
  transition: background-color .15s ease, color .15s ease;
}
.pp-demo-open:hover { background: var(--pp-lilac); }

.pp-demo {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 2147481500;
  width: min(320px, calc(100vw - 44px));
  max-height: min(70vh, 640px);
  overflow-y: auto;
  font-family: var(--pp-sans);
  background: var(--pp-card);
  border: 1px solid var(--pp-rule);
  border-radius: 3px;
  box-shadow: 0 16px 44px rgba(33, 30, 27, .18);
  padding: 20px 21px 18px;
  animation: pp-rise .24s cubic-bezier(.2, .7, .3, 1) both;
}
.pp-demo header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--pp-rule);
  padding-bottom: 11px;
  margin-bottom: 15px;
}
.pp-demo h3 {
  font-family: var(--pp-serif);
  font-weight: 400;
  font-size: 17px;
  margin: 0;
  color: var(--pp-ink);
}
.pp-demo .pp-demo-close {
  border: none;
  background: transparent;
  font-family: var(--pp-sans);
  font-size: 12px;
  color: var(--pp-faint);
  cursor: pointer;
}
.pp-demo .pp-demo-close:hover { color: var(--pp-ink); }
.pp-demo .pp-demo-blurb {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--pp-faint);
  margin: 0 0 18px;
}
.pp-demo fieldset { border: none; margin: 0 0 18px; padding: 0; }
.pp-demo legend {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pp-faint);
  padding: 0;
  margin-bottom: 9px;
}
.pp-demo .pp-opt {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--pp-sans);
  font-size: 13px;
  color: var(--pp-ink);
  background: transparent;
  border: none;
  border-left: 2px solid var(--pp-rule);
  padding: 8px 11px;
  margin-bottom: 2px;
  cursor: pointer;
  transition: background-color .14s ease;
}
.pp-demo .pp-opt:hover { background: #F2EEE6; }
.pp-demo .pp-opt[aria-pressed="true"] {
  background: var(--pp-lilac);
  border-left-color: var(--pp-purple);
  color: var(--pp-purple-deep);
}
.pp-demo .pp-demo-reset {
  font-size: 11.5px;
  color: var(--pp-faint);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--pp-rule);
  padding: 0 0 2px;
  cursor: pointer;
  font-family: var(--pp-sans);
}
.pp-demo .pp-demo-reset:hover { color: var(--pp-ink); }

/* -------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  /* The canvas documents put the filter rail first in source order. On a
     phone the reading column should lead; the rail follows it. */
  .pp-rail { order: 2 !important; flex-basis: 100% !important; }
  .pp-main { order: 1 !important; }
  .pp-top { gap: 10px 18px; }
  .pp-top .pp-nav { gap: 16px; order: 3; flex-basis: 100%; }
  .pp-top .pp-viewer { font-size: 11.5px; }
}

@media (max-width: 620px) {
  .pp-demo-open { right: 14px; bottom: 14px; padding: 8px 14px; }
  .pp-toasts { left: 14px; right: 14px; bottom: 14px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  #dc-root, .pp-toast, .pp-modal, .pp-modal-scrim, .pp-demo { animation: none !important; }
  .pp-act, .pp-btn, .pp-top .pp-nav a { transition: none !important; }
}

/* --------------------------------------------- demo provenance marker ----- */

/* Quiet, persistent, on every page. This product is about not misrepresenting
   data, so nobody should be able to mistake a fixture statistic for a finding. */
.pp-fixture {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 2147480000;
  font-family: var(--pp-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pp-ink-4, #6B6357);
  background: var(--pp-ground, #F7F4EE);
  border-top: 1px solid var(--pp-rule, #E4DDD0);
  border-right: 1px solid var(--pp-rule, #E4DDD0);
  border-top-right-radius: 3px;
  padding: 5px 11px 5px 10px;
  pointer-events: none;
  opacity: .82;
}
@media (max-width: 620px) {
  .pp-fixture { font-size: 9.5px; padding: 4px 9px; }
}

/* About sits slightly apart from the product surfaces in the primary nav —
   it is a different kind of destination, not a sixth place to read things.
   A hairline and a wider gap, rather than margin-auto: floating it to the far
   right made it read as part of the viewer block instead of the nav. */
.pp-top .pp-nav .pp-nav-aside {
  margin-left: 10px;
  padding-left: 24px;
  border-left: 1px solid var(--pp-rule, #E4DDD0);
  color: var(--pp-ink-4, #6B6357);
}
.pp-top .pp-nav .pp-nav-aside:hover { color: var(--pp-ink, #211E1B); }
@media (max-width: 900px) {
  .pp-top .pp-nav .pp-nav-aside {
    margin-left: 4px; padding-left: 16px;
  }
}

/* ------------------------------------------------- grouped navigation ----- */

/* Two tiers, decided at 5 destinations with 6 more coming (INDEX §6).
   Row 1 is four permanent groups — Read · Answer · Resolve · You — plus About.
   Row 2 lists the pages inside the current group, and is omitted when a group
   holds only one page. A group appears in row 1 only once it has a built page. */

.pp-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: baseline;
  padding: 14px 0 0;
  margin-bottom: 30px;
}
.pp-subnav a {
  font-family: var(--pp-sans, 'Atkinson Hyperlegible', system-ui, sans-serif);
  font-size: 13px;
  color: var(--pp-ink-4, #6B6357);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: color .15s ease, border-color .15s ease;
}
.pp-subnav a:hover { color: var(--pp-ink, #211E1B); border-bottom-color: var(--pp-rule, #E4DDD0); }
.pp-subnav a[aria-current="page"] {
  color: var(--pp-ink, #211E1B);
  border-bottom-color: var(--pp-ink, #211E1B);
}

/* The group row marks the section you are in, not the page. */
.pp-top .pp-nav a[aria-current="true"] {
  color: var(--pp-ink, #211E1B);
  border-bottom-color: var(--pp-rule-strong, #DCD4C6);
}

@media (max-width: 900px) {
  .pp-subnav { gap: 8px 16px; padding-top: 10px; margin-bottom: 22px; }
}