/* FTLOR brand: colors from FTLOR_ColorGuide.pdf, fonts from FTLOR_FontUsage.pdf.
   Gold, pink and light blue are accents only (white text on them is hard to read).
   Mouse Memoirs is for headings, used sparingly; everything people read or scan is Cabin. */
@font-face { font-family: "Cabin"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/cabin-latin.woff2") format("woff2"); }
@font-face { font-family: "Mouse Memoirs"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/mouse-memoirs-latin.woff2") format("woff2"); }

:root {
  --purple:#6334a0; --blue:#90b0dc; --teal:#2d8070; --pink:#e27f9e; --red:#db503a; --gold:#eab03e;
  --ink:#3b3a3d; --muted:#5a5d63; --bg:#f5f2ed; --card:#ffffff; --line:#ddd7cd;
  --error:#b3261e; --error-bg:#fdecea; --ok-bg:#e4f2ee; --warn-bg:#fff3d6;
  --ring:0 0 0 3px #fff, 0 0 0 6px var(--purple);
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:18px/1.5 "Cabin", -apple-system, "Segoe UI", sans-serif; }
.heading, h1, h2 { font-family:"Mouse Memoirs", "Cabin", sans-serif; font-weight:400; color:var(--purple); letter-spacing:.01em; }
h1 { font-size:44px; line-height:1.05; margin:10px 0 6px; }
h2 { font-size:30px; line-height:1.1; margin:26px 0 8px; }
a { color:var(--purple); }
.muted { color:var(--muted); font-size:16px; }

/* header: books mark + wordmark, a thin stripe of the six brand colors beneath */
.top { display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center; padding:10px 16px; background:var(--card); }
.stripe { height:6px; background:linear-gradient(90deg, var(--teal) 0 16.66%, var(--blue) 0 33.33%, var(--purple) 0 50%, var(--gold) 0 66.66%, var(--pink) 0 83.33%, var(--red) 0 100%); }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.brand img { width:44px; height:auto; display:block; }
.brand .word { font-family:"Mouse Memoirs", "Cabin", sans-serif; font-size:32px; line-height:1; letter-spacing:.04em; }
.brand .sub { display:block; font:600 13px/1 "Cabin", sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:2px; }
.top nav { display:flex; flex-wrap:wrap; gap:4px; flex:1; }
.top nav a { padding:10px 14px; border-radius:8px; color:var(--ink); text-decoration:none; font-weight:600; }
.top nav a:hover { background:var(--bg); }
.top nav a[aria-current="page"] { background:var(--purple); color:#fff; }
.who { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:16px; }
.who form { margin:0; }
main { max-width:960px; margin:0 auto; padding:16px; }

.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; margin:12px 0; }
.bar { display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center; justify-content:space-between; }

button, .button { font:600 18px/1.2 "Cabin", sans-serif; min-height:52px; padding:10px 22px; border-radius:12px; border:2px solid var(--purple); background:var(--purple); color:#fff; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
button.secondary, .button.secondary { background:transparent; color:var(--purple); }
button.link { min-height:0; padding:4px 8px; border:0; background:none; color:var(--purple); text-decoration:underline; font-weight:600; }
button.small { min-height:40px; padding:6px 14px; font-size:16px; }
button:disabled { opacity:.6; cursor:wait; }
button:focus-visible, .button:focus-visible, a:focus-visible, input:focus-visible { outline:none; box-shadow:var(--ring); }

input[type=text], input[type=password], input[type=number] { font:inherit; width:100%; min-height:52px; padding:10px 12px; border:2px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); }
input[type=number] { max-width:200px; }
label { display:block; font-weight:600; margin:12px 0 4px; }
.choices { display:flex; flex-wrap:wrap; gap:8px; }
.choices label { font-weight:400; margin:0; border:2px solid var(--line); border-radius:12px; padding:10px 14px; min-height:48px; display:flex; align-items:center; gap:8px; cursor:pointer; background:var(--card); }
.choices.stacked { flex-direction:column; }
.choices input { width:22px; height:22px; accent-color:var(--purple); }

/* source buttons: purchases are teal, donations are purple, so the two are easy to tell apart */
.sources { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.sources button { min-height:84px; font-size:21px; }
.sources.purchase button { background:var(--teal); border-color:var(--teal); }
.sources.donation button { background:var(--purple); border-color:var(--purple); }

.banner { border-radius:12px; padding:12px 16px; margin:12px 0; display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; border:2px solid; }
.banner.success { background:var(--ok-bg); border-color:var(--teal); }
.banner.error { background:var(--error-bg); border-color:var(--error); color:var(--error); font-weight:600; }
.banner.warn { background:var(--warn-bg); border-color:var(--gold); }
.banner form { margin:0; }
.banner.success button.secondary { background:#fff; }

table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
th { color:var(--muted); font-weight:600; font-size:15px; }
.voided td { color:var(--muted); text-decoration:line-through; }
.voided td.action { text-decoration:none; }
.book { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.cover { width:96px; height:128px; border:2px dashed var(--line); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:14px; }
.stock { font-family:"Mouse Memoirs", "Cabin", sans-serif; font-size:56px; line-height:1; color:var(--teal); }
.big-input { font-size:26px; min-height:64px; }
.mono { font-variant-numeric: tabular-nums; }

/* sign-in */
.signin { display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:center; padding:12px 0; }
.signin .logo { width:min(280px, 70vw); height:auto; }
.signin form { flex:1 1 340px; max-width:440px; }
.doodad { position:fixed; right:0; bottom:0; width:min(220px, 30vw); height:auto; pointer-events:none; opacity:.9; z-index:-1; }
@media (max-width:560px) { h1 { font-size:38px; } .doodad { display:none; } }

/* cover photo step */
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.cover img { max-width:100%; max-height:100%; display:block; border-radius:6px; }
.cover { width:120px; min-height:150px; padding:4px; overflow:hidden; }
.cover-picker { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.cover-picker:focus-within .button { box-shadow:var(--ring); }
dialog { border:2px solid var(--line); border-radius:16px; padding:20px; max-width:min(640px, 94vw); background:var(--card); color:var(--ink); }
dialog::backdrop { background:rgba(59,58,61,.55); }
.crop-wrap { display:flex; flex-wrap:wrap; gap:20px; align-items:flex-start; }
.crop-stage { position:relative; touch-action:none; user-select:none; background:var(--bg); }
.crop-stage canvas { display:block; }
.crop-box { position:absolute; border:3px solid var(--gold); box-shadow:0 0 0 9999px rgba(59,58,61,.5); cursor:move; touch-action:none; }
.crop-box .handle { position:absolute; width:30px; height:30px; background:var(--gold); border:3px solid #fff; border-radius:50%; touch-action:none; }
.handle[data-handle="tl"] { left:-16px; top:-16px; cursor:nwse-resize; }
.handle[data-handle="tr"] { right:-16px; top:-16px; cursor:nesw-resize; }
.handle[data-handle="bl"] { left:-16px; bottom:-16px; cursor:nesw-resize; }
.handle[data-handle="br"] { right:-16px; bottom:-16px; cursor:nwse-resize; }
.crop-side { display:flex; flex-direction:column; gap:8px; max-width:200px; }
.dialog-actions { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 8px; }

/* the HTML "hidden" attribute must always win over component display rules */
[hidden] { display:none !important; }
dialog { max-height:92vh; overflow-y:auto; }

/* search and book pages */
.results { list-style:none; padding:0; margin:0; }
.result { display:flex; gap:16px; align-items:center; }
.result-title { font-weight:700; font-size:20px; }
.cover.small { width:64px; min-height:84px; flex:none; }
.pager { display:flex; gap:12px; align-items:center; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:12px 0; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 16px; }
.table-wrap { overflow-x:auto; }
.history { list-style:none; padding:0; margin:8px 0 0; }
.history li { padding:8px 0; border-bottom:1px solid var(--line); }
summary { cursor:pointer; font-weight:600; }

/* giveaway import */
.steps { list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:8px 0 16px; }
.steps li { padding:6px 14px; border-radius:999px; background:var(--card); border:1px solid var(--line); color:var(--muted); font-weight:600; }
.steps li.current { background:var(--purple); border-color:var(--purple); color:#fff; }
.steps li.done { color:var(--teal); border-color:var(--teal); }
select { font:inherit; min-height:52px; padding:10px 12px; border:2px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); max-width:100%; }
input[type=file], input[type=date] { font:inherit; padding:8px 0; max-width:100%; }
input[type=date] { min-height:52px; padding:10px 12px; border:2px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); }
.nowrap { white-space:nowrap; }

/* reports */
.tabs { display:flex; flex-wrap:wrap; gap:4px; margin:8px 0 12px; }
.tabs a { padding:10px 16px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink); text-decoration:none; font-weight:600; }
.tabs a[aria-current="page"] { background:var(--purple); border-color:var(--purple); color:#fff; }
.report-form fieldset { border:0; padding:0; margin:0 0 8px; }
.report-form legend { font-family:"Mouse Memoirs","Cabin",sans-serif; font-size:26px; color:var(--purple); padding:0; }
.sem-grid { margin:4px 0 8px 32px; }
.filters { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:4px 16px; }
.filters select { width:100%; }
td.num, th.num { text-align:right; }
tfoot td { border-top:2px solid var(--line); border-bottom:0; }
.choices input[type=date] { width:auto; min-width:160px; }
.choices select { min-height:44px; }
.report-form .choices.stacked { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }

/* reconciliation */
form.inline { display:flex; gap:6px; align-items:center; margin:0; }
tr.stale td { background:var(--warn-bg); }
form.inline input[type=number] { width:96px; min-width:80px; max-width:96px; min-height:44px; }

/* users */
.row-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.row-actions select { min-height:40px; }