/* Aurora Botanicals guidelines — scoped case-brand styles. No Lofty Labz tokens in here. */
:root {
  --eg: #1e3d32;
  --au: #6fbf8e;
  --da: #f4c9a8;
  --cr: #faf3e8;
  --ik: #22221e;
}
* { box-sizing: border-box; margin: 0; }
body {
  font-family: -apple-system, "Segoe UI", sans-serif;
  background: var(--cr);
  color: var(--ik);
  line-height: 1.6;
}
h1, h2, .ab-spec-serif { font-family: Georgia, "Times New Roman", serif; color: var(--eg); }
:focus-visible { outline: 3px solid var(--eg); outline-offset: 2px; }

.ab-header { text-align: center; padding: 48px 24px 28px; border-bottom: 2px solid var(--eg); }
.ab-mark { width: 96px; display: block; margin: 0 auto 12px; }
.ab-header h1 { font-size: 30px; letter-spacing: .14em; text-transform: uppercase; }
.ab-sub { font-style: italic; color: var(--eg); opacity: .8; }
.ab-nav { margin-top: 18px; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.ab-nav a { color: var(--eg); font-weight: 600; font-size: 14px; text-decoration: none; border-bottom: 2px solid var(--au); padding-bottom: 2px; }

.ab-section { max-width: 860px; margin: 0 auto; padding: 44px 24px; border-bottom: 1px solid rgba(30,61,50,.25); }
.ab-section h2 { font-size: 24px; margin-bottom: 10px; }

.ab-controls { display: flex; gap: 28px; flex-wrap: wrap; align-items: end; margin: 18px 0; }
.ab-ctrl-label, .ab-select-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--eg); display: block; margin-bottom: 6px; }
.ab-btnrow { display: flex; gap: 6px; }
.ab-btn {
  font: 600 13px/1 inherit;
  padding: 10px 14px;
  background: #fff;
  border: 1.5px solid var(--eg);
  color: var(--eg);
  cursor: pointer;
  border-radius: 3px;
}
.ab-btn.is-on { background: var(--eg); color: var(--cr); }
.ab-toggle { font-size: 14px; font-weight: 600; color: var(--eg); display: flex; gap: 8px; align-items: center; }
.ab-select-label select { display: block; font: inherit; padding: 9px 12px; border: 1.5px solid var(--eg); border-radius: 3px; background: #fff; color: var(--ik); }

.ab-stage { margin: 18px 0 0; text-align: center; }
#logo-stage { background: var(--cr); border: 1.5px solid var(--eg); padding: 72px 24px; position: relative; transition: background .2s; }
#logo-stage[data-ctx="evergreen"] { background: var(--eg); }
#logo-stage[data-ctx="onecolor"] { background: #fff; }
.ab-stage > figcaption { margin-top: 14px; font-size: 13px; opacity: .8; }
.ab-logo svg { width: 180px; max-width: 60vw; height: auto; }
#logo-stage[data-ctx="evergreen"] .ab-logo svg .stroke-eg { stroke: var(--cr); }
#logo-stage[data-ctx="evergreen"] .ab-logo svg text { fill: var(--cr); }
#logo-stage[data-ctx="onecolor"] .ab-logo svg .stroke-au { stroke: var(--eg); }
#logo-stage[data-ctx="onecolor"] .ab-logo svg .fill-da { fill: #fff; }
/* clear-space overlay: geometry computed by aurora.js from the rendered logo + true disc diameter */
.ab-clearspace {
  position: absolute;
  border: 2px dashed var(--au);
  pointer-events: none;
}
.ab-rule { margin-top: 16px; font-size: 14px; }
.ab-minsize { display: flex; gap: 28px; align-items: end; margin-top: 14px; flex-wrap: wrap; }
.ab-min-item { display: flex; gap: 10px; align-items: end; font-size: 12px; color: var(--eg); font-weight: 600; }

.ab-palette { list-style: none; padding: 0; margin: 18px 0 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.ab-chip {
  width: 100%;
  background: var(--c);
  border: 0;
  border-radius: 3px;
  padding: 22px 14px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  display: grid;
  gap: 4px;
}
.ab-chip span { font-size: 12px; }
.ab-copied { min-height: 1.4em; font-size: 13px; font-weight: 600; color: var(--eg); }

.ab-typegrid { display: grid; gap: 16px; margin-top: 18px; }
.ab-type { background: #fff; border: 1.5px solid var(--eg); border-radius: 3px; padding: 18px 20px; }
.ab-type-role { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--eg); margin-bottom: 8px; }
.ab-spec-serif { font-size: 30px; }
.ab-spec-caps { font-family: Georgia, serif; font-size: 22px; letter-spacing: .42em; color: var(--eg); }
.ab-spec-sans { font-size: 14px; }
.ab-type-note { font-size: 12px; opacity: .7; margin-top: 8px; }

.ab-dodont { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.ab-dd {
  width: 100%;
  font: inherit;
  background: #fff;
  border: 1.5px solid var(--eg);
  border-radius: 3px;
  padding: 14px;
  cursor: pointer;
  display: grid;
  gap: 10px;
  justify-items: center;
}
.ab-dd-state { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--eg); }
.ab-dd[aria-pressed="true"] { border-color: #a33; }
.ab-dd[aria-pressed="true"] .ab-dd-state { color: #a33; }
.ab-dd-art { width: 92px; height: 64px; background: no-repeat center / contain; overflow: hidden; }
/* art per kind, do vs don't, drawn as data-URI-free inline backgrounds via JS-injected SVG */
.ab-dd-text { font-size: 12.5px; text-align: center; }

/* true die proportions per size class: jar 65mm circle · bottle 50×90 (ratio .556) · tin 55mm circle */
.ab-label {
  margin: 0 auto;
  background: #fff;
  border: 2px solid var(--eg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: width .25s, border-radius .25s;
}
.ab-label[data-size="jar"] { width: 250px; aspect-ratio: 1; border-radius: 50%; padding: 34px 30px; }
.ab-label[data-size="bottle"] { width: 190px; aspect-ratio: 5 / 9; border-radius: 4px; padding: 16px 12px; }
.ab-label[data-size="tin"] { width: 210px; aspect-ratio: 1; border-radius: 50%; padding: 28px 26px; }
.ab-zone { display: grid; justify-items: center; gap: 4px; padding: 8px 0; }
.ab-zone + .ab-zone { border-top: 1.5px dashed var(--au); }
.ab-label-mark { width: 70px; }
.ab-label[data-size="tin"] .ab-label-mark { width: 52px; }
.ab-label-sku { font-family: Georgia, serif; font-size: 18px; letter-spacing: .06em; color: var(--eg); }
.ab-label-sub { font-size: 11px; opacity: .8; }
.ab-zone-verify { background: rgba(244,201,168,.5); padding: 8px 10px; text-align: center; }
.ab-zone-verify p { font-size: 9.5px; letter-spacing: .06em; color: var(--eg); font-weight: 700; }
.ab-label-batch { font-weight: 400 !important; color: var(--ik) !important; }

.ab-footer { text-align: center; padding: 28px; font-size: 12.5px; opacity: .75; }

@media (min-width: 700px) { .ab-typegrid { grid-template-columns: repeat(3, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .ab-label, #logo-stage { transition: none; }
}