/* LimsRat free tools: one light, app-style look. No dark mode, no theme switch, nothing stored.
   Colours, type and corner sizes follow the LimsRat app's light theme so the tools and the app read as one product.
   Fonts are hosted on limsrat.com (see /fonts/fonts.css). */

:root {
  --bg: #f4f1e9;          /* page */
  --panel: #fffdf7;       /* raised surfaces: the tool, cards, cells */
  --well: #ece8dc;        /* recessed groups inside a panel */
  --fg: #17160f;
  --dim: #5b5648;
  --faint: #6b6659;
  --line: #d9d3c2;        /* quiet borders */
  --edge: #8f8a78;        /* input and cell outlines */
  --accent: #8f2f24;
  --accent-hover: #6f241c;
  --on-accent: #ffffff;
  --danger: #a13c30;
  --danger-soft: #f1e3df;
  --warn: #7a5410;
  --warn-soft: #f6ecd4;
  --display: 'Newsreader', Georgia, serif;
  --body: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --r: 3px;
  --r-lg: 5px;
  color-scheme: light;
}

html, body { margin: 0; padding: 0; background: var(--bg); }
body { color: var(--fg); font-family: var(--body); -webkit-font-smoothing: antialiased; min-height: 100vh; }
*, *::before, *::after { box-sizing: border-box; }
a { text-decoration: none; color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Focus is always visible. */
.btn:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .cell:focus-visible, .tab:focus-visible, .toolcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#lr-root { min-height: 100vh; display: flex; flex-direction: column; }
#lr-root > main { flex: 1 0 auto; width: 100%; }

/* ---- Top bar ---- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 14px 32px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.logo { width: 128px; height: 48px; background: url('/assets/logo-mark-ink.png') left center / contain no-repeat; display: block; flex-shrink: 0; }
.tools-label { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); padding-left: 16px; border-left: 1px solid var(--line); }
.top-actions { display: flex; align-items: center; gap: 12px; }
.navlink:hover { color: var(--accent); }

/* ---- Page ---- */
main { max-width: 1160px; margin: 0 auto; padding: 36px 32px 80px; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--accent); margin-bottom: 10px; text-transform: uppercase; }
h1 { margin: 0 0 12px; font-family: var(--display); font-weight: 500; font-size: clamp(30px, 4.4vw, 42px); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
h2 { margin: 0 0 12px; font-family: var(--display); font-weight: 500; font-size: 24px; letter-spacing: -.005em; }
.lede { margin: 0 0 10px; font-size: 16.5px; line-height: 1.6; color: var(--dim); max-width: 64ch; }
.privacy-line:has(+ .related) { margin-bottom: 8px; }
.related { margin: 0 0 28px; font-size: 14.5px; color: var(--dim); }
.related a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.related a:hover { color: var(--accent-hover); }
.privacy-line { margin: 0 0 28px; font-family: var(--mono); font-size: 12px; letter-spacing: .03em; color: var(--faint); }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: var(--r); border: 1px solid var(--edge); background: var(--panel); color: var(--fg); font: 500 14px var(--body); cursor: pointer; text-align: center; }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-solid { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-solid:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn-danger { color: var(--danger); border-color: var(--danger); background: var(--panel); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.actions.two-up { display: grid; grid-template-columns: 1fr 1fr; }
.actions.two-up .wide { grid-column: 1 / -1; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 2px 0; }

/* ---- The tool ---- */
.tool { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); padding: 20px; box-shadow: 0 1px 0 rgba(23,22,15,.04); }
.tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 16px; }
.tab { border: 1px solid var(--edge); border-radius: var(--r); background: var(--panel); color: var(--dim); padding: 6px 12px; font: 500 13.5px var(--body); cursor: pointer; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab:hover { border-color: var(--accent); color: var(--accent); }
.tab[aria-current="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.layout { display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); gap: 24px; align-items: start; }
.controls { display: grid; gap: 12px; }
.group { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; background: var(--well); display: grid; gap: 10px; }
.group h3 { margin: 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 500; }
label { display: grid; gap: 4px; font-size: 13px; color: var(--dim); }
input[type="text"], input[type="number"], input[type="date"], select, textarea { width: 100%; font: 400 14.5px var(--body); color: var(--fg); background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r); padding: 8px 10px; }
input::placeholder, textarea::placeholder { color: #7d7869; }
textarea { min-height: 84px; resize: vertical; font-family: var(--mono); font-size: 13px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.radios { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--dim); }
.radios label { display: inline-flex; align-items: center; gap: 6px; grid-template-columns: none; }
.hint { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--faint); }
.jump { display: none; margin: 0 0 12px; font-size: 13.5px; }
.jump a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.stage { min-width: 0; }
.counts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; font-family: var(--mono); font-size: 13px; color: var(--dim); }
.counts b { color: var(--fg); font-weight: 600; }
.status { min-height: 22px; margin: 0 0 10px; font-size: 14px; color: var(--dim); }
.status.warn { color: var(--warn); }
.confirm-bar { display: none; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px solid var(--warn); background: var(--warn-soft); border-radius: var(--r); padding: 10px 14px; margin-bottom: 12px; font-size: 14px; color: var(--fg); }
.confirm-bar.open { display: flex; }
.gridscroll { overflow-x: auto; padding-bottom: 6px; }
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(52px, 1fr)); gap: 4px; min-width: min-content; }
.row { display: contents; }
.cell { position: relative; min-height: 56px; border-radius: var(--r); padding: 5px 6px; display: grid; grid-template-rows: auto 1fr; cursor: pointer; background: var(--panel); color: var(--fg); user-select: none; overflow: hidden; }
.cell .pos { font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: .04em; }
.cell .sym { position: absolute; top: 4px; right: 6px; font-size: 11px; line-height: 1; color: var(--faint); }
.cell .cid { align-self: end; font-size: 12px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell.is-empty { border: 1.5px dashed var(--edge); }
.cell.is-empty:hover { border-color: var(--accent); }
.cell.is-full { border: 2px solid var(--accent); background: var(--well); }
.cell.is-full .sym { color: var(--accent); }
.cell.is-blocked { border: 2px solid var(--edge); background-color: var(--well); background-image: repeating-linear-gradient(45deg, transparent 0 6px, var(--edge) 6px 7px); cursor: not-allowed; }
.cell.is-blocked .sym { color: var(--fg); font-weight: 700; }
.cell[aria-selected="true"] { box-shadow: 0 0 0 2px var(--fg); }
.cell-edit { position: absolute; inset: 0; width: 100%; height: 100%; border: 2px solid var(--accent); border-radius: var(--r); background: var(--panel); color: var(--fg); font: 500 12.5px var(--body); padding: 18px 5px 4px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-size: 12.5px; color: var(--faint); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.keys { margin: 10px 0 0; font-size: 12.5px; color: var(--faint); line-height: 1.6; }
.print-only { display: none; }

/* ---- Below the tool ---- */
.block { margin-top: 56px; }
.steps { margin: 0; padding-left: 20px; color: var(--dim); font-size: 16px; line-height: 1.7; max-width: 66ch; }
.steps li { margin-bottom: 6px; }
details { border-top: 1px solid var(--line); }
details:last-child { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary:hover { color: var(--accent); }
.qmark { transition: transform .2s ease; }
details[open] .qmark { transform: rotate(45deg); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: 17px; font-weight: 500; color: var(--fg); }
.faq summary:hover { color: var(--accent); }
.faq .answer { margin: 0 0 20px; max-width: 66ch; font-size: 15.5px; line-height: 1.65; color: var(--dim); }
.cta { margin-top: 56px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); padding: 26px; display: grid; gap: 14px; }
.cta p { margin: 0; color: var(--dim); font-size: 16px; line-height: 1.6; max-width: 66ch; }
.cta .fine { font-size: 13.5px; color: var(--faint); }

/* ---- Tool list ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.toolcard { display: block; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); padding: 22px; color: var(--fg); }
.toolcard:hover { border-color: var(--accent); }
.toolcard h2 { font-size: 22px; margin-bottom: 8px; }
.toolcard p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.6; color: var(--dim); }
.toolcard .go { font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.about { margin-top: 48px; max-width: 66ch; }
.about p { margin: 0 0 14px; color: var(--dim); font-size: 16px; line-height: 1.65; }

footer { border-top: 1px solid var(--line); background: var(--panel); }
.foot { max-width: 1160px; margin: 0 auto; padding: 24px 32px 36px; display: flex; justify-content: space-between; align-items: center; gap: 14px 24px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; letter-spacing: .05em; color: var(--faint); }
.foot nav { display: flex; flex-wrap: wrap; gap: 10px 24px; }

/* ---- Narrow screens: the box comes first, the settings follow ---- */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .stage { order: -1; }
  .jump { display: block; }
}
@media (max-width: 640px) {
  .topbar, .foot { padding-left: 16px; padding-right: 16px; }
  main { padding: 28px 16px 64px; }
  .tool { padding: 12px; }
  .tools-label { display: none; }
  .logo { width: 112px; height: 44px; }
}

/* ---- Paper ---- */
@page { margin: 12mm; }
@media print {
  html, body { background: #fff !important; color: #000 !important; }
  :root { --bg: #fff; --panel: #fff; --well: #fff; --fg: #000; --dim: #111; --faint: #222; --line: #000; --edge: #000; --accent: #000; --danger-soft: #fff; --warn: #000; --r: 0; --r-lg: 0; }
  .no-print, header, footer, .tool .controls, .tabs, .counts, .status, .confirm-bar, .legend, .keys, .jump, .block, .cta, .lede, .privacy-line, .related, .eyebrow, h1 { display: none !important; }
  main { padding: 0; max-width: none; }
  .tool { border: 0; padding: 0; background: #fff; box-shadow: none; }
  .layout { display: block; }
  .gridscroll { overflow: visible; }
  .grid { grid-template-columns: repeat(var(--cols), 1fr); gap: 0; }
  .cell { border-radius: 0; min-height: 0; height: max(6mm, min(18mm, calc(170mm / var(--rows)))); padding: 1mm 1.2mm; border: 1px solid #000 !important; background: #fff !important; background-image: none !important; page-break-inside: avoid; }
  .cell.is-blocked { background-image: repeating-linear-gradient(45deg, #fff 0 2mm, #999 2mm 2.4mm) !important; }
  .cell .pos { font-size: 7pt; color: #000; }
  .cell .sym { font-size: 8pt; color: #000 !important; top: .8mm; right: 1.2mm; }
  .cell .cid { font-size: 8pt; white-space: normal; overflow-wrap: anywhere; line-height: 1.1; }
  .cell[aria-selected="true"] { box-shadow: none; }
  .print-only { display: block; margin: 0 0 8mm; color: #000; font-family: Arial, sans-serif; }
  .print-only h2 { font-size: 16pt; margin: 0 0 3mm; color: #000; }
  .print-only dl { display: grid; grid-template-columns: max-content 1fr; gap: 1mm 6mm; margin: 0 0 3mm; font-size: 10pt; }
  .print-only dt { font-weight: 700; }
  .print-only dd { margin: 0; }
  .print-only .line { border-bottom: 1px solid #000; min-width: 60mm; height: 5mm; }
  #lr-root.print-blank .cid { visibility: hidden; }
  #lr-root.print-blank .sym { visibility: hidden; }
  #lr-root.print-blank .print-map-head { display: none; }
  #lr-root:not(.print-blank) .print-blank-head { display: none; }
}