/* NoteCut — tool page. Colors/tokens come from css/premium-core.css. */

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg, #060d18);
  color: var(--text-primary, #eaf1fb);
  font-family: var(--font-body, 'Hanken Grotesk', system-ui, sans-serif);
}

/* Padding lives on the wrapper, NEVER body — body padding pushes the injected
   DVP header/footer off the page edges. */
.wrap { max-width: 1180px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem); position: relative; z-index: 1; }

/* ── Shared DVP aurora background (orb colors set in premium-core.css) ── */
.dvp-orb { position: fixed; border-radius: 50%; pointer-events: none; will-change: transform; z-index: 0; }
.dvp-orb-1 { width: 620px; height: 420px; filter: blur(76px); top: -140px; left: -120px; animation: ncOrb1 26s ease-in-out infinite; }
.dvp-orb-2 { width: 520px; height: 520px; filter: blur(84px); top: -40px; right: -100px; animation: ncOrb2 32s ease-in-out infinite; }
.dvp-orb-3 { width: 460px; height: 460px; filter: blur(92px); bottom: 8%; left: 30%; animation: ncOrb3 40s ease-in-out infinite; }
@keyframes ncOrb1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,30px)} }
@keyframes ncOrb2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-30px,40px)} }
@keyframes ncOrb3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(20px,-30px)} }
@media (prefers-reduced-motion: reduce) { .dvp-orb-1,.dvp-orb-2,.dvp-orb-3 { animation: none !important; } }

/* ── Header ── */
header.nc-hero { text-align: left; margin-bottom: 2.4rem; }
.nc-kicker { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent, #ff7338); margin: 0 0 .6rem; }
header.nc-hero h1 { font-family: var(--font-display, 'Archivo', sans-serif); font-weight: 800; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1; margin: 0; letter-spacing: -.01em; }
header.nc-hero h1 span { color: var(--accent, #ff7338); }
.nc-tagline { font-size: clamp(1.05rem, 2.2vw, 1.35rem); color: var(--text-primary, #eaf1fb); margin: .8rem 0 .3rem; max-width: 46ch; }
.nc-sub { color: var(--text-secondary, #9fb0c6); margin: 0 0 .8rem; max-width: 60ch; }
.nc-privacy { display: inline-block; font-family: var(--font-mono, monospace); font-size: .66rem; letter-spacing: .06em; color: #6fe3b0; border: 1px solid rgba(111,227,176,.3); background: rgba(111,227,176,.07); padding: 4px 10px; border-radius: 3px; }

/* ── Workspace grid ── */
.nc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.4rem; align-items: start; }
@media (max-width: 900px) { .nc-grid { grid-template-columns: 1fr; } }

.nc-panel { background: rgba(11,21,35,.72); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 1.2rem; backdrop-filter: blur(10px); }
.nc-panel h2 { font-family: var(--font-display, sans-serif); font-size: 1.05rem; margin: 0 0 .2rem; display: flex; align-items: center; gap: .5rem; }
.nc-step { font-family: var(--font-mono, monospace); font-size: .62rem; color: var(--accent, #ff7338); border: 1px solid rgba(255,115,56,.35); border-radius: 3px; padding: 2px 6px; }
.nc-panel p.hint { color: var(--text-secondary, #9fb0c6); font-size: .82rem; margin: .1rem 0 .9rem; }

/* Paste box */
#noteInput { width: 100%; box-sizing: border-box; min-height: 320px; resize: vertical; background: rgba(3,8,16,.85); color: var(--text-primary, #eaf1fb); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: .9rem 1rem; font-family: var(--font-mono, monospace); font-size: .84rem; line-height: 1.55; }
#noteInput:focus { outline: none; border-color: var(--accent, #ff7338); }

/* Settings rail */
.nc-settings { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin-top: 1rem; }
.nc-field { display: flex; flex-direction: column; gap: .3rem; }
.nc-field.full { grid-column: 1 / -1; }
.nc-field label, .nc-field > span { font-family: var(--font-mono, monospace); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary, #9fb0c6); }
.nc-field select, .nc-field input[type="text"] { background: rgba(3,8,16,.85); color: var(--text-primary, #eaf1fb); border: 1px solid rgba(255,255,255,.12); border-radius: 7px; padding: .5rem .6rem; font-family: var(--font-mono, monospace); font-size: .82rem; }
.nc-field select:focus, .nc-field input:focus { outline: none; border-color: var(--accent, #ff7338); }
.nc-check { flex-direction: row; align-items: center; gap: .5rem; }
.nc-check input { accent-color: var(--accent, #ff7338); }

.nc-sample { margin-top: .9rem; background: none; border: 1px solid rgba(255,255,255,.16); color: var(--text-primary, #eaf1fb); font-family: var(--font-mono, monospace); font-size: .74rem; padding: .5rem .8rem; border-radius: 7px; cursor: pointer; }
.nc-sample:hover { border-color: var(--accent, #ff7338); color: var(--accent, #ff7338); }

/* Review table */
.nc-reviewhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: .3rem; }
.nc-count-wrap { font-family: var(--font-mono, monospace); font-size: .7rem; color: var(--text-secondary, #9fb0c6); }
.nc-count-wrap b { color: var(--accent, #ff7338); }

.nc-warn { display: none; align-items: center; gap: .5rem; background: rgba(255,193,7,.1); border: 1px solid rgba(255,193,7,.35); color: #ffd24a; font-size: .78rem; padding: .5rem .7rem; border-radius: 8px; margin: .4rem 0 .8rem; }
.nc-warn[hidden] { display: none; }

.nc-review { display: flex; flex-direction: column; gap: .4rem; max-height: 460px; overflow-y: auto; padding-right: .2rem; }
.nc-review:empty::after { content: "Paste notes to see markers here."; display: block; color: var(--text-secondary, #6f8098); font-size: .82rem; padding: 1.4rem 0; text-align: center; }
.nc-row { display: grid; grid-template-columns: auto auto auto 1fr auto; align-items: center; gap: .55rem; background: rgba(3,8,16,.6); border: 1px solid rgba(255,255,255,.07); border-radius: 9px; padding: .45rem .6rem; }
.nc-row.is-warn { border-color: rgba(255,193,7,.45); }
.nc-row.is-amber { border-color: rgba(255,150,40,.4); }
.nc-dot { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); background: var(--dot, #39d0ff); cursor: pointer; padding: 0; }
.nc-tc { display: flex; align-items: center; gap: .3rem; font-family: var(--font-mono, monospace); font-size: .72rem; }
.nc-src { color: var(--text-secondary, #7d8ea6); }
.nc-arrow { color: var(--accent, #ff7338); }
.nc-tl { width: 96px; background: rgba(3,8,16,.9); color: var(--text-primary, #eaf1fb); border: 1px solid rgba(255,255,255,.1); border-radius: 5px; padding: .25rem .35rem; font-family: var(--font-mono, monospace); font-size: .72rem; }
.nc-tl:focus { outline: none; border-color: var(--accent, #ff7338); }
.nc-cat { font-family: var(--font-mono, monospace); font-size: .58rem; letter-spacing: .06em; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; }
.nc-cat-red { color: #ff6a6a; background: rgba(255,80,80,.12); }
.nc-cat-orange { color: #ffa24a; background: rgba(255,140,50,.12); }
.nc-cat-blue { color: #5bb8ff; background: rgba(60,150,255,.12); }
.nc-cat-purple { color: #c08bff; background: rgba(160,110,255,.12); }
.nc-cat-yellow { color: #ffd24a; background: rgba(255,200,60,.12); }
.nc-cat-green { color: #6fe3b0; background: rgba(80,220,150,.12); }
.nc-cat-cyan { color: #4fd8ff; background: rgba(60,200,255,.12); }
.nc-note { background: rgba(3,8,16,.9); color: var(--text-primary, #eaf1fb); border: 1px solid transparent; border-radius: 5px; padding: .3rem .4rem; font-family: var(--font-body, sans-serif); font-size: .8rem; min-width: 0; }
.nc-note:focus { outline: none; border-color: rgba(255,255,255,.2); }
.nc-flag { color: #ffa24a; font-family: var(--font-mono, monospace); font-weight: 700; cursor: help; }

/* Orb colors for dots */
.nc-dot { --nc-red:#ff5a5a; --nc-orange:#ff8c32; --nc-blue:#3c96ff; --nc-purple:#a06eff; --nc-yellow:#ffc83c; --nc-green:#50dc96; --nc-cyan:#3cc8ff; }

/* Unmatched tray */
.nc-tray { margin-top: .9rem; }
.nc-tray summary { cursor: pointer; font-family: var(--font-mono, monospace); font-size: .7rem; color: var(--text-secondary, #9fb0c6); }
.nc-tray[hidden] { display: none; }
.nc-tray ul { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--text-secondary, #7d8ea6); font-size: .78rem; }
.nc-tray li { margin: .15rem 0; }

/* Export row */
.nc-export { margin-top: 1.2rem; }
.nc-export[hidden] { display: none; }
.nc-export .nc-exlabel { font-family: var(--font-mono, monospace); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary, #9fb0c6); display: block; margin-bottom: .5rem; }
.nc-exbtns { display: flex; flex-wrap: wrap; gap: .5rem; }
.nc-exbtn { background: rgba(255,115,56,.1); border: 1px solid rgba(255,115,56,.35); color: var(--accent, #ff7338); font-family: var(--font-mono, monospace); font-size: .76rem; padding: .55rem .9rem; border-radius: 8px; cursor: pointer; transition: background .15s, transform .1s; }
.nc-exbtn:hover { background: rgba(255,115,56,.2); transform: translateY(-1px); }
.nc-exbtn[data-export="csv"] { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: var(--text-primary, #eaf1fb); }

/* Post-export confirmation (revealed after a download) */
.nc-done { margin-top: 1rem; display: flex; align-items: center; gap: .6rem; background: rgba(255,45,120,.08); border: 1px solid rgba(255,45,120,.28); border-radius: 10px; padding: .7rem .9rem; font-size: .82rem; color: var(--text-primary, #eaf1fb); }
.nc-done[hidden] { display: none; }
.nc-done a { color: #ff5a94; font-weight: 700; text-decoration: none; }
.nc-done a:hover { text-decoration: underline; }

/* ── How-it-works strip ── */
.nc-how { margin-top: 3rem; }
.nc-how h2 { font-family: var(--font-display, sans-serif); font-size: 1.4rem; margin: 0 0 1.2rem; }
.nc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.nc-stepcard { background: rgba(11,21,35,.6); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 1.1rem; }
.nc-stepcard span { font-family: var(--font-mono, monospace); font-size: .9rem; color: var(--accent, #ff7338); }
.nc-stepcard h3 { font-size: 1rem; margin: .5rem 0 .3rem; }
.nc-stepcard p { color: var(--text-secondary, #9fb0c6); font-size: .85rem; margin: 0; }