/* Website layer: login wall, comment dialog, account row, "not connected" notice.
   Uses the book's skin tokens (--paper, --sheet, --ink, --ink-2, --rule, --accent, --accent-soft, --c-deep, --ok, --bad),
   so calm, happy and night all work. */
html.auth-wait body > *:not(.au-wall){visibility:hidden}

.au-wall{position:fixed; inset:0; z-index:100; background:var(--paper); color:var(--ink); overflow-y:auto;
  display:flex; align-items:flex-start; justify-content:center; padding:max(4vh, 16px) 16px 2rem; font-family:var(--f-body); direction:rtl; text-align:start}
.au-wall[hidden], .au-dlg-wrap[hidden]{display:none}
.au-card{width:100%; max-width:27rem; background:var(--sheet); border:1px solid var(--rule); border-radius:var(--radius, 12px);
  box-shadow:0 18px 40px rgba(0,0,0,.12); padding:1.3rem 1.3rem 1.1rem; position:relative}
.au-brand{font-family:var(--f-display); font-weight:700; font-size:1.45rem; margin:0 0 .15rem; line-height:1.25}
.au-sub{margin:0 0 1rem; color:var(--ink-2); font-size:.95rem; line-height:1.55}
.au-tabs{display:flex; border:1px solid var(--rule); border-radius:999px; overflow:hidden; background:var(--paper); margin-bottom:1rem}
.au-tabs button{flex:1; font:inherit; font-size:.95rem; border:0; background:transparent; color:var(--ink-2); padding:.45rem .5rem; cursor:pointer}
.au-tabs button[aria-pressed="true"]{background:var(--accent); color:var(--sheet); font-weight:700}
.au-form{display:flex; flex-direction:column; gap:.75rem; margin:0}
.au-form h3{font-family:var(--f-display); font-size:1.1rem; margin:0}
.au-f{display:flex; flex-direction:column; gap:.25rem; font-size:.92rem; font-weight:600; color:var(--ink)}
.au-f small{font-weight:400; color:var(--ink-2)}
.au-f input, .au-f select, .au-f textarea{font:inherit; font-weight:400; font-size:1rem; color:var(--ink); background:var(--sheet);
  border:1.5px solid var(--rule); border-radius:10px; padding:.5rem .7rem; width:100%; min-width:0}
.au-f input[dir="ltr"]{text-align:left}
.au-f textarea{resize:vertical; min-height:7rem; line-height:1.55}
.au-f :is(input, select, textarea):focus{border-color:var(--accent); outline:2px solid color-mix(in srgb, var(--accent) 30%, transparent); outline-offset:0}
.au-row{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center}
.au-btn{font:inherit; font-weight:700; cursor:pointer; border:1.5px solid var(--accent); background:var(--accent); color:var(--sheet);
  border-radius:999px; padding:.45rem 1.2rem; min-height:2.5rem}
.au-btn.ghost{background:var(--sheet); color:var(--ink); border-color:var(--rule); font-weight:600}
.au-btn:disabled{opacity:.6; cursor:wait}
.au-link{font:inherit; font-size:.9rem; border:0; background:none; color:var(--accent); text-decoration:underline; cursor:pointer; padding:.2rem 0}
.au-msg{margin:0; font-size:.92rem; line-height:1.5}
.au-msg:empty{display:none}
.au-msg.err{color:var(--bad)}
.au-msg.ok{color:var(--ok)}
.au-privacy{margin:1rem 0 0; padding-top:.8rem; border-top:1px dashed var(--rule); font-size:.8rem; line-height:1.55; color:var(--ink-2)}
.au-privacy b{color:var(--ink)}
.au-x{position:absolute; top:.5rem; inset-inline-end:.6rem; border:0; background:none; color:var(--ink-2); font-size:1.4rem; line-height:1; cursor:pointer; padding:.2rem .4rem}

/* comment dialog */
.au-dlg-wrap{position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.38); display:flex; align-items:center; justify-content:center; padding:16px; direction:rtl}
.au-dlg{width:min(31rem, 100%); max-height:calc(100vh - 32px); overflow-y:auto; background:var(--sheet); color:var(--ink); border:1px solid var(--rule);
  border-radius:var(--radius, 12px); box-shadow:0 18px 40px rgba(0,0,0,.25); padding:1.1rem 1.2rem; position:relative; font-family:var(--f-body); text-align:start}
.au-dlg .au-h{font-family:var(--f-display); font-weight:700; font-size:1.2rem; margin:0 0 .3rem; padding-inline-end:2rem}
.au-where{margin:0 0 .6rem; font-size:.88rem; color:var(--ink-2)}
.au-quote{margin:0; padding:.45rem .8rem; border-inline-start:4px solid var(--c-deep); background:color-mix(in srgb, var(--c-deep) 10%, var(--sheet));
  border-radius:6px; font-size:.92rem; max-height:8.5rem; overflow-y:auto; white-space:pre-wrap}
.au-hint{margin:0; font-size:.85rem; color:var(--ink-2)}
.au-thanks{font-size:1.1rem; font-weight:700; color:var(--ok); margin:.4rem 0 .8rem}

/* account row inside the settings panel */
.au-acct .au-who{display:flex; flex-direction:column; line-height:1.35}
.au-acct .au-who small{color:var(--ink-2); direction:ltr; text-align:right; word-break:break-all}
.au-acct a{font-weight:600}

/* "not connected yet" notice */
.au-notice{position:fixed; inset-inline:12px; bottom:12px; z-index:80; max-width:40rem; margin-inline:auto; display:flex; gap:.6rem; align-items:flex-start;
  background:var(--sheet); color:var(--ink); border:1.5px dashed var(--c-deep); border-radius:12px; padding:.6rem .8rem; font-size:.88rem; line-height:1.5;
  box-shadow:0 8px 24px rgba(0,0,0,.15); direction:rtl}
.au-notice b{white-space:nowrap}
.au-notice button{margin-inline-start:auto; border:0; background:none; color:var(--ink-2); font-size:1.2rem; line-height:1; cursor:pointer; padding:0 .2rem}

@media (max-width:420px){
  .au-card{padding:1.1rem .95rem .9rem}
  .au-dlg{padding:1rem .9rem}
  .au-dlg-wrap{align-items:flex-end; padding:8px}
}
@media print{ .au-wall, .au-dlg-wrap, .au-notice{display:none !important} html.auth-wait body > *{visibility:visible} }