/*
 * LCARS theme. It loads after minimal.css and changes only the look.
 *
 * The layout follows the LCARS screens: a top frame and a main frame. Each
 * frame has a column at the left that bends into a bar of coloured segments.
 * The top frame bends at its bottom corner, and the main frame at its top
 * corner, so the two bends face each other. The layouts add the bars and the
 * column as empty elements (`lc-bars`, `lc-rail`), which minimal.css ignores.
 *
 * Colour rule: text on a coloured shape is always bold and black. Only text
 * on black has a colour.
 *
 * 1. Font and tokens   4. Text           7. Catalog and tables
 * 2. Top frame         5. Controls       8. Admin and charts
 * 3. Main frame        6. Messages
 */

/* 1. Font and tokens. Antonio is under the SIL Open Font License (fonts/Antonio-OFL.txt). */
@font-face {
  font-family: "Antonio";
  src: url("/static/fonts/Antonio.ttf") format("truetype");
  font-weight: 100 700;
  font-display: swap;
}

:root {
  /* The frame has one colour, as on the reference screens. A few panels and
     bar segments have an accent colour. */
  --lc-frame: #ff9900;
  --lc-orange: #ff9900;
  --lc-gold: #ffcc66;
  --lc-peach: #ff9966;
  --lc-tan: #ffcc99;
  --lc-lavender: #cc99cc;
  --lc-violet: #9999ff;
  --lc-blue: #99ccff;
  --lc-red: #cc6666;
  --lc-ink: #000;

  /* The frame. */
  --sidebar: clamp(6.5rem, 14vw, 12rem);
  --bar: 1.5rem;
  --lc-gap: .325rem;
  --elbow: clamp(3rem, 7vw, 6.25rem);
  --inner: 2.75rem;

  --fg: var(--lc-blue);
  --muted: #a3a9c2;
  --line: #262a3a;
  --tile: #10131c;
  --bg: #000;
  --danger: var(--lc-red);
  --text-sm: .95rem;
  --text-xs: .8rem;

  color-scheme: dark;
}

body {
  max-width: 110rem;
  margin-inline: auto;
  padding: .75rem;
  font: 400 18px/1.45 "Antonio", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, sans-serif;
  letter-spacing: .03em;
}

/* A panel code, such as "02-1031": a small black label in a panel corner.
   CSS writes the codes, so they are not in the HTML. They mean nothing. */
.lc-bend::after, .lc-rail span::after {
  font-size: .85rem;
  font-weight: 700;
  line-height: 1;
  color: var(--lc-ink);
  letter-spacing: .04em;
}

/* 2. Top frame. The brand link is the label panel. Under it are a black gap
   and the bend (`lc-bend`), which curves into the top bar. Only the label
   panel is a link, so only it lights up on hover. The title at the top right
   is a hidden element in the HTML. Only this theme shows it. */
.site-header {
  --bend: calc(var(--elbow) + .25rem);
  position: relative;
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  grid-template-rows: auto 1fr var(--lc-gap) calc(var(--bend) - var(--bar)) var(--bar);
  align-items: stretch;
  gap: 0;
  max-width: none;
  padding: 0;
}
.site-header .brand {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  /* As tall as the first panel of the reference screens: 100 to 160px. */
  min-height: clamp(6.25rem, 11vw, 10rem);
  padding: .75rem;
  color: var(--lc-ink);
  background: var(--lc-gold);
  font-size: clamp(.75rem, 1.45vw, 1.15rem);
  font-weight: 700;
  line-height: 1.1;
  text-align: right;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.site-header .brand:hover, .site-header .brand:focus-visible { text-decoration: none; filter: brightness(115%); }
.lc-bend {
  grid-column: 1;
  grid-row: 4 / 6;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: .55rem .75rem;
  background: var(--lc-frame);
  border-bottom-left-radius: var(--elbow);
}
.lc-bend::after { content: "02-1031"; }

.lc-title[hidden] {
  display: block;
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  padding-left: 1rem;
  color: var(--lc-tan);
  font-size: clamp(1.6rem, .9rem + 3.4vw, 4rem);
  line-height: 1;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* The inner curve of a bend: a square in the frame colour under a black square with one round corner. */
.site-header::before, .site-header::after, .lc-frame::before, .lc-frame::after {
  content: "";
  position: absolute;
  left: var(--sidebar);
  width: calc(var(--inner) + 1rem);
  height: calc(var(--inner) + 1rem);
}
.site-header::before { bottom: var(--bar); background: var(--lc-frame); }
.site-header::after { bottom: var(--bar); background: var(--bg); border-bottom-left-radius: var(--inner); }

.site-nav {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 2 / 5;
  justify-content: flex-end;
  align-items: flex-end;
  align-content: flex-end;
  gap: .5rem;
  padding: 1rem 0 .75rem calc(var(--inner) + 1.5rem);
}
.site-nav > span.muted { align-self: flex-end; padding: 0 .75rem .45rem; }

/* A bar: a frame segment, two accent segments, then the frame again to the
   right edge. Black gaps divide the segments. The ends are square. */
.lc-bars { display: flex; height: var(--bar); }
.lc-bars span { display: block; height: 100%; border-right: var(--lc-gap) solid var(--bg); background: var(--lc-frame); }
.lc-bars span:nth-child(1) { flex: 0 0 9%; }
.lc-bars span:nth-child(2) { flex: 0 0 22%; }
.lc-bars span:nth-child(3) { flex: 0 0 5%; }
.lc-bars span:nth-child(4) { flex: 1 1 auto; border-right: 0; }
.site-header .lc-bars { grid-column: 2; grid-row: 5; }
.site-header .lc-bars span:nth-child(2) { background: var(--lc-tan); }
.site-header .lc-bars span:nth-child(3) { background: var(--lc-violet); }
.lc-frame > .lc-bars span:nth-child(2) { background: var(--lc-lavender); }
.lc-frame > .lc-bars span:nth-child(3) { background: var(--lc-violet); }

/* 3. Main frame: the column bends at its top corner into the bar above the content. */
.lc-frame {
  position: relative;
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  grid-template-rows: var(--bar) 1fr;
  min-height: calc(100vh - 14rem);
  margin-top: .6rem;
}
.lc-frame::before { top: var(--bar); background: var(--lc-frame); }
.lc-frame::after { top: var(--bar); background: var(--bg); border-top-left-radius: var(--inner); }
.lc-rail {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--elbow) 0 0 0;
}
/* The panels of the column: the frame colour, with one accent panel. */
.lc-rail span {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: .55rem .75rem;
  border-bottom: var(--lc-gap) solid var(--bg);
  background: var(--lc-frame);
}
.lc-rail span:nth-child(1) { flex: 0 0 clamp(9rem, 16vw, 13rem); }
.lc-rail span:nth-child(2) { flex: 0 0 4.5rem; background: var(--lc-tan); }
.lc-rail span:nth-child(3) { flex: 0 0 6rem; }
.lc-rail span:nth-child(4) { flex: 1 1 auto; border-bottom: 0; }
.lc-rail span:nth-child(1)::after { content: "03-4512"; }
.lc-rail span:nth-child(2)::after { content: "04-0808"; }
.lc-rail span:nth-child(3)::after { content: "05-2210"; }
.lc-frame > .lc-bars { grid-column: 2; grid-row: 1; }

/* On the front page the column holds the category buttons. The bend stays a
   plain panel in the frame colour, as on the reference screens. The buttons
   follow it: each is a panel with its name in the bottom right corner. The
   current category has the accent colour. */
.category-nav { gap: 0; padding: 0; margin: 0; }
.category-nav::before {
  content: "";
  flex: 0 0 clamp(7rem, 12vw, 10rem);
  background: var(--lc-frame);
  border-bottom: var(--lc-gap) solid var(--bg);
}
.category-nav > a {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 4.25rem;
  padding: .55rem .75rem;
  color: var(--lc-ink);
  /* The colours of the other filter buttons (the order tabs): violet, and
     orange for the current one. The type is that of every pill. */
  background: var(--lc-violet);
  border-bottom: var(--lc-gap) solid var(--bg);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: right;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .06em;
  overflow-wrap: break-word;
}
.category-nav > a:is(:hover, :focus-visible, :visited, [aria-current="page"]) { color: var(--lc-ink); text-decoration: none; }
.category-nav > a:is(:hover, :focus-visible) { filter: brightness(115%); }
.category-nav > a[aria-current="page"] { background: var(--lc-orange); }
.lc-rail.category-nav > span { flex: 1 1 auto; min-height: 4rem; padding: 0; border: 0; background: var(--lc-frame); }
.lc-rail.category-nav > span::after { content: none; }

.lc-frame > main {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 2;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 4rem clamp(1.25rem, 3vw, 3rem);
}
/* The payment simulator has no frame. */
body > main { padding-top: 2rem; }

/* 4. Text. Coloured text appears only on black. */
h1, h2, h3, legend, label, th, dt, details summary, .tag {
  text-transform: uppercase;
  letter-spacing: .06em;
}
h1, h2, h3 { font-weight: 400; line-height: 1.15; }
.page-title, main > h1:first-child {
  color: var(--lc-tan);
  font-size: clamp(1.8rem, 1.2rem + 2.5vw, 3.2rem);
  text-align: right;
}
.title-row { flex-direction: row-reverse; align-items: flex-end; }
.title-row .page-title { margin-bottom: 1.5rem; }
.section-title, h2 { color: var(--lc-orange); font-size: 1.45rem; }
h3 { color: var(--lc-tan); }
legend, label, th, dt, details summary { color: var(--lc-lavender); }
.muted, .hint { color: var(--muted); }
.empty { color: var(--lc-lavender); text-transform: uppercase; letter-spacing: .1em; }
.tag { border-radius: 999px; padding: .05rem .6rem; }

/* Links on black. :where keeps this rule weaker than every coloured shape below. */
:where(main) a:where(:not(.button, .tile)) { color: var(--lc-gold); }
:where(main) a:where(:not(.button, .tile)):hover { color: var(--lc-tan); }

/* 5. Controls. Every pill has black text in its bottom right corner, as on the LCARS panels. */
button,
a.button,
.site-nav > a,
.site-nav button.link,
.tabs a,
.pager a {
  display: inline-flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-width: 9.5rem;
  min-height: 3rem;
  padding: .35rem 1.25rem .45rem;
  color: var(--lc-ink);
  background: var(--lc-orange);
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.1;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
}
:is(button, a.button, .site-nav > a, .tabs a, .pager a):hover {
  color: var(--lc-ink);
  text-decoration: none;
  opacity: 1;
  filter: brightness(115%);
}
:is(button, a.button):active { filter: brightness(85%); }
button.secondary { color: var(--lc-ink); background: var(--lc-violet); }
button.danger, button.secondary.danger { color: var(--lc-ink); background: var(--lc-red); border: 0; }
button:disabled { color: var(--lc-ink); background: #555a6e; filter: none; cursor: default; }

/* The navigation: one colour for each position. */
.site-nav > a { background: var(--lc-lavender); }
.site-nav > a:nth-of-type(4n + 2) { background: var(--lc-peach); }
.site-nav > a:nth-of-type(4n + 3) { background: var(--lc-violet); }
.site-nav > a:nth-of-type(4n) { background: var(--lc-tan); }
.site-nav button.link { background: var(--lc-red); }
#cart-badge { background: var(--lc-orange); }
/* The navigation pills have the size of the reference buttons: wide and tall. */
.site-nav > a, .site-nav button.link { min-width: 10.5rem; min-height: 3.6rem; padding-bottom: .55rem; font-size: 1rem; }

.tabs { gap: var(--lc-gap); }
.tabs a { background: var(--lc-violet); }
.tabs a[aria-current="page"] { background: var(--lc-orange); font-weight: 700; text-decoration: none; }
.pager a { background: var(--lc-violet); }

/* A text button, such as "Delete image": plain text, not a pill. */
button.link:not(.site-nav button) {
  display: inline;
  min-width: 0;
  min-height: 0;
  padding: 0;
  color: var(--lc-tan);
  background: none;
  border-radius: 0;
  font-weight: 400;
  text-transform: none;
  letter-spacing: inherit;
}
button.link:not(.site-nav button):hover { color: var(--lc-gold); filter: none; }

:where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="search"]), select, textarea) {
  color: var(--lc-blue);
  background: var(--bg);
  border: 2px solid var(--lc-violet);
  border-radius: .5rem;
}
:where(input, select, textarea):focus-visible { border-color: var(--lc-orange); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--lc-orange); }
.search input {
  max-width: 26rem;
  padding: .5rem 1.1rem;
  border: 2px solid var(--lc-violet);
  border-radius: 999px;
}
.search input:focus-visible { border-color: var(--lc-orange); }
.search input::placeholder { color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
label.check { color: inherit; text-transform: none; letter-spacing: inherit; }

/* 6. Messages: a coloured bar with black text. */
.notice {
  padding: .6rem 1.2rem;
  color: var(--lc-ink);
  background: var(--lc-lavender);
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.notice.error { color: var(--lc-ink); background: var(--lc-red); }
/* An open chargeback: a red panel, not a pill, because it holds sentences. */
.notice.dispute { padding: 1rem 1.5rem; border-radius: 2rem 0 2rem 0; text-transform: none; letter-spacing: normal; }
.notice.dispute h2 { margin: 0 0 .5rem; color: var(--lc-ink); text-transform: uppercase; letter-spacing: .05em; }
.notice.dispute p { margin: .25rem 0; font-weight: 500; }
.notice.dispute strong { font-weight: 700; }
.field-error { color: var(--lc-red); }

/* The banner: a rounded bar. /banner.css sets its colours. It keeps black or
   white text, for contrast with the colour that staff choose. */
.site-banner {
  border-radius: 999px;
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* 7. Catalog and tables */
.tile-media { border-top-left-radius: 1.75rem; }
/* The name and price under a product: an LCARS text bar. A cap and a black
   gap, then the name in colour on black. The coloured bar runs from there to
   a round end, and the price is on the bar in black, as on the buttons. */
.tile-meta {
  --tb-height: 1.6rem;
  --tb-space: .3rem;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  height: var(--tb-height);
  margin-top: .6rem;
  padding: 0;
  /* The frame colour, as most of the screen. */
  background: var(--lc-frame);
  border-left: .85rem solid var(--lc-red);
  border-radius: 999px;
  font-size: .94rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .02em;
}
/* The black gap between the cap and the name. */
.tile-meta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--tb-space);
  height: 100%;
  background: var(--bg);
}
.tile-meta::after { content: none; }
.tile-meta > span:first-child {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: calc(100% + 2px);
  padding-inline: var(--tb-space) .5rem;
  overflow: hidden;
  color: var(--lc-gold);
  background: var(--bg);
  line-height: calc(var(--tb-height) + 2px);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tile-meta > span:last-child {
  flex: none;
  margin-left: auto;
  padding-inline: .75rem .9rem;
  color: var(--lc-ink);
  white-space: nowrap;
}
.tile-meta > span.muted { color: var(--lc-ink); }
/* A grid column must be able to shrink, so a long name can end with an ellipsis. */
.grid > li { min-width: 0; }
.tile:hover .tile-meta { filter: brightness(115%); }
.price-sale { color: var(--lc-orange); }

.product-info h1 { color: var(--lc-orange); font-size: 2.2rem; text-align: left; }
.product-info .price { color: var(--lc-orange); font-size: 1.4rem; }
.product > :first-child img, .thumbs img, .image-list img { border-top-left-radius: 1.5rem; }

.variant { border: 2px solid var(--line); border-radius: 999px; padding-inline: 1.2rem; }
.variant + .variant { border-top: 2px solid var(--line); margin-top: var(--lc-gap); }
.variant:has(input:checked) { outline: 0; border-color: var(--lc-orange); }

.cart th { font-size: .9rem; }
.cart .num { color: var(--lc-orange); }
.cart tfoot .grand-total :is(th, td) { color: var(--lc-orange); font-size: 1.15rem; }
.summary { border-left: 1rem solid var(--lc-lavender); border-radius: 1.5rem 0 0 1.5rem; }

.tracker li::before { top: .25rem; height: .5rem; border-radius: 999px; }
.tracker li::after { width: 1.6rem; height: 1rem; border: 0; border-radius: 999px; background: var(--line); }
.tracker li.done { color: var(--lc-orange); }
.tracker li.done::after, .tracker li.done:has(+ .done)::before { background: var(--lc-orange); }
.timeline time, .entries time { color: var(--lc-lavender); }
.order-meta h2 { color: var(--lc-lavender); }

/* 8. Admin and charts. A stat tile is a coloured panel with black text, as in the side column. */
.stats { gap: var(--lc-gap); }
.stats li { color: var(--lc-ink); background: var(--lc-peach); border-radius: 0; }
.stats li:first-child { border-top-left-radius: 1.5rem; }
.stats li:last-child { border-bottom-right-radius: 1.5rem; }
.stats li:nth-child(3n + 2) { background: var(--lc-lavender); }
.stats li:nth-child(3n) { background: var(--lc-violet); }
.stats li.warning { background: var(--lc-red); border-left: 0; }
.stats li a { color: var(--lc-ink); }
.stats li a:hover { text-decoration: none; filter: brightness(115%); }
.stats strong { color: var(--lc-ink); font-size: 2rem; font-weight: 700; }
.stats li, .stats .stat-label { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.stats .stat-label { color: var(--lc-ink); }

.variant-card, .pick-list { border: 2px solid var(--line); border-radius: 1.25rem; }
.sub-fields { border-left: .5rem solid var(--lc-lavender); border-radius: .5rem 0 0 .5rem; }
.delete-form { border-top: 2px solid var(--line); }
.simulator-badge { color: var(--lc-ink); background: var(--lc-orange); border: 0; border-radius: 999px; font-weight: 700; }
.stacked-form input.color-input { border: 2px solid var(--lc-violet); border-radius: .5rem; }

/* The chart has one copy in LCARS colours (charts.rs, DARK). Show it in every colour scheme. */
.chart-light { display: none; }
.chart-dark { display: block; }
.chart .pt-box { fill: var(--lc-tan); }
.chart .pt-text { fill: var(--lc-ink); font-family: "Antonio", "Arial Narrow", sans-serif; letter-spacing: .04em; }

/* Narrow screens: a thinner frame and smaller pills. Last, so it wins over the rules above. */
@media (max-width: 40rem) {
  :root { --sidebar: 5.5rem; --bar: 1.1rem; --inner: 1.5rem; }
  body { padding: .4rem; }
  .site-header .brand { min-height: 5rem; padding: .5rem .4rem; font-size: .72rem; letter-spacing: .02em; }
  .site-nav { padding-left: calc(var(--inner) + .75rem); }
  .site-nav > a, .site-nav button.link { min-width: 0; min-height: 2.1rem; padding: .25rem .8rem .3rem; font-size: .85rem; }
  .lc-bend::after { content: none; }
  .category-nav > a { min-height: 3.5rem; padding: .45rem .4rem; font-size: .78rem; letter-spacing: .02em; }
  .lc-title[hidden] { font-size: 1.4rem; padding-top: .25rem; }
  /* One product a row: the side column takes room, and a text bar needs the width for the name. */
  .grid { grid-template-columns: minmax(0, 1fr); }
}