/* THE WATCHLIST AS CARDS (R31 B45, Kevin's mockup v2 of 2026-10-01): the picker at the top
   of the right bar's Watchlist tab and of the phone's Watch tab, one card per name in one
   of three states, the model popup (desktop) and the model sheet (phone). One file for both
   shells so the merge with B44's theme tokens is clean: every colour is var(--token,
   fallback) with today's hex as the fallback. */

/* ------------------------------------------------------------ the picker */
.wp-pick {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin-left: auto; padding: 0 10px;
  border: 1px solid var(--accent-ink); border-radius: var(--r-ctl, 8px);
  background: var(--card); color: var(--accent-ink);
  font: 700 12px var(--font, "Open Sans", "Segoe UI", sans-serif); cursor: pointer; white-space: nowrap;
}
.wp-pick::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.wp-pick:hover { color: var(--text); }
.wp-menu {
  position: absolute; z-index: 70; min-width: 200px; padding: 6px 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-ctl, 8px);
  box-shadow: var(--shadow);
}
.wp-menu[hidden] { display: none; }
.wp-menu h5 { margin: 6px 12px 2px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.wp-menu button {
  display: flex; align-items: center; width: 100%; min-height: 40px; padding: 0 12px; gap: 10px;
  border: 0; background: transparent; color: var(--text); font: 500 13px var(--font); cursor: pointer; text-align: left;
}
.wp-menu button:hover, .wp-menu button:focus-visible { background: var(--card); }
.wp-menu button.on { color: var(--accent-ink); font-weight: 700; }
.wp-menu button .n { margin-left: auto; font-size: 12px; color: var(--muted); }
.wp-head { position: relative; }

/* ------------------------------------------------------------ the cards */
.wp-list { display: flex; flex-direction: column; gap: 6px; }
.wp-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: 8px; row-gap: 3px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--r-ctl, 8px);
  background: var(--card); color: var(--text); cursor: pointer; font-size: 13px;
}
.wp-card:hover { border-color: var(--line2); border-left-color: inherit; }
.wp-card.st-in_trade { border-left-color: var(--up); }
.wp-card.st-planned { border-left-color: var(--warn); }
.wp-card.st-watching { border-left-color: var(--muted); }
.wp-card > b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-card > .n { text-align: right; white-space: nowrap; }
.wp-card .wp-chg { font-size: 12px; }
.wp-chip {
  min-height: 24px; padding: 0 8px; border: 1px solid var(--accent-ink); border-radius: var(--r-pill, 999px);
  background: transparent; color: var(--accent-ink); font: 700 10px/22px var(--font);
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
}
.wp-chip:hover { background: var(--info-bg); }
.wp-chip.hand { border-color: var(--line2); color: var(--muted); }
.wp-state {
  grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 16px; color: var(--muted);
}
.wp-state i { flex: 0 0 auto; margin-top: 1px; padding: 0 5px; border-radius: 3px; font: 700 9px/14px var(--font); letter-spacing: .08em; text-transform: uppercase; font-style: normal; }
.st-in_trade .wp-state i { background: var(--ok-bg); color: var(--up); }
.st-planned .wp-state i { background: var(--arm-bg); color: var(--warn); }
.st-watching .wp-state i { background: var(--idle-bg); color: var(--muted); }
.wp-state span { min-width: 0; color: var(--text); }
.wp-state .wp-earn {
  flex: 0 0 auto; margin-left: auto; padding: 0 6px; border: 1px solid var(--warn); border-radius: 3px;
  color: var(--warn); font: 700 10px/14px var(--font); white-space: nowrap; cursor: help;
}
/* R31 B62: the pre-entry note, one line under the state (floor/watch_cards.add_risk_notes). */
.wp-note { grid-column: 1 / -1; font-size: 11px; line-height: 15px; color: var(--warn); }
.wp-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.wp-foot a { margin-left: auto; min-height: 24px; line-height: 24px; color: var(--accent-ink); text-decoration: none; font-weight: 700; }
.wp-foot a:hover { text-decoration: underline; }
.wp-bar { flex: 1 1 80px; max-width: 120px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.wp-bar span { display: block; height: 100%; background: var(--warn); }
.wp-desk { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wp-empty { padding: 14px 10px; font-size: 13px; color: var(--muted); }
/* R31 B84 (audit item 10): the state the list shares, once, above the cards. */
.wp-shared { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 2px 10px;
  font-size: 12px; color: var(--text); }
.wp-shared .n { margin-left: auto; color: var(--muted); }
.wp-card > .wp-earn { padding: 0 6px; border: 1px solid var(--warn); border-radius: 3px; color: var(--warn);
  font: 700 10px/14px var(--font); white-space: nowrap; cursor: help; }

/* ------------------------------------------------------------ the model popup (desktop) */
.wp-scrim { position: fixed; inset: 0; z-index: 660; background: rgba(0, 0, 0, .55); }
.wp-pop {
  position: fixed; z-index: 661; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 16px; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-card, 10px);
  box-shadow: var(--shadow); color: var(--text); font: 13px/1.45 var(--font);
}
.wp-pop-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.wp-pop-head b { font-size: 17px; }
.wp-pop-head .wp-desk { font-size: 12px; text-transform: none; letter-spacing: 0; }
.wp-pop-x {
  margin-left: auto; width: 40px; height: 40px; border: 0; border-radius: var(--r-ctl, 8px); background: transparent; color: var(--muted);
  font-size: 18px; cursor: pointer;
}
.wp-pop-x:hover { background: var(--card); color: var(--text); }
.wp-pop p { margin: 0 0 10px; }
.wp-status { display: inline-block; margin: 0 0 10px; padding: 2px 8px; border-radius: 3px; background: var(--bad-bg); color: var(--down); font-size: 12px; font-weight: 700; }
.wp-status.learn { background: var(--arm-bg); color: var(--warn); }
.wp-kv { display: grid; grid-template-columns: 84px minmax(0, 1fr); row-gap: 6px; column-gap: 10px; margin: 0 0 12px; }
.wp-kv span { color: var(--muted); }
.wp-kv b { font-weight: 600; text-align: right; }
.wp-kv select.wp-earn-mode {
  min-height: 28px; padding: 0 6px; border: 1px solid var(--line2); border-radius: var(--r-ctl, 8px);
  background: var(--card); color: var(--text); font: 600 12px var(--font);
}
.wp-kv select.wp-earn-mode.dn { border-color: var(--down); }
.wp-pop h5 { margin: 10px 0 2px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wp-guide {
  display: flex; align-items: center; justify-content: center; min-height: 40px; margin-top: 12px;
  border: 1px solid var(--accent-ink); border-radius: var(--r-ctl, 8px); color: var(--accent-ink); font-weight: 700; text-decoration: none;
}
.wp-guide:hover { background: var(--info-bg); }

/* ------------------------------------------------------------ the phone (R18g shell) */
#mphone .mp-whead { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 12px 0; }
#mphone .mp-whead h2 { margin: 0; font-size: 18px; font-weight: 700; }
#mphone .mp-whead .dp-count { font-size: 12px; padding: 0 6px; border-radius: 9px; background: var(--card); color: var(--muted); }
#mphone .mp-whead .wp-pick { min-height: 40px; padding: 0 12px; font-size: 13px; }
#mphone .wp-menu { right: 12px; left: auto; }
#mphone .mp-grid.wp-grid { display: flex; flex-direction: column; gap: 8px; padding: 6px 12px 16px; }
#mphone .wp-card { padding: 10px 12px; font-size: 14px; }
#mphone .wp-card > b { font-size: 16px; }
#mphone .wp-chip { min-height: 28px; line-height: 26px; }
#mphone .wp-state { font-size: 13px; line-height: 18px; }
#mphone .wp-foot a { min-height: 32px; line-height: 32px; font-size: 13px; }
#mphone .mp-modelsheet .wp-pop-head { padding: 0 16px; }
#mphone .mp-modelsheet .wp-body { padding: 0 16px; font-size: 14px; line-height: 1.5; }
#mphone .mp-modelsheet .wp-kv { grid-template-columns: 90px minmax(0, 1fr); }
#mphone .mp-modelsheet .wp-guide { min-height: 44px; margin: 12px 0 4px; }
/* Kevin's 40 px rule on the phone: the shell's own button rules win on specificity, so the
   menu rows are sized here under #mphone, and the chip keeps its look with an invisible
   reach around it (the same trick as the sheet grip). */
#mphone .wp-menu button { min-height: 44px; font-size: 14px; }
#mphone .wp-chip { position: relative; }
#mphone .wp-chip::after { content: ""; position: absolute; left: -6px; right: -6px; top: -8px; bottom: -8px; }
#mphone .wp-pop-x { width: 44px; height: 44px; }
#mphone .mp-modelsheet .wp-body p { margin: 0 0 12px; }