/* Sandbox (board X-sandbox): a simulated day at the sample company. */
.sb{padding-top:72px}
.sb-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end}
.sb-live{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;color:#1e7a46}
.sb-pulse{width:8px;height:8px;border-radius:50%;background:#1e7a46;animation:sb-live 2s ease-in-out infinite}
.is-paused .sb-pulse{animation:none;opacity:.5}
@keyframes sb-live{0%,100%{opacity:1}50%{opacity:.35}}
.sb-pause{margin-left:6px;height:28px;padding:0 12px;border-radius:999px;border:1px solid #dfe3ec;background:#fff;color:#131417;font-size:12.5px;font-weight:700}
.sb h1{margin:14px 0 0;font-size:clamp(44px,5.6vw,72px);line-height:.92;font-weight:800;letter-spacing:-.055em;text-wrap:balance}
.sb-label{display:inline-block;margin:18px 0 0;font-size:12.5px;font-weight:700;color:#4a4f58;background:#fff;border:1px solid #dfe3ec;border-radius:6px;padding:4px 9px}
.sb-head .lead{max-width:46ch}
.sb-grid{margin-top:44px;display:grid;grid-template-columns:290px minmax(0,1fr) 320px;gap:24px;align-items:start}

.sb-ctitle{font-size:13.5px;font-weight:700;color:#4a4f58}
.sb-big{margin-top:6px;font-size:76px;line-height:.95;font-weight:800;letter-spacing:-.055em}
.sb-stats{margin:26px 0 0;border-top:1px solid #dfe3ec}
.sb-stats div{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid #dfe3ec;font-size:15px}
.sb-stats dt{color:#4a4f58}
.sb-stats dd{margin:0;font-weight:700}
.sb-made{margin:12px 0 0;font-size:12.5px;color:#6b717b}

.sb-stream{background:#fff;border:1px solid #dfe3ec;border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(19,20,23,.08)}
.sb-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px}
.sb-table th{padding:14px 8px 14px 0;text-align:left;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#6b717b}
.sb-table td{height:58px;padding:0 8px 0 0;border-top:1px solid #eef0f4;vertical-align:middle}
.sb-table th:first-child,.sb-table td:first-child{padding-left:20px}
.sb-table th:last-child,.sb-table td:last-child{width:158px;padding-right:20px}
.sb-table .sb-time{width:84px}
.sb-table .sb-src{width:124px;font-weight:700}
td.sb-time{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:13px;color:#4a4f58}
.sb-what{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-table tr{transition:background-color 600ms ease}
.sb-table tr.hot{background:#f2f5fe}
.sb-table tr.new{animation:sb-in 500ms cubic-bezier(.16,1,.3,1)}
@keyframes sb-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.sb-st{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;white-space:nowrap;color:#2450e8}
.sb-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none;background:currentColor}
.sb-st[data-st="ran"]{color:#1e7a46}
.sb-st[data-st="stop"]{color:#b42318}
.sb-st[data-st="wait"]{color:#131417}
.sb-st[data-st="wait"] .sb-dot,.sb-ydot{background:#fff252;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #131417}

.sb-card{background:#fff;border-radius:14px;box-shadow:0 2px 6px rgba(19,20,23,.08),0 30px 70px rgba(19,20,23,.16);overflow:hidden}
.sb-chead{padding:16px 18px 0;display:flex;align-items:center;gap:10px;font-size:14px}
.sb-tag{margin-left:auto;font-size:11.5px;font-weight:700;color:#4a4f58;background:#eef0f4;border-radius:5px;padding:3px 7px}
.sb-ydot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}
.is-done .sb-ydot{background:#1e7a46;box-shadow:none}
.sb-ask{margin:0;padding:10px 18px 0;font-size:20px;line-height:1.2;font-weight:800;letter-spacing:-.025em}
.sb-why{margin:0;padding:8px 18px 0;font-size:14px;line-height:1.45;color:#4a4f58}
.sb-cfoot{margin-top:14px;padding:12px 18px 16px;border-top:1px solid #dfe3ec;display:flex;align-items:center;gap:10px;min-height:68px;box-sizing:border-box}
.sb-ystatus{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:#131417}
.is-done .sb-ystatus{color:#1e7a46}
.sb-approve{margin-left:auto;height:40px;padding:0 18px;font-size:14px;font-weight:800}
.sb-record{margin-top:12px;background:#fff;border:1px solid #dfe3ec;border-radius:12px;padding:12px 16px;display:grid;grid-template-columns:1fr auto;gap:2px 12px;font-size:13px;animation:sb-in 400ms cubic-bezier(.16,1,.3,1)}
.sb-record b{font-weight:650}
.sb-rid{font-family:ui-monospace,"SF Mono",Menlo,monospace;color:#6b717b}
.sb-ran{color:#4a4f58}
.sb-undo{font-weight:700;text-decoration:underline;text-underline-offset:3px}

@media (max-width:1180px){
  .sb-grid{grid-template-columns:minmax(0,1fr) 320px}
  .sb-count{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 40px;align-items:end}
  .sb-stats{margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 24px}
  .sb-made{grid-column:1/-1}
}
@media (max-width:900px){
  .sb{padding-top:40px}
  .sb-head{grid-template-columns:1fr;gap:20px}
  .sb-grid{grid-template-columns:1fr;margin-top:32px}
  .sb-count{display:block}
  .sb-big{font-size:56px}
  .sb-stats{margin-top:18px;display:block}
  .sb-turn{order:-1}
}
@media (max-width:600px){
  .sb-table .sb-time{display:none}
  .sb-table .sb-src{width:96px}
  .sb-table th:last-child,.sb-table td:last-child{width:122px;padding-right:14px}
  .sb-table .sb-src{padding-left:14px}
  .sb-what{white-space:normal;padding:10px 8px 10px 0!important;line-height:1.35}
  .sb-st{white-space:normal;font-size:12px}
}
@media (prefers-reduced-motion:reduce){.sb-pulse{animation:none}.sb-table tr,.sb-record{animation:none!important;transition:none!important}}