/* Gantry · shell.css
   Header, workspace bar, loaders, start gates and shared shell chrome, on the
   digitalise.agency system: flat surfaces, one blue accent, Space Grotesk for
   display text, quiet borders, no glass and no gradients. */

/* ============================ HEADER ============================ */
  header.app{
    position:sticky;top:0;z-index:30;
    background:var(--surface-0);
    border-bottom:1px solid var(--border);
  }
  .header-inner{
    max-width:var(--maxw);margin:0 auto;padding:12px clamp(14px,4vw,32px) 10px;
    display:flex;align-items:center;gap:12px;flex-wrap:nowrap;overflow:clip visible;
  }
  .brand{display:flex;align-items:center;gap:12px;min-width:0;flex-shrink:0}
  .brand h1,.brand p{white-space:nowrap}
  .header-spacer{flex:1;min-width:8px}
  .logo{width:42px;height:42px;flex:none;display:grid;place-items:center}
  .logo img{width:42px;height:42px;border-radius:11px;display:block}
  .brand h1{font-size:1.05rem;margin:0;font-weight:600;letter-spacing:-0.01em;color:var(--ink-1)}
  .brand p{font-size:.76rem;margin:0;color:var(--ink-3);font-weight:500}
  .conn-pill{
    display:inline-flex;align-items:center;gap:8px;
    padding:7px 14px;border-radius:999px;font-size:.78rem;font-weight:600;
    border:1px solid var(--border);background:var(--surface-1);color:var(--ink-2);
    white-space:nowrap;flex-shrink:0;
  }
  .dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3);flex:none}
  .dot.live{background:var(--green);box-shadow:0 0 0 4px rgba(52,211,153,.16)}
  .dot.busy{background:var(--amber);box-shadow:0 0 0 4px rgba(251,191,36,.16);animation:pulse 1.1s infinite}
  .dot.err{background:var(--red);box-shadow:0 0 0 4px rgba(251,113,133,.16)}
  @keyframes pulse{50%{opacity:.35}}

  /* ============================ WORKSPACE BAR ============================
     The app's map, always on screen: one row of task-named items under the
     brand row. Replaces the dropdown, which hid every destination behind a
     click. Built by shell/navbar.js; these are only its clothes. On narrow
     screens the row scrolls sideways and navbar.js keeps the active item in
     view. */
  .tabs{
    max-width:var(--maxw);margin:0 auto;padding:0 clamp(14px,4vw,32px);
    display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar{display:none}
  .ws-item{
    display:flex;align-items:center;gap:9px;flex:none;
    background:none;border:none;border-bottom:2px solid transparent;
    color:var(--ink-3);font:inherit;text-align:left;
    padding:8px 14px 10px;cursor:pointer;
    transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
  }
  .ws-item svg{width:17px;height:17px;flex:none}
  .ws-item:hover{color:var(--ink-1)}
  .ws-item:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;border-radius:8px}
  .ws-item.active{color:var(--ink-1);border-bottom-color:var(--accent)}
  .ws-item.active svg{color:var(--accent-hover)}
  .ws-item-text{display:flex;flex-direction:column;gap:0;min-width:0}
  .ws-item-label{font-family:var(--font-display);font-size:.9rem;font-weight:600;white-space:nowrap}
  .ws-item-hint{font-size:.68rem;color:var(--ink-3);white-space:nowrap}
  .ws-item.active .ws-item-hint{color:var(--ink-2)}

  /* ============================ LAYOUT ============================ */
  main{max-width:var(--maxw);margin:0 auto;padding:clamp(18px,3vw,30px) clamp(14px,4vw,32px) 90px}
  .toolbar{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    margin-bottom:22px;flex-wrap:wrap;
  }
  .toolbar .count{font-size:.85rem;color:var(--ink-2);font-weight:500}
  .toolbar .count b{color:var(--ink-1);font-weight:700}

  /* ============================ LOADER ============================ */
  .panel{
    border:1px solid var(--border);background:var(--surface-1);border-radius:var(--radius);
    padding:46px 30px;text-align:center;
  }
  .spinner{
    width:46px;height:46px;border-radius:50%;margin:0 auto 20px;
    border:3px solid rgba(25,103,255,.18);border-top-color:var(--accent);
    animation:spin .9s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg)}}
  .panel h2{margin:0 0 8px;font-size:1.12rem;font-weight:600}
  .panel p{margin:4px 0;color:var(--ink-2);font-size:.9rem}
  .attempt-tag{
    display:inline-block;margin-top:12px;padding:5px 12px;border-radius:999px;
    background:var(--surface-2);border:1px solid var(--border);font-size:.78rem;color:var(--ink-2);
    font-variant-numeric:tabular-nums;
  }
  .btn-ghost{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    background:transparent;color:var(--ink-1);
    border:1px solid #33405c;padding:0 20px;height:42px;border-radius:var(--radius-sm);
    font-weight:600;cursor:pointer;font-size:.9rem;
    transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
  }
  .btn-ghost:hover{background:var(--surface-2)}
  .btn-ghost.sel-btn{height:auto;padding:3px 10px}