/* DC10 Review / Pitch system. Shared by authentication, library and every review dialog.
   Layout and pointer coordinates of the real document are owned by style.css. */
:root {
  --brand:#5318eb; --brand-hover:#4210c5; --brand-ink:#280f62;
  --lavender:#f3edff; --lime:#c4ee87; --surface:#fff; --canvas:#f8f6fc;
  --ink:#292137; --muted:#736a80; --line:#e4deed;
  --danger:#bd343b; --success:#33653b; --focus:#8456ef;
  --blue:var(--brand); --cyan:var(--focus); --pale:var(--canvas);
  --orange:#e34646; --radius:10px; --radius-panel:16px;
  color:var(--ink); background:var(--canvas);
}
body {background:var(--canvas);color:var(--ink);line-height:1.5}
h1,h2,h3 {color:var(--brand-ink);font-weight:700;word-break:keep-all}
button,.button,input,select,textarea {border-radius:var(--radius)}
button,.button {min-height:40px;font-size:13px;padding:9px 14px;border-color:var(--line);line-height:1.5}
button:hover,.button:hover {background:var(--lavender)}
.primary,.auth-card .primary {background:var(--brand);border-color:var(--brand);color:#fff}
.primary:hover,.auth-card .primary:hover {background:var(--brand-hover);border-color:var(--brand-hover)}
.quiet {min-height:36px;color:var(--muted);padding:6px 9px;font-size:12px}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {outline:3px solid var(--focus);outline-offset:3px}
input,select,textarea {border-color:#d8cfe5;background:#fff;line-height:1.5;padding:11px 12px;min-height:42px}
input::placeholder,textarea::placeholder {color:#8a8096}
input[type=checkbox] {accent-color:var(--brand);min-height:0;flex-shrink:0}
input[type=file] {border:1px solid var(--line);padding:9px;background:#faf8fe}
input[type=file]::file-selector-button {border:0;border-radius:6px;padding:7px 10px;background:#ece2ff;color:var(--brand);font:inherit;margin-right:10px;cursor:pointer}
.eyebrow {color:var(--brand);font-size:10px;letter-spacing:1.5px}
.muted {color:var(--muted);line-height:1.75}
.header,.auth-page .header,.library-page>.header {background:#fff;border-bottom:1px solid var(--line)}
.header .brand,.auth-page .brand {font-size:21px;font-weight:750;letter-spacing:-.8px;color:var(--brand-ink)}
.brand b {color:var(--brand-ink);font-weight:450}
.header .brand-mark,.auth-page .brand-mark {width:34px;height:40px;border-radius:0;background:transparent;color:var(--brand);font-size:39px;font-weight:400;line-height:1}
.header-caption {color:var(--muted);font-size:11px}
#account>span,.library-page #account>span {color:var(--muted)}
#account .button,.library-page #account .button {background:#fff;color:var(--brand);border-color:var(--line);font-size:12px}
.auth-page .header .auth-home {border-color:var(--line);color:var(--brand);border-radius:8px;min-height:42px;display:inline-flex;align-items:center}
.auth-page,.library-page {background:linear-gradient(160deg,#fff 0%,#f6f0ff 62%,#faf9fc 100%);color:var(--ink)}
.auth-page .auth-intro h1,.library-hero .auth-intro h1 {color:var(--brand-ink);line-height:1.2;font-weight:700;letter-spacing:-2px}
.auth-page .auth-intro h1 em {color:var(--brand)}
.auth-page .auth-intro>.eyebrow {color:var(--brand);font-size:10px;letter-spacing:1px}
.auth-page .auth-lead,.auth-lead {color:var(--muted);font-size:14px}
.auth-page .auth-card,.auth-card {border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 20px 65px #4b188b09;padding:36px}
.auth-card h2 {font-size:26px;line-height:1.4;margin-top:12px}
.auth-footnote,.auth-page .auth-footnote {border-color:var(--line);color:var(--muted);font-size:11px;line-height:1.9}
.auth-booklet {margin:32px 0 0;max-width:440px}
.auth-booklet img {display:block;width:100%;border:1px solid #d9d6cf;box-shadow:0 12px 32px #2a163d12}
.auth-booklet figcaption {font-size:10px;color:var(--muted);margin-top:12px}
.auth-card #google-button {margin:24px 0;min-height:44px}
.consent a {color:var(--brand)}
.logout-check {background:#edf8df;color:var(--success)}
.auth-footer,.auth-page .auth-footer,.library-footer {border-color:var(--line);color:var(--muted);font-size:11px}
/* Centered introduction and one editorial review example, without a feature-card list. */
.landing-page .auth-layout {display:flex;flex-direction:column;align-items:center;max-width:1240px;padding:0 36px;margin:54px auto 30px;gap:26px}
.landing-page .auth-intro {text-align:center;width:100%;max-width:850px}
.landing-page .auth-intro h1 {font-size:clamp(44px,5vw,68px);line-height:1.13;letter-spacing:-3.2px;margin:24px 0}
.landing-page .auth-intro .auth-lead {max-width:none;font-size:15px;line-height:1.9}
.landing-page .auth-booklet {display:none}
.landing-page .auth-card {width:100%;max-width:470px;padding:0;border:0;background:none;box-shadow:none;text-align:center}
.landing-page .auth-card #start-upload {align-self:center;width:auto;min-width:260px;padding:15px 24px;background:var(--brand);border-color:var(--brand);font-size:14px;box-shadow:none}
.landing-page .auth-card #start-upload:hover {background:var(--brand-hover)}
.landing-page .auth-card>#auth-description {color:var(--muted);font-size:10px;margin-top:12px}
.landing-page .auth-card .auth-footnote {border:0;padding:0;margin-top:18px;font-size:10px;line-height:1.7}
.landing-page .auth-footnote strong {color:var(--brand-ink)}
.landing-page .review-demo {align-self:stretch;width:100%;padding-top:0;margin-top:24px}
.demo-topline h2 {font-size:11px;color:var(--muted)}
.demo-topline>span {border-color:var(--line);color:var(--muted)}
.demo-window {border-color:#d9ccef;border-radius:16px;box-shadow:0 24px 70px #4b188b10}
.demo-window-bar {height:60px;padding:0 24px;border-color:var(--line);font-size:12px;color:var(--brand-ink)}
.demo-file-mark {border-color:#d9ccef;color:var(--brand);font-size:9px}
.demo-version {color:var(--muted)}
.demo-window .demo-steps {margin:0;padding:12px;display:flex;justify-content:center;gap:6px;background:#fdfbff;border-bottom:1px solid var(--line)}
.demo-steps button {min-height:40px;padding:9px 19px;border:0;border-radius:7px;color:var(--muted);font-size:11px}
.demo-steps button[aria-pressed=true] {background:#eee4ff;color:var(--brand)}
.demo-steps button:focus-visible {outline-color:var(--focus)}
.demo-workspace {grid-template-columns:minmax(0,1fr) 290px;min-height:0}
.demo-artwork {padding:24px 24px 15px;background:#f1ebf8}
.demo-paper {padding:0;max-width:none;width:100%;min-height:0;aspect-ratio:1400/990;background:#faf9f4}
.demo-paper>img {width:100%;height:100%;display:block;object-fit:contain}
.demo-selection {top:48%;left:4%;right:auto;width:42%;height:13%;border:1px solid #df433e}
.demo-selection>span {width:28px;height:28px;right:-13px;top:-14px;background:#df433e;border:2px solid #fff;font-size:11px}
.demo-window[data-step="2"] .demo-selection {visibility:hidden}
.demo-page-number {color:var(--muted);font-size:10px;margin-top:14px}
.demo-discussion {padding:26px 24px;display:flex;flex-direction:column;border-left:1px solid var(--line)}
.demo-discussion-heading {font-size:12px;border-color:var(--line);color:var(--brand-ink)}
.demo-message {margin-top:25px}
.demo-person {font-size:12px;gap:9px}.demo-person small {font-size:9px;color:var(--muted)}
.demo-avatar {width:30px;height:30px;font-size:10px}
.demo-avatar.client {background:var(--lime);color:#355523}.demo-avatar.designer {background:#e8dafa;color:#5f3b91}
.demo-discussion p {font-size:13px;line-height:1.85;color:var(--muted)}
.demo-message p {font-size:18px;color:var(--brand-ink);font-weight:600;line-height:1.7}
.demo-reply {margin-top:25px;border-color:var(--line);padding-left:14px}
.demo-status {align-self:flex-start;margin-top:auto;background:#f3edff;color:#63409c;font-size:10px;padding:7px 10px}
.demo-window[data-step="2"] .demo-status {background:#e8f4da;color:#386029}
.demo-caption {color:var(--muted);margin:18px 0;min-height:32px}
.landing-page .review-scenarios {display:grid;grid-template-columns:95px minmax(0,1fr) 240px;gap:36px;align-items:center;max-width:1168px;margin:20px auto 64px;padding:48px;background:var(--lime);border:0;border-radius:18px;color:var(--brand-ink)}
.closing-symbol {font-size:100px;align-self:start;line-height:1}
.review-scenarios h2 {font-size:40px;line-height:1.25;margin:20px 0;letter-spacing:-1.6px}
.review-scenarios p {font-size:13px;line-height:1.85}
.review-scenarios .eyebrow {font-size:9px;color:var(--brand-ink);letter-spacing:1.1px}
.closing-detail {border-left:1px solid #9ac565;padding-left:24px;color:#486038}
/* Authenticated workspace */
.library-page .library {max-width:1240px;padding:52px 40px 0}
.library-hero {grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:70px;align-items:center}
.library-hero .auth-intro h1 {font-size:48px;margin:22px 0}
.library-hero .auth-facts {margin-top:28px;color:var(--muted);font-size:10px}
.auth-facts span {border-color:#ded3eb;background:#ffffff80}
.library-upload {padding:30px!important;border-radius:18px}
.library-upload h2 {font-size:25px}
.library-upload form {gap:11px}
.library-upload input[name=title] {border-color:#d8cfe5;border-radius:9px;font-size:14px}
.drop-zone,.library-upload .drop-zone {border:1.5px dashed #c3adeb;background:#faf7ff;border-radius:12px;padding:22px 16px;gap:10px}
.drop-zone strong,.library-upload .drop-zone strong {color:var(--brand-ink);font-size:13px}
.drop-zone span {color:var(--muted)}
.library-upload .drop-zone .upload-symbol {background:#eee3ff;color:var(--brand)}
.drop-zone.dragging,.drop-zone:focus-visible,.library-upload .drop-zone.dragging {background:#eee4ff;border-color:var(--brand);outline-color:#ad8bf3;box-shadow:0 0 0 4px #5318eb10}
.upload-item {border-color:var(--line);border-radius:10px;background:#fcfaff}
.library-documents {border-color:var(--line);margin-top:42px}
.library-documents #refresh-list {color:var(--brand);border-color:var(--line);background:#fff}
.library-documents .document-card {border-color:var(--line);border-radius:14px;box-shadow:none;min-height:176px;padding:24px}
.library-documents .document-card:hover {transform:none;border-color:#b99be9;box-shadow:0 12px 30px #4b188b0c}
.document-card .pdf-label {background:#f0e7ff;color:var(--brand);font-size:10px}
.library-documents .document-card::after {color:#9f81ca}
.library-documents .empty-state {background:#fff;border-color:#d4c5e8;color:var(--muted)}
/* Document tools. Colors change; rendering geometry and gestures do not. */
.document-bar {background:#fff;border-color:var(--line);gap:16px}
.document-heading h1 {color:var(--brand-ink);line-height:1.4}
.document-role {color:var(--brand);font-size:10px;letter-spacing:.3px}
.document-actions {gap:8px}
.document-actions button {font-size:12px;padding:8px 11px;min-height:38px}
.connection.online {color:var(--success)}
.avatar {background:#eee2ff;color:#6c3ba7}
.page-sidebar {background:#fcfaff;border-color:var(--line)}
.sidebar-heading {color:var(--muted)}
.page-button {border-radius:8px;font-size:12px;color:var(--muted);min-height:44px}
.page-button.active:not(.has-comments) {background:#eee4ff;border-color:#cdb9f0;color:var(--brand)}
.page-button.has-comments,.page-count.has-comments {color:#b52b34;background:#fff0f1}
.page-button.has-comments.active {color:#a51f2a;background:#ffe6e9;border-color:#da7c84;box-shadow:inset 3px 0 0 #bd343b}
.viewer {background:#eeebf3}
.viewer-toolbar {background:#fff;border-color:var(--line);font-size:12px}
.viewer-toolbar button {min-height:36px;font-size:22px}
.viewer-toolbar select {font-size:12px;min-height:36px;padding:6px 9px}
.viewer-hint {color:var(--muted);font-size:10px}
.annotation-tools button {border-radius:8px;background:#fff;color:var(--muted)}
.annotation-tools button[aria-pressed=true] {background:var(--brand);border-color:var(--brand);color:white}
.canvas-scroll {background:#eeebf3}
.pin {min-height:0;background:#d94545;line-height:1}
.pin:hover {background:#c63438}
.pin.selected {background:#bd303a;color:#fff;outline-color:#bd303a44}
.pin.resolved {background:#74917a}
.pin-area {border-color:#d9454570;background:#d9454509}
.selection {border-color:#d94545;background:#d9454512}
.comments-heading {border-color:var(--line)}
.comments-heading h2 {font-size:17px;color:var(--brand-ink)}
.comments-heading select {min-height:34px;border-color:var(--line);font-size:11px}
.comments {padding:16px;background:#fdfcff}
.comment {padding:16px;border-radius:12px;border-color:var(--line);background:#fff}
.comment.selected {border-color:#bda3ec;box-shadow:0 0 0 2px #5318eb09}
.comment-body {font-size:13px;line-height:1.85;color:var(--ink)}
.reviewer-name {color:var(--brand);min-height:0;font-size:inherit;padding:2px 0;border:0;background:transparent}
.reviewer-name:hover {background:var(--lavender);color:var(--brand-hover)}
.comment-actions button {min-height:32px;font-size:11px}
.status-button {background:#f6eddc;color:#805713;padding:5px 8px}
.status-button.resolved {background:#edf5e2;color:var(--success)}
.reply {border-left-color:#dcccef;border-top-color:var(--line)}
.attachment {color:var(--brand)}
.composer {background:#faf7ff;border-color:var(--line);padding:18px;gap:12px}
.composer-heading {gap:12px;min-width:0;color:var(--brand-ink)}
.composer-heading h2 {margin:0}
.composer textarea {font-size:14px;background:#fff}
.composer input[type=file] {font-size:11px;padding:8px}
.composer-hint {border-color:var(--line);color:var(--muted);line-height:1.8}
/* All menus and modal forms use the same spacing, input and action hierarchy. */
dialog {width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 48px);overflow:auto;border:1px solid #ddd1eb;border-radius:18px;padding:28px;background:#fff;color:var(--ink);box-shadow:0 24px 90px #280f6233}
dialog::backdrop {background:#21113366;backdrop-filter:blur(3px)}
dialog form {gap:14px}
dialog h2 {font-size:22px;line-height:1.4;letter-spacing:-.7px}
dialog p {line-height:1.8}
dialog label {font-size:12px;color:var(--brand-ink)}
dialog button,.mobile-dialog button {min-height:42px}
dialog textarea {width:100%}
.notification-toggle {padding:12px;background:#f5efff;border-radius:9px;color:var(--brand-ink)}
.notification-toggle input {width:18px;height:18px}
.guest-card {border-color:var(--line);background:#fcfaff;border-radius:12px;padding:16px}
.guest-card legend {color:var(--brand-ink);font-size:12px}
.guest-fields {gap:10px}.guest-field input {background:#fff}
.guest-list-heading {gap:10px}.guest-list-heading strong {color:var(--brand-ink);font-size:13px}
.recipient-list,.account-email {border-color:var(--line);background:var(--lavender);color:var(--brand-ink)}
.danger {background:#fff;color:var(--danger);border-color:#edc7cc}
.danger:hover {background:#fff0f2}
#confirm-delete,#confirm-delete-comment {background:var(--danger);border-color:var(--danger);color:#fff}
.form-error {color:var(--danger);font-size:12px;line-height:1.75;overflow-wrap:anywhere}
.review-completion-status {background:#edf7e5;color:var(--success)}
#notice {background:var(--brand-ink);border-radius:10px;box-shadow:0 8px 28px #280f6225;line-height:1.7}
.mobile-dialog {padding:0;border-radius:18px}
.mobile-dialog-heading {border-color:var(--line);background:#fff}
.mobile-dialog-heading h2 {font-size:18px}
.mobile-menu-content {background:#fff}
.mobile-comment-feedback {background:var(--lavender);color:var(--brand-ink)}
.empty-page {color:var(--ink)}
@media(min-width:801px) {
  #review {height:calc(100dvh - 70px);display:flex;flex-direction:column}
  #review .document-bar,#review .review-completion-status {flex-shrink:0}
  #review .workspace {height:auto;min-height:0;flex:1}
}
@media(max-width:1100px) {
  .library-hero {gap:34px}.library-hero .auth-intro h1 {font-size:40px}
  .landing-page .review-scenarios {margin-left:36px;margin-right:36px;grid-template-columns:65px 1fr;gap:24px}
  .closing-symbol {font-size:75px}.closing-detail {grid-column:2;border:0;padding:0;margin:0}
  .document-actions {flex:1;justify-content:flex-end}
}
@media(max-width:800px) {
  .library-page .library {padding:32px 24px 0;max-width:720px}
  .library-hero {grid-template-columns:1fr;gap:24px}
  .library-hero .auth-intro h1 {font-size:36px;line-height:1.2}
  .library-hero .auth-lead {font-size:13px}
  .library-hero .auth-facts {margin-top:18px}
  .library-documents {margin-top:32px}
  .mobile-toolbar {background:#fff;border-color:var(--line)}
  .mobile-toolbar #annotation-area {border-color:#cdb9f0;color:var(--brand);border-radius:8px}
  .mobile-toolbar #annotation-area[aria-pressed=true] {background:var(--brand);color:#fff}
  .mobile-reader .canvas-scroll {background:#eeebf3}
  #mobile-menu .document-actions {justify-content:initial}
  #mobile-menu .document-actions button {border-radius:9px}
  #mobile-menu #account {border-color:var(--line)}
  #mobile-comments .comments {background:#fcfaff}
  #mobile-comments .composer {background:#faf7ff}
  #mobile-comments .comment-body {font-size:15px}
  #mobile-comments .composer textarea {font-size:16px}
  #mobile-comments[data-mode=write] .mobile-dialog-heading {min-height:60px}
}
@media(max-width:760px) {
  .header .brand,.auth-page .brand {font-size:19px;gap:8px}
  .header .brand-mark,.auth-page .brand-mark {font-size:34px;width:30px;height:36px}
  .auth-page .header {height:68px;padding:0 20px}
  .auth-page .auth-layout {padding:0 20px;margin:32px auto 36px;gap:24px;max-width:560px}
  .auth-page .auth-intro h1 {font-size:34px;line-height:1.2;letter-spacing:-1.6px}
  .auth-page .auth-card {padding:26px 22px;border-radius:16px}
  .auth-page .auth-card h2 {font-size:24px}
  .auth-booklet {display:none}
  .landing-page .auth-layout {max-width:650px;padding:0 18px;margin-top:36px;gap:22px}
  .landing-page .auth-intro h1 {font-size:44px;letter-spacing:-2.6px;margin:20px 0}
  .landing-page .auth-intro .auth-lead {font-size:12px;line-height:1.9}
  .landing-page .auth-card {padding:0}
  .landing-page .auth-card #start-upload {font-size:13px;min-height:48px;min-width:240px}
  .landing-page .review-demo {margin-top:12px}
  .demo-window-bar {height:52px;padding:0 14px;font-size:11px}
  .demo-window .demo-steps {padding:8px 4px;gap:3px;justify-content:space-around}
  .demo-steps button {padding:8px 7px;font-size:10px;min-height:44px}
  .demo-workspace {grid-template-columns:1fr}
  .demo-artwork {padding:14px 10px 10px}
  .demo-paper {min-height:0;max-width:none;padding:0;aspect-ratio:1400/990}
  .demo-selection {top:48%;height:13%}
  .demo-selection>span {width:25px;height:25px;font-size:10px}
  .demo-discussion {padding:20px;border-left:0;border-top:1px solid var(--line);min-height:310px}
  .demo-person small {display:block}.demo-message {margin-top:18px}
  .demo-message p {font-size:16px;line-height:1.75}.demo-reply {margin:12px 0 18px}
  .demo-status {margin-top:0}
  .landing-page .review-scenarios {margin:20px 18px 40px;padding:30px 26px;grid-template-columns:1fr;gap:20px;border-radius:14px}
  .closing-symbol {font-size:58px}.review-scenarios h2 {font-size:34px;margin:16px 0;letter-spacing:-1.3px}
  .closing-detail {grid-column:auto;font-size:11px!important;border-top:1px solid #9ac565;padding:18px 0 0}
  .review-scenarios .button {width:100%;font-size:12px}
}
@media(max-width:480px) {
  .library-page .library {padding:28px 18px 0}
  .library-hero .auth-intro h1 {font-size:33px}
  .library-upload {padding:24px 20px!important}.library-upload h2 {font-size:23px}
  .library-documents .list-heading h2 {font-size:21px}
  .library-documents .document-list {gap:12px}
  .library-page #account>span {max-width:90px}
  dialog {padding:22px 20px;max-height:calc(100dvh - 24px);width:calc(100% - 24px);border-radius:16px}
  dialog h2 {font-size:21px}.mobile-dialog {padding:0}
  .guest-list-heading {flex-wrap:wrap}.guest-fields {grid-template-columns:1fr}
  .guest-list {overflow:visible}.guest-card {padding:12px}
}
@media(max-width:350px) {
  .auth-page .header {padding:0 16px}.header .brand,.auth-page .brand {font-size:17px;gap:6px}
  .landing-page .auth-intro h1 {font-size:39px;letter-spacing:-2px}
  .landing-page .auth-layout {padding:0 12px}
  .auth-page .header .auth-home {font-size:11px;padding:8px 10px}
  .demo-steps button {font-size:9px;padding:8px 5px}
  .library-page>.header {gap:8px;padding:0 12px}.library-page #account>span {max-width:65px;font-size:10px}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {scroll-behavior:auto!important;animation:none!important;transition:none!important}
  .document-card:hover {transform:none;translate:none}
}