/* polish-shell.css: the redesign's top bar (feature_polish, html.nd-polish).
   Same DOM, same data and the same fit ladder as css/rail-canon.css and core/ui/rail.js. Only the
   clothes change, to the approved mockup (mockups/studio/polish-suite.css):
     - tabs are words on a soft pill, with no icons and no travelling underline
     - the search is a grey well with no border, and New is a pill
     - the bar is frosted, on a pseudo-element

   WHY THE FROST IS ON ::before. backdrop-filter on .nr itself would make it the containing block
   for its fixed children and trap its menus (see the Books header note in canon-chrome). A
   pseudo-element behind the content frosts the same area and traps nothing.

   Colours come from the rail's own --panel, --ink and --accent names, so a chosen look reaches all
   of this. portal-v2 also wears .nr, but customer pages never get html.nd-polish. */

:root.nd-polish .nr {
  --pl-fill: rgba(120, 120, 128, .12);
  --pl-fill-2: rgba(120, 120, 128, .2);
  --nr-ctl: 32px;
  /* Named here because the hub doesn't load tokens.css, so its --sp-* scale isn't there to use. */
  --pl-tab-x: 11px; --pl-new-l: 10px; --pl-new-r: 13px; --pl-you-l: 4px; --pl-you-r: 9px;
  background: transparent;
  border-bottom: 0;
  box-shadow: 0 .5px 0 var(--hair-2);
}
:root.nd-polish[data-theme="dark"] .nr {
  --pl-fill: rgba(120, 120, 128, .24);
  --pl-fill-2: rgba(120, 120, 128, .36);
}
:root.nd-polish .nr::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
:root.nd-polish.lk-opaque .nr::before {
  background: var(--panel);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:root.nd-polish .nr .nr-div { display: none; }

/* The app lockup */
:root.nd-polish .nr .nr-app { border: 0; }
:root.nd-polish .nr .nr-app:hover, :root.nd-polish .nr .nr-app[aria-expanded="true"] { background: var(--pl-fill); }

/* The tabs */
:root.nd-polish .nr .nr-tabs { align-items: center; }
/* A group stretches to the bar's height, so its shorter button has to be centred inside it. */
:root.nd-polish .nr .nr-tabs > .nr-group { align-items: center; }
:root.nd-polish .nr .nr-tabs > .nr-tab,
:root.nd-polish .nr .nr-tabs > .nr-group > .nr-tab {
  height: 32px; padding: 0 var(--pl-tab-x); border-radius: 8px;
  font-size: 13.5px; font-weight: 500;
  transition: background-color .15s linear, color .15s linear;
}
:root.nd-polish .nr .nr-tabs > .nr-tab:hover,
:root.nd-polish .nr .nr-tabs > .nr-group > .nr-tab:hover,
:root.nd-polish .nr .nr-tabs > .nr-group > .nr-tab[aria-expanded="true"] { background: var(--pl-fill); color: var(--ink); }
/* The live bar marks the current tab .is-active; .on is the older spelling it still styles. */
:root.nd-polish .nr .nr-tabs > .nr-tab:is(.on, .is-active),
:root.nd-polish .nr .nr-tabs > .nr-group > .nr-tab:is(.on, .is-active) { background: var(--pl-fill); color: var(--ink); font-weight: 600; }
:root.nd-polish .nr .nr-tabs > .nr-tab > i:first-child,
:root.nd-polish .nr .nr-tabs > .nr-group > .nr-tab > i:first-child:not(.nr-chev) { display: none; }
:root.nd-polish .nr .nr-tabs .nr-tab:is(.on, .is-active)::after { display: none; }
:root.nd-polish .nr .nr-ul { display: none; }
:root.nd-polish .nr .nr-tabs .nr-badge { min-width: 0; height: auto; padding: 0; background: none; border: 0; color: var(--ink-2); font-size: 12px; font-weight: 500; }

/* The search */
:root.nd-polish .nr .nr-find input { border-color: transparent; background: var(--pl-fill); }
:root.nd-polish .nr .nr-find input:hover { border-color: transparent; background: var(--pl-fill-2); }
:root.nd-polish .nr .nr-find input:focus { border-color: var(--accent); background: var(--panel); box-shadow: 0 0 0 3px var(--accent-ring); }
/* Not when the search is folded to its icon: the rail hides the word there by making it transparent. */
:root.nd-polish .nr:not(.is-searchfold) .nr-find:not(.is-compact) input::placeholder { color: var(--ink-2); }
/* The hub's search is a button that opens the palette, so it has no input to wear the well. */
:root.nd-polish .nr .nr-find:not(:has(input)) { height: var(--nr-ctl); border-radius: 9px; background: var(--pl-fill); cursor: pointer; transition: background-color .15s linear; }
:root.nd-polish .nr .nr-find:not(:has(input)):hover { background: var(--pl-fill-2); }
:root.nd-polish .nr:is(.is-searchfold) .nr-find:not(:has(input)), :root.nd-polish .nr .nr-find.is-compact:not(:has(input)) { padding: 0; }
/* The label already clears the icon. It has to stop short of the Ctrl K hint and end in an ellipsis. */
:root.nd-polish .nr .nr-find .nd-search-ph { color: var(--ink-2); min-width: 0; max-width: calc(100% - 56px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
:root.nd-polish .nr .nr-find > i { color: var(--ink-2); }
:root.nd-polish .nr .nr-find kbd { color: var(--ink-2); background: none; border-color: var(--hair-2); }

/* New, and the buttons on the right */
/* Padding only above the rung that folds these to an icon: the ladder saves its width by removing it. */
:root.nd-polish .nr .nr-new { border-radius: 999px; box-shadow: none; }
:root.nd-polish .nr:not(.is-tightest) .nr-new { padding: 0 var(--pl-new-r) 0 var(--pl-new-l); }
:root.nd-polish .nr .nr-new:hover, :root.nd-polish .nr .nr-new[aria-expanded="true"] { box-shadow: none; }
:root.nd-polish .nr .nr-ico { border: 0; border-radius: 50%; }
:root.nd-polish .nr .nr-ico:hover, :root.nd-polish .nr .nr-ico[aria-expanded="true"] { background: var(--pl-fill); }
:root.nd-polish .nr .nr-credit { border-color: transparent; }
:root.nd-polish .nr .nr-credit:hover, :root.nd-polish .nr .nr-credit[aria-expanded="true"] { background: var(--pl-fill); border-color: transparent; }
:root.nd-polish .nr .nr-you { border: 0; border-radius: 999px; }
:root.nd-polish .nr:not(.is-tighter) .nr-you { padding: 0 var(--pl-you-r) 0 var(--pl-you-l); }
:root.nd-polish .nr .nr-you:hover, :root.nd-polish .nr .nr-you[aria-expanded="true"] { background: var(--pl-fill); }
:root.nd-polish .nr .nr-you .nr-av { width: 25px; height: 25px; border: 0; border-radius: 50%; background: var(--pl-fill-2); color: var(--ink); }

/* Menus */
:root.nd-polish .nr .nr-menu { border: 0; border-radius: 14px; box-shadow: 0 0 0 .5px var(--hair-2), var(--sh-2); }
:root.nd-polish .nr .nr-row:hover, :root.nd-polish .nr .nr-appx:hover { background: var(--pl-fill); }
:root.nd-polish .nr .nr-sep { height: .5px; background: var(--hair-2); }
:root.nd-polish .nr .nr-cap { font-family: var(--font); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
:root.nd-polish .nr .nr-appx > i { border: 0; }

/* The narrowest desktop band. The rail's ladder measures and folds through a ResizeObserver, and when a
   window is dragged down to this edge it can stop short with the search still open, pushing the account
   button off screen (today's bar does the same, by 98px at 641). The search folds here without waiting. */
@media (min-width: 641px) and (max-width: 720px) {
  :root.nd-polish .nr:not(.is-searching) > .nr-find { flex: 0 0 var(--nr-ctl); min-width: var(--nr-ctl); padding: 0; }
  :root.nd-polish .nr:not(.is-searching) > .nr-find input { padding: 0; color: transparent; cursor: pointer; }
  :root.nd-polish .nr:not(.is-searching):not(.is-searchfold) > .nr-find:not(.is-compact) input::placeholder { color: transparent; }
  :root.nd-polish .nr:not(.is-searching) > .nr-find kbd, :root.nd-polish .nr:not(.is-searching) > .nr-find .nd-search-ph { display: none; }
  :root.nd-polish .nr:not(.is-searching) > .nr-find > i { left: 0; right: 0; text-align: center; }
}

/* The bottom bar on phones */
@media (max-width: 820px) {
  :root.nd-polish .ndtb { border-top: 0; box-shadow: 0 -.5px 0 var(--app-border-2); }
}

/* Menus and flyouts open softly and close quicker than they open.
   Three choices keep this from disturbing anything:
     - translate and scale, the separate properties, so a menu that JS places with transform stays where it's put
     - @starting-style, which fires however a menu appears: the hidden attribute, an inline display, or a new node
     - allow-discrete on display, so a menu closed with the hidden attribute can fade before it goes
   Nothing moves for anyone who has asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  :root.nd-polish :is(.nr-menu, .lt-dd__panel, .ui-actmenu__panel, .jm2-menu, .cx-more-menu, .qj-combo-menu, .v3-ta, .ml-picker, .sched-qc-pop, .sched-qc-menu, .sched-ub-pop, .sched-note-pop, .sched-stage-pop, .sched-qa-pop, .sched-bf-pop, .sched-nr-pop, .sched-st-pop, .sched-dayof-menu, .user-dropdown, .export-dropdown, .context-menu) {
    animation: none;
    transform-origin: top;
    transition: opacity .18s cubic-bezier(.16, 1, .3, 1), translate .18s cubic-bezier(.16, 1, .3, 1), scale .18s cubic-bezier(.16, 1, .3, 1), display .18s allow-discrete;
  }
  :root.nd-polish :is(.lt-dd__panel, .ui-actmenu__panel, .nr-menu, .jm2-menu) { transform-origin: top right; }
  @starting-style {
    :root.nd-polish :is(.nr-menu, .lt-dd__panel, .ui-actmenu__panel, .jm2-menu, .cx-more-menu, .qj-combo-menu, .v3-ta, .ml-picker, .sched-qc-pop, .sched-qc-menu, .sched-ub-pop, .sched-note-pop, .sched-stage-pop, .sched-qa-pop, .sched-bf-pop, .sched-nr-pop, .sched-st-pop, .sched-dayof-menu, .user-dropdown, .export-dropdown, .context-menu) { opacity: 0; translate: 0 -4px; scale: .98; }
  }
  :root.nd-polish :is(.nr-menu, .lt-dd__panel, .ui-actmenu__panel, .jm2-menu, .cx-more-menu, .qj-combo-menu, .v3-ta, .ml-picker, .sched-qc-pop, .sched-qc-menu, .sched-ub-pop, .sched-note-pop, .sched-stage-pop, .sched-qa-pop, .sched-bf-pop, .sched-nr-pop, .sched-st-pop, .sched-dayof-menu, .user-dropdown, .export-dropdown, .context-menu)[hidden] {
    opacity: 0; translate: 0 -4px; scale: .98;
    transition: opacity .11s ease-in, translate .11s ease-in, scale .11s ease-in, display .11s allow-discrete;
  }
  :root.nd-polish .jm2-menu:not(.is-open) {
    opacity: 0; translate: 0 -4px; scale: .98;
    transition: opacity .11s ease-in, translate .11s ease-in, scale .11s ease-in, display .11s allow-discrete;
  }

  /* Rows answer the pointer gently */
  :root.nd-polish :is(.nr-row, .nr-appx, .lt-dd__panel--menu .btn-ghost, .ui-actmenu__panel > *) { transition: background-color .12s linear; }

  /* Dialogs: the backdrop fades and the sheet rises into place */
  :root.nd-polish .bk-overlay { transition: opacity .2s linear; }
  :root.nd-polish .bk-overlay > .bk-modal { transition: opacity .22s cubic-bezier(.16, 1, .3, 1), translate .22s cubic-bezier(.16, 1, .3, 1), scale .22s cubic-bezier(.16, 1, .3, 1); }
  @starting-style {
    :root.nd-polish .bk-overlay { opacity: 0; }
    :root.nd-polish .bk-overlay > .bk-modal { opacity: 0; translate: 0 8px; scale: .985; }
  }

  /* The job close-out drawer comes in from its own edge */
  :root.nd-polish .pclose-scrim { transition: opacity .2s linear; }
  :root.nd-polish .pclose { transition: translate .28s cubic-bezier(.16, 1, .3, 1), opacity .2s linear; }
  @starting-style {
    :root.nd-polish .pclose-scrim { opacity: 0; }
    :root.nd-polish .pclose { translate: 32px 0; opacity: 0; }
  }
}