/* Language switch, audit fixes and responsive hardening. Loaded last. See ../DESIGN.md. */

/* Language switch (segmented control) */
.lang-switch { display: inline-flex; flex: none; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.lang-switch button { min-width: 44px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 7px; color: var(--ink-soft); background: transparent; font-size: 13px; font-weight: 700; line-height: 1; }
.lang-switch button[lang="en"] { font-family: var(--latin); }
.lang-switch button[aria-pressed="true"] { color: #fff; background: var(--rose-dark); }
.lang-switch button:not([aria-pressed="true"]):hover { color: var(--rose-dark); background: var(--tint); }
.lang-switch button:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.top-actions { gap: 10px; }
.login-topline { gap: 12px; flex-wrap: wrap; }
.login-topline .lang-switch { order: 3; }
.lang-short { display: none; }

/* Top bar: the page title yields space before the actions do (fixes overflow at 320-360px). */
.topbar { gap: 12px; }
.crumb { min-width: 0; flex: 1 1 auto; }
.crumb strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-actions { flex: none; }
@media (max-width: 480px) {
  .lang-switch.compact .lang-full { display: none; }
  .lang-switch.compact .lang-short { display: inline; }
  .lang-switch.compact button { min-width: 40px; padding: 0 8px; }
}
@media (max-width: 360px) {
  .top-actions > .icon-button { display: none; }
}

/* Breakpoint seam: member-app.css goes mobile at 740px, member-redesign.css at 700px.
   Between 701 and 740px the dashboard intro stayed a row while its button went full width. */
@media (min-width: 701px) and (max-width: 740px) {
  .discover-intro .button { width: auto; margin-top: 0; }
}

/* ---------- Login (task 05) ---------- */
.login-method{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 18px;padding:4px;border:1px solid #e5dade;border-radius:12px;background:#f7f1f3}
.login-method button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;border:0;border-radius:9px;background:transparent;color:#6f5b66;font-size:13.5px;font-weight:600}
.login-method button svg{width:16px;height:16px}
.login-method button[aria-checked="true"]{background:#fff;color:#8c294d;box-shadow:0 2px 8px rgba(62,34,48,.1)}
.login-field .label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
.login-field .label-row label{margin:0;font-size:13px;font-weight:500;color:#57454f}
.login-link{min-height:36px;padding:0;border:0;background:none;color:#924261;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#e3c3cf}
.login-link:hover{color:#6d1f3f;text-decoration-color:currentColor}
.login-link:disabled{color:#9a8b93;text-decoration:none;cursor:default}
.back-link{margin:0 0 18px;text-decoration:none}
.login-field .hint{display:block;margin-top:6px;font-size:12.5px;color:#7d6f77}
.login-field .field-error{display:block;margin-top:7px;color:#a43e43;font-size:13px;font-weight:600}
.login-input:has(input[aria-invalid="true"]){border-color:#c0555a;box-shadow:0 0 0 3px #c0555a14}
.caps-warning{display:block;margin-top:6px;color:#8a5716;font-size:12.5px;font-weight:600}
.login-otp{width:100%;min-height:58px;border:1px solid #ddd3d6;border-radius:10px;background:#fffdfb;text-align:center;font:600 24px/1 ui-monospace,Consolas,monospace;letter-spacing:.45em;color:#382530}
.login-otp:focus{outline:none;border-color:#ae5277;box-shadow:0 0 0 4px #ab42690d}
.login-otp[aria-invalid="true"]{border-color:#c0555a}
.code-actions{display:flex;justify-content:space-between;gap:12px;margin:-6px 0 18px}
.pw-rules{list-style:none;display:grid;gap:4px;margin:-8px 0 18px;padding:0;font-size:12.5px;color:#7d6f77}
.pw-rules li{display:flex;align-items:center;gap:7px}
.pw-rules li::before{content:'';width:8px;height:8px;border-radius:50%;border:1.5px solid #c8b8c0}
.pw-rules li.met{color:#1f6b4b}
.pw-rules li.met::before{background:#1f6b4b;border-color:#1f6b4b}
.login-done{display:grid;place-items:center;width:58px;height:58px;margin:0 0 16px;border-radius:50%;background:#e7f4ec;color:#1f6b4b}
.login-done svg{width:28px;height:28px}
.login-privacy{display:flex;align-items:flex-start;gap:6px}
.login-privacy svg{width:14px;height:14px;flex:none;margin-top:3px}
.login-form-wrap h2{outline:none}
/* busy label comes from JS in both languages */
.login-submit[aria-busy=true] .login-submit-label{font-size:inherit}
.login-submit[aria-busy=true] .login-submit-label::after{content:none}
.login-submit:disabled{opacity:.8}
@media (max-width:740px){
  .login-input input,.login-otp{font-size:16px} /* no iOS zoom on focus */
  /* phones: keep the form (and the Log in button) on the first screen */
  .login-story{height:150px}
  .login-story .story-copy{margin-top:10px}
  .login-story .story-copy h1,.login-story .story-copy p,.login-story .story-bottom{display:none}
  .butterfly-login{position:relative}
  /* the switch sits in the top-right of the decorative panel: story is 150px and the form overlaps it by 16px */
  .login-topline{position:absolute;top:-122px;right:14px;z-index:5;min-height:0;margin:0;padding:0!important}
  .login-topline>span{display:none}
  .login-form-wrap[data-view="login"] .login-eyebrow,.login-form-wrap[data-view="login"] .login-description{display:none}
  .login-form-wrap h2{margin-bottom:14px}
  .login-method{margin-bottom:14px}
}
@media (max-width:740px) and (max-height:600px){
  .login-story{height:92px}
  .login-topline{top:-64px}
  .login-story .story-copy,.login-story .story-art{display:none}
}
.login-form-wrap .login-otp{display:block;width:100%;max-width:none}