/* Botanical folio: cream plates, sepia hairlines, leaf greens and scarlet-to-black fruit. */
:root {
  --plate: #f3eddf;
  --plate-deep: #ebe3d0;
  --ink: #2b2620;
  --graphite: #5a554c;
  --rule: rgba(110, 84, 52, .32);
  --rule-strong: rgba(110, 84, 52, .55);
  --leaf: #3e6b3a;
  --leaf-soft: #c3d4a8;
  --scarlet: #a8262a;
  --fruit: #2a1b1f;
  --husk: #a9a397;
  --serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --fell: "IM Fell English", "EB Garamond", serif;
  --fell-sc: "IM Fell English SC", "EB Garamond", serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --bs-body-bg: var(--plate);
  --bs-body-color: var(--ink);
  --bs-body-font-family: var(--serif);
  --bs-body-font-size: 1.0625rem;
  --bs-border-color: var(--rule);
  --bs-secondary-color: var(--graphite);
  --bs-emphasis-color: var(--ink);
  --bs-link-color: var(--leaf);
  --bs-focus-ring-color: rgba(168, 38, 42, .28);
}

body { background: var(--plate); color: var(--ink); font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; }
::selection { background: var(--leaf-soft); color: var(--fruit); }
:focus-visible { outline: 2px solid var(--scarlet); outline-offset: 3px; border-radius: 2px; }
html { scrollbar-color: var(--husk) var(--plate-deep); }

.folio { padding-block: 40px 72px; padding-inline: clamp(16px, 4vw, 48px); }

/* Masthead */
.masthead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--rule-strong); box-shadow: 0 3px 0 -2px var(--rule); }
h1 { font-family: var(--fell); font-weight: 400; font-size: 2.6rem; line-height: 1; letter-spacing: -.01em; margin: 0; }
h1 em { color: var(--leaf); }
.masthead-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.form-check-label { font-size: .95rem; color: var(--graphite); }
.form-switch .form-check-input { width: 2.2em; border-color: var(--rule-strong); background-color: var(--plate-deep); cursor: pointer; }
.form-check-input:checked { background-color: var(--leaf); border-color: var(--leaf); }
.form-check-input:focus { border-color: var(--scarlet); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
.status { margin: 10px 0 0; font-size: .9rem; color: var(--graphite); font-style: italic; }

.btn-folio { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fell-sc); font-size: 1.05rem; letter-spacing: .02em; color: var(--plate); background: var(--fruit); border: 1px solid var(--fruit); border-radius: 2px; padding: 8px 18px; transition: background-color .2s var(--ease-out), transform .2s var(--ease-out); }
.btn-folio:hover, .btn-folio:focus-visible { background: var(--leaf); border-color: var(--leaf); color: var(--plate); }
.btn-folio:active { transform: translateY(1px); }
.btn-folio:disabled { background: var(--fruit); border-color: var(--fruit); color: var(--plate); opacity: .65; }
.btn-glyph { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.is-loading .btn-glyph { animation: turn .9s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }

.btn-folio-quiet { font-family: var(--fell-sc); font-size: 1.05rem; letter-spacing: .02em; color: var(--graphite); background: transparent; border: 1px solid var(--rule-strong); border-radius: 2px; padding: 8px 16px; transition: color .2s var(--ease-out), border-color .2s var(--ease-out); }
.btn-folio-quiet:hover, .btn-folio-quiet:focus-visible { color: var(--fruit); border-color: var(--fruit); }

/* Login */
.login { max-width: 400px; margin-inline: auto; padding-top: clamp(48px, 14vh, 120px); }
.login h1 { padding-bottom: 14px; border-bottom: 1px solid var(--rule-strong); box-shadow: 0 3px 0 -2px var(--rule); }
.login-form { display: grid; gap: 18px; margin-top: 28px; }
.login-form .alert-folio { margin: 0; }
.login-form .btn-folio { justify-self: start; }
.form-control { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); background-color: rgba(255, 255, 255, .45); border: 1px solid var(--rule-strong); border-radius: 2px; min-height: 44px; }
.form-control:focus { color: var(--ink); background-color: rgba(255, 255, 255, .7); border-color: var(--scarlet); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }

.alert-folio { margin: 18px 0 0; background: #f6dcd4; color: #7b1c1f; border: 1px solid rgba(168, 38, 42, .35); border-radius: 2px; }

/* Filters */
.filters { padding-block: 24px 8px; }
.form-label { font-family: var(--fell-sc); font-size: 1rem; color: var(--graphite); margin-bottom: 4px; }
.form-select { font-family: var(--serif); font-size: 1rem; color: var(--ink); background-color: rgba(255, 255, 255, .45); border: 1px solid var(--rule-strong); border-radius: 2px; min-height: 44px; transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out); }
.form-select:hover { background-color: rgba(255, 255, 255, .7); }
.form-select:focus { border-color: var(--scarlet); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }

/* Stage band: five figures on one shared baseline, captions beneath */
.stage-band { margin-block: 20px 8px; border-block: 1px solid var(--rule-strong); }
.stage { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: end; padding: 22px 20px 20px; }
.stage + .stage { border-left: 1px solid var(--rule); }
.stage-glyph { grid-row: 1 / span 2; width: 38px; height: 38px; align-self: center; fill: none; stroke: var(--graphite); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.stage-glyph.is-leaf { stroke: var(--leaf); }
.stage-glyph.is-flower { stroke: var(--scarlet); }
.stage-glyph.is-harvest { stroke: #6e5434; }
.stage-glyph.is-fruit { stroke: var(--fruit); }
.figure { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; color: var(--ink); min-width: 4ch; }
.figure .placeholder { background-color: var(--husk); height: .8em; vertical-align: baseline; border-radius: 1px; }
.caption { font-family: var(--fell-sc); font-size: 1rem; color: var(--graphite); margin-top: 6px; }
.stage-band-sm { margin-block: 14px 18px; }
.stage-band-sm .stage { padding-inline: 0 20px; }
.stage-band-sm .stage + .stage { padding-left: 20px; }
.stage-band-sm .figure { font-size: 2rem; }

@media (max-width: 1399.98px) {
  .stage-band:not(.stage-band-sm) .stage { border-left: 0; border-bottom: 1px solid var(--rule); }
  .stage-band:not(.stage-band-sm) .stage:nth-child(odd) { border-right: 1px solid var(--rule); }
  .stage-band:not(.stage-band-sm) .stage:last-child:nth-child(odd) { width: 100%; border-right: 0; border-bottom: 0; }
}
/* Six figures on one line only from 1400px; slightly smaller there so currency fits. */
@media (min-width: 1400px) {
  .stage-band-top .stage { padding-inline: 16px; column-gap: 12px; }
  .stage-band-top .figure { font-size: 2.3rem; }
}
@media (max-width: 767.98px) {
  .stage-band-top .stage:nth-last-child(-n+2):nth-child(odd), .stage-band-top .stage:last-child { border-bottom: 0; }
}
@media (min-width: 768px) and (max-width: 1399.98px) {
  .stage-band:not(.stage-band-sm) .stage:nth-child(odd) { border-right: 0; }
  .stage-band:not(.stage-band-sm) .stage:last-child:nth-child(odd) { width: calc(100% / 3); }
  .stage-band:not(.stage-band-sm) .stage:nth-child(n+4) { border-bottom: 0; }
  .stage-band:not(.stage-band-sm) .stage:not(:nth-child(3n)) { border-right: 1px solid var(--rule); }
}

.empty { padding: 28px 0 0; color: var(--graphite); font-style: italic; }

/* Plates: fixed-scale figures with a double hairline frame */
.plates { padding-top: 28px; }
.plate { height: 100%; margin: 0; padding: 22px 22px 18px; background: rgba(255, 255, 255, .28); border: 1px solid var(--rule-strong); outline: 1px solid var(--rule); outline-offset: -6px; border-radius: 1px; }
h2 { font-family: var(--fell); font-style: italic; font-weight: 400; font-size: 1.6rem; line-height: 1.1; margin: 0; }
h3 { font-family: var(--fell); font-style: italic; font-weight: 400; font-size: 1.35rem; margin: 40px 0 12px; }
.plate-note { margin: 6px 0 0; font-size: .95rem; color: var(--graphite); font-variant-numeric: lining-nums tabular-nums; }
.legend { display: flex; gap: 18px; margin: 8px 0 0; font-family: var(--fell-sc); font-size: .95rem; color: var(--graphite); }
.key::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 50%; vertical-align: -1px; }
.key-claimed::before { background: var(--scarlet); }
.key-available::before { background: var(--leaf-soft); border: 1px solid var(--leaf); }

#inventory { margin-top: 18px; max-height: 300px; overflow: auto; padding-right: 4px; }
.app-row { margin-bottom: 16px; }
.app-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: .95rem; }
.app-label .pool-name { overflow-wrap: anywhere; }
.app-label .platform { margin-left: 8px; font-family: var(--fell-sc); font-size: .9rem; color: var(--graphite); }
.specimen .prefix { font-family: var(--serif); font-style: normal; color: var(--graphite); }
.specimen .genus { font-family: var(--fell); font-style: italic; font-size: 1.08em; color: var(--ink); }
.scale-note { margin: 4px 0 0; padding-top: 8px; border-top: 1px dashed var(--rule); font-size: .85rem; font-style: italic; color: var(--graphite); }
.app-label .count { white-space: nowrap; color: var(--graphite); font-variant-numeric: lining-nums tabular-nums; }
.bar { display: block; width: 100%; height: 12px; overflow: visible; }
.bar .stock { fill: var(--leaf-soft); }
.bar .used { fill: var(--scarlet); }

.trend { margin-top: 14px; }
.trend svg { display: block; width: 100%; height: auto; overflow: visible; }
.trend text { fill: var(--graphite); font-family: var(--serif); font-size: 13px; font-variant-numeric: lining-nums tabular-nums; }
.trend .grid { stroke: var(--rule); stroke-dasharray: 2 3; }
.trend .baseline { stroke: var(--rule-strong); }
.trend-claims .stem { fill: var(--scarlet); }
.trend-store .stem { fill: var(--fruit); }
.trend .stem.is-active { fill: var(--leaf); }
.trend-downloads .stem { fill: var(--leaf); }
.trend-downloads .stem.is-active { fill: var(--scarlet); }
.trend-revenue .stem { fill: #6e5434; }
.trend-revenue .stem.is-active { fill: var(--scarlet); }
.trend .hit { fill: transparent; cursor: pointer; }
.trend .today-band { fill: var(--leaf-soft); opacity: .45; }
.trend text.today { fill: var(--ink); font-weight: 600; }
.trend li.today { color: var(--ink); font-weight: 600; }
.chart-wrap { position: relative; }
.chart-tip { position: absolute; z-index: 2; width: max-content; max-width: min(260px, 100%); padding: 6px 10px; transform: translateY(calc(-100% - 8px)); pointer-events: none;
  background: var(--fruit); color: var(--plate); border-radius: 2px; box-shadow: 0 2px 8px rgba(43, 38, 32, .18); font-size: .9rem; line-height: 1.3; font-variant-numeric: lining-nums tabular-nums; }
.chart-tip strong { display: block; font-family: var(--fell-sc); font-weight: 400; letter-spacing: .02em; }
.trend details { margin-top: 8px; font-size: .95rem; }
.trend summary { font-family: var(--fell-sc); color: var(--leaf); cursor: pointer; width: fit-content; list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.trend summary::-webkit-details-marker { display: none; }
.trend summary::before { content: ""; width: 6px; height: 6px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: rotate(-45deg); transition: transform .2s var(--ease-out); }
.trend details[open] summary::before { transform: rotate(45deg) translate(-1px, -1px); }
.trend summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.trend ul { columns: 2; margin: 8px 0 0; padding-left: 18px; color: var(--graphite); font-variant-numeric: lining-nums tabular-nums; }
.trend .no-data { margin: 40px 0; color: var(--graphite); font-style: italic; }

/* Stems grow from the baseline when new data lands */
@media (prefers-reduced-motion: no-preference) {
  .grow .stem { transform-box: fill-box; transform-origin: 50% 100%; animation: sprout .6s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 14ms); }
  .grow .bar rect { transform-box: fill-box; transform-origin: 0 50%; animation: reach .6s var(--ease-out) both; }
  .grow .bar .used { animation-delay: .12s; }
}
@keyframes sprout { from { transform: scaleY(.04); } }
@keyframes reach { from { transform: scaleX(.02); } }

/* Registers */
.register { padding-top: 48px; }
.folio-table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--rule); --bs-table-hover-bg: rgba(62, 107, 58, .07); margin: 14px 0 0; font-size: 1rem; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.folio-table thead th { font-family: var(--fell-sc); font-weight: 400; font-size: .95rem; color: var(--graphite); border-bottom: 1px solid var(--rule-strong); padding: 10px 14px; }
.folio-table td { padding: 12px 14px; transition: background-color .15s var(--ease-out); }
.folio-table tbody tr:hover > td { background: rgba(62, 107, 58, .07); }
.folio-table .num { text-align: right; }
.folio-table .offer-sale { font-family: var(--fell-sc); color: var(--scarlet); }
.folio-table .offer-free { color: var(--graphite); }
.folio-table .outside { font-style: italic; color: var(--graphite); }
.folio-table .muted { color: var(--graphite); font-style: italic; white-space: normal; }
.folio-table .total-col { font-weight: 600; }
.folio-table td:first-child, .folio-table th:first-child { position: sticky; left: 0; background: var(--plate); z-index: 1; }
.low { display: inline-block; margin-left: 8px; font-family: var(--fell-sc); font-size: .85rem; color: var(--scarlet); }
.low::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--scarlet); vertical-align: 2px; }
.table-responsive { scrollbar-width: thin; }

@media (max-width: 575.98px) {
  .folio { padding-top: 24px; }
  h1 { font-size: 2rem; }
  .masthead-actions { width: 100%; justify-content: space-between; }
  .stage { padding: 16px 12px 16px 0; column-gap: 10px; }
  .stage:nth-child(even) { padding-left: 14px; }
  .stage-glyph { width: 28px; height: 28px; }
  .plate { padding: 18px 16px 14px; }
  .trend ul { columns: 1; }
  .stage-band-sm .stage + .stage { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }

  /* Registers stack into specimen rows: the app heads each row, the deciding columns come first. */
  .folio-table { white-space: normal; }
  .folio-table thead { display: none; }
  .folio-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .folio-table tbody td { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 0; border: 0; background: none; position: static; text-align: right; }
  .folio-table tbody td::before { content: attr(data-label); font-family: var(--fell-sc); font-size: .9rem; color: var(--graphite); text-align: left; }
  .folio-table tbody td.name { grid-column: 1 / -1; padding-bottom: 6px; font-size: 1.1rem; }
  .folio-table tbody td.name::before, .folio-table tbody td.muted::before { content: none; }
  .folio-table tbody td.muted { grid-column: 1 / -1; text-align: left; }
  .folio-table tbody tr:hover > td { background: none; }
}