/* The partner page (partner.html): the same night as the front door, one column of glass cards. System faces only. */
:root { --ink: #fff; --muted: rgba(255, 255, 255, 0.76); --night: #0a1126; --gold: #e6c88e; --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--night); color: var(--ink); font-family: var(--sans); }
body.pt { background: radial-gradient(120% 80% at 30% 0%, #2b2f55 0%, #141a36 45%, var(--night) 100%) fixed; min-height: 100dvh; }
.pt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(14px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 10px max(18px, env(safe-area-inset-left)); }
.pt-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: italic 400 19px var(--serif); }
.pt-brand img { border-radius: 7px; }
.pt-tools { display: flex; gap: 8px; }
.pt-lang, .pt-out { min-height: 36px; padding: 0 14px; border: 1px solid rgba(255, 236, 205, 0.3); border-radius: 18px; background: rgba(8, 14, 32, 0.3); color: var(--ink); font: 400 13px var(--sans); letter-spacing: 0.05em; cursor: pointer; }
.pt-main { width: min(660px, 100%); margin: 0 auto; padding: 8px max(18px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); display: grid; gap: 16px; }
.pt-quiet { color: var(--muted); font: 300 15px var(--sans); }
.pt-card { padding: 22px 22px 24px; border: 1px solid rgba(255, 236, 205, 0.28); border-radius: 18px; background-color: rgba(8, 14, 32, 0.38); background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 60%, rgba(8, 14, 32, 0.1) 100%); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.28); }
.pt-card h1, .pt-card h2 { margin: 0 0 10px; font: 400 26px/1.2 var(--serif); }
.pt-card h2 { font-size: 21px; }
.pt-card h3 { margin: 18px 0 6px; font: 500 12px var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.pt-card p { margin: 0 0 12px; font: 300 15.5px/1.55 var(--sans); color: rgba(255, 255, 255, 0.92); }
.pt-card .pt-note { color: var(--muted); font-size: 13.5px; }
.pt-card ul { margin: 0 0 12px; padding-left: 20px; font: 300 15px/1.55 var(--sans); }
.pt-card li { margin-bottom: 6px; }
.pt-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pt-btn { min-height: 46px; padding: 0 20px; border: 1px solid rgba(255, 236, 205, 0.4); border-radius: 14px; background: linear-gradient(145deg, rgba(255, 240, 215, 0.22), rgba(255, 240, 215, 0.06)); color: var(--ink); font: 400 15px var(--sans); letter-spacing: 0.03em; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.pt-btn:hover:not(:disabled), .pt-btn:focus-visible { border-color: rgba(255, 255, 255, 0.7); outline: none; }
.pt-btn:disabled { opacity: 0.55; cursor: default; }
.pt-btn.quiet { background: none; border-color: rgba(255, 255, 255, 0.25); color: var(--muted); }
.pt-btn.small { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.pt-field { display: grid; gap: 6px; margin: 12px 0; }
.pt-field label { font: 400 13px var(--sans); color: var(--muted); letter-spacing: 0.04em; }
.pt-field input[type='text'], .pt-field textarea { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid rgba(255, 236, 205, 0.34); border-radius: 12px; background: rgba(8, 14, 32, 0.5); color: var(--ink); font: 300 16px var(--sans); }
.pt-field textarea { min-height: 96px; resize: vertical; }
.pt-field input:focus-visible, .pt-field textarea:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.8); outline-offset: 2px; }
.pt-check { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; font: 300 15px/1.5 var(--sans); }
.pt-check input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.pt-warn { margin: 10px 0 0; color: #ffd9c2; font: 400 14px/1.4 var(--sans); }
.pt-warn:empty { display: none; }
.pt-ok { color: #cdeccd; }

/* the host's talk */
.pt-chat { display: grid; gap: 10px; margin: 6px 0 14px; }
.pt-bubble { max-width: 90%; padding: 12px 16px; border-radius: 16px; font: 300 15.5px/1.5 var(--sans); }
.pt-bubble.host { background: rgba(230, 200, 142, 0.14); border: 1px solid rgba(230, 200, 142, 0.3); border-top-left-radius: 4px; }
.pt-bubble.me { justify-self: end; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); border-top-right-radius: 4px; }
.pt-who { display: block; margin-bottom: 3px; font: 500 11px var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.pt-choices { display: flex; flex-wrap: wrap; gap: 8px; }

/* the Academy */
.pt-card ul.pt-todo { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pt-todo li { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; background: rgba(8, 14, 32, 0.3); }
.pt-todo li.done { opacity: 0.6; }
.pt-tick { color: #cdeccd; font-size: 15px; }
.pt-mod { margin: 10px 0; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; background: rgba(8, 14, 32, 0.3); }
.pt-mod summary { padding: 12px 14px; cursor: pointer; font: 400 16px var(--sans); }
.pt-mod .pt-modbody { padding: 0 14px 12px; }
.pt-q { margin: 16px 0; }
.pt-q > p { margin-bottom: 8px; font-weight: 400; }
.pt-opt { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px; font: 300 15px/1.45 var(--sans); cursor: pointer; }
.pt-opt input { margin-top: 3px; flex: none; }
.pt-opt.off { border-color: #ffb48f; background: rgba(255, 180, 143, 0.08); }
.pt-person { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pt-person b { font: 400 17px var(--serif); }
.pt-person span { color: var(--muted); font: 300 13.5px var(--sans); }
.pt-venue { margin: 12px 0; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; background: rgba(8, 14, 32, 0.3); }
.pt-venue .pt-note { margin: 4px 0 8px; }
.pt-manage { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
@media (max-width: 520px) { .pt-card { padding: 18px 16px 20px; } .pt-card h1 { font-size: 23px; } .pt-brand { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
.pt-room-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.pt-room-list li { padding: 6px 10px; border-radius: 10px; border: 1px solid transparent; }
.pt-room-list li.speaking { border-color: var(--pt-ok, #7ec8a0); }
.pt-yacht-host { width: min(900px, 100%); margin: 0 auto; padding: 8px max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left)); }
.pt-yacht { display: block; width: 100%; height: min(72vh, 620px); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px; background: #0a1126; }
/* Her assistant: the talk, her practice, her chips. */
.pt-assistant .pt-chat-log { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.pt-say { max-width: 88%; padding: 8px 12px; border-radius: 14px; line-height: 1.4; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05); align-self: flex-start; }
.pt-say.me { align-self: flex-end; background: rgba(214, 164, 71, 0.16); border-color: rgba(214, 164, 71, 0.35); }
.pt-say.practice { border-style: dashed; }
.pt-say.thinking { opacity: 0.7; }
.pt-chat-form { display: flex; gap: 8px; margin-top: 8px; }
.pt-chat-form input { flex: 1; min-width: 0; }
.pt-chips { flex-wrap: wrap; }
.pt-chat-form input[type='text'] { min-height: 46px; padding: 10px 14px; border: 1px solid rgba(255, 236, 205, 0.34); border-radius: 12px; background: rgba(8, 14, 32, 0.5); color: var(--ink); font: 300 16px var(--sans); }
.pt-yacht-host { position: relative; }
.pt-boxes { position: absolute; top: 8px; left: max(18px, env(safe-area-inset-left)); right: max(18px, env(safe-area-inset-right)); height: min(72vh, 620px); overflow: hidden; border-radius: 14px; pointer-events: none; }
.pt-live { color: #f08a83; font-size: 11px; }
.pt-live:not(:empty)::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #e5453a; }
.pt-box-btn { font: 400 11px var(--sans); color: inherit; background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 6px; padding: 3px 6px; min-height: 24px; cursor: pointer; }
.pt-box-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.pt-live-line { color: #f08a83; }
.pt-boxes > * { pointer-events: auto; }
.pt-strip { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: max-content; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 16px); }
.pt-tile { position: relative; flex: none; width: 96px; aspect-ratio: 4 / 3; border-radius: 10px; background: #1b2740; border: 1px solid rgba(255, 236, 205, 0.35); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); cursor: pointer; }
.pt-tile video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; background: #000; }
.pt-tile.mine video { transform: scaleX(-1); }
.pt-tile-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: #2a3a5c; color: #e8d9bd; font: 400 28px var(--serif, Georgia, serif); }
.pt-tile.has-video .pt-tile-face { display: none; }
.pt-tile.speaking { outline: 3px solid #7ec8a0; }
.pt-tile-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; justify-content: space-between; gap: 4px; padding: 2px 6px; border-radius: 0 0 10px 10px; background: rgba(10, 17, 38, 0.62); font: 400 11px var(--sans); }
.pt-tile-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-tile-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 2; display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 8px; background: rgba(10, 17, 38, 0.82); white-space: nowrap; font: 400 12px var(--sans); }
.pt-more { flex: none; padding: 6px 10px; border-radius: 99px; background: rgba(10, 17, 38, 0.62); border: 1px solid rgba(255, 236, 205, 0.35); font: 400 13px var(--sans); }
.pt-share { position: absolute; right: 10px; top: 92px; width: min(36%, 340px); min-width: 220px; overflow: hidden; border-radius: 10px; background: #0d1428; border: 1px solid rgba(255, 236, 205, 0.35); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.pt-share.chip { width: auto; min-width: 0; background: transparent; border: 0; box-shadow: none; }
.pt-share-chip { font: 400 13px var(--sans); color: inherit; padding: 8px 12px; border-radius: 99px; background: rgba(10, 17, 38, 0.82); border: 1px solid rgba(255, 236, 205, 0.35); min-height: 40px; cursor: pointer; }
.pt-share-bar { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: rgba(10, 17, 38, 0.82); font: 400 12px var(--sans); }
.pt-share-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-share-video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; }
.pt-youshare { position: absolute; top: 92px; left: 50%; transform: translateX(-50%); width: max-content; display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 99px; background: #b3261e; color: #fff; font: 500 13px var(--sans); white-space: nowrap; }
.pt-bottom { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.pt-boxes > .pt-bottom > * { pointer-events: auto; }
.pt-pop { width: min(92%, 380px); padding: 12px 14px; border-radius: 12px; background: rgba(10, 17, 38, 0.92); border: 1px solid rgba(255, 236, 205, 0.35); }
.pt-pop p { margin: 0 0 8px; font: 300 14px/1.45 var(--sans); }
.pt-pop-row { display: flex; gap: 8px; }
.pt-dock { width: max-content; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: calc(100% - 16px); padding: 8px 10px; border-radius: 99px; background: rgba(10, 17, 38, 0.72); border: 1px solid rgba(255, 236, 205, 0.35); }
.pt-dock-btn { min-height: 40px; padding: 8px 14px; border-radius: 99px; border: 1px solid rgba(255, 236, 205, 0.35); background: transparent; color: #f6f1e7; font: 500 13px var(--sans); cursor: pointer; }
.pt-dock-btn.on { background: rgba(255, 255, 255, 0.18); }
.pt-dock-btn.leave { border-color: #e5453a; color: #ffb3ad; }
.pt-dock-btn:focus-visible, .pt-share-chip:focus-visible, .pt-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pt-boxes.narrow .pt-tile { width: 40px; aspect-ratio: 1; border-radius: 50%; }
.pt-boxes.narrow .pt-tile-bar { display: none; }
.pt-boxes.narrow .pt-strip { gap: 4px; }
.pt-boxes.narrow .pt-bottom { bottom: 118px; }
.pt-boxes.narrow .pt-share { top: 62px; right: 8px; }
.pt-boxes.narrow .pt-share.wide { left: 8px; right: 8px; top: 62px; width: auto; }
.pt-boxes.narrow .pt-youshare { top: 62px; left: 8px; right: 8px; transform: none; width: auto; white-space: normal; justify-content: space-between; border-radius: 12px; }
.pt-boxes.narrow .pt-dock-btn { padding: 8px 9px; font-size: 12px; }
.pt-boxes.narrow .pt-dock { gap: 5px; padding: 6px 8px; }
.pt-boxes [hidden] { display: none !important; }

/* What her assistant remembers, for the partner to see and clear (partner-assistant.js memoryFold). */
.pt-memory { margin: 6px 0 10px; font-size: 13.5px; }
.pt-memory summary { cursor: pointer; color: var(--muted); }
.pt-memory-body { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.pt-memory-list { margin: 0; padding-left: 18px; }