/* login-sea.v1.css (lg-r3) — "Sea photo" sign-in gate (owner-approved design,
   2026-10-21). Concept A layout on a real sea photograph.
   Backgrounds are owner-changeable from GM > Backgrounds: four slots
   (login light/dark, splash light/dark), each a PHOTO or a solid COLOUR.
   The resolved values arrive as the CSS variables below, set by the inline
   boot script (localStorage cache) and js/backgrounds.v1.js
   (background_settings row). The :root values here are the defaults:
   login = the bundled sea photos; splash = #f7f9fb / #0B121E colours.
   Loaded AFTER styles.v2-4-0-r40.css. The app's "Final Lock-in" theme rules
   pin the gate's colours with !important under :root[data-theme=...]
   selectors, so the overrides below mirror those selector shapes exactly.
   Scoped to #sc-auth-gate ONLY — profile and approval gates are untouched. */

:root{
  --sc-login-img-light:linear-gradient(rgba(226,242,252,.34),rgba(226,242,252,.46)),url("../img/login-sea-light.jpg");
  --sc-login-color-light:#9ccfee;
  --sc-login-img-dark:linear-gradient(rgba(3,13,24,.58),rgba(3,13,24,.66)),url("../img/login-sea-dark.jpg");
  --sc-login-color-dark:#04101d;
  --sc-splash-img-light:none;
  --sc-splash-color-light:#f7f9fb;
  --sc-splash-img-dark:none;
  --sc-splash-color-dark:#0B121E;
}

/* ---- Gate backdrop ---- */
:root[data-theme="dark"] #sc-auth-gate{
  background-color:var(--sc-login-color-dark) !important;
  background-image:var(--sc-login-img-dark) !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  color:#eaf6fd !important;
}
:root:not([data-theme="dark"]) #sc-auth-gate{
  background-color:var(--sc-login-color-light) !important;
  background-image:var(--sc-login-img-light) !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  color:#0b2a44 !important;
}
/* iOS standalone paints the same gate through :has() rules — mirror them. */
html.sc-ios-standalone[data-theme="dark"]:has(#sc-auth-gate:not([hidden])) #sc-auth-gate{
  background-color:var(--sc-login-color-dark) !important;
  background-image:var(--sc-login-img-dark) !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  color:#eaf6fd !important;
}
html.sc-ios-standalone:not([data-theme="dark"]):has(#sc-auth-gate:not([hidden])) #sc-auth-gate{
  background-color:var(--sc-login-color-light) !important;
  background-image:var(--sc-login-img-light) !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  color:#0b2a44 !important;
}
/* Status-bar edge strip follows the surface colour, not the old gradient. */
@supports (-webkit-touch-callout:none){
  html.sc-ios-standalone[data-theme="dark"]:has(#sc-auth-gate:not([hidden])){--sc-auth-edge-background:#04101d;}
  html.sc-ios-standalone:not([data-theme="dark"]):has(#sc-auth-gate:not([hidden])){--sc-auth-edge-background:#9ccfee;}
}

/* A little more room for the one-line intro. */
#sc-auth-gate{padding-left:8px;padding-right:8px;}

/* ---- Card: gone. The form sits directly on the photo (Concept A). ---- */
:root[data-theme="dark"] #sc-auth-gate .sc-auth-card,
:root:not([data-theme="dark"]) #sc-auth-gate .sc-auth-card{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
#sc-auth-gate .sc-auth-card{
  width:min(100%,430px);
  padding:26px 16px 28px;
}
/* The legal overlay keeps a solid card so long text stays readable. */
#sc-auth-gate #sc-legal-overlay .sc-auth-card{background:rgba(7,22,38,.97) !important;}
:root:not([data-theme="dark"]) #sc-auth-gate #sc-legal-overlay .sc-auth-card{background:rgba(255,255,255,.98) !important;}

/* ---- Brand: the app's own lockup — icon, title beside it, slogan under
        the title in the same column, on ONE line (owner's order). Only the
        colours change here so they read on the photo; the app's responsive
        one-line slogan sizing stays as it is. ---- */
:root[data-theme="dark"] #sc-auth-gate .sc-auth-brand p{color:#ffffff !important;}
:root:not([data-theme="dark"]) #sc-auth-gate .sc-auth-brand p{color:#0b2a44 !important;}
:root[data-theme="dark"] #sc-auth-gate .sc-auth-brand small{color:rgba(255,255,255,.88) !important;}
:root:not([data-theme="dark"]) #sc-auth-gate .sc-auth-brand small{color:rgba(11,42,68,.85) !important;}

/* Lockup proportions like the splash (owner's order, 2026-10-21): the
   splash is 110 icon / 27 title / 15.5 slogan. The login keeps its smaller
   scale — 60 / 17.5 / ~11 — so the slogan becomes readable while staying on
   one line under the title, beside the icon. */
#sc-auth-gate .sc-auth-brandmark{width:60px !important;height:60px !important;border-radius:18px !important;}
#sc-auth-gate .sc-auth-brand{gap:8px !important;}
#sc-auth-gate .sc-auth-card{padding-left:8px !important;padding-right:8px !important;}
:root[data-theme="dark"] #sc-auth-gate .sc-auth-brand p,
:root:not([data-theme="dark"]) #sc-auth-gate .sc-auth-brand p{font-size:17.5px !important;}
:root[data-theme="dark"] #sc-auth-gate .sc-auth-brand small,
:root:not([data-theme="dark"]) #sc-auth-gate .sc-auth-brand small{font-size:clamp(9.5px,2.75vw,11px) !important;letter-spacing:-.08em !important;}

/* ---- Heading + intro: the SIGN-IN intro fits one line at this size;
        the SIGN-UP intro is a long sentence and MUST wrap (owner,
        2026-10-22: with nowrap it ran off-screen and the whole gate
        could be dragged sideways). ---- */
#sc-auth-gate .sc-auth-card h2{font-size:41px;line-height:1.08;}
:root[data-theme="dark"] #sc-auth-gate .sc-auth-card h2{color:#ffffff !important;}
:root:not([data-theme="dark"]) #sc-auth-gate .sc-auth-card h2{color:#0b2a44 !important;}
#sc-auth-gate .sc-auth-intro{
  margin:10px 0 24px;
  font-size:11.5px;
  letter-spacing:-.01em;
  white-space:normal;
  text-align:justify;
}
:root[data-theme="dark"] #sc-auth-gate .sc-auth-intro{color:rgba(255,255,255,.92) !important;}
:root:not([data-theme="dark"]) #sc-auth-gate .sc-auth-intro{color:rgba(11,42,68,.88) !important;}

/* ---- Fields: filled translucent boxes (Concept A), a little tighter.
        Labels stay above the box. ---- */
#sc-auth-gate .sc-auth-field{margin:10px 0;}
:root[data-theme="dark"] #sc-auth-gate .sc-auth-field{color:#eaf6fd !important;}
:root:not([data-theme="dark"]) #sc-auth-gate .sc-auth-field{color:#0d2f47 !important;}
#sc-auth-gate .sc-auth-field input,
#sc-auth-gate .sc-auth-field select{
  margin-top:6px;
  padding:12px 14px;
  border-radius:16px;
}
:root[data-theme="dark"] #sc-auth-gate .sc-auth-field input,
:root[data-theme="dark"] #sc-auth-gate .sc-auth-field select{
  background:rgba(6,24,40,.55) !important;
  border-color:rgba(255,255,255,.28) !important;
  color:#ffffff !important;
}
:root:not([data-theme="dark"]) #sc-auth-gate .sc-auth-field input,
:root:not([data-theme="dark"]) #sc-auth-gate .sc-auth-field select{
  background:rgba(255,255,255,.88) !important;
  border-color:rgba(13,47,71,.22) !important;
  color:#0d2f47 !important;
}
#sc-auth-gate .sc-auth-field input:focus,
#sc-auth-gate .sc-auth-field select:focus{
  border-color:#2AABEE !important;
  box-shadow:0 0 0 3px rgba(42,171,238,.25);
}
:root[data-theme="dark"] #sc-auth-gate .sc-auth-toggle-visibility{color:rgba(255,255,255,.75);}
:root:not([data-theme="dark"]) #sc-auth-gate .sc-auth-toggle-visibility{color:rgba(13,47,71,.6);}
:root[data-theme="dark"] #sc-auth-gate .sc-auth-password-hint{color:rgba(255,255,255,.78);}
:root:not([data-theme="dark"]) #sc-auth-gate .sc-auth-password-hint{color:rgba(13,47,71,.75);}
:root[data-theme="dark"] #sc-auth-gate .sc-auth-terms{color:rgba(255,255,255,.9);}
:root:not([data-theme="dark"]) #sc-auth-gate .sc-auth-terms{color:rgba(13,47,71,.92);}

/* ---- Buttons: full pills (Concept A). ---- */
#sc-auth-gate .sc-auth-submit,
#sc-auth-gate .sc-auth-google{
  border-radius:999px;
  min-height:50px;
}
:root[data-theme="dark"] #sc-auth-gate .sc-auth-google{
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.38) !important;
  color:#ffffff !important;
}
:root:not([data-theme="dark"]) #sc-auth-gate .sc-auth-google{
  background:rgba(255,255,255,.9) !important;
  border-color:rgba(13,47,71,.22) !important;
  color:#0d2f47 !important;
}

/* ---- Divider + switch link on the photo ---- */
:root[data-theme="dark"] #sc-auth-gate .sc-auth-divider{color:rgba(255,255,255,.75) !important;}
:root:not([data-theme="dark"]) #sc-auth-gate .sc-auth-divider{color:rgba(13,47,71,.65) !important;}
:root:not([data-theme="dark"]) #sc-auth-gate .sc-auth-switch{color:#0d5a8a !important;}

/* Small phones: shrink the one-line intro a touch instead of wrapping. */
@media (max-width:374px){
  #sc-auth-gate .sc-auth-intro{font-size:10.5px;}
  #sc-auth-gate .sc-auth-card h2{font-size:36px;}
}

/* ---- GM > Backgrounds panel: list -> editor with live preview ---- */
.sc-admin-backgrounds{padding:16px 4px 24px;}
.sc-bg-note{margin:0 0 10px;color:#8ba6b8;font-size:12.5px;}
.sc-bg-row-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 10px;border:0;border-top:1px solid rgba(140,221,248,.14);background:transparent;color:inherit;text-align:left;cursor:pointer;font:inherit;}
.sc-bg-row-thumb{flex:0 0 auto;width:44px;height:44px;border-radius:10px;background-size:cover;background-position:center;border:1px solid rgba(140,221,248,.25);}
.sc-bg-row-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.sc-bg-row-text strong{font-size:14px;}
.sc-bg-row-text small{color:#8ba6b8;font-size:12px;}
.sc-bg-row-arrow{font-size:22px;color:#8ba6b8;}
.sc-bg-reset{margin-top:16px;padding:8px 12px;border-radius:10px;border:1px solid rgba(140,221,248,.3);background:transparent;color:#e88;font:600 12.5px 'Inter',sans-serif;cursor:pointer;}
.sc-bg-status{margin:12px 0 0;font-size:12.5px;color:#8CDDF8;min-height:1.2em;}
.sc-bg-editor-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.sc-bg-back{padding:7px 12px;border-radius:999px;border:1px solid rgba(140,221,248,.3);background:transparent;color:inherit;font:600 12.5px 'Inter',sans-serif;cursor:pointer;}
.sc-bg-actions{display:flex;gap:10px;margin-top:4px;}
.sc-bg-preview-btn{flex:0 0 auto;padding:0 22px;min-height:50px;border-radius:999px;border:1px solid rgba(140,221,248,.4);background:transparent;color:inherit;font:700 14px 'Inter',sans-serif;cursor:pointer;}
.sc-bg-actions .sc-bg-use{flex:1;}
#sc-bg-preview-bar{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);left:12px;right:12px;z-index:2147483647;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:rgba(5,15,25,.92);box-shadow:0 10px 30px rgba(0,0,0,.45);backdrop-filter:blur(8px);}
#sc-bg-preview-bar .sc-bg-pv-label{flex:1;min-width:0;color:#cfe8f7;font:600 11.5px 'Inter',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:6px;}
#sc-bg-preview-bar button{flex:0 0 auto;padding:8px 14px;border-radius:999px;border:1px solid rgba(140,221,248,.4);background:transparent;color:#fff;font:600 12.5px 'Inter',sans-serif;cursor:pointer;}
#sc-bg-preview-bar #sc-bg-pv-use{background:#2AABEE;border-color:#2AABEE;color:#06233a;font-weight:700;}
.sc-bg-modes{display:flex;gap:8px;margin:0 0 12px;}
.sc-bg-modes button{flex:1;padding:9px 14px;border-radius:999px;border:1px solid rgba(140,221,248,.3);background:transparent;color:inherit;font:600 13px 'Inter',sans-serif;cursor:pointer;}
.sc-bg-modes button.is-active{background:#2AABEE;border-color:#2AABEE;color:#06233a;}
.sc-bg-pane{margin-bottom:12px;}
.sc-bg-pane[hidden]{display:none;}
.sc-bg-upload{display:inline-block;padding:10px 16px;border-radius:10px;background:#2AABEE;color:#06233a;font:700 13px 'Inter',sans-serif;cursor:pointer;}
.sc-bg-colorline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.sc-bg-colorline input[type="color"]{width:48px;height:38px;padding:2px;border:1px solid rgba(140,221,248,.3);border-radius:8px;background:transparent;cursor:pointer;}
.sc-bg-colorline button{padding:8px 12px;border-radius:10px;border:1px solid rgba(140,221,248,.3);background:transparent;color:inherit;font:600 12.5px 'Inter',sans-serif;cursor:pointer;}
.sc-bg-use{width:100%;min-height:50px;border:0;border-radius:999px;background:#2AABEE;color:#06233a;font:700 14px 'Inter',sans-serif;cursor:pointer;}

/* ---- The gate itself can never pan sideways (owner, 2026-10-22). ---- */
#sc-auth-gate{overflow-x:clip;}