/* _content/NoteTaking.UI/Imports/ImportPage.razor.rz.scp.css */
/* NT-133: the import page fills the editor pane; plain text, a file input and two buttons, in the shell's tokens. */
.nt-import[b-iztauctbvr] {
    max-width: 40rem;
    padding: 1.5rem;
}

.nt-import-title[b-iztauctbvr] {
    margin: 0 0 1rem;
    font-size: 1.25rem;
}

.nt-import p[b-iztauctbvr] {
    margin: 0 0 0.75rem;
}

.nt-import-label[b-iztauctbvr] {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.nt-import[b-iztauctbvr]  .nt-import-file {
    display: block;
    min-height: 2.75rem;
    margin-bottom: 0.25rem;
}

.nt-import-hint[b-iztauctbvr] {
    color: var(--nt-text-muted);
    font-size: 0.875rem;
}

.nt-import-problem[b-iztauctbvr] {
    padding: 0.75rem 1rem;
    border: 1px solid var(--nt-notice-border);
    border-left-width: 4px;
    border-radius: var(--nt-radius);
    background: var(--nt-notice-bg);
    color: var(--nt-notice-text);
}

.nt-import-summary[b-iztauctbvr] {
    font-weight: 600;
}

.nt-import-facts[b-iztauctbvr] {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.nt-import-facts li[b-iztauctbvr] {
    margin-bottom: 0.25rem;
}

.nt-import-actions[b-iztauctbvr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.nt-import-actions button[b-iztauctbvr] {
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0 1rem;
    border: 1px solid var(--nt-accent-strong);
    border-radius: var(--nt-radius);
    background: var(--nt-bg);
    color: var(--nt-accent-strong);
    cursor: pointer;
}

.nt-import-actions button.nt-import-confirm[b-iztauctbvr] {
    background: var(--nt-accent-strong);
    color: var(--nt-accent-contrast);
}

.nt-import-actions button:hover:not(:disabled)[b-iztauctbvr] {
    background: var(--nt-hover);
    color: var(--nt-accent-strong);
}

.nt-import-actions button:disabled[b-iztauctbvr] {
    cursor: default;
    opacity: 0.6;
}
/* _content/NoteTaking.UI/Notes/NoteListItemView.razor.rz.scp.css */
/*
  One item of the note list (FR-NOTE-07). The item has a fixed height (the virtualized list measures rows, but equal rows
  make scrolling steady): the title on one line, the preview on at most two, then the time and the tags on one line.
  Touch layouts get the full row as a target (at least 44 px, NFR-UX-01) on every width: the row is far taller anyway.
*/

.nt-note-link[b-ds8uugr8pa] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    height: var(--nt-list-item-height, 6.25rem);
    padding: 0.5rem 1rem;
    overflow: hidden;
    border-bottom: 1px solid var(--nt-border);
    color: var(--nt-text);
    text-decoration: none;
}

.nt-note-link:hover[b-ds8uugr8pa] {
    background: var(--nt-hover);
}

.nt-note-link[aria-current="page"][b-ds8uugr8pa] {
    background: var(--nt-selected);
}

/* The focus ring is drawn inside the row: the scroll container would cut an outline outside it. */
.nt-note-link:focus-visible[b-ds8uugr8pa] {
    outline-offset: -2px;
}

.nt-note-title[b-ds8uugr8pa] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    font-weight: 600;
}

.nt-note-title-text[b-ds8uugr8pa] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nt-note-pin[b-ds8uugr8pa] {
    flex: 0 0 auto;
    fill: currentColor;
    color: var(--nt-accent-strong);
}

/* Up to two lines of the preview; the rest is cut. */
.nt-note-preview[b-ds8uugr8pa] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: var(--nt-text-muted);
    font-size: 0.875rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.nt-note-meta[b-ds8uugr8pa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    margin-top: auto;
    color: var(--nt-text-muted);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.nt-note-meta time[b-ds8uugr8pa] {
    flex: 0 0 auto;
}

.nt-note-tags[b-ds8uugr8pa] {
    display: flex;
    flex: 1 1 auto;
    gap: 0.25rem;
    min-width: 0;
    overflow: hidden;
}

.nt-note-tag[b-ds8uugr8pa],
.nt-note-more[b-ds8uugr8pa] {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 8rem;
    overflow: hidden;
    padding: 0 0.375rem;
    border-radius: var(--nt-radius);
    background: var(--nt-bg-sidebar);
    border: 1px solid var(--nt-border);
    text-overflow: ellipsis;
}

.nt-sr-only[b-ds8uugr8pa] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
/* _content/NoteTaking.UI/Notes/NoteListRow.razor.rz.scp.css */
.nt-note-item[b-3g04ogxk5n] {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* _content/NoteTaking.UI/Shell/ComingSoonEntry.razor.rz.scp.css */
.nt-nav-soon[b-44grq2p6wm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    color: var(--nt-text-muted);
    cursor: default;
}

.nt-soon[b-44grq2p6wm] {
    margin-left: auto;
    font-size: 0.75rem;
}
/* _content/NoteTaking.UI/Shell/FrameworkNotices.razor.rz.scp.css */
/* blazor.web.js sets display: block on #blazor-error-ui when the circuit fails; until then it is hidden. */
#blazor-error-ui[b-6ithpv11lg] {
    display: none;
    position: fixed;
    z-index: 1000;
    inset: auto 0 0 0;
    padding: 0.75rem 1rem;
    background: var(--nt-notice-bg);
    color: var(--nt-notice-text);
    border-top: 2px solid var(--nt-notice-border);
    text-align: center;
}

#blazor-error-ui a[b-6ithpv11lg] {
    margin: 0 0.5rem;
    color: inherit;
}

#blazor-error-ui .dismiss[b-6ithpv11lg] {
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0 0.75rem;
    border: 1px solid var(--nt-notice-border);
    border-radius: var(--nt-radius);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

/* The reconnect notice is a bar at the bottom of the window (the header stays usable), hidden until the script
   puts a state class on it. The page stays visible above it; nothing here animates. */
#components-reconnect-modal[b-6ithpv11lg] {
    display: none;
    position: fixed;
    z-index: 1000;
    inset: auto 0 0 0;
    padding: 0.75rem 1rem;
    background: var(--nt-notice-bg);
    color: var(--nt-notice-text);
    border-top: 2px solid var(--nt-notice-border);
    text-align: center;
}

#components-reconnect-modal a[b-6ithpv11lg] {
    color: inherit;
}

#components-reconnect-modal.components-reconnect-show[b-6ithpv11lg],
#components-reconnect-modal.components-reconnect-failed[b-6ithpv11lg],
#components-reconnect-modal.components-reconnect-rejected[b-6ithpv11lg],
#components-reconnect-modal.components-reconnect-paused[b-6ithpv11lg],
#components-reconnect-modal.components-reconnect-resume-failed[b-6ithpv11lg] {
    display: block;
}

/* One message per state. "retrying" is "show" with an extra class, so it replaces the first message. */
#components-reconnect-modal p[b-6ithpv11lg] {
    display: none;
    margin: 0;
}

#components-reconnect-modal.components-reconnect-show [data-reconnect="show"][b-6ithpv11lg],
#components-reconnect-modal.components-reconnect-retrying [data-reconnect="retrying"][b-6ithpv11lg],
#components-reconnect-modal.components-reconnect-failed [data-reconnect="failed"][b-6ithpv11lg],
#components-reconnect-modal.components-reconnect-rejected [data-reconnect="rejected"][b-6ithpv11lg],
#components-reconnect-modal.components-reconnect-paused [data-reconnect="paused"][b-6ithpv11lg],
#components-reconnect-modal.components-reconnect-resume-failed [data-reconnect="resume-failed"][b-6ithpv11lg] {
    display: block;
}

#components-reconnect-modal.components-reconnect-retrying [data-reconnect="show"][b-6ithpv11lg] {
    display: none;
}
/* _content/NoteTaking.UI/Shell/NoteListPane.razor.rz.scp.css */
/*
  The note list pane (FR-WEB-01, NT-034). The pane fills the "Note list" region: the head stays, and the list scrolls inside
  .nt-note-scroll, which is the scroll container the virtualized list measures (the region itself does not scroll its
  content any more). Rows are NoteListItemView's; the touch rule of the shell (44 px) is met by the rows (100 px) and by the
  sort control.
*/

.nt-notelist[b-j4borpb4qn] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.nt-pane-head[b-j4borpb4qn] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3rem;
    padding: 0 1rem;
    border-bottom: 1px solid var(--nt-border);
}

.nt-pane-head h2[b-j4borpb4qn] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.nt-sort[b-j4borpb4qn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    margin-left: auto;
    font-size: 0.875rem;
}

.nt-sort select[b-j4borpb4qn] {
    min-width: 0;
    max-width: 11rem;
    min-height: 2.75rem;
    padding: 0 0.5rem;
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius);
    background: var(--nt-bg);
    color: var(--nt-text);
    font: inherit;
}

/* NT-038: the search box under the head. 44 px high (the shell's touch rule); the clear button is a 44 px target inside its end. */
.nt-search[b-j4borpb4qn] {
    flex: 0 0 auto;
    position: relative;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--nt-border);
}

.nt-search-input[b-j4borpb4qn] {
    box-sizing: border-box;
    width: 100%;
    min-height: 2.75rem;
    padding: 0 2.75rem 0 0.75rem;
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius);
    background: var(--nt-bg);
    color: var(--nt-text);
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
}

/* The browser's own clear control is replaced by the button, which also moves the focus back. */
.nt-search-input[b-j4borpb4qn]::-webkit-search-cancel-button,
.nt-search-input[b-j4borpb4qn]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.nt-search-clear[b-j4borpb4qn] {
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--nt-text-muted);
    cursor: pointer;
}

.nt-search-clear:hover[b-j4borpb4qn] {
    color: var(--nt-text);
}

.nt-search-clear svg[b-j4borpb4qn] {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.nt-note-scroll[b-j4borpb4qn] {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nt-note-status[b-j4borpb4qn] {
    margin: 0;
    padding: 1.5rem 1rem;
    color: var(--nt-text-muted);
}

.nt-retry[b-j4borpb4qn] {
    min-height: 2.75rem;
    padding: 0 1rem;
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius);
    background: var(--nt-bg);
    color: var(--nt-text);
    cursor: pointer;
}

.nt-retry:hover[b-j4borpb4qn] {
    background: var(--nt-hover);
}

.nt-note-items[b-j4borpb4qn] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nt-note-placeholder[b-j4borpb4qn] {
    height: var(--nt-list-item-height, 6.25rem);
    border-bottom: 1px solid var(--nt-border);
    background: linear-gradient(var(--nt-bg-sidebar), var(--nt-bg-sidebar)) no-repeat 1rem 1rem / 55% 0.75rem;
}
/* _content/NoteTaking.UI/Shell/ShellErrorBoundary.razor.rz.scp.css */
.nt-error[b-pa606qernf] {
    margin: 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--nt-notice-border);
    border-left-width: 4px;
    border-radius: var(--nt-radius);
    background: var(--nt-notice-bg);
    color: var(--nt-notice-text);
}

.nt-error-title[b-pa606qernf] {
    margin: 0 0 0.5rem;
    font-size: 1.0625rem;
}

.nt-error p[b-pa606qernf] {
    margin: 0 0 0.75rem;
}

.nt-error-actions[b-pa606qernf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

.nt-error-actions button[b-pa606qernf] {
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0 1rem;
    border: 1px solid var(--nt-accent-strong);
    border-radius: var(--nt-radius);
    background: var(--nt-bg);
    color: var(--nt-accent-strong);
    cursor: pointer;
}

.nt-error-actions button:hover[b-pa606qernf] {
    background: var(--nt-hover);
}

.nt-error-reference[b-pa606qernf] {
    margin-bottom: 0;
    font-size: 0.875rem;
}

.nt-error-reference code[b-pa606qernf] {
    font-family: var(--nt-font-mono);
}
/* _content/NoteTaking.UI/Shell/ShellLayout.razor.rz.scp.css */
/*
  The shell's geometry (FR-WEB-01). The window width decides in CSS, the user's choices come from the
  data-* attributes that ShellLayout renders:

    below 600 px   one pane in front (data-phone-pane), sidebar as a drawer (data-menu)
    600 - 1023 px  note list and editor, sidebar as a drawer; the list can be collapsed (data-list)
    from 1024 px   sidebar, note list and editor; the sidebar and the list can be collapsed (data-sidebar)

  The two width queries per breakpoint are complements (width < N and width >= N), so no width falls between
  them. The breakpoints are plain numbers because a custom property cannot be used in a media query.
*/

.nt-shell[b-nrfpfy24k1] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    background: var(--nt-bg);
    color: var(--nt-text);
}

/* The way past the header and the sidebar for keyboard users: invisible until it has focus. */
.nt-skip[b-nrfpfy24k1] {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.625rem 1rem;
    background: var(--nt-accent);
    color: var(--nt-accent-contrast);
    border-radius: 0 0 var(--nt-radius) 0;
}

.nt-skip:focus[b-nrfpfy24k1] {
    left: 0;
}

.nt-bar[b-nrfpfy24k1] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-height: var(--nt-bar-height);
    padding: 0 0.5rem;
    background: var(--nt-bg);
    border-bottom: 1px solid var(--nt-border);
}

.nt-brand[b-nrfpfy24k1] {
    flex: 1 1 auto;
    margin: 0;
    padding: 0 0.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.nt-brand a[b-nrfpfy24k1] {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: inherit;
    text-decoration: none;
}

.nt-bar-button[b-nrfpfy24k1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    gap: 0.375rem;
    min-height: 2.75rem;
    padding: 0 0.625rem;
    border: 1px solid transparent;
    border-radius: var(--nt-radius);
    background: transparent;
    color: var(--nt-text);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.nt-bar-button:hover[b-nrfpfy24k1] {
    background: var(--nt-hover);
}

.nt-bar-button svg[b-nrfpfy24k1] {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nt-panes[b-nrfpfy24k1] {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

/* The notes area: the note list and the editor. It comes after the sidebar, so focusing it (the skip link) skips the sidebar. */
.nt-content[b-nrfpfy24k1] {
    flex: 1 1 0;
    display: flex;
    min-width: 0;
    min-height: 0;
    outline: none;
}

.nt-sidebar[b-nrfpfy24k1],
.nt-list[b-nrfpfy24k1],
.nt-editor[b-nrfpfy24k1] {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
}

.nt-sidebar[b-nrfpfy24k1] {
    background: var(--nt-bg-sidebar);
    border-right: 1px solid var(--nt-border);
}

/* The drawer container only takes focus from the script (when the menu opens); its links show their own focus. */
.nt-sidebar:focus[b-nrfpfy24k1] {
    outline: none;
}

.nt-list[b-nrfpfy24k1] {
    border-right: 1px solid var(--nt-border);
}

.nt-editor[b-nrfpfy24k1] {
    flex: 1 1 0;
}

/* Below 1024 px: the sidebar is a drawer over the panes, closed unless the menu button opened it. A closed
   drawer is visibility: hidden, so it is out of the tab order and away from screen readers as well. Only
   opening animates (the drawer slides in); closing, and a window that is resized across the breakpoint, are
   instant, so nothing moves by itself and the closed state is reached at once. */
@media (width < 1024px) {
    .nt-bar-sidebar[b-nrfpfy24k1] {
        display: none;
    }

    .nt-sidebar[b-nrfpfy24k1] {
        position: fixed;
        z-index: 20;
        top: var(--nt-bar-height);
        bottom: 0;
        left: 0;
        width: min(var(--nt-sidebar-width), 85vw);
        visibility: hidden;
        transform: translateX(-100%);
        box-shadow: 0 0 1.5rem rgb(0 0 0 / 20%);
    }

    [data-menu="open"] .nt-sidebar[b-nrfpfy24k1] {
        visibility: visible;
        transform: none;
        transition: transform 0.2s ease;
    }

    .nt-backdrop[b-nrfpfy24k1] {
        position: fixed;
        z-index: 10;
        inset: var(--nt-bar-height) 0 0 0;
        background: rgb(0 0 0 / 35%);
    }
}

/* From 1024 px: the sidebar is a column of its own; the user can collapse it. */
@media (width >= 1024px) {
    .nt-bar-menu[b-nrfpfy24k1],
    .nt-backdrop[b-nrfpfy24k1] {
        display: none;
    }

    .nt-sidebar[b-nrfpfy24k1] {
        flex: 0 0 var(--nt-sidebar-width);
    }

    [data-sidebar="collapsed"] .nt-sidebar[b-nrfpfy24k1] {
        display: none;
    }
}

/* From 600 px: the note list and the editor share the screen; the user can collapse the list. */
@media (width >= 600px) {
    .nt-bar-back[b-nrfpfy24k1] {
        display: none;
    }

    .nt-list[b-nrfpfy24k1] {
        flex: 0 0 var(--nt-list-width);
    }

    [data-list="collapsed"] .nt-list[b-nrfpfy24k1] {
        display: none;
    }
}

/* Below 600 px: one pane in front, the list or the editor; the editor has the back link in the header. */
@media (width < 600px) {
    .nt-bar-list[b-nrfpfy24k1] {
        display: none;
    }

    .nt-list[b-nrfpfy24k1] {
        flex: 1 1 0;
        border-right: 0;
    }

    [data-phone-pane="list"] .nt-editor[b-nrfpfy24k1],
    [data-phone-pane="editor"] .nt-list[b-nrfpfy24k1] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nt-sidebar[b-nrfpfy24k1] {
        transition: none;
    }
}

/* NT-033: at phone width the New note button shows its icon only; its name stays for screen readers. */
@media (width < 600px) {
    .nt-bar-new span[b-nrfpfy24k1] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}
/* _content/NoteTaking.UI/Shell/Sidebar.razor.rz.scp.css */
.nt-nav-list[b-4ezct36myl] {
    margin: 0;
    padding: 0.5rem;
    list-style: none;
}

.nt-nav-footer[b-4ezct36myl] {
    border-top: 1px solid var(--nt-border);
    margin-top: 0.5rem;
}

/* NavLink renders the anchor, so its own styles are reached with ::deep. */
.nt-nav-list[b-4ezct36myl]  .nt-nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    border-radius: var(--nt-radius);
    color: var(--nt-text);
    text-decoration: none;
}

.nt-nav-list[b-4ezct36myl]  a.nt-nav-link:hover {
    background: var(--nt-hover);
}

.nt-nav-list[b-4ezct36myl]  a.nt-nav-link.active {
    background: var(--nt-selected);
    color: var(--nt-accent-strong);
    font-weight: 600;
}

.nt-nav-list[b-4ezct36myl]  a.nt-nav-link:focus-visible {
    outline-offset: -2px;
}
/* _content/NoteTaking.UI/Shell/TagTreeSection.razor.rz.scp.css */
.nt-nav-heading[b-nd0px1xuwm] {
    margin: 0;
    padding: 0.5rem 1.25rem 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--nt-text-muted);
}

.nt-nav-note[b-nd0px1xuwm] {
    margin: 0;
    padding: 0.25rem 1.25rem 0.75rem;
    font-size: 0.875rem;
    color: var(--nt-text-muted);
}
/* _content/NoteTaking.UI/Shell/TrashToast.razor.rz.scp.css */
/*
  The offer to undo a move to the trash (NT-037). A bar at the bottom middle of the window, over the panes and below the framework's
  notices; the empty region takes no room and catches no click. Light text on the dark text color, with the shell's tokens.
*/

.nt-toast-region[b-wvygupbz10] {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    z-index: 30;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100vw - 2rem);
}

.nt-toast[b-wvygupbz10] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.25rem 0.25rem 1rem;
    border-radius: var(--nt-radius);
    background: var(--nt-text);
    color: var(--nt-bg);
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.25);
}

.nt-toast-text[b-wvygupbz10] {
    margin-right: 0.5rem;
}

.nt-toast-undo[b-wvygupbz10],
.nt-toast-close[b-wvygupbz10] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    border: 0;
    border-radius: var(--nt-radius);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.nt-toast-undo[b-wvygupbz10] {
    font-weight: 600;
}

.nt-toast-undo:hover[b-wvygupbz10],
.nt-toast-close:hover[b-wvygupbz10] {
    background: rgb(255 255 255 / 0.14);
}

.nt-toast-undo:disabled[b-wvygupbz10] {
    cursor: progress;
    opacity: 0.7;
}

/* The shell's focus ring is the accent color, too dark on this bar. */
.nt-toast :focus-visible[b-wvygupbz10] {
    outline-color: var(--nt-bg);
}

.nt-toast-close svg[b-wvygupbz10] {
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}
/* _content/NoteTaking.UI/TrashPage.razor.rz.scp.css */
/*
  The Trash page (NT-037), in the editor pane: a head like the note list's, then one row per note in the trash with its title and
  preview (a link to the note), when it was moved there, and Restore. Every control is at least 44 px high (NFR-UX-01).
*/

.nt-trash[b-pinzeogac7] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.nt-trash-head[b-pinzeogac7] {
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding: 0 1rem;
    border-bottom: 1px solid var(--nt-border);
}

.nt-trash-head h2[b-pinzeogac7] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.nt-trash-loading[b-pinzeogac7],
.nt-trash-problem[b-pinzeogac7] {
    margin: 0.75rem 1rem;
    color: var(--nt-text-muted);
}

.nt-trash-problem[b-pinzeogac7] {
    color: var(--nt-notice-text);
}

.nt-trash-items[b-pinzeogac7] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nt-trash-item[b-pinzeogac7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "link restore"
        "when restore";
    column-gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--nt-border);
}

.nt-trash-link[b-pinzeogac7] {
    grid-area: link;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 2.75rem;
    justify-content: center;
    color: var(--nt-text);
    text-decoration: none;
}

.nt-trash-link:hover .nt-trash-name[b-pinzeogac7] {
    text-decoration: underline;
}

.nt-trash-name[b-pinzeogac7] {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nt-trash-preview[b-pinzeogac7] {
    overflow: hidden;
    color: var(--nt-text-muted);
    font-size: 0.875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nt-trash-when[b-pinzeogac7] {
    grid-area: when;
    color: var(--nt-text-muted);
    font-size: 0.8125rem;
}

.nt-trash-restore[b-pinzeogac7],
.nt-trash-more[b-pinzeogac7] {
    min-height: 2.75rem;
    padding: 0 1rem;
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius);
    background: var(--nt-bg);
    color: var(--nt-accent-strong);
    cursor: pointer;
}

.nt-trash-restore[b-pinzeogac7] {
    grid-area: restore;
}

.nt-trash-more[b-pinzeogac7] {
    align-self: center;
    margin: 1rem;
}

.nt-trash-restore:hover[b-pinzeogac7],
.nt-trash-more:hover[b-pinzeogac7] {
    background: var(--nt-hover);
}

.nt-trash-restore:disabled[b-pinzeogac7],
.nt-trash-more:disabled[b-pinzeogac7] {
    cursor: progress;
    opacity: 0.7;
}

.nt-retry[b-pinzeogac7] {
    min-height: 2.75rem;
    padding: 0 1rem;
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius);
    background: var(--nt-bg);
    color: var(--nt-accent-strong);
    cursor: pointer;
}