/* GoboPhone — app UI.
 *
 * Matches the Gobo Studios *app* family (KaraokeFlow, SceneRig), not the
 * marketing site: dark navy ground, violet accent, system fonts. The
 * marketing DESIGN.md olive/sage system is for gobostudios.com and does not
 * apply here.
 *
 * Palette is KaraokeFlow's, so an account moving between products feels like
 * one suite. SceneRig agrees on the ground and the violet.
 */

:root {
  --bg:           #1a1a2e;
  --bg-elevated:  #202038;
  --card:         #252540;
  --border:       #33334d;
  --text:         #e0e0e0;
  --dim:          #9a9ab0;
  --primary:      #6c5ce7;
  --primary-dark: #5a4bd1;
  --success:      #00b894;
  --danger:       #e74c3c;
  --warning:      #fdcb6e;
  --radius:       8px;
  --radius-sm:    6px;
  --shadow:       0 2px 8px rgba(0,0,0,.3);
  --font: 'Helvetica Neue', Helvetica, Arial, -apple-system, BlinkMacSystemFont,
          'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.6 var(--font);
}

/* ---- chrome ---------------------------------------------------------- */

.topbar {
  background: rgba(26,26,46,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.topbar-inner {
  max-width: 1100px; margin: 0 auto; padding: .85rem 1.25rem;
  display: flex; align-items: center; gap: 1.5rem;
}
.wordmark { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.wordmark span { color: var(--primary); }
.topnav { display: flex; gap: .25rem; margin-left: auto; flex-wrap: wrap; }
.topnav a {
  color: var(--dim); text-decoration: none; font-size: .9rem;
  padding: .4rem .7rem; border-radius: var(--radius-sm);
}
.topnav a:hover { color: var(--text); background: var(--bg-elevated); }
.topnav a.on { color: var(--text); background: var(--card); }

main { max-width: 1100px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }

h1 { font-size: 1.6rem; font-weight: 700; margin: 0 0 .25rem; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; font-weight: 700; margin: 2rem 0 .85rem; }
h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .3rem; }
.sub { color: var(--dim); margin: 0 0 2rem; }
.hint { color: var(--dim); font-size: .85rem; margin: .35rem 0 0; }

/* ---- stat tiles ------------------------------------------------------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .85rem; }
.stat {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.1rem;
}
.stat .value { font-size: 1.7rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.stat .label { color: var(--dim); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; margin-top: .3rem; }
.stat.warn .value { color: var(--warning); }
.stat.bad  .value { color: var(--danger); }

/* ---- cards ------------------------------------------------------------ */

.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: .85rem;
}
.card.ok   { border-left: 3px solid var(--success); }
.card.off  { border-left: 3px solid var(--border); }
.card.bad  { border-left: 3px solid var(--danger); }
.card-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.meta { color: var(--dim); font-size: .87rem; margin: .35rem 0 0; }
.meta code { background: var(--bg); padding: .1rem .35rem; border-radius: 4px; font: .85em var(--mono); }

/* ---- badges ----------------------------------------------------------- */

.badge {
  font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  padding: .2rem .45rem; border-radius: 4px; white-space: nowrap;
}
.badge-on   { background: rgba(0,184,148,.15);  color: var(--success); }
.badge-off  { background: rgba(154,154,176,.15); color: var(--dim); }
.badge-warn { background: rgba(253,203,110,.15); color: var(--warning); }
.badge-tier { background: var(--primary); color: #fff; }

/* E911 reads at a glance or it does not do its job. Solid fills rather than
   the tinted badges elsewhere: this is the one status worth shouting. */
.badge-e911-yes { background: #00b894; color: #06281f; }
.badge-e911-no  { background: #d63031; color: #fff; }

/* Buttons need room. A control flush against the text above it reads as part
   of the paragraph, and every form on this site had that problem. */
.btn { margin-top: 1rem; }
.btn-sm { margin-top: 0; }
.inline-form .btn { margin-top: 0; }
form + .btn, .btn + .btn { margin-left: .5rem; }

/* ---- forms ------------------------------------------------------------ */

label { display: block; font-weight: 600; font-size: .85rem; margin: 1rem 0 .35rem; }
label:first-child { margin-top: 0; }
input, select, textarea {
  width: 100%; padding: .6rem .7rem; min-height: 42px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: inherit;
}
textarea { min-height: 5rem; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(108,92,231,.4);
}
.row { display: flex; gap: .75rem; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 8rem; }

.btn {
  display: inline-block; padding: .6rem 1.1rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background-color .15s cubic-bezier(.4,0,.2,1);
}
.btn:hover { background: var(--card); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-sm { padding: .35rem .7rem; font-size: .85rem; }
button[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- alerts ----------------------------------------------------------- */

.alert { border-radius: var(--radius-sm); padding: .9rem 1rem; margin: 0 0 1rem; font-size: .92rem; }
.alert-error { background: rgba(231,76,60,.12);  border: 1px solid rgba(231,76,60,.4); }
.alert-warn  { background: rgba(253,203,110,.12); border: 1px solid rgba(253,203,110,.4); }
.alert-ok    { background: rgba(0,184,148,.12);   border: 1px solid rgba(0,184,148,.4); }

/* ---- secrets ---------------------------------------------------------- */

.secret { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.secret-label { font-size: .8rem; font-weight: 600; color: var(--dim); min-width: 7.5rem; }
.secret input { flex: 0 1 15rem; font-family: var(--mono); font-size: .9rem; }

/* ---- number choices --------------------------------------------------- */

.choices { display: flex; flex-wrap: wrap; gap: .4rem; }
.choice { display: block; margin: 0; font-weight: 400; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice span {
  display: inline-block; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .45rem .7rem; cursor: pointer;
  font-variant-numeric: tabular-nums; font-size: .92rem;
}
.choice input:checked + span {
  border-color: var(--primary); background: rgba(108,92,231,.15);
  box-shadow: inset 0 0 0 1px var(--primary); font-weight: 600;
}
.choice input:focus-visible + span { box-shadow: 0 0 0 3px rgba(108,92,231,.4); }

.empty { color: var(--dim); padding: 1.5rem 0; }
a { color: var(--primary); }
.back { display: inline-block; margin-top: 1.5rem; font-size: .9rem; }

@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } }

/* Venue picker sits inside a phone card — a control, not a form to fill in. */
.inline-form { margin: .6rem 0 .2rem; }
.inline-form label { display: flex; align-items: center; gap: .5rem; margin: 0; }
.inline-form select { width: auto; min-width: 12rem; }

/* Sign-in page: one card, centerd, nothing else to look at. */
.signin { max-width: 24rem; margin: 12vh auto; padding: 0 1rem; }
.signin .wordmark { font-size: 2rem; margin-bottom: .25rem; }
.signin .card { margin-top: 1.25rem; }
.signin label { display: block; margin-bottom: .9rem; }
.signin input { width: 100%; }

/* Identity and sign-out sit opposite the nav. */
.signout { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.signout span { color: var(--muted, #9a9ab0); font-size: .85rem; }
.topbar-inner { display: flex; align-items: center; gap: 1.5rem; }


/* One caller per row: fields, save, remove. Editing and adding are the same
   shape, so the eye does not have to learn two layouts. */
.row-entry { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.row-entry .inline-form { margin: 0; }
.row-entry input { width: auto; min-width: 9rem; }
.inline-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* A disabled Apply should look unavailable, not merely inert. */
.btn[disabled] { opacity: .45; cursor: not-allowed; }


/* Parked numbers are inventory, so they get a table rather than a card each —
   thirteen cards of held stock buried the one line anybody answers. */
table.parked { width: 100%; border-collapse: collapse; margin-top: .5rem; }
table.parked td { padding: .5rem .6rem; border-top: 1px solid var(--line, #33334d); vertical-align: middle; }
table.parked td:first-child { white-space: nowrap; }
table.parked .inline-form { margin: 0; }
table.parked select { width: auto; min-width: 11rem; }

/* Buttons inside an inline form still need to clear the control beside them
   when the row wraps on a narrow screen. */
.inline-form .btn { margin-top: 0; }


/* Adding a site is occasional, so it folds away rather than sitting open under
   the list of sites that already exist. */
details.add-site summary { cursor: pointer; }
details.add-site[open] summary { margin-bottom: .5rem; }

/* Screening options read better stacked than in a dropdown: three modes whose
   differences are worth reading, not three interchangeable values. */
.choice { display: block; font-weight: 400; margin: .6rem 0; }
.choice input { width: auto; margin-right: .5rem; }
.choice strong { font-weight: 600; }


/* Fourteen numbers as fourteen cards was a page you scrolled to read. One row
   each, with the destinations side by side, is a page you scan. */
/* Fourteen rows of similar text need help separating. Banding does more than a
   rule does: the eye follows a block of color across a wide row without
   losing which line it is on. */
table.numbers { width: 100%; border-collapse: collapse; }
table.numbers tr:nth-child(odd) { background: rgba(255,255,255,.035); }
table.numbers tr:hover { background: rgba(108,92,231,.14); }
table.numbers td {
  padding: .7rem .7rem;
  border-bottom: 1px solid var(--line, #33334d);
  vertical-align: middle;
}
/* `nowrap` kept Edit and Assign on one line, which is right until the cell also
   holds a select — then the button leaves the row entirely. Wrapping inside the
   cell is the only version that survives a narrow window. */
table.numbers td.actions { text-align: right; }
table.numbers td.actions .inline-form {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 100%;
  margin-left: .4rem;
}
table.numbers td.actions select { min-width: 7rem; max-width: 100%; width: auto; }
/* Keep Edit, the picker and Assign on one line where they fit; the cell may
   wrap as a whole, but splitting the form from its own button reads as a bug. */
table.numbers td.actions .inline-form { flex-wrap: nowrap; }
table.numbers td.actions { padding-left: 0; }
table.numbers td.actions .btn { white-space: nowrap; }
table.numbers td.num { white-space: nowrap; }
table.numbers td.num .hint { display: block; font-size: .78rem; }
table.numbers .inline-form { margin: 0; }
table.numbers select { width: auto; min-width: 9rem; }

/* A thread reads as a column of turns. Received sits left, sent sits right —
   the shape every messaging app has taught people to read without a legend. */
.thread { margin: 1rem 0; }
.event { max-width: 42rem; margin-bottom: .9rem; padding: .6rem .8rem; border-radius: 8px; background: var(--card, #252540); }
.event-out { margin-left: auto; background: rgba(108,92,231,.22); }
.event-none { background: rgba(253,203,110,.12); }
.event-meta { font-size: .72rem; color: var(--dim, #9a9ab0); margin-bottom: .3rem; }
.event-body { white-space: pre-wrap; }


/* A whole row opens the thread. The buttons inside it must not, so they stop
   the click before it reaches the row. */
table.rows-clickable tr[data-href] { cursor: pointer; }
table.rows-clickable td.actions { cursor: default; }


/* The search bar is a form that must not look like a settings card: controls on
   one line, labels inline, nothing shouting for attention. */
.searchbar label { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .85rem; }
.searchbar input[type="date"], .searchbar select { width: auto; }
.pill {
  padding: .25rem .6rem; border: 1px solid var(--line, #33334d); border-radius: 999px;
  font-weight: 400; cursor: pointer;
}
.pill input { width: auto; margin: 0; }
.pill:has(input:checked) { background: rgba(108,92,231,.22); border-color: var(--primary, #6c5ce7); }

/* Two doors, one page. The divider is what stops the second form reading as a
   fallback for the first having failed. */
.sso-card { text-align: center; }
.btn-block { display: block; width: 100%; text-align: center; }
.sso-divider {
  display: flex; align-items: center; gap: .75rem;
  margin: 1.25rem 0; color: var(--dim, #9a9ab0); font-size: .82rem;
}
.sso-divider::before, .sso-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line, #33334d);
}


/* The logo carries its own wordmark, so it replaces the text one where there is
   room to read it — the sign-in page. The top bar keeps the text version,
   because the image is unreadable at nav height. */
.signin-logo { display: block; width: 160px; height: auto; margin: 0 auto .5rem; border-radius: 12px; }


/* A pairing code is read off one screen and typed into another, so it is set
   large and monospaced with the groups kept apart. */
.pairing-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.6rem; letter-spacing: .12em; font-weight: 600;
  background: rgba(108,92,231,.14); padding: .6rem 1rem; border-radius: 8px;
  display: inline-block; margin: .3rem 0;
}


/* An incoming call follows you across pages. Fixed to the bottom rather than
   the top: a banner that pushes the page down moves whatever somebody was
   about to click. */
#ringing-bar {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 50;
  display: flex; align-items: center; gap: 1rem; justify-content: center;
  background: var(--primary, #6c5ce7); color: #fff;
  padding: .8rem 1.2rem; border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
#ringing-bar .btn { margin: 0; background: rgba(255,255,255,.18); color: #fff; }


/* A face in a circle. The initial fallback matters more than the photo: most
   contacts will never have one, and a row of empty grey circles is worse than
   no circles at all. */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
  background: var(--primary, #6c5ce7); color: #fff;
  font-size: .78rem; font-weight: 600; vertical-align: middle;
  margin-right: .5rem; flex: 0 0 auto;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.5rem; cursor: pointer; margin: 0; }
.contact-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }


/* Adding a phone: three short fields, stacked so the labels read as steps. */
.card.danger { border-color: rgba(200,60,60,.45); }
.btn-danger { background: #c0392b; color: #fff; }
.card.pending { opacity: .82; border-style: dashed; }
.waiting { margin: .4rem 0 .6rem; }
.pairing-code { margin: .8rem 0 .4rem; }
#helper-unpaired form, #helper-missing form, #helper-blocked form { margin-bottom: 1rem; }
#add-phone hr { margin: 1.4rem 0; border: 0; border-top: 1px solid rgba(128,128,128,.25); }
.by-mac summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.attach.seen { border-left: 3px solid var(--accent, #6c5ce7); padding-left: .8rem; margin: .8rem 0 .2rem; }
.btn-quiet { background: none; border: 0; text-decoration: underline; font-size: .85rem; padding: 0; opacity: .7; }
.attach label { display: block; margin: .6rem 0; font-size: .9rem; }
.attach input, .attach select { display: block; width: 100%; max-width: 22rem; margin-top: .2rem; }
.attach + .hint { margin-top: .4rem; }