/* Admin only: the sign-in pages, the bar shown to a signed-in admin, and the block editor.
   Loaded only on responses rendered for an admin (or the admin pages themselves). */

input[type="password"] {
  font: inherit; font-size: .95rem; color: var(--ink); background: var(--white);
  border: 1.5px solid var(--line); border-radius: 10px; padding: .75rem .9rem; width: 100%;
}

.admin-panel { max-width: 30rem; }
.admin-panel h1 { font-size: clamp(2rem, 4vw, 2.6rem); }
.admin-form { margin-top: 1.5rem; }
.admin-back { margin-top: 2rem; font-size: .9rem; }

.admin-bar { background: var(--ink); color: #e6e9ef; font-size: .85rem; position: relative; z-index: 60; }
.admin-bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1.5rem; padding: .55rem 0; }
.admin-bar p { margin: 0; }
.admin-bar a, .admin-bar button { color: #fff; }
.admin-bar-actions { display: flex; align-items: center; gap: 1.2rem; }
.admin-bar form { margin: 0; }
.admin-bar button { font: inherit; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

/* Editable blocks: outlined so it is clear what can change. */
[data-block] { outline: 1.5px dashed rgb(47 102 196 / 55%); outline-offset: 4px; border-radius: 2px; }
.block-edit {
  display: inline-block; margin: 0 0 .35rem; padding: .2rem .65rem; border-radius: 999px;
  border: 0; background: var(--royal); color: #fff; font: 600 .72rem/1.4 var(--sans);
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer; vertical-align: middle;
}
.block-edit:hover, .block-edit:focus-visible { background: var(--navy); }
.site-footer .block-edit { margin-right: .6rem; }

.block-dialog { width: min(100% - 2rem, 46rem); border: 0; border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-lift); color: var(--text); }
.block-dialog::backdrop { background: rgb(8 31 69 / 45%); }
.block-dialog h2 { font-size: 1.5rem; margin: 0 0 .8rem; }
.block-dialog .ql-container { font: 1rem/1.6 var(--sans); min-height: 8rem; }
.block-dialog .ql-container.inline-only { min-height: 4rem; }
.block-dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
.block-dialog .form-status { margin-top: .6rem; }

/* Collections of boxes and replaceable pictures. */
[data-collection], [data-slot] { outline: 1.5px dashed rgb(47 102 196 / 55%); outline-offset: 6px; border-radius: 2px; }
.block-dialog { max-height: calc(100vh - 2rem); overflow-y: auto; }
.block-dialog-actions .spacer { flex: 1; }
.block-dialog label { display: block; font-weight: 600; font-size: .85rem; margin: .9rem 0 .3rem; color: var(--ink); }
.block-dialog input[type="text"], .block-dialog select, .block-dialog textarea {
  font: inherit; font-size: .95rem; color: var(--ink); background: var(--white);
  border: 1.5px solid var(--line); border-radius: 10px; padding: .55rem .75rem; width: 100%;
}
.block-dialog .hint { font-size: .8rem; margin: .25rem 0 0; color: var(--muted, #5b6575); }
.item-list { display: grid; gap: 1rem; }
.item { border: 1px solid var(--line); border-radius: 12px; padding: .4rem 1rem 1rem; margin: 0; position: relative; }
.item legend { font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; padding: 0 .4rem; }
.item-tools { position: absolute; top: .5rem; right: .7rem; display: flex; gap: .35rem; }
.btn-xs { padding: .15rem .55rem; font-size: .75rem; min-height: 0; }
.item .ql-container { min-height: 4rem; }
.icon-row { display: flex; align-items: center; gap: .8rem; }
.icon-row select { flex: 1; }
.icon-preview { width: 1.6rem; height: 1.6rem; flex: none; }
.slot-preview { max-height: 12rem; width: auto; margin: 0 auto .5rem; background: var(--ivory, #faf8f3); border-radius: 12px; padding: .5rem; }
.block-dialog > .dialog-body > .btn { margin-top: 1rem; }

/* The link dialog: words, what to link to, and link or button. Opens over the text editor. */
.link-dialog { width: min(100% - 2rem, 34rem); }
.choice-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.block-dialog label.choice {
  display: inline-flex; align-items: center; gap: .45rem; margin: 0; padding: .45rem .8rem;
  border: 1.5px solid var(--line); border-radius: 10px; font-weight: 500; cursor: pointer;
}
.block-dialog label.choice:has(input:checked) { border-color: var(--royal); background: rgb(47 102 196 / 8%); }
.block-dialog label.choice input { margin: 0; accent-color: var(--royal); }
.choice-style { flex: 1 1 12rem; flex-wrap: wrap; }
.choice-preview { flex-basis: 100%; margin: .3rem 0 .1rem; pointer-events: none; }
.choice-preview .link-preview { color: var(--royal); text-decoration: underline; text-underline-offset: 3px; }
.choice-preview .link-button { margin: 0; padding: .6rem 1.1rem; font-size: .85rem; box-shadow: none; }
/* In the editor, a button link looks like the button it will be. */
.ql-snow .ql-editor a.link-button { text-decoration: none; color: var(--white); }

/* The colour panel: beside the page (below it on a phone) so the page is the preview. */
.colour-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: 23rem; display: flex; flex-direction: column;
  background: var(--white); color: var(--text); box-shadow: -12px 0 40px rgb(8 31 69 / 18%);
  padding: 1rem 1.1rem; overflow-y: auto; font-size: .92rem;
}
.colour-panel[hidden] { display: none; }
/* The panel keeps the original colours, so a hard-to-read choice cannot hide its own controls. */
.colour-panel { --btn-bg: var(--navy); --btn-hover: var(--royal); --btn-text: var(--white); --text: #2c313b; --heading: var(--navy); --link: var(--royal); }
@media (min-width: 900px) { body.colour-panel-open { margin-right: 23rem; } }
@media (max-width: 899px) {
  .colour-panel { top: auto; width: 100%; max-height: 58vh; border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgb(8 31 69 / 22%); }
  body.colour-panel-open { padding-bottom: 58vh; }
}
.colour-head { display: flex; align-items: center; justify-content: space-between; }
.colour-head h2 { font-size: 1.5rem; margin: 0; color: var(--ink); }
.colour-close { background: none; border: 0; font-size: 1.7rem; line-height: 1; color: var(--ink); cursor: pointer; padding: .2rem .5rem; }
.colour-intro { font-size: .82rem; color: var(--silver); margin: .4rem 0 .8rem; line-height: 1.5; }
.colour-list { display: grid; gap: .4rem; }
.colour-row { border: 1px solid var(--line); border-radius: 12px; }
.colour-row.is-changed { border-color: rgb(47 102 196 / 45%); }
.colour-summary {
  display: flex; align-items: center; gap: .75rem; width: 100%; padding: .55rem .7rem; background: none; border: 0;
  font: inherit; text-align: left; cursor: pointer; color: var(--ink); border-radius: 12px;
}
.colour-summary:hover { background: #f5f6f8; }
.colour-swatch { width: 2rem; height: 2rem; border-radius: 8px; flex: none; border: 1px solid rgb(0 0 0 / 15%); }
.colour-words { flex: 1; display: grid; line-height: 1.3; }
.colour-name { font-weight: 600; }
.colour-hint { font-size: .76rem; color: var(--silver); }
.colour-warning { font-size: .76rem; color: #8a4b00; margin-top: .15rem; }
.colour-warning::before { content: "⚠ "; }
.colour-code { font: .78rem/1 ui-monospace, Menlo, Consolas, monospace; color: var(--silver); }
.colour-body { padding: .2rem .8rem .9rem; }
.picker-sv {
  position: relative; height: 10rem; border-radius: 10px; cursor: crosshair; touch-action: none;
  background-image: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent);
}
.picker-hue {
  position: relative; height: 1rem; margin: .8rem 0 .2rem; border-radius: 999px; cursor: ew-resize; touch-action: none;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
.picker-knob {
  position: absolute; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 35%), 0 2px 6px rgb(0 0 0 / 30%); transform: translate(-50%, -50%);
}
.picker-hue .picker-knob { top: 50%; }
.picker-knob:focus-visible { outline: 3px solid var(--royal-bright); outline-offset: 2px; }
.picker-code-row { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; }
.colour-panel .picker-code-row label { margin: 0; font-weight: 600; font-size: .82rem; color: var(--ink); }
.colour-panel input.picker-code {
  width: 7rem; font: .9rem ui-monospace, Menlo, Consolas, monospace; padding: .35rem .55rem;
  border: 1.5px solid var(--line); border-radius: 8px; color: var(--ink);
}
.colour-panel input.picker-code.invalid { border-color: #b3261e; }
.picker-code-row .btn { margin-left: auto; }
.picker-swatches { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }
.picker-chip { width: 1.5rem; height: 1.5rem; border-radius: 6px; border: 1px solid rgb(0 0 0 / 18%); padding: 0; cursor: pointer; }
.picker-chip:hover { transform: scale(1.12); }
.colour-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1rem -1.1rem -1rem; padding: .8rem 1.1rem 1rem;
  border-top: 1px solid var(--line); position: sticky; bottom: -1rem; background: var(--white); margin-top: auto;
}
.colour-foot .form-status { flex-basis: 100%; margin: 0; min-height: 0; }
.colour-foot .form-status:empty { display: none; }
.colour-foot .spacer { flex: 1; }

/* The menu editor: where an item goes (a section, or an address), and the button tick box. */
.link-row { display: grid; gap: .4rem; }
.link-row input[hidden] { display: none; }
.block-dialog label.flag { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; margin-top: .8rem; cursor: pointer; }
.block-dialog label.flag input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--royal); }
.colour-group { font: 600 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--silver); margin: .9rem 0 .2rem; }
.colour-group:first-child { margin-top: 0; }
.colour-swatch-range { display: grid; place-items: center; background: var(--royal-tint); color: var(--navy); font: 600 .72rem/1 var(--sans); }
.picker-range { width: 100%; margin: .6rem 0 0; accent-color: var(--royal); }
.picker-value { font: 600 .9rem/1 var(--sans); color: var(--ink); }

/* The admin bar's way into the panel: a button, not one more underlined word. */
.admin-bar button.admin-bar-style {
  background: #fff; color: var(--navy); text-decoration: none; font-weight: 600;
  padding: .3rem .85rem; border-radius: 999px;
}
.admin-bar button.admin-bar-style:hover, .admin-bar button.admin-bar-style:focus-visible { background: var(--royal-tint); }

/* Font lists: every font written in itself. */
.font-category { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--silver); margin: .7rem 0 .3rem; }
.font-list { display: grid; gap: .3rem; }
.font-choice {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; width: 100%;
  padding: .45rem .7rem; border: 1.5px solid var(--line); border-radius: 10px; background: #fff;
  color: var(--ink); cursor: pointer; text-align: left;
}
.font-choice:hover { border-color: rgb(47 102 196 / 45%); }
.font-choice[aria-pressed="true"] { border-color: var(--royal); background: rgb(47 102 196 / 8%); }
.font-name { font-size: 1.05rem; }
.font-sample { font-size: .95rem; color: var(--silver); white-space: nowrap; }