/* O Manual se consulta como um guia; os Objetivos mostram as relações por tópico. */
body[data-area="manual"] { --area-color: var(--play-sky); }
body[data-area="objetivos"] { --area-color: var(--play-sun); }
.ref-page { --ref-accent: var(--play-sky, #9ac9de); --ref-tint: color-mix(in srgb, var(--ref-accent) 9%, var(--panel)); min-width: 0; }
.ref-objectives { --ref-accent: var(--play-sun, #e5c47f); }
.ref-page svg { width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; }
.ref-page button, .ref-page input, .ref-page select { font: inherit; }
.ref-page button:focus-visible, .ref-page summary:focus-visible, .ref-page a:focus-visible, .ref-page input:focus-visible, .ref-page select:focus-visible { outline: 2px solid var(--ref-accent); outline-offset: 4px; }
.ref-page-head { display: flex; align-items: center; gap: 1.1rem; margin: .25rem 0 1.65rem; }
.ref-page-head h1 { margin: 0 0 .4rem; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.15; letter-spacing: -.035em; font-weight: 740; }
.ref-page-head p { margin: 0; max-width: 64ch; color: var(--muted); font-size: .97rem; }
.ref-page-symbol { display: grid; place-items: center; width: 64px; height: 70px; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--ref-accent) 38%, var(--line)); background: var(--ref-tint); border-radius: 12px 12px 19px 12px; color: var(--ref-accent); }
.ref-page-symbol svg { width: 34px; height: 34px; }
.ref-search { margin: 0 0 1.7rem; max-width: 920px; }
.ref-search > label { display: block; margin-bottom: .55rem; font-weight: 620; font-size: .87rem; }
.ref-search-field { display: flex; align-items: center; gap: .75rem; min-width: 0; padding: .3rem .45rem .3rem 1rem; border: 1px solid var(--line); border-bottom: 3px solid color-mix(in srgb, var(--ref-accent) 48%, var(--line)); border-radius: 10px; background: var(--panel); }
.ref-search-field > svg { color: var(--ref-accent); }
.ref-search-field > input { flex: 1; min-width: 0; min-height: 46px; padding: .6rem 0; border: 0; border-radius: 0; background: transparent; color: var(--text); box-shadow: none; }
.ref-search-field > input:focus { outline: none; }
.ref-search-field:focus-within { outline: 2px solid var(--ref-accent); outline-offset: 3px; }
.ref-search-field > button { min-height: 38px; padding: .4rem .7rem; border: 1px solid var(--line); background: var(--bg); color: var(--muted); font-size: .77rem; }
.ref-guide-layout { display: grid; grid-template-columns: minmax(185px, 225px) minmax(0, 1fr); gap: clamp(1.2rem, 2.8vw, 2.7rem); align-items: start; }
.ref-subject-index { position: sticky; top: 1.1rem; min-width: 0; }
.ref-subject-index > h2 { margin: 0 0 .65rem; font-size: .86rem; font-weight: 650; }
.ref-subject-index nav { display: flex; flex-direction: column; gap: .15rem; }
.ref-subject-index nav > button { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 41px; padding: .55rem .65rem; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); text-align: left; line-height: 1.35; font-size: .8rem; }
.ref-subject-index nav > button small { min-width: 24px; color: var(--muted); text-align: right; font-size: .7rem; font-variant-numeric: tabular-nums; }
.ref-subject-index nav > button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--ref-accent) 28%, var(--line)); background: var(--ref-tint); color: var(--text); }
.ref-subject-index nav > button[aria-pressed="true"] small { color: var(--ref-accent); }
.ref-subject-index nav > button:hover { background: var(--panel2); color: var(--text); }
.ref-index-note { max-width: 28ch; margin: .9rem .65rem 0; color: var(--muted); font-size: .73rem; line-height: 1.55; }
.ref-mobile-subject { display: none; }
.ref-guide-content { min-width: 0; }
.ref-result-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
.ref-result-heading p { margin: 0; font-size: .84rem; color: var(--text); }
.ref-result-heading > span { color: var(--muted); font-size: .74rem; }
.ref-manual-group { margin-top: 1.45rem; }
.ref-manual-group > h2 { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .55rem; font-size: 1.02rem; font-weight: 640; }
.ref-manual-group > h2 > span { color: var(--muted); font-size: .74rem; font-weight: 450; }
.ref-command-list { border-top: 1px solid var(--line); }
.ref-command { margin: 0; border-bottom: 1px solid var(--line); background: transparent; }
.ref-command > summary { display: grid; grid-template-columns: minmax(125px, .95fr) minmax(0, 1.7fr) 16px; align-items: center; gap: .85rem; min-height: 64px; padding: .85rem .6rem; list-style: none; cursor: pointer; }
.ref-page summary::-webkit-details-marker { display: none; }
.ref-command-name { color: var(--ref-accent); overflow-wrap: anywhere; font-family: "Ubuntu Mono", ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .95rem; font-weight: 550; }
.ref-command-purpose { color: var(--muted); font-size: .81rem; line-height: 1.45; }
.ref-command > summary > svg, .ref-objective > summary > svg { width: 16px; height: 16px; color: var(--muted); }
.ref-command[open] > summary > svg, .ref-objective[open] > summary > svg, .ref-concepts[open] > summary > svg:last-child { transform: rotate(90deg); color: var(--ref-accent); }
.ref-command[open] { background: var(--panel); }
.ref-command[open] > summary { border-bottom: 1px solid var(--line); }
.ref-command[open] .ref-command-purpose { color: var(--text); }
.ref-command-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 1.1fr); gap: 1.15rem; padding: 1rem; }
.ref-command-explanation > p:first-child { margin: 0 0 .85rem; color: var(--text); font-size: .86rem; line-height: 1.65; max-width: 65ch; }
.ref-command-actions { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.ref-official-link { text-decoration: underline; text-underline-offset: .18em; }
.ref-text-action { display: inline-flex; align-items: center; gap: .55rem; min-height: 36px; padding: .4rem 0; border: 0; background: transparent; color: var(--ref-accent); font-size: .78rem; }
.ref-text-action svg { width: 16px; height: 16px; }
.ref-example { min-width: 0; align-self: start; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--bg); }
.ref-example > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; padding: .35rem .65rem; border-bottom: 1px solid var(--line); }
.ref-example > div > span { color: var(--muted); font-size: .67rem; }
.ref-example button { display: inline-flex; gap: .35rem; align-items: center; min-height: 32px; padding: .25rem .35rem; border: 0; background: transparent; color: var(--ref-accent); font-size: .7rem; }
.ref-example button svg { width: 13px; height: 13px; }
.ref-example pre { max-width: 100%; margin: 0; padding: .85rem; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); font-size: .8rem; line-height: 1.65; }
.ref-example code { padding: 0; background: transparent; color: inherit; font-size: inherit; }
.ref-concepts { margin-top: 2rem; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.ref-concepts > summary { display: flex; gap: .6rem; align-items: center; min-height: 54px; padding: .8rem 1rem; list-style: none; cursor: pointer; color: var(--text); font-size: .85rem; }
.ref-concepts > summary > svg:first-child { color: var(--ref-accent); }
.ref-concepts > summary > svg:last-child { margin-left: auto; width: 15px; height: 15px; }
.ref-concepts-body { padding: 0 1rem 1rem; }
.ref-system-layers { display: grid; grid-template-columns: 1fr 22px 1fr 22px 1fr; gap: .7rem; align-items: center; padding: 1.1rem 0; }
.ref-system-layers strong { font-size: .82rem; }
.ref-system-layers p { margin: .3rem 0 0; color: var(--muted); font-size: .73rem; line-height: 1.55; }
.ref-system-layers > span { color: var(--ref-accent); }
.ref-table-wrap { overflow-x: auto; }
.ref-table-wrap table { width: 100%; border-collapse: collapse; font-size: .76rem; }
.ref-table-wrap caption { text-align: left; margin: .5rem 0 .65rem; font-size: .8rem; font-weight: 600; }
.ref-table-wrap th, .ref-table-wrap td { padding: .65rem .7rem; border-bottom: 1px solid var(--line); text-align: left; }
.ref-table-wrap thead th { color: var(--muted); font-weight: 500; background: transparent; }
.ref-table-wrap tbody th { font-weight: 550; }
.ref-note { margin: 1rem 0 0; color: var(--muted); font-size: .73rem; line-height: 1.65; }
.ref-empty { padding: 2.25rem 1rem; border-bottom: 1px solid var(--line); }
.ref-empty h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
.ref-empty p { color: var(--muted); font-size: .86rem; }
.ref-empty button { margin-top: .5rem; background: var(--panel); border: 1px solid var(--line); }
.ref-copy-status { min-height: 1.5em; margin: 1rem 0 0; color: var(--ref-accent); font-size: .8rem; }
.ref-official-source { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1.5rem; margin-bottom: 1.8rem; padding: 1rem 1.15rem; border: 1px solid var(--line); border-left: 3px solid var(--ref-accent); border-radius: 5px 10px 10px 5px; background: var(--panel); }
.ref-official-source h2 { margin: 0 0 .3rem; font-size: .98rem; font-weight: 630; }
.ref-official-source p { margin: 0; color: var(--muted); font-size: .8rem; }
.ref-official-source > a, .ref-unmapped a { display: inline-flex; align-items: center; gap: .55rem; min-height: 36px; color: var(--ref-accent); font-size: .78rem; text-decoration: none; }
.ref-official-source > a:hover, .ref-unmapped a:hover { text-decoration: underline; }
.ref-official-source > a svg, .ref-unmapped a svg { width: 16px; height: 16px; }
.ref-map-index nav > button { justify-content: flex-start; gap: .65rem; min-height: 48px; }
.ref-map-index nav > button > small { margin-left: auto; }
.ref-topic-number { display: grid; place-items: center; width: 23px; height: 25px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 5px; color: var(--ref-accent); font-size: .71rem; }
.ref-map-context, .ref-account-note { margin: 0 0 1rem; color: var(--muted); font-size: .76rem; line-height: 1.65; max-width: 78ch; }
.ref-account-note button { display: inline; min-height: 32px; margin-left: .4rem; padding: .2rem .35rem; background: transparent; border: 0; color: var(--ref-accent); font-size: inherit; }
.ref-topic { margin: 1.8rem 0 0; }
.ref-topic:first-child { margin-top: 0; }
.ref-topic > header { display: flex; align-items: baseline; gap: .85rem; margin: 0 0 .85rem; }
.ref-topic > header > span { color: var(--ref-accent); font-size: .72rem; white-space: nowrap; }
.ref-topic h2 { margin: 0; font-size: 1.05rem; font-weight: 650; }
.ref-objective-branch { position: relative; margin-left: 1.2rem; padding-left: 1.5rem; border-left: 1px solid color-mix(in srgb, var(--ref-accent) 30%, var(--line)); }
.ref-objective { position: relative; margin-bottom: .5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.ref-objective::before { position: absolute; content: ""; top: 29px; left: -1.55rem; width: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--ref-accent) 30%, var(--line)); }
.ref-objective > summary { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; min-height: 66px; list-style: none; cursor: pointer; }
.ref-objective-id { display: grid; place-items: center; min-width: 40px; min-height: 34px; padding: .3rem .4rem; border: 1px solid color-mix(in srgb, var(--ref-accent) 26%, var(--line)); border-radius: 7px; color: var(--ref-accent); font-size: .78rem; font-variant-numeric: tabular-nums; background: var(--ref-tint); }
.ref-objective-title { flex: 1; font-size: .85rem; font-weight: 570; line-height: 1.5; }
.ref-objective-title small { display: block; margin-top: .2rem; color: var(--muted); font-weight: 400; font-size: .69rem; }
.ref-objective[open] { border-color: color-mix(in srgb, var(--ref-accent) 36%, var(--line)); }
.ref-objective[open] > summary { border-bottom: 1px solid var(--line); }
.ref-objective-body { padding: .9rem 1rem 1rem; }
.ref-objective-body > p { margin: 0 0 .65rem; color: var(--muted); font-size: .75rem; }
.ref-related-subjects { margin: 0; padding: 0; list-style: none; }
.ref-related-subjects > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.ref-related-subjects > li:last-child { border-bottom: 0; padding-bottom: 0; }
.ref-related-subjects strong { font-size: .82rem; font-weight: 550; }
.ref-related-subjects small { display: block; margin-top: .2rem; color: var(--muted); font-size: .69rem; }
.ref-related-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.ref-related-actions > button { display: flex; align-items: center; gap: .4rem; min-height: 36px; padding: .4rem .65rem; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: .72rem; border-radius: 6px; }
.ref-related-actions > button:first-child { color: var(--ref-accent); }
.ref-related-actions > button svg { width: 14px; height: 14px; }
.ref-unmapped p { margin: 0 0 .6rem; color: var(--muted); font-size: .82rem; }
.ref-map-footnote { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.ref-map-footnote strong { font-size: .8rem; font-weight: 600; }
.ref-map-footnote p { max-width: 100ch; color: var(--muted); font-size: .72rem; line-height: 1.65; margin: .4rem 0; }
@media (max-width: 1090px) {
  .ref-guide-layout { grid-template-columns: 185px minmax(0, 1fr); gap: 1.25rem; }
  .ref-command > summary { grid-template-columns: minmax(105px, 1fr) minmax(0, 1.2fr) 15px; }
  .ref-command-body { grid-template-columns: 1fr; }
}
@media (max-width: 740px) {
  .ref-page-head { gap: .8rem; margin-bottom: 1.35rem; align-items: flex-start; }
  .ref-page-symbol { width: 48px; height: 55px; border-radius: 10px 10px 15px 10px; }
  .ref-page-symbol svg { width: 27px; height: 27px; }
  .ref-page-head h1 { font-size: 1.85rem; }
  .ref-page-head p { font-size: .85rem; line-height: 1.6; }
  .ref-guide-layout { display: block; }
  .ref-subject-index { position: static; margin-bottom: 1.25rem; }
  .ref-manual .ref-subject-buttons, .ref-manual .ref-index-note, .ref-manual .ref-subject-index > h2 { display: none; }
  .ref-mobile-subject { display: block; width: 100%; }
  label.ref-mobile-subject { margin-bottom: .35rem; font-size: .8rem; }
  select.ref-mobile-subject { min-height: 44px; border: 1px solid var(--line); background: var(--panel); color: var(--text); padding: .65rem; border-radius: 8px; }
  .ref-command > summary { grid-template-columns: minmax(0, 1fr) 16px; gap: .25rem .65rem; padding: .85rem .5rem; }
  .ref-command-name { font-size: .9rem; }
  .ref-command-purpose { grid-row: 2; font-size: .77rem; }
  .ref-command > summary > svg { grid-column: 2; grid-row: 1 / 3; }
  .ref-command-body { padding: .85rem; gap: .8rem; }
  .ref-system-layers { grid-template-columns: 1fr; gap: .6rem; }
  .ref-system-layers > span svg { transform: rotate(90deg); width: 17px; height: 17px; }
  .ref-map-index nav { flex-direction: row; overflow-x: auto; gap: .4rem; padding-bottom: .5rem; }
  .ref-map-index nav > button { flex: 0 0 auto; max-width: 195px; min-height: 54px; border: 1px solid var(--line); padding: .5rem .65rem; font-size: .71rem; }
  .ref-map-index .ref-index-note { display: none; }
  .ref-topic > header { display: block; }
  .ref-topic > header > span { display: block; margin-bottom: .3rem; }
  .ref-objective-branch { margin-left: .3rem; padding-left: 1rem; }
  .ref-objective::before { left: -1.05rem; width: 1rem; }
  .ref-objective > summary { padding: .75rem .65rem; gap: .55rem; }
  .ref-objective-title { font-size: .8rem; }
  .ref-objective-id { min-width: 34px; min-height: 31px; font-size: .72rem; }
  .ref-objective-body { padding: .8rem; }
  .ref-related-subjects > li { align-items: stretch; }
  .ref-related-actions { width: 100%; }
  .ref-related-actions > button { flex: 1; justify-content: center; min-height: 39px; }
}
@media print { .ref-subject-index, .ref-search, .ref-example button, .ref-related-actions, .ref-text-action, .ref-copy-status { display: none; } .ref-guide-layout { display: block; } .ref-command, .ref-objective { break-inside: avoid; } }