/* The Stable rooms (phase 4, DECISIONS.md 2026-09-24): dossier, roster, deck, teams. The shell they sit in
   -- stage, paper, bookmark tabs, plaques -- is rooms.css; this file is what is particular to each room. */

/* ---------- Dossier: design/mockups/management/dossier-v2.png ---------- */
html[data-skin] .screen--dossier .dossier-sheet {
  display: grid; grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr) minmax(11rem, 13rem);
  grid-template-areas: "photo file status" "photo hand status"; align-items: start; gap: .7rem 1rem;
  margin: .5rem 0 0; padding: 0; background: none; border: 0; box-shadow: none;
}
html[data-skin] .screen--dossier .dossier-photo { grid-area: photo; position: relative; margin: .4rem 0 0; padding: .45rem .45rem .2rem; background: #fbf5e4; box-shadow: 0 8px 18px #0006; transform: rotate(-1.2deg); }
html[data-skin] .screen--dossier .dossier-photo::before {
  content: ''; position: absolute; top: -.55rem; left: 50%; width: 4.5rem; height: 1.1rem; transform: translateX(-50%) rotate(2deg);
  background: rgba(236, 222, 186, .85); box-shadow: 0 1px 2px #0005;
}
html[data-skin] .screen--dossier .dossier-photo .portrait { width: 100%; height: auto; aspect-ratio: 3 / 4.2; border-radius: 0; box-shadow: none; }
html[data-skin] .screen--dossier .dossier-photo figcaption { padding: .3rem 0 .1rem; text-align: center; font-family: var(--display); font-size: 1.05rem; text-transform: uppercase; color: var(--desk-urgent); }

html[data-skin] .screen--dossier .dossier-file { grid-area: file; min-width: 0; }
html[data-skin] .screen--dossier .dossier-file__kicker { margin: 0; font-family: var(--utility); font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--desk-urgent); }
html[data-skin] .screen--dossier .dossier-file__name { margin: 0 0 .4rem; font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; text-transform: uppercase; color: var(--desk-ink); border-bottom: 2px solid var(--desk-rule); padding-bottom: .25rem; }
html[data-skin] .screen--dossier .dossier-file__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1rem; }
html[data-skin] .screen--dossier .dossier-bio { margin: 0; }
html[data-skin] .screen--dossier .dossier-bio > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .5rem; padding: .18rem 0; border-bottom: 1px dotted var(--desk-rule); }
html[data-skin] .screen--dossier .dossier-bio dt { font-family: var(--utility); font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6b5238; }
html[data-skin] .screen--dossier .dossier-bio dd { margin: 0; font-size: .82rem; color: var(--desk-ink); }
html[data-skin] .screen--dossier .dossier-bio dd::first-letter { text-transform: uppercase; }
/* The week's lesson rides above the sheet as a slim strip, not a banner that pushes the file down. */
html[data-skin] .screen--dossier .lesson-note { margin: .4rem 0 0; padding: .35rem .7rem; }
html[data-skin] .screen--dossier .lesson-note h2 { font-size: 1rem; margin: 0; }
html[data-skin] .screen--dossier .lesson-note p { margin: .1rem 0 0; font-size: .8rem; line-height: 1.35; }

html[data-skin] .screen--dossier .attribute-grid { display: grid; grid-template-columns: 1fr; gap: .3rem; margin: 0; padding: .5rem .7rem; background: #f7eed7; border: 1px solid var(--desk-rule); }
html[data-skin] .screen--dossier .attribute-grid .stat {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: .5rem; padding: 0; border: 0; background: none;
}
html[data-skin] .screen--dossier .attribute-grid .stat__label { font-size: .68rem; color: #6b5238; }
html[data-skin] .screen--dossier .attribute-grid .stat__value { font-size: 1.15rem; color: var(--desk-ink); }
html[data-skin] .screen--dossier .attribute-grid .stat__bar {
  grid-column: 1 / -1; display: block; height: .38rem; border: 1px solid #0003;
  background: linear-gradient(90deg, #2c5a8a calc(var(--value) * 1%), #e4d6b3 0);
}
html[data-skin] .screen--dossier .attribute-grid .stat--declined .stat__bar { background: linear-gradient(90deg, #8e241d calc(var(--value) * 1%), #e4d6b3 0); }
html[data-skin] .screen--dossier .attribute-grid .stat__decline { grid-column: 1 / -1; font-size: .66rem; }

html[data-skin] .screen--dossier .dossier-status { grid-area: status; display: grid; gap: .35rem; }
html[data-skin] .screen--dossier .dossier-status__card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: .4rem;
  padding: .3rem .6rem; background: #f7eed7; border: 1px solid var(--desk-rule); box-shadow: 0 2px 4px #0002;
}
html[data-skin] .screen--dossier .dossier-status__label { font-family: var(--utility); font-size: .66rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
html[data-skin] .screen--dossier .dossier-status__value { font-family: var(--display); font-size: 1.35rem; line-height: 1; color: var(--desk-ink); }
html[data-skin] .screen--dossier .dossier-status__word { grid-column: 1 / -1; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #2f6b3a; }
html[data-skin] .screen--dossier .dossier-urgent {
  display: grid; gap: .1rem; padding: .6rem .7rem; background: var(--desk-urgent); color: #fff3de; transform: rotate(1deg); box-shadow: 0 6px 12px #0006;
}
html[data-skin] .screen--dossier .dossier-urgent__kicker { font-family: var(--utility); font-size: .62rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #f3cfae; }
html[data-skin] .screen--dossier .dossier-urgent strong { font-family: var(--display); font-size: 1.2rem; text-transform: uppercase; }

html[data-skin] .screen--dossier .dossier-handshake {
  grid-area: hand; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: .15rem .8rem;
  padding: .5rem .7rem; background: #f7eed7; border: 1px solid var(--desk-rule);
}
html[data-skin] .screen--dossier .dossier-handshake h3 { margin: 0; font-family: var(--utility); font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--desk-urgent); }
html[data-skin] .screen--dossier .dossier-handshake p, html[data-skin] .screen--dossier .promise-ledger { margin: 0; font-size: .8rem; }
html[data-skin] .screen--dossier .promise-ledger { display: flex; flex-wrap: wrap; gap: .3rem .8rem; padding: 0; list-style: none; }
html[data-skin] .screen--dossier .promise-ledger__item strong { margin-right: .3rem; }
html[data-skin] .screen--dossier .promise-ledger__item--broken { color: var(--desk-urgent); text-decoration: line-through; }
html[data-skin] .screen--dossier .promise-ledger__summary { grid-column: 2; font-size: .72rem; color: #6b5238; }

@media (max-width: 1100px) {
  html[data-skin] .screen--dossier .dossier-sheet { grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr); grid-template-areas: "photo file" "status status" "hand hand"; }
  html[data-skin] .screen--dossier .dossier-status { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-skin] .screen--dossier .dossier-urgent { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  html[data-skin] .screen--dossier .dossier-sheet { grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-areas: "photo file" "status status" "hand hand"; gap: .5rem; }
  html[data-skin] .screen--dossier .dossier-file__body { grid-template-columns: 1fr; }
  html[data-skin] .screen--dossier .dossier-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-skin] .screen--dossier .dossier-bio > div { grid-template-columns: 5.5rem minmax(0, 1fr); }
  html[data-skin] .screen--dossier .dossier-handshake { grid-template-columns: 1fr; }
  html[data-skin] .screen--dossier .promise-ledger__summary { grid-column: 1; }
}

/* ---------- Roster: the stable as photos pinned to a cork board ---------- */
html[data-skin] .screen--room.screen--roster:not(.screen--desk) .screen-workspace {
  background-color: #b98c5a;
  background-image:
    radial-gradient(circle at 20% 30%, #0000001a 1px, transparent 1.5px),
    radial-gradient(circle at 70% 60%, #ffffff14 1px, transparent 1.5px),
    radial-gradient(circle at 40% 80%, #0000001f 1px, transparent 1.5px);
  background-size: 7px 7px, 9px 9px, 11px 11px;
}
html[data-skin] .screen--roster .career-card {
  position: relative; background: #fbf5e4; border: 0; border-radius: 1px; box-shadow: 0 6px 12px #0006;
  transform: rotate(-.6deg);
}
html[data-skin] .screen--roster .career-card:nth-child(even) { transform: rotate(.7deg); }
html[data-skin] .screen--roster .career-card:nth-child(3n) { transform: rotate(-.2deg); }
html[data-skin] .screen--roster .career-card::before {
  content: ''; position: absolute; z-index: 1; top: -.35rem; left: 50%; width: .8rem; height: .8rem; margin-left: -.4rem;
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a7a, #a3211a 60%, #5c0f0b); box-shadow: 0 2px 3px #0008;
}
html[data-skin] .screen--roster .career-card--attention { outline: 3px solid var(--desk-urgent); outline-offset: -3px; }

/* ---------- Deck: the fifteen as cards in a binder's clear sleeves ---------- */
html[data-skin] .screen--deck .collection-loadout { position: relative; padding-left: 2.2rem; }
html[data-skin] .screen--deck .collection-loadout::before {
  content: ''; position: absolute; top: .5rem; bottom: .5rem; left: .5rem; width: 1rem;
  background: radial-gradient(circle, #6b5a48 .32rem, #d8c7a3 .34rem, #0000 .5rem) center top / 1rem 33.3% repeat-y;
}
/* On a phone the binder rings slim down so the slots keep their width. */
@media (max-width: 760px) {
  html[data-skin] .screen--deck .collection-loadout { padding-left: 1.1rem; }
  html[data-skin] .screen--deck .collection-loadout::before {
    left: .2rem; width: .6rem;
    background: radial-gradient(circle, #6b5a48 .18rem, #d8c7a3 .2rem, #0000 .3rem) center top / .6rem 33.3% repeat-y;
  }
}
html[data-skin] .screen--deck .deck-slot {
  background: linear-gradient(160deg, #ffffffd9, #f3ead3); border: 1px solid #b8a67f; border-radius: 3px;
  box-shadow: inset 0 0 0 3px #ffffff80, 0 2px 4px #0002;
}