/* portal.css - Winter Harbor Staff Portal (shell, sign-in, check page, and shared calculator styles). */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:"Segoe UI",Arial,sans-serif;background:#eef2f6;color:#1d2b36}
a{color:#0b3a5b}
[hidden]{display:none!important}
.mut{color:#6b7c8a;font-size:13px}
.btn{display:inline-block;background:#0b3a5b;color:#fff;border:0;border-radius:6px;padding:11px 16px;font-size:15px;cursor:pointer;text-decoration:none;font-family:inherit}
.btn:hover{background:#124d76}.btn.wide{width:100%}.btn.small{padding:6px 12px;font-size:13px}
.btn.ghost{background:#fff;color:#0b3a5b;border:1px solid #9fb3c4}
.in{width:100%;padding:11px;margin:8px 0;border:1px solid #c5d0da;border-radius:6px;font-size:15px;font-family:inherit}
.flash{padding:10px 14px;border-radius:8px;margin:10px 0;font-size:14px;text-align:left}
.flash.ok{background:#e6f4ea;border:1px solid #a8d5b5}.flash.err{background:#fdecea;border:1px solid #f1b0a8}
/* sign-in */
body.signin{background:#0b3a5b;display:flex;align-items:center;justify-content:center;min-height:100vh}
.lcard{background:#fff;border-radius:12px;padding:36px;width:360px;max-width:92vw;box-shadow:0 10px 40px rgba(0,0,0,.3);text-align:center;margin:40px auto}
.lcard img{width:220px;max-width:100%}.lcard h2{color:#0b3a5b;margin:10px 0}
/* shell */
.top{height:56px;background:#0b3a5b;color:#fff;display:flex;align-items:center;padding:0 18px;gap:12px}
.top img{height:36px;background:#fff;border-radius:4px;padding:2px 6px}.top .t{font-weight:600;font-size:18px}.sp{flex:1}
.topbtn{background:transparent;border:1px solid #fff8;color:#fff;border-radius:5px;padding:6px 12px;cursor:pointer;font-size:14px;text-decoration:none;font-family:inherit}
.topbtn:hover{background:#ffffff1a}.inl{display:inline;margin:0}.who{font-size:14px}
.menubtn{display:none}
body.shell{overflow:hidden}
.wrap{position:relative;height:calc(100vh - 56px);padding-left:60px}
/* Left menu: narrow icon rail; expands over the page on mouse-over or keyboard focus (the tool area never moves). */
nav{position:absolute;top:0;bottom:0;left:0;z-index:10;width:60px;background:#fff;border-right:1px solid #d6dee6;padding:10px 0;overflow-x:hidden;overflow-y:auto;
 transition:width .18s ease .35s,box-shadow .18s ease .35s;white-space:nowrap}
nav:hover,nav:focus-within{width:240px;box-shadow:4px 0 18px rgba(11,58,91,.18);transition-delay:.06s}
nav .sec{height:1px;background:#d6dee6;margin:10px 12px;position:relative}
nav .sec.first{height:0;margin:0 0 4px;background:transparent}
nav .sec span{position:absolute;left:6px;top:-8px;background:#fff;padding:0 6px;font-size:10px;letter-spacing:.08em;color:#6b7c8a;text-transform:uppercase;opacity:0;transition:opacity .12s}
nav .sec.first span{top:0}
nav:hover .sec span,nav:focus-within .sec span{opacity:1}
nav:hover .sec.first,nav:focus-within .sec.first{height:14px}
nav a{display:flex;align-items:center;gap:14px;height:44px;padding:0 16px 0 15px;color:#1d2b36;text-decoration:none;cursor:pointer;border-left:4px solid transparent}
nav a .ico{flex:none;color:#41566a}
nav a .lbl,nav .ver .lbl{opacity:0;transition:opacity .12s}
nav:hover a .lbl,nav:focus-within a .lbl,nav:hover .ver .lbl,nav:focus-within .ver .lbl{opacity:1;transition-delay:.1s}
nav a:hover,nav a:focus-visible{background:#f1f5f9;outline:none}
nav a.on{background:#e3edf5;border-left-color:#0b3a5b;font-weight:600;color:#0b3a5b}nav a.on .ico{color:#0b3a5b}
nav .ver{margin:24px 0 0;padding-left:18px;font-size:10px;color:#9aa8b4;opacity:0;transition:opacity .12s}
nav:hover .ver,nav:focus-within .ver{opacity:1}
main#main{height:100%;display:flex;flex-direction:column;min-width:0}
#frame{flex:1;width:100%;border:0;background:#eef2f6}
.appbar{display:flex;align-items:center;gap:12px;padding:8px 14px;background:#fff;border-bottom:1px solid #d6dee6}
.appbar b{color:#0b3a5b}
.fallback{margin:40px auto;max-width:520px;background:#fff;border-radius:10px;padding:28px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.fallback h2{color:#0b3a5b;margin-top:0}
@media (prefers-reduced-motion:reduce){nav,nav *{transition:none!important}}
@media (max-width:760px){
 .menubtn{display:inline-block}.who{display:none}
 body.navopen nav{width:240px;box-shadow:4px 0 18px rgba(11,58,91,.18)}
 body.navopen nav .lbl,body.navopen nav .sec span{opacity:1}
 .appbar .mut{display:none}
}
/* check page */
body.plainpage{background:#eef2f6}
.pagebox{max-width:860px;margin:20px auto;padding:0 14px}
.card{background:#fff;border-radius:10px;padding:18px 22px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.card h2{margin-top:0;color:#0b3a5b;font-size:18px}
table.plain{border-collapse:collapse;width:100%;font-size:14px}table.plain th,table.plain td{padding:6px 8px;border-bottom:1px solid #eef1f4;text-align:left;vertical-align:top}
td.ok{color:#1e7b34;font-weight:700}td.bad{color:#b3261e;font-weight:700}td.warn{color:#8a6100;font-weight:700}
pre{background:#f3f6f9;padding:10px;border-radius:6px;white-space:pre-wrap;word-break:break-all}