/* Window: the panel language (V2-SHELL). Anything that groups data is a window: a lacquered body,
   a frame tinted from the accent and a title bar with a metal rule under it. (The gold bracket corners
   were dropped in the polish pass: twelve gold L-shapes per window read as costume, not craft.)
     <section class="window" aria-labelledby="w-x">
       <div class="window-head"><h2 class="window-title" id="w-x">Server</h2><span class="aside">Online</span></div>
       <div class="window-body">...</div>
       <div class="window-foot">...</div>         optional
     </section>
   .window.featured   brighter frame, deeper shadow, a dark outer ring: one per screen region
   .window-body.flush no padding (tables, lists that run edge to edge)
   .window-title is the heading (h2/h3 as the outline needs); it is never an eyebrow over another heading. */

.window {
  position: relative;
  min-width: 0;
  background: var(--plate-body);
  border: 1px solid var(--frame);
  border-radius: var(--r-3);
  box-shadow: var(--bevel), var(--e-1);
}
.window.featured { border-color: var(--frame-hi); box-shadow: var(--bevel), var(--e-2), 0 0 0 4px color-mix(in srgb, var(--ink-00) 50%, transparent); }
.window:focus-within { border-color: var(--frame-hi); }

.window-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 40px;
  padding: 8px var(--s-4);
  background: var(--plate-head);
  border-radius: calc(var(--r-3) - 1px) calc(var(--r-3) - 1px) 0 0;
}
.window-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule-metal); opacity: 0.8; }
.window-title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-family: var(--font-label);
  font-size: 0.875rem;
  font-weight: var(--fw-label);
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: var(--accent-hi);
}
.window-title::before { content: ""; flex: none; width: 7px; height: 7px; rotate: 45deg; background: var(--action); box-shadow: 0 0 0 1px var(--gold); }
.window-head .aside { margin-left: auto; font-size: var(--fs-xs); color: var(--text-2); text-align: right; }
.window-head .aside a { color: var(--link); font-weight: 600; text-decoration: none; }
.window-head .aside a:hover { color: var(--text); text-decoration: underline; }
.window-body { padding: var(--s-4); }
.window-body.flush { padding: 0; }
.window-foot { padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line-soft); font-size: var(--fs-sm); color: var(--text-2); }
@media (max-width: 599px) { .window-head .aside.hide-sm { display: none; } }

/* ---------- Recipe: a trade drawn as a window (exchange, events) ----------
     <li class="window recipe"><div class="window-head"><h3 class="window-title">Trade</h3></div>
       <div class="window-body recipe-flow">
         <div class="recipe-side"><p class="recipe-label">Bring</p> ..slots.. </div>
         <span class="recipe-arrow" aria-hidden="true"><svg class="icon">..arrow..</svg></span>
         <div class="recipe-side"><p class="recipe-label">Get</p> ..slots.. </div>
       </div></li>
   .recipe-flow  stacked with the arrow pointing down until the recipe is 500px wide, then bring | arrow | get.
   .recipe-row   a read-only summary that stays on one line, each side centred over its slot (events). */
.recipe { container: recipe / inline-size; display: flex; flex-direction: column; }
.recipe-flow { flex: 1; display: grid; align-content: start; gap: var(--s-3); }
.recipe-label { margin-bottom: var(--s-2); font-family: var(--font-label); font-size: var(--fs-xs); font-weight: var(--fw-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--accent); }
.recipe-arrow { flex: none; display: grid; place-items: center; width: 32px; height: 32px; justify-self: center; color: var(--accent-hi); background: var(--ink-00); border: 1px solid var(--frame); border-radius: 50%; }
.recipe-arrow .icon { width: 1rem; height: 1rem; }
.recipe-flow > .recipe-arrow .icon { transform: rotate(90deg); }
@container recipe (min-width: 500px) {
  .recipe-flow { grid-template-columns: minmax(0, 0.85fr) auto minmax(0, 1fr); align-items: start; gap: var(--s-4); }
  .recipe-flow > .recipe-arrow { margin-top: calc(var(--s-2) + 1.6rem); }
  .recipe-flow > .recipe-arrow .icon { transform: none; }
}
.recipe-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s-2); margin: 0; }
.recipe-row > .recipe-side { display: grid; justify-items: center; gap: var(--s-2); min-width: 0; text-align: center; font-size: var(--fs-sm); color: var(--text-2); }