/* The phone remote: Ur's warm dark, big thumbs-first buttons. */
@font-face { font-family: "Source Serif"; src: url("/remote/fonts/serif.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Source Sans"; src: url("/remote/fonts/sans.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
:root { --paper: #14120f; --ink: #ece5d6; --ink-2: #b7ae9c; --ink-3: #7d7566; --rule: #2c2822; --focus: #e8b75c; --red: #e06c5a; --key: #201d18; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font: 400 17px/1.45 "Source Serif", Georgia, serif; touch-action: manipulation; }
main { max-width: 26rem; margin: 0 auto; padding: 1.2rem 1.1rem 2.5rem; }
h1 { font-weight: 400; font-size: 1.7rem; line-height: 1.2; margin: .6rem 0 .6rem; }
p { color: var(--ink-2); margin: .4rem 0; }
.label { font: 600 .72rem "Source Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.space { margin-top: 2rem; }
.sub { font: .9rem "Source Sans", sans-serif; color: var(--ink-3); }
.msg { min-height: 1.4em; font: .92rem "Source Sans", sans-serif; color: var(--ink-3); }
.msg.bad { color: var(--red); }
button { font: 600 1rem "Source Sans", sans-serif; color: var(--paper); background: var(--focus); border: 0; border-radius: .6rem; padding: .9rem 1rem; width: 100%; margin-top: 1rem; }
button.quiet { background: none; color: var(--ink-3); border: 1px solid var(--rule); font-weight: 500; }
button:disabled { opacity: .5; }

/* What the TV is showing. */
.tv-line { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; font: 600 .95rem "Source Sans", sans-serif; color: var(--ink); }
.dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--focus); flex: none; }
.dot.off { background: var(--red); }
.focus { font-size: 1.15rem; color: var(--focus); min-height: 1.6em; margin: .3rem 0 0; }
.card-said { border-left: 2px solid var(--rule); padding-left: .7rem; font-style: italic; }
.ask { margin-top: .8rem; padding: .8rem; border: 1px solid var(--focus); border-radius: .6rem; }
.ask p { margin: 0 0 .2rem; color: var(--ink); }
.ask .row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ask button { margin-top: .5rem; padding: .7rem; }

/* The pad: a D-pad with A in its middle, then B X Y, the shoulders and Start/Select. */
.pad { margin-top: 1rem; display: grid; gap: .9rem; user-select: none; -webkit-user-select: none; }
.dpad { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-areas: ". up ." "left a right" ". down ."; gap: .5rem; width: min(100%, 19rem); margin: 0 auto; aspect-ratio: 1; }
.arrow, .key { margin: 0; background: var(--key); color: var(--ink); border: 1px solid var(--rule); border-radius: .9rem; font: 600 1.4rem "Source Sans", sans-serif; padding: 0; }
.arrow.up { grid-area: up; } .arrow.down { grid-area: down; } .arrow.left { grid-area: left; } .arrow.right { grid-area: right; }
.key.a { grid-area: a; border-radius: 50%; background: var(--focus); color: var(--paper); font-size: 1.8rem; }
.arrow:active, .key:active, .pressed { background: #2e2a23; border-color: var(--focus); }
.key.a:active, .key.a.pressed { background: #f3c977; }
.faces { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.faces .key { height: 4.2rem; display: grid; place-content: center; gap: .1rem; }
.faces small { font: 400 .72rem "Source Sans", sans-serif; color: var(--ink-3); line-height: 1.1; max-width: 6.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shoulders { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.key.small { height: 2.8rem; font-size: .95rem; }
.hint-a { text-align: center; font: .9rem "Source Sans", sans-serif; color: var(--ink-2); min-height: 1.3em; margin: -.3rem 0 0; }

.links { list-style: none; padding: 0; margin: .5rem 0 0; }
.links a { display: block; padding: .7rem 0; border-top: 1px solid var(--rule); color: var(--focus); text-decoration: none; font: 600 1rem "Source Sans", sans-serif; }

/* The stereos (/remote/stereo). */
.back { color: var(--ink-3); text-decoration: none; }
a.button { display: block; text-align: center; font: 600 1rem "Source Sans", sans-serif; color: var(--paper); background: var(--focus); border-radius: .6rem; padding: .9rem 1rem; margin-top: 1rem; text-decoration: none; }
.zones { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .8rem; }
.zones button { margin: 0; background: var(--key); color: var(--ink-2); border: 1px solid var(--rule); padding: .7rem; }
.zones button.on { border-color: var(--focus); color: var(--ink); }
.zones small, .tracks small { display: block; font: 400 .8rem "Source Sans", sans-serif; color: var(--ink-3); }
.now { margin-top: 1rem; }
.now h1 { margin: .2rem 0; }
.controls .row, .two { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.volume { display: grid; grid-template-columns: auto 1fr 2.2rem; gap: .7rem; align-items: center; margin-top: 1rem; font: .9rem "Source Sans", sans-serif; color: var(--ink-3); }
.volume input { accent-color: var(--focus); }
.search { display: grid; grid-template-columns: 1fr auto; gap: .5rem; margin-top: 1.6rem; }
.search[hidden] { display: none; }
.search input { font: 1rem "Source Sans", sans-serif; color: var(--ink); background: var(--key); border: 1px solid var(--rule); border-radius: .6rem; padding: .8rem; min-width: 0; }
.search button { margin: 0; width: auto; }
.tracks { list-style: none; padding: 0; margin: .4rem 0 0; }
.tracks li { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .6rem 0; border-top: 1px solid var(--rule); color: var(--ink); }
.tracks li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.tracks button { margin: 0; width: auto; padding: .5rem .9rem; flex: none; }
.tracks .two { flex: none; }
.tracks em { font: italic .85rem "Source Sans", sans-serif; color: var(--ink-3); flex: none; }
.tracks em.no { color: var(--red); }
details { margin-top: 2rem; }
summary { font: 600 .72rem "Source Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; }

/* Explicit event deadlines use the phone's local clock; the server receives ISO time. */
#event-panel h2 { font-size: 25px; font-weight: 400; margin: .6em 0; }
#event-create { display: grid; gap: 10px; }
#event-create[hidden] { display: none; }
#event-create label { font: 15px system-ui, sans-serif; color: var(--ink-3); }
#event-end { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); color: var(--ink); font: 17px system-ui, sans-serif; }