/* Stage 0.23.1 — one alignment grid for every desk screen.
   The game is drawn on a stage 2,560 units wide (see the stage script in index.html), so these
   measurements hold at every window size. Loaded last; it only positions things. */

/* 1. Three fixed rows: heading, one line of guidance, the work surface.
      The work surface and the cover start on the same line on every screen. */
.office-main:has(> .office-desk-grid, > .office-issue-grid, > .office-cover-grid, > .office-press-grid){
  display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:74px 54px minmax(0,1fr);row-gap:12px;align-content:stretch}
.office-main > .office-section-heading{grid-row:1;min-height:0;margin:0!important}
.office-main > .office-flow-help,.office-main > .inline-order-help{grid-row:2;margin:0!important;min-height:0;align-self:stretch;display:flex;align-items:center}
.office-main > .office-desk-grid,.office-main > .office-issue-grid,.office-main > .office-cover-grid,.office-main > .office-press-grid{grid-row:3;min-height:0;margin:0!important;height:auto!important}

/* 2. Heading: title left, figures and the next step in fixed places, so nothing shifts between screens. */
.office-section-heading{display:grid!important;grid-template-columns:minmax(0,1fr) auto 280px;column-gap:32px;align-items:end}
.office-section-heading > .primary{justify-self:stretch;width:100%;text-align:center;justify-content:center;white-space:nowrap}
.office-section-heading > .office-net{justify-self:end;align-self:center;text-align:right}
.office-section-heading > .heading-stats{justify-self:end}

/* 3. Manuscript desk: the sheet starts level with the trays and the assessment. */
.office-reading{position:relative}
.office-reading > .manuscript-position{position:absolute;right:8px;top:-44px;left:auto;margin:0;justify-content:flex-end;white-space:nowrap}
.office-reading > .typescript-stack{margin-top:0!important}

/* 4. The cover hangs from the same line as the work surface, at one size, on every screen. */
.wide-office .office-cover-object{align-items:flex-start!important;padding-top:var(--stage-cover-top,74px)!important}

/* 5. Choices shown as things to pick, not as drop-down lists. */
select.stage-choice-source{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;margin:0!important;padding:0!important;border:0!important}
.stage-choices{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px}
.stage-choices button{appearance:none;border:1px solid rgba(231,194,146,.45);background:rgba(20,12,9,.55);color:#f3dfbd;font:600 14px/1.15 Arial,sans-serif;padding:8px 12px;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:40px;transition:background .12s,border-color .12s}
.stage-choices button:hover{border-color:#e7c292;background:rgba(60,34,22,.8)}
.stage-choices button:focus-visible{outline:2px solid #f6d48a;outline-offset:2px}
.stage-choices button[aria-pressed="true"]{background:#a84a31;border-color:#f3c98a;color:#fff6df;box-shadow:inset 0 0 0 1px rgba(255,236,196,.35)}
.stage-choices small{font:400 12px/1.2 Arial,sans-serif;opacity:.85;display:block}
/* cover price: coins */
.stage-choices.kind-price{gap:12px}
.stage-choices.kind-price button{width:64px;height:64px;min-height:0;padding:0;border-radius:50%;justify-content:center;font:700 22px/1 'Courier Prime',monospace;background:radial-gradient(circle at 35% 30%,#6b5a3a,#2a2015 70%);border:2px solid #b89658;color:#f1dba6;box-shadow:inset 0 0 0 3px rgba(0,0,0,.25)}
.stage-choices.kind-price button[aria-pressed="true"]{background:radial-gradient(circle at 35% 30%,#f3d78c,#b8862f 72%);color:#2b1a08;border-color:#fff0c2;box-shadow:0 0 0 3px rgba(243,201,138,.35),inset 0 0 0 3px rgba(255,255,255,.25)}
/* issue length: magazines of growing thickness */
.stage-choices.kind-pages{gap:10px;align-items:flex-end}
.stage-choices.kind-pages button{flex:1;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 8px;min-width:0}
.stage-choices.kind-pages i{display:block;width:44px;background:repeating-linear-gradient(#e9d7b0 0 2px,#b9a47c 2px 3px);border:1px solid #6f5a3a;border-left:5px solid #a84a31}
.stage-choices.kind-pages b{font:700 17px/1 'Courier Prime',monospace}
/* ink treatment: two-colour swatches, named beneath */
.stage-choices.kind-palette{display:grid;grid-template-columns:repeat(4,max-content);gap:8px 14px;align-items:center}
.stage-choices.kind-palette .stage-choice-name{grid-column:1/-1}
.stage-choices.kind-palette button{padding:3px;min-height:0;border-radius:50%;background:none;border:2px solid transparent}
.stage-choices.kind-palette button[aria-pressed="true"]{border-color:#f6d48a;background:none;box-shadow:0 0 0 2px rgba(246,212,138,.3)}
.stage-choices.kind-palette i{display:block;width:34px;height:34px;border-radius:50%;border:1px solid rgba(0,0,0,.55);flex:none}
.stage-choice-name{flex-basis:100%;font:13px/1.2 'Courier Prime',monospace;color:#e7c292;letter-spacing:.02em}
/* composition: two tidy columns */
.stage-choices.kind-layout{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.stage-choices.kind-layout button{font-size:13px;min-height:34px;padding:5px 9px;text-align:left}
.stage-choices.kind-badge button{font-size:13px;min-height:34px;padding:5px 10px}
.office-cover-grid aside > *{flex-shrink:0}
/* guidance line added on screens that had none */
.stage-guidance{color:#d9c3a0;font:15px/1.35 Arial,sans-serif}
/* cover treatment: three priced cards */
.stage-choices.kind-artist button{flex:1;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.stage-choices.kind-artist b{font:700 15px/1.1 Arial,sans-serif}
/* featured story: a short list */
.stage-choices.kind-lead{flex-direction:column;flex-wrap:nowrap;gap:5px}
.stage-choices.kind-lead button{justify-content:flex-start;text-align:left;font-weight:400;font-size:13px;min-height:30px;padding:5px 10px}
.stage-choices.kind-badge i{font-style:normal;font-size:18px;line-height:1}

/* 6. The sales reveal: the option sits on the same line as the buttons. */
.newsstand-reveal .nr-footer label,#newsstand-reveal label:has(.nr-disable){display:inline-flex;align-items:center;gap:8px;margin-right:auto;font:14px Arial,sans-serif;color:#e7c292;cursor:pointer}

[data-open-cover-editor]{height:auto!important;min-height:44px;padding-top:9px!important;padding-bottom:9px!important;white-space:normal;line-height:1.2}

/* 7. Panel headings keep their height on short stages; trays hold more manuscripts. */
.office-notebook > h2,.office-editor-tools > h2{flex-shrink:0}
.office-tray-pages{gap:8px!important}
.office-tray-pages [data-paper]{padding-top:10px!important;padding-bottom:10px!important;min-height:0!important}

:has(> [data-open-cover-editor]) > *{flex-shrink:0!important}
/* 8. Short stages (ultrawide full screen): a tighter rail leaves room for the magazine's name. */
@media(max-height:1150px){.office-rail button{min-height:62px!important;padding-top:7px!important;padding-bottom:7px!important;gap:4px!important}.office-rail{gap:6px!important;padding-top:14px!important}}

.office-section-heading > [data-open-issue]{font-size:17px!important;letter-spacing:0!important;white-space:nowrap!important;padding-left:8px!important;padding-right:8px!important;min-width:0!important;width:100%!important;box-sizing:border-box!important}

html.on-stage .office-main .office-section-heading > button:last-child{font-size:clamp(13px,calc(250px / var(--stage-btn-len,16) * 1.9),22px)!important;letter-spacing:0!important;white-space:nowrap!important;padding-left:6px!important;padding-right:6px!important;min-width:0!important;width:280px!important;max-width:280px!important;box-sizing:border-box!important;overflow:hidden!important}

/* Give cover design room to breathe; two-column choices reduce vertical travel. */
@media (min-width:1551px){.wide-office .office-cover-grid{grid-template-columns:minmax(0,1fr) minmax(520px,31%)!important;gap:18px!important}}
.office-cover-controls .stage-choices.kind-lead{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.office-cover-controls .stage-choices.kind-lead button{min-width:0;min-height:30px;line-height:1.15}
.office-cover-controls .stage-choices.kind-palette{grid-template-columns:repeat(8,max-content);gap:6px 12px}
.office-cover-controls .stage-choices.kind-layout button{min-height:29px;padding:4px 8px}
.office-cover-controls .stage-choices.kind-badge button{min-height:29px;padding:4px 8px}

.office-cover-controls .office-signature{display:none}
.office-cover-controls .stage-choices.kind-badge{gap:4px}
.office-cover-controls .stage-choices.kind-badge button{font-size:12px;padding:4px 6px}


/* Compact the forecast without hiding its explanation.  Keep the press action
   reachable at the bottom of the work area if content is taller than the screen. */
@media (min-width:1100px) {
 .wide-office .office-production { height:auto; min-height:100%; align-self:start; }
 .wide-office .office-demand { display:grid; grid-template-columns:minmax(200px, .8fr) minmax(260px, 1.2fr); grid-template-rows:auto auto auto; column-gap:26px; align-content:center; padding:14px 20px; margin:12px 0; }
 .wide-office .office-demand > span { grid-column:1; grid-row:1; }
 .wide-office .office-demand > strong { grid-column:1; grid-row:2; font-size:clamp(38px,2.3vw,58px); line-height:1.05; margin:5px 0; }
 .wide-office .office-demand > p { grid-column:1; grid-row:3; font-size:14px; line-height:1.35; }
 .wide-office .office-demand > .house-rule-notes { grid-column:2; grid-row:1 / 4; align-self:center; margin:0!important; line-height:1.35!important; }
 .wide-office .press-marketing { margin-bottom:12px; }
 .wide-office .press-marketing-choice { min-height:125px; }
 .wide-office .office-production .office-publish-action { position:sticky; bottom:0; z-index:4; padding:8px 0 0; background:linear-gradient(transparent,#241915 14px); }
}
@media (min-width:1100px) and (max-height:850px) {
 .wide-office .office-demand { padding:10px 14px; margin:8px 0; }
 .wide-office .press-marketing-choice { min-height:100px; }
}

@media (min-width:1100px){.wide-office .office-production > p{line-height:1.25;margin:10px 0 8px}}


/* Price and campaign choices share a row with the demand forecast. */
@media (min-width: 1551px) {
 .wide-office .office-production { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:'run run' 'price demand' 'marketing demand' 'proof proof' 'table table' 'explain explain' 'publish publish'; gap:8px 20px; align-content:start; }
 .wide-office .office-production > .press-run-row { grid-area:run; }
 .wide-office .office-production > .press-pricing-actions { grid-area:price; min-width:0; }
 .wide-office .office-production > .press-marketing { grid-area:marketing; margin:0; }
 .wide-office .office-production > .office-demand { grid-area:demand; display:flex; flex-direction:column; justify-content:center; align-items:stretch; gap:8px; margin:0; padding:18px 22px; min-width:0; }
 .wide-office .office-demand > strong { font-size:clamp(38px,2.3vw,58px); }
 .wide-office .office-demand > .house-rule-notes { margin:4px 0 0!important; align-self:stretch; }
 .wide-office .office-production > .proof-range { grid-area:proof; }
 .wide-office .office-production > .office-marketing-table { grid-area:table; }
 .wide-office .office-production > p { grid-area:explain; }
 .wide-office .office-production > .office-publish-action { grid-area:publish; }
 .wide-office .press-marketing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 .wide-office .press-marketing-choice { min-height:100px; }
 .wide-office .office-cover-pricing { margin:4px 0 6px; }
}