/* ==========================================================================
   components — panels, controls, terminal, tables, status, diagrams
   Every frame is drawn with corner brackets, not a rounded card.
   ========================================================================== */

/* ---- panel ------------------------------------------------------------- */

.panel {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--rule);
  padding: var(--s-5);
}

.panel--inset { background: var(--bg-inset); }
.panel--raised { background: var(--bg-raised); box-shadow: var(--lift-2); }
.panel--flush { padding: 0; }

/* Corner brackets: all four, drawn as one background so the frame reads as an
   instrument bezel rather than as two stray edge marks on a wide panel. */
.panel {
  --bezel: 16px;
  background-image:
    linear-gradient(var(--rule-hot), var(--rule-hot)),
    linear-gradient(var(--rule-hot), var(--rule-hot)),
    linear-gradient(var(--rule-hot), var(--rule-hot)),
    linear-gradient(var(--rule-hot), var(--rule-hot)),
    linear-gradient(var(--rule-hot), var(--rule-hot)),
    linear-gradient(var(--rule-hot), var(--rule-hot)),
    linear-gradient(var(--rule-hot), var(--rule-hot)),
    linear-gradient(var(--rule-hot), var(--rule-hot));
  background-repeat: no-repeat;
  background-size:
    var(--bezel) 1px, 1px var(--bezel),
    var(--bezel) 1px, 1px var(--bezel),
    var(--bezel) 1px, 1px var(--bezel),
    var(--bezel) 1px, 1px var(--bezel);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}

.panel--flush { --bezel: 20px; }

.panel__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  color: var(--txt-3);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
}

.panel__label--bare { border: 0; padding: 0; margin-bottom: var(--s-3); }

/* ---- buttons ----------------------------------------------------------- */

.btn {
  --btn-fg: var(--phos);
  --btn-edge: var(--rule-hot);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 11px var(--s-5);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
  color: var(--btn-fg);
  background: transparent;
  border: 1px solid var(--btn-edge);
  text-decoration: none;
  overflow: hidden;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--phos);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-mid) var(--ease-out);
  z-index: -1;
}

.btn > * { position: relative; z-index: 1; }

.btn:hover { color: var(--bg); border-color: var(--phos); }
.btn:hover::before { transform: scaleX(1); }

.btn--primary {
  background: var(--phos);
  color: var(--bg);
  border-color: var(--phos);
  font-weight: 400;
}

.btn--primary::before { background: var(--txt); }
.btn--primary:hover { color: var(--bg); }

.btn--ghost { --btn-fg: var(--txt-2); --btn-edge: var(--rule-bright); }
.btn--ghost:hover { color: var(--bg); }

.btn--sm { padding: 7px var(--s-3); font-size: var(--t-xs); }

@media (max-width: 560px) {
  .btn { padding: 10px var(--s-3); font-size: var(--t-xs); }
  .row > .btn { flex: 1 1 100%; justify-content: center; }
}

.btn[disabled],
.btn[aria-disabled="true"] {
  color: var(--txt-3);
  border-color: var(--rule);
  cursor: not-allowed;
  opacity: 0.55;
}

.btn[disabled]::before,
.btn[aria-disabled="true"]::before { transform: scaleX(0); }

/* ---- copyable command -------------------------------------------------- */

.cmd {
  min-width: 0;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--rule-bright);
  background: var(--bg-inset);
  box-shadow: var(--lift-1);
}

.cmd__body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
}

.cmd__sigil { color: var(--phos); flex: none; line-height: 1.5; }

.cmd__text {
  min-width: 0;
  color: var(--txt);
  font-size: var(--t-base);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.cmd__copy {
  flex: none;
  padding-inline: var(--s-4);
  border-left: 1px solid var(--rule-bright);
  font-family: var(--font-display);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  color: var(--txt-2);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.cmd__copy:hover { background: var(--phos); color: var(--bg); }
.cmd__copy[data-state="done"] { color: var(--phos); }

/* ---- status vocabulary ------------------------------------------------- */

.st {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--txt-2);
}

.st::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  background: currentColor;
}

.st--ok   { color: var(--phos); text-shadow: 0 0 8px rgba(41, 255, 155, 0.45); }
.st--warn { color: var(--amber); }
.st--err  { color: var(--red); }
.st--info { color: var(--cyan); }
.st--off  { color: var(--txt-3); }

.st--pulse::before { animation: st-pulse 1.9s ease-in-out infinite; }

@keyframes st-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .st--pulse::before { animation: none; }
}

.tag {
  display: inline-block;
  padding: 2px 7px;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--txt-3);
  border: 1px solid var(--rule);
}

.tag--synthetic {
  color: var(--violet);
  border-color: color-mix(in srgb, var(--violet) 38%, transparent);
}

.tag--alpha { color: var(--amber); border-color: var(--amber-dim); }

/* ---- terminal ---------------------------------------------------------- */

.term {
  background: var(--bg-inset);
  border: 1px solid var(--rule-bright);
  box-shadow: var(--lift-3);
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
}

.term__bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--rule);
  background: var(--bg-panel);
  font-size: var(--t-xs);
  color: var(--txt-3);
  letter-spacing: 0.06em;
}

.term__dots { display: flex; gap: 5px; }
.term__dots i { width: 7px; height: 7px; background: var(--rule-hot); display: block; }
.term__dots i:first-child { background: var(--red-dim); }
.term__dots i:nth-child(2) { background: var(--amber-dim); }

.term__body {
  padding: var(--s-4);
  font-size: var(--t-sm);
  line-height: 1.62;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-hot) transparent;
}

.term__line { display: flex; gap: var(--s-2); white-space: pre-wrap; word-break: break-word; }
.term__line:last-child .term__msg,
.term__line:last-child .term__tag { text-shadow: 0 0 9px currentColor; }
.term__line + .term__line { margin-top: 1px; }
.term__gut { flex: none; width: 4.5ch; color: var(--txt-3); text-align: right; user-select: none; }
.term__msg { min-width: 0; color: var(--txt-2); }
.term__msg b { color: var(--txt); font-weight: 400; }

.term__tag { flex: none; width: 9ch; letter-spacing: 0.02em; white-space: pre; }
.term__tag--ok   { color: var(--phos); }
.term__tag--warn { color: var(--amber); }
.term__tag--err  { color: var(--red); }
.term__tag--run  { color: var(--cyan); }
.term__tag--dim  { color: var(--txt-3); }

/* ---- data table -------------------------------------------------------- */

.table { font-size: var(--t-sm); }

.table th {
  text-align: left;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  color: var(--txt-3);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--rule-bright);
}

.table td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--rule);
  color: var(--txt-2);
  vertical-align: top;
}

.table tr:last-child td { border-bottom: 0; }
.table td:first-child { color: var(--txt); white-space: nowrap; }
.table tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.table tbody tr:hover { background: var(--phos-ghost); }

/* ---- the stack (what it deploys) --------------------------------------- */

.stack-list { display: grid; }

.layer {
  display: grid;
  grid-template-columns: 18ch minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: background var(--dur-fast) var(--ease-out);
}

.layer:hover { background: var(--phos-ghost); }

.layer__name {
  font-family: var(--font-display);
  color: var(--txt);
  font-size: var(--t-base);
}

.layer__what { color: var(--txt-2); font-size: var(--t-sm); }
.layer__tier { justify-self: end; }

@media (max-width: 760px) {
  .layer {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s-1);
  }
  .layer__tier { justify-self: start; }
}

/* ---- catalog ----------------------------------------------------------- */

.catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.catalog__item {
  background: var(--bg-panel);
  padding: var(--s-3) var(--s-4);
  display: grid;
  gap: 2px;
  transition: background var(--dur-fast) var(--ease-out);
}

.catalog__item:hover { background: var(--bg-raised); }
.catalog__item:hover .catalog__name { color: var(--phos); }

.catalog__name {
  font-size: var(--t-sm);
  color: var(--txt);
  transition: color var(--dur-fast) var(--ease-out);
}

.catalog__kind { font-size: var(--t-xs); color: var(--txt-3); }

/* ---- callout ----------------------------------------------------------- */

.callout {
  border: 1px solid var(--amber-dim);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--amber) 6%, var(--bg-panel)) 0%,
    var(--bg-panel) 60%
  );
  padding: var(--s-6);
  position: relative;
}

.callout__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  color: var(--amber);
  margin-bottom: var(--s-4);
}

.callout ul { display: grid; gap: var(--s-2); }

.callout li {
  display: grid;
  grid-template-columns: 2.4ch minmax(0, 1fr);
  gap: var(--s-2);
  color: var(--txt-2);
  font-size: var(--t-sm);
}

.callout li::before { content: "!"; color: var(--amber); }

/* ---- switch (platform.yaml flags) -------------------------------------- */

.flag {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3);
  border: 1px solid var(--rule);
  background: var(--bg-panel);
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.flag:hover { border-color: var(--rule-hot); background: var(--bg-raised); }

.flag__sw {
  flex: none;
  width: 34px;
  height: 16px;
  border: 1px solid var(--rule-hot);
  background: var(--bg-inset);
  position: relative;
}

.flag__sw::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 12px;
  background: var(--txt-3);
  transition: transform var(--dur-mid) var(--ease-out),
              background var(--dur-mid) var(--ease-out);
}

.flag[aria-pressed="true"] .flag__sw { border-color: var(--phos); }
.flag[aria-pressed="true"] .flag__sw::after {
  transform: translateX(16px);
  background: var(--phos);
}

.flag__txt { display: grid; gap: 1px; min-width: 0; }
.flag__name { display: block; font-size: var(--t-sm); color: var(--txt); }
.flag__meta { display: block; font-size: var(--t-xs); color: var(--txt-3); margin-top: 2px; }

.yaml-out {
  background: var(--bg-inset);
  border: 1px solid var(--rule-bright);
  padding: var(--s-4);
  font-size: var(--t-sm);
  line-height: 1.62;
  white-space: pre;
  overflow-x: auto;
  min-height: 100%;
  scrollbar-width: thin;
}

.yaml-out .added { background: color-mix(in srgb, var(--phos) 14%, transparent); }
.yaml-out .removed { color: var(--txt-3); text-decoration: line-through; }