/* ───────────────────────────────────────────────
   Études de Pesoc — paper & graphite design system
   ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --paper:        #f5f2ea;
  --paper-raise:  #fcfaf5;
  --paper-sink:   #ece8dd;
  --ink:          #1d1a16;
  --ink-soft:     #5c564c;
  --ink-faint:    #9b9385;
  --line:         #d8d2c4;
  --line-strong:  #b9b1a0;
  --sanguine:     #a14e35;   /* accent — sanguine chalk */
  --sanguine-soft:#a14e3522;
  --ok:           #5a7a52;
  --warn:         #a3822e;
  --err:          #a13e35;
  --shadow:       0 2px 14px rgba(40,32,20,.10);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Inter', -apple-system, sans-serif;
  --mono:  'JetBrains Mono', monospace;
}
html.nuit {
  --paper:        #191a1c;
  --paper-raise:  #212325;
  --paper-sink:   #131415;
  --ink:          #e8e4da;
  --ink-soft:     #a8a195;
  --ink-faint:    #6c665c;
  --line:         #32343a;
  --line-strong:  #4a4c52;
  --sanguine:     #c96e4f;
  --sanguine-soft:#c96e4f26;
  --shadow:       0 2px 16px rgba(0,0,0,.45);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--sans); font-size:14px; color:var(--ink);
  background: var(--paper);
  background-image: radial-gradient(circle at 18% -8%, rgba(161,78,53,.045), transparent 44%);
  min-height:100vh;
  transition: background-color .25s, color .25s;
}
/* ── ambient glow around the viewport (theme-aware, breathing) ── */
@keyframes breathe {
  0%   { opacity:.72; }
  50%  { opacity:1; }
  100% { opacity:.72; }
}
body::after {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:55; /* над шапкой (20), под veil (60) и lightbox (80) */
  box-shadow:
    inset 0 0 110px rgba(161,78,53,.16),
    inset 0 0 260px rgba(193,114,73,.11),
    inset 0 0 480px rgba(161,78,53,.06);
  animation: breathe 8s ease-in-out infinite;
}
html.nuit body::after {
  box-shadow:
    inset 0 0 120px rgba(201,110,79,.12),
    inset 0 0 280px rgba(201,110,79,.07),
    inset 0 0 520px rgba(0,0,0,.36);
  animation: breathe 8s ease-in-out infinite;
}

/* ── layout ── */
.frame { display:flex; min-height:100vh; }
.side {
  width:218px; flex-shrink:0; padding:34px 26px;
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px;
  position:sticky; top:0; height:100vh;
}
.brand { font-family:'Marcellus', var(--serif); font-style:normal; font-size:23px; font-weight:400; line-height:1.2; letter-spacing:.04em; margin-bottom:4px; }
.brand em { font-style:normal; color:var(--sanguine); }
.brand-sub { font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:30px; }

.nav a {
  display:block; padding:7px 0; font-family:var(--mono); font-size:12.5px;
  color:var(--ink-soft); text-decoration:none; letter-spacing:.02em;
  border-bottom:1px solid transparent; transition:color .15s;
}
.nav a:hover { color:var(--ink); }
.nav a.active { color:var(--sanguine); }
.nav a.active::before { content:"— "; }

.side-foot { margin-top:auto; display:flex; flex-direction:column; gap:10px; }
.pulse { font-family:var(--mono); font-size:10px; color:var(--ink-faint); line-height:1.8; }
.pulse b { color:var(--ink-soft); font-weight:500; }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; vertical-align:0; }
.dot.ok{background:var(--ok)} .dot.bad{background:var(--err)} .dot.warn{background:var(--warn)}
.nuit-btn {
  font-family:var(--mono); font-size:9.5px; background:none; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:20px; padding:5px 9px; cursor:pointer; width:fit-content;
  white-space:nowrap; letter-spacing:.02em;
}
.nuit-btn:hover { border-color:var(--line-strong); color:var(--ink); }

.main { flex:1; min-width:0; padding:34px 44px 80px; }
.page-title { font-family:var(--serif); font-size:34px; font-weight:500; margin-bottom:2px; }
.page-title em { font-style:italic; color:var(--sanguine); }
.page-sub { font-size:12.5px; color:var(--ink-faint); margin-bottom:26px; font-family:var(--mono); }

/* ── controls ── */
input[type=text], input[type=number], textarea, select {
  font-family:var(--sans); font-size:13px; color:var(--ink);
  background:var(--paper-raise); border:1px solid var(--line); border-radius:6px;
  padding:8px 12px; outline:none; transition:border-color .15s;
}
input:focus, textarea:focus, select:focus { border-color:var(--sanguine); }
::placeholder { color:var(--ink-faint); }
label { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:5px; }
.field { margin-bottom:14px; }

.btn {
  font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink);
  border-radius:6px; padding:9px 20px; cursor:pointer; transition:all .15s;
}
.btn:hover { background:var(--sanguine); border-color:var(--sanguine); color:#fff; }
.btn:disabled { opacity:.35; cursor:default; }
.btn:disabled:hover { background:var(--ink); border-color:var(--ink); }
.btn.ghost { background:none; color:var(--ink-soft); border-color:var(--line-strong); }
.btn.ghost:hover { color:var(--sanguine); border-color:var(--sanguine); background:none; }

/* ── chips / tags ── */
.chip {
  display:inline-block; font-family:var(--mono); font-size:10.5px; padding:3px 9px;
  border:1px solid var(--line); border-radius:20px; color:var(--ink-soft);
  cursor:pointer; text-decoration:none; transition:all .12s; background:var(--paper-raise);
}
.chip:hover { border-color:var(--sanguine); color:var(--sanguine); }
.chip.on { background:var(--sanguine); border-color:var(--sanguine); color:#fff; }

/* ── badges ── */
.badge { font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; padding:2px 8px; border-radius:3px; text-transform:uppercase; white-space:nowrap; }
.badge.prov { background:var(--warn); color:var(--paper-raise); }
.badge.main { border:1px solid var(--line-strong); color:var(--ink-soft); }
.badge.hand { color:var(--sanguine); border:1px solid var(--sanguine); }
.badge.auto { color:var(--ink-faint); border:1px solid var(--line); }

/* ── gallery ── */
.year-head {
  font-family:var(--serif); font-size:21px; font-style:italic; color:var(--ink-soft);
  margin:30px 0 12px; padding-bottom:6px; border-bottom:1px solid var(--line);
  display:flex; align-items:baseline; gap:10px;
}
.year-head .n { font-family:var(--mono); font-size:10px; font-style:normal; color:var(--ink-faint); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:18px; }
.card {
  background:var(--paper-raise); border:1px solid var(--line); border-radius:4px;
  overflow:hidden; cursor:pointer; transition:transform .18s, box-shadow .18s, border-color .18s;
}
.card:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line-strong); }
.card .im { aspect-ratio:1/1.15; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; }
/* в ночи внутренность полароида остаётся белой — скетчи на белой бумаге */
html.nuit .card .im { background:#fff; }
.card .im img { width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .35s; }
.card .im img.in { opacity:1; }
.card .im .ph { font-family:var(--mono); font-size:10px; color:var(--ink-faint); }
.card .cap { padding:9px 11px 11px; border-top:1px solid var(--line); }
.card .nm { display:flex; align-items:center; gap:6px; }
.card .nm span.t { font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
.card .meta { font-family:var(--mono); font-size:9.5px; color:var(--ink-faint); margin-top:3px; }
.card .tg { margin-top:7px; display:flex; flex-wrap:wrap; gap:4px; }

/* ── overlay / detail ── */
.veil { position:fixed; inset:0; background:rgba(20,16,10,.55); display:none; align-items:center; justify-content:center; z-index:60; backdrop-filter:blur(3px); }
.veil.show { display:flex; }
.sheet {
  background:var(--paper); border:1px solid var(--line-strong); border-radius:8px;
  width:min(1060px,94vw); height:min(760px,92vh); display:flex; overflow:hidden; box-shadow:var(--shadow);
}
.sheet .view { flex:1.4; background:#fff; display:flex; align-items:center; justify-content:center; position:relative; min-width:0; }
html.nuit .sheet .view { background:#fff; }
.sheet .view img { max-width:100%; max-height:100%; object-fit:contain; }
.sheet .panel { flex:1; max-width:380px; border-left:1px solid var(--line); padding:24px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
.x {
  position:absolute; top:12px; right:14px; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line-strong); background:var(--paper); color:var(--ink); font-size:15px;
  cursor:pointer; z-index:5;
}
.x:hover { color:var(--sanguine); border-color:var(--sanguine); }
.pn { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; font-family:var(--mono); font-size:11px; color:var(--ink-faint); }
.pn button { background:none; border:1px solid var(--line); border-radius:5px; color:var(--ink-soft); padding:4px 12px; cursor:pointer; font-family:var(--mono); font-size:11px; }
.pn button:hover { color:var(--sanguine); border-color:var(--sanguine); }

/* ── review (triage) ── */
.stage { display:flex; gap:26px; align-items:flex-start; }
.stage .easel {
  flex:1.5; background:#fff; border:1px solid var(--line); border-radius:6px;
  min-height:480px; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
html.nuit .stage .easel { background:#fff; }
.stage .easel img { max-width:100%; max-height:74vh; object-fit:contain; }
.stage .desk { flex:1; max-width:360px; display:flex; flex-direction:column; gap:14px; }
.verdicts { display:flex; gap:8px; }
.vbtn {
  flex:1; padding:13px 6px; text-align:center; cursor:pointer; border-radius:6px;
  border:1px solid var(--line-strong); background:var(--paper-raise); font-family:var(--mono); font-size:12px; color:var(--ink-soft);
  transition:all .12s;
}
.vbtn small { display:block; font-size:9px; color:var(--ink-faint); margin-top:3px; }
.vbtn:hover { border-color:var(--ink); color:var(--ink); }
.vbtn.sel-good { background:var(--ok); border-color:var(--ok); color:#fff; }
.vbtn.sel-mid  { background:var(--warn); border-color:var(--warn); color:#fff; }
.vbtn.sel-bad  { background:var(--err); border-color:var(--err); color:#fff; }
.keysrow { font-family:var(--mono); font-size:10px; color:var(--ink-faint); line-height:2; }
.keysrow kbd { border:1px solid var(--line-strong); border-radius:3px; padding:1px 6px; font-size:9.5px; background:var(--paper-raise); }

/* ── delta ── */
.pair { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.slot {
  border:1.5px dashed var(--line-strong); border-radius:6px; min-height:330px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; color:var(--ink-faint); font-family:var(--mono); font-size:11.5px;
  background:var(--paper-raise); overflow:hidden; position:relative; transition:border-color .15s;
}
.slot:hover, .slot.drag { border-color:var(--sanguine); color:var(--sanguine); }
.slot img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; }
html.nuit .slot img { background:#fff; }
.slot .lbl { position:absolute; top:10px; left:12px; z-index:2; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); background:var(--paper); padding:2px 8px; border-radius:3px; border:1px solid var(--line); }

/* ── toolbar (как в /view): моно-шрифт у поиска и селектов ── */
.toolbar input[type=text], .toolbar select {
  font-family:var(--mono); font-size:11.5px; letter-spacing:.02em;
  padding:8px 12px; color:var(--ink-soft);
}
.toolbar input[type=text]:focus, .toolbar select:focus { color:var(--ink); }
.toolbar input[type=text]::placeholder { font-family:var(--mono); font-size:11.5px; }

/* ── public visibility tick ── */
.pubtick {
  display:flex; align-items:center; gap:5px; cursor:pointer;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); margin:0; user-select:none;
}
.pubtick input { accent-color:var(--sanguine); width:13px; height:13px; cursor:pointer; margin:0; }
.pubtick:has(input:checked) { color:var(--sanguine); }
.pubtick.off { opacity:.45; }

/* ── misc ── */
.note { font-family:var(--mono); font-size:11px; color:var(--ink-faint); }
.note.err { color:var(--err); }
.note.ok { color:var(--ok); }
.hr { border:none; border-top:1px solid var(--line); margin:20px 0; }
.empty {
  text-align:center; padding:70px 20px; color:var(--ink-faint); font-family:var(--mono); font-size:12px; line-height:2;
  border:1.5px dashed var(--line); border-radius:8px;
}
.empty .big { font-family:var(--serif); font-style:italic; font-size:20px; color:var(--ink-soft); }
.toast {
  position:fixed; bottom:26px; left:50%; transform:translate(-50%,18px);
  background:var(--ink); color:var(--paper); font-family:var(--mono); font-size:12px;
  padding:10px 22px; border-radius:30px; opacity:0; pointer-events:none; transition:all .25s; z-index:99;
}
.toast.show { opacity:1; transform:translate(-50%,0); }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.grow { flex:1; }

@media (max-width: 880px) {
  .frame { flex-direction:column; }
  .side { width:100%; height:auto; position:static; flex-direction:row; align-items:center; flex-wrap:wrap; padding:16px 20px; border-right:none; border-bottom:1px solid var(--line); }
  .brand { margin:0; font-size:20px; } .brand-sub{display:none}
  .nav { display:flex; gap:14px; margin-left:auto; } .nav a{padding:4px 0}
  .side-foot { display:none; }
  .main { padding:22px 18px 60px; }
  .stage { flex-direction:column; } .stage .desk{max-width:none}
  .sheet { flex-direction:column; height:94vh; } .sheet .panel{max-width:none}
}