/* ---------------------------------------------------------------------------
   CloudRelay dashboard.

   Same design system as the marketing site: a monochrome palette where
   typography carries the hierarchy, pill-shaped interactive elements, and
   borders rather than shadows for elevation. Two chromatic accents only —
   signal blue for actions, coral for live/attention states.

   Fractional font weights (440, 456, 652) are deliberate. Inter is a variable
   font, so these sit between Regular and Semibold and give a distinction
   standard weights cannot.
   --------------------------------------------------------------------------- */
:root {
  --canvas:#ffffff;
  --mist:#f2f2f2;
  --fog:#ededed;
  --silver:#c2c2c2;
  --ash:#adadad;
  --graphite:#707070;
  --ink:#141414;
  --signal:#3B57FF;
  --signal-deep:#2438C4;
  --live:#FF6B57;

  --ok:#0d7a5f;
  --ok-bg:#eefaf6;
  --warn:#9a4a1d;
  --warn-bg:#fff6ef;
  --busy:#2438C4;
  --busy-bg:#f1f3ff;

  --font:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:920px;
  --shadow-xl:rgba(0,0,0,0.04) 0px 8px 40px 0px;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:var(--font);
  font-size:16px;
  font-weight:400;
  letter-spacing:0.21px;
  line-height:1.55;
  color:var(--ink);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

a{color:var(--signal);text-decoration:none}
a:hover{text-decoration:underline}

/* --- header / footer ------------------------------------------------------ */

.site-header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  height:64px;padding:0 28px;
  border-bottom:1px solid var(--fog);
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.88);backdrop-filter:blur(12px);
}

/* Brand lockup: the mark as inline SVG beside real text, so the wordmark is
   selectable, scales with the type around it, and never falls back to another
   face the way text inside an SVG would. */
.brand{
  /* gap would apply between every flex child, and the wordmark is three of
     them — "Cloud", the span and the suffix — so the spacing meant for the
     mark would open up inside the word. The mark carries its own margin. */
  display:inline-flex;align-items:center;gap:0;
  font-family:'Archivo',var(--font);font-weight:700;
  font-size:19px;letter-spacing:-0.38px;
  color:var(--ink);text-decoration:none;
}
.brand:hover{text-decoration:none}
.brand-mark{height:1.05em;width:auto;flex:none;overflow:visible;margin-right:9px}
.brand span{color:inherit}
.brand i{font-style:normal;color:var(--signal)}

.site-header nav{display:flex;align-items:center;gap:24px;font-size:14px;font-weight:456}
.site-header nav a{color:var(--graphite)}
.site-header nav a:hover,.site-header nav a.on{color:var(--ink);text-decoration:none}
.who{color:var(--ash)}

main{flex:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:56px 28px 80px}

.site-footer{
  padding:24px 28px;border-top:1px solid var(--fog);
  color:var(--graphite);font-size:13px;font-weight:440;text-align:center;
}

/* --- type ----------------------------------------------------------------- */

h1{font-weight:652;font-size:clamp(28px,4vw,32px);letter-spacing:-0.39px;line-height:1.13;margin-bottom:6px}
h2{font-weight:600;font-size:15px;letter-spacing:0.28px;margin-bottom:14px}
h3{font-weight:600;font-size:17px;letter-spacing:-0.1px}

.lead{color:var(--graphite);font-weight:440;margin-bottom:32px;font-size:17px}
.muted{color:var(--graphite);font-weight:440}
.small{font-size:14px;font-weight:456}
.narrow{max-width:420px;margin:48px auto}
.centered{text-align:center;margin-top:28px}

code{
  font-family:var(--mono);font-size:13px;
  background:var(--mist);border:1px solid var(--fog);
  border-radius:6px;padding:2px 7px;letter-spacing:0;
}

.row-between{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.row-between h1{margin:0}

/* --- banners -------------------------------------------------------------- */

.banner{
  border:1px solid var(--fog);border-left:3px solid var(--fog);
  border-radius:16px;padding:16px 22px;margin-bottom:28px;
  font-size:15px;font-weight:440;
}
.banner strong{font-weight:600}
.banner.ok{border-left-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.banner.warn{border-left-color:var(--live);background:var(--warn-bg);color:var(--warn)}
.banner.busy{border-left-color:var(--signal);background:var(--busy-bg);color:var(--busy)}
.banner a{color:inherit}
.banner .btn{margin-left:10px}

.alert{
  background:var(--warn-bg);color:var(--warn);
  border:1px solid var(--live);border-radius:16px;
  padding:12px 18px;font-size:14px;font-weight:456;margin-bottom:4px;
}

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

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px}

.card{
  background:var(--canvas);
  border:1px solid var(--fog);
  border-radius:20px;
  padding:24px;
}

dl{margin-bottom:18px;display:grid;grid-template-columns:auto 1fr;gap:9px 16px}
dt{color:var(--graphite);font-size:14px;font-weight:440}
dd{margin:0;font-size:14px;font-weight:456;text-align:right}

.pill{
  display:inline-block;padding:2px 11px;border-radius:9999px;
  font-size:12px;font-weight:600;letter-spacing:0.1px;text-transform:capitalize;
}
.pill-ok{background:var(--ok-bg);color:var(--ok)}
.pill-warn{background:var(--warn-bg);color:var(--warn)}

/* --- the two big links ---------------------------------------------------- */

.actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;margin-top:16px}

.action{
  display:block;background:var(--canvas);
  border:1px solid var(--fog);border-radius:20px;padding:24px;
  text-decoration:none;color:var(--ink);
  transition:border-color .18s,transform .18s;
}
.action:hover{border-color:var(--ink);transform:translateY(-2px);text-decoration:none}
.action-title{display:block;font-weight:600;font-size:17px;margin-bottom:4px}
.action-note{display:block;color:var(--graphite);font-size:14px;font-weight:440}
.action.disabled{opacity:.45;pointer-events:none}

/* --- forms and buttons ---------------------------------------------------- */

.stack{display:flex;flex-direction:column;gap:6px}
.stack label{font-size:12px;font-weight:600;letter-spacing:0.1px;color:var(--graphite);margin-top:14px;text-transform:uppercase}

input,textarea{
  font-family:var(--font);font-size:15px;font-weight:440;
  padding:13px 20px;width:100%;
  border:1px solid var(--fog);border-radius:9999px;
  background:var(--mist);color:var(--ink);
  transition:border-color .18s,box-shadow .18s,background .18s;
}
input::placeholder,textarea::placeholder{color:var(--ash)}
input:focus,textarea:focus{
  outline:none;border-color:var(--signal);background:var(--canvas);
  box-shadow:0 0 0 3px rgba(59,87,255,.15);
}
textarea{border-radius:20px;resize:vertical}

button,.btn{
  font-family:var(--font);font-size:14px;font-weight:600;
  border-radius:9999px;padding:11px 22px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--ink);background:transparent;color:var(--ink);
  text-decoration:none;
  transition:background .18s,color .18s,transform .16s,border-color .18s;
}
button:hover,.btn:hover{background:var(--ink);color:var(--canvas);text-decoration:none}

.primary,button.primary{
  background:var(--signal);border-color:var(--signal);color:#fff;
  margin-top:22px;padding:13px 24px;font-size:15px;
}
.primary:hover,button.primary:hover{background:var(--signal-deep);border-color:var(--signal-deep);color:#fff;transform:translateY(-1px)}

.btn.small,button.small{padding:7px 15px;font-size:13px}

.linkish{
  border:none;background:none;padding:0;
  color:var(--graphite);font-weight:456;font-size:14px;
}
.linkish:hover{background:none;color:var(--ink)}

/* --- plan chooser --------------------------------------------------------- */

.family{font-size:12px;font-weight:600;letter-spacing:0.1px;text-transform:uppercase;color:var(--ash);margin:32px 0 12px}
.family:first-of-type{margin-top:0}

.plans .plan{display:flex;flex-direction:column;position:relative}
.plan h3{margin-bottom:2px}
.plan-price{font-weight:652;font-size:36px;letter-spacing:-0.39px;line-height:1;margin-bottom:18px}
.plan-price span{font-family:var(--mono);font-size:13px;font-weight:400;color:var(--graphite);letter-spacing:0}

.plan-popular{border-color:var(--signal)}

/* The plan they clicked on the marketing site, which has to look different from
   the one we recommend — otherwise picking the popular plan changes nothing on
   the page and picking any other leaves two cards looking equally chosen. */
.plan-picked{border:2px solid var(--ink);padding:23px}
.plan-picked .plan-tag{background:var(--ink)}
.plans-one{grid-template-columns:minmax(0,420px)}
.plan-tag{
  position:absolute;top:-11px;left:24px;
  background:var(--signal);color:#fff;
  font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;
  padding:4px 12px;border-radius:9999px;
}

/* The build brief on the activation page. Definition lists elsewhere are short
   values that read well right-aligned; a sentence describing someone's website
   does not, so this one aligns left. */
.brief dd{text-align:left}

.steps-list{margin:0 0 18px;padding-left:22px;display:grid;gap:10px}
.steps-list li{font-size:15px;font-weight:440;color:var(--graphite)}
.steps-list li strong{color:var(--ink);font-weight:600}

/* The follow-up board. Columns scroll sideways as a group on a narrow screen
   rather than each card shrinking to nothing. */
.board{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;align-items:flex-start}
.column{
  flex:0 0 300px;background:var(--mist);border-radius:20px;padding:14px;
  min-height:120px;
}
.column.over{outline:2px dashed var(--signal);outline-offset:-4px}
.column.closed.over{outline-color:var(--live)}
.column-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:4px}
.column-head h3{margin:0;font-size:14px;font-weight:600}
.column-note{font-size:12px;color:var(--graphite);line-height:1.45;margin:0 0 12px}

.board-card{
  background:var(--canvas);border:1px solid var(--fog);border-radius:14px;
  padding:12px;margin-bottom:10px;cursor:grab;
}
.board-card:last-child{margin-bottom:0}
.board-card.dragging{opacity:0.45}
.board-card.fixed{cursor:default}
.board-card h4{margin:0 0 2px;font-size:14px;font-weight:600}
.board-card .who{font-size:12px;color:var(--graphite);margin:0 0 8px;word-break:break-word}
.board-card .due{
  display:inline-block;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:0.4px;padding:3px 9px;border-radius:9999px;
  background:var(--warn-bg);color:var(--warn);margin-bottom:8px;
}
.board-card .later{font-size:12px;color:var(--graphite);margin-bottom:8px}
.board-card details{margin-bottom:8px}
.board-card pre{font-size:12px;max-height:260px;overflow:auto}

/* The backups choice on a lite plan: part of the card, not a second plan. */
.add-on{
  display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;
  border:1px solid var(--fog);border-radius:14px;padding:12px 14px;margin-bottom:16px;cursor:pointer;
}
.add-on:hover{border-color:var(--ash)}
.add-on input{width:18px;height:18px;margin-top:2px}
.add-on span{font-size:14px;line-height:1.5}

.plan-features{list-style:none;margin-bottom:22px;display:grid;gap:9px}
.plan-features li{font-size:14px;font-weight:440;color:var(--graphite);padding-left:22px;position:relative}
.plan-features li::before{content:"";position:absolute;left:2px;top:8px;width:9px;height:5px;border-left:1.8px solid var(--ink);border-bottom:1.8px solid var(--ink);transform:rotate(-45deg)}
.plan .btn{margin-top:auto}

/* --- operator table ------------------------------------------------------- */

.table-scroll{overflow-x:auto;border:1px solid var(--fog);border-radius:20px;background:var(--canvas)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--fog);white-space:nowrap}
th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.6px;color:var(--ash)}
td{font-weight:440}
td strong{font-weight:600}
tbody tr:last-child td{border-bottom:none}
tr.needs-setup td{background:var(--busy-bg)}
.pill-muted{background:var(--mist);color:var(--ash)}

/* --- command blocks ------------------------------------------------------- */

.cmd{
  font-family:var(--mono);font-size:13px;line-height:1.7;letter-spacing:0;
  background:var(--mist);border:1px solid var(--fog);border-radius:14px;
  padding:16px 18px;margin-bottom:14px;
  overflow-x:auto;white-space:pre;
}

/* --- tabs ----------------------------------------------------------------- */

.tabs{
  display:flex;gap:4px;flex-wrap:wrap;
  border-bottom:1px solid var(--fog);margin-bottom:16px;
}
.tab{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;font-size:14px;font-weight:456;
  color:var(--graphite);text-decoration:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.tab:hover{color:var(--ink);text-decoration:none}
.tab.on{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
.tab-count{
  display:inline-block;min-width:20px;text-align:center;
  padding:1px 7px;border-radius:999px;font-size:12px;font-weight:600;
  background:var(--mist);color:var(--graphite);
}
.tab.on .tab-count{background:var(--ink);color:var(--canvas)}
/* Something is waiting on you: an unanswered application, or a paid customer
   with no website yet. */
.tab.urgent .tab-count{background:var(--warn-bg);color:var(--warn)}
.tab.urgent.on .tab-count{background:var(--live);color:#fff}

/* A credit somebody has earned that only a person can give: this app never
   writes to Stripe, so the free month for a referral comes off by hand. */
.owed{color:var(--warn)}