/* The room shell every management screen shares (DECISIONS.md 2026-09-24, phases 3-4): the desk stage
   behind, the work on paper, section tabs as ribbon bookmarks, the room's verbs on brass plaques.
   `.screen--room` / `.app-shell--room` are set by renderScreen (src/ui/render.js ROOM_SCREENS). The desk
   lays these pieces out as a ledger in desk.css, loaded after this file. */

:root {
  --desk-wood: #24170e;
  --desk-paper: #efe4c6;
  --desk-paper-edge: #d9c8a0;
  --desk-ink: #2b2118;
  --desk-rule: rgba(95, 60, 25, .28);
  --desk-urgent: #8e241d;
  --desk-brass: #b58a3c;
}

html[data-skin] .app-shell--room {
  min-height: 100dvh;
  background:
    radial-gradient(ellipse at 8% 4%, rgba(255, 196, 110, .22), transparent 42%),
    url('/assets/desk/stage/desk-stage.webp') center / cover no-repeat fixed,
    radial-gradient(ellipse at 50% 40%, #3a2616, var(--desk-wood) 70%);
}

/* Section tabs become ribbon bookmarks along the top of the pages. */
html[data-skin] .screen--room .section-tabs { gap: .35rem; margin: 0; padding: .4rem 0 0; border: 0; }
html[data-skin] .screen--room .section-tabs [role="tab"] {
  min-height: 2rem; padding: .25rem .8rem; border: 0; border-radius: 0 0 3px 3px;
  background: #d9c8a0; color: var(--desk-ink); font-size: .78rem;
}
html[data-skin] .screen--room .section-tabs [role="tab"][aria-selected="true"] { background: var(--desk-urgent); color: #fff3de; }

/* The plaque rail: the room's verbs, brass-edged, along the bottom. */
html[data-skin] .screen--room .plaque-rail {
  display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: .6rem;
}
html[data-skin] .screen--room .plaque,
html[data-skin] .screen--room .plaque-rail .week-close {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 44px;
  padding: .45rem 1.1rem; background: linear-gradient(#2b2320, #171210); color: #efd9a8;
  border: 2px solid var(--desk-brass); border-radius: 4px; box-shadow: 0 6px 14px #0009, inset 0 1px 0 #ffffff1a;
  font-family: var(--utility); font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
}
html[data-skin] .screen--room .plaque:hover, html[data-skin] .screen--room .plaque:focus-visible { color: #fff; border-color: #e0b35a; }
html[data-skin] .screen--room .plaque-rail .week-close { margin: 0; text-transform: none; font-weight: 600; letter-spacing: 0; }
html[data-skin] .screen--room .plaque-rail .week-close p { margin: 0; color: #cdb88f; font-size: .78rem; }
html[data-skin] .screen--room .plaque-rail .week-close .button { min-height: 36px; }


/* Every room but the desk: the heading on the wood, the work on one paper sheet, the rail below it. */
html[data-skin] .screen--room.screen--compact:not(.screen--desk) {
  width: 100%; max-width: 1320px; margin: 0 auto; padding: .5rem clamp(1rem, 4vw, 4.5rem) .6rem; gap: .45rem;
  background: transparent; border: 0; box-shadow: none;
}
html[data-skin] .screen--room:not(.screen--desk) .screen-heading,
html[data-skin] .screen--room.screen--compact:not(.screen--desk) .screen-heading--scene {
  margin: 0; padding: 0; background: none; border: 0; color: #f1e3c2;
}
html[data-skin] .screen--room.screen--compact:not(.screen--desk) .screen-heading--scene::after { display: none; }
/* A soft shadow under the room's name so it reads over the lamp glare on the stage. */
html[data-skin] .screen--room:not(.screen--desk) .screen-heading > div,
html[data-skin] .screen--room:not(.screen--desk) .screen-heading--scene > div {
  justify-self: start; padding: .2rem .8rem .3rem .6rem; border-radius: 6px;
  background: linear-gradient(90deg, #0b0705cc, #0b070588 70%, transparent);
}
html[data-skin] .screen--room.screen--compact:not(.screen--desk) .screen-heading--scene > div { width: auto; }
html[data-skin] .screen--room:not(.screen--desk) .screen-scene { display: none; }
html[data-skin] .screen--room:not(.screen--desk) .screen-heading h1 { color: #f6e8c8; text-shadow: 0 2px 0 #0008; }
html[data-skin] .screen--room:not(.screen--desk) .screen-heading p { color: #e8d8b6; text-shadow: 0 1px 2px #000, 0 0 10px #000c; }
html[data-skin] .screen--room:not(.screen--desk) .screen-heading .back-link,
html[data-skin] .screen--room:not(.screen--desk) > .back-link { color: #f3cfae; }
html[data-skin] .screen--room:not(.screen--desk) .screen-workspace {
  padding: 0 1rem .6rem; background: var(--desk-paper); color: var(--desk-ink);
  border: 1px solid var(--desk-paper-edge); border-radius: 6px; box-shadow: 0 14px 30px #000b;
}
html[data-skin] .screen--room:not(.screen--desk) .screen-workspace:not(.screen-workspace--tabs) { padding-top: .6rem; }
html[data-skin] .screen--room:not(.screen--desk) .plaque-rail { margin: .2rem 0 0; }

@media (max-width: 760px) {
  html[data-skin] .screen--room.screen--compact:not(.screen--desk) { padding: .35rem .6rem .45rem; }
  html[data-skin] .screen--room:not(.screen--desk) .screen-workspace { padding: 0 .6rem .4rem; }
  /* Every plaque whole, in two short rows: a sideways rail cut the last one off ("SCOUTING ..."). Three
     across, then the fourth beside the week close, so the room's work above keeps its height. */
  html[data-skin] .screen--room .plaque-rail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .4rem; }
  html[data-skin] .screen--room .plaque, html[data-skin] .screen--room .plaque-rail .week-close {
    min-width: 0; min-height: 44px; padding: .25rem .35rem; font-size: .66rem; line-height: 1.15; text-align: center; grid-column: span 2;
  }
  html[data-skin] .screen--room .plaque-rail .week-close { grid-column: span 4; padding-block: 0; }
  html[data-skin] .screen--room .plaque-rail .plaque:last-child:nth-child(4), html[data-skin] .screen--room .plaque-rail .plaque:last-child:nth-child(2) { grid-column: 1 / -1; }
  /* Five plaques (the dossier): the last two share the second row evenly. */
  html[data-skin] .screen--room .dossier-actions .plaque:nth-child(n+4):nth-child(-n+5) { grid-column: span 3; }
  /* Anything else the rail carries (the dossier's Release) takes its own full-width row. */
  html[data-skin] .screen--room .plaque-rail > :not(.plaque):not(.week-close) { grid-column: 1 / -1; min-height: 44px; margin: 0; }
  html[data-skin] .screen--room .plaque-rail .week-close p { display: none; }
  html[data-skin] .screen--room .plaque-rail .week-close .button { min-height: 44px; }
}