/* Phase 2 visual layer only. Existing DOM, handlers, status values and routes are unchanged.
   Primary reference: production Logbook. Approved concept PNGs received and matched in the final visual overrides. */
:root{--skin-ink:#f4f8ff;--skin-muted:#bdccda;--skin-edge:#426280;--skin-blue:#0b84e9;--skin-cyan:#72d4ff;--skin-metal:linear-gradient(145deg,#22364b 0%,#102032 42%,#09131f 100%)}
body{color:var(--skin-ink)}
.shell{background:repeating-linear-gradient(135deg,transparent 0 20px,#82b1d208 21px 23px,transparent 24px 43px),repeating-linear-gradient(45deg,transparent 0 20px,#0005 21px 23px,transparent 24px 43px),#050b13;border-inline:1px solid #1c354d}
.screen:not(#screen-logbook){color:var(--skin-ink)}
.screen:not(#screen-logbook) .screen-head{position:relative;min-height:116px;padding:26px 100px 20px 18px;margin-bottom:6px;border-bottom:1px solid #2789c6;background:linear-gradient(125deg,#1b344c,#091622 65%);box-shadow:inset 0 1px #98c5e326}
.screen:not(#screen-logbook) .screen-head:after{content:"";position:absolute;right:17px;top:17px;width:69px;height:79px;background:url('/brand-4a6235f4222e0807.png') center/contain no-repeat;pointer-events:none}
.screen:not(#screen-logbook) .screen-head h2{font-size:27px;line-height:1.15;letter-spacing:-.5px;color:#fff;margin:0 0 9px;font-weight:850}
.screen:not(#screen-logbook) .screen-head p{font-size:13px;line-height:1.5;color:var(--skin-muted);margin:0}
.screen:not(#screen-logbook) .page{padding:14px}
.screen:not(#screen-logbook) .card{background:var(--skin-metal);border:1px solid var(--skin-edge);border-top-color:#7894ad;box-shadow:inset 0 1px #ffffff14,0 5px 16px #0004;border-radius:16px;color:var(--skin-ink)}
.screen:not(#screen-logbook) .section-title,.screen:not(#screen-logbook) .doc-group-title{font-size:13px;line-height:1.5;letter-spacing:.65px;color:#b5e4ff;font-weight:850}
.screen:not(#screen-logbook) .small,.screen:not(#screen-logbook) .library-meta,.screen:not(#screen-logbook) .student-file-meta,.screen:not(#screen-logbook) .student-file-note,.screen:not(#screen-logbook) .student-photo-copy .meta,.screen:not(#screen-logbook) .profile-id{color:var(--skin-muted);font-size:13px;line-height:1.55}
.screen:not(#screen-logbook) input:not([type=checkbox]):not([type=radio]):not([type=file]),.screen:not(#screen-logbook) select,.screen:not(#screen-logbook) textarea{font-size:16px;color:#fff;background:#091a29;border:1px solid #59758e;min-height:46px;border-radius:10px}
.screen:not(#screen-logbook) label{color:#d8e7f2;line-height:1.5}
.screen:not(#screen-logbook) input::placeholder,.screen:not(#screen-logbook) textarea::placeholder{color:#aebfcd;opacity:1}
.screen:not(#screen-logbook) :is(.primary,.save-duty,.library-btn,.upload-btn,.file-upload-btn,.action,.train-btn,.category,.signout){color:#fff;background:linear-gradient(#24547b,#10283f);border:1px solid #648baa;border-top-color:#a2c7df;box-shadow:inset 0 1px #ffffff24,0 3px 8px #0004;min-height:46px;font-size:14px;font-weight:750;border-radius:11px}
.screen:not(#screen-logbook) :is(.primary,.save-duty,.library-btn.sign){background:linear-gradient(#1689e5,#075ca5);border-color:#72bdf3}
.screen:not(#screen-logbook) button:disabled{cursor:not-allowed}
.screen:not(#screen-logbook) :is(button,a,input,select,textarea,summary):focus-visible,.bottom-nav button:focus-visible{outline:3px solid #9de4ff;outline-offset:3px}
/* Existing Home composition, with readable status and instrument labels. */
#screen-home .premium-hero{border-bottom:1px solid #238bc7;box-shadow:inset 0 -2px 15px #0b76ad22}
#screen-home .hero-brand-lockup{filter:drop-shadow(0 3px 7px #0009)}
#screen-home .student-strip,#screen-home .home-status-line{background:var(--skin-metal);border-color:#587b99;box-shadow:inset 0 1px #ffffff17,0 4px 12px #0004}
#screen-home .student-strip{grid-template-columns:54px minmax(0,1fr) auto;gap:10px;border-radius:16px;padding:13px}
#screen-home .home-avatar{width:54px;height:54px;box-shadow:0 0 0 2px #168dda,0 0 12px #0875bf33}
#screen-home .home-name{font-size:20px;line-height:1.25;overflow-wrap:anywhere}
#screen-home .home-welcome,#screen-home .home-id{font-size:12px;color:var(--skin-muted)}
#screen-home .myday-jump{min-width:80px;min-height:52px;padding:9px;gap:6px;background:linear-gradient(#28516f,#142b40);border-color:#7399b6;box-shadow:inset 0 1px #ffffff26}
#screen-home .myday-jump strong{font-size:13px}#screen-home .myday-jump small{font-size:10px;line-height:1.35;max-width:70px;color:#c7d9e6}
#screen-home .home-status-line{padding:14px;align-items:flex-start}
#screen-home .home-status-line .eyebrow{font-size:11px;color:#b4e5ff}
#screen-home .home-status-line .live-status{font-size:16px;line-height:1.35;margin:6px 0;color:#f5fbff}
#screen-home .home-status-line .pill{font-size:11px;white-space:normal;line-height:1.4;text-align:center;max-width:122px;background:#09253a;border-color:#6789a3;color:#f4faff}
#screen-home .home-current-time{font-size:10px;margin-top:7px;color:#bdcddc}#screen-home .home-current-time strong{font-size:15px}
#screen-home .logbook-head .left{font-size:15px}#screen-home .logbook-head button{font-size:12px;min-height:44px;padding:8px;color:#a1deff}
#screen-home .hour-rings{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px}
#screen-home .ring-visual{width:88px;height:104px;border-width:4px;background:#07121f;box-shadow:inset 0 1px 8px #0008}
#screen-home .ring-label{font-size:10px;line-height:1.35;color:#d6e5f1;white-space:normal}#screen-home .ring-num{font-size:24px;color:white}#screen-home .ring-unit{font-size:10px;color:#b4cfdf}
#screen-home .training-progress-top{font-size:13px;color:#d1e1ee;line-height:1.5}#screen-home .training-progress-track{height:8px;background:#020c17;border:1px solid #38556d}
#screen-home .quick-card{background:var(--skin-metal);border-color:#567996;border-top-color:#90aabd;box-shadow:inset 0 1px #ffffff22,0 3px 9px #0004;min-height:92px}
#screen-home .quick-card strong{font-size:13px;line-height:1.35}#screen-home .quick-card small{font-size:11px;line-height:1.4;color:#c1d3df}
#screen-home .dashboard-title span{font-size:10px;color:#8cd3fc}
/* Training resources and immutable completed-attempt history. No outcome colors changed. */
#screen-documents .library-row{gap:12px;padding:17px 0;border-color:#38546c;align-items:center}
#screen-documents .library-copy{min-width:0}#screen-documents .library-title{font-size:15px;line-height:1.45;color:#f5f9ff;overflow-wrap:anywhere}
#screen-documents .library-actions{flex-shrink:0}.library-actions .library-btn{min-width:64px;padding:10px}
#screen-documents .doc-group{padding:16px 0;border-color:#42617a}
#documentsProgressGrid{gap:10px}#documentsProgressGrid>div{background:#0a1c2d;border:1px solid #3a5871;padding:12px;border-radius:10px;line-height:1.5}
#evaluationResults>div{padding:16px!important;border:1px solid #49677f!important;background:#0b1d2d!important;border-radius:12px!important;margin:12px 0!important;line-height:1.55;font-size:14px;overflow-wrap:anywhere}
#evaluationResults details,#weeklyEvaluationList details{border-top:1px solid #3f5b73;margin-top:12px;padding-top:10px}
#evaluationResults summary,#weeklyEvaluationList summary{cursor:pointer;min-height:44px;padding:10px 3px;font-size:14px;line-height:1.55;color:#e1edf6}
#evaluationResults button{min-height:46px;padding:11px 14px;background:linear-gradient(#137dc9,#075499);color:white;border:1px solid #6fb5e4;border-radius:9px;font:inherit;font-weight:700;max-width:100%;white-space:normal}
#evaluationResults details p{white-space:pre-wrap;line-height:1.6;color:#c7d8e5}
#screen-documents .card>p{font-size:13px;line-height:1.6;color:var(--skin-muted)}
#weeklyEvaluationList,#scHomework,#scSchedule{font-size:14px;line-height:1.6;overflow-wrap:anywhere}
#screen-training :is(.video-title,.section-title){line-height:1.5}#screen-training .video-title{font-size:13px}#screen-training .video{min-width:160px}
#screen-profile .profile-name{font-size:26px;line-height:1.3}#screen-profile .student-file-row{padding:15px 0;gap:12px;border-color:#39536b}#screen-profile .student-file-title{font-size:16px;line-height:1.4}#screen-profile .student-file-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px}
#screen-profile .file-status{font-size:11px;padding:6px 8px}#screen-profile .student-photo-copy .title{font-size:16px;line-height:1.4}
/* Keep conversation structure and existing sent/received/read semantics. */
#screen-messages .msg-shell{--chat-bg:#081522;--chat-panel:#10243a;--chat-line:#3d5a74;--chat-muted:#b7cada;border-color:#4f7390;box-shadow:inset 0 1px #ffffff22,0 6px 18px #0004}
#screen-messages .msg-inbox-head,#screen-messages .msg-chat-head{background:linear-gradient(125deg,#233c53,#102336);border-bottom:1px solid #4c708d}
#screen-messages .msg-inbox{background:#0a1b2b}#screen-messages .msg-inbox-head h2{color:white}#screen-messages .msg-inbox-head p{line-height:1.5}
#screen-messages .msg-feed{background:#071523}#screen-messages .msg-bubble{background:#203c52;box-shadow:none}#screen-messages .is-sent .msg-bubble{background:#075b9b}#screen-messages .msg-bubble p{color:#fff;font-size:16px;line-height:1.55}
#screen-messages .msg-compose{background:#10263a}#screen-messages .msg-compose textarea{background:#071b2d;color:#fff}#screen-messages .msg-meta{color:#cedde9}#screen-messages .msg-thread-copy>span{color:#c1d2df}
#screen-messages .msg-thread.selected{background:#194465}#screen-messages .msg-tabs button[aria-pressed=true]{background:#0867b4}
/* Original six destinations and alert badges remain intact. */
.bottom-nav{background:linear-gradient(#162b3e,#081725);border-top:1px solid #5a88ab;box-shadow:0 -3px 14px #0007,inset 0 1px #b7dcf21a;padding-bottom:env(safe-area-inset-bottom)}
.bottom-nav .nav-btn{min-height:66px;font-size:10px;color:#c2d5e5;letter-spacing:.2px;line-height:1.4;padding:9px 2px;background:transparent;border-radius:12px}
.bottom-nav .nav-btn.active{background:linear-gradient(#075a91,#0b3150);color:#fff;border-color:#37a8e4;box-shadow:inset 0 1px #8edaff42,0 0 9px #078be520}
.bottom-nav .nav-btn .ico{color:inherit;font-size:22px;margin-bottom:5px}
.login-card{background:var(--skin-metal);border-color:#6687a4;box-shadow:inset 0 1px #ffffff1f,0 12px 35px #0008}.login-sub,.login-note{color:#bdcddc}.field label{font-size:12px;color:#d4e4ee}.login-title{font-size:26px;line-height:1.3}
.reader-title{color:#fff}.reader-modal .reader-body{background:#06111d}
@media(max-width:360px){#screen-home .student-strip{grid-template-columns:44px minmax(0,1fr);gap:10px}#screen-home .home-avatar{width:44px;height:44px}#screen-home .myday-jump{grid-column:1/-1;justify-content:center}#screen-home .myday-jump small{max-width:none}#screen-home .ring-visual{width:76px;height:98px}#screen-home .home-status-line{gap:8px}#screen-home .quick-grid{grid-template-columns:1fr}#screen-home .quick-card{min-height:74px}.bottom-nav .nav-btn{font-size:9px}.screen:not(#screen-logbook) .page{padding:10px}}
@media(prefers-reduced-motion:reduce){.screen:not(#screen-logbook) *,.bottom-nav *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Keep the existing status action inside the phone panel, including long labels. */
#screen-home .home-status-line>div:first-child{min-width:0;flex:1}
#screen-home .home-status-line>div:last-child{flex:0 0 84px;min-width:0}
#screen-home .home-status-line button{width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;font-size:13px;line-height:1.45;padding:11px 8px;min-height:46px}
#screen-home .home-status-line .pill{max-width:84px;padding:8px}
#evaluationResults .eval-name{font-size:16px;line-height:1.4}
#evaluationResults .eval-meta{font-size:13px;line-height:1.6;color:#bdccda}
#documentsProgressGrid .skill{font-size:11px;line-height:1.5;color:#c1d9eb}
#documentsProgressGrid .level{font-size:15px;line-height:1.45}
/* Approved references received: reuse only their header/texture artwork.
   No names, scores, hours, counts or other mock data are part of these crops. */
.shell{background:linear-gradient(#02091344,#02091399),url('/approved-skin-assets/diamond-plate.webp') repeat,#030b13}
.screen:not(#screen-logbook) .card,#screen-home .student-strip,#screen-home .home-status-line,#screen-home .quick-card{background:linear-gradient(145deg,#071928e8,#020a10f5);border:1.5px solid #11b7fb;border-top-color:#75d6ff;box-shadow:inset 0 0 12px #0078c326,0 0 7px #008ee760;border-radius:15px}
.screen:not(#screen-logbook) .screen-head{padding:0 0 12px;background:transparent;border:0;box-shadow:none;min-height:0}
.screen:not(#screen-logbook) .screen-head:after{content:none}
.screen:not(#screen-logbook) .screen-head:before{content:"";display:block;width:100%;aspect-ratio:493/263;background:url('/approved-skin-assets/documents-header.webp') center/100% 100% no-repeat}
#screen-training .screen-head:before{background-image:url('/approved-skin-assets/myday-header.webp')}
#screen-profile .screen-head:before{background-image:url('/approved-skin-assets/profile-header.webp')}
#screen-attendance .screen-head:before{content:none}
.screen:not(#screen-logbook,#screen-attendance) .screen-head h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.screen:not(#screen-logbook) .screen-head p{padding:8px 16px 0;font-size:13px}
#screen-attendance .screen-head{padding:22px 16px 8px}#screen-attendance .screen-head p{padding:0}
#screen-home .premium-hero{min-height:0;aspect-ratio:989/466;background:url('/approved-skin-assets/home-header.webp') center/100% 100% no-repeat;border:0;box-shadow:none}
#screen-home .hero-topline,#screen-home .hero-brand-lockup{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
#screen-home .student-strip{margin:8px 14px 0}
#screen-home .student-strip .home-avatar{border-color:#b5e4ff;box-shadow:0 0 0 2px #09c6ff,0 0 11px #00aaff73}
#screen-home .home-status-line .live-status{color:#76ddff;font-style:italic;font-weight:900}
#screen-home .home-current-time strong{color:#85e4ff;font-size:18px;text-shadow:0 0 8px #008cff66}
#screen-home .dashboard-title strong,#screen-home .logbook-head .left{color:#eef7ff;letter-spacing:.5px}
#screen-home .hour-rings{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
#screen-home .ring-visual{width:58px;height:82px;border-width:3px;background:#020c14;box-shadow:inset 0 0 10px #0008,0 0 5px #009dff22}
#screen-home .ring-num{font-size:16px;line-height:1.5;overflow-wrap:anywhere}
#screen-home .ring-label{font-size:9px;line-height:1.35}
#screen-home .ring-unit{font-size:9px}
#documentsProgressGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#documentsProgressGrid>div{padding:11px 6px;background:linear-gradient(#08253a,#03121f);border-color:#258cbb}
#documentsProgressGrid .skill{font-size:10px;letter-spacing:0;overflow-wrap:anywhere}
#documentsProgressGrid .level{font-size:13px}
#screen-documents .doc-group-title{color:#72e4ff}
#screen-profile>.page>.card:first-child{display:grid;grid-template-columns:76px minmax(0,1fr);gap:5px 14px;align-items:center;padding:18px 14px;text-align:left}
#screen-profile .profile-logo{width:76px;height:76px;grid-row:1/4;margin:0;border:1px solid #5bd6ff;border-radius:50%;object-fit:contain;box-shadow:0 0 9px #009dff66;background:#061827}
#screen-profile .profile-name{font-size:22px;text-align:left;overflow-wrap:anywhere}#screen-profile .profile-id{text-align:left}#profileTransmission{text-align:left!important;margin:0}
#screen-messages .msg-inbox{background:linear-gradient(#031421cc,#020911aa),url('/approved-skin-assets/diamond-plate.webp') repeat}
#screen-messages .msg-inbox-head{padding:0 0 12px;background:transparent;border:0}
#screen-messages .msg-inbox-head:before{content:"";display:block;aspect-ratio:954/326;background:url('/approved-skin-assets/messages-header.webp') center/100% 100% no-repeat}
#screen-messages .msg-inbox-head h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#screen-messages .msg-inbox-head p{padding:0 16px;margin:5px 0;font-size:16px;color:#bdd9ef}
#screen-messages .msg-thread{width:calc(100% - 24px);margin:9px 12px;padding:13px 11px;border:1px solid #3f82b0;border-radius:12px;background:linear-gradient(145deg,#0b2133,#05111d);min-height:86px}
#screen-messages .msg-avatar{border:1.5px solid #21c7ff;background:linear-gradient(#0a4064,#03243b);color:#e4f9ff;box-shadow:0 0 6px #00adff44}
#screen-messages .msg-inbox-head input,#screen-messages .msg-tabs{margin-inline:12px}
.bottom-nav{background:linear-gradient(#071722,#01090f);border-top:1px solid #45c6ff;box-shadow:0 -2px 7px #008ee733}
.bottom-nav .nav-btn.active{background:linear-gradient(#006bb2,#06283c);border-color:#1ec5ff;box-shadow:inset 0 1px #98e7ff66,0 0 10px #008cf055}
@media(max-width:360px){#screen-home .hour-rings{grid-template-columns:repeat(3,minmax(0,1fr))}#screen-home .ring-visual{width:76px;height:95px}#screen-home .ring-num{font-size:20px}#documentsProgressGrid{grid-template-columns:repeat(2,minmax(0,1fr))}#screen-profile>.page>.card:first-child{grid-template-columns:60px minmax(0,1fr)}#screen-profile .profile-logo{width:60px;height:60px}}
#screen-home>.page:has(>#scUrgent:empty){padding-block:0}
#screen-home .ring-num{font-size:14px;overflow-wrap:normal}
@media(max-width:360px){#screen-home .ring-num{font-size:20px}}