/* ================================================================
   Apostle — Light theme primitives (auth + legal pages)
   First slice of a shared component catalog: everything here is meant
   to be reused verbatim by future light-theme pages rather than
   re-declared per page. Colours beyond --lt-orange (confirmed from the
   map-icon-*.svg assets) are eyeballed from mock screenshots, not an
   exact palette file — flag if any need correcting.
   ================================================================ */

:root{
  --lt-bg:#ffffff;
  --lt-text:#0d0d0d;
  --lt-muted:#8a8a8a;
  --lt-label:#0f3d3a;      /* reuses the existing dark-theme --bg teal as an accent */
  --lt-field-bg:#e9e9e9;
  --lt-field-border:#cfcfcf;
  --lt-orange:#fb652a;
  --lt-error-bg:#fbe3e3;
  --lt-error-border:#e05a5a;
  --lt-error-text:#e05a5a;
  --lt-teal:#009593;
  --lt-row-highlight:#ececec;
}

body.lt-body{background:var(--lt-bg);padding-bottom:0;min-height:0;}
.lt-scope{background:var(--lt-bg);color:var(--lt-text);min-height:100vh;font-family:var(--font-ui),Inter,Arial,sans-serif;}
.lt-page{max-width:520px;margin:0 auto;padding:24px 24px calc(var(--footer-h, 0px) + 24px);box-sizing:border-box;}

/* ── Header: logo + optional back link ─────────────────────────── */
.lt-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:8px;}
.lt-logo{width:160px;height:auto;display:block;}
.lt-logo.small{width:120px;}
.lt-back{color:rgba(0,0,0,.75);font-size:15px;text-decoration:none;white-space:nowrap;padding-top:6px;}
.lt-back .arrow{color:var(--lt-orange);text-decoration:none;margin-right:4px;}
.lt-back .text{text-decoration:underline;}

.lt-title{font-family:var(--font-ui),Inter,Arial,sans-serif;font-size:32px;font-weight:800;margin:24px 0 20px;color:var(--lt-text);}

/* ── Fields ─────────────────────────────────────────────────────── */
.lt-field{margin-bottom:18px;}
.lt-field label{display:block;font-weight:700;color:var(--lt-label);font-size:15px;margin-bottom:8px;}
.lt-label-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
.lt-label-row label{margin-bottom:0;}
.lt-input-wrap{position:relative;}
.lt-input{width:100%;box-sizing:border-box;background:#fff;border:1px solid #ABABAB;border-radius:4px;padding:13px 14px;font-size:16px;color:var(--lt-text);outline:0;font-family:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* :placeholder-shown never matches <select> (it's always "not shown" for
   one), so scope this to actual text inputs — selects use .has-value instead. */
input.lt-input:not(:placeholder-shown){background:#EEEEEE;}
.lt-input::placeholder{color:#9a9a9a;}
.lt-input.has-error{background:var(--lt-error-bg);border-color:var(--lt-error-border);}
.lt-input:disabled,.lt-textarea:disabled{background:#F0F0F0;color:#999;cursor:not-allowed;}
.lt-error-text{color:var(--lt-error-text);font-size:14px;margin:8px 0 0;}

/* Textarea: same border/background-state rules as .lt-input, but multi-line
   and auto-resized to content height by JS (resize handle still allowed for
   manual override) rather than a fixed row count. */
.lt-textarea{width:100%;box-sizing:border-box;background:#fff;border:1px solid #ABABAB;border-radius:4px;padding:13px 14px;font-size:15px;color:var(--lt-text);font-family:inherit;resize:vertical;min-height:90px;overflow:hidden;}
.lt-textarea:not(:placeholder-shown){background:#EEEEEE;}
.lt-textarea::placeholder{color:#9a9a9a;}

/* Dropdown/select: same background-state rule as .lt-input, but :placeholder-shown
   doesn't apply to <select>, so callers toggle .has-value via JS instead. */
.lt-input.has-value{background:#EEEEEE;}

/* Generic labelled select field (e.g. select.html's Tools section) — same
   visual language as .lt-input, with a custom caret since native <select>
   arrows can't be styled consistently across browsers. */
.lt-select-field{margin-bottom:18px;}
.lt-select-field label{display:block;font-weight:700;font-size:15px;margin:0 0 8px;color:var(--lt-text);}
.lt-select-wrap{position:relative;}
.lt-select{width:100%;box-sizing:border-box;background:#fff;border:1px solid #ABABAB;border-radius:4px;padding:13px 36px 13px 14px;font-size:16px;color:var(--lt-text);font-family:inherit;appearance:none;-webkit-appearance:none;cursor:pointer;}
.lt-select:disabled{background:#F0F0F0;color:#9a9a9a;cursor:default;}
.lt-select-caret{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#8a8a8a;font-size:12px;}

.lt-eye-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:transparent;border:0;padding:4px;cursor:pointer;display:flex;}
.lt-eye-btn img{width:22px;height:22px;}
.lt-hint{font-size:13px;color:var(--lt-muted);margin:8px 0 0;line-height:1.4;}

/* [?] tooltip button: default = outlined; .is-open = solid orange, toggled by
   the field's own inline help panel (below), never a popup Modal. */
.lt-tooltip-btn{width:30px;height:30px;border:1.5px solid var(--lt-text);border-radius:7px;background:transparent;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;cursor:pointer;flex:none;color:var(--lt-text);transition:background .15s ease,border-color .15s ease,color .15s ease;}
.lt-tooltip-btn.is-open{background:var(--lt-orange);border-color:var(--lt-orange);color:#fff;}
.lt-tooltip-btn:hover:not(.is-open){background:var(--lt-orange);border-color:var(--lt-orange);color:#fff;}

/* Inline description panel opened by a field's [?] button. Sits between the
   field head row and the input; slides open/closed via max-height. */
.lt-help-panel{max-height:0;overflow:hidden;opacity:0;margin:0;transition:max-height .25s ease,opacity .2s ease,margin .25s ease;}
.lt-help-panel.is-open{max-height:400px;opacity:1;margin:0 0 10px;}
.lt-help-panel p{font-size:14px;line-height:1.55;color:var(--lt-text);margin:0;}

/* ── Buttons ────────────────────────────────────────────────────── */
.lt-btn{width:100%;box-sizing:border-box;border-radius:999px;padding:16px 20px;font-size:16px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;text-align:center;border:1.5px solid transparent;font-family:inherit;}
.lt-btn-primary{background:var(--lt-field-border);color:#8f8f8f;}
.lt-btn-primary.is-enabled{background:var(--lt-orange);color:#fff;transition:background .15s ease;}
.lt-btn-primary.is-enabled:hover{background:#009492;}
.lt-btn-primary:disabled{cursor:default;}
.lt-btn-outline{background:#fff;border-color:var(--lt-orange);color:var(--lt-orange);display:block;text-decoration:none;margin-top:14px;transition:background .15s ease,color .15s ease;}
.lt-btn-outline:hover{background:var(--lt-orange);color:#fff;text-decoration:none;}

.lt-link-row{text-align:center;margin-top:18px;}
.lt-link-row a{color:#404040;font-size:15px;text-decoration:underline;transition:color .15s ease;}
.lt-link-row a:hover{color:var(--lt-orange);}
.lt-link-row a.is-disabled{color:var(--lt-muted);pointer-events:none;text-decoration:none;}

/* ── Footer ─────────────────────────────────────────────────────── */
.lt-footer{margin-top:64px;text-align:center;color:var(--lt-muted);font-size:13px;line-height:1.7;}
.lt-footer a{color:var(--lt-muted);text-decoration:underline;transition:color .15s ease;}
.lt-footer a:hover{color:var(--lt-orange);}
.lt-footer .lt-footer-links{margin-top:2px;}
.lt-footer .lt-footer-links a{margin:0 8px;}

/* ── Legal page body copy ──────────────────────────────────────── */
.lt-legal h1{font-family:var(--font-ui),Inter,Arial,sans-serif;font-size:28px;font-weight:800;margin:18px 0 20px;line-height:1.2;color:var(--lt-text);}
.lt-legal h3{font-family:var(--font-ui),Inter,Arial,sans-serif;font-size:17px;font-weight:800;margin:22px 0 8px;color:var(--lt-text);}
.lt-legal p{font-size:15px;line-height:1.6;margin:0 0 14px;color:var(--lt-text);}
.lt-legal ul{margin:0 0 14px;padding-left:20px;}
.lt-legal li{font-size:15px;line-height:1.6;margin-bottom:4px;}
.lt-legal a{color:var(--lt-text);}

/* ── Select page: Games/Apostles row lists ─────────────────────── */
.lt-section-title{font-family:var(--font-ui),Inter,Arial,sans-serif;font-size:22px;font-weight:800;margin:28px 0 10px;padding-bottom:10px;border-bottom:2px solid var(--lt-text);color:var(--lt-text);}
.lt-row-list{display:flex;flex-direction:column;}
.lt-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 10px;border-radius:8px;}
.lt-row.is-selected{background:var(--lt-row-highlight);}
.lt-row-create{justify-content:flex-end;}
.lt-row-create .lt-row-name{flex:1;font-weight:700;font-size:16px;color:var(--lt-text);}
.lt-row-info{min-width:0;}
.lt-row-name{font-weight:700;font-size:16px;color:var(--lt-text);}
.lt-row-sub{font-size:14px;color:var(--lt-muted);margin-top:2px;}
.lt-row-sub a{color:var(--lt-orange);text-decoration:none;font-weight:600;}
.lt-row-actions{display:flex;gap:10px;flex:none;}
.lt-btn-manage{padding:10px 18px;border-radius:999px;border:1.5px solid var(--lt-orange);background:#fff;color:var(--lt-text);font-weight:600;font-size:15px;text-decoration:none;cursor:pointer;white-space:nowrap;font-family:inherit;transition:background .15s ease,color .15s ease;}
.lt-btn-manage:hover{background:var(--lt-orange);color:#fff;}
.lt-row.is-selected .lt-btn-manage{border-color:var(--lt-teal);}
.lt-row.is-selected .lt-btn-manage:hover{background:var(--lt-teal);}
.lt-btn-select{padding:10px 24px;border-radius:999px;border:1.5px solid var(--lt-orange);background:var(--lt-orange);color:#fff;font-weight:700;font-size:15px;cursor:pointer;white-space:nowrap;font-family:inherit;transition:background .15s ease,border-color .15s ease;}
.lt-btn-select:hover:not(:disabled):not(.is-selected){background:#e0551f;border-color:#e0551f;}
.lt-btn-select.is-selected{background:var(--lt-teal);border-color:var(--lt-teal);cursor:default;}
.lt-btn-create{padding:10px 24px;border-radius:999px;border:1.5px solid var(--lt-orange);background:var(--lt-orange);color:#fff;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;white-space:nowrap;font-family:inherit;display:inline-block;transition:background .15s ease,border-color .15s ease;}
.lt-btn-create:hover{background:#e0551f;border-color:#e0551f;}
.lt-loading,.lt-empty{color:var(--lt-muted);font-size:14px;padding:12px 10px;}

@media (max-width:480px){
  .lt-title{font-size:28px;}
  .lt-logo{width:130px;}
}