/* Page-specific styling for the account page (accounts.php). This file loads
   AFTER welcome.css and must not redefine welcome.css's global chrome (the
   sea header, brand, nav, .button, colors, fonts). It only adds the narrower
   content column, the secondary-page banner, and form/section styling. */
:root{--line:#e5d3ad;--line-2:#b9a184}

main{padding:8px 0 40px}
main a{color:var(--wood-3);text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:#a3672e80}
main a:hover{text-decoration-color:var(--wood-3)}
main h1,main h2,main h3{color:var(--wood-3)}
main section{background:#fff;border:2px solid var(--line);border-radius:22px;padding:28px;margin:22px 0;box-shadow:0 4px 0 #d9c69a}
main section>h2{font-size:30px;margin-bottom:10px}
main section>p{margin:10px 0;color:var(--ink-2)}
main h3{font-size:23px;margin:4px 0 4px}
article{border-top:2px dashed var(--line);padding:20px 0 6px;margin-top:18px}
article p{margin:6px 0 10px;color:var(--ink-2);font-size:15px}
.small{font-size:15px;color:var(--ink-2)}
label{display:block;font-weight:900;margin-top:14px;color:var(--wood-3)}
main input,main button,main textarea{font:inherit;border-radius:14px;min-height:56px;max-width:100%}
main input,main textarea{width:100%;margin:8px 0 4px;padding:11px 16px;border:2px solid var(--line-2);background:#fffdf8;color:var(--ink);font-size:17px}
main input:focus,main textarea:focus{border-color:var(--wood-3)}
main textarea{min-height:160px;resize:vertical;font-family:inherit;line-height:1.5}
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
main button{width:100%;margin-top:16px;padding:12px 20px;border:2px solid var(--wood-3);border-radius:14px;background:linear-gradient(180deg,var(--gold-2),var(--gold));color:var(--wood-3);font-family:var(--display);font-size:19px;letter-spacing:.02em;cursor:pointer;box-shadow:0 4px 0 var(--wood-3);transition:transform .12s,box-shadow .12s;text-shadow:0 1px 0 #fff6}
main button:hover{transform:translateY(-1px);box-shadow:0 5px 0 var(--wood-3)}
main button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--wood-3)}
main button.quiet{background:var(--paper-2);border-color:var(--line-2);box-shadow:0 4px 0 var(--line-2);color:var(--ink);text-shadow:none}
main button.quiet:hover{box-shadow:0 5px 0 var(--line-2)}
main button.quiet:active{box-shadow:0 1px 0 var(--line-2)}
form{margin:8px 0 4px}
form+form{margin-top:6px}
.notice,.error{margin:22px 0 0;padding:18px 20px;border-radius:16px;border:2px solid;font-weight:700}
.notice{background:#e6f0d2;border-color:#7ea254;color:#2f4a16}
.error{background:#fde0d6;border-color:var(--flag);color:#6a1d14}
.code{display:inline-block;font-family:var(--display);font-size:42px;letter-spacing:.22em;line-height:1;padding:16px 18px 14px 26px;border-radius:14px;background:var(--wood-3);color:var(--gold);box-shadow:inset 0 2px 0 #8a5427,0 4px 0 #3e2410}
main details{margin-top:14px;border-top:2px dashed var(--line);padding-top:6px}
main summary{cursor:pointer;font-weight:900;min-height:48px;display:flex;align-items:center;color:var(--wood-3);list-style:none}
main summary::-webkit-details-marker{display:none}
main summary:before{content:'+';display:grid;place-items:center;width:26px;height:26px;margin-right:10px;border-radius:50%;background:var(--gold);border:2px solid var(--wood-3);font-family:var(--display);font-size:19px;line-height:1;flex-shrink:0}
main details[open] summary:before{content:'-'}
main>p{margin:14px 6px;color:var(--ink-2)}
main button:focus-visible,main input:focus-visible{outline:3px solid var(--gold);outline-offset:4px}

@media(max-width:560px){main section{padding:20px;border-radius:18px;margin:16px 0}main section>h2{font-size:26px}.code{font-size:34px;padding-left:20px}main button{font-size:18px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}