/* RahaBook — app-level chrome that has no counterpart in the template CSS.
   Everything else comes from the template stylesheets (base/layout/book3d/
   components/responsive/shared/dashboard/auth). Keep this file minimal. */

/* Language switcher (app i18n requirement; template has no such element). */
.lang-switch {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    font-size: 13px;
    flex-shrink: 0;
}
.lang-switch a {
    padding: 4px 10px;
    color: var(--muted);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.lang-switch a:hover { color: var(--text); }
.lang-switch a.active {
    background: var(--grad, linear-gradient(120deg,#FFB05C,#ED1B4C));
    color: #fff;
    font-weight: 600;
}

/* Server flash messages (template SPA used toasts; server-rendered pages
   need a persistent banner for session status / first error). */
.alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 13px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-size: 13.5px;
    line-height: 1.8;
    margin-bottom: 16px;
}
.alert-error {
    border-color: rgba(248,113,113,.45);
    background: rgba(248,113,113,.08);
}
.alert-success {
    border-color: rgba(52,211,153,.45);
    background: rgba(52,211,153,.08);
}
.alert-close {
    margin-inline-start: auto;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
}

/* Template styles these as buttons; our multi-page equivalents are anchors. */
a.auth-tab {
    color: var(--muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
a.view-back {
    color: var(--text);
    text-decoration: none;
}

/* Small screens: keep topbar / nav-cta from crowding. */
@media (max-width: 640px) {
    .lang-switch { font-size: 12px; }
    .lang-switch a { padding: 4px 7px; }
}

/* ============================================================
   Phase 20 / 20.1 - Book Editor (workspace centre pane)
   The template drives the block toolbar by hover + JS (.open
   class). The real editor uses progressive <details> instead,
   so the bar stays visible and the menu opens as an overlay
   purely from details[open] - no hover, no JS dependency.
   Phase 20.1 fix: the old static-in-flow menu expanded the
   edit form BELOW the scroll fold, which made "Edit appears
   to do nothing". The menu is an overlay again and the page
   height never changes when it opens.
   ============================================================ */
.ws-editor .pbar{position:static;opacity:1;transform:none;pointer-events:auto;
  flex-wrap:wrap;margin-top:8px;box-shadow:none}
.ws-editor .pblock{margin-top:22px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--row-bg)}
.ws-editor .pblock.has-proposal{border-color:rgba(180,80,255,.45)}
.ws-editor .ptext{font-size:15.5px;line-height:2.1;padding:0}
/* Phase 21 (Scope C): uploaded avatar inside the topbar user chip */
.uc-av img{width:100%;height:100%;border-radius:inherit;object-fit:cover;display:block}
.ws-editor .p-more-wrap{display:inline-block}
.ws-editor .p-more-wrap summary{list-style:none;cursor:pointer}
.ws-editor .p-more-wrap summary::-webkit-details-marker{display:none}
.ws-editor .p-more-wrap[open] > summary{color:var(--accent-soft)}
/* Overlay menu (mirrors the template design): hidden until the
   native details toggle opens it; never grows the document.
   Anchoring is inline-START (opens toward the inline-end, where the
   pane has room): the template toolbar's menu button sat at the inline
   END, but the real pen/wand buttons sit at the inline START, so an
   end-anchored 300px menu ran past the pane edge and was clipped by
   .ws-editor overflow (browser QA: -125px LTR, -141px RTL). */
.ws-editor .p-menu{position:absolute;top:calc(100% + 8px);inset-inline:0 auto;
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  min-width:min(300px,80vw);max-width:min(560px,90vw);
  max-height:min(60vh,480px);overflow:auto;z-index:30}
.ws-editor details[open] > .p-menu{opacity:1;visibility:visible;transform:none;pointer-events:auto}
/* Stacking escape: editor.css gives every .pblock position:relative AND an
   entrance animation, so each block is its own stacking context and the
   menu's inner z-index cannot rise above the NEXT sibling block (whose
   opaque --row-bg painted over the part of the menu extending past the
   block bottom). Browser hit-test confirmed: raising the block itself
   makes elementFromPoint return the textarea again. */
.ws-editor .pblock:focus-within,
.ws-editor .pblock:has(details[open]){z-index:40}
/* ============================================================
   Inline paragraph edit panel (Phase 20.1 follow-up feedback):
   the pen opens a FULL-WIDTH OPAQUE panel that expands the
   paragraph downward instead of a small transparent popup.
   The overlay .p-menu above now serves the AI wand menu only.
   ============================================================ */
.ws-editor details.p-edit{margin-top:10px;border:1px solid var(--border);border-radius:14px;
  /* row-bg is a 4.5% white TINT in the dark theme — layering it over the
     opaque --bg-2 keeps the raised look while nothing shows through. */
  background:linear-gradient(var(--row-bg),var(--row-bg)),var(--bg-2);overflow:hidden}
.ws-editor details.p-edit > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:8px;padding:11px 16px;font-size:12.5px;font-weight:700;color:var(--muted)}
.ws-editor details.p-edit > summary::-webkit-details-marker{display:none}
.ws-editor details.p-edit[open] > summary{border-bottom:1px solid var(--border);color:var(--accent-soft)}
.ws-editor .p-edit__chev{margin-inline-start:auto;font-size:11px;transition:transform .2s}
.ws-editor details.p-edit[open] > summary .p-edit__chev{transform:rotate(180deg)}
.ws-editor details.p-edit form{padding:14px 16px 0;margin:0}
.ws-editor details.p-edit textarea{width:100%;box-sizing:border-box;font-family:inherit;
  font-size:15.5px;line-height:2.1;color:var(--text);background:var(--bg-2);
  border:1px solid var(--border);border-radius:10px;padding:12px 14px;resize:vertical}
.ws-editor .p-edit__actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ws-editor .p-edit__remove{padding:0 16px 12px}
.ws-editor .p-edit__remove button{background:none;border:none;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:600;color:#F87171;padding:6px 0;display:inline-flex;align-items:center;gap:8px}
.ws-editor .p-edit__remove button:hover{text-decoration:underline}
/* The toolbar pen mirrors the panel state (details/summary live apart). */
.ws-editor .pblock.editing [data-edit-toggle]{color:var(--accent-soft);background:var(--nav-hover)}
.ws-editor .p-menu form{display:flex;flex-direction:column;gap:2px}
.ws-editor .p-menu button{width:100%;text-align:start;background:none;border:none;
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--text);cursor:pointer;
  padding:9px 12px;border-radius:9px;display:flex;align-items:center;gap:10px}
.ws-editor .p-menu button:hover{background:var(--nav-hover);color:var(--accent-soft)}
.ws-editor .pab.danger{color:#F87171}
.ws-editor .pab.danger:hover{background:rgba(248,113,113,.1);color:#F87171}
/* Add-paragraph details expand in flow (they are not overlay menus). */
.ws-editor .add-para summary{list-style:none;cursor:pointer}
.ws-editor .add-para summary::-webkit-details-marker{display:none}
.ws-editor .add-para[open] > summary{color:var(--accent-soft)}
.ws-editor .export-menu-form{display:block;margin:0}
.dropdown form{margin:0}
.dropdown form button{width:100%;display:flex;align-items:center;gap:10px;padding:9px 14px;
  border:none;background:none;font-family:inherit;font-size:13px;color:var(--text);cursor:pointer;text-align:start}
.dropdown form button:hover{background:var(--nav-hover)}
.ed-nav{display:flex;justify-content:space-between;gap:12px;margin-top:28px;padding-top:16px;border-top:1px solid var(--border)}
.sugg{border:1px solid var(--border);border-inline-start:3px solid #C58AFF;border-radius:12px;padding:14px;margin-top:10px;background:var(--bg-2)}
.sugg__label{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.sugg__col{font-size:14px;line-height:1.9;white-space:pre-wrap}
/* Focus mode hides the side panes; keep the editor readable.
   Phase 20.1 fix: the pane collapse used to leave the editor in
   a 0-width grid track; pin it to the flexible middle track. */
body.focus .ed-inner{max-width:820px}
body.focus .ws-structure,body.focus .ws-agent{display:none}
body.focus .ws-wrap.ws-editor-shell{grid-template-columns:0 minmax(0,1fr) 0}
body.focus .ws-editor{grid-column:2}
@media (max-width:1080px){
  body.focus .ws-editor{grid-column:auto}
}
.ed-body-label{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--muted);margin-bottom:4px}
.ed-body-label i{color:#4CC38A}
/* Phase 20.1: narrow screens must not overflow horizontally.
   The template collapses to drawers at 1080px; QA measured 444px of
   content at a 375px viewport - the topbar row cannot shrink below
   its min-content, so below 640px it WRAPS instead (height becomes
   auto and --ed-topbar tracks it for the drawers and page height).
   The overlay menu also anchors to the inline-start edge there:
   inline-end anchoring clipped it off-screen (left:-143 at 375px). */
:root{--ed-topbar:62px}
/* Drawer offsets: editor.css loads AFTER this file and hardcodes
   top:62px inside its 1080px block, so the var-driven rule must carry
   higher specificity to win at equal source order rules. */
.ws-wrap .ws-structure{top:var(--ed-topbar)}
.ws-wrap .ws-agent{top:var(--ed-topbar)}
@media (max-width:640px){
  /* Two wrapped rows + 1px border measure ~105px at 640; the var must
     stay >= the real header height or the drawers overlap the topbar. */
  :root{--ed-topbar:105px}
  body.ed-body{height:auto;min-height:100vh;overflow:visible}
  .ws-wrap.ws-editor-shell{overflow:visible}
  /* header.ed-topbar (0,1,1) beats editor.css's plain .ed-topbar (0,1,0),
     which loads AFTER this file and would otherwise keep its own padding. */
  header.ed-topbar{height:auto;min-height:var(--ed-topbar);flex-wrap:wrap;gap:4px 8px;padding:8px 10px;justify-content:flex-end}
  .tb-right{flex:1 1 120px}
  .tb-titles b{max-width:min(46vw,220px)}
  .tb-titles small{display:none}
  .tb-center{order:3;flex-basis:100%;justify-content:flex-start}
  .words-chip{display:none}
  .save-state{padding:7px 10px}
  .save-state span{display:none}
  .tb-left{gap:6px;margin-inline-start:0}
  .ws-editor{height:calc(100vh - var(--ed-topbar))}
  .ws-editor .p-menu{inset-inline:8px auto;margin-inline:auto}
}
@media (max-width:480px){
  /* Four wrapped topbar rows + border fit at 375px because the row WRAPS
     (never scrolls sideways). The language switch stays VISIBLE: i18n
     requires switching on every device, so it must not be hidden here. */
  :root{--ed-topbar:161px}
}