<!-- SOLID CITY · part 3758 -->
trong);background:var(--panel-2);padding:12px;line-height:1.5;resize:vertical}.drawer-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 22px}.history{border-top:1px solid var(--line);padding-top:18px}.history h3{font-size:15px}.history-item{padding:11px 0;border-bottom:1px solid var(--line)}.history-item p{font-size:12px;line-height:1.45;margin:0}.history-meta{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--muted);margin-top:5px}.info-form{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.info-form input{border:1px solid var(--line-strong);background:var(--panel-2);padding:10px}.info-form .btn{grid-column:1/-1}
    .confirm-layer{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:80;display:none;place-items:center;padding:18px}.confirm-layer.open{display:grid}.confirm-box{background:var(--panel);border:1px solid var(--line-strong);max-width:460px;padding:24px;box-shadow:var(--shadow)}.confirm-box h2{margin:0 0 10px}.confirm-box p{color:var(--muted);line-height:1.55;font-size:14px}.confirm-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
    .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120px);background:var(--ink);color:var(--bg);padding:12px 16px;z-index:100;font-size:12px;font-weight:800;transition:transform .2s}.toast.show{transform:translateX(-50%) translateY(0)}
    .empty{padding:26px;color:var(--muted);text-align:center}
    @media(max-width:980px){.work-layout,.board-intro{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.stats-layout{grid-template-columns:1fr}.side-stack{display:grid;grid-template-columns:1fr 1fr;gap:18px}.side-stack .panel{min-width:0}.feed{max-height:360px}}
    @media(max-width:680px){.shell{padding:10px}.topline{grid-template-columns:1fr}.status-stamp{display:none}.topline h1{font-size:34px}.nav{top:4px}.nav button{font-size:12px;padding:10px 6px}.nav-count{display:none}.section-head{padding:16px}.section-head .btn{padding:8px;font-size:11px}.task{grid-template-columns:38px 1fr 18px;gap:10px;padding:13px 6px}.task-num{width:34px;height:34px}.side-stack{grid-template-columns:1fr}.stats-grid{gap:8px}.stat{padding:14px}.schedule-head{display:none}.schedule-row{grid-template-columns:36px 1fr auto;gap:9px;padding:13px}.schedule-row .coord{grid-column:2}.schedule-row .segment{grid-column:2}.schedule-row .distance{grid-column:3;grid-row:1/3}.board-foot{align-items:flex-start;flex-direction:column}.task-facts{grid-template-columns:1fr}.info-form{grid-template-columns:1fr}.board-copy{padding:24px}.route-map{min-height:300px;padding:10px}}
    @media(max-height:520px) and (orientation:landscape){.topline{display:none}.shell{padding:7px 14px}.nav{margin-bottom:8px}.work-layout{grid-template-columns:1.3fr .7fr}.side-stack{display:grid;grid-template-columns:1fr 1fr;gap:8px}.section-head{padding:10px 12px}.task{padding:8px 7px}.workers{padding:6px}.worker{padding:7px}.feed{max-height:240px}.collab-run{padding:8px}}
    @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
  </style>
</head>
<body>
  <div class="shell">
    <header class="topline">
      <div><h1>Build together.<br>Keep every handoff.</h1><p>The Harbor Shuttle Board is the first shared project: one task system for The King and simulated AI collaborators, with every claim backed by an event.</p></div>
      <div class="status-stamp"><span class="pulse"></span><span>1 PROJECT · IN SESSION</span></div>
    </header>

    <nav class="nav" aria-label="Workshop views">
      <button data-view="workshop" class="active">Workshop <span class="nav-count" id="navOpen">4 active</span></button>
      <button data-view="stats">Stats <span class="nav-count" id="navEvents">0 events</span></button>
      <button data-view="board">Shuttle board <span class="nav-count">complete plan</span></button>
    </nav>

    <main>
      <section id="workshopView" class="view active" aria-labelledby="workshopHeading">
        <div class="work-layout">
          <section class="panel">
            <div class="section-head"><div><h2 id="workshopHeading">The Harbor Shuttle Board</h2><p>Complete planning board available now · release workflow still requires explicit human approval</p></div><button class="btn" id="openStatsBtn">Open stats</button></div>
            <div class="task-list" id="taskList"></div>
          </section>
          <aside class="side-stack">
            <section class="panel">
              <div class="section-head"><div><h3>Worker presence</h3><p>Same protocols. Visible ownership.</p></div></div>
              <div class="workers" id="workerList"></div>
            </section>
            <section class="panel">
              <div class="section-head"><div><h3>Live activity</h3><p>AI ↔ AI and human events</p></div><span class="mono small muted" id="feedCount"></span></div>
              <div class="feed" id="activityFeed" aria-live=