/* PoliTrack app — ledger aesthetic on the lisa.locomotive.ca design system.
   Loads after assets/styles/main.css — reuses :root tokens, LedgerNew display,
   HelveticaNowDisplay body, hairline borders, #312DFB accent, #2A27E4 card. */

:root {
  --accent: var(--menu-color-bg);        /* #312DFB */
  --accent-deep: #2A27E4;                /* form-card blue */
  --flag: #DA382E;                       /* conflict/flag red */
  --party-d: #312DFB;
  --party-r: #DA382E;
  --party-i: #000000;
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --faint: color-mix(in srgb, var(--color) 45%, transparent);
}

/* reset bits the clone keeps in index.html's inline <style> — needed here too */
html { box-sizing: border-box; scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; }
[hidden] { display: none !important; }

body { min-height: 100svh; display: flex; flex-direction: column; }
a { color: inherit; }

/* ---------- header ---------- */
.app-nav {
  grid-column: 5/11;
  display: flex;
  gap: 1.5em;
  justify-content: flex-end;
  font-size: var(--font-size-medium);
  line-height: 1.2;
}
.app-nav a { text-decoration: none; }
.app-nav a.-current { text-decoration: underline; text-decoration-thickness: var(--border-size); text-underline-offset: .1em; }
.app-auth { grid-column: 11/13; justify-self: end; display: flex; align-items: center; gap: .75em; font-size: var(--font-size-medium); line-height: 1.2; min-width: 0; }
.app-auth .who { font-size: .55em; opacity: .65; max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-auth button, .app-auth a.app-signin { cursor: pointer; background: none; border: 0; color: inherit; font: inherit; padding: 0; text-decoration: none; }
.app-auth button:hover, .app-auth a.app-signin:hover { text-decoration: underline; text-decoration-thickness: var(--border-size); text-underline-offset: .1em; }

/* ---------- masthead ---------- */
.app-main { flex: 1; padding-top: var(--header-height); }
.masthead {
  padding: clamp(2.6667rem, 5.5556vw, 5.3333rem) var(--grid-margin) 0;
}
.masthead h1 {
  font-family: "LedgerNew", -apple-system, BlinkMacSystemFont, "avenir next", avenir, "segoe ui", "helvetica neue", helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  font-weight: 400;
  font-size: var(--font-size-h1);
  line-height: 1.05;
  margin: 0 0 .35em;
}
.masthead .rule { border-top: var(--border); }
.masthead-meta {
  display: flex; flex-wrap: wrap; gap: .5em 2em;
  justify-content: space-between;
  font-size: 1rem; line-height: 1.4;
  padding: .8em 0 1.2em;
  border-bottom: var(--border);
}
.masthead-meta .demo-tag { border: 1px solid color-mix(in srgb, var(--color) 30%, transparent); border-radius: 999px; padding: .15em .8em; font-size: .85em; }
.masthead-meta .src { opacity: .55; }

/* ---------- controls ---------- */
.controls {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.5rem 2.5rem;
  padding: 1.7333rem var(--grid-margin);
}
.controls .search { flex: 1 1 18rem; max-width: 34rem; }
.controls .search input {
  width: 100%;
  font: inherit; font-size: var(--font-size-h4);
  color: var(--color); background: transparent;
  border: 0; border-bottom: 1px solid var(--color);
  padding: .3333rem 0;
}
.controls .search input:focus { outline: none; border-bottom-width: 2px; margin-bottom: -1px; }
.controls .search input::placeholder { color: color-mix(in srgb, var(--color) 40%, transparent); }
.chips { display: flex; flex-wrap: wrap; gap: .4em; align-items: center; }
.chips .lbl { font-size: .8rem; opacity: .5; margin-right: .3em; }
.chip {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .8rem; line-height: 1.2;
  border-radius: 999px; padding: .5em 1.5em;
  background: var(--color-bg); color: var(--color);
  border: 1px solid color-mix(in srgb, var(--color) 20%, transparent);
  cursor: pointer;
  transition: background-color .15s var(--ease-out), color .15s var(--ease-out), border-color .15s var(--ease-out);
}
.chip:hover { border-color: var(--color); }
.chip.active { background: var(--color); color: var(--color-bg); border-color: var(--color); }

/* ---------- ledger table ---------- */
.ledger { margin: 0 var(--grid-margin); }
.ledger-head, .ledger-row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 3fr) minmax(0, 1.4fr) 5rem 5rem minmax(0, 3fr) 7.5rem;
  gap: 1.3333rem;
  align-items: baseline;
}
.ledger-head {
  font-size: .8rem; opacity: .5;
  padding: 0 0 .5em;
  border-bottom: var(--border);
}
.ledger-row {
  color: inherit; text-decoration: none;
  padding: 1.1em 0;
  border-top: 1px solid color-mix(in srgb, var(--color) 18%, transparent);
  transition: background-color .2s var(--ease-out);
  position: relative;
}
.ledger-row:hover { background: color-mix(in srgb, var(--color) 4%, transparent); }
.ledger-row .cell { min-width: 0; }
.cell-name {
  font-family: "LedgerNew", -apple-system, BlinkMacSystemFont, "avenir next", avenir, "segoe ui", "helvetica neue", helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  font-size: var(--font-size-h3); line-height: 1.1;
}
.cell-name small, .cell-latest small { display: block; font-family: "HelveticaNowDisplay", -apple-system, BlinkMacSystemFont, "avenir next", avenir, "segoe ui", "helvetica neue", helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; font-size: .8rem; opacity: .55; margin-top: .35em; line-height: 1.3; }
.cell-role { font-size: .95rem; opacity: .75; line-height: 1.35; }
.cell-num { font-size: var(--font-size-h5); font-variant-numeric: tabular-nums; }
.cell-num small { display: block; font-size: .72rem; opacity: .5; margin-top: .2em; }
.cell-latest { font-size: .95rem; line-height: 1.3; }
.cell-act { justify-self: end; }
.ptag { font-size: .95rem; font-weight: 400; }
.ptag-D { color: var(--party-d); }
.ptag-R { color: var(--party-r); }
.ptag-I { color: var(--party-i); }

.watch-btn {
  font-size: .8rem; line-height: 1.2;
  border-radius: 999px; padding: .5em 1.5em;
  background: var(--color-bg); color: var(--color);
  border: 1px solid color-mix(in srgb, var(--color) 30%, transparent);
  cursor: pointer; white-space: nowrap;
  transition: background-color .15s var(--ease-out), color .15s var(--ease-out);
}
.watch-btn:hover { border-color: var(--color); }
.watch-btn.on { background: var(--color); color: var(--color-bg); border-color: var(--color); }
.watch-btn.accent { border-color: var(--accent); color: var(--accent); }
.watch-btn.accent:hover, .watch-btn.accent.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.watch-btn[disabled] { opacity: .4; pointer-events: none; }

.empty-row { padding: 3rem 0; opacity: .55; font-size: var(--font-size-h4); border-top: 1px solid color-mix(in srgb, var(--color) 18%, transparent); }

/* ---------- profile ---------- */
.profile { margin: 0 var(--grid-margin); }
.back-link {
  display: inline-block; font-size: var(--font-size-medium);
  text-decoration: none; margin: 2rem 0 0;
}
.back-link:hover { text-decoration: underline; text-decoration-thickness: var(--border-size); text-underline-offset: .1em; }
.profile-head { padding: 1.5rem 0 0; }
.profile-head h2 {
  font-family: "LedgerNew", -apple-system, BlinkMacSystemFont, "avenir next", avenir, "segoe ui", "helvetica neue", helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  font-weight: 400; font-size: var(--font-size-h1); line-height: 1.05; margin: 0 0 .3em;
}
.profile-meta { display: flex; flex-wrap: wrap; gap: .5em 2em; align-items: center; font-size: var(--font-size-h5); padding-bottom: 1.4rem; border-bottom: var(--border); }
.profile-meta .watch-btn { font-size: .8rem; margin-left: auto; }

.statlist { counter-reset: stat; border-bottom: var(--border); margin-bottom: 2.5rem; }
.statlist .st {
  counter-increment: stat;
  display: grid; grid-template-columns: 3.5rem 1.2fr 3fr; gap: 1.3333rem;
  padding: 1em 0; border-top: 1px solid color-mix(in srgb, var(--color) 18%, transparent);
  align-items: baseline;
}
.statlist .st::before { content: counter(stat, decimal-leading-zero); font-size: .9rem; opacity: .4; }
.statlist .st .k { font-size: .95rem; opacity: .55; }
.statlist .st .v { font-size: var(--font-size-h4); line-height: 1.2; }
.statlist .st .v small { font-size: .8rem; opacity: .55; display: block; margin-top: .3em; }
.bar { display: inline-block; width: 12rem; max-width: 60%; height: .5em; border: 1px solid var(--color); vertical-align: middle; margin-right: .8em; }
.bar i { display: block; height: 100%; background: var(--color); }

.feed-title { font-family: "LedgerNew", -apple-system, BlinkMacSystemFont, "avenir next", avenir, "segoe ui", "helvetica neue", helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; font-weight: 400; font-size: var(--font-size-h2); margin: 0 0 .5em; }
.feed { border-bottom: var(--border); margin-bottom: 3rem; }
.feed-row {
  display: grid; grid-template-columns: 8rem 7rem minmax(0, 1fr); gap: 1.3333rem;
  padding: 1.2em 0; border-top: 1px solid color-mix(in srgb, var(--color) 18%, transparent);
  align-items: baseline;
}
.feed-date { font-variant-numeric: tabular-nums; font-size: .95rem; opacity: .6; }
.feed-tag { font-size: .72rem; border-radius: 999px; padding: .3em 1em; border: 1px solid; text-align: center; white-space: nowrap; }
.feed-tag-trade { color: var(--accent); border-color: var(--accent); }
.feed-tag-vote { color: var(--color); border-color: var(--color); }
.feed-tag-statement { color: var(--color); border-color: color-mix(in srgb, var(--color) 35%, transparent); opacity: .8; }
.feed-body .t { font-size: var(--font-size-h4); line-height: 1.25; }
.feed-body .d { font-size: .9rem; opacity: .6; margin-top: .25em; }
.feed-body .s { font-size: .78rem; opacity: .45; margin-top: .4em; }
.feed-body .flag { font-size: .85rem; color: var(--flag); margin-top: .45em; }
.feed-body .flag::before { content: "⚑ "; }

/* ---------- auth ---------- */
.auth-wrap { display: flex; justify-content: center; padding: 3rem var(--grid-margin) 4rem; }
.auth-card {
  width: 100%; max-width: 36rem;
  background: var(--accent-deep); color: #fff;
  border-radius: 1.3333rem;
  padding: clamp(2rem, 4vw, var(--grid-margin));
}
.auth-card h2 {
  font-family: "LedgerNew", -apple-system, BlinkMacSystemFont, "avenir next", avenir, "segoe ui", "helvetica neue", helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  font-weight: 400; font-size: var(--font-size-h1); line-height: 1.05; margin: 0 0 .2em;
}
.auth-card .sub { opacity: .75; margin-bottom: 2rem; font-size: var(--font-size-h5); }
.auth-card .gbtn {
  display: flex; align-items: center; justify-content: center; gap: .75em;
  width: 100%; font: inherit; font-size: var(--font-size-h5);
  background: #fff; color: #000; border: 0; border-radius: 999px;
  padding: .8em 1.5em; cursor: pointer;
  transition: transform .2s var(--ease-quint);
}
.auth-card .gbtn:hover { transform: scale(1.02); }
.auth-card .divider { display: flex; align-items: center; gap: 1em; margin: 1.6rem 0; opacity: .6; font-size: .85rem; }
.auth-card .divider::before, .auth-card .divider::after { content: ""; flex: 1; border-top: 1px solid rgba(255, 255, 255, .4); }
.auth-card form { display: flex; flex-direction: column; gap: 1.6rem; }
.auth-card .field { position: relative; }
.auth-card input {
  width: 100%; font: inherit; font-size: var(--font-size-h4);
  color: #fff; background: transparent;
  border: 0; border-bottom: 1px solid rgba(255, 255, 255, .55);
  padding: .3333rem 0;
}
.auth-card input:focus { outline: none; border-bottom-color: #fff; }
.auth-card input::placeholder { color: rgba(255, 255, 255, .45); }
.auth-card .submit {
  font: inherit; font-size: var(--font-size-medium);
  background: #fff; color: #000; border: 0; border-radius: 999px;
  padding: .55em 1.6em; cursor: pointer; align-self: flex-start;
  transition: transform .2s var(--ease-quint);
}
.auth-card .submit:hover { transform: scale(1.03); }
.auth-card .submit[disabled] { opacity: .5; pointer-events: none; }
.auth-card .switch { margin-top: 1.8rem; font-size: .95rem; opacity: .8; }
.auth-card .switch a { color: #fff; }
.auth-card .msg { margin-top: 1rem; font-size: .95rem; min-height: 1.3em; }
.auth-card .msg.err { color: #ffc9c9; }
.auth-card .msg.ok { color: #c9ffd2; }

/* ---------- watchlist / sections ---------- */
.section-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5em 2em;
  padding: 0 var(--grid-margin); margin: 0 0 1.2rem;
}
.section-head h2 {
  font-family: "LedgerNew", -apple-system, BlinkMacSystemFont, "avenir next", avenir, "segoe ui", "helvetica neue", helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  font-weight: 400; font-size: var(--font-size-h2); margin: 0;
}
.section-head .note { font-size: .9rem; opacity: .55; }

/* ---------- pro CTA band ---------- */
.pro-band { margin: 4rem var(--grid-margin) 0; border-top: var(--border); padding: 2.5rem 0 3rem; display: grid; grid-template-columns: repeat(var(--grid-columns), 1fr); gap: 1.3333rem; align-items: center; }
.pro-band .copy { grid-column: 1/9; }
.pro-band h3 { font-family: "LedgerNew", -apple-system, BlinkMacSystemFont, "avenir next", avenir, "segoe ui", "helvetica neue", helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; font-weight: 400; font-size: var(--font-size-h2); margin: 0 0 .3em; line-height: 1.15; }
.pro-band p { margin: 0; opacity: .6; max-width: 34em; }
.pro-band .cta { grid-column: 9/13; justify-self: end; }
.c-button.app-cta { text-decoration: none; color: inherit; min-width: 0; }
.c-button.app-cta:hover .c-button_label { text-decoration: underline; text-decoration-thickness: var(--border-size); }

/* ---------- footer ---------- */
.app-footer {
  margin-top: 5rem;
  border-top: var(--border);
  padding: 1.5rem var(--grid-margin) 2.5rem;
  font-size: .85rem; line-height: 1.6;
  display: flex; flex-wrap: wrap; gap: .5em 3em; justify-content: space-between;
  opacity: .7;
}
.app-footer a { color: inherit; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 2.5rem; transform: translateX(-50%);
  background: var(--color); color: var(--color-bg);
  font-size: .95rem; border-radius: 999px; padding: .8em 1.8em;
  z-index: 900; animation: toast-in .3s var(--ease-out);
  white-space: nowrap; max-width: 90vw; overflow: hidden; text-overflow: ellipsis;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, .8em); } }

/* ---------- signed-out watchlist hint ---------- */
.watchlist-gate { margin: 0 var(--grid-margin); border-top: var(--border); padding-top: 2.5rem; }
.watchlist-gate p { font-size: var(--font-size-h4); max-width: 30em; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .app-nav { grid-column: 4/10; font-size: var(--font-size-medium); }
  .app-auth { grid-column: 10/13; }
  .ledger-head { display: none; }
  .ledger-row { grid-template-columns: 2.5rem minmax(0, 2.4fr) minmax(0, 1.6fr) 6.5rem; }
  .ledger-row .cell-num, .ledger-row .cell-role { display: none; }
  .feed-row { grid-template-columns: 6.5rem 5.5rem minmax(0, 1fr); }
  .pro-band .copy { grid-column: 1/8; }
  .pro-band .cta { grid-column: 8/13; }
}
@media (max-width: 699px) {
  .app-nav {
    display: flex; position: fixed; top: var(--header-height); left: 0; right: 0;
    padding: .6em var(--grid-margin); gap: 1.2em;
    background: var(--color-bg); border-bottom: 1px solid color-mix(in srgb, var(--color) 18%, transparent);
    font-size: 1rem; overflow-x: auto; z-index: 799; white-space: nowrap;
  }
  .app-main { padding-top: calc(var(--header-height) + 2.6em); }
  .app-auth { grid-column: 4/13; }
  .masthead h1 { font-size: 2.4rem; }
  .ledger-row { grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; }
  .ledger-row .cell:first-child { display: none; }
  .ledger-row .cell-latest { grid-column: 1/-1; }
  .feed-row { grid-template-columns: 1fr; gap: .4rem; }
  .feed-tag { justify-self: start; }
  .statlist .st { grid-template-columns: 1fr; gap: .2rem; }
  .statlist .st::before { display: none; }
  .pro-band .copy, .pro-band .cta { grid-column: 1/-1; justify-self: start; }
  .profile-meta .watch-btn { margin-left: 0; }
}