/* ==============================================================================
   MockupSizer Studio - editor-extras.css

   Styles of the editor: the accordion, the sticky live view, the collapsed
   block for the web-developer export extras and the format tiles.

   This used to sit in a <style> block of the start page only. The tool pages
   have no <style> block of their own, so the rules live here now and every page
   links this one file. That keeps the editor looking the same everywhere.

   Loaded after site.css, so these rules win over the Tailwind base.
   ============================================================================== */

/* The entry flow belongs to cropping. While the mockup studio or the PDF
       tool is open it disappears – otherwise a cropping flow would sit above
       a different tool. Plain CSS via :has(); app.js and entry-flow.js are
       untouched. */
    main:has(#view-mockup:not(.hidden)) #entry-flow,
    main:has(#view-pdf:not(.hidden)) #entry-flow { display: none; }

    /* Point 4: in the Image sizer view the entry flow shrinks to the platform
       bar. The dropped file and the download button of the flow are not needed
       there - the editor has both - but the platform filter still picks which
       formats the Format group offers. */
    main:has(#view-resizer:not(.hidden)) #entry-flow { padding: 12px 16px; }
    main:has(#view-resizer:not(.hidden)) #entry-flow .ef-head,
    main:has(#view-resizer:not(.hidden)) #entry-flow .ef-step-first,
    main:has(#view-resizer:not(.hidden)) #entry-flow .ef-step:has(#ef-formats),
    main:has(#view-resizer:not(.hidden)) #entry-flow #ef-advanced,
    main:has(#view-resizer:not(.hidden)) #entry-flow .ef-cta-wrap,
    main:has(#view-resizer:not(.hidden)) #entry-flow .ef-stepnum,
    main:has(#view-resizer:not(.hidden)) #entry-flow .ef-step-title { display: none; }
    main:has(#view-resizer:not(.hidden)) #entry-flow .ef-step,
    main:has(#view-resizer:not(.hidden)) #entry-flow .ef-step:last-child { padding: 0; border-top: 0; }

    /* Live view: keeps the controls in place while the page scrolls. Only
       from 1024 px, because the grid has two columns there. */
    @media (min-width:1024px){.ed-sticky{position:sticky;top:116px;align-self:start}}

    /* Accordion inside the editor. editor-accordion.js wraps each group in
       an ed-group container; while a group is collapsed, everything but its
       header row disappears. */
    .ed-group-collapsed > *:not(.ed-toggle){display:none}
    .ed-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:8px;background:transparent;border:0;margin:0;padding:2px 0;cursor:pointer;text-align:left;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;transition:color .15s}
    .ed-toggle:hover{color:#fff}
    .ed-toggle:focus-visible{outline:2px solid #14b8a6;outline-offset:2px;border-radius:4px}
    .ed-toggle-mark{color:#14b8a6;font-size:13px;line-height:1}
    .ed-group:not(.ed-group-collapsed) > .ed-toggle{margin-bottom:6px}

    /* Frame of the two preview tiles in the dialog. Fixed height, so both
       images end up equally tall whatever their aspect ratio. */
    .ed-shot{display:flex;align-items:center;justify-content:center;padding:8px;background:#0b1120;border:1px solid #334155;border-radius:10px;height:46vh;min-height:180px;overflow:hidden}
    .ed-shot img{display:block;max-width:100%;max-height:100%;object-fit:contain}

    /* Collapsed field for the web-developer export extras. */
    .ed-adv{border-top:1px solid #334155;padding-top:10px}
    .ed-adv-summary{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;list-style:none;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:.04em}
    .ed-adv-summary::-webkit-details-marker{display:none}
    .ed-adv-summary:hover{color:#fff}
    .ed-adv-summary:focus-visible{outline:2px solid #14b8a6;outline-offset:2px;border-radius:4px}
    .ed-adv-mark{color:#14b8a6;font-size:13px;line-height:1}
    .ed-adv-mark::after{content:'+'}
    .ed-adv[open] .ed-adv-mark::after{content:'\2212'}
    .ed-adv-body{display:grid;gap:8px;padding-top:10px}

    /* Format hint inside the dark editor panel. */
    .ef-hint-editor{margin:0 0 6px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;color:#94a3b8}

    /* ----------------------------------------------------------------------
       Base styles for the format tiles.

       They have to live here as well, not only in the start page, because the
       tool pages carry no <style> block of their own while editor-formats.js
       builds exactly the same tile markup there.

       Two of these rules are load-bearing:
         - .ef-formats supplies display:grid, so the two columns below actually
           take effect
         - .ef-formats supplies overflow-y:auto, which is what makes the fixed
           max-height of #ef-formats-editor scroll instead of letting the list
           spill over the sections underneath it
       ---------------------------------------------------------------------- */
    .ef-formats{display:grid;grid-template-columns:1fr;gap:8px;max-height:420px;overflow-y:auto;padding-right:2px}
    @media (min-width:640px){.ef-formats{grid-template-columns:1fr 1fr}}
    @media (min-width:1024px){.ef-formats{grid-template-columns:1fr 1fr 1fr}}
    .ef-tile{display:flex;align-items:center;gap:12px;text-align:left;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;cursor:pointer;transition:border-color .15s,background-color .15s}
    .ef-tile:hover{border-color:#14b8a6}
    .ef-tile.is-selected{border-color:#14b8a6;background:#f0fdfa;box-shadow:inset 0 0 0 1px #14b8a6}
    .ef-tile:focus-visible{outline:2px solid #14b8a6;outline-offset:2px}
    .ef-tile-preview{flex:0 0 44px;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
    .ef-tile-rect{display:block;background:#0f172a;border-radius:3px}
    .ef-tile.is-selected .ef-tile-rect{background:#0f766e}
    .ef-tile-text{min-width:0}
    .ef-tile-name{display:block;font-size:12px;font-weight:700;color:#0f172a;line-height:1.25}
    .ef-tile-dims{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;color:#64748b;margin-top:2px}

    /* ----------------------------------------------------------------------
       FAQ accordion.

       The questions sit in <details>, so the answers are part of the HTML a
       crawler receives and stay readable without JavaScript. The + / - marker
       is drawn in CSS, so no icon element and no script is needed. The list
       rules hide the browser marker in all three engines: display:flex (from
       the markup) covers Chrome, list-style covers Firefox, the pseudo-element
       covers Safari.
       ---------------------------------------------------------------------- */
    .faq-q{list-style:none}
    .faq-q::-webkit-details-marker{display:none}
    .faq-q:focus-visible{outline:2px solid #14b8a6;outline-offset:-2px}
    .faq-item[open] .faq-q{background:#f1f5f9}
    .faq-m::after{content:'+'}
    .faq-item[open] .faq-m::after{content:'\2212'}

    /* Reveals the formats outside the category of this page. Spans the full
       width of the tile grid. */
    #ef-formats-editor .ef-formats-more{grid-column:1/-1;width:100%;padding:6px 8px;border:1px dashed #334155;border-radius:8px;background:transparent;color:#5eead4;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;cursor:pointer;transition:border-color .15s,color .15s}
    #ef-formats-editor .ef-formats-more:hover{border-color:#14b8a6;color:#fff}
    #ef-formats-editor .ef-formats-more:focus-visible{outline:2px solid #14b8a6;outline-offset:2px}

    /* Compact variant of the format tiles in the dark editor panel. The id
       selector outranks the .ef-formats grid rules of the entry flow. */
    #ef-formats-editor{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:220px}
    #ef-formats-editor .ef-tile{padding:6px 8px;gap:8px;background:#0b1120;border-color:#334155}
    #ef-formats-editor .ef-tile.is-selected{background:rgba(20,184,166,.12);border-color:#14b8a6;box-shadow:inset 0 0 0 1px #14b8a6}
    #ef-formats-editor .ef-tile-preview{flex:0 0 26px;width:26px;height:26px}
    #ef-formats-editor .ef-tile-rect{background:#64748b}
    #ef-formats-editor .ef-tile.is-selected .ef-tile-rect{background:#5eead4}
    #ef-formats-editor .ef-tile-name{font-size:10px;color:#e2e8f0}
    #ef-formats-editor .ef-tile-dims{font-size:9px;color:#94a3b8}