/* Shared drawer prompt-page styles.
   Used by the four detailed drawer prompt pages (cold-account, first-conversation,
   shipping-cost, thinking-partner). These styles sit on top of the shared
   FrostPal drawer styles in drawer.css. */

.prompt-tools{
  max-width:1240px;
  margin:0 auto;
  padding:72px 32px 88px;
}

.prompt-tools .s-head{
  max-width:760px;
  margin-bottom:34px;
}

.prompt-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.prompt-card{
  position:relative;
  background:#fff;
  border:1px solid rgba(30,42,74,.08);
  border-radius:24px;
  box-shadow:0 10px 26px rgba(30,42,74,.07);
  overflow:hidden;
}

.prompt-card__top{
  padding:24px 24px 20px;
}

.prompt-card__meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:15px;
}

.prompt-card__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:32px;
  padding:0 12px;
  border-radius:999px;
  background:var(--drawer-bg);
  font-family:'Caveat',cursive;
  font-size:18px;
  font-weight:700;
  color:var(--ink);
}

.prompt-card__badge{
  font-size:11px;
  line-height:1;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.prompt-card h2{
  font-family:'Quicksand',sans-serif;
  font-size:clamp(23px,2vw,30px);
  line-height:1.15;
  letter-spacing:-.02em;
  margin:0 0 10px;
}

.prompt-card__desc{
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.6;
  margin:0;
}

.prompt-card__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:20px;
}

.prompt-btn{
  appearance:none;
  border:0;
  font:inherit;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  border-radius:999px;
  padding:10px 15px;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}

.prompt-btn:hover{
  transform:translateY(-1px);
}

.prompt-btn.primary{
  background:var(--drawer-solid);
  color:#173044;
  box-shadow:0 4px 0 rgba(30,42,74,.12);
}

.prompt-btn.secondary{
  background:#f4f6f8;
  color:var(--ink);
}

.prompt-card__body{
  display:block;
  border-top:1px solid rgba(30,42,74,.08);
  padding:20px 24px 24px;
  background:rgba(255,255,255,.72);
}

.prompt-card.is-expanded .prompt-text{
  max-height:680px;
  overflow:auto;
}

.prompt-card__label{
  display:block;
  margin-bottom:10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.prompt-text{
  white-space:pre-wrap;
  word-break:break-word;
  background:#f7f9fa;
  border:1px solid rgba(30,42,74,.08);
  border-radius:16px;
  padding:16px;
  margin:0;
  color:var(--ink);
  font:500 13px/1.65 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  max-height:180px;
  overflow:hidden;
  scrollbar-gutter:stable;
  transition:max-height .24s ease;
}

.prompt-text.loading{
  color:var(--ink-soft);
}

.prompt-text.error{
  color:#8a3944;
  background:#fff4f5;
  border-color:rgba(138,57,68,.18);
}

.drawer-note{
  max-width:1240px;
  margin:0 auto;
  padding:0 32px 72px;
}

.drawer-note__card{
  background:var(--drawer-bg);
  border-radius:28px;
  padding:28px 30px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:start;
}

.drawer-note__icon{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  background:#fff;
  border-radius:18px;
  box-shadow:0 4px 0 rgba(30,42,74,.08);
  font-size:24px;
}

.drawer-note__card h3{
  margin:0 0 6px;
  font-size:20px;
}

.drawer-note__card p{
  margin:0;
  color:var(--ink-soft);
  line-height:1.6;
}

.copy-status{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translate(-50%,20px);
  background:var(--ink);
  color:#fff;
  padding:10px 16px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  opacity:0;
  pointer-events:none;
  transition:.2s ease;
  z-index:100;
}

.copy-status.show{
  opacity:1;
  transform:translate(-50%,0);
}

/* ---------- AI data-safety notice (shown wherever prompts are copied) ---------- */
.ai-safety-note{
  max-width:1240px;
  margin:0 auto 32px;
  padding:14px 20px;
  background:var(--blush);
  border-radius:16px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:13.5px;
  line-height:1.55;
  color:var(--ink);
}
.ai-safety-note .ic{flex-shrink:0;font-size:16px;line-height:1.4}
.ai-safety-note b{color:var(--ink)}

@media (max-width:800px){
  .prompt-grid{grid-template-columns:1fr}
}

@media (max-width:640px){
  .prompt-tools{padding:56px 20px 68px}
  .drawer-note{padding:0 20px 56px}
  .drawer-note__card{grid-template-columns:1fr;padding:24px}
  .prompt-card__top,.prompt-card__body{padding-left:20px;padding-right:20px}
}

/* =========================================================
   Optional additive extensions
   These selectors are only activated by markup that opts in
   (extra classes/attributes). They do not change the DOM or
   appearance of the four detailed drawer pages, which do not
   use these classes/attributes.
   ========================================================= */

/* Tinted icon blob for pages that show a per-card icon (e.g. prompts.html).
   Inert unless a card also has a .prompt-card__icon element inside it. */
.prompt-card__icon{
  width:50px;
  height:50px;
  flex-shrink:0;
  border-radius:50% 50% 46% 54% / 50% 50% 50% 50%;
  display:grid;
  place-items:center;
  font-size:22px;
  color:var(--ink);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.08);
}

.prompt-card.tint-1 .prompt-card__icon{background:var(--frost)}
.prompt-card.tint-2 .prompt-card__icon{background:var(--butter)}
.prompt-card.tint-3 .prompt-card__icon{background:var(--blush)}
.prompt-card.tint-4 .prompt-card__icon{background:var(--mint)}
.prompt-card.tint-5 .prompt-card__icon{background:var(--lilac)}

/* Direct-link highlight + scroll offset for pages that opt a card into it
   via the .prompt-card--linkable modifier (used by prompts.html). Cards
   without this modifier are completely unaffected. */
.prompt-card--linkable{
  scroll-margin-top:24px;
}

.prompt-card--linkable:target{
  border-color:var(--ice);
  box-shadow:0 0 0 5px rgba(91,141,239,.18),0 10px 26px rgba(30,42,74,.07);
}

/* Hides the expand/collapse control until JS confirms the collapsed prompt
   actually overflows. Only applied to cards whose markup opts in with
   data-toggle-visibility="auto" (used by prompts.html); the four drawer
   pages never receive this class so their "Show more" button keeps
   behaving exactly as before. */
.toggle-prompt.is-hidden{
  display:none;
}