/* PATTERN — nine generic archive categories the reader can tick against their
   own employer. The only number produced is the count of ticked categories. */

.pat{display:grid;gap:clamp(1rem,2.3vw,1.45rem)}

.pat__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.pat__head-t{display:grid;gap:.32rem}
.pat__hint{font-size:.84rem;line-height:1.5;color:var(--text-3);max-width:46rem}

/* ------------------------------------------------------------- the grid */
.pat__grid{display:grid;gap:.5rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.pat__grid>li{display:grid}

.pat__t{
  display:grid;width:100%;height:100%;text-align:left;gap:.12rem .7rem;padding:.78rem .85rem;min-height:4.1rem;
  grid-template-columns:1.9rem minmax(0,1fr) 1.15rem;
  grid-template-areas:"ico name mark" "ico lot mark";
  align-items:center;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);
  transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
}
.pat__t:hover{border-color:var(--line-2);background:var(--surface-3)}

.pat__ico{grid-area:ico;align-self:center;display:grid;place-items:center;width:1.9rem;height:1.9rem;color:var(--text-3);
  transition:color var(--dur-1) var(--ease)}
.pat__svg{width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}

.pat__n{grid-area:name;font-size:.88rem;line-height:1.3;color:var(--text-2);transition:color var(--dur-1) var(--ease)}
.pat__lot{
  grid-area:lot;font-size:.57rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-4);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.pat__mark{
  grid-area:mark;align-self:center;width:1.15rem;height:1.15rem;display:grid;place-items:center;
  border:1px solid var(--line-2);border-radius:2px;background:var(--bg);
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}
.pat__tick{
  width:.85rem;height:.85rem;fill:none;stroke:var(--void);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;transform:scale(.6);transition:opacity var(--dur-1) var(--ease),transform var(--dur-1) var(--ease);
}

.pat__t.is-on{border-color:var(--yellow);background:var(--surface-3)}
.pat__t.is-on .pat__ico{color:var(--yellow)}
.pat__t.is-on .pat__n{color:var(--text)}
.pat__t.is-on .pat__mark{background:var(--yellow);border-color:var(--yellow)}
.pat__t.is-on .pat__tick{opacity:1;transform:none}
.pat__t.is-on:hover{border-color:var(--yellow-2)}

/* -------------------------------------------------- readout + conditions */
.pat__foot{
  display:grid;gap:clamp(1rem,2.2vw,1.5rem);grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;border-top:1px solid var(--line);padding-top:clamp(1rem,2.2vw,1.35rem);
}

.pat__read{
  display:grid;gap:.55rem;align-content:start;min-height:7.4rem;padding:1rem 1.1rem;
  border:1px solid var(--line-2);border-radius:var(--radius);background:var(--surface-2);
}
/* the empty state is an invitation, not a failure */
.pat__read.is-empty{background:transparent;border-style:dashed;align-content:center;text-align:center}
.pat__read.is-empty .empty__d{margin-inline:auto}
.pat__read.is-full{border-color:var(--yellow)}

.pat__count{display:flex;align-items:baseline;gap:.5rem}
.pat__count-n{font-size:clamp(2rem,4.6vw,2.8rem);line-height:1;letter-spacing:-.045em;color:var(--yellow)}
.pat__count-of{font-size:1rem;color:var(--text-4)}
.pat__count-l{font-size:.86rem;line-height:1.5;color:var(--text-2)}

.pat__cond{display:grid;gap:.7rem;align-content:start}
.pat__cond-r{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;align-items:start}
.pat__cond-n{
  font-size:.58rem;font-weight:600;letter-spacing:.14em;margin-top:.15rem;
  border:1px solid var(--line);border-radius:2px;padding:.16rem .34rem;color:var(--text-4);
}
.pat__cond-r.is-const .pat__cond-n{color:var(--text-2);border-color:var(--line-2)}
.pat__cond-r.is-var .pat__cond-n{color:var(--red);border-color:var(--red-deep);border-style:dashed}
.pat__cond-b{display:grid;gap:.2rem;min-width:0}
.pat__cond-t{font-size:.88rem;font-weight:500;color:var(--text)}
.pat__cond-d{font-size:.82rem;line-height:1.5;color:var(--text-3)}

/* ----------------------------- narrow ----------------------------- */
@media (max-width:900px){
  .pat__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pat__foot{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .pat__grid{grid-template-columns:minmax(0,1fr)}
  .pat__head{gap:.8rem}
  .pat__t{min-height:3.6rem;padding:.7rem .8rem}
}
@media (max-width:420px){
  .pat__n{font-size:.86rem}
  .pat__lot{font-size:.55rem}
  .pat__count-l{font-size:.84rem}
}