/* Roboto, served from this site (Google Fonts' variable files, so each subset
   is one file for both weights) and preloaded by index.html and docs.html */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/roboto-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/roboto-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Arial stretched to Roboto's metrics, so text that paints before Roboto
   arrives takes the same space and doesn't reflow when it swaps in */
@font-face {
  font-family: "Roboto Fallback";
  src: local("Arial"), local("ArialMT");
  ascent-override: 92.49%;
  descent-override: 24.34%;
  line-gap-override: 0%;
  size-adjust: 100.3%;
}

/* CSS Variables for theming */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --text-primary: #212529;
  --text-secondary: #495057;
  --border-color: #dee2e6;
  --border-color-hover: #adb5bd;
  --accent-color: #1f5fa8;
  --accent-hover: #184c87;
  --on-accent: #ffffff;
  /* Status colors, tuned to sit beside the blue accent */
  --success: #1f5fa8;
  --warning: #c2621a;
  --error: #b42318;
  /* Status icons, drawn as masks so they take the status color */
  --icon-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M7 12.4l3.3 3.3L17 9' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='12' cy='12' r='12' mask='url(%23m)'/%3E%3C/svg%3E");
  --icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M12 6.5v7' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.4' r='1.5'/%3E%3C/mask%3E%3Ccircle cx='12' cy='12' r='12' mask='url(%23m)'/%3E%3C/svg%3E");
  --icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M8.5 8.5l7 7M15.5 8.5l-7 7' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/mask%3E%3Ccircle cx='12' cy='12' r='12' mask='url(%23m)'/%3E%3C/svg%3E");
  /* Button icons, line drawings on the dark mode toggle's grid and stroke, drawn as
     masks so they take the button's text color */
  --icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E");
  --icon-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4l-1 1'/%3E%3Cpath d='M14 10a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1-1'/%3E%3C/svg%3E");
  --icon-save: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h11l3 3v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z'/%3E%3Cpath d='M8 4v5h7V4M8 20v-6h8v6'/%3E%3C/svg%3E");
  --icon-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h7a2 2 0 0 1 2 2v1'/%3E%3Cpath d='M3 7v11a1 1 0 0 0 1 1h13.5a1 1 0 0 0 1-.8L21 11H7.5a1 1 0 0 0-1 .8L4 19'/%3E%3C/svg%3E");
  --icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l1-12M9 7V4h6v3'/%3E%3C/svg%3E");
  --icon-import: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E");
  --icon-undo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14L4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.12);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --transition: all 0.2s ease;
  --text-placeholder: #9aa1a8;
}

/* Dark mode variables */
body.dark-mode {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #3a3a3a;
  --text-primary: #e9ecef;
  --text-secondary: #adb5bd;
  --border-color: #495057;
  --border-color-hover: #6c757d;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.5);
  --accent-color: #8ab4f0;
  --accent-hover: #a8c8f5;
  --on-accent: #1a1a1a;
  --success: #8ab4f0;
  --warning: #f4a261;
  --error: #f28b82;
  --text-placeholder: #6c757d;
}

/* The archetype examples, dimmed and italic so they don't read as filled in */
#deckname::placeholder,
#deckdesigner::placeholder {
  color: var(--text-placeholder);
  font-style: italic;
  opacity: 1;
}

.wrapper {
  width: 95%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 0;
}

.content-row {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.wrapleft {
  flex: 1;
  min-width: 0;
}

.left,
#sortorderwrapper {
  margin-right: 0;
}

.right {
  color: var(--text-primary);
  width: 440px;
  flex-shrink: 0;
  text-align: center;
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-md);
}

.right > * {
  margin-bottom: 0;
}

/* FAQ Section Styling */
.faq-section {
  max-width: 900px;
  margin: 60px auto 40px;
  padding: 0 20px;
}

.faq-section h2 {
  text-align: center;
  font-size: 28px;
  margin-bottom: 30px;
  border-left: none;
  padding: 0;
}

.faq-item {
  margin-bottom: 24px;
  padding: 20px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--accent-color);
  transition: var(--transition);
}

.faq-item:hover {
  background: var(--bg-tertiary);
  box-shadow: var(--shadow-sm);
}

.faq-item h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px 0;
}

.faq-item p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

.footer {
  color: var(--text-secondary);
  font-size: 12px;
  margin-top: 30px;
  margin-bottom: 15px;
  text-align: center;
  width: 100%;
  padding: 20px 0;
  border-top: 1px solid var(--border-color);
}

a {
  text-decoration: none;
  color: var(--accent-color);
  transition: var(--transition);
}

a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

body {
  padding: 0px;
  margin: 0px;
  font-family: "Roboto", "Roboto Fallback", sans-serif;
  background: var(--bg-secondary);
  color: var(--text-primary);
  transition: background 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
}

/* Navigation Bar */
.navbar {
  background: var(--bg-primary);
  box-shadow: var(--shadow-md);
  border-bottom: 2px solid var(--accent-color);
}

.navbar-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

/* On the generator the brand is a link home that keeps its text look */
a.navbar-brand,
a.navbar-brand:hover {
  color: var(--text-primary);
  text-decoration: none;
}

.brand-icon {
  width: 24px;
  height: 24px;
  color: var(--accent-color);
  flex-shrink: 0;
}

.brand-icon .bi-back {
  fill: var(--bg-primary);
}

.brand-icon .bi-gap {
  fill: var(--bg-primary);
  stroke: var(--bg-primary);
}

.brand-icon .bi-rules {
  stroke: var(--bg-primary);
}

.brand-text {
  color: var(--accent-color); /* Fallback */
  background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-hover) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand-text {
    color: var(--accent-color);
  }
}

.brand-highlight {
  color: var(--accent-color);
  font-weight: 800;
  -webkit-text-fill-color: var(--accent-color);
}

.navbar-container h1 {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  flex: 1;
  text-align: left;
  line-height: 1.4;
}

.navbar-links {
  display: flex;
  gap: 20px;
  margin-left: auto;
  margin-right: 10px;
}

.navbar-links a {
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
}

.navbar-links a:hover {
  color: var(--accent-color);
  background: var(--bg-secondary);
}

iframe {
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* Form sections as cards */
.left form > h2 {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin: 0 0 20px 0;
  box-shadow: var(--shadow-md);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  border-left: 4px solid var(--accent-color);
  transition: var(--transition);
}

.left form > h2:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

h2 {
  font-size: 20px;
  padding: 16px 20px;
  display: block;
  color: var(--text-primary);
  margin: 0 0 20px 0;
  font-weight: 600;
  border-left: 4px solid var(--accent-color);
}

.right h2 {
  text-align: center;
  margin: 0 0 16px 0;
  padding: 0 0 12px 0;
  border-left: none;
  border-bottom: 2px solid var(--border-color);
  font-size: 18px;
  font-weight: 600;
}

.right h2:first-of-type {
  margin-top: 0;
}

.right h2:not(:first-of-type) {
  margin-top: 32px;
}

.left input,
.left select,
.left textarea {
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  height: 40px;
  margin: 2px 6px 20px 0px;
  outline: 0 none;
  width: 70%;
  font-size: 14px;
  line-height: 20px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.left input:hover,
.left select:hover,
.left textarea:hover {
  border-color: var(--border-color-hover);
  box-shadow: var(--shadow-md);
}

.left input:focus,
.left select:focus,
.left textarea:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent), var(--shadow-md);
  transform: translateY(-1px);
}

.left input.warning:hover,
.left textarea.warning:hover,
.left input.warning:focus,
.left textarea.warning:focus {
  border-color: var(--warning);
}

.left input.error:hover,
.left textarea.error:hover,
.left input.error:focus,
.left textarea.error:focus {
  border-color: var(--error);
}

.left input[disabled],
.left select[disabled] {
  opacity: 0.6;
}

.left textarea {
  height: 120px;
  padding: 12px;
  resize: vertical;
  line-height: 1.5;
}

.left #protip {
  color: var(--text-secondary);
  font-size: 12px;
  display: block;
  margin-left: 14em;
  margin-top: -15px;
  margin-bottom: 15px;
  font-style: italic;
}

.tooltip {
  border: 2px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  position: absolute;
  z-index: 9999;
  background: var(--bg-primary);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
}

.tooltip ul {
  margin-top: 0;
  margin-bottom: 0;
  color: var(--text-primary);
}

.left label {
  display: block;
  margin: 0;
}

.left label > span:first-child {
  color: var(--text-primary);
  float: left;
  margin-top: 12px;
  padding-right: 10px;
  text-align: right;
  width: 15%;
  font-weight: 500;
}

.left span {
  display: block;
  font-size: 13px;
}

#sortorderwrapper {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-md);
}

#sortorderfloat {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

#sortorderfloat input[type="radio"] {
  display: none;
}

#sortorderfloat label {
  padding: 10px 18px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

#sortorderfloat label:hover {
  background: var(--bg-secondary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

#decklistpreview {
  margin-bottom: 20px;
}

.right form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

#download {
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--radius-md);
  transition: var(--transition);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-hover) 100%);
  border: none;
  color: var(--on-accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#download:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg), 0 0 20px color-mix(in srgb, var(--accent-color) 30%, transparent);
  background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent-color) 100%);
}

#download:active {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

#permalink {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

#permalink:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  background: var(--bg-secondary);
}

.status {
  border-width: 0;
  border-left-width: 4px;
  border-style: solid;
  margin: 0;
  padding: 20px 25px;
  position: relative;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  background: var(--bg-primary);
  transition: var(--transition);
  text-align: center;
}

.status.default,
.status.empty {
  border-color: var(--border-color-hover);
  background: linear-gradient(to right, color-mix(in srgb, var(--border-color-hover) 6%, transparent), transparent);
}

.status.valid {
  border-color: var(--success);
  background: linear-gradient(to right, color-mix(in srgb, var(--success) 6%, transparent), transparent);
}

.status.warning {
  border-color: var(--warning);
  background: linear-gradient(to right, color-mix(in srgb, var(--warning) 6%, transparent), transparent);
}

.status.error {
  border-color: var(--error);
  background: linear-gradient(to right, color-mix(in srgb, var(--error) 6%, transparent), transparent);
}

.statusmark {
  display: none;
}

/* A valid deck has no problems to list, so it gets one compact line saying so;
   a warning or error is shown by the border and each problem's own icon */
.valid .statusmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--success);
  font-weight: 700;
}

.valid .statusmark:before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background-color: var(--success);
  -webkit-mask: var(--icon-ok) center / contain no-repeat;
  mask: var(--icon-ok) center / contain no-repeat;
}

.status .details {
  color: var(--text-primary);
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  text-align: left;
  display: inline-block;
  max-width: 100%;
}

.details > li {
  line-height: 23px;
  list-style-type: none;
  margin-left: 25px;
  position: relative;
  transition: color 0.15s;
  color: var(--text-primary);
}

.details > li.prompt {
  margin-left: 0;
  color: var(--text-secondary);
  text-align: center;
}

.details label {
  /* a block, so the icon below stays on the first line when the text wraps:
     Safari places an absolute box hung off a wrapped inline between its lines */
  display: block;
  cursor: pointer;
  color: var(--text-primary);
}

.details .warning label:before,
.details .error label:before {
  content: "";
  display: block;
  height: 20px;
  overflow: visible;
  position: absolute;
  top: 1.5px;
  left: -25px;
  width: 20px;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.details .warning label:before {
  background-color: var(--warning);
  -webkit-mask-image: var(--icon-warning);
  mask-image: var(--icon-warning);
}

.details .error label:before {
  background-color: var(--error);
  -webkit-mask-image: var(--icon-error);
  mask-image: var(--icon-error);
}

.details .warning:hover {
  color: var(--warning);
}

.details .error:hover {
  color: var(--error);
}

.details ul {
  padding-left: 30px;
  color: var(--text-primary);
}

.details ul li {
  color: var(--text-primary);
}

#deckliststatuses {
  text-align: center;
  display: none;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

.deckliststatus {
  vertical-align: bottom;
  display: none;
}

.status-icon {
  display: inline-block;
  height: 20px;
  margin-right: 0.3em;
  vertical-align: text-bottom;
  width: 20px;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.status-icon.warning {
  background-color: var(--warning);
  -webkit-mask-image: var(--icon-warning);
  mask-image: var(--icon-warning);
}

.status-icon.error {
  background-color: var(--error);
  -webkit-mask-image: var(--icon-error);
  mask-image: var(--icon-error);
}

input[type="radio"]:checked + label {
  background: var(--accent-color);
  color: var(--on-accent);
  font-weight: bold;
  box-shadow: 0 0 0 2px var(--accent-color), 0 0 12px color-mix(in srgb, var(--accent-color) 40%, transparent), var(--shadow-md);
  border-color: var(--accent-color);
  transform: translateY(-2px);
}

input[type="radio"]:checked + label:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
  font-weight: bold;
  transform: translateY(-2px);
}

a {
  text-decoration: underline;
}

#permalink:disabled {
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: not-allowed;
}

/* Buttons with an icon before their label. Each sets --icon; a button that
   reports success (Copied!, Saved!) shows the check mark while it says so */
button.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
button.icon-button[hidden] { display: none; }
.icon-button::before {
  content: "";
  flex: none;
  width: 1.15em;
  height: 1.15em;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
#download { --icon: var(--icon-download); }
#permalink { --icon: var(--icon-link); }
#saveDeck { --icon: var(--icon-save); }
#loadDeck { --icon: var(--icon-open); }
#clearDeck { --icon: var(--icon-trash); }
#deckimport-button { --icon: var(--icon-import); }
#deckimport-undo { --icon: var(--icon-undo); }
#deckfile-button { --icon: var(--icon-open); }
.icon-button.done::before { -webkit-mask-image: var(--icon-check); mask-image: var(--icon-check); }

/* Dark mode toggle: a quiet icon button, like the navbar links */
.dark-mode-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  transition: var(--transition);
}

.dark-mode-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dark-mode-toggle:hover {
  color: var(--accent-color);
  background: var(--bg-secondary);
}

.dark-mode-toggle .icon-sun,
body.dark-mode .dark-mode-toggle .icon-moon {
  display: none;
}

body.dark-mode .dark-mode-toggle .icon-sun {
  display: block;
}

/* Save/Load buttons container */
.deck-actions {
  margin-bottom: 24px;
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.deck-actions button {
  padding: 10px 20px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.deck-actions button:hover {
  background: var(--bg-secondary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Autocomplete styles */
.autocomplete-suggestions {
  position: absolute;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 1000;
}

.autocomplete-suggestion {
  padding: 10px 12px;
  cursor: pointer;
  transition: var(--transition);
  color: var(--text-primary);
  font-size: 14px;
}

.autocomplete-suggestion:hover,
.autocomplete-suggestion.selected {
  background: var(--bg-tertiary);
}

@media (max-width: 464px) {
  .navbar-container {
    padding: 12px 15px;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
  }

  .navbar-brand {
    font-size: 18px;
    gap: 6px;
  }

  .brand-icon {
    width: 20px;
    height: 20px;
  }

  .navbar-container h1 {
    flex: 1 0 100%;
    order: 10;
    font-size: 12px;
    text-align: center;
    line-height: 1.3;
  }

  .wrapper {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
  }

  .content-row {
    flex-direction: column;
    gap: 15px;
  }

  .wrapleft {
    width: 100%;
  }

  .left {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .left form {
    width: 100%;
  }

  .left form > h2 {
    margin: 0 0 15px 0;
    padding: 12px 15px;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
  }

  .left label {
    margin-bottom: 15px;
    display: block;
    width: 100%;
  }

  .left label > span:first-child {
    float: none;
    display: block;
    width: 100%;
    text-align: left;
    margin-top: 0;
    margin-bottom: 5px;
    padding-left: 0;
    font-size: 14px;
    font-weight: 500;
  }

  .left input,
  .left select,
  .left textarea {
    width: 100%;
    margin: 0 0 15px 0;
    padding: 10px;
    font-size: 16px;
    box-sizing: border-box;
  }

  .left textarea {
    padding: 10px;
    min-height: 100px;
  }

  .left #protip {
    margin-left: 0;
    margin-top: 5px;
    font-size: 12px;
    width: 100%;
    box-sizing: border-box;
  }

  #sortorderwrapper {
    padding: 15px;
    margin-bottom: 15px;
    width: 100%;
    box-sizing: border-box;
  }

  #sortorderfloat {
    gap: 8px;
  }

  #sortorderfloat label {
    font-size: 12px;
    padding: 8px 12px;
  }

  .right {
    position: relative;
    top: 0;
    max-height: none;
    width: 100%;
    padding: 15px;
    margin: 0;
    box-sizing: border-box;
  }

  .right h2 {
    font-size: 16px;
  }

  #decklist {
    width: 100%;
    box-sizing: border-box;
  }

  .deck-actions {
    padding: 10px;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
  }

  .deck-actions button {
    padding: 8px 16px;
    font-size: 12px;
  }

  #download {
    padding: 14px 24px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
  }

  #permalink {
    width: 100%;
    box-sizing: border-box;
  }

  .footer {
    font-size: 12px;
    padding: 15px 5px;
  }
}

@media (max-width: 768px) {
  .navbar-container {
    padding: 14px 20px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .navbar-brand {
    font-size: 22px;
  }

  .brand-icon {
    width: 22px;
    height: 22px;
  }

  .navbar-container h1 {
    flex: 1 0 100%;
    order: 10;
    font-size: 12px;
    text-align: center;
    line-height: 1.3;
  }

  .wrapper {
    padding: 10px;
  }

  .content-row {
    flex-direction: column;
    gap: 20px;
  }

  .wrapleft {
    width: 100%;
  }

  .left {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .left form {
    width: 100%;
  }

  .right {
    width: 100%;
    margin: 0;
    margin-bottom: 20px;
    position: relative;
    top: 0;
    max-height: none;
    box-sizing: border-box;
  }

  .left form > h2 {
    font-size: 17px;
    padding: 14px 18px;
    width: 100%;
    box-sizing: border-box;
  }

  .left label {
    width: 100%;
    display: block;
  }

  .left label > span:first-child {
    float: none;
    display: block;
    width: 100%;
    text-align: left;
    margin-top: 0;
    margin-bottom: 8px;
    padding-left: 0;
    font-size: 14px;
    font-weight: 500;
  }

  .left input,
  .left select,
  .left textarea {
    width: 100%;
    margin: 0 0 18px 0;
    box-sizing: border-box;
  }

  .left #protip {
    margin-left: 0;
    margin-top: 5px;
    width: 100%;
  }

  #decklist {
    width: 100%;
    height: 120vw;
    box-sizing: border-box;
  }

  #sortorderwrapper {
    text-align: center;
    margin-right: 0;
    padding: 18px;
    width: 100%;
    box-sizing: border-box;
  }

  #sortorderfloat {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .footer {
    margin-left: 0;
    width: 100%;
    padding: 15px 10px;
    box-sizing: border-box;
  }

  .deck-actions {
    flex-direction: column;
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
  }

  .deck-actions button {
    width: 100%;
    padding: 12px;
  }

  #download {
    padding: 15px 28px;
    font-size: 15px;
    width: 100%;
    box-sizing: border-box;
  }

  #permalink {
    width: 100%;
    box-sizing: border-box;
  }

  .status {
    margin: 15px 0;
    padding: 15px 20px;
    width: 100%;
    box-sizing: border-box;
  }
}

/* Docs Page Styling */
.docs-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
}

.docs-title {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 30px;
  text-align: left;
  border-left: none;
  padding: 0;
}

.docs-nav {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
  padding: 20px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}

.docs-nav a {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition);
}

.docs-nav a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.docs-section {
  margin-bottom: 60px;
}

.docs-section h2 {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border-color);
  border-left: none;
}

.docs-section p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.docs-section ul,
.docs-section ol {
  margin-left: 20px;
  margin-bottom: 20px;
  line-height: 1.8;
  color: var(--text-secondary);
}

.docs-section li {
  margin-bottom: 8px;
}

.docs-subsection {
  margin-top: 30px;
}

.docs-subsection h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.docs-subsection pre {
  background: var(--bg-secondary);
  padding: 16px;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--accent-color);
  overflow-x: auto;
  margin-bottom: 20px;
}

.docs-subsection code {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: var(--text-primary);
}

/* Deck URL import */
.deck-import {
  margin: 0 0 24px;
  padding: 20px;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent-color);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
}
.deck-import h3 { margin: 0 0 8px; font-size: 18px; color: var(--text-primary); }
.deck-import p { line-height: 1.5; }
.import-description { margin: 0 0 16px; font-size: 14px; color: var(--text-secondary); }
.left .deck-import .import-label { display: block; width: auto; margin: 0 0 8px; padding: 0; text-align: left; font-size: 13px; font-weight: 600; }
.import-controls { display: flex; gap: 10px; align-items: stretch; }
.left .deck-import #deckimport { flex: 1; width: 0; min-width: 0; margin: 0; box-sizing: border-box; }
#deckimport-button, #deckfile-button { border: 0; border-radius: var(--radius-sm); padding: 12px 18px; background: var(--accent-color); color: var(--on-accent); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
#deckimport-button:hover:not(:disabled), #deckfile-button:hover:not(:disabled) { background: var(--accent-hover); }
#deckimport-button:disabled, #deckfile-button:disabled { opacity: .55; cursor: default; }
#deckimport-button:focus-visible, #deckfile-button:focus-visible, #deckimport-undo:focus-visible, .import-tabs [role="tab"]:focus-visible { outline: 3px solid var(--accent-color); outline-offset: 3px; }
.import-help, .import-alternative { font-size: 12px; color: var(--text-secondary); margin: 10px 0 0; }
.import-alternative { border-top: 1px solid var(--border-color); padding-top: 12px; margin-top: 14px; }
.import-tabs { display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 1px solid var(--border-color); }
.import-tabs [role="tab"] { border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 8px 12px; background: none; color: var(--text-secondary); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.import-tabs [role="tab"]:hover { color: var(--text-primary); }
.import-tabs [role="tab"][aria-selected="true"] { color: var(--accent-color); border-bottom-color: var(--accent-color); }
.import-drop { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 16px; border: 2px dashed var(--border-color); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-secondary); }
.import-drop.dragover, textarea.dragover { border-color: var(--accent-color); }
@media (pointer: coarse) { .import-drop { border: 0; padding: 0; } .import-drop span { display: none; } }
#deckimport-status { font-size: 14px; margin: 12px 0 0; color: var(--text-primary); }
#deckimport-status:empty { display: none; }
#deckimport-status[data-state="error"] { color: var(--error); }
#deckimport-undo { margin-top: 8px; border: 0; background: none; color: var(--accent-color); padding: 4px 0; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
@media (max-width: 600px) {
  .deck-import { padding: 16px; }
  .import-controls { flex-direction: column; }
  .left .deck-import #deckimport { width: 100%; }
  #deckimport-button { width: 100%; }
}

/* Generator layout */
.generator-page .navbar { border-bottom: 1px solid var(--border-color); box-shadow: none; }
.generator-page .navbar-container { max-width: 1280px; padding: 18px 28px; }
.generator-page .navbar-brand { font-size: 24px; letter-spacing: -1px; }
.generator-page .brand-icon { width: 18px; height: 18px; }
.generator-page .brand-text { background: none; -webkit-text-fill-color: var(--text-primary); }
.generator-page .brand-highlight { font-size: 14px; font-weight: 400; letter-spacing: 0; -webkit-text-fill-color: var(--text-secondary); }
.generator-page .navbar-container h1 { text-transform: none; font-size: 13px; }
.generator-page .wrapper { max-width: 1280px; width: calc(100% - 48px); }
.page-intro { margin: 24px 0 32px; }
.page-intro .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; color: var(--accent-color); margin: 0 0 10px; }
.page-intro h1 { font-size: clamp(28px, 3.5vw, 40px); font-weight: 650; letter-spacing: -1.3px; margin: 0 0 12px; }
.page-intro > p:last-child { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.generator-page .content-row { gap: 28px; }
.generator-page .wrapleft { padding: 26px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-primary); }
.generator-page .left form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.generator-page .left form > h2 { grid-column: 1 / -1; border: 0; border-bottom: 1px solid var(--border-color); background: none; box-shadow: none; border-radius: 0; padding: 16px 0 12px; margin: 4px 0 0; font-size: 17px; transform: none; }
.generator-page .left form > h2:first-child { padding-top: 0; margin-top: 0; }
.generator-page .left form > label { display: flex; flex-direction: column; gap: 8px; margin: 0; width: auto; text-align: left; min-width: 0; }
.generator-page .left label > span:first-child { float: none; width: auto; padding: 0; text-align: left; font-size: 13px; font-weight: 500; }
.generator-page .left form > label > input:not([type=checkbox]), .generator-page .left form > label > select, .generator-page .left textarea { width: 100%; box-sizing: border-box; margin: 0; box-shadow: none; height: 44px; }
.generator-page .left input:focus, .generator-page .left select:focus, .generator-page .left textarea:focus { transform: none; }
.generator-page .left form > label[for=deckmain], .generator-page .left form > label[for=deckside], .generator-page .left form > label[for=event], .generator-page .checkbox-label, .generator-page .deck-import { grid-column: 1 / -1; }
.generator-page .left textarea { height: 180px; font-size: 13px; }
.generator-page .left #deckside { height: 105px; }
.generator-page .left #protip { margin: 0; font-style: normal; line-height: 1.5; font-size: 11px; }
.generator-page .left form > .checkbox-label { flex-direction: row-reverse; justify-content: flex-end; align-items: center; }
.generator-page .left form > .checkbox-label { min-height: 32px; gap: 10px; cursor: pointer; }
.generator-page .left .checkbox-label > span:first-child { margin: 0; line-height: 20px; }
.generator-page #separate-basic-lands { flex: 0 0 17px; margin: 0; padding: 0; width: 17px; height: 17px; box-shadow: none; accent-color: var(--accent-color); cursor: pointer; }
.generator-page #separate-basic-lands:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px; }
.generator-page .deck-import { margin: 0; background: var(--bg-secondary); padding: 18px; border: 1px solid var(--border-color); }
.generator-page .deck-import h3 { font-size: 16px; }
.generator-page #deckimport { height: 44px; box-shadow: none; }
.generator-page .import-description { font-size: 13px; }
.generator-page .right { width: 400px; box-sizing: border-box; box-shadow: none; border: 1px solid var(--border-color); border-radius: 14px; padding: 22px; }
.generator-page .right h2 { font-size: 16px; text-align: left; border-bottom-width: 1px; }
.generator-page iframe { width: 100%; box-shadow: none; }
.generator-page #decklistpreview { width: 100%; }
/* The preview is one letter page tall, so the sheet fills it without padding */
.generator-page #decklist { display: block; width: 100%; height: auto; aspect-ratio: 8.5 / 11; }
/* Beside the form, the preview sidebar stays in view as the page scrolls, while it
   fits in the window (initStickySidebar); a taller one scrolls with the page */
@media (min-width: 1001px) {
  .generator-page .right.sticky { position: sticky; top: 16px; }
}
.generator-page #sortorderfloat label { font-size: 12px; padding: 10px 12px; box-shadow: none; }
.generator-page #download { background: var(--accent-color); box-shadow: none; }
.generator-page .deck-actions { background: none; padding: 0; }
.generator-page .deck-actions button { flex: 1; font-size: 12px; padding: 10px 8px; white-space: nowrap; }
@media (max-width: 1000px) {
  .generator-page .content-row { flex-direction: column; }
  .generator-page .wrapleft, .generator-page .right { width: 100%; box-sizing: border-box; }
  .generator-page .navbar-container { flex-wrap: wrap; }
  .generator-page .navbar-container h1 { flex: 1 0 100%; order: 10; font-size: 12px; text-align: left; line-height: 1.3; }
  /* One page, but no taller than it was in a box this wide */
  .generator-page #decklist { width: min(100%, 480px); margin: 0 auto; }
}
@media (max-width: 600px) {
  .generator-page .wrapper { width: calc(100% - 24px); }
  .generator-page .navbar-container { padding: 14px 16px; gap: 8px 10px; flex-wrap: wrap; }
  .generator-page .navbar-brand { font-size: 21px; }
  .generator-page .brand-highlight { display: none; }
  .generator-page .navbar-links { margin: 0 0 0 auto; }
  .generator-page .navbar-links a { padding: 6px; font-size: 12px; }
  .page-intro { margin: 20px 4px 24px; }
  .generator-page .wrapleft, .generator-page .right { padding: 18px; }
  .generator-page .left form { grid-template-columns: 1fr; gap: 16px; }
  .generator-page .left input, .generator-page .left textarea { font-size: 16px; }
  .generator-page .left .deck-import #deckimport { width: 100%; }
}

/* Keep selected radio options distinct from the base ID-selector styles. */
.generator-page #sortorderfloat input[type="radio"] {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.generator-page #sortorderfloat input:checked + label {
  background: var(--accent-color);
  color: var(--on-accent);
  border-color: var(--accent-color);
  box-shadow: none;
  transform: none;
}
/* Selecting an option must not resize it: the check mark sits in padding every
   option reserves, and the weight stays put. Only the hover lift animates, since
   cross-fading the fill and text color leaves both options washed out mid-way. */
.generator-page #sortorderfloat label {
  position: relative;
  padding-left: calc(1em + 12px);
  padding-right: calc(1em + 12px);
  transition-property: box-shadow, transform;
}
.generator-page #sortorderfloat label::before {
  /* In the line, just before the text, but taking no width of its own, so the
     text stays centered whether or not the option is checked */
  content: "";
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  margin-left: -1.25em;
  margin-right: 0.25em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
  visibility: hidden;
}
.generator-page #sortorderfloat input:checked + label::before{ visibility: visible; }
.generator-page #sortorderfloat input:focus-visible + label,
.generator-page /* jQuery UI datepicker, in the site palette (its theme file loads after this one) */
.ui-datepicker.ui-widget.ui-widget-content { background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-family: inherit; }
.ui-datepicker.ui-widget .ui-widget-header { background: var(--bg-secondary); color: var(--text-primary); border: 0; border-radius: var(--radius-sm); }
.ui-datepicker.ui-widget .ui-datepicker-prev-hover, .ui-datepicker.ui-widget .ui-datepicker-next-hover { background: var(--bg-tertiary); border: 0; }
.ui-datepicker.ui-widget .ui-state-default { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
.ui-datepicker.ui-widget .ui-state-hover { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--border-color-hover); }
.ui-datepicker.ui-widget .ui-state-highlight { background: var(--bg-primary); color: var(--accent-color); border-color: var(--accent-color); }
.ui-datepicker.ui-widget .ui-state-active { background: var(--accent-color); color: var(--on-accent); border-color: var(--accent-color); }
body.dark-mode .ui-datepicker .ui-icon { filter: invert(1); }

/* jQuery UI tooltips, in the site palette (its theme file loads after this one) */
.ui-tooltip.tooltip { background: var(--bg-primary); color: var(--text-primary); border: 2px solid var(--border-color); }

/* Each deck box's problems, listed beneath it in the one-column layout (statusAndTooltips) */
.field-messages { display: none; grid-column: 1 / -1; margin: -6px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.45; color: var(--text-primary); text-align: left; }
.field-messages > li { position: relative; padding-left: 26px; margin: 0 0 6px; }
.field-messages > li:last-child { margin-bottom: 0; }
.field-messages > li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.field-messages > li.warning::before { background-color: var(--warning); -webkit-mask-image: var(--icon-warning); mask-image: var(--icon-warning); }
.field-messages > li.error::before { background-color: var(--error); -webkit-mask-image: var(--icon-error); mask-image: var(--icon-error); }
.field-messages ul { margin: 4px 0 0; padding-left: 18px; }
.generator-page .left #protip { grid-column: 1 / -1; }

/* The native date picker on touch screens: iOS gives a date input a minimum width that
   overflows the form, and centers its value */
.generator-page #eventdate[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; display: block; text-align: left; }
.generator-page #eventdate[type="date"]::-webkit-date-and-time-value { text-align: left; }

/* The touch screen preview: the sheet drawn to canvases by PDF.js (drawPreview) */
#decklistpreview.drawn { display: flex; flex-direction: column; gap: 12px; }
#decklistpreview.drawn:empty { aspect-ratio: 8.5 / 11; background: var(--bg-tertiary); border-radius: var(--radius-md); }
#decklistpreview.drawn canvas { display: block; width: 100%; height: auto; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.preview-unavailable { margin: 0; padding: 24px 16px; font-size: 14px; color: var(--text-secondary); background: var(--bg-tertiary); border-radius: var(--radius-md); }

@media (max-width: 1000px) {
  /* The header in two lines: the brand over the tagline, then the links and toggle beside both */
  .generator-page .navbar-container { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "brand links toggle" "tagline links toggle"; align-items: center; column-gap: 8px; row-gap: 2px; }
  .generator-page .navbar-brand { grid-area: brand; }
  .generator-page .navbar-container h1 { grid-area: tagline; }
  .generator-page .navbar-links { grid-area: links; margin: 0; }
  .generator-page .dark-mode-toggle { grid-area: toggle; margin: 0; }
  .generator-page .left .field-messages:not(:empty) { display: block; }
  /* The status comes before the download buttons, so it's read before the sheet is downloaded */
  .generator-page .right { display: flex; flex-direction: column; }
  /* flex margins don't collapse, so the headings take only what the block above leaves */
  .generator-page .right > h2:not(:first-of-type) { margin-top: 8px; }
  .generator-page .right > h2:last-of-type, .generator-page .right > .status { order: 1; }
  .generator-page .right > .status { margin-bottom: 24px; }
  .generator-page .right > form, .generator-page .right > .deck-actions { order: 2; }
}

/* Sort orders in three even columns across the box, so no option wraps onto a row of its own */
.generator-page #sortorderfloat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.generator-page #sortorderfloat label { display: flex; align-items: center; justify-content: center; min-height: 34px; padding-top: 6px; padding-bottom: 6px; box-sizing: border-box; text-align: center; }

@media (max-width: 600px) {
  /* Deck boxes grow with the deck, rather than scrolling inside the scrolling page */
  .generator-page .left textarea { height: 240px; }
  .generator-page .left #deckside { height: 180px; }
  @supports (field-sizing: content) {
    .generator-page .left textarea, .generator-page .left #deckside { field-sizing: content; height: auto; min-height: 180px; max-height: 70vh; }
    .generator-page .left #deckside { min-height: 120px; }
  }
  /* Sort orders in two even columns */
  .generator-page #sortorderfloat { grid-template-columns: 1fr 1fr; }
}

/* Touch targets at least 44px */
@media (pointer: coarse) {
  .generator-page .navbar-links a, .dark-mode-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; box-sizing: border-box; }
  .autocomplete-suggestion { padding-top: 14px; padding-bottom: 14px; }
  .generator-page #sortorderfloat label { min-height: 44px; }
}