/* Optional patterns. Load after base.css and before page-specific styles. */
.ui-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: .65rem .9rem; }
.ui-field { display: grid; gap: .25rem; min-width: 0; color: var(--muted, #6f6c66); font: var(--text-ui, .875rem)/1.4 var(--ui, Georgia, serif); }
.ui-field :is(input, select, textarea) { min-width: 0; max-width: 100%; min-height: var(--control-size, 2.25rem); font: inherit; color: var(--ink, #181817); }
.ui-field--search { flex: 1 1 18rem; }
.ui-field--search input { width: 100%; }
.ui-segmented { display: flex; flex-wrap: wrap; gap: 0; }
.ui-segmented > :is(button, a) { position: relative; min-height: var(--control-size, 2.25rem); margin: 0; padding: .4rem .65rem; border: 1px solid var(--line-strong, #aaa49a); color: var(--muted-strong, #4a4945); font: var(--text-ui, .875rem)/1.4 var(--ui, Georgia, serif); text-decoration: none; }
.ui-segmented > :is(button, a) + :is(button, a) { margin-left: -1px; }
.ui-segmented > :is([aria-pressed="true"], [aria-current="page"]) { z-index: 1; border-color: var(--blue, #35567a); background: var(--surface-blue, #edf1f4); color: var(--blue-dark, #203e61); }
.ui-segmented > :focus-visible { z-index: 2; }

/* Same square, paper-backed dropdown vocabulary as the chapter readers. */
.ui-select { display: block; position: relative; min-width: 0; max-width: 100%; color: var(--ink, #181817); font: var(--text-ui, .875rem)/1.4 var(--ui, Georgia, serif); }
.ui-select > .ui-select-trigger { display: block; position: relative; width: 100%; min-height: var(--control-size, 2.25rem); margin: 0; padding: .3125rem 1.9rem .3125rem .5625rem; border: 1px solid var(--line-strong, #aaa49a); border-radius: 0; background: var(--paper, #fbfaf7); color: var(--ink, #181817); font: inherit; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.ui-select-trigger::after { position: absolute; right: .7rem; top: 50%; width: .4rem; height: .4rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-70%) rotate(45deg); content: ""; }
.ui-select-trigger[aria-expanded="true"] { border-color: var(--blue, #35567a); }
.ui-select-trigger:disabled { opacity: .5; cursor: default; }
.ui-select > .ui-select-menu { position: fixed; z-index: 150; box-sizing: border-box; margin: 0; padding: .25rem; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line-strong, #aaa49a); background: var(--paper, #fbfaf7); color: var(--ink, #181817); font: inherit; text-align: left; }
.ui-select-option { display: block; min-height: var(--control-size, 2.25rem); box-sizing: border-box; margin: 0; padding: .5rem .55rem; cursor: pointer; overflow-wrap: anywhere; }
.ui-select-option[aria-selected="true"] { background: var(--surface-blue, #edf1f4); color: var(--blue-dark, #203e61); }
.ui-select-option[data-active="true"] { outline: 1px solid var(--blue, #35567a); outline-offset: -1px; }
.ui-select-option:hover:not([aria-disabled="true"]) { background: var(--surface, #f4f2ed); }
.ui-select-option[aria-disabled="true"] { opacity: .5; cursor: default; }

/* An editorial directory, not a grid of cards. Child layout stays local. */
.ui-directory { margin: 0; padding: 0; list-style: none; }
.ui-directory > li { padding: var(--directory-space, .8rem) 0; border-bottom: var(--directory-rule, 1px solid var(--line, #d9d5cd)); }
.ui-directory > li:last-child { border-bottom: 0; }
.ui-directory a { font-weight: 600; }
.ui-directory p { margin: .2rem 0 0; color: var(--muted-strong, #4a4945); }

[data-scroll-region] { max-width: 100%; overflow: auto; scrollbar-width: thin; }
/* One native table, one scroll context, one opaque header band. */
.ui-table { margin: 0; border-collapse: separate; border-spacing: 0; font-size: var(--text-ui, .875rem); }
.ui-table > thead { position: sticky; top: 0; z-index: 2; background: var(--surface, #f4f2ed); box-shadow: 0 1px 0 var(--line-strong, #aaa49a); }
.ui-table > thead > tr > th { position: static; border-bottom: 1px solid var(--line-strong, #aaa49a); background: var(--surface, #f4f2ed); color: var(--muted-strong, #4a4945); font: 600 var(--text-ui, .875rem)/1.4 var(--ui, Georgia, serif); letter-spacing: normal; text-transform: none; }
.ui-table > tbody > tr > th { position: static; }
.ui-scroll-hint { margin: .3rem 0 .5rem; color: var(--muted, #6f6c66); font: var(--text-meta, .75rem)/1.5 var(--ui, Georgia, serif); }
[data-section-nav] a { scroll-margin-inline: .75rem; }
[data-section-nav] ~ section[id] { scroll-margin-top: var(--section-offset, 4rem); }

.ui-dialog { width: min(var(--dialog-width, 48rem), calc(100% - 2rem)); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line-strong, #aaa49a); border-radius: 0; background: var(--paper, #fbfaf7); color: var(--ink, #181817); }
.ui-dialog::backdrop { background: rgb(0 0 0 / 48%); }
.ui-dialog-body { padding: clamp(1rem, 3vw, 1.75rem); }
.ui-dialog-dismiss { position: sticky; top: .5rem; z-index: 3; float: right; margin: .5rem .5rem 0 0; }
.ui-dialog-dismiss button { display: grid; width: var(--control-size, 2.25rem); min-height: var(--control-size, 2.25rem); padding: 0; place-items: center; background: var(--paper, #fbfaf7); font-size: 1.25rem; }
.ui-dialog-body > :is(h2, .dialog-kicker) { padding-right: 2rem; }
.ui-dialog-body h2 { overflow-wrap: anywhere; }

pre[data-copy-code] { position: relative; padding: calc(var(--control-size, 2.25rem) + 1rem) 1rem 1rem; overflow: auto; border: 1px solid var(--line, #d9d5cd); background: var(--surface, #f4f2ed); }
.ui-copy { position: absolute; top: .35rem; right: .5rem; min-height: var(--control-size, 2.25rem); padding: .2rem .5rem; font: var(--text-ui, .875rem)/1.4 var(--ui, Georgia, serif); }

@media print {
  .ui-scroll-hint, .ui-copy, [data-disclosure], [data-disclosure-close], .ui-dialog-dismiss { display: none !important; }
  /* Printing must release later page-specific scrollport heights. */
  [data-scroll-region] { max-height: none !important; overflow: visible !important; }
  .ui-table > thead { position: static; box-shadow: none; }
}