/* The Pawtocol: Sniffr's AI agents. The structure is an org chart (Sniffr on top, one column per agent, agents in
   development dashed below); each agent is a raised pixel card with a bar in its colour (Sniffr ember, Hot Dog cherry,
   Pawparazzi gold). Each agent's page: its portrait, responsibilities, live record and activity. */

.acc-ember, .acc-blue { --acc: var(--ember); --acc-wash: var(--ember-wash); }
.acc-cherry, .acc-red { --acc: var(--cherry); --acc-wash: var(--cherry-wash); }
.acc-gold, .acc-yellow { --acc: var(--gold); --acc-wash: var(--gold-wash); }
.acc-leaf, .acc-green { --acc: var(--leaf); --acc-wash: var(--leaf-wash); }
.acc-plum, .acc-violet { --acc: var(--plum); --acc-wash: var(--plum-wash); }

svg.dog { display: block; width: 100%; height: auto; overflow: visible; }
svg.dog.is-hidden { color: var(--ink-3); }

.agent-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.8125rem; }
.agent-status b { font-family: var(--label); font-weight: 400; font-size: var(--j1); text-transform: uppercase; letter-spacing: 0; }
.agent-status > span:last-child { color: var(--ink-2); }

/* ---------------------------------------------------------------- an agent card */
.agent {
  position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 20px 16px 16px;
  background: var(--card); color: var(--ink); text-decoration: none;
  border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--hard);
}
.agent::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--acc); border-bottom: 2px solid var(--ink); }
a.agent:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--hard); }
.agent.is-lead { width: min(100%, 460px); padding: 24px 20px 20px; box-shadow: 6px 6px 0 var(--hard); }
a.agent.is-lead:hover { box-shadow: 4px 4px 0 var(--hard); }
.agent-art { flex: none; width: 64px; height: 64px; padding: 4px; background: var(--acc-wash, var(--paper)); border: 2px solid var(--rule); }
.agent.is-lead .agent-art { width: 84px; height: 84px; }
.agent-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.agent-id { font-family: var(--label); font-weight: 400; font-size: var(--j1); letter-spacing: 0; text-transform: uppercase; color: var(--ink-2); }
.agent-name { font-family: var(--display); font-weight: 400; font-size: var(--j15); line-height: 1.1; }
.agent.is-lead .agent-name { font-size: var(--j2); }
.agent-short { font-size: 0.875rem; line-height: 1.4; color: var(--ink-2); }
.agent .agent-status { margin-top: 8px; }
.agent.is-future { background: transparent; border: 2px dashed var(--rule-strong); box-shadow: none; }
.agent.is-future::before { display: none; }
.agent.is-future .agent-art { border-style: dashed; background: var(--paper); }
.agent.is-future .agent-name { font-size: var(--j1); color: var(--ink-2); }

/* ---------------------------------------------------------------- the org chart: 2px pixel lines */
.org { --line: var(--ink-3); --gap: 22px; --drop: 32px; }
.org-lead { position: relative; display: flex; justify-content: center; padding-bottom: var(--drop); }
.org-lead::after { content: ''; position: absolute; left: 50%; bottom: 0; height: var(--drop); margin-left: -1px; border-left: 2px solid var(--line); }
.org-row { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); padding-top: var(--drop); }
.org-row::before {
  content: ''; position: absolute; top: 0; border-top: 2px solid var(--line);
  left: calc((100% - 2 * var(--gap)) / 6 - 1px); right: calc((100% - 2 * var(--gap)) / 6 - 1px);
}
.org-col { position: relative; display: flex; flex-direction: column; }
.org-col::before { content: ''; position: absolute; left: 50%; top: calc(-1 * var(--drop)); height: var(--drop); margin-left: -1px; border-left: 2px solid var(--line); }
.org-col.is-future::before { border-left-style: dashed; }
.org-sub { position: relative; padding-top: 26px; }
.org-sub::before { content: ''; position: absolute; left: 50%; top: 4px; height: 22px; margin-left: -1px; border-left: 2px dashed var(--line); }
.org-row { align-items: start; }
.org-col > .agent { min-height: 116px; }

@media (max-width: 899px) {
  /* a list: Sniffr, then each agent on a line from it */
  .org { --drop: 14px; }
  .org-lead { justify-content: flex-start; padding-bottom: 0; }
  .org-lead::after { display: none; }
  .org .agent.is-lead { width: calc(100% - 6px); }
  .org-row { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px 6px 0 26px; margin-left: 22px; }
  .org-row::before { display: none; }
  .org-col::before { left: -26px; top: 42px; width: 26px; height: 0; margin-left: 0; border-left: 0; border-top: 2px solid var(--line); }
  .org-col.is-future::before { border-top-style: dashed; }
  .org-col::after { content: ''; position: absolute; left: -26px; top: -16px; bottom: 0; border-left: 2px solid var(--line); }
  .org-col:last-child::after { bottom: auto; height: 60px; }
  .org-sub { padding: 12px 0 0 26px; }
  .org-sub::before { left: 10px; top: 0; height: 56px; width: 16px; margin-left: 0; border-left: 2px dashed var(--line); border-bottom: 2px dashed var(--line); }
}

/* ---------------------------------------------------------------- what each agent does */
.briefs { display: grid; gap: 20px; }
.brief {
  position: relative; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px);
  padding: clamp(24px, 3vw, 34px) clamp(20px, 3vw, 32px) clamp(20px, 3vw, 32px); background: var(--card);
  border: 2px solid var(--rule-strong);
}
.brief::before { content: ''; position: absolute; left: -2px; right: -2px; top: -2px; height: 8px; background: var(--acc); }
.brief-who { display: flex; align-items: flex-start; gap: 16px; }
.brief-art { flex: none; width: 88px; height: 88px; padding: 6px; background: var(--acc-wash); border: 2px solid var(--rule); }
.brief h3 { font-size: var(--j15); margin-top: 6px; }
.brief-role { margin: 4px 0 10px; font-weight: 600; color: var(--ink-2); }
.brief-what > p { max-width: 62ch; font-size: 1.0625rem; }
.brief-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 2px solid var(--rule); }
.brief-more { display: inline-flex; align-items: center; gap: 8px; font-family: var(--label); font-weight: 400; font-size: var(--j1); text-transform: uppercase; letter-spacing: 0; text-decoration: none; color: var(--ink); }
.brief-more:hover { color: var(--ember-deep); }
.brief-more svg { width: 14px; height: 14px; }
@media (max-width: 760px) { .brief { grid-template-columns: minmax(0, 1fr); } }

.duties { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.duties li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9375rem; }
.duties svg { flex: none; width: 16px; height: 16px; margin-top: 4px; color: var(--ember-deep); }
/* what an agent takes in and what it puts out */
.io { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-family: var(--label); font-weight: 400; font-size: var(--j1); letter-spacing: 0; text-transform: uppercase; color: var(--ink-2); }
.io span { padding: 5px 10px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--rule-strong); clip-path: var(--notch); }
.io svg { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- /pawtocol head */
.pack-facts { display: flex; flex-wrap: wrap; gap: 14px 44px; margin: 28px 0 0; padding-top: 20px; border-top: 2px solid var(--rule); }
.pack-facts dt { font-family: var(--label); font-weight: 400; font-size: var(--j1); text-transform: uppercase; letter-spacing: 0; color: var(--ink-2); }
.pack-facts dd { margin: 4px 0 0; font-family: var(--label); letter-spacing: 0; font-size: var(--j2); font-weight: 400; line-height: 1.1; }

/* ---------------------------------------------------------------- home: the agents section */
.board { display: grid; gap: 2px; padding: 18px; background: var(--card); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--hard); }
.board-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 6px 12px; margin-bottom: 4px; border-bottom: 2px solid var(--rule); }
.board-all { display: inline-flex; align-items: center; gap: 8px; font-family: var(--label); font-weight: 400; font-size: var(--j1); text-transform: uppercase; letter-spacing: 0; text-decoration: none; color: var(--ink); }
.board-all:hover { color: var(--ember-deep); }
.board-all svg { width: 14px; height: 14px; }
.board-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 0 var(--acc); }
.board-row:hover { background: var(--acc-wash); box-shadow: inset 4px 0 0 0 var(--acc); }
.board-art { flex: none; width: 52px; height: 52px; padding: 3px; background: var(--acc-wash); border: 2px solid var(--rule); }
.board-row b { display: block; font-family: var(--display); font-weight: 400; font-size: var(--j15); line-height: 1.15; }
.board-row small { display: block; font-size: 0.75rem; color: var(--ink-2); }
.board-st { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px 8px; max-width: 52%; text-align: right; font-family: var(--label); font-weight: 400; font-size: var(--j1); text-transform: uppercase; letter-spacing: 0; }
.board-st small { flex-basis: 100%; font-family: var(--text); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.75rem; color: var(--ink-2); }
@media (max-width: 480px) { .board { padding: 14px 12px; } .board-row { gap: 10px; padding-inline: 4px; } .board-art { width: 44px; height: 44px; } .board-st { max-width: 46%; } }
.board-pups { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 12px 8px 0; border-top: 2px dashed var(--rule-strong); font-size: 0.8125rem; color: var(--ink-2); }
.board-pup { flex: none; width: 32px; height: 32px; }

.pack-home-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.pack-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.pack-steps li { display: flex; align-items: center; gap: 14px; }
.pack-steps-art { flex: none; width: 64px; height: 64px; padding: 4px; background: var(--acc-wash); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--hard); }
.pack-steps b { display: block; font-family: var(--display); font-size: var(--j15); font-weight: 400; line-height: 1.1; }
.pack-steps small { display: block; margin-top: 3px; font-size: 0.875rem; color: var(--ink-2); }
@media (max-width: 860px) { .pack-home-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- /pawtocol/<agent> */
.dog-hero {
  padding-block: clamp(24px, 4vw, 48px) clamp(36px, 6vw, 72px); border-bottom: 2px solid var(--rule);
  /* a banded fade, in steps rather than a smooth gradient */
  background: linear-gradient(var(--acc-wash) 0 64%, color-mix(in srgb, var(--acc-wash) 66%, var(--paper)) 64% 76%, color-mix(in srgb, var(--acc-wash) 33%, var(--paper)) 76% 88%, var(--paper) 88%);
}
.crumb { display: inline-flex; align-items: center; gap: 8px; margin-bottom: clamp(18px, 3vw, 30px); font-family: var(--label); font-weight: 400; font-size: var(--j1); text-transform: uppercase; letter-spacing: 0; color: var(--ink-2); text-decoration: none; }
.crumb svg { width: 14px; height: 14px; }
.crumb:hover { color: var(--ink); }
.dog-hero-grid { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.dog-portrait { position: relative; aspect-ratio: 1; max-width: 100%; padding: 9%; background: var(--card); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--hard); }
.dog-portrait::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--acc); border-bottom: 2px solid var(--ink); }
.dog-reg { position: absolute; right: 12px; bottom: 10px; font-family: var(--label); font-weight: 400; font-size: var(--j1); letter-spacing: 0; text-transform: uppercase; color: var(--ink-3); }
.dog-intro { min-width: 0; }
.dog-intro h1 { margin-top: 12px; font-size: var(--title-xl); line-height: 1; }
.dog-job { max-width: 36em; margin-top: 18px; font-size: var(--step-1); }
.dog-status { margin-top: 18px; }
.dog-rel { margin-top: 8px; font-size: 0.9375rem; }
@media (max-width: 720px) {
  .dog-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .dog-portrait { width: min(200px, 100%); }
}

.dog-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.dog-split .eyebrow { display: block; margin-bottom: 6px; }
.dog-split .io { margin-top: 22px; }
@media (max-width: 860px) { .dog-split { grid-template-columns: minmax(0, 1fr); } }
.dog-pup { display: flex; align-items: center; gap: 12px; max-width: 36em; margin-top: 22px; padding-top: 18px; border-top: 2px dashed var(--rule-strong); font-size: 0.875rem; color: var(--ink-2); }
.dog-pup b { color: var(--ink); }
.pup-art { flex: none; width: 48px; height: 48px; padding: 4px; border: 2px dashed var(--ink-3); background: var(--paper); }

.records { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 14px 0 0; border-block: 2px solid var(--ink); }
.records div { min-width: 0; padding: 16px 14px 16px 0; }
.records div:nth-child(even) { padding-left: 14px; border-left: 2px solid var(--rule); }
.records div:nth-child(n + 3) { border-top: 2px solid var(--rule); }
.records dt { font-size: 0.8125rem; color: var(--ink-2); }
.records dd { margin: 6px 0 0; font-family: var(--label); letter-spacing: 0; font-size: var(--j15); font-weight: 400; line-height: 1.15; overflow-wrap: anywhere; }

.klog { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.klog li { border-bottom: 2px solid var(--rule); }
.klog li > a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 4px; color: inherit; text-decoration: none; }
.klog li > a:hover { background: var(--card); box-shadow: inset 4px 0 0 var(--ember); }
.klog-what { min-width: 0; }
.klog-what b { font-family: var(--label); font-weight: 400; }
.klog-what small { display: block; max-width: 70ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8125rem; color: var(--ink-2); }
.klog-at { flex: none; font-size: 0.75rem; color: var(--ink-3); }

.dog-next { display: flex; justify-content: flex-end; padding-block: 0 clamp(48px, 7vw, 96px); }
.dog-next .btn svg.dog { width: 32px; height: 32px; margin-block: -8px; }

/* four agents under Sniffr: four columns on wide screens, each card's picture above its text */
@media (min-width: 900px) {
  .org-row.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .org-row.cols-4::before { left: calc((100% - 3 * var(--gap)) / 8 - 1px); right: calc((100% - 3 * var(--gap)) / 8 - 1px); }
  .org-row.cols-4 .agent { flex-direction: column; gap: 10px; }
  .org-row.cols-4 .agent-art { width: 56px; height: 56px; }
}

/* ---------------------------------------------------------------- /pawtocol/barkitect: the websites that are live */
.sites { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.sites a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--card); color: var(--ink); text-decoration: none; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--hard); }
.sites a:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--hard); }
.sites .avatar { width: 40px; height: 40px; }
.sites b { display: block; font-family: var(--label); font-size: var(--j1); }
.sites small { display: block; font-size: 0.75rem; color: var(--ember-deep); overflow-wrap: anywhere; }
.sites-ms { flex: none; font-family: var(--label); font-size: var(--j1); font-weight: 400; text-transform: uppercase; color: var(--ink-2); }
.sites svg { flex: none; width: 14px; height: 14px; }

/* ---------------------------------------------------------------- home hero: the agents in a slider */
/* One agent at a time on a raised card: its sprite on its colour, its role and job; under it a button per agent, the
   progress to the next one (segments, paused while held) and the arrows. The agent on show lends the slider its colour.
   A slide enters in three 4px steps; its sprite idles on the two-frame bob. */
.spot { margin-top: 18px; background: var(--card); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--hard); }
.spot-slide { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px 18px; min-height: 140px; }
.spot-slide[hidden] { display: none; }
.spot-slide.is-in { animation: slide-in 0.3s steps(3, end) both; }
@keyframes slide-in { from { transform: translateX(12px); } to { transform: none; } }
.spot-art { display: block; width: 104px; height: 104px; padding: 10px; background: var(--acc); border: 2px solid var(--ink); }
.spot-art:hover { box-shadow: 2px 2px 0 var(--hard); }
.spot-art svg { animation: bob 1.2s steps(1, end) infinite; }
.spot-text { min-width: 0; }
.spot-text h2 { font-size: var(--j15); margin: 4px 0 6px; }
.spot-text p:last-child { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.45; }
.spot-nav { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-top: 2px solid var(--rule); }
.spot-tabs { display: flex; gap: 6px; flex: none; }
.spot-tab { display: block; width: 40px; height: 40px; padding: 2px; cursor: pointer; background: var(--card); border: 2px solid var(--rule-strong); }
.spot-tab:hover { border-color: var(--ink); }
.spot-tab[aria-pressed="true"] { background: var(--acc); border-color: var(--ink); box-shadow: 2px 2px 0 var(--hard); }
.spot-progress { display: block; flex: 1 1 80px; min-width: 60px; height: 8px; background: var(--rule); -webkit-mask-image: var(--segs); mask-image: var(--segs); }
.spot-progress i { display: block; width: 0; height: 100%; background: var(--acc); }
.spot-progress.run i { animation: fill-up 5s steps(20, end) forwards; }
.spot.is-held .spot-progress i { animation-play-state: paused; }
@keyframes fill-up { from { width: 0; } to { width: 100%; } }
.spot-arrows { display: inline-flex; gap: 8px; flex: none; }
.spot-arrows .icon-btn { width: 34px; height: 34px; }
.spot-arrows .icon-btn svg { width: 14px; height: 14px; }
.hero .spot + .actions { margin-top: 26px; }
@media (max-width: 480px) {
  .spot-slide { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .spot-art { width: 76px; height: 76px; padding: 6px; }
  .spot-nav { flex-wrap: wrap; }
  .spot-progress { order: 3; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .spot-progress { display: none; } }