:root {
  --dev-leather: #071128;
  --dev-leather-raised: #101d3d;
  --dev-gilt: #cda24f;
  --dev-gilt-light: #f2d98b;
  --dev-vellum: #f3e3b8;
  --dev-vellum-light: #fff7df;
  --dev-vellum-deep: #d8bd7c;
  --dev-ink: #202031;
  --dev-ink-soft: #5a4a3b;
  --dev-heart: #8f3046;
  --dev-focus: #294a83;
  --dev-shadow: 0 38px 90px rgba(0, 0, 0, .62);
}

html {
  background: #030612;
}

body {
  background:
    radial-gradient(circle at 18% 12%, rgba(214, 165, 74, .12), transparent 30rem),
    radial-gradient(circle at 80% 22%, rgba(78, 73, 142, .16), transparent 36rem),
    linear-gradient(180deg, #030612 0, #09112a 45rem, #11122d 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background:
    repeating-linear-gradient(13deg, transparent 0 6px, rgba(255, 255, 255, .012) 7px 8px),
    repeating-linear-gradient(96deg, transparent 0 11px, rgba(0, 0, 0, .04) 12px 13px);
}

.hero {
  width: min(1180px, calc(100% - 70px));
  margin: 28px auto 12px;
  padding: 26px 90px 24px;
  border: 2px solid #6f5323;
  border-radius: 20px 20px 8px 8px;
  background:
    linear-gradient(90deg, transparent, rgba(234, 190, 91, .08) 50%, transparent),
    linear-gradient(180deg, #101d3d, #071128);
  box-shadow:
    0 0 0 6px rgba(3, 8, 21, .9),
    0 0 0 7px rgba(205, 162, 79, .35),
    0 18px 48px rgba(0, 0, 0, .48);
}

.hero::before,
.hero::after {
  top: 53%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #cfaa58 70%, #f3df9e);
}

.moon-mark {
  width: 54px;
  height: 54px;
  border: 2px solid #b88c3c;
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 250, 211, .28), transparent 25%),
    linear-gradient(145deg, #14254d, #060d20);
  box-shadow:
    inset 0 0 0 5px rgba(5, 12, 31, .78),
    0 0 28px rgba(239, 205, 118, .2);
}

.hero .eyebrow {
  color: #e4b95d;
}

.hero h1 {
  color: #fff0bd;
  text-shadow: 0 3px 0 #1d1730, 0 8px 26px rgba(0, 0, 0, .55);
}

.hero-copy {
  color: #d7dced;
}

.app-shell {
  width: min(1536px, calc(100% - 24px));
  margin: 24px auto 36px;
  grid-template-columns: minmax(330px, .94fr) minmax(480px, 1.06fr);
  gap: 30px;
  overflow: hidden;
  border: 66px solid transparent;
  border-image-source: url("assets/moonstone-ledger-desktop.webp");
  border-image-slice: 92 fill;
  border-image-width: 66px;
  border-image-repeat: stretch;
  border-radius: 18px;
  background: var(--dev-vellum);
  box-shadow: var(--dev-shadow);
}

.app-shell::before {
  display: none;
}

.panel {
  padding: 22px 18px 28px;
  background:
    linear-gradient(180deg, rgba(255, 249, 226, .18), rgba(221, 194, 132, .08)),
    transparent;
}

@media (min-width: 901px) {
  .chart-panel {
    padding-left: 48px;
  }
}

.library-panel {
  max-height: calc(100vh - 56px);
  border-right: 0;
  scrollbar-color: #9f7a37 transparent;
}

.section-heading,
.dialog-heading {
  border-bottom: 1px solid rgba(131, 92, 31, .42);
}

.step,
.print-kicker {
  display: inline-block;
  margin-top: 0;
  padding: 6px 13px 5px;
  color: #5a3a12;
  border: 1px solid #a9823d;
  clip-path: polygon(6% 0, 94% 0, 100% 24%, 100% 76%, 94% 100%, 6% 100%, 0 76%, 0 24%);
  background: linear-gradient(180deg, #f6e9bd, #dfc486);
  box-shadow: inset 0 0 0 2px rgba(255, 248, 213, .35);
}

h2,
h3,
h4 {
  color: #252137;
}

.field {
  color: #253050;
}

.field input,
.field select,
.field textarea,
.quest-controls select {
  border: 1px solid #9f7833;
  border-radius: 2px;
  clip-path: polygon(1.3% 0, 98.7% 0, 100% 15%, 100% 85%, 98.7% 100%, 1.3% 100%, 0 85%, 0 15%);
  background:
    linear-gradient(180deg, rgba(255, 252, 235, .96), rgba(237, 218, 171, .92));
  box-shadow:
    inset 0 0 0 2px rgba(255, 250, 218, .72),
    inset 0 -4px 12px rgba(116, 78, 21, .06),
    0 3px 6px rgba(73, 48, 15, .09);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.quest-controls select:focus {
  background: #fff9e8;
}

.button {
  min-height: 40px;
  border-radius: 2px;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
  box-shadow:
    inset 0 0 0 2px rgba(255, 246, 204, .16),
    0 4px 7px rgba(48, 31, 10, .16);
  letter-spacing: .015em;
}

.button.primary,
.button.added {
  color: #f7db85;
  border-color: #b78938;
  background:
    linear-gradient(90deg, transparent, rgba(238, 199, 102, .08), transparent),
    linear-gradient(180deg, #14264d, #071128);
}

.button.secondary {
  color: #263253;
  border-color: #9d7635;
  background: linear-gradient(180deg, #f9ecc4, #e4ca8f);
}

.view-options {
  overflow: visible;
  gap: 3px;
  border: 0;
  border-radius: 0;
}

.view-options span {
  min-width: 76px;
  border: 1px solid #9a7434;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%, 0 6px);
  background: linear-gradient(180deg, #f8ebc3, #dec387);
}

.view-options label + label span {
  border-left: 1px solid #9a7434;
}

.view-options input:checked + span {
  color: #f7dc89;
  border-color: #b98b39;
  background:
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(255, 255, 255, .025) 13px 14px),
    linear-gradient(180deg, #172a55, #08132e);
  box-shadow: inset 0 -2px 0 rgba(205, 162, 79, .48);
}

.library-card {
  margin: 10px 0 4px;
  padding: 17px 16px 18px 22px;
  border: 1px solid rgba(133, 94, 32, .48);
  clip-path: polygon(5px 0, calc(100% - 4px) 2px, 100% calc(100% - 5px), calc(100% - 8px) 100%, 4px calc(100% - 2px), 0 6px);
  background:
    linear-gradient(100deg, rgba(255, 252, 233, .96), rgba(237, 216, 167, .88));
  box-shadow: 0 6px 12px rgba(76, 49, 13, .12);
}

.library-card::before {
  left: 9px;
  top: 15px;
  bottom: 15px;
  width: 5px;
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(255, 244, 212, .34);
}

.library-card p,
.selected-quest p,
.results-line,
.storage-note {
  color: var(--dev-ink-soft);
}

.type-icon {
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid currentColor;
  color: var(--dev-focus);
  background: #dfc98f;
  box-shadow:
    inset 0 0 0 3px rgba(255, 248, 215, .36),
    0 2px 4px rgba(63, 39, 9, .18);
}

.type-heart .type-icon,
.heart-count .type-icon {
  color: #f4dec4;
  border-color: #6f1f31;
  background: radial-gradient(circle at 35% 30%, #b95a63, var(--dev-heart) 68%);
}

.focus-count .type-icon,
.quest-type:not(.type-heart) .type-icon {
  color: #f2d78a;
  border-color: #17315f;
  background: radial-gradient(circle at 35% 30%, #4b6ea8, var(--dev-focus) 68%);
}

.balance-summary {
  padding: 18px 20px;
  border: 1px solid rgba(131, 92, 31, .48);
  background:
    linear-gradient(180deg, rgba(255, 251, 231, .76), rgba(231, 207, 154, .45));
  box-shadow: inset 0 0 0 3px rgba(255, 247, 215, .34);
}

.balance-track {
  height: 12px;
  border-color: #8a6a31;
  background: #d9c8a0;
  box-shadow: inset 0 2px 4px rgba(60, 40, 15, .14);
}

.bucket {
  border: 1px solid #8a6931;
  background: rgba(255, 250, 227, .62);
  box-shadow: 0 5px 10px rgba(72, 46, 13, .09);
}

.bucket-heading {
  padding: 10px 15px;
  border-bottom: 2px solid #b88b3a;
  background:
    repeating-linear-gradient(90deg, transparent 0 13px, rgba(255, 255, 255, .02) 14px 15px),
    linear-gradient(180deg, #152951, #07132e);
}

.bucket-heading h3 {
  color: #fff0bd;
}

.icon-button {
  border-radius: 50%;
  border-color: #9d7635;
  background: linear-gradient(180deg, #f7e8bd, #d7b86f);
  box-shadow: inset 0 0 0 2px rgba(255, 249, 217, .48);
}

dialog {
  border: 12px solid transparent;
  border-image-source: url("assets/moonstone-ledger-mobile.webp");
  border-image-slice: 90 fill;
  border-image-width: 38px;
  border-image-repeat: stretch;
  background: var(--dev-vellum);
}

.footer {
  color: #d9dff0;
}

@media (max-width: 900px) {
  .hero {
    width: min(760px, calc(100% - 32px));
  }

  .app-shell {
    grid-template-columns: 1fr;
    gap: 0;
    border-width: 48px;
    border-image-source: url("assets/moonstone-ledger-mobile.webp");
    border-image-slice: 90 fill;
    border-image-width: 48px;
  }

  .library-panel {
    border-bottom: 2px solid rgba(133, 94, 32, .48);
  }
}

@media (max-width: 560px) {
  .hero {
    width: calc(100% - 18px);
    margin: 38px auto 10px;
    padding: 24px 18px 22px;
    border-radius: 14px 14px 6px 6px;
  }

  .hero h1 {
    font-size: 2.2rem;
  }

  .app-shell {
    width: calc(100% - 8px);
    margin-top: 10px;
    border-width: 28px;
    border-image-slice: 84 fill;
    border-image-width: 28px;
  }

  .panel {
    padding: 18px 8px 22px;
  }

  .section-heading {
    gap: 12px;
  }

  .button {
    width: 100%;
  }

  .view-options span {
    min-width: 72px;
  }

  .library-card {
    margin-inline: 0;
    padding-inline: 19px 12px;
  }

  .library-panel:not([data-view="condensed"]) .library-card .card-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 10px;
    align-items: center;
  }

  .library-panel:not([data-view="condensed"]) .library-card .card-identity {
    display: contents;
  }

  .library-panel:not([data-view="condensed"]) .library-card .eligible-types {
    grid-column: 1 / -1;
    grid-row: 1;
    flex-wrap: wrap;
    gap: 5px 9px;
  }

  .library-panel:not([data-view="condensed"]) .library-card .topic-label,
  .library-panel:not([data-view="condensed"]) .library-card .time {
    width: max-content;
    max-width: 100%;
    padding: 4px 7px;
    border: 1px solid rgba(116, 79, 27, .28);
    background: rgba(255, 248, 218, .48);
  }

  .library-panel:not([data-view="condensed"]) .library-card .topic-label {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }

  .library-panel:not([data-view="condensed"]) .library-card .time {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    white-space: nowrap;
    text-align: right;
  }

  .library-panel:not([data-view="condensed"]) .library-card .quest-type {
    font-size: .68rem;
  }

  .library-panel:not([data-view="condensed"]) .library-card .type-icon {
    width: 1.55rem;
    height: 1.55rem;
  }

  .chart-panel:not([data-view="condensed"]) .selected-quest .card-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
  }

  .chart-panel:not([data-view="condensed"]) .selected-quest .time {
    white-space: nowrap;
  }
}

@media print {
  body {
    background: white;
  }

  .app-shell,
  dialog {
    width: 100%;
    margin: 0;
    overflow: visible;
    border: 0;
    border-image: none;
    background: white;
    box-shadow: none;
  }

  .panel {
    padding: 0;
    background: white;
  }

  .balance-summary,
  .bucket {
    background: white;
    box-shadow: none;
  }

  .bucket-heading {
    color: #111;
    border: 1px solid #777;
    border-bottom-color: #777;
    background: #eee;
  }

  .bucket-heading h3,
  .bucket-heading span {
    color: #111;
  }
}