/* ==========================================================================
   samanthalouisemary.com — the admin pages (/admin/, /admin/portal/) and the
   "Taking a break" page (/taking-a-break/).
   Loaded after site.css, which provides the fonts and the colour variables.
   ========================================================================== */

.adm-page [hidden], .break-page [hidden] { display: none !important; }

/* ---------- Buttons (also used for links that look like buttons) --------- */
.adm-btn, .adm-btn:visited {
  display: inline-block;
  margin: 0;
  padding: 15px 30px;
  border: 1px solid #111113;
  border-radius: 0;
  background: #111113;
  color: #fff;
  font-family: var(--font-display, "SLM Display", sans-serif);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .2em;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .1s linear, background-color .1s linear, color .1s linear;
}
.adm-btn:hover { color: #fff; opacity: .8; }
.adm-btn:disabled { opacity: .3; cursor: not-allowed; }
.adm-btn--quiet, .adm-btn--quiet:visited { background: #fff; color: #111113; }
.adm-btn--quiet:hover { background: #111113; color: #fff; opacity: 1; }
.adm-btn--quiet:disabled:hover { background: #fff; color: #111113; }
.adm-btn--small, .adm-btn--small:visited { padding: 9px 16px; font-size: 11px; letter-spacing: .2em; }

.adm-page :focus-visible, .break-page :focus-visible { outline: 2px solid #111113; outline-offset: 3px; }
.adm-page [tabindex="-1"]:focus { outline: none; }

/* ---------- "Taking a break" page ----------------------------------------- */
.break-admin { position: fixed; top: 16px; right: 16px; z-index: 2; }
.break-main {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 16px;
  text-align: center;
}
.break-title {
  margin: 0;
  font-family: var(--font-display, "SLM Display", sans-serif);
  font-weight: 300;
  font-size: 40px;
  letter-spacing: 2px;
  line-height: 1.2em;
  color: var(--heading, #19181b);
}

/* ---------- Admin pages --------------------------------------------------- */
.adm-main { max-width: 600px; margin: 0 auto; padding: 48px 16px 64px; }
.adm-back { margin: 0 0 48px; font-size: 14px; }
.adm-back a, .adm-back a:visited { color: var(--muted, #999); }
.adm-back a:hover { color: var(--link-hover, #7a2a44); }
.adm-title {
  margin: 0 0 32px;
  font-family: var(--font-display, "SLM Display", sans-serif);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: .2em;
  line-height: 1.3em;
  text-transform: uppercase;
}
.adm-view > p { margin: 0 0 1.25em; }
.adm-buttons { margin-top: 24px !important; }
.adm-captcha { min-height: 78px; margin: 24px 0 0; }

.adm-status { margin: 24px 0 0; min-height: 1.6em; }
.adm-status:empty { display: none; }
.adm-status.is-error { color: var(--link-hover, #7a2a44); }
.adm-status a, .adm-status a:visited { text-decoration: underline; }

/* the on/off switch: a real checkbox (role="switch") drawn as a toggle */
.adm-panel { padding: 28px 24px; border: 1px solid #e6e6e6; }
.adm-switch { display: flex; align-items: center; gap: 16px; }
.adm-switch input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  position: relative;
  width: 56px;
  height: 30px;
  margin: 0;
  border: 1px solid #111113;
  border-radius: 15px;
  background: #fff radial-gradient(circle, #111113 0, #111113 10px, transparent 10.5px) no-repeat 2px 50% / 24px 24px;
  cursor: pointer;
  transition: background-position .15s ease, background-color .15s ease;
}
.adm-switch input:checked {
  background-color: #111113;
  background-image: radial-gradient(circle, #fff 0, #fff 10px, transparent 10.5px);
  background-position: 28px 50%;
}
.adm-switch input:disabled { opacity: .4; cursor: progress; }
.adm-switch label {
  font-family: var(--font-display, "SLM Display", sans-serif);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
  cursor: pointer;
}
.adm-hint { margin: 14px 0 0; font-size: 14px; line-height: 1.5em; color: #555; }
.adm-state { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid #e6e6e6; }
.adm-state:empty { display: none; }
.adm-state strong { font-weight: 700; }

.adm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--rule, #bbb);
}
.adm-link, .adm-link:visited {
  font-family: var(--font-display, "SLM Display", sans-serif);
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #111113;
}

/* ---------- Phones -------------------------------------------------------- */
@media only screen and (max-width: 800px) {
  .break-title { font-size: 28px; }
  .adm-main { padding-top: 32px; }
  .adm-back { margin-bottom: 32px; }
  .adm-title { font-size: 22px; }
  .adm-panel { padding: 20px 16px; }
}
/* the "I'm not a robot" box is 304px wide; shrink it on very narrow screens */
@media only screen and (max-width: 340px) {
  .adm-captcha { transform: scale(.88); transform-origin: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .adm-btn, .adm-switch input { transition: none; }
}
/* Windows high-contrast mode: fall back to a plain checkbox */
@media (forced-colors: active) {
  .adm-switch input { -webkit-appearance: auto; appearance: auto; width: auto; height: auto; }
}