/* ============================================================
   KOMORE — Account card (login / register / forgot password)
   A quiet, paper-toned auth card that pops over any page when the
   header account icon is pressed. Markup is injected by auth-modal.js.
   Mirrors the .km-modal language used by the purchase modal.
   ============================================================ */

.au-modal{ position:fixed; inset:0; z-index:210; display:none; }
.au-modal.is-open{ display:block; }
.au-scrim{ position:absolute; inset:0; background:rgba(15,19,15,.55);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); animation:auFade .35s ease; }
@keyframes auFade{ from{ opacity:0; } to{ opacity:1; } }

.au-card{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(432px, calc(100vw - 2.2rem)); max-height:calc(100vh - 2rem); overflow:auto;
  background:var(--washi); border:1px solid var(--line);
  box-shadow:0 40px 100px -28px rgba(15,19,15,.62);
  animation:auRise .5s cubic-bezier(.2,.7,.2,1); }
@keyframes auRise{
  from{ opacity:0; transform:translate(-50%,-46%) scale(.975); }
  to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }
@media (prefers-reduced-motion:reduce){
  .au-scrim, .au-card{ animation:none; } }

.au-x{ position:absolute; top:.6rem; right:.85rem; z-index:3; width:2rem; height:2rem;
  border:0; background:none; font-size:1.5rem; line-height:1; color:var(--ink-mute);
  cursor:pointer; transition:color .3s; }
.au-x:hover{ color:var(--sumi); }

.au-inner{ padding:clamp(2.1rem,4.5vw,2.7rem) clamp(1.7rem,4.5vw,2.4rem) clamp(1.8rem,4vw,2.3rem); }

/* —— header —— */
.au-head{ text-align:center; margin-bottom:1.7rem; }
.au-mark{ height:42px; width:auto; margin:0 auto .95rem; opacity:.92; }
.au-eyebrow{ display:block; font-family:var(--sans); font-weight:400; font-size:.62rem;
  letter-spacing:.34em; text-transform:uppercase; color:var(--brass); margin-bottom:.7rem; }
.au-title{ font-family:var(--serif); font-weight:500; font-size:clamp(1.4rem,3vw,1.72rem);
  letter-spacing:.04em; color:var(--sumi); line-height:1.25; }
.au-sub{ font-family:var(--sans); font-weight:300; font-size:.86rem; line-height:1.7;
  color:var(--ink-mute); margin:.6rem auto 0; max-width:30ch; letter-spacing:.02em; }

/* —— views —— */
.au-view{ display:none; }
.au-view.is-active{ display:block; animation:auSwap .4s cubic-bezier(.2,.7,.2,1); }
@keyframes auSwap{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .au-view.is-active{ animation:none; } }

/* —— fields —— */
.au-field{ display:block; margin-top:1.25rem; }
.au-field:first-of-type{ margin-top:0; }
.au-lab{ display:block; font-family:var(--sans); font-size:.62rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:.5rem; }
.au-inputwrap{ position:relative; }
.au-field input{ width:100%; border:0; border-bottom:1px solid var(--line); background:none;
  padding:.62em 0; padding-right:3.4em; font-family:var(--sans); font-weight:300; font-size:1rem;
  color:var(--ink); letter-spacing:.02em; transition:border-color .35s ease; }
.au-field input:focus{ outline:none; border-bottom-color:var(--tea); }
.au-field input::placeholder{ color:var(--ink-mute); opacity:.45; }
.au-field input:-webkit-autofill{ -webkit-text-fill-color:var(--ink); transition:background-color 9999s; }

.au-peek{ position:absolute; right:0; top:50%; transform:translateY(-50%); border:0; background:none;
  cursor:pointer; font-family:var(--sans); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute); transition:color .3s; padding:.4em 0 .4em .6em; }
.au-peek:hover{ color:var(--tea); }

/* inline validation hint */
.au-hint{ display:block; min-height:1em; margin-top:.5rem; font-family:var(--sans);
  font-size:.72rem; letter-spacing:.04em; color:#a4533f; line-height:1.5;
  opacity:0; transition:opacity .25s ease; }
.au-hint.show{ opacity:1; }

/* —— forgot / utility row —— */
.au-utilrow{ display:flex; justify-content:flex-end; margin-top:.7rem; }
.au-textlink{ font-family:var(--sans); font-size:.76rem; letter-spacing:.06em; color:var(--ink-mute);
  background:none; border:0; cursor:pointer; padding:0 0 2px; position:relative; transition:color .3s; }
.au-textlink::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.au-textlink:hover{ color:var(--tea); }
.au-textlink:hover::after{ transform:scaleX(1); }

/* —— remember row —— */
.au-check{ display:flex; align-items:flex-start; gap:.65em; margin-top:1.3rem;
  font-family:var(--sans); font-size:.8rem; line-height:1.6; color:var(--ink-mute); letter-spacing:.02em;
  cursor:pointer; }
.au-check input{ appearance:none; -webkit-appearance:none; flex:0 0 auto; width:1.05rem; height:1.05rem;
  margin:.18em 0 0; border:1px solid var(--line); background:var(--cream); cursor:pointer;
  position:relative; transition:.25s; }
.au-check input:checked{ background:var(--tea); border-color:var(--tea); }
.au-check input:checked::after{ content:""; position:absolute; left:50%; top:46%; width:.28rem; height:.55rem;
  border:solid var(--cream); border-width:0 1.5px 1.5px 0; transform:translate(-50%,-58%) rotate(45deg); }
.au-check a{ color:var(--tea); border-bottom:1px solid currentColor; padding-bottom:1px; }

/* —— submit —— */
.au-submit{ width:100%; margin-top:1.6rem; padding:1.05em; font-size:.8rem; }

/* —— divider —— */
.au-divider{ display:flex; align-items:center; gap:1rem; margin:1.5rem 0;
  font-family:var(--sans); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); }
.au-divider::before, .au-divider::after{ content:""; flex:1; height:1px; background:var(--line); }

/* —— alt / footer line —— */
.au-alt{ text-align:center; font-family:var(--sans); font-size:.84rem; color:var(--ink-mute); letter-spacing:.02em; }
.au-alt button{ font-family:var(--sans); font-size:.84rem; letter-spacing:.04em; color:var(--sumi);
  background:none; border:0; cursor:pointer; padding-bottom:2px; position:relative; margin-left:.35em; transition:color .3s; }
.au-alt button::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--brass); transform:scaleX(1); transform-origin:left; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.au-alt button:hover{ color:var(--tea); }
.au-alt button:hover::after{ background:var(--tea); }

.au-fine{ font-family:var(--sans); font-size:.68rem; line-height:1.7; color:var(--ink-mute);
  letter-spacing:.02em; margin:1.5rem 0 0; text-align:center; }
.au-fine a{ color:var(--ink); border-bottom:1px solid var(--line); padding-bottom:1px; }
.au-fine a:hover{ color:var(--tea); border-color:var(--tea); }

/* —— back link (forgot view) —— */
.au-back{ display:inline-flex; align-items:center; gap:.5em; margin-top:1.5rem;
  font-family:var(--sans); font-size:.76rem; letter-spacing:.06em; color:var(--ink-mute);
  background:none; border:0; cursor:pointer; transition:color .3s; }
.au-back:hover{ color:var(--tea); }
.au-back .arr{ transition:transform .35s; }
.au-back:hover .arr{ transform:translateX(-3px); }

/* —— forgot sent confirmation —— */
.au-sent{ display:none; align-items:flex-start; gap:.7em; margin-top:1.3rem; padding:.95rem 1.1rem;
  background:var(--washi-2); border:1px solid var(--line); font-family:var(--sans);
  font-size:.82rem; line-height:1.65; color:var(--ink); letter-spacing:.02em; }
.au-sent.show{ display:flex; }
.au-sent .ck{ flex:0 0 auto; color:var(--tea); font-size:.95rem; line-height:1.5; }

/* —— logged-in account view —— */
.au-acct-greet{ text-align:center; }
.au-acct-name{ font-family:var(--serif); font-weight:500; font-size:1.45rem; letter-spacing:.03em; color:var(--sumi); }
.au-acct-mail{ display:block; font-family:var(--sans); font-size:.82rem; letter-spacing:.04em; color:var(--ink-mute); margin-top:.4rem; }
.au-acct-list{ list-style:none; margin:1.7rem 0 0; padding:0; border-top:1px solid var(--line); }
.au-acct-list li{ border-bottom:1px solid var(--line); }
.au-acct-list a{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.05rem .2rem; font-family:var(--sans); font-size:.92rem; letter-spacing:.04em; color:var(--ink); transition:color .3s; }
.au-acct-list a .arr{ color:var(--ink-mute); transition:transform .35s, color .3s; }
.au-acct-list a:hover{ color:var(--tea); }
.au-acct-list a:hover .arr{ color:var(--tea); transform:translateX(4px); }
.au-logout{ width:100%; margin-top:1.7rem; }

/* —— logged-in icon state —— */
.nav-ic.is-authed{ color:var(--tea); opacity:1; }
.nav-ic .au-dot{ display:none; }
.nav-ic.is-authed .au-dot{ display:block; position:absolute; top:-1px; right:-1px;
  width:7px; height:7px; border-radius:50%; background:var(--brass); border:1.5px solid var(--washi); }
.nav-ic{ position:relative; }

@media(max-width:420px){
  .au-inner{ padding-inline:1.4rem; }
}