/* app-myplan.css (b556): the My plan card at the top of the driver's Menu, its confirm panel and its Ending state.
   From the approved mockup 050-Documents/YPD-MY-PLAN-CANCEL-MOCKUP-V1A.html. Labels are the house chip (b510): Forge
   Orange #FF3B00 pill, white JetBrains Mono capitals. Every button is 44px tall or more. Colors are literal hex here, not
   app.css tokens, so this file stands on its own (t90 checks app.css's own var() list). */
.mp-host{margin:0 0 10px}
.mp-card{background:#fff;border:2px solid #0A0A0A;border-radius:18px;padding:14px;color:#0A0A0A}
.mp-card.mp-ending{border-color:#B07600;background:#FFFBF2}
.mp-card.mp-past_due{border-color:#E11900}
.mp-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.mp-lab{display:inline-block;background:#FF3B00;color:#fff;font-family:'JetBrains Mono',monospace;font-size:var(--fs-label,12px);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;border-radius:999px;padding:5px 11px;line-height:1.3;white-space:nowrap}
.mp-st{display:inline-block;border-radius:999px;padding:4px 11px;font-size:var(--fs-label,12px);font-weight:700;font-family:'JetBrains Mono',monospace;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.3}
.mp-st.good{background:var(--good-tint);color:var(--good-ink)}
.mp-st.warn{background:#FBF1DC;color:#6E4A00}
.mp-st.bad{background:#E11900;color:#fff}
.mp-name{font-family:var(--body);font-size:var(--t-card);line-height:var(--lh-card);font-weight:600}
.mp-price{font-size:var(--t-page);font-weight:600;margin:2px 0 8px}
.mp-price small{font-size:var(--t-small);font-weight:500;color:#5A5A57}
.mp-p{font-size:var(--t-small);margin:8px 0 12px}
.mp-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:var(--t-small);margin:0 0 12px}
.mp-facts dt{align-self:start;justify-self:start;background:#FF3B00;color:#fff;font-family:'JetBrains Mono',monospace;font-size:var(--fs-label,12px);
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:3px 9px;line-height:1.35;white-space:nowrap}
.mp-facts dd{margin:0;font-weight:500;min-width:0;overflow-wrap:anywhere}
/* b569: the colours, corners, heights and type of .mp-btn come from app.css's one button system (pri orange, sec white
   with an ink edge, dgr a red edge); only the layout stays here */
.mp-btn{display:flex;align-items:center;justify-content:center;width:100%;cursor:pointer;padding:10px 14px;text-align:center;
  -webkit-tap-highlight-color:transparent}
.mp-btn + .mp-btn{margin-top:8px}
.mp-card[aria-busy="true"] .mp-btn,.mp-host[aria-busy="true"] .mp-btn{opacity:.6;pointer-events:none}
.mp-small{font-size:var(--t-small);color:#5A5A57;margin-top:8px;text-align:center}
.mp-note{background:var(--good-tint);color:var(--good-ink);border-radius:12px;padding:9px 12px;font-size:var(--t-small);font-weight:700;margin:0 0 10px}
.mp-msg{background:var(--red-tint);color:#9B1300;border-radius:12px;padding:9px 12px;font-size:var(--t-small);font-weight:700;margin-top:10px}
.mp-h{font-family:var(--body);font-size:var(--t-body);margin:0 0 10px}
.mp-when{background:#F4F4F2;border-radius:14px;padding:12px;margin-bottom:12px}
.mp-when b{display:block;font-size:var(--t-card);margin-top:8px;font-weight:600}
.mp-when span:last-child{display:block;font-size:var(--t-small);color:#5A5A57}
.mp-kh{font-weight:700;font-size:var(--t-body)}
.mp-keep{list-style:none;margin:6px 0 12px;padding:0;display:flex;flex-direction:column;gap:7px}
.mp-keep li{display:flex;gap:9px;font-size:var(--t-small);align-items:flex-start}
.mp-keep li::before{content:"";flex:0 0 18px;height:18px;border-radius:50%;margin-top:2px;background:#1F9D57 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.mp-banner{background:#FBF1DC;border:1px solid #E8D3A3;border-radius:14px;padding:10px 12px;font-size:var(--t-small);margin-bottom:10px}