/* TP-SURFACES-V1
   Canonical workspace patterns composed from TP primitives and compounds.
   Surface classes define arrangement, not capability.
*/

.tp-surface{
  position:relative;
  min-width:0;
  border:1px solid var(--tp-struct);
  border-radius:var(--tp-radius);
  background:rgba(8,10,13,.72);
  overflow:hidden;
}
.tp-surface__bar{
  min-height:38px;
  padding:8px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--tp-struct);
  background:#0a0d10;
  color:var(--tp-ghost);
  font:500 8px/1.3 "Roboto Mono",ui-monospace,monospace;
  letter-spacing:.11em;
}
.tp-surface__bar strong{color:var(--tp-frost);font-weight:600}
.tp-surface__pane{min-width:0;min-height:0}
.tp-surface__section{
  min-width:0;
  padding:12px;
  border:1px solid var(--tp-struct);
  border-radius:4px;
  background:rgba(17,21,26,.54);
}
.tp-surface__section>header{
  margin:-12px -12px 12px;
  padding:8px 10px;
  border-bottom:1px solid var(--tp-struct);
  color:var(--tp-ghost);
  font:500 8px/1.3 "Roboto Mono",ui-monospace,monospace;
  letter-spacing:.1em;
}

/* OPERATOR CONSOLE ------------------------------------------------------- */
.tp-surface--operator{
  display:grid;
  grid-template-columns:190px minmax(0,1fr) 280px;
  grid-template-rows:auto minmax(420px,1fr) 180px;
  grid-template-areas:
    "bar bar bar"
    "rail primary inspect"
    "rail events inspect";
}
.tp-surface--operator>.tp-surface__bar{grid-area:bar}
.tp-surface--operator>.tp-surface__rail{grid-area:rail;border-right:1px solid var(--tp-struct);padding:10px;background:#090c0f}
.tp-surface--operator>.tp-surface__primary{grid-area:primary;padding:12px}
.tp-surface--operator>.tp-surface__inspect{grid-area:inspect;border-left:1px solid var(--tp-struct);padding:12px}
.tp-surface--operator>.tp-surface__events{grid-area:events;border-top:1px solid var(--tp-struct);padding:10px 12px}

/* INVESTIGATION WORKSPACE ------------------------------------------------ */
.tp-surface--investigation{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);
  grid-template-rows:auto auto minmax(360px,1fr) auto;
  grid-template-areas:
    "bar bar"
    "context context"
    "graph evidence"
    "finding finding";
}
.tp-surface--investigation>.tp-surface__bar{grid-area:bar}
.tp-surface--investigation>.tp-surface__context{grid-area:context;padding:10px;border-bottom:1px solid var(--tp-struct)}
.tp-surface--investigation>.tp-surface__graph{grid-area:graph;padding:12px}
.tp-surface--investigation>.tp-surface__evidence{grid-area:evidence;padding:12px;border-left:1px solid var(--tp-struct)}
.tp-surface--investigation>.tp-surface__finding{grid-area:finding;padding:12px;border-top:1px solid var(--tp-struct)}

/* THREAT HUNT WORKSPACE -------------------------------------------------- */
.tp-surface--hunt{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  grid-template-rows:auto auto minmax(340px,1fr);
  grid-template-areas:
    "bar bar"
    "query query"
    "stream timeline";
}
.tp-surface--hunt>.tp-surface__bar{grid-area:bar}
.tp-surface--hunt>.tp-surface__query{grid-area:query;padding:10px;border-bottom:1px solid var(--tp-struct)}
.tp-surface--hunt>.tp-surface__stream{grid-area:stream;padding:12px}
.tp-surface--hunt>.tp-surface__timeline{grid-area:timeline;padding:12px;border-left:1px solid var(--tp-struct)}

/* NODE OPERATIONS SURFACE ------------------------------------------------ */
.tp-surface--node-ops{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
  grid-template-rows:auto minmax(360px,1fr) 190px;
  grid-template-areas:
    "bar bar"
    "topology dossier"
    "command dossier";
}
.tp-surface--node-ops>.tp-surface__bar{grid-area:bar}
.tp-surface--node-ops>.tp-surface__topology{grid-area:topology;padding:12px}
.tp-surface--node-ops>.tp-surface__dossier{grid-area:dossier;padding:12px;border-left:1px solid var(--tp-struct)}
.tp-surface--node-ops>.tp-surface__command{grid-area:command;padding:12px;border-top:1px solid var(--tp-struct)}

/* EVIDENCE REVIEW -------------------------------------------------------- */
.tp-surface--evidence{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
  grid-template-rows:auto minmax(360px,1fr) auto;
  grid-template-areas:
    "bar bar"
    "ledger inspect"
    "finding finding";
}
.tp-surface--evidence>.tp-surface__bar{grid-area:bar}
.tp-surface--evidence>.tp-surface__ledger{grid-area:ledger;padding:12px}
.tp-surface--evidence>.tp-surface__inspect{grid-area:inspect;padding:12px;border-left:1px solid var(--tp-struct)}
.tp-surface--evidence>.tp-surface__finding{grid-area:finding;padding:12px;border-top:1px solid var(--tp-struct)}

/* LEARNING / TEACHING ---------------------------------------------------- */
.tp-surface--learning{
  display:grid;
  grid-template-columns:200px minmax(0,1fr) minmax(280px,.55fr);
  grid-template-rows:auto minmax(420px,1fr);
  grid-template-areas:
    "bar bar bar"
    "rail lesson practice";
}
.tp-surface--learning>.tp-surface__bar{grid-area:bar}
.tp-surface--learning>.tp-surface__rail{grid-area:rail;padding:10px;border-right:1px solid var(--tp-struct);background:#090c0f}
.tp-surface--learning>.tp-surface__lesson{grid-area:lesson;padding:18px}
.tp-surface--learning>.tp-surface__practice{grid-area:practice;padding:12px;border-left:1px solid var(--tp-struct)}

/* COMMAND CENTER --------------------------------------------------------- */
.tp-surface--command-center{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(320px,.5fr);
  grid-template-rows:auto auto minmax(360px,1fr) 190px;
  grid-template-areas:
    "bar bar"
    "state state"
    "topology stream"
    "command stream";
}
.tp-surface--command-center>.tp-surface__bar{grid-area:bar}
.tp-surface--command-center>.tp-surface__state{grid-area:state;padding:10px;border-bottom:1px solid var(--tp-struct)}
.tp-surface--command-center>.tp-surface__topology{grid-area:topology;padding:12px}
.tp-surface--command-center>.tp-surface__stream{grid-area:stream;padding:12px;border-left:1px solid var(--tp-struct)}
.tp-surface--command-center>.tp-surface__command{grid-area:command;padding:12px;border-top:1px solid var(--tp-struct)}

/* SURFACE SEMANTIC MARKERS ----------------------------------------------- */
.tp-surface[data-surface="operator-console"]{--tp-surface-kind:"operator-console"}
.tp-surface[data-surface="investigation-workspace"]{--tp-surface-kind:"investigation-workspace"}
.tp-surface[data-surface="threat-hunt-workspace"]{--tp-surface-kind:"threat-hunt-workspace"}
.tp-surface[data-surface="node-operations"]{--tp-surface-kind:"node-operations"}
.tp-surface[data-surface="evidence-review"]{--tp-surface-kind:"evidence-review"}
.tp-surface[data-surface="learning"]{--tp-surface-kind:"learning"}
.tp-surface[data-surface="command-center"]{--tp-surface-kind:"command-center"}

@media(max-width:980px){
  .tp-surface--operator{
    grid-template-columns:160px minmax(0,1fr);
    grid-template-rows:auto minmax(360px,1fr) auto auto;
    grid-template-areas:"bar bar" "rail primary" "rail events" "inspect inspect";
  }
  .tp-surface--operator>.tp-surface__inspect{border-left:0;border-top:1px solid var(--tp-struct)}
  .tp-surface--learning{
    grid-template-columns:160px minmax(0,1fr);
    grid-template-rows:auto minmax(360px,1fr) auto;
    grid-template-areas:"bar bar" "rail lesson" "practice practice";
  }
  .tp-surface--learning>.tp-surface__practice{border-left:0;border-top:1px solid var(--tp-struct)}
}
@media(max-width:760px){
  .tp-surface--investigation,.tp-surface--hunt,.tp-surface--node-ops,.tp-surface--evidence,.tp-surface--command-center{
    display:block;
  }
  .tp-surface--investigation>*,
  .tp-surface--hunt>*,
  .tp-surface--node-ops>*,
  .tp-surface--evidence>*,
  .tp-surface--command-center>*{
    border-left:0!important;
    border-right:0!important;
    border-top:1px solid var(--tp-struct);
  }
  .tp-surface--investigation>.tp-surface__bar,
  .tp-surface--hunt>.tp-surface__bar,
  .tp-surface--node-ops>.tp-surface__bar,
  .tp-surface--evidence>.tp-surface__bar,
  .tp-surface--command-center>.tp-surface__bar{border-top:0}
}
@media(max-width:620px){
  .tp-surface--operator,.tp-surface--learning{display:block}
  .tp-surface--operator>*,
  .tp-surface--learning>*{border-left:0!important;border-right:0!important;border-top:1px solid var(--tp-struct)}
  .tp-surface--operator>.tp-surface__bar,.tp-surface--learning>.tp-surface__bar{border-top:0}
}