@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

/* ==========================================================================
   Leonardo theme for Jirafeau — matches leonardorigano.com
   Sections: 0 Tokens · 1 Basic · 2 Copyright · 3 Options · 4 Upload
             5 Terms · 6 Install · 7 Admin · 8 Download
   ========================================================================== */

/* 0 = Design tokens + light/dark ----------------------------------------- */
:root {
  --bg:#fafaf7; --fg:#121212; --fg-muted:#4a4a48; --fg-subtle:#767670;
  --line:#e7e5df; --card:#ffffff; --accent:#d97757; --accent-fg:#ffffff;
  --radius:10px;
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-serif:"Instrument Serif",Georgia,serif;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --shadow:0 22px 44px -22px rgba(0,0,0,0.18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#121211; --fg:#f2f1ec; --fg-muted:#bdbcb5; --fg-subtle:#86857f;
    --line:#26261f; --card:#1a1a16; --accent:#e48667; --accent-fg:#1a1a16;
    --shadow:0 22px 44px -22px rgba(0,0,0,0.6);
  }
}
[data-theme="dark"] {
  --bg:#121211; --fg:#f2f1ec; --fg-muted:#bdbcb5; --fg-subtle:#86857f;
  --line:#26261f; --card:#1a1a16; --accent:#e48667; --accent-fg:#1a1a16;
  --shadow:0 22px 44px -22px rgba(0,0,0,0.6);
}

/* 1 = Basic style -------------------------------------------------------- */
body {
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.55;
  margin:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background-color .24s var(--ease), color .24s var(--ease);
}

#content { max-width:680px; margin:0 auto; padding:2.5em 1.25rem 4rem; }

/* Title (was a background-image logo; now a clean wordmark) */
h1 a {
  display:block;
  background:none;
  text-indent:0;
  width:auto; height:auto;
  left:0;
  margin:1.5em auto .25em;
  text-align:center;
  font-family:var(--font-sans);
  font-weight:500;
  font-size:1.6rem;
  letter-spacing:-0.025em;
  color:var(--fg);
  text-decoration:none;
}
h1 a:hover { color:var(--accent); }

h2 {
  text-align:center;
  color:var(--fg);
  font-weight:500;
  font-size:1.2rem;
  letter-spacing:-0.02em;
  margin:.6em 0 1em;
}

/* The bordered box / drag-drop zone */
fieldset {
  border:1px dashed var(--line);
  background:var(--card);
  border-radius:var(--radius);
  padding:1.75em;
  margin:0 auto;
  width:auto;
  max-width:34em;
  min-width:0;
  min-height:auto;
  position:relative;
}

legend {
  padding:.4em 1.1em;
  background:var(--bg);
  color:var(--fg-muted);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  text-align:center;
  border:1px solid var(--line);
  border-radius:999px;
}

table a { color:var(--fg); }
table a:hover, table a:focus { text-decoration:none; color:var(--accent); }

/* Buttons → coral pills */
input[type="submit"] {
  background:var(--accent);
  color:var(--accent-fg);
  border:0;
  border-radius:999px;
  padding:.62em 1.7em;
  font-size:.95rem;
  font-weight:500;
  cursor:pointer;
  margin:10px;
  transition:transform .24s var(--ease), filter .2s var(--ease), box-shadow .24s var(--ease);
}
input[type="submit"]:hover,
input[type="submit"]:focus {
  background:var(--accent);
  filter:brightness(.95);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
  border:0;
  margin:10px;
}

/* Inputs */
select,
input[type="text"],
input[type="password"] {
  border:1px solid var(--line);
  border-radius:8px;
  padding:.55em .7em;
  font-size:1em;
  font-family:inherit;
  background:var(--card);
  color:var(--fg);
  transition:border-color .2s var(--ease);
}
select:focus,
input[type="text"]:focus,
input[type="password"]:focus {
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-color:var(--accent);
}
select { width:100%; }

.inner { margin-top:2.5em; }

#upload fieldset {
  background:url(upload.svg) no-repeat center;
  background-size:auto 4.5em;
  transition:border-color .3s var(--ease);
}
#upload fieldset:hover { border-color:var(--accent); }
#upload > form { text-align:center; }
#upload p { margin:0; }

#file_select {
  position:relative;
  width:100%;
  height:16em;
  cursor:pointer;
  opacity:0;
}
#upload.file-selected #file_select { opacity:1; height:2em; }
#upload.file-selected fieldset { background-image:none; }

/* 2 = Copyright / footer ------------------------------------------------- */
#copyright {
  text-align:center;
  font-size:.8rem;
  color:var(--fg-subtle);
  margin:3em auto 0;
}
#copyright a { color:var(--fg-subtle); text-decoration:none; }
#copyright a:hover, #copyright a:focus { color:var(--fg); text-decoration:none; }

/* 3 = Options ------------------------------------------------------------ */
#options { position:relative; z-index:10; width:100%; }
#options tr { height:2.7em; }
#options input[type="submit"] { position:relative; margin:1em auto; }

/* 4 = Upload result / progress ------------------------------------------- */
#upload_finished,
#uploading,
.message,
.info,
.error {
  text-align:center;
  color:var(--fg-muted);
  padding-left:0;
}
#upload_finished > p:nth-child(1) { color:var(--accent); font-weight:600; }
#upload_finished div p:nth-child(1) { font-weight:600; }
#upload_finished a, #uploading a { color:var(--fg); font-weight:500; text-decoration:none; }
#upload_finished a:hover, #uploading a:hover,
#upload_finished a:focus, #uploading a:focus { text-decoration:underline; color:var(--accent); }
#uploaded_percentage { font-size:2.4em; font-weight:600; color:var(--accent); letter-spacing:-0.02em; }
.message, .error { color:#d55548; font-style:italic; font-weight:600; }
#upload_link_email { margin-left:10px; }
#upload_image_email { padding-left:22px; background:url(email.png) no-repeat left center; }

/* 5 = Terms of service --------------------------------------------------- */
textarea[readonly="readonly"] {
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--fg-muted);
  font-family:inherit;
  background:var(--card);
  margin:auto;
  display:block;
  padding:1em;
}
textarea[readonly="readonly"] + p,
textarea[readonly="readonly"] + p + p { text-align:center; color:var(--fg-muted); }
textarea[readonly="readonly"] + p a,
textarea[readonly="readonly"] + p + p a { font-weight:500; text-decoration:none; color:var(--fg); }
textarea[readonly="readonly"] + p a:hover,
textarea[readonly="readonly"] + p + p a:hover { text-decoration:underline; color:var(--accent); }

/* 6 = Install ------------------------------------------------------------ */
#install fieldset,
#install + fieldset { width:auto; max-width:50em; border:1px dashed var(--line); }
#install table,
#install + fieldset table { width:100%; border-collapse:collapse; }
#install td,
#install + fieldset td { padding:.6em 1em; border-bottom:0; }
#install td:empty { width:13.1em; }
#install table form:nth-child(odd),
#install + fieldset tr:nth-child(odd) { background:color-mix(in srgb, var(--fg) 4%, transparent); }
#install fieldset > form { margin-top:2em; text-align:center; }
#install form { display:table; width:100%; }
#install td:last-child { text-align:left; }
#install .info { width:19em; }
#install input[type="submit"] { min-width:10.5em; }
#install + fieldset table { font-size:.9em; }
#install + fieldset td:first-child input[type="submit"] {
  background:none; padding:0; color:var(--fg); font-weight:600; box-shadow:none; transform:none;
}
#install + fieldset td:first-child input[type="submit"]:hover { text-decoration:underline; color:var(--accent); }

/* 7 = Admin -------------------------------------------------------------- */
#admin fieldset,
#admin + fieldset { width:auto; max-width:60em; border:1px dashed var(--line); }
#admin table,
#admin + fieldset table { width:100%; border-collapse:collapse; }
#admin td,
#admin + fieldset td { padding:.6em 1em; border:1px solid var(--line); border-bottom:0; }
#admin td:empty { width:13.1em; }
#admin table form:nth-child(odd),
#admin + fieldset tr:nth-child(odd) { background:color-mix(in srgb, var(--fg) 4%, transparent); }
#admin fieldset > form { margin-top:2em; text-align:center; }
#admin form { display:table; width:100%; }
#admin td:last-child { text-align:left; }
#admin .info { width:19em; }
#admin input[type="submit"] { min-width:10.5em; }
#admin + fieldset table { font-size:.9em; }
#admin + fieldset td:first-child input[type="submit"] {
  background:none; padding:0; color:var(--fg); font-weight:600; box-shadow:none; transform:none;
}
#admin + fieldset td:first-child input[type="submit"]:hover { text-decoration:underline; color:var(--accent); }

/* 8 = Download page ------------------------------------------------------ */
#self_destruct {
  font-weight:600;
  color:#d55548;
  background:none;
  padding:10px 0;
}

/* Responsive ------------------------------------------------------------- */
@media (max-width:600px) {
  #content { padding:1.5em 1rem 3rem; }
  fieldset { padding:1.25em; }
  #file_select { height:12em; }
}