/* Vessel Operations Log visual layer: locally served image, vector icons, no external requests. */
@media screen{
 html{background:#071824!important}body{background:linear-gradient(110deg,rgba(3,16,27,.60),rgba(5,24,37,.28)),url('/offshore-helm-ctv-left.png') 65% center/cover fixed!important;min-height:100vh}
 body::before,body::after,.aviation-lights{display:none!important}
 #appPage{background:transparent!important}#appPage>.wrap{max-width:1480px}
 #appPage .topbar{padding:26px 0 22px!important}#mainTitle{font-weight:750!important;letter-spacing:-.035em!important;color:#f1f7fa!important;text-shadow:0 2px 24px #0007}
 #appPage .meta{background:rgba(8,28,43,.87)!important;border:1px solid #395565!important;border-radius:16px!important;box-shadow:0 12px 35px #0003;backdrop-filter:blur(12px)}
 #appPage .operation-tiles .op{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(19,50,67,.95),rgba(6,25,40,.93))!important;border:1px solid #3a6277!important;box-shadow:0 15px 32px #0004,inset 0 1px 0 #ffffff0e!important;border-radius:19px!important;transition:transform .22s,border-color .22s,box-shadow .22s!important}
 #appPage .operation-tiles .op::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 10%,#56cdd518,transparent 68%);pointer-events:none}
 #appPage .operation-tiles .op::after{content:'';position:absolute;left:25%;right:25%;bottom:0;height:2px;background:#77dcd8;opacity:.24;transition:opacity .2s}
 #appPage .operation-tiles .op:hover{transform:translateY(-3px)!important;border-color:#80c4d4!important;box-shadow:0 18px 38px #0005,0 0 28px #5bbfb00e!important}
 #appPage .operation-tiles .op.running{background:linear-gradient(145deg,rgba(16,66,62,.97),rgba(5,33,38,.97))!important;border-color:#74d6b2!important;outline:2px solid #6fdbb526!important}
 #appPage .operation-tiles .op.running::after{opacity:1;box-shadow:0 0 20px #7fe7b9}
 #appPage .operation-tiles .op .icon{background:none!important;width:156px!important;height:118px!important;clip-path:none!important;filter:drop-shadow(0 10px 9px #0005)!important;margin:0 auto 12px!important}
 #appPage .operation-tiles .op .icon svg{display:block!important;width:100%!important;height:100%!important;overflow:visible}
 #appPage .operation-tiles .op h2{font-weight:750!important;letter-spacing:.07em!important;font-size:18px!important;color:#eaf6fa!important}
 #appPage .operation-tiles .op .status{color:#b3cad5!important;font-size:13px!important}
 #appPage .operation-tiles .op.running .status{color:#9fe9c7!important}
 #appPage .operation-tiles .op .timer{color:#c1ffe7!important;font-variant-numeric:tabular-nums}
 .pilot-svg .wake{stroke:#62bfce;stroke-width:1.6;fill:none;stroke-linecap:round;opacity:.55;stroke-dasharray:15 8;animation:pilot-wake 5s linear infinite}
 .pilot-svg .boat{animation:pilot-bob 6s ease-in-out infinite;transform-origin:80px 88px}
 .pilot-svg .gangway-arm{animation:pilot-gangway 8s ease-in-out infinite;transform-origin:32px 75px}
 .pilot-svg .crane-hook{animation:pilot-hoist 7s ease-in-out infinite}
 .pilot-svg .fuel-flow{stroke-dasharray:4 7;animation:pilot-flow 2s linear infinite}
 .pilot-svg .rotor{animation:pilot-rotor 15s linear infinite;transform-origin:94px 40px}
 .pilot-svg .beacon{animation:pilot-beacon 4s ease-in-out infinite}
 .pilot-svg .power{stroke-dasharray:9 14;animation:pilot-flow 3s linear infinite}
 .op.running .pilot-svg .wake,.op.running .pilot-svg .fuel-flow{animation-duration:1.6s}
 .op:nth-child(2n) .pilot-svg .boat{animation-delay:-2s}
 #gate{background:linear-gradient(145deg,#102d40ed,#091e30ed)!important;border-color:#63819288!important;box-shadow:0 30px 100px #0007,inset 0 1px 0 #ffffff0d;backdrop-filter:blur(14px)}
 #gate h1{letter-spacing:-.04em;font-size:38px;line-height:1.1}#gate .brand{letter-spacing:.3em;font-size:14px}#gate form>button:first-of-type{background:#a2e3da;color:#082431;border-color:#a2e3da;font-weight:700}
 #toolbar{background:#0a2634f5!important;border-bottom:1px solid #3d6374;box-shadow:0 4px 20px #0003}
 #toolbar strong{color:#d5f3f1;letter-spacing:.015em}#toolbar button{border-color:#497184;background:#173a4a}#syncStatus{color:#bad8df}
 @media(min-width:1000px){#gate{margin:10vh 0 8vh 9vw;max-width:440px;padding:35px}}
 @media(max-width:700px){body{background-position:70% center!important}#appPage .topbar{padding:8px 0 12px!important}#mainTitle{font-size:25px!important}#appPage .operation-tiles .op .icon{width:124px!important;height:94px!important;margin-bottom:7px!important}#appPage .operation-tiles .op{min-height:168px!important;padding:11px 7px!important}#appPage .operation-tiles .op h2{font-size:14px!important;letter-spacing:.03em!important}#appPage .operation-tiles .op .status{font-size:12px!important}#appPage .meta label{font-size:14px!important}}
 @media(min-width:701px) and (max-width:1100px){#appPage .operation-tiles .op .icon{width:142px!important;height:108px!important}}
}
@keyframes pilot-bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-3px) rotate(1deg)}}
@keyframes pilot-gangway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(3deg)}}
@keyframes pilot-hoist{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
@keyframes pilot-rotor{to{transform:rotate(360deg)}}
@keyframes pilot-wake{to{stroke-dashoffset:-46}}
@keyframes pilot-flow{to{stroke-dashoffset:-44}}
@keyframes pilot-beacon{0%,75%,100%{opacity:.45}82%{opacity:1}}
.pilot-motion-off *, .pilot-tab-hidden *{animation-play-state:paused!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){.pilot-svg *{animation:none!important}#appPage .op{transition:none!important}}
@media print{body{background:#fff!important}.pilot-svg *{animation:none!important}}
/* Beacons share the exact cover transform of the photograph. */
@media screen {
 body{isolation:isolate}
 .pilot-aviation{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
 .pilot-aviation-plane{position:absolute;width:1672px;height:941px;transform-origin:0 0}
 .pilot-aviation-lamp{position:absolute;width:6px;height:6px;margin:-3px;border-radius:50%;background:#ff514a;box-shadow:0 0 6px 3px #ff2424,0 0 20px 7px #ff161699;animation:pilot-aviation-pulse 2.4s steps(1,end) infinite}
 .pilot-aviation-lamp.distant{width:3px;height:3px;margin:-1.5px;box-shadow:0 0 5px 2px #ff2424,0 0 10px 3px #ff161666}
}
/* Two distinct synchronized red flashes, then a dark interval. */
@keyframes pilot-aviation-pulse{0%,20%,44%,100%{opacity:0}8%,32%{opacity:1}}
.pilot-motion-off .pilot-aviation-lamp{animation:none!important;opacity:.65}
@media(prefers-reduced-motion:reduce){.pilot-aviation-lamp{animation:none!important;opacity:.65}}
@media print{.pilot-aviation{display:none!important}}

@media screen{body{display:flow-root}}
@media screen{
 .pilot-sky{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
 .pilot-helicopter{position:absolute;left:-150px;top:18vh;width:clamp(86px,8vw,130px);opacity:.86;animation:pilot-flight 65s linear infinite;animation-delay:-38s;filter:drop-shadow(0 2px 2px #102c3833)}
 .pilot-helicopter svg{width:100%;overflow:visible}
 .heli-airframe{animation:pilot-flight-bob 7s ease-in-out infinite;transform-origin:125px 60px}
 .heli-main-rotor{animation:pilot-heli-rotor .13s linear infinite;transform-origin:134px 24px}
 .heli-tail-rotor{animation:pilot-rotor .16s linear infinite;transform-origin:25px 48px}
}
@keyframes pilot-flight{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 300px))}}
@keyframes pilot-flight-bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@keyframes pilot-heli-rotor{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.14)}}
@media(prefers-reduced-motion:reduce){.pilot-helicopter,.pilot-helicopter *{animation:none!important}.pilot-helicopter{left:70%;transform:none}}
@media print{.pilot-sky{display:none!important}}
/* Real photographic helicopter, stationary in the upper-left sky. */
@media screen{
 .pilot-helicopter{left:3vw;top:2vh;width:clamp(125px,11vw,175px);animation:none;transform:none;opacity:.86;filter:brightness(.78)}
 .pilot-helicopter img{display:block;width:100%;height:auto;animation:pilot-hover 8s ease-in-out infinite}
 .pilot-sea-scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-2}
 .pilot-scene-plane{position:absolute;width:1672px;height:941px;max-width:none;transform-origin:0 0;overflow:visible}
 .pilot-scene-plane image{filter:brightness(.72)}
 .pilot-live-sea body{background-image:linear-gradient(110deg,rgba(3,16,27,.60),rgba(5,24,37,.28)),url('/offshore-daughter-plate.png')!important}
 .pilot-scene-rotor{transform-origin:0 0;animation:pilot-rotor 28s linear infinite}
 @media(min-width:1000px){#gate{margin:12vh auto 8vh!important}}
 @media(max-width:700px){#gate{margin-top:105px!important}.pilot-helicopter{left:18px;top:10px;width:140px}}
}
@keyframes pilot-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
@media(prefers-reduced-motion:reduce){.pilot-helicopter{left:3vw}.pilot-helicopter img,.pilot-scene-rotor{animation:none!important}}
@media print{.pilot-sea-scene{display:none!important}}

/* Original photograph; only obstruction lights animate. */
@media screen {
 .pilot-svg *, .pilot-helicopter, .pilot-helicopter img {animation:none!important}
 .pilot-helicopter {left:6vw!important;top:5vh;width:clamp(100px,8vw,125px)!important;filter:brightness(.8);transform:none!important}
 .pilot-helicopter img {height:auto;object-fit:contain}
 .pilot-heli-light{position:absolute;left:62%;top:21%;width:2px;height:2px;border-radius:50%;background:#ff302b;box-shadow:0 0 4px 2px #ff302b99;animation:pilot-aviation-pulse 2.4s steps(1,end) infinite}
 @media(min-width:1000px){#gate{margin:12vh 0 8vh 22vw!important}}
 @media(max-width:700px){.pilot-helicopter{left:22px!important;top:22px;width:110px!important}}
}
.pilot-motion-off .pilot-heli-light{animation:none!important;opacity:.65}
@media(prefers-reduced-motion:reduce){.pilot-heli-light{animation:none!important;opacity:.65}}

/* Landing page only: fixed photograph, five rotating background turbines. */
.pilot-landing-scene,.pilot-sky{display:none}
@media screen{
 .pilot-has-scene body{background-image:linear-gradient(110deg,rgba(3,16,27,.60),rgba(5,24,37,.28)),url('/offshore-login-sea-v125.png')!important}
 .pilot-has-scene .pilot-landing-scene,.pilot-signin-scene .pilot-sky{display:block}
 .pilot-landing-scene{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:-1}
 .pilot-landing-plane{position:absolute;width:1672px;height:941px;transform-origin:0 0}
 .pilot-distant-turbine{position:absolute;opacity:.66}
 .pilot-distant-turbine svg{display:block;width:100%;height:100%;overflow:visible}
 .pilot-distant-rotor{transform-origin:0 0;animation:pilot-rotor 30s linear infinite;animation-play-state:paused}
 .pilot-distant-light{position:absolute;width:3px;height:3px;border-radius:50%;background:#ff4840;box-shadow:0 0 5px 2px #ff282888;animation:pilot-distant-flash 3s steps(1,end) infinite;animation-play-state:paused}
 .pilot-signin-scene .pilot-distant-rotor,.pilot-signin-scene .pilot-distant-light{animation-play-state:running}
 .pilot-tab-hidden .pilot-distant-rotor,.pilot-tab-hidden .pilot-distant-light{animation-play-state:paused!important}
}
@keyframes pilot-distant-flash{0%,15%,100%{opacity:0}5%{opacity:1}}
@media(prefers-reduced-motion:reduce){.pilot-distant-rotor,.pilot-distant-light{animation:none!important}.pilot-distant-light{opacity:.65}}

html.pilot-has-scene:not(.pilot-signin-scene) *{animation:none!important;scroll-behavior:auto!important}


@media screen{#appPage .operation-tiles .op .icon{width:200px!important;height:138px!important;filter:none!important}#appPage .operation-tiles .op .icon svg.pilot-equipment-photo{overflow:hidden!important}@media(max-width:700px){#appPage .operation-tiles .op .icon{width:132px!important;height:110px!important}}}
/* Handheld workspace: operations and the current vessel day only. */
.context-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#contextStatus{font-size:12px;flex-basis:100%;color:#b5d4df}
.meta input[readonly]{opacity:.8;border-color:transparent}
@media screen and (max-width:1100px), screen and (pointer:coarse) and (max-width:1400px){
 #appPage .meta,#appPage .dpr-action-panel,#appPage .operation-utilities,#appPage .month-control-card,#appPage .daily-summary,#appPage .monthly-summary,#appPage .footer-note,#appPage .subtitle,#appPage .clock,#appPage .marine-status,#appPage .backupstatus{display:none!important}
 #appPage .topbar{display:block!important;margin-bottom:8px!important}
 #appPage .mobile-only{display:inline}#appPage .desktop-only{display:none}
 #appPage .operation-group-heading span{display:none}
 #appPage .operation-tiles .op .icon{width:150px!important;height:100px!important;max-width:100%}
 #appPage .operation-tiles .op .icon svg{width:100%!important;height:100%!important}
 #appPage .operations-primary .op{min-height:170px!important;padding:12px 6px!important}
 #appPage .recent-activity h3{font-size:16px;line-height:1.5}
 #appPage .month-activity-scroll{max-height:none;overflow:visible}
 #appPage .month-activity-scroll tr{grid-template-columns:repeat(3,minmax(0,1fr));min-width:0}
 #appPage .month-activity-scroll td{overflow-wrap:anywhere}
 #appPage .mobile-empty,#appPage .mobile-empty td{display:block!important}
}
@media screen and (max-width:700px){
 #appPage .operation-tiles .op .icon{width:120px!important;height:88px!important}
 #appPage .operations-primary .op{min-height:151px!important}
 #appPage .topbar h1{font-size:22px!important}
}
/* Primary equipment stays prominent; additional operations use half-size artwork. */
@media screen{
 #appPage .operations-secondary{display:block!important}
 #appPage .operations-secondary .operation-tiles{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 #appPage .operations-secondary .operation-tiles .op{grid-column:auto!important;min-height:120px!important;padding:7px 8px!important}
 #appPage .operations-secondary .operation-tiles .op .icon{width:100px!important;height:69px!important;margin:0 auto 2px!important}
 #appPage .operations-secondary .operation-tiles .op .icon svg{width:100%!important;height:100%!important}
 #appPage .operations-secondary .operation-tiles .op h2{font-size:15px!important;line-height:1.15;margin:3px 0!important}
 #appPage .operations-secondary .operation-tiles .op .status{font-size:11px!important;margin-top:3px!important}
 #appPage .operations-secondary .operation-tiles .op .timer{font-size:15px!important}
}
@media screen and (max-width:1100px), screen and (pointer:coarse) and (max-width:1400px){
 #appPage .operations-primary .operation-tiles{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 #appPage .operations-primary .operation-tiles .op{grid-column:auto!important}
 #appPage .operations-secondary .operation-tiles .op{min-height:92px!important;padding:6px 4px!important}
 #appPage .operations-secondary .operation-tiles .op .icon{width:75px!important;height:50px!important}
 #appPage .operations-secondary .operation-tiles .op h2{font-size:12px!important}
}
@media screen and (max-width:700px){
 #appPage .operations-primary .operation-tiles .op .icon{width:100%!important;max-width:110px;height:88px!important}
 #appPage .operations-primary .operation-tiles .op h2{font-size:12px!important}
 #appPage .operations-secondary .operation-tiles .op .icon{width:60px!important;height:44px!important}
 #appPage .operations-secondary .operation-tiles .op h2{font-size:10px!important;overflow-wrap:anywhere}
 #appPage .operations-secondary .operation-tiles .op .status{font-size:10px!important}
 #appPage .operation-tiles{gap:7px!important}
}
/* Static photographic scene. All decorative motion is disabled on every page. */
.pilot-static-scene .pilot-sky,.pilot-static-scene .pilot-landing-scene,.pilot-static-scene .pilot-sea-scene{display:none!important}
html.pilot-static-scene *,html.pilot-static-scene *::before,html.pilot-static-scene *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media screen{html.pilot-static-scene body{background-image:linear-gradient(110deg,rgba(3,16,27,.42),rgba(5,24,37,.12)),url('/offshore-static-v136.png')!important;background-size:cover!important;background-position:65% center!important;background-attachment:fixed!important}}
/* Phone workspace: generous tap targets and readable equipment rows. Desktop unchanged. */
@media screen and (max-width:600px){
 #appPage>.wrap{padding:12px!important}
 #appPage .topbar{display:none!important}
 #appPage .operation-group-heading{margin:4px 0 9px!important}
 #appPage .operation-group-heading h2{font-size:15px!important}
 #appPage .operations-primary .operation-tiles{grid-template-columns:1fr!important;gap:8px!important}
 #appPage .operations-primary .operation-tiles .op{display:grid!important;grid-template-columns:100px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;align-items:center;column-gap:14px;min-height:94px!important;padding:10px 14px!important;text-align:left!important;border-radius:14px!important}
 #appPage .operations-primary .operation-tiles .op .icon{grid-column:1;grid-row:1/4;width:100px!important;height:72px!important;margin:0!important}
 #appPage .operations-primary .operation-tiles .op h2{grid-column:2;font-size:15px!important;line-height:1.25!important;letter-spacing:.035em!important;margin:0!important}
 #appPage .operations-primary .operation-tiles .op .status{grid-column:2;font-size:12px!important;line-height:1.35;margin-top:5px!important}
 #appPage .operations-primary .operation-tiles .op .timer{grid-column:2;font-size:19px!important;margin-top:5px!important}
 #appPage .operations-secondary{margin-top:16px!important}
 #appPage .operations-secondary .operation-tiles .op{min-height:113px!important;border-radius:12px!important;padding:8px 4px!important}
 #appPage .operations-secondary .operation-tiles .op h2{font-size:11px!important;line-height:1.25!important;letter-spacing:0!important;overflow-wrap:normal!important}
 #appPage .operations-secondary .operation-tiles .op .status{font-size:10px!important;line-height:1.3!important}
 #appPage .operation-tiles .op:hover{transform:none!important}
 #appPage .recent-activity{margin-top:16px!important}
 #appPage .recent-activity h3{font-size:14px!important}
 #appPage button,#appPage input,#appPage select{min-height:44px}
 #appPage input,#appPage select,#appPage textarea{font-size:16px!important}
}
