/* Champion: the look of the October mock screens (Platform Mock Screens, Oct 6):
   dark green header, cream ground, IBM Plex Sans with Plex Mono for numbers, white
   cards with soft borders, colored chips and thin progress bars. */

:root {
  --ink: #1B2420;
  --ink-2: #3F4A44;
  --muted: #55605A;
  --ground: #F5F4EF;
  --card: #FFFFFF;
  --line: #DAD8CF;
  --line-soft: #ECEAE3;
  --field: #C9C6BB;
  --head: #17382C;
  --head-on: #2C5A48;
  --green: #1E5A43;
  --green-dark: #123B2C;
  --green-tint: #F1F6F3;
  --green-tint-ink: #1B3A2E;
  --blue: #2F5A8A;
  --blue-tint: #EEF3F9;
  --blue-tint-ink: #1C3554;
  --red: #8E1B1B;
  --gold: #E9B872;
  --note: #FFF8E6;
  --note-line: #E8D6A6;
  --note-ink: #4A3A10;
  --sans: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, 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; font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--ground); }
a { color: var(--green); }
a:hover { color: var(--green-dark); }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- the header --------------------------------------------------------- */
.top { background: var(--head); color: #FFFFFF; }
.top-in { max-width: 1360px; margin: 0 auto; padding: 0 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; min-height: 64px; }
.brand { font-weight: 700; font-size: 20px; letter-spacing: 0.02em; color: #FFFFFF; text-decoration: none; }
.brand:hover { color: #FFFFFF; }
.nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; }
.nav a { color: #FFFFFF; text-decoration: none; font-size: 15px; font-weight: 500; padding: 10px 14px; border-radius: 6px; }
.nav a:hover { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; }
.nav a[aria-current="page"] { background: var(--head-on); }
.top-right { display: flex; align-items: center; gap: 12px; }
.top-search input { width: 260px; max-width: 100%; height: 40px; border-radius: 6px; border: 1px solid #3C6656; background: #21483A; color: #FFFFFF; padding: 0 12px; font: inherit; font-size: 14px; }
.top-search input::placeholder { color: #B9CCC3; }
.top-feedback { color: #FFFFFF; text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 12px; border: 1px solid #3C6656; border-radius: 6px; }
.top-feedback:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }
.me-menu { position: relative; }
.me-menu > summary { list-style: none; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: var(--head); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.me-menu > summary::-webkit-details-marker { display: none; }
.me-menu[open] > summary { box-shadow: 0 0 0 3px rgba(233, 184, 114, 0.45); }
.me-panel { position: absolute; right: 0; top: 48px; z-index: 20; width: 240px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(23, 56, 44, 0.18); padding: 8px; display: flex; flex-direction: column; }
.me-panel .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.me-panel .who strong { display: block; }
.me-panel a, .me-panel button { display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: 6px; color: var(--ink); text-decoration: none; font: inherit; font-size: 14px; background: none; border: 0; cursor: pointer; }
.me-panel a:hover, .me-panel button:hover { background: var(--ground); color: var(--ink); }
.me-panel form { margin: 0; border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 4px; }
.me-panel .version { padding: 6px 10px 2px; color: var(--muted); font-size: 12px; }

/* --- the page ----------------------------------------------------------- */
.page { max-width: 1360px; margin: 0 auto; padding: 28px 32px 56px; display: flex; flex-direction: column; gap: 20px; }
.page > * { margin-top: 0; margin-bottom: 0; }
h1 { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
h2 { margin: 0; font-size: 18px; font-weight: 700; }
p { margin: 0; }
.lede { font-size: 15px; color: var(--muted); }
.titlebar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.titlebar > div { display: flex; flex-direction: column; gap: 6px; }
.crumbs { font-size: 14px; color: var(--muted); }
.crumbs a { text-decoration: none; }

/* --- cards -------------------------------------------------------------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.card.flush { padding: 0; gap: 0; overflow: hidden; }
.band { padding: 14px 20px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; color: #FFFFFF; }
.band h2 { font-size: 20px; color: #FFFFFF; }
.band .count { font-family: var(--mono); font-weight: 500; }
.band .sub { font-size: 13px; }
.band.green { background: var(--green); }
.band.green .sub { color: #D7E7DF; }
.band.blue { background: var(--blue); }
.band.blue .sub { color: #DCE6F2; }
.band.dark { background: var(--ink); }
.band.dark .sub { color: #CFD6D2; }
.band.small h2 { font-size: 18px; }
.item { padding: 14px 20px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 8px; }
.band + .item { border-top: 0; }
.card .rowline { border-top: 1px solid var(--line-soft); padding-top: 10px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; }
.card .rowline:first-of-type { border-top: 1px solid var(--line-soft); }
.card-foot { border-top: 1px solid var(--line-soft); padding: 12px 20px; font-size: 14px; color: var(--muted); }
.card-foot.tint { background: #F7F7F3; }
.empty { padding: 14px 20px; color: var(--muted); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(560px, 100%), 1fr)); gap: 20px; align-items: start; }
.cols { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.cols > .col { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* --- a project as a card on the dashboard ---------------------------------- */
.pcard-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pcard-head .num { font-family: var(--mono); font-size: 13px; color: var(--muted); text-decoration: none; }
.pcard-head .name { font-size: 16px; font-weight: 700; flex: 1 1 200px; color: var(--ink); text-decoration: none; }
.pcard-head .name:hover { color: var(--green); text-decoration: underline; }
.meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.next { font-size: 14px; background: var(--green-tint); border-radius: 6px; padding: 8px 10px; color: var(--green-tint-ink); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.next.blue { background: var(--blue-tint); color: var(--blue-tint-ink); }
.next.grey { background: #F2F1EC; color: var(--ink-2); }
.next a { color: inherit; }
.next > span:first-child { flex: 1 1 260px; min-width: 0; }
.next .when { font-family: var(--mono); font-size: 13px; white-space: nowrap; margin-left: auto; }
.lastnote { font-size: 13px; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.lastnote .mono { margin-right: 4px; }

/* --- chips, bars -------------------------------------------------------- */
.chip { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.chip.lg { font-size: 13px; }
.chip.rank { font-weight: 700; }
a.chip { text-decoration: none; }
.chip.p1 { background: #8E1B1B; color: #FFFFFF; }
.chip.p2 { background: #F7C6D0; color: #5C1A2A; }
.chip.p3 { background: #F9D9B8; color: #5A3412; }
.chip.p4 { background: #F5E6A0; color: #4F4100; }
.chip.p5 { background: #E2E2DE; color: #3B3B38; }
.chip.unranked { background: var(--card); color: var(--muted); border: 1px dashed var(--field); padding: 1px 7px; }
.chip.led { background: var(--line-soft); color: var(--ink-2); }
.chip.stage-concept { background: #E2E2DE; color: #3B3B38; }
.chip.stage-design { background: #D5E5F4; color: #1F4466; }
.chip.stage-construction { background: #C9D2DC; color: #26323E; }
.chip.stage-maintenance { background: #D3ECE6; color: #1C4A40; }
.chip.status-active { background: #CFE8D6; color: #1D5233; }
.chip.status-on_hold { background: #F5E6A0; color: #5A4500; }
.chip.status-maintained_by_others { background: #E2E2DE; color: #3B3B38; }
.chip.status-complete { background: #D5E5F4; color: #1F4466; }
.chip.grey { background: #ECEAE3; color: #3B3B38; }
.chip.yellow { background: #F5E6A0; color: #5A4500; }
.chip.green { background: #CFE8D6; color: #1D5233; }
.chip.red { background: #F4C9C5; color: #8E1B1B; }
.tiers { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.tiers .chip { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; font-size: 13px; }
.tiers .chip .mono { font-weight: 600; }
.tiers .chip .flag { font-weight: 500; }
.bar { display: inline-flex; align-items: center; gap: 6px; }
.bar .track { display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.bar .track.wide { width: 120px; }
.bar .fill { display: block; height: 8px; }
.bar .fill.low { background: #B3261E; }
.bar .fill.mid { background: #C96A12; }
.bar .fill.high { background: #2E7D4F; }
.bar .mono { font-size: 13px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2E7D4F; }
.dot.off { background: #C9C6BB; }

/* --- buttons, pills, tabs --------------------------------------------------- */
.button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 6px; border: 1px solid var(--green); background: var(--green); color: #FFFFFF; font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.button:hover, .btn:hover { background: var(--green-dark); border-color: var(--green-dark); color: #FFFFFF; }
.button.secondary, .btn.secondary { background: #FFFFFF; color: var(--ink); border-color: var(--field); }
.button.secondary:hover, .btn.secondary:hover { background: var(--ground); color: var(--ink); }
.btn.small { height: 36px; padding: 0 12px; font-size: 13px; }
.btn.outline-blue { background: #FFFFFF; color: var(--blue); border-color: var(--blue); }
.btn.outline-blue:hover { background: var(--blue-tint); color: var(--blue); }
.btn.outline-green { background: #FFFFFF; color: var(--green); border-color: var(--green); }
.btn.outline-green:hover { background: var(--green-tint); color: var(--green); }
.btn.white { background: #FFFFFF; color: var(--green); border-color: #FFFFFF; font-weight: 700; }
.btn.white:hover { background: #F1F6F3; color: var(--green); }
button.link { background: none; border: 0; color: var(--green); font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pills a { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--field); background: #FFFFFF; color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.pills a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); }
.tabs a { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-bottom: 3px solid transparent; color: var(--ink-2); font-size: 15px; font-weight: 600; text-decoration: none; }
.tabs a[aria-current="page"] { border-bottom-color: var(--green); color: var(--green); }
.tabs .mono { font-weight: 500; margin-left: 6px; color: var(--muted); font-size: 13px; }

/* --- banners ------------------------------------------------------------ */
.banner { border-radius: 10px; padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; color: #FFFFFF; }
.banner.green { background: var(--green); }
.banner.blue { background: var(--blue); }
.banner.grey { background: #5B6560; }
.banner .what { display: flex; flex-direction: column; gap: 4px; flex: 1 1 520px; }
.banner .kicker { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: #CFE3D8; }
.banner.blue .kicker { color: #DCE6F2; }
.banner.grey .kicker { color: #E2E6E3; }
.banner .say { font-size: 18px; font-weight: 600; line-height: 1.4; }
.links-row { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 14px; }
.links-row span { display: inline-flex; align-items: center; gap: 6px; }
.notice { background: var(--note); border: 1px solid var(--note-line); border-radius: 8px; padding: 12px 16px; font-size: 14px; line-height: 1.5; color: var(--note-ink); }

/* --- the project page --------------------------------------------------- */
.ptitle { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; }
.ptitle .left { display: flex; flex-direction: column; gap: 10px; }
.ptitle .line1 { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ptitle .num { font-family: var(--mono); font-size: 18px; font-weight: 600; color: var(--green); }
.ptitle h1 { font-size: 34px; }
.ptitle .chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.ptitle .who { color: var(--ink-2); }
.ptitle .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dated { display: flex; gap: 14px; align-items: baseline; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.dated .when { font-family: var(--mono); font-weight: 600; font-size: 14px; min-width: 64px; color: var(--green); }
.dated .when.late { color: var(--red); }
.dated .what { font-size: 15px; line-height: 1.45; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; min-width: 0; }
.dated .what .chip { align-self: flex-start; }
.history-body { white-space: pre-wrap; }

/* --- My list ------------------------------------------------------------- */
.task { padding: 14px 20px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.band + .task { border-top: 0; }
.task .tick { margin: 0; }
.task .tick button { width: 28px; height: 28px; border-radius: 6px; border: 2px solid var(--green); background: #FFFFFF; cursor: pointer; padding: 0; display: block; }
.task .tick button:hover { background: var(--green-tint); }
.steps { list-style: none; margin: 0 0 12px; padding: 0; }
.steps .task { padding: 8px 0; gap: 12px; }
.steps .tick button.on { background: var(--green); color: #FFFFFF; font-weight: 700; }
.steps .mark { width: 28px; text-align: center; font-weight: 700; color: var(--green); }
.task .body { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.task .title { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink); text-decoration: none; }
.task .title:hover { color: var(--green); text-decoration: underline; }
.task .sub { font-size: 13px; color: var(--muted); }
.task .sub a { color: var(--muted); }
.task .late { color: var(--red); font-weight: 600; }
.line { padding: 12px 20px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; }
.band + .line { border-top: 0; }
.line .body { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.line .title { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); text-decoration: none; }
.line .title:hover { color: var(--green); text-decoration: underline; }
.line .sub { font-size: 13px; color: var(--muted); }
.line .due { align-self: flex-start; font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--muted); }
.line .due.late { color: var(--red); }
.facts .late { color: var(--red); }

/* --- forms ---------------------------------------------------------------- */
input, select, textarea { font: inherit; font-size: 15px; color: var(--ink); background: #FFFFFF; border: 1px solid var(--field); border-radius: 6px; padding: 0 12px; min-width: 0; }
input:not([type="checkbox"]):not([type="radio"]), select { height: 44px; }
textarea { padding: 10px 12px; }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--green); vertical-align: middle; }
input:focus, select:focus, textarea:focus, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid rgba(30, 90, 67, 0.35); outline-offset: 1px; }
.form { display: grid; gap: 12px; max-width: 640px; }
.form label, .row label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.form label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.row > input[type="search"], .row > input[name="q"] { flex: 1 1 320px; }
.inline { display: inline; margin: 0; }
details > summary { cursor: pointer; color: var(--green); font-weight: 600; }
details.fold > summary { list-style: none; }
details.fold > summary::-webkit-details-marker { display: none; }
fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; display: grid; gap: 6px; }

/* --- tables and plain lists (people, reports, types and the rest) ------------- */
.card table, table.list { width: 100%; border-collapse: collapse; font-size: 14px; }
table.list th, .card table th { text-align: left; font-size: 13px; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); }
table.list td, .card table td { padding: 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.list td a, .card table td a { font-weight: 600; text-decoration: none; }
table.list tr.overdue td:first-child, .card table tr.overdue td:first-child { color: var(--red); font-weight: 600; }
.scroll { overflow-x: auto; }
ul.list { list-style: none; padding: 0; margin: 0; }
ul.list > li { padding: 12px 0; border-top: 1px solid var(--line-soft); }
ul.list > li:first-child { border-top: 0; }
ul.list a { color: var(--green); font-weight: 600; text-decoration: none; }
.card ul:not(.list):not(.activities) { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; font-size: 15px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.activities { list-style: none; padding: 0; margin: 0; }
.activities li { border-top: 1px solid var(--line-soft); padding: 10px 0; }
.activities li:first-child { border-top: 0; }

/* --- reports -------------------------------------------------------------- */
.report { overflow-x: auto; }
.report h1 { font-size: 26px; margin-bottom: 8px; }
.report h2 { font-size: 18px; margin: 20px 0 8px; }
.report p { margin: 8px 0; }
.report table { border-collapse: collapse; margin: 8px 0 16px; font-size: 14px; background: #FFFFFF; }
.report th, .report td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.report th { background: #F2F1EC; }

/* --- texts ---------------------------------------------------------------- */
.conversations li.new a { font-weight: 700; }
.texts { display: grid; gap: 8px; }
.text { max-width: 85%; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: #FFFFFF; white-space: pre-wrap; overflow-wrap: anywhere; }
.text.in { justify-self: start; }
.text.out { justify-self: end; background: var(--green-tint); }
.text.pending { border-style: dashed; }
.mail-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.said { white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback li > a { overflow-wrap: anywhere; }

/* --- signed out ------------------------------------------------------------- */
.signin { max-width: 520px; margin: 48px auto 0; }
.signin .card { padding: 28px; gap: 16px; }

/* --- My list ------------------------------------------------------------- */
.hello { display: flex; flex-direction: column; gap: 6px; }
.task .later { display: flex; align-items: center; gap: 8px; margin: 0; }
.task .later label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.task .later select { height: 40px; font-size: 14px; padding: 0 8px; }
.task .sub .chip.rank { padding: 1px 6px; border-radius: 4px; font-size: 12px; }
.card-foot.note { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--ink); }
.card-foot.note label { font-size: 14px; font-weight: 600; }
.card-foot.note input { flex: 1 1 360px; }
details.card.fold > summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; cursor: pointer; }
details.card.fold[open] > summary { margin-bottom: 14px; }
.form.wide { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); max-width: none; }
.form.wide .full { grid-column: 1 / -1; }

/* --- a phone ------------------------------------------------------------- */
@media (max-width: 720px) {
  .top-in { padding: 10px 16px; gap: 10px; }
  .nav { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 12px 6px; }
  .nav a { flex: 0 0 auto; }
  .top-right { margin-left: auto; }
  .top-search { display: none; }
  .page { padding: 20px 16px 40px; }
  h1, .ptitle h1 { font-size: 26px; }
  .band, .item, .task, .line, .card-foot, .empty { padding-left: 16px; padding-right: 16px; }
  .task .body { flex: 1 1 0; }
  .task .later { margin-left: 44px; }
  .card { padding: 16px; }
  .card.flush { padding: 0; }
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: 8px; }
}

/* --- the account menu's group label; People and Companies tabs ------------ */
.me-panel .group { display: block; padding: 10px 16px 2px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pills { display: flex; gap: 8px; margin: 4px 0 16px; }
.pills .pill { padding: 6px 14px; border: 1px solid var(--field); border-radius: 999px; text-decoration: none; color: var(--ink-2); font-size: 14px; font-weight: 500; }
.pills .pill.here { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }