/* Styles for the editor page (/admin). Builds on site.css. */
:root { --ok: #1b6e3a; --bad: #b3261e; }
@media (prefers-color-scheme: dark) { :root { --ok: #7bd88f; --bad: #f28b82; } }

.learn.internal a::after { content: none; }      /* no "external link" arrow on the link back to the site */

.admin { padding-bottom: 2rem; }
.admin h1 { font-size: clamp(1.75rem, 4.5vw, 2.4rem); margin: 1.5rem 0 .4rem; }
.admin .intro { color: var(--muted); margin-bottom: 1rem; }
.admin h2 { font-size: 1.3rem; }

.status { min-height: 1.6rem; margin: .25rem 0 1rem; font-weight: 600; }
.status.ok { color: var(--ok); }
.status.error { color: var(--bad); }

.who { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; align-items: center; justify-content: space-between; margin: 0 0 1.25rem; color: var(--muted); }
button.link[disabled] { opacity: .5; cursor: not-allowed; }
.who strong { color: var(--ink); }
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--gold-text); text-decoration: underline; cursor: pointer; }

.panel-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }

/* form */
.admin fieldset { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: .5rem 1.25rem 1.25rem; margin: 0 0 1.5rem; min-width: 0; }
.admin legend { font: 700 1.2rem/1.3 var(--serif); color: var(--gold-text); padding: 0 .4rem; }
.admin label { display: block; font-weight: 600; margin-top: .9rem; }
.admin label.check { display: flex; gap: .6rem; align-items: flex-start; }
.admin label.check input { margin-top: .35rem; width: 1.1rem; height: 1.1rem; flex: none; }
.admin input[type="text"], .admin input[type="tel"], .admin input[type="url"],
.admin input[type="datetime-local"], .admin select, .admin textarea {
  display: block; width: 100%; margin-top: .3rem; padding: .6rem .75rem; font: inherit; font-weight: 400;
  color: var(--ink); background: var(--bg); border: 1px solid var(--muted); border-radius: 10px;
}
.admin textarea { resize: vertical; min-height: 3.2rem; }
.hint { display: block; margin-top: .25rem; font-weight: 400; font-size: .9rem; color: var(--muted); }
.req { font-weight: 400; color: var(--muted); }
.grid2 { display: grid; gap: 0 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid2 { grid-template-columns: 1fr 1fr; } }

.site { background: var(--bg) !important; }
.site .site-title-preview { font-weight: 400; color: var(--muted); }
.row-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.btn.small { padding: .45rem .95rem; font-size: .92rem; }
.btn.danger { color: var(--bad); border-color: var(--bad); background: transparent; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.errors { margin: 0 0 1.25rem; padding: .9rem 1.1rem; border: 1px solid var(--bad); border-left-width: 6px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--bad) 8%, var(--surface)); }
.errors ul { margin: .4rem 0 0; padding-left: 1.25rem; }

.savebar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center;
  padding: .85rem 0; background: var(--bg); border-top: 1px solid var(--line); }
.savebar .dirty { color: var(--muted); font-size: .95rem; }

.preview { margin-top: 2rem; }
.preview-box { padding: 1rem; border: 2px dashed var(--line); border-radius: var(--radius); background: var(--bg); }
.preview-box > :first-child { margin-top: 0; }
.preview-box section { padding-top: 1rem; }
.preview-box .wrap { width: 100%; }