/* ============================================================
   Rascal Reviews — CONCEPT "BOLD"  (v4)
   Oversized-display · red-dominant on the diner-icon pattern.
   BRAND: solid colors only · fully opaque · NO rounded corners ·
   NO outlines/borders (depth = solid fills + hard offset shadows) ·
   a little crooked · big vertically-centered type. Standalone.
   ============================================================ */

/* style-guide H1 face (idolwild = "Rascal Font") — hero H1 only */
@font-face {
  font-family: 'Rascal Display';
  src: url('../assets/fonts/idolwild.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Rascal Marker';
  src: url('../assets/fonts/kg-two.ttf') format('truetype');
  font-display: swap;
}

:root {
  --red: #d6272e;
  --red-deep: #a81e24;
  --red-ink: #7a1519;
  --gold: #ffca02;
  --gold-deep: #e7b000;
  --cream: #fff6ea;
  --card: #fff6ea;
  --field: #ffffff;
  --ink: #111111;
  --paper-ink: #1e1310;
  --muted: #9c726b;
  --pass: #128a45;
  --fail: #e23b32;
  --na: #111111;
  --hard: 6px 6px 0 var(--ink);
  --hard-sm: 4px 4px 0 var(--ink);
  --hard-white: 6px 6px 0 #ffffff;
  --tap: 54px;
  --bar-h: 60px;
  --bottom-h: 78px;
  font-synthesis-weight: none;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  font-family:
    'Cabin',
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;
  color: #fff;
  line-height: 1.4;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  background: #d6272e url('../assets/img/bg-icon.jpg') top center / 100% auto
    repeat-y;
  padding-bottom: calc(
    var(--bottom-h) + env(safe-area-inset-bottom, 0px) + 12px
  );
}
button {
  font-family: inherit;
}
input,
select,
textarea {
  font-family: inherit;
  font-size: 16px;
  border: none;
}
.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
}
.hide {
  display: none !important;
}
.center {
  text-align: center;
}
.tiny {
  font-size: 12px;
  color: #fbd9d7;
}
h2,
h3 {
  margin: 0;
}
.stars i {
  font-style: normal;
}

/* ---------- top bar (solid black block) ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #fff;
  box-shadow: 0 5px 0 var(--ink);
  overflow: visible;
}
.topbar .row {
  max-width: 720px;
  margin: 0 auto;
  padding: 6px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: var(--bar-h);
}
.logo-wrap {
  justify-self: start;
  line-height: 0;
  display: flex;
  align-items: center;
}
.brandlogo {
  height: 98px;
  width: auto;
  display: block;
  position: relative;
  top: 16px;
  transform: rotate(-3deg);
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.3));
  transition:
    height 0.2s ease,
    top 0.2s ease;
}
.topbar.scrolled .brandlogo {
  height: 48px;
  top: 2px;
  transform: rotate(-3deg);
}
.scorechip {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
}
.scorechip .stars {
  font-size: 23px;
  letter-spacing: 2px;
  line-height: 1;
  white-space: nowrap;
}
.scorechip .stars .on {
  color: var(--gold);
}
.scorechip .stars .off {
  color: #777777;
}
.scorechip .pct {
  font-family: 'Londrina Solid', sans-serif;
  font-weight: 900;
  font-size: 17px;
  color: var(--ink);
  background: var(--gold);
  padding: 3px 12px;
  transform: rotate(-3deg);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--hard-sm);
}
.scorechip .crit {
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  transform: rotate(2deg);
}
.burger {
  justify-self: end;
  width: 48px;
  height: 48px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 11px;
}
.burger span {
  display: block;
  height: 4px;
  background: var(--red);
  transition:
    transform 0.2s,
    opacity 0.16s;
}
.burger.on span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
.burger.on span:nth-child(2) {
  opacity: 0;
}
.burger.on span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}
.navline {
  display: none;
}
.navline-fill {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: var(--gold);
  transition: width 0.4s cubic-bezier(0.3, 0.8, 0.3, 1);
}

/* burger drawer — white bg, red headings, black links (red on hover) — matches Sunny */
.navdrawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.18s,
    visibility 0.18s;
}
.navdrawer.on {
  visibility: visible;
  opacity: 1;
}
.navdrawer .scrim {
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: 0;
}
.navdrawer.on .scrim {
  opacity: 0.6;
}
.navdrawer .panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(69vw, 272px);
  background: #fff;
  transform: translateX(100%);
  transition: transform 0.42s cubic-bezier(0.2, 0.85, 0.25, 1);
  overflow-y: auto;
  padding: 66px 0 24px;
}
.nav-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 42px;
  height: 42px;
  background: var(--red);
  color: #fff;
  border: none;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--hard-sm);
}
.nav-close:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}
.navdrawer.on .panel {
  transform: translateX(0);
}
.navdrawer .grp {
  font-family: 'Londrina Solid', sans-serif;
  font-weight: 900;
  color: var(--red);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 28px 24px 2px;
}
.navdrawer a {
  display: block;
  font-family: 'Londrina Solid', sans-serif;
  color: var(--ink);
  font-size: 26px;
  text-transform: uppercase;
  padding: 2px 24px;
  text-decoration: none;
  transition: color 0.12s;
}
.navdrawer a:hover {
  color: var(--red);
}
.navdrawer a:active {
  background: #f2f2f2;
}

/* ---------- hero (style-guide H1 face, at top ONLY) ---------- */
.intro {
  position: relative;
  margin: 60px 0 8px;
  padding: 12px 4px 6px;
  text-align: center;
}
.intro .kick {
  font-family: 'Rascal Marker', 'Londrina Solid', sans-serif;
  font-weight: 400;
  color: #fff;
  font-size: clamp(62px, 18vw, 128px);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: 0;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
}
.intro .sub {
  display: inline-block;
  font-family: 'Londrina Solid', sans-serif;
  font-weight: 900;
  color: var(--ink);
  background: var(--gold);
  font-size: clamp(21px, 5.4vw, 31px);
  line-height: 1;
  text-transform: uppercase;
  margin-top: 18px;
  padding: 7px 13px;
  transform: rotate(-0.8deg);
  box-shadow: var(--hard);
}
.intro .body {
  font-size: 16px;
  color: #fff;
  max-width: 520px;
  margin: 20px auto 0;
  line-height: 1.5;
  font-weight: 600;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
}

/* section labels — HUGE white on red, gold chip */
.eyebrow {
  font-family: 'Londrina Solid', sans-serif;
  font-weight: 900;
  color: #fff;
  font-size: clamp(36px, 9.5vw, 50px);
  text-transform: uppercase;
  line-height: 0.95;
  margin: 32px 4px 12px;
  display: flex;
  align-items: center;
  gap: 13px;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 28px;
  background: var(--gold);
  flex: 0 0 auto;
  transform: rotate(-9deg);
  box-shadow: var(--hard-sm);
}

/* ---------- cards / setup (cream blocks) ---------- */
.card {
  background: var(--card);
  color: var(--paper-ink);
  box-shadow: var(--hard);
  margin: 18px 3px;
  overflow: visible;
}
.setup {
  box-shadow:
    var(--hard),
    inset 0 9px 0 var(--gold);
}
.setup .body {
  padding: 24px 18px 20px;
}
.setup h2 {
  font-family: 'Londrina Solid', sans-serif;
  font-weight: 900;
  font-size: 34px;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink);
}
.setup .sub {
  color: var(--muted);
  font-size: 13px;
  margin: 4px 0 18px;
  font-weight: 600;
}
.field {
  margin: 0 0 16px;
}
.field:last-child {
  margin-bottom: 0;
}
.field label {
  display: block;
  font-family: 'Londrina Solid', sans-serif;
  font-weight: 900;
  font-size: 21px;
  color: var(--ink);
  text-transform: uppercase;
  margin: 0 0 7px;
}
.field input,
.field select {
  width: 100%;
  min-height: var(--tap);
  padding: 12px 15px;
  background: var(--field);
  color: var(--ink);
  font-weight: 700;
  box-shadow: inset 0 -5px 0 var(--gold);
}
.field input:focus,
.field select:focus {
  outline: none;
  box-shadow: inset 0 -5px 0 var(--red);
}
.field input::placeholder {
  color: #b79a93;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 460px) {
  .field-row {
    grid-template-columns: 1fr;
  }
}

/* progress */
.progress {
  position: sticky;
  top: 46px;
  z-index: 30;
  margin: 14px -16px 8px;
  padding: 9px 16px;
  display: flex;
  align-items: center;
  gap: 11px;
  background: #fff;
  font-family: 'Londrina Solid', sans-serif;
  font-size: 17px;
  color: var(--red);
  text-transform: uppercase;
  box-shadow: 0 6px 0 var(--ink);
}
.progress .track {
  flex: 1;
  height: 16px;
  background: #efe3cf;
  overflow: hidden;
  box-shadow: var(--hard-sm);
}
.progress .fill {
  height: 100%;
  background: var(--red);
  transition: width 0.3s ease;
}

/* ---------- area accordion ---------- */
.area {
  scroll-margin-top: 78px;
}
.area > summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 15px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
}
.area > summary::-webkit-details-marker {
  display: none;
}
.area .accent {
  width: 12px;
  align-self: stretch;
  background: var(--red);
  flex: 0 0 auto;
}
.area .a-title {
  min-width: 0;
  flex: 1;
}
.area .a-title .name {
  font-family: 'Londrina Solid', sans-serif;
  font-weight: 900;
  color: var(--ink);
  font-size: 29px;
  line-height: 0.92;
  text-transform: uppercase;
}
.area .a-title .meta {
  font-size: 12px;
  color: var(--ink);
  margin-top: 6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.subtotal {
  font-family: 'Londrina Solid', sans-serif;
  font-weight: 900;
  font-size: 20px;
  padding: 6px 13px;
  white-space: nowrap;
  background: var(--red);
  color: #fff;
  transform: rotate(-2.5deg);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  box-shadow: var(--hard-sm);
}
.subtotal.good {
  background: var(--pass);
  color: #fff;
}
.subtotal.warn {
  background: var(--red-ink);
  color: var(--gold);
}
.crit-badge {
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 8px;
  margin-left: 8px;
  font-family: 'Cabin', sans-serif;
  vertical-align: 3px;
}
.chev {
  flex: 0 0 auto;
  color: var(--red);
  transition: transform 0.2s ease;
  font-size: 55px;
  line-height: 0.6;
}
.area[open] .chev {
  transform: rotate(90deg);
}
.area .a-body {
  padding: 2px 15px 12px;
  background: var(--card);
}
.subgroup {
  font-family: 'Londrina Solid', sans-serif;
  color: var(--ink);
  font-size: 23px;
  text-transform: uppercase;
  margin: 18px 4px 2px;
}

/* ---------- line item (min-height reserves space so tabs clear icon buttons ~15px) ---------- */
.item {
  position: relative;
  padding: 22px 12px;
}
.item:nth-child(odd) {
  background: #fff0df;
}
.item.item-fail {
  background: #ffeae7;
}
.item .qtext {
  font-size: 16px;
  line-height: 1.35;
  margin-bottom: 12px;
  font-weight: 700;
  color: var(--paper-ink);
}
.item .flagdot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--red);
  margin-right: 6px;
  vertical-align: 0;
}

/* Pass / Fail / N-A — big solid tabs */
.seg {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.seg .seg-ind {
  display: none;
}
.seg button {
  min-height: var(--tap);
  background: var(--field);
  color: var(--ink);
  font-family: 'Londrina Solid', sans-serif;
  font-weight: 900;
  font-size: 21px;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 0.1s;
  box-shadow: var(--hard-sm);
  -webkit-tap-highlight-color: transparent;
}
.seg button .ic {
  font-size: 18px;
}
.seg button:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}
.seg button[aria-pressed='true'][data-v='pass'] {
  background: var(--pass);
  color: #fff;
}
.seg button[aria-pressed='true'][data-v='fail'] {
  background: var(--fail);
  color: #fff;
}
.seg button[aria-pressed='true'][data-v='na'] {
  background: var(--na);
  color: #fff;
}

/* note + photo — SQUARE RED icon buttons */
.icontools {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin: 0 0 15px;
}
.icon-btn {
  position: relative;
  width: 42px;
  height: 42px;
  background: var(--gold);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s;
  box-shadow: var(--hard-sm);
}
.icon-btn:nth-child(2) {
  transform: rotate(3deg);
}
.icon-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}
.icon-btn svg {
  width: 19px;
  height: 19px;
}
.icon-btn.on {
  background: var(--gold-deep);
}
.icon-btn .cnt {
  position: absolute;
  transform: translate(16px, -16px);
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  min-width: 19px;
  height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}
.note-morph {
  position: absolute;
  inset: 0;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  padding: 14px;
  transform: scale(0);
  transform-origin: top right;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition:
    transform 0.3s cubic-bezier(0.2, 0.9, 0.25, 1),
    opacity 0.16s;
  box-shadow: var(--hard);
}
.note-morph.on {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.note-morph textarea {
  flex: 1;
  min-height: 96px;
  background-color: #ffe69a;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 29px,
    rgba(20, 10, 0, 0.16) 29px,
    rgba(20, 10, 0, 0.16) 30px
  );
  background-attachment: local;
  background-position: 0 7px;
  padding: 12px 12px 2px;
  resize: none;
  font-size: 16px;
  line-height: 30px;
  outline: none;
  color: var(--paper-ink);
  font-weight: 600;
}
.note-morph .m-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.note-morph .m-save {
  background: var(--red);
  color: #fff;
  border: none;
  padding: 12px 24px;
  font-family: 'Londrina Solid', sans-serif;
  font-size: 19px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--hard-sm);
}
.thumbs {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 15px;
}
.thumb {
  position: relative;
  width: 76px;
  height: 76px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--hard-sm);
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thumb .x {
  position: absolute;
  top: 0;
  right: 0;
  width: 26px;
  height: 26px;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.hiddenfile {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* grid (minimal) */
.griditem {
  padding: 18px 12px;
}
.griditem:nth-child(odd) {
  background: #fff0df;
}
.gname {
  font-family: 'Londrina Solid', sans-serif;
  font-size: 22px;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--ink);
}
.critrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
}
.mini {
  display: grid;
  grid-template-columns: repeat(3, 50px);
  gap: 7px;
}
.mini button {
  min-height: 44px;
  border: none;
  background: #fff;
  font-family: 'Londrina Solid', sans-serif;
  font-size: 14px;
  cursor: pointer;
  box-shadow: var(--hard-sm);
}
.mini button[aria-pressed='true'] {
  background: var(--red);
  color: #fff;
}

/* ---------- bottom bar ---------- */
.bottombar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  background: var(--ink);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
}
.bottombar .row {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.bottombar .stat {
  font-size: 11px;
  color: var(--gold);
  line-height: 1.1;
  font-weight: 700;
  text-transform: uppercase;
}
.bottombar .stat b {
  font-family: 'Londrina Solid', sans-serif;
  font-weight: 900;
  font-size: 23px;
  color: #fff;
  display: block;
}
.bottombar .grow {
  flex: 1;
}
.btn {
  position: relative;
  overflow: hidden;
  border: none;
  padding: 13px 22px;
  font-family: 'Londrina Solid', sans-serif;
  font-weight: 900;
  font-size: 21px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.1s;
}
.btn:active {
  transform: translate(2px, 2px);
}
.btn.primary {
  background: var(--red);
  color: #fff;
  box-shadow: 6px 6px 0 var(--red-deep);
}
.btn.primary:active {
  box-shadow: 2px 2px 0 var(--red-deep);
}
.btn.ghost {
  background: #fff;
  color: var(--ink);
  box-shadow: var(--hard-sm);
}
.btn.ghost:active {
  box-shadow: 2px 2px 0 var(--ink);
}
.btn.btn-block {
  width: 100%;
}
/* Generate report button — white so it reads on the red field */
.btn.primary.btn-block {
  background: #fff;
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--red);
}
.btn.primary.btn-block:active {
  box-shadow: 2px 2px 0 var(--red-deep);
}
.btn.loading {
  color: transparent !important;
  pointer-events: none;
}
.btn.loading::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 3px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: rh-spin 0.6s linear infinite;
}
@keyframes rh-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- summary / verdict ---------- */
.result-banner {
  padding: 30px 18px;
  margin: 16px 3px;
  background: #fff;
  color: var(--ink);
  text-align: center;
  box-shadow: var(--hard);
}
.result-banner.pass,
.result-banner.warn,
.result-banner.fail {
  background: #fff;
}
.result-banner .big {
  font-family: 'Londrina Solid', sans-serif;
  font-weight: 900;
  font-size: 84px;
  line-height: 0.85;
  color: var(--ink);
}
.result-banner.pass .big {
  color: var(--pass);
}
.result-banner.warn .big,
.result-banner.fail .big {
  color: var(--red);
}
.result-banner .stars {
  font-size: 36px;
  letter-spacing: 3px;
  margin-top: 8px;
}
.result-banner .stars .on {
  color: var(--gold);
}
.result-banner .stars .off {
  color: #d2d2d2;
}
.result-banner .label {
  font-family: 'Londrina Solid', sans-serif;
  font-size: 28px;
  margin-top: 8px;
  text-transform: uppercase;
  color: var(--ink);
}
.result-banner.pass .label {
  color: var(--pass);
}
.result-banner.warn .label {
  color: var(--gold-deep);
}
.result-banner.fail .label {
  color: var(--red);
}
.kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 16px 3px;
}
.kpi {
  background: var(--card);
  color: var(--paper-ink);
  padding: 16px 8px;
  text-align: center;
  box-shadow: var(--hard-sm);
}
.kpi .v {
  font-family: 'Londrina Solid', sans-serif;
  font-weight: 900;
  font-size: 32px;
}
.kpi .l {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
  font-weight: 800;
}
.crit-list {
  list-style: none;
  margin: 0 3px;
  padding: 0;
}
.crit-list li {
  padding: 13px;
  background: var(--card);
  color: var(--paper-ink);
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: inset 0 -5px 0 var(--red);
}
.crit-list li b {
  color: var(--red-deep);
}
.devnote {
  margin: 16px 2px 4px;
  font-size: 11.5px;
  color: #f6c9c6;
  text-align: center;
  font-weight: 600;
}
.report-actions {
  margin: 24px 3px 6px;
  background: var(--gold);
  padding: 18px 16px;
  box-shadow: var(--hard);
}
.report-actions .cta-status {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  margin: 0 0 12px;
}
.report-actions .cta-desc {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  margin: 10px 2px 0;
}
.report-out {
  margin-top: 12px;
}
.report-link {
  background: var(--card);
  color: var(--paper-ink);
  padding: 16px;
  text-align: center;
  box-shadow: var(--hard-sm);
}
.report-link .tiny {
  font-family: 'Londrina Solid', sans-serif;
  font-weight: 900;
  color: var(--ink);
  font-size: 18px;
  text-transform: uppercase;
}
.report-link a {
  color: var(--red-deep);
  word-break: break-all;
  font-size: 14px;
  font-weight: 700;
}
/* open + copy report buttons: red, white letters, black shadow — matched size, no underline */
.report-link .btn {
  background: var(--red);
  color: #fff;
  box-shadow: var(--hard-sm);
  font-size: 21px;
  text-decoration: none;
}
.report-link .btn:active {
  box-shadow: 2px 2px 0 var(--ink);
}
/* guided-completion highlight */
.item.flash,
.griditem.flash {
  animation: rh-flash 1.2s ease;
}
@keyframes rh-flash {
  0%,
  100% {
    background: var(--card);
  }
  30% {
    background: #ffe1a6;
  }
}

/* concept badge */
.testbanner {
  background: var(--gold);
  color: var(--ink);
  text-align: center;
  font-family: 'Londrina Solid', sans-serif;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 12px;
}

.gen-msg {
  background: #d6272e;
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 10px 14px;
  margin-top: 10px;
  box-shadow: 4px 4px 0 #111;
}

.setup.flash-setup {
  animation: rh-flash 1.2s ease;
}

/* --- animated-ux: vertical-fill progress buttons + tab pop --- */
.btn.ghost {
  --fill: var(--red);
}
.btn.primary {
  --fill: var(--red-deep);
}
.btn.filling {
  pointer-events: none;
  background-image: linear-gradient(var(--fill), var(--fill));
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 0%;
  animation: rh-fill 0.6s ease forwards;
}
@keyframes rh-fill {
  to {
    background-size: 100% 100%;
  }
}
.seg button.pop {
  animation: rh-pop 0.3s ease;
}
@keyframes rh-pop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.09);
  }
  100% {
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn.filling,
  .seg button.pop {
    animation: none;
  }
}

/* ============================================================
   Feedback batch 2 — FAITHFUL Codrops effects + real-site nav
   Kozakura · Makiko (in nav) · giant-pug buttons · rascalhouse nav ·
   q-head row · Elastic select · DOUBLED staircase
   ============================================================ */

/* gold stars stay legible on the white bar */
.topbar .scorechip .stars .on {
  text-shadow: 1px 1px 0 var(--ink);
}

/* ---------- #7 nav bar — match rascalhouse.com ---------- */
.topbar {
  background: #fff;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.08);
}
.topbar .row {
  min-height: 52px;
  padding: 8px 16px;
}
.logo-wrap {
  position: relative;
  align-self: center;
  height: 52px;
  width: 120px;
  overflow: visible;
}
.brandlogo {
  position: absolute;
  left: 0;
  top: -4px;
  height: 76px;
}
.topbar.scrolled .row {
  min-height: 26px;
  padding: 6px 16px;
}
.topbar.scrolled .logo-wrap {
  height: 26px;
}
.topbar.scrolled .burger {
  height: 32px;
  padding: 6px 11px;
}
.topbar.scrolled .scorechip {
  transform: scale(0.85);
}
.topbar.scrolled .brandlogo {
  height: 48px;
  top: -2px;
}
@media (max-width: 520px) {
  .logo-wrap {
    width: 92px;
    height: 46px;
  }
  .brandlogo {
    height: 62px;
    top: -2px;
  }
}

/* ---------- #2 hero — centered stack (indents removed) ---------- */
.intro .kick {
  font-size: clamp(48px, 14vw, 100px);
}
.intro .kick span {
  display: block;
}

/* ---------- #8 Location — Codrops "Elastic" custom select ---------- */
.sel-field {
  margin: 0 0 16px;
}
.sel-label {
  display: block;
  margin: 0 0 7px;
  font-family: 'Londrina Solid', sans-serif;
  font-weight: 900;
  font-size: 21px;
  text-transform: uppercase;
  color: var(--ink);
}
div.cs-select {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  background: var(--field);
  color: var(--ink);
  z-index: 20;
  box-shadow: var(--hard-sm);
  border: 3px solid var(--ink);
  font-family: 'Londrina Solid', sans-serif;
  font-weight: 900;
  font-size: 20px;
  text-transform: uppercase;
  user-select: none;
}
div.cs-select.cs-active {
  z-index: 50;
}
div.cs-select:focus {
  outline: none;
}
.cs-select select {
  display: none;
}
.cs-select span {
  display: block;
  position: relative;
  cursor: pointer;
  padding: 12px 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-select > span {
  padding-right: 2.4em;
}
.cs-select > span::after {
  content: '\25BE';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s;
}
.cs-select.cs-active > span::after {
  transform: translateY(-50%) rotate(180deg);
}
.cs-select .cs-options {
  position: absolute;
  width: 100%;
  overflow: visible;
  background: transparent;
  visibility: hidden;
  padding-bottom: 1.25em;
  pointer-events: none;
  z-index: 50;
}
.cs-select.cs-active .cs-options {
  visibility: visible;
  pointer-events: auto;
}
.cs-select ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.cs-select ul span {
  padding: 12px 15px;
  color: var(--ink);
}
.cs-select .cs-options > ul::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #fff;
  box-shadow: var(--hard);
  transform: scale3d(1, 0, 1);
  transform-origin: 50% 0%;
  transition: transform 0.3s;
}
.cs-select.cs-active .cs-options > ul::before {
  transform: scale3d(1, 1, 1);
  transition: none;
  animation: expand 0.6s ease-out;
}
.cs-select .cs-options ul li {
  position: relative;
  opacity: 0;
  transform: translate3d(0, -25px, 0);
  transition:
    opacity 0.15s,
    transform 0.15s;
}
.cs-select.cs-active .cs-options ul li {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: none;
  animation: bounce 0.6s ease-out;
}
.cs-select .cs-options ul li span:hover,
.cs-select .cs-options li.cs-focus span,
.cs-select .cs-options .cs-selected span {
  color: var(--red);
  background: var(--card);
}
@keyframes expand {
  0% {
    transform: scale3d(1, 0, 1);
  }
  25% {
    transform: scale3d(1, 1.2, 1);
  }
  50% {
    transform: scale3d(1, 0.85, 1);
  }
  75% {
    transform: scale3d(1, 1.05, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounce {
  0% {
    transform: translate3d(0, -25px, 0);
    opacity: 0;
  }
  25% {
    transform: translate3d(0, 10px, 0);
  }
  50% {
    transform: translate3d(0, -6px, 0);
  }
  75% {
    transform: translate3d(0, 2px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

/* ---------- #1 Makiko flood search (burger drawer) ---------- */
.navdrawer .input--makiko {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  background: #f0e6cf;
  box-shadow: var(--hard-sm);
}
.input__field--makiko {
  position: relative;
  width: 100%;
  min-height: 54px;
  padding: 1em 1em 1em 3.4em;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
  z-index: 10;
}
.input__field--makiko:focus {
  outline: none;
}

.input__label--makiko {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.input__label--makiko::before {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  top: 45%;
  left: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 612 612'%3E%3Cpath fill='%23ffca02' d='M5.817,606.299c7.729,7.614,20.277,7.614,28.007,0L192.448,450.2c44.267,35.333,100.622,56.586,162.067,56.586c142.211,0,257.487-113.439,257.487-253.393C612.003,113.439,496.727,0,354.516,0S97.028,113.439,97.009,253.393c0,65.424,25.424,124.879,66.802,169.834L5.8,578.714C-1.929,586.328-1.929,598.686,5.817,606.299z'/%3E%3C/svg%3E")
    no-repeat center center;
  background-size: 100%;
  transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}

.input__label-content--makiko {
  display: block;
  padding: 1em 0 0 3.4em;
  color: var(--ink);
  font-weight: 700;
  transition: color 0.3s;
}

.mak-hint {
  margin: 7px 2px 0;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ink);
}
.input--makiko.input--filled .mak-hint {
  margin: 7px 2px 0;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---------- #6 question text on the same row as edit/upload ---------- */
.q-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}
.q-head .qtext {
  flex: 1;
  margin: 0;
}
.q-head .icontools {
  flex: 0 0 auto;
  margin: 0;
}

/* ---------- section auto-close prompt ---------- */
.done-prompt {
  margin: 16px 0 2px;
  background: var(--pass);
  color: #fff;
  padding: 13px 14px;
  box-shadow: var(--hard-sm);
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.done-prompt .dp-q {
  font-family: 'Londrina Solid', sans-serif;
  font-weight: 900;
  font-size: 20px;
  line-height: 1;
  text-transform: uppercase;
}
.done-prompt .dp-actions {
  display: flex;
  gap: 10px;
}
.done-prompt button {
  font-family: 'Londrina Solid', sans-serif;
  font-weight: 900;
  font-size: 16px;
  text-transform: uppercase;
  padding: 10px 16px;
  cursor: pointer;
  box-shadow: var(--hard-sm);
  transition: transform 0.1s;
}
.done-prompt .dp-yes {
  background: #fff;
  color: var(--pass);
}
.done-prompt .dp-no {
  background: var(--ink);
  color: #fff;
}
.done-prompt button:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
}

/* ---------- passing-score confetti ---------- */
.confetti-layer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  overflow: hidden;
}
.confetti-layer i {
  position: fixed;
  width: 10px;
  height: 14px;
  opacity: 0;
  animation: confetti-fly 0.95s cubic-bezier(0.15, 0.6, 0.4, 1) forwards;
}
@keyframes confetti-fly {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 60px))
      rotate(var(--rot));
  }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .confetti-layer {
    display: none;
  }
  .graphic--kozakura,
  .input__label--makiko::before,
  .cs-select .cs-options > ul::before,
  .cs-select .cs-options ul li {
    transition: none;
    animation: none;
  }
  .cs-select .cs-options ul li {
    opacity: 1;
    transform: none;
  }
}

/* #4 verdict metric boxes — white background */
.kpi {
  background: #fff;
}

/* ===== Feedback batch 3 ===== */
/* #7 extra breathing room above the verdict */
.verdict-top {
  margin-top: 72px;
}

/* #5 search hint sits below the bar */
.navdrawer .mak-wrap {
  margin: 6px 24px 10px;
}

/* #2 big-time logo jitter while scrolling down */
@keyframes rh-jitter {
  0% {
    transform: rotate(-3deg);
  }
  45% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(-3deg);
  }
}
.brandlogo.jitter {
  animation: rh-jitter 0.5s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .brandlogo.jitter {
    animation: none;
  }
}

/* #3 checkmark badge on note buttons that have a note */
.icon-btn.note-btn.on::after {
  content: '\2713';
  position: absolute;
  top: -7px;
  right: -7px;
  width: 18px;
  height: 18px;
  background: var(--pass);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 0 var(--ink);
}

/* #1/#2 search bar: yellow bg, black text/icon, black clear (x) button */
.input__field--makiko::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  margin-left: 6px;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")
    no-repeat center;
  background-size: contain;
}

/* hide the search placeholder label while typing (no overlap with input text) */
.input--makiko.input--filled .input__label-content--makiko {
  opacity: 0;
}

/* #1/#2 decorative flank-line SVGs (rascalhouse.com) — inline, drawn on */
.intro .kick {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto; /* centers heading; the sub bar drops to its own row below */
  position: relative;
}
.flank {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 58px;
  height: 190px;
  overflow: visible;
  pointer-events: none;
}
.flank-left {
  right: 100%;
  margin-right: 26px;
}
.flank-right {
  left: 100%;
  margin-left: 26px;
}
.flank line,
.flank path {
  fill: none;
  stroke: #fff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 44;
  stroke-dashoffset: 44;
  animation: flank-draw 0.55s ease forwards;
}
.flank > *:nth-child(2) {
  animation-delay: 0.12s;
}
.flank > *:nth-child(3) {
  animation-delay: 0.24s;
}
.flank > *:nth-child(4) {
  animation-delay: 0.36s;
}
@keyframes flank-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .flank line,
  .flank path {
    animation: none;
    stroke-dashoffset: 0;
  }
}
@media (max-width: 760px) {
  .flank {
    width: 26px;
    height: 84px;
  }
  .flank-left {
    margin-right: 6px;
  }
  .flank-right {
    margin-left: 6px;
  }
}

/* #2 keep inputs (esp. datetime) from overflowing their container on mobile */
.field input,
.field select {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
/* #5 breathing room under the report CTA on the verdict */
.report-actions {
  margin-bottom: 50px;
}

/* #3 magnifier grows to flood the field yellow on focus */
.input--makiko.input--filled .input__label--makiko::before {
  transform: scale3d(30, 30, 1);
}
/* #4 keep the datetime field inside its container on small screens */
/* #2 datetime field: symmetric padding + reset native inner spacing so it stays
   inside its container on EVERY browser (iOS/Safari add their own otherwise) */
.field input[type='datetime-local'] {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  padding-left: 14px;
  padding-right: 14px;
}
.field input[type='datetime-local']::-webkit-date-and-time-value {
  margin: 0;
  text-align: left;
}
.field input[type='datetime-local']::-webkit-calendar-picker-indicator {
  margin: 0;
  flex: 0 0 auto;
}
@media (max-width: 520px) {
  .field input[type='datetime-local'] {
    font-size: 15px;
  }
}

/* #2 partial star fill so the icons match the decimal rating exactly */
.stars i.partial {
  position: relative;
  color: #d2d2d2;
}
.stars i.partial::before {
  content: '★';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--f, 0%);
  overflow: hidden;
  color: var(--gold);
}
.topbar .scorechip .stars i.partial {
  color: #777;
}
.topbar .scorechip .stars i.partial::before {
  color: var(--gold);
  text-shadow: 1px 1px 0 var(--ink);
}

/* #3 Reset "tap to confirm" wipes to BLACK (lending into the black bottom bar) */
#btnReset {
  --fill: var(--ink);
}

/* #4 bottom-bar: yellow figures, white labels, tripled gap between the two lines */
.bottombar .stat .ln {
  display: block;
}
.bottombar .stat .ln + .ln {
  margin-top: 7px;
}
.bottombar .stat .lbl {
  color: #fff;
  margin-left: 3px;
}

/* #2 completed-report shortcut, pinned to the bottom of the drawer */
.navdrawer .panel {
  display: flex;
  flex-direction: column;
  overflow: visible; /* let the elastic morph edge spill past the left edge */
  padding-bottom: 0;
}
/* GSAP drives the panel transform for the elastic open — kill the CSS slide */
.navdrawer.gsap-nav .panel {
  transition: none;
}
/* elastic leading edge: a white blob that bulges out then springs back */
.navdrawer .nav-morph {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 54px;
  transform: translateX(-100%);
  pointer-events: none;
  z-index: 0;
}
.navdrawer .nav-morph svg {
  display: block;
  width: 100%;
  height: 100%;
}
.navdrawer .nav-morph path {
  fill: #fff;
}
.navdrawer #navPanel {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding-bottom: 16px;
}
.nav-report {
  flex: 0 0 auto;
  background: var(--red);
  color: #fff;
  padding: 16px 24px 20px;
  box-shadow: 0 -5px 0 var(--ink);
}
.nav-report .nr-label {
  font-family: 'Londrina Solid', sans-serif;
  font-weight: 900;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink); /* black — no yellow on the red panel (brand rule) */
}
.nav-report .nr-store {
  font-weight: 700;
  font-size: 14px;
  margin: 1px 0 10px;
  color: #fff;
}
.nav-report .nr-btn {
  display: inline-block;
  font-family: 'Londrina Solid', sans-serif;
  font-weight: 900;
  font-size: 18px;
  text-transform: uppercase;
  background: #fff; /* white button on red (brand rule) */
  color: var(--ink);
  padding: 9px 16px;
  text-decoration: none;
  box-shadow: var(--hard-sm);
}

/* Close (×) button: LEFT on desktop, but stays top-RIGHT on mobile */
@media (min-width: 601px) {
  .navdrawer .nav-close {
    right: auto;
    left: 16px;
  }
}

/* Search prev/next arrows — 50/50 columns matching the search-bar width.
   Hidden until a query returns more than one match. */
.navdrawer .search-nav {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0 2px;
}
.navdrawer .search-nav.show {
  display: grid;
}
.navdrawer .search-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border: none;
  cursor: pointer;
  background: var(--gold);
  color: var(--ink);
  box-shadow: var(--hard-sm);
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease;
}
.navdrawer .search-arrow:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--ink);
}
.navdrawer .search-arrow:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}
.navdrawer .search-arrow svg {
  width: 22px;
  height: 22px;
}
@media (prefers-reduced-motion: reduce) {
  .navdrawer .search-arrow {
    transition: none;
  }
}

/* Reduced motion: no drawer slide/elastic — snap open/closed */
@media (prefers-reduced-motion: reduce) {
  .navdrawer .panel {
    transition: none;
  }
}


/* While the search field is focused, hide the pinned report shortcut so the
   phone keyboard can never push it up over the search bar. */
.navdrawer.searching .nav-report {
  display: none;
}