/* Comic trial: presentation only. Never tint diagnostic patterns or media. */
body.tests-watercolor-preview {
  background: #f6f2e9 url('/assets/tests-comic-hybrid-v2.png') center top / cover no-repeat fixed;
  color: #26232d;
}
.tests-watercolor-preview .device-tests {
  background: linear-gradient(to bottom, transparent 150px, rgba(255,253,247,.88) 150px);
}
.tests-watercolor-preview .device-tests > header { margin-bottom: 80px; }
.tests-watercolor-preview .section-hours,
.tests-watercolor-preview .section-hours :is(summary,span,strong,p,th,td) {
  font-family: 'Tests Pencil', cursive;
  font-size: 20px;
  letter-spacing: .015em;
  line-height: 1.15;
}
.tests-watercolor-preview .section-hours .hours-live-copy > span {
  font-size: 18px;
}
.tests-watercolor-preview .device-tests :is(.tests-intro,.test-note,.test-panel > p,.keyboard-history,.keyboard-legend) {
  font-family: 'Tests Pencil', cursive;
  font-size: 21px;
  letter-spacing: .01em;
}
.tests-watercolor-preview .device-tests > header .page-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: calc(-1 * max(0px, (100vw - 1100px) / 2));
  padding: 9px 15px;
  border: 1.5px solid #302837;
  border-radius: 6px 11px 7px 9px;
  background: #fffdf5f5;
  box-shadow: 2px 3px 0 #302837;
  color: #292932;
  text-shadow: none;
}
.tests-watercolor-preview .device-tests > header .page-brand::before {
  content: "←";
  color: #555966;
  font: 28px/1 Arial, sans-serif;
}
.tests-watercolor-preview .device-tests > header .brand-wordmark { color: #292932; }
.tests-watercolor-preview .device-tests > header .page-brand .brand-lockup { display: none; }
.tests-watercolor-preview .device-tests > header .page-brand::after {
  content: "Acasă";
  font: 600 24px/1.15 'Tests Pencil', cursive;
}
html[lang="ru"] .tests-watercolor-preview .device-tests > header .page-brand::after { content: "На главную"; }
html[lang="en"] .tests-watercolor-preview .device-tests > header .page-brand::after { content: "Home"; }
.tests-watercolor-preview .device-tests > header .page-brand:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 6px;
  border-radius: 5px;
}
.tests-watercolor-preview .tests-intro { color: #49434e; }
.tests-watercolor-preview .tests-intro::after {
  content: none;
}
.tests-watercolor-preview .device-tests h1 { font-weight: 700; color: #25212d; }
.tests-watercolor-preview .device-tests h2 { font-weight: 700; }
.tests-watercolor-preview :is(.test-panel,.test-report) {
  border: 2px solid #302837;
  border-radius: 5px 13px 7px 10px;
  /* Ink and paper stay behind content; diagnostic surfaces remain untouched. */
  background:
    linear-gradient(115deg, #65ded5 0 32%, #302837 32% 34%, #a47ae7 34% 70%, #f7a451 70%) left top / 100% 6px no-repeat,
    radial-gradient(ellipse at 0 0, #65ded530, transparent 35%),
    radial-gradient(ellipse at 100% 100%, #9a6cdb26, transparent 35%),
    repeating-linear-gradient(135deg, #30283705 0 1px, transparent 1px 7px),
    #fffdf7;
  box-shadow: 5px 6px 0 #302837;
}
.tests-watercolor-preview .device-tests button,
.tests-watercolor-preview .device-tests .test-actions a,
.tests-watercolor-preview .device-tests .ssd-upload {
  background: #fffdf6; color: #292331; border: 2px solid #302837;
  border-radius: 5px 9px 4px 7px;
  box-shadow: 3px 3px 0 #302837;
  text-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 9px 17px; font-weight: 700;
  transition: background-color .15s,box-shadow .15s;
}
.tests-watercolor-preview .device-tests button:hover:not(:disabled) {
  background: #d8f5ee; box-shadow: 2px 2px 0 #302837;
}
.tests-watercolor-preview .device-tests button[aria-pressed=true] {
  background: #85ddd1; color: #20212a;
  border: 2px solid #302837; padding: 9px 17px;
  box-shadow: 3px 3px 0 #302837;
  text-decoration: underline; text-decoration-thickness: 2px;
}
.tests-watercolor-preview .device-tests button:active:not(:disabled) { box-shadow: 1px 1px 0 #302837; }
.tests-watercolor-preview .device-tests button:focus-visible,
.tests-watercolor-preview .device-tests a:focus-visible {
  outline: 3px solid #7538aa; outline-offset: 5px;
}
.tests-watercolor-preview .device-tests button:disabled { opacity: .5; box-shadow: none; }
.tests-watercolor-preview .tests-nav { gap: 12px; margin: 28px 0; }
.tests-watercolor-preview .keyboard-live {
  background:
    linear-gradient(105deg, #d9f6efc9, #fffdf5ed 38%, #eee4fad9),
    radial-gradient(circle at 1px 1px, #30283730 1px, transparent 1.2px) 0 0 / 6px 6px;
  border: 2px solid #302837;
  border-radius: 8px 17px 10px 14px;
  box-shadow: inset 0 0 0 4px #fffdf5, 3px 4px 0 #302837;
}
.tests-watercolor-preview .keyboard-live :is(.key-row>span,.keyboard-extras span) {
  color: #292331; background: #fffefa; border: 1px solid #302837;
  box-shadow: 1px 2px 0 #302837; font-weight: 600;
}
.tests-watercolor-preview .keyboard-live :is(.key-row,.keyboard-extras) span.seen {
  background: #c7f2dd; color: #184531; border-color: #285b46;
}
.tests-watercolor-preview .keyboard-live :is(.key-row,.keyboard-extras) span.held {
  background: #285b46; color: white; box-shadow: none; border-color: #143a29;
}
.tests-watercolor-preview .keyboard-legend .legend-held::before { background: #285b46; }
.tests-watercolor-preview .keyboard-legend .legend-seen::before { background: #c7f2dd; }
.tests-watercolor-preview .keyboard-history { background: #e9e0f4; color: #30233f; border: 1px solid #6f5286; }
.tests-watercolor-preview .test-report :is(input,textarea) { background: #fff; border: 1px solid #554860; }
.tests-watercolor-preview .test-report pre {
  font-family: 'Tests Pencil', cursive;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .01em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tests-watercolor-preview footer {
  background: radial-gradient(circle at 1px 1px,#7538aa15 1px,transparent 1.2px) 0 0 / 7px 7px,#f5eedf;
  border-top: 3px solid #302837; box-shadow: 0 -5px 0 #85ddd1;
}
.tests-watercolor-preview footer .footer-language .language-menu>button {
  background: #85ddd1; color: #25212d; border: 2px solid #302837;
  border-radius: 5px 9px 4px 7px; box-shadow: 3px 3px 0 #302837;
}
@media (max-width:700px) {
  body.tests-watercolor-preview { background-size: auto 100vh; background-attachment: fixed; }
  .tests-watercolor-preview .device-tests { padding: 24px 16px 48px; }
  .tests-watercolor-preview .tests-intro::after { margin: 24px 0 30px; box-shadow: 3px 4px 0 #302837; }
  .tests-watercolor-preview :is(.test-panel,.test-report) { padding: 18px 14px; box-shadow: 3px 4px 0 #302837; }
  .tests-watercolor-preview .device-tests button { font-size: 21px; }
}
@media (max-width:70rem) {
  .tests-watercolor-preview .section-hours .hours-mobile-schedule,
  .tests-watercolor-preview .section-hours .hours-mobile-schedule :is(span,strong) {
    color: #fff;
    text-shadow: 0 1px 2px #000, 0 0 4px #000c;
  }
  .tests-watercolor-preview .section-hours .hours-mobile-schedule {
    background: transparent;
    border-top-color: #ffffff80;
  }
}
@media (prefers-reduced-motion:reduce) {
  .tests-watercolor-preview .device-tests button { transition: none; }
}