/* hq.css is the page's whole theme, once. A page carries only the rules that are its own. */
/* Every text token clears 4.5:1 on --bg, --sheet and --card in both themes, and a test holds it (spec 16.3 section 3.1). */
:root {
  color-scheme: dark;
  --bg: #0f1116;
  --sheet: #171a21;
  --card: #1d212a;
  --ink: #ede6d6;
  --dim: #a8acb6;
  --mute: #848a96;
  --gold: #ddb052;
  --on-gold: #1a1409;
  --brass: #8a6d2a;
  --line: #2a2f3a;
  --field: #0b0d11;
  --good: #4cc3a0;
  --bad: #f0875a;
  --err: #f0875a;
  --warn-bg: #4d3a10;  --warn-ink: #f6d58a;
  --fail-bg: #e8673f;  --fail-ink: #1a0d07;
  --down-bg: #1a0d07;  --down-ink: #ff9a72;
  --read: 'Atkinson Hyperlegible Next', Verdana, sans-serif;
  --display: 'Fraunces', Georgia, 'Iowan Old Style', serif;
  --figures: 'Source Sans 3', 'Atkinson Hyperlegible Next', Verdana, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Menlo, monospace;
  --settle: cubic-bezier(.2, .8, .2, 1);
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f3ecdc; --sheet: #fbf7ee; --card: #f1eadb; --ink: #1d1a14; --dim: #5a5346;
  --mute: #6b6455; --gold: #7a5f1f; --on-gold: #fffaf0; --brass: #b8923e; --line: #d9d0bd; --field: #ffffff;
  --good: #1f6f57; --bad: #a8401a; --err: #a8401a;
  --warn-bg: #f3dfa8; --warn-ink: #5a3d00;
  --fail-bg: #a8401a; --fail-ink: #fff6f0;
  --down-bg: #fbf7ee; --down-ink: #a8401a;
}
* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 1rem/1.65 var(--read);
}
/* No italics in running text (spec 16.3 decision 7): an <i> or <em> is a softer colour, never a slant. */
i, em { font-style: normal; }
a { color: var(--dim); }
a:hover { color: var(--ink); }
/* Scrollbars in the palette, thin, on every page and in every drawer. */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--brass); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* The header is the same on every signed-in page: the title, the page's own words, the account circle. */
header {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  padding: .8rem 1.4rem;
}
/* The crest is the way home on every page: your campaigns signed in, the landing signed out (16.5.1). */
.title { display: inline-flex; flex: none; line-height: 0; }
.title img { height: 2.75rem; width: auto; }
header .crumb { color: var(--dim); font-size: .85rem; }
header .crumb a { text-decoration: none; }
header .account { margin-left: auto; position: relative; }
header .account summary { list-style: none; cursor: pointer; display: block; }
header .account summary::-webkit-details-marker { display: none; }
header .circle {
  width: 2rem; height: 2rem; border-radius: 50%; background: var(--gold); color: var(--on-gold);
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 .75rem/1 var(--read); letter-spacing: .04em;
}
.account .menu {
  position: absolute; right: 0; top: 2.5rem; z-index: 2; min-width: 15rem;
  background: var(--card); border: 1px solid var(--line); border-radius: .6rem;
  padding: .4rem 0; font-size: .85rem;
}
.account .menu p { margin: 0; padding: .4rem .9rem; display: flex; justify-content: space-between; gap: 1rem; }
.account .menu .who { flex-direction: column; gap: 0; color: var(--dim); border-bottom: 1px solid var(--line); padding-bottom: .6rem; margin-bottom: .2rem; }
.account .menu .who b { color: var(--ink); font-weight: 500; }
.account .menu label { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem .9rem; cursor: pointer; }
.account .menu button { background: none; border: 0; color: var(--dim); font: inherit; padding: .4rem .9rem; width: 100%; text-align: left; cursor: pointer; }
.account .menu button:hover, .account .menu a:hover { color: var(--ink); }
.account .menu a { display: block; padding: .4rem .9rem; color: var(--dim); text-decoration: none; }

/* Engine view, hidden from a player (spec 4.1): scoped to the off state, to beat any class's own display such as .row. */
html:not([data-engine="on"]) .engine { display: none; }

main { max-width: 70ch; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.sheet { background: var(--sheet); border-radius: 1rem; padding: 1.4rem 1.6rem 1.1rem; }
h1 { font: 500 1.4rem/1.3 var(--display); margin: 0 0 .2rem; font-variation-settings: 'opsz' 48, 'SOFT' 60; }
.lede { color: var(--dim); margin: 0 0 1.6rem; font-size: .95rem; }

/* Form controls, shared by the campaign list, the create page and the play input. */
input[type="text"], input:not([type]), textarea {
  width: 100%; background: var(--field); color: var(--ink); border: 1px solid var(--line);
  border-radius: 1.2rem; padding: .65rem 1rem; font: inherit;
}
textarea { border-radius: .6rem; }
button.act {
  background: var(--gold); color: var(--on-gold); border: 0; border-radius: 1.2rem;
  padding: .65rem 1.1rem; font: inherit; font-weight: 600; cursor: pointer;
}
button.act[disabled] { opacity: .5; cursor: default; }
.row { display: flex; gap: .6rem; }
.err { color: var(--err); }

/* Engine view: a turn's receipt as sections in the order it ran, each line a chip or a DM's statement that opens on a click (spec 17.7). */
.ev { margin: 0 0 .7rem; font-size: .82rem; color: var(--dim); }
.ev h5 { margin: 0 0 .3rem; font-size: .75rem; letter-spacing: .04em; color: var(--gold); font-weight: 500; }
.ev h5 .cost { margin-left: .6rem; letter-spacing: 0; text-transform: none; color: var(--mute); font: .75rem var(--mono); }
.ev .chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.ev .c { padding: .05rem .5rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--card); cursor: pointer; }
.ev .c.good { color: var(--good); }
.ev .c.hold { color: var(--gold); }
.ev .c.bad, .ev .st.bad b { color: var(--bad); }
.ev .c.echo { border-style: dashed; color: var(--mute); }
.ev .full { display: none; }
.ev .c.open { flex-basis: 100%; border-radius: .4rem; }
.ev .open .full { display: block; margin-top: .2rem; color: var(--ink); white-space: pre-wrap; font: .75rem var(--mono); }
.ev .card { padding: .4rem .7rem; background: var(--card); border-radius: .4rem; }
.ev .note { margin: 0 0 .4rem; padding-left: .6rem; border-left: 3px solid var(--brass); color: var(--ink); white-space: pre-wrap; }
.ev .st { margin: 0; font: .75rem var(--mono); color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.ev .st.open { white-space: pre-wrap; overflow-wrap: anywhere; }
.ev .st b { display: inline-block; min-width: 3.6rem; font-weight: 400; color: var(--good); }
.ev .st.hold b { color: var(--gold); }
.ev .st code { color: var(--dim); font: inherit; }
.ev .out { margin: .3rem 0 0; color: var(--gold); }
.bar.split { display: flex; flex-basis: 11rem; }
.bar.split .p-input { background: var(--mute); }
.bar.split .p-ruling { background: var(--good); }
.bar.split .p-worlddm { background: var(--dim); }
.bar.split .p-keeper { background: var(--brass); }
.bar.split .p-wire { background: var(--gold); }
.bar.split .p-prose { background: var(--ink); }

/* Movement, once for every page: a block rises, a row files in, a figure floats, a blow shakes (spec 16.5 section 3.1). */
@view-transition { navigation: auto; }
.rise { animation: rise .42s var(--settle) both; animation-delay: calc(var(--i, 0) * 110ms); }
.rowin { animation: rise .32s var(--settle) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes rise { from { opacity: 0; transform: translateY(.6rem); } }
.hit { animation: hit .45s ease-out; }
@keyframes hit { 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 45%, transparent); } }
.heal { animation: heal .9s ease-out; }
@keyframes heal { 30% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 45%, transparent); } }
.floats { position: relative; }
.float { position: absolute; right: 0; top: 100%; white-space: nowrap; pointer-events: none; font: 700 .8rem var(--figures); animation: float 1.4s var(--settle) forwards; }
.float.gain { color: var(--good); }
.float.loss { color: var(--bad); }
@keyframes float { 0% { opacity: 0; transform: translateY(.3rem); } 20% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-.8rem); } }

/* Ellor's line: one line under the player's words while a turn or a world is made (spec 16.5 section 3.2). */
.herald { display: flex; align-items: center; gap: .55rem; white-space: nowrap; color: var(--dim); font-size: .95rem; margin: 0 0 .9rem; }
.herald b { color: var(--gold); font-weight: 600; }
.herald .ink { display: inline-flex; gap: .28rem; }
.herald .ink i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--gold); opacity: .3; animation: ink 1.2s ease-in-out infinite; }
.herald .ink i:nth-child(2) { animation-delay: .15s; }
.herald .ink i:nth-child(3) { animation-delay: .3s; }
@keyframes ink { 30% { opacity: 1; transform: translateY(-.25rem); } }
.herald .phrase { animation: rise .5s var(--settle); }
.herald .secs { font: .8rem var(--mono); color: var(--mute); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The one clamp: the device's reduce motion or the account menu's switch, and everything lands where it ends (spec 16.5 decision 7). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
html[data-motion="still"] *, html[data-motion="still"] *::before, html[data-motion="still"] *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
html[data-motion="still"]::view-transition-group(*), html[data-motion="still"]::view-transition-old(*), html[data-motion="still"]::view-transition-new(*) { animation: none !important; }