/* Shared presentation for the existing four-step record flow and its entry choices. */
.phone:is(.screen-choosePlay,.screen-record,.screen-wordsInput,.screen-confirmRecord){
 --record-blue:#3686ef;--record-line:#d5e3f3;--record-paper:#f7faff;--record-radius:14px;
 background:var(--record-paper);color:#142e50;
}
.phone:is(.screen-choosePlay,.screen-record,.screen-wordsInput,.screen-confirmRecord)>header{background:var(--record-paper)}
.phone:is(.screen-choosePlay,.screen-record,.screen-wordsInput,.screen-confirmRecord)>main{padding:20px 20px 115px}
.phone .record-design-progress{margin:8px 0 24px;gap:14px}
.phone .record-design-progress>span{background:#e2ebf6;height:6px}
.phone .record-design-progress i{background:#3686ef}
.phone .record-design-progress b{color:#536e90;font-size:14px;font-weight:600}
.phone:is(.screen-choosePlay,.screen-record,.screen-wordsInput,.screen-confirmRecord) main h1{
 font-size:23px!important;font-weight:750;line-height:1.5;letter-spacing:0;color:#142e50;margin:20px 0 12px;
}
.phone .choosePlay .heading h1{max-width:none}
.phone .words-input{background:none}
.phone:is(.screen-choosePlay,.screen-record,.screen-wordsInput,.screen-confirmRecord) main :is(textarea,.secondary,.record-play-option,.record-kind){border-radius:var(--record-radius);border-color:var(--record-line);box-shadow:none}
.phone .choosePlay .record-play-options,.phone .record-kind-cards{gap:12px}
.phone .choosePlay .record-play-option{min-height:72px;padding:16px;font-size:17px}
.phone .record-kind{min-height:88px;padding:16px;border-radius:var(--record-radius);border:1px solid var(--record-line);box-shadow:none}
.phone .record-kind.good{background:#effaf5!important;border-color:#cae9dc;color:#142e50}
.phone .record-kind.bad{background:#fff3f5!important;border-color:#f2d4dc;color:#142e50}
.phone .record-kind.good .kind-face{background:#def4e9;color:#187955}
.phone .record-kind.bad .kind-face{background:#fce3e9;color:#b54762}
.phone .record-kind h2{font-size:17px;font-weight:700;line-height:1.5}
.phone .record-kind p{font-size:12px;line-height:1.6}
.phone .words-input textarea{border:1px solid var(--record-line);border-radius:var(--record-radius);box-shadow:none;background:#fff}
.phone .words-input [data-words-action="hints"]{background:#fffbea;border-color:#f0dfa4;box-shadow:none;border-radius:var(--record-radius)}
.phone:is(.screen-choosePlay,.screen-record,.screen-wordsInput,.screen-confirmRecord) main .primary{background:#163b68;border-color:#163b68;border-radius:var(--record-radius);min-height:54px;box-shadow:none;font-size:16px}
.phone .record-review .words-record-summary section{background:#fff;border:1px solid var(--record-line);border-radius:var(--record-radius);padding:16px;margin:16px 0;box-shadow:none}
.phone .record-review .words-record-summary h2{font-size:18px;line-height:1.5;font-weight:700;color:#142e50}
.phone .record-review .words-hints{background:#fffbea;border-radius:var(--record-radius)}
.phone .record-review>[data-words-action="edit"]{background:#fff;color:#245e9e;border:1px solid var(--record-line);min-height:54px}
.phone .practice-resume{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;background:none}
.phone .practice-resume .followup-hero{margin:0;background:linear-gradient(110deg,#edf6ff,#fff);border-radius:var(--record-radius)}
.phone .practice-resume .followup-hero:after{background:none}
.phone .practice-resume .followup-hero h1{margin:0}
.phone .practice-resume>.practice-raw{margin:0 0 8px;padding:16px;background:#fffbea;border:1px solid #f0dfa4;border-radius:var(--record-radius);font-size:18px;line-height:1.75;box-shadow:none}
.phone .practice-resume h2{font-size:20px;line-height:1.5;font-weight:700;margin:8px 0 0;padding:0;border:0}
.phone .practice-resume button.action-tile{display:flex;flex-direction:row;align-items:center;text-align:left;gap:12px;min-height:88px;width:100%;padding:16px;margin:0;background:#fff;color:#142e50;border:1px solid var(--record-line);border-radius:var(--record-radius);box-shadow:none}
.phone .practice-resume button.action-tile .action-symbol{width:36px;height:36px;background:#e9f3ff;color:#266dc2;font-size:23px}
.phone .practice-resume button.action-tile strong{font-size:17px;line-height:1.5}
.phone .practice-resume button.action-tile small{font-size:12px;color:#536e90}
.phone .practice-resume button.action-tile .action-arrow{position:static;margin-left:auto;color:#266dc2;font-size:24px}
.phone .practice-resume button.action-tile:hover,.phone .choosePlay .record-play-option:hover{background:#f0f7ff;border-color:#8dbbf1}
.phone .practice-resume button.action-tile:active{background:#e5f1ff;border-color:#3686ef}
/* Keep the progress and content aligned with the other steps, without a nested form shell. */
.phone.screen-confirmRecord .record-review{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.phone .record-kind{display:grid;grid-template-columns:36px minmax(0,1fr) 16px;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;text-align:left;align-items:center}
.phone .record-kind .kind-face{grid-column:1;grid-row:1/3;width:36px;height:36px;margin:0;display:grid;place-items:center}
.phone .record-kind .kind-face svg{width:24px;height:24px}
.phone .record-kind h2{grid-column:2;grid-row:1;margin:0;text-align:left}
.phone .record-kind p{grid-column:2;grid-row:2;margin:0;text-align:left}
.phone .record-kind b{position:static;grid-column:3;grid-row:1/3;margin:0;font-size:24px;color:#266dc2}
/* Same selected-player treatment as the previous-practice reminder. */
.phone .record-outcome-hero{margin:0 0 20px;padding:14px 8px;min-height:156px;border-radius:var(--record-radius);background:linear-gradient(110deg,#edf6ff,#fff)}
.phone .record-outcome-hero:after{background:none}
.phone .record-outcome-hero .heading{position:relative;z-index:1;width:62%;margin:0}
.phone .record-outcome-hero .heading h1{width:100%;margin:0 0 10px;font-size:23px!important}
.phone .record-outcome-hero .heading p{margin:0;font-size:14px}
.phone .record-outcome-hero .followup-avatar{width:128px;height:156px;right:0;bottom:0}