/* ============================================================
   Alpha Finance v2: Token Unlocks (/token-unlocks/)
   Loaded after sentiment.css, whose hero, stat tiles, feed line, panels,
   segmented control and table it reuses. Only what is new to this page
   lives here: the thirty-day strip, the board's token cell, shares and
   locked bar, the sort marks, and the vesting schedule panel.
   ============================================================ */

/* ---------- hero: the two thresholds on the share tile ---------- */

.sntstat-v.warm { color: var(--heat); }
.sntstat-v.hot { color: var(--neg-text); }

/* ---------- the strip: one column per day ---------- */

/* fourteen columns, as wide as the panel: the count matches WINDOW in js/unlocks.js */
.unl-strip {
  display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px;
  padding: 16px 18px 12px;
}
.unl-day {
  display: flex; flex-direction: column; align-items: stretch; gap: 7px; min-width: 0;
  padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit;
}
/* the day's figure over its bar; the columns are wide enough to carry it */
.unl-day em {
  display: block; height: 14px; font-style: normal; font-family: var(--mono); font-size: 10.5px;
  line-height: 14px; text-align: center; color: var(--muted); white-space: nowrap; overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.unl-day.is-today em, .unl-day:hover em { color: var(--text); }
.unl-day.is-on em { color: var(--lime); }
.unl-bar { display: block; position: relative; height: 140px; border-radius: 3px 3px 0 0; background: var(--bg-2); overflow: hidden; }
.unl-bar i {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  background: var(--lime-dim); border-radius: 2px 2px 0 0;
  transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s;
}
.unl-day:not(.has) .unl-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-2); }
.unl-day:hover .unl-bar i { background: var(--lime); }
.unl-day.is-on .unl-bar { background: color-mix(in srgb, var(--lime) 10%, var(--bg-2)); box-shadow: inset 0 0 0 1px var(--lime-dim); }
.unl-day.is-on .unl-bar i { background: var(--lime); }
.unl-day small {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.02em; text-align: center;
  color: var(--faint); white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums;
}
.unl-day small b { font-weight: 500; color: var(--muted); }
.unl-day.is-today small { color: var(--text); }
.unl-day.is-today .unl-bar { box-shadow: inset 0 0 0 1px var(--line-2); }
.unl-day.is-on small { color: var(--lime); }
.unl-day:focus-visible { outline: none; }
.unl-day:focus-visible .unl-bar { box-shadow: inset 0 0 0 1px var(--lime); }
.unl-clear {
  padding: 0; border: 0; background: none; font: inherit; color: var(--lime); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.unl-clear:hover { color: var(--text); }

/* ---------- the board ---------- */

.sntpanel-head .unl-q {
  width: 170px; padding: 5px 9px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--text);
}
.unl-q::placeholder { color: var(--faint); }
.unl-q:focus { outline: none; border-color: var(--line-2); }

.snttable th[data-k] { cursor: pointer; user-select: none; }
.snttable th[data-k]:hover { color: var(--text); }
.snttable th[data-k].on { color: var(--lime); }
.snttable th[data-k].on::after { content: " \25BE"; }
.snttable th[data-k].on.asc::after { content: " \25B4"; }
#unl-table th, #unl-table td { padding: 0 12px; }
#unl-table td { height: 46px; }
#unl-table td.rk { color: var(--faint); font-family: var(--mono); font-size: 10.5px; }
#unl-table td small { display: block; margin-top: 2px; font-family: var(--mono); font-size: 9.5px; color: var(--faint); }
#unl-table td small.up { color: color-mix(in srgb, var(--pos-text) 70%, var(--faint)); }
#unl-table td small.down { color: color-mix(in srgb, var(--neg-text) 70%, var(--faint)); }
#unl-table td.warm { color: var(--heat); font-weight: 500; }
#unl-table td.hot { color: var(--neg-text); font-weight: 500; }
#unl-table tbody tr[data-key] { cursor: pointer; }
#unl-table tbody tr[data-key]:hover td { background: color-mix(in srgb, var(--text) 3%, transparent); }
#unl-table tbody tr[data-key]:focus-visible { outline: none; }
#unl-table tbody tr[data-key]:focus-visible td { background: color-mix(in srgb, var(--lime) 6%, transparent); }
#unl-table tbody tr.is-on td { background: color-mix(in srgb, var(--lime) 7%, transparent); }
#unl-table tbody tr.is-on td:first-child { box-shadow: inset 2px 0 0 var(--lime); }
#unl-table tbody tr.is-past td { opacity: 0.6; }

/* the token cell: a 20px mark, the ticker, the name under it */
.unl-coin { display: flex; align-items: center; gap: 9px; color: var(--text); font-weight: 500; }
.unl-coin b { font-weight: 500; }
#unl-table td .unl-coin small { display: inline; margin: 0 0 0 8px; font-family: var(--mono); font-size: 9.5px; font-weight: 400; color: var(--muted); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unl-ic { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; background: var(--panel-2); flex-shrink: 0; }
.unl-ic.is-mono { display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 9px; font-weight: 500; color: var(--text-2); }

/* locked share of supply: a short bar, then the figure */
.unl-lock { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.unl-lock-bar { display: inline-block; width: 56px; height: 5px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.unl-lock-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--heat); opacity: 0.85; }

/* ---------- the schedule ---------- */

.unl-vest .sntpanel-head { align-items: center; }
.unl-vest-title { display: flex; align-items: center; gap: 9px; }
.unl-vest-title .unl-ic { width: 22px; height: 22px; }
.unl-vest-title small { font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: 0.04em; color: var(--muted); }
.unl-vest-sub { display: block; margin-top: 3px; font-family: var(--mono); font-size: 9.5px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.unl-vest-close {
  margin-left: auto; padding: 5px 10px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--muted); cursor: pointer;
}
.unl-vest-close:hover { color: var(--text); border-color: var(--line-2); }

.unl-stack { display: flex; height: 14px; border-radius: 4px; background: var(--bg-2); overflow: hidden; }
.unl-stack i { display: block; height: 100%; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.unl-stack i.u, .unl-key i.u, .unl-split-bar i { background: var(--lime-dim); }
.unl-stack i.l, .unl-key i.l { background: var(--heat); opacity: 0.85; }
.unl-stack i.x, .unl-key i.x, .unl-split-bar i.x { background: var(--line-2); }
.unl-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--text-2); font-variant-numeric: tabular-nums; }
.unl-key span { display: inline-flex; align-items: center; gap: 6px; }
.unl-key i { width: 10px; height: 10px; border-radius: 2px; }

.unl-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.unl-fact { padding: 11px 13px 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg-2); min-width: 0; }
.unl-fact-k { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.unl-fact-v { margin-top: 7px; font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unl-fact-s { margin-top: 5px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.03em; color: var(--muted); line-height: 1.4; }

.unl-allocs { margin: 18px -18px -16px; border-top: 1px solid var(--line); overflow-x: auto; }
.unl-alloc-table td { height: 48px; }
.unl-alloc-table td small { display: block; margin-top: 2px; font-family: var(--mono); font-size: 9.5px; color: var(--faint); white-space: normal; }
.unl-alloc-table tr.is-untracked td { color: var(--muted); }
.unl-split { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.unl-split-bar { display: inline-block; width: 72px; height: 5px; border-radius: 3px; background: var(--heat); background: color-mix(in srgb, var(--heat) 55%, var(--bg-2)); overflow: hidden; flex-shrink: 0; }
.unl-split-bar i { display: block; height: 100%; width: 0; border-radius: 3px 0 0 3px; }
.unl-split small { display: inline !important; margin: 0 !important; color: var(--faint); }

.unl-none { padding: 34px 18px; text-align: center; font-size: 13px; color: var(--muted); }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .unl-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .unl-strip { padding: 14px 12px 10px; gap: 3px; }
  .unl-bar { height: 80px; }
  .unl-day em { display: none; }
  .unl-day small { font-size: 8.5px; }
  .unl-day:not(:nth-child(2n + 1)):not(.is-today) small { visibility: hidden; }
  .unl-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sntpanel-head .unl-q { width: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  .unl-bar i, .unl-stack i { transition: none; }
}

.unl-note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }