/* token-lock.css · v1
 *
 * Widget styles for the Token Lock vesting console (/token-lock).
 * Scoped entirely under .tl-console so nothing here can bleed onto the
 * rest of the page and nothing on the rest of the page can bleed into
 * the widget. Sits inside <main class="dossier">, so it inherits the
 * --paper / --ink / --brand / --hair / --serif / --mono custom
 * properties already defined by dossier-pages.css (v10.332 Geist Sans
 * "financial dossier" register) rather than redefining them.
 *
 * The class names below are a fixed contract with js/token-lock/app.js
 * (relocated verbatim from the source TokenLocker frontend, functionality
 * untouched per instruction). Do not rename: .mode-card, .pulse,
 * .is-hidden, .button/.button-primary/.button-secondary, .status-message,
 * .toast, .lock-row, .detail-head, .state-pill, .detail-grid,
 * .detail-item, .claim-button, .muted — app.js reads or writes these
 * either via querySelector or via innerHTML template strings.
 */

.tl-console{
  padding:clamp(56px,8vw,88px) 0 clamp(72px,10vw,112px);
  border-bottom:1px solid var(--hair);
}

/* ── Wallet / contract status bar ───────────────────────────────────── */
.tl-walletbar{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:16px;
  padding:20px 24px;
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-radius:14px;
  margin-bottom:40px;
}
.tl-walletbar__status{
  display:flex;align-items:center;gap:14px;
  min-width:0;
}
.pulse{
  flex-shrink:0;
  width:10px;height:10px;border-radius:50%;
  background:var(--ink-4);
  position:relative;
}
.pulse.ready{background:#2FA84F;}
.pulse.ready::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid #2FA84F;opacity:.5;
  animation:tl-pulse 2s var(--ease) infinite;
}
@keyframes tl-pulse{
  0%{transform:scale(.8);opacity:.6;}
  100%{transform:scale(1.7);opacity:0;}
}
.tl-walletbar__status-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.tl-walletbar__status-text small{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);
}
.tl-walletbar__status-text strong{
  font-size:.95rem;font-weight:500;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tl-walletbar__actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.network-badge{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;
  padding:8px 14px;border-radius:999px;
  background:#fff;border:1px solid var(--hair);color:var(--ink-3);
}

/* ── Contract transparency block ────────────────────────────────────── */
.tl-contract{margin-bottom:40px;}
.tl-contract__label{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 10px;
}

/* ── Panels / dashboard grid ─────────────────────────────────────────── */
.dashboard-grid{
  display:grid;grid-template-columns:1.3fr 1fr;
  gap:24px;
  align-items:start;
}
.panel{
  background:#fff;
  border:1px solid var(--hair);
  border-radius:16px;
  padding:clamp(24px,3vw,36px);
}
.side-column{display:flex;flex-direction:column;gap:24px;}

.section-heading{margin-bottom:28px;}
.section-heading > div{display:flex;align-items:flex-start;gap:16px;}
.section-heading.compact{margin-bottom:20px;}
.step-number{
  flex-shrink:0;
  font-family:var(--mono);font-size:.8rem;font-weight:500;
  color:var(--brand);
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid color-mix(in srgb, var(--brand) 35%, transparent);
}
.section-heading h2{
  font-family:var(--serif);font-weight:540;font-size:1.3rem;
  color:var(--ink);margin:0 0 4px;letter-spacing:-.01em;
}
.section-heading p{font-size:.92rem;color:var(--ink-3);margin:0;}

/* ── Mode select (3 schedule types) ─────────────────────────────────── */
.mode-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:28px;
}
.mode-card{
  position:relative;
  display:flex;flex-direction:column;gap:6px;
  padding:18px 16px;
  border:1px solid var(--hair);
  border-radius:12px;
  cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.mode-card input{position:absolute;opacity:0;pointer-events:none;}
.mode-card:hover{border-color:var(--ink-4);}
.mode-card.selected{
  border-color:var(--brand);
  background:var(--brand-soft);
}
.mode-icon{
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper-2);
  font-size:.85rem;color:var(--ink-3);
}
.mode-card.selected .mode-icon{background:var(--brand);color:#fff;}
.mode-card strong{font-size:.92rem;font-weight:600;color:var(--ink);}
.mode-card small{font-size:.78rem;color:var(--ink-3);line-height:1.35;}

/* ── Form fields ─────────────────────────────────────────────────────── */
.form-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:18px;
  margin-bottom:28px;
}
.field{display:flex;flex-direction:column;gap:8px;}
.field.full{grid-column:1 / -1;}
.field > span:first-child{
  font-size:.82rem;font-weight:500;color:var(--ink-2);
}
.field input{
  width:100%;
  height:46px;padding:0 16px;
  font-family:var(--mono);font-size:.9rem;color:var(--ink);
  background:#fff;
  border:1px solid var(--hair);border-radius:10px;
  transition:border-color .2s var(--ease);
}
.field input::placeholder{color:var(--ink-4);}
.field input:focus{outline:none;border-color:var(--brand);}
.field small{font-size:.76rem;color:var(--ink-3);}
.input-action{display:flex;gap:8px;}
.input-action input{flex:1;min-width:0;}
.input-action button{
  flex-shrink:0;
  padding:0 16px;
  font-size:.82rem;font-weight:500;color:var(--ink-2);
  background:var(--paper-2);border:1px solid var(--hair);border-radius:10px;
  cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.input-action button:hover{background:var(--hair-soft);color:var(--ink);}
.amount-input{
  display:flex;align-items:center;
  border:1px solid var(--hair);border-radius:10px;
  overflow:hidden;background:#fff;
}
.amount-input input{border:none;border-radius:0;}
.amount-input input:focus{outline:none;}
.amount-input span{
  flex-shrink:0;padding:0 16px;
  font-family:var(--mono);font-size:.82rem;font-weight:500;
  color:var(--ink-3);background:var(--paper-2);
  height:46px;display:flex;align-items:center;
  border-left:1px solid var(--hair);
}
.field input[type="number"]{font-family:var(--mono);}

/* ── Schedule preview timeline ───────────────────────────────────────── */
.schedule-preview{
  padding:20px 0 28px;
  border-top:1px solid var(--hair);
  margin-bottom:24px;
}
.timeline{display:flex;align-items:center;padding:0 4px 14px;}
.timeline-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--hair);flex-shrink:0;
}
.timeline-dot.active{background:var(--brand);}
.timeline-dot.finish{background:var(--ink);}
.timeline-line{flex:1;height:1px;background:var(--hair);}
.timeline-line.gradient{
  background:linear-gradient(90deg, var(--brand), var(--ink));
}
.timeline-labels{display:flex;justify-content:space-between;gap:12px;}
.timeline-labels span{display:flex;flex-direction:column;gap:4px;flex:1;}
.timeline-labels span:last-child{align-items:flex-end;text-align:right;}
.timeline-labels small{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);
}
.timeline-labels strong{font-size:.88rem;font-weight:500;color:var(--ink);}

/* ── Buttons (scoped to the console; do not rename) ─────────────────── */
.tl-console .button{
  appearance:none;border:none;cursor:pointer;
  height:48px;padding:0 24px;
  font-family:inherit;font-size:.95rem;font-weight:500;
  border-radius:999px;
  transition:background .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
}
.tl-console .button:disabled{opacity:.55;cursor:not-allowed;}
.tl-console .button-primary{background:var(--brand);color:#fff;}
.tl-console .button-primary:hover:not(:disabled){background:var(--brand-hover);}
.tl-console .button-secondary{background:var(--ink);color:#fff;}
.tl-console .button-secondary:hover:not(:disabled){background:#1F1E1B;}
.action-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.action-row .button{flex:1;min-width:160px;}

.status-message{
  min-height:1.2em;
  font-size:.85rem;color:var(--ink-3);
  font-family:var(--mono);
}
.status-message.success{color:#2FA84F;}
.status-message.error{color:#C4402C;}

/* ── Lookup panel ─────────────────────────────────────────────────────── */
.search-row{display:flex;gap:8px;margin-bottom:20px;}
.search-row input{
  flex:1;min-width:0;
  height:46px;padding:0 16px;
  font-family:var(--mono);font-size:.9rem;color:var(--ink);
  background:#fff;border:1px solid var(--hair);border-radius:10px;
}
.search-row input:focus{outline:none;border-color:var(--brand);}
.icon-button{
  flex-shrink:0;width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;border:none;border-radius:10px;
  font-size:1rem;cursor:pointer;
  transition:background .2s var(--ease);
}
.icon-button:hover{background:var(--brand);}

.lock-detail{
  border-top:1px solid var(--hair);
  padding-top:20px;
}
.lock-detail.empty-state{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;padding:32px 12px 12px;
  color:var(--ink-3);
}
.empty-icon{font-size:1.4rem;color:var(--ink-4);}
.lock-detail p{margin:0;font-size:.88rem;}

.detail-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;
}
.detail-head strong{font-family:var(--mono);font-size:1rem;color:var(--ink);}
.state-pill{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;
  background:var(--brand-soft);color:var(--brand);
}
.detail-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:14px 16px;
  margin-bottom:20px;
}
.detail-item{display:flex;flex-direction:column;gap:4px;min-width:0;}
.detail-item.full{grid-column:1 / -1;}
.detail-item small{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);
}
.detail-item strong{
  font-size:.9rem;font-weight:500;color:var(--ink);
  overflow-wrap:anywhere;
}
.claim-button{width:100%;justify-content:center;}

/* ── My Locks list ────────────────────────────────────────────────────── */
.list-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px;}
.list-header h2{
  font-family:var(--serif);font-weight:540;font-size:1.15rem;color:var(--ink);margin:0 0 4px;
}
.list-header p{font-size:.85rem;color:var(--ink-3);margin:0;}
.text-button{
  flex-shrink:0;
  background:none;border:none;cursor:pointer;
  font-size:.82rem;font-weight:500;color:var(--brand);
  padding:4px 0;
}
.text-button:hover{color:var(--brand-hover);}
.lock-list{display:flex;flex-direction:column;gap:1px;background:var(--hair);border-radius:12px;overflow:hidden;}
.lock-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;background:#fff;
}
.lock-row > div{display:flex;flex-direction:column;gap:2px;min-width:0;}
.lock-row strong{font-family:var(--mono);font-size:.88rem;color:var(--ink);}
.lock-row small{font-size:.76rem;color:var(--ink-3);}
.lock-row button{
  flex-shrink:0;
  background:none;border:none;cursor:pointer;
  font-size:.82rem;font-weight:500;color:var(--brand);
}
.lock-row button:hover{color:var(--brand-hover);}
.muted{color:var(--ink-3);font-size:.85rem;text-align:center;padding:20px 0;margin:0;}

.is-hidden{display:none!important;}

/* ── Toast ────────────────────────────────────────────────────────────── */
/* Deliberately literal values, not var(--ink)/var(--ease) — #toast sits
 * as a sibling of <main class="dossier"> (fixed-position overlay, meant
 * to sit above the whole viewport including the footer), so it is
 * outside the element that defines those custom properties and would
 * silently drop to invalid-at-computed-value-time defaults otherwise. */
.toast{
  position:fixed;left:50%;bottom:28px;
  transform:translate(-50%,20px);
  padding:14px 22px;
  background:#0F0E0C;color:#fff;
  border-radius:10px;
  font-size:.88rem;font-weight:500;
  box-shadow:0 12px 32px rgba(0,0,0,.24);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s cubic-bezier(.2,.8,.2,1), transform .25s cubic-bezier(.2,.8,.2,1), visibility .25s;
  z-index:1200;
  max-width:min(90vw,420px);
  text-align:center;
}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0);}
.toast.show.error{background:#C4402C;}
.toast.show.success{background:#1F7A3D;}

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .dashboard-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .mode-grid{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .tl-walletbar{flex-direction:column;align-items:stretch;}
  .tl-walletbar__actions{justify-content:space-between;}
  .action-row .button{min-width:0;}
  .detail-grid{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
  .pulse.ready::after{animation:none;}
}