/* DroidReader: a contained search surface inspired by Material 3 Expressive.
   Scoped to Ghost's search iframe; typography and colour tokens come from the theme. */
:root {
    --accent: #40b463;
    --accent-dark: color-mix(in srgb, var(--accent) 72%, #102117);
    --accent-container: color-mix(in srgb, var(--accent) 18%, #f7fff8);
    --accent-container-strong: color-mix(in srgb, var(--accent) 28%, #effaf1);
    --ink: color-mix(in srgb, var(--accent) 16%, #17201a);
    --muted: color-mix(in srgb, var(--accent) 12%, #657067);
    --paper: color-mix(in srgb, var(--accent) 14%, #f7faf7);
    --card: color-mix(in srgb, var(--accent) 5%, #fff);
    --line: color-mix(in srgb, var(--ink) 11%, transparent);
    --dr-search-font: 'Roboto Flex', Roboto, system-ui, sans-serif;
    --m3-ease-standard: cubic-bezier(.2,0,0,1);
    --m3-ease-spring: cubic-bezier(.16,1.22,.32,1);
    --m3-ease-press: cubic-bezier(.3,0,.2,1);
    --search-edge: max(32px, calc((100vw - 1400px) / 2));
    color-scheme: light;
}
html body { margin: 0; color: var(--ink); font-family: var(--dr-search-font); -webkit-font-smoothing: antialiased; }
.ghost-display, .ghost-display *, .ghost-display::before, .ghost-display::after,
.ghost-display *::before, .ghost-display *::after { font-family: var(--dr-search-font) !important; }
body > div.absolute {
    background: transparent !important; animation: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.ghost-display {
    box-sizing: border-box; height: 100dvh !important;
    padding: 108px var(--search-edge) 24px !important; overflow-y: auto;
}
.ghost-display > .animate-popup {
    --search-radius: 36px 36px 16px 36px;
    position: relative; display: flex; flex-direction: column;
    width: 100% !important; max-width: 680px !important;
    max-height: min(780px, calc(100dvh - 132px)); margin: 0 0 0 auto !important;
    background: var(--card) !important; border: 0;
    border-radius: var(--search-radius);
    box-shadow: 0 8px 32px rgba(12,32,18,.1) !important;
    overflow: hidden; transform-origin: top right; animation: none !important;
}
.ghost-display > .animate-popup::before {
    content: attr(data-dr-search-title); display: block; flex-shrink: 0;
    padding: 30px 90px 24px 30px; color: var(--ink);
    font-size: 34px; font-weight: 650; line-height: 1.12; letter-spacing: -.04em;
    font-variation-settings: 'GRAD' 40, 'opsz' 40; text-transform: none;
}
/* SearchBox stays untransformed so the close control remains anchored to the panel. */
.animate-popup > div.relative {
    position: static !important; flex-shrink: 0; min-height: 64px;
    margin: 0 24px 24px; padding: 14px 20px !important; gap: 0;
    border: 0; border-radius: 32px !important;
    background: var(--accent-container) !important; box-shadow: none !important;
    transition: background-color 180ms var(--m3-ease-standard), border-radius 360ms var(--m3-ease-spring);
}
.animate-popup > div.relative:focus-within {
    background: var(--accent-container-strong) !important; border-radius: 24px 24px 12px 24px !important;
    outline: 2px solid var(--accent-dark); outline-offset: 3px;
}
.animate-popup > div.relative > div:first-child { flex: 0 0 24px; width: 24px; height: 24px; margin-inline-end: 14px; }
.animate-popup input {
    min-width: 0; width: 100%; margin: 0 !important; padding: 0 !important;
    background: transparent !important; color: var(--ink) !important;
    font-size: 20px !important; line-height: 1.5 !important; font-weight: 500;
    letter-spacing: -.015em; caret-color: var(--accent-dark);
}
.animate-popup input::placeholder { color: var(--muted) !important; opacity: 1; }
.animate-popup svg { color: var(--accent-dark) !important; }
.animate-popup button {
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: transform 180ms var(--m3-ease-press), border-radius 340ms var(--m3-ease-spring), background-color 180ms var(--m3-ease-standard);
}
.animate-popup button[alt='Cancel'] {
    position: absolute; top: 22px; right: 22px; display: grid !important; place-items: center;
    width: 48px; height: 48px; min-width: 48px; margin: 0; padding: 0;
    border: 0; border-radius: 18px; background: var(--accent) !important; color: #fff !important;
    font-size: 0 !important;
}
.animate-popup button[alt='Cancel']::before, .animate-popup button[alt='Cancel']::after {
    content: ''; position: absolute; width: 18px; height: 2px; border-radius: 1px;
    background: currentColor; transform: rotate(45deg);
}
.animate-popup button[alt='Cancel']::after { transform: rotate(-45deg); }
.animate-popup button[alt='Clear'] {
    display: grid; place-items: center; width: 48px; height: 48px;
    padding: 12px; margin: -12px; border: 0; border-radius: 18px;
}
.animate-popup > .overflow-y-auto {
    flex: 1 1 auto; min-height: 0; max-height: none !important; margin: 0 !important;
    padding: 0 24px 24px; overscroll-behavior: contain; scrollbar-width: thin;
    scrollbar-color: var(--accent-container-strong) transparent;
}
.animate-popup .border-t { border: 0 !important; padding: 0 0 12px !important; }
.animate-popup .border-t + .border-t { padding-top: 12px !important; }
.animate-popup h1 {
    margin: 0 0 12px; padding: 0 6px; color: var(--accent-dark) !important;
    font-size: 14px !important; line-height: 1.4; font-weight: 650 !important;
    letter-spacing: .01em; text-transform: none !important;
}
.animate-popup .cursor-pointer {
    position: relative; margin: 4px 0 !important; padding: 18px 20px !important;
    border-radius: 8px; background: color-mix(in srgb, var(--paper) 60%, var(--card));
    transition: border-radius 340ms var(--m3-ease-spring), background-color 180ms var(--m3-ease-standard);
}
.animate-popup .cursor-pointer:first-of-type { border-start-start-radius: 24px; border-start-end-radius: 24px; }
.animate-popup .cursor-pointer:last-of-type { border-end-start-radius: 24px; border-end-end-radius: 24px; }
.animate-popup .cursor-pointer.bg-neutral-100 { background: var(--accent-container-strong) !important; border-radius: 24px 24px 12px 24px; }
.animate-popup h2 {
    color: var(--ink) !important; font-size: 23px !important; font-weight: 600 !important;
    line-height: 1.18 !important; letter-spacing: -.025em; font-variation-settings: 'GRAD' 20, 'opsz' 28;
}
.animate-popup h2 .font-bold { color: var(--accent-dark) !important; font-weight: 720 !important; }
.animate-popup p { color: var(--muted) !important; font-size: 14px !important; line-height: 1.5 !important; }
.animate-popup .cursor-pointer p { margin-top: 7px !important; }
.animate-popup button.w-full {
    min-height: 52px; margin: 18px 0 0 !important; padding: 14px 24px !important;
    border: 0 !important; border-radius: 26px 26px 12px 26px !important;
    background: var(--accent) !important; color: #fff !important;
    font-size: 15px !important; font-weight: 680 !important;
}
.animate-popup button:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 3px; }
.animate-popup button:active { transform: scale(.94); border-radius: 24px 12px 24px 24px !important; }
.animate-popup button.w-full:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
    .animate-popup .cursor-pointer:hover { background: var(--accent-container-strong) !important; border-radius: 24px 12px 24px 24px; }
    .animate-popup button[alt='Clear']:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }
    .animate-popup button[alt='Cancel']:hover, .animate-popup button.w-full:hover {
        background: color-mix(in srgb, var(--accent) 92%, #000) !important;
        border-radius: 26px 14px 26px 26px !important;
    }
}
.animate-popup:has(input:placeholder-shown)::after {
    content: 'Notícias, análises e dicas do universo Android.';
    display: block; padding: 0 30px 32px; color: var(--muted); font-size: 15px; line-height: 1.6;
}
.animate-popup > .py-4 { padding: 0 30px 32px !important; }
@keyframes dr-search-expand {
    from { transform: translate3d(12px,-18px,0) scale(.92); border-radius: 52px 12px 52px 52px; }
    to { transform: none; border-radius: var(--search-radius); }
}
@keyframes dr-search-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dr-search-content { from { transform: translateY(14px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
    .ghost-display > .animate-popup {
        animation: dr-search-expand 520ms var(--m3-ease-spring) backwards,
            dr-search-fade 220ms var(--m3-ease-standard) backwards !important;
    }
    .ghost-display > .animate-popup::before {
        animation: dr-search-content 420ms var(--m3-ease-spring) 80ms backwards,
            dr-search-fade 180ms var(--m3-ease-standard) 80ms backwards;
    }
    .animate-popup input, .animate-popup > div.relative > div:first-child {
        animation: dr-search-content 420ms var(--m3-ease-spring) 120ms backwards,
            dr-search-fade 180ms var(--m3-ease-standard) 120ms backwards;
    }
}
@media (max-width: 720px) {
    .ghost-display { padding: 90px 12px 12px !important; }
    .ghost-display > .animate-popup { --search-radius: 28px 28px 12px 28px; max-width: none !important; max-height: calc(100dvh - 102px); }
    .ghost-display > .animate-popup::before { padding: 26px 72px 24px 24px; font-size: 27px; }
    .animate-popup button[alt='Cancel'] { top: 18px; right: 16px; }
    .animate-popup > div.relative { min-height: 60px; margin: 0 18px 22px; padding: 12px 16px !important; }
    .animate-popup input { font-size: 18px !important; }
    .animate-popup > .overflow-y-auto { padding: 0 14px 16px; }
    .animate-popup h1 { padding-inline: 8px; }
    .animate-popup .cursor-pointer { padding: 16px !important; }
    .animate-popup h2 { font-size: 21px !important; }
    .animate-popup:has(input:placeholder-shown)::after, .animate-popup > .py-4 { padding: 0 24px 28px !important; font-size: 14px; }
}
@media (max-height: 540px) {
    .ghost-display { padding-top: 12px !important; padding-bottom: 12px !important; }
    .ghost-display > .animate-popup { max-height: calc(100dvh - 24px); }
}
@media (prefers-reduced-motion: reduce) {
    body > div.absolute, .ghost-display > .animate-popup, .ghost-display > .animate-popup::before,
    .animate-popup input, .animate-popup > div.relative > div:first-child { animation: none !important; }
    .animate-popup *, .animate-popup *::before, .animate-popup *::after { transition: none !important; }
    .animate-popup button:active { transform: none; }
}