/* Promptbook — Feedback Lab prompt library
   Paper-and-marker design system. Ported from the approved styl-demo.html. */

@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=Inter:wght@400;500;600&display=swap');

:root{
  --paper:       #f2ebdb;
  --paper-deep:  #e6dcc4;
  --ink:         #2a241c;
  --ink-soft:    #5b5346;
  --red:         #b23a2e;
  --green:       #4a6350;
  --line:        #cdbf9e;
  --tape:        #e8d9a8;
}

*, *::before, *::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background: var(--paper);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(0,0,0,0.025), transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(0,0,0,0.03), transparent 45%),
    repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(90,80,60,0.05) 28px);
  color: var(--ink);
  font-family: 'Source Serif 4', serif;
  padding: 32px 18px 80px;
  -webkit-tap-highlight-color: transparent;
}

.wrap{ max-width: 880px; margin: 0 auto; }

a{ color: inherit; }

button{ font: inherit; }

/* ===== TOP NAV ===== */
.top-nav{
  max-width: 880px;
  margin: 0 auto 8px;
  font-family:'Inter',sans-serif;
  font-size: 13px;
}
.top-nav a{
  color: var(--ink-soft);
  text-decoration:none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
}
.top-nav a:hover, .top-nav a:focus-visible{ color: var(--red); border-color: var(--red); }

/* ===== HEADER ===== */
header{
  text-align:center;
  margin-bottom: 40px;
  position:relative;
}
header .eyebrow{
  font-family:'Inter',sans-serif;
  font-size:11px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
header h1{
  font-family:'Kalam', cursive;
  font-size: 44px;
  font-weight:700;
  margin: 0;
  color: var(--ink);
  position:relative;
  display:inline-block;
  line-height:1.2;
}
header h1 .underline{
  position:absolute;
  left:-4%;
  bottom:-6px;
  width:108%;
  height:10px;
}
header p.sub{
  font-size:15px;
  color: var(--ink-soft);
  margin-top:14px;
  font-style:italic;
  max-width: 520px;
  margin-left:auto;
  margin-right:auto;
}

@media (min-width:600px){
  header h1{ font-size:52px; }
}

/* ===== SEARCH BAR ===== */
.search-wrap{
  max-width: 520px;
  margin: 0 auto 20px;
  position: relative;
}
.search-box{ position: relative; }
.search-box input{
  width:100%;
  font-family:'Inter',sans-serif;
  font-size:16px;
  padding: 14px 18px 14px 44px;
  border: none;
  background: var(--paper);
  border-radius: 3px;
  outline:none;
  color: var(--ink);
  min-height:48px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 6px 14px -10px rgba(0,0,0,0.3);
}
.search-box input:focus-visible{ box-shadow: 0 0 0 2px var(--red); }
.search-box svg{
  position:absolute;
  left:14px; top:50%;
  transform: translateY(-50%);
  width:18px; height:18px;
  stroke: var(--red);
  pointer-events:none;
}
.search-clear{
  position:absolute;
  right:8px; top:50%;
  transform: translateY(-50%);
  background:none;
  border:none;
  color: var(--ink-soft);
  font-size:20px;
  line-height:1;
  padding:10px;
  cursor:pointer;
  display:none;
}
.search-wrap.has-value .search-clear{ display:block; }

.search-results{
  position:relative;
  margin-top: 8px;
  background: var(--paper);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 10px 20px -12px rgba(0,0,0,0.35);
  max-height: 60vh;
  overflow-y:auto;
  display:none;
}
.search-wrap.searching .search-results{ display:block; }

.search-result{
  display:block;
  width:100%;
  text-align:left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background:none;
  border-left:none; border-right:none; border-top:none;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  min-height:44px;
}
.search-result:last-child{ border-bottom:none; }
.search-result:hover, .search-result:focus-visible{ background: var(--paper-deep); }
.search-result .r-topic{
  font-size:10.5px;
  letter-spacing:1px;
  text-transform:uppercase;
  color: var(--red);
  display:block;
  margin-bottom:3px;
}
.search-result .r-name{
  font-size:14.5px;
  font-weight:600;
  color: var(--ink);
  display:block;
  margin-bottom:3px;
}
.search-result .r-snippet{
  font-size:12.5px;
  color: var(--ink-soft);
  display:block;
  line-height:1.4;
}
.search-result mark{
  background: var(--tape);
  color: var(--ink);
  border-radius:2px;
  padding:0 1px;
}
.search-empty{
  padding: 16px;
  font-family:'Inter',sans-serif;
  font-size:13.5px;
  color: var(--ink-soft);
  text-align:center;
}

/* ===== CATEGORY GRID (index.html) ===== */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
  margin-bottom: 40px;
}
@media (max-width:479px){
  .grid{ grid-template-columns: 1fr; }
}
.card{
  background: var(--paper-deep);
  padding: 22px 18px 20px;
  border-radius: 2px;
  cursor:pointer;
  transform: rotate(var(--r,0deg));
  box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 8px 16px -10px rgba(0,0,0,0.25);
  transition: transform .15s ease;
  position:relative;
  display:block;
  text-decoration:none;
  color: inherit;
}
.card:nth-child(13n+1){ --r: -1.2deg; }
.card:nth-child(13n+2){ --r: 0.8deg; }
.card:nth-child(13n+3){ --r: -0.5deg; }
.card:nth-child(13n+4){ --r: 1.1deg; }
.card:nth-child(13n+5){ --r: -0.9deg; }
.card:nth-child(13n+6){ --r: 0.4deg; }
.card:nth-child(13n+7){ --r: -1.4deg; }
.card:nth-child(13n+8){ --r: 0.6deg; }
.card:nth-child(13n+9){ --r: -0.3deg; }
.card:nth-child(13n+10){ --r: 1.3deg; }
.card:nth-child(13n+11){ --r: -0.7deg; }
.card:nth-child(13n+12){ --r: 0.9deg; }
.card:nth-child(13n+13){ --r: -1deg; }
.card:hover, .card:focus-visible{ transform: rotate(0deg) translateY(-3px); }

.card .tape{
  position:absolute;
  top:-10px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width:60px; height:22px;
  background: var(--tape);
  opacity:0.75;
}
.card h2{
  font-family:'Kalam', cursive;
  font-size: 21px;
  margin: 6px 0 8px;
  color: var(--ink);
  font-weight:700;
}
.card p{
  font-family:'Inter',sans-serif;
  font-size:12.5px;
  color: var(--ink-soft);
  margin:0;
  line-height:1.5;
}
.card .count{
  font-family:'Inter',sans-serif;
  font-size:11px;
  color: var(--red);
  margin-top:10px;
  display:block;
  font-weight:600;
}
.grid.filtered .card.no-match{ display:none; }

/* ===== TOPIC PAGE HEADER ===== */
.topic-desc{
  text-align:center;
  font-family:'Inter',sans-serif;
  font-size:13.5px;
  color: var(--ink-soft);
  max-width: 560px;
  margin: -28px auto 36px;
}

/* ===== SUBTOPIC ACCORDION ===== */
.subtopic-list{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-bottom: 60px;
}

.subtopic{
  background: var(--paper-deep);
  border-radius:2px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}

.subtopic-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 16px;
  width:100%;
  background:none;
  border:none;
  text-align:left;
  cursor:pointer;
  padding: 16px 18px;
  min-height:44px;
  font-family:'Kalam', cursive;
  font-size:19px;
  color: var(--ink);
}
.subtopic-header .toggle{
  font-size:12.5px;
  color: var(--ink-soft);
  font-family:'Inter',sans-serif;
  flex-shrink:0;
  white-space:nowrap;
}
.subtopic.open .subtopic-header .toggle::after{ content:"Collapse \25B2"; }
.subtopic:not(.open) .subtopic-header .toggle::after{ content:"Expand \25BC"; }

.subtopic-body{
  padding: 0 12px 16px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.subtopic:not(.open) .subtopic-body{ display:none; }

/* ===== PROMPT CARD ===== */
.prompt-card{
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 4px;
}
.prompt-card:last-child{ border-bottom:none; }

.prompt-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 16px;
  width:100%;
  background:none;
  border:none;
  text-align:left;
  cursor:pointer;
  padding: 12px 8px;
  min-height:44px;
}
.prompt-header .title{
  font-family:'Inter',sans-serif;
  font-weight:500;
  font-size:15px;
  color: var(--ink);
}
.prompt-header .toggle{
  font-size:12.5px;
  color: var(--ink-soft);
  font-family:'Inter',sans-serif;
  flex-shrink:0;
  white-space:nowrap;
}
.prompt-card.open .prompt-header .toggle::after{ content:"Collapse \25B2"; }
.prompt-card:not(.open) .prompt-header .toggle::after{ content:"Expand \25BC"; }

.prompt-body{
  margin: 0 8px 14px;
  font-size:14.5px;
  line-height:1.7;
  color: var(--ink);
  background: #ffffffaa;
  padding: 16px 18px;
  border-left: 3px solid var(--green);
  position:relative;
}
.prompt-card:not(.open) .prompt-body{ display:none; }

.prompt-body p{ margin: 0 0 14px; white-space:pre-wrap; }

/* stamp accent on expanded prompt */
.prompt-card.open .prompt-body::before{
  content:"OK";
  position:absolute;
  top:8px; right:14px;
  font-family:'Kalam',cursive;
  font-size:20px;
  color: var(--green);
  border:2.5px solid var(--green);
  border-radius:50%;
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  transform: rotate(-12deg);
  opacity:0.55;
}

.copy-btn{
  font-family:'Inter',sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.3px;
  color: #fff;
  background: var(--red);
  border:none;
  padding: 10px 18px;
  border-radius:2px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
}
.copy-btn.copied{ background: var(--green); }

.subtopic.filtered-out,
.prompt-card.filtered-out{ display:none; }

.no-results{
  text-align:center;
  font-family:'Inter',sans-serif;
  font-size:14px;
  color: var(--ink-soft);
  padding: 40px 20px;
}

footer{
  text-align:center;
  font-family:'Inter',sans-serif;
  font-size:11px;
  color: var(--ink-soft);
  letter-spacing:1px;
  margin-top: 40px;
}
footer a{ color: var(--ink-soft); }

.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip: rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}