/* stefanpressconsulting.com - how.php's crew infographic (owner 2026-10-27: "great job on How it's Tested. Please try
   to make the same excellent efforts with How it's built"). The sibling of assets/ats.css: the same glass, type and
   motion, markup + this file only (no script, nothing inline - strict CSP). Every animation stops for
   prefers-reduced-motion, showing its end state. The status lamps are demos.css's (.lamp-beta, .lamp-inuse). */

  .crew {
    --ok: #5dffb0;
    --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.015));
    --glass-line: rgba(255, 255, 255, 0.09);
    position: relative;
    margin: 18px 0 30px;
    padding: 34px 30px 30px;
    border-radius: 28px;
    border: 1px solid var(--glass-line);
    background:
      radial-gradient(90% 70% at 50% 34%, rgba(74, 240, 255, 0.10), transparent 60%),
      radial-gradient(80% 80% at 100% 100%, rgba(160, 107, 255, 0.14), transparent 60%),
      rgba(8, 11, 22, 0.78);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
  }

  /* ---- the headline ---------------------------------------------------------------------------------------------- */
  .crew-head { text-align: center; margin: 0 auto 26px; max-width: 52ch; }
  .how .crew-kicker {
    margin: 0 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--cyan);
  }
  .crew-kicker .lanai-mark { letter-spacing: 0.02em; text-transform: none; font-size: 15px; color: #fff; }
  .page .how .crew-title {
    margin: 0; font-size: clamp(28px, 4.4vw, 44px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05;
    background: linear-gradient(92deg, #ffffff 0%, #cfe9ff 40%, var(--cyan) 72%, var(--violet) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .how .crew-sub { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
  .crew-sub b { color: #fff; font-weight: 700; }

  /* ---- the crew: Ground Control at the centre of an orbit of agents ------------------------------------------------ */
  .crew-map {
    position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto; gap: 14px 16px; padding: 8px 0;
  }
  .crew-map::before {                     /* the orbit round Ground Control (still: a turning ellipse swings wide) */
    content: ""; position: absolute; top: 24%; bottom: 24%; left: 22%; right: 22%; border-radius: 50%; pointer-events: none;
    border: 1px dashed rgba(74, 240, 255, 0.28);
  }
  .crew-hub {
    grid-column: 2 / span 2; grid-row: 2 / span 2; position: relative; z-index: 1; align-self: center;
    margin: 6px 10%; padding: 22px 22px 20px; border-radius: 24px; text-align: center;
    background: linear-gradient(160deg, rgba(74, 240, 255, 0.18), rgba(160, 107, 255, 0.18)), rgba(10, 14, 28, 0.9);
    border: 1px solid rgba(74, 240, 255, 0.35);
    box-shadow: 0 0 60px -10px rgba(74, 240, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
  .crew-rings { position: absolute; inset: 0; pointer-events: none; }
  .crew-rings i {                         /* Ground Control's signal, rippling out */
    position: absolute; inset: 0; border-radius: 24px; border: 1px solid rgba(74, 240, 255, 0.5); opacity: 0;
    animation: crew-ping 3.6s ease-out infinite;
  }
  .crew-rings i:nth-child(2) { animation-delay: 1.2s; }
  .crew-rings i:nth-child(3) { animation-delay: 2.4s; }
  @keyframes crew-ping {
    0%   { opacity: .7; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.35, 1.6); }
  }
  .how .crew-hub-name {
    display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 8px;
    font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #fff;
  }
  .how .crew-hub-role { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text); }

  .crew-node {
    position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; align-items: center;
    column-gap: 10px; padding: 12px 14px; border-radius: 16px;
    background: var(--glass), rgba(8, 11, 22, 0.7); border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s;
  }
  .crew-node:hover { transform: translateY(-3px); border-color: rgba(74, 240, 255, 0.35); }
  .crew-node .lamp { grid-row: 1 / span 2; animation: crew-blink 6s ease-in-out infinite; }
  .crew-name { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: #fff; overflow-wrap: break-word; }
  .crew-role { font: 500 10.5px/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--muted); }
  @keyframes crew-blink {                 /* Ground Control checks in with each agent in turn */
    0%, 8%, 100% { filter: none; transform: none; }
    4%           { filter: brightness(1.8); transform: scale(1.5); }
  }
  /* ten places round the hub: four above, two each side, two below the middle */
  .crew-node.s1  { grid-area: 1 / 1; }   .crew-node.s2  { grid-area: 1 / 2; }
  .crew-node.s3  { grid-area: 1 / 3; }   .crew-node.s4  { grid-area: 1 / 4; }
  .crew-node.s5  { grid-area: 2 / 4; }   .crew-node.s6  { grid-area: 3 / 4; }
  .crew-node.s7  { grid-area: 4 / 3; }   .crew-node.s8  { grid-area: 4 / 2; }
  .crew-node.s9  { grid-area: 3 / 1; }   .crew-node.s10 { grid-area: 2 / 1; }
  .crew-node.s2 .lamp  { animation-delay: .6s; }  .crew-node.s3 .lamp  { animation-delay: 1.2s; }
  .crew-node.s4 .lamp  { animation-delay: 1.8s; } .crew-node.s5 .lamp  { animation-delay: 2.4s; }
  .crew-node.s6 .lamp  { animation-delay: 3s; }   .crew-node.s7 .lamp  { animation-delay: 3.6s; }
  .crew-node.s8 .lamp  { animation-delay: 4.2s; } .crew-node.s9 .lamp  { animation-delay: 4.8s; }
  .crew-node.s10 .lamp { animation-delay: 5.4s; }

  /* ---- two machines and a real request, side by side ---------------------------------------------------------------- */
  .crew-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; margin-top: 22px; }
  .crew-row > * { min-width: 0; }       /* never wider than their column (Windows: 320 px ran ~11 px past the figure) */
  .crew-twin, .crew-thread {
    padding: 18px 20px 18px; border-radius: 22px; background: var(--glass); border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  .how .crew-label {
    margin: 0 0 16px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--muted);
  }
  .how .crew-note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
  .crew-ledger { list-style: none; margin: 14px 0 0; padding: 12px 14px; display: grid; gap: 8px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.06);
    font: 12px/1.35 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--text); }
  .crew-ledger li { display: flex; align-items: center; gap: 10px; }
  .crew-ledger i { flex: none; width: 8px; height: 8px; border-radius: 50%; }
  .crew-ledger .on-mac { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
  .crew-ledger .on-pc  { background: var(--violet); box-shadow: 0 0 8px var(--violet); }
  .crew-ledger .on-rec { background: var(--ok); box-shadow: 0 0 8px var(--ok); }

  .twin { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 10px; }
  .machine { display: flex; flex-direction: column; align-items: center; }
  .machine b { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
  .machine .screen {
    display: grid; gap: 5px; align-content: start; width: 96px; height: 62px; padding: 9px 9px;
    border-radius: 8px 8px 3px 3px; border: 2px solid rgba(255, 255, 255, 0.22);
    background: linear-gradient(180deg, #0f1730, #0a0f20);
  }
  .machine .screen i { display: block; height: 5px; border-radius: 3px; background: rgba(74, 240, 255, 0.35); }
  .machine .screen i:nth-child(2n) { width: 70%; background: rgba(160, 107, 255, 0.4); }
  .machine .screen i:nth-child(3) { width: 85%; }
  .machine.mac .base {                    /* a laptop's base */
    width: 120px; height: 6px; border-radius: 0 0 8px 8px; background: rgba(255, 255, 255, 0.22);
  }
  .machine.pc .stand {                    /* a monitor's stand */
    width: 30px; height: 6px; border-radius: 0 0 4px 4px; background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 6px 0 -1px rgba(255, 255, 255, 0.14);
  }
  .sync { position: relative; height: 40px; align-self: center; }
  .sync .wire {
    position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px;
    background: linear-gradient(90deg, rgba(74, 240, 255, 0.5), rgba(160, 107, 255, 0.5));
  }
  .sync .pkt {
    position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 12px var(--cyan);
  }
  .sync .pkt.a { animation: crew-ab 2.8s ease-in-out infinite; }
  .sync .pkt.b { animation: crew-ba 2.8s ease-in-out 1.4s infinite; box-shadow: 0 0 12px var(--violet); }
  @keyframes crew-ab { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
  @keyframes crew-ba { 0% { left: 100%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 0; opacity: 0; } }
  .sync em {
    position: absolute; left: 50%; top: 0; transform: translateX(-50%); font: 600 10.5px/1 ui-monospace, Menlo, monospace;
    font-style: normal; letter-spacing: 0.1em; color: var(--cyan);
  }

  /* the thread: one real request, message by message */
  .crew-thread ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .crew-thread li {
    display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; align-items: baseline; padding: 9px 12px;
    border-radius: 14px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.06);
    opacity: 0; animation: crew-msg .45s ease-out both;
  }
  .crew-thread li b { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
  .crew-thread li span { font-size: 13px; line-height: 1.45; color: var(--text); }
  .crew-thread .who-owner b { color: #ffc857; }
  .crew-thread .who-agent b { color: var(--cyan); }
  .crew-thread .who-twin b  { color: var(--violet); }
  .crew-thread .who-gc b    { color: #fff; }
  .crew-thread .who-live    { border-color: rgba(93, 255, 176, 0.35); background: rgba(93, 255, 176, 0.06); }
  .crew-thread .who-live b  { color: var(--ok); }
  .crew-thread .who-live em {
    padding: 1px 8px; border-radius: 999px; font: 700 11.5px/1.5 ui-monospace, Menlo, monospace; font-style: normal;
    letter-spacing: 0.04em; color: #052014; background: var(--ok);
  }
  .crew-thread li:nth-child(1) { animation-delay: .3s; }
  .crew-thread li:nth-child(2) { animation-delay: 1s; }
  .crew-thread li:nth-child(3) { animation-delay: 1.7s; }
  .crew-thread li:nth-child(4) { animation-delay: 2.4s; }
  .crew-thread li:nth-child(5) { animation-delay: 3.1s; }
  @keyframes crew-msg { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

  /* ---- the standard --------------------------------------------------------------------------------------------- */
  .crew-facts { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .crew-facts li { padding: 16px 18px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-line); }
  .crew-facts b {
    display: block; margin-bottom: 4px; font-size: 17px; font-weight: 750; letter-spacing: -0.015em;
    background: linear-gradient(90deg, #fff, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .crew-facts span { font-size: 13px; line-height: 1.5; color: var(--muted); }
  .crew-facts .lanai-mark { color: var(--text); }

  /* ---- narrower screens: the hub on top, the crew in two columns, the rest stacked ---------------------------- */
  @media (max-width: 900px) {
    .crew-row { grid-template-columns: minmax(0, 1fr); }
    .crew-facts { grid-template-columns: 1fr; gap: 10px; }
  }
  @media (max-width: 700px) {
    .crew-map { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 10px; }
    .crew-map::before { display: none; }
    .crew-hub { grid-column: 1 / -1; grid-row: auto; margin: 0 0 6px; }
    .crew-map .crew-node { grid-area: auto; }
  }
  @media (max-width: 480px) {             /* one row each, the role at the right: names never break mid-word */
    .crew-map { grid-template-columns: 1fr; gap: 8px; }
    .crew-node { grid-template-columns: auto 1fr auto; padding: 11px 14px; }
    .crew-node .lamp { grid-row: auto; }
    .crew-role { justify-self: end; }
  }
  @media (max-width: 560px) {
    .crew { padding: 26px 16px 18px; border-radius: 22px; }
    .crew-thread li { grid-template-columns: 1fr; gap: 2px; }
  }

  /* ---- Ground Control on Claude Code (owner 2026-10-28): five lanes, seven steps along them --------------------- */
  .gcf { margin-top: 26px; }
  .gcf-lanes {
    list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 8px 10px;
    grid-template-columns: 8.5em repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(52px, auto));
  }
  .gcf-lane {                             /* the lane's name, and a faint track across the row */
    grid-column: 1 / -1; display: flex; align-items: center; padding: 0 12px; border-radius: 14px;
    font: 600 11px/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--muted); background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.05);
  }
  .gcf-lane .lanai-mark { text-transform: none; letter-spacing: 0.02em; color: var(--text); }
  .gcf-lane.l-owner { grid-row: 1; } .gcf-lane.l-gc { grid-row: 2; } .gcf-lane.l-app { grid-row: 3; }
  .gcf-lane.l-twin { grid-row: 4; }  .gcf-lane.l-hub { grid-row: 5; }
  .gcf-step {
    position: relative; z-index: 1; align-self: center; display: grid; grid-template-columns: auto 1fr; gap: 6px;
    align-items: start; margin: 6px 0; padding: 8px 9px; border-radius: 12px;
    background: rgba(8, 11, 22, 0.92); border: 1px solid rgba(74, 240, 255, 0.3);
    box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.8); opacity: 0; animation: crew-msg .45s ease-out both;
  }
  .gcf-step b {
    display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
    font: 700 11px/1 ui-monospace, Menlo, monospace; color: #04131a; background: var(--cyan);
  }
  .gcf-step span { font-size: 12px; line-height: 1.35; color: var(--text); }
  .gcf-step em { display: none; }          /* the lane names it on a wide screen; shown when the lanes stack */
  .gcf-step.l-owner { grid-row: 1; border-color: rgba(255, 200, 87, 0.45); }
  .gcf-step.l-owner b { background: #ffc857; }
  .gcf-step.l-gc { grid-row: 2; border-color: rgba(255, 255, 255, 0.35); }
  .gcf-step.l-gc b { background: #fff; }
  .gcf-step.l-app { grid-row: 3; }
  .gcf-step.l-twin { grid-row: 4; border-color: rgba(160, 107, 255, 0.45); }
  .gcf-step.l-twin b { background: var(--violet); }
  .gcf-step.l-hub { grid-row: 5; border-color: rgba(93, 255, 176, 0.4); }
  .gcf-step.l-hub b { background: var(--ok); }
  /* each step spans two of the eight step columns, one column on from the last: a staircase across the lanes */
  .gcf-step.c1 { grid-column: 2 / span 2; animation-delay: .2s; }  .gcf-step.c2 { grid-column: 3 / span 2; animation-delay: .7s; }
  .gcf-step.c3 { grid-column: 4 / span 2; animation-delay: 1.2s; } .gcf-step.c4 { grid-column: 5 / span 2; animation-delay: 1.7s; }
  .gcf-step.c5 { grid-column: 6 / span 2; animation-delay: 2.2s; } .gcf-step.c6 { grid-column: 7 / span 2; animation-delay: 2.7s; }
  .gcf-step.c7 { grid-column: 8 / span 2; animation-delay: 3.2s; }
  .gcf-facts b { font-size: 16px; }
  @media (max-width: 1000px) {            /* the lanes stack: one step per row, its lane named on it */
    .gcf-lanes { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 8px; }
    .gcf-lane { display: none; }
    .gcf-step { grid-row: auto !important; grid-column: auto !important; margin: 0; padding: 10px 12px; }
    .gcf-step span { font-size: 13px; }
    .gcf-step em { display: inline; font-style: normal; font-weight: 700; color: #fff; }
  }

  @media (prefers-reduced-motion: reduce) {
    .gcf-step { animation: none; opacity: 1; }
    .crew-rings i { animation: none; opacity: 0; }
    .crew-node { transition: none; }
    .crew-node .lamp { animation: none; }
    .sync .pkt.a { animation: none; opacity: 0; }
    .sync .pkt.b { animation: none; opacity: 0; }
    .crew-thread li { animation: none; opacity: 1; }
  }