/* Mango Live Check: the presenter's desk.

   Everything in this file is the presenter's own surface and none of it is
   ever captured. It shares the box's warm palette and type so the tool looks
   like one thing, but it runs a step darker and flatter than the box, so the
   edge of what is broadcast is obvious at a glance.

   Layout: a sidebar of controls on the left, the box on the right. On a
   window too small for the box at full size, the box is shown smaller as one
   piece (see fitBox in app.js). On a narrow window the sidebar stacks above
   the box. Nothing is ever cut off and the page never scrolls sideways. */

:root {
  --desk:        #140D0D;
  --desk-panel:  #1D1414;
  --desk-raised: #261A1A;
  --desk-line:   #3A2828;
  --desk-text:   #FFF3EA;
  --desk-muted:  #A8918A;
  --desk-faint:  #6E5A55;

  --side-w: 360px;
  --pad: 24px;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--desk);
}

body {
  font-family: var(--body);
  font-size: 14px;
  color: var(--desk-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ================================================================ layout */

.app {
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  min-height: 100vh;
}

.side {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: var(--pad) var(--pad) 40px;
  border-right: 1px solid var(--desk-line);
  background: var(--desk-panel);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stage {
  min-width: 0;
  padding: var(--pad) calc(var(--pad) + 8px) 64px;
}

/* Narrow window: controls on top, box underneath, both full width. */
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--desk-line);
  }
}

/* ================================================================ brand */

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 2px 2px 10px;
}

.wordmark { white-space: nowrap; }

.wordmark {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 62%;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--desk-text);
}

.wordmark span {
  background: linear-gradient(180deg, #FFC371 0%, #FF582D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bar-state {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--desk-muted);
  padding: 4px 8px;
  border: 1px solid var(--desk-line);
  border-radius: 999px;
}

/* ================================================================ panels */

.panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--desk-line);
  border-radius: 14px;
  background: var(--desk);
}

.panel-quiet { background: transparent; }

.kicker {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--desk-muted);
}

.row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.row > .field { flex: 1 1 auto; min-width: 0; }

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ================================================================ fields */

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.field > span:not(.sr) {
  font-size: 11px;
  font-weight: 600;
  color: var(--desk-muted);
}

.field input {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--desk-line);
  background: var(--desk-raised);
  color: var(--desk-text);
  transition: border-color 0.12s;
}

#in-url {
  font-size: 16px;
  padding: 13px 14px;
}

.field input:hover { border-color: #4E3636; }

.field input:focus {
  outline: none;
  border-color: #FFC371;
  box-shadow: 0 0 0 3px rgba(255, 195, 113, 0.16);
}

.field input::placeholder { color: var(--desk-faint); }

/* A value the tool found rather than one the presenter typed. */
.field input.is-guess { color: #D8C3BA; }

/* A guess the tool is not sure of. Marked so it gets a glance before it is
   spoken, and only for low confidence: marking everything marks nothing. */
.field input[data-confidence="low"] {
  border-color: #FF582D;
  box-shadow: inset 3px 0 0 #FF582D;
}

.services-note { color: var(--desk-text); }

/* ================================================================ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--desk-line);
  background: var(--desk-raised);
  color: var(--desk-text);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
}

.btn:hover:not(:disabled) { background: #33221F; border-color: #4E3636; }
.btn:disabled { opacity: 0.35; cursor: default; }

.btn-primary {
  flex: 0 0 auto;
  background: linear-gradient(180deg, #FFC371 0%, #FE7F42 100%);
  border-color: transparent;
  color: #2A1617;
  padding: 10px 16px;
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #FFD08F 0%, #FF8E55 100%);
  border-color: transparent;
}

.btn-primary kbd {
  background: rgba(42, 22, 23, 0.12);
  border-color: rgba(42, 22, 23, 0.25);
  color: #2A1617;
}

.btn-block { width: 100%; }

.btn-icon {
  width: 42px;
  padding: 10px 0;
  font-size: 16px;
}

.btn-small { padding: 7px 12px; font-size: 12px; }

.note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--desk-muted);
}

/* ================================================================ on air */

.nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-name {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--desk-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-export { flex-wrap: wrap; }
.row-export .btn { flex: 1 1 auto; }

.lang-pick select {
  height: 100%;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--desk-line);
  background: var(--desk-raised);
  color: var(--desk-text);
  cursor: pointer;
}

/* ================================================================ status */

.status {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}

.status > div { min-width: 0; }

.status dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--desk-faint);
}

.status dd {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status dd[data-on="true"] { color: #FFC371; }
.status dd[data-on="false"] { color: var(--desk-muted); }
.status dd[data-on="bad"] { color: #FF582D; }

.keys {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12px;
  color: var(--desk-muted);
}

kbd {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border: 1px solid var(--desk-line);
  border-radius: 5px;
  background: var(--desk-raised);
  color: var(--desk-text);
}

/* ================================================================ the box */

.box-wrap { width: fit-content; max-width: 100%; }

.capture-label {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--desk-muted);
}

/* The frame takes the size the box is shown at, and draws the edge outside
   it, so capturing the box never catches the edge. The box inside is always
   1080 by 1200 and is scaled as one piece. */
.box-frame {
  --box-scale: 1;
  position: relative;
  width: calc(var(--box-w) * var(--box-scale));
  height: calc(var(--box-h) * var(--box-scale));
  outline: 1px solid var(--desk-line);
  outline-offset: 6px;
  border-radius: 1px;
}

.box-frame > .box {
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(var(--box-scale));
  transform-origin: top left;
}

/* ================================================================ lead log */

.leads { margin-top: 40px; max-width: calc(var(--box-w) + 20px); }

.leads-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.leads-scroll {
  overflow-x: auto;
  border: 1px solid var(--desk-line);
  border-radius: 12px;
  background: var(--desk-panel);
}

.leads-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.leads-table th,
.leads-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--desk-line);
  white-space: nowrap;
}

.leads-table tr:last-child td { border-bottom: 0; }

.leads-table th {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--desk-muted);
  background: var(--desk);
}

.leads-table td:nth-child(2) {
  white-space: normal;
  min-width: 160px;
  font-weight: 600;
}

.leads-table input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: #FFC371;
  cursor: pointer;
}

.report-link {
  color: #FFC371;
  font-weight: 700;
  text-decoration: none;
  margin-right: 12px;
}

.report-link:hover { text-decoration: underline; }

#leads-note { padding: 14px 0 4px; }

#card-canvas { display: none; }