/* Case-Law Newsletter — simple, calm, one purpose. */

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2rem 1rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #f4f5f7;
  color: #1f2328;
  line-height: 1.5;
}

.card {
  max-width: 860px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #e2e5ea;
  border-radius: 12px;
  padding: 2rem 2.5rem;
  box-shadow: 0 2px 10px rgba(20, 30, 50, 0.05);
}

h1 { margin: 0 0 0.25rem; font-size: 1.7rem; }

.subtitle { margin: 0 0 1.5rem; color: #5b6472; }

/* The drop zone */
#dropzone {
  display: block;
  text-align: center;
  padding: 2rem 1rem;
  border: 2px dashed #b7bec9;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
#dropzone:hover, #dropzone.dragover {
  border-color: #2f6fed;
  background: #f0f5ff;
}
.dz-title { display: block; font-weight: 600; }
.dz-hint  { display: block; color: #5b6472; font-size: 0.9rem; }

/* Selected file names */
#file-list { list-style: none; padding: 0; margin: 0.75rem 0 0; }
#file-list li {
  padding: 0.35rem 0.75rem;
  background: #f7f8fa;
  border: 1px solid #e8eaee;
  border-radius: 6px;
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
  word-break: break-all;
}

button {
  font: inherit;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

#run-btn {
  display: block;
  width: 100%;
  margin-top: 1.25rem;
  padding: 0.85rem;
  background: #2f6fed;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 600;
}
#run-btn:disabled { background: #a9b4c4; cursor: not-allowed; }

#status { margin: 1rem 0 0; color: #5b6472; }

/* Results */
#results { margin-top: 2rem; }
#results-summary { font-size: 1.15rem; margin: 0 0 1rem; }

.file-result {
  border: 1px solid #e2e5ea;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  background: #fcfcfd;
}
.file-result h3 { margin: 0 0 0.6rem; font-size: 1rem; word-break: break-all; }
.file-result .error { color: #b3261e; margin: 0; }
.file-result .warning { color: #8a5a00; font-size: 0.9rem; margin: 0.4rem 0 0; }

pre.block {
  margin: 0;
  padding: 0.9rem 1rem;
  background: #f6f8fa;
  border: 1px solid #e8eaee;
  border-radius: 8px;
  font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 0.88rem;
  white-space: pre-wrap;      /* long summary lines wrap, no side scroll */
  overflow-wrap: break-word;
}

/* The editable block. Deliberately looks like a field rather than like the
   read-only block above, because that is what it is now. */
textarea.block {
  display: block;
  width: 100%;
  padding: 0.9rem 1rem;
  background: #ffffff;
  border: 1px solid #ccd2dc;
  border-radius: 8px;
  font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 0.88rem;
  line-height: 1.5;
  color: inherit;
  resize: vertical;
}
textarea.block:focus {
  outline: 2px solid #2f6fed;
  outline-offset: 1px;
  border-color: #2f6fed;
}

.edit-hint { margin: -0.5rem 0 1.25rem; color: #5b6472; font-size: 0.9rem; }
.edit-note { margin: 0.5rem 0 0; color: #2f6fed; font-size: 0.85rem; }
.edit-note.bad { color: #b3261e; }

.preview { margin-top: 0.6rem; }
.preview summary { cursor: pointer; color: #5b6472; font-size: 0.85rem; font-weight: 600; }
.preview summary:hover { color: #2f6fed; }
.preview pre.block { margin-top: 0.5rem; }
.preview a { color: #2f6fed; }

/* The case and its source, side by side once a document is opened. The panel is
   to the right of the text, so the summary and the judgment it came from can be
   read together instead of in two tabs. */
.case-main { min-width: 0; }
.case-split.open { display: flex; align-items: flex-start; gap: 1rem; }
.case-split.open .case-main { flex: 1 1 52%; }

/* Two columns need room, and the card's 860px reading width does not give them
   any. While a document is open the card may use the window. */
body.document-open .card { max-width: 1400px; }

.document-panel {
  flex: 1 1 48%;
  min-width: 0;
  background: #ffffff;
  border: 1px solid #e2e5ea;
  border-radius: 10px;
  overflow: hidden;
}
/* `hidden` must win inside a flex parent. */
.document-panel[hidden] { display: none; }

.panel-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem;
  background: #f7f8fa;
  border-bottom: 1px solid #e8eaee;
  font-size: 0.82rem;
}
.panel-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #5b6472;
}
.panel-tab { color: #2f6fed; font-weight: 600; white-space: nowrap; text-decoration: none; }
.panel-tab:hover { text-decoration: underline; }
.panel-close {
  padding: 0.2rem 0.6rem;
  background: #eef3fe;
  color: #2f6fed;
  font-weight: 600;
  font-size: 0.8rem;
}
.panel-frame { display: block; width: 100%; height: 70vh; border: 0; background: #f4f5f7; }

/* One column when the window cannot hold two. */
@media (max-width: 900px) {
  .case-split.open { display: block; }
  .case-split.open .document-panel { margin-top: 0.9rem; }
  .panel-frame { height: 60vh; }
}
.email-status { margin: 0 0 0.6rem; color: #5b6472; font-size: 0.88rem; }
.email-status.bad { color: #b3261e; }

/* Shown when the document links are this-network-only: a warning, not an error —
   the newsletter is fine, the address it points readers at is not. */
#document-note {
  margin: -0.5rem 0 1rem;
  padding: 0.6rem 0.8rem;
  background: #fdf6e7;
  border: 1px solid #efdfb8;
  border-radius: 8px;
  color: #8a5a00;
  font-size: 0.88rem;
}

/* The newsletter's own emphasis: the case-name line and the punchline. The
   browser gets real <b>/<i> so the user sees formatting rather than the raw
   ** and * markers; the downloaded .txt keeps the markers. */
pre.block b { font-weight: 700; }
pre.block i { font-style: italic; }

.downloads { margin-top: 1rem; text-align: center; }
#download-all, #download-all-html, #copy-html {
  padding: 0.6rem 1.4rem;
  background: #eef3fe;
  color: #2f6fed;
  font-weight: 600;
  margin: 0 0.25rem;
}
#download-all:hover, #download-all-html:hover, #copy-html:hover { background: #dde8fd; }

#send-email {
  padding: 0.6rem 1.4rem;
  background: #2f6fed;
  color: #ffffff;
  font-weight: 600;
  margin: 0 0.25rem;
}
#send-email:hover { background: #1f5bd6; }
#send-email:disabled { background: #a9b4c4; cursor: not-allowed; }

#results-subject {
  margin: -0.5rem 0 1rem;
  padding: 0.5rem 0.75rem;
  background: #f7f8fa;
  border: 1px solid #e8eaee;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #5b6472;
  word-break: break-word;
}

/* The signed-in account and the way out */
#session-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 0.5rem 0.75rem;
  background: #f7f8fa;
  border: 1px solid #e8eaee;
  border-radius: 8px;
  font-size: 0.85rem;
  color: #5b6472;
}
/* `display: flex` above would otherwise beat the browser's rule for [hidden]. */
#session-bar[hidden] { display: none; }
#session-email { word-break: break-all; }
#signout-btn {
  padding: 0.4rem 0.9rem;
  background: #eef3fe;
  color: #2f6fed;
  font-weight: 600;
  font-size: 0.85rem;
}
#signout-btn:hover { background: #dde8fd; }

/* --- The login and sign-up pages --------------------------------------- */

.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.auth-card { width: 100%; max-width: 440px; padding: 2rem 2.25rem; }
.auth-card h1 { font-size: 1.45rem; }

.field { display: block; margin-bottom: 1rem; }
.field span {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #3a4150;
}
.field input {
  width: 100%;
  padding: 0.7rem 0.8rem;
  font: inherit;
  color: inherit;
  background: #ffffff;
  border: 1px solid #ccd2dc;
  border-radius: 8px;
}
.field input:focus {
  outline: 2px solid #2f6fed;
  outline-offset: 1px;
  border-color: #2f6fed;
}
.field-hint { display: block; margin-top: 0.3rem; color: #7b8492; font-size: 0.8rem; }

.auth-btn {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.8rem;
  background: #2f6fed;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
}
.auth-btn:hover { background: #2860d8; }
.auth-btn:disabled { background: #a9b4c4; cursor: not-allowed; }

.auth-status { margin: 0.9rem 0 0; color: #b3261e; font-size: 0.9rem; }

.auth-alt { margin: 1.25rem 0 0; text-align: center; font-size: 0.9rem; color: #5b6472; }
.auth-alt a { color: #2f6fed; font-weight: 600; }

.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 0 0 18px;
}

.column {
  border: 1px solid #e2e5ef;
  border-radius: 18px;
  padding: 18px 18px 20px;
  background: #fbfcff;
}

.column-title {
  margin: 0 0 14px;
  font-size: 15px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: #14226d;
}

.column .dz-hint { font-size: 13px; }

.field-label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  color: #444444;
}

#news-date {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid #d9d9d9;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  color: #221e1e;
  background: #ffffff;
}

#news-btn {
  display: block;
  width: 100%;
  padding: 0.85rem;
  background: #2f6fed;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
}
#news-btn:disabled { background: #a9b4c4; cursor: not-allowed; }

.news-list {
  margin: 14px 0 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 19px;
  color: #221e1e;
}

.news-list li { margin-bottom: 9px; }

.news-list small {
  display: block;
  color: #8a929e;
  font-size: 12px;
}

@media (max-width: 720px) {
  .columns { grid-template-columns: 1fr; }
}