/* Switchboard. Plain CSS and custom properties; nothing loads remotely.

   BRASS AND WALNUT. Light is warm paper; dark is walnut, like the cabinet
   of an old switchboard. The accent is brass. The three lamps are the operator's: green
   on duty, amber ringing, red on a call. They only ever mean call state.

   Theming follows Ledger and the Atlas app: every colour is a light-dark() pair, and
   Settings pins color-scheme through data-theme on <html>. That also flips the browser's
   own furniture (scrollbars, form controls). */

:root {
  color-scheme: light dark;

  /*                       paper      walnut */
  --bg:          light-dark(#f3ede1,  #17130f); /* behind everything */
  --surface:     light-dark(#fbf8f2,  #211b15); /* boxes and the top bar */
  --band:        light-dark(#efe7d8,  #2b241c); /* tinted rows, the current tab */
  --field:       light-dark(#ffffff,  #1a1511);
  --border:      light-dark(#e3d9c6,  #3a3128);
  --text:        light-dark(#2b241c,  #efe6d6);
  --text-subtle: light-dark(#6f6557,  #a89c89);
  --accent:      light-dark(#8a5a14,  #e0b25a); /* brass */
  --on-accent:   light-dark(#fffaf0,  #1c1510);
  --danger:      light-dark(#a8382b,  #eb8f7f);
  --alert-bg:    light-dark(#f8e3dc,  #3a211b);
  --notice-bg:   light-dark(#e6efdd,  #1f2e20);

  --lamp-on:     light-dark(#2f8a4c,  #5cc27c); /* on duty */
  --lamp-ring:   light-dark(#c98512,  #f0b44a); /* ringing */
  --lamp-call:   light-dark(#c0392b,  #ef7b6c); /* on a call */
  --on-lamp:     light-dark(#ffffff,  #14100c);

  /* Lamps are shapes; when one colours text, it needs 4.5:1 against the page. The
     light-mode lamps don't have it, so text uses darker shades of the same hues. */
  --lamp-on-text:   light-dark(#25733f, #5cc27c);
  --lamp-ring-text: light-dark(#8f5b00, #f0b44a);
  --lamp-call-text: light-dark(#b0342a, #ef7b6c);

  --radius: 10px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }

/* The hidden attribute always wins. Without this, a class that sets display (the
   callback form's .form is a grid) kept a "hidden" element on screen during calls. */
[hidden] { display: none !important; }

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

a { color: var(--accent); }
h1 { font-size: 1.5rem; margin: 0 0 0.75rem; }
h2 { font-size: 1.15rem; margin: 0 0 0.5rem; }
h3 { font-size: 1rem; margin: 1.25rem 0 0.4rem; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }
.quiet { color: var(--text-subtle); font-size: 0.9rem; }

.icon { width: 1.15em; height: 1.15em; flex: none; }

/* Top bar ------------------------------------------------------------------ */

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.6rem 1rem; border-bottom: 1px solid var(--border); background: var(--surface);
}
.topbar--public { justify-content: flex-end; } /* The customers' page: the 37signals logo on the right. */
.topbar__start { display: flex; align-items: center; gap: 0.85rem; }
.topbar__brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--text); text-decoration: none; }

/* The mark: a lamp panel in brass. Hover patches the cords in, one after another, and
   the 37signals mark appears; while a Phone tab on this page rings, the logo's lone
   right-hand lamp blinks amber like a call waiting. The logo is 37signals' own; the panel
   is ours. */
.brand-mark { width: 1.6rem; height: 1.6rem; flex: none; color: var(--accent); }
.brand-mark__frame { stroke-width: 1.4; }
.brand-mark__jacks { stroke-width: 1.1; }
.brand-mark__lamps { fill: currentColor; stroke: none; }
.brand-mark__cords path {
  stroke-width: 2;
  stroke-dasharray: 5;
  stroke-dashoffset: 5;
  transition: stroke-dashoffset 0.35s ease-out;
}
.topbar__brand:is(:hover, :focus-visible) .brand-mark__cords path { stroke-dashoffset: 0; }
.topbar__brand:is(:hover, :focus-visible) .brand-mark__cords path:nth-child(2) { transition-delay: 0.12s; }
.topbar__brand:is(:hover, :focus-visible) .brand-mark__cords path:nth-child(3) { transition-delay: 0.24s; }
/* In dark, walnut's amber and brass are close, so the rest of the panel goes dim and the
   call lamp blinks alone. */
html:has(.phone[data-phone-state-value=ringing]) .brand-mark__lamps circle:not(.brand-mark__call) { opacity: 0.3; }
html:has(.phone[data-phone-state-value=ringing]) .brand-mark__call { fill: var(--lamp-ring); animation: pulse 0.8s infinite; }
.card__mark .brand-mark { width: 2.75rem; height: 2.75rem; margin-bottom: 0.5rem; }
.card__mark .brand-mark__cords path { stroke-dashoffset: 0; } /* Sign-in shows the whole mark, patched. */

@media (prefers-reduced-motion: reduce) {
  .brand-mark__cords path { transition: none; }
  .brand-mark__call { animation: none !important; }
}
.topbar__nav { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.topbar__nav form { display: inline; margin: 0; }
.topbar__link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.7rem; border-radius: 999px;
  color: var(--text-subtle); text-decoration: none; font: inherit; font-weight: 500;
}
.topbar__link:hover { color: var(--text); }
.topbar__link.is-current { color: var(--text); background: var(--band); font-weight: 650; }
.topbar__link.is-current .icon { color: var(--accent); }

.page { max-width: 760px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.page-title { margin-bottom: 1rem; }

/* Boxes ---------------------------------------------------------------------- */

.card, .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.card--narrow { max-width: 460px; margin: 0 auto; }
.passkey-button { width: 100%; margin: 0.5rem 0 0.75rem; }
.password-signin { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.password-signin summary { cursor: pointer; color: var(--text-subtle); font-size: 0.9rem; }
.panel--narrow > * { max-width: 460px; }

/* The Calls page. */
.calls { max-width: 52rem; margin: 0 auto; }
.calls__day { margin-top: 1.75rem; }
.page-title + .calls__day { margin-top: 0; }
.calls__time, .calls__number { white-space: nowrap; font-variant-numeric: tabular-nums; }
.calls__link { text-align: right; white-space: nowrap; }
.calls__note { margin-top: 0.75rem; }
.calls__link form { display: inline; margin: 0 0 0 0.75rem; }
.calls__block { font-size: 0.9rem; }
.blocked-form { margin: 1rem 0 0.5rem; max-width: 26rem; }
.blocked-form__row { display: flex; gap: 0.5rem; }
.blocked-form__row input { flex: 1; }
.blocked-form .blocked-form__row input[type=submit] { margin-top: 0; flex: none; } /* Beats .form input[type=submit]. */

/* The 37signals logo on the customers' page (37signals.com's file, 1063×300): a mask, so it's
   the text colour in either theme. */
.logo-37signals {
  display: inline-block; height: 2rem; aspect-ratio: 1063 / 300; background: var(--text);
  -webkit-mask: var(--logo) left center / contain no-repeat; mask: var(--logo) left center / contain no-repeat;
}

/* Screen share: the rep's panel under the Phone tab's stage, and the customer's /share page. */
.share { max-width: 40rem; width: 100%; margin: 0.5rem auto 0; text-align: center; }
.share h2 { font-size: 1.1rem; margin: 0 0 0.5rem; }
.share p { margin: 0 0 0.6rem; }
.share-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.75rem; }
.share-actions .button { margin-top: 0; }
.share-code { font-size: 2.2rem; font-weight: 700; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; margin: 0.25rem 0 0.5rem !important; }
.share-video { display: block; width: 100%; max-height: 70vh; margin-top: 0.75rem; background: #000; border-radius: 6px; }
.share-guest { max-width: 34rem; margin: 2rem auto 0; text-align: center; }
.share-guest h1 { margin-bottom: 0.5rem; }
.share-guest__form { justify-items: center; margin-bottom: 0.75rem; }
.share-guest__form input {
  width: 8.5rem !important; text-align: center; font-size: 1.8rem; letter-spacing: 0.3em;
  padding-left: 0.3em !important; font-variant-numeric: tabular-nums;
}
.share-guest__form input:disabled { opacity: 0.6; }

.welcome { max-width: 40rem; margin: 0 auto; }
.welcome h2 { font-size: 1.1rem; margin: 1.75rem 0 0.4rem; }
.welcome ul { margin: 0; padding-left: 1.2rem; }
.welcome li { margin: 0.3rem 0; }
.welcome__mark { display: block; width: 3rem; height: 3rem; margin-bottom: 0.75rem; color: var(--accent); }
.welcome__done { margin-top: 2rem; }
.card__head, .panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.card__head h1, .panel__head h2 { margin: 0; }
.breadcrumb { margin: 0 0 0.25rem; font-size: 0.9rem; color: var(--text-subtle); }

.flash { border-radius: var(--radius); padding: 0.75rem 1rem; margin-bottom: 1rem; }
.flash ul { margin: 0; padding-left: 1.2rem; }
.flash p { margin: 0 0 0.35rem; }
.flash p:last-child { margin-bottom: 0; }
.flash--alert { background: var(--alert-bg); }
.flash--notice { background: var(--notice-bg); }

.tag {
  margin-left: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-subtle); background: var(--band);
}

/* Settings tabs: links, so each tab has its own address and survives a reload. */
.tabs { display: flex; gap: 0.25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs__tab {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 0.9rem; margin-bottom: -1px;
  color: var(--text-subtle); text-decoration: none; font-weight: 500; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.tabs__tab:hover { color: var(--text); }
.tabs__tab.is-current { color: var(--text); font-weight: 650; border-bottom-color: var(--accent); }
.tabs__tab.is-current .icon { color: var(--accent); }

/* Auto / Light / Dark: Ledger's and Atlas's control. */
.segmented {
  display: inline-flex; padding: 3px; gap: 3px; margin-top: 0.5rem;
  background: var(--band); border: 1px solid var(--border); border-radius: 999px;
}
.segmented form { margin: 0; }
.segmented__option {
  display: flex; align-items: center; gap: 0.45rem; padding: 0.35rem 1rem;
  font: inherit; font-weight: 500; color: var(--text-subtle);
  background: none; border: 1px solid transparent; border-radius: 999px; cursor: pointer;
}
.segmented__option:hover { color: var(--text); }
.segmented__option.is-current { color: var(--text); font-weight: 650; background: var(--surface); border-color: var(--border); }
.segmented__option.is-current .icon { color: var(--accent); }

/* Forms and buttons ---------------------------------------------------------- */

.form { display: grid; gap: 0.35rem; }
.form label { font-weight: 600; margin-top: 0.6rem; }
.form input[type=text], .form input[type=email], .form input[type=password], .form input[type=tel], .form textarea, .copy-field {
  width: 100%; font: inherit; padding: 0.55rem 0.7rem; color: var(--text);
  background: var(--field); border: 1px solid var(--border); border-radius: 6px;
}
.form input:focus-visible, .form textarea:focus-visible, .copy-field:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.form .checkbox { font-weight: 400; display: flex; gap: 0.5rem; align-items: center; }
.form input[type=submit], .form button[type=submit] { margin-top: 1rem; justify-self: start; }

.button {
  display: inline-block; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  padding: 0.55rem 1rem; border-radius: 6px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--on-accent);
}
.button:disabled { opacity: 0.5; cursor: not-allowed; }
.button--quiet { background: transparent; color: var(--text); border-color: var(--border); }
.button--active { background: var(--text); color: var(--surface); border-color: var(--text); }
.button:focus-visible, .segmented__option:focus-visible, .tabs__tab:focus-visible, .topbar__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.button--go { background: var(--lamp-on-text); border-color: var(--lamp-on-text); color: var(--on-lamp); }
.button--danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.link-button { background: none; border: 0; cursor: pointer; }
/* Outside the top bar, a button that looks like a link (Remove, Sign out on a card). */
:is(.table__action, .calls__link, .card) .link-button { font: inherit; color: var(--accent); text-decoration: underline; padding: 0; }
.card .link-button.quiet { color: var(--text-subtle); }
.table__action form { display: inline; margin: 0; }

.table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.table th, .table td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--border); }
.table th { color: var(--text-subtle); font-weight: 600; font-size: 0.9rem; }
.table__action { text-align: right; }

/* Phone tab ------------------------------------------------------------------ */

/* The call takes the stage: one big warm box holding whatever this tab is
   doing, centred, its actions below a divider. The lamp is in the top bar, beside the
   brand. The callback form sits centred under it, small. */
.phone { display: grid; gap: 1rem; }
.phone .flash { margin: 0; }

.topbar__lamp { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: none; background: var(--text-subtle); }
html:has(.phone[data-phone-state-value=idle]) .topbar__lamp { background: var(--lamp-on); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lamp-on) 18%, transparent); }
html:has(.phone:is([data-phone-state-value=connecting], [data-phone-state-value=reconnecting])) .topbar__lamp { animation: pulse 1.6s infinite; }
html:has(.phone[data-phone-state-value=ringing]) .topbar__lamp { background: var(--lamp-ring); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lamp-ring) 22%, transparent); animation: pulse 0.8s infinite; }
html:has(.phone:is([data-phone-state-value=answering], [data-phone-state-value=calling], [data-phone-state-value=inCall])) .topbar__lamp { background: var(--lamp-call); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lamp-call) 18%, transparent); }

.phone__stage {
  display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem;
  min-height: 22rem; padding: 3rem 3.25rem 2.25rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
}
.phone__stage:focus { outline: none; }
.phone__stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.phone[data-phone-state-value=ringing] .phone__stage { border-color: var(--lamp-ring); box-shadow: 0 0 0 1px var(--lamp-ring); }

.phone__lead { text-align: center; }
.phone__lead > * { margin: 0; }
.phone__headline {
  font-size: clamp(2.25rem, 6vw, 3.5rem); font-weight: 720; line-height: 1.1; letter-spacing: -0.02em;
  margin-bottom: 0.9rem !important; overflow-wrap: anywhere;
}
/* A caller's number is the thing to see from across the room. */
.phone__headline--number { font-size: clamp(2.25rem, 9vw, 4.25rem); font-variant-numeric: tabular-nums; }
.phone__timer { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: 0.5rem !important; }
.phone__detail { color: var(--text-subtle); font-size: 1.05rem; }
.phone__caller { margin-top: 1.25rem !important; display: grid; gap: 0.3rem; justify-items: center; }
.phone__caller p { margin: 0; }
.phone__caller-name { font-size: 1.35rem; font-weight: 650; }
.phone__caller-about, .phone__caller-none, .phone__caller-footer { color: var(--text-subtle); }
.phone__caller-conversations { list-style: none; margin: 0.4rem 0; padding: 0; display: grid; gap: 0.25rem; max-width: 34rem; }
.phone__caller-conversations li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone__caller-when { color: var(--text-subtle); font-size: 0.9rem; }
.phone__caller-footer { font-size: 0.9rem; }
.phone__quality { margin-top: 1rem !important; font-size: 0.95rem; color: var(--lamp-ring-text); font-weight: 600; }

.phone__actions {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding-top: 1.5rem; border-top: 1px solid var(--border);
}
.phone__buttons { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
.phone__hint { margin: 0; text-align: center; color: var(--text-subtle); font-size: 0.9rem; }
.button--big { min-height: 2.9rem; padding: 0.65rem 1.4rem; }
.phone__keypad { display: grid; justify-items: center; gap: 0.6rem; }
.phone__keys-sent { min-height: 1.6rem; font-size: 1.25rem; font-weight: 600; letter-spacing: 0.15em; font-variant-numeric: tabular-nums; }
.phone__keys { display: grid; grid-template-columns: repeat(3, 4.25rem); gap: 0.6rem; }
.phone__key {
  display: grid; place-items: center; height: 3.4rem; border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 1.35rem; font-weight: 600; line-height: 1.1;
  border: 1px solid var(--border); background: transparent; color: var(--text);
}
.phone__key:hover { border-color: var(--accent); }
.phone__key:active { background: var(--border); }
.phone__key-letters { font-size: 0.6rem; letter-spacing: 0.1em; font-weight: 600; color: var(--text-subtle); min-height: 0.7rem; }
.phone__keypad-note { margin: 0; font-size: 0.85rem; }

.phone__dial { width: 100%; max-width: 26rem; margin: 0.75rem auto 0; justify-items: center; text-align: center; }
.phone__dial p { margin: 0; }
.phone__dial-row { display: flex; gap: 0.5rem; width: 100%; }
.phone__dial-row input { flex: 1; }
.phone__dial-row .button[type=submit] { margin-top: 0; }
.phone__aside { margin: 0.25rem 0 0; text-align: center; font-size: 0.875rem; }
.phone__note { width: 100%; max-width: 26rem; margin: 1rem auto 0; }
.phone__note label .quiet { display: block; font-weight: normal; }
.phone__note textarea { width: 100%; resize: vertical; }
.phone__note-actions { display: flex; gap: 0.5rem; justify-content: flex-end; align-items: center; margin-top: 0.5rem; }
.phone__note .phone__note-actions .button { margin-top: 0; } /* Beats .form button[type=submit]. */

@media (max-width: 520px) {
  .phone__stage { min-height: 20rem; padding: 2.25rem 1.4rem 1.5rem; gap: 2rem; }
  .phone__buttons { width: 100%; }
  .phone__buttons .button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar__lamp { animation: none !important; }
}

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

@keyframes pulse { 50% { opacity: 0.3; } }

/* Icons only on narrow screens; the labels stay for screen readers (not display: none,
   which left the links unnamed). */
@media (max-width: 520px) {
  .topbar__link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topbar__link.link-button { font-size: 0.9rem; }
}

/* Call quality: the lamps again, since good, fair and poor are call state too. */
.quality { font-weight: 650; }
.quality--good { color: var(--lamp-on-text); }
.quality--fair { color: var(--lamp-ring-text); }
.quality--poor { color: var(--lamp-call-text); }
.quality--unknown { color: var(--text-subtle); }