/* Shared art direction. The ornament replaces the frame junction, not its surface. */
.herbarium {--hb-paper:url('/ui/herbarium/paper-fine-v3.png');--hb-paper-wash:linear-gradient(#222321ae,#222321ae)}
.herbarium .hb-panel,
body.herbarium .gate-panel,
body.herbarium .plaque {
 background-image:var(--hb-paper-wash),var(--hb-paper);
 background-size:240px 240px;
 background-blend-mode:normal;
 box-shadow:none;
}
.herbarium .hb-panel,
body.herbarium .gate-panel {border-image:none;--hb-frame-width:12px}
.herbarium .hb-panel::before,
body.herbarium .gate-panel::before {
 content:'';position:absolute;inset:calc(-1 * var(--hb-frame-width));
 border:var(--hb-frame-width) solid transparent;
 border-image:url('./frame.svg') 12 / var(--hb-frame-width) / 0 round;
 pointer-events:none;z-index:0;
}
.herbarium .hb-panel--quiet {--hb-frame-width:8px}
.herbarium .hb-panel--flower,
body.herbarium .gate-panel {--hb-junction-size:340px;--hb-junction-top:73px;--hb-junction-left:51px}
.herbarium .hb-junction {
 position:absolute;pointer-events:none;user-select:none;z-index:1;
 width:var(--hb-junction-size);height:var(--hb-junction-size);object-fit:contain;
 left:calc(-1 * var(--hb-junction-left) - var(--hb-frame-width) + 3.5px);
 top:calc(-1 * var(--hb-junction-top) - var(--hb-frame-width) + 3.5px);
 mask-image:linear-gradient(to right,#000 80%,transparent 99%),linear-gradient(to bottom,#000 84%,transparent 99%);mask-composite:intersect;
}
.herbarium .hb-panel--flower::before,
body.herbarium .gate-panel::before {
 mask:linear-gradient(#000 0 0) right top / calc(100% - 218px) 100% no-repeat,
      linear-gradient(#000 0 0) left bottom / 100% calc(100% - 225px) no-repeat;
}
.herbarium .hb-panel--flower {padding-top:90px;padding-bottom:58px}
.herbarium .hb-sprig {top:auto;right:-5px;bottom:-8px;width:80px;height:130px;transform:scaleX(-1);opacity:.48}
.herbarium .hb-item-detail .hb-sprig {top:auto;right:-1px;bottom:-5px;width:50px;height:74px}
body.herbarium .gate-panel {padding-top:90px;padding-bottom:58px}
body.herbarium .gate-panel .hb-sprig {top:auto;right:-5px;bottom:-8px;width:62px;height:86px;opacity:.48}
.herbarium .hb-button,
body.herbarium #lobby button:not(.link) {
 background-image:linear-gradient(#171815b0,#111210b0),var(--hb-paper);
 background-size:240px 240px;background-blend-mode:normal;
}
.herbarium .hb-button--primary,
body.herbarium #lobby button.primary {
 background-image:linear-gradient(#c2bfb1ee,#c2bfb1dd),var(--hb-paper);
 color:#20211e;box-shadow:inset 0 0 0 1px #e3ded04a;
}
.herbarium .hb-button:hover:not(:disabled),
body.herbarium #lobby button:hover:not(:disabled):not(.link) {filter:brightness(1.15)}
.herbarium .hb-button:disabled,
body.herbarium #lobby button:disabled {background-image:linear-gradient(#464741dd,#464741dd),var(--hb-paper);color:#b3b7ad}
.herbarium .hb-input,.herbarium .hb-select,.herbarium .hb-slot,
body.herbarium #lobby input,body.herbarium #lobby select {
 background-image:linear-gradient(#121310ed,#121310ed),var(--hb-paper);
 background-size:240px 240px;border-color:#898b7959;
 box-shadow:inset 0 1px 5px #0005;
}
.herbarium .hb-input[aria-invalid=true] {border-color:var(--hb-danger)}
.herbarium .hb-slot[aria-pressed=true] {border-color:#d5d0bd;box-shadow:inset 0 0 10px #dbd6bf0b}
.herbarium .kit-components {background:var(--hb-paper-wash),var(--hb-paper)!important;background-size:240px 240px!important}
.herbarium .kit-login .hb-title {text-align:center;font-size:32px;padding-right:0}
.herbarium .kit-login {max-width:410px}
.herbarium .kit-login-stage {padding-top:34px}
.herbarium .kit-wordmark {margin-bottom:82px}
.herbarium .hb-discovery {--hb-junction-size:150px;--hb-junction-top:32px;--hb-junction-left:22.5px}
.herbarium .hb-discovery::before {mask:linear-gradient(#000 0 0) right top / calc(100% - 96px) 100% no-repeat,linear-gradient(#000 0 0) left bottom / 100% calc(100% - 99px) no-repeat}
.herbarium .hb-panel:has(> .hb-corner)::before {mask:linear-gradient(#000 0 0) right top / calc(100% - 25px) 100% no-repeat,linear-gradient(#000 0 0) left bottom / 100% calc(100% - 34px) no-repeat}
/* Small optical variants: broad readable planes, not miniatures of the hero art. */
.herbarium .hb-corner--small {width:72px;height:72px;left:-19px;top:-22px}
.herbarium .hb-panel:has(> .hb-corner--small)::before {mask:linear-gradient(#000 0 0) right top / calc(100% - 52px) 100% no-repeat,linear-gradient(#000 0 0) left bottom / 100% calc(100% - 55px) no-repeat}
.herbarium .hb-item-detail .hb-sprig--small {width:56px;height:80px;right:-2px;bottom:-5px;transform:none;opacity:.78;filter:grayscale(1)}
.herbarium .hb-discovery:has(.hb-flower-small) {margin-top:32px;padding-left:112px}
.herbarium .hb-flower-small {width:104px;height:114px;left:-18px;top:-64px;object-fit:contain}
.herbarium .hb-discovery:has(.hb-flower-small)::before {mask:linear-gradient(#000 0 0) right top / calc(100% - 85px) 100% no-repeat,linear-gradient(#000 0 0) left bottom / 100% calc(100% - 99px) no-repeat}
.herbarium .hb-discovery:has(.hb-flower-small)::after {content:'';position:absolute;left:-12px;top:-12px;width:120px;height:120px;pointer-events:none;background:url('./flower-small-join.svg') no-repeat}
@media(max-width:480px) {
 .herbarium .hb-panel {--hb-frame-width:10px}
 .herbarium .hb-panel--quiet {--hb-frame-width:8px;border-width:8px}
 .herbarium .hb-panel--flower,body.herbarium .gate-panel {--hb-junction-size:220px;--hb-junction-top:47px;--hb-junction-left:33px;padding-top:72px}
 .herbarium .kit-login-stage {padding-inline:36px}
 body.herbarium #lobby {padding-inline:36px}
 .herbarium .kit-login .hb-title {font-size:26px}
 .herbarium .hb-panel--flower::before,body.herbarium .gate-panel::before {
  mask:linear-gradient(#000 0 0) right top / calc(100% - 141px) 100% no-repeat,
       linear-gradient(#000 0 0) left bottom / 100% calc(100% - 145px) no-repeat;
 }
}