/* A compact navigation layer over the complete RODOS prototype. */
:root{--nav:#07364b;--accent:#087f82;--line:#dce7eb;--canvas:#f3f7f9}
body{background:var(--canvas)}
.sidebar{width:270px;padding:22px 14px;gap:16px;box-shadow:4px 0 20px #092f3a0a}
.sidebar .brand{justify-content:center;margin:0 6px;padding:0 0 12px;border-bottom:1px solid #ffffff24}
.sidebar .brand img{width:118px;height:auto;max-height:96px;object-fit:contain}
.sidebar-caption{margin:0 10px 2px;color:#9bc3cc;font-size:.7rem;letter-spacing:.14em}
.sidebar nav{display:flex;flex-direction:column;gap:7px;overflow-y:auto;min-height:0;padding:2px 2px 8px;scrollbar-width:thin;scrollbar-color:#5b8a96 transparent}
.sidebar nav>.nav-item,.nav-group>summary{width:100%;min-height:56px;border-radius:11px;display:flex;align-items:center;gap:10px;padding:10px 13px;text-align:left;color:#e3eff2;background:#ffffff0b;border:1px solid transparent}
.sidebar nav>.nav-item{justify-content:space-between}
.sidebar nav>.nav-item:hover,.nav-group>summary:hover,.nav-group[open]>summary{background:#ffffff1c;color:#fff}
.sidebar nav>.nav-item.active{background:#1b5264;border-color:#5e9a9c;box-shadow:inset 3px 0 #26d3ab}
.nav-group{display:block;border-radius:11px}.nav-group[hidden],.nav-item[hidden]{display:none!important}
.nav-group>summary{cursor:pointer;list-style:none}.nav-group>summary::-webkit-details-marker{display:none}
.nav-group-icon{display:grid;place-items:center;width:22px;flex:0 0 22px;color:#8ed9cb;font-size:19px}
.nav-group-icon svg{display:block;width:22px;height:22px}
.nav-copy{display:flex;min-width:0;flex:1;flex-direction:column;gap:2px;line-height:1.25}
.nav-copy strong{font-size:.91rem;font-weight:750;color:inherit}.nav-copy small{display:block;font-size:.69rem;color:#aecbd2;line-height:1.25;font-weight:450}
.nav-chevron{width:9px;height:9px;border-right:2px solid #9dbec6;border-bottom:2px solid #9dbec6;transform:rotate(45deg);transition:transform .2s ease;margin:0 4px 4px 0;flex:0 0 9px}.nav-group[open] .nav-chevron{transform:rotate(225deg);margin-top:7px}
.nav-subitems{display:grid;gap:3px;padding:5px 0 6px 16px;border-left:1px solid #4b7480;margin-left:23px}
.nav-subitems .nav-item{display:flex;align-items:center;justify-content:space-between;gap:7px;width:100%;min-height:48px;padding:8px 11px;border-radius:9px;border:1px solid transparent;background:transparent;color:#d3e6eb;text-align:left}
.nav-subitems .nav-item:hover{background:#ffffff16;color:#fff}.nav-subitems .nav-item.active{background:#ffffff20;border-color:#ffffff24;color:#fff;box-shadow:inset 3px 0 #26d3ab}
.nav-subitems .nav-copy strong{font-size:.82rem}.nav-subitems .nav-copy small{font-size:.65rem}
.sidebar-foot{border-top:1px solid #ffffff24;padding:12px 9px 0;font-size:.75rem}.sidebar-foot a{color:#c2f3e9;text-decoration:none}.sidebar-foot a:hover{text-decoration:underline}
.workspace{margin-left:270px}.topbar{min-height:68px;padding:11px 26px;position:sticky;top:0;z-index:7;box-shadow:0 2px 12px #092f3a0a}.topbar-tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.data-note{position:relative}.data-note>summary{list-style:none;cursor:pointer;border:1px solid #d2e2e7;border-radius:9px;padding:9px 12px;background:#f2f8f9;color:#315566;font-size:.81rem;font-weight:700;white-space:nowrap}.data-note>summary::-webkit-details-marker{display:none}.data-note>summary:after{content:'⌄';margin-left:8px;color:#087f82}.data-note[open]>summary{background:#e6f4f2;border-color:#9fcfc8}.data-note-card{position:absolute;right:0;top:calc(100% + 9px);width:min(340px,85vw);padding:16px 18px;background:#fff;color:#345765;border:1px solid #cfe2e4;border-radius:13px;box-shadow:0 16px 45px #0a364032;line-height:1.5;font-size:.85rem;z-index:12}
main#view{padding-top:24px}.page-head{margin-bottom:18px}.page-head h1{font-size:clamp(1.65rem,2.5vw,2.3rem)}
button:not(:disabled):not([hidden]){transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,background-color .18s ease,border-color .18s ease,filter .18s ease}
button:not(:disabled):not([hidden]):hover{transform:translateY(-2px);box-shadow:0 7px 18px #103f4929;filter:brightness(1.025)}
button:not(:disabled):not([hidden]):active{transform:translateY(1px) scale(.98);box-shadow:0 2px 7px #103f4924}
button:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #26c5a4;outline-offset:2px}
.button,.alarm-control,.site-tab,.nav-item{border-radius:9px}.button{font-weight:700}.button.secondary:hover,.alarm-control:hover,.site-tab:hover{background:#edf7f5;border-color:#a8d4ca}
select:not([multiple]){appearance:none;-webkit-appearance:none;padding-right:37px;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='m2 2 5 5 5-5' fill='none' stroke='%23087f82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;border-radius:9px;border-color:#bcd2d9;cursor:pointer}
select:not([multiple]):hover{border-color:#55a9a1;background-color:#f7fbfa}
dialog{border:1px solid #c9dfe2;border-radius:16px;background:#fff;box-shadow:0 24px 85px #061e3159;padding:24px;max-height:min(85vh,800px);overflow:auto}
dialog[open]{animation:dialog-enter .2s cubic-bezier(.2,.8,.2,1)}dialog::backdrop{background:#05273791;backdrop-filter:blur(3px)}
@keyframes dialog-enter{from{opacity:0;transform:translateY(9px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
dialog .dialog-head,dialog h2{color:#123546}dialog .dialog-actions{border-top:1px solid #e3edf0;padding-top:17px}
.login-note{max-width:58ch}
@media(max-width:1200px){.sidebar{width:242px}.workspace{margin-left:242px}.nav-copy small{font-size:.66rem}}
@media(max-width:760px){.sidebar{position:static;width:100%;padding:12px 14px}.sidebar .brand{justify-content:flex-start;margin:0}.sidebar .brand img{width:92px;max-height:75px}.sidebar nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}.sidebar-caption,.sidebar-foot{display:none}.nav-group>summary,.sidebar nav>.nav-item{min-height:53px}.nav-copy small{font-size:.65rem}.nav-subitems{margin-left:12px;padding-left:10px}.nav-subitems .nav-item{min-height:42px}.workspace{margin-left:0}.topbar{position:relative;min-height:0;padding:12px 16px}.topbar-tools{gap:6px}.data-note{order:3}main#view{padding-top:18px}}
@media(max-width:430px){.sidebar nav{grid-template-columns:1fr 1fr;gap:5px}.nav-group-icon{display:none}.nav-group>summary,.sidebar nav>.nav-item{padding:8px 10px}.nav-copy strong{font-size:.78rem}.nav-copy small{font-size:.6rem}.topbar{align-items:flex-start}.data-note-card{right:auto;left:0}}
@media(prefers-reduced-motion:reduce){button:not(:disabled):not([hidden]),.nav-chevron{transition:none}button:not(:disabled):not([hidden]):hover,button:not(:disabled):not([hidden]):active{transform:none}dialog[open]{animation:none}}

/* Keep information cells in a common rhythm across the working screens. */
main#view .stats,
main#view .overview-grid,
main#view .ux-priorities,
main#view .fo-cards,
main#view .inspection-grid,
main#view .card-grid,
main#view .report-summary{align-items:stretch}
main#view .stats{grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr));gap:14px}
main#view .production-stats{grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr))}
main#view .stat,
main#view .overview-card,
main#view .ux-priorities>*,
main#view .fo-cards>*,
main#view .inspection-card,
main#view .card-grid>*{min-width:0;height:100%}
main#view .stat{display:flex;flex-direction:column;justify-content:space-between;gap:5px;padding:18px}
main#view .stat-value,
main#view .summary-value,
main#view .overview-card .stat-value{font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.22;overflow-wrap:anywhere}
main#view .stat-note{line-height:1.4;margin-top:auto}
main#view .ux-priorities{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px}
main#view .ux-priorities>.panel{display:flex;flex-direction:column;gap:10px;margin-bottom:0;padding:18px}
main#view .ux-priorities h3{margin:0;line-height:1.3;min-height:2.6em}
main#view .ux-priorities .button{margin-top:auto;align-self:flex-start}
main#view .overview-grid:not(.ux-finance-summary){grid-template-columns:repeat(auto-fit,minmax(min(100%,195px),1fr))}
main#view .overview-card{display:flex;flex-direction:column;gap:7px;padding:18px}
main#view .overview-card small{margin-top:auto;line-height:1.35}

main#view .pool-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px;align-items:stretch}
main#view .pool-card{height:100%;grid-template-rows:auto auto minmax(88px,auto) 1fr;gap:12px;padding:16px}
main#view .pool-card.selected{padding:15px}
main#view .pool-card .card-head{align-items:start;min-height:24px;gap:6px 10px}
main#view .pool-card .card-head small{text-align:right}
main#view .pool-metrics{grid-template-rows:repeat(3,minmax(44px,auto));gap:9px}
main#view .pool-metric{min-width:0;align-content:center;line-height:1.25}
main#view .pool-metric>span,
main#view .pool-metric>strong{min-width:0;overflow-wrap:anywhere}
main#view .pool-metric strong{line-height:1.2}
main#view .fo-density{min-width:0;line-height:1.35}
main#view .fo-density meter{margin:9px 0}
main#view .rodos-water{gap:6px;line-height:1.3;align-content:start}

main#view .grid-two,
main#view .form-grid,
main#view .report-summary{align-items:stretch}
main#view .form-grid>*{min-width:0}
main#view .details{grid-template-columns:minmax(0,1fr) minmax(0,auto);align-items:baseline}
main#view .details dd{overflow-wrap:anywhere}
main#view .table-wrap,
main#view .ff-table-scroll,
main#view .metrics-scroll{max-width:100%;overflow-x:auto}
main#view table:not(.ff-journal-table):not(.aq-planner):not(.aq-table):not(.aq-journal){width:100%}
main#view table:not(.ff-journal-table):not(.aq-planner):not(.aq-table):not(.aq-journal) th,
main#view table:not(.ff-journal-table):not(.aq-planner):not(.aq-table):not(.aq-journal) td{padding:10px 12px;line-height:1.35;vertical-align:middle}
main#view .report-summary p{height:100%;min-width:0;overflow-wrap:anywhere}
main#view .actions{align-items:center}

@media(max-width:1100px){
  main#view .split{grid-template-columns:minmax(0,1fr)}
  main#view .ux-priorities h3{min-height:0}
}
@media(max-width:760px){
  main#view .stats,
  main#view .production-stats,
  main#view .ux-priorities,
  main#view .overview-grid:not(.ux-finance-summary),
  main#view .pool-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
  main#view .stat,
  main#view .ux-priorities>.panel{padding:15px}
  main#view .pool-card{padding:14px}
  main#view .pool-card.selected{padding:13px}
}
@media(max-width:560px){
  main#view .stats,
  main#view .production-stats,
  main#view .ux-priorities,
  main#view .overview-grid:not(.ux-finance-summary),
  main#view .pool-grid,
  main#view .report-summary{grid-template-columns:minmax(0,1fr)}
  main#view .ux-finance-summary{grid-template-columns:minmax(0,1fr);gap:12px}
  main#view .pool-card .card-head{min-height:0}
}

/* Compact production overview and basin cards. */
main#view .executive-stats{gap:10px;margin-bottom:16px}
main#view .executive-stats .stat{padding:12px 15px;gap:3px}
main#view .executive-stats .stat-label{font-size:.8rem;line-height:1.25}
main#view .executive-stats .stat-value{font-size:clamp(1.14rem,1.8vw,1.38rem);margin:1px 0;font-weight:720}
main#view .executive-stats .stat-note{font-size:.72rem;line-height:1.3}
main#view .pool-card{grid-template-rows:auto auto minmax(72px,auto) 1fr;gap:8px;padding:12px}
main#view .pool-card.selected{padding:11px}
main#view .pool-card .card-head{min-height:21px;font-size:.83rem}
main#view .pool-metrics{grid-template-rows:repeat(3,minmax(38px,auto));gap:5px}
main#view .pool-metric{grid-template-columns:30px minmax(0,1fr);column-gap:8px;font-size:.75rem}
main#view .pool-metric .aq-icon{width:25px;height:25px}
main#view .pool-metric strong{font-size:.96rem}
main#view .pool-card .fo-density{margin-top:7px;padding-top:7px;font-size:.72rem;line-height:1.27}
main#view .pool-card .fo-density meter{margin:5px 0}
main#view .pool-card .rodos-water{padding-top:7px;gap:3px;font-size:.75rem;line-height:1.25}
main#view .pool-card .rodos-water>.water-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:1px 7px}
main#view .pool-card .rodos-water .water-line small{display:inline;margin:0;font-size:.68rem}
main#view .executive-pool-detail{align-self:start}
@media(max-width:760px){
  main#view .pool-card{padding:11px}
  main#view .pool-card.selected{padding:10px}
  main#view .executive-stats{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
}
/* Compact basin cards: preserve all metrics while reducing their height about 20%. */
main#view .pool-grid{gap:11px}
main#view .pool-card{grid-template-rows:auto auto auto auto;gap:6px;padding:10px}
main#view .pool-card.selected{padding:9px}
main#view .pool-card .card-head{min-height:18px;font-size:.79rem}
main#view .pool-card .card-head small{font-size:.67rem}
main#view .pool-metrics{grid-template-rows:repeat(3,minmax(31px,auto));gap:3px;margin:4px 0}
main#view .pool-metric{grid-template-columns:25px minmax(0,1fr);column-gap:7px;font-size:.7rem;line-height:1.13}
main#view .pool-metric .aq-icon{width:21px;height:21px}
main#view .pool-metric strong{font-size:.88rem;line-height:1.1}
main#view .pool-card .fo-density{margin-top:4px;padding-top:5px;font-size:.67rem;line-height:1.2}
main#view .pool-card .fo-density meter{margin:4px 0}
main#view .pool-card .rodos-water{margin-top:3px;padding:5px 0 0;gap:2px;font-size:.67rem;line-height:1.16}
main#view .pool-card .rodos-water .water-line small{font-size:.61rem}
.pool-history{border-top:1px solid #dce5ea;padding-top:12px}.pool-history h3{margin:0}.pool-history ol{list-style:none;padding:0;margin:12px 0}.pool-history li{display:grid;gap:2px;border-left:2px solid #b9d8e3;padding:4px 0 11px 12px;margin-bottom:5px;font-size:.76rem}.pool-history time,.pool-history small{color:#627b88}.pool-history strong{color:#173e55}.pool-history .subtle{font-size:.73rem}

/* Pool overview, expanded details and party provenance. */
main#view .executive-pool-layout{display:grid;gap:16px;align-items:start}
main#view .executive-pool-layout.overview{grid-template-columns:minmax(0,1fr)}
main#view .executive-pool-layout.expanded{grid-template-columns:minmax(270px,.75fr) minmax(350px,1fr)}
main#view .executive-pool-layout.overview .pool-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,225px),1fr))}
main#view .executive-pool-layout .panel-title{align-items:center;gap:12px;flex-wrap:wrap}
main#view .pool-layout-switch{margin-left:auto;gap:5px}
main#view .pool-layout-switch .site-tab{min-height:36px;padding:5px 9px;font-size:.72rem;white-space:nowrap}
main#view .pool-list{display:grid;gap:6px;margin-top:10px}
main#view .pool-list-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:8px;align-items:center;width:100%;text-align:left;border:1px solid #dce6e9;background:#fff;border-radius:10px;padding:10px;color:#193c4c;cursor:pointer;transition:background .18s,transform .18s,border-color .18s}
main#view .pool-list-row:hover{background:#eff9f8;transform:translateY(-1px)}
main#view .pool-list-row.selected{border-color:#078c83;background:#eaf8f5}
main#view .pool-list-row small{color:#5a727c}
main#view .pool-history .demo-history{margin-top:15px;padding:12px;border:1px solid #c6dce8;border-radius:10px;background:#f3f9fc}
main#view .pool-history .demo-history h4{margin:0 0 5px;color:#1d5670}
main#view .pool-history .demo-history p{margin:4px 0;font-size:.74rem;color:#476a7b}
main#view .pool-history .demo-history li{border-left-color:#4c9bbd}
main#view .party-panel{margin-top:18px;padding-top:15px;border-top:1px solid #dce5ea}
main#view .party-panel h3{margin:0}
main#view .party-panel .subtle{font-size:.74rem}
main#view .party-item{border:1px solid #d9e5e8;border-radius:9px;margin:8px 0;padding:9px;font-size:.75rem}
main#view .party-item summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;cursor:pointer}
main#view .party-item summary span{margin-left:auto;color:#4d6b78}
main#view .party-item p{margin:9px 0}
main#view .party-item ul{padding-left:20px;margin:8px 0}
main#view .party-item li{display:list-item;border:0;padding:0;margin:5px 0}
main#view .party-item .party-contact{color:#a75308;background:#fff4e3;padding:7px;border-radius:6px}
.party-allocation{border:1px solid #d7e5e8;border-radius:10px;padding:10px;margin:12px 0}
.party-allocation-row{display:grid;grid-template-columns:minmax(90px,1fr) repeat(2,minmax(100px,1fr));align-items:end;gap:9px;margin:8px 0}
@media(max-width:1050px){main#view .executive-pool-layout.expanded{grid-template-columns:minmax(0,1fr)}}
@media(max-width:650px){main#view .pool-list-row{grid-template-columns:32px minmax(0,1fr)}main#view .pool-list-row small{grid-column:2}.party-allocation-row{grid-template-columns:minmax(0,1fr)}}

/* One pool overview; the demonstration drill-down is a separate action. */
main#view .pool-card-wrap{min-width:0;display:flex;flex-direction:column;align-self:stretch}
main#view .pool-card-wrap .pool-card{width:100%;height:100%}
main#view .pool-ai-link{width:100%;margin-top:7px;border:1px solid #73b7be;border-radius:9px;background:#e9f5f8;color:#124e62;font-weight:700;padding:9px 10px;cursor:pointer;transition:background .18s,transform .18s,box-shadow .18s}
main#view .pool-ai-link:hover{background:#d4eef4;transform:translateY(-1px);box-shadow:0 4px 13px #14587720}
main#view .pool-ai-link:active{transform:scale(.98)}
main#view .pool-ai-detail{margin:12px 0 4px}
main#view .pool-ai-note{line-height:1.5}
main#view .pool-ai-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
main#view .pool-ai-goal{display:grid;grid-template-columns:minmax(0,1fr) 160px 185px;align-items:center;gap:18px}
main#view .pool-ai-goal h2{margin:0 0 5px}
main#view .pool-ai-goal p{margin:0;color:#657b87}
main#view .pool-ai-goal label{display:grid;gap:5px;color:#466b79;font-weight:700}
main#view .pool-ai-goal input{width:100%;padding:10px;border:1px solid #a8c6d4;border-radius:8px;font:inherit}
main#view .pool-ai-goal>div:last-child{display:grid;gap:2px;text-align:right}
main#view .pool-ai-goal>div:last-child strong{font-size:1.25rem}
main#view .pool-ai-goal>div:last-child span{color:#5d7c89}
main#view .pool-ai-chart svg,main#view .pool-ai-trends svg{width:100%;height:auto;max-height:350px;font-family:inherit}
main#view .pool-ai-trends{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
main#view .pool-ai-trends .panel:last-child{grid-column:1/-1}
main#view .pool-ai-trends p{font-size:.82rem;color:#566f7a}
main#view .pool-ai-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:8px 0;color:#466370;font-size:.79rem}
main#view .pool-ai-legend span{display:inline-flex;align-items:center;gap:6px}
main#view .pool-ai-legend i{display:inline-block;width:19px;height:3px;border-radius:3px}
main#view .pool-ai-legend .blue{background:#3276bf}
main#view .pool-ai-legend .green{background:#15977f}
main#view .pool-ai-legend .purple{background:#7952b3}
main#view .pool-ai-legend .dashed{background:repeating-linear-gradient(90deg,#7952b3 0 5px,transparent 5px 8px)}
main#view .chart-label{font-size:13px;fill:#2d596b;font-weight:700}
main#view .chart-tick{font-size:11px;fill:#607d89}
main#view .pool-ai-reasons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
main#view .pool-ai-reasons article{padding:13px;background:#f3f8f9;border:1px solid #dce9eb;border-radius:9px}
main#view .pool-ai-reasons p{font-size:.8rem;line-height:1.45}
main#view .pool-ai-records summary{cursor:pointer;font-weight:700;font-size:1.05rem}
main#view .pool-ai-records table{font-size:.78rem}
@media(max-width:1000px){main#view .pool-ai-stats{grid-template-columns:repeat(2,minmax(0,1fr))}main#view .pool-ai-reasons{grid-template-columns:1fr}}
@media(max-width:700px){main#view .pool-ai-goal,main#view .pool-ai-trends{grid-template-columns:1fr}main#view .pool-ai-goal>div:last-child{text-align:left}main#view .pool-ai-trends .panel:last-child{grid-column:auto}}
@media(max-width:520px){main#view .pool-ai-stats{grid-template-columns:1fr}}