/* The app's own pages. Rendered recipes bring their own styles. */

:root {
  color-scheme: light dark;
  --text: #1d1d1f;
  --muted: #5f6368;
  --background: #fbfaf7;
  --surface: #ffffff;
  --border: #ddd8cf;
  --accent: #9a3412;
  --info: #e8f0fe;
  --error: #fde8e8;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #ecebe8;
    --muted: #a3a3a3;
    --background: #1b1a18;
    --surface: #262522;
    --border: #3d3b37;
    --accent: #fb923c;
    --info: #1e2a3d;
    --error: #3d1e1e;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--text);
  background: var(--background);
}

a { color: var(--accent); }

header.site {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

header.site .brand {
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

header.site nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

header.site nav form { margin: 0; }

button.link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

main {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

.flash {
  max-width: 60rem;
  margin: 1rem auto 0;
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
}

.flash-info { background: var(--info); }
.flash-error { background: var(--error); }

.card {
  max-width: 26rem;
  margin: 2rem auto;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.card h1 { margin-top: 0; font-size: 1.5rem; }

form.card label {
  display: block;
  margin-bottom: 1rem;
  font-weight: 500;
}

form.card input {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background: var(--background);
  color: var(--text);
  font: inherit;
}

form.card input[readonly] { color: var(--muted); }

form.card button[type="submit"] {
  padding: 0.5rem 1.25rem;
  border: 0;
  border-radius: 0.375rem;
  background: var(--accent);
  color: var(--surface);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.form-error {
  padding: 0.625rem 0.75rem;
  border-radius: 0.375rem;
  background: var(--error);
}

.hint { color: var(--muted); font-size: 0.9rem; }

/* --- /new: the upload tray ------------------------------------------------ */

main h2 { font-size: 1.125rem; margin: 2rem 0 0.5rem; }

.visually-hidden,
.drop-zone input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.drop-zone {
  display: block;
  padding: 2rem 1rem;
  border: 2px dashed var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  text-align: center;
  cursor: pointer;
}

.drop-zone:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.drop-zone.dragging { border-color: var(--accent); background: var(--info); }

.uploading { list-style: none; margin: 0.75rem 0 0; padding: 0; }

.uploading li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 0;
  font-size: 0.9rem;
}

.uploading progress { flex: 0 0 8rem; }
.upload-error { color: var(--accent); }

.tray { counter-reset: recipe; }

ol.group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 7rem;
  margin: 0 0 1rem;
  padding: 2.25rem 0.75rem 0.75rem;
  position: relative;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  counter-increment: recipe;
}

ol.group::before {
  content: "Recipe " counter(recipe);
  position: absolute;
  top: 0.5rem;
  left: 0.75rem;
  font-weight: 600;
  font-size: 0.9rem;
}

ol.group.new-group {
  border-style: dashed;
  background: transparent;
  counter-increment: none;
}

ol.group.new-group::before {
  content: "Drop a photo here to start a new recipe";
  font-weight: 400;
  color: var(--muted);
}

.upload {
  position: relative;
  width: 7.5rem;
  list-style: none;
  cursor: grab;
  counter-increment: page;
}

ol.group { counter-reset: page; }

.upload img,
.upload .file-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.5rem;
  height: 7.5rem;
  object-fit: cover;
  border-radius: 0.375rem;
  background: var(--background);
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 600;
}

.upload::after {
  content: counter(page);
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  min-width: 1.4rem;
  padding: 0 0.3rem;
  border-radius: 0.7rem;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.8rem;
  text-align: center;
}

.upload .name {
  display: block;
  margin-top: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--muted);
}

.upload .remove {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 1.6rem;
  height: 1.6rem;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.sortable-ghost { opacity: 0.4; }

textarea {
  display: block;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

button.primary {
  margin-top: 1.5rem;
  padding: 0.625rem 1.5rem;
  border: 0;
  border-radius: 0.375rem;
  background: var(--accent);
  color: var(--surface);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

button.primary:disabled { opacity: 0.6; cursor: progress; }

.jobs { list-style: none; padding: 0; margin: 0; }

.job {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.job .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job .status { color: var(--muted); }
.job-failed .status { color: var(--accent); }

/* --- /recipes: the library ---------------------------------------------- */

.library-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

.library-head h1 { margin-bottom: 0.5rem; }

.search input {
  width: min(20rem, 100%);
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.recipes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 1rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.recipe-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-bottom: 0.75rem;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.recipe-card a { color: var(--text); text-decoration: none; }
.recipe-card a:hover .title, .recipe-card a:focus-visible .title { text-decoration: underline; }

.recipe-card img,
.recipe-card .picture-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--background);
  color: var(--muted);
  font-weight: 600;
}

.recipe-card .title {
  display: block;
  padding: 0.5rem 0.75rem 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.recipe-card .method { padding: 0 0.75rem; color: var(--muted); font-size: 0.85rem; }

.recipe-card .flags {
  align-self: flex-start;
  margin: 0.25rem 0.75rem 0;
  font-size: 0.85rem;
}

.recipes .more {
  grid-column: 1 / -1;
  text-align: center;
}

/* --- /recipes/{id}: one recipe ------------------------------------------ */

.crumbs { margin: 0; font-size: 0.9rem; }

.recipe-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

.recipe-head h1 { margin: 0.25rem 0; overflow-wrap: anywhere; }
.recipe-head .hint { margin-top: 0; }
.recipe-head .flags,
.recipe-card .flags {
  padding: 0 0.5rem;
  border-radius: 0.7rem;
  background: var(--error);
  color: var(--text);
}

.recipe-links { display: flex; gap: 1.25rem; margin: 0.75rem 0 0; }

/* --- /recipes/{id}/revisions -------------------------------------------- */

.revisions { list-style: none; padding: 0; margin: 1rem 0; }

.revision {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.revision .what { display: flex; flex-direction: column; gap: 0.125rem; }
.revision .when { color: var(--muted); font-size: 0.9rem; }
.revision .current { color: var(--muted); font-weight: 600; }
.revision form { margin: 0; }

.revision button {
  padding: 0.4rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.preview-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: end;
  margin: 1rem 0;
}

.preview-controls label { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 500; }

.preview-controls select,
.preview-controls input {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.preview-controls input { width: 6rem; }

.preview iframe {
  display: block;
  width: 100%;
  height: 80vh;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: #fff;
}

.downloads h2 { margin-top: 0; }
.download-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.download-buttons button,
.card .actions .danger {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

#export-jobs { margin: 0.5rem 0 1.5rem; }

.card .actions { display: flex; align-items: center; gap: 1.25rem; }
.card .actions .danger { border: 0; background: #b42318; color: #fff; font-weight: 600; }

/* htmx would inject these as a <style> element, which the CSP refuses. */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* Hidden until Alpine has started. */
[x-cloak] { display: none !important; }

/* --- /recipes/{id}/edit: the editor --------------------------------------- */

main.wide { max-width: 96rem; }

.editor-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin: 0 -1rem;
  padding: 0.5rem 1rem;
  background: var(--background);
  border-bottom: 1px solid var(--border);
}

.editor-bar h1 { margin: 0; font-size: 1.5rem; }
.save-status { margin: 0; flex: 1; color: var(--muted); }
.save-status[data-state="error"] { color: var(--text); padding: 0.25rem 0.5rem; border-radius: 0.375rem; background: var(--error); }

.editor { display: grid; gap: 1.5rem; }

@media (min-width: 64rem) {
  .editor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .editor-side { position: sticky; top: 4.5rem; }
  .editor-preview iframe { height: calc(100vh - 11rem); }
  .source-pages,
  .source-text { max-height: calc(100vh - 11rem); }
}

.side-switch { display: inline-flex; margin-top: 1rem; border: 1px solid var(--border); border-radius: 0.375rem; overflow: hidden; }

.side-switch button {
  padding: 0.3rem 0.9rem;
  border: 0;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.side-switch button + button { border-left: 1px solid var(--border); }
.side-switch button[aria-pressed="true"] { background: var(--accent); color: #fff; }

.source-panel { margin-top: 1rem; }

.source-tools { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.5rem; }
.source-tools .zoom-level { min-width: 3rem; text-align: center; font-variant-numeric: tabular-nums; }

.source-tools button {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.source-tools button:disabled { color: var(--muted); cursor: default; }

/* Pages scroll in the panel; zoomed, they scroll sideways too. */
.source-pages {
  max-height: 80vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
}

.source-page { margin: 0; padding: 0.5rem; }
.source-page + .source-page { border-top: 1px solid var(--border); }

.source-page img {
  display: block;
  width: calc(100% * var(--zoom, 1));
  max-width: none;
  height: auto;
  cursor: zoom-in;
}

.source-pages.zoomed img { cursor: zoom-out; }
.source-page figcaption { margin-top: 0.375rem; color: var(--muted); font-size: 0.85rem; }
.source-pdf { margin: 0; padding: 1rem; background: var(--info); border-radius: 0.375rem; }
.source-url { overflow-wrap: anywhere; color: var(--muted); font-size: 0.9rem; }

.source-text {
  max-height: 80vh;
  overflow: auto;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.editor-preview form { margin: 1rem 0 0.5rem; }
.editor-preview iframe {
  display: block;
  width: 100%;
  height: 70vh;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: #fff;
}

.editor-form input[type="text"],
.editor-form input[type="number"],
.editor-form textarea,
.editor-preview select {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.editor-preview select { width: auto; margin-left: 0.5rem; }
.editor-form textarea { resize: vertical; }

.field { margin-bottom: 0.75rem; }
.field label { display: inline-block; margin-bottom: 0.25rem; font-weight: 500; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0 1rem; }

.group {
  margin-bottom: 1rem;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
}

.group-head { display: flex; align-items: center; gap: 0.5rem; }
.group-head .group-title { flex: 1; font-weight: 600; }
.group-head .link { white-space: nowrap; font-size: 0.9rem; }

.lines { list-style: none; margin: 0.5rem 0; padding: 0; }

.line {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  padding: 0.25rem 0;
}

.line-body { flex: 1; min-width: 0; }

/* Steps are numbered across their groups, as the rendering numbers them. */
.groups.steps { counter-reset: step; }
.groups.steps .line { counter-increment: step; }
.groups.steps .line::before { content: counter(step) "."; min-width: 1.5rem; padding-top: 0.45rem; color: var(--muted); text-align: right; }

.handle {
  padding: 0.4rem 0.125rem;
  color: var(--muted);
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.line-actions { display: flex; gap: 0.125rem; }

.line-actions button {
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  background: none;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.line-actions button:hover,
.line-actions button:focus-visible { border-color: var(--border); color: var(--text); }

.parsed { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.25rem 0 0; font-size: 0.8rem; }
.parsed:empty { display: none; }

.part { padding: 0 0.4rem; border-radius: 0.25rem; background: var(--info); }
.part-item { font-weight: 600; }
.part-note,
.part-optional { color: var(--muted); background: none; border: 1px solid var(--border); }

button.add {
  padding: 0.375rem 0.75rem;
  border: 1px dashed var(--border);
  border-radius: 0.375rem;
  background: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
}

.flagged > .line-body .line-text,
.flagged > .group-head .group-title,
.field.flagged input,
.field.flagged textarea { border-color: #b45309; box-shadow: 0 0 0 1px #b45309; }

/* The unclear element the reader is at. */
.flagged.current { outline: 2px solid #b45309; outline-offset: 0.25rem; border-radius: 0.375rem; }

.review {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin-top: 0.25rem;
  font-size: 0.85rem;
}

.review .link { font-size: inherit; }

.flag {
  flex: none;
  padding: 0 0.4rem;
  border-radius: 0.25rem;
  background: #fef3c7;
  color: #78350f;
  font-size: 0.75rem;
  font-weight: 600;
}

.doubts { display: contents; }

/* Doubtful words, as the rendering marks them; selects them in the text. */
.doubt {
  max-width: 100%;
  padding: 0 0.3rem;
  border: 0;
  border-bottom: 2px dotted #b45309;
  border-radius: 0.125rem;
  background: #fef3c7;
  color: #422006;
  font: inherit;
  overflow-wrap: anywhere;
  text-align: left;
  cursor: pointer;
}

.unclear-nav { display: flex; align-items: center; gap: 0.375rem; }
.unclear-nav span { min-width: 6.5rem; color: var(--muted); font-size: 0.9rem; text-align: center; }

.unclear-nav button {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.unclear-nav button:disabled { color: var(--muted); cursor: default; }
.kept-unclear { margin: 0.5rem 0 0; }

.sortable-ghost { opacity: 0.4; }