/* Pattern & Edge Shell — Build 5.1b.3
   Spatial/product frame only. No poker-domain authority. */

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--pe-canvas); color: var(--pe-copy); }
body { font-family: var(--pe-font-ui); overflow: hidden; }
button, a { font: inherit; }
button { color: inherit; }

.pe-shell {
  min-height: 100dvh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background:
    radial-gradient(900px 380px at 18% -20%, var(--pe-metal-glow), transparent 62%),
    var(--pe-canvas);
}

.pe-shell__rail {
  min-height: var(--pe-standard-rail-height);
  display: flex;
  align-items: center;
  gap: var(--pe-space-3);
  padding: 7px 12px;
  border-bottom: 1px solid var(--pe-line);
  background: rgba(23,18,15,0.97);
  box-shadow: 0 1px 0 rgba(255,255,255,0.018) inset;
  position: relative;
  z-index: 5;
}

.pe-shell__identity { flex: 0 1 auto; min-width: 0; }
.pe-shell__identity .pe-identity__descriptor { color: var(--pe-metal); opacity: .86; }

.pe-shell__env-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 3px;
  border: 1px solid var(--pe-line-soft);
  border-radius: var(--pe-radius-control);
  background: rgba(255,255,255,0.018);
}

.pe-shell__env {
  min-height: 28px;
  border: 0;
  border-radius: 7px;
  padding: 0 10px;
  background: transparent;
  color: var(--pe-copy-soft);
  font-family: var(--pe-font-data);
  font-size: .64rem;
  font-weight: 650;
  letter-spacing: .11em;
  text-transform: uppercase;
  cursor: pointer;
}
.pe-shell__env:hover { color: var(--pe-copy-strong); background: rgba(255,255,255,.025); }
.pe-shell__env[aria-current="page"] {
  color: var(--pe-copy-strong);
  background: var(--pe-metal-soft);
  box-shadow: inset 0 0 0 1px var(--pe-metal-line);
}
.pe-shell__env:focus-visible,
.pe-shell__command-trigger:focus-visible { outline: 2px solid var(--pe-metal); outline-offset: 2px; }

.pe-shell__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: max-content;
  color: var(--pe-copy-soft);
  font-family: var(--pe-font-data);
  font-size: .61rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pe-shell__status-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--pe-confirm);
  box-shadow: 0 0 0 3px rgba(110,138,98,.10);
}
.pe-shell[data-network="offline"] .pe-shell__status-dot { background: var(--pe-attention); box-shadow: 0 0 0 3px rgba(180,80,63,.10); }

.pe-shell__command-trigger {
  border: 1px solid var(--pe-line-soft);
  background: transparent;
  color: var(--pe-copy-faint);
  min-height: 28px;
  border-radius: 8px;
  padding: 0 9px;
  font-family: var(--pe-font-data);
  font-size: .60rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pe-shell__command-trigger[hidden] { display: none; }

/* Play density: identity remains present, but the table outranks the shell. */
.pe-shell[data-environment="play"] .pe-shell__rail {
  min-height: 36px;
  padding-block: 4px;
}
.pe-shell[data-environment="play"] .pe-shell__identity .pe-identity__descriptor { display:none; }
.pe-shell[data-environment="play"] .pe-shell__identity .pe-identity__wordmark { font-size:.74rem; }

.pe-shell__viewport {
  min-width: 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: var(--pe-canvas);
}

.pe-shell__environment {
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 0;
  background: var(--pe-canvas);
}
.pe-shell__environment[hidden] { display: none; }
.pe-shell__environment iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: var(--pe-canvas);
}

.pe-shell__review-empty {
  height: 100%;
  display: grid;
  place-items: center;
  padding: var(--pe-space-5);
  color: var(--pe-copy-soft);
  text-align: center;
}

@media (max-width: 640px) {
  .pe-shell__rail {
    min-height: var(--pe-live-rail-height);
    padding: 5px 8px;
    gap: 7px;
  }
  .pe-shell__identity .pe-identity__mark { width: 25px; height: 25px; flex-basis: 25px; }
  .pe-shell__identity .pe-identity__mark img { width: 18px; height: 18px; }
  .pe-shell__identity .pe-identity__wordmark { font-size: .72rem; }
  .pe-shell__identity .pe-identity__descriptor { display: none; }
  .pe-shell__env-nav { margin-left: auto; }
  .pe-shell__env { padding-inline: 8px; min-height: 26px; }
  .pe-shell__status-label { display: none; }

  .pe-shell[data-environment="play"] .pe-shell__rail {
    min-height:30px;
    padding:2px 7px;
    gap:5px;
  }
  .pe-shell[data-environment="play"] .pe-shell__identity .pe-identity__mark {
    width:22px;height:22px;flex-basis:22px;border-radius:7px;
  }
  .pe-shell[data-environment="play"] .pe-shell__identity .pe-identity__mark img {width:16px;height:16px;}
  .pe-shell[data-environment="play"] .pe-shell__identity .pe-identity__copy {display:none;}
  .pe-shell[data-environment="play"] .pe-shell__env-nav {
    border:0;background:transparent;padding:0;gap:1px;
  }
  .pe-shell[data-environment="play"] .pe-shell__env {
    min-height:24px;padding:0 6px;border-radius:6px;font-size:.60rem;
  }
  .pe-shell[data-environment="play"] .pe-shell__env[aria-current="page"] {
    background:transparent;box-shadow:none;color:var(--pe-metal);
  }
  .pe-shell[data-environment="play"] .pe-shell__status {gap:0;}
  .pe-shell[data-environment="play"] .pe-shell__status-dot {width:5px;height:5px;box-shadow:none;}
}

@media (max-width: 390px) {
  .pe-shell__identity .pe-identity__copy { display: none; }
}

/* Build 5.1b.5 — Command + Global Status / PWA Integration
   Command is shell-level only. It routes and reports; it never performs poker work. */
.pe-shell[data-command-open="true"] .pe-shell__command-trigger {
  color: var(--pe-copy-strong);
  border-color: var(--pe-metal-line);
  background: var(--pe-metal-soft);
}
.pe-command-backdrop {
  position: fixed;
  z-index: 40;
  inset: 0;
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(2px);
}
.pe-command-backdrop[hidden], .pe-command[hidden] { display:none; }
.pe-command {
  position: fixed;
  z-index: 41;
  top: 8px;
  right: 8px;
  bottom: 8px;
  width: min(430px, calc(100vw - 16px));
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  overflow: hidden;
  border: 1px solid var(--pe-line-mid);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(44,35,29,.99), rgba(23,18,15,.995));
  box-shadow: -22px 0 70px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.025);
}
.pe-command__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 18px;
  border-bottom: 1px solid var(--pe-line-soft);
}
.pe-command__eyebrow,.pe-command__kicker {
  margin: 0 0 5px;
  color: var(--pe-metal);
  font: 600 .61rem/1.2 var(--pe-font-data);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.pe-command__head h2,.pe-command__domain h3 { margin:0; color:var(--pe-copy-strong); }
.pe-command__head h2 { font-size:1.28rem; }
.pe-command__domain h3 { font-size:.95rem; }
.pe-command__lede,.pe-command__note,.pe-command__domain p,.pe-command details p {
  color: var(--pe-copy-soft);
  line-height: 1.48;
}
.pe-command__lede { margin:7px 0 0; font-size:.83rem; max-width:34rem; }
.pe-command__close {
  flex:0 0 auto;
  width:34px;height:34px;
  display:grid;place-items:center;
  border:1px solid var(--pe-line-mid);
  border-radius:9px;
  background:rgba(255,255,255,.025);
  color:var(--pe-copy-soft);
  cursor:pointer;
  font-size:1.2rem;
}
.pe-command__body { overflow:auto; padding:0 18px 24px; }
.pe-command__domain { padding:18px 0; border-bottom:1px solid var(--pe-line-soft); }
.pe-command__domain:last-child { border-bottom:0; }
.pe-command__route-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.pe-command__route {
  min-height:78px;
  display:grid;
  gap:5px;
  align-content:center;
  text-align:left;
  padding:12px;
  border:1px solid var(--pe-line-mid);
  border-radius:11px;
  background:rgba(255,255,255,.022);
  cursor:pointer;
}
.pe-command__route strong { color:var(--pe-copy-strong); }
.pe-command__route span { color:var(--pe-copy-soft); font-size:.78rem; line-height:1.35; }
.pe-command__route[aria-current="page"] { border-color:var(--pe-metal-line); background:var(--pe-metal-soft); }
.pe-command__status-row,.pe-command__checks>div {
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:baseline;
  padding:9px 0;
  border-bottom:1px solid rgba(237,228,216,.055);
}
.pe-command__status-row span,.pe-command__checks span { color:var(--pe-copy-soft); font-size:.8rem; }
.pe-command__status-row strong,.pe-command__checks strong {
  color:var(--pe-copy);
  font:600 .68rem/1.3 var(--pe-font-data);
  text-align:right;
}
.pe-command__quiet-action,.pe-command__install {
  width:100%;
  min-height:38px;
  margin-top:12px;
  border-radius:9px;
  font-weight:650;
}
.pe-command__quiet-action {
  border:1px solid var(--pe-line-mid);
  background:rgba(255,255,255,.02);
  color:var(--pe-copy-faint);
}
.pe-command__quiet-action:disabled { opacity:.72; cursor:not-allowed; }
.pe-command__install {
  border:1px solid var(--pe-metal-line);
  background:var(--pe-metal-soft);
  color:var(--pe-copy-strong);
  cursor:pointer;
}
.pe-command__install:disabled { opacity:.65; cursor:default; }
.pe-command__install-help { margin:9px 0 0; font-size:.78rem; }
.pe-command__checks { margin-top:12px; padding:4px 11px; border:1px solid var(--pe-line-soft); border-radius:10px; background:rgba(0,0,0,.10); }
.pe-command__note { margin:9px 0 0; font-size:.76rem; }
.pe-command details { margin-top:10px; border:1px solid var(--pe-line-soft); border-radius:9px; padding:9px 11px; background:rgba(0,0,0,.08); }
.pe-command summary { cursor:pointer; color:var(--pe-copy); font-weight:650; font-size:.8rem; }
.pe-command details p { margin:8px 0 2px; font-size:.78rem; }
.pe-command button:focus-visible,.pe-command summary:focus-visible { outline:2px solid var(--pe-metal); outline-offset:2px; }

@media (max-width:640px) {
  .pe-shell__command-trigger { min-height:24px; padding:0 6px; font-size:.56rem; }
  .pe-shell[data-environment="play"] .pe-shell__command-trigger { border-color:transparent; }
  .pe-command {
    top:auto;
    left:6px;
    right:6px;
    bottom:6px;
    width:auto;
    max-height:min(86dvh,760px);
    border-radius:18px;
  }
  .pe-command__head { padding:15px; }
  .pe-command__body { padding:0 15px 20px; }
}