/* noted. date picker. Staff pages only, after noted-team-polish.css.
   Modeled on the Apple calendar popover, in Sage. No browser blue anywhere. */

/* Native controls left on staff pages use Sage too. */
body.noted-staff{accent-color:#5A6247}

/* ---------- The field ---------- */
.ndp{position:relative;display:block;width:100%;min-width:0}
.ndp[hidden]{display:none!important}
.ndp>.ndp-native{position:absolute!important;left:0!important;top:0!important;width:1px!important;height:1px!important;
  min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;
  opacity:0!important;pointer-events:none!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap}
.ndp>.ndp-field{display:block;width:100%;padding-right:48px!important;text-overflow:ellipsis;cursor:pointer}
.ndp>.ndp-field:disabled{cursor:not-allowed}
.ndp>.ndp-field[readonly]{cursor:default}
.ndp>.ndp-field::selection{background:rgba(90,98,71,.22)}
.ndp>.ndp-icon{position:absolute!important;top:0;bottom:0;right:2px;z-index:1;margin:auto 0;width:44px;height:44px;min-width:44px;min-height:44px;
  padding:0;border:0;border-radius:12px;background:transparent!important;box-shadow:none!important;transform:none!important;
  color:#676767;display:grid;place-items:center;cursor:pointer}
.ndp>.ndp-icon svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ndp>.ndp-icon:disabled{opacity:.4;cursor:not-allowed}
.ndp.ndp-open>.ndp-icon{color:#5A6247}
/* Staff pages raise every button with an important shadow. The never-matching id in :is() lifts
   these rules above that, so the field icon and the calendar's buttons stay flat. */
:is(.ndp,#ndp-lift)>.ndp-icon,:is(.ndp,#ndp-lift)>.ndp-icon:hover,:is(.ndp,#ndp-lift)>.ndp-icon:active,
:is(#ndp-pop,.ndp-pop) button,:is(#ndp-pop,.ndp-pop) button:hover,:is(#ndp-pop,.ndp-pop) button:active{box-shadow:none!important;transform:none!important}
:is(.ndp,#ndp-lift)>.ndp-icon:focus-visible{outline:2px solid #5A6247!important;outline-offset:-2px!important}

/* ---------- The calendar ---------- */
.ndp-pop{position:fixed;z-index:10000;left:0;top:0;width:332px;max-width:calc(100vw - 16px);outline:none;text-align:left;
  font-family:'Open Sauce',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;color:#1d1d1f;-webkit-font-smoothing:antialiased;
  -webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.ndp-pop[hidden],.ndp-backdrop[hidden],.ndp-pop [hidden]{display:none!important}
.ndp-card{background:#fff;border-radius:14px;padding:10px 12px 6px;transform-origin:top left;
  box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.06),0 14px 36px rgba(0,0,0,.16)}
.ndp-pop button{font-family:inherit;-webkit-appearance:none;appearance:none}
.ndp-pop button:disabled{cursor:default}

.ndp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;height:44px;margin:0 0 2px}
.ndp-title{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 8px;margin:0 0 0 -8px;border:0;border-radius:10px;
  background:transparent!important;box-shadow:none!important;color:#1d1d1f;font-size:17px;font-weight:600;line-height:1.2;letter-spacing:-.02em;cursor:pointer}
.ndp-title-chev{fill:none;stroke:#5A6247;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.ndp-choosing .ndp-title{color:#5A6247}
.ndp-choosing .ndp-title-chev{transform:rotate(90deg)}
.ndp-nav{display:flex;gap:2px;margin-right:-8px}
.ndp-step{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:0;border-radius:10px;background:transparent!important;
  box-shadow:none!important;color:#5A6247;display:grid;place-items:center;cursor:pointer}
.ndp-step svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ndp-step:disabled{color:#c7c7cc}

.ndp-body{height:292px}
.ndp-grid{width:100%;margin:0;border-collapse:collapse;border-spacing:0;table-layout:fixed}
.ndp-grid th{height:28px;padding:0;text-align:center;font-size:12px;font-weight:600;letter-spacing:.02em;color:#767676}
.ndp-grid td{height:44px;padding:0;text-align:center;vertical-align:middle;cursor:pointer;outline:none}
.ndp-num{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;font-size:17px;font-weight:400;line-height:1;
  font-variant-numeric:tabular-nums;color:#1d1d1f;transition:background-color .12s ease,color .12s ease}
.ndp-grid td.is-outside .ndp-num{color:#a1a1a6}
.ndp-grid td.is-today .ndp-num{color:#5A6247;font-weight:600}
.ndp-grid td.is-selected .ndp-num{background:#5A6247;color:#fff;font-weight:600}
.ndp-grid td.is-disabled{cursor:default}
.ndp-grid td.is-disabled .ndp-num{color:#d1d1d6;font-weight:400}

/* The month and year chooser: two short wheels, the chosen row in a Sage band. */
.ndp-chooser{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:8px;height:292px}
.ndp-col{position:relative;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:124px 0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 74%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 74%,transparent 100%)}
.ndp-col::-webkit-scrollbar{display:none}
.ndp-opt{height:44px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:17px;color:#1d1d1f;
  font-variant-numeric:tabular-nums;cursor:pointer;outline:none}
.ndp-opt[aria-selected="true"]{background:rgba(90,98,71,.13);color:#5A6247;font-weight:600}
.ndp-opt[aria-disabled="true"]{color:#c7c7cc;cursor:default}

.ndp-foot{display:flex;align-items:center;justify-content:space-between;margin-top:2px;padding-top:2px;border-top:1px solid #e5e5ea}
.ndp-action{min-height:44px;padding:0 10px;margin:0 -10px;border:0;border-radius:10px;background:transparent!important;box-shadow:none!important;
  color:#5A6247;font-size:16px;font-weight:600;letter-spacing:-.01em;cursor:pointer}
.ndp-action:last-child{margin-left:auto}
.ndp-action:disabled{color:#c7c7cc}
.ndp-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media (hover:hover) and (pointer:fine){
  .ndp>.ndp-icon:not(:disabled):hover{color:#5A6247}
  .ndp-title:hover,.ndp-step:not(:disabled):hover,.ndp-action:not(:disabled):hover{background:rgba(90,98,71,.08)!important}
  .ndp-grid td:not(.is-disabled):not(.is-selected):hover .ndp-num{background:rgba(90,98,71,.1)}
  .ndp-opt:not([aria-disabled="true"]):not([aria-selected="true"]):hover{background:rgba(90,98,71,.07)}
}

/* Focus rings in Sage, above the staff pages' own ring rules. */
.ndp-pop.ndp-pop.ndp-pop:focus-visible{outline:none!important}
.ndp-pop.ndp-pop.ndp-pop button:focus-visible{outline:2px solid #5A6247!important;outline-offset:2px!important}
.ndp-pop.ndp-pop.ndp-pop .ndp-grid td:focus-visible{outline:none!important}
.ndp-grid td:focus-visible .ndp-num{box-shadow:0 0 0 2px #fff,0 0 0 4px #5A6247}
.ndp-pop.ndp-pop.ndp-pop .ndp-opt:focus-visible{outline:2px solid #5A6247!important;outline-offset:-2px!important}

/* ---------- A bottom sheet on a phone ---------- */
.ndp-backdrop{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.28);animation:ndp-fade .2s ease}
.ndp-pop.ndp-sheet{max-width:none}
.ndp-sheet .ndp-card{border-radius:16px 16px 0 0;padding:12px 16px calc(10px + env(safe-area-inset-bottom));transform-origin:bottom center;
  box-shadow:0 -8px 30px rgba(0,0,0,.14)}
.ndp-sheet .ndp-card>.ndp-head,.ndp-sheet .ndp-card>.ndp-body,.ndp-sheet .ndp-card>.ndp-foot{max-width:440px;margin-left:auto;margin-right:auto}

.ndp-card.ndp-enter{animation:ndp-in .16s cubic-bezier(.2,.7,.2,1)}
.ndp-sheet .ndp-card.ndp-enter{animation:ndp-up .24s cubic-bezier(.2,.8,.2,1)}
@keyframes ndp-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@keyframes ndp-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes ndp-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .ndp-card.ndp-enter,.ndp-sheet .ndp-card.ndp-enter,.ndp-backdrop{animation:none}
  .ndp-title-chev,.ndp-num{transition:none}
}