/* TD Industry — Skyhook raid rota.
 *
 * Deliberately defines NO design tokens of its own: colours, fonts and the shared atoms
 * (.card, .stat, .eyebrow, .doc-tag, .add-btn, .pill) all come from base.css, so this tab
 * inherits the app's look instead of maintaining a near-identical copy of it.
 *
 * Everything here is namespaced `sk-`. That matters more than it looks: this stylesheet
 * loads AFTER base.css, so a bare `.stat` or `.corner` rule would silently restyle the
 * Dashboard and the login gate.
 *
 * The only genuinely new colours are the two reservoir products. */
  :root{
    --sk-magma:#e08a4a; --sk-magma-dim:#7a4620;
    --sk-ice:#6fc6e0;   --sk-ice-dim:#2c5566;
  }

  .sk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px}
  .sk-lead{max-width:76ch;margin-bottom:20px}
  .sk-note{text-align:left;margin-top:18px}

  /* stats — .stat itself is base.css; only the grid and the value modifiers are ours */
  .sk-stats{grid-template-columns:repeat(4,1fr);margin-bottom:18px}
  .sk-stats .v.sk-mono{font-family:var(--mono);font-size:1.15rem;font-weight:600;letter-spacing:-.01em}
  .sk-stats .v.sk-warn{color:var(--crit)}
  .sk-stats .v.sk-good{color:var(--emerald)}
  .sk-stats .v.sk-cyan{color:var(--blueprint)}
  .sk-live-txt{color:var(--crit)}

  /* uncovered-windows banner */
  .sk-alert{display:flex;align-items:center;gap:13px;border:1px solid var(--oxblood);
    background:rgba(94,22,34,.14);border-radius:8px;padding:14px 16px;margin-bottom:18px}
  .sk-alert-ic{width:30px;height:30px;flex:0 0 auto;border-radius:6px;border:1px solid var(--crit);
    display:flex;align-items:center;justify-content:center;color:var(--crit)}
  .sk-alert-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
  .sk-alert-tx{flex:1;font-size:.88rem;color:var(--parchment)}
  .sk-alert-tx b{font-weight:500}
  .sk-alert-tx small{display:block;font-family:var(--mono);font-size:.68rem;color:var(--slate);margin-top:3px}

  /* filters */
  .sk-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
  .sk-filters button{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--slate);
    background:var(--void2);border:1px solid var(--line);border-radius:5px;padding:8px 14px;
    transition:color .16s,border-color .16s,background .16s}
  .sk-filters button:hover{color:var(--parchment);border-color:var(--blueprint-dim)}
  .sk-filters button.on{color:var(--blueprint);border-color:var(--blueprint-dim);background:rgba(79,184,212,.09)}
  .sk-filters .n{color:var(--slate-dim);margin-left:2px}

  /* the rota */
  .sk-list{display:flex;flex-direction:column;gap:10px}
  .sk-row{display:flex;align-items:center;gap:16px;padding:15px 18px;border-radius:8px;
    background:linear-gradient(180deg,var(--panel),var(--midnight));
    border:1px solid var(--line);border-left:3px solid var(--line)}
  .sk-row[data-edge="ok"]{border-left-color:var(--emerald)}
  .sk-row[data-edge="warn"]{border-left-color:var(--gold)}
  .sk-row[data-edge="crit"]{border-left-color:var(--crit)}
  .sk-row.live{border-color:var(--oxblood);box-shadow:0 0 26px rgba(224,116,142,.09)}

  .sk-orb{width:40px;height:40px;border-radius:50%;flex:0 0 auto;position:relative;border:1px solid var(--line)}
  .sk-orb.lava{background:radial-gradient(circle at 38% 32%,#f2ae76,var(--sk-magma) 44%,#6d2f10 100%);border-color:var(--sk-magma-dim)}
  .sk-orb.ice{background:radial-gradient(circle at 38% 32%,#c7edf7,var(--sk-ice) 46%,#1c4658 100%);border-color:var(--sk-ice-dim)}
  .sk-orb.live::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid currentColor;animation:sk-ring 1.8s ease-out infinite}
  .sk-orb.lava.live::after{color:var(--sk-magma)}
  .sk-orb.ice.live::after{color:var(--sk-ice)}
  @keyframes sk-ring{0%{transform:scale(1);opacity:.65}100%{transform:scale(1.5);opacity:0}}

  .sk-main{flex:1;min-width:0}
  .sk-loc{font-size:.97rem;color:var(--parchment);font-weight:500}
  .sk-sys{font-family:var(--mono);font-size:.66rem;color:var(--slate);margin-left:8px;font-weight:400}
  .sk-prod{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:5px;font-family:var(--mono);font-size:.72rem}
  .sk-prod.lava .doc-tag{color:var(--sk-magma);border-color:var(--sk-magma-dim);background:rgba(224,138,74,.08)}
  .sk-prod.ice .doc-tag{color:var(--sk-ice);border-color:var(--sk-ice-dim);background:rgba(111,198,224,.08)}
  .sk-est{color:var(--slate)}

  .sk-time{flex:0 0 auto;min-width:150px;text-align:right}
  .sk-t-k{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
  .sk-t-v{font-family:var(--mono);font-weight:600;font-size:.98rem;color:var(--parchment);margin-top:4px;
    font-variant-numeric:tabular-nums}
  .sk-t-v.sk-warn,.sk-t-k.sk-warn{color:var(--crit)}
  .sk-cyc{font-family:var(--mono);font-size:.58rem;color:var(--slate-dim);margin-top:4px}

  .sk-cover{flex:0 0 auto;min-width:168px;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
  .sk-by{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.74rem;color:var(--parchment)}
  .sk-by-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:14ch}
  .sk-open{font-family:var(--mono);font-size:.7rem;color:var(--gold)}
  .sk-open.urgent{color:var(--crit)}
  .sk-acts{display:flex;align-items:center;gap:8px}
  .add-btn.sk-sm{height:32px;padding:0 14px;font-size:.66rem}
  .sk-drop{font-family:var(--mono);font-size:.66rem;color:var(--slate);background:transparent;
    border:1px solid var(--line);border-radius:5px;padding:7px 12px;transition:color .16s,border-color .16s}
  .sk-drop:hover{color:var(--crit);border-color:var(--oxblood)}
  .sk-cov-note{font-family:var(--mono);font-size:.6rem;color:var(--slate-dim)}
  .sk-row button:focus-visible,.sk-filters button:focus-visible{outline:2px solid var(--blueprint);outline-offset:2px}

  /* ---- admin: skyhook configuration ---- */
  .sk-adm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:10px;margin-bottom:10px}
  .sk-adm-f{display:flex;flex-direction:column;gap:5px}
  .sk-adm-f label{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
  .sk-adm-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 13px;border-radius:7px;
    background:var(--void2);border:1px solid var(--line-soft);margin-bottom:6px;transition:border-color .16s}
  .sk-adm-row:hover{border-color:var(--line)}
  .sk-adm-row:last-child{margin-bottom:0}
  .sk-adm-row .sk-adm-nm{font-weight:500;color:var(--parchment);min-width:130px}
  .sk-adm-row .sk-adm-meta{font-family:var(--mono);font-size:.66rem;color:var(--slate);flex:1}
  .sk-adm-row.off{opacity:.55}

  /* ---- admin: Discord announcement preview ----
   * Approximates a Discord embed (dark surface, coloured left spine, field grid) so an
   * admin can judge the post without sending one. Colours come from the embed itself via
   * the --dc custom property, which is the same value the server sends. */
  .sk-nt-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
  .sk-adm-edit{display:flex;flex-direction:column}
  .doc-tag.dc-tag{color:#7d8cf5;border-color:#4a55b8}
  .dc-card{display:flex;max-width:460px;border-radius:5px;overflow:hidden;background:#2b2d31;
    border:1px solid #1e1f22;font-family:var(--body)}
  .dc-bar{width:4px;flex:0 0 auto;background:var(--dc,#5865f2)}
  .dc-body{padding:13px 16px 15px;min-width:0}
  .dc-author{font-size:.74rem;font-weight:600;color:#dbdee1;margin-bottom:7px}
  .dc-title{font-size:.98rem;font-weight:600;color:#f2f3f5;line-height:1.3}
  .dc-desc{font-size:.83rem;color:#dbdee1;margin-top:6px;line-height:1.45}
  .dc-desc b{color:#fff;font-weight:600}
  .dc-fields{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px}
  .dc-field{min-width:88px}
  .dc-fname{font-size:.76rem;font-weight:600;color:#f2f3f5}
  .dc-fval{font-size:.8rem;color:#dbdee1;margin-top:2px;line-height:1.35}
  .dc-fval b{color:#fff;font-weight:600}
  .dc-foot{font-size:.69rem;color:#949ba4;margin-top:13px}

  @media(max-width:1080px){
    .sk-stats{grid-template-columns:repeat(2,1fr)}
  }
  @media(max-width:720px){
    .sk-row{flex-wrap:wrap}
    .sk-main{flex:1 1 60%}
    .sk-time{flex:1 1 auto;text-align:left;min-width:0}
    .sk-cover{flex:1 1 100%;flex-direction:row;align-items:center;justify-content:space-between;min-width:0}
  }
  @media(prefers-reduced-motion:reduce){.sk-orb.live::after{animation:none}}