/*
Theme Name: Pen Theme
Description: CodePen-style live HTML/CSS/JS playground with full feature set.
Version: 2.0
Author: pen.ylo.one
*/

/* ===================== Base ===================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; background: #131417; color: #e4e4e7; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; overflow: hidden; }
button { font-family: inherit; }
a { color: #82d8ff; }

/* ===================== Topbar ===================== */
.topbar {
  height: 48px; background: #1a1c20; border-bottom: 1px solid #2a2d33;
  display: flex; align-items: center; padding: 0 12px; gap: 8px;
  position: relative; z-index: 10; flex-shrink: 0;
}
.topbar .logo {
  font-weight: 800; font-size: 17px; color: #82d8ff; letter-spacing: -0.02em; text-decoration: none; flex-shrink: 0;
}
.topbar .logo span { color: #f4f4f5; font-weight: 400; }
.topbar .pen-title {
  flex: 1; min-width: 80px; max-width: 320px; font-size: 14px; color: #d4d4d8; background: #131417; border: 1px solid #2a2d33; padding: 7px 10px; border-radius: 6px; outline: none; transition: border-color .15s;
}
.topbar .pen-title:focus { border-color: #82d8ff; }
.topbar .actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.topbar .btn {
  background: #2a2d33; color: #e4e4e7; border: 1px solid #34373d; padding: 7px 12px; border-radius: 7px; font-size: 13px; cursor: pointer; font-weight: 600; transition: background-color .12s ease, border-color .12s ease, transform .08s ease, box-shadow .12s ease; display: inline-flex; align-items: center; gap: 5px; line-height: 1; white-space: nowrap;
}
.topbar .btn:hover { background: #34373d; border-color: #4a4e55; }
.topbar .btn:active { transform: scale(0.96); }
.topbar .btn:focus-visible { outline: none; box-shadow: 0 0 0 2px #82d8ff; }
.topbar .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.topbar .btn.primary { background: #2563eb; border-color: #2563eb; color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset; }
.topbar .btn.primary:hover { background: #3b82f6; border-color: #3b82f6; }
.topbar .btn.primary:active { transform: scale(0.96); }
.topbar .btn.icon { padding: 7px 9px; }
.topbar .sep { width: 1px; height: 22px; background: #2a2d33; margin: 0 4px; }
.topbar .login {
  font-size: 13px; color: #a1a1aa; text-decoration: none; padding: 6px 10px; border-radius: 6px;
}
.topbar .login:hover { background: #2a2d33; color: #f4f4f5; }
.topbar .user-link { margin-left: auto; }
.topbar #login-link { margin-left: auto; }

/* Search box in topbar */
.topbar-search {
  flex: 1; max-width: 280px; min-width: 60px; font-size: 13px; color: #d4d4d8; background: #131417; border: 1px solid #2a2d33; padding: 7px 10px; border-radius: 6px; outline: none; transition: border-color .15s;
}
.topbar-search:focus { border-color: #82d8ff; max-width: 380px; }
.search-results {
  position: fixed; top: 50px; max-width: 380px; min-width: 280px; background: #1a1c20; border: 1px solid #34373d; border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,0.5); max-height: 60vh; overflow-y: auto; z-index: 200;
}
.search-results.hidden { display: none; }
.search-results .sr-item {
  padding: 10px 14px; border-bottom: 1px solid #2a2d33; text-decoration: none; color: #e4e4e7; display: block; font-size: 13px;
}
.search-results .sr-item:hover { background: #2a2d33; }
.search-results .sr-item .t { font-weight: 600; }
.search-results .sr-item .a { color: #a1a1aa; font-size: 12px; margin-top: 2px; }
.search-results .sr-empty { padding: 16px; color: #71717a; text-align: center; font-size: 13px; }
.topbar .pen-author { font-size: 12px; color: #71717a; margin-left: 6px; }

/* Save state indicator dot next to Save button */
.save-state {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; transition: background-color .2s;
}
.save-state[data-state="saved"]   { background: #16a34a; }
.save-state[data-state="dirty"]   { background: #facc15; }
.save-state[data-state="saving"]  { background: #82d8ff; animation: pulse 1.2s linear infinite; }
.save-state[data-state="error"]   { background: #ef4444; }
@keyframes pulse { 50% { opacity: 0.35; } }

/* ===================== Editor shell + layouts ===================== */
.editor-shell {
  display: flex;
  height: calc(100vh - 48px);
  overflow: hidden;
}
.editor-row {
  display: flex;
  min-width: 0; min-height: 0;
}
.editor-pane {
  flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; border-right: 1px solid #2a2d33;
}
.editor-pane:last-child { border-right: 0; }
.pane-head {
  background: #1a1c20; border-bottom: 1px solid #2a2d33; padding: 6px 10px; font-size: 11px; font-weight: 600; color: #a1a1aa; text-transform: uppercase; letter-spacing: 0.06em; display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.pane-head .dot { width: 8px; height: 8px; border-radius: 50%; }
.pane-head.html .dot { background: #f97316; }
.pane-head.css  .dot { background: #3b82f6; }
.pane-head.js   .dot { background: #facc15; }
.pane-head .pre-select {
  background: #2a2d33; color: #d4d4d8; border: 1px solid #34373d; border-radius: 4px; font-size: 11px; padding: 2px 6px; cursor: pointer; outline: none;
}
.pane-head .pre-select:focus { border-color: #82d8ff; }
.pane-head .pane-tools { margin-left: auto; display: flex; gap: 4px; }
.pane-head .pane-tools button {
  background: transparent; border: 0; color: #a1a1aa; font-size: 11px; cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
.pane-head .pane-tools button:hover { background: #2a2d33; color: #f4f4f5; }
.pane-body { flex: 1; min-height: 0; min-width: 0; overflow: hidden; }
.CodeMirror, .pane-body .CodeMirror {
  height: 100% !important; font-size: 13px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Preview row */
.preview-row {
  background: #fff; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative;
}
.preview-head {
  background: #1a1c20; border-bottom: 1px solid #2a2d33; padding: 6px 10px; font-size: 11px; font-weight: 600; color: #a1a1aa; text-transform: uppercase; letter-spacing: 0.06em; display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.preview-head .preview-tools { margin-left: auto; display: flex; gap: 4px; }
.preview-head .preview-tools button {
  background: transparent; border: 0; color: #a1a1aa; font-size: 11px; cursor: pointer; padding: 2px 8px; border-radius: 4px;
}
.preview-head .preview-tools button:hover { background: #2a2d33; color: #f4f4f5; }
.preview-head .preview-tools button.active { background: #2a2d33; color: #82d8ff; }
.preview-iframe { flex: 1; border: 0; background: #f4f4f5; width: 100%; transition: opacity .12s; }

/* Console panel inside preview */
.console-panel {
  background: #0f1115; color: #e4e4e7; border-top: 1px solid #2a2d33; max-height: 240px; min-height: 100px; overflow-y: auto; font-family: ui-monospace, monospace; font-size: 12px; padding: 0;
}
.console-panel.hidden { display: none; }
.console-line {
  padding: 4px 12px; border-bottom: 1px solid #1a1c20; white-space: pre-wrap; word-break: break-word;
}
.console-line.log { color: #d4d4d8; }
.console-line.info { color: #82d8ff; }
.console-line.warn { color: #facc15; background: rgba(250,204,21,0.05); }
.console-line.error { color: #f87171; background: rgba(248,113,113,0.05); }
.console-line .ts { color: #71717a; margin-right: 8px; font-size: 11px; }
.console-empty { padding: 16px; color: #71717a; text-align: center; font-style: italic; }

/* ===================== Layout modes ===================== */
/* Default: bottom — editor row on top, preview row below */
.editor-shell[data-layout="bottom"] { flex-direction: column; }
.editor-shell[data-layout="bottom"] .editor-row { flex: 1; }
.editor-shell[data-layout="bottom"] .preview-row { flex: 1; border-top: 1px solid #2a2d33; }

/* top — preview on top, editor below */
.editor-shell[data-layout="top"] { flex-direction: column-reverse; }
.editor-shell[data-layout="top"] .editor-row { flex: 1; }
.editor-shell[data-layout="top"] .preview-row { flex: 1; border-bottom: 1px solid #2a2d33; }

/* right — editor left, preview right */
.editor-shell[data-layout="right"] { flex-direction: row; }
.editor-shell[data-layout="right"] .editor-row { flex: 1; flex-direction: column; }
.editor-shell[data-layout="right"] .preview-row { flex: 1; border-left: 1px solid #2a2d33; }

/* left — preview left, editor right */
.editor-shell[data-layout="left"] { flex-direction: row-reverse; }
.editor-shell[data-layout="left"] .editor-row { flex: 1; flex-direction: column; }
.editor-shell[data-layout="left"] .preview-row { flex: 1; border-right: 1px solid #2a2d33; }

/* editor-only / preview-only */
.editor-shell[data-layout="editor-only"] .preview-row { display: none; }
.editor-shell[data-layout="editor-only"] .editor-row { flex: 1; flex-direction: row; }
.editor-shell[data-layout="preview-only"] .editor-row { display: none; }
.editor-shell[data-layout="preview-only"] .preview-row { flex: 1; }

/* When editor row holds 3 panes vertically (right/left/top/bottom non-row-default), adjust pane border */
.editor-shell[data-layout="bottom"] .editor-row,
.editor-shell[data-layout="top"] .editor-row {
  flex-direction: row;
}
.editor-shell[data-layout="right"] .editor-row .editor-pane,
.editor-shell[data-layout="left"] .editor-row .editor-pane {
  border-right: 0;
  border-bottom: 1px solid #2a2d33;
}
.editor-shell[data-layout="right"] .editor-row .editor-pane:last-child,
.editor-shell[data-layout="left"] .editor-row .editor-pane:last-child {
  border-bottom: 0;
}

/* ===================== Mobile tabs (used <= 768px) ===================== */
.mobile-tabs {
  display: none; background: #1a1c20; border-bottom: 1px solid #2a2d33; flex-shrink: 0;
}
.mobile-tabs button {
  flex: 1; background: transparent; color: #a1a1aa; border: 0; padding: 10px 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; border-bottom: 2px solid transparent;
}
.mobile-tabs button.active { color: #82d8ff; border-bottom-color: #82d8ff; }

/* On mobile, force tab-based UI */
@media (max-width: 768px) {
  .topbar { padding: 0 8px; gap: 4px; height: 52px; }
  .topbar .pen-title { font-size: 12px; padding: 7px 8px; max-width: 100px; flex: 1 1 80px; }
  .topbar .pen-author { display: none; }
  .topbar .btn { padding: 9px 11px; font-size: 12px; min-height: 36px; }
  .editor-shell { height: calc(100vh - 52px - 40px); }
  .mobile-tabs button { padding: 12px 4px; font-size: 12px; min-height: 40px; }
  .topbar .btn span.label { display: none; }
  .topbar .sep { display: none; }
  /* Hide secondary actions on phones — keep only Save + New + Settings (accessible) */
  .topbar #format-btn,
  .topbar #layout-btn,
  .topbar #fork-btn,
  .topbar #embed-btn,
  .topbar #heart-btn,
  .topbar .topbar-search,
  .topbar #login-link,
  .topbar #signup-link,
  .topbar .user-link { display: none; }

  .mobile-tabs { display: flex; }

  .editor-shell { height: calc(100vh - 48px - 38px); flex-direction: column !important; }
  .editor-shell .editor-row { flex-direction: column !important; flex: 1; min-height: 0; }
  .editor-shell .editor-pane { display: none !important; flex: 1; min-height: 0; border-right: 0; border-bottom: 0; }
  .editor-shell .editor-pane.active { display: flex !important; }
  .editor-shell .preview-row { display: none !important; flex: 1; }
  .editor-shell .preview-row.active { display: flex !important; }

  /* Reset layout overrides for mobile */
  .editor-shell[data-layout] .editor-row { flex: 1; }
  .editor-shell[data-layout] .preview-row { flex: 1; border: 0; }
}

/* ===================== Settings dialog ===================== */
.settings-modal {
  background: #1a1c20; color: #e4e4e7; border: 1px solid #34373d; border-radius: 14px; padding: 0; max-width: 480px; width: 90%; box-shadow: 0 24px 64px rgba(0,0,0,0.6); animation: modalIn .18s ease-out;
}
.settings-modal::backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); animation: backdropIn .18s ease-out; }
@keyframes modalIn { from { opacity: 0; transform: translateY(-12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
.settings-modal .modal-head {
  display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid #2a2d33;
}
.settings-modal .modal-head h2 { margin: 0; font-size: 16px; font-weight: 700; }
.settings-modal .modal-head .x { margin-left: auto; background: transparent; border: 0; color: #a1a1aa; cursor: pointer; font-size: 22px; line-height: 1; padding: 4px 8px; border-radius: 4px; }
.settings-modal .modal-head .x:hover { background: #2a2d33; color: #f4f4f5; }
.settings-modal .modal-body { padding: 16px 18px; max-height: 60vh; overflow-y: auto; }
.settings-modal label { display: block; margin-bottom: 14px; font-size: 13px; color: #d4d4d8; }
.settings-modal label .lbl { display: block; margin-bottom: 4px; font-weight: 600; color: #f4f4f5; }
.settings-modal input,
.settings-modal textarea,
.settings-modal select {
  width: 100%; padding: 8px 10px; background: #131417; border: 1px solid #2a2d33; border-radius: 6px; color: #e4e4e7; font-family: inherit; font-size: 13px; outline: none;
}
.settings-modal input:focus,
.settings-modal textarea:focus,
.settings-modal select:focus { border-color: #82d8ff; }
.settings-modal textarea { resize: vertical; min-height: 60px; }
.settings-modal .modal-foot {
  padding: 12px 18px; border-top: 1px solid #2a2d33; display: flex; justify-content: flex-end; gap: 8px;
}
.settings-modal .modal-foot button {
  padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid #34373d; background: #2a2d33; color: #e4e4e7;
}
.settings-modal .modal-foot button.primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.settings-modal .modal-foot button.primary:hover { background: #3b82f6; }

/* Resources panel inside settings */
.settings-modal .resource-item {
  display: flex; gap: 6px; margin-bottom: 6px;
}
.settings-modal .resource-item input { flex: 1; }
.settings-modal .resource-item button {
  background: #2a2d33; color: #a1a1aa; border: 1px solid #34373d; border-radius: 4px; padding: 0 10px; cursor: pointer;
}
.settings-modal .add-resource {
  margin-top: 4px; background: transparent; border: 1px dashed #34373d; color: #a1a1aa; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; width: 100%;
}
.settings-modal .add-resource:hover { color: #82d8ff; border-color: #82d8ff; }

/* ===================== Toast ===================== */
.toast {
  position: fixed; bottom: 24px; right: 24px; background: #1a1c20; color: #e4e4e7; border: 1px solid #34373d; border-radius: 8px; padding: 12px 16px; font-size: 13px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,0.4); max-width: 80vw;
}
.toast.show { opacity: 1; }
.toast.error { border-color: #b91c1c; color: #fecaca; }
.toast.success { border-color: #16a34a; color: #bbf7d0; }

/* ===================== Layout switcher dropdown ===================== */
.layout-menu {
  position: absolute; top: 100%; right: 0; margin-top: 4px; background: #1a1c20; border: 1px solid #34373d; border-radius: 8px; padding: 4px; min-width: 220px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 50;
}
.layout-menu.hidden { display: none; }
.layout-menu button {
  display: flex; align-items: center; width: 100%; padding: 8px 10px; background: transparent; color: #d4d4d8; border: 0; border-radius: 4px; font-size: 13px; cursor: pointer; text-align: left; gap: 8px;
}
.layout-menu button:hover { background: #2a2d33; }
.layout-menu button .ic { width: 18px; display: inline-block; }
.layout-menu button.active { color: #82d8ff; }
.layout-menu button.active::after { content: "✓"; margin-left: auto; }

/* ===================== Homepage discovery sections ===================== */
.discover-shell { padding: 32px 24px 80px; max-width: 1200px; margin: 0 auto; overflow-y: auto; }
.discover-shell h1 { font-size: 26px; margin: 0 0 6px; font-weight: 700; }
.discover-shell .sub { color: #a1a1aa; margin-bottom: 28px; }
.discover-shell h2 { font-size: 18px; margin: 36px 0 12px; font-weight: 600; }

.pens-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.pen-card {
  background: #1a1c20; border: 1px solid #2a2d33; border-radius: 10px; overflow: hidden; transition: transform .15s, border-color .15s; text-decoration: none; color: inherit; display: flex; flex-direction: column;
}
.pen-card:hover { transform: translateY(-2px); border-color: #4a4e55; }
.pen-card .thumb {
  height: 150px; background: #fff; border-bottom: 1px solid #2a2d33; overflow: hidden; position: relative;
}
.pen-card .thumb iframe { border: 0; pointer-events: none; transform: scale(0.7); transform-origin: top left; width: 142.857%; height: 142.857%; }
.pen-card .meta { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.pen-card .meta .t { font-weight: 600; font-size: 13px; color: #f4f4f5; line-height: 1.3; }
.pen-card .meta .a { font-size: 11px; color: #a1a1aa; }
.pen-card .meta .stats { display: flex; gap: 8px; margin-top: 4px; font-size: 11px; color: #71717a; }
.pen-card .meta .stats span::before { content: ""; }

/* Loading skeleton */
.skel { background: linear-gradient(90deg, #1a1c20 25%, #2a2d33 50%, #1a1c20 75%); background-size: 200% 100%; animation: skel 1.4s linear infinite; }
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Hide scrollbars on overflow scroll, keep usable */
.discover-shell::-webkit-scrollbar { width: 8px; }
.discover-shell::-webkit-scrollbar-thumb { background: #34373d; border-radius: 4px; }

/* ===================== Comments shell ===================== */
.comments-shell {
  max-width: 900px; margin: 0 auto; padding: 32px 24px 80px; overflow-y: auto;
}
.comments-shell h2 { font-size: 18px; margin: 0 0 16px; font-weight: 600; }
.comment {
  display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #2a2d33;
}
.comment:last-child { border-bottom: 0; }
.comment .avatar { width: 32px; height: 32px; border-radius: 50%; background: #34373d; flex-shrink: 0; }
.comment .body { flex: 1; min-width: 0; }
.comment .head { display: flex; gap: 8px; align-items: center; font-size: 12px; color: #a1a1aa; margin-bottom: 4px; }
.comment .head .name { color: #f4f4f5; font-weight: 600; }
.comment .content { font-size: 14px; color: #e4e4e7; word-break: break-word; white-space: pre-wrap; }
.comments-empty, .comments-login-prompt { color: #71717a; font-style: italic; padding: 20px 0; }
#comment-form { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
#comment-input { width: 100%; padding: 10px 12px; background: #1a1c20; border: 1px solid #2a2d33; border-radius: 6px; color: #e4e4e7; font-family: inherit; font-size: 13px; resize: vertical; min-height: 60px; outline: none; }
#comment-input:focus { border-color: #82d8ff; }
#comment-form button { align-self: flex-end; padding: 8px 18px; background: #2563eb; border: 0; color: #fff; border-radius: 6px; cursor: pointer; font-weight: 600; }
#comment-form button:hover { background: #3b82f6; }

@media (max-width: 768px) {
  .comments-shell { padding: 20px 14px 60px; }
}