/* Strike Watch — light list.
   Palette and type were ratified against the design spec: white grouped rows on #f2f3f5,
   IBM Plex Mono for every number so columns align, semantic colour reserved for the three
   position states and nothing else. The strike marker is indigo on purpose: it must not be
   confusable with clear / near / through, and it must outrank the grey track. */

:root{
  --bg:#f2f3f5;
  --card:#ffffff;
  --ink:#1a1d23;
  --mut:#767d88;
  --dim:#8b929c;
  --faint:#aeb4bc;
  --line:#edeff2;
  --line2:#e3e6ea;
  --sunk:#eef0f3;

  --ok:#12805a;
  --near:#a06a10;
  --itm:#c0392f;
  --strike:#4f46e5;

  /* Separate names from the position-state colours even though the hues match. These say
     "the contract costs more / less than you sold it for", which is a different question
     from "is the stock through the strike" — and the two can disagree on the same row. */
  --costlier:#c0392f;
  --cheaper:#12805a;

  --ok-bg:#e7f4ee;
  --near-bg:#fbf1de;
  --itm-bg:#fceceb;

  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}

html,body{height:100%}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button{font:inherit; color:inherit; cursor:pointer}
input{font:inherit}
[hidden]{display:none !important}

.mono,.tk,.mt,.px,.sold,.brl,.chip,.feed,.sortbar b,.sortbar button{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ================= LOCK ================= */
.lock{
  position:fixed; inset:0; z-index:60; background:#12141a; color:#eef0f4;
  display:flex; align-items:center; justify-content:center;
  padding:calc(24px + var(--safe-top)) 24px calc(24px + var(--safe-bot));
}
.lock-inner{display:flex; flex-direction:column; align-items:center; gap:0; width:100%; max-width:320px}
.lock-mark{
  width:34px; height:34px; border-radius:9px; margin-bottom:16px;
  background:linear-gradient(150deg,#6b63f0,#4f46e5 60%,#3f37c9);
  box-shadow:0 6px 18px -6px rgba(79,70,229,.75);
}
.lock-title{font-size:18px; font-weight:600; letter-spacing:-.015em; margin:0}
.lock-sub{font-size:13.5px; color:#8b93a0; margin:6px 0 0; min-height:20px; text-align:center}
.lock-sub.err{color:#f08a84}

.pips{display:flex; gap:14px; margin:26px 0 30px}
.pips i{
  width:12px; height:12px; border-radius:50%; display:block;
  border:1.5px solid #4a515e; background:transparent;
  transition:background .12s ease, border-color .12s ease, transform .12s ease;
}
.pips i.on{background:#eef0f4; border-color:#eef0f4; transform:scale(1.06)}
.pips.dark i{border-color:#c2c8d0}
.pips.dark i.on{background:var(--strike); border-color:var(--strike)}
.pips.shake{animation:shake .32s}
@keyframes shake{
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)}
  40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(3px)}
}

.pad{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; width:100%}
.pad button{
  aspect-ratio:1; border-radius:50%; border:0; background:#1e222b; color:#eef0f4;
  font-family:"IBM Plex Mono",monospace; font-size:23px; font-weight:500;
  display:flex; align-items:center; justify-content:center;
  transition:background .1s ease, transform .1s ease;
}
.pad button:active{background:#2b313c; transform:scale(.95)}
.pad button.blank{background:none; pointer-events:none}
.pad button.act{background:none; font-size:14px; font-weight:600; color:#8b93a0}
.pad.compact button{background:var(--sunk); color:var(--ink); font-size:21px}
.pad.compact button:active{background:#dfe3e8}
.pad.compact button.blank{background:none}
.pad.compact button.act{background:none; color:var(--mut); font-size:13px}

/* ================= MAIN ================= */
.main{display:flex; flex-direction:column; height:100%}

.hdr{
  flex:0 0 auto; background:var(--card); border-bottom:1px solid var(--line2);
  padding:calc(12px + var(--safe-top)) 14px 11px;
}
.hdr-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.hdr-name{font-size:15px; font-weight:600; letter-spacing:-.015em}
.icon-btn{
  border:0; background:none; color:var(--dim); padding:6px; margin:-6px -6px -6px 0;
  border-radius:8px; display:flex;
}
.icon-btn:active{background:var(--sunk)}

.feed{
  font-size:9.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  display:flex; align-items:center; gap:5px; margin-top:7px; color:var(--near);
}
.feed .led{width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto}
.feed.stale{color:var(--mut)}
.feed.bad{color:var(--itm)}

/* A miniature of a row, so the line explains itself without a legend screen. */
.hdr-mid{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-top:7px}
.legend{
  flex:0 0 auto; display:grid; grid-template-columns:auto auto auto; gap:0 5px; align-items:center;
  padding:6px 9px; border:1px solid var(--line2); border-radius:8px; background:var(--bg);
}
.legend b{
  font-family:"IBM Plex Mono",monospace; font-size:9.5px; font-weight:600;
  font-variant-numeric:tabular-nums; text-align:right;
}
/* Each legend row is coloured whole — figure and caption together — so the colour reads as
   belonging to the row rather than decorating the number. Green stands in for the current
   price, which is really green, amber or red depending on where the stock sits; one colour
   has to be picked for a static key and green is the one the eye already reads as "the live
   one". The grey row is genuinely always grey. */
.legend span{font-size:8.5px; letter-spacing:.02em; white-space:nowrap}
.legend .now{color:var(--ok)}
.legend .was{color:#9aa1ab; font-weight:500}
/* The same two markers the row uses, so the key is a picture of a row rather than a
   description of one. */
.legend .mk{width:8px; height:8px; border-radius:50%; display:block}
.legend .mk.dot{background:var(--ok); box-shadow:0 0 0 1px rgba(16,20,28,.10)}
.legend .mk.ring{background:var(--card); border:1.5px solid var(--faint)}

.legend .lbar{grid-column:1 / -1; position:relative; height:3px; border-radius:2px;
              background:#e0e4e9; margin:3px 0}
.legend .lbar i{position:absolute; left:50%; top:-3px; bottom:-3px; width:2.5px; border-radius:2px;
                background:var(--strike); transform:translateX(-1.25px)}

.chips{display:flex; flex-direction:column; gap:5px; margin-top:10px}
.chiprow{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.chiplabel{
  font-family:"IBM Plex Mono",monospace; font-size:9px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:#9aa1ab; flex:0 0 auto; max-width:82px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chip{
  font-size:9.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 8px; border-radius:6px; background:var(--sunk); color:#5f6771; white-space:nowrap;
}
.chip.itm{background:var(--itm-bg); color:var(--itm)}
.chip.near{background:var(--near-bg); color:var(--near)}
.chip.ok{background:var(--ok-bg); color:var(--ok)}

.sortbar{display:flex; align-items:center; gap:8px; margin-top:11px}
.sortbar b{font-size:9px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#9aa1ab}
.grp{display:flex; background:var(--sunk); border-radius:8px; padding:2px; gap:2px; flex:1}
.grp button{
  flex:1; font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:7px 4px; border:0; border-radius:6px; background:transparent; color:var(--mut);
}
.grp button[aria-pressed="true"]{
  background:var(--card); color:var(--ink); box-shadow:0 1px 2px rgba(16,20,28,.12);
}
.grp button:focus-visible,.icon-btn:focus-visible,.pad button:focus-visible{
  outline:2px solid var(--strike); outline-offset:1px;
}

.scroll{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:0 12px calc(96px + var(--safe-bot));
}

/* The account heading outranks the PUTS/CALLS headings beneath it: heavier, tracked out, and
   ruled off, so the eye reads "which book" before "which side". */
.acct{
  font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--mut); padding:22px 4px 0;
  border-bottom:1px solid var(--line2); margin-bottom:-4px; padding-bottom:8px;
}
.acct:first-child{padding-top:14px}

.sec{
  display:flex; align-items:baseline; justify-content:space-between;
  font-family:"IBM Plex Sans",-apple-system,sans-serif; font-size:15px; font-weight:600;
  letter-spacing:-.015em; text-transform:uppercase; color:var(--ink); padding:16px 4px 7px;
}
.sec em{
  font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:600;
  color:var(--faint); letter-spacing:.04em;
}

.group{background:var(--card); border-radius:13px; overflow:hidden; box-shadow:0 1px 2px rgba(16,20,28,.07)}
/* The price column is `auto`, never a fixed width. A fixed one clips the moment anything
   makes the text wider than it was designed for — a larger iOS text size, a three-digit
   contract price — and a clipped price is a misread price. The middle column takes
   minmax(0,…) so it is the one that gives way instead. */
.row{
  display:grid; grid-template-columns:84px minmax(0,1fr) auto; gap:10px; align-items:center;
  padding:12px 13px; border-bottom:1px solid var(--line); width:100%;
  border-left:0; border-right:0; border-top:0; background:none; text-align:left;
}
.row:last-child{border-bottom:0}
.row:active{background:#f7f8fa}

/* The row is a <button> so the whole line is one tap target; its children are spans, which
   would otherwise run together on one line inside the grid cell. */
.tk,.mt,.px,.sold,.bar{display:block}
.tk{font-size:14.5px; font-weight:600; letter-spacing:-.015em; line-height:1.15}
.mt{font-size:10px; color:var(--dim); margin-top:3px; line-height:1.5}

/* Stock price at the time of sale, wearing the same hollow ring that marks it on the line. */
.atsale{display:inline-flex; align-items:center; gap:4px; color:var(--mut)}
.atsale.unset{color:var(--faint)}
.ringdot{
  width:7px; height:7px; border-radius:50%; flex:0 0 auto;
  background:var(--card); border:1.5px solid var(--faint);
}

/* Current stock price ABOVE the line, price when sold BELOW it. Each label is anchored to
   its own marker's position, and splitting them across the bar means they can never collide
   — which they would constantly, since most positions were sold near where the stock trades
   now. CVS is the extreme: 93.62 against 93.91, two pixels apart. */
.track{position:relative; display:block; padding-top:14px; padding-bottom:15px}
.bar{position:relative; height:4px; border-radius:99px; background:#e6e9ed}
.lbl{
  position:absolute; transform:translateX(-50%); white-space:nowrap;
  font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.lbl.now{top:0}
.lbl.was{top:26px; color:#9aa1ab; font-weight:500}
.lbl.now.none{color:var(--faint); font-weight:400}
.bar .zone{position:absolute; top:0; bottom:0; width:50%; border-radius:99px}
.bar--put  .zone{left:0;  background:linear-gradient(90deg, rgba(192,57,47,.20), rgba(192,57,47,.02))}
.bar--call .zone{right:0; background:linear-gradient(270deg, rgba(192,57,47,.20), rgba(192,57,47,.02))}
.bar .trail{position:absolute; top:50%; height:2px; border-radius:2px; background:#c2c8d0; transform:translateY(-50%)}
.bar .tick{
  position:absolute; left:50%; top:-5px; bottom:-5px; width:3px; border-radius:2px;
  background:var(--strike); transform:translateX(-1.5px);
}
.bar .from{
  position:absolute; top:50%; width:9px; height:9px; border-radius:50%;
  background:var(--card); border:2px solid var(--faint); transform:translate(-50%,-50%);
}
.bar .dot{
  position:absolute; top:50%; width:11px; height:11px; border-radius:50%;
  border:2px solid var(--card); transform:translate(-50%,-50%);
  box-shadow:0 0 0 1px rgba(16,20,28,.10);
}
.brl{
  display:flex; justify-content:space-between; gap:8px; font-size:10px;
  font-variant-numeric:tabular-nums; color:#7d848f; white-space:nowrap;
}
.brl .was{color:var(--faint)}
.brl .add{color:var(--strike); font-weight:600}
.brl .none{color:var(--faint)}

.c3{text-align:right; white-space:nowrap; min-width:56px}
.px{font-size:14.5px; font-weight:500; font-variant-numeric:tabular-nums; line-height:1.15}
.px.costlier{color:var(--costlier)}
.px.cheaper{color:var(--cheaper)}
.px.none{color:var(--faint)}
.sold{font-size:10px; font-variant-numeric:tabular-nums; color:var(--dim); margin-top:3px}
.gl{
  display:block; font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600;
  font-variant-numeric:tabular-nums; margin-top:2px;
}
.gl.up{color:var(--ok)}
.gl.down{color:var(--itm)}
.gl.none{color:var(--faint); font-weight:400}

.empty{text-align:center; padding:64px 28px; color:var(--mut)}
.empty h2{font-size:16px; font-weight:600; color:var(--ink); margin:0 0 8px}
.empty p{font-size:14px; line-height:1.6; margin:0}

.fab{
  position:fixed; right:14px; bottom:calc(18px + var(--safe-bot));
  width:50px; height:50px; border-radius:50%; border:0; z-index:20;
  background:var(--strike); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px -6px rgba(79,70,229,.6), 0 2px 5px rgba(16,20,28,.18);
}
.fab:active{transform:scale(.94)}

/* ================= SHEETS ================= */
.sheet-wrap{position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end}
.scrim{position:absolute; inset:0; background:rgba(16,20,28,.4); backdrop-filter:blur(2px)}
.sheet{
  position:relative; width:100%; max-height:92%; display:flex; flex-direction:column;
  background:var(--bg); border-radius:18px 18px 0 0; overflow:hidden;
  animation:rise .22s cubic-bezier(.32,.72,0,1);
}
.sheet.short{max-height:none}
@keyframes rise{from{transform:translateY(100%)} to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){ .sheet{animation:none} }

.sheet-grab{width:36px; height:4px; border-radius:2px; background:#cfd4db; margin:8px auto 0; flex:0 0 auto}
.sheet-head{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px;
  padding:12px 14px; flex:0 0 auto;
}
.sheet-head h2{font-size:15px; font-weight:600; margin:0; text-align:center; letter-spacing:-.01em}
.link{border:0; background:none; font-size:15px; color:var(--strike); padding:4px; text-align:left}
.link.strong{font-weight:600; text-align:right}
.link.ghost{visibility:hidden}

.sheet-body{
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:4px 16px calc(22px + var(--safe-bot)); display:flex; flex-direction:column; gap:15px;
}
.sheet-body.center{align-items:center}

.field{display:flex; flex-direction:column; gap:6px; flex:1; min-width:0}
.field > span{font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--mut)}
.field > span i{font-style:normal; font-weight:400; text-transform:none; letter-spacing:0; color:var(--faint)}
.field input{
  width:100%; padding:12px 13px; border-radius:10px; border:1px solid var(--line2);
  background:var(--card); color:var(--ink); font-size:16px;
  font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
}
.field input:focus{outline:none; border-color:var(--strike); box-shadow:0 0 0 3px rgba(79,70,229,.14)}
.field input.bad{border-color:var(--itm); box-shadow:0 0 0 3px rgba(192,57,47,.12)}
.field-row{display:flex; gap:11px}
.seg2{flex:0 0 auto; padding:3px}
.seg2.wide{flex:1 1 auto}
.seg2 button{padding:9px 14px; font-size:11px}

.hint{font-size:12.5px; line-height:1.55; color:var(--mut); margin:-6px 0 0}
.hint.err{color:var(--itm); font-weight:500}

.switch-row{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:2px 0}
.switch-row b{font-size:14px; font-weight:600; display:block; margin-bottom:3px}
.switch-row .hint{margin:0; max-width:38ch}
.switch{
  flex:0 0 auto; width:50px; height:30px; border-radius:15px; border:0; background:#ccd1d8;
  padding:3px; display:flex; transition:background .18s ease;
}
.switch[aria-checked="true"]{background:var(--ok)}
.switch span{width:24px; height:24px; border-radius:50%; background:#fff; transition:transform .18s cubic-bezier(.32,.72,0,1)}
.switch[aria-checked="true"] span{transform:translateX(20px)}

.stepper{display:flex; align-items:center; gap:2px; background:var(--sunk); border-radius:9px; padding:3px; flex:0 0 auto}
.stepper button{border:0; background:none; width:34px; height:30px; border-radius:7px; font-size:17px; color:var(--strike)}
.stepper button:active{background:#dfe3e8}
.stepper output{
  font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:600;
  min-width:38px; text-align:center; font-variant-numeric:tabular-nums;
}

.ghost-btn{
  width:100%; padding:13px; border-radius:10px; border:1px solid var(--line2);
  background:var(--card); font-size:14.5px; font-weight:500; color:var(--strike);
}
.ghost-btn:active{background:#f7f8fa}
.danger{
  width:100%; padding:13px; border-radius:10px; border:1px solid #f0cfcc;
  background:var(--itm-bg); color:var(--itm); font-size:14.5px; font-weight:600; margin-top:4px;
}
.about{text-align:center; font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--faint); padding-top:6px}

/* import review */
.imp-sum{display:flex; gap:8px; flex-wrap:wrap}
.imp-line{
  display:flex; align-items:baseline; gap:9px; padding:10px 12px; background:var(--card);
  border-radius:10px; font-family:"IBM Plex Mono",monospace; font-size:12.5px;
}
.imp-line b{font-size:9px; letter-spacing:.09em; text-transform:uppercase; flex:0 0 52px}
.imp-line.add b{color:var(--ok)}
.imp-line.close b{color:var(--itm)}
.imp-line.same b{color:var(--faint)}
.imp-note{
  padding:11px 13px; border-radius:10px; background:var(--near-bg); color:#7a5210;
  font-size:12.5px; line-height:1.55;
}

/* toast */
.toast{
  position:fixed; left:50%; bottom:calc(28px + var(--safe-bot)); transform:translateX(-50%);
  z-index:70; background:#22262e; color:#f2f4f7; padding:11px 17px; border-radius:10px;
  font-size:13.5px; max-width:calc(100% - 40px); text-align:center;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.5); animation:pop .18s ease;
}
@keyframes pop{from{opacity:0; transform:translate(-50%,7px)} to{opacity:1; transform:translate(-50%,0)}}