/* Shared navigation sizing and placement across every inner page. */
html{background:#f1f6f6}
header .head{flex-wrap:wrap}
header .head > nav.nav,
header .head > nav.head-actions{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  width:100%;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
}
header .head > nav.head-actions > .status{grid-column:1 / span 3}
header .head > nav.head-actions > .install-app{grid-column:4 / span 2}
header .head > nav.nav > a,
header .head > nav.head-actions > a.nav-link{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:9px 11px;
  border-radius:9px;
  white-space:nowrap;
  line-height:1.2;
}
@media(max-width:900px){
  header .head > nav.nav,
  header .head > nav.head-actions{width:100%;}
}
@media(max-width:600px){
  header .head > nav.nav,
  header .head > nav.head-actions{grid-template-columns:repeat(2,minmax(0,1fr));}
  header .head > nav.head-actions > .status,
  header .head > nav.head-actions > .install-app{grid-column:auto}
}

/* Compact inner-page navigation menu. */
header .head > nav.page-nav-ready{
  display:block;
  position:relative;
  width:100%;
}
header .page-nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:9px 15px;
  border:1px solid #50beb4;
  border-radius:9px;
  background:#50beb4;
  color:#061819;
  font:800 .86rem/1.2 Inter,system-ui,sans-serif;
  cursor:pointer;
}
header .page-nav-toggle::after{content:'⌄';font-size:1.1rem;line-height:.8}
header .page-nav-toggle[aria-expanded="true"]::after{content:'⌃'}
header .page-nav-links{
  display:none;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  margin-top:7px;
  padding:8px;
  border:1px solid rgba(137,221,212,.5);
  border-radius:10px;
  background:#0b2726;
}
header .page-nav-ready.page-nav-open .page-nav-links{display:grid}
header .page-nav-links > a{width:100%!important}
.ecsi-nav-transition{position:fixed;inset:0;z-index:9999;background:#f1f6f6;pointer-events:none;opacity:1}
.ecsi-nav-transition::after{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:#50beb4;transform-origin:left;animation:ecsiNavProgress .35s ease-out both}
@keyframes ecsiNavProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:700px){header .page-nav-links{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Quiet, consistent finish across the working pages. */
main h1{letter-spacing:-.025em;text-wrap:balance}
main h2{letter-spacing:-.015em}
main :is(.intro,.heading) > p{max-width:70ch;line-height:1.55}
:is(button,a,input,select,textarea,summary):focus-visible{
  outline:3px solid #176e6b;
  outline-offset:3px;
}
button:not(:disabled),a,summary{transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
button:not(:disabled):active{transform:scale(.98)}
main :is(.panel,.card){box-shadow:0 8px 24px rgba(16,44,44,.055)}
.feedback.ok,.status.ok,.save-status.ok{
  color:#145b54;
  background:#ecf8f5;
  border-left:3px solid #50beb4;
  border-radius:4px;
  padding:5px 9px;
}
@media(max-width:600px){
  main{min-width:0}
  main :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,button){font-size:16px}
  main :is(button,select,input:not([type="checkbox"]):not([type="radio"])){min-height:44px}
  .task-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .task-nav button{min-width:0;width:100%;white-space:normal;line-height:1.25}
  .slips-layout{min-width:0}
}
@media(prefers-reduced-motion:reduce){
  button:not(:disabled),a,summary{transition:none}
  button:not(:disabled):active{transform:none}
  .ecsi-nav-transition::after{animation:none}
}