/* ============================================================
   style.css — readable, responsive column (title underline VISUALLY aligned)
   Notes:
   - Works with <input id="pad-title"> OR class="pad-title".
   - Underline alignment matches the editor text column.
   ============================================================ */

/* 1) Inter variable fonts */
@font-face{
  font-family:'Inter';
  src:url('../fonts/InterVariable.woff2') format('woff2-variations');
  font-style:normal; font-weight:100 900; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/InterVariable-Italic.woff2') format('woff2-variations');
  font-style:italic; font-weight:100 900; font-display:swap;
}

/* 2) Theme, scale, layout tokens */
:root{
  /* palette */
  --bg:#fefefd; --text:#202124; --text-light:#5f6368;
  --border-light:rgba(0,0,0,.08); --border-medium:rgba(0,0,0,.15); --border-focus:rgba(0,0,0,.25);

  /* type */
  --font:'Inter',system-ui,sans-serif;
  --fs-base:clamp(.95rem,.85rem + .35vw,1.05rem);
  --fs-title:clamp(1.6rem,1.3rem + 1.2vw,2.4rem);
  --lh:1.5; --lh-title:1.25;

  /* app bar */
  --bar-h:2.6rem;

  /* editor column and side padding */
  --editor-col:clamp(560px,78ch,980px);
  --editor-sidepad:16px;

  /* page side padding for the outer .pad container */
  --page-pad-x:1rem;

  /* Editor.js toolbar rail (visual gutter to the left of content) */
  --toolbar-w:50px;
  --toolbar-gap:9px;

  /* computed actual column width (same max-width used by Editor.js blocks) */
  --col-actual: min(var(--editor-col), calc(100vw - var(--page-pad-x)*2));

  /* container wide enough to hold the column + toolbar rail */
  --column-outer: calc(var(--col-actual) + var(--toolbar-w) + var(--toolbar-gap) + var(--editor-sidepad) * 2);

  /* Single source of truth for the left inset of body text (sidepad + rail) */
  --content-inset-left: calc(var(--editor-sidepad) + var(--toolbar-w) + var(--toolbar-gap));

  /* Underline VISUAL alignment controls (match text inset; nudge if needed) */
  --title-line-left:  var(--content-inset-left);
  --title-line-right: var(--editor-sidepad);
  --title-line-nudge-left: 0px;
  --title-line-nudge-right: 0px;

  /* editor headings */
  --h1-fs: clamp(1.4rem,1.2rem + 1vw,2rem);   --h1-lh:1.3;
  --h2-fs: clamp(1.2rem,1rem + .85vw,1.65rem); --h2-lh:1.35;
  --h3-fs: clamp(1.05rem,.95rem + .6vw,1.35rem); --h3-lh:1.4;

  /* misc */
  --sync-ok:#29c16c; --sync-warn:#e6b800; --sync-err:#e04344;
  --brand:#2563EB; --brand-hover:#1E54C7; --brand-tint:#EDF4FF;
  --modal-bg-light:#fff; --modal-bg-dark:#1f1f1f;
  --modal-text-dark:#202124; --modal-text-light:#e9e9e9;
  --selection-bg:#e1f2ff; --selection-text:currentColor;
}

/* 3) Reset & base */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--bar-h); scrollbar-gutter:stable both-edges; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:var(--fs-base)/var(--lh) var(--font); -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--selection-bg); color:var(--selection-text); }
::-moz-selection{ background:var(--selection-bg); color:var(--selection-text); }

/* 4) App bar */
.app-bar{
  position:fixed; top:0; left:0; right:0;
  height:var(--bar-h); display:flex; align-items:center; justify-content:space-between;
  padding:0 .85rem; background:rgba(254,254,253,.92);
  backdrop-filter:blur(6px) saturate(160%);
  border-bottom:1px solid var(--border-light); z-index:1000;
}
@supports not (backdrop-filter:blur(6px)){ .app-bar{ background:rgba(254,254,253,.98);} }
.app-left,.app-right{ display:flex; align-items:center; gap:1.2rem; }
.bar-btn{
  display:flex; align-items:center; gap:.45rem; font:600 .85rem/1 var(--font);
  padding:.25rem .6rem; min-height:44px; border:0; background:none; border-radius:.45rem; cursor:pointer;
  transition:background .15s ease;
}
.bar-btn:hover{ background:rgba(0,0,0,.06); }
.bar-btn:active{ background:rgba(0,0,0,.10); }
.bar-btn:focus-visible{ outline:2px solid var(--border-focus); outline-offset:2px; }
.bar-btn svg{ display:block; flex:none; }

/* 5) Sync pill */
.save-status{ min-width:7ch; text-align:right; font-size:.9rem; color:var(--text-light); }
.sync-ind{ display:flex; align-items:center; gap:.4rem; font-size:.9rem; }
.sync-dot{ width:.65rem; height:.65rem; border-radius:50%; background:var(--sync-warn); transition:background-color .25s; }
.state-synced .sync-dot{ background:var(--sync-ok); }
.state-unsynced .sync-dot{ background:var(--sync-warn); }
.state-offline .sync-dot{ background:var(--sync-err); }

/* 6) Pad container & fade-in */
#pad-title,.pad-title,#editor{ opacity:0; transition:opacity .15s ease-out; }
body.content-ready #pad-title,
body.content-ready .pad-title,
body.content-ready #editor{ opacity:1; }

.pad{
  max-width:var(--column-outer);
  margin:0 auto 6rem;
  padding:calc(var(--bar-h) + 1.2rem) var(--page-pad-x) 0;
}

/* 7) Title — underline aligned to body text */
#pad-title,
.pad-title{
  box-sizing:border-box;
  display:block;

  /* Keep the title centered like the pad container */
  width:min(100%, var(--column-outer));
  max-width:var(--column-outer);
  margin:0 auto .9rem;

  /* Title text styling */
  padding:.35rem 0;
  font-size:var(--fs-title); font-weight:700; line-height:var(--lh-title);
  color:var(--text);
  border:0; background:transparent;
  appearance:none; -webkit-appearance:none; outline:none; box-shadow:none;

  /* Compute effective left/right insets for the underline */
  --_left:  calc(var(--title-line-left)  + var(--title-line-nudge-left));
  --_right: calc(var(--title-line-right) + var(--title-line-nudge-right));

  /* Draw the underline relative to the full title width */
  background-image:linear-gradient(var(--border-light), var(--border-light));
  background-repeat:no-repeat;
  background-position:left var(--_left) bottom;
  background-size:max(0px, calc(100% - var(--_left) - var(--_right))) 1px;
}
#pad-title:focus-visible,
.pad-title:focus-visible{
  background-image:linear-gradient(var(--border-focus), var(--border-focus));
}

/* 8) Editor content */
.editor{ min-height:70vh; }
.editor h1{ font-size:var(--h1-fs); line-height:var(--h1-lh); margin:0 0 .6em; font-weight:700; color:var(--text); }
.editor h2{ font-size:var(--h2-fs); line-height:var(--h2-lh); margin:0 0 .6em; font-weight:700; color:var(--text); }
.editor h3{ font-size:var(--h3-fs); line-height:var(--h3-lh); margin:0 0 .6em; font-weight:700; color:var(--text); }
.editor p{ margin:0 0 1.6em; color:var(--text-light); }
.editor li{ color:var(--text-light); }

/* Keep containers full width, center inner column */
.codex-editor{ position:relative; }
.codex-editor__redactor{ position:relative; max-width:100%; margin:0 auto; }

/* Body block geometry — reserve left rail so text aligns with the title underline */
.codex-editor__redactor .ce-block__content{
  box-sizing:border-box;
  max-width:var(--col-actual);
  margin:0 auto;
  padding-left:var(--content-inset-left);
  padding-right:var(--editor-sidepad);
}

/* 9) Focus a11y */
:focus-visible{ outline:2px solid var(--border-focus); outline-offset:2px; }

/* 10) Responsive helpers & reduced motion */
@media (min-width:48rem){
  :root{ --page-pad-x:2rem; }
}
@media (max-width:480px){
  :root{
    --editor-sidepad:12px;
    --toolbar-w:46px;
    --toolbar-gap:8px;

    /* vars below recompute automatically via calc() */
    --title-line-left: var(--content-inset-left);
    --title-line-right: var(--editor-sidepad);
  }
  .pad{ padding:calc(var(--bar-h) + 1rem) var(--page-pad-x) 0; }
}
@media (min-width:1600px){
  :root{ --editor-col:clamp(640px,82ch,1040px); }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
  html{ scroll-behavior:auto; }
}

/* 11) Search-bar chrome removals */
.search-row,
.search-row:focus,
.search-row:focus-visible,
.search-container .pad-search,
.search-container .pad-search:focus,
.search-container .pad-search:focus-visible{
  outline:none!important; border:none!important; box-shadow:none!important;
}
.search-container .pad-search:focus-visible{ box-shadow:0 0 0 2px rgba(0,102,204,.25)!important; }
.search-container input.pad-search[type="search"]{
  border:0!important; outline:none!important; box-shadow:none!important;
  appearance:none!important; background:transparent!important;
}

/* 12) Kill Editor.js & plugin tooltips (safe: does not hide menus) */
.cdx-tooltip, .codex-editor__tooltip, .ce-tooltip, .ce-toolbar__tooltip,
.ce-inline-toolbar [class*="tooltip"], .tc-popover__tooltip, .tc-toolbar__tooltip{
  display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important;
}
.codex-editor [data-tooltip]::before,
.codex-editor [data-tooltip]::after,
.codex-editor [data-hint]::before,
.codex-editor [data-hint]::after{ content:none !important; display:none !important; }
.tippy-box,.tippy-content,.tippy-arrow,.tippy-svg-arrow,.tippy-popper{
  display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important;
}

/* 13) MicroModal (unchanged) */
.modal{ display:none; }
.modal.is-open,.modal[aria-hidden="false"]{ display:block; }
.modal__overlay{
  position:fixed; inset:0; backdrop-filter:blur(2px);
  display:flex; justify-content:center; align-items:flex-start;
  padding:6vh 1rem; background-color:rgba(0,0,0,0);
  opacity:0; transition:background-color .16s ease, opacity .16s ease; z-index:1050;
  touch-action:none;
}
.modal.is-open .modal__overlay,
.modal[aria-hidden="false"] .modal__overlay{
  background-color:rgba(0,0,0,.45); opacity:1 !important;
}
@keyframes modal-pop{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);} }
.modal__container{
  background:var(--modal-bg-light); color:var(--modal-text-dark);
  width:100%; max-width:380px; border-radius:.55rem; padding:1.5rem;
  border:1px solid var(--border-light); box-shadow:0 12px 32px rgba(0,0,0,.18);
  transform:translateY(-8px); transition:transform .16s ease;
}
.modal.is-open .modal__container,
.modal[aria-hidden="false"] .modal__container{ transform:translateY(0); animation:modal-pop .16s ease-out; }
@media (prefers-color-scheme:dark){
  .modal__container{ background:var(--modal-bg-dark); color:var(--modal-text-light); border-color:#333; }
}
.modal__header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1rem; border-bottom:1px solid var(--border-light);
}
.modal__title{ font-size:1.25rem; font-weight:600; margin:0; }
.modal__close{ background:none; border:0; font-size:1.25rem; cursor:pointer; color:inherit; }
.modal__content{ font-size:.95rem; margin-bottom:1.2rem; }
.modal__footer{ display:flex; gap:.6rem; justify-content:flex-end; }
.modal__btn{
  background:#f5f5f5; color:#202124; border:1px solid var(--border-light);
  padding:.45rem 1.1rem; border-radius:.4rem; font-size:.9rem; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.modal__btn:hover,.modal__btn:focus-visible{ background:#e9e9e9; border-color:var(--border-medium); }
.modal__btn-danger{
  background:#d32f2f; border:1px solid #c62828; color:#fff;
  padding:.45rem 1.1rem; border-radius:.4rem; font-size:.9rem; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
@media (prefers-color-scheme:dark){
  .modal__btn{ background:#2a2a2a; color:#e9e9e9; border:1px solid rgba(255,255,255,.18); }
  .modal__btn:hover,.modal__btn:focus-visible{ background:#333333; border-color:rgba(255,255,255,.28); }
  .modal__btn-danger{ background:#e04344; border:1px solid #ba373b; }
  .modal__btn-danger:hover,.modal__btn:focus-visible{ background:#ba373b; border-color:#a02d2f; }
}

/* 14) History modal (dark scheme) */
#history-modal .modal__container{
  background:var(--modal-bg-dark); color:var(--modal-text-light);
  width:90%; max-width:500px; border-radius:8px; overflow:hidden;
}
#history-modal .modal__header{
  background:var(--modal-bg-dark); padding:1rem;
  border-bottom:1px solid rgba(255,255,255,0.2);
}
#history-modal .hist-content{
  max-height:60vh; overflow-y:auto; padding:.5rem 1rem 1rem;
  display:flex; flex-direction:column; gap:.5rem;
}
.hist-row{
  display:grid; grid-template-columns:1fr auto auto; gap:.5rem; align-items:center;
  padding:.5rem; background:#2a2a2a; border:1px solid rgba(255,255,255,.1);
  border-radius:4px; transition:background .2s;
}
.hist-row:hover{ background:#333333; }
.hist-row .ts{
  font-family:monospace; font-size:.875rem; color:#e9e9e9;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hist-row button{
  padding:.4rem .75rem; font-size:.8125rem; border:1px solid rgba(255,255,255,.2);
  border-radius:4px; background:#2a2a2a; color:#e9e9e9;
  cursor:pointer; transition:background .2s, border-color .2s;
}
.hist-row button[data-act="p"]{ border-color:var(--brand); color:var(--brand); }
.hist-row button[data-act="p"]:hover{ background:rgba(37,99,235,0.1); }
.hist-row button[data-act="r"]{ border-color:#e57373; color:#e57373; }
.hist-row button[data-act="r"]:hover{ background:rgba(229,115,115,0.1); }

/* 15) Prevent background scroll when modal is open */
body.modal-open{ overflow:hidden; position:relative; touch-action:none; overscroll-behavior:none; }
@supports selector(:has(.modal.is-open)){
  html:has(.modal.is-open),
  html:has(.modal[aria-hidden="false"]){
    overflow:hidden; touch-action:none; overscroll-behavior:contain;
  }
}

/* Optional: keep live-preview interactive exceptions */
.live-preview *{ pointer-events:none; }
.live-preview #btn-mypads,
.live-preview #pad-list,
.live-preview #pad-list *{ pointer-events:auto; }

/* 16) Selection colors (dark mode override) */
@media (prefers-color-scheme:dark){
  :root{ --selection-bg:#e1f2ff; --selection-text:currentColor; }
}
::selection{ background:var(--selection-bg); color:var(--selection-text); }
::-moz-selection{ background:var(--selection-bg); color:var(--selection-text); }

/* ============================================================
   PATCH — normalize Editor.js block boxes for accurate centering
   ============================================================ */
.codex-editor__redactor .ce-block{ display:flow-root; margin-block:12px; }
.codex-editor__redactor .ce-block__content > :first-child{ margin-top:0; }
.codex-editor__redactor .ce-block__content > :last-child{ margin-bottom:0; }

/* Highlight match for block focus/selection */
:root{ --block-highlight-bg:var(--selection-bg); }
.codex-editor__redactor .ce-block--focused .ce-block__content,
.codex-editor__redactor .ce-block--selected .ce-block__content{
  background:var(--block-highlight-bg) !important;
}

/* Selection-safe rules for Editor.js */
.codex-editor [contenteditable="true"],
.codex-editor .cdx-list,
.codex-editor .cdx-list__item,
.codex-editor .cdx-checklist,
.codex-editor .cdx-checklist__item-text{
  -webkit-user-select:text !important;
  user-select:text !important;
}
.codex-editor.np-selecting .ce-toolbar__plus,
.codex-editor.np-selecting .ce-toolbar__settings-btn,
.codex-editor.np-selecting .ce-block__actions,
.codex-editor.np-selecting .ce-block__drag-handle,
.codex-editor.np-selecting .ce-toolbar,
.codex-editor.np-selecting .cdx-checklist__item-checkbox{
  pointer-events:none !important;
}

/* ======================= HARD OVERRIDE (keep at end) ======================= */
/* Force body text to start after the left rail, regardless of other CSS */
.codex-editor .ce-block__content,
.codex-editor__redactor .ce-block__content,
.codex-editor .codex-editor__redactor .ce-block__content{
  padding-left: var(--content-inset-left) !important;
  padding-right: var(--editor-sidepad) !important;
}