/* Final appearance layer: theme controls, centred identity and discipline navigation. */
:root {
  --discipline-1: #c4abed;
  --discipline-2: #87d7ad;
  --discipline-3: #f0b384;
  --discipline-4: #b7dbe9;
  --discipline-5: #d999b8;
  --discipline-6: #eab0a0;
  --discipline-7: #a69ae5;
  --discipline-8: #e4c576;
  --surface: #171822;
  --surface-hover: #272331;
  --logo-filter: invert(1);
}
html[data-theme="light"] {
  --paper: #f4f0ee;
  --ink: #28212d;
  --accent: #784e7f;
  --line: #d6cbd5;
  --muted: #716375;
  --surface: #e9e2e8;
  --surface-hover: #e1d6e2;
  --logo-filter: none;
  --discipline-1: #79529a;
  --discipline-2: #37744e;
  --discipline-3: #9c5c32;
  --discipline-4: #396d83;
  --discipline-5: #9b5075;
  --discipline-6: #9d5b4b;
  --discipline-7: #695ab0;
  --discipline-8: #8c7228;
}
.site-header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 28px;
  align-items: center;
}
.site-header .brand {
  justify-self: start;
}
.brand img {
  filter: var(--logo-filter);
}
.home-page .brand img {
  width: 39px;
  height: 43px;
  max-height: none;
}
.theme-switch {
  display: flex;
  align-items: center;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 40px;
  gap: 4px;
}
.theme-switch button {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  padding: 8px;
  transition:
    background 0.25s,
    color 0.25s;
}
.theme-switch button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}
.theme-switch button:hover {
  color: var(--accent);
}
.theme-switch button[aria-pressed="true"]:hover {
  color: var(--paper);
}
.theme-switch svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.identity-hero {
  min-height: calc(92svh - 90px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px var(--pad) 28px;
  background:
    radial-gradient(ellipse at 18% 40%, #bd88a90b, transparent 60%),
    radial-gradient(ellipse at 80% 80%, #a9aedc0c, transparent 60%);
}
.identity-topline,
.identity-bottomline {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.identity-centre {
  text-align: center;
  padding: 85px 0 75px;
}
.identity-kicker {
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #d7a9c9;
  margin-bottom: 43px;
}
.identity-centre h1 {
  margin: 0;
}
.identity-wordmark {
  filter: var(--logo-filter);
  width: min(70vw, 900px);
  margin: auto;
  animation: identity-reveal 0.9s var(--ease) both;
}
.identity-description {
  font-size: 17px;
  line-height: 1.8;
  color: #ad9fb4;
  margin-top: 38px;
}
.identity-link {
  display: inline-block;
  border-bottom: 1px solid #a87994;
  padding-bottom: 7px;
  margin-top: 30px;
  font-size: 15px;
  color: #e7c5d8;
  transition: color 0.25s;
}
.identity-link:hover {
  color: #fff;
}
.identity-bottomline {
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.home-selected {
  background: #e9dfdb;
  color: #272033;
}
.home-selected .subtle-link:hover {
  color: #4e3152;
}
.identity-link:focus-visible {
  outline-color: #e3b4cf;
}
@keyframes identity-reveal {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.work-layout {
  display: block;
}
.category-nav {
  position: relative;
  top: auto;
  width: 100%;
  padding: 0;
  display: block;
  margin-bottom: 45px;
  overflow: visible;
}
.category-nav .all-work-button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  margin: 0 0 25px;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font-size: 18px;
  background: transparent;
}
.category-nav .all-work-button[aria-pressed="true"] {
  background: transparent;
  color: var(--ink);
}
.category-nav .all-work-button span {
  font-size: 12px;
  color: var(--muted);
}
.discipline-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.category-nav .discipline-tile {
  position: relative;
  display: block;
  min-height: 180px;
  overflow: hidden;
  text-align: left;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  white-space: normal;
  transition:
    background 0.35s,
    border-color 0.35s,
    transform 0.35s var(--ease);
  color: var(--ink);
}
.discipline-tile .discipline-number {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--tile-accent);
}
.discipline-tile img {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 75px;
  height: 55px;
  object-fit: cover;
  opacity: 0.75;
  transition:
    transform 0.55s var(--ease),
    opacity 0.4s;
  clip-path: inset(0 round 2px);
}
.discipline-tile .discipline-name {
  display: block;
  font-size: clamp(17px, 1.65vw, 25px);
  line-height: 1.16;
  letter-spacing: -0.035em;
  max-width: 225px;
  padding-top: 40px;
  color: var(--ink);
}
.discipline-tile .discipline-count {
  display: block;
  font-size: 11px;
  margin-top: 15px;
  color: var(--muted);
  letter-spacing: 0.03em;
}
.category-nav .discipline-tile:hover {
  transform: translateY(-4px);
  background: var(--surface-hover);
  border-color: var(--tile-accent);
  color: var(--ink);
}
.category-nav .discipline-tile:hover img {
  transform: scale(1.08);
  opacity: 1;
}
.category-nav .discipline-tile[aria-pressed="true"] {
  background: var(--surface-hover);
  border-color: var(--tile-accent);
  box-shadow: inset 0 -3px var(--tile-accent);
  color: var(--ink);
}
.work-selection {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 25px;
  font-size: 14px;
  color: var(--muted);
}
.category-content {
  max-width: 1250px;
}
.work-category {
  padding-top: 35px;
}
.category-grid {
  gap: 50px 35px;
}
.category-heading h2 {
  font-size: clamp(34px, 4vw, 58px);
}
/* Light palette covers shared pages and case studies, including the inherited layouts. */
html[data-theme="light"] .site-nav a {
  color: #736579;
}
html[data-theme="light"] .site-nav a[aria-current="page"] {
  color: #925c73;
}
html[data-theme="light"] .site-nav a:hover {
  color: #332b3b;
}
html[data-theme="light"] .eyebrow {
  color: #835474;
}
html[data-theme="light"] .identity-kicker {
  color: #915f81;
}
html[data-theme="light"] .identity-description {
  color: #78687b;
}
html[data-theme="light"] .identity-link {
  color: #795272;
}
html[data-theme="light"] .identity-link:hover {
  color: #3b263e;
}
html[data-theme="light"] .identity-hero {
  background:
    radial-gradient(ellipse at 18% 40%, #d9abbe22, transparent 65%),
    radial-gradient(ellipse at 80% 80%, #acb5e12a, transparent 65%);
}
html[data-theme="light"] .portfolio-card-image,
html[data-theme="light"] .project-cover,
html[data-theme="light"] .project-gallery img {
  background: #e5dde6;
}
html[data-theme="light"] .portfolio-card-meta p {
  color: #726478;
}
html[data-theme="light"] .project-meta a,
html[data-theme="light"] .project-gallery figcaption,
html[data-theme="light"] .details dt {
  color: #7a6b80;
}
html[data-theme="light"] .project-meta span {
  color: #875c8f;
}
html[data-theme="light"] .project-subtitle p,
html[data-theme="light"] .story-copy p,
html[data-theme="light"] .details dd {
  color: #63576e;
}
html[data-theme="light"] .project-cover.contain img {
  background: #e5dde6;
}
html[data-theme="light"] .process-steps p {
  color: #685c71;
}
html[data-theme="light"] .process-steps span {
  color: #815c8c;
}
html[data-theme="light"] .tech-note,
html[data-theme="light"] .sample-data {
  color: #74617b;
}
html[data-theme="light"] .work-category:nth-child(1) h2 {
  color: var(--discipline-1);
}
html[data-theme="light"] .work-category:nth-child(2) h2 {
  color: var(--discipline-2);
}
html[data-theme="light"] .work-category:nth-child(3) h2 {
  color: var(--discipline-3);
}
html[data-theme="light"] .work-category:nth-child(4) h2 {
  color: var(--discipline-4);
}
html[data-theme="light"] .work-category:nth-child(5) h2 {
  color: var(--discipline-5);
}
html[data-theme="light"] .work-category:nth-child(6) h2 {
  color: var(--discipline-6);
}
html[data-theme="light"] .work-category:nth-child(7) h2 {
  color: var(--discipline-7);
}
html[data-theme="light"] .work-category:nth-child(8) h2 {
  color: var(--discipline-8);
}
html[data-theme="light"] .about-intro p:not(.eyebrow),
html[data-theme="light"] .cv-row,
html[data-theme="light"] .cv-row > span:first-child {
  color: #67596e;
}
html[data-theme="light"] .cv-row time,
html[data-theme="light"] .cv-row span:last-child,
html[data-theme="light"] .cv-row small {
  color: #8a738e;
}
html[data-theme="light"] .tool-list li:nth-child(3n + 1) {
  color: #795383;
  border-color: #cbb6d2;
}
html[data-theme="light"] .tool-list li:nth-child(3n + 2) {
  color: #9d6140;
  border-color: #d8bfae;
}
html[data-theme="light"] .tool-list li:nth-child(3n) {
  color: #42766e;
  border-color: #b2cbc4;
}
html[data-theme="light"] .contact-links a {
  color: #6a4e71;
  border-color: #b79fc1;
}
html[data-theme="light"] .software-modules article {
  background: #e8deeb;
  border-color: #c8b7d0;
}
html[data-theme="light"] .software-modules article:nth-child(even) {
  background: #eddfd5;
  border-color: #d3b8a5;
}
html[data-theme="light"] .software-modules p {
  color: #695b73;
}
html[data-theme="light"] .software-modules span {
  color: #855c8c;
}
html[data-theme="light"] .oversight-section {
  background: #decde0;
  color: #39263c;
}
html[data-theme="light"] .oversight-section .eyebrow {
  color: #835274;
}
html[data-theme="light"] .oversight-section > p:last-child {
  color: #66506c;
}
html[data-theme="light"] .evaluation-section > p {
  color: #6e5b77;
}
html[data-theme="light"] .evaluation-metrics strong {
  color: #845895;
}
html[data-theme="light"] .evaluation-metrics span {
  color: #7a6985;
}
html[data-theme="light"] .pill {
  color: #63566c;
  border-color: #a597ae;
}
html[data-theme="light"] .pill:hover {
  color: #f7eef7;
  background: #795b87;
}
html[data-theme="light"] .quiet-footer a:hover {
  color: #89536d;
}
/* Deliberately dark media stages retain sufficient contrast in either surrounding theme. */
.cinema,
.actual-demo,
.presentation-section,
.terminal,
.code-block,
.monitor-demo,
.lightbox {
  color: #edf0f3;
}
.cinema .eyebrow,
.actual-demo .eyebrow,
.presentation-section .eyebrow {
  color: #dbb5df;
}
.cinema .section-head span:last-child,
.actual-demo .section-head span:last-child,
.presentation-section .section-head span:last-child {
  color: #b5a8c0;
}
.cinema .video-meta {
  color: #aaa0b4;
}
.monitor-demo .sample-data {
  color: #a6a0b6;
}
html[data-theme="light"] .cinema .eyebrow,
html[data-theme="light"] .actual-demo .eyebrow,
html[data-theme="light"] .presentation-section .eyebrow {
  color: #dbb5df;
}
html[data-theme="light"] .monitor-demo .sample-data {
  color: #b2a5c1;
}
@media (max-width: 1000px) {
  .discipline-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .discipline-tile .discipline-name {
    font-size: 23px;
    max-width: 260px;
  }
  .category-nav .discipline-tile {
    min-height: 170px;
  }
  .identity-centre {
    padding: 75px 0;
  }
  .identity-wordmark {
    width: 82vw;
  }
  .identity-hero {
    min-height: 750px;
  }
  .site-header {
    gap: 22px;
  }
}
@media (max-width: 600px) {
  .site-header {
    grid-template-columns: 1fr auto auto;
    gap: 14px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .site-nav {
    gap: 15px;
  }
  .site-nav a {
    font-size: 13px;
  }
  .brand img {
    width: 90px;
  }
  .home-page .brand img {
    width: 30px;
    height: 36px;
  }
  .theme-switch {
    padding: 3px;
    gap: 2px;
  }
  .theme-switch button {
    width: 29px;
    height: 29px;
    padding: 6px;
  }
  .theme-switch svg {
    width: 17px;
    height: 17px;
  }
  .identity-hero {
    min-height: calc(80svh - 70px);
    padding-top: 25px;
    padding-bottom: 22px;
  }
  .identity-topline,
  .identity-bottomline {
    font-size: 10px;
    gap: 15px;
    letter-spacing: 0;
  }
  .identity-centre {
    padding: 65px 0 60px;
  }
  .identity-kicker {
    font-size: 11px;
    letter-spacing: 0.12em;
    margin-bottom: 30px;
  }
  .identity-wordmark {
    width: 100%;
    max-width: 500px;
  }
  .identity-description {
    font-size: 15px;
    line-height: 1.7;
    margin-top: 30px;
  }
  .identity-link {
    font-size: 14px;
    margin-top: 23px;
  }
  .identity-bottomline {
    padding-top: 18px;
  }
  .work-intro {
    padding-top: 35px;
  }
  .work-layout {
    padding-top: 0;
  }
  .category-nav {
    display: block;
    overflow: visible;
    position: relative;
    top: 0;
    margin-bottom: 30px;
  }
  .discipline-tiles {
    gap: 10px;
  }
  .category-nav .discipline-tile {
    min-height: 175px;
    padding: 15px;
  }
  .discipline-tile .discipline-name {
    font-size: 19px;
    max-width: 180px;
    padding-top: 47px;
  }
  .discipline-tile img {
    width: 58px;
    height: 43px;
    top: 14px;
    right: 12px;
  }
  .category-nav .all-work-button {
    font-size: 16px;
    margin-bottom: 18px;
    padding: 17px 0;
  }
  .category-nav .all-work-button span {
    display: block;
    font-size: 10px;
  }
  .discipline-tile .discipline-count {
    font-size: 10px;
    margin-top: 12px;
  }
  .discipline-tile .discipline-number {
    font-size: 11px;
  }
  .category-grid {
    gap: 35px;
  }
  .work-selection {
    font-size: 12px;
  }
  .category-heading h2 {
    font-size: 34px;
  }
  .presentation-section .section-head span {
    font-size: 11px;
  }
}
@media (max-width: 360px) {
  .site-header {
    gap: 10px;
  }
  .brand img {
    width: 70px;
  }
  .site-nav {
    gap: 11px;
  }
  .site-nav a {
    font-size: 12px;
  }
  .theme-switch button {
    width: 26px;
    height: 26px;
  }
  .discipline-tile .discipline-name {
    font-size: 17px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .identity-wordmark {
    animation: none;
  }
  .discipline-tile,
  .discipline-tile img {
    transition: none;
  }
  .category-nav .discipline-tile:hover {
    transform: none;
  }
}
/* Whole control toggles appearance; symbols remain visual cues. */
.theme-switch {
  cursor: pointer;
  touch-action: manipulation;
}
.theme-switch button {
  pointer-events: none;
}
.theme-switch:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}
.reveal.motion-ready {
  opacity: 0;
  transform: translateY(30px) scale(0.975);
  transition:
    opacity 0.75s var(--ease),
    transform 0.85s var(--ease);
}
.reveal.motion-ready.visible {
  opacity: 1;
  transform: none;
}
.software-modules article:nth-child(2),
.discipline-tile:nth-child(2n) {
  transition-delay: 70ms;
}
.software-modules article:nth-child(3) {
  transition-delay: 140ms;
}
.software-modules article:nth-child(4) {
  transition-delay: 210ms;
}
.monitor-original {
  background: #fff;
  color: #222;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 28px;
}
.notebook-heading {
  padding: 22px 28px;
  background: #f3f3f3;
  border-bottom: 1px solid #ddd;
  font-weight: 600;
}
.notebook-heading span {
  float: right;
  font-size: 14px;
  font-weight: 400;
  color: #666;
}
.output-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 18px 28px;
  border-bottom: 1px solid #ddd;
}
.output-tabs button {
  background: #f0f0f0;
  color: #333;
  padding: 12px 18px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 14px;
}
.output-tabs button[aria-selected="true"] {
  background: #304e39;
  color: white;
  border-color: #304e39;
}
.monitor-original [role="tabpanel"] {
  padding: 28px;
}
.monitor-original [hidden] {
  display: none;
}
.monitor-original h3 {
  font-size: 23px;
  margin-bottom: 20px;
}
.monitor-original figure {
  margin-top: 28px;
}
.monitor-original img {
  width: auto;
  max-width: 100%;
  margin: auto;
}
.monitor-original figcaption {
  text-align: center;
  color: #555;
  font-size: 14px;
  padding: 14px;
}
.result-table-scroll {
  overflow: auto;
}
.original-results {
  border-collapse: collapse;
  font-family: monospace;
  font-size: 13px;
  white-space: nowrap;
  min-width: 100%;
}
.original-results td,
.original-results th {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  text-align: right;
}
.original-results th {
  background: #f5f5f5;
}
.original-results tbody tr:nth-child(even) {
  background: #fafafa;
}
@media (max-width: 600px) {
  .notebook-heading span {
    float: none;
    display: block;
    margin-top: 6px;
  }
  .output-tabs,
  .monitor-original [role="tabpanel"] {
    padding: 16px;
  }
  .output-tabs button {
    flex: 1 1 100%;
  }
  .notebook-heading {
    padding: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal.motion-ready {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.monitor-inputs {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  margin: 20px 0;
}
.monitor-inputs label {
  display: grid;
  gap: 7px;
  font-size: 14px;
}
.monitor-inputs input,
.monitor-inputs select {
  padding: 10px 12px;
  border: 1px solid #aaa;
  background: #fff;
  color: #222;
  border-radius: 3px;
  max-width: 100%;
}
.monitor-inputs button {
  padding: 11px 16px;
  background: #304e39;
  color: white;
  border-radius: 3px;
}
.monitor-status {
  padding: 15px 28px;
  background: #edf3ed;
  color: #304e39;
  font-size: 14px;
}
.monitor-context {
  font-size: 15px;
  margin: 15px 0;
  color: #555;
}
.live-chart {
  border-top: 1px solid #ddd;
  padding-top: 20px;
}
.live-chart svg {
  display: block;
  width: 100%;
  background: #fff;
  color: #222;
  font-family: Arial, sans-serif;
}
.live-chart svg text {
  fill: currentColor;
}
.monitor-original .result-table-scroll {
  max-height: 440px;
  overflow: auto;
}
.original-results thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}
.monitor-original [role="tabpanel"] {
  animation: output-in 0.35s ease;
}
@keyframes output-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 600px) {
  .monitor-inputs label {
    width: 100%;
  }
  .monitor-inputs input,
  .monitor-inputs select {
    width: 100%;
  }
  .monitor-status {
    padding: 15px;
  }
  .live-chart {
    overflow: auto;
  }
  .live-chart svg {
    min-width: 620px;
  }
}
/* Keep the first category tile's label visible; legacy first-button rules applied to it. */
.category-nav .discipline-tiles .discipline-tile span {
  display: block;
  margin-left: 0;
}
.category-nav .discipline-tiles .discipline-name {
  font-size: clamp(17px, 1.65vw, 25px);
  color: var(--ink);
}
.category-nav .discipline-tiles .discipline-count {
  font-size: 12px;
  color: var(--muted);
}
.category-nav .discipline-tiles .discipline-number {
  font-size: 12px;
  color: var(--tile-accent);
}
.category-nav .discipline-tiles .discipline-tile {
  margin: 0;
  padding: 18px;
}
.shop-app {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 28px;
  border-bottom: 1px solid var(--line);
}
.shop-toolbar h3 {
  font-size: 28px;
  font-weight: 400;
  margin-top: 8px;
}
.shop-roles {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.shop-app button {
  background: var(--surface-hover);
  color: var(--ink);
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 5px;
}
.shop-roles button[aria-selected="true"] {
  background: #cfa3bf;
  color: #271d29;
  border-color: #cfa3bf;
}
.shop-message {
  padding: 16px 28px;
  color: var(--accent);
  font-size: 14px;
  border-bottom: 1px solid var(--line);
}
.shop-app [role="tabpanel"] {
  padding: 28px;
}
.shop-app [hidden] {
  display: none !important;
}
.shop-app label {
  display: grid;
  gap: 8px;
  font-size: 14px;
}
.shop-app input,
.shop-app select {
  padding: 11px 12px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 5px;
  min-width: 0;
  width: 100%;
}
.shop-search > div {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.shop-search input {
  max-width: 270px;
}
.shop-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 25px 0;
}
.shop-product {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.shop-product h4 {
  font-size: 22px;
  font-weight: 400;
  margin: 12px 0;
}
.shop-product .shop-price {
  font-size: 28px;
  color: #d2ae84;
  margin: 15px 0;
}
.shop-product p {
  font-size: 14px;
  color: var(--muted);
}
.shop-product.selected {
  border-color: #cfa3bf;
  box-shadow: inset 0 0 0 1px #cfa3bf;
}
.shop-product button {
  margin-top: 18px;
}
.shop-checkout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
}
.shop-checkout h3 {
  font-size: 28px;
  font-weight: 400;
  margin: 10px 0 15px;
}
.shop-total {
  font-size: 48px;
  letter-spacing: -0.04em;
  margin: 18px 0;
  color: var(--accent);
}
.shop-address {
  font-size: 14px;
  color: var(--muted);
}
.shop-checkout form {
  display: grid;
  gap: 15px;
}
.shop-checkout [data-payment-fields] {
  display: grid;
  gap: 15px;
}
.shop-checkout small {
  color: var(--muted);
  font-size: 13px;
}
.shop-receipt {
  padding: 25px;
  border: 1px solid #709284;
  background: var(--paper);
  border-radius: 6px;
}
.shop-receipt p {
  margin-top: 15px;
  line-height: 1.7;
}
.shop-admin-heading h3 {
  font-size: 28px;
  margin: 12px 0;
}
.shop-admin-heading p:last-child {
  color: var(--muted);
}
.shop-admin-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 25px 0;
}
.shop-stock {
  overflow: auto;
}
.shop-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 28px;
  border-top: 1px solid var(--line);
}
.shop-bottom span {
  color: var(--muted);
  font-size: 13px;
}
.shop-app .terminal {
  margin: 0;
}
.shop-app .terminal input {
  color: white;
  background: #15212b;
}
.shop-app .terminal button {
  color: white;
  background: #293947;
}
.shop-stock table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}
.shop-stock td,
.shop-stock th {
  padding: 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
html[data-theme="light"] .shop-price {
  color: #8c5b32;
}
@media (max-width: 1000px) {
  .category-nav .discipline-tiles .discipline-name {
    font-size: 23px;
  }
  .shop-toolbar {
    align-items: start;
    flex-direction: column;
  }
}
@media (max-width: 600px) {
  .category-nav .discipline-tiles .discipline-name {
    font-size: 19px;
  }
  .category-nav .discipline-tiles .discipline-tile {
    padding: 15px;
  }
  .shop-app [role="tabpanel"],
  .shop-toolbar {
    padding: 18px;
  }
  .shop-message {
    padding: 15px 18px;
  }
  .shop-products,
  .shop-checkout,
  .shop-admin-form {
    grid-template-columns: 1fr;
  }
  .shop-search > div {
    flex-wrap: wrap;
  }
  .shop-search input {
    max-width: none;
  }
  .shop-bottom {
    flex-direction: column;
    align-items: start;
    padding: 18px;
  }
  .shop-roles button {
    padding: 10px 13px;
  }
}
.recording-controls {
  flex-wrap: wrap;
}
.recording-jump-status {
  font-size: 13px;
  color: #c1afc7;
  flex-basis: 100%;
}
.recording-controls select {
  max-width: 100%;
}