/* lakRadio for the Tesla browser: the R1's look (r1/app/Radio.qml), black and white type, the
   R1's orange, laid out for a wide screen in a car. One unit (--u) is a 480th of a column's
   width, as on the R1's 480 px screen, so the sizes are the R1's. */
@font-face { font-family: "Red Hat Display"; src: url(fonts/RedHatDisplay-Medium.ttf); font-weight: 500 }
@font-face { font-family: "Commissioner"; src: url(fonts/Commissioner-Medium.ttf); font-weight: 500 }

:root {
  --paper: #ffffff; --dim: #8a8a8a; --rule: #1c1c1c; --accent: #fe5000; --star: #333333; --faint: #5a5a5a;
  --u: calc(100vw / 480);
  --display: "Red Hat Display", "Commissioner", system-ui, sans-serif;
  --greek: "Commissioner", "Red Hat Display", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none }
html, body { height: 100%; margin: 0; background: #000; color: var(--paper); overflow: hidden }
body { font-family: var(--display); font-weight: 500 }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation }
:lang(el) { font-family: var(--greek) }

#app { display: grid; height: 100%; grid-template-columns: 1fr; grid-template-rows: auto 1fr }
.now { position: relative; padding: calc(36 * var(--u)) calc(40 * var(--u)) calc(24 * var(--u)) }
.side { position: relative; overflow: hidden; display: flex; flex-direction: column; border-top: 1px solid var(--rule) }
@media (min-aspect-ratio: 5/4) {
  :root { --u: calc(100vw / 2 / 480) }      /* two columns: Now on the left, the list on the right */
  #app { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr }
  .side { border-top: 0; border-left: 1px solid var(--rule) }
}

/* -- now ------------------------------------------------------------------------------- */
.name { font-size: calc(64 * var(--u)); line-height: 0.95; margin-top: calc(28 * var(--u)); min-height: calc(130 * var(--u));
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-wrap: break-word }
.name.long { font-size: calc(44 * var(--u)) }
.name.idle { color: var(--dim) }
.onair { color: var(--faint); font-size: calc(28 * var(--u)); margin-top: calc(18 * var(--u)); min-height: calc(34 * var(--u));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.status { display: flex; align-items: center; gap: calc(14 * var(--u)); margin-top: calc(28 * var(--u)); color: var(--dim);
  font-size: calc(30 * var(--u)); padding: calc(16 * var(--u)) 0; min-height: calc(62 * var(--u)) }
.status .dot { width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; background: var(--dim); flex: none }
.status.playing .dot { background: var(--accent) }
.status .word { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.keep { position: absolute; top: calc(30 * var(--u)); right: calc(40 * var(--u)); font-size: calc(40 * var(--u)); color: var(--star);
  padding: calc(16 * var(--u)); margin: calc(-16 * var(--u)); font-family: var(--display) }
.keep.on { color: var(--accent) }
.full { position: absolute; top: calc(30 * var(--u)); right: calc(110 * var(--u)); font-size: calc(34 * var(--u)); color: var(--star);
  padding: calc(16 * var(--u)); margin: calc(-16 * var(--u)) }

/* The three buttons for the road: big enough for a glance and a finger (owner's cars: a Model 3
   and a Model X), the play/pause the largest. */
.keys { display: flex; align-items: center; justify-content: space-between; gap: calc(24 * var(--u));
  margin-top: calc(36 * var(--u)); max-width: calc(400 * var(--u)) }
.keys button { width: calc(104 * var(--u)); height: calc(104 * var(--u)); border-radius: 50%; border: calc(3 * var(--u)) solid var(--star);
  display: grid; place-items: center; color: var(--paper) }
.keys button:active { background: var(--rule) }
.keys button:disabled { opacity: 0.35 }
.keys .play { width: calc(144 * var(--u)); height: calc(144 * var(--u)); border-color: var(--dim) }
.keys .play.on { border-color: var(--accent) }
.keys svg { width: 42%; height: 42%; fill: currentColor }

/* -- lists ----------------------------------------------------------------------------- */
.head { display: flex; align-items: center; white-space: nowrap; gap: calc(28 * var(--u)); padding: calc(36 * var(--u)) calc(40 * var(--u)) calc(16 * var(--u));
  color: var(--dim); font-size: calc(24 * var(--u)); letter-spacing: calc(2 * var(--u)); text-transform: uppercase; flex: none }
.head button { color: var(--star); letter-spacing: inherit; text-transform: inherit; font-size: inherit; padding: calc(12 * var(--u)) 0 }
.head button.on { color: var(--paper) }
.head .grow { flex: 1 }
.rows { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch }
.row { display: flex; align-items: center; width: 100%; min-height: calc(92 * var(--u)); padding: calc(10 * var(--u)) calc(40 * var(--u));
  border-bottom: 1px solid var(--rule); font-size: calc(30 * var(--u)); text-align: left; gap: calc(20 * var(--u)) }
.row:active { background: var(--rule) }
.row .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.row .sub { color: var(--faint); font-size: calc(22 * var(--u)); margin-left: calc(12 * var(--u)) }
.row.on .label { color: var(--accent) }
.row .mark { color: var(--star); font-size: calc(34 * var(--u)); font-family: var(--display); padding: calc(10 * var(--u)) 0 calc(10 * var(--u)) calc(20 * var(--u)) }
.row .mark.on { color: var(--accent) }
.row .ask { color: var(--dim); font-size: calc(26 * var(--u)) }
.row .x { color: var(--accent); font-size: calc(34 * var(--u)); padding: calc(10 * var(--u)) 0 calc(10 * var(--u)) calc(24 * var(--u)) }
.row.find .label { color: var(--dim) }
.note { color: var(--dim); font-size: calc(26 * var(--u)); padding: calc(28 * var(--u)) calc(40 * var(--u)) }

.field { display: flex; align-items: center; margin: 0 calc(40 * var(--u)) calc(16 * var(--u)); border: calc(2 * var(--u)) solid #444;
  border-radius: calc(12 * var(--u)); padding: 0 calc(20 * var(--u)); flex: none }
.field:focus-within { border-color: var(--accent) }
.field input { flex: 1; background: none; border: 0; outline: 0; color: var(--paper); font: inherit; font-size: calc(32 * var(--u));
  height: calc(76 * var(--u)); min-width: 0 }
.field input::placeholder { color: #666 }
.field button { color: var(--dim); font-size: calc(30 * var(--u)); padding: calc(16 * var(--u)) 0 calc(16 * var(--u)) calc(20 * var(--u)) }
.hidden { display: none !important }

.row.undo { color: var(--accent); font-size: calc(24 * var(--u)); }

.favoriteTools { display: flex; flex-wrap: wrap; gap: calc(20 * var(--u)); padding: 0 calc(40 * var(--u)) calc(12 * var(--u));
  font-size: calc(22 * var(--u)); color: var(--dim); }
.favoriteTools button { padding: calc(10 * var(--u)) 0; }
#favoriteMessage { flex-basis: 100%; }
#favoriteMessage:empty { display: none; }

#favorites .head { display: grid; grid-template-columns: 1fr auto; gap: calc(8 * var(--u)) calc(20 * var(--u)); }
#favoritesHead { grid-column: 1 / -1; }
#favorites .head .grow { display: none; }
#orderPlayed { text-align: left; }