/* =====================================================================
   At the table: show-to-table overlay, next session, look-up buttons,
   install + notification settings.
   ===================================================================== */

/* ---- the picture the DM puts on everyone's screen ---- */
.show-layer { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; background: #0b0907ee; color: #f3ead8;
  backdrop-filter: blur(6px); animation: show-fade .25s ease both; }
@keyframes show-fade { from { opacity: 0; } }
.show-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; padding-top: max(.8rem, env(safe-area-inset-top));
  border-bottom: 1px solid #ffffff1a; flex-wrap: wrap; }
.show-cap { display: flex; flex-direction: column; min-width: 0; }
.show-who { font-size: .85rem; color: #cbb98f; }
.show-cap strong { font-family: var(--head); font-size: 1.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.show-top .btn { color: #f3ead8; border-color: #ffffff33; }
.show-top .btn:not(.ghost) { background: #f3ead8; color: #1d140d; }
.show-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: clamp(.6rem, 2vw, 1.6rem); overflow: auto; }
.show-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 30px 80px -20px #000; cursor: zoom-in; }
.show-layer.zoomed .show-stage { place-items: start; }
.show-layer.zoomed .show-stage img { max-width: none; max-height: none; cursor: zoom-out; }
.show-layer.fresh .show-stage img { animation: show-in .7s cubic-bezier(.2, .9, .25, 1) both; }
@keyframes show-in {
  0% { opacity: 0; transform: scale(.94); box-shadow: 0 0 0 0 #e3c27e00, 0 30px 80px -20px #000; }
  55% { opacity: 1; transform: none; box-shadow: 0 0 0 6px #e3c27e66, 0 30px 80px -20px #000; }
  100% { box-shadow: 0 0 0 0 #e3c27e00, 0 30px 80px -20px #000; }
}
.show-file { text-align: center; color: var(--ink); }

/* in the table log */
.show-card { display: flex; align-items: center; gap: .8rem; width: 100%; max-width: 420px; padding: .45rem; text-align: left; font: inherit; color: var(--ink);
  background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius); cursor: zoom-in; }
.show-card:hover { border-color: var(--gilt); }
.show-card img { width: 92px; height: 64px; object-fit: cover; border-radius: var(--r-sm); flex: none; background: var(--line2); }
.show-card > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.show-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.show-card-ic { font-size: 2rem; width: 64px; text-align: center; }

/* DM picker */
.show-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; max-height: 60vh; overflow: auto; margin: .6rem 0; }
.show-pick-i { display: flex; flex-direction: column; gap: .3rem; padding: .35rem; font: inherit; color: var(--ink); text-align: left; background: var(--panel2);
  border: 1px solid var(--line2); border-radius: var(--radius); cursor: pointer; }
.show-pick-i:hover { border-color: var(--gilt); }
.show-pick-i img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); }
.show-pick-i span { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- next session strip (campaign page) ---- */
#camp-next:empty { display: none; }
#camp-next { margin: 0 0 1rem; }
.nextsess { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.1rem; align-items: center; padding: .9rem 1.1rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.nextsess.empty { display: flex; gap: .8rem; flex-wrap: wrap; }
.nextsess.empty .btn { margin-left: auto; }
.ns-ic .ico, .nextsess .btn .ico { width: 1.1rem; height: 1.1rem; vertical-align: -3px; }
.ns-ic { color: var(--gilt); }
/* a tear-off calendar leaf */
.ns-date { width: 4.2rem; border-radius: var(--r-sm); overflow: hidden; text-align: center; background: var(--input); border: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--line2), 0 3px 0 -1px var(--panel2), 0 3px 0 0 var(--line2); }
.ns-mon { display: block; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: .78rem; letter-spacing: .08em; padding: .15rem 0;
  font-variant-caps: all-small-caps; font-size: .95rem; }
.ns-day { display: block; font-family: var(--head); font-weight: 800; font-size: 2rem; line-height: 1.15; padding: .1rem 0 .2rem; font-variant-numeric: lining-nums; }
.ns-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ns-kicker { color: var(--muted); font-size: .9rem; }
.ns-when { font-family: var(--head); font-size: 1.3rem; line-height: 1.2; }
.ns-note { font-size: .95rem; }
.ns-who { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.ns-p { width: 1.65rem; height: 1.65rem; border-radius: 50%; display: inline-grid; place-items: center; font-size: .8rem; font-weight: 800; background: var(--panel2);
  box-shadow: inset 0 0 0 2px var(--line); color: var(--muted); }
.ns-p.yes { box-shadow: inset 0 0 0 2px var(--ok, #3f8f5a); color: var(--ink); }
.ns-p.maybe { box-shadow: inset 0 0 0 2px var(--warn, #c9902f); color: var(--ink); }
.ns-p.no { opacity: .45; text-decoration: line-through; }
.ns-p.none { box-shadow: inset 0 0 0 1.5px var(--line); border: 1px dashed transparent; }
.ns-who .muted { margin-left: .35rem; }
.ns-act { display: flex; flex-direction: column; gap: .45rem; align-items: flex-end; }
@media (max-width: 760px) {
  .nextsess { grid-template-columns: auto minmax(0, 1fr); }
  .ns-act { grid-column: 1 / -1; align-items: stretch; }
  .ns-act .rsvp { width: 100%; } .ns-act .rsvp-b { flex: 1; }
}

/* RSVP buttons */
.rsvp { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-sm); background: var(--panel2); border: 1px solid var(--line2); }
.rsvp-b { font: inherit; font-weight: 700; font-size: .9rem; border: 0; background: none; color: var(--muted); padding: .4rem .75rem; border-radius: calc(var(--r-sm) - 2px); cursor: pointer; white-space: nowrap; }
.rsvp-b:hover { color: var(--ink); }
.rsvp-b.on { color: #fff; box-shadow: var(--shadow); }
.rsvp-b.yes.on { background: var(--ok, #3f8f5a); }
.rsvp-b.maybe.on { background: var(--warn, #c9902f); }
.rsvp-b.no.on { background: color-mix(in srgb, var(--muted) 85%, #000); }
[data-theme="wasteland"] .rsvp-b.on, [data-theme="future"] .rsvp-b.on { color: #061004; }

/* on the dashboard's table */
.th-next { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: 0 0 1rem; padding: .6rem .75rem; border-radius: var(--radius);
  border: 1px solid var(--table-line); background: #00000026; color: var(--table-ink); max-width: 60ch; text-decoration: none; }
.th-next > .ico { width: 1.3rem; height: 1.3rem; color: var(--token-ring); flex: none; }
.th-next-txt { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; flex: 1; min-width: 12rem; }
.th-next-until, .th-next-count { color: var(--table-muted); font-size: .9rem; }
.th-next.add { width: fit-content; border-style: dashed; color: var(--table-muted); }
.th-next.add:hover { color: var(--table-ink); border-color: var(--token-ring); }
.rsvp.on-table { background: #00000033; border-color: var(--table-line); }
.rsvp.on-table .rsvp-b { color: var(--table-muted); }
.rsvp.on-table .rsvp-b.on { color: #fff; }

/* ---- look up ---- */
.look-wrap { display: flex; align-items: center; gap: .15rem; min-width: 0; }
.look-wrap > input { flex: 1; min-width: 0; }
.item-main > .look-wrap { flex: 1 1 180px; }
.spells li > .look-wrap { flex: 1; }
.look { flex: none; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 1px solid transparent; border-radius: var(--r-sm);
  background: none; color: var(--muted); cursor: pointer; opacity: .55; transition: opacity .15s, color .15s, border-color .15s; }
.look svg { width: 1.05rem; height: 1.05rem; }
.look:hover, .look:focus-visible { opacity: 1; color: var(--gilt); border-color: var(--line); }
.chip .chip-look { color: inherit; font-size: inherit; padding: 0; text-decoration: underline dotted color-mix(in srgb, var(--muted) 70%, transparent); text-underline-offset: 3px; }
.chip .chip-look:hover { color: var(--accent); }
.look-pill { position: fixed; z-index: 250; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; font: inherit; font-weight: 700; font-size: .9rem;
  color: var(--ink); background: var(--panel); border: 1px solid var(--gilt); border-radius: 99px; box-shadow: var(--shadow-lg); cursor: pointer;
  max-width: 260px; animation: show-fade .15s ease both; }
.look-pill svg { width: 1rem; height: 1rem; color: var(--gilt); flex: none; }
.look-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- install + notifications ---- */
.side-install { width: 100%; color: var(--side-active); border: 1px dashed color-mix(in srgb, var(--side-active) 45%, transparent); justify-content: flex-start; }
.side-install:hover { border-style: solid; color: var(--side-active); }
.app.rail .side-install { justify-content: center; }
.app-rows { display: flex; flex-direction: column; }
.app-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--line2); flex-wrap: wrap; }
.app-row:first-child { border-top: 0; }
.app-row > div { flex: 1 1 260px; }
.app-row p { margin: .15rem 0 0; }
.badge.ok { background: color-mix(in srgb, var(--ok, #3f8f5a) 18%, transparent); color: var(--ok, #3f8f5a); }
.install-steps { padding-left: 1.3rem; line-height: 1.6; }
.install-steps li { margin: .35rem 0; }

@media (prefers-reduced-motion: reduce) { .show-layer, .show-layer.fresh .show-stage img, .look-pill { animation: none; } }
@media print { .show-layer, .look, .look-pill { display: none !important; } }

/* ---- installed app on iPhone: keep controls clear of the clock and notch ---- */
@media (max-width: 900px) {
  .mtop { padding-top: calc(.5rem + env(safe-area-inset-top)); padding-left: calc(.8rem + env(safe-area-inset-left)); padding-right: calc(.8rem + env(safe-area-inset-right)); }
  .mtop #side-open { min-width: 44px; min-height: 44px; justify-content: center; }
  .side { padding-top: calc(1.1rem + env(safe-area-inset-top)); padding-bottom: calc(.9rem + env(safe-area-inset-bottom)); padding-left: calc(.8rem + env(safe-area-inset-left)); }
}
.notes-drawer { padding-top: max(1rem, env(safe-area-inset-top)); padding-bottom: max(1rem, env(safe-area-inset-bottom)); }