:root {
  --win-gray:    #c0c0c0;
  --win-navy:    #000080;
  --win-navy-lt: #1c1caa;
  --win-teal:    #008080;
  --win-black:   #000000;
  --win-white:   #ffffff;
  --win-red:     #aa0000;
  --win-green:   #008000;
  --sans: Tahoma, Geneva, Verdana, Arial, sans-serif;
  --mono: 'Courier New', Courier, monospace;
  --shadow: 0 5px 14px rgba(0,0,0,.28);
  --radius: 5px;
  --radius-sm: 3px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--win-teal);
  color: var(--win-black);
  font-family: var(--sans);
  font-size: 13px;
}

a {
  color: var(--win-black);
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--win-navy-lt);
  outline-offset: 2px;
}

/* ── Win95 primitives ─────────────────────────────────────────────────────── */
.raised {
  background: var(--win-gray);
  border: 2px outset var(--win-gray);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.sunken {
  background: var(--win-white);
  border: 2px inset var(--win-gray);
  border-radius: var(--radius-sm);
}

/* ── Header / titlebar ────────────────────────────────────────────────────── */
.ef-header {
  border-bottom: 2px solid var(--win-black);
}

.win-titlebar {
  background: linear-gradient(180deg, var(--win-navy-lt) 0%, var(--win-navy) 55%, #00005e 100%);
  color: var(--win-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
}

.win-title {
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.win-controls {
  display: flex;
  gap: 3px;
}

.win-controls span {
  width: 14px;
  height: 12px;
  background: var(--win-gray);
  border: 1px outset var(--win-gray);
  border-radius: 1px;
  display: inline-block;
}

.ef-nav {
  background: var(--win-gray);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
}

.ef-logo {
  font-weight: bold;
  font-size: 14px;
  color: var(--win-black);
}

.ef-nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ef-nav-links a {
  background: var(--win-gray);
  border: 2px outset var(--win-gray);
  border-radius: var(--radius);
  padding: 4px 12px;
  font-size: 12px;
  color: var(--win-black);
  transition: box-shadow .12s ease;
}

.ef-nav-links a:hover {
  box-shadow: 0 3px 8px rgba(0,0,0,.2);
}

.ef-nav-links a:active {
  border-style: inset;
  box-shadow: none;
}

.ef-sub {
  display: none;
}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.ef-main {
  max-width: 560px;
  margin: 24px auto;
  padding: 0 16px;
}

.ef-main.wide {
  max-width: min(1900px, 97vw);
}

/* ── Hero (landing page) ─────────────────────────────────────────────────── */
.hero {
  background: var(--win-gray);
  border: 2px outset var(--win-gray);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
  padding: 32px 20px;
}

.hero h1 {
  font-size: 22px;
  margin: 0 0 12px;
  line-height: 1.3;
}

.hero-sub {
  font-size: 13px;
  max-width: 420px;
  margin: 0 auto 22px;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  background: var(--win-gray);
  border: 2px outset var(--win-gray);
  border-radius: var(--radius);
  color: var(--win-black);
  padding: 6px 18px;
  font-family: var(--sans);
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
  transition: box-shadow .12s ease, transform .12s ease;
}

.btn:hover {
  box-shadow: 0 5px 12px rgba(0,0,0,.25);
  transform: translateY(-1px);
}

.btn:active {
  border-style: inset;
  box-shadow: none;
  transform: translateY(0);
}

.btn-primary {
  outline: 1px dashed var(--win-navy);
  outline-offset: -4px;
  font-weight: bold;
}

.btn-secondary {
  font-weight: normal;
}

.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}

.btn-block {
  display: block;
  width: 100%;
  text-align: center;
}

/* ── Windows (cards) ──────────────────────────────────────────────────────── */
.status-card,
.auth-card,
.ticker-card {
  background: var(--win-gray);
  border: 2px outset var(--win-gray);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}

.status-card { margin-bottom: 16px; }

.status-card h2 .ef-note {
  color: #c8d3e8;
  font-weight: normal;
}

.status-card h2,
.auth-card h1 {
  background: linear-gradient(180deg, var(--win-navy-lt) 0%, var(--win-navy) 55%, #00005e 100%);
  color: var(--win-white);
  margin: -14px -14px 14px -14px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: bold;
  display: block;
  border-radius: var(--radius) var(--radius) 0 0;
}

.status-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.status-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 13px;
}

.dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border: 1px solid var(--win-black);
}

.dot-ok   { background: #00aa00; }
.dot-fail { background: var(--win-red); }

code {
  background: var(--win-white);
  border: 1px inset var(--win-gray);
  padding: 1px 5px;
  font-family: var(--mono);
  font-size: 12px;
}

.err-detail {
  margin: 12px 0 0;
  padding: 8px;
  background: var(--win-white);
  border: 2px inset var(--win-gray);
  border-radius: var(--radius-sm);
  color: var(--win-red);
  font-family: var(--mono);
  font-size: 12px;
  word-break: break-word;
}

.ef-note {
  font-size: 12px;
  color: var(--win-black);
}

/* ── Auth forms ───────────────────────────────────────────────────────────── */
.auth-card {
  max-width: 380px;
  margin: 30px auto;
}

.form-group {
  margin-bottom: 14px;
}

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 4px;
}

.form-group input {
  width: 100%;
  padding: 5px 6px;
  background: var(--win-white);
  border: 2px inset var(--win-gray);
  border-radius: var(--radius-sm);
  color: var(--win-black);
  font-family: var(--sans);
  font-size: 13px;
}

.form-group input:focus {
  outline: 1px dotted var(--win-black);
  outline-offset: 1px;
}

select {
  padding: 4px 6px;
  background: var(--win-white);
  border: 2px inset var(--win-gray);
  border-radius: var(--radius-sm);
  color: var(--win-black);
  font-family: var(--sans);
  font-size: 13px;
}

.auth-switch {
  font-size: 12px;
  margin: 14px 0 0;
}

.auth-switch a {
  text-decoration: underline;
}

.error-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 8px 10px;
  background: var(--win-white);
  border: 2px inset var(--win-gray);
  border-radius: var(--radius-sm);
  color: var(--win-red);
  font-size: 12px;
}

.error-list li + li {
  margin-top: 4px;
}

/* ── Dashboard ────────────────────────────────────────────────────────────── */
.dash-head {
  margin-bottom: 18px;
}

.dash-head h1 {
  font-size: 18px;
  margin: 0 0 12px;
}

.ticker-search {
  display: flex;
  gap: 8px;
  max-width: 400px;
}

.ticker-search input {
  flex: 1;
  padding: 5px 6px;
  background: var(--win-white);
  border: 2px inset var(--win-gray);
  border-radius: var(--radius-sm);
  color: var(--win-black);
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
}

.error-inline {
  color: var(--win-red);
  font-size: 12px;
  margin: 8px 0 0;
  font-weight: bold;
}

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 14px;
  align-items: start;
}

.dash-card {
  display: flex;
  flex-direction: column;
  height: 360px;
}

.dash-scroll {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
}

/* Drag-to-reorder — the blue title bar is the handle (see dashboard.php's JS,
   which arms draggable="true" only while a mousedown started on the h2). */
.dash-grid .dash-card > h2 {
  cursor: grab;
}

.dash-grid .dash-card > h2:active {
  cursor: grabbing;
}

.dash-card.dragging {
  opacity: 0.5;
}

.dash-card.drag-over {
  outline: 2px dashed var(--win-navy);
  outline-offset: -2px;
}

/* ── Community chat ───────────────────────────────────────────────────────── */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  background: var(--win-white);
  border: 2px inset var(--win-gray);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin: 10px 0;
  font-size: 13px;
}

.chat-msg {
  margin-bottom: 8px;
}

.chat-user {
  font-weight: bold;
  margin-right: 6px;
}

.chat-time {
  color: #888888;
  font-size: 11px;
}

.chat-body {
  margin-top: 2px;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-form {
  display: flex;
  gap: 8px;
}

.chat-form input {
  flex: 1;
  padding: 6px 8px;
  background: var(--win-white);
  border: 2px inset var(--win-gray);
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-size: 13px;
}

.model-list, .rank-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.model-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--win-white);
  border: 2px inset var(--win-gray);
  border-radius: var(--radius-sm);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  transition: box-shadow .12s ease;
}

.model-row:hover {
  box-shadow: inset 0 0 0 1px var(--win-navy-lt);
}

.model-ticker {
  font-family: var(--mono);
  font-weight: bold;
  font-size: 15px;
}

.model-meta {
  display: flex;
  gap: 10px;
  font-size: 12px;
  margin-top: 2px;
}

.pos-val {
  color: var(--win-green);
  font-weight: bold;
}

.neg-val {
  color: var(--win-red);
  font-weight: bold;
}

/* Dividend/distribution payout-ratio risk flags (Total Return Ranking) —
   negative OCF or an unsustainably high payout ratio, current or forecast. */
.payout-flag-red {
  color: #fff !important;
  background: #c0392b;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.payout-flag-orange {
  color: #1a1a1a !important;
  background: #e8a33d;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.rank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--win-gray);
  padding: 4px 6px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  transition: background .12s ease;
}

.rank-row:hover {
  background: rgba(0, 0, 128, 0.06);
}

.rank-row a {
  font-family: var(--mono);
  font-weight: bold;
}

/* ── Portfolio Tracker ────────────────────────────────────────────────────── */
.table-scroll-box {
  max-height: 320px;
  overflow-y: auto;
  overflow-x: auto;
  border: 2px inset var(--win-gray);
  border-radius: var(--radius-sm);
}

.table-scroll-box .fin-table {
  border: none;
}

.table-scroll-box thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.holding-row {
  cursor: pointer;
}

.holding-row:hover {
  background: #eef4fb;
}

.holding-row.row-selected {
  background: #cfe2ff;
}

.btn-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

dialog.win-dialog {
  border: 2px outset var(--win-gray);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--win-gray);
  padding: 16px;
  min-width: 300px;
}

dialog.win-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

dialog.win-dialog h3 {
  margin: 0 0 14px;
  font-size: 15px;
}

.dlg-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* ── Ticker page ──────────────────────────────────────────────────────────── */
.fin-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12px;
  background: var(--win-white);
  border: 2px inset var(--win-gray);
  border-radius: var(--radius-sm);
}

.fin-table th, .fin-table td {
  padding: 5px 10px;
  text-align: right;
  white-space: nowrap;
  border: 1px solid #808080;
}

.fin-table th:first-child, .fin-table td:first-child {
  text-align: left;
  font-family: var(--sans);
}

.fin-table thead th {
  background: var(--win-gray);
  font-weight: bold;
  font-size: 11px;
}

.fin-table th[data-sort] {
  cursor: pointer;
  user-select: none;
}

.fin-table th[data-sort]:hover {
  background: #d4d4d4;
}

.fin-table th.sort-desc {
  background: var(--win-green);
  color: #fff;
}

.fin-table th.sort-asc {
  background: var(--win-red);
  color: #fff;
}

.note-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.note-form textarea {
  width: 100%;
  padding: 6px;
  background: var(--win-white);
  border: 2px inset var(--win-gray);
  border-radius: var(--radius-sm);
  color: var(--win-black);
  font-family: var(--sans);
  font-size: 13px;
  resize: vertical;
}

.note-form button {
  align-self: flex-start;
}

.note-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.note-list li {
  background: var(--win-white);
  border: 2px inset var(--win-gray);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}

.note-date {
  font-size: 11px;
  font-weight: bold;
  margin: 0 0 4px;
}

/* ── Model/Charts tabs ────────────────────────────────────────────────────── */
.win-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}

.win-tabs a {
  background: var(--win-gray);
  border: 2px outset var(--win-gray);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 6px 18px;
  font-size: 13px;
  color: var(--win-black);
}

.win-tabs a.active {
  background: #ececec;
  font-weight: bold;
  border-color: var(--win-black) var(--win-gray) #ececec var(--win-gray);
}

/* ── Charts ───────────────────────────────────────────────────────────────── */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: 14px;
}

.chart-panel {
  background: #f8f9fa;
  min-width: 0; /* let grid items shrink below the canvas's natural size instead of overflowing */
}

.chart-panel h2 {
  margin: -14px -14px 14px -14px;
}

.chart-canvas-wrap {
  position: relative;
  width: 100%;
  height: 240px;
}

.save-chart-btn {
  margin-top: 10px;
}

/* ── Post editor ──────────────────────────────────────────────────────────── */
.editor-sticky-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--win-gray);
  margin: -14px -14px 0 -14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--win-black);
  border-radius: var(--radius) var(--radius) 0 0;
}

.editor-sticky-head h2 {
  margin: 0 0 8px 0;
}

.editor-sticky-head .editor-toolbar {
  margin: 0 14px;
}

.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.editor-toolbar button {
  background: var(--win-gray);
  border: 2px outset var(--win-gray);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}

.editor-toolbar button:active {
  border-style: inset;
}

.post-editor {
  min-height: 300px;
  background: var(--win-white);
  border: 2px inset var(--win-gray);
  border-radius: var(--radius-sm);
  padding: 10px;
  font-size: 14px;
  line-height: 1.5;
  overflow-y: auto;
}

.post-body img {
  max-width: 100%;
  height: auto;
}

.post-editor img {
  max-width: 420px;
  height: auto;
}

/* ── Community feed ───────────────────────────────────────────────────────── */
.community-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}

.community-sidebar .status-card {
  margin-bottom: 16px;
}

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

.post-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.post-card {
  display: block;
  background: var(--win-gray);
  border: 2px outset var(--win-gray);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--win-black);
  transition: box-shadow .12s ease, transform .12s ease;
  overflow: hidden;
}

.post-card:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
  transform: translateY(-1px);
}

.post-card:active {
  border-style: inset;
}

.post-card-body {
  padding: 14px;
}

.post-card h3 {
  margin: 4px 0 6px;
}

.post-excerpt {
  margin: 0 0 8px;
  font-size: 13px;
}

.community-feed-scroll {
  max-height: 640px;
  overflow-y: auto;
  padding-right: 4px;
}

.post-body {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
  font-size: 14px;
}

.post-body h2, .post-body h3 {
  margin-top: 18px;
}

.comment-locked textarea {
  width: 100%;
  padding: 8px;
  background: #e8e8e8;
  border: 2px inset var(--win-gray);
  border-radius: var(--radius-sm);
  color: #888888;
  font-family: var(--sans);
  font-size: 13px;
  resize: none;
  margin-bottom: 8px;
  cursor: not-allowed;
}

/* ── SWOT ─────────────────────────────────────────────────────────────────── */
.swot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.swot-quad {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.swot-label {
  font-weight: bold;
  font-size: 13px;
}

.swot-strengths     { color: var(--win-green); }
.swot-weaknesses     { color: var(--win-red); }
.swot-opportunities  { color: #000080; }
.swot-threats        { color: #a05a00; }

.swot-quad textarea {
  width: 100%;
  background: var(--win-white);
  border: 2px inset var(--win-gray);
  border-radius: var(--radius-sm);
  color: var(--win-black);
  font-family: var(--sans);
  font-size: 13px;
  padding: 8px;
  resize: vertical;
}

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

.thesis-textarea {
  width: 100%;
  background: var(--win-white);
  border: 2px inset var(--win-gray);
  border-radius: var(--radius-sm);
  color: var(--win-black);
  font-family: var(--sans);
  font-size: 13px;
  padding: 8px;
  resize: vertical;
}

.note-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.note-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

/* Legacy plain-text notes (no HTML formatting) rely on this to preserve
   their raw newlines; HTML-formatted notes must NOT have this, or literal
   source whitespace between tags would render as visible gaps. */
.note-body-plain {
  white-space: pre-wrap;
}

.note-editor {
  min-height: 90px;
  background: var(--win-white);
  border: 2px inset var(--win-gray);
  border-radius: var(--radius-sm);
  padding: 8px;
  font-size: 13px;
  line-height: 1.5;
  overflow-y: auto;
}

.note-editor:empty:before {
  content: attr(data-placeholder);
  color: #888;
}

/* Contenteditable wraps each Enter-pressed line in its own <div>/<p>, which
   otherwise pick up the browser's default block margin and blow out line
   spacing compared to the old plain-text (white-space:pre-wrap) notes. */
.note-body p, .note-body div,
.note-editor p, .note-editor div {
  margin: 0;
}

.note-body table,
.note-editor table,
.post-editor table,
.post-body table {
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 13px;
}

.note-body table td, .note-body table th,
.note-editor table td, .note-editor table th,
.post-editor table td, .post-editor table th,
.post-body table td, .post-body table th {
  border: 1px solid #999;
  padding: 4px 8px;
}

.note-body table th,
.note-editor table th,
.post-editor table th,
.post-body table th {
  background: #e8e8e8;
  font-weight: bold;
}

/* ── DCF model page ───────────────────────────────────────────────────────── */
.global-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px 14px;
}

.global-grid .form-group {
  margin-bottom: 0;
}

.fin-table input {
  background: var(--win-white);
  border: 2px inset var(--win-gray);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 12px;
  padding: 2px 4px;
  width: 62px;
  text-align: right;
}

/* Historical Financials manual-override inputs (ticker.php) — a locked row's
   cells use the same box styling as above; an un-locked row's cells fall back
   to looking like plain read-only table text. */
.fin-table input.override-input[readonly] {
  background: transparent;
  border: none;
  padding: 0;
  width: 100%;
  color: inherit;
}

.fin-table tr.override-row td {
  background: #fff3cd;
}

.table-hscroll {
  overflow-x: auto;
}

.fin-table td.hist-cell {
  color: #555;
  background: #ececec;
}

.fin-table td.recon-pos {
  background: #d4edda;
}

.fin-table td.recon-neg {
  background: #f8d7da;
}

.fin-table td.recon-na {
  background: #f0f0f0;
}

.results-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.result-tile {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.result-label {
  font-size: 11px;
  font-weight: bold;
}

.result-value {
  font-family: var(--mono);
  font-size: 18px;
}

.dash-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 18px;
}

.dash-stat .result-label {
  font-size: 10px;
}

.dash-stat .result-value {
  font-size: 20px;
}

@media (max-width: 480px) {
  .win-title { font-size: 12px; }
  .ef-nav { flex-wrap: wrap; gap: 8px; }
  .ticker-search { max-width: 100%; }
}