/* Sign-in page (#137), in the dashboard's own voice: paper and ink, Fraunces
   for the masthead, IBM Plex Mono for the furniture, the same grain.

   The two palette blocks are COPIES of the ones in templates/index.html (the
   dashboard keeps its styles inline, so there is no shared sheet to import).
   tests/test_auth.py compares them token for token: retint the dashboard
   without this page and that test names the token. theme.js stamps
   data-theme on <html> before first paint, exactly as on the dashboard. */
:root{
  color-scheme:light;
  --paper:#f3ece0; --paper-2:#ece3d4; --ink:#1d1812; --ink-soft:#4a4236;
  --muted:#8c8170; --line:#d8cdba; --line-strong:#c4b69e;
  --vermilion:#d6360b; --vermilion-deep:#a52806;
  --pine:#0c6b51; --ochre:#b8810c; --ochre-2:#d9a23a; --stone:#9a8f7d;
  --row:#f7f1e7; --row-alt:#efe7d8;
  --card:#fff;            /* raised surfaces: cards, panels, hovered rows */
  --on-accent:#fff;       /* text/dots on a vermilion or pine fill */
  --pill-bg:rgba(214,54,11,.05); --pill-bg-hover:rgba(214,54,11,.12);
  --shadow-card:0 1px 3px rgba(0,0,0,.05); --shadow-pop:0 8px 28px rgba(0,0,0,.14);
  /* in-map panel: sits on top of an aerial photo, so it needs a ground of its
     own rather than --card, which is opaque paper and reads as a hole */
  --map-ctl-bg:rgba(255,255,255,.92);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#181310; --paper-2:#211b15; --ink:#ece3d2; --ink-soft:#c8bba4;
  --muted:#988b74; --line:#393025; --line-strong:#4d4132;
  --vermilion:#f4562a; --vermilion-deep:#ff8a5e;
  --pine:#2fa37e; --ochre:#d9a23a; --ochre-2:#b8810c; --stone:#847968;
  --row:#1d1712; --row-alt:#241d16;
  --card:#282017;
  --on-accent:#181310;
  --pill-bg:rgba(244,86,42,.10); --pill-bg-hover:rgba(244,86,42,.20);
  --shadow-card:0 1px 4px rgba(0,0,0,.45); --shadow-pop:0 10px 32px rgba(0,0,0,.55);
  --map-ctl-bg:rgba(24,19,16,.90);
}
*{box-sizing:border-box;}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans",sans-serif; font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;}
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(120% 80% at 85% -10%, rgba(214,54,11,.07), transparent 55%),
    radial-gradient(90% 70% at 0% 110%, rgba(12,107,81,.06), transparent 55%);}
body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;}
:root[data-theme="dark"] body::after{mix-blend-mode:screen; opacity:.16;}
:root[data-theme="dark"] body::before{
  background:radial-gradient(120% 80% at 85% -10%, rgba(244,86,42,.10), transparent 55%),
    radial-gradient(90% 70% at 0% 110%, rgba(47,163,126,.08), transparent 55%);}

.shell{position:relative; z-index:1; min-height:100vh; min-height:100svh;
  display:flex; align-items:center; justify-content:center; padding:76px 16px 44px;}

/* same round furniture as the dashboard's switch; theme.js drives the glyph */
.themebtn{position:absolute; top:18px; right:16px; width:46px; height:46px; border-radius:99px;
  border:1px solid var(--line-strong); background:var(--row); color:var(--ink);
  font-size:17px; line-height:1; cursor:pointer; transition:border-color .12s;}
.themebtn:hover{border-color:var(--vermilion);}

.sheet{width:100%; max-width:420px; animation:rise .45s ease-out both;}

/* Masthead: the dashboard's heavy rule, kicker, serif title and italic lede */
.mast{border-top:2px solid var(--ink); padding-top:14px; margin-bottom:22px;}
.kicker{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--vermilion-deep); font-weight:600;}
/* the brand is a domain name, so it is set like the dashboard's wordmark:
   IBM Plex Mono with the dot in vermilion */
h1{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:clamp(34px,9.5vw,52px);
  line-height:1.05; letter-spacing:-.01em; margin:10px 0 0; overflow-wrap:anywhere;}
h1 .accent{color:var(--vermilion);}
.lede{font-family:"Fraunces",serif; font-style:italic; font-size:17px; color:var(--ink-soft); margin:12px 0 0; max-width:34ch;}

/* The form: a raised card like the filter panel, with a vermilion top edge */
.card{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line);
  border-top:3px solid var(--vermilion); border-radius:10px; box-shadow:var(--shadow-card); padding:22px 22px 24px;}
.field{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin:16px 0 6px;}
.card > .field:first-of-type{margin-top:0;}
.card input[type=text], .card input[type=password], .card input[type=email]{width:100%; min-width:0;
  /* 16px: iOS zooms the page into any smaller input on focus */
  font-family:"IBM Plex Mono",monospace; font-size:16px; padding:11px 13px;
  border:1px solid var(--line-strong); border-radius:6px; background:var(--row); color:var(--ink);
  outline:none; transition:border-color .12s, background .12s;}
.card input[type=text]:focus, .card input[type=password]:focus, .card input[type=email]:focus{border-color:var(--vermilion); background:var(--card);}

.remember{display:flex; align-items:flex-start; gap:10px; margin-top:18px; font-size:14px; color:var(--ink-soft); cursor:pointer;}
.remember input{flex:none; width:18px; height:18px; margin:2px 0 0; accent-color:var(--vermilion); cursor:pointer;}
.remember small{display:block; margin-top:2px; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.03em; color:var(--muted);}

button.run{margin-top:22px; font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:13.5px; letter-spacing:.14em; text-transform:uppercase;
  background:var(--ink); color:var(--paper); border:0; border-radius:2px; padding:15px 24px; cursor:pointer; transition:transform .12s, background .2s;}
button.run:hover{background:var(--vermilion); transform:translateY(-1px);}

/* Password reset and the reset address (#161): a second card, a line of
   prose, and a quiet link under a form. */
.card + .card{margin-top:18px;}
.note{margin:0 0 4px; font-size:14px; color:var(--ink-soft);}
.card .note + .run{margin-top:16px;}
.card input + .note{margin-top:8px;}
.aside{align-self:flex-start; margin-top:14px; font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.04em;}


/* /account holds two of these cards: the alert settings (#159) and the password */
.card + .card{margin-top:18px;}
.card h2{font-family:"Fraunces",serif; font-weight:600; font-size:22px; line-height:1.2; margin:0 0 6px;}
.card fieldset{border:0; margin:24px 0 0; padding:0; min-width:0;}
.card legend{padding:0; margin:0; font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--vermilion-deep);}
.card .note{margin:6px 0 0; font-size:13.5px; color:var(--ink-soft);}
.card .checks .remember{margin-top:8px;}
.card [aria-invalid="true"]{border-color:var(--vermilion);}
.card .pending ul{margin:6px 0 0; padding:0; list-style:none; font-size:14px;}
.card .pending li{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-top:4px; overflow-wrap:anywhere;}
button.again{padding:0; border:0; background:none; font:inherit; font-size:13px; color:var(--vermilion-deep);
  text-decoration:underline; text-underline-offset:2px; cursor:pointer;}
button.again:hover{color:var(--vermilion);}

.msg{margin:0 0 18px; padding:10px 12px; border-left:3px solid var(--vermilion); border-radius:0 6px 6px 0;
  background:var(--pill-bg); color:var(--vermilion-deep); font-family:"IBM Plex Mono",monospace; font-size:13px; line-height:1.45;}
.msg.ok{border-left-color:var(--pine); background:transparent; color:var(--pine);}

.colophon{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 18px; margin-top:18px; padding-top:12px;
  border-top:1px dashed var(--line-strong); font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}

/* Links. This sheet had none to style while it dressed one page with one form,
   and /bronnen (#169) put nine headings and a dozen licence links on it — every
   one of which rendered rgb(0, 0, 238), the browser default, which is in no
   palette this project has and fails contrast outright on the dark ground. */
a{color:var(--vermilion-deep); text-decoration-color:var(--line-strong); text-underline-offset:2px;}
a:hover{color:var(--vermilion); text-decoration-color:currentColor;}

:focus-visible{outline:2px solid var(--vermilion); outline-offset:2px; border-radius:2px;}

@keyframes rise{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){ .sheet{animation:none;} button.run, .themebtn{transition:none;} }