/* Vaidya Knowledge Studio — product/tool register, Restrained + botanical-green accent.
   Light theme (daytime clinic). One family (Hanken Grotesk), fixed rem scale, OKLCH. */

:root{
  /* neutrals — very light cool-green tinted, true-ish white surfaces */
  --bg:        oklch(0.984 0.004 165);
  --surface:   oklch(1 0 0);
  --surface-2: oklch(0.972 0.005 165);   /* sidebar / toolbars */
  --border:    oklch(0.905 0.007 165);
  --border-2:  oklch(0.85 0.008 165);

  /* ink — green-charcoal; body hits >7:1 on --bg */
  --ink:       oklch(0.28 0.02 165);
  --ink-soft:  oklch(0.44 0.02 165);     /* secondary text, ≥4.5:1 on bg */
  --ink-faint: oklch(0.56 0.018 165);    /* meta only on light surfaces */

  /* brand — deep botanical green */
  --brand:      oklch(0.52 0.11 156);
  --brand-ink:  oklch(0.42 0.12 156);    /* text-on-light green */
  --brand-hi:   oklch(0.46 0.12 156);    /* hover */
  --brand-wash: oklch(0.955 0.03 156);   /* selected/tint bg */
  --on-brand:   oklch(0.99 0.01 156);

  /* semantic */
  --danger:     oklch(0.55 0.17 25);
  --danger-wash:oklch(0.96 0.03 25);
  --amber:      oklch(0.72 0.13 75);
  --amber-wash: oklch(0.96 0.04 80);
  --ok:         oklch(0.55 0.12 156);

  --radius: 12px; --radius-sm: 8px;
  --shadow-1: 0 1px 2px oklch(0.3 0.02 165 / .06), 0 1px 3px oklch(0.3 0.02 165 / .05);
  --shadow-2: 0 8px 24px oklch(0.3 0.03 165 / .10), 0 2px 6px oklch(0.3 0.02 165 / .06);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* z-scale */
  --z-sticky: 100; --z-toast: 700;
}

*{box-sizing:border-box}
[hidden]{display:none!important}   /* class display rules (.login/.shell grid) must not override the hidden attribute */
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,textarea{font:inherit; color:inherit}
svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
u{text-decoration-thickness:1.5px;text-underline-offset:2px}

/* ── Brand ─────────────────────────────────────────────────────────────── */
.brand{display:flex;align-items:center;gap:.6rem;font-weight:600}
.brand__mark{
  display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:9px;
  background:var(--brand);color:var(--on-brand);font-weight:700;
  font-size:1.05rem;line-height:1;box-shadow:var(--shadow-1);
}
.brand__name{letter-spacing:-0.01em}
.brand--lg .brand__mark{width:2.4rem;height:2.4rem;font-size:1.3rem}
.brand--lg .brand__name{font-size:1.25rem}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn{
  --_bg:var(--surface);--_fg:var(--ink);--_bd:var(--border-2);
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.6rem 1rem;border-radius:var(--radius-sm);border:1px solid var(--_bd);
  background:var(--_bg);color:var(--_fg);font-weight:600;cursor:pointer;
  transition:background .16s var(--ease), border-color .16s var(--ease), transform .06s var(--ease), box-shadow .16s var(--ease);
}
.btn:hover{border-color:var(--ink-faint)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn--primary{--_bg:var(--brand);--_fg:var(--on-brand);--_bd:transparent;box-shadow:var(--shadow-1)}
.btn--primary:hover{--_bg:var(--brand-hi);border-color:transparent}
.btn--ghost{--_bg:transparent;--_bd:var(--border)}
.btn--danger{--_bg:var(--danger-wash);--_fg:var(--danger);--_bd:transparent}
.btn--sm{padding:.4rem .7rem;font-size:.85rem}
.btn--block{width:100%}

/* ── Fields ────────────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:.35rem}
.field--inline{flex:1;min-width:0}
.field__label{font-size:.82rem;font-weight:600;color:var(--ink-soft)}
.input{
  width:100%;padding:.62rem .8rem;background:var(--surface);
  border:1px solid var(--border-2);border-radius:var(--radius-sm);
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.input::placeholder{color:var(--ink-faint)}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash)}

/* ── Login ─────────────────────────────────────────────────────────────── */
.login{min-height:100dvh;display:grid;place-content:center;gap:1rem;padding:2rem;justify-items:center}
.login__card{
  width:min(24rem,92vw);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:2rem 1.8rem;box-shadow:var(--shadow-2);
  display:flex;flex-direction:column;gap:1rem;
}
.login__sub{margin:0;color:var(--ink-soft);font-size:.92rem}
.login__err{margin:0;color:var(--danger);font-size:.88rem;font-weight:500}
.login__foot{color:var(--ink-faint);font-size:.8rem;letter-spacing:.02em}

/* ── Shell ─────────────────────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:16rem 1fr;min-height:100dvh}
.side{
  background:var(--surface-2);border-right:1px solid var(--border);
  padding:1.3rem 1rem;display:flex;flex-direction:column;gap:1.4rem;
  position:sticky;top:0;height:100dvh;
}
.nav{display:flex;flex-direction:column;gap:.15rem}
.nav__item{
  display:flex;align-items:center;gap:.7rem;padding:.62rem .7rem;border:none;
  background:transparent;border-radius:var(--radius-sm);color:var(--ink-soft);
  font-weight:600;cursor:pointer;text-align:left;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.nav__item svg{color:var(--ink-faint);transition:color .16s var(--ease)}
.nav__item:hover{background:var(--surface);color:var(--ink)}
.nav__item.is-active{background:var(--brand-wash);color:var(--brand-ink)}
.nav__item.is-active svg{color:var(--brand)}
.side__foot{margin-top:auto;display:flex;flex-direction:column;gap:.7rem}
.stat{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--ink-soft)}
.stat__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--ink-faint)}
.stat.is-ok .stat__dot{background:var(--ok);box-shadow:0 0 0 3px var(--brand-wash)}

.main{padding:2.2rem clamp(1.2rem,4vw,3rem);max-width:64rem;width:100%}
.view{display:none;animation:fade .2s var(--ease)}
.view.is-active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.head{margin-bottom:1.6rem}
.head--row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.head__title{margin:0 0 .3rem;font-size:1.6rem;font-weight:700;letter-spacing:-0.02em;text-wrap:balance}
.head__sub{margin:0;color:var(--ink-soft);max-width:62ch;text-wrap:pretty}

.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-1)}

/* ── Add: drop ─────────────────────────────────────────────────────────── */
.stepwrap{animation:fade .2s var(--ease)}
.drop{
  display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;
  padding:3rem 2rem;background:var(--surface);border:1.5px dashed var(--border-2);
  border-radius:var(--radius);cursor:pointer;
  transition:border-color .16s var(--ease), background .16s var(--ease);
}
.drop:hover,.drop.is-over{border-color:var(--brand);background:var(--brand-wash)}
.drop__icon{width:2.4rem;height:2.4rem;color:var(--brand);stroke-width:1.6}
.drop__title{font-weight:600;font-size:1.05rem}
.drop__hint{color:var(--ink-faint);font-size:.86rem}
.ocr{display:flex;align-items:center;gap:.6rem;margin-top:1rem;color:var(--ink-soft);font-size:.9rem}
.ocr input{width:1.05rem;height:1.05rem;accent-color:var(--brand)}
.ocr em{color:var(--ink-faint);font-style:normal}

/* ── Add: working ──────────────────────────────────────────────────────── */
.work{display:flex;align-items:center;gap:1.1rem;padding:1.4rem 1.5rem}
.work__spin{
  width:1.7rem;height:1.7rem;border-radius:50%;flex:none;
  border:2.5px solid var(--brand-wash);border-top-color:var(--brand);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.work__file{margin:0;font-weight:600}
.work__status{margin:.15rem 0 0;color:var(--ink-soft);font-size:.9rem}

/* ── Add: review ───────────────────────────────────────────────────────── */
.review{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-1);overflow:hidden}
.review__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1rem;border-bottom:1px solid var(--border);flex-wrap:wrap}
.review__meta{display:flex;gap:.4rem;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .6rem;border-radius:999px;font-size:.78rem;font-weight:600;background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--border)}
.badge--ok{background:var(--brand-wash);color:var(--brand-ink);border-color:transparent}
.badge--warn{background:var(--amber-wash);color:oklch(0.42 0.09 70);border-color:transparent}
.seg{padding:.35rem .7rem;border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;color:var(--ink-soft);cursor:pointer}
.seg+.seg{margin-left:.3rem}
.seg.is-active{background:var(--brand-wash);color:var(--brand-ink);border-color:transparent}
.md{
  width:100%;min-height:44vh;max-height:56vh;overflow:auto;padding:1.1rem 1.2rem;border:none;resize:vertical;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.86rem;line-height:1.6;background:var(--surface);color:var(--ink);
}
.md:focus{outline:none}
.md--prev{font-family:inherit;font-size:.95rem;line-height:1.65}
.md--prev h1,.md--prev h2,.md--prev h3{letter-spacing:-0.01em;margin:1.1em 0 .4em}
.md--prev h1{font-size:1.4rem}.md--prev h2{font-size:1.2rem}.md--prev h3{font-size:1.05rem}
.md--prev p{margin:.5em 0;max-width:72ch}
.md--prev table{border-collapse:collapse;font-size:.85rem;margin:.6em 0}
.md--prev td,.md--prev th{border:1px solid var(--border-2);padding:.3rem .5rem}
.md--prev code{background:var(--surface-2);padding:.1em .35em;border-radius:5px;font-size:.85em}
.review__foot{display:flex;align-items:flex-end;gap:1rem;padding:1rem;border-top:1px solid var(--border);flex-wrap:wrap}
.review__actions{display:flex;gap:.6rem;margin-left:auto}

/* ── Library ───────────────────────────────────────────────────────────── */
.books{display:flex;flex-direction:column;gap:.5rem}
.book{
  display:flex;align-items:center;gap:1rem;padding:.9rem 1.1rem;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-sm);transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.book:hover{border-color:var(--border-2);box-shadow:var(--shadow-1)}
.book__ic{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:8px;background:var(--brand-wash);color:var(--brand);flex:none}
.book__main{min-width:0;flex:1}
.book__name{font-weight:600;letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.book__meta{color:var(--ink-faint);font-size:.82rem;margin-top:.1rem}
.book__tag{font-size:.72rem;font-weight:600;color:var(--brand-ink);background:var(--brand-wash);padding:.15rem .5rem;border-radius:999px;margin-left:.5rem}
.book__del{flex:none}
.book__del.btn{padding:.45rem .55rem}
.book__del svg{color:var(--ink-faint)}
.book__del:hover svg{color:var(--danger)}

/* skeleton */
.sk{height:3.9rem;border-radius:var(--radius-sm);background:linear-gradient(100deg,var(--surface-2) 30%,var(--surface) 50%,var(--surface-2) 70%);background-size:200% 100%;animation:sk 1.2s ease-in-out infinite;border:1px solid var(--border)}
@keyframes sk{to{background-position:-200% 0}}

/* empty */
.empty{text-align:center;padding:3.5rem 1rem;color:var(--ink-soft)}
.empty svg{width:2.6rem;height:2.6rem;color:var(--border-2);margin-bottom:.6rem}
.empty__t{font-weight:600;color:var(--ink)}

/* ── Test ──────────────────────────────────────────────────────────────── */
.ask{display:flex;gap:.6rem;margin-bottom:1.4rem}
.ask .input{flex:1}
.results{display:flex;flex-direction:column;gap:.7rem}
.res{padding:1rem 1.1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm)}
.res__head{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}
.res__book{font-weight:600;color:var(--brand-ink)}
.res__heading{color:var(--ink-faint);font-size:.85rem}
.res__text{color:var(--ink-soft);font-size:.9rem;max-width:78ch}

/* ── Toast ─────────────────────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%) translateY(1rem);
  background:var(--ink);color:var(--bg);padding:.7rem 1.1rem;border-radius:999px;
  font-weight:500;font-size:.9rem;box-shadow:var(--shadow-2);z-index:var(--z-toast);
  opacity:0;transition:opacity .2s var(--ease), transform .2s var(--ease);pointer-events:none;
}
.toast.is-show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.is-err{background:var(--danger)}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:820px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;gap:1rem}
  .nav{flex-direction:row;flex-wrap:wrap;flex:1}
  .side__foot{margin:0;flex-direction:row;align-items:center}
  .main{padding:1.5rem 1.1rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}