/* ═══════════════════════════════════════════════════════════════════════════
   Crystal — the material layer.

   Three things this file is responsible for:
   · Clarity of line. Borders are drawn to be seen, corners are cut like facets,
     and every surface declares where it ends.
   · Light. Panels catch a highlight from the pointer the way a cut stone does.
   · Motion taken from the reserve — dune drift, a bird crossing, water settling —
     rather than generic interface animation.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────── Line clarity ─────────────── */
.card, .panel, .tile, .inp, .btn, .seg, .tag {
  border-color: var(--line);
}
.card {
  position: relative;
  border: 1px solid var(--line);
  box-shadow: var(--sh);
}
/* a facet: the top-left edge catches light, the opposite edge falls away */
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(150deg, var(--card-top) 0%, transparent 34%);
  z-index: 0;
}
.card > * { position: relative; z-index: 1; }

.card > header {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--shade), transparent);
}
.card > header h2 { color: var(--head-fg); }
.card > header h2::before {
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  opacity: 1;
}

th { border-bottom: 1px solid var(--line); }
td { border-bottom: 1px solid var(--line-soft); }
.hr { background: var(--line); }

/* ─────────────── Crystal highlight, following the pointer ─────────────── */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .card, .tile, .panel.sector { --mx: 50%; --my: 50%; }
  .card::after, .tile::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    border-radius: inherit; opacity: 0; transition: opacity .5s ease;
    background: radial-gradient(380px circle at var(--mx) var(--my), var(--sheen), transparent 64%);
  }
  .card:hover::after, .tile:hover::after { opacity: 1; }
  .card { transition: transform .5s cubic-bezier(.2,.8,.25,1), box-shadow .5s, border-color .4s; }
  .card:hover { transform: translateY(-2px); box-shadow: var(--sh-lift); border-color: var(--basalt-600); }
}

/* ─────────────── The rule beneath a view title, cut from the mark ─────────────── */
.vh::after {
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 26%, transparent 64%);
  opacity: .75;
}
html[dir="rtl"] .vh::after {
  background: linear-gradient(270deg, var(--brand) 0%, var(--brand-2) 26%, transparent 64%);
}

/* ─────────────── Primary action ─────────────── */
.btn.primary {
  background: linear-gradient(140deg, var(--brand-3), var(--brand) 55%, var(--brand-2));
  border-color: transparent; color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 8px 20px -10px var(--brand);
}
.btn.primary:hover { filter: brightness(1.06) saturate(1.05); transform: translateY(-1px); }
.btn.primary:active { transform: translateY(0); }

/* ─────────────── Metrics ─────────────── */
.kpi .kfig { color: var(--bone); font-feature-settings: "tnum" 1; }
.kpi::after {
  content: ""; position: absolute; inset-inline-start: 0; inset-block: 0; width: 3px;
  background: linear-gradient(180deg, var(--brand-2), var(--brand), transparent);
  opacity: 0; transition: opacity .4s;
}
.kpi:hover::after { opacity: .9; }

.conf .bar { height: 4px; background: var(--basalt-700); border-radius: 3px; }
.conf .bar i { box-shadow: 0 0 8px -2px currentColor; }
.tag { border-radius: 3px; font-weight: 500; }

/* ═══════════════ Motion drawn from the reserve ═══════════════ */
@media (prefers-reduced-motion: no-preference) {

  /* A view arrives the way light moves across a dune: from one edge, unevenly. */
  main > .view { animation: duneIn .62s cubic-bezier(.22,.9,.28,1) both; }
  @keyframes duneIn {
    from { opacity: 0; transform: translateY(14px); filter: blur(3px); }
    to   { opacity: 1; transform: none; filter: none; }
  }

  /* The live indicator breathes at the rate of a resting animal, not a machine. */
  .dotp { animation: breathe 3.6s cubic-bezier(.4,0,.5,1) infinite; }
  @keyframes breathe {
    0%, 100% { box-shadow: 0 0 0 0 var(--brand-soft); opacity: .85; }
    45%      { box-shadow: 0 0 0 8px rgba(0,0,0,0);  opacity: 1; }
  }

  /* Ripple: a record landing in the ledger is a drop reaching a water point. */
  tr.flash { animation: ripple 1.9s cubic-bezier(.2,.8,.3,1); }
  @keyframes ripple {
    0%   { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
    100% { background: transparent; box-shadow: inset 0 0 0 transparent; }
  }

  /* Wind over the top bar: a slow pass, never a loop you notice. */
  .topbar::after {
    content: ""; position: absolute; inset-block-end: -1px; inset-inline: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--brand), var(--brand-2), transparent);
    opacity: .5; animation: windPass 14s cubic-bezier(.45,0,.55,1) infinite;
  }
  @keyframes windPass {
    0%, 100% { transform: translateX(-38%) scaleX(.3); opacity: .12; }
    50%      { transform: translateX(38%)  scaleX(.7); opacity: .5; }
  }

  /* Cards settle in sequence, like a flock landing. */
  .reveal { animation: settle .6s cubic-bezier(.2,.9,.3,1) both; }
  @keyframes settle {
    from { opacity: 0; transform: translateY(12px) scale(.994); }
    to   { opacity: 1; transform: none; }
  }

  .btn, .chip, .seg button, .splink { transition: all .2s cubic-bezier(.2,.8,.3,1); }
  .nav button.on::after { box-shadow: 0 0 10px -1px var(--brand); }
}

/* ─────────────── Focus is part of the design ─────────────── */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
button:focus:not(:focus-visible) { outline: none; }

/* ─────────────── Navigation reads as selected, clearly ─────────────── */
.nav button.on { color: var(--bone); background: var(--brand-soft); }
.nav button.on::after { background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.nav .badge { background: var(--rust); color: #fff; font-weight: 600; }

/* Decorative motion is clipped to its own box: a transform that reaches past the
   viewport creates horizontal overflow, which in a right-to-left layout shifts the
   whole page and cuts the leading edge off. */
.topbar, .vh, .kpi, .card { overflow-x: clip; }
.card { overflow: visible; }
.topbar { overflow: hidden; }
html, body { overflow-x: clip; }

/* ═══════════════ Assistant ═══════════════ */
.assistant {
  position: fixed; inset-block: 0; inset-inline-end: 0; width: min(430px, 96vw); z-index: 70;
  display: flex; flex-direction: column;
  background: var(--basalt-850); border-inline-start: 1px solid var(--line);
  box-shadow: -34px 0 70px -34px rgba(0,0,0,.5);
  transform: translateX(102%); transition: transform .38s cubic-bezier(.2,.85,.25,1);
}
html[dir="rtl"] .assistant { transform: translateX(-102%); box-shadow: 34px 0 70px -34px rgba(0,0,0,.5); }
.assistant.open { transform: none; }
.assistant > header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--line); flex: none;
  background: linear-gradient(180deg, var(--shade), transparent);
}
.asslog { flex: 1; min-height: 0; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.assistant > footer { display: flex; gap: 8px; padding: 12px 16px 6px; border-top: 1px solid var(--line); flex: none; }
.assfoot { padding: 0 16px 12px; flex: none; }
.assinput { flex: 1; }

.msg { display: flex; gap: 10px; align-items: flex-start; animation: settle .4s cubic-bezier(.2,.9,.3,1) both; }
.msg.u { flex-direction: row-reverse; }
html[dir="rtl"] .msg.u { flex-direction: row; }
html[dir="rtl"] .msg.a { flex-direction: row-reverse; }
.msgmark {
  width: 25px; height: 25px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--brand-soft); border: 1px solid var(--line); color: var(--brand);
}
.msgbody { max-width: 86%; }
.msg.u .msgbody {
  background: var(--brand); color: #fff; border-radius: 12px 12px 3px 12px;
  padding: 9px 13px; font-size: 13px; line-height: 1.6;
}
html[dir="rtl"] .msg.u .msgbody { border-radius: 12px 12px 12px 3px; }
.msg.a .msgbody {
  background: var(--basalt-800); border: 1px solid var(--line-soft); border-radius: 3px 12px 12px 12px;
  padding: 11px 14px;
}
html[dir="rtl"] .msg.a .msgbody { border-radius: 12px 3px 12px 12px; }
.ansline { font-size: 13px; line-height: 1.75; color: var(--bone); }
.chiprow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.exwrap { display: flex; flex-direction: column; gap: 5px; margin-top: 11px; }
.ex {
  text-align: start; font-size: 12px; color: var(--mute); padding: 7px 10px;
  border: 1px solid var(--line-soft); border-radius: 3px; background: var(--shade); transition: .16s;
}
.ex:hover { border-color: var(--brand); color: var(--bone); background: var(--brand-soft); }
.thinking { display: flex; gap: 4px; padding: 3px 0; }
.thinking i { width: 5px; height: 5px; border-radius: 50%; background: var(--mute-2); animation: tdot 1.2s infinite; }
.thinking i:nth-child(2) { animation-delay: .15s; }
.thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes tdot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.chip.ask b { color: var(--brand); }

/* ═══════════════ Command palette ═══════════════ */
.palwrap {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: start center;
  padding-top: 12vh; background: rgba(0,0,0,.42); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.palwrap.on { opacity: 1; pointer-events: auto; }
.pal {
  width: min(660px, 94vw); background: var(--basalt-850); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.6); overflow: hidden;
  transform: translateY(-8px) scale(.99); transition: transform .24s cubic-bezier(.2,.85,.25,1);
}
.palwrap.on .pal { transform: none; }
.palhead { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.palinput { flex: 1; background: none; border: 0; outline: 0; font-size: 15px; color: var(--bone); }
.palinput::placeholder { color: var(--mute-2); }
.pallist { max-height: 52vh; overflow: auto; padding: 6px; }
.palrow {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: start;
  padding: 9px 11px; border-radius: 4px; font-size: 13px; color: var(--bone);
}
.palrow.on, .palrow:hover { background: var(--brand-soft); }
.palt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pals { font-size: 11px; color: var(--mute-2); flex: none; }
.palfoot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--line-soft); font-size: 11px; color: var(--mute-2); }

/* ═══════════════ Integration and reports ═══════════════ */
.eprow {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: start;
  padding: 9px 10px; border-radius: 3px; border: 1px solid transparent; margin-bottom: 3px; transition: .16s;
}
.eprow:hover { background: var(--shade); }
.eprow.on { background: var(--brand-soft); border-color: var(--line); }
.eprow code { font-size: 12px; color: var(--bone); }
.codeblock {
  font: 500 11.5px/1.65 var(--mono); background: var(--basalt-800); border: 1px solid var(--line-soft);
  border-radius: 3px; padding: 12px 14px; overflow: auto; max-height: 340px; color: var(--mute);
  white-space: pre; direction: ltr; text-align: left;
}
.exprow {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
}
.exprow:last-child { border-bottom: 0; }