/* Copy review overlay — internal QA tool, not part of the public site. Everything is namespaced under .review-* / [data-review-*] and only takes effect once gets .review-on, so the site renders untouched with the tool switched off. */ /* A full-width bar, not a corner pill — a corner widget competes for the same real estate as other floating tools (the presentation switcher) on short or narrow screens; a bottom bar has its own uncontested strip and reads more like a "you're looking at a draft" notice than a mystery button. */ .review-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .65rem 1.1rem; background: #171C22; color: #F2F0EC; box-shadow: 0 -8px 28px rgba(0, 0, 0, .28); font: 500 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .review-bar__dot { width: .55rem; height: .55rem; border-radius: 50%; background: #6C757F; flex: none; } .review-on .review-bar__dot { background: #C4614F; } .review-bar__label { margin: 0; flex: 1 1 16rem; color: #E7E4DF; } /* Unclicked, this is the one thing on the bar that actually needs a reviewer's attention — solid, warm, and gently pulsing so it doesn't just blend into the rest of the dark bar. Once it's been clicked the highlights themselves are doing that job, so the button settles into a quieter, ordinary "turn this off" control. */ .review-bar__toggle { flex: none; padding: .6rem 1.1rem; border: 1px solid transparent; border-radius: 999px; background: #D96A4F; color: #171C22; font-weight: 700; cursor: pointer; white-space: nowrap; box-shadow: 0 0 0 0 rgba(217, 106, 79, .55); animation: review-toggle-pulse 2.2s ease-out infinite; } .review-bar__toggle:hover { background: #e57a5f; } .review-bar__toggle:focus-visible { outline: 2px solid #D08C7A; outline-offset: 2px; } .review-bar__toggle[aria-pressed="true"] { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #F2F0EC; font-weight: 500; box-shadow: none; animation: none; } .review-bar__toggle[aria-pressed="true"]:hover { background: rgba(255, 255, 255, .16); } @keyframes review-toggle-pulse { 0% { box-shadow: 0 0 0 0 rgba(217, 106, 79, .55); } 70% { box-shadow: 0 0 0 .6rem rgba(217, 106, 79, 0); } 100% { box-shadow: 0 0 0 0 rgba(217, 106, 79, 0); } } @media (prefers-reduced-motion: reduce) { .review-bar__toggle { animation: none; } } .review-bar__legend[hidden] { display: none; } .review-bar__legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; flex: 1 1 16rem; color: #E7E4DF; } .review-bar__key { display: inline-flex; align-items: baseline; gap: .35rem; } .review-bar__key b { font-variant-numeric: tabular-nums; } .review-bar__key::before { content: ""; width: .7rem; height: .7rem; border-radius: 2px; align-self: center; } .review-bar__key--paraphrase::before { background: #C89A3C; } .review-bar__key--original::before { background: #C4614F; } .review-bar__hint { font-size: 11.5px; font-weight: 400; line-height: 1.45; color: #98A0AA; } /* Highlights — only visible when the tool is on. box-shadow rather than a border so nothing in the page reflows when review mode is toggled. */ .review-on [data-review-kind] { cursor: pointer; border-radius: 2px; transition: background-color .15s ease, box-shadow .15s ease; } .review-on [data-review-kind="paraphrase"] { background-color: rgba(200, 154, 60, .16); box-shadow: 0 0 0 2px rgba(200, 154, 60, .34); } .review-on [data-review-kind="original"] { background-color: rgba(196, 97, 79, .15); box-shadow: 0 0 0 2px rgba(196, 97, 79, .34); } .review-on [data-review-kind="paraphrase"]:hover, .review-on [data-review-kind="paraphrase"].is-review-active { background-color: rgba(200, 154, 60, .3); box-shadow: 0 0 0 2px rgba(200, 154, 60, .68); } .review-on [data-review-kind="original"]:hover, .review-on [data-review-kind="original"].is-review-active { background-color: rgba(196, 97, 79, .28); box-shadow: 0 0 0 2px rgba(196, 97, 79, .68); } .review-on [data-review-kind]:focus-visible { outline: 2px solid #171C22; outline-offset: 2px; } .review-pop { position: absolute; z-index: 10000; width: min(22rem, calc(100vw - 2rem)); padding: .75rem .9rem .9rem; border-radius: 8px; background: #171C22; color: #E7E4DF; box-shadow: 0 14px 40px rgba(0, 0, 0, .34); font: 400 13px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .review-pop__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .4rem; } .review-pop__chip { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: .15rem .45rem; border-radius: 2px; } .review-pop--paraphrase .review-pop__chip { background: #4A3B18; color: #EFCB7C; } .review-pop--original .review-pop__chip { background: #4A241E; color: #F0A392; } .review-pop__close { border: 0; background: none; color: #98A0AA; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 .15rem; } .review-pop__close:hover { color: #E7E4DF; } .review-pop__close:focus-visible { outline: 2px solid #D08C7A; outline-offset: 2px; } .review-pop__src { margin: 0; } @media (prefers-reduced-motion: reduce) { .review-on [data-review-kind] { transition: none; } } @media print { .review-bar, .review-pop { display: none !important; } .review-on [data-review-kind] { background: none !important; box-shadow: none !important; } }