/* Shared visual finish. No input, persistence or analysis behavior lives here. */
:root {
 --color-navy:#142d50; --color-muted:#5e728c; --color-border:#e4eaf2;
 --color-bg:#fff; --color-surface:#f5f8fc; --color-cta:#eb517e;
 --color-success-bg:#fff7dd; --color-success:#bc8300;
 --color-failure-bg:#eaf4ff; --color-failure:#2478bd;
 --color-self-bg:#eaf8f3; --color-self:#228569;
 --color-deep-bg:#f2edfc; --color-deep:#7751b8;
 --radius-md:14px; --border:1px solid var(--color-border);
}
body{background:#f2f5f9;color:var(--color-navy);line-height:1.75}
.phone{background:#fcfdff;min-height:100dvh}
.phone main{padding-bottom:112px}
.phone h1,.phone h2,.phone h3{color:var(--color-navy);text-wrap:pretty}
.phone p,.phone strong,.phone button{overflow-wrap:anywhere}
.phone h1{letter-spacing:-.025em}.phone h2{line-height:1.55}
.phone button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.phone button:focus-visible,.phone summary:focus-visible,.phone input:focus-visible,.phone textarea:focus-visible{outline:3px solid #2782cc;outline-offset:3px}
.phone .primary,.phone .manual-primary{background:#142d50;border:1px solid #142d50;color:white;min-height:54px;border-radius:14px;font-size:16px;box-shadow:none}
.phone .secondary,.phone .manual-more{background:#fff;border:1px solid #cbd9e9;color:#244d7b;min-height:50px;border-radius:14px;font-size:15px;box-shadow:none}
.phone button:disabled{opacity:.48;cursor:default}
.phone .text-button{min-height:44px}
.phone .ds-header{background:#fcfdff;color:#142d50}
.phone .ds-header>strong{font-size:18px}
.phone .ds-bottom-nav{height:76px;background:#fffffffa;border-top:1px solid #e4eaf2;box-shadow:none}
.phone .ds-bottom-nav button{min-height:48px;color:#667c98}
.phone .ds-bottom-nav button.current{color:#142d50}
.phone .ds-bottom-nav small{font-size:11px;font-weight:600}
/* Home: sport photograph, one clear recording action, calm supporting cards. */
.home .reference-home-hero{background-image:url('../assets/volleyball-court.png');background-position:center;min-height:270px}
.home .reference-home-hero:before{background:linear-gradient(110deg,#102a47ee 0%,#102a4770 52%,#102a470a 100%)}
.home .home-brand strong{font-size:27px}.home .home-greeting p{font-size:29px;line-height:1.55}
.phone .home-start .primary{background:#eb517e;border-color:#eb517e;border-radius:16px;min-height:60px;box-shadow:0 4px 12px #142d5010}
.home .home-message{background:#edf6fc;border-radius:14px;color:#25486e;padding:18px 30px}
.phone .home .discovery-card{background:#fff8e5;border:1px solid #f3e8c6;border-left:0;border-radius:14px;padding:18px 32px 18px 18px}
.home .discovery-card h3{font-size:16px;line-height:1.75}
.home .weekly-view{padding:18px 14px;background:white;border:1px solid #e4eaf2;border-radius:16px}
.home .week-days>div.recorded>span{background:#eaf4ff;color:#246698}
.phone .home .viz-note{font-size:12px;color:#63758a}
/* Play selection: same cards in recording and playbook, no option changes. */
.choosePlay .ds-play-list,.book-plain-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.choosePlay .ds-list-item,.book-plain-list button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;min-height:144px;padding:18px 10px;background:white;border:1px solid #e1e9f3;border-radius:16px;text-align:center;color:#142d50}
.choosePlay .ds-list-icon,.book-play-icon{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:#eaf4ff;color:#287ec4}
.choosePlay .ds-list-icon svg,.book-play-icon svg{width:31px;height:31px}
.choosePlay .ds-list-copy strong,.book-plain-list strong{font-size:16px;line-height:1.55}
.choosePlay .ds-list-copy small{font-size:12px;line-height:1.6;color:#627894;margin-top:5px}
.choosePlay .ds-list-item>span:last-child,.book-plain-list button>b{display:none}
.book-plain-list .current{border-color:#ebb952;background:#fff8e5}
.book-plain-list button:nth-child(2n) .book-play-icon{background:#fff0f5;color:#cc4c7d}
.book-plain-list button:nth-child(3n) .book-play-icon{background:#e9f7f1;color:#228569}
.choosePlay .ds-list-item:last-child:nth-child(odd){grid-column:1/-1;min-height:94px}
/* Record: larger controls, consistent selected and outcome states. */
.record-kind-cards{gap:16px}.phone .record-kind{border-radius:18px;padding:24px;min-height:168px;box-shadow:none;border:1px solid transparent}
.phone .record-kind.good{background:#fff7dd;border-color:#f3e3b0;color:#835f00}
.phone .record-kind.bad{background:#eaf4ff;border-color:#d5e7fa;color:#286898}
.phone .record-kind h2{font-size:22px}.phone .record-kind p{font-size:14px}
.phone .date-label{font-size:14px;color:#5e728c}.phone input,.phone textarea{font-size:16px!important;border-radius:12px;border:1px solid #d9e3ee;line-height:1.75}
.phone .interview-style .question-bubble p{font-size:25px!important;line-height:1.55}
.phone .interview-style .selection-help{font-size:15px;color:#61758f}
.phone .interview-style .choice{font-size:16px;line-height:1.75;padding:18px 16px;min-height:68px;border-radius:14px;border-color:#dee7f1;background:white}
.phone .interview-style .choice-description{font-size:13px;color:#526b87;line-height:1.7}
.phone .interview-style .choice.selected{background:#edf6ff!important;border-color:#3285c8!important}
.phone .interview-style .answer-bar{border-top:1px solid #e6edf5;background:#fcfdff;padding:12px 22px;bottom:76px}
.phone .interview-style .answer-bar .primary{background:#142d50;font-size:16px!important}
.phone .record-outcome-label{border-radius:10px;color:#946900;background:#fff5d7}
.phone .record-outcome-label.failure{background:#eaf4ff;color:#2674b0}
.phone .record-design-progress i{background:#42ac8a}
/* Playbook: entry cards and findings retain their distinct hierarchy. */
.book-redesign .book-door{border-radius:18px;min-height:220px}
.book-redesign .book-door h1{font-size:28px!important}.book-redesign .book-door p{font-size:14px}
.book-redesign .book-insight{border-radius:16px;border:1px solid #f3e9c8;background:#fff8e5}
.book-redesign .book-insight.down{background:#eaf4ff;border-color:#dceaf8}
.book-redesign .book-insight.thought,.book-redesign .book-refine-card{background:#f3effb;border:1px solid #e6def6}
.book-redesign .book-caution,.book-redesign .book-caption{font-size:13px;color:#5e728c}
.book-redesign .book-entry{border-radius:14px;min-height:82px;padding:16px;background:#fff}
.book-redesign .book-entry small{font-size:13px;color:#607692}
.book-redesign .book-entry.up{background:#fff9e9;border-color:#f0e7cf}
.book-redesign .book-entry.down{background:#eef6ff;border-color:#e0ecf8}
.book-redesign .book-entry.refine{background:#f5f1fc;border-color:#e9e1f6}
.book-redesign .book-self-entries .book-entry.up{background:#fff0f5;border:1px solid #f6dfe8}
.book-redesign .book-evidence{padding:20px 8px;background:transparent}.book-redesign .book-evidence strong{font-size:16px}
.book-redesign .book-evidence small{font-size:12px}.book-redesign .book-tabs button{font-size:12px;min-height:48px;padding:12px 7px}
.book-redesign .book-tabs .active{color:#be3865;background:#fff0f5;border-color:#e85180}
.book-redesign .book-related>summary{min-height:48px;background:white;border-radius:14px}
.book-redesign .manual-record{border-bottom:1px solid #e4eaf2;border-radius:0}
/* Summary, history, conversations, profile and supporting screens. */
.phone .record-review>section,.phone .review-coach,.phone .review-unresolved,.phone .cooccurrence,.phone .manual-question{border-radius:14px;background:#f0f6fc;padding:18px;box-shadow:none}
.phone .record-review h1{font-size:26px!important}.phone .record-review h2{font-size:20px}
.phone .review-actions{gap:12px}.phone .review-actions button{min-height:54px}
.phone .record-row{padding:18px 14px;border:1px solid #e4eaf2;border-radius:14px;background:white;margin-bottom:10px}
.phone .record-row strong{font-size:16px}.phone .record-row small{font-size:13px}
.phone .chat-message{border-radius:16px;background:#eef4fa;line-height:1.8;font-size:15px;padding:16px}
.phone .chat-message.user{background:#e6f2ff;color:#163d65}
.phone .suggestions button{min-height:50px;font-size:15px;padding:12px 16px;border-radius:12px}
.phone .profile-overview{padding:20px 0 24px}.phone .profile-identity h1{font-size:25px!important}
.phone .profile-journey>p{background:#eaf7f2;padding:20px;border-radius:16px;font-size:15px}
.phone .journey-counts>div{background:#edf4fa;border-radius:14px;padding:16px 4px}.phone .journey-counts small{font-size:12px}
.phone .profile-menu{background:white;padding:0 16px;border:1px solid #e1e9f2;border-radius:16px}
.phone .profile-menu>button{min-height:58px}.phone .profile-menu span{font-size:15px}
.phone .profile-trends>div>span:first-child{font-size:14px}.phone .profile-trends>p{font-size:13px}
.phone .manual-empty{background:#f0f5fa;border-radius:14px;color:#61738a;padding:22px;font-size:15px;line-height:1.8}
@media(max-width:370px){.phone .interview-style .question-bubble p{font-size:23px!important}.book-redesign .book-tabs button{font-size:11px}.choosePlay .ds-list-copy strong,.book-plain-list strong{font-size:15px}}
@media(prefers-reduced-motion:reduce){.phone *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Override earlier chat-layout rules so every question has the same readable controls. */
.phone .interview-style .choices{margin-left:0;gap:10px}
.phone .interview-style .choice{font-size:16px!important;padding:18px 16px!important;border-radius:14px!important;min-height:68px}
.phone .interview-style .question-note{padding-left:0;font-size:13px}
.phone .interview-style #record-custom{margin-left:0;width:100%}
.choosePlay .heading h1{max-width:none}
.choosePlay [data-play="dig"] .ds-list-copy strong{font-size:15px;text-wrap:balance}
.book-redesign .book-plain-list button{min-width:0}
.phone .book-play-hero h1{color:white}
.book-plain-list button .book-play-icon{background:#eaf4ff;color:#287ec4}
.book-plain-list [data-manual="play:serve"] .book-play-icon,.book-plain-list [data-manual="play:spike"] .book-play-icon{background:#fff0f5;color:#cc4c7d}
.book-plain-list [data-manual="play:set"] .book-play-icon{background:#fff0df;color:#b97528}
.book-plain-list [data-manual="play:other"] .book-play-icon{background:#eef0f5;color:#65758f}
.phone .coach-intro{padding:18px;background:#edf5fc;border-radius:16px;margin:20px 0}
.phone .coach-intro p{font-size:16px;margin:0}
.phone .assistant-bubble{padding:18px;background:#edf5fc;border:0;border-radius:16px 16px 16px 4px;font-size:15px;line-height:1.8}
.phone .user-bubble{padding:16px;background:#e2f1ff;color:#173d65;border:0;border-radius:16px 16px 4px 16px;font-size:15px;line-height:1.8}
.phone .chat-input{padding:8px;border:1px solid #e1e9f2;border-radius:16px;background:white;gap:8px}
.phone .chat-input button{min-width:48px;min-height:48px;border-radius:12px;background:#142d50;color:white}
.phone .help-steps{padding:20px;background:white;border:1px solid #e4eaf2;border-radius:16px}
.phone .help-steps h2:not(:first-child){margin-top:28px}
.phone .profile-card{border:1px solid #e4eaf2;border-radius:16px;padding:20px;background:white}
/* Photo-led selection and compact category cards, matching the supplied reference. */
.choosePlay .ds-list-item,.book-plain-list button{position:relative;overflow:hidden;padding:0 0 16px;justify-content:flex-start;gap:12px;border-radius:14px;background:#fff;min-height:166px}
.choosePlay .ds-list-item::before,.book-plain-list button::before{content:'';display:block;width:100%;height:102px;flex-shrink:0;background:#e6eef5 url('../assets/play-photos.png') 0 0/200% 300% no-repeat}
.choosePlay .ds-list-icon,.book-plain-list .book-play-icon{display:none}
.choosePlay .ds-list-copy,.book-plain-list strong{padding:0 8px}
.choosePlay [data-play="set"]::before,.book-plain-list [data-manual="play:set"]::before{background-position:100% 0}
.choosePlay [data-play="spike"]::before,.book-plain-list [data-manual="play:spike"]::before{background-position:0 50%}
.choosePlay [data-play="serve"]::before,.book-plain-list [data-manual="play:serve"]::before{background-position:100% 50%}
.choosePlay [data-play="block"]::before,.book-plain-list [data-manual="play:block"]::before{background-position:0 100%}
.choosePlay [data-play="dig"]::before,.book-plain-list [data-manual="play:dig"]::before{background-position:100% 100%}
.choosePlay [data-play="other"]::before,.book-plain-list [data-manual="play:other"]::before,.book-plain-list [data-manual="play:pass"]::before{background-image:url('../assets/volleyball-court.png');background-size:cover;background-position:center}
.choosePlay .ds-list-item:last-child:nth-child(odd){min-height:90px;padding:16px;background:#eaf4ff}
.choosePlay .ds-list-item:last-child:nth-child(odd)::before{display:none}
.book-redesign .book-play-hero{height:196px;border-radius:16px;margin:0 0 14px;padding:22px;background-image:linear-gradient(0deg,#10253acc,#10253a00),url('../assets/volleyball-receive.png');background-position:center}
.book-redesign .book-play-hero h1{font-size:30px!important;color:white}
.book-redesign .book-tabs{margin:0 0 18px}
.book-redesign .book-insight{padding:20px;margin:18px 0 22px;border:0;border-left:4px solid #eabf4c;border-radius:4px 16px 16px 4px}
.book-redesign .book-insight.down{border-left-color:#6db2e6}
.book-redesign .book-insight.thought{border-left-color:#aa8cdb}
.book-redesign .book-insight h2{font-size:16px}.book-redesign .book-context{margin:8px 0}
.book-redesign .book-conclusion{font-size:23px;line-height:1.6}
.book-summary-entries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.book-summary-entries .book-entry{display:grid;grid-template-columns:1fr auto;align-content:start;gap:12px;min-height:162px;padding:18px 14px;margin:0}
.book-summary-entries .book-entry>span{grid-column:1/-1}
.book-summary-entries .book-entry svg{width:38px;height:38px}
.book-summary-entries .book-entry strong{font-size:16px}.book-summary-entries .book-entry small{margin-top:8px}
.book-summary-entries .book-entry.refine{grid-column:1/-1;display:flex;min-height:90px;align-items:center}
.book-redesign .book-self-entries .book-entry{border-left-width:4px;padding:20px;min-height:96px}
.book-redesign .book-evidence-list{background:#fff;border:1px solid #e4eaf2;border-radius:16px;padding:0 16px}
.book-redesign .book-evidence:last-child{border-bottom:0}
.book-redesign .book-play-hero:not([data-hero-play="receive"]):not([data-hero-play="dig"]){background-image:linear-gradient(0deg,#10253acc,#10253a00),url('../assets/volleyball-court.png')}
