/*
 * Music Notebook — Herbarium production theme
 * Load after fav-notebook.css. The production DOM/API stays intact; this file
 * supplies the approved leather, parchment, botanical and alchemy visual layer.
 */

#hmix-notebook {
  --gold: #a87921;
  --gold-bright: #d3aa4d;
  --rule: rgba(92, 75, 44, .24);
  --rule-strong: rgba(139, 102, 35, .48);
  --ink: #2d2a20;
  --ink-dim: #716b58;
  --green: #54785f;
  --green-soft: #436b51;
  --paper: #f4edd5;
  --paper-light: #fbf7e8;
  --leather: #324533;
  --leather-dark: #1f3026;
  --leather-warm: #594b32;
  --wax: #8f3a36;
  background:
    radial-gradient(circle at 50% 18%, rgba(37, 69, 52, .35), transparent 46%),
    linear-gradient(135deg, rgba(4, 13, 10, .92), rgba(10, 27, 21, .88));
}

#hmix-notebook .hmix-notebook {
  width: min(1440px, 94vw);
  height: min(88vh, 900px);
  min-height: 610px;
  grid-template-columns: 230px minmax(440px, 1fr) 330px;
  grid-template-rows: auto 1fr auto;
  color: var(--ink);
  background:
    linear-gradient(rgba(249, 244, 226, .91), rgba(239, 228, 196, .94)),
    url("../images/music-notebook-herbarium-v1.webp") center / cover;
  border: 1px solid rgba(184, 148, 70, .7);
  border-radius: 20px 20px 14px 14px;
  box-shadow:
    0 42px 120px -26px rgba(0, 0, 0, .78),
    0 0 0 1px rgba(244, 225, 157, .14),
    inset 0 0 70px rgba(90, 63, 25, .12);
  font-family: "Noto Sans JP", "Yu Gothic", sans-serif;
}

#hmix-notebook .hmix-notebook::before {
  inset: 7px;
  border: 1px solid rgba(123, 94, 39, .42);
  border-radius: 14px 14px 9px 9px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 250, 226, .48),
    inset 0 0 0 4px rgba(79, 63, 35, .13);
}

#hmix-notebook .hmix-notebook::after {
  inset: 12px;
  opacity: .72;
  background:
    linear-gradient(var(--gold), var(--gold)) left top / 42px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left top / 1px 42px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right top / 42px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right top / 1px 42px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left bottom / 42px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left bottom / 1px 42px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right bottom / 42px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right bottom / 1px 42px no-repeat;
}

/* Leather header */
#hmix-notebook .hnb-head {
  position: relative;
  padding: 17px 24px 15px;
  color: #f6efd9;
  border-bottom: 1px solid rgba(215, 187, 112, .4);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .045), transparent 36%),
    repeating-linear-gradient(102deg, rgba(255,255,255,.018) 0 2px, transparent 2px 7px),
    linear-gradient(135deg, #42543b, #263c2e 58%, #314635);
  box-shadow: inset 0 -10px 22px rgba(10, 24, 17, .18);
}

#hmix-notebook .hnb-head__kicker {
  color: #d8bc72;
  font-family: Georgia, "Times New Roman", serif;
}

#hmix-notebook .hnb-head__title {
  color: #fff8e3;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
}

#hmix-notebook .hnb-head__count { color: #e1c274; }

#hmix-notebook .hnb-search {
  width: min(310px, 28vw);
  color: #fff9e9;
  background: rgba(18, 35, 25, .46);
  border-color: rgba(221, 198, 132, .4);
  box-shadow: inset 0 1px 8px rgba(0, 0, 0, .2);
}

#hmix-notebook .hnb-search::placeholder { color: rgba(248, 239, 214, .7); }
#hmix-notebook .hnb-close {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  color: #f8edd2;
  border-color: rgba(225, 202, 139, .42);
}

/* Leather index */
#hmix-notebook .hnb-spine {
  padding: 18px 13px 20px;
  color: #eee4c8;
  border-right: 1px solid rgba(79, 60, 29, .5);
  background:
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 28%, rgba(0,0,0,.17)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
    linear-gradient(160deg, #455740, #2e432f 58%, #263a2b);
  box-shadow: inset -14px 0 25px -18px #0f1c13;
}

#hmix-notebook .hnb-spine__h { color: #cbbf97; }

#hmix-notebook .hnb-chapter {
  width: calc(100% - 4px);
  margin: 0 4px 8px 0;
  padding: 12px 12px 12px 18px;
  color: #f3ead0;
  border: 1px solid rgba(226, 207, 152, .15);
  border-radius: 4px 12px 12px 4px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04), transparent 45%),
    rgba(55, 50, 36, .36);
  box-shadow: inset -8px 0 18px rgba(0,0,0,.1);
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}

#hmix-notebook .hnb-chapter::before {
  left: 4px;
  top: 7px;
  bottom: 7px;
  width: 4px;
  background: #81775b;
}

#hmix-notebook .hnb-chapter:hover {
  transform: translateX(3px);
  background: rgba(105, 90, 54, .38);
}

#hmix-notebook .hnb-chapter.is-active {
  transform: translateX(5px);
  color: #fff8df;
  border-color: rgba(221, 183, 90, .54);
  background: linear-gradient(90deg, rgba(170, 126, 43, .3), rgba(72, 69, 45, .48));
  box-shadow: inset 4px 0 0 #bd9139, 0 7px 18px rgba(12, 24, 16, .18);
}

#hmix-notebook .hnb-chapter__name {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
}

#hmix-notebook .hnb-chapter__meta { color: #c6bea4; }
#hmix-notebook .hnb-chapter__meta b { color: #e2c878; }

#hmix-notebook .hnb-newchapter {
  color: #dfd5b9;
  border-color: rgba(222, 199, 132, .32);
}

/* Studio Pass — visible value proposition, but quieter than the main task */
#hmix-notebook .hnb-studio-pass {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 20px 3px 2px;
  padding: 13px 13px 12px;
  color: #f5ead0;
  text-decoration: none;
  border: 1px solid rgba(216, 179, 81, .38);
  border-radius: 12px;
  background:
    radial-gradient(circle at 90% 15%, rgba(214, 177, 80, .18), transparent 38%),
    linear-gradient(145deg, rgba(30, 47, 34, .9), rgba(70, 57, 36, .78));
  box-shadow: 0 12px 26px rgba(11, 22, 15, .18), inset 0 1px rgba(255,255,255,.06);
}

#hmix-notebook .hnb-studio-pass__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#hmix-notebook .hnb-studio-pass__top b { font: 600 10px/1 Georgia, serif; letter-spacing: .16em; color: #dec57e; }
#hmix-notebook .hnb-studio-pass__top em { padding: 4px 7px; color: #2b2a1f; background: #ead893; border-radius: 999px; font: 700 10px/1 sans-serif; font-style: normal; }
#hmix-notebook .hnb-studio-pass strong { font: 600 13px/1.5 "Yu Mincho", serif; }
#hmix-notebook .hnb-studio-pass ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
#hmix-notebook .hnb-studio-pass li { position: relative; padding-left: 13px; color: #e5dcc2; font-size: 10.5px; line-height: 1.55; }
#hmix-notebook .hnb-studio-pass li::before { content: "✦"; position: absolute; left: 0; top: 0; color: #d9ba68; font-size: 8px; }
#hmix-notebook .hnb-studio-pass > span:not(.hnb-studio-pass__top) { color: #d9d0b8; font-size: 10.5px; line-height: 1.7; }
#hmix-notebook .hnb-studio-pass i { color: #e5cc83; font-size: 11px; font-style: normal; }
#hmix-notebook .hnb-studio-pass:hover { border-color: rgba(232, 202, 117, .7); transform: translateY(-1px); }

/* Paper pages */
#hmix-notebook .hnb-pages {
  isolation: isolate;
  color: var(--ink);
  background:
    linear-gradient(rgba(250, 246, 229, .74), rgba(244, 235, 208, .78)),
    url("../images/music-notebook-herbarium-v1.webp") center / cover;
  box-shadow: inset 18px 0 28px -28px rgba(62, 46, 20, .6);
}

#hmix-notebook .hnb-pages::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 4%;
  bottom: 4%;
  width: min(32vw, 330px);
  aspect-ratio: 1;
  border: 1px solid rgba(104, 82, 43, .13);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 17%, rgba(105, 83, 43, .12) 17.5% 18%, transparent 18.5% 33%, rgba(105,83,43,.1) 33.5% 34%, transparent 34.5%),
    repeating-conic-gradient(from 15deg, rgba(105,83,43,.09) 0 1deg, transparent 1deg 30deg);
  opacity: .75;
  pointer-events: none;
}

#hmix-notebook .hnb-pages::after {
  content: "FIELD NOTES   ·   FOLIO 04";
  position: absolute;
  z-index: -1;
  right: 28px;
  bottom: 12px;
  color: rgba(69, 59, 40, .42);
  font: 9px/1 Georgia, serif;
  letter-spacing: .24em;
  pointer-events: none;
}

#hmix-notebook .hnb-select-tools {
  color: #403b2d;
  border-bottom-color: rgba(91, 72, 37, .22);
  background: rgba(247, 240, 216, .92);
  box-shadow: 0 7px 18px rgba(84, 64, 28, .08);
}

#hmix-notebook .hnb-select-tools__label { color: #6f5423; }
#hmix-notebook .hnb-select-tools__btn { color: #3c392e; background: rgba(255,255,255,.46); border-color: rgba(91,72,37,.3); }

#hmix-notebook .hnb-row {
  position: relative;
  z-index: 1;
  min-height: 62px;
  color: var(--ink);
  border-bottom-color: rgba(87, 70, 39, .13);
}

#hmix-notebook .hnb-row:hover { background: rgba(94, 121, 91, .085); }
#hmix-notebook .hnb-row.is-active { background: rgba(80, 116, 86, .11); }
#hmix-notebook .hnb-row.is-selected {
  background: rgba(177, 132, 47, .095);
  box-shadow: inset 4px 0 0 #b6862f, inset 0 0 0 1px rgba(169, 126, 43, .2);
}
#hmix-notebook .hnb-row.is-playing { background: rgba(80, 120, 89, .13); }
#hmix-notebook .hnb-row.is-playing .hnb-row__title { color: #2e6846; }

#hmix-notebook .hnb-check {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  margin: 0;
  border: 2px solid #817b67;
  border-radius: 6px;
  background: rgba(255, 253, 242, .84);
  box-shadow: inset 0 1px 2px rgba(52, 42, 24, .08);
}

#hmix-notebook .hnb-check::after {
  content: "✓";
  color: #fff9e8;
  font: 800 15px/1 sans-serif;
  transform: scale(0);
  transition: transform .12s ease;
}

#hmix-notebook .hnb-check:checked { background: #aa7926; border-color: #805812; }
#hmix-notebook .hnb-check:checked::after { transform: scale(1); }
#hmix-notebook .hnb-check:focus-visible { outline: 3px solid rgba(40, 104, 69, .28); outline-offset: 2px; }

#hmix-notebook .hnb-row__title { color: #29271f; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; }
#hmix-notebook .hnb-row__tags, #hmix-notebook .hnb-row__dur { color: #756f5d; }
#hmix-notebook .hnb-iconbtn { color: #716b59; }
#hmix-notebook .hnb-fav.is-on { color: #a37526; }

#hmix-notebook .hnb-badge { color: #6d6653; border-color: rgba(91,72,37,.3); background: rgba(255,255,255,.32); }
#hmix-notebook .hnb-badge[data-lic="licensed"] {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: #f7e7ce;
  background: radial-gradient(circle at 35% 30%, #b1584e, var(--wax) 60%, #6e2828);
  border: 2px solid #73312f;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(52, 29, 20, .25), inset 0 0 0 2px rgba(255, 214, 178, .12);
  font-size: 0;
}
#hmix-notebook .hnb-badge[data-lic="licensed"]::after { content: "済"; font: 700 11px/1 "Yu Mincho", serif; }

/* Specimen detail */
#hmix-notebook .hnb-preview {
  gap: 13px;
  color: var(--ink);
  border-left-color: rgba(92, 75, 44, .24);
  background:
    linear-gradient(rgba(250, 246, 230, .86), rgba(239, 229, 203, .9)),
    url("../images/music-notebook-herbarium-v1.webp") 78% center / cover;
  box-shadow: inset 16px 0 25px -26px rgba(68, 48, 22, .58);
}

#hmix-notebook .hnb-preview::before {
  content: "SELECTED TRACK  /  選択中の曲";
  color: #82724e;
  font: 9px/1.2 Georgia, "Yu Mincho", serif;
  letter-spacing: .18em;
}

#hmix-notebook .hnb-preview__title { color: #28261e; font-family: "Yu Mincho", serif; font-size: 19px; }
#hmix-notebook .hnb-preview__tags, #hmix-notebook .hnb-preview__empty, #hmix-notebook .hnb-preview__sect { color: #746d59; }
#hmix-notebook .hnb-wave span { background: linear-gradient(180deg, #a37b2d, rgba(66, 108, 77, .62)); }
#hmix-notebook .hnb-memo { color: #322f25; background: rgba(255, 252, 238, .56); border-color: rgba(91, 72, 37, .3); }
#hmix-notebook .hnb-ab__btn, #hmix-notebook .hnb-addch-one { color: #373328; background: rgba(255,255,255,.36); border-color: rgba(91,72,37,.27); }
#hmix-notebook .hnb-apply-one { color: #775820; border-color: rgba(145, 104, 31, .5); }

/* Footer: restrained brass hierarchy */
#hmix-notebook .hnb-foot {
  color: #f3ead1;
  border-top-color: rgba(209, 179, 103, .36);
  background:
    linear-gradient(0deg, rgba(22, 42, 29, .98), rgba(48, 69, 49, .95)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 2px, transparent 2px 7px);
}

#hmix-notebook .hnb-apply-actions { grid-template-columns: .9fr .9fr 1.05fr; }
#hmix-notebook .hnb-cta { min-height: 48px; padding: 12px 14px; border-radius: 10px; font-size: 13px; box-shadow: none; }
#hmix-notebook .hnb-cta--download { color: #f1ead8; background: rgba(255,255,255,.06); border-color: rgba(229, 214, 173, .25); }
#hmix-notebook .hnb-cta--cue { color: #f0e4c3; background: rgba(192, 159, 82, .12); border-color: rgba(219, 190, 111, .36); }
#hmix-notebook .hnb-cta--selected { color: #2e2a1e; background: linear-gradient(180deg, #ddc06f, #b68832); border-color: #e2c875; }
#hmix-notebook .hnb-cta__sub { color: #d2c8ab; }
#hmix-notebook .hnb-bulk { color: #f6ecd2; background: rgba(38, 55, 39, .98); border-color: rgba(219,190,111,.48); }
#hmix-notebook .hnb-bulk__btn { color: #f4ead0; }

/* Production child surfaces inherit the paper/leather palette */
#hmix-notebook .hnb-picker__panel,
#hmix-notebook .hnb-wizard__panel {
  color: var(--ink);
  background:
    linear-gradient(rgba(249, 244, 225, .95), rgba(238, 227, 198, .97)),
    url("../images/music-notebook-herbarium-v1.webp") center / cover;
  border-color: rgba(129, 91, 26, .5);
}
#hmix-notebook .hnb-picker__head,
#hmix-notebook .hnb-picker__item,
#hmix-notebook .wz-card,
#hmix-notebook .wz-trackrow,
#hmix-notebook .wz-sum__row { color: #302d23; background: rgba(255,255,255,.35); }
#hmix-notebook .wz-input,
#hmix-notebook .wz-usage__sel { color: #302d23; background: rgba(255,252,238,.65); }

@media (max-width: 960px) and (min-width: 761px) {
  #hmix-notebook .hmix-notebook { grid-template-columns: 205px minmax(390px, 1fr) 285px; }
}

@media (max-width: 760px) {
  #hmix-notebook { background: linear-gradient(180deg, rgba(13, 34, 25, .9), rgba(7, 19, 14, .96)); }
  #hmix-notebook .hmix-notebook {
    width: 100vw;
    height: 94dvh;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    border-radius: 18px 18px 0 0;
    background: #f5eed7;
  }
  #hmix-notebook .hnb-head { padding: 12px 14px; }
  #hmix-notebook .hnb-search { width: 100%; }
  #hmix-notebook .hnb-spine {
    padding: 9px 11px;
    gap: 7px;
    background: linear-gradient(90deg, #334936, #263d2e);
  }
  #hmix-notebook .hnb-chapter { width: auto; margin: 0; padding: 9px 13px 9px 17px; border-radius: 7px 12px 12px 7px; }
  #hmix-notebook .hnb-chapter.is-active { transform: none; }
  #hmix-notebook .hnb-newchapter { color: #e2d7b8; }
  #hmix-notebook .hnb-studio-pass {
    flex: 0 0 210px;
    margin: 0;
    padding: 9px 11px;
    gap: 3px;
    border-radius: 9px;
  }
  #hmix-notebook .hnb-studio-pass > span:not(.hnb-studio-pass__top),
  #hmix-notebook .hnb-studio-pass ul,
  #hmix-notebook .hnb-studio-pass i { display: none; }
  #hmix-notebook .hnb-studio-pass strong { font-size: 11.5px; }
  #hmix-notebook .hnb-pages {
    background:
      linear-gradient(rgba(250, 246, 231, .9), rgba(241, 232, 207, .92)),
      url("../images/music-notebook-herbarium-v1.webp") center / cover;
  }
  #hmix-notebook .hnb-pages::before { width: 210px; opacity: .38; right: -40px; }
  #hmix-notebook .hnb-pages::after { display: none; }
  #hmix-notebook .hnb-select-tools { padding: 7px 11px; }
  #hmix-notebook .hnb-row { min-height: 58px; padding: 9px 12px; gap: 8px; }
  #hmix-notebook .hnb-check { width: 22px; height: 22px; }
  #hmix-notebook .hnb-badge[data-lic="licensed"] { width: 30px; height: 30px; }
  #hmix-notebook .hnb-preview {
    color: var(--ink);
    background:
      linear-gradient(rgba(250,246,230,.95), rgba(239,229,203,.97)),
      url("../images/music-notebook-herbarium-v1.webp") 70% center / cover;
    border-top-color: rgba(129, 91, 26, .54);
  }
  #hmix-notebook .hnb-foot { padding: 10px 11px calc(10px + env(safe-area-inset-bottom)); }
  #hmix-notebook .hnb-apply-actions { grid-template-columns: 1fr 1.08fr; }
  #hmix-notebook .hnb-cta--download { display: none; }
  #hmix-notebook .hnb-cta { min-height: 45px; padding: 10px 8px; font-size: 12px; }
  #hmix-notebook .hnb-cta__sub { margin-top: 5px; font-size: 9.5px; }
}

@media (prefers-reduced-motion: reduce) {
  #hmix-notebook .hnb-chapter,
  #hmix-notebook .hnb-studio-pass { transition: none; }
}