/* Account pages only, loaded from their templates rather than from base.html,
   because nobody reading the catalogue should be made to fetch the stylesheet
   for a feature they have not asked for. Tokens come from site.css. */

.gate{max-width:46ch; margin:calc(var(--u)*6) 0}
.gate h1{font-size:clamp(30px, 5vw, 46px); line-height:1.05; margin:0 0 calc(var(--u)*2)}

.doors{display:flex; flex-wrap:wrap; gap:calc(var(--u)*3); margin:calc(var(--u)*3) 0}
.doors form{margin:0; display:flex; flex-direction:column; gap:var(--u);
  align-items:flex-start}

/* The consent, sitting above the button it qualifies rather than below it. */
.keep{display:flex; gap:var(--u); align-items:baseline; font-size:var(--t-cap);
  color:var(--grey); max-width:34ch; cursor:pointer}
.keep input{margin:0; flex:none}

/* One button shape, no arrows, no pills. The provider is named in words —
   Google's and Apple's brand guidelines both want their own mark, which is a
   licensing question for the owner, so the plain form ships first. */
.door{display:inline-block; font:inherit; font-size:var(--t-small);
  padding:calc(var(--u)*1.5) calc(var(--u)*2.5); background:var(--paper);
  color:var(--ink); border:1px solid var(--ink); border-radius:2px;
  cursor:pointer; text-decoration:none; transition:background .15s, color .15s}
.door:hover{background:var(--ink); color:var(--paper)}
.door-danger{border-color:var(--alert); color:var(--alert)}
.door-danger:hover{background:var(--alert); color:var(--paper)}

.alarm{border-left:3px solid var(--alert); padding-left:calc(var(--u)*2);
  color:var(--ink); font-size:var(--t-small); max-width:60ch}

.small{font-size:var(--t-cap); color:var(--grey); max-width:56ch}
.dim{color:var(--grey); font-size:var(--t-cap)}

ul.plain{list-style:none; padding:0; margin:calc(var(--u)*2) 0}
ul.plain li{padding:calc(var(--u)*1.5) 0; border-bottom:1px solid var(--hair)}

form.stack{display:flex; flex-direction:column; gap:calc(var(--u)*1.5);
  max-width:44ch; margin:calc(var(--u)*3) 0}
form.stack label{display:flex; flex-direction:column; gap:calc(var(--u)*.5);
  font-size:var(--t-cap); color:var(--grey)}
form.stack input, form.stack select{font:inherit; font-size:var(--t-body);
  padding:var(--u); border:1px solid var(--hair); background:var(--sunk);
  color:var(--ink); border-radius:2px}
form.stack button{align-self:flex-start}

/* The save control, wherever a page chooses to include it. Sits inline with the
   page's own furniture rather than floating over it. */
.save{display:flex; gap:calc(var(--u)*2); align-items:baseline;
  margin:calc(var(--u)*2) 0; font-size:var(--t-cap)}
.save form{margin:0}

form.inline{display:inline; margin-left:var(--u)}
.linky{font:inherit; font-size:var(--t-cap); background:none; border:0;
  padding:0; color:var(--link); cursor:pointer; text-decoration:underline;
  text-underline-offset:2px}
.signout{margin-top:calc(var(--u)*4)}

@media (prefers-reduced-motion:reduce){ .door{transition:none} }