/* Shared tap controls for the staff pages (public/shared/noted-controls.js). Nothing here applies until a page opts
   in with data-choice, data-fill-target or one of the .nu-* classes below.
   Night tokens as plain values: fields and buttons 48px, chips and toggles 44px, spacing 12 / 24 / 48, the 3px
   charcoal focus ring, Open Sauce, charcoal and white, no green. */

/* The original control stays in the page as the source of truth, out of sight. */
.nu-choice-native{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;opacity:0!important;pointer-events:none!important}

/* Segmented, chips and cards share one button. */
.nu-choice{display:flex;flex-wrap:wrap;gap:12px;min-width:0;margin:0;padding:0;border:0;font-family:'Open Sauce',-apple-system,BlinkMacSystemFont,sans-serif}
.nu-choice[hidden]{display:none}
.nu-choice-option{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;
  min-height:44px;min-width:44px;margin:0;padding:10px 16px;box-sizing:border-box;border:1px solid #d6d6d6;border-radius:999px;
  background:#fff;color:#242424;font:500 15px/1.3 'Open Sauce',-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:0;text-align:center;
  cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color .15s,border-color .15s,color .15s}
.nu-choice-option[aria-checked="true"]{background:#242424;border-color:#242424;color:#fff}
/* The staff sheets give every button a raised shadow (!important); choices stay flat so the chosen one reads at a glance. */
.nu-choice-option:not(#nu-none),.nu-stepper > button:not(#nu-none){box-shadow:none!important}
.nu-choice-option:disabled{cursor:not-allowed;opacity:.45}
.nu-choice-option:focus-visible{outline:3px solid #242424;outline-offset:3px}
.nu-choice[aria-invalid="true"] .nu-choice-option:not([aria-checked="true"]){border-color:#8b3029}
@media (hover:hover) and (pointer:fine){.nu-choice-option:not(:disabled):not([aria-checked="true"]):hover{border-color:#242424}}

/* Segmented: one joined row of equal parts, for 2 to 5 short choices. */
.nu-choice-segmented{flex-wrap:nowrap;gap:0;width:100%;padding:4px;box-sizing:border-box;border:1px solid #d6d6d6;border-radius:var(--choice-radius,999px);background:#f6f6f6}
.nu-choice-segmented .nu-choice-option{flex:1 1 0;min-width:0;border:0;border-radius:var(--choice-radius,999px);background:transparent;padding:8px 10px}
.nu-choice-segmented .nu-choice-option[aria-checked="true"]{background:#242424;color:#fff}
.nu-choice-segmented .nu-choice-option:focus-visible{outline-offset:1px}
.nu-choice-segmented[aria-invalid="true"]{border-color:#8b3029}

/* Cards: a title and the one line that says what the choice means. */
.nu-choice-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.nu-choice-cards .nu-choice-option{display:grid;align-content:start;justify-items:start;gap:4px;min-height:48px;padding:12px 16px;border-radius:14px;text-align:left}
.nu-choice-title{font-weight:600}
.nu-choice-help{font-weight:400;font-size:14px;line-height:1.45;color:#676767}
.nu-choice-cards .nu-choice-option[aria-checked="true"]{background:#fff;color:#242424;border-color:#242424}
.nu-choice-cards .nu-choice-option[aria-checked="true"]:not(#nu-none){box-shadow:inset 0 0 0 1px #242424!important}

/* Stepper: minus, the number (still typeable), plus. */
.nu-stepper{display:inline-flex;align-items:stretch;justify-self:start;align-self:start;width:-webkit-fit-content;width:fit-content;min-height:48px;max-width:100%;border:1px solid #d6d6d6;border-radius:12px;background:#fff;overflow:hidden}
.nu-stepper[hidden]{display:none}
.nu-stepper .nu-stepper-less{order:0}
.nu-stepper .nu-stepper-input{order:1}
.nu-stepper .nu-stepper-more{order:2}
.nu-stepper > button{appearance:none;-webkit-appearance:none;flex:none;width:48px;min-height:46px;margin:0;padding:0;border:0;background:#fff;color:#242424;
  font:500 22px/1 'Open Sauce',-apple-system,BlinkMacSystemFont,sans-serif;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.nu-stepper > button:disabled{color:#b8b8b8;cursor:not-allowed}
.nu-stepper > button:focus-visible{outline:3px solid #242424;outline-offset:-3px}
/* Two :not(#nu-none) lift these over every staff field rule, which are !important too. The field token rule in
   noted-team-polish.css carries one id (:not(#staffPin)), so one :not(#nu-none) lost to it on the last type selector
   (1,2,1 against 1,2,2) and the number got its own rounded 48px box inside the frame. */
.nu-stepper > input.nu-stepper-input:not(#nu-none):not(#nu-none){flex:none;width:64px!important;min-width:0!important;height:46px!important;min-height:46px!important;margin:0!important;padding:0 4px!important;
  border:0!important;border-left:1px solid #e0e0e0!important;border-right:1px solid #e0e0e0!important;border-radius:0!important;box-shadow:none!important;
  background:#fff!important;color:#242424!important;font:600 17px/1 'Open Sauce',-apple-system,BlinkMacSystemFont,sans-serif!important;text-align:center;
  -moz-appearance:textfield;appearance:textfield}
.nu-stepper > input.nu-stepper-input::-webkit-inner-spin-button,.nu-stepper > input.nu-stepper-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.nu-stepper:focus-within{border-color:#242424}
.nu-stepper > input.nu-stepper-input:not(#nu-none):not(#nu-none):focus-visible{outline:3px solid #242424!important;outline-offset:-3px!important}
.nu-stepper-limit{display:block;margin-top:12px;font:400 14px/1.4 'Open Sauce',-apple-system,BlinkMacSystemFont,sans-serif;color:#676767}
.nu-stepper-limit[hidden]{display:none}

/* A chip that fills a field (data-fill-target). A row of them sits under the field. */
.nu-fill-chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.nu-fill-chip,[data-fill-target].nu-fill-chip{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;min-height:44px;margin:0;padding:10px 16px;
  box-sizing:border-box;border:1px solid #d6d6d6;border-radius:999px;background:#fff;color:#242424;
  font:500 15px/1.3 'Open Sauce',-apple-system,BlinkMacSystemFont,sans-serif;text-align:left;cursor:pointer;touch-action:manipulation}
.nu-fill-chip:focus-visible{outline:3px solid #242424;outline-offset:3px}
@media (hover:hover) and (pointer:fine){.nu-fill-chip:hover{border-color:#242424}}

/* The action bar that stays in view at the bottom of a long form. Inside a scrolling sheet it sits at the
   sheet's foot; on the page it clears the phone's safe area. */
.nu-sticky-actions{position:-webkit-sticky;position:sticky;bottom:0;z-index:30;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px;
  margin-top:24px;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #e0e0e0;box-shadow:0 -12px 24px -18px #00000033}
.nu-sticky-actions > *{margin:0}
/* Stronger than the page sheets that stack and stretch action rows on narrow screens (.po-actions): the bar is one row. */
.nu-sticky-actions:not(#nu-none){flex-direction:row}
.nu-sticky-actions > :is(button,a):not(#nu-none){width:auto}
.nu-sticky-actions > :is(button,a){min-height:48px}
.nu-sticky-actions .nu-sticky-start{margin-right:auto}
.nu-sticky-actions .nu-sticky-note{flex:1 1 100%;order:-1;margin:0;font-size:14px;line-height:1.4}
.nu-sticky-actions .nu-sticky-note:empty{display:none}
@media (max-width:600px){
  /* No tab bar on phones (the header has no pills): the bar sits at the foot of the screen, over the safe area. */
  .nu-sticky-actions{bottom:0;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  /* One row on a phone: the way back on the left, the primary filling the rest. */
  .nu-sticky-actions > :is(button,a):not(#nu-none){flex:1 1 0;min-width:0}
  .nu-sticky-actions > .nu-sticky-start:not(#nu-none){flex:0 1 auto}
}
/* While the on-screen keyboard is up, the bar lets go and sits at the end of the form. */
.nu-typing .nu-sticky-actions{position:relative;bottom:auto;box-shadow:none}

/* Day stepper with a Today chip, for Reports and The Book. */
.nu-daybar{display:grid;grid-template-columns:48px minmax(140px,280px) 48px auto;justify-content:start;align-items:center;gap:12px;min-height:48px;font-family:'Open Sauce',-apple-system,BlinkMacSystemFont,sans-serif}
.nu-daybar .nu-daybar-step{appearance:none;-webkit-appearance:none;flex:none;display:inline-flex;align-items:center;justify-content:center;width:48px!important;
  min-width:48px!important;height:48px;min-height:48px!important;margin:0;padding:0!important;border:1px solid #d6d6d6;border-radius:12px;background:#fff;color:#242424;
  font:500 22px/1 'Open Sauce',-apple-system,BlinkMacSystemFont,sans-serif;cursor:pointer;touch-action:manipulation}
.nu-daybar .nu-daybar-step:disabled{color:#b8b8b8;cursor:not-allowed}
.nu-daybar .nu-daybar-date{min-width:0;margin:0}
.nu-daybar .nu-daybar-date :is(.ndp,.ndp-field,input[type="date"]:not(.ndp-native)){width:100%}
.nu-daybar .nu-daybar-date :is(.ndp-field,input[type="date"]:not(.ndp-native)){min-height:48px}
/* Room for the picker's calendar icon in a narrow bar (the staff input padding would run the date under it). */
.nu-daybar .nu-daybar-date .ndp-field:not(#nu-none){padding-right:44px!important}
.nu-daybar .nu-daybar-today{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;box-sizing:border-box;border:1px solid #d6d6d6;
  border-radius:999px;background:#fff;color:#242424;font:500 15px/1 'Open Sauce',-apple-system,BlinkMacSystemFont,sans-serif;text-decoration:none;white-space:nowrap}
.nu-daybar .nu-daybar-today[aria-current]{background:#242424;border-color:#242424;color:#fff}
.nu-daybar :is(.nu-daybar-step,.nu-daybar-today):focus-visible{outline:3px solid #242424;outline-offset:3px}
@media (hover:hover) and (pointer:fine){.nu-daybar :is(.nu-daybar-step,.nu-daybar-today):hover{border-color:#242424}}
/* A phone: the date gets the whole first line; the arrows and Today sit together under the thumb. */
@media (max-width:480px){
  .nu-daybar{grid-template-columns:48px minmax(0,1fr) 48px;grid-template-areas:"date date date" "prev today next"}
  .nu-daybar > .nu-daybar-date{grid-area:date}
  .nu-daybar > .nu-daybar-step:first-child{grid-area:prev}
  .nu-daybar > .nu-daybar-step:not(:first-child){grid-area:next}
  .nu-daybar > .nu-daybar-today{grid-area:today;justify-self:center}
  .nu-choice-segmented .nu-choice-option{font-size:14px;padding:8px 6px}
}
/* Put .nu-daybar-sticky on the card or section that holds the bar: it stays under the header (its real height,
   --nu-header-h from noted-ui.js) and over the fade under it while the report scrolls. */
.nu-daybar-sticky{position:-webkit-sticky;position:sticky;top:var(--nu-header-h,88px);z-index:30;background:#fff}
/* On a short screen (iPhone SE) a stuck day bar would take a third of the view: it scrolls with the page there. */
@media (max-height:699px){.nu-daybar-sticky{position:static}}
.nu-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}

@media (prefers-reduced-motion:reduce){.nu-choice-option{transition:none}}
@media (forced-colors:active){.nu-choice-option[aria-checked="true"]{outline:2px solid CanvasText}}