/* Aligned app mode: applies only inside the iPhone app (html.app-mode, set by the detect snippet in each page head).
   Website visitors never get the app-mode class, so nothing here changes the website. */
.app-start,.app-bar,.app-tabs,.app-tiles,.app-view-title{display:none}
html.app-mode{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--tabh:0px;-webkit-text-size-adjust:100%}
html.app-mode body{background:linear-gradient(180deg,#1B3D2F 0%,#0E1A17 70%) fixed,#0E1A17;min-height:100vh;min-height:100dvh;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
html.app-mode.app-has-tabs{--tabh:64px}
/* website chrome off */
html.app-mode body>header,html.app-mode body>footer,html.app-mode .skip,html.app-mode .ticker,html.app-mode .phead .arch,html.app-mode .phead .cols,html.app-mode .phead .cap,html.app-mode .mathmini{display:none!important}
html.app-mode main{padding-top:calc(var(--sat) + 56px);padding-bottom:calc(var(--sab) + var(--tabh) + 24px)}
html.app-mode .wrap{padding:0 20px}
html.app-mode .phead{padding:14px 0 6px;border-bottom:0;background:none}
html.app-mode .phead h1{font-size:30px;margin-top:0;letter-spacing:-.03em;line-height:1.1}
html.app-mode .phead h1 .g{display:inline;margin:0}
html.app-mode .appbox{padding:12px 0 24px}
html.app-mode .formgrid{display:flex;flex-direction:column-reverse;gap:24px;padding-top:12px}
html.app-mode .btn{border-radius:14px;letter-spacing:.08em}
html.app-mode .seg{border-radius:14px;overflow:hidden}
html.app-mode input,html.app-mode select,html.app-mode textarea{font-size:17px}
/* top bar */
html.app-mode .app-bar{display:flex;position:fixed;z-index:40;top:0;left:0;right:0;height:calc(var(--sat) + 52px);padding:var(--sat) 8px 0;align-items:center;justify-content:center;background:rgba(14,26,23,.86);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid rgba(201,164,92,.18)}
html.app-mode .app-bar .ab-title{font:700 16px/1 'Inter Tight',sans-serif;letter-spacing:-.01em;color:#F3EDE0;max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.app-mode .app-bar .ab-mark{height:26px;width:auto}
html.app-mode .app-bar .ab-back{position:absolute;left:4px;bottom:0;height:52px;min-width:72px;display:flex;align-items:center;gap:2px;padding:0 10px;color:#D9B977;text-decoration:none;font:600 16px 'Inter Tight',sans-serif;background:none;border:0}
html.app-mode .app-bar .ab-back svg{width:22px;height:22px}
/* bottom tabs */
html.app-mode.app-has-tabs .app-tabs{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;z-index:40;left:0;right:0;bottom:0;height:calc(var(--sab) + 64px);padding-bottom:var(--sab);background:rgba(14,26,23,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgba(201,164,92,.18)}
html.app-mode .app-tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-decoration:none;color:rgba(243,237,224,.6);font:600 11px 'Inter Tight',sans-serif;letter-spacing:.02em}
html.app-mode .app-tabs a svg{width:24px;height:24px}
html.app-mode .app-tabs a[aria-current=page]{color:#D9B977}
/* start screen (index.html) */
html.app-mode.app-start-on main,html.app-mode.app-start-on .app-bar{display:none!important}
html.app-mode .app-start[hidden],html.app-mode .app-start{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;padding:calc(var(--sat) + 28px) 22px calc(var(--sab) + 22px);background:radial-gradient(120% 70% at 50% 0%,#1B3D2F 0%,#0E1A17 68%);color:#F3EDE0}
html.app-mode:not(.app-start-on) .app-start{display:none}
.app-start .as-top{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;min-height:150px}
.app-start .as-mark{width:84px;height:auto}
.app-start .as-name{font:800 30px/1.05 'Inter Tight',sans-serif;letter-spacing:-.04em;margin:0}
.app-start .as-tag{font:600 12px/1.4 'Inter Tight',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#D9B977;margin:0}
.app-start .as-q{font:700 20px/1.2 'Inter Tight',sans-serif;letter-spacing:-.02em;margin:0 0 12px;color:#F3EDE0}
.app-start .as-cards{display:grid;gap:14px}
.as-card{display:flex;align-items:center;gap:16px;min-height:104px;padding:18px 18px 18px 16px;border-radius:22px;text-decoration:none;color:#F3EDE0;background:rgba(243,237,224,.06);border:1px solid rgba(217,185,119,.38);transition:transform .12s,background .12s}
.as-card:active{transform:scale(.98);background:rgba(217,185,119,.14)}
.as-card.primary{background:#D9B977;border-color:#D9B977;color:#0E1A17}
.as-card .as-ic{flex:none;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:rgba(14,26,23,.35);color:#D9B977}
.as-card.primary .as-ic{background:rgba(14,26,23,.12);color:#0E1A17}
.as-card .as-ic svg{width:30px;height:30px}
.as-card .as-tx{flex:1;display:grid;gap:4px}
.as-card b{font:800 21px/1.15 'Inter Tight',sans-serif;letter-spacing:-.025em}
.as-card small{font:500 15px/1.3 'Inter Tight',sans-serif;opacity:.78}
.as-card .as-go{flex:none;width:22px;height:22px;opacity:.7}
.app-start .as-signin{margin:20px 0 0;text-align:center;font:500 16px/1.4 'Inter Tight',sans-serif;color:rgba(243,237,224,.78)}
.app-start .as-signin a{display:inline-block;padding:10px 6px;color:#D9B977;font-weight:700;text-decoration:none}
/* portal in app mode */
html.app-mode.app-portal-in .phead{display:none}
html.app-mode .app-view{display:none}
html.app-mode .app-view.on{display:block}
html.app-mode .app-view-title{display:block;font:800 28px/1.1 'Inter Tight',sans-serif;letter-spacing:-.03em;margin:4px 0 16px}
html.app-mode #app .pt-head h2{font-size:34px!important}
html.app-mode .app-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px 0 18px}
.app-tile{display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:138px;padding:16px;border-radius:20px;text-decoration:none;color:#F3EDE0;background:rgba(243,237,224,.06);border:1px solid rgba(217,185,119,.3);position:relative}
.app-tile:active{transform:scale(.98);background:rgba(217,185,119,.14)}
.app-tile.wide{grid-column:1/-1;min-height:96px;flex-direction:row;align-items:center;justify-content:flex-start}
.app-tile.primary{background:#D9B977;border-color:#D9B977;color:#0E1A17}
.app-tile .t-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:rgba(14,26,23,.35);color:#D9B977;flex:none}
.app-tile.primary .t-ic{background:rgba(14,26,23,.12);color:#0E1A17}
.app-tile .t-ic svg{width:24px;height:24px}
.app-tile b{display:block;font:800 18px/1.15 'Inter Tight',sans-serif;letter-spacing:-.02em}
.app-tile small{display:block;margin-top:3px;font:500 13.5px/1.3 'Inter Tight',sans-serif;opacity:.75}
.app-tile .t-badge{position:absolute;top:14px;right:14px;min-width:26px;height:26px;padding:0 8px;border-radius:13px;background:#D9B977;color:#0E1A17;font:800 13px/26px 'Inter Tight',sans-serif;text-align:center}
html.app-mode .app-signout{width:100%;margin:6px 0 18px}
html.app-mode .app-note{margin:0 0 16px;color:rgba(243,237,224,.78)}
html.app-mode #app>.status.show{position:fixed;z-index:45;left:16px;right:16px;bottom:calc(var(--sab) + var(--tabh) + 14px);box-shadow:0 10px 30px rgba(0,0,0,.4)}
html.app-mode .pt-card{border-radius:18px}
html.app-mode.app-start-on .app-start[hidden]{display:flex!important}
html.app-mode .note-pop{bottom:calc(var(--sab) + var(--tabh) + 12px)}
.app-tile.primary .t-badge{background:#0E1A17;color:#D9B977}
html.app-mode.app-page-signup .phead,html.app-mode.app-page-portal .phead{display:none}
html.app-mode.app-page-signup .appbox,html.app-mode.app-page-portal .appbox{padding-top:18px}
