/* Layout & pane styles extracted from styles.css */

/* ----------------------------------------------------------------
   Unified Interactive Element Styles
   All clickable/focusable UI elements share these base properties
   for consistent hover, focus, and selection behavior.
   ---------------------------------------------------------------- */
button,
.status-link {
  background: transparent;
  border: 1px solid var(--ui-border-default);
  /* use compact padding but ensure controls share a consistent min height */
  padding: var(--control-padding-vert) var(--control-padding-horiz);
  min-height: var(--control-height);
  color: var(--ui-text-default);
  text-decoration: none;
  cursor: pointer;
  font-weight: var(--ui-font-weight);
  font-family: var(--ui-font);
  display: inline-flex;
  align-items: center;
  gap: var(--control-gap);
  border-radius: 0; /* flat UI, no rounded corners */
  font-size: var(--ui-font-size);
  line-height: 1;
  transition: background var(--ui-transition-fast), 
              border-color var(--ui-transition-fast),
              color var(--ui-transition-fast);
}

button:hover, 
.status-link:hover {
  background: var(--ui-hover-bg);
  border-color: var(--ui-border-hover);
  color: var(--ui-text-hover);
}

/* Hide default focus outline - only show focus-visible (keyboard navigation) */
button:focus,
.status-link:focus,
[role="button"]:focus {
  outline: none;
}

/* Make focused controls highly visible ONLY for keyboard navigation.
   Mouse clicks do not trigger :focus-visible, only Tab key does. */
button:focus-visible, 
.status-link:focus-visible, 
[role="button"]:focus-visible {
  border-color: var(--ui-border-focus);
  background-color: transparent;
  color: var(--ui-text-focus);
  outline: none;
}

/* Visual cue for the default/Enter-activated action (e.g., confirm dialog OK button)
   Uses accent-colored border to indicate this is the default action. */
.default-action {
  border-color: var(--ui-border-active);
}
.default-action:focus-visible {
  border-color: var(--ui-border-focus);
  background-color: transparent;
}

button:disabled, 
.status-link:disabled,
button[disabled], 
.status-link[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: var(--ui-border-default);
  color: var(--ui-text-muted);
}

/* Allow hover effects on disabled buttons (visual feedback) */
button:disabled:hover,
.status-link:disabled:hover,
button[disabled]:hover,
.status-link[disabled]:hover {
  background: var(--ui-hover-bg);
  border-color: var(--ui-border-hover);
}

/* Show focus indicator on disabled buttons for keyboard navigation only */
button:disabled:focus,
.status-link:disabled:focus,
button[disabled]:focus,
.status-link[disabled]:focus {
  outline: none;
}

button:disabled:focus-visible,
.status-link:disabled:focus-visible,
button[disabled]:focus-visible,
.status-link[disabled]:focus-visible {
  border-color: var(--ui-border-focus);
  background-color: transparent;
  outline: none;
}

/* Prevent clicks on disabled buttons */
button:disabled,
.status-link:disabled,
button[disabled],
.status-link[disabled] {
  pointer-events: none;
}

/* But allow hover and keyboard events to work */
button:disabled,
.status-link:disabled,
button[disabled],
.status-link[disabled] {
  pointer-events: auto;
}

/* Block actual clicks/activation */
button:disabled:active,
.status-link:disabled:active,
button[disabled]:active,
.status-link[disabled]:active {
  pointer-events: none;
}

/* Theme overrides removed — stylesheet is dark-only and uses :root tokens */

* { box-sizing: border-box; box-shadow: none !important; text-shadow: none !important; }

/* Screen reader only - visually hidden but accessible to assistive technology */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Status message in status bar */
.status-message {
  margin-left: var(--space-sm);
  color: var(--placeholder-muted);
}
.status-message:empty { display: none; }

/* Keep page from scrolling — panes are individually scrollable. */
html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}
/* Use scaled base font size so `rem` and UI elements can follow base font size */
/* Do NOT set a global UI font size on html/body — UI elements use
  an explicit per-component font size token to avoid cascading into
  embedded widgets (Monaco, preview). */
body { padding-bottom: 0; font-family: var(--ui-font); }

.split {
  display: flex;
  height: 100vh;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 1px;
  background: var(--bg);
  align-items: stretch;
  justify-content: center;
  overflow-x: hidden;
}

.split,
.pane,
.pane-body,
#editor,
.monaco-editor,
.monaco-editor .overflow-guard {
  min-width: 0 !important;
}

/* Monaco handles its own overflow - don't override */

body.editor-focused .split {
  justify-content: center;
  /* When the preview is hidden and the editor is centered we want the
     surrounding area to match the Nord background so the editor appears
     centered against the same paper-like background on both sides. */
  background: var(--bg);
}

body.editor-focused .preview-pane { display: none; }

body.editor-focused .editor-pane {
  flex: 0 1 auto;
  width: var(--page-width); /* Match the preview width for a focused page-like feel */
  max-width: 100%;
  margin: 0 auto;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  position: relative;
}

/* Focus mode resize handles */
.focus-resize-handle {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  z-index: 100;
  background: transparent;
  transition: background 100ms ease;
}
.focus-resize-handle:hover,
.focus-resize-handle.dragging {
  background: var(--accent);
  opacity: 0.3;
}
.focus-resize-handle.dragging.at-limit {
  animation: resize-limit-flash 350ms ease-out forwards;
}
@keyframes resize-limit-flash {
  0% { background: var(--danger); opacity: 0.6; }
  30% { background: var(--danger); opacity: 0.6; }
  100% { background: transparent; opacity: 0.3; }
}
.focus-resize-handle--left {
  left: -4px;
}
.focus-resize-handle--right {
  right: -4px;
}
body.editor-focused .focus-resize-handle {
  display: block;
}
body.focus-resizing {
  cursor: ew-resize !important;
  user-select: none !important;
}

.pane {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-alt);
  min-height: 0;
}

.editor-pane {
  flex: 1 1 auto;      /* allows grow/shrink */
  min-width: 0;         /* critical: allow shrinking */
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--border);
  box-sizing: border-box;
}
/* Reserve a stable vertical space for the editor to prevent layout shifts when Monaco initializes */
.editor-pane { min-height: calc(100vh - (var(--header-height) * 2)); }



/* Preview is fixed to page width */
.preview-pane {
  /* The preview must be exactly 8.5in wide (WGA page width) — this is
     a strict requirement so rendered pages match industry dimensions. */
  flex: 0 0 8.5in;
  width: 8.5in;
  /* Leave height/content to the preview itself (multiple pages). Do NOT
     clamp the preview width — it must always be 8.5in even when viewport
     is narrower. Horizontal scrolling at the page level is allowed so the
     preview stays reachable. */
}

.pane-header {
  display: flex;
  align-items: center;
  /* force a consistent header height and avoid extra vertical padding that
     pushes content out of vertical center. We keep horizontal padding only */
  height: var(--header-height);
  padding: 0 var(--layout-gap);
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  /* removed drop shadow to keep a flat UI */
  gap: var(--layout-gap);
}

/* Align editor header controls with Monaco minimap edge */
.editor-pane > .pane-header {
  padding-right: var(--editor-scrollbar-width, 0px);
}
.pane-header-left {
  display: flex;
  align-items: center;
  gap: var(--control-gap);
  min-width: 0; /* Allow flex item to shrink below content size */
  flex: 1;
}
/* Make the filename a block-level flex item so text-overflow:ellipsis works
   consistently — this ensures truncation removes whole characters and shows
   a trailing ellipsis instead of visually clipping the end. */
#current-filename {
  display: block; /* override the header child rule (inline-flex) */
  width: 100%;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Sprint timer shown in the status bar, left of the File button */
#sprint-timer {
  display: inline-flex;
  align-items: center;
  color: var(--placeholder-muted);
  font-size: var(--ui-font-size);
  min-width: 12ch;
  text-align: left;
}
.pane-header-right {
  margin-left: auto; /* push right group to the far edge */
  display: flex;
  align-items: center;
  gap: var(--control-gap);
}

/* Ensure all immediate header children use identical line-height and centering
   so left and right content visually aligns on the same baseline. This covers
   filenames, small connection labels and header controls. */
.pane-header-left > *, .pane-header-right > * {
  line-height: 1;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.pane-header h1, .pane-header h2 {
  margin: 0;
  /* Headings should not define their own font styles; inherit so they
     match the surrounding UI text. Placement is handled by the header
     container (flex + align-items:center) so headings only need margins. */
  font: inherit;
  line-height: inherit;
}

/* Make header controls visually compact and centered */
.pane-header .status-link, .pane-header button {
  /* header controls should be compact but respect the global control height */
  padding: var(--control-padding-vert) var(--control-padding-horiz);
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  min-width: 3.5rem; /* reserve width to avoid icon/label layout changes */
}
.pane-header .status-link, .pane-header button, .settings-header button, .settings-header .status-link {
  line-height: 1 !important; /* keep header controls visually compact */
}
.pane-body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.editor-pane .pane-body {
  width: 100%;
  overflow-x: hidden;
  position: relative;
}

#editor {
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0 !important;
  width: 100%;
  height: 100%;
  position: relative;
}
/* Reserve editor height and make skeleton background while Monaco loads */
#editor { min-height: calc(60vh - (var(--header-height) * 1)); }