/* The sign-in page (web/signin.html): the ridge picture behind one solid, square box. It uses the look's values and
   the authorise window's classes (authorize.css) and only changes what this page needs. Layout A, chosen by Eric on
   14 Nov 2026; mock-up: docs/design. The picture is the look's own (--art: day or night), so nothing is fetched. */
body.signin{display:flex;flex-direction:column;place-items:stretch;padding:0;overflow:auto;min-height:100vh;min-height:100dvh;
  background:var(--art) center bottom/cover no-repeat,var(--bg)}
.si-top{display:flex;align-items:center;gap:12px;padding:26px 40px 0;color:var(--ink);font-size:20px;font-weight:300;letter-spacing:-.01em}
.si-logo{display:block;flex:none;fill:none;stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
/* the logo's six layers, back to front: pale to deep by day; deep to pale by night, so the front petals carry the light */
.si-logo .l1{stroke:#e4eddf}.si-logo .l2{stroke:#d6e0d3}.si-logo .l3{stroke:#bdcdbf}.si-logo .l4{stroke:#819f89}.si-logo .l5{stroke:#547568}.si-logo .l6{stroke:#003b3c}
html[data-theme=night] .si-logo .l1{stroke:#17463e}html[data-theme=night] .si-logo .l2{stroke:#255a50}html[data-theme=night] .si-logo .l3{stroke:#3d7a6b}
html[data-theme=night] .si-logo .l4{stroke:#62a48f}html[data-theme=night] .si-logo .l5{stroke:#89d7bd}html[data-theme=night] .si-logo .l6{stroke:#edf3eb}

/* the box: square, solid, floating. Narrow for a sign-in step; wide once signed in (the manage view) */
.signin .authz-card{margin:auto;max-width:408px;border-radius:0;background:var(--panel);border:1px solid var(--line);
  box-shadow:var(--lift-float,0 18px 48px rgba(0,59,60,.18));padding:36px 36px 28px}
.signin .authz-card.authz-wide{max-width:408px}
body.signin[data-view=manage] .authz-card.authz-wide{max-width:640px;margin:32px auto 48px}
/* a little above the middle (the eye's centre), by padding the page's foot: a tall box (the QR set-up) then simply starts
   at the top instead of being pushed off it */
body.signin:not([data-view=manage]){padding-bottom:10vh;gap:20px}
.signin .authz-brand{display:none}                 /* the name is in the page's top line */
.signin .authz-card h1{margin:0 0 6px;font-size:28px;line-height:1.2;font-weight:300;letter-spacing:-.02em}
.signin .authz-card h1 + .muted{font-size:13px;margin-bottom:20px}
.signin .authz-card h2{font-weight:500}

/* fields and buttons: 44px tall, square, one line of border */
.signin .authz-stack{max-width:none;gap:18px;margin:0}
.si-field{display:flex;flex-direction:column;gap:6px}
.si-field>span{font-size:12px;color:var(--soft)}
.signin .authz-card input[type=text],.signin .authz-card input[type=password],.signin .authz-card input[type=email]{width:100%;box-sizing:border-box;
  height:44px;padding:0 12px;border:1px solid var(--line2);border-radius:0;background:var(--panel);color:var(--ink);font:inherit}
.signin .authz-card input:focus-visible,.signin .authz-card button:focus-visible,.signin .authz-card a:focus-visible,.signin .authz-card summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.signin .btn{border-radius:0;min-height:36px}
.signin .btn.primary{min-height:44px;justify-content:center;font-weight:500;padding:0 18px}
.signin .authz-stack .btn.primary{width:100%}
.signin .authz-row{gap:8px}
.signin .authz-row .btn{min-height:44px}
.signin .authz-card fieldset,.signin .authz-dest,.signin .authz-code,.signin .authz-codes{border-radius:0}

/* a refusal: a plain tinted line, no side bar */
.signin .authz-error{border-left:0;padding:10px 12px;background:var(--badbg);color:var(--bad);font-size:13px;margin:0 0 16px}
.signin .authz-error[hidden]{display:none}

/* "Can't sign in?": one quiet line under a rule, with the small copper square; it opens a short note */
.si-help{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:13px}
.si-help summary{display:flex;align-items:center;gap:10px;cursor:pointer;color:var(--accent);list-style:none;width:fit-content}
.si-help summary::-webkit-details-marker{display:none}
.si-help summary::before{content:"";width:8px;height:8px;background:var(--copper);flex:none}
.si-help p{margin:10px 0 0;color:var(--soft)}

@media (max-width:520px){
  .si-top{padding:22px 20px 0}
  .signin .authz-card{margin:40px 16px auto;padding:28px 22px 22px;max-width:none;width:auto}
  body.signin[data-view=manage] .authz-card.authz-wide{margin:24px 12px 32px;max-width:none}
  body.signin:not([data-view=manage]){padding-bottom:0}
  body.signin:not([data-view=manage]) .authz-card{margin:40px 16px auto}
  .signin .authz-card input[type=text],.signin .authz-card input[type=password],.signin .authz-card input[type=email]{height:48px;font-size:16px}  /* 16px: iOS does not zoom */
  .signin .btn.primary{min-height:48px}
}
@media print{body.signin{background:#fff}.si-top{display:none}}
/* at night the field's edge needs the stronger line to be seen against the dark box */
html[data-theme=night] .signin .authz-card input[type=text],html[data-theme=night] .signin .authz-card input[type=password],html[data-theme=night] .signin .authz-card input[type=email]{border-color:var(--line3)}
/* a labelled field beside its button (the code step): the field takes the width, the button sits on the field's line */
.signin .authz-row{align-items:flex-end}
.signin .authz-row .si-field{flex:1;min-width:0}
/* the board's base style stops the page scrolling (body{overflow:hidden}); this page is a document and must scroll (above).
   The activity list keeps to about six lines and scrolls inside itself, so the box does not grow with history */
.signin .authz-log{max-height:190px;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--line);padding:4px 12px;scrollbar-width:thin}