/* ============================================================
   Ensephra Atelier — shared styles for the planning layer
   (activity-library.html, workshops.html, workshop-plan.html)

   Tokens and base components are copied verbatim from
   workshop-host.html so these pages sit in the same family. Only
   what's new for the library/planning UI lives below the divider.
   ============================================================ */

:root{
  --sage:#7A9E87; --sage-light:#C8DDD0; --sage-pale:#EDF4EF; --sage-dark:#4F6E5A;
  --ink:#2B2B26; --ink-soft:#5C5C55; --warm-white:#FBFAF7; --mist:#F5F7F5;
  --border:#DDE4DE; --gold:#B8956A; --gold-pale:#FBF3E8; --gold-dark:#8C6A44;
  --serif: Georgia, 'Times New Roman', serif;
}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;background:var(--mist);color:var(--ink);}
a{color:inherit;}
header{padding:1.25rem 2rem;background:var(--warm-white);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;}
header h1{font-family:var(--serif);font-weight:400;font-size:1.3rem;margin:0;}
header h1 span{color:var(--sage);}
main{max-width:1100px;margin:0 auto;padding:2rem;}
.card{background:var(--warm-white);border:1px solid var(--border);border-radius:16px;padding:1.75rem;margin-bottom:1.5rem;}
.card h2{font-family:var(--serif);font-weight:400;font-size:1.3rem;margin:0 0 1rem;color:var(--ink);}
.card h2 .count{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;font-size:0.8rem;font-weight:600;color:var(--ink-soft);}
label{display:block;font-size:0.8rem;font-weight:600;color:var(--ink-soft);margin-bottom:0.35rem;margin-top:0.9rem;}
input[type=text],input[type=number],input[type=date],input[type=time],select,textarea{
  width:100%;padding:0.65rem 0.8rem;border:1px solid var(--border);border-radius:10px;font-size:0.95rem;
  font-family:inherit;background:#fff;color:var(--ink);}
input:focus,select:focus,textarea:focus{outline:2px solid var(--sage-light);outline-offset:1px;border-color:var(--sage);}
textarea{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:0.85rem;line-height:1.5;}
button{cursor:pointer;font-family:inherit;font-size:0.9rem;border-radius:10px;border:none;padding:0.7rem 1.3rem;font-weight:600;transition:transform .15s, opacity .15s, background .15s;}
button:active{transform:scale(0.97);}
button:focus-visible,a:focus-visible{outline:2px solid var(--sage);outline-offset:2px;}
.btn-primary{background:var(--sage);color:#fff;}
.btn-primary:hover{background:var(--sage-dark);}
.btn-ghost{background:transparent;border:1px solid var(--sage);color:var(--sage-dark);}
.btn-ghost:hover{background:var(--sage-pale);}
.btn-small{padding:0.4rem 0.8rem;font-size:0.78rem;}
.btn-danger{background:transparent;color:#b05050;border:1px solid #e3c4c4;}
button:disabled{opacity:0.45;cursor:not-allowed;}
.row{display:flex;gap:0.75rem;flex-wrap:wrap;align-items:center;}
.status-line{font-size:0.85rem;color:var(--ink-soft);margin-top:0.5rem;}
.status-line.err{color:#b05050;}
.status-line.ok{color:var(--sage-dark);}
.pill{display:inline-block;font-size:0.7rem;letter-spacing:0.06em;text-transform:uppercase;padding:0.25rem 0.7rem;border-radius:100px;font-weight:700;}
.pill-active{background:#e6f4ea;color:#2e7d4f;}
.pill-draft{background:var(--sage-pale);color:var(--sage-dark);}
.pill-archived{background:#eee;color:#888;}
.muted{color:var(--ink-soft);font-size:0.85rem;}
.hidden{display:none !important;}

.top-nav{display:flex;gap:1.25rem;font-size:0.85rem;font-weight:600;flex-wrap:wrap;}
.top-nav a{color:var(--ink-soft);text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent;}
.top-nav a:hover{color:var(--sage-dark);}
.top-nav a.current{color:var(--sage-dark);border-color:var(--sage);}

/* ------------------------------------------------------------
   New for the library / planning layer
   ------------------------------------------------------------ */

/* participation colour language: sage = individual mechanic,
   gold = team mechanic — same two families already in the palette,
   used consistently everywhere a facilitator needs to tell the two
   apart at a glance. */
.type-badge{display:inline-flex;align-items:center;gap:0.35rem;font-size:0.72rem;font-weight:700;
  padding:0.3rem 0.7rem;border-radius:100px;white-space:nowrap;}
.type-badge.individual{background:var(--sage-pale);color:var(--sage-dark);}
.type-badge.team{background:var(--gold-pale);color:var(--gold-dark);}
.type-badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}

.toolbar{display:flex;gap:0.75rem;flex-wrap:wrap;align-items:center;margin-bottom:1.25rem;}
.search-input{flex:1;min-width:200px;}
.chip-row{display:flex;gap:0.4rem;flex-wrap:wrap;}
.chip{font-size:0.78rem;font-weight:600;padding:0.4rem 0.85rem;border-radius:100px;border:1px solid var(--border);
  background:#fff;color:var(--ink-soft);cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
.chip:hover{border-color:var(--sage-light);}
.chip.active{background:var(--sage-dark);border-color:var(--sage-dark);color:#fff;}

.activity-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1rem;}
.activity-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.1rem 1.2rem;
  cursor:pointer;transition:border-color .15s,transform .15s;display:flex;flex-direction:column;gap:0.55rem;}
.activity-card:hover{border-color:var(--sage-light);transform:translateY(-2px);}
.activity-card .top-row{display:flex;justify-content:space-between;align-items:flex-start;gap:0.5rem;}
.activity-card .a-name{font-family:var(--serif);font-size:1.08rem;color:var(--ink);line-height:1.3;}
.activity-card .a-desc{font-size:0.82rem;color:var(--ink-soft);line-height:1.5;flex:1;}
.activity-card .a-meta{display:flex;flex-wrap:wrap;gap:0.4rem;align-items:center;font-size:0.75rem;color:var(--ink-soft);}
.activity-card .a-meta .sep{opacity:0.5;}
.activity-card .a-actions{display:flex;gap:0.4rem;margin-top:0.3rem;}
.empty-state{padding:2.5rem 1rem;text-align:center;color:var(--ink-soft);}
.empty-state .big{font-family:var(--serif);font-size:1.15rem;color:var(--ink);margin-bottom:0.4rem;}

/* type-picker (7 activity mechanics) shown when starting a new library item */
.type-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0.75rem;}
.type-pick{border:1.5px solid var(--border);border-radius:14px;padding:1rem 1.1rem;background:#fff;cursor:pointer;
  text-align:left;transition:border-color .15s,background .15s;}
.type-pick:hover{border-color:var(--sage-light);background:var(--sage-pale);}
.type-pick .tp-name{font-family:var(--serif);font-size:1rem;color:var(--ink);margin-bottom:0.25rem;}
.type-pick .tp-desc{font-size:0.78rem;color:var(--ink-soft);line-height:1.4;}

/* repeaters — rounds / items / passages / tasks / stations / questions */
.rep-item{border:1px solid var(--border);border-radius:12px;padding:1rem 1.1rem;margin-bottom:0.75rem;background:var(--mist);position:relative;}
.rep-item .rep-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.3rem;}
.rep-item .rep-num{font-size:0.72rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--sage-dark);}
.choice-row{display:flex;gap:0.5rem;align-items:center;margin-top:0.5rem;}
.choice-row input[type=text]{flex:1;}
.choice-key{width:1.6rem;text-align:center;font-weight:700;color:var(--sage-dark);font-family:var(--serif);flex-shrink:0;}
.correct-toggle{display:flex;align-items:center;gap:0.3rem;font-size:0.78rem;font-weight:400;color:var(--ink-soft);white-space:nowrap;margin:0;flex-shrink:0;}
.correct-toggle input{width:auto;}

/* draggable session-activity list */
.sel-list{display:flex;flex-direction:column;gap:0.5rem;margin-top:0.75rem;}
.sel-item{display:flex;align-items:center;gap:0.7rem;background:#fff;border:1px solid var(--border);border-radius:10px;
  padding:0.6rem 0.8rem;}
.sel-item .drag-handle{cursor:grab;color:var(--ink-soft);opacity:0.5;font-size:1rem;user-select:none;padding:0 0.2rem;}
.sel-item.dragging{opacity:0.4;}
.sel-item .sel-name{flex:1;font-size:0.9rem;font-weight:600;}
.sel-item .order-btns{display:flex;flex-direction:column;gap:1px;}
.sel-item .order-btns button{padding:0 0.35rem;font-size:0.65rem;line-height:1.4;border-radius:5px;background:var(--mist);color:var(--ink-soft);}
.sel-item .order-btns button:hover{background:var(--sage-pale);color:var(--sage-dark);}

.mode-banner{display:flex;align-items:center;gap:0.6rem;padding:0.85rem 1.1rem;border-radius:12px;font-size:0.88rem;font-weight:600;margin:0.9rem 0;}
.mode-banner.individual{background:var(--sage-pale);color:var(--sage-dark);}
.mode-banner.team{background:var(--gold-pale);color:var(--gold-dark);}
.mode-banner.mixed{background:linear-gradient(90deg,var(--sage-pale),var(--gold-pale));color:var(--ink);}
.mode-banner.empty{background:var(--mist);color:var(--ink-soft);}

.mode-pill{display:inline-block;font-size:0.72rem;font-weight:700;padding:0.3rem 0.75rem;border-radius:100px;white-space:nowrap;}
.mode-pill.individual{background:var(--sage-pale);color:var(--sage-dark);}
.mode-pill.team{background:var(--gold-pale);color:var(--gold-dark);}
.mode-pill.mixed{background:linear-gradient(90deg,var(--sage-pale),var(--gold-pale));color:var(--ink);}
.mode-pill.empty{background:var(--mist);color:var(--ink-soft);}

.workshop-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.25rem 1.4rem;margin-bottom:1rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;cursor:pointer;transition:border-color .15s;}
.workshop-card:hover{border-color:var(--sage-light);}
.workshop-card .w-name{font-family:var(--serif);font-size:1.15rem;color:var(--ink);}
.workshop-card .w-meta{font-size:0.8rem;color:var(--ink-soft);margin-top:0.25rem;}

.session-row{border:1px solid var(--border);border-radius:12px;padding:0.9rem 1.1rem;margin-bottom:0.6rem;background:#fff;}
.session-row .s-top{display:flex;justify-content:space-between;align-items:center;gap:0.75rem;flex-wrap:wrap;}
.session-row .s-title{font-weight:700;font-size:0.95rem;}
.session-row .s-links{display:flex;gap:0.5rem;flex-wrap:wrap;}
.session-row .s-badges{display:flex;gap:0.4rem;margin-top:0.4rem;flex-wrap:wrap;}

@media (max-width:640px){
  main{padding:1.25rem;}
  header{padding:1rem 1.25rem;}
  .activity-grid{grid-template-columns:1fr;}
}