/* Hallmark · v2.0.0 · theme: Porch & Paige brand · genre: editorial · shape: app screen · redesign: full · signature: project brief */
/* Critique: The long stack gave every field the same emphasis. The brief pairs one strong title with a compact, readable writing surface. */
:root {
  --account-ink:var(--ink);
  --account-paper:var(--paper);
  --account-linen:var(--yellow);
  --account-muted:var(--muted);
  --account-rule:var(--line);
  --account-dark-rule:color-mix(in srgb,var(--account-linen) 26%,var(--account-ink));
}

.account-header { display:flex; align-items:center; flex-wrap:wrap; gap:1rem; padding-block:1.2rem; }
.account-header .wordmark { margin-inline-end:auto; }
.account-header nav { display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }
.account-main { max-inline-size:46rem; padding-block:2rem 3rem; }
.account-main h1 { font-size:clamp(2rem,6vw,4rem); line-height:1.14; overflow-wrap:anywhere; text-wrap:balance; }
.account-main h2 { font-size:1.45rem; margin-block:1.4rem .5rem; }
.account-main p { margin-block:.65rem; }
.account-main form { margin-block:1.1rem; }
.account-main fieldset { padding:0; margin:0; border:0; min-inline-size:0; }
.account-main label { display:block; margin-block:.75rem; font-weight:650; }
.account-main input:not([type=checkbox]), .account-main select, .account-main textarea {
  display:block; inline-size:100%; min-inline-size:0; padding:.7rem .8rem; margin-block-start:.3rem;
  border:1px solid var(--account-muted); border-radius:.4rem; font:inherit; color:var(--account-ink); background:var(--account-paper);
}
.account-main textarea { resize:vertical; }
.account-main details { padding:.65rem; border:1px solid var(--account-rule); border-radius:.4rem; }
.account-main summary { cursor:pointer; }
.account-main .account-accept { display:flex; align-items:center; gap:.65rem; }
.account-main .button { max-inline-size:100%; white-space:normal; margin-block-start:.4rem; }
.account-main .button:disabled { opacity:.55; cursor:not-allowed; }
.account-main [data-feedback]:empty { display:none; }
.account-main [data-feedback] { padding:.7rem; background:var(--account-linen); }
.account-quiet { font:inherit; color:inherit; background:transparent; border:0; padding:.55rem .3rem; cursor:pointer; text-decoration:underline; }
.account-list { list-style:none; padding:0; display:grid; gap:.65rem; }
.account-list li,.account-record { border:1px solid var(--account-rule); padding:1rem; border-radius:.4rem; overflow-wrap:anywhere; }
.account-list li span,.account-list time { display:block; }
.account-list time { font-size:.9rem; }
.account-status { background:var(--account-linen); padding:.7rem; }
.account-text { white-space:pre-wrap; overflow-wrap:anywhere; }
.account-footer { border-block-start:1px solid var(--account-rule); padding-block:1.25rem; display:flex; gap:1rem; flex-wrap:wrap; }
.account-footer a { overflow-wrap:anywhere; }
.account-main :focus-visible,.account-header :focus-visible,.account-footer :focus-visible { outline:2px solid var(--account-ink); outline-offset:3px; }
.account-main a,.account-footer a,.account-header nav a { text-decoration:underline; text-underline-offset:.17em; }

.account-header nav>a:not(.nav-cta) { display:inline; }

html:has(body[data-view="start"]), body[data-view="start"] { overflow-x:clip; }
.account-header nav { gap:.25rem 1.25rem; font-size:.9rem; }
.account-header nav > a:not(.nav-cta), .account-languages > summary {
  display:inline-flex;
  align-items:center;
  min-block-size:44px;
  font-weight:600;
  text-decoration:none;
}
.account-header nav a[aria-current="page"] { text-decoration:underline; text-underline-offset:.28em; }
.account-languages { position:relative; border:0; }
.account-languages > summary { cursor:pointer; gap:.6rem; }
.account-languages > summary::after {
  content:""; inline-size:.45em; block-size:.45em;
  border-inline-end:1px solid; border-block-end:1px solid; transform:rotate(45deg);
}
.account-languages > ul {
  position:absolute; z-index:3; inset-inline-end:0; min-inline-size:9rem;
  margin:0; padding:.25rem .75rem; list-style:none;
  background:var(--account-paper); border:1px solid var(--account-rule);
}
.account-languages li a { display:flex; align-items:center; min-block-size:44px; white-space:nowrap; }

.account-main.account-brief {
  display:grid;
  grid-template-columns:minmax(0, .78fr) minmax(0, 1.22fr);
  align-items:stretch;
  max-inline-size:72rem;
  padding-block:1rem 3rem;
}
.brief-intro, .brief-sheet {
  min-inline-size:0;
  padding:clamp(1.35rem, 3.6vw, 3rem);
}
.brief-intro {
  background:var(--account-ink);
  color:var(--account-paper);
}
.account-main .brief-intro h1 {
  max-inline-size:12ch;
  margin-block:0 1.15rem;
  font-size:clamp(2.55rem, 4.5vw, 4.3rem);
  font-weight:650;
  line-height:1.04;
  letter-spacing:-.055em;
  overflow-wrap:break-word;
}
html[dir="rtl"] .account-main .brief-intro h1 { letter-spacing:normal; line-height:1.34; }
.brief-intro p { max-inline-size:30ch; }
.brief-intro :focus-visible { outline-color:var(--account-linen); }
.brief-intro .account-quiet { margin-block-start:1rem; min-block-size:44px; }
.brief-journey { margin:2rem 0 0; padding:0; list-style:none; font-size:.9rem; }
.brief-journey li { padding-block:.55rem; border-block-start:1px solid var(--account-dark-rule); }
.brief-sheet { background:var(--account-linen); }
.brief-sheet form { margin:0; }
.brief-sheet fieldset { display:grid; gap:1rem; }
.brief-sheet label, .brief-sheet .brief-password-label { margin:0; font-size:.9rem; line-height:1.35; }
.brief-sheet :is(input:not([type="checkbox"]), textarea, select) {
  min-block-size:3rem;
  margin-block-start:.4rem;
  border-radius:.25rem;
  font-size:1rem;
  font-weight:400;
  line-height:1.4;
}
.brief-sheet textarea { min-block-size:6.5rem; block-size:6.5rem; }
.brief-credentials { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:1rem; }
.brief-credentials .password-confirmation > label { display:grid; grid-template-rows:minmax(44px,auto) auto; align-items:center; }
.password-confirmation small { display:block; margin-block-start:.35rem; font-size:.85rem; }
.brief-password-label { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 .35rem; }
.brief-password-label .account-quiet { min-block-size:44px; padding:0; font-size:.8rem; }
.brief-sheet .brief-optional {
  padding:0;
  border:0;
  border-block:1px solid var(--account-muted);
  border-radius:0;
}
.brief-optional summary {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-block-size:44px; padding-block:.65rem; font-size:.9rem;
}
.brief-optional summary::after { content:"+"; font-size:1.2rem; line-height:1; }
.brief-optional[open] summary::after { content:"−"; }
.brief-optional:not([open]) > :not(summary) { display:none; }
.brief-sheet .brief-optional label { margin-block:.75rem; }
.brief-sheet .account-accept { align-items:flex-start; min-block-size:44px; font-weight:400; }
.brief-sheet .account-accept input {
  flex:none;
  inline-size:1.15rem; block-size:1.15rem;
  margin:.1rem 0 0; padding:0;
  accent-color:var(--account-ink);
}
.brief-sheet [data-challenges]:empty { display:none; }
.brief-sheet .button {
  justify-self:start;
  min-block-size:3rem;
  margin:0;
  padding:.7rem 1.25rem;
  font-size:.9rem;
  text-align:start;
  text-transform:none;
  letter-spacing:normal;
}
.brief-sheet :disabled { cursor:not-allowed; }
.brief-sheet :is(input,select,textarea):disabled {
  opacity:.55; cursor:not-allowed; color:var(--account-ink); background:var(--account-paper);
}
.brief-sheet button:active:not(:disabled) { transform:translateY(1px); }
@media (hover:hover) {
  .brief-sheet :is(input,select,textarea):hover:not(:disabled) { border-color:var(--account-ink); }
  .brief-sheet .button:hover:not(:disabled) { background:color-mix(in srgb,var(--account-ink) 88%,var(--account-paper)); }
}

@media (max-width:840px) {
  .account-main.account-brief { grid-template-columns:minmax(0,1fr); max-inline-size:43rem; }
  .account-main .brief-intro h1 { max-inline-size:16ch; }
  .brief-journey { display:flex; flex-wrap:wrap; column-gap:1rem; margin-block-start:1.25rem; border-block-start:1px solid var(--account-dark-rule); }
  .brief-journey li { padding-block:.4rem; border:0; }
}
@media (max-width:530px) {
  .account-header nav { gap:.25rem .9rem; flex-basis:100%; }
  .account-main.account-brief { padding-block-start:.25rem; }
  .account-main .brief-intro h1 { font-size:2.4rem; }
  .brief-credentials { grid-template-columns:minmax(0,1fr); }
  .brief-credentials .password-confirmation > label { grid-template-rows:auto auto; }
  .brief-sheet .button { justify-self:stretch; }
}