/* devtoken.tools — codeshare page styles (builds on ../style.css) */

/* ── Code Share-specific styles ── */

[hidden] { display: none !important; }

.files {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.file-panel:focus-within {
  border-color: var(--accent-dim);
}

.file-header {
  gap: 8px;
  padding: 8px 10px;
}

.file-header .file-name {
  flex: 1;
  min-width: 120px;
  width: auto;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.5;
  background: var(--bg3);
  border-color: var(--border);
}

.file-header .file-lang {
  width: auto;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.5;
  background: var(--bg3);
  border-color: var(--border);
  cursor: pointer;
}

.file-size {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.btn-copy.small,
.btn-ghost.small {
  padding: 4px 10px;
  font-size: 11px;
  width: auto;
}

.file-remove.confirming {
  color: #fca5a5;
  border-color: #7f1d1d;
}

.file-editor .CodeMirror {
  height: 340px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
}

.add-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 20px;
  flex-wrap: wrap;
}

.size-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
}

/* ── Password option (before a link exists) ── */
.create-options {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
}

.protect-toggle {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.protect-toggle input {
  width: auto;
  accent-color: var(--accent);
}

.password-fields {
  margin-top: 12px;
}

.password-row {
  display: flex;
  gap: 8px;
  align-items: center;
  max-width: 460px;
}

.password-row input {
  flex: 1;
}

.hint {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.7;
  margin-top: 10px;
}

.hint strong {
  color: var(--warn);
  font-weight: 600;
}

/* ── Unlock panel (opening a protected link) ── */
.unlock-text {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}

.unlock-row {
  display: flex;
  gap: 10px;
  max-width: 460px;
}

.unlock-row input {
  flex: 1;
}

/* ── Share panel ── */
#shareLinkText {
  word-break: break-all;
}

.protect-badge {
  font-family: var(--mono);
  font-size: 11px;
  margin-top: 10px;
  color: var(--muted);
}

.protect-badge.on {
  color: var(--ok);
}

.status-line {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

.status-line .conflict {
  color: var(--warn);
}

@media (max-width: 600px) {
  .file-header { flex-wrap: wrap; }
  .file-header .file-name { flex-basis: 100%; }
  .password-row, .unlock-row { flex-direction: column; align-items: stretch; }
}

/* ── CodeMirror theme built from devtoken.tools' own palette ── */
.cm-s-devtoken.CodeMirror { background: var(--bg2); color: var(--text); }
.cm-s-devtoken .CodeMirror-gutters { background: var(--bg2); border-right: 1px solid var(--border); }
.cm-s-devtoken .CodeMirror-linenumber { color: var(--muted); }
.cm-s-devtoken .CodeMirror-cursor { border-left: 1px solid var(--accent); }
.cm-s-devtoken div.CodeMirror-selected { background: rgba(74, 222, 128, 0.15); }
.cm-s-devtoken .CodeMirror-matchingbracket { color: var(--accent) !important; }
.cm-s-devtoken .cm-keyword    { color: var(--header-col); }
.cm-s-devtoken .cm-atom       { color: var(--sig); }
.cm-s-devtoken .cm-number     { color: #93c5fd; }
.cm-s-devtoken .cm-def        { color: var(--payload); }
.cm-s-devtoken .cm-variable   { color: var(--text); }
.cm-s-devtoken .cm-variable-2 { color: var(--payload); }
.cm-s-devtoken .cm-property   { color: var(--payload); }
.cm-s-devtoken .cm-operator   { color: var(--text); }
.cm-s-devtoken .cm-comment    { color: var(--muted); font-style: italic; }
.cm-s-devtoken .cm-string     { color: #86efac; }
.cm-s-devtoken .cm-string-2   { color: #86efac; }
.cm-s-devtoken .cm-meta       { color: var(--muted); }
.cm-s-devtoken .cm-tag        { color: var(--header-col); }
.cm-s-devtoken .cm-attribute  { color: var(--payload); }
.cm-s-devtoken .cm-qualifier  { color: var(--sig); }
.cm-s-devtoken .cm-builtin    { color: var(--sig); }
.cm-s-devtoken .cm-header     { color: var(--header-col); font-weight: 600; }
.cm-s-devtoken .cm-link       { color: var(--payload); }
.cm-s-devtoken .cm-error      { color: var(--danger); }
.cm-s-devtoken .cm-bracket    { color: var(--muted); }

/* Replaces inline styles from the old page */
.share-results { margin-bottom: 20px; }
.create-actions { margin-top: 16px; }

.abuse-note { margin-top: 24px; }