/* Free-trial reminder ribbon. Theme-aware; calm by default, warmer as the
   trial nears its end. Sits at the very top of the main content area. */
.trial-ribbon{
  display:flex;align-items:center;gap:14px;
  margin:0 0 20px;padding:12px 16px;border-radius:14px;
  border:1px solid var(--line,#dce5eb);
  background:var(--surface,#fff);
  box-shadow:0 6px 18px #22496612;
  position:relative;overflow:hidden;
  animation:trialRibbonIn .34s cubic-bezier(.16,1,.3,1) both;
}
@keyframes trialRibbonIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.trial-ribbon:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--trial-accent,#187bb1)}
.trial-ribbon-ico{flex:none;font-size:20px;line-height:1;width:40px;height:40px;display:grid;place-items:center;border-radius:11px;
  background:color-mix(in srgb,var(--trial-accent,#187bb1) 12%,var(--surface,#fff));
  border:1px solid color-mix(in srgb,var(--trial-accent,#187bb1) 22%,var(--line,#dce5eb))}
.trial-ribbon-text{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.trial-ribbon-text strong{font-size:13.5px;font-weight:700;letter-spacing:-.2px;color:var(--text,#243b4e)}
.trial-ribbon-text span{font-size:11.5px;line-height:1.5;color:var(--muted,#637586)}
.trial-ribbon-actions{flex:none;display:flex;align-items:center;gap:8px}
.trial-ribbon .trial-ribbon-cta{white-space:nowrap;background:var(--trial-accent,#187bb1);border-color:var(--trial-accent,#187bb1);color:#fff}
.trial-ribbon .trial-ribbon-cta:hover{filter:brightness(1.06)}
.trial-ribbon-close{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line,#dce5eb);
  background:transparent;color:var(--muted,#637586);font-size:17px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .2s,color .2s}
.trial-ribbon-close:hover{background:color-mix(in srgb,var(--trial-accent,#187bb1) 10%,var(--surface,#fff));color:var(--text,#243b4e)}

/* State colours */
.trial-ribbon[data-state="ok"]{--trial-accent:var(--v-accent,#187bb1)}
.trial-ribbon[data-state="warn"]{--trial-accent:#c98a1e}
.trial-ribbon[data-state="warn"]{background:linear-gradient(120deg,color-mix(in srgb,#c98a1e 8%,var(--surface,#fff)),var(--surface,#fff) 60%)}
.trial-ribbon[data-state="urgent"]{--trial-accent:#c6473f}
.trial-ribbon[data-state="urgent"]{background:linear-gradient(120deg,color-mix(in srgb,#c6473f 9%,var(--surface,#fff)),var(--surface,#fff) 60%)}

@media(max-width:640px){
  .trial-ribbon{flex-wrap:wrap;gap:10px;padding:12px 13px}
  .trial-ribbon-ico{width:34px;height:34px;font-size:17px}
  .trial-ribbon-actions{width:100%;justify-content:flex-end}
}
@media(prefers-reduced-motion:reduce){.trial-ribbon{animation:none}}