/* ============================================================================
 * shell.css: THE LOOK OF THE ONE SITE'S FRAME
 * ----------------------------------------------------------------------------
 * The header, the menu down the side, the area a section fills, the door, and
 * the phone layout. It used to sit inside index.html, and the test harness
 * (tests/shell-harness.html) kept a hand-made copy that drifted; both now load
 * this one file (feedback round 1, 2026-09-29).
 *
 * The colours and fonts come from echo-theme.css (load that first).
 * ========================================================================== */

/* ---- the frame around everything ------------------------------------------ */
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font);
       display: grid; grid-template-rows: auto 1fr; grid-template-columns: 240px minmax(0, 1fr);
       grid-template-areas: "header header" "nav main"; }

#shell-header { grid-area: header; display: flex; align-items: center; gap: 14px; padding: 10px 16px;
                border-bottom: 1px solid var(--line); background: var(--panel); }
#shell-header .echo-brand { margin-right: auto; }
#shell-event { background: var(--field); color: var(--text); border: 1px solid var(--line-strong);
               border-radius: var(--radius-sm); padding: 7px 10px; font: inherit; font-size: 13px; max-width: 260px; }
#shell-who { font-size: 13px; color: var(--muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The burger: hides the menu so the open section gets the whole width (on a
   phone it opens the menu instead, see the phone rules at the bottom).    */
#shell-burger { display: inline-flex; align-items: center; justify-content: center; flex: none;
                width: 36px; height: 34px; padding: 0; font-size: 18px; line-height: 1; }

/* ---- the menu down the side ----------------------------------------------- */
#shell-nav { grid-area: nav; border-right: 1px solid var(--line); padding: 10px; overflow-y: auto; background: var(--bg); }
.nav-item { display: block; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none;
            margin-bottom: 2px; transition: background var(--t); }
.nav-item:hover { background: var(--panel); }
.nav-item.on { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--echo-red); }
.nav-label { display: block; font-weight: 600; font-size: 14px; }
.nav-hint  { display: block; font-size: 11.5px; color: var(--faint); margin-top: 2px; line-height: 1.35; }
/* The headings between groups: Pre event, Live event, Post event, Setup. */
.nav-group { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
             color: var(--faint); padding: 16px 12px 6px; }
.nav-group:first-child { padding-top: 4px; }

/* Menu hidden by the burger (remembered per browser by shell.js). */
body.nav-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
body.nav-collapsed #shell-nav { display: none; }

/* ---- where a section is shown ---------------------------------------------- */
#shell-main { grid-area: main; position: relative; min-height: 0; display: flex; flex-direction: column; }
.shell-frame { flex: 1; width: 100%; border: 0; background: var(--bg); min-height: 0; }
.shell-subs { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel); }
.shell-subs .sub { padding: 5px 12px; border-radius: var(--pill); font-size: 12.5px; font-weight: 600; color: var(--muted);
                   text-decoration: none; text-transform: capitalize; border: 1px solid transparent; }
.shell-subs .sub.on { color: var(--text); background: var(--panel-2); border-color: var(--line-strong); }
.shell-section { padding: 22px 26px; overflow-y: auto; }
/* Sections use the whole width of the screen (most are worked on a 16:9
   screen). Running text still stops at a comfortable reading length, so a
   paragraph never runs 1,600 pixels across.                                  */
.shell-section p { max-width: 75ch; }

/* ---- fullscreen sections: hide the site's own frame. None uses it since
   feedback round 1, stage 6 (the couch reader and pad became screen links);
   kept for the next screen that needs it. ---- */
body.shell-fullscreen { grid-template-rows: 0 1fr; grid-template-columns: 0 1fr; }
body.shell-fullscreen #shell-header, body.shell-fullscreen #shell-nav { display: none; }
body.shell-fullscreen .shell-back { position: fixed; top: 8px; left: 8px; z-index: 5; opacity: .35; }
body.shell-fullscreen .shell-back:hover { opacity: 1; }
.shell-back { display: none; }
body.shell-fullscreen .shell-back { display: inline-block; }

/* ---- the door --------------------------------------------------------------- */
#shell-door { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 24px; }
.door-card { max-width: 440px; text-align: center; background: var(--panel); border: 1px solid var(--line);
             border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--shadow); }
.door-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; }
.door-brand img { width: 40px; height: 40px; }
.door-brand .wm { font-size: 22px; font-weight: 800; }
.door-card p { line-height: 1.6; margin: 0 0 16px; }
.btn.big { font-size: 15px; padding: 12px 22px; }
.muted { color: var(--muted); } .small { font-size: 12px; } .err { color: #f09595; min-height: 1.2em; margin-top: 12px; }
body.shell-at-door #shell-header, body.shell-at-door #shell-nav, body.shell-at-door #shell-main { visibility: hidden; }

/* ---- phones: the menu drops down from the burger ---------------------------- */
@media (max-width: 760px) {
  /* minmax(0, 1fr): the column may shrink to the screen. With plain 1fr the
     header's widest line (brand, event menu, Sign out) set the page width,
     and every section scrolled sideways on a phone (found 2026-09-25). */
  body, body.nav-collapsed { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "header" "nav" "main"; }
  #shell-header { flex-wrap: wrap; row-gap: 8px; }
  #shell-event { flex: 1 1 140px; min-width: 0; max-width: 100%; }
  #shell-main, #shell-nav { min-width: 0; }
  /* A fullscreen section takes the whole phone screen (none since stage 6).
     The desktop rule for it (two columns, the first 0 wide) put the section
     in the 0-wide column here (found by review, 2026-09-25). */
  body.shell-fullscreen { grid-template-columns: minmax(0, 1fr); grid-template-rows: 0 0 1fr; }
  /* The menu is closed until the burger opens it, then it is a list under
     the header; choosing a section closes it again (shell.js). The desktop
     "hidden by the burger" setting does not apply on a phone.               */
  #shell-nav, body.nav-collapsed #shell-nav { display: none; border-right: 0; border-bottom: 1px solid var(--line);
                                              max-height: 70vh; padding: 6px 10px 10px; }
  body.nav-open #shell-nav { display: block; }
  .nav-hint { display: none; }
  #shell-who { display: none; }
  .shell-section { padding: 16px; }
}