/* Library: one stylesheet, element selectors first, so the pages typed on stage carry no class
   names. The derived CRUD pages, the login page and the error page all pick this up through
   views.Layout. */

:root {
  --paper: #f6f1e7;
  --paper-deep: #efe7d8;
  --card: #fffdf8;
  --ink: #1d1813;
  --muted: #6f655a;
  --line: #e4dccd;
  --accent: #8a3324;
  --accent-hover: #6f281c;
  --accent-ink: #fff8f1;
  --accent-soft: #f4e3dc;
  --danger: #a1261b;
  --shadow: 0 1px 2px rgb(60 40 20 / .06), 0 12px 32px -16px rgb(60 40 20 / .25);
  --shadow-lift: 0 2px 4px rgb(60 40 20 / .08), 0 20px 40px -18px rgb(60 40 20 / .35);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 1rem;
  --radius-sm: .6rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #15110e;
    --paper-deep: #1b1612;
    --card: #211b16;
    --ink: #efe6d7;
    --muted: #a69a88;
    --line: #352b22;
    --accent: #e68b72;
    --accent-hover: #f2a58f;
    --accent-ink: #1d1310;
    --accent-soft: #3a241c;
    --danger: #f08b7d;
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 12px 32px -16px rgb(0 0 0 / .8);
    --shadow-lift: 0 2px 4px rgb(0 0 0 / .5), 0 20px 40px -18px rgb(0 0 0 / .9);
  }
}

*, *::before, *::after { box-sizing: border-box }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }

body {
  min-height: 100dvh;
  margin: 0;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background:
    radial-gradient(60rem 30rem at 85% -10%, var(--accent-soft) 0%, transparent 60%),
    radial-gradient(40rem 24rem at -10% 110%, var(--paper-deep) 0%, transparent 60%),
    var(--paper);
  font: 1.0625rem/1.6 var(--sans);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--accent-ink) }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: .25rem }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em }
a:hover { color: var(--accent-hover) }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0 0 1.25rem;
}
h1 { font-size: clamp(2.25rem, 5vw, 3rem) }
h2 { font-size: 1.75rem }

p { margin: 0 0 1.25rem }
small { font-size: .875rem; color: var(--muted) }
code { font: .9em var(--mono); background: var(--paper-deep); padding: .1em .4em; border-radius: .35rem }

/* ---- nav -------------------------------------------------------------------------------- */

nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding: .9rem clamp(1.25rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}
nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: .95rem;
  padding: .3rem 0;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
nav a:hover { color: var(--accent); border-color: var(--accent) }
nav a:first-child {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-right: auto;
  font: 500 1.45rem/1 var(--serif);
  letter-spacing: -.01em;
  border-bottom: 0;
}
nav a:first-child svg { width: 1.6rem; height: 1.6rem; border-radius: .4rem; flex: none }
nav form { display: flex; margin: 0 }
nav form > button {
  display: inline-flex;
  margin: 0;
  padding: .3rem 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  font-size: .95rem;
  box-shadow: none;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
nav form > button:hover { color: var(--accent); border-color: var(--accent); background: none; transform: none }

/* ---- page ------------------------------------------------------------------------------ */

main {
  flex: 1;
  width: 100%;
  max-width: 56rem;
  margin: 0 auto;
  padding: 3rem clamp(1.25rem, 4vw, 3rem) 4rem;
  animation: rise .35s ease-out both;
}
@keyframes rise { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { main { animation: none } }

footer {
  padding: 1.5rem clamp(1.25rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  text-align: center;
}
footer small { letter-spacing: .02em }

/* ---- buttons --------------------------------------------------------------------------- */

button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.25rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
button:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-lift) }
button:active { transform: translateY(0); box-shadow: var(--shadow) }

/* A lone link in its own paragraph is an action the page offers (New Book, Edit, All books):
   the outlined button. The delete form is the one whose hidden method is DELETE: the quiet
   danger button. Both sit inline so a show page reads as a toolbar. */
main > p:has(> a:only-child),
main > form:has(input[value="DELETE"]) {
  display: inline-block;
  margin: 0 .5rem 1rem 0;
  vertical-align: middle;
}
main > p:has(> a:only-child) > a {
  display: inline-flex;
  align-items: center;
  padding: .6rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
main > p:has(> a:only-child) > a:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-lift) }
main > form:has(input[value="DELETE"]) button {
  background: transparent;
  border-color: var(--line);
  color: var(--danger);
  box-shadow: none;
}
main > form:has(input[value="DELETE"]) button:hover { background: var(--danger); border-color: var(--danger); color: #fff }

/* ---- tables (the derived index page) --------------------------------------------------- */

table {
  width: 100%;
  margin: 0 0 1.75rem;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
th, td { padding: 1rem 1.5rem; text-align: left; vertical-align: middle }
th {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper-deep);
  border-bottom: 1px solid var(--line);
}
td { border-top: 1px solid var(--line) }
tbody tr:first-child td { border-top: 0 }
tbody tr { transition: background .15s }
tbody tr:hover td { background: var(--accent-soft) }
td a { color: var(--ink); text-decoration: none; font: 500 1.15rem/1.3 var(--serif) }
td a:hover { color: var(--accent); text-decoration: underline }
td a::after { content: " →"; opacity: 0; transition: opacity .15s }
tr:hover td a::after { opacity: .6 }

/* ---- the show page --------------------------------------------------------------------- */

dl {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: 1rem 2rem;
  margin: 0 0 1.75rem;
  padding: 1.75rem 2rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
dt { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: .35em }
dd { margin: 0; font: 500 1.35rem/1.3 var(--serif) }

/* ---- forms (new, edit, sign in) -------------------------------------------------------- */

main > form { max-width: 32rem; margin: 0 0 1.75rem }
form div { margin-bottom: 1.25rem }
label { display: block; margin-bottom: .4rem; font-weight: 600; font-size: .95rem }
input:not([type=checkbox]):not([type=hidden]) {
  width: 100%;
  padding: .75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .04);
  transition: border-color .15s, box-shadow .15s;
}
input:not([type=checkbox]):focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
input[type=checkbox] { width: 1.1rem; height: 1.1rem; accent-color: var(--accent) }
form > button { margin-top: .25rem }
.error { margin: .4rem 0 0; color: var(--danger); font-size: .9rem; font-weight: 500 }

/* The sign in page is the one form with a password: it gets a centred card of its own. */
main:has(input[type=password]) { max-width: 30rem; padding-top: 5rem; text-align: center }
main:has(input[type=password]) h1 { margin-bottom: 1.75rem }
main:has(input[type=password]) > form {
  max-width: none;
  padding: 2rem 2rem 1.75rem;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.25);
  box-shadow: var(--shadow-lift);
}
main:has(input[type=password]) > form > button { width: 100%; justify-content: center; margin-top: .5rem }
main:has(input[type=password]) > .error {
  margin: -1rem 0 1.25rem;
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

/* ---- the home page --------------------------------------------------------------------- */

main > header { padding: clamp(1rem, 5vw, 4rem) 0 clamp(2rem, 6vw, 4.5rem) }
main > header small {
  display: inline-block;
  margin-bottom: 1.25rem;
  padding: .3rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--accent);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
main > header h1 { font-size: clamp(3rem, 8vw, 5.25rem); max-width: 16ch; margin-bottom: 1.25rem }
main > header h1 em { font-style: italic; color: var(--accent) }
main > header > p { max-width: 38rem; font-size: 1.25rem; color: var(--muted); text-wrap: pretty }
main > header > p:last-child { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem }
main > header > p:last-child > a {
  display: inline-flex;
  align-items: center;
  padding: .75rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: border-color .15s, color .15s, background .15s, transform .15s, box-shadow .15s;
}
main > header > p:last-child > a:first-child { background: var(--accent); border-color: var(--accent); color: var(--accent-ink) }
main > header > p:last-child > a:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift) }
main > header > p:last-child > a:first-child:hover { background: var(--accent-hover); border-color: var(--accent-hover) }
main > header > p:last-child > a:not(:first-child):hover { color: var(--accent); border-color: var(--accent) }

main > section { padding-top: 2.5rem; border-top: 1px solid var(--line) }
main > section > p { max-width: 38rem; color: var(--muted) }

/* ---- the live component --------------------------------------------------------------- */

[data-eezo-page] {
  position: relative;
  margin-top: 1.5rem;
  padding: 1.75rem 2rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.25);
  box-shadow: var(--shadow);
  transition: opacity .3s;
}
[data-eezo-page] > div { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap }
[data-eezo-page] p {
  margin: 0;
  min-width: 3ch;
  font: 500 clamp(3.5rem, 8vw, 5rem)/1 var(--serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  color: var(--accent);
}
[data-eezo-page] button { margin-left: auto; padding: .8rem 1.6rem; font-size: 1rem }
[data-eezo-page]::before {
  content: "";
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: #3f9d6b;
  box-shadow: 0 0 0 4px color-mix(in srgb, #3f9d6b 20%, transparent);
  transition: background .3s, box-shadow .3s;
}
[data-eezo-state="connecting"]::before { background: #d19a2a; box-shadow: 0 0 0 4px color-mix(in srgb, #d19a2a 20%, transparent) }
[data-eezo-state="lost"] { opacity: .55 }
[data-eezo-state="lost"]::before { background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 20%, transparent) }

@media (max-width: 40rem) {
  nav { gap: 1.1rem }
  th, td { padding: .8rem 1rem }
  dl { grid-template-columns: 1fr; gap: .25rem 0 }
  dt { padding-top: 0 }
  dd { margin-bottom: 1rem }
  [data-eezo-page] button { margin-left: 0; width: 100%; justify-content: center }
}