/* Presto web app — the negatives Presto adds (owner, 21 Oct 2026; webapp/c3/negatives.js).
   In the letter: a soft champagne highlighter line under the phrase and a small gold spark — "Presto added this". A click opens a paper
   card in the letter's own language (cream, gold hairline, sans controls, the gold primary button): Keep, Remove, or Edit. Afterwards: a
   kept phrase loses its mark; a removed one strikes through and fades, with an Undo toast; an edited sentence glows gold where it landed. */

/* ── in the letter ── */
.negsugg{
  position:relative; cursor:pointer; border-radius:3px; padding:0 1px; margin:0 -1px;
  background-image:linear-gradient(to top, rgba(198,161,91,.42) 0, rgba(198,161,91,.42) 2px, transparent 2px);
  background-repeat:no-repeat; background-size:100% 100%; background-position:0 100%;
  transition:background-color .14s var(--tg-ease, ease), box-shadow .14s var(--tg-ease, ease);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.negsugg::after{
  content:"\2726"; display:inline-block; margin-left:2px; font:600 .68em/1 var(--sans, system-ui); color:var(--tg-gold-deep, #9A7B3F);
  vertical-align:.62em; opacity:.9; transition:transform .18s var(--tg-ease, ease), opacity .18s;
}
.negsugg:hover, .negsugg.open{background-color:var(--tg-champ, #F5EFE1); background-image:linear-gradient(to top, rgba(154,123,63,.65) 0, rgba(154,123,63,.65) 2px, transparent 2px);}
.negsugg:hover::after, .negsugg.open::after{transform:scale(1.15) rotate(12deg); opacity:1;}
.negsugg:focus{outline:none;}
.negsugg:focus-visible{background-color:var(--tg-champ, #F5EFE1); box-shadow:inset 0 0 0 1.5px var(--tg-gold-deep, #9A7B3F);}
/* kept: the mark fades away; removed: the words strike through and fade before the letter closes over them */
.negsugg.kept{background-image:none; background-color:transparent; cursor:text; animation:negKeep .5s var(--tg-ease, ease) forwards;}
.negsugg.kept::after{opacity:0; transform:scale(.6);}
.negsugg.going{text-decoration:line-through; text-decoration-color:rgba(138,90,18,.7); opacity:.35; transition:opacity .22s ease;}
@keyframes negKeep{0%{background-color:rgba(47,143,110,.14);}100%{background-color:transparent;}}
.negfresh{border-radius:3px; animation:negFresh 1.8s var(--tg-ease, ease) forwards; -webkit-box-decoration-break:clone; box-decoration-break:clone;}
@keyframes negFresh{0%{background-color:rgba(236,208,142,.75); box-shadow:0 0 0 2px rgba(236,208,142,.75);}100%{background-color:transparent; box-shadow:0 0 0 2px transparent;}}

/* ── the card ── */
.negcard{
  position:absolute; z-index:60; width:min(340px, calc(100vw - 24px)); box-sizing:border-box; padding:16px 16px 14px;
  background:#FFFDF7; color:var(--tg-paper-text, #1B2B36); border:1px solid #DFCB98; border-radius:var(--tg-r-xl, 12px);
  box-shadow:0 18px 40px -18px rgba(14,28,40,.45), 0 3px 8px -3px rgba(14,28,40,.14);
  font:400 13px/1.45 var(--sans, system-ui); opacity:0; transform:translateY(4px); transition:opacity .14s var(--tg-ease, ease), transform .14s var(--tg-ease, ease);
}
.negcard.in{opacity:1; transform:none;}
.negcard::before{ /* the pointer to the phrase */
  content:""; position:absolute; top:-7px; left:var(--neg-caret, 24px); width:12px; height:12px; background:#FFFDF7;
  border-left:1px solid #DFCB98; border-top:1px solid #DFCB98; transform:rotate(45deg); border-top-left-radius:3px;
  box-shadow:-3px -3px 6px -3px rgba(14,28,40,.18);
}
.negcard.above::before{top:auto; bottom:-7px; transform:rotate(225deg);}
.negcard .neg-eyebrow{display:flex; align-items:center; gap:8px; margin:0 0 8px; font:700 10.5px/1 var(--sans, system-ui); letter-spacing:.09em; text-transform:uppercase; color:#7A5E28;}
.negcard .neg-spark{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:linear-gradient(155deg,#F0D07E 0%,#D0A95E 46%,#9A7B3F 100%); color:#fff; font-size:11px; box-shadow:inset 0 1px 0 rgba(255,255,255,.45);}
.negcard .neg-phrase{margin:0 0 6px; font:italic 400 16px/1.35 var(--serif, Georgia, serif); color:var(--tg-paper-text, #1B2B36);}
.negcard .neg-why{margin:0 0 14px; color:#665842; font-size:12.5px;}
.negcard .neg-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.negcard button{appearance:none; font:600 13px/1 var(--sans, system-ui); cursor:pointer; border-radius:var(--tg-r-pill, 999px); padding:0 18px; min-height:38px; transition:transform .12s, box-shadow .12s, background .12s, border-color .12s, filter .12s;}
.negcard .neg-primary{border:none; color:var(--tg-ink, #0E1C28); background:linear-gradient(135deg,#ECD08E 0%,#C6A15B 55%,#A9853F 100%); box-shadow:0 2px 10px rgba(154,123,63,.28), inset 0 1px 0 rgba(255,255,255,.4);}
.negcard .neg-primary:hover{filter:brightness(1.05); transform:translateY(-1px); box-shadow:0 4px 14px rgba(154,123,63,.34), inset 0 1px 0 rgba(255,255,255,.4);}
.negcard .neg-secondary{border:1px solid #D6BE82; background:#FFFDF7; color:#3B3427; padding:0 17px;}
.negcard .neg-secondary:hover{background:var(--tg-champ, #F5EFE1); border-color:var(--tg-gold, #C6A15B);}
.negcard .neg-link{border:none; background:none; padding:0 6px; color:#7A5E28; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px;}
.negcard .neg-link:hover{color:#5E4718; text-decoration-style:solid;}
.negcard button:focus{outline:none;}
.negcard button:focus-visible{box-shadow:0 0 0 2px #FFFDF7, 0 0 0 4px var(--tg-gold-deep, #9A7B3F);}
.negcard .neg-edit{display:grid; gap:10px;}
.negcard .neg-edit input{width:100%; box-sizing:border-box; font:400 13.5px/1.4 var(--sans, system-ui); color:var(--tg-paper-text, #1B2B36); background:#fff; border:1px solid #D6BE82; border-radius:var(--tg-r-md, 9px); padding:9px 11px;}
.negcard .neg-edit input::placeholder{color:#A08A5E;}
.negcard .neg-edit input:focus{outline:none; border-color:var(--tg-gold-deep, #9A7B3F); box-shadow:0 0 0 3px rgba(198,161,91,.22);}
.negcard .neg-keys{font-size:11.5px; color:#73644A;}
@media (pointer: coarse){ .negcard button{min-height:44px;} .negcard .neg-edit input{min-height:44px;} }

/* ── the toast after Remove or Edit: Presto's dark toast, with Undo ── */
.negtoast{
  position:fixed; z-index:70; left:50%; bottom:22px; transform:translate(-50%, 8px); opacity:0; display:flex; align-items:center; gap:12px;
  padding:10px 10px 10px 14px; border-radius:var(--tg-r-pill, 999px); background:var(--tg-toast-bg, #0E1C28); color:var(--tg-toast-text, #F5EFE1);
  border:1px solid var(--tg-border, #24415B); box-shadow:var(--tg-sh-lg, 0 24px 50px -30px rgba(0,0,0,.6)); font:500 13px/1.3 var(--sans, system-ui);
  transition:opacity .18s var(--tg-ease, ease), transform .18s var(--tg-ease, ease); max-width:calc(100vw - 32px);
}
.negtoast.in{opacity:1; transform:translate(-50%, 0);}
.negtoast .neg-dot{width:7px; height:7px; border-radius:50%; background:var(--tg-toast-dot, #D8B863); flex:none;}
.negtoast .neg-msg{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.negtoast button{appearance:none; border:1px solid rgba(216,184,99,.45); background:transparent; color:var(--tg-gold-dark, #D8B863); font:700 12.5px/1 var(--sans, system-ui); padding:0 16px; min-height:34px; border-radius:var(--tg-r-pill, 999px); cursor:pointer;}
.negtoast button:hover{background:rgba(216,184,99,.12);}
.negtoast button:focus{outline:none;}
.negtoast button:focus-visible{box-shadow:0 0 0 2px var(--tg-gold-dark, #D8B863);}

@media (prefers-reduced-motion: reduce){
  .negsugg, .negsugg::after, .negcard, .negtoast, .negsugg.going{transition:none;}
  .negsugg.kept, .negfresh{animation:none;}
  .negcard{transform:none;}
}