/* The form pages: the words and fields in the room the painting leaves on the left. */
.acct-main { position:relative; z-index:2; flex:1 0 auto; width:min(26em, calc(100% - 2 * var(--edge))); margin-left:var(--edge); padding:clamp(72px, 9.5vh, 110px) 0 clamp(12px, 3vh, 32px);
  display:flex; flex-direction:column; justify-content:center; }
.acct-main h1 { font-size:clamp(1.8rem, 2.6vw, 2.8rem); letter-spacing:0; margin:0 0 .35em; line-height:1.12; outline:none; }
.acct-main h2 { font-size:1.2em; color:var(--parchment); font-weight:600; margin:0 0 .3em; }
.acct-main p { margin-bottom:.9em; }
.unloaded { color:var(--stone); }
@media (scripting:none) { #unloaded { display:none; } }

/* The mock's own note and its list of states: both go when the real pages come */
.mock-box { margin-bottom:1em; }
.test-note { padding:.4em 0 .4em .8em; border-left:2px solid var(--honey); color:var(--stone); font-size:.86em; line-height:1.4; }
.acct-main .test-note { margin-bottom:.2em; }
.states { padding-left:calc(.8em + 2px); font-size:.86em; color:var(--stone); }
.states summary { display:flex; align-items:center; gap:.3em; min-height:44px; cursor:pointer; color:var(--parchment); text-decoration:underline; text-underline-offset:.3em; text-decoration-thickness:1px; }
.states ul { list-style:none; max-height:40vh; overflow:auto; padding:.2em 0; }
.states a { display:flex; align-items:center; min-height:36px; color:var(--stone); }
.states a[aria-current] { color:var(--honey); }

.field { display:block; margin-bottom:.8em; }
.field > span { display:block; font-size:.92em; margin-bottom:.2em; }
.field small { display:block; margin-top:.25em; font-size:.82em; line-height:1.35; color:var(--stone); }
.field input { width:100%; min-height:44px; padding:.4em .7em; font:inherit; color:var(--parchment); background:rgba(16,12,7,.6); border:1px solid rgba(232,194,122,.5); border-radius:2px; }
.field input:hover { border-color:var(--honey); }
.field input:focus { outline:2px solid var(--honey); outline-offset:0; border-color:var(--honey); }
.field input[aria-invalid="true"] { border-color:#f09a7a; outline-color:#f09a7a; }
/* The browser's calendar icon has to show on the dark field */
.field input[type="date"] { color-scheme:dark; }

.acct-main .cta { width:100%; justify-content:center; }
.cta[disabled] { opacity:.6; cursor:progress; }
.plate { display:flex; align-items:center; justify-content:center; width:100%; min-height:48px; margin-top:.6em; padding:.6em 1em; color:var(--parchment); border:1px solid rgba(232,194,122,.5); border-radius:2px; text-decoration:none; transition:border-color .2s; }
.plate:hover { border-color:var(--honey); }
.plate.warn { color:#f7b59c; border-color:rgba(247,181,156,.6); margin-top:0; }
.plate.warn:hover { border-color:#f7b59c; }

.status { min-height:1.5em; margin:.1em 0 .5em; color:#f7b59c; font-size:.92em; line-height:1.35; }
.status.good { color:var(--honey); }
.acct-main p.status { margin-bottom:.5em; }

.links { display:flex; flex-wrap:wrap; justify-content:space-between; gap:0 1.2em; margin-top:.5em; }
.links a, .links button { display:inline-flex; align-items:center; min-height:44px; padding:0; color:var(--parchment); font:inherit; font-size:.92em; text-decoration:underline; text-underline-offset:.3em; text-decoration-thickness:1px; }

/* My Account: one line per thing, with its action on the right */
.fact { padding:.45em 0; border-top:1px solid rgba(232,194,122,.26); }
.acct-main .fact p { margin-bottom:0; color:var(--stone); font-size:.92em; line-height:1.4; }
.acct-main .fact .value { color:var(--parchment); overflow-wrap:anywhere; font-size:1em; }
.row { display:flex; align-items:center; justify-content:space-between; gap:1em; }
.row h2 { margin:0; }
.row-action { flex:none; display:inline-flex; align-items:center; min-height:44px; padding:0; font-size:.92em; color:var(--parchment); text-decoration:underline; text-underline-offset:.3em; text-decoration-thickness:1px; }
.row-action[aria-expanded="true"] { color:var(--honey); }
.panel { padding:.2em 0 .9em; }
.acct-main .panel p:not(.status) { font-size:.92em; line-height:1.4; color:var(--stone); }
#signOut { margin-top:.5em; }
body:not([data-view="google"]) .only-google { display:none; }
body[data-view="google"] .only-email { display:none; }

/* Download */
.file-line { margin-top:.5em; color:var(--stone); font-size:.88em; }
.acct-main .file-line { margin-bottom:.2em; }
.steps { padding-left:1.4em; margin:.4em 0 .9em; }
.steps li { padding:.25em 0; line-height:1.4; }
.steps b { font-weight:600; }
.steps span { color:var(--stone); }
#accountStatus:empty { display:none; }
[data-step="form"] > #signOut { margin-bottom:1em; }
.acct-main .aside { color:var(--stone); font-size:.88em; line-height:1.4; margin-bottom:.45em; }
.acct-main .fact p a, .acct-main .aside a, .acct-main section > p a { padding:.7em 0; color:var(--parchment); text-decoration:underline; text-underline-offset:.2em; }

/* Narrow screens: the fields start under the top bar */
@media (max-width:760px) {
  .acct-main { width:auto; margin:0 var(--edge); justify-content:flex-start; }
}
/* Laptop heights: the longest form still fits */
@media (max-height:800px) and (min-width:761px) {
  .field { margin-bottom:.4em; }
  .mock-box { margin-bottom:.4em; }
  .acct-main h1 { margin-bottom:.2em; }
  .acct-main p { margin-bottom:.5em; }
  .status { margin:0; min-height:1.2em; }
}
/* A button with a mark beside its word: Google's G, unchanged and with its clear space. */
.acct-main .with-icon { display:flex; align-items:center; justify-content:center; gap:.65em; }
.acct-main .with-icon img { flex:none; width:20px; height:20px; }