/* Sacrament VTT: restrained spacing and interaction polish.
   Additive CSS only; no changes to rules, event handlers, or network protocol. */
:root { --vtt-space-1:var(--ui-space-1); --vtt-space-2:var(--ui-space-2); --vtt-space-3:var(--ui-space-3); --vtt-radius:6px; }
#top { column-gap:14px; row-gap:4px; padding:6px 14px; }
#top .grp { gap:8px; }
#top .lbl { line-height:1.3; }
#top .grow { min-width:0; }
#top .who { overflow-wrap:anywhere; }
#stage { grid-template-columns:minmax(0,1fr) clamp(300px,25vw,380px); }
#panel { padding:16px; gap:14px; scrollbar-gutter:stable; }
#panel .sec { padding-bottom:14px; }
#panel h3 { margin-bottom:10px; line-height:1.25; }
#panel h4 { margin:12px 0 7px; line-height:1.3; }
#panel .row { row-gap:8px; }
#panel label { gap:5px; }
#panel .note { line-height:1.5; }
#panel .cats { gap:8px; }
#panel .cats button { padding:7px 5px; border-radius:var(--vtt-radius); }
#panel .stepper { gap:6px; }
#panel .ol li { padding:6px 0; }
#panel details.rules summary { padding-block:4px; }
#feed .bar1 { padding:5px 14px; gap:10px; }
#feed ol { padding:6px 14px 10px; gap:4px; }
#feed li { line-height:1.5; }
#strip { padding:9px 14px calc(9px + env(safe-area-inset-bottom)); gap:9px 12px; }
#strip .stats, #strip .gear, #strip .efs { gap:6px; }
#strip .me { gap:3px; }
#strip .row2 { margin-top:2px; padding-top:9px; }
#toolbar { gap:max(.5cqw,4px); }
#toolbar .chip { padding-inline:10px; border-radius:4px; }
#banner .alert { max-width:min(90vw,650px); line-height:1.4; }
#entry { padding:clamp(20px,4vw,48px) 20px; }
#entry .entry-grid { gap:20px; margin-top:22px; }
#entry .card-box { padding:clamp(16px,2vw,24px); gap:12px; }
#entry .card-box p { line-height:1.5; }
#entry .card-box label { gap:6px; }
#entry .card-box .btn { align-self:flex-start; }
#entry .my-tables { margin-top:26px; }
/* Consistent interactive affordances, especially for keyboard use. */
#app button, #entry button, #app select, #app input, #entry input { transition:border-color .12s ease,background-color .12s ease,box-shadow .12s ease; }
#app button:hover:not(:disabled), #entry button:hover:not(:disabled) { border-color:var(--candle); }
#app :is(button,input,select,textarea,a,summary):focus-visible,
#entry :is(button,input,select,textarea,a,summary):focus-visible {
  outline:2px solid var(--candle); outline-offset:2px;
}
#panel :is(input,select,textarea), #entry :is(input,select,textarea) { border-radius:4px; }
#app button:disabled, #entry button:disabled { cursor:not-allowed; }
@media(max-width:1150px) {
  #stage { grid-template-columns:minmax(0,1fr) 300px; }
  #panel { padding:12px; gap:11px; }
  #strip { padding-inline:9px; gap:7px 9px; }
}
@media(max-width:900px) {
  #stage { grid-template-columns:minmax(0,1fr); }
  #panel { padding:12px 14px; scrollbar-gutter:auto; }
  #panel .sec { padding-bottom:10px; }
}
@media(max-width:600px) {
  #top { padding:2px 8px; column-gap:8px; row-gap:0; }
  #panel { padding:10px 12px; gap:9px; }
  #panel .cats { gap:5px; }
  #panel .cats button { padding:8px 4px; }
  #feed .bar1 { padding:0 9px; }
  #feed ol { padding:4px 9px 8px; }
  #strip { padding:4px 8px calc(4px + env(safe-area-inset-bottom)); gap:4px 6px; }
  #entry { padding:20px 12px; }
  #entry .entry-grid { gap:12px; }
  #entry .card-box { padding:16px; }
}
@media(prefers-reduced-motion:reduce) {
  #app button, #entry button, #app select, #app input, #entry input { transition:none; }
}

/* Always-available, unobtrusive route back to the main website. */
.vtt-home-link { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:var(--ui-compact-height); padding:5px 10px; border:1px solid var(--line); border-radius:5px; color:var(--fg); background:var(--bg2); font:600 var(--ui-text-small) var(--label, sans-serif); letter-spacing:.025em; text-decoration:none; white-space:nowrap; }
.vtt-home-link:hover { color:var(--candle); border-color:var(--candle); background:var(--bg); }
.vtt-home-link:focus-visible { outline:2px solid var(--candle); outline-offset:2px; }
#top .vtt-home-table { margin-left:auto; flex-shrink:0; }
#entry .vtt-home-entry { margin-bottom:14px; }
@media(max-width:600px) { #top .vtt-home-table { min-height:var(--ui-compact-height); padding:4px 7px; font-size:var(--ui-text-small); } }

/* Compact selected-target prompt: never expand the player's item inventory. */
#strip .aim-prompt { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; padding:5px 0; border-top:1px solid var(--line, #7775); }
#strip .aim-prompt .q { flex:1 1 200px; min-width:0; line-height:1.35; }
#strip .aim-prompt .chip { flex:0 0 auto; }
@media(max-width:600px) { #strip .aim-prompt { gap:5px 8px; } }
/* VTT: compact controls, dice and counters stay sans-serif. */
#app :is(button,input,select,textarea,.lbl,.chip,.stat,.num),#entry :is(button,input,select,textarea){font-family:var(--label);}

/* Role labels use words as well as colour. GM tools never impersonate a hero. */
.view-role { display:inline-flex; align-items:center; align-self:center; padding:4px 9px; border:1px solid var(--blood-hi); background:var(--blood); color:var(--on-blood); font:700 var(--ui-text-small)/1.3 var(--label); white-space:nowrap; letter-spacing:0; }
#app[data-role=player] .view-role { background:var(--verdigris-deep); border-color:var(--verdigris); color:var(--fg); }
#app[data-role=gm] #top { border-left:4px solid var(--blood-hi); }
#app[data-role=player] #top { border-left:4px solid var(--verdigris); }
#app[data-role=gm] #strip { border-top:2px solid var(--candle); max-height:30vh; overflow:auto; }
#app[data-role=gm] #panel>* { flex-shrink:0; }
#app[data-role=gm] .gm-dice { min-width:0; }
#app[data-role=gm] .gm-dice [role=status] { overflow-wrap:anywhere; }
.sh-gm-rolls .sh-row { gap:8px; margin-top:8px; }

/* A narrow window scrolls the map and tray together for either role. Their boxes keep
   their own height, so tray tabs cannot sit on top of map tokens. */
@media(max-width:900px) {
  #app #stage { display:block; overflow-y:auto; overflow-x:hidden; }
  #app #tablewrap { height:min(62.5vw,46vh); min-height:0; }
  #app #panel { max-height:none; overflow:visible; }
}

/* Shared GM/player tray rhythm: fields, action rows and help text have
   breathing room, including space for the target selector's focus outline. */
#panel>.sec { flex-shrink:0; }
#panel .sec { display:flex; flex-direction:column; align-items:stretch; gap:10px; }
#panel .sec>h3,#panel .sec>h4,#panel .sec>p { margin:0; }
#panel .sec>* { min-width:0; }
#panel .row>button { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
#panel .row>label { min-width:0; max-width:100%; }

.area-targets { min-width:0; margin:0; padding:10px; border:1px solid var(--edge); }
#panel .area-targets label { min-height:40px; padding:4px 0; overflow-wrap:anywhere; }

.gm-dice-title {font:700 1rem var(--display);color:var(--candle);white-space:nowrap}

/* Scene sharing uses the same modal rhythm and sizing as existing controls. */
.scene-transfer-body{max-width:720px;margin:auto;padding:24px;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}
.scene-transfer-body h2,.scene-transfer-body p{margin:0}
.scene-transfer-body label{font-size:var(--ui-text);text-transform:none;letter-spacing:0;gap:8px;margin-block:12px}
.scene-transfer-body input,.scene-transfer-body textarea{width:100%;font-size:var(--ui-text);min-height:var(--ui-control-height)}
.scene-transfer-body input[type=checkbox]{width:24px;min-height:24px;flex:none}
.scene-transfer-body img{display:block;width:100%;max-height:240px;object-fit:contain}
.scene-transfer-body p{overflow-wrap:anywhere;white-space:pre-wrap}
#sceneTransferStatus{color:var(--candle)}
@media(max-width:600px){.scene-transfer-body{padding:16px}}