/* The Buxman Group field desk.
   Navy and gold from the brochures, because it is already the brand and it
   is kind to read at 5:45am. Tabular figures throughout: phone numbers and
   acreages sit in columns and have to line up. */

:root {
  --ground:   #0B1626;
  --surface:  #101F33;
  --raised:   #16263D;
  --line:     #1C2F49;
  --line-2:   #27405F;
  --edge:     #3A5375;

  --ink:      #EFEAE0;
  --ink-2:    #C7D4E4;
  --muted:    #9DB2CE;
  --muted-2:  #7E95B4;
  --faint:    #6F87A8;

  --gold:     #D6A63C;
  --gold-lit: #F0CE7B;
  --green:    #1F7A4D;
  --green-lit:#6FD6A4;
  --amber:    #9A6B14;
  --red:      #D4564B;
  --red-lit:  #FF9B91;

  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-pill: 999px;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Public Sans", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  /* the phone sits in a truck; keep content clear of the notch */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-lit); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; margin: 0; }
h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.12; }
h2 { font-size: 23px; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 36px 24px 72px; }

/* ---------------------------------------------------------------- chrome */
.top {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  padding: 16px 24px; border-bottom: 1px solid var(--line);
}
/* the wordmark is the way home */
.brand { display: flex; align-items: baseline; gap: 12px; text-decoration: none; }
.brand b { font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--ink); }
.brand:hover b { color: var(--gold-lit); }
.kicker {
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold);
}
.top nav { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.top nav a { color: var(--muted); font-size: 14px; font-weight: 500;
             padding: 8px 14px; border-radius: var(--r-sm); }
.top nav a:hover { background: var(--raised); color: var(--ink); }
.top nav a[aria-current="page"] { background: var(--gold); color: var(--ground); font-weight: 600; }
.me {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--raised); border: 1px solid var(--line-2);
  font-size: 12px; font-weight: 700; color: var(--gold);
}

/* ----------------------------------------------------------------- blocks */
.card {
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); padding: 24px 26px; margin-bottom: 16px;
}
.lede { color: var(--muted); font-size: 16px; max-width: 58ch; margin: 6px 0 26px; }
.label {
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 6px;
}
.rowline { border-top: 1px solid var(--line); }
.quiet { color: var(--muted-2); font-size: 14px; }

.pill {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 6px;
}
.pill-own { color: var(--green-lit); background: rgba(46,158,107,.16); border: 1px solid rgba(111,214,164,.35); }
.pill-dnc { color: var(--red-lit);   background: rgba(212,86,75,.18);  border: 1px solid rgba(255,155,145,.4); }
.pill-lit { color: #D7B3F2;          background: rgba(122,43,189,.22);  border: 1px solid rgba(215,179,242,.4); }

/* ------------------------------------------------------------------ input */
.search {
  width: 100%; font-size: 26px; font-weight: 600; letter-spacing: .02em;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 16px 20px; font-family: inherit;
}
.search::placeholder { color: #61789A; opacity: 1; }
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px; border-radius: 10px;
  font-family: inherit; font-size: 15px; font-weight: 600;
  border: 1px solid var(--edge); background: transparent; color: var(--ink);
  cursor: pointer;
}
.btn:hover { background: var(--raised); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--ground); font-weight: 700; }
.btn-gold:hover { background: var(--gold-lit); border-color: var(--gold-lit); }
.btn-green { background: var(--green); border-color: var(--green); color: #fff; }
.btn-amber { background: var(--amber); border-color: var(--amber); color: #fff; }
.btn-wide { width: 100%; }

/* ----------------------------------------------------------------- dialer */
.dial { max-width: 560px; margin: 0 auto; padding: 20px 20px 48px; }
.progress { height: 4px; border-radius: var(--r-pill); background: var(--raised); overflow: hidden; margin-top: 10px; }
.progress i { display: block; height: 4px; background: var(--gold); }
.number {
  display: flex; align-items: center; justify-content: center;
  min-height: 64px; border-radius: 14px; background: var(--gold);
  color: var(--ground); font-size: 26px; font-weight: 700; letter-spacing: .01em;
}
.number:hover { background: var(--gold-lit); color: var(--ground); }
.texts { display: flex; gap: 10px; margin: 10px 0 26px; }
.texts a {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 58px; border-radius: var(--r); color: #fff;
}
.texts a span { font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.texts a small { font-size: 11px; opacity: .85; }
.choices { display: flex; flex-direction: column; gap: 9px; }
.choices button {
  text-align: left; font-family: inherit; font-size: 16px; font-weight: 600;
  min-height: 52px; padding: 0 18px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line-2);
  color: var(--ink-2); cursor: pointer; width: 100%;
}
.choices button:hover { border-color: var(--edge); background: var(--raised); }
.choices button.danger:hover { border-color: var(--red); color: var(--red-lit); }

/* ------------------------------------------------------------------ lists */
.people { list-style: none; margin: 0; padding: 0; }
.people li {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  justify-content: space-between;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 14px; padding: 16px 20px; margin-bottom: 10px;
}
.people li.done { opacity: .55; }
.people .who { display: flex; gap: 14px; align-items: baseline; flex: 1 1 260px; min-width: 0; }
.people .n { font-size: 13px; font-weight: 700; color: var(--gold); width: 26px; flex: none; }
.people .nm { font-size: 18px; font-weight: 600; color: var(--ink); text-decoration: none; }
a.nm:hover { color: var(--gold-lit); text-decoration: underline;
             text-underline-offset: 3px; }

.flash {
  background: rgba(46,158,107,.14); border: 1px solid rgba(111,214,164,.35);
  color: var(--green-lit); border-radius: var(--r-sm);
  padding: 11px 16px; margin-bottom: 22px; font-size: 15px;
}
.people .ph { font-size: 17px; font-weight: 600; color: var(--ink-2); }

/* ------------------------------------------------------- dashboard tiles */
.tiles {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
.tiles div { background: var(--surface); padding: 16px 18px; }
.tiles b { display: block; font-size: 28px; font-weight: 600; line-height: 1.1; }

.rowcard {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  justify-content: space-between; color: inherit;
}
.rowcard:hover { border-color: var(--edge); }

.sechead {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline;
  justify-content: space-between; padding: 30px 0 12px;
}

.pill-new { color: var(--green-lit); background: rgba(46,158,107,.16); border: 1px solid rgba(111,214,164,.35); }
.pill-chg { color: #F3C46B; background: rgba(154,107,20,.26); border: 1px solid rgba(243,196,107,.4); }

/* ------------------------------------------------- per-row action buttons */
.acts { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.act {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 14px; border-radius: 10px;
  font-size: 14px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--line-2); background: var(--raised); color: var(--ink-2);
}
.act:hover { border-color: var(--edge); color: var(--ink); }
.act-text  { background: var(--green); border-color: var(--green); color: #fff; }
.act-text:hover  { background: #248a57; color: #fff; }
.act-after { background: var(--amber); border-color: var(--amber); color: #fff; }
.act-after:hover { background: #ad7917; color: #fff; }
.act-call  { background: var(--gold); border-color: var(--gold); color: var(--ground); font-weight: 700; }
.act-call:hover  { background: var(--gold-lit); color: var(--ground); }

/* a row the viewer has just texted, before the page is reloaded */
[data-row][data-texted="1"] { opacity: .55; }

/* ---------------------------------------------------------- the composer */
.composer {
  width: 100%; font-family: inherit; font-size: 17px; line-height: 1.55;
  color: var(--ink); background: var(--ground);
  border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 14px 16px; resize: vertical; min-height: 120px;
}
.composer::placeholder { color: #556D8C; opacity: 1; }
.tok {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  background: var(--raised); border: 1px solid var(--line-2);
  border-radius: 5px; padding: 1px 6px; color: var(--gold);
}

.facts {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; margin: 24px 0 28px;
}
.facts div { background: var(--surface); padding: 14px 16px; }
.facts b { display: block; font-size: 21px; font-weight: 600; }

@media (max-width: 760px) {
  .wrap { padding: 24px 16px 60px; }
  .facts, .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people li { gap: 12px; }
  /* On a phone the three actions get a row of their own and share the
     width, so none of them is a 44px target you have to aim at. */
  .acts { width: 100%; }
  .acts .act { flex: 1 1 0; padding: 0 8px; }
  .sechead { padding: 24px 0 10px; }
}