:root{
  --paper: #EFE7D6;
  --paper-dark: #E4D9C1;
  --card: #FBF7EE;
  --ink: #24333B;
  --ink-soft: #5B6B70;
  --line: #C9BC9E;
  --green: #3D6B4F;
  --green-deep: #2A4B37;
  --red: #A13D2E;
  --red-deep: #7C2E22;
  --brass: #B8862E;
  --brass-deep: #8E6720;
  --shadow: 0 1px 0 rgba(36,51,59,0.06), 0 8px 24px -12px rgba(36,51,59,0.35);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,255,255,0.35), transparent 60%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.015) 0px, rgba(0,0,0,0.015) 1px, transparent 1px, transparent 3px),
    var(--paper);
  color:var(--ink);
  font-family:'Source Sans 3', sans-serif;
  min-height:100vh;
  padding: 40px 20px 80px;
}
.wrap{max-width:880px;margin:0 auto;}

/* ---- Header ---- */
header{margin-bottom: 34px;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--green-deep);
  display:flex; align-items:center; gap:10px;
  margin-bottom:10px;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px; background:var(--green-deep); opacity:.6;
}
h1{
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size: clamp(32px, 5vw, 48px);
  line-height:1.02;
  margin:0 0 10px;
  color:var(--ink);
  letter-spacing:-0.01em;
}
h1 em{
  font-style:italic;
  font-weight:500;
  color:var(--green-deep);
}
.sub{
  font-size:16px;
  color:var(--ink-soft);
  max-width:56ch;
  line-height:1.5;
}

/* ---- Search ---- */
.search-wrap{
  margin-top:28px;
  position:relative;
}
.search-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  position:absolute;
  top:-9px;
  left:22px;
  background:var(--paper);
  padding:0 8px;
}
#search{
  width:100%;
  font-family:'Fraunces', serif;
  font-size:22px;
  font-weight:500;
  padding:20px 22px;
  border:1.5px solid var(--ink);
  border-radius:3px;
  background:var(--card);
  color:var(--ink);
  outline:none;
  box-shadow: var(--shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}
#search::placeholder{color:#9AA6A2; font-weight:400; font-style:italic;}
#search:focus{
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(36,51,59,0.06), 0 14px 28px -12px rgba(36,51,59,0.45);
}
.count-tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--ink-soft);
  margin-top:8px;
  padding-left:4px;
}

/* ---- Results list ---- */
#results{
  margin-top: 18px;
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--card);
  max-height: 340px;
  overflow-y:auto;
  display:none;
}
#results.show{display:block;}
.result-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:12px 18px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  transition: background .12s ease;
}
.result-row:last-child{border-bottom:none;}
.result-row:hover, .result-row.active{background: var(--paper-dark);}
.result-name{font-size:15px; font-weight:600;}
.result-code{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink-soft);}
.result-dot{
  width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-right:10px; display:inline-block;
}
.dot-obert{background:var(--green);}
.dot-tancat{background:var(--red);}
.dot-restringit{background:var(--brass);}
.dot-no_actiu{background:#8a8a8a;}
.result-left{display:flex; align-items:center; min-width:0;}
.result-left .result-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.no-results{padding:22px 18px; color:var(--ink-soft); font-style:italic; font-family:'Fraunces',serif;}

/* ---- Detail card ---- */
#detail{margin-top:30px;}
.card{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow);
  padding: 30px 30px 26px;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:6px;
  background: var(--stripe, var(--green));
}
.card-top{
  display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap;
}
.card-title{
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:26px;
  line-height:1.15;
  max-width: 60%;
}
.card-code{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  margin-top:10px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--ink-soft);
}
.card-code b{
  font-size:20px;
  font-weight:700;
  letter-spacing:0.03em;
  color:var(--green-deep);
  background: var(--paper-dark);
  border:1px solid var(--line);
  border-radius:3px;
  padding:3px 10px;
}

/* Stamp */
.stamp{
  font-family:'IBM Plex Mono', monospace;
  font-weight:700;
  font-size:15px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  border:3px solid var(--stamp-color, var(--green));
  color:var(--stamp-color, var(--green));
  padding:8px 16px;
  border-radius:5px;
  transform: rotate(-4deg);
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  animation: stampIn .28s cubic-bezier(.2,1.4,.4,1);
  background: rgba(255,255,255,0.4);
}
@keyframes stampIn{
  0%{ transform: rotate(-4deg) scale(2.4); opacity:0; }
  60%{ opacity:1; }
  100%{ transform: rotate(-4deg) scale(1); opacity:1; }
}
.stamp-dot{width:8px;height:8px;border-radius:50%;background:var(--stamp-color, var(--green));}

.card-meta{
  margin-top:22px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap:18px 26px;
  padding-top:20px;
  border-top:1px dashed var(--line);
}
.meta-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:5px;
}
.meta-value{font-size:15px; font-weight:600;}
.meta-value.mono{font-family:'IBM Plex Mono', monospace; font-weight:500;}

.notice{
  margin-top:20px;
  padding:14px 16px;
  border-radius:3px;
  font-size:14px;
  line-height:1.5;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.notice.closed{background:#F6E5E1; color:var(--red-deep); border:1px solid #E2BDB4;}
.notice.restricted{background:#F5EAD2; color:var(--brass-deep); border:1px solid #E4CE9C;}
.notice.inactive{background:#ECECEA; color:#5b5b58; border:1px solid #d6d6d2;}
.notice.upcoming{background:#E9EEF0; color:#3A5A63; border:1px solid #C7D6DA; margin-top:10px;}
.notice-icon{font-size:16px; line-height:1;}

/* ---- Web link block ---- */
.horaris-block{
  margin-top:20px;
  padding-top:20px;
  border-top:1px dashed var(--line);
}
.web-link{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  background:var(--paper-dark);
  border:1px solid var(--line);
  border-radius:4px;
  text-decoration:none;
  transition: background .15s ease, transform .15s ease;
}
.web-link:hover{
  background: var(--card);
  transform: translateX(2px);
}
.web-link-icon{font-size:18px; flex-shrink:0;}
.web-link-text{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0;}
.web-link-title{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:15px;
  color:var(--green-deep);
}
.web-link-sub{
  font-size:12.5px;
  color:var(--ink-soft);
}
.web-link-arrow{
  font-family:'IBM Plex Mono', monospace;
  color:var(--green-deep);
  font-size:16px;
  flex-shrink:0;
}

/* ---- Empty state ---- */
.empty-state{
  margin-top:30px;
  text-align:center;
  padding:50px 20px;
  border:1px dashed var(--line);
  border-radius:4px;
  color:var(--ink-soft);
}
.empty-state .glyph{
  font-family:'Fraunces', serif;
  font-size:40px;
  color:var(--line);
  margin-bottom:8px;
}
.empty-state p{font-size:14px; max-width:38ch; margin:6px auto 0;}

/* ---- Legend ---- */
.legend{
  display:flex; flex-wrap:wrap; gap:18px;
  margin-top:38px;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--ink-soft);
}
.legend span{display:inline-flex; align-items:center; gap:7px;}
.legend .result-dot{margin-right:0;}

footer{
  margin-top:50px;
  font-size:12px;
  color:var(--ink-soft);
  text-align:center;
  font-family:'IBM Plex Mono', monospace;
  line-height:2;
}
footer a{color:var(--green-deep);}

@media (max-width:560px){
  .card-title{max-width:100%;}
  body{padding:24px 14px 60px;}
}