.annotated { position: relative; margin: 44px 0 0; display: flex; justify-content: center; }
.cp-scaler { position: relative; }

.cp {
    position: relative;
    width: 464px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(44,44,44,.16), 0 1px 3px rgba(44,44,44,.12);
    padding: 24px 28px 8px;
    font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif;
    color: #414141;
    line-height: 1.4;
}
.cp * { box-sizing: border-box; }
.cp-head { display: flex; align-items: flex-start; gap: 16px; justify-content: space-between; }
.cp-title { font-size: 22px; font-weight: 600; line-height: 30px; letter-spacing: -.2px; }
.cp-close { flex: none; width: 32px; height: 32px; margin: -4px -8px 0 0; display: flex; align-items: center; justify-content: center; border-radius: 4px; color: #8c8c8c; }
.cp-file { margin-top: 18px; font-size: 15px; font-weight: 600; line-height: 22px; word-break: break-word; }
.cp-meta { margin-top: 2px; font-size: 13px; color: #757575; }

.cp-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 4px; font-family: inherit; font-weight: 600; font-size: 15px; white-space: nowrap; }
.cp-btn--primary { color: #fff; background: #ff9000; border-color: #ff9000; }
.cp-btn--secondary { color: #414141; background: #e9e9e9; border-color: #e9e9e9; }
.cp-btn--outlined { color: #414141; background: #fff; border-color: #ff9000; }
.cp-btn--full { width: 100%; }

.cp-row { display: flex; gap: 8px; margin-top: 16px; }
.cp-row .cp-download { flex: 1 1 auto; position: relative; }
.cp-row .cp-saveas { flex: none; position: relative; }
.cp-share { margin-top: 8px; }

.cp-label { position: relative; font-size: 13px; font-weight: 600; color: #6B6B6B; }
.cp-label.send { margin-top: 24px; }
.cp-label.more { margin-top: 26px; }
.cp-label.other { margin-top: 24px; }

.cp-tiles { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.cp-tile { height: 84px; border: 1px solid rgba(97,110,124,.16); border-radius: 6px; background: #fafafa; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: 14px; font-weight: 600; }
.cp-tile img { display: block; }

.cp-list { display: flex; flex-direction: column; margin-top: 8px; }
.cp-item { display: flex; align-items: flex-start; gap: 16px; padding: 10px 6px; border-radius: 6px; }
.cp-item img { flex: none; margin-top: 2px; display: block; }
.cp-item .t { font-size: 16px; font-weight: 600; line-height: 22px; }
.cp-item .d { font-size: 14px; color: #757575; line-height: 20px; margin-top: 1px; }
.cp-list.compact { margin-top: 6px; }
.cp-list.compact .cp-item { align-items: center; padding: 11px 6px; }
.cp-list.compact .cp-item img { margin-top: 0; }

.cp-foot { position: relative; margin-top: 20px; border-top: 1px solid rgba(97,110,124,.16); padding: 14px 0 16px; }
.cp-toggle { font-size: 15px; font-weight: 600; color: #1c78c4; }
.cp-cta { position: relative; padding: 0 0 16px; }

/* --- anchor pins --- */
.pin-wrap { position: absolute; z-index: 5; }
.pin-wrap.r { right: -40px; top: 50%; transform: translateY(-50%); }
.pin-wrap.l { left: -40px; top: 50%; transform: translateY(-50%); }
.pin {
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
    font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; line-height: 1;
    display: flex; align-items: center; justify-content: center; padding: 0;
    cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.15s;
}
.pin::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; }
.pin-wrap:hover .pin, .pin:focus-visible { background: var(--ink); color: var(--paper); transform: scale(1.12); }
.pin:focus { outline: none; }
.pin:focus-visible { box-shadow: 0 0 0 3px rgba(10,10,10,.18); }

/* --- tooltip card --- */
.anno {
    position: absolute; top: -16px; width: 300px; z-index: 6;
    background: var(--paper); border: 1px solid var(--rule);
    box-shadow: 0 8px 28px rgba(10,10,10,.14), 0 1px 3px rgba(10,10,10,.08);
    padding: 20px 22px 18px;
    opacity: 0; pointer-events: none; transition: opacity 0.14s ease;
}
.pin-wrap.r .anno { left: calc(100% + 14px); }
.pin-wrap.l .anno { right: calc(100% + 14px); }
.pin-wrap:hover .anno, .pin-wrap:focus-within .anno { opacity: 1; }
.anno .k { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-3); display: block; margin-bottom: 8px; }
.anno h4 { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 10px; }
.anno p { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--ink-2); line-height: 1.55; margin: 0; }
.anno ul.chips { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.anno ul.chips li { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); padding: 4px 8px; line-height: 1.3; }

.anno-hint { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-3); text-align: center; margin: 26px 0 0; line-height: 1.5; }

/* Below the rail width the tooltips can't sit beside the panel — drop them
   under their pin, inside the panel's own width. */
@media (max-width: 1160px) {
    .pin-wrap.r .anno, .pin-wrap.l .anno { left: auto; right: auto; top: calc(100% + 12px); width: 288px; }
    .pin-wrap.r .anno { right: 0; }
    .pin-wrap.l .anno { left: 0; }
}
@media (max-width: 600px) {
    .annotated { overflow: hidden; }
    .cp-scaler { transform: scale(0.74); transform-origin: top center; margin-bottom: -28%; }
}
@media print {
    .anno { position: static; opacity: 1; width: auto; box-shadow: none; margin-top: 10px; }
}