/* Option B workspace visuals. Load after app.css and before responsive/artwork CSS. */
@media screen {
  /* Preserve the review state selected by the view over shared flex styles. */
  .md-shell .menu-review-check[hidden] { display: none; }

  /* Keep counts intact while section names wrap in the outline. */
  .md-shell .md-outline nav button > span {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .md-shell .md-list-error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid #dfd1b7;
    background: #fff4dc;
    color: #65451f;
    font-size: 13px;
    line-height: 1.5;
  }
  .md-shell .md-list-error > div { flex: 1 1 240px; min-width: 0; }
  .md-shell .md-list-error > button { flex-shrink: 0; }
  /* Keep document actions secondary to the title and the item list. */
  .md-shell .md-titleline {
    flex-wrap: wrap;
  }

  .md-shell .md-titleline > div:first-child {
    flex: 1 1 24rem;
    min-width: 0;
  }

  .md-shell .md-titleline .md-document-name {
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.25;
    letter-spacing: -.015em;
    overflow-wrap: anywhere;
  }

  .md-shell .md-titleline > div:last-child:not(:first-child) {
    flex-shrink: 0;
    flex-wrap: wrap;
    max-width: 100%;
  }

  .md-shell .md-titleline > div:last-child:not(:first-child) > .md-button {
    background: transparent;
    border-color: transparent;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .md-shell .md-titleline > div:last-child:not(:first-child) > .md-button:hover {
    background: #e1e7dd;
    border-color: var(--md-line);
  }

  .md-shell .md-backline > .md-button {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .md-shell .md-backline > span {
    min-width: 0;
  }

  /* Let full titles wrap while document and section actions stay readable. */
  .md-shell .md-topbar {
    flex-wrap: wrap;
  }

  .md-shell .md-topbar > span {
    flex: 1 1 18rem;
    max-width: 100%;
  }

  .md-shell .md-topbar > div {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
  }

  .md-shell .md-topbar > div > button {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .md-shell .md-topbar [data-menu-status] {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .md-shell .md-section > header {
    flex-wrap: wrap;
  }

  .md-shell .md-section > header > h3 {
    min-width: 0;
    max-width: 100%;
  }

  .md-shell .md-section > header > div {
    flex-shrink: 0;
    max-width: 100%;
  }

  .md-shell .md-section > header button {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .md-shell .md-switcher strong,
  .md-shell .md-menu-entry strong {
    overflow-wrap: anywhere;
  }

  .md-shell .md-menu-entry strong {
    display: block;
  }

  .md-shell .md-menu-entry .md-menu-entry-summary,
  .md-shell .md-menu-entry .md-menu-entry-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    line-height: 1.5;
  }

  .md-shell .md-menu-entry-dates > span {
    max-width: 100%;
  }

  .md-shell .md-menu-entry-dates time {
    white-space: nowrap;
  }

  .md-shell .md-switch-dialog > header > button {
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
  }

  .md-shell .md-doc-meta {
    line-height: 1.65;
  }

  .md-shell .md-doc-meta [data-menu-review-state] {
    font-weight: 650;
  }

  .md-shell .md-section > .muted {
    padding: 18px 4px 4px;
    font-size: 13px;
    line-height: 1.5;
  }

  .md-shell .md-item-copy small {
    white-space: pre-line;
    line-height: 1.45;
  }

  .md-shell .md-sheet header p,
  .md-shell .md-sheet-body > .field-help,
  .md-shell .md-appearance-controls > .field-help {
    color: #526154;
    line-height: 1.5;
  }

  /* The shared label/input rules must not turn native style radios into text fields. */
  .md-shell .md-appearance-controls .menu-style-options {
    gap: 8px;
    margin: 20px 0;
  }

  .md-shell .md-appearance-controls .menu-style-choice {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 32px 10px 10px;
    border-radius: 6px;
  }

  .md-shell .md-appearance-controls .menu-style-choice input[type="radio"] {
    width: 16px;
    height: 16px;
    min-height: 16px;
    padding: 0;
    margin: 0;
    top: 12px;
    right: 10px;
    accent-color: var(--md-green);
  }

  .md-shell .md-appearance-controls .menu-style-thumb {
    width: 58px;
    height: 48px;
    margin: 0;
  }

  .md-shell .md-appearance-controls .menu-style-choice strong {
    display: block;
    font-size: 12px;
    line-height: 1.35;
  }

  .md-shell .md-appearance-controls .menu-style-choice small {
    display: block;
    font-size: 11px;
    line-height: 1.45;
    font-weight: 400;
  }

  .md-shell .md-appearance-controls .menu-branding > .section-head {
    margin-bottom: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--md-line);
  }

  .md-shell .md-appearance-controls .menu-branding > .section-head p {
    margin-top: 6px;
    line-height: 1.5;
  }

  .md-shell .md-appearance-controls .menu-branding [data-brand-status] {
    margin: 12px 0;
    font-size: 12px;
    line-height: 1.5;
  }

  .md-shell .md-appearance-controls [data-brand-upload] {
    font-size: 12px;
  }

  /* Restores B's prominent unchecked-facts reminder when the template seam is applied. */
  .md-shell .md-checking-banner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0 0 26px;
    padding: 16px 18px;
    border-radius: 6px;
    background: #fff4dc;
    color: #65451f;
    font-size: 13px;
    line-height: 1.5;
  }

  .md-shell .md-checking-banner > div {
    flex: 1;
    min-width: 0;
  }

  .md-shell .md-checking-banner p {
    margin-top: 3px;
  }

  .md-shell .md-checking-banner .md-button {
    flex: 0 0 auto;
    color: inherit;
    background: var(--md-paper);
    border-color: #dfd1b7;
  }
}

/* Account Items share facts; their library and picker keep placement actions distinct. */
@media screen {
  .md-shell .md-items-library {
    min-width: 0;
  }

  .md-shell .md-library-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
  }

  .md-shell .md-library-heading > div:first-child {
    flex: 1 1 24rem;
    min-width: 0;
  }

  .md-shell .md-library-heading h2 {
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.25;
  }

  .md-shell .md-library-heading p {
    margin-top: 10px;
    max-width: 44rem;
    color: #526154;
    font-size: .875rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .md-shell .md-library-heading > div:last-child:not(:first-child),
  .md-shell .md-library-toolbar,
  .md-shell .md-library-item-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
  }

  .md-shell .md-library-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
    margin-bottom: 20px;
  }

  .md-shell .md-library-toolbar :is(input, select) {
    min-height: 44px;
  }

  .md-shell .md-library-toolbar > label {
    flex: 1 1 20rem;
    min-width: 0;
    margin: 0;
  }

  .md-shell .md-library-toolbar > input {
    flex: 1 1 20rem;
    min-width: 0;
  }

  .md-shell .md-library-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px 20px;
    min-width: 0;
    padding: 20px 8px;
    border-bottom: 1px solid var(--md-line);
  }

  .md-shell .md-library-item-copy {
    flex: 1 1 24rem;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .md-shell .md-library-item-copy > h3 {
    margin: 0;
    color: var(--md-ink);
    font-size: 1rem;
    line-height: 1.4;
  }

  .md-shell .md-library-item-copy > p:not(.md-library-item-summary):not(.md-library-archive-badge) {
    margin-top: 6px;
    font-size: .875rem;
    line-height: 1.5;
    white-space: pre-line;
  }

  .md-shell .md-library-item-summary,
  .md-shell .md-library-item-meta {
    display: block;
    margin-top: 6px;
    color: #526154;
    font-size: .8125rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .md-shell .md-library-item-meta time {
    white-space: nowrap;
  }

  .md-shell .md-library-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
  }

  .md-shell .md-library-item-meta > span {
    min-width: 0;
    max-width: 100%;
  }

  .md-shell .md-library-item-meta > span:nth-child(-n+2) {
    flex-basis: 100%;
  }

  .md-shell .md-library-item-actions {
    flex: 0 1 auto;
    margin-left: auto;
  }

  .md-shell .md-library-heading .md-button,
  .md-shell .md-library-toolbar .md-button,
  .md-shell .md-library-item-actions .md-button,
  .md-shell .md-item-picker > footer .md-button,
  .md-shell .md-library-editor-actions .md-button {
    flex-shrink: 0;
    min-height: 44px;
    min-width: 44px;
    max-width: 100%;
    font-size: .8125rem;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }

  .md-shell .md-library-archive-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 8px;
    border: 1px solid var(--md-line);
    border-radius: 4px;
    color: #526154;
    background: var(--md-sage);
    font-size: .75rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .md-shell .md-item-picker .md-library-item {
    padding-left: 4px;
    padding-right: 4px;
  }

  .md-shell .md-dialog.md-item-picker {
    width: 680px;
  }

  .md-shell .md-item-picker .md-library-item-copy {
    flex-basis: 18rem;
  }

  .md-shell .md-item-picker > header {
    gap: 12px;
    align-items: flex-start;
  }

  .md-shell .md-item-picker > header > :first-child {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .md-shell .md-item-picker > header > button {
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
  }

  .md-shell .md-item-picker > footer {
    flex-wrap: wrap;
    gap: 10px;
  }

  .md-shell .md-shared-item-scope {
    padding: 14px 16px;
    margin-bottom: 20px;
    border: 1px solid #dfd1b7;
    border-radius: 6px;
    background: #fff4dc;
    color: #65451f;
    font-size: .8125rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .md-shell .md-shared-item-scope p + p,
  .md-shell .md-shared-item-scope details {
    margin-top: 8px;
  }

  .md-shell .md-shared-item-scope summary {
    cursor: pointer;
    padding: 8px 0;
    min-height: 44px;
  }

  .md-shell .md-shared-item-scope > span,
  .md-shell .md-item-usage > span {
    display: block;
    margin-top: 4px;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .md-shell .md-library-editor-actions {
    flex-wrap: wrap;
    gap: 10px;
  }

  .md-shell .md-library-editor-actions > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
  }

  .md-shell .md-library-editor-actions small {
    flex-basis: 100%;
    min-width: 0;
    max-width: 100%;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .md-shell .md-items-library [hidden],
  .md-shell .md-item-picker [hidden],
  .md-shell .md-library-editor-actions [hidden] {
    display: none;
  }
}

/* Local menu navigation sits below the global workflow choice. Picker
   controls remain mounted; only the bounded body scrolls as results change. */
@media screen {
  .md-shell .md-workspace-nav-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 0 22px;
    border-bottom: 1px solid var(--md-line);
    background: var(--md-paper);
  }

  .md-shell .md-workspace-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
  }

  .md-shell .md-workspace-nav .md-button {
    min-width: 74px;
    min-height: 44px;
    padding: 12px 14px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    white-space: nowrap;
  }

  .md-shell .md-workspace-nav [aria-current="page"],
  .md-shell .md-workspace-nav [aria-current="page"]:hover {
    border-bottom-color: var(--md-green);
    background: transparent;
    color: var(--md-green);
    font-weight: 750;
    opacity: 1;
    cursor: default;
  }

  .md-shell .md-workspace-nav .md-button:focus-visible {
    outline: 3px solid var(--md-green);
    outline-offset: -5px;
  }

  .md-shell .md-deleted-link {
    margin-left: auto;
    min-height: 44px;
    max-width: 100%;
    padding: 10px 12px;
    border-color: transparent;
    background: transparent;
    color: #526154;
    white-space: nowrap;
  }

  .md-shell .md-deleted-link:focus-visible {
    outline: 3px solid var(--md-green);
    outline-offset: -3px;
  }

  .md-shell .md-undo {
    flex-wrap: wrap;
    gap: 10px 16px;
  }

  .md-shell .md-undo .md-button {
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    white-space: nowrap;
  }

  .md-shell .md-undo .md-button:hover:not(:disabled) {
    border-color: #eff3ed;
    background: #eff3ed;
    color: #213d2e;
  }

  .md-shell .md-undo .md-button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
  }

  .md-shell .md-dialog.md-item-picker {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 12px;
    height: min(760px, calc(100dvh - 40px));
    overflow: hidden;
    overscroll-behavior: contain;
  }

  .md-shell .md-item-picker > header h2 {
    margin: 0;
  }

  .md-shell .md-picker-body {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-right: 4px;
  }

  .md-shell .md-picker-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
  }

  .md-shell .md-picker-controls > label {
    min-width: 0;
  }

  .md-shell .md-picker-controls > p {
    grid-column: 1 / -1;
    margin: 0;
    font-size: .8125rem;
    line-height: 1.5;
  }

  .md-shell .md-picker-status {
    min-height: 1.5em;
    margin: 8px 0;
    font-size: .8125rem;
    line-height: 1.5;
  }

  .md-shell .md-picker-results {
    min-width: 0;
    min-height: 14rem;
  }

  .md-shell .md-item-picker .md-library-item {
    gap: 8px;
    padding: 12px 4px;
  }

  .md-shell .md-item-picker .md-library-item-copy {
    flex-basis: 16rem;
  }

  .md-shell .md-item-picker .md-library-item-copy > h3 {
    font-size: .875rem;
    line-height: 1.4;
  }

  .md-shell .md-item-picker .md-library-item-summary,
  .md-shell .md-picker-usage {
    margin-top: 4px;
    font-size: .75rem;
    line-height: 1.5;
  }

  .md-shell .md-picker-details {
    margin-top: 4px;
    font-size: .8125rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .md-shell .md-picker-details > summary {
    display: list-item;
    width: fit-content;
    max-width: 100%;
    min-height: 44px;
    padding: 12px 4px;
    color: var(--md-green);
    font-weight: 650;
    cursor: pointer;
  }

  .md-shell .md-picker-details > summary:focus-visible {
    outline: 3px solid var(--md-green);
    outline-offset: 1px;
  }

  .md-shell .md-picker-details > p {
    margin: 6px 0;
    white-space: pre-line;
  }

  .md-shell .md-item-picker > footer {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--md-line);
  }

  .md-shell .md-dialog.md-deleted-dialog {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 12px;
    width: 680px;
    height: min(680px, calc(100dvh - 40px));
    overflow: hidden;
    overscroll-behavior: contain;
  }

  .md-shell .md-deleted-dialog > header h2 {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
  }

  .md-shell .md-deleted-dialog > header > .md-button {
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
  }

  .md-shell .md-deleted-dialog > .md-sheet-body {
    padding: 0 4px 0 0;
    scrollbar-gutter: stable;
  }

  .md-shell .md-deleted-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--md-line);
  }

  .md-shell .md-deleted-menu > div {
    flex: 1 1 14rem;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .md-shell .md-deleted-menu h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
  }

  .md-shell .md-deleted-menu p {
    margin: 5px 0 0;
    font-size: .75rem;
    line-height: 1.5;
  }

  .md-shell .md-deleted-menu > .md-button,
  .md-shell .md-deleted-dialog > footer .md-button {
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    white-space: nowrap;
  }

  .md-shell .md-deleted-dialog > footer {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--md-line);
  }
}

@media screen and (max-width: 480px) {
  .md-shell .md-workspace-nav-row {
    padding: 0 15px;
  }

  .md-shell .md-picker-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .md-shell .md-dialog.md-item-picker,
  .md-shell .md-dialog.md-deleted-dialog {
    padding: 18px;
  }
}