* { box-sizing:border-box }
:root {
  color-scheme:light; --ink:#132c39; --muted:#475e69; --navy:#102d40; --ocean:#145a68;
  --line:#c9d6d7; --gold:#e2b878; --paper:rgba(252,254,252,.94);
}
html { scroll-padding-top:1rem }
body { margin:0; min-height:100vh; color:var(--ink); background:#e4eeeb; isolation:isolate; font:16px/1.5 "Inter","Segoe UI",sans-serif }
body::before,body::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:-1 }
body::before { background:url(plan-ab68.jpg) center center / max(100vw,920px) auto repeat-y; mix-blend-mode:multiply; opacity:.21 }
body::after { background-image:linear-gradient(#395f7010 1px,transparent 1px),linear-gradient(90deg,#395f7010 1px,transparent 1px); background-size:32px 32px }
.shell { width:min(1180px,calc(100% - 7vw)); margin:30px auto 0 }
a { color:var(--ocean); text-underline-offset:3px }
button,input,select,textarea { font:inherit }
button,.action { display:inline-flex; justify-content:center; align-items:center; background:var(--ocean); color:white; border:1px solid transparent; border-radius:7px; padding:9px 16px; min-height:42px; font-weight:650; cursor:pointer; text-decoration:none }
button:hover,.action:hover { background:#103e50 }
:focus-visible { outline:3px solid #ba7021; outline-offset:3px }
[hidden] { display:none!important }
.skip { position:absolute; left:1rem; top:-90px; background:white; padding:.6rem; z-index:3 }
.skip:focus { top:1rem }
.hero { position:relative; overflow:hidden; isolation:isolate; color:#fff; background:#102d40; border-radius:18px 18px 0 0; min-height:clamp(215px,24vw,302px); display:flex; align-items:center }
.hero::before { content:""; position:absolute; inset:0; z-index:-2; background:url(barca.jpg) right 53% / 74% auto no-repeat }
.hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#102d40 8%,#102d40fb 26%,#102d40e8 36%,#102d4060 57%,#102d4015 85%),linear-gradient(0deg,#0a223949,transparent 55%) }
.hero-text { padding:clamp(26px,5vw,64px); text-shadow:0 2px 12px #081d3060 }
.maker { text-transform:uppercase; letter-spacing:.17em; font-weight:650; font-size:.75rem; display:flex; align-items:center; gap:12px; margin:0 }
.maker i { height:1px; width:29px; background:var(--gold) }
h1,h2,h3,h4,p { margin-top:0 }
h1 { font:normal clamp(3.9rem,7.8vw,6.8rem)/.98 Georgia,"Times New Roman",serif; letter-spacing:-.061em; margin:9px 0 10px }
.hero-sub { font-size:clamp(.95rem,1.8vw,1.15rem); margin:0; color:#f1f4ef; letter-spacing:.035em }
.primary { display:flex; align-items:stretch; gap:4px; border-radius:0 0 12px 12px; background:var(--navy); padding:0 clamp(10px,3vw,40px); box-shadow:0 9px 24px #1c374016 }
.primary a,.session button { color:#e4ecec; text-decoration:none; background:transparent; border:none; padding:14px 16px; min-height:48px; font-size:.93rem; font-weight:600 }
.primary a { border-bottom:3px solid transparent }
.primary a[aria-current] { border-color:var(--gold); color:#fff }
.primary a:hover,.session button:hover { background:#ffffff12 }
.session { margin-left:auto }
.section-heading,.result-title { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap }
.section-heading { margin:clamp(26px,4vw,48px) 0 18px }
h2 { margin:0; font:normal clamp(1.85rem,3.8vw,2.85rem)/1.1 Georgia,serif; letter-spacing:-.038em }
h3 { margin:0 0 16px; font-size:1.08rem }
.metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:20px }
.metric { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 20px; border-radius:10px; border:1px solid var(--line); border-left:4px solid var(--tone); background:var(--paper); color:var(--ink); text-decoration:none; box-shadow:0 4px 14px #18374409 }
.metric:hover,.metric[aria-current] { outline:2px solid var(--tone); outline-offset:-2px; background:white }
.metric-name { font-weight:600; font-size:.93rem }
.metric strong { font:600 1.9rem/1 "Segoe UI",sans-serif; font-variant-numeric:tabular-nums }
.state-0 { --tone:#bb5145; --pale:#fae8e5; --dark:#842c25 }
.state-1 { --tone:#c17a23; --pale:#fbecd2; --dark:#744400 }
.state-2 { --tone:#348365; --pale:#e0f1e7; --dark:#245c43 }
.work-layout,.management-layout { display:grid; grid-template-columns:minmax(175px, .85fr) minmax(0,3fr); gap:20px; align-items:start }
.management-layout { grid-template-columns:1.1fr 1fr }
.panel,.admin-card,.login,.admin-area>details { background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:clamp(16px,2vw,26px); box-shadow:0 6px 20px #18374409 }
.category-panel nav { display:grid; gap:3px }
.category { display:flex; align-items:center; gap:3px; min-width:0 }
.category a:first-child { flex:1; overflow-wrap:anywhere; color:var(--ink); border-radius:6px; padding:10px 12px; font-weight:550; text-decoration:none }
.category a:hover { background:#e7efee }
.category a[aria-current] { background:#dcecea; color:#124d59; box-shadow:inset 3px 0 #29747b }
.icon,.subtle,.move button { background:#edf3f2; color:var(--ocean); border:1px solid var(--line); border-radius:6px; display:inline-grid; min-width:40px; min-height:40px; place-items:center; padding:5px 9px; text-decoration:none; cursor:pointer }
.icon:hover,.subtle:hover,.move button:hover { background:#dce9e7 }
.filter-form { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) auto; align-items:end; gap:10px; padding-bottom:18px; border-bottom:1px solid var(--line) }
label { display:grid; gap:5px; font-size:.86rem; font-weight:600; color:var(--muted); min-width:0 }
input,select,textarea { width:100%; min-width:0; color:var(--ink); background:#fff; border:1px solid #afc1c3; border-radius:6px; min-height:42px; padding:8px 10px; font-size:1rem }
textarea { min-height:82px; resize:vertical }
input[type=checkbox] { width:auto; justify-self:start; min-height:unset }
.result-title { margin:20px 0 12px }
.result-title h3 { margin:0 }
.reset { font-size:.88rem }
.empty { display:grid; justify-items:center; text-align:center; gap:12px; padding:clamp(28px,5vw,60px) 10px; color:var(--muted); border:1px dashed #b6c8c8; border-radius:8px; background:#f1f6f48c }
.empty h4 { margin:0; font-size:.97rem; font-weight:550 }
.logmark { width:30px; height:36px; border:2px solid #699294; border-left-width:5px; border-radius:3px; background:repeating-linear-gradient(0deg,transparent 0 5px,#aac0bf 5px 6px) 50% 38% / 13px 13px no-repeat }
.job,.manual { display:flex; gap:8px; align-items:flex-start; padding:13px 0; border-top:1px solid var(--line) }
.job details,.manual>a { flex:1; min-width:0 }
summary { cursor:pointer; font-weight:650; overflow-wrap:anywhere }
.job summary { display:flex; align-items:center; gap:10px; list-style:none }
.job summary::-webkit-details-marker { display:none }
.job summary::before { content:"›"; color:#497579; font-size:1.35rem; transition:transform .15s }
.job details[open] summary::before { transform:rotate(90deg) }
.summary-text { flex:1; min-width:0; overflow-wrap:anywhere }
.summary-text small { display:block; color:var(--muted); font-weight:400; font-size:.81rem }
.badge { background:var(--pale); color:var(--dark); border-radius:20px; padding:4px 9px; font-size:.75rem; white-space:nowrap }
.tools,.foot-links,.move { display:flex; gap:6px; align-items:center }
.job-body { padding:10px 0 0 18px; overflow-wrap:anywhere }
.job-body p { margin:7px 0 }
.photo img,.admin-area label img { width:105px; height:77px; object-fit:cover; border-radius:6px; margin:4px }
.viewer { max-width:95vw; max-height:94vh; border:0; border-radius:12px; background:#102d40; padding:12px }
.viewer form { text-align:right; margin-bottom:6px }.viewer img { display:block; max-height:77vh; max-width:85vw; object-fit:contain }
.viewer::backdrop { background:#081824d9 }
.admin-area,.login,.admin-card { margin-top:24px }
.foot-links { margin:14px 0; gap:18px; flex-wrap:wrap }
details form:not(.tools form),.library>label { margin:14px 0 0 }
details form { display:grid; gap:12px; justify-items:start }
details form>label { width:100% }
#editor form[enctype] { grid-template-columns:repeat(2,minmax(0,1fr)) }
#editor button[value="save"] { grid-column:1/-1; place-self:start }
#editor form label:has(textarea),#editor form label:has(input[type=file]) { grid-column:1/-1 }
.category-edit { border-top:1px solid var(--line); padding:12px 0 }
.order-list { margin:0 0 18px; padding:0; list-style:none; counter-reset:rank }
.order-list li { display:flex; align-items:center; gap:9px; min-height:50px; border-top:1px solid var(--line); counter-increment:rank }
.order-list li::before { content:counter(rank,decimal-leading-zero); font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums }
.order-list li>span:first-child { flex:1; overflow-wrap:anywhere }
.order-list input { width:5em }
.move button:disabled { opacity:.4; cursor:default }
.library>label { margin:0 0 18px; max-width:480px }
.manual { align-items:center }.manual>a { display:flex; align-items:center; gap:12px; text-decoration:none; overflow-wrap:anywhere }.manual>a>strong { flex:1 }
.filetype { border:1px solid #a7c3c1; background:#e5f0ee; border-radius:5px; padding:6px; font-size:.71rem; letter-spacing:.06em }
.notice { background:#fff2df; border:1px solid #cbaa75; padding:14px; border-radius:7px }
footer { display:flex; justify-content:space-between; align-items:center; margin:30px 0; border-top:1px solid #9cafb0; padding-top:16px; color:var(--muted) }
footer span { font:italic 1.3rem Georgia,serif }
@media (max-width:760px) {
  .shell { width:calc(100% - 28px); margin-top:14px }
  .hero { min-height:215px }
  .hero::before { background-size:auto 130%; background-position:right center }
  .hero::after { background:linear-gradient(90deg,#102d40f5 2%,#102d40d9 28%,#102d4040 76%) }
  .work-layout,.management-layout { grid-template-columns:1fr; gap:12px }
  .category-panel { padding:12px 14px }.category-panel h3 { margin-bottom:6px }
  .category-panel nav { display:flex; flex-wrap:wrap; gap:4px }
  .category a:first-child { padding:8px 10px }
  .metrics { gap:7px; margin-bottom:12px }
  .metric { flex-direction:column-reverse; align-items:flex-start; gap:6px; padding:10px 12px }
  .metric strong { font-size:1.55rem }.metric-name { font-size:.82rem }
}
@media (max-width:540px) {
  body::before { background-size:auto 185px; background-position:45% center }
  .hero { min-height:198px }.hero-text { padding:22px }
  .hero::after { background:linear-gradient(90deg,#102d40ed 2%,#102d40c9 45%,#102d4020 95%) }
  .primary { padding:0 5px; gap:0 }.primary a,.session button { padding:12px 10px; font-size:.86rem }
  .filter-form { grid-template-columns:minmax(0,1fr) auto }.filter-form label:first-of-type { grid-column:1/-1 }
  .job { flex-wrap:wrap }.job details { flex-basis:100% }.tools { margin-left:auto }
  #editor form[enctype] { grid-template-columns:1fr }.badge { white-space:normal;text-align:center }
  .section-heading .action { font-size:.87rem }.metric { padding:10px 8px }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important } }

.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap }

.hero h1 { line-height:0; margin:17px 0 15px }
.hero .home-title { display:inline-block; max-width:100%; border-radius:3px }
.boat-name { display:block; width:min(49vw,495px); height:auto; filter:drop-shadow(0 2px 5px #071e3370) }
@media(max-width:540px){.boat-name{width:min(70vw,330px)}}
.job-video{margin:12px 0}.job-video video{display:block;width:min(100%,540px);max-height:420px;background:#111;border-radius:6px}.job-video figcaption{font-size:.85rem}@media print{.job-video video{display:none}}
.vessel-row{display:flex;align-items:flex-start;gap:12px;flex:1;min-width:0}.vessel-row>div{min-width:0;overflow-wrap:anywhere}.vessel-file{display:inline-flex;text-decoration:none}.text-only-link{place-self:start;width:fit-content}