/* Sequoia Lacrosse Academy • Web 1.1
   Brand skin only: field geometry, five-yard turf bands, tactical icons,
   player colors and the independent midfield artwork remain unchanged.
   The supplied crest is used as artwork, not reconstructed. */
:root {
  --sla-navy:#001e32; --sla-hunter:#063d2e; --sla-gold:#c49a3a; --sla-ivory:#f9f8f1;
  --forest:var(--sla-navy); --forest2:var(--sla-hunter); --gold:var(--sla-gold);
  --navy:var(--sla-navy); --hunter:var(--sla-hunter); --accent:var(--sla-gold);
  --cream:var(--sla-ivory); --paper:var(--sla-ivory); --ink:#142c38;
  --muted:#5e6b65; --line:#dedfd4; --web-line:#dedfd4;
  --brand-ink:#fff; --brand-secondary-ink:#fff; --brand-gold-ink:#17212b;
  --brand-soft:#f0f4f1; --brand-line:#c8d5cf;
  --shadow:0 14px 44px #001e3214;
}
body {background:var(--sla-ivory);color:var(--ink)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,canvas:focus-visible {
  outline:3px solid var(--sla-gold);outline-offset:3px;
}
button:hover:not(:disabled){filter:none}
.btn{color:var(--sla-navy);border-color:#cdd3cc}
.btn:hover:not(:disabled){background:#f0f2ec;border-color:#91a39a}
.btn.primary{background:var(--sla-navy);color:var(--brand-ink);border-color:var(--sla-navy)}
.btn.primary:hover:not(:disabled){background:var(--sla-hunter);color:var(--brand-secondary-ink);border-color:var(--sla-hunter)}
.btn.record,.btn.record:hover:not(:disabled){background:#a24335;border-color:#a24335;color:#fff}
.btn.danger{color:#963c30;background:#fff4f1;border-color:#e4b9b0}
.btn.danger:hover:not(:disabled){background:#fae5de;border-color:#be7668}
.icon-button:hover:not(:disabled){background:#e9eee8}
/* Always-visible academy masthead, including when Large field hides the library. */
.web-actions{background:var(--sla-navy);border-bottom:3px solid var(--sla-gold);padding:16px 26px;gap:10px 12px;color:var(--brand-ink);min-height:110px}
.web-identity{display:flex;align-items:center;gap:17px;margin-right:auto;min-width:0}
.web-identity>img{display:block;width:76px;height:76px;object-fit:contain;background:var(--sla-ivory);border-radius:7px;flex:0 0 76px}
.web-wordmark{letter-spacing:0;display:flex;flex-direction:column;gap:5px;min-width:0}
.web-wordmark .web-academy{font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--brand-ink);line-height:1.5}
.web-wordmark strong{font-size:25px;line-height:1.1;letter-spacing:-.45px;font-weight:650}
.web-wordmark .web-motto{font-family:Georgia,serif;font-size:12px;font-style:italic;line-height:1.5;font-weight:400;letter-spacing:0;color:var(--brand-ink)}
.web-actions #onlineStatus{margin:0 10px 0 0;font-size:10px;max-width:185px;line-height:1.6;color:var(--brand-ink);opacity:.85}
.web-actions button{font-size:11px;min-height:34px;color:var(--brand-ink);border-color:#8c9fa5;padding:8px 11px;border-radius:5px;white-space:nowrap}
.web-actions button:hover:not(:disabled){color:var(--brand-gold-ink);background:var(--sla-gold);border-color:var(--sla-gold)}
.preview-notice{background:#f2ead5;color:#544323;border-bottom:1px solid #e3d7b7;font-size:11px;padding:8px 26px}
/* The library is an academy-branded rail rather than an unbranded gray panel. */
.library{background:var(--sla-navy);border-right:1px solid #314b58;color:var(--brand-ink);padding-top:24px}
.library .brand{flex-direction:column;align-items:flex-start;gap:13px;padding-bottom:23px;border-bottom:1px solid #52616a;margin-bottom:21px}
.library .brand-mark{width:104px;height:104px;flex:none;background:var(--sla-ivory)!important;border-radius:8px!important}
.library .brand-mark img{padding:0;background:var(--sla-ivory)}
.library .brand strong{font-size:19px;letter-spacing:-.4px;font-weight:650}
.library .brand small{font-size:8px;letter-spacing:1.2px;white-space:normal;max-width:210px;line-height:1.6;color:var(--brand-ink);font-weight:600}
.library .workspace-label{color:var(--brand-ink);font-size:8px;letter-spacing:.8px;gap:6px}
.library .status-dot{background:var(--sla-gold)}
.library .version{font-size:9px;color:var(--brand-ink);white-space:nowrap}
.library #newPlay{background:var(--sla-gold);color:var(--brand-gold-ink);border-color:var(--sla-gold);font-weight:750}
.library #newPlay:hover:not(:disabled){background:#ddbb70;border-color:#ddbb70;color:#17212b}
.library .library-tabs{border-color:#52616a}
.library .library-tabs button{color:var(--brand-ink);opacity:.75}
.library .library-tabs button.active{color:var(--brand-ink);opacity:1}
.library .library-tabs button.active:after{background:var(--sla-gold);height:3px}
.library .library-tabs span{background:var(--sla-gold);color:var(--brand-gold-ink)}
.library .search{background:#f7f6ef;border-color:#f7f6ef}
.library .search input{color:#001e32;font-size:11px}
.library .search span,.library .search input::placeholder{color:#58675e}
.library .search:focus-within{outline:3px solid var(--sla-gold);outline-offset:3px}
.library .play-card{background:#f8f7f0;color:#142c38;border-color:#d4d5c8}
.library .play-card.active{border-color:var(--sla-gold);box-shadow:inset 3px 0 0 var(--sla-gold);background:#fffef8}
.library .play-card small{color:#55665b}
.library .play-card .card-tag{color:#063d2e;background:#e7eddf;font-weight:700}
.library .empty-message{color:var(--brand-ink)}
.library-footer{border-top-color:#52616a}
.library-footer button{color:var(--brand-ink)}
.library-footer button:hover:not(:disabled){color:var(--brand-gold-ink);background:var(--sla-gold);padding-left:7px}
.library-footer p{color:var(--brand-ink);font-size:12px;line-height:1.6}
.library-footer small{color:var(--brand-ink);opacity:.8;line-height:1.5}
/* Warm paper, navy hierarchy and restrained green action states. */
.main{background:var(--sla-ivory)}
.topbar{background:#fffefb;border-color:var(--line)}
#playTitle{color:var(--sla-navy);font-weight:700}
.breadcrumb{color:#52665b}
.build-version{background:#e9eee6;color:#405d4e;border:1px solid #d4ded1}
.save-state,.save-state:before{color:#486451}
.brand-chip{color:var(--sla-navy);background:#f6f2e5;border-color:#d4bc80;max-width:130px}
.brand-chip img{width:34px;height:34px;padding:0;background:var(--sla-ivory)}
.web-save-button{border-color:var(--sla-gold)!important;background:#f8f3e4!important;color:var(--sla-navy)}
.web-save-button:hover:not(:disabled){background:#efe1bb!important}
.modebar{background:#fffefb;border-color:var(--line)}
.segments button{color:#5b695f}
.segments button.active{color:var(--sla-hunter);font-weight:700}
.segments button.active:after{height:3px;background:var(--sla-gold)}
.mode-actions .divider{background:var(--line)}
.field-contextbar{border-color:#d9ddcf}
.field-view-switch{background:#e9ede4;border-color:#c4cfc0}
.field-view-switch button{color:#405b4c}
.field-view-switch button.active{background:var(--sla-hunter);color:var(--brand-secondary-ink);box-shadow:none}
.field-view-switch button:hover:not(.active):not(:disabled){background:#d8e2d3}
.field-context-actions label{color:#52624f}
.field-context-actions select{border-color:#b6c5b3;color:#214a39;background:#fffefb}
.field-size-button[aria-pressed=true]{background:#f5ecd5;border-color:#c6a559;color:var(--sla-navy)}
.field-info{color:#52664f}
.pill{color:#244f39;background:#e8eee2;border-color:#c3d0b8}
.tiny-label{color:#4f6253}
.canvas-wrap{border-radius:8px;box-shadow:0 0 0 1px #b7c7ab,0 5px 20px #001e3205}
.canvas-message{color:#405942;background:#fffef9ed;border-color:#c9d6bd}
.canvas-bottom,.legend{color:#4d6650}
.turf-legend,.turf-legend strong{color:#4b6444}
/* Keep on-field player colors unchanged for tactical discrimination. */
.timeline{border-color:#d4dacd}
.play-button{background:var(--sla-hunter);color:var(--brand-secondary-ink)}
.play-button:hover:not(:disabled){box-shadow:0 0 0 3px #c49a3a40}
.transport select{color:var(--sla-navy);border-color:#b9c6b7;background:#fffefb}
.timecode{color:#52644f}
.scrubber{accent-color:var(--sla-hunter)}
.frame-card{background:#fffefb;border-color:#bcccb4}
.frame-card.active{border-color:var(--sla-gold);box-shadow:0 0 0 2px var(--sla-gold)}
.frame-card .frame-caption{color:#405c45}
.frame-card .frame-caption strong{color:var(--sla-hunter)}
.audio-lane{background:#edf3ec;border-color:#7e9a85;border-style:solid;border-left:3px solid var(--sla-hunter)}
.audio-lane strong{color:#204c39;font-size:11px;font-weight:650}
.audio-lane-icon{color:var(--sla-hunter)}
.audio-lane div>span{color:#536951;font-size:9px}
.audio-lane>span:last-child{color:#305b40;font-weight:650}
.mini-wave i{background:var(--sla-hunter)}
.inspector{background:#fffefb;border-color:var(--line)}
.inspector h3{color:var(--sla-navy);font-weight:700}
.inspector .intro,.inspector .help-text,.help-text,.selection-heading p{color:#586b5b}
.eyebrow,.section-title{color:#4d6555;font-size:9px;letter-spacing:1.3px}
.tool{border-color:#c8d3c1;color:#375b46;background:#fffefb}
.tool .tool-icon{color:#27543c}
.tool:hover:not(:disabled){background:#edf2e8;border-color:#88a680}
.tool.active{border-color:var(--sla-hunter);background:#e9f0e8;box-shadow:inset 3px 0 var(--sla-hunter);color:#063d2e}
.tool.active .tool-icon{color:var(--sla-hunter)}
.inspector label.form-label{color:#4a634e}
.inspector input:not([type=checkbox]):not([type=color]):not([type=range]),.inspector select,.inspector textarea{background:#f9faf4;border-color:#c8d3c1;color:#234737}
.inspector hr{border-color:var(--line)}
.inspector .note-box,.help-grid div{background:#eef2e8;color:#476347}
.inspector .note-box strong,.help-grid strong{color:#264c34}
.action-item{background:#edf2e8}
.action-item button{color:#3b6144}
.voice-take{background:#f6f7ee;border-color:#c5d2bd}
.voice-take p{color:#546c4c}
.statusbar{background:#edf0e6;color:#4d6148;border-color:#d9dece}
/* Modal chrome and the editable three-color preset. */
dialog{background:#fffefb;border-color:#c1c9bd;box-shadow:0 25px 90px #001e3230}
dialog::backdrop{background:#001e3260}
.modal-head{border-top:4px solid var(--sla-gold);background:var(--sla-navy);color:var(--brand-ink);padding-top:22px;border-bottom:0}
.modal-head h2{font-size:23px;line-height:1.2;color:var(--brand-ink)}
.modal-head .eyebrow,.modal-head .icon-button{color:var(--brand-ink)}
.modal-head .icon-button:hover{background:#ffffff20}
#modalBody>p,#modalBody .form-label,#modalBody .check-row{color:#4b6451}
#modalBody input:not([type=checkbox]),#modalBody select,#modalBody textarea{background:#f9faf4;border-color:#c6d2c0;color:#254934}
#modalBody .note-box,.export-summary,.help-grid div{color:#486248;background:#eef2e7}
#modalBody input[type=range]{accent-color:var(--sla-hunter)}
.brand-preset-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 0 5px}
.brand-preset-heading strong,.brand-preset-heading small{display:block}
.brand-preset-heading strong{font-size:14px;color:var(--sla-navy)}
.brand-preset-heading small{font-size:10px;color:#4e6651;margin-top:5px;line-height:1.5}
#modalBody .brand-editor input[type=color]{padding:4px;height:42px;background:var(--sla-ivory)}
.brand-color-note{color:#4e6651}
.logo-upload-box{background:#f5f5e9;border-color:#aabd9a}
.logo-upload-box strong{color:#2e5037}.logo-upload-box p{color:#536d4f}
.marking-preset{background:#f5f6ed;color:#355b3e;border-color:#bdcdb3}
.marking-preset small{color:#4e684b}
.marking-preset.active{background:#e9f0e4;border-color:var(--sla-hunter);box-shadow:inset 0 0 0 1px var(--sla-hunter)}
.format-card{color:#466241;background:#fffefb;border-color:#bdcdb3}
.format-card strong{color:var(--sla-navy)}
.format-card.active{border-color:var(--sla-gold);background:#f9f3e2;box-shadow:inset 0 0 0 1px var(--sla-gold)}
.progress-track{background:#e4e9db}.progress-track i{background:var(--sla-hunter)}
.progress-label{color:#45623d}.online-item strong{color:var(--sla-navy)}.online-item small{color:#50644e}
.empty-online{background:#f2f3e8;color:#3e5c3c}.embed-details{color:#445e40}
.toast{background:var(--sla-navy);color:var(--brand-ink);border-top:3px solid var(--sla-gold)}
.toast.error{background:#8c4336;color:#fff;border-top-color:#f1ac91}
/* Sign-in uses the full supplied image, including the motto beneath the seal. */
.login-page{background:var(--sla-ivory);color:#17342f;padding:36px}
.login-shell{border-color:#dbddce;border-radius:12px;box-shadow:0 24px 70px #001e3218}
.login-brand{background:var(--sla-navy);border-top:5px solid var(--sla-gold);padding:42px 48px}
.login-brand>img{width:252px;height:252px;object-fit:contain;border-radius:7px;margin-bottom:29px;background:var(--sla-ivory)}
.login-brand .login-eyebrow{color:#e0bd6c}
.login-brand h1{color:#fffdf4;font-size:40px;font-weight:650;margin-top:17px}
.login-brand p{color:#d3ddd7;font-size:15px}
.login-values{color:#fffdf4;letter-spacing:1.8px;font-size:10px}
.login-values span{color:var(--sla-gold)}
.login-form-panel{background:#fffefb;border-top:5px solid var(--sla-gold);padding:68px 50px}
.login-eyebrow{color:#425f4c;font-size:10px}
.login-form-panel h2{color:var(--sla-navy)}
.login-intro,.login-note,.login-show{color:#526a58}
.login-form-panel input[type=password],.login-form-panel input[type=text]{border-color:#aabbab;background:#f8faf2;color:var(--sla-navy)}
.login-form-panel button{background:var(--sla-hunter);color:#fff;min-height:48px}
.login-form-panel button:hover:not(:disabled){background:var(--sla-navy)}
.login-show input{accent-color:var(--sla-hunter)}
.login-foot{color:var(--sla-hunter);border-color:#d9ddcd;font-size:17px}
.login-error{color:#9c3c2e}.login-note a{color:var(--sla-hunter)}
@media(min-width:1600px){.web-actions{padding-left:34px;padding-right:34px}.web-actions #onlineStatus{max-width:240px}}
@media(max-width:1350px){.web-actions #onlineStatus{max-width:150px;font-size:9px}.web-actions{padding-left:20px;padding-right:20px;gap:10px}.web-wordmark .web-academy{font-size:9px;letter-spacing:1px}.web-wordmark strong{font-size:23px}.web-identity{gap:13px}}
@media(max-width:1190px){.web-actions #onlineStatus{order:5;max-width:none;width:100%;margin:0;padding-left:89px}.web-actions{padding-top:12px;padding-bottom:10px}.web-identity>img{width:64px;height:64px;flex-basis:64px}.web-identity{gap:13px}.web-actions #onlineStatus{padding-left:77px}.web-actions button{font-size:10px;padding:7px 9px}.library .brand-mark{width:92px;height:92px}.library .brand strong{font-size:18px}.library .brand small{font-size:7px;letter-spacing:.8px}.library .workspace-label{font-size:7px;letter-spacing:.3px}}
@media(max-width:950px){.web-actions{padding:13px 16px;min-height:100px}.web-identity{margin-right:auto}.web-wordmark .web-academy{font-size:9px}.web-actions #onlineStatus{width:100%;order:5;padding-left:77px;font-size:10px}.library .brand{flex-direction:column}.app.full-field-large.full-library-open .library{background:var(--sla-navy)}}
@media(max-width:680px){.web-actions{gap:10px 7px}.web-identity{flex:1 0 100%;gap:13px}.web-identity>img{width:64px;height:64px;flex-basis:64px}.web-wordmark strong{font-size:23px}.web-wordmark .web-academy{font-size:9px;letter-spacing:.9px}.web-wordmark .web-motto{font-size:11px}.web-actions button{flex:1;font-size:10px;padding:7px 5px}.web-actions #onlineStatus{width:100%;margin:0;padding:0;font-size:10px}.preview-notice{padding:9px 15px}.login-page{padding:16px}.login-brand{padding:27px}.login-brand>img{width:148px;height:148px;margin-bottom:20px}.login-brand h1{font-size:30px}.login-form-panel{border-top:0;padding:31px 26px}.login-form-panel h2{font-size:30px}.brand-preset-heading{align-items:flex-start;gap:7px}.brand-preset-heading .btn{white-space:normal;font-size:10px;max-width:120px}.modal-head{padding-left:22px;padding-right:22px}.modal-head h2{font-size:21px}.web-wordmark{max-width:calc(100vw - 120px)}.field-context-actions{gap:6px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}

/* Web 1.2: persistent, keyboard/touch-accessible per-frame deletion. */
.frame-item{width:124px;flex:0 0 124px;display:flex;flex-direction:column;gap:6px}
.frame-item .frame-card{width:100%;flex:0 0 auto}
.frame-delete{width:100%;min-height:32px;display:flex;align-items:center;justify-content:center;gap:5px;padding:5px 8px;border:1px solid #e4c9c0;border-radius:6px;background:#fff7f3;color:#923d30;font-size:10px;font-weight:650;line-height:1.2}
.frame-delete svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.frame-delete:hover:not(:disabled){background:#fbe8e0;border-color:#bb7a68}
.frame-delete:focus-visible{outline:3px solid var(--sla-navy);outline-offset:2px}
.frame-delete:disabled{opacity:.55;cursor:not-allowed}
.frame-help{margin:0 0 9px;color:#52634f;font-size:10px;line-height:1.5}
@media(pointer:coarse){.frame-delete{min-height:44px}}