/* ============================================================
   layout.css — the app shell: header, weight bar, panel resizing
   ============================================================ */

/* ─── LAYOUT ─────────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 8px 16px 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, var(--emboss-hi)), var(--surface));
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 6px var(--emboss-lo);
  flex-shrink: 0;
  min-height: 58px;
  z-index: 5;
}
/* Gold rule beneath the header — the banner's stitched edge */
#header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--gold-line);
  opacity: 0.7;
}

#char-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
#char-name-display {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--accent);
  text-shadow: 0 1px 0 var(--emboss-hi);
}
/* Weight bar */
#weight-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#weight-bar-track {
  position: relative;
  height: 11px;
  background: var(--weight-track);
  border: 1px solid var(--border2);
  border-radius: 6px;
  box-shadow: inset 0 1px 3px var(--emboss-lo);
  overflow: visible;
}
#weight-bar-fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg,
    var(--enc-ok) 33.33%, var(--enc-warn) 66.66%, var(--enc-heavy) 100%);
  box-shadow: inset 0 1px 0 var(--emboss-hi);
  transition: width 0.3s ease, background-size 0.3s ease;
}
.weight-marker {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 17px;
  background: var(--enc-warn);
  border-radius: 1px;
}
.weight-marker.heavy { background: var(--enc-heavy); }

#weight-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-dim);
}
#encumbrance-status {
  font-weight: 700;
}
#encumbrance-status.enc    { color: var(--enc-warn); }
#encumbrance-status.heavy  { color: var(--enc-heavy); }

/* ─── MAIN LAYOUT ────────────────────────────────────────── */
#main-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative; /* the reopen buttons anchor to its corners */
}

/* ─── SIDE PANEL RESIZING ────────────────────────────────── */
/* Widths live on #app as custom properties so panels.js can set them from one
   place; these are the defaults before anything is stored. */
:root {
  --equip-w: 210px;
  --sidebar-w: 300px;
}

/* The handle straddles the seam between panel and inventory: 7px of grab area
   pulled back by its own negative margins, so it costs no layout width. */
.panel-resizer {
  width: 7px;
  margin: 0 -4px;
  flex-shrink: 0;
  /* Positioned so the z-index actually applies: #inventory-panel is itself
     positioned and comes later in the DOM, so without this it paints over —
     and swallows the clicks on — the half of the handle overlapping it. */
  position: relative;
  z-index: 8;
  cursor: col-resize;
  background: transparent;
  touch-action: none;
  transition: background 0.12s;
}
.panel-resizer:hover,
.panel-resizer.dragging {
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}

#app.equip-collapsed #equip-panel,
#app.equip-collapsed #equip-resizer,
#app.sidebar-collapsed #sidebar,
#app.sidebar-collapsed #sidebar-resizer { display: none; }

/* Round button in the corner the panel folded away from. */
.panel-reopen-btn {
  position: absolute;
  top: 7px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 1px solid var(--border2);
  box-shadow: var(--shadow-deep), inset 0 1px 0 var(--emboss-hi);
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1;
  z-index: 20;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.panel-reopen-btn:hover { color: var(--accent); border-color: var(--accent); }
.panel-reopen-btn.left  { left: 8px; }
.panel-reopen-btn.right { right: 8px; }
#app.equip-collapsed   #show-equip-btn   { display: flex; }
#app.sidebar-collapsed #show-sidebar-btn { display: flex; }

/* Keep the character tabs clear of whichever button is showing. */
#app.equip-collapsed   #character-tabs { padding-left: 42px; }
#app.sidebar-collapsed #character-tabs { padding-right: 42px; }