/* The Studio's look: the "Tactique" system of Terada's tools (CHARTE.md), in the
   game's own colours (CONCEPTION/MFD-CHARTE.md). Chamfered panels, Chakra Petch
   for the labels, DM Mono for the small facts, Barlow to read. One sheet for the
   shell (sh-*) and for the modules that link it (sd-*), and never a style=""
   attribute: the hosting's CSP is style-src 'self'. The fonts are served by us
   (STUDIO.md ST10), latin only: font-src 'self' holds. Declared in fonts.css. */

@import url("fonts.css");

:root {
  --bg: #05090c;
  --panel: #0a1216;
  --panel-2: #0f1b20;
  --ink: #e0f7ff;
  --ink-60: rgba(224, 247, 255, 0.6);
  --ink-40: rgba(224, 247, 255, 0.4);
  --ink-16: rgba(224, 247, 255, 0.16);
  --ink-12: rgba(224, 247, 255, 0.12);
  --ink-08: rgba(224, 247, 255, 0.08);
  --ink-04: rgba(224, 247, 255, 0.04);
  --teal: #2fe0d0;
  --teal-light: #86f2e8;
  --teal-dim: #239d94;
  --teal-dark: #175a55;
  --teal-10: rgba(47, 224, 208, 0.1);
  --engine: #ffb020;
  --weapons: #ff3db4;
  --shield: #4cc4ff;
  --alert: #ff3b2f;
  --alert-10: rgba(255, 59, 47, 0.12);
  --ok: #3dff7a;
  --f-display: "Chakra Petch", "Barlow", sans-serif;
  --f-mono: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --f-body: "Barlow", system-ui, sans-serif;
  --cut: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  --cut-s: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 500 14px/1.45 var(--f-body);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-light); }
h1, h2 { margin: 0; font-family: var(--f-display); letter-spacing: 0.1em; text-transform: uppercase; }
h1 { font-size: 20px; font-weight: 700; }
h2 { font-size: 13px; font-weight: 600; color: var(--teal-dim); }
.sd-dim { color: var(--ink-60); }
.sd-small { font-size: 12px; }
.sd-mono { font-family: var(--f-mono); letter-spacing: 0.06em; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------------------------------------------------------------- components */

.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: square; stroke-linejoin: miter; }
.sd-panel { background: var(--panel-2); border: 1px solid var(--ink-16); padding: 14px 16px; clip-path: var(--cut); display: flex; flex-direction: column; gap: 10px; }
.sd-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.sd-btn {
  height: 36px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font: 700 12px var(--f-display); letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--ink-40); color: var(--ink);
}
.sd-btn:hover:not(:disabled) { border-color: var(--ink); background: var(--ink-04); }
.sd-btn.primary { background: var(--teal); border-color: var(--teal); color: var(--bg); clip-path: var(--cut-s); }
.sd-btn.primary:hover:not(:disabled) { background: var(--teal-light); }
.sd-btn.ghost { border-color: transparent; color: var(--ink-60); }
.sd-btn.ghost:hover:not(:disabled) { color: var(--ink); background: var(--ink-08); }
.sd-btn.danger { border-color: rgba(255, 59, 47, 0.5); color: var(--alert); }
.sd-btn.danger:hover:not(:disabled) { background: var(--alert-10); }
.sd-btn:disabled { opacity: 0.35; cursor: default; }

.sd-field { display: flex; flex-direction: column; gap: 4px; }
.sd-field > span { font: 500 11px var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-60); }
.sd-input, .sd-field input, .sd-field select, .sd-field textarea {
  height: 36px; padding: 0 10px; background: var(--panel); border: 1px solid var(--ink-16);
  font: 500 13px var(--f-body); color: var(--ink);
}
.sd-field textarea { height: auto; min-height: 90px; padding: 8px 10px; resize: vertical; font-family: var(--f-mono); font-size: 12px; }
.sd-field input:focus, .sd-field select:focus, .sd-field textarea:focus { border-color: var(--teal); outline: none; }
.sd-check { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-60); font: 500 12px var(--f-mono); letter-spacing: 0.08em; }
.sd-check input { accent-color: var(--teal); }

.sd-badge {
  display: inline-block; padding: 1px 8px; font: 500 11px var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--teal-dark); color: var(--teal-light);
}
.sd-badge.muted { border-color: var(--ink-16); color: var(--ink-60); }
.sd-badge.warn { border-color: var(--engine); color: var(--engine); }
.sd-badge.alert { border-color: var(--alert); color: var(--alert); }

.sd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sd-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--ink-12); background: var(--panel); }
.sd-item:hover { border-color: var(--ink-40); }
.sd-item.on { border-color: var(--teal); background: var(--teal-10); }
.sd-item .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sd-dialog { background: var(--panel-2); color: var(--ink); border: 1px solid var(--teal-dim); padding: 20px 22px; max-width: min(520px, calc(100vw - 32px)); clip-path: var(--cut); }
.sd-dialog::backdrop { background: rgba(5, 9, 12, 0.75); }
.sd-dialog h2 { color: var(--engine); margin-bottom: 8px; }
.sd-dialog p { margin: 0 0 16px; }

/* ---------------------------------------------------------------------- shell */

.sh-app { height: 100%; display: grid; grid-template-rows: 56px 1fr; grid-template-columns: 220px 1fr; grid-template-areas: "top top" "rail stage"; }
.sh-top {
  grid-area: top; display: flex; align-items: center; gap: 14px; padding: 0 14px; min-width: 0;
  background: var(--panel); border-bottom: 1px solid var(--ink-16);
}
.sh-brand { display: flex; align-items: baseline; gap: 8px; flex: none; color: var(--ink); }
.sh-brand:hover { color: var(--ink); }
.sh-brand b { font: 700 17px var(--f-display); letter-spacing: 0.12em; }
.sh-brand i { font: 500 13px var(--f-mono); font-style: normal; color: var(--teal); }
.sh-tabs { display: flex; gap: 4px; }
.sh-tab {
  height: 36px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px;
  font: 700 12px var(--f-display); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-60); border: 1px solid transparent;
}
.sh-tab:hover { color: var(--ink); background: var(--ink-08); }
.sh-tab[aria-current="page"] { color: var(--teal); background: var(--teal-10); border-color: var(--teal); }
.sh-grow { flex: 1; }
.sh-account { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13px; }
.sh-avatar { width: 28px; height: 28px; object-fit: cover; clip-path: var(--cut-s); background: var(--ink-12); }
.sh-who { font: 600 13px var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18ch; }
.sh-note { font: 400 11px var(--f-mono); letter-spacing: 0.06em; color: var(--ink-40); white-space: nowrap; }
.sh-note.alert { color: var(--engine); }

.sh-rail { grid-area: rail; background: var(--panel); border-right: 1px solid var(--ink-16); padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.sh-rail-title { font: 500 11px var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-40); padding: 0 8px 6px; }
.sh-mod {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; color: var(--ink-60);
  font: 700 12px var(--f-display); letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid transparent;
}
.sh-mod:hover { color: var(--ink); background: var(--ink-08); }
.sh-mod[aria-current="page"] { color: var(--teal); background: var(--teal-10); border-color: var(--teal-dark); }
.sh-stage { grid-area: stage; min-width: 0; min-height: 0; position: relative; background: var(--bg); }
.sh-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--bg); }
.sh-bar-hidden .sh-rail { display: none; }
.sh-bar-hidden { grid-template-columns: 1fr; grid-template-areas: "top" "stage"; }

.sh-gate { height: 100%; display: grid; place-items: center; padding: 24px 16px; }
.sh-gate .sd-panel { max-width: 460px; width: 100%; padding: 28px 28px 26px; gap: 14px; }
.sh-gate h1 { color: var(--teal-light); }
.sh-gate p { margin: 0; }
.sh-gate .sd-btn { align-self: flex-start; }
.sh-gate .sh-lock { color: var(--engine); }
.sh-error { color: var(--alert); background: var(--alert-10); border: 1px solid rgba(255, 59, 47, 0.4); padding: 8px 12px; }

.sh-toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.sh-toast {
  background: var(--ink); color: var(--bg); font: 700 12px var(--f-display); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 10px 18px; clip-path: var(--cut-s);
}
.sh-toast.alert { background: var(--alert); color: #fff; }

@media (max-width: 760px) {
  .sh-app { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "top" "rail" "stage"; }
  .sh-top { flex-wrap: wrap; height: auto; padding: 8px 12px; gap: 8px; }
  .sh-rail { flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--ink-16); padding: 6px 8px; }
  .sh-rail-title { display: none; }
  .sh-note { display: none; }
}