/**
 * Automatic version:
 * Uses light theme by default but switches to dark theme
 * if a system-wide theme preference is set on the user's device.
 */

/* === Universal box-sizing reset === */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --background-body: #fff;
  --background: #efefef;
  --background-alt: #f7f7f7;
  --selection: #9e9e9e;
  --text-main: #363636;
  --text-bright: #000;
  --text-muted: #70777f;
  --links: #0076d1;
  --focus: #0096bfab;
  --border: #dbdbdb;
  --code: #000;
  --animation-duration: 0.1s;
  --button-base: #d0cfcf;
  --button-hover: #9b9b9b;
  --scrollbar-thumb: rgb(170, 170, 170);
  --scrollbar-thumb-hover: var(--button-hover);
  --form-placeholder: #949494;
  --form-text: #1d1d1d;
  --variable: #39a33c;
  --highlight: #ff0;
  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23161f27'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E");

  /* Brand additions */
  --brand-blue: #1e71ff;
  --brand-green: #20b66a;
  --brand-blue-shadow: 0 8px 18px rgba(30,113,255,.22);
  --brand-green-shadow: 0 8px 18px rgba(32,182,106,.24);
}

@media (prefers-color-scheme: dark) {
:root {
  --background-body: #202b38;
  --background: #161f27;
  --background-alt: #1a242f;
  --selection: #1c76c5;
  --text-main: #dbdbdb;
  --text-bright: #fff;
  --text-muted: #a9b1ba;
  --links: #41adff;
  --focus: #0096bfab;
  --border: #526980;
  --code: #ffbe85;
  --animation-duration: 0.1s;
  --button-base: #0c151c;
  --button-hover: #040a0f;
  --scrollbar-thumb: var(--button-hover);
  --scrollbar-thumb-hover: rgb(0, 0, 0);
  --form-placeholder: #a9a9a9;
  --form-text: #fff;
  --variable: #d941e2;
  --highlight: #efdb43;
  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/2000/svg' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E");

  --brand-blue-shadow: 0 8px 18px rgba(30,113,255,.15);
  --brand-green-shadow: 0 8px 18px rgba(32,182,106,.18);
}
}

button { -webkit-tap-highlight-color: transparent; }

/* === Form field sizing & alignment fix === */
form, fieldset {
  display: block;
}

fieldset {
  padding: 10px;
}

form input,
form select,
form textarea {
  max-width: 100%;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 8px;
  line-height: 1.4;
}
fieldset input,
fieldset select,
fieldset textarea {
  display: block;
  width: calc(100% - 2px);
  max-width: 100%;
  margin: 0;
  padding: 8px;
  line-height: 1.4;
  box-sizing: border-box;
}
.wizard-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  margin-bottom: 4px;
}
.wizard-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.wizard-input {
  flex: 1;
  max-width: 600px;
  padding: 8px 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  background: #fff !important;
}
.wizard-subitem {
  margin-left: 40px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
}
.swap-btn {
  display: inline-block;
  width: 26px;
  height: 26px;
  padding: 0;
  text-align: center;
  font-size: 14px;
  line-height: 1;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--background);
  cursor: pointer;
}
.swap-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.delete-btn {
  background: #f88 !important;
  border: 1px solid #d33 !important;
  padding: 4px 8px;
  border-radius: 4px;
  color: white;
  font-weight: bold;
  cursor: pointer;
}

/* ======== HEADER NAV ======== */
.site-nav {
  width: 100%;
  background: var(--background-alt);
  border-bottom: 1px solid var(--border);
}
.site-nav__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.site-nav__brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.logo--nav {
  width: 38px;
  height: auto;
  display: block;
}
.site-nav__links {
  display: flex;
  gap: 12px;
}
.site-nav__links .pill-btn {
  padding: 8px 14px;
  font-size: 0.95rem;
  border-radius: 20px;
}

/* ======== INDEX PAGE CENTERING ======== */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: var(--background-body);
}
.hero {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 20px;
  text-align: center;
}
.logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.logo {
  width: 42px;
  height: auto;
  display: block;
}
.brand { margin: 0; font-size: clamp(18px, 5vw, 26px); }
.tag { margin: 0; font-size: 0.9rem; color: var(--text-muted); }
.chooser {
  margin: 24px auto;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 16px;
}
.pill-btn { width: 100%; }

/* ======== AUTH PAGES ======== */
.auth-wrap {
  width: 100%;
  max-width: 420px;
  margin: 28px auto;
  padding: 0 16px;
}
.auth-title {
  margin: 14px 0 4px;
  font-size: clamp(20px, 5vw, 28px);
  text-align: center;
}
.auth-tag {
  margin: 0 0 16px;
  color: var(--text-muted);
  text-align: center;
}
.auth-form {
  display: grid;
  gap: 12px;
  background: var(--background-body);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}
.auth-form .label {
  display: inline-block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--text-main);
}
.auth-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: var(--text-muted);
}
.auth-links a { color: var(--links); }

/* ======== BUTTON COLORS ======== */
.pill-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 18px;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  transition: transform .08s ease, filter .15s ease, box-shadow .2s ease, background .2s ease;
  user-select: none;
  color: #fff;
}
.pill-btn:active { transform: translateY(1px); }
.pill-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.owner { background: var(--brand-blue); box-shadow: var(--brand-blue-shadow); }
.owner:hover { filter: saturate(1.05) brightness(1.02); }
.sitter { background: var(--brand-green); box-shadow: var(--brand-green-shadow); }
.sitter:hover { filter: saturate(1.05) brightness(1.02); }

/* ======== FOOTER ======== */
.foot {
  margin-top: auto;
  text-align: center;
  padding: 12px;
  color: var(--text-muted);
}

/* Mobile tweaks */
@media (max-width: 480px) {
  .site-nav__links { gap: 8px; flex-wrap: wrap; }
  .site-nav__links .pill-btn { padding: 8px 10px; font-size: 0.9rem; }
}

/* NAV: logo bigger + buttons forced horizontal */
.site-nav {
  background:#fff;
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:10;
}
.site-nav__inner{
  max-width:1200px;
  margin:0 auto;
  padding:10px 20px;
  display:flex;
  align-items:center;          /* center vertically */
  justify-content:center;      /* center group horizontally */
  gap:32px;
  flex-wrap:nowrap;            /* never wrap to new line */
}

/* Logo about 3× bigger */
.logo--nav {
  width:90px;   /* adjust as needed */
  height:auto;
  display:block;
}

/* Buttons row stays horizontal */
.site-nav__links{
  display:flex;
  flex-direction:row;
  gap:16px;
  white-space:nowrap;          /* no line breaks inside */
}

/* Buttons styling */
.site-nav__links .pill-btn{
  padding:10px 18px;
  font-size:1rem;
  border-radius:24px;
}

/* Mobile tweaks: shrink buttons a bit but keep row horizontal */
@media (max-width:600px){
  .logo--nav{ width:70px; }
  .site-nav__links .pill-btn{ padding:8px 12px; font-size:.9rem; }
}

/* Force nav + pill button text to white */
.site-nav__links .pill-btn,
.chooser .pill-btn,
.auth-form .pill-btn {
  color: #fff !important;
}

/* Ensure white on hover/focus too */
.site-nav__links .pill-btn:hover,
.site-nav__links .pill-btn:focus,
.chooser .pill-btn:hover,
.chooser .pill-btn:focus,
.auth-form .pill-btn:hover,
.auth-form .pill-btn:focus {
  color: #fff !important;
}

/* ==== Global compact form spacing (all dashboards and forms) ==== */
.auth-form { gap: 8px !important; padding: 14px !important; }
.auth-form p { margin: 4px 0 !important; line-height: 1.35 !important; }
.auth-form label { margin: 0 !important; }