/* edet-focus.css — focus mode layout. The structural hides (sidebar,
   aux, preview, goal bar, most chrome) live in edet-base.css with the
   grid override; this file just centers + comfortably constrains the
   editor when #edet-app[data-focus="on"]. Tokens from site.css :root. */

/* Editor pane fills the whole width in focus mode so the "desk" background
   runs edge-to-edge like a real document app; the page sheet stays centered
   inside it via the editor's own max-width (the user's Page width pref). */
.edet-app[data-focus="on"] .dr-editor-pane {
    flex: 1 1 auto;
    width: 100%;
    border-right: none;
}
/* the chrome stays (for the word count + saved + exit button) but reads
   as a thin, quiet strip — no bottom rule (!important beats the grid-desk
   top-zone rule in site.css, which is more specific). */
.edet-app[data-focus="on"] .dr-chrome {
    border-bottom: none !important;
    /* Drop the frosted blur in focus: the chrome is empty + transparent here, so
       the blur is invisible — but it creates a containing block that would make
       the position:fixed controls below anchor to the chrome (offset down) instead
       of the viewport. Removing it lets them pin to the real top on every desk. */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Focus mode shows only the sync pill + Exit focus in the chrome — lift them up
   onto the site-header row (top-right, just left of the hamburger) so the top
   reads as ONE bar, not a header row + a near-empty chrome row beneath it.
   Pinned to the viewport corner with RIGHT offsets (width-independent, and the
   hamburger is always pinned right), so it lands left of the hamburger at any
   width. Only the two controls leave the flow (position:fixed); the rest of the
   chrome row stays in place but is empty + transparent, so document flow and the
   grid-desk recenter math are untouched. z-index clears the grid-desk header
   (z 60). */
.edet-app[data-focus="on"] #dr-sync,
.edet-app[data-focus="on"] #dr-focus-exit {
    position: fixed;
    /* Vertically centre on the header's content line on EVERY device. The header
       content centre = its padding-top (which is max(0.3rem, env(safe-area-inset-top)))
       + 18px (half the 36px hamburger, the tallest header child). translateY(-50%)
       then centres the control there regardless of its OWN height — the sync pill's
       height changes with its label ("Synced" vs "Sign in to sync"), so a fixed top
       can't keep both controls aligned, but centring does. The env() term also keeps
       them clear of the notch/status bar (they'd be unreachable under it otherwise). */
    top: calc(max(0.3rem, env(safe-area-inset-top, 0px)) + 18px);
    transform: translateY(-50%);
    z-index: 61;
    margin: 0;
}
.edet-app[data-focus="on"] #dr-sync { right: 160px; }       /* left of Exit focus */
.edet-app[data-focus="on"] #dr-focus-exit { right: 60px; }  /* clean gap from the right-pinned hamburger */
/* On the grid desk the site header is transparent but sits at z-index 60 ABOVE
   these (which are trapped in the editor's stacking context) — so it swallows
   their clicks even though they're visible through it. In focus the header only
   needs its brand + hamburger interactive, so let everything else click through
   to the lifted controls beneath. */
body.edet-focus .site-header { pointer-events: none; }
body.edet-focus .site-header .brand,
body.edet-focus #menu-toggle { pointer-events: auto; }
/* The formatting toolbar is hidden in focus, but its scroll chevrons live OUTSIDE
   #dr-toolbar (so they stay pinned) and would otherwise leak a stray ">" into the
   empty chrome row. Hide them in focus too. */
.edet-app[data-focus="on"] .dr-tb-edge { display: none !important; }

/* On the grid desk, focus removes the grid lines (plain desk) and LOCKS the board
   in place: cards + connector lines stay visible as a frozen backdrop but can't be
   dragged, resized, connected or selected (pointer-events off → a press falls
   through to pan/edit, never moves a card). Plus the chrome cleanup: hide the
   split-chapter read-only banner and suppress the frosted-chrome panes (their bars
   are hidden in focus, so they'd otherwise paint blurred rectangles). The page is
   recentered by edet-focus.js so it sits centered over the locked board. */
.edet-app[data-focus="on"] .dr-readonly-banner,
.edet-app[data-focus="on"] .dr-suggest-bar { display: none !important; }
.edet-app[data-focus="on"] .dr-canvas-grid { background-image: none !important; }   /* remove grid lines, keep desk bg */
.edet-app[data-focus="on"] .dr-board-card,
.edet-app[data-focus="on"] .dr-board-edge-hit { pointer-events: none !important; }   /* lock cards + lines in place */
body.edet.edet-focus::before,
body.edet.edet-focus::after { display: none !important; }