/*
  Moon's Second — Classic Newspaper Crossword Stylesheet
  A refined, editorial aesthetic inspired by broadsheet puzzle pages.
  Body font: Lora (closest web match to Bookerly — warm, readable, humanist serif)
  Display font: Libre Baskerville (crisp, authoritative headings)
  Mono font: Courier Prime
*/

/* ── Google Fonts ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');

/* ── Page ──────────────────────────────────────────────────────── */
body {
  background-color: #f5f0e8;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23f5f0e8'/%3E%3Crect width='1' height='1' fill='%23e8e0cc' opacity='0.4'/%3E%3C/svg%3E");
  margin: 0;
  padding: 24px 16px 48px;
  min-height: 100dvh;
}

@media (max-width: 500px) {
  body {  
    padding: 24px 0 48px 0;
    display: flex;
    justify-content: center;
}
  
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: -webkit-fill-available;

}

.xlv-frame {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* ── Frame ─────────────────────────────────────────────────────── */
.xlv-frame {
  box-sizing: border-box;
  font-family: 'Lora', Georgia, serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: normal !important;
  line-height: normal !important;
  color: #1a1209;
  max-width: 860px;
  margin: 0 auto;
  padding-bottom: 140px !important;

  /* Newspaper column border decoration */
  border-bottom: 3px double #1a1209;
  padding: 20px 24px 28px;
  position: relative;
}

.xlv-frame::before,
.xlv-frame::after {
  content: '';
  display: block;
  height: 1px;
  background: #1a1209;
  margin: 6px 0;
}

.xlv-frame * {
  box-sizing: border-box;
}

/* ── Title & Setter ────────────────────────────────────────────── */
.xlv-title-setter {
  text-align: center;
  border-bottom: 2px solid #1a1209;
  margin-bottom: 4px;
  padding-bottom: 10px;
  position: relative;
}

.xlv-title {
  font-family: 'Libre Baskerville', 'Times New Roman', serif;
  font-size: 2.2em;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.04em;
  text-align: center;
  color: #1a1209;
  padding: 4px 6px 6px;
  line-height: 1.1;
}

.xlv-setter {
  font-family: 'Lora', Georgia, serif;
  font-size: 0.85em;
  font-style: italic;
  text-align: center;
  color: #5a4a30;
  padding: 2px 0 10px 0;
  letter-spacing: 0.08em;
}

.xlv-setter::before { content: '— '; }
.xlv-setter::after  { content: ' —'; }

/* ── Preamble ──────────────────────────────────────────────────── */
.xlv-preamble {
  font-family: 'Lora', Georgia, serif;
  font-size: 0.9em;
  font-style: italic;
  color: #3a2e1a;
  padding: 0;
  margin: 8px 20px 0;
  text-align: center;
}

/* ── Grid panel ────────────────────────────────────────────────── */
.xlv-grid-panel {
  margin: 0;
}

@media (min-width: 501px) {
  .xlv-grid-panel { margin: 0 16px 0 0; }
}

/* Grid SVG cells inherit ink-on-paper feel via the SVG fill in exolve-m.js */

/* ── Clue panels ───────────────────────────────────────────────── */
.xlv-clues-panel {
  margin: 0 0 10px 0;
}
@media (min-width: 501px) {
  .xlv-clues-panel { margin: 0 16px 10px 0; }
}
.xlv-clues-panel:last-child { margin-bottom: 0; }

.xlv-clues-label {
  font-family: 'Libre Baskerville', 'Times New Roman', serif;
  font-size: 1.0em;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a1209;
  padding: 0 0 4px 0;
  border-bottom: 1px solid #1a1209;
  margin-bottom: 4px;
  break-inside: avoid;
  break-after: avoid;
}

/* Clue table */
.xlv-frame .xlv-clues-table {
  border: none !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  margin: inherit;
}

.xlv-frame table,
.xlv-frame td,
.xlv-frame tr {
  background-image: none !important;
}

.xlv-frame .xlv-clues-table tr {
  border: none !important;
  break-inside: avoid;
}

.xlv-frame .xlv-clues-table td {
  border: none !important;
  padding: 1px 8px 5px 0 !important;
  vertical-align: top;
  white-space: normal !important;
  font-size: 0.88em;
  line-height: 1.4;
  color: #1a1209;
}

.xlv-frame .xlv-clues-table .xlv-clue-label {
  background-image: none !important;
  box-sizing: content-box;
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  font-size: 0.82em;
  color: #5a4a30;
  max-width: 2ch;
  overflow: visible;
  text-align: right;
  word-break: normal;
  word-wrap: normal;
  white-space: nowrap !important;
  padding-right: 4px !important;
}

/* Active / highlighted clue */
.xlv-active-clue td {
  color: #1a1209 !important;
}

/* ── Current clue strip ────────────────────────────────────────── */
.xlv-curr-clue {
  font-family: 'Libre Baskerville', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 0.95em;
  margin: 0;
  overflow-y: auto;
  padding: 0 !important;
  position: relative;
/*   position: -webkit-sticky; */
  text-align: left;
  word-wrap: break-word;
  z-index: 2;
  color: #1a1209;
  background: #ede6d4;
}

.xlv-curr-clue-inner {
  padding: 4px 4px 10px 4px !important;
  position: relative;
}

.xlv-curr-orphan,
.xlv-curr-clue-label {
  display: inline;
  padding: 0;
  line-height: 0.8;
  color: #5a4a30;
}

/* ── Monospace elements ────────────────────────────────────────── */
.xlv-anno-text,
.xlv-status,
.xlv-saving,
.xlv-solution,
.xlv-answer,
.xlv-input,
.xlv-incluefill,
.xlv-clue-extraction-slot,
.xlv-scratchpad,
.xlv-shuffle {
  font-size: 12px !important;
  line-height: normal !important;
  font-family: 'Courier Prime', 'Courier New', monospace !important;
  color: #1a1209;
}

/* ── Small print ───────────────────────────────────────────────── */
.xlv-copyright,
.xlv-small-print,
.xlv-small-print *,
.xlv-metadata,
.xlv-saving {
  font-size: x-small !important;
  line-height: normal !important;
  font-family: 'Courier Prime', monospace;
  color: #7a6a50;
}

.xlv-small-print {
  margin: 6px 0 8px 0 !important;
}

.xlv-small-print a {
  padding: 4px 4px 0 0 !important;
}

.xlv-saving {
  color: #9a8a70;
  margin: 4px 0 2px 0 !important;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.xlv-frame .xlv-button {
  border: 1.5px solid #1a1209;
  background: #2c3e50 !important;
  color: white;
  display: inline-block;
  font-family: 'Libre Baskerville', serif;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.02em;
  font-weight: 500;
  line-height: normal;
  outline: none;
  text-align: center;
  text-decoration: none;
  touch-action: manipulation;
  width: inherit;
  transition: background 0.15s, color 0.15s;
}

.xlv-button:hover {
  cursor: pointer;
  background: #34495e !important;
  color: #f5f0e8;
}

.xlv-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.xlv-frame .xlv-nav-button {
  border-radius: 0;
  font-weight: 700;
}

.xlv-frame .xlv-prev { margin-right: 2px; }
.xlv-frame .xlv-next { margin-left: 2px; }

.xlv-frame .xlv-small-button {
  border: 1px solid #5a4a30;
  border-radius: 0;
  box-shadow: none;
  display: inline-block;
  font-family: 'Courier Prime', monospace;
  font-size: 11px;
  font-weight: 700;
  background: #ede6d4;
  color: #1a1209;
  line-height: normal;
  margin: 0;
  outline: none;
  padding: 1px 5px 2px 5px;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  touch-action: manipulation;
  width: inherit;
  transition: background 0.12s, color 0.12s;
}

.xlv-small-button:hover {
  cursor: pointer;
  background: #1a1209;
  color: #f5f0e8;
}

.xlv-small-print .xlv-small-button,
.xlv-curr-clue .xlv-small-button {
  font-size: 9px;
}

/* ── Controls ──────────────────────────────────────────────────── */
.xlv-controls {
  text-align: center;
}
.xlv-controls-etc { padding: 0 0 4px 0; }
.xlv-controls-row { margin: 8px 0 8px 0 !important; }

/* ── HR ────────────────────────────────────────────────────────── */
.xlv-frame hr {
  margin: 0 0 6px 0;
  border: none;
  border-top: 1px solid #a89878;
}

/* ── Status & misc ─────────────────────────────────────────────── */
.xlv-status {
  margin: 2px 0 !important;
  font-family: 'Courier Prime', monospace;
  font-size: 12px !important;
  color: #3a2e1a;
}

.xlv-errors {
  font-weight: bold;
  color: #8b1a1a;
}

.xlv-warnings-label {
  font-weight: normal;
  font-style: italic;
  color: #1a4a8b;
  margin: 16px 0 0 0;
}

.xlv-warnings { margin: 10px 0; }

.xlv-solution { font-weight: bold; }

.xlv-question {
  margin: 12px 0 2px 0 !important;
  position: relative;
}

.xlv-input,
.xlv-answer {
  border: none !important;
  padding: 0 0 6px 0;
  outline: none !important;
}

.xlv-answer {
  background-image: repeating-linear-gradient(
    to bottom, transparent, transparent 13px, #1a1209 14px
  );
}

.xlv-input { text-decoration: underline; }

/* ── Definition underline ──────────────────────────────────────── */
.xlv-definition {
  text-decoration: underline;
  text-decoration-style: double;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
  color: #1a1209;
}

/* ── Colour utilities ──────────────────────────────────────────── */
.xlv-blue       { color: #1a4a8b; }
.xlv-red        { color: #8b1a1a; }
.xlv-yellow-bg  { background-color: #f5e87a; }
.xlv-pink-bg    { background-color: #34495e; }

/* ── Clue-fill & extraction ────────────────────────────────────── */
.xlv-clue-extraction-slot {
  line-height: normal !important;
  text-align: center;
  vertical-align: middle;
}

.xlv-clue-extraction-slot,
.xlv-incluefill {
  border: none;
  cursor: text;
  padding: 0 0 2px 0;
  margin: 0 0 0 4px;
  outline: none;
  font-weight: bold;
  border-bottom: solid 2px #a89878;
  background-color: inherit;
}

.xlv-incluefill { margin: 0 4px; }

/* ── Hints ─────────────────────────────────────────────────────── */
.xlv-hint {
  cursor: pointer;
  font-weight: normal;
  font-style: italic;
  color: #5a4a30;
}

.xlv-hint-bulb {
  cursor: pointer;
  float: right;
  font-weight: normal;
}

.xlv-hint-bulb:hover { font-weight: bold; }

.xlv-hint-prefix {
  font-style: italic;
  font-weight: bold;
}

.xlv-clues-table .xlv-hint {
  display: block;
  margin-top: 4px;
}

/* ── Toggleable sections ───────────────────────────────────────── */
.xlv-toggleable * {
  background-color: transparent;
  color: inherit;
}

.xlv-toggleable {
  margin-top: 8px !important;
  border-top: 1px solid #a89878;
}

.xlv-toggleable p { margin: 4px 0; }

.xlv-active-toggler {
  border-bottom: 2px solid #a89878;
}

/* ── Links ─────────────────────────────────────────────────────── */
a.xlv-link:active,
a.xlv-link:link,
a.xlv-link:visited {
  color: inherit !important;
  outline: none;
  text-decoration: none;
}

a.xlv-link:hover { font-weight: bold; }

/* ── Scratchpad ────────────────────────────────────────────────── */
.xlv-scratchpad {
  border: 1px solid #a89878;
  background: #faf6ee;
  font-size: large !important;
  padding: 8px;
}

.xlv-textarea {
  outline: none;
  width: 100%;
  background: transparent;
}

/* ── Storage list ──────────────────────────────────────────────── */
.xlv-storage-list {
  outline: solid 1px #a89878;
  margin: 6px 1px;
  padding: 0;
  max-height: 400px;
  overflow: auto;
}

.xlv-storage-list table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

.xlv-storage-list tr { border: solid 1px #a89878; }

/* ── QR code ───────────────────────────────────────────────────── */
.xlv-qrcode-table {
  border: 1px solid #1a1209 !important;
  float: right;
  margin: 0 0 4px 4px;
  padding: 0;
  width: auto !important;
}

.xlv-qrcode-cta {
  font-family: 'Courier Prime', monospace;
  font-size: 11px;
  margin: 0; padding: 0;
  text-align: center;
  color: #5a4a30;
}

.xlv-qrcode-panel td { padding: 0; vertical-align: middle; }
.xlv-url-qrcodes-table td { padding-left: 2em; }

/* ── Notes ─────────────────────────────────────────────────────── */
.xlv-clue-notes { display: inline-block; min-width: 10ch; }

.xlv-notes-contents {
  border: 1px dotted #a89878;
  background: #faf6ee;
  max-height: 400px;
  overflow-y: auto;
  padding: 4px !important;
  margin: 4px 0 !important;
}

.xlv-notes-header { text-align: right; }
.xlv-notes-help   { padding: 0 0 0 16px !important; text-align: left; }

/* ── Misc layout ───────────────────────────────────────────────── */
.xlv-clues-flex,
.xlv-grid-and-clues-flex {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: space-around;
}

.xlv-grid-panel  { break-inside: avoid; }
.xlv-flex-col    { display: flex; flex-flow: column wrap; }
.xlv-nobr        { white-space: nowrap; }
.xlv-clickable:hover { cursor: pointer; }
.xlv-invisible   { color: transparent; font-weight: bold; text-align: right; word-break: normal; word-wrap: normal; }
.xlv-clue-indent { text-indent: -2ch; }
.xlv-clear-area  { width: 100%; }
.xlv-postscript  { width: 100%; }
.xlv-shuffle     { cursor: pointer; }

.xlv-grid-parent-centerer { text-align: center; }
.xlv-grid-parent { position: relative; display: inline-block; }
.xlv-grid        { display: block; }

.xlv-frame .xlv-grid-input-wrapper {
  position: absolute; border: none; border-width: 0;
  margin: 0; padding: 0; z-index: 1;
}

.xlv-grid-input-rarr { position: absolute; right: 0;  top: 20%;  }
.xlv-grid-input-larr { position: absolute; left: 0;   top: 20%;  }
.xlv-grid-input-darr { position: absolute; left: 40%; top: 65%;  }
.xlv-grid-input-uarr { position: absolute; left: 40%; top: -20%; }

.xlv-frame .xlv-grid-input,
.xlv-frame .xlv-grid-input:focus {
  background: rgba(0,0,0,0.0);
  border: none;
  color: rgba(0,0,0,0.0);
  font-weight: normal;
  height: 100%;
  line-height: normal;
  outline: none;
  padding: 2px 0 0 0;
  text-align: center;
  text-anchor: middle;
  width: 100%;
}

.xlv-cell-num  { font-family: 'Libre Baskerville', serif; }
.xlv-cell-text { font-family: 'Libre Baskerville', serif; cursor: text; }
.xlv-cell-circle { fill: rgba(0,0,0,0.0); }
.xlv-cell-num {
  text-anchor: start !important;
}

.xlv-coloured-cell {
  position: absolute; border: none; border-width: 0;
  outline: none; opacity: 0.2;
}

.xlv-frame:focus { border: none; outline: none; }

.xlv-credit       { margin: 4px 0; }
.xlv-questions,
.xlv-submit       { margin: 4px 0 2px 0; }
.xlv-explanations { padding: 10px 0 2px 0; }
.xlv-metadata     { padding: 0 0 4px 0; }
.xlv-clues-box    { overflow-y: auto; margin: 0; }

.xlv-frame input[type="checkbox"] { vertical-align: text-bottom; }

.xlv-print-settings div { padding: 4px 0 4px 16px; word-wrap: normal; }
.xlv-small-print input {
  appearance: auto; border-radius: 0; margin: 0; padding: 0; height: auto; width: auto;
}
.xlv-print-settings td { white-space: normal; }

/* ── Responsive overrides ──────────────────────────────────────── */
@media (max-width: 325px) {
  .xlv-wide-box  { width: 100%; max-width: 325px; }
  .xlv-button    { font-size: 7px; padding: 6px 2px; border-radius: 0; }
  .xlv-nav-button { padding: 6px; }
  .xlv-anno-text, .xlv-small-print, .xlv-status, .xlv-saving,
  .xlv-solution, .xlv-answer, .xlv-input, .xlv-incluefill,
  .xlv-clue-extraction-slot, .xlv-scratchpad, .xlv-shuffle { font-size: 8px !important; }
  .xlv-saving { font-size: 6px !important; }
  .xlv-preamble { margin: 8px 0 0; }
}

@media (min-width: 326px) and (max-width: 500px) {
  .xlv-wide-box  { width: 100%; max-width: 480px; }
  .xlv-button    { font-size: 10px; padding: 6px 3px; border-radius: 0; }
  .xlv-nav-button { padding: 6px; }
  .xlv-preamble  { margin: 8px 0 0; }
}

@media (min-width: 501px) {
  .xlv-wide-box  { width: 480px; }
  .xlv-button    { font-size: 13px; padding: 6px 10px; border-radius: 0; }
  .xlv-preamble  { margin: 8px 20px 0; }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .xlv-phone-kb {
    padding-bottom: env(safe-area-inset-bottom);
  }
}


html, body {
  overflow-x: hidden;
  position: relative;
}
/* ── Phone keyboard ────────────────────────────────────────────── */
.xlv-phone-kb {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  width: 100%;

  z-index: 1000;

  display: flex;
  flex-direction: column;
  align-items: center;

  touch-action: manipulation;
  user-select: none;

  background: #ede6d4;
  border-top: 2px solid #1a1209;

  box-sizing: border-box;

  padding: 6px 0 0 0;
}

.xlv-phone-kb-row {
  display: flex;
  gap: 0.55%;
  justify-content: center;
  touch-action: none;
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom);

}

.xlv-frame button,
.xlv-frame .xlv-button,
.xlv-frame .xlv-small-button,
#xlv1-check,
#xlv1-check[style] {
  border-radius: 2px !important;
}

.xlv-phone-kb-btn {
  aspect-ratio: 0.9;
  align-items: center;
  cursor: pointer;
  display: flex;
  font-family: 'Libre Baskerville', serif;
  font-size: 15px;
  font-weight: 700;
  justify-content: center;
  margin: 0;
  outline: none;
  padding: 0 4px 2px 4px;
  position: relative;
  touch-action: manipulation;
  transition: transform 0.05s, background 0.1s;
  flex: 1;
  max-width: 44px;
  min-width: 32px;
  aspect-ratio: 0.9;
  border: 1.5px dotted  #2c3e50 !important;
  background: #f5f0e8;
  color: #1a1209;
}

.xlv-phone-kb-btn:active {
  transform: translateY(2px);
  background: #1a1209;
  color: #f5f0e8;
}

.xlv-phone-kb-close { border-radius: 0; }

.xlv-kb-preview {
  position: absolute;
  bottom: 110%;
  left: 0;
  line-height: 35px;
  height: 35px;
  width: 100%;
  display: none;
  border-radius: 0;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  pointer-events: none;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  transform: scale(0.5);
  transition: transform 0.1s ease-out;
  background: #ede6d4;
  border: 1px solid #1a1209;
  color: #1a1209;
}

.xlv-kb-preview-active {
  display: block;
  transform: scale(1);
}

/* ── Phone-display tweaks ──────────────────────────────────────── */
.xlv-phone-display .xlv-title {
  font-size: 110%;
  display: inline-block;
  padding: 2px 0;
}

.xlv-phone-display .xlv-setter,
.xlv-phone-display .xlv-preamble-link-shown {
  display: inline-block;
  padding: 2px 0 2px 4px;
}

.xlv-phone-display .xlv-preamble { padding: 4px; }
.xlv-phone-display a.xlv-preamble-link:hover { font-weight: normal; }

.xlv-preamble-link {
  display: none;
  font-size: 90%;
  font-weight: normal;
}

.xlv-frame .xlv-preamble table { margin: 0; width: auto; }

/* ── Print ─────────────────────────────────────────────────────── */
@media not print {
  .xlv-only-print  { display: none; }
  .xlv-long-clue   { display: none; }
  .xlv-concise-clue { display: inline; }
  .xlv-active-clue .xlv-long-clue,
  .xlv-curr-clue .xlv-long-clue  { display: inline; }
  .xlv-active-clue .xlv-concise-clue,
  .xlv-curr-clue .xlv-concise-clue { display: none; }
}

@media print {
  body { background: white; }
  .xlv-frame {
    border-bottom: 3px double black;
  }
  .xlv-long-clue   { display: inline; }
  .xlv-concise-clue { display: none; }
}

#xlv1-across-label {
  margin-top: 15px !important;
  margin-bottom: 10px !important;
}

#xlv1-down-label {
  margin-bottom: 10px !important;
}