/* =============================================================================
   Hashtag generator. Paper ground: a white writing sheet on the left, the
   results behind one hairline on the right (stacked on phones). Tags are
   checkbox chips in the shape of the shared .pill; olive marks only the ticked
   ones, which are the ones that will be copied.
   ============================================================================= */
.ht__work{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:start}
.ht__in{display:flex;flex-direction:column;gap:8px;min-width:0;padding-right:clamp(20px,2.4vw,36px)}
.ht__label{display:block}

/* ---- the post ---- */
.ht__area{
  display:block;width:100%;min-height:clamp(220px,30vh,320px);resize:vertical;padding:16px 18px;
  background:#fff;color:var(--ink);caret-color:var(--ink);
  border:1px solid rgba(10,10,10,.22);border-radius:var(--r-md);outline:none;
  font-family:'Inter Tight',system-ui,sans-serif;font-size:16px;line-height:1.6;letter-spacing:0;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.ht__area:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(204,211,118,.55)}
.ht__area:focus-visible{outline:none}
.ht__area::placeholder{color:rgba(10,10,10,.52);font-style:italic}
.ht__hint{font-size:12px;line-height:1.5;letter-spacing:0;color:var(--fg-2)}

.ht__bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 20px;margin-top:8px}
.ht__plat .pills{margin-top:8px}
.ht__go{padding:16px 26px}
.ht__status{text-align:left}
.ht__status:empty{display:none}

/* ---- results ---- */
.ht__out{
  display:flex;flex-direction:column;gap:16px;min-width:0;
  padding:0 0 0 clamp(20px,2.4vw,36px);border-left:1px solid var(--rule);
  scroll-margin-top:100px;outline:none;
  animation:htIn .45s var(--ease-out) both;
}
@keyframes htIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.ht__sum{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px}
.ht__sumText{display:flex;flex-direction:column;gap:4px;min-width:0}
.ht__count{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.ht__rule{font-size:13px;line-height:1.45;color:var(--fg-2)}
.ht__count.is-over,.ht__rule.is-over{color:#a83232}
.ht__sum .btn{padding:14px 22px}

/* What "Kopiuj hashtagi" will put on the clipboard. */
.ht__preview{
  padding:12px 16px;border-radius:var(--r-sm);background:var(--paper-2);
  font-size:15px;line-height:1.55;color:var(--ink);overflow-wrap:anywhere;
}
.ht__preview.is-empty{color:var(--fg-2);font-style:italic}

.ht__notes{display:flex;flex-direction:column;gap:8px}
.ht__notes:empty{display:none}
.ht__note{font-size:13px;line-height:1.5;color:var(--fg-2);overflow-wrap:anywhere}
.ht__empty{font-size:17px;line-height:1.4;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.ht__note--warn{color:#a83232}

/* ---- tag groups: hairline rows ---- */
.ht__groups{display:flex;flex-direction:column}
.ht__group{padding:16px 0;border-top:1px solid var(--rule)}
.ht__gname{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:12px;color:var(--fg-2)}
.ht__gnote{font-size:11px;letter-spacing:.04em;text-transform:none;color:var(--fg-3)}
.ht__chips{display:flex;flex-wrap:wrap;gap:8px}

.ht__chip{position:relative;display:inline-flex;max-width:100%;cursor:pointer}
.ht__chip input{position:absolute;inset:0;margin:0;opacity:0;pointer-events:none}
.ht__chip > span{
  display:inline-flex;align-items:center;gap:8px;min-height:40px;max-width:100%;padding:8px 16px 8px 12px;
  border:1px solid rgba(10,10,10,.2);border-radius:999px;background:#fff;color:var(--ink);
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;font-weight:400;line-height:1.3;letter-spacing:0;
  overflow-wrap:anywhere;
  transition:background .26s var(--ease),border-color .26s var(--ease),color .26s var(--ease),transform 160ms var(--ease-out);
}
/* A plus that turns into a tick, so the state never rests on colour alone. */
.ht__chip > span::before{
  content:"+";flex:none;width:12px;text-align:center;font-size:14px;line-height:1;color:var(--fg-3);
}
.ht__chip input:checked + span{background:var(--olive);border-color:var(--olive-2);font-weight:500}
.ht__chip input:checked + span::before{content:"✓";font-size:12px;color:var(--ink)}
.ht__chip input:focus-visible + span{outline:2px solid var(--ink);outline-offset:3px}
.ht__chip:active > span{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){
  .ht__chip:hover > span{border-color:var(--ink)}
  .ht__chip:hover input:checked + span{border-color:var(--ink)}
}

/* ---- own tag ---- */
.ht__add{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid var(--rule)}
.ht__add .label{display:block}
.ht__addRow{display:flex;gap:8px}
.ht__addIn{
  flex:1 1 auto;min-width:0;min-height:48px;padding:10px 16px;
  background:#fff;color:var(--ink);caret-color:var(--ink);
  border:1px solid rgba(10,10,10,.22);border-radius:999px;outline:none;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:14px;letter-spacing:0;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.ht__addIn:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(204,211,118,.55)}
.ht__addIn:focus-visible{outline:none}
.ht__addIn::placeholder{color:rgba(10,10,10,.5)}
.ht__addRow .btn{padding:12px 22px;flex:none}
.ht__addMsg{font-size:13px;line-height:1.5;color:var(--fg-2)}
.ht__addMsg:empty{display:none}

.ht__base{font-size:11px;letter-spacing:.08em;color:var(--fg-3)}

/* ---- phones and narrow windows: one column ---- */
@media (max-width:979px){
  .ht__work{grid-template-columns:1fr}
  .ht__in{padding-right:0}
  .ht__out{margin-top:32px;padding:24px 0 0;border-left:0;border-top:1px solid var(--rule)}
}
@media (max-width:560px){
  .ht__area{min-height:200px;padding:12px 16px}
  .ht__bar{flex-direction:column;align-items:stretch}
  .ht__go{justify-content:center}
  .ht__sum{align-items:stretch}
  .ht__sum .btn{flex:1 1 100%;justify-content:center}
  .ht__addIn{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .ht__out{animation:none}
  .ht__chip > span{transition:none}
}