@import url('/static/fonts/fonts.css');

/* TelePost — brand system.
   Navy #071B41 and orange #FD6313 are sampled directly from the logo.
   Poppins carries the wordmark voice in headings; Inter does the reading. */

:root {
  --navy-900: #071B41;
  --navy-800: #0D2757;
  --navy-700: #143467;
  --navy-100: #E7ECF5;
  --navy-050: #F4F7FC;

  --orange:     #FD6313;
  --orange-600: #E4530A;
  --orange-100: #FFEDE3;

  --ink:        var(--navy-900);
  --ink-muted:  #5A6782;
  --ink-faint:  #8A94A8;
  --line:       #DFE5EF;
  --bg:         #FFFFFF;
  --bg-soft:    var(--navy-050);

  --ok:   #0F7B4F;
  --warn: #9A6100;
  --bad:  #B3261E;

  --radius:    10px;
  --radius-lg: 16px;
  --shadow:    0 1px 2px rgba(7, 27, 65, .06), 0 8px 24px rgba(7, 27, 65, .06);

  --font-display: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --wrap: 68rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
}
h1 { font-size: 2.25rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.125rem; }

p { margin: 0 0 1rem; }
a { color: var(--navy-700); text-decoration-color: var(--navy-100); text-underline-offset: 3px; }
a:hover { color: var(--orange-600); }

code, pre {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .875em;
}
pre {
  background: var(--navy-900); color: #E8EDF7;
  padding: 1rem; border-radius: var(--radius); overflow-x: auto;
}

/* ------------------------------------------------------------- layout */

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.wrap-narrow { max-width: 44rem; margin: 0 auto; padding: 0 1.25rem; }

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky; top: 0; z-index: 20;
}
.site-header .wrap {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 68px;
}
.logo img { height: 30px; width: auto; display: block; }
.nav { display: flex; gap: 1.25rem; margin-left: auto; align-items: center; }
.nav a { font-size: .9375rem; font-weight: 500; text-decoration: none; color: var(--ink-muted); }
.nav a:hover, .nav a.active { color: var(--navy-900); }

.site-footer {
  margin-top: 4rem; padding: 2rem 0;
  border-top: 1px solid var(--line);
  color: var(--ink-faint); font-size: .875rem;
}
.site-footer a { color: var(--ink-muted); }

main { padding: 2.5rem 0 1rem; }

/* -------------------------------------------------------------- pieces */

.card {
  --pad-y: 1.5rem;
  --pad-x: 1.5rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--pad-y) var(--pad-x);
  margin-bottom: 1.25rem;
}
.card-soft { background: var(--bg-soft); border-color: transparent; }

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-body); font-size: .9375rem; font-weight: 500;
  padding: .625rem 1.125rem;
  border-radius: var(--radius); border: 1px solid transparent;
  background: var(--navy-900); color: #fff;
  cursor: pointer; text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--navy-700); color: #fff; }
.btn-accent { background: var(--orange); }
.btn-accent:hover { background: var(--orange-600); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-quiet:hover { background: var(--bg-soft); color: var(--ink); }
.btn-danger { background: transparent; color: var(--bad); border-color: #E6C9C7; }
.btn-danger:hover { background: #FDF3F2; color: var(--bad); }
.btn-sm { padding: .375rem .75rem; font-size: .875rem; }

/* Google's brand guidelines require their mark on the button. */
.btn-google {
  background: #fff; color: var(--ink); border-color: var(--line);
  width: 100%; justify-content: center;
}
.btn-google:hover { background: var(--bg-soft); color: var(--ink); }

label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .375rem; }
.hint { font-size: .8125rem; color: var(--ink-muted); margin: .25rem 0 0; }

input[type=text], input[type=email], input[type=password], input[type=url],
input[type=time], input[type=number], select, textarea {
  width: 100%; padding: .625rem .75rem;
  font-family: var(--font-body); font-size: .9375rem; color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--orange); outline-offset: 1px; border-color: transparent;
}
textarea { min-height: 5.5rem; resize: vertical; }
.field { margin-bottom: 1.125rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.badge {
  display: inline-block; font-size: .75rem; font-weight: 600;
  padding: .1875rem .5rem; border-radius: 999px;
  background: var(--navy-100); color: var(--navy-700);
}
.badge-ok   { background: #E4F3EC; color: var(--ok); }
.badge-warn { background: #FBF0DC; color: var(--warn); }
.badge-bad  { background: #FBE9E7; color: var(--bad); }
.badge-accent { background: var(--orange-100); color: var(--orange-600); }

.notice {
  padding: .875rem 1rem; border-radius: var(--radius);
  border-left: 3px solid var(--orange); background: var(--orange-100);
  margin-bottom: 1.25rem; font-size: .9375rem;
}
.notice-ok  { border-color: var(--ok);  background: #E4F3EC; }
.notice-bad { border-color: var(--bad); background: #FBE9E7; }

table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
th, td { text-align: left; padding: .6875rem .5rem; border-bottom: 1px solid var(--line); }
th { font-weight: 600; font-size: .8125rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }
td.right, th.right { text-align: right; }

.muted { color: var(--ink-muted); }
.small { font-size: .875rem; }
.mono  { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8125rem; }
.stack > * + * { margin-top: 1rem; }
.row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.spacer { margin-left: auto; }

/* --------------------------------------------------------------- pages */

.hero { padding: 4rem 0 3rem; text-align: center; }
.hero img.mark { height: 88px; margin-bottom: 1.75rem; }
.hero h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: .75rem; }
.hero .tagline {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.125rem; color: var(--ink-muted); margin-bottom: 2rem;
}
.hero .tagline .gt { color: var(--orange); font-weight: 600; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.25rem; margin: 3rem 0; }
.step { text-align: left; }
.step .num {
  font-family: var(--font-display); font-weight: 700; font-size: .875rem;
  color: var(--orange); display: block; margin-bottom: .375rem;
}
.step h3 { margin-bottom: .25rem; }
.step p { color: var(--ink-muted); font-size: .9375rem; margin: 0; }

.auth-page { max-width: 24rem; margin: 4rem auto; }
.auth-page .logo-center { text-align: center; margin-bottom: 2rem; }
.auth-page .logo-center img { height: 40px; }

.divider {
  display: flex; align-items: center; gap: .75rem;
  color: var(--ink-faint); font-size: .8125rem; margin: 1.25rem 0;
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 0; border-bottom: 1px solid var(--line);
}
.checklist li:last-child { border-bottom: 0; }
.checklist .tick {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px;
  display: grid; place-items: center;
  font-size: .75rem; font-weight: 700;
  background: var(--navy-100); color: var(--ink-faint);
}
.checklist .tick.done { background: var(--ok); color: #fff; }

.provider { border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: 1rem; overflow: hidden; }
.provider > summary {
  padding: 1rem 1.25rem; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: .75rem;
}
.provider > summary::-webkit-details-marker { display: none; }
.provider[open] > summary { border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.provider .body { padding: 1.25rem; }
.provider .name { font-family: var(--font-display); font-weight: 600; }

.article-body { font-size: 1.0625rem; line-height: 1.75; }
.article-body h2 { margin-top: 2rem; }
.article-body img { max-width: 100%; height: auto; border-radius: var(--radius); }

@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; }
  .nav { gap: .875rem; }
  .nav a { font-size: .875rem; }
  main { padding: 1.5rem 0 1rem; }
  h1 { font-size: 1.75rem; }
  table { font-size: .875rem; }
}

/* ------------------------------------------------------- share sheet */

/* Determinate progress, for work whose stages are known. The profile
   import uses an indeterminate slider instead, because that one cannot
   estimate how far along it is. */
.meter {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--navy-100); margin: 1rem 0;
}
.meter-fill {
  height: 100%; width: 8%; border-radius: 999px;
  background: var(--orange); transition: width .5s ease;
}

/* A grid of platform renditions. Fixed minimum rather than a fixed count,
   so it reflows from a phone to a wide screen without breakpoints. */
.tiles {
  display: grid; gap: 1rem; margin-top: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.tile { margin: 0; }
.tile img {
  width: 100%; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--bg-soft);
  display: block;
}
.tile figcaption {
  font-size: .78rem; line-height: 1.45; margin-top: .45rem;
}
.tile figcaption strong { text-transform: capitalize; }

.card-bad {
  border-color: color-mix(in srgb, var(--bad) 35%, var(--line));
  background: color-mix(in srgb, var(--bad) 5%, var(--bg));
}

/* --------------------------------------------------- channel picker */

.channel-grid {
  display: grid; gap: .5rem; margin: 1rem 0 .75rem;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.channel {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .6rem .7rem; border: 1px solid var(--line);
  border-radius: var(--radius); cursor: pointer;
  background: var(--bg); transition: border-color .12s, background .12s;
}
.channel:hover { border-color: var(--navy-300, var(--ink-faint)); }
/* :has lets the ticked state show on the whole tile rather than just the box.
   Browsers without it simply keep the default border -- the checkbox itself is
   still the source of truth, so nothing is lost. */
.channel:has(input:checked) {
  border-color: var(--orange); background: var(--orange-100);
}
.channel input { margin-top: .15rem; flex: none; }
.channel span { font-size: .88rem; line-height: 1.35; }
.channel em { display: block; font-size: .75rem; font-style: normal; }

/* Unread notification count in the nav, and the unread row marker. */
.pip {
  display: inline-block; min-width: 1.1rem; padding: 0 .3rem;
  margin-left: .2rem; border-radius: 999px;
  background: var(--orange); color: #fff;
  font-size: .7rem; font-weight: 700; line-height: 1.35rem;
  text-align: center; vertical-align: text-top;
}
.card-unread { border-left: 3px solid var(--orange); }

/* The one action on Connections that has to happen before the first call.
   Lifted out of the stack of credential forms so it does not read as another
   optional integration. */
.card-feature {
  border-color: var(--orange);
  background: linear-gradient(180deg,
              var(--orange-100) 0%, var(--bg) 60%);
}

/* ------------------------------------------------------------ dashboard */

/* Setup checklist. Numbered while outstanding, ticked when done, so progress
   is visible without a progress bar pretending to be precise. */
.setup { list-style: none; margin: 0; padding: 0; }
.setup li {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem 0; border-top: 1px solid var(--line);
}
.setup li:first-child { border-top: 0; }
.setup li > div { flex: 1; min-width: 0; }
.setup .tick {
  flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .78rem; font-weight: 700;
  background: var(--navy-100); color: var(--ink-muted);
}
.setup li.done .tick { background: var(--ok); color: #fff; }
.setup li.done > div strong { color: var(--ink-muted); }

/* Article grid. auto-fill with a sensible minimum gives three across on a
   desktop and one on a phone without a single media query. */
.cards {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
.story-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--bg); overflow: hidden;
  transition: box-shadow .15s, transform .15s;
}
.story-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.story-art {
  display: block; aspect-ratio: 1200 / 627; background: var(--bg-soft);
  overflow: hidden;
}
.story-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-art-empty {
  display: grid; place-items: center; height: 100%;
  font-size: .78rem; color: var(--ink-faint);
}
.story-body { padding: .85rem 1rem; flex: 1; }
.story-body h3 { font-size: 1rem; line-height: 1.35; margin: 0 0 .35rem; }
.story-body h3 a { color: var(--ink); text-decoration: none; }
.story-body h3 a:hover { text-decoration: underline; }
.story-body p { margin: 0; display: -webkit-box; -webkit-line-clamp: 3;
                -webkit-box-orient: vertical; overflow: hidden; }
.story-share {
  display: flex; align-items: center; gap: .35rem;
  padding: .6rem 1rem; border-top: 1px solid var(--line);
  background: var(--bg-soft);
}
.share-dot {
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: var(--navy-900); color: #fff;
  font-size: .74rem; font-weight: 700; text-decoration: none;
  transition: background .12s;
}
.share-dot:hover { background: var(--orange); }

/* The story picker. <dialog> gives focus trapping and Esc for free. */
.modal {
  border: 0; border-radius: var(--radius-lg); padding: 1.5rem;
  max-width: 640px; width: calc(100% - 2rem);
  box-shadow: var(--shadow); color: var(--ink); background: var(--bg);
}
.modal::backdrop { background: rgba(7, 27, 65, .45); }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem;
}
.pick {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: .9rem; border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: .6rem;
}
.pick:hover { border-color: var(--orange); }

/* The setup checklist reads as a sticky note, not a marketing banner: it is a
   list of chores that disappears once they are done. Amber rather than orange
   so it does not compete with the accent colour used for real actions. */
:root {
  --task-bg:   #FFFAEB;
  --task-line: #F5D98B;
  --task-ink:  #6B4E00;
}
.card-tasks {
  background: var(--task-bg);
  border-color: var(--task-line);
  padding: .9rem 1.1rem;
}
.card-tasks h2 { color: var(--task-ink); }
.card-tasks .setup li {
  padding: .5rem 0;
  border-top-color: color-mix(in srgb, var(--task-line) 55%, transparent);
}
.card-tasks .setup li strong { font-size: .92rem; }
.card-tasks .setup .tick {
  width: 1.4rem; height: 1.4rem; font-size: .72rem;
  background: color-mix(in srgb, var(--task-line) 60%, #fff);
  color: var(--task-ink);
}
.card-tasks .setup li.done .tick { background: var(--ok); color: #fff; }

/* Talking points in the pre-call brief. */
.points { margin: 0; padding-left: 1.1rem; }
.points li { margin-bottom: .45rem; line-height: 1.45; }
.modal h4 {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-muted); font-weight: 700;
}

/* Save-for-later star. Outline until saved, filled after, so the state is
   readable without a label next to every row. */
.bookmark {
  flex: none; width: 1.9rem; height: 1.9rem; margin-top: .1rem;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--bg); color: var(--ink-faint);
  font-size: .95rem; line-height: 1; cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.bookmark:hover { color: var(--orange); border-color: var(--orange); }
.bookmark.on {
  color: #fff; background: var(--orange); border-color: var(--orange);
}
.bookmark:disabled { opacity: .5; cursor: default; }

/* Country picker beside the number. The select is sized to its content so a
   long country name does not squeeze the field people actually type in. */
.phone-row { display: flex; gap: .5rem; }
.phone-row .phone-country { flex: 0 0 auto; max-width: 15rem; width: auto; }
.phone-row input[type="tel"] { flex: 1; min-width: 0; }
@media (max-width: 30rem) {
  .phone-row { flex-direction: column; }
  .phone-row .phone-country { max-width: none; }
}

/* Current section in the nav: bold, with an orange marker in front. The
   marker is a pseudo-element so it needs no extra markup and is skipped by
   screen readers, which get aria-current instead. */
.nav a.here {
  font-weight: 700;
  color: var(--ink);
}
.nav a.here::before {
  content: "›";
  color: var(--orange);
  font-weight: 700;
  margin-right: .25rem;
}

/* ------------------------------------------------------- daily briefing */

/* Two columns on a wide screen, one on anything narrower. The sidebar is
   fixed-width rather than a fraction so the working column does not shrink
   as the window does -- the briefing is the part that should give way. */





.brief-group h3 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); font-weight: 700; margin: 0 0 .55rem;
}
.brief-item {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .4rem 0; text-decoration: none; color: inherit;
}
.brief-item:hover .brief-title { color: var(--orange-600); }

.brief-text { min-width: 0; }
.brief-title {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; font-size: .82rem; line-height: 1.35;
}
.brief-meta {
  display: block; font-size: .7rem; color: var(--ink-faint); margin-top: .15rem;
}
/* A paid placement is visually distinct as well as labelled, so it cannot be
   mistaken for editorial at a glance. */
.brief-item.sponsored {
  background: var(--orange-100); border-radius: var(--radius);
  padding: .5rem; margin: .2rem -.25rem;
}
.tag-sponsored {
  display: inline-block; padding: 0 .3rem; border-radius: 3px;
  background: var(--orange); color: #fff;
  font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; vertical-align: 1px;
}

/* Headline numbers in the sponsor portal. */
.stats {
  display: grid; gap: .8rem; margin: 1.2rem 0;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
}
.stat {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem .9rem; background: var(--bg);
}
.stat-n {
  display: block; font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--ink);
}
.stat-l {
  display: block; font-size: .72rem; color: var(--ink-faint);
  margin-top: .2rem;
}

/* ------------------------------------------------- dashboard grid layout */

/* One column on a phone. On a wide screen: a full-width row across the top,
   then the working content in the left two columns and the briefing down the
   right, spanning both rows. */
.dash-grid { display: grid; gap: 1.25rem; align-items: start; }

/* The two columns are their own grid rather than cells borrowed from the
   outer one. Auto-placement never moves backwards: with the sidebar taking
   column 3 of a row, the cursor could not return to columns 1-2 of that same
   row, so the working content was pushed a row down and sat below the
   briefing's top edge. Two items, two columns, one row -- nothing to guess.
   It also means DOM order is the natural order, so the phone layout needs no
   `order` rule to undo a desktop trick. */
.dash-body { display: grid; gap: 1.25rem; }
@media (min-width: 64rem) {
  /* Two explicit rows. The picks and the sidebar sit in row 1 and both
     STRETCH to it, so their bottoms line up whichever is taller -- a shared
     min-height cannot do that, because the taller one is decided by content.
     Everything else sits in row 2 under the picks. */
  .dash-body {
    grid-template-columns: minmax(0, 1fr) 20rem;
    grid-template-rows: auto auto;
  }
  .picks-band { grid-column: 1; grid-row: 1; }
  .dash-side  { grid-column: 2; grid-row: 1; }
  .dash-col   { grid-column: 1; grid-row: 2; }
  .saved-band { grid-column: 2; grid-row: 2; }
}
.dash-full, .dash-body, .dash-col, .dash-side { min-width: 0; }

@media (min-width: 64rem) {
  .dash-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 20rem;
  }
  .dash-full { grid-column: 1 / -1; }     /* interview me now, setup, errors */
  .dash-body { grid-column: 1 / -1; }
}

.dash-col, .dash-side {
  display: flex; flex-direction: column; min-width: 0;
}
/* No align-self here: stretching is exactly what lines the two bottoms up. */
.picks-band { display: flex; flex-direction: column; min-width: 0; }
.dash-col { gap: 1.5rem; }
.dash-side { gap: 1rem; }
.dash-side .card { margin: 0; --pad-y: .9rem; --pad-x: 1rem; }
.dash-side h2 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); font-weight: 700; margin: 0 0 .6rem;
}

/* Sponsored placements live in their own block, visually separate from
   editorial rather than mixed into it. Harder to mistake for a story, which
   is the point. */
.card-sponsored {
  border-color: var(--orange);
  background: linear-gradient(180deg, var(--orange-100) 0%, var(--bg) 70%);
}
.card-sponsored h2 { color: var(--orange-600); }

/* Every thumbnail occupies the same box whether or not the image loads, is
   square, is a panorama, or 404s. The wrapper is what holds the size -- an
   <img> that fails to load collapses, and the row would otherwise reflow. */
.thumb {
  flex: none; width: 64px; height: 48px; border-radius: 6px;
  overflow: hidden; background: var(--bg-soft); display: block;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* "Talk about this" sits under its story rather than beside it: the row is
   already tight, and a second control on the same line makes both harder to
   hit on a phone. */
.brief-talk { margin: -.15rem 0 .5rem 76px; }
.brief-talk .btn { font-size: .7rem; padding: .15rem .5rem; }

/* Sponsored and the first feed read as one block: the paid item is still in
   its own labelled card above, but the seam between them is closed so the
   sidebar starts with one unit rather than two thin ones. */
.card-sponsored { margin-bottom: 0 !important; border-bottom: 0;
                  border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* The feed headers -- Top news, Tech, Entertainment, Sport, News of the weird
   -- are scalloped into the top of their card: a dark band pulled out to the
   card's edges by the width of its padding, then given that padding back so
   the text still lines up with the stories beneath it. The top corners match
   the card's own radius, less the 1px border it sits inside, or a hairline of
   card shows through the curve. */
.brief-card > h2:first-child {
  margin: calc(var(--pad-y) * -1) calc(var(--pad-x) * -1) 0.9rem;
  padding: 0.55rem var(--pad-x);
  background: var(--band, var(--navy-800));
  color: #fff;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
/* Top news sits welded under a sponsored card, so its top edge is square and
   its header has to be square with it. */
.brief-joined > h2:first-child { border-radius: 0; }

/* A colour per topic, so five stacked feeds read as five things rather than
   one long list. Every one of these was checked against white text at 4.5:1 or
   better -- the brand orange is deliberately absent: it comes out at 3.79:1,
   and it is the action colour, so a header wearing it competes with buttons.
   News keeps the navy, which makes it the anchor the others vary from. */
.brief-card[data-cat="news"]          { --band: var(--navy-800); }
.brief-card[data-cat="tech"]          { --band: #0B5563; }
.brief-card[data-cat="entertainment"] { --band: #5B2A86; }
.brief-card[data-cat="sports"]        { --band: #1B6B3A; }
.brief-card[data-cat="weird"]         { --band: #9B2242; }
/* Not a news topic, so it takes a warm colour none of the feeds use. */
.brief-card[data-cat="saved"]         { --band: #7A4A12; }

.brief-joined { border-top-left-radius: 0; border-top-right-radius: 0;
                border-top: 1px dashed var(--line); }

/* Three article cards across, rather than however many happen to fit. */
@media (min-width: 64rem) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .story-body h3 { font-size: .92rem; }
  .story-body { padding: .7rem .8rem; }
  .story-share { padding: .5rem .8rem; }
}

/* ==========================================================================
   Creator dashboard
   ========================================================================== */

/* The hero carries the one action that matters. Dark, so it reads as a
   surface rather than another card, and so the accent button is the brightest
   thing on the page. */
.hero {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem;
  padding: 1.6rem 1.8rem;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 100% 0%,
                    rgba(244, 106, 26, .22) 0%, transparent 55%),
    var(--navy-900);
  color: #fff;
}
.hero-body { flex: 1 1 22rem; min-width: 0; }
.hero h1 {
  font-size: 1.5rem; line-height: 1.2; margin: 0 0 .4rem; color: #fff;
}
.hero-sub { margin: 0 0 1.1rem; color: rgba(255, 255, 255, .78); font-size: .92rem; }
.hero-note { margin: .8rem 0 1rem; color: rgba(255, 255, 255, .62); font-size: .8rem; }
.hero-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.hero .meter { background: rgba(255, 255, 255, .18); }

.btn-lg { font-size: .95rem; padding: .6rem 1.2rem; }

/* A quiet button that works on the dark hero as well as on white. */
.btn-ghost {
  background: transparent; color: inherit;
  border: 1px solid currentColor; opacity: .75;
}
.btn-ghost:hover { opacity: 1; }

.hero-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem 1.6rem; margin: 0; flex: 0 0 auto;
}
.hero-stats div { margin: 0; }
.hero-stats dt {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .07em;
  color: rgba(255, 255, 255, .55);
}
.hero-stats dd {
  margin: .1rem 0 0; font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 700; color: #fff;
}
.hero-stats dd a { color: #fff; text-decoration: none; border-bottom: 1px dotted; }

/* Section headings sit above their content rather than inside a card, so the
   page reads as sections rather than a stack of boxes. */
.sec-head { margin: .4rem 0 .7rem; }
.sec-head h2 { margin: 0; font-size: 1rem; }

/* Today's suggestions. Two across in the wide column, one on a phone. */
.picks {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.pick-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--bg); padding: .95rem 1rem;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.pick-card:hover {
  border-color: var(--navy-300, var(--ink-faint));
  box-shadow: var(--shadow); transform: translateY(-1px);
}
.pick-card h3 { font-size: .95rem; line-height: 1.35; margin: .1rem 0 .35rem; }
.pick-card p {
  font-size: .8rem; line-height: 1.45; color: var(--ink-muted); margin: 0 0 .8rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pick-meta {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-faint); display: flex; gap: .35rem; align-items: center;
  margin-bottom: .3rem;
}
.pick-meta .src { font-weight: 700; }
.pick-actions {
  margin-top: auto; display: flex; align-items: center; gap: .5rem;
}
/* A paid option is offered on the same footing as the rest, and marked so the
   choice is an informed one rather than a disguised one. */
.pick-card.is-sponsored {
  border-color: var(--orange);
  background: linear-gradient(180deg, var(--orange-100) 0%, var(--bg) 60%);
}

.saved-row {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem 0; border-top: 1px solid var(--line);
}
.saved-row:first-child { border-top: 0; }

/* Actions sit under their story, matching "Talk about this" in the feed cards
   above -- there is no room beside a title in a 20rem column. */
.saved-actions { display: flex; gap: .35rem; margin-top: .3rem; }
.saved-actions .btn { font-size: .7rem; padding: .15rem .5rem; }

.empty { text-align: center; padding: 2rem 1.5rem; }
.empty h3 { margin: 0 0 .4rem; font-size: 1rem; }
.empty p { max-width: 34rem; margin: 0 auto 1.1rem; }

@media (max-width: 40rem) {
  .hero { padding: 1.2rem; }
  .hero h1 { font-size: 1.25rem; }
  .hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
  .hero-stats dd { font-size: 1rem; }
}

/* Two across in the wide column, so four cards make an even 2x2 rather than
   a row of three and an orphan. */
@media (min-width: 64rem) {
  .picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The lighter categories, below the working content: three across on a wide
   screen, stacking down to one. They read as a break at the bottom of the
   page rather than as competition beside the thing you came to do. */
.unwind {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.unwind .card { margin: 0; --pad-y: .85rem; --pad-x: .9rem; }
/* Only the narrowest four-across band drops the picture; with the full page
   width there is room for it again. */
@media (min-width: 58rem) and (max-width: 68rem) {
  .unwind .thumb { display: none; }
}
.unwind h2 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); font-weight: 700; margin: 0 0 .6rem;
}

/* Saved and Your articles get a tinted panel so the working sections read as
   distinct blocks rather than a flat run of white. Kept very light: this is
   grouping, not emphasis, and anything stronger would compete with the hero. */
.panel {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.2rem 1.3rem;
}
.panel > .sec-head { margin-top: 0; }
/* Cards inside a tinted panel go white, so they still lift off it. */
.panel .card,
.panel .story-card { background: var(--bg); }

/* Four across, spanning the full page rather than squeezed into the content
   column. Steps down to two, then one. */
@media (min-width: 58rem) {
  .unwind { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 34rem) and (max-width: 57.99rem) {
  .unwind { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Search sits under the hero buttons: a second way in, not a competing one. */
.hero-search { display: flex; gap: .5rem; margin-top: .9rem; }
.hero-search input {
  flex: 1; min-width: 0; padding: .45rem .7rem;
  border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .1); color: #fff; font-size: .85rem;
}
.hero-search input::placeholder { color: rgba(255, 255, 255, .5); }
.hero-search input:focus {
  outline: none; border-color: var(--orange);
  background: rgba(255, 255, 255, .16);
}
.hero-search input:disabled { opacity: .5; }

/* The same search, repeated at the top of the picker. */
.search-row { display: flex; gap: .5rem; margin-bottom: 1rem; }
.search-row input { flex: 1; min-width: 0; }

/* ---------------------------------------------------------------- symmetry */

/* The four picks and the news card beside them share a height, so the top of
   the page reads as two blocks rather than two ragged columns.
   `min-height` rather than `height`: they match in the ordinary case, and a
   long headline pushes its own block taller instead of being clipped. Losing
   symmetry occasionally is a better failure than losing a word. */
:root { --block-h: 21rem; }

@media (min-width: 64rem) {
  /* The grid fills the row; the cards fill the grid. Two equal rows so the
     four cards share whatever height the row turns out to be. */
  .picks {
    flex: 1;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  /* The sidebar's last card takes up the slack, so its bottom edge is the
     bottom of the row rather than wherever its content happened to end. */
  .dash-side > .card:last-child { flex: 1; }
}

/* Two lines of summary keeps a pick card's natural height under the shared
   one, which is what makes the match hold without forcing it. */
.pick-card p { -webkit-line-clamp: 2; }

/* My Voice: three ways to give the same thing, so they are stacked rather than
   competing for one row. */
.voice-add { display: grid; gap: 1rem; margin-top: 1rem; }
.voice-add form { display: grid; gap: .4rem; }
.voice-add label { font-size: .8rem; color: var(--ink-muted); }
.voice-add button { justify-self: start; }

/* Boost: the terms are the point of the page, so they are readable rather than
   tucked into a scrolling sliver. */
.terms-box {
  white-space: pre-wrap; font-family: inherit; font-size: .85rem;
  line-height: 1.55; background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem; margin: 0 0 1rem;
  max-height: 26rem; overflow-y: auto;
}
.dest-grid {
  display: grid; gap: .5rem; margin: .8rem 0 1rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.tag {
  display: inline-block; padding: 0 .35rem; border-radius: 3px;
  background: var(--bg-soft); color: var(--ink-muted);
  font-size: .62rem; font-weight: 700; text-transform: uppercase;
}
.tag-live, .tag-posted { background: #1B6B3A; color: #fff; }
.tag-failed { background: #9B2242; color: #fff; }
.tag-prepared, .tag-quiet { background: var(--navy-100); color: var(--navy-800); }

/* The rocket. Sized to the text rather than left at whatever the emoji font
   fancies, and nudged down a hair so it sits on the baseline with the word. */
.rocket {
  font-size: .92em; margin-right: .3em; line-height: 1;
  position: relative; top: .05em;
}
.btn .rocket { margin-right: .35em; }

/* The publishing status under each share channel. Small, and always present
   so a channel that cannot publish says so rather than looking unfinished. */
.pub-state { display: block; font-size: .72rem; margin-top: .25rem; }
.pub-note {
  display: block; color: var(--ink-faint); font-size: .68rem;
  margin-top: .15rem; line-height: 1.4;
}

/* Channel logos. Each carries its own brand colour through currentColor, so a
   glyph and its tint can never drift apart. */
.chan-name { display: flex; align-items: center; gap: .45rem; }
.chan-logo { width: 1.05rem; height: 1.05rem; flex: none; fill: currentColor; }

.chan-linkedin  { color: #0A66C2; }
.chan-x         { color: #000000; }
.chan-facebook  { color: #0866FF; }
.chan-instagram { color: #E4405F; }
.chan-threads   { color: #000000; }
.chan-bluesky   { color: #0285FF; }
.chan-mastodon  { color: #6364FF; }
.chan-reddit    { color: #FF4500; }
.chan-pinterest { color: #BD081C; }
.chan-tumblr    { color: #36465D; }
.chan-whatsapp  { color: #25D366; }
.chan-telegram  { color: #26A5E4; }
.chan-email     { color: var(--ink-muted); }

/* Both black marks vanish on a dark background; give them the ink colour so
   they follow the theme rather than disappearing into it. */
@media (prefers-color-scheme: dark) {
  .chan-x, .chan-threads { color: var(--ink); }
}