/* --- Base layout --- */

body {
  font-family: -apple-system, Arial, sans-serif;
  background: #f4f6f8;
  padding: 40px 20px;
}
h1 {
  text-align: center;
  font-size: 22px;
  margin-bottom: 24px;
}
#blocksContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

/* --- Stock cards --- */

.card {
  position: relative;
  background: #fff;
  padding: 28px 32px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  width: 280px;
}
.remove-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: #eee;
  cursor: pointer;
}
/* Drawn from two rotated bars rather than the × character - a glyph's
   position within its own line box varies by font/OS/browser (confirmed:
   measured perfectly centered in one renderer, visibly off in another), so
   nothing short of pure geometry centers reliably everywhere. Each bar is
   pinned to the button's exact center point before rotating, which is
   centering by construction rather than by font metrics. */
.remove-btn::before,
.remove-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  background: #666;
  border-radius: 1px;
}
.remove-btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.remove-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.remove-btn:hover {
  background: #dc2626;
}
.remove-btn:hover::before,
.remove-btn:hover::after {
  background: #fff;
}
.collapse-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: #eee;
  cursor: pointer;
}
.collapse-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #666;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease;
}
.collapse-btn:hover {
  background: #ddd;
}
.card.collapsed .collapse-btn::before {
  transform: translate(-50%, -50%) rotate(180deg);
}
.drag-handle {
  position: absolute;
  top: 0;
  left: 40px;
  right: 40px;
  height: 20px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.card.dragging {
  opacity: 0.5;
  cursor: grabbing;
}
.card.dragging .drag-handle {
  cursor: grabbing;
}

/* --- Collapsed cards: ticker, price, and gain/loss % only --- */

.card-summary {
  display: none;
}
.card.collapsed > label,
.card.collapsed > input,
.card.collapsed > .result,
.card.collapsed > .price-line,
.card.collapsed > .news,
.card.collapsed > .ticker-results {
  display: none;
}
.card.collapsed {
  padding-bottom: 16px;
}
.card.collapsed .card-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 26px;
}
.summary-ticker {
  font-weight: 700;
  font-size: 15px;
  color: #222;
}
.summary-price {
  font-size: 14px;
  color: #333;
  flex: 1;
  text-align: right;
}
.summary-percent {
  font-size: 13px;
  font-weight: 600;
  min-width: 56px;
  text-align: right;
}
label {
  display: block;
  font-size: 13px;
  color: #555;
  margin-bottom: 4px;
  margin-top: 14px;
}
input {
  width: 100%;
  padding: 8px 10px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
}
.result {
  margin-top: 18px;
  text-align: center;
  font-size: 17px;
  font-weight: bold;
  min-height: 22px;
}
.gain { color: #16a34a; }
.loss { color: #dc2626; }
.total {
  font-size: 13px;
  font-weight: normal;
  color: #777;
}

/* --- Ticker autocomplete and live price --- */

.ticker-results {
  position: absolute;
  z-index: 5;
  width: calc(100% - 64px);
  max-height: 220px;
  overflow-y: auto;
  margin-top: 2px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.ticker-result {
  display: block;
  width: 100%;
  padding: 8px 10px;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}
.ticker-result:last-child {
  border-bottom: none;
}
.ticker-result:hover {
  background: #eff6ff;
}
.ticker-symbol {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #222;
}
.ticker-name {
  display: block;
  font-size: 11px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.price-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}
.price-refresh {
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  color: #666;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  cursor: pointer;
}
.price-refresh:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
.price-refresh:disabled {
  opacity: 0.5;
  cursor: default;
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #666;
}
.price-meta {
  font-size: 11px;
  color: #888;
}

/* --- Per-card news --- */

.news {
  margin-top: 16px;
  border-top: 1px solid #eee;
  padding-top: 12px;
}
.news summary {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #2563eb;
  cursor: pointer;
  list-style: none;
}
.news summary::-webkit-details-marker {
  display: none;
}
/* Drawn from a border rather than a ▸/▾ character - same font-metric
   centering problem as the × buttons, same fix: pure geometry instead of
   trusting a glyph's position in its line box. One right-pointing triangle
   rotated 90° on open stands in for both ▸ and ▾. */
.news summary::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #2563eb;
  transition: transform 0.15s ease;
}
.news[open] summary::before {
  transform: rotate(90deg);
}
.news-body {
  margin-top: 10px;
  font-size: 12px;
  color: #888;
}
.news-item {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid #f2f2f2;
  text-decoration: none;
}
.news-item:last-child {
  border-bottom: none;
}
.news-item:hover .news-headline {
  text-decoration: underline;
}
.news-headline {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: #333;
}
.news-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 3px;
}
.news-source {
  font-size: 11px;
  color: #aaa;
}
.news-provider {
  flex: none;
  font-size: 10px;
  color: #c4c4c4;
  white-space: nowrap;
}

/* --- Add button and portfolio summary --- */

#addBtn {
  display: block;
  margin: 0 auto 30px auto;
  padding: 10px 24px;
  font-size: 15px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
#addBtn:hover {
  background: #1d4ed8;
}
#summary {
  max-width: 320px;
  margin: 0 auto 30px auto;
  background: #fff;
  padding: 18px 24px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  text-align: center;
}
#summary .label {
  font-size: 12px;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
#summary .amount {
  font-size: 22px;
  font-weight: bold;
  margin-top: 4px;
}
#summary .breakdown {
  margin-top: 8px;
  font-size: 13px;
  color: #777;
}

/* --- New York clock, market status, and header chart --- */

#marketPanel {
  display: flex;
  align-items: stretch;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto 24px;
}
/* Before sign-in state is known, and while signed out: the chart needs the
   auth-gated market function, so there is nothing to fill the right side
   with, and the clock re-centers instead of sitting off to the left. */
#marketPanel.chart-hidden {
  justify-content: center;
}
#marketPanel.chart-hidden #marketChart {
  display: none;
}

#nyClock {
  /* Fixed rather than shrink-to-fit: the clock and status text change length
     every second (digit widths, "Market Open" vs "Overnight begins in..."),
     and a content-sized box would resize the whole panel - including the
     chart next to it - on every tick. 250px comfortably fits the longest
     realistic status line ("Market Closed · Pre-Market begins in 23:59:59"). */
  flex: 0 0 250px;
  width: 250px;
  text-align: center;
  color: #555;
  /* #marketPanel's align-items:stretch already makes this box as tall as the
     chart next to it; centering the content within it is what makes the
     clock graphic (now much bigger) actually reach down to meet the chart's
     bottom edge instead of leaving dead space below a top-packed stack. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#nyClock .time {
  font-size: 28px;
  font-weight: bold;
  color: #222;
  font-variant-numeric: tabular-nums;
}
#nyClock .date {
  font-size: 13px;
  margin-top: 2px;
}
#nyClock .marketStatus {
  font-size: 11px;
  margin-top: 4px;
  color: #aaa;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nyClock .marketStatus .stateWord {
  font-weight: 600;
}
#nyClock .marketStatus.state-closed .stateWord { color: #6b7280; }
#nyClock .marketStatus.state-overnight .stateWord { color: #a78bfa; }
#nyClock .marketStatus.state-pre .stateWord { color: #f97316; }
#nyClock .marketStatus.state-open .stateWord { color: #16a34a; }
#nyClock .marketStatus.state-after .stateWord { color: #3b82f6; }

#marketChart {
  flex: 1 1 auto;
  min-width: 0; /* lets the flex item shrink below the chart's natural width instead of overflowing */
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
}
.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.chart-symbol-wrap {
  position: relative;
}
.chart-symbol-input {
  width: 90px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 600;
  color: #444;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
}
.chart-symbol-input:hover,
.chart-symbol-input:focus {
  border-color: #ccc;
  background: #fff;
  outline: none;
}
.chart-symbol-results {
  position: absolute;
  z-index: 5;
  top: 100%;
  left: 0;
  width: 220px;
  max-height: 220px;
  overflow-y: auto;
  margin-top: 2px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.chart-ranges {
  display: flex;
  gap: 4px;
}
.range-btn {
  padding: 3px 9px;
  font-size: 12px;
  font-family: inherit;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: #888;
  cursor: pointer;
}
.range-btn:hover {
  background: #f0f0f0;
}
.range-btn.active {
  background: #2563eb;
  color: #fff;
}
#marketChartCanvas {
  flex: 1 1 auto;
  height: 220px;
}

@media (max-width: 640px) {
  #marketPanel {
    flex-direction: column;
    align-items: center;
  }
  #marketChart {
    width: 100%;
  }
}

/* --- 24-hour market clock face --- */

#marketClockFace {
  display: block;
  margin: 6px auto 0 auto;
  overflow: visible;
}
#clockHourHand, #clockMinuteHand {
  transition: transform 0.2s linear;
}
#clockSecondHand {
  /* Only fill, not transform - a transition on rotation would blend each
     tick into the next instead of letting it read as a discrete step. */
  transition: fill 0.3s ease;
}
.clockHourLabel {
  font-size: 7px;
  font-weight: 600;
  fill: #333;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

/* --- Sign-in button and modal --- */

#signInBtn {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 8px 18px;
  font-size: 14px;
  background: #fff;
  color: #2563eb;
  border: 1px solid #2563eb;
  border-radius: 6px;
  cursor: pointer;
  z-index: 10;
}
#signInBtn:hover {
  background: #2563eb;
  color: #fff;
}
/* Sits just under the Sign In button, with a notch pointing up at it. Narrow
   enough not to cover the board, and above the cards but below the modal. */
#signInHint {
  position: fixed;
  top: 64px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 220px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
  color: #fff;
  background: #2563eb;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  z-index: 12;
}
#signInHint[hidden] {
  display: none;
}
#signInHint::before {
  content: '';
  position: absolute;
  top: -5px;
  right: 22px;
  width: 10px;
  height: 10px;
  background: #2563eb;
  transform: rotate(45deg);
}
#signInHintClose {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
/* Same two-bar technique as .remove-btn - centered by geometric construction
   rather than by trusting a font's line-box metrics. */
#signInHintClose::before,
#signInHintClose::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 1.5px;
  background: #cfe0ff;
  border-radius: 1px;
}
#signInHintClose::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
#signInHintClose::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
#signInHintClose:hover {
  border-color: #fca5a5;
  background: rgba(220, 38, 38, 0.25);
}
#signInHintClose:hover::before,
#signInHintClose:hover::after {
  background: #fff;
}

#signInOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 20;
}
#signInOverlay.open {
  display: flex;
}
#signInModal {
  position: relative;
  background: #fff;
  padding: 28px 32px 32px 32px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  width: 320px;
  max-width: 100%;
}
#signInModal h2 {
  font-size: 18px;
  text-align: center;
  margin: 0;
}
#signInSubmit {
  width: 100%;
  margin-top: 24px;
  padding: 10px 24px;
  font-size: 15px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
#signInSubmit:hover {
  background: #1d4ed8;
}
#signInSubmit:disabled {
  background: #93b4f5;
  cursor: default;
}
.field-hint {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.4;
  color: #999;
}
.form-error {
  display: none;
  margin-top: 14px;
  font-size: 13px;
  color: #dc2626;
  text-align: center;
}
.link-button {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  color: #2563eb;
  background: none;
  border: none;
  cursor: pointer;
}
.link-button:hover {
  text-decoration: underline;
}
.link-button:disabled {
  color: #93b4f5;
  cursor: default;
  text-decoration: none;
}

/* --- Signed-in avatar and menu --- */

#userAvatar {
  display: none;
  position: fixed;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  z-index: 10;
}
#userMenu {
  display: none;
  position: fixed;
  top: 64px;
  right: 20px;
  min-width: 180px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  padding: 6px;
  z-index: 11;
}
#userMenu.open {
  display: block;
}
#userMenuEmail {
  padding: 8px 10px;
  font-size: 12px;
  color: #777;
  word-break: break-all;
  border-bottom: 1px solid #eee;
}
#userMenuRole {
  display: none;
  margin: 6px 10px 0 10px;
  padding: 2px 8px;
  width: fit-content;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #7c3aed;
  background: #f3e8ff;
  border-radius: 4px;
}
#accountSettingsLink,
#signOutBtn {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  font-size: 14px;
  text-align: left;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-sizing: border-box;
}
#accountSettingsLink {
  color: #333;
  text-decoration: none;
}
#accountSettingsLink:hover {
  background: #f3f4f6;
}
#signOutBtn {
  color: #dc2626;
}
#signOutBtn:hover {
  background: #fef2f2;
}

/* --- Account settings page --- */

.back-link {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 14px;
  color: #2563eb;
  text-decoration: none;
}
.back-link:hover {
  text-decoration: underline;
}
.account-email {
  text-align: center;
  font-size: 13px;
  color: #777;
  margin-bottom: 24px;
  word-break: break-all;
}
.settings-card {
  max-width: 380px;
  margin: 0 auto;
  background: #fff;
  padding: 28px 32px 32px 32px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.settings-card + .settings-card {
  margin-top: 24px;
}
.settings-card h2 {
  margin: 0;
  font-size: 18px;
}
.card-intro {
  margin: 6px 0 0 0;
  font-size: 13px;
  color: #777;
}
textarea {
  width: 100%;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  resize: vertical;
}
#contactSubmit {
  width: 100%;
  margin-top: 24px;
  padding: 10px 24px;
  font-size: 15px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
#contactSubmit:hover {
  background: #1d4ed8;
}
#contactSubmit:disabled {
  background: #93b4f5;
  cursor: default;
}
#passwordSubmit,
#resetSubmit,
#adminSubmit {
  width: 100%;
  margin-top: 24px;
  padding: 10px 24px;
  font-size: 15px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
#passwordSubmit:hover,
#resetSubmit:hover,
#adminSubmit:hover {
  background: #1d4ed8;
}
#passwordSubmit:disabled,
#resetSubmit:disabled,
#adminSubmit:disabled {
  background: #93b4f5;
  cursor: default;
}
/* Shown once the typed email is checked and turns out to already be an
   admin — the button becomes a revoke action, so it borrows the same red
   used for account deletion instead of the default blue. */
#adminSubmit.danger {
  background: #dc2626;
}
#adminSubmit.danger:hover {
  background: #b91c1c;
}
#adminSubmit.danger:disabled {
  background: #f0a8a8;
}
#deleteAccountSubmit {
  width: 100%;
  margin-top: 24px;
  padding: 10px 24px;
  font-size: 15px;
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
#deleteAccountSubmit:hover {
  background: #b91c1c;
}
#deleteAccountSubmit:disabled {
  background: #f0a8a8;
  cursor: default;
}
.form-success {
  display: none;
  margin-top: 14px;
  font-size: 13px;
  color: #16a34a;
  text-align: center;
}