@import url('./close-button.css');
/* Nistafen Dark Herbarium v1. Opt-in, no global resets. See docs/ui-herbarium.md. */
.herbarium {
 --hb-bg:#191a18; --hb-panel:#242522; --hb-well:#141513;
 --hb-text:#e3ded0; --hb-muted:#b0b4a9; --hb-line:#807f70;
 --hb-focus:#e3ded0; --hb-danger:#e0a49b; --hb-azure:#61baff;
 --hb-health:#985956; --hb-stamina:#858b52;
 --hb-body:'Segoe UI',sans-serif; --hb-heading:Georgia,'Times New Roman',serif;
 color:var(--hb-text); font:15px/1.5 var(--hb-body); color-scheme:dark;
}
.herbarium *, .herbarium *::before, .herbarium *::after {box-sizing:border-box}
.herbarium [hidden] {display:none!important}
.hb-panel {position:relative; isolation:isolate; min-width:0; padding:28px; background:var(--hb-panel) url('./paper-fine-v3.png'); border:12px solid transparent; border-image:url('./frame.svg') 12 / 12px / 0 round; box-shadow:0 12px 30px #0003}
.hb-panel--compact {padding:16px; box-shadow:none}
.hb-panel--quiet {border-image:none; border:1px solid #64675b; padding:16px; box-shadow:none}
.hb-panel--flower {padding-top:66px}
.hb-title {margin:0; font:400 28px/1.2 var(--hb-heading); overflow-wrap:anywhere}
.hb-title--small {font-size:21px}
.hb-muted {color:var(--hb-muted); font-size:13px}
.hb-rule {height:1px; border:0; margin:20px 0; background:linear-gradient(90deg,transparent,#807f7099 9%,#807f7055 91%,transparent)}
.hb-ornament {position:absolute; display:block; object-fit:contain; pointer-events:none; user-select:none; z-index:1}
.hb-flower {width:140px; height:140px; left:-26px; top:-64px}
.hb-corner {width:68px; height:68px; left:-15px; top:-15px}
.hb-sprig {width:58px; height:112px; right:8px; top:12px; opacity:.65}
.hb-panel--botanical {padding-right:76px}
.hb-button, .hb-input, .hb-select, .hb-tab, .hb-slot, .hb-icon-button {font:inherit; color:var(--hb-text)}
.hb-button {min-height:44px; padding:10px 20px; border:1px solid var(--hb-line); border-radius:3px 5px 3px 4px; background:var(--hb-well) url('./paper-fine-v3.png'); cursor:pointer; text-align:center; transition:background-color 120ms,border-color 120ms}
.hb-button:hover:not(:disabled), .hb-button[data-preview-state=hover] {background-color:#303631; border-color:var(--hb-text)}
.hb-button:active:not(:disabled) {background-color:#3b433d; box-shadow:inset 0 2px 4px #0005}
.hb-button--primary {background-color:#c9c6b9; color:#191d19; border-color:#e3ded0; font-weight:600}
.hb-button--primary:hover:not(:disabled) {background-color:#e1ded2}
.hb-button--primary:active:not(:disabled) {background-color:#b6b5a6}
.hb-button:disabled {background-color:#363b37; border-color:#666b60; color:#b3b7ad; cursor:not-allowed}
.hb-button[aria-busy=true] {cursor:progress}
.hb-button[aria-busy=true]::before {content:''; display:inline-block; width:12px; height:12px; border:1px solid currentColor; border-right-color:transparent; border-radius:50%; margin-right:10px; vertical-align:-1px; animation:hb-spin 900ms linear infinite}
.hb-full {width:100%}
.hb-field {display:grid; gap:7px; margin-top:20px; min-width:0}
.hb-input, .hb-select {width:100%; min-width:0; min-height:46px; padding:10px 13px; background:var(--hb-well); border:1px solid #777d6e; border-radius:3px; box-shadow:inset 0 2px 4px #0002}
.hb-input::placeholder {color:#a3aa9d}
.hb-input[aria-invalid=true] {border-color:var(--hb-danger)}
.hb-error {color:var(--hb-danger); margin:5px 0 0; font-size:13px}
.hb-help {color:var(--hb-muted); margin:5px 0 0; font-size:13px}
.herbarium :is(button,input,select,a,summary):focus-visible {outline:2px solid var(--hb-focus); outline-offset:4px}
.hb-password {position:relative}
.hb-password .hb-input {padding-right:54px}
.hb-icon-button {display:inline-grid; place-items:center; width:44px; height:44px; border:0; background:transparent; cursor:pointer; flex-shrink:0}
.hb-password .hb-icon-button {position:absolute; right:1px; top:1px}
.hb-icon-button:hover {background:#ffffff0c}
.hb-icon-button svg {width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.4}
.hb-tabs {display:flex; border-bottom:1px solid #807f7070; gap:8px}
.hb-tab {min-height:44px; padding:10px 16px; border:0; border-bottom:2px solid transparent; background:none; color:var(--hb-muted); cursor:pointer}
.hb-tab[aria-selected=true] {color:var(--hb-text); border-bottom-color:var(--hb-text)}
.hb-tab:hover {color:var(--hb-text)}
.hb-header {display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0}
.hb-grid {display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px}
.hb-slot {position:relative; aspect-ratio:1; min-width:44px; padding:6px; border:1px solid #636b5d; border-radius:3px; background:var(--hb-well); cursor:pointer}
.hb-slot:hover {border-color:var(--hb-text); background-color:#292f29}
.hb-slot[aria-pressed=true] {border-color:var(--hb-text); box-shadow:inset 0 0 0 1px var(--hb-text)}
.hb-slot img {width:100%; height:100%; object-fit:contain}
.hb-slot span {position:absolute; bottom:2px; right:5px; font-size:12px; text-shadow:0 1px 3px #000; font-variant-numeric:tabular-nums}
.hb-item-detail {display:flex; align-items:center; gap:16px; min-height:78px}
.hb-item-detail img {width:58px; height:58px; object-fit:contain}
.hb-meter-row {display:flex; justify-content:space-between; gap:12px; font-size:13px; margin:12px 0 5px; font-variant-numeric:tabular-nums}
.hb-meter {height:10px; padding:2px; border:1px solid #777d6e; background:var(--hb-well); border-radius:3px; overflow:hidden}
.hb-meter-fill {height:100%; width:var(--hb-value,0%); max-width:100%; background:var(--hb-health)}
.hb-meter--stamina .hb-meter-fill {background:var(--hb-stamina)}
.hb-discovery {padding-left:106px; min-height:118px; display:flex; flex-direction:column; justify-content:center}
.hb-discovery .hb-flower {width:112px; height:112px; left:-15px; top:0}
.hb-discovery p {margin:8px 0 0}
.hb-link {color:var(--hb-text); text-underline-offset:4px}
.hb-link:hover {color:#fff9e8}
.hb-status {min-height:42px; font-size:13px; color:var(--hb-muted); margin:12px 0 0}
@keyframes hb-spin {to {transform:rotate(360deg)}}
/* Material stays at a fixed grain scale; only the small edge tiles repeat. */
.hb-panel {background-image:linear-gradient(#0003,#0003),url('./paper-fine-v3.png'); background-size:512px 512px; border-radius:9px 7px 10px 8px; box-shadow:0 8px 20px #0003}
.hb-panel--quiet {border:8px solid transparent; border-image:url('./frame.svg') 12 / 8px / 0 round; padding:9px}
.hb-button {background-size:384px 384px; background-blend-mode:soft-light; border-radius:2px; border-image:url('./frame.svg') 12 / 5px / 0 round}
.hb-button--primary {background-blend-mode:screen; background-color:#aaa79b}
.hb-sprig {width:74px; height:142px; opacity:.75; filter:grayscale(1)}
.hb-item-detail .hb-sprig {width:46px; height:76px}
@media(prefers-reduced-motion:reduce) {.herbarium *, .herbarium *::before {animation:none!important; transition:none!important}}
@media(max-width:480px) {.hb-panel {padding:20px; border-width:10px}.hb-panel--quiet {border-width:1px}.hb-panel--flower {padding-top:56px}.hb-panel--compact {padding:14px}.hb-panel--botanical {padding-right:64px}.hb-flower {width:118px;height:118px;left:-18px;top:-43px}.hb-title {font-size:25px}.hb-title--small {font-size:20px}.hb-grid {grid-template-columns:repeat(3,minmax(0,1fr))}.hb-discovery {padding-left:84px}.hb-discovery .hb-flower {width:90px;height:90px}}
