/* The private rota page. The rota cards reuse work-rota.css unchanged; this file only supplies what the Homepage supplies around them:
   the page background, the card (.homelab-section) and the font, with the exact values read from the live Homepage. */
:root { color-scheme: light; --cream: #f5f0e3; --ink: #26372d; --forest: #123f2b; --leaf: #36714d; --muted: #66756a; --border: #dfd4b9; }
html, body { margin: 0; background: var(--cream); color: var(--ink); }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; min-height: 100vh;
  background-image: radial-gradient(circle at 12% 0%, rgba(201, 151, 63, 0.08), transparent 28rem), radial-gradient(circle at 90% 12%, rgba(111, 143, 114, 0.09), transparent 30rem);
  background-attachment: fixed; padding-bottom: 2rem; }
html, body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0.1px; }   /* the Homepage's own text settings */
*, *::before, *::after { box-sizing: border-box; }
button { font: inherit; }

/* the card, as on the Homepage */
.rota-page .homelab-section { background: rgba(255, 250, 239, 0.88); border: 1px solid var(--border); border-radius: 18px; padding: 16px; box-shadow: 0 5px 18px rgba(70, 61, 38, 0.055); }
@media (max-width: 700px) {
  .rota-page .homelab-section { border-radius: 12px; padding: 0.65rem; }
  .rota-page .homelab-rota .rota-title { font-size: 0.95rem; }
  /* work-rota.css gives the phone status line 100% width AND a 2.1rem left margin, which spills 2.1rem past the card (the Homepage hides that with its own page overflow
     setting). Same look, sized to fit instead, so this page never scrolls sideways. */
  .rota-page .homelab-rota .rota-status { flex-basis: calc(100% - 2.1rem); min-width: 0; }
}

/* header */
.site-head { width: min(calc(100% - 2rem), 92rem); margin: 1rem auto 0; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.site-brand { font-weight: 700; font-size: 1.15rem; color: var(--forest); }
.site-brand span { font-weight: 500; font-size: 0.85rem; color: var(--muted); margin-left: 0.4rem; }
.site-nav { display: flex; gap: 0.5rem; }
.site-nav button, .add-actions button, .login-card button:not(.primary):not([data-d]):not(#pin-back) { border: 1px solid var(--border); background: #fffdf7; color: var(--forest); border-radius: 999px; padding: 0.35rem 0.9rem; cursor: pointer; font-size: 0.85rem; }
.site-nav button:hover, .add-actions button:hover { background: #f1f7ea; }
button.primary { background: var(--leaf); color: #fff; border: 1px solid var(--leaf); border-radius: 0.8rem; padding: 0.75rem 1rem; font-size: 1rem; font-weight: 600; cursor: pointer; width: 100%; }
button.primary:disabled { opacity: 0.55; cursor: default; }
@media (max-width: 700px) { .site-head { width: min(calc(100% - 0.75rem), 92rem); } }

/* sign-in */
.rota-login { display: grid; place-items: center; padding: 1rem; }
.login-card { width: min(100%, 22rem); margin: 8vh auto 0; text-align: center; padding: 1.5rem 1.25rem 1.25rem !important; }
.login-icon { color: var(--leaf); display: inline-flex; margin-bottom: 0.25rem; }
.login-card h1 { margin: 0; font-size: 1.35rem; color: var(--forest); }
.login-sub { margin: 0.2rem 0 1.1rem; color: var(--muted); font-size: 0.85rem; }
.login-or { margin: 1.1rem 0 0.6rem; color: var(--muted); font-size: 0.8rem; }
.pin-dots { display: flex; justify-content: center; gap: 0.7rem; margin: 0.9rem 0 0.8rem; }
.pin-dots span { width: 0.85rem; height: 0.85rem; border-radius: 50%; border: 2px solid var(--leaf); }
.pin-dots span.on { background: var(--leaf); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; max-width: 15rem; margin: 0 auto; }
.pin-pad button { height: 3.1rem; border-radius: 0.9rem; border: 1px solid var(--border); background: #fffdf7; color: var(--forest); font-size: 1.25rem; font-weight: 600; cursor: pointer; }
.pin-pad button:active { background: #e9f1e1; }
.login-msg { min-height: 1.4rem; margin: 0.8rem 0 0; font-size: 0.85rem; color: var(--muted); }
.login-msg[data-bad="1"] { color: #a33a2f; }
button:focus-visible { outline: 3px solid var(--leaf); outline-offset: 2px; }

/* add a fingerprint */
.add-dialog { border: 1px solid var(--border); border-radius: 1.1rem; padding: 1.1rem 1.2rem; max-width: min(24rem, calc(100vw - 1.5rem)); width: 100%; background: #fffdf7; color: var(--forest); box-shadow: 0 18px 50px rgba(40, 35, 20, 0.28); }
.add-dialog::backdrop { background: rgba(30, 40, 30, 0.38); }
.add-dialog h2 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.add-help { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.85rem; }
.add-who { display: flex; gap: 1.2rem; margin-bottom: 0.8rem; }
.add-label { display: block; font-size: 0.8rem; color: var(--muted); }
.add-label input { display: block; width: 100%; margin-top: 0.25rem; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 0.6rem; font: inherit; font-size: 0.95rem; color: var(--forest); background: #fff; }
.add-actions { display: flex; gap: 0.6rem; margin-top: 0.8rem; }
.add-actions .primary { width: auto; flex: 1; padding: 0.55rem 0.9rem; font-size: 0.95rem; }