/* Sturlese Field App on the web: the signed-in frame, sign-in and shared controls.
   Builds on site.css (tokens, .glass, .pill, .brand) — the same marsh, now behind the app. */

/* The fixed marsh sits behind the page, so the body itself stays clear (html keeps the ink). */
.page-app { min-height: 100svh; background: none; }
/* Loading and between pages: plain black, no scenery (owner, 2026-10-21). */
.app-backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: #05090a; }
.boot, .loading { color: var(--cream-3); text-align: center; padding: 120px 16px; margin: 0; }
/* `hidden` always wins over a component's display (pills, grids, flex rows). */
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h1:focus { outline: none; }

/* Frame: glass bar on top, tabs in it on wide screens and floating at the bottom on phones. */
.app-bar {
  position: fixed; z-index: 30; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; width: var(--measure); height: 58px; padding: 0 9px 0 16px; border-radius: 999px;
}
.app-bar .brand { margin-right: auto; }
.app-tabs { display: flex; gap: 2px; }
.app-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px;
  color: var(--cream-2); font-size: 15px; text-decoration: none; transition: background-color 0.2s, color 0.2s;
}
.app-tab:hover { color: var(--cream); background: rgba(255, 247, 232, 0.08); }
.app-tab[aria-current="page"] {
  color: var(--cream); background: rgba(255, 247, 232, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 247, 232, 0.35), inset 0 0 0 1px rgba(255, 247, 232, 0.08);
}
.icon { width: 18px; height: 18px; flex: none; }
.app-tabs--bottom { display: none; }
.app-view { width: min(760px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: 104px 0 72px; }
.stack { display: grid; gap: 18px; }

.account { position: relative; }
.account-button {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 0; color: #1b1208; font: 600 14px/1 var(--sans); letter-spacing: 0.02em;
  background: linear-gradient(180deg, #f8d59e, #dc9f5e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Page title (inside the header card) and small controls. */
.page-title { margin: 0; font: 400 clamp(32px, 4.4vw, 46px)/1.06 var(--serif); letter-spacing: -0.022em; text-wrap: balance; overflow-wrap: anywhere; }
.back-link, .refresh {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 6px 10px 6px 6px; border: 0; border-radius: 999px;
  background: transparent; color: var(--cream-2); font: 500 15px/1 var(--sans); cursor: pointer;
}
.back-link:hover, .refresh:hover { color: var(--cream); background: rgba(255, 247, 232, 0.08); }
.refresh { padding: 8px 12px; font-size: 14px; color: var(--cream-3); }
.refresh.is-busy .icon { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pill { cursor: pointer; border: 0; font-family: var(--sans); }
.pill:disabled { opacity: 0.45; cursor: default; transform: none; }
.pill--glass { background: rgba(255, 247, 232, 0.1); box-shadow: inset 0 1px 0 rgba(255, 247, 232, 0.28), inset 0 0 0 1px rgba(255, 247, 232, 0.1); }
.pill--quiet { background: transparent; color: var(--cream-2); box-shadow: inset 0 0 0 1px rgba(244, 233, 215, 0.2); }
.pill--quiet:hover { color: var(--cream); }
.pill--danger { color: #ffe6dc; background: rgba(176, 72, 56, 0.42); box-shadow: inset 0 1px 0 rgba(255, 220, 205, 0.3), inset 0 0 0 1px rgba(232, 130, 110, 0.35); }
.actions-row { display: flex; flex-wrap: wrap; gap: 10px; }
.actions-row .pill { flex: 1 1 200px; }
.actions-row--three .pill { flex-basis: 110px; }

/* Sign in: a glass sheet over the dawn. */
.app-public { min-height: 100svh; }
.signin { min-height: 100svh; display: grid; place-items: center; padding: 32px var(--gutter); }
.sheet {
  display: grid; gap: 14px; width: min(440px, 100%); padding: clamp(26px, 5vw, 40px); border-radius: 32px;
  background: linear-gradient(160deg, rgba(36, 58, 56, 0.66), rgba(12, 28, 27, 0.78));
  -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 245, 226, 0.4), inset 0 0 0 1px rgba(255, 245, 226, 0.08), 0 30px 70px -24px rgba(0, 0, 0, 0.75);
}
.sheet-brand { justify-self: start; }
/* The full logo, bird over the Sturlese wordmark, as on the public page. */
.sheet-lockup { position: relative; display: block; width: 92px; aspect-ratio: 1154 / 1081; }
.sheet-lockup i { position: absolute; display: block; background: var(--cream); }
.sheet-bird-body, .sheet-bird-wing { left: 16.12%; top: 0; width: 73.74%; height: 73.27%; }
.sheet-bird-body { -webkit-mask: url(/static/site/pintail-body.png) 0 0 / 100% 100% no-repeat; mask: url(/static/site/pintail-body.png) 0 0 / 100% 100% no-repeat; }
.sheet-bird-wing { -webkit-mask: url(/static/site/pintail-wing.png) 0 0 / 100% 100% no-repeat; mask: url(/static/site/pintail-wing.png) 0 0 / 100% 100% no-repeat; }
.sheet-script { left: 0; top: 70.12%; width: 100%; height: 29.88%; -webkit-mask: url(/static/site/sturlese-script.png) 0 0 / 100% 100% no-repeat; mask: url(/static/site/sturlese-script.png) 0 0 / 100% 100% no-repeat; }
/* The marsh flyover behind the sign-in sheet; a shade keeps the sheet legible. */
.signin-video, .signin-shade { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.signin-video { object-fit: cover; background: #0b1a1e url(/static/site/marsh-poster.jpg) center / cover no-repeat; }
.signin-shade { background: rgba(7, 18, 19, 0.42); }
@media (max-width: 760px) { .signin-video { object-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .signin-video { display: none; } .signin-shade { background: rgba(7, 18, 19, 0.42) url(/static/site/marsh-poster.jpg) 100% 50% / cover no-repeat; background-blend-mode: multiply; } }
.sheet-mark {
  display: block; width: 64px; height: 60px; background: var(--cream);
  -webkit-mask: url(/static/site/pintail.png) center / contain no-repeat; mask: url(/static/site/pintail.png) center / contain no-repeat;
}
.sheet-title { margin: 6px 0 0; font: 400 clamp(32px, 6vw, 40px)/1.05 var(--serif); letter-spacing: -0.02em; }
.sheet-lede { margin: 0 0 6px; color: var(--cream-2); }
.sheet-submit { width: 100%; margin-top: 6px; }
.field { display: grid; gap: 7px; }
.field[hidden] { display: none; }
.field-label { color: var(--cream-2); font-size: 14px; font-weight: 600; }
.field-input {
  width: 100%; min-height: 50px; padding: 0 16px; border-radius: 14px; color: var(--cream); font: 400 17px var(--sans);
  background: rgba(6, 18, 16, 0.5); border: 1px solid rgba(244, 233, 215, 0.18); transition: border-color 0.2s, box-shadow 0.2s;
}
.field-input:focus { outline: none; border-color: rgba(237, 181, 106, 0.85); box-shadow: 0 0 0 3px rgba(237, 181, 106, 0.22); }
.field-hint { margin: -4px 0 0; color: var(--cream-3); font-size: 14px; }
.field-hint[hidden] { display: none; }
.form-error { margin: 0; padding: 12px 14px; border-radius: 14px; background: rgba(176, 72, 56, 0.3); color: #ffe6dc; font-size: 15px; }
.form-error[hidden] { display: none; }
.legal-line { margin: 4px 0 0; color: var(--cream-3); font-size: 13.5px; text-align: center; line-height: 1.55; }

/* Dialogs and the status toast. */
.app-dialog {
  width: min(420px, calc(100% - 32px)); padding: 26px; border: 0; border-radius: 28px; color: var(--cream);
  background: rgba(16, 34, 32, 0.92); -webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 245, 226, 0.35), 0 30px 70px -20px rgba(0, 0, 0, 0.8);
}
.app-dialog::backdrop { background: rgba(3, 9, 9, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dialog-title { margin: 0 0 8px; font: 400 26px/1.15 var(--serif); }
.dialog-body { margin: 0 0 18px; color: var(--cream-2); }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.dialog-actions .pill { flex: 1 1 140px; }
.dialog-actions--stacked { flex-direction: column; }
.dialog-actions--stacked .pill { flex: none; width: 100%; }
.toast {
  position: fixed; z-index: 50; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  margin: 0; padding: 12px 20px; border-radius: 999px; max-width: calc(100% - 32px);
  background: rgba(16, 34, 32, 0.92); box-shadow: inset 0 1px 0 rgba(255, 245, 226, 0.3), 0 16px 40px -12px rgba(0, 0, 0, 0.7);
  animation: toast-in 0.25s ease-out;
}
@keyframes toast-in { from { opacity: 0; translate: 0 8px; } }

@media (max-width: 720px) {
  .app-bar .app-tabs--top { display: none; }
  .app-tabs--bottom {
    display: flex; position: fixed; z-index: 30; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%);
    justify-content: space-around; gap: 4px; width: min(420px, calc(100% - 32px)); padding: 6px; border-radius: 999px;
  }
  .app-tabs--bottom .app-tab { flex: 1; flex-direction: column; justify-content: center; gap: 3px; padding: 8px 10px; font-size: 12px; }
  .app-tabs--bottom .icon { width: 21px; height: 21px; }
  .app-view { padding-bottom: 120px; }
  .toast { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 84px); }
}
@media (prefers-reduced-motion: reduce) {
  .refresh.is-busy .icon, .toast { animation: none; }
}
.tab-mark {
  width: 22px; height: 20px; flex: none; background: currentColor;
  -webkit-mask: url(/static/site/pintail.png) center / contain no-repeat; mask: url(/static/site/pintail.png) center / contain no-repeat;
}