/* ---------------------------------------------------------------------------
   Say Up — Computer World Modern Inc.

   Clean corporate light, with one electric note.

   The room this is trying to be is a bright atrium: a grand entrance with the
   departments opening off it, daylight from above, everything legible from a
   distance. Almost all of it is white, near-white and a soft grey rule, so the
   single saturated blue carries every action on the page. When one colour is
   the only colour, it does not need to shout.

   The ledger discipline from the earlier products survives: aligned columns,
   monospace for anything numeric, and no decoration inside a data table.
   ------------------------------------------------------------------------ */

:root {
  /* surfaces */
  --page:      #F6F8FC;
  --surface:   #FFFFFF;
  --raised:    #FFFFFF;
  --line:      #E4EAF3;
  --line-soft: #EFF3F9;

  /* ink */
  --ink:       #0E1A2B;
  --ink-soft:  #35455C;
  --muted:     #64768E;

  /* the electric note */
  --volt:      #2B5BFF;
  --volt-dark: #1E42C4;
  --volt-wash: #EDF2FF;
  --glow:      0 0 0 4px rgba(43, 91, 255, .14);

  /* states */
  --live:      #0FB57A;   /* online, in a call, connected */
  --warn:      #F0A020;   /* spam label, allowance running low */
  --stop:      #E8453C;   /* decline, end call, blocked */

  --r:   14px;
  --r-s: 9px;
  --r-l: 22px;

  --shadow-1: 0 1px 2px rgba(14, 26, 43, .05);
  --shadow-2: 0 2px 6px rgba(14, 26, 43, .06), 0 12px 28px -14px rgba(14, 26, 43, .18);
  --shadow-3: 0 8px 20px -6px rgba(14, 26, 43, .10), 0 30px 60px -30px rgba(43, 91, 255, .28);

  --display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --body:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 15.5px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.021em;
  line-height: 1.16;
  margin: 0 0 .4em;
  color: var(--ink);
}
h1 { font-size: clamp(30px, 4.6vw, 46px); }
h2 { font-size: clamp(22px, 2.9vw, 30px); }
h3 { font-size: 19px; }
h4 { font-size: 16px; }

p { margin: 0 0 1em; }
a { color: var(--volt); text-decoration: none; }
a:hover { text-decoration: underline; }

.sub   { color: var(--ink-soft); }
.help  { color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.num   { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.eyebrow {
  display: block;
  font: 600 11px/1 var(--body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--volt);
  margin-bottom: 8px;
}

/* ---------------------------------------------------------------------------
   The atrium

   The masthead backdrop. Daylight from a high window, a pale concourse floor,
   and the department fronts standing along it. Everything is very low contrast
   on purpose — it is a room, not a picture, and text has to sit on top of it.
   ------------------------------------------------------------------------ */

.atrium {
  position: absolute; inset: 0 auto auto 0;
  width: 100%; height: 320px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 50% -20%, #FFFFFF 0%, #F2F6FF 45%, rgba(246,248,252,0) 78%),
    linear-gradient(180deg, #EEF3FD 0%, var(--page) 88%);
}
.atrium svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 190px; }
.atrium .floor  { fill: #DDE6F6; opacity: .55; }
.atrium .front  { fill: #CBD8EE; opacity: .5; }
.atrium .sign   { fill: var(--volt); opacity: .16; }
.atrium .light   { fill: #FFFFFF; opacity: .6; }

/* ---------------------------------------------------------------------------
   Masthead
   ------------------------------------------------------------------------ */

.masthead {
  position: relative;
  z-index: 1;
  padding: 20px clamp(16px, 4vw, 40px) 0;
}
.masthead .bar {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(1.4) blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 11px 16px;
  box-shadow: var(--shadow-1);
}

.wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -.03em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark span { color: var(--volt); }

.nav { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.nav a {
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover { background: var(--volt-wash); color: var(--volt-dark); text-decoration: none; }
.nav a.on    { background: var(--volt); color: #fff; }

.badge {
  display: inline-block;
  min-width: 18px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--stop);
  color: #fff;
  font: 600 11px/1.5 var(--mono);
  text-align: center;
}
.badge[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------------ */

main { position: relative; z-index: 1; padding: 26px clamp(16px, 4vw, 40px) 70px; }
.wrap { max-width: 1180px; margin: 0 auto; }
.narrow { max-width: 720px; margin: 0 auto; }

.split { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 22px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row   { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.card, .panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
}
.card  { padding: 16px 18px; }
.panel { padding: 20px 22px; }
.panel.lift { box-shadow: var(--shadow-2); }

/* ---------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--volt);
  color: #fff;
  font: 600 14.5px/1 var(--body);
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { background: var(--volt-dark); text-decoration: none; box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--glow); }

.btn.quiet { background: var(--surface); color: var(--ink-soft); border-color: var(--line); }
.btn.quiet:hover { background: var(--volt-wash); color: var(--volt-dark); border-color: transparent; }
.btn.ghost { background: transparent; color: var(--volt); }
.btn.go    { background: var(--live); }
.btn.stop  { background: var(--stop); }
.btn.small { padding: 7px 13px; font-size: 13.5px; }
.btn.wide  { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------ */

.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.field em.help { display: block; margin-top: 5px; font-style: normal; }

input[type=text], input[type=email], input[type=password], input[type=url],
input[type=number], input[type=search], input[type=datetime-local], input[type=date],
select, textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--ink);
  font: 400 15px/1.45 var(--body);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--volt);
  box-shadow: var(--glow);
}
textarea { min-height: 96px; resize: vertical; }

.checkline { display: flex; gap: 9px; align-items: flex-start; margin: 7px 0; font-size: 14px; }
.checkline input { margin-top: 3px; flex: none; }

/* ---------------------------------------------------------------------------
   Departments
   ------------------------------------------------------------------------ */

.aisles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.aisle {
  display: block;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.aisle:hover {
  transform: translateY(-2px);
  border-color: transparent;
  box-shadow: var(--shadow-2);
  text-decoration: none;
}
.aisle .glyph { font-size: 26px; line-height: 1; display: block; margin-bottom: 9px; }
.aisle h4 { margin: 0 0 3px; }
.aisle .count { font: 500 12px/1 var(--mono); color: var(--muted); }

/* ---------------------------------------------------------------------------
   Posts
   ------------------------------------------------------------------------ */

.post { padding: 18px 20px; border-bottom: 1px solid var(--line-soft); }
.post:last-child { border-bottom: 0; }
.post .who { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.post .body { margin: 0 0 10px; white-space: pre-wrap; word-break: break-word; }

.avatar {
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  background: var(--volt-wash);
  color: var(--volt-dark);
  display: grid; place-items: center;
  font: 700 15px/1 var(--display);
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 28px; height: 28px; font-size: 12px; }

/* Levels of likes. Three steps, and the control shows which step you are on. */
.levels { display: inline-flex; align-items: center; gap: 6px; }
.lvl {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 11px;
  font: 600 13px/1 var(--body);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.lvl:hover { border-color: var(--volt); color: var(--volt); }
.lvl.on-1 { background: var(--volt-wash); color: var(--volt-dark); border-color: transparent; }
.lvl.on-2 { background: #DCE6FF; color: var(--volt-dark); border-color: transparent; }
.lvl.on-3 { background: var(--volt); color: #fff; border-color: transparent; }
.lvl .score { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--volt-wash);
  color: var(--volt-dark);
  font: 600 12px/1.5 var(--body);
}
.tag.live { background: rgba(15,181,122,.14); color: #088056; }
.tag.warn { background: rgba(240,160,32,.16); color: #96610A; }
.tag.stop { background: rgba(232,69,60,.13); color: #A62821; }

/* Presence dot */
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
.dot.on { background: var(--live); box-shadow: 0 0 0 3px rgba(15,181,122,.18); }

/* ---------------------------------------------------------------------------
   Tables — ledger discipline
   ------------------------------------------------------------------------ */

table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th {
  text-align: left;
  font: 600 11.5px/1 var(--body);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 10px 9px;
  border-bottom: 1px solid var(--line);
}
table.data td { padding: 11px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------------------
   Flashes
   ------------------------------------------------------------------------ */

.flash {
  padding: 11px 15px;
  border-radius: var(--r-s);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 14px;
  margin-bottom: 12px;
}
.flash.ok   { border-color: rgba(15,181,122,.4);  background: rgba(15,181,122,.07); }
.flash.warn { border-color: rgba(240,160,32,.45); background: rgba(240,160,32,.09); }
.flash.bad  { border-color: rgba(232,69,60,.4);   background: rgba(232,69,60,.07); }

/* ---------------------------------------------------------------------------
   Plans
   ------------------------------------------------------------------------ */

.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.tier {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  display: flex; flex-direction: column;
}
.tier.pick { border-color: var(--volt); box-shadow: var(--shadow-3); }
.tier .price { font: 800 34px/1 var(--display); letter-spacing: -.03em; margin: 6px 0 2px; }
.tier .price small { font: 500 13px/1 var(--body); color: var(--muted); }
.tier ul { list-style: none; padding: 0; margin: 14px 0 18px; font-size: 14px; }
.tier li { padding: 6px 0 6px 22px; position: relative; color: var(--ink-soft); }
.tier li::before {
  content: "";
  position: absolute; left: 3px; top: 12px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--volt);
}
.tier li.no { color: var(--muted); }
.tier li.no::before { background: var(--line); }
.tier .btn { margin-top: auto; }

/* ---------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------ */

.colophon {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding: 26px clamp(16px, 4vw, 40px) 44px;
  color: var(--muted);
  font-size: 13px;
}
.colophon .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 22px; }
.colophon ul { list-style: none; padding: 0; margin: 0; }
.colophon li { padding: 3px 0; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .atrium { height: 260px; }
}
@media (max-width: 620px) {
  .masthead .bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .nav { margin-left: 0; justify-content: flex-start; }
}

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

/* ---------------------------------------------------------------------------
   Dialogs and toasts

   Replacing alert() and confirm(). The native ones say the hostname at the top,
   cannot be styled, block the whole page, and on a phone look like the browser
   warning you about something rather than the site talking to you. For an
   incoming call that distinction matters.
   ------------------------------------------------------------------------ */

.scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(14, 26, 43, .45);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  padding: 20px;
  animation: scrimIn .14s ease;
}
@keyframes scrimIn { from { opacity: 0 } to { opacity: 1 } }

.dialog {
  background: var(--surface);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-3);
  width: 100%; max-width: 420px;
  padding: 26px;
  animation: dialogIn .18s cubic-bezier(.2, .9, .3, 1);
}
@keyframes dialogIn {
  from { opacity: 0; transform: translateY(10px) scale(.97) }
  to   { opacity: 1; transform: none }
}
.dialog h3 { margin: 0 0 8px; font-size: 19px; }
.dialog p  { margin: 0 0 18px; color: var(--ink-soft); font-size: 15px; }
.dialog .row { justify-content: flex-end; }

/* An incoming call is not a message box. It gets the whole treatment: the
   caller's name large, the two answers unmistakable, and a colour that says
   something is happening now. */
.dialog.ringing { text-align: center; max-width: 360px; }
.dialog.ringing .who {
  width: 84px; height: 84px; margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--volt) 0%, #6E3BFF 100%);
  color: #fff;
  display: grid; place-items: center;
  font: 800 32px/1 var(--display);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(43,91,255,.42) }
  70%      { box-shadow: 0 0 0 20px rgba(43,91,255,0) }
}
.dialog.ringing .row { justify-content: center; }

/* ---------------------------------------------------------------------------
   Toasts — for things that do not need an answer
   ------------------------------------------------------------------------ */

.toasts {
  position: fixed;
  left: 50%; bottom: 22px;
  transform: translateX(-50%);
  z-index: 95;
  display: flex; flex-direction: column; gap: 8px;
  align-items: center;
  pointer-events: none;
  width: min(440px, calc(100vw - 32px));
}
.toast {
  pointer-events: auto;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: 999px;
  font: 500 14.5px/1.4 var(--body);
  box-shadow: var(--shadow-2);
  display: flex; align-items: center; gap: 10px;
  animation: toastIn .2s cubic-bezier(.2, .9, .3, 1);
  max-width: 100%;
}
.toast.out { animation: toastOut .18s ease forwards; }
.toast.ok   { background: #0B7A54; }
.toast.warn { background: #9A6410; }
.toast.bad  { background: #A62821; }
.toast a { color: #fff; text-decoration: underline; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px) } }

/* ---------------------------------------------------------------------------
   Install banner
   ------------------------------------------------------------------------ */

.installBar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 80;
  display: flex; align-items: center; gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 12px 10px 18px;
  box-shadow: var(--shadow-2);
  font-size: 14px;
  width: min(460px, calc(100vw - 28px));
}
.installBar[hidden] { display: none; }
.installBar .x {
  background: none; border: 0; cursor: pointer;
  color: var(--muted); font-size: 18px; line-height: 1; padding: 4px 6px;
}

/* ---------------------------------------------------------------------------
   Reading on a phone

   Everything above was laid out on a desktop and then squeezed. These undo the
   squeezing: posts get the full width, text gets bigger rather than smaller,
   and the messages page stops trying to be two columns on a 380px screen.
   ------------------------------------------------------------------------ */

/* Posts, at any width. Longer measure and more air — a post is the thing people
   came to read, and it was being rendered at the same size as a form label. */
.post .body {
  font-size: 16px;
  line-height: 1.62;
  color: var(--ink);
  margin-bottom: 12px;
}
.post { padding: 20px 22px; }
.post .who { margin-bottom: 11px; }

/* The feed column should not run to newspaper width on a large monitor. Around
   68 characters is where prose stops being tiring to read. */
.feedcol { max-width: 680px; }

/* ---------------------------------------------------------------------------
   Messages
   ------------------------------------------------------------------------ */

.msgLayout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

@media (max-width: 860px) {
  /* One column at a time on a phone. The thread list is a page; opening a
     conversation is another page. Two panes side by side on a narrow screen
     gives a list nobody can read and a chat box too thin to type in, which is
     exactly what this was doing. */
  .msgLayout { grid-template-columns: 1fr; }
  .msgLayout .threadList { display: none; }
  .msgLayout.noThread .threadList { display: block; }
  .msgLayout.noThread .threadPane { display: none; }

  .backToList { display: inline-flex !important; }

  .msgLayout .threadPane .panel {
    height: calc(100dvh - 150px);
    min-height: 380px;
  }
}
.backToList { display: none; }

/* ---------------------------------------------------------------------------
   Everything narrow
   ------------------------------------------------------------------------ */

@media (max-width: 700px) {
  body { font-size: 16px; }

  main { padding: 18px 14px 60px; }

  .post { padding: 18px 16px; }
  .post .body { font-size: 16.5px; }

  /* Sidebars go under the content rather than beside it. */
  .split { grid-template-columns: 1fr; gap: 16px; }

  /* Cards lose the shadow-and-rounding stack that eats width on a phone. */
  .panel { padding: 18px 16px; border-radius: var(--r); }
  .card  { padding: 15px 16px; }

  .aisles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }

  h1 { font-size: 28px; }
  h2 { font-size: 22px; }

  /* Tables stop being tables. A four-column row on a 380px screen is unreadable
     however small the type gets. */
  table.data th { display: none; }
  table.data td { display: block; padding: 6px 0; border: 0; }
  table.data tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
  table.data td.num { text-align: left; }

  .tiers { grid-template-columns: 1fr; }

  /* Buttons that sat in a row need to be reachable, not tiny. */
  .btn { padding: 11px 18px; }
  .btn.small { padding: 9px 14px; }

  .toasts { bottom: 14px; }
  .installBar { bottom: 12px; padding: 10px 10px 10px 14px; }
}

@media (max-width: 420px) {
  /* At this width a row of three buttons wraps into a mess. Let them stack. */
  .post .row { gap: 10px; }
  .dialog { padding: 22px 20px; }
}