/* =========================================================================
   Youth Mental Health Toolkit — page styles
   Built on assets/site.css. Every layout here collapses to a single column
   on small screens; nothing has a fixed pixel width.
   ========================================================================= */

.tk-shell{
  display:grid;
  grid-template-columns:minmax(0,236px) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.5rem);
  align-items:start;
  max-width:1180px;margin-inline:auto;
  padding:0 clamp(1.25rem,4vw,2.5rem) var(--s-8);
}
@media(max-width:940px){ .tk-shell{grid-template-columns:1fr;gap:var(--s-4);} }

/* --------------------------------------------------------------- contents */
.tk-toc{position:sticky;top:calc(var(--nav-h) + 1.25rem);padding-top:var(--s-6);}
.tk-toc__label{
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;padding:0 .75rem;margin:0 0 .6rem;
}
.tk-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;}
.tk-toc a{
  display:flex;gap:.7rem;align-items:baseline;
  padding:.5rem .75rem;border-left:2px solid transparent;border-radius:0 8px 8px 0;
  font-size:.86rem;font-weight:500;color:var(--ink-3);text-decoration:none;line-height:1.3;
}
.tk-toc a span{font-family:'Fraunces',Georgia,serif;font-size:.76rem;opacity:.8;min-width:1.3em;}
.tk-toc a:hover{color:var(--ink);background:var(--shell);}
.tk-toc a[aria-current="true"]{
  border-left-color:var(--sage-deep);color:var(--sage-deep);font-weight:650;
  background:var(--sage-soft);
}
.tk-toc__help{
  margin-top:var(--s-4);padding:.9rem 1rem;border-radius:var(--radius-sm);
  background:var(--clay-soft);border:1px solid var(--clay-line);
}
.tk-toc__help b{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--clay-deep);}
.tk-toc__help p{margin:.35rem 0 0;font-size:.82rem;color:var(--ink-2);}
.tk-toc__help a{display:inline;padding:0;border:none;color:var(--clay-deep);font-weight:700;}

/* on small screens the contents becomes a details disclosure */
.tk-toc-m{display:none;}
@media(max-width:940px){
  .tk-toc{display:none;}
  .tk-toc-m{
    display:block;margin:var(--s-4) 0 0;border:1px solid var(--line);border-radius:var(--radius-sm);
    background:var(--paper);overflow:hidden;
  }
  .tk-toc-m > summary{
    list-style:none;cursor:pointer;padding:.9rem 1.1rem;font-weight:650;color:var(--ink);
    display:flex;align-items:center;gap:.6rem;min-height:52px;
  }
  .tk-toc-m > summary::-webkit-details-marker{display:none;}
  .tk-toc-m > summary .ico{margin-left:auto;transition:transform .2s;}
  .tk-toc-m[open] > summary .ico{transform:rotate(180deg);}
  .tk-toc-m ol{list-style:none;margin:0;padding:0 .5rem .6rem;}
  .tk-toc-m a{
    display:flex;gap:.7rem;padding:.75rem .7rem;border-radius:8px;text-decoration:none;
    color:var(--ink-2);font-size:.95rem;min-height:48px;align-items:center;
  }
  .tk-toc-m a span{font-family:'Fraunces',Georgia,serif;color:var(--sage-deep);min-width:1.6em;}
  .tk-toc-m a:hover{background:var(--shell);}
}

/* ------------------------------------------------------------- progress */
.tk-progress{height:3px;background:var(--line-soft);position:sticky;top:var(--nav-h);z-index:50;}
.tk-progress > span{display:block;height:100%;width:0;background:var(--sage-deep);
                    border-radius:0 3px 3px 0;transition:width .1s linear;}
@media(max-width:820px){.tk-progress{top:0;}}

/* ------------------------------------------------------------- sections */
.tk-main{min-width:0;}
.tk-sec{
  padding-block:clamp(3.25rem,7vw,5.5rem);
  scroll-margin-top:calc(var(--nav-h) + 1.5rem);
}
/* The section number carries the same hairline as .railhead elsewhere, so a
   toolkit section and a homepage section announce themselves the same way. */
.tk-sec__head{margin-bottom:var(--s-5);}
.tk-sec__n{
  display:block;padding-bottom:var(--s-3);margin-bottom:var(--s-4);
  border-bottom:1px solid var(--line);
  font-family:'Fraunces',Georgia,serif;font-size:var(--t-micro);letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;
}
.tk-sec__head h2{margin:0 0 var(--s-3);}
.tk-intro{font-size:clamp(1rem,.96rem + .3vw,1.12rem);line-height:1.62;color:var(--ink-2);
          max-width:68ch;margin:0;}
.tk-hint{font-size:.84rem;color:var(--ink-3);margin:.2rem 0 1rem;}

.tk-card{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:clamp(1.15rem,2.6vw,1.75rem);box-shadow:var(--shadow-sm);
}
.tk-card > :last-child{margin-bottom:0;}
.tk-card h3{font-size:1.08rem;margin:0 0 .8rem;}
.tk-card h3.tk-h-iris{color:var(--iris-deep);}
.tk-card h3.tk-h-sage{color:var(--sage-deep);}
.tk-card h3.tk-h-clay{color:var(--clay-deep);}
.tk-stack > * + *{margin-top:clamp(.9rem,2vw,1.15rem);}

.tk-g2,.tk-g3,.tk-g4{display:grid;gap:clamp(.9rem,2vw,1.15rem);}
.tk-g2{grid-template-columns:repeat(2,minmax(0,1fr));}
.tk-g3{grid-template-columns:repeat(3,minmax(0,1fr));}
.tk-g4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media(max-width:1000px){.tk-g4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:760px){.tk-g2,.tk-g3{grid-template-columns:1fr;}}
@media(max-width:520px){.tk-g4{grid-template-columns:1fr;}}

/* bulleted lists inside cards */
.tk-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem;}
.tk-list li{display:flex;gap:.65rem;font-size:.95rem;line-height:1.5;}
.tk-list li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;
                    background:var(--sage);margin-top:.55em;}
.tk-list--iris li::before{background:var(--iris);}
.tk-list--clay li::before{background:var(--clay);}
.tk-list--plain li{display:block;}
.tk-list--plain li::before{display:none;}

/* ------------------------------------------------------------- controls */
.tk-chips{display:flex;flex-wrap:wrap;gap:.5rem;}
.tk-chip{
  font-family:inherit;font-size:.92rem;font-weight:550;line-height:1.2;
  padding:.6rem 1rem;min-height:44px;border-radius:99px;cursor:pointer;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-2);
  transition:background .15s,border-color .15s,color .15s;
}
.tk-chip:hover{border-color:var(--sage);}
.tk-chip[aria-pressed="true"]{
  border-color:var(--sage-deep);background:var(--sage-soft);color:var(--sage-deep);font-weight:650;
}
.tk-chip:focus-visible{outline:2px solid var(--iris);outline-offset:2px;}

/* the mental-health continuum: a row on wide screens, a stack on phones */
.tk-cont{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem;position:relative;}
.tk-cont::before{
  content:"";position:absolute;left:10%;right:10%;top:26px;height:3px;
  background:var(--line);z-index:0;
}
.tk-cont button{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.55rem;
  background:none;border:none;cursor:pointer;font-family:inherit;padding:0;
}
.tk-cont .dot{
  width:52px;height:52px;border-radius:50%;border:3px solid var(--paper);
  display:grid;place-items:center;font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:1.1rem;color:#2f3423;box-shadow:0 2px 8px rgba(60,50,40,.18);
  transition:transform .15s,box-shadow .15s;
}
.tk-cont .lbl{font-size:.82rem;font-weight:600;color:var(--ink-2);text-align:center;line-height:1.25;}
.tk-cont button[aria-pressed="true"] .dot{transform:scale(1.12);
  box-shadow:0 0 0 4px var(--sage-soft),0 3px 10px rgba(60,50,40,.25);}
.tk-cont button[aria-pressed="true"] .lbl{color:var(--ink);font-weight:700;}
@media(max-width:640px){
  .tk-cont{grid-template-columns:1fr;gap:.5rem;}
  .tk-cont::before{display:none;}
  .tk-cont button{flex-direction:row;gap:.85rem;width:100%;min-height:56px;
    border:1px solid var(--line);border-radius:var(--radius-sm);padding:.55rem .75rem;
    background:var(--paper);}
  .tk-cont .dot{width:40px;height:40px;font-size:1rem;border-width:2px;box-shadow:none;}
  .tk-cont .lbl{text-align:left;font-size:.95rem;}
  .tk-cont button[aria-pressed="true"]{border-color:var(--sage-deep);background:var(--sage-soft);}
  .tk-cont button[aria-pressed="true"] .dot{transform:none;box-shadow:0 0 0 3px rgba(255,255,255,.9);}
}
.tk-cont-desc{
  margin-top:var(--s-4);background:var(--iris-soft);border-radius:var(--radius-sm);
  padding:.9rem 1.1rem;font-size:.95rem;line-height:1.55;color:var(--ink-2);
}

/* 1–5 self-check scale */
.tk-scale{display:flex;flex-wrap:wrap;gap:.5rem;}
.tk-scale button{
  width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);
  font-family:'Fraunces',Georgia,serif;font-size:1.05rem;font-weight:600;color:var(--ink-2);
  cursor:pointer;transition:all .15s;
}
.tk-scale button[aria-pressed="true"]{border-color:var(--sage-deep);background:var(--sage-soft);color:var(--sage-deep);}

/* selectable option cards (fight / flight / freeze / fawn) */
.tk-opt{
  text-align:left;font-family:inherit;cursor:pointer;
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  padding:1rem 1.1rem;transition:border-color .15s,background .15s,box-shadow .15s;
}
.tk-opt:hover{border-color:var(--sage-line);}
.tk-opt[aria-pressed="true"]{border-color:var(--sage-deep);background:var(--sage-soft);
  box-shadow:0 8px 20px -14px rgba(76,86,56,.6);}
.tk-opt b{display:block;font-family:'Fraunces',Georgia,serif;font-size:1.08rem;
          color:var(--sage-deep);margin-bottom:.3rem;font-weight:600;}
.tk-opt span{display:block;font-size:.9rem;line-height:1.5;color:var(--ink-2);}

/* myth / fact reveal */
.tk-myth{
  width:100%;text-align:left;font-family:inherit;cursor:pointer;
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  padding:1.1rem 1.2rem;transition:border-color .15s,background .15s;
}
.tk-myth:hover{border-color:var(--iris-line);}
.tk-myth[aria-expanded="true"]{border-color:var(--iris);background:var(--iris-soft);}
.tk-myth__k{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
            color:var(--iris-deep);display:block;margin-bottom:.4rem;}
.tk-myth__q{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:1rem;
            line-height:1.45;color:var(--ink);display:block;}
.tk-myth__a{margin-top:.8rem;padding-top:.8rem;border-top:1px dashed var(--iris-line);}
.tk-myth__a b{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
              color:var(--sage-deep);display:block;margin-bottom:.3rem;}
.tk-myth__a span{font-size:.93rem;line-height:1.5;color:var(--ink-2);}
.tk-myth__more{margin-top:.6rem;font-size:.78rem;font-weight:650;color:var(--ink-3);
               display:inline-flex;align-items:center;gap:.3em;}

/* accordion for thinking traps */
.tk-acc{border:1px solid var(--line-soft);border-radius:var(--radius-sm);overflow:hidden;}
.tk-acc + .tk-acc{margin-top:.55rem;}
.tk-acc > summary{
  list-style:none;cursor:pointer;padding:.85rem 1rem;min-height:52px;
  display:flex;align-items:center;gap:.75rem;
  font-weight:600;font-size:.98rem;color:var(--ink);
}
.tk-acc > summary::-webkit-details-marker{display:none;}
.tk-acc > summary .ico{margin-left:auto;color:var(--ink-3);width:18px;height:18px;flex:none;}
.tk-acc[open] > summary{background:var(--sage-soft);color:var(--sage-deep);}
.tk-acc[open] > summary .ico{transform:rotate(180deg);color:var(--sage-deep);}
.tk-acc__body{padding:.85rem 1rem 1rem;font-size:.93rem;line-height:1.55;color:var(--ink-2);}

/* ------------------------------------------------------------ worksheets */
.tk-field label,.tk-field > .lbl{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.45rem;
}
.tk-field input[type="text"]{
  width:100%;border:none;border-bottom:1.5px solid var(--line);background:transparent;
  padding:.55rem .15rem;font-family:inherit;font-size:1rem;color:var(--ink);
  min-height:44px;border-radius:0;
}
.tk-field input[type="text"]:focus{outline:none;border-bottom-color:var(--sage-deep);}
.tk-field textarea{
  width:100%;min-height:96px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--page);padding:.7rem .85rem;font-family:inherit;font-size:1rem;
  color:var(--ink);line-height:1.55;resize:vertical;
}
.tk-field textarea:focus{outline:none;border-color:var(--sage-deep);background:var(--paper);}
.tk-field input::placeholder,.tk-field textarea::placeholder{color:#a9a89c;}
.tk-fields{display:grid;gap:clamp(1rem,2.4vw,1.4rem);}

/* 5-4-3-2-1 grounding rows */
.tk-ground{display:flex;flex-direction:column;gap:.85rem;}
.tk-ground__row{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;}
.tk-ground__n{
  width:42px;height:42px;flex:none;border-radius:12px;background:var(--iris-soft);
  color:var(--iris-deep);font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.05rem;
  display:grid;place-items:center;
}
.tk-ground__s{font-size:.9rem;font-weight:650;color:var(--ink-2);min-width:7.5rem;}
.tk-ground__row input{
  flex:1 1 12rem;min-width:0;border:none;border-bottom:1.5px solid var(--line);
  background:transparent;padding:.5rem .15rem;font-family:inherit;font-size:.98rem;
  color:var(--ink);min-height:44px;
}
.tk-ground__row input:focus{outline:none;border-bottom-color:var(--sage-deep);}
@media(max-width:520px){
  .tk-ground__s{min-width:0;flex:1;}
  .tk-ground__row input{flex:1 1 100%;}
}

/* window of tolerance */
.tk-wot{display:flex;flex-direction:column;gap:.5rem;}
.tk-wot div{border-radius:10px;padding:.7rem .95rem;font-size:.9rem;font-weight:600;}
.tk-wot .hi{background:#f8ecdd;border:1px solid #e8cfae;color:#9a6a2c;}
.tk-wot .ok{background:var(--sage-soft);border:1px solid var(--sage-line);color:var(--sage-deep);
            text-align:center;font-weight:700;}
.tk-wot .lo{background:#e6eaf5;border:1px solid #ccd5e9;color:#4c5f93;}

/* PERMA */
.tk-perma{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(.75rem,2vw,1.25rem);}
@media(max-width:860px){.tk-perma{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:560px){.tk-perma{grid-template-columns:repeat(2,minmax(0,1fr));}}
.tk-perma div{text-align:center;}
.tk-perma .l{
  width:52px;height:52px;border-radius:50%;background:var(--iris-soft);color:var(--iris-deep);
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.4rem;
  display:grid;place-items:center;margin:0 auto .7rem;
}
.tk-perma b{display:block;font-size:.95rem;color:var(--ink);margin-bottom:.25rem;}
.tk-perma p{font-size:.85rem;line-height:1.45;color:var(--ink-2);margin:0;max-width:none;}

/* numbered habit cards */
.tk-habit{display:flex;gap:.85rem;align-items:flex-start;}
.tk-habit .n{
  width:38px;height:38px;flex:none;border-radius:11px;background:var(--sage-soft);
  color:var(--sage-deep);font-family:'Fraunces',Georgia,serif;font-weight:600;
  display:grid;place-items:center;font-size:1rem;
}
.tk-habit b{display:block;font-size:1rem;color:var(--ink);margin-bottom:.2rem;}
.tk-habit p{margin:0;font-size:.9rem;line-height:1.5;color:var(--ink-2);max-width:none;}

/* worked example — a table on wide screens, stacked rows on phones */
.tk-table{width:100%;border-collapse:collapse;font-size:.92rem;
          border:1px solid var(--line-soft);border-radius:var(--radius-sm);overflow:hidden;}
.tk-table th{
  text-align:left;background:var(--iris-soft);color:var(--iris-deep);
  font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  padding:.7rem .85rem;
}
.tk-table td{padding:.8rem .85rem;border-top:1px solid var(--line-soft);vertical-align:top;line-height:1.5;}
@media(max-width:700px){
  .tk-table,.tk-table tbody,.tk-table tr,.tk-table td{display:block;width:100%;}
  .tk-table thead{display:none;}
  .tk-table tr{border:1px solid var(--line-soft);border-radius:var(--radius-sm);
               padding:.35rem .25rem;background:var(--paper);}
  .tk-table td{border-top:none;padding:.5rem .85rem;}
  .tk-table td::before{
    content:attr(data-th);display:block;font-size:.66rem;letter-spacing:.11em;
    text-transform:uppercase;color:var(--iris-deep);font-weight:700;margin-bottom:.2rem;
  }
}

/* quotable "words you can use" */
.tk-words{background:var(--iris-soft);border:1px solid var(--iris-line);border-radius:var(--radius-sm);
          padding:1.1rem 1.25rem;font-family:'Fraunces',Georgia,serif;font-style:italic;
          font-size:1.02rem;line-height:1.5;color:var(--ink-2);}

/* closing line */
.tk-close{text-align:center;padding-block:var(--s-6) 0;}
.tk-close p{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:clamp(1.2rem,3vw,1.6rem);
            color:var(--iris-deep);margin:0 auto;max-width:none;}

/* action bar under the cover */
.tk-actions{display:flex;flex-wrap:wrap;gap:.75rem;}

/* the cover panel */
.tk-cover{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:clamp(1.75rem,5vw,3.25rem);
  /* The text side carries a heading, a lead, a fact strip and two buttons; the
     art carries nothing. Weighted so the button row fits on one line instead of
     orphaning its last button, and so the illustration stops dominating. */
  display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr);
  gap:clamp(1.5rem,4vw,3rem);align-items:center;
}
@media(max-width:820px){.tk-cover{grid-template-columns:1fr;}}
.tk-cover .display{font-size:clamp(2.1rem,1.4rem + 3.2vw,3.5rem);margin-bottom:var(--s-3);}
/* On the cover the facts sit under a hairline, not inside the pill .meta-bar
   draws elsewhere. Overriding only border-top left the two fighting: the pill's
   99px radius and side borders survived, so a strip that wrapped to two lines
   became a tall stadium with a slash dangling off the end of the first one.
   Neutralise the pill outright, and let the slashes do the spacing rather than
   stacking a flex gap on top of their margins. */
.tk-cover__facts{
  display:flex;flex-wrap:wrap;align-items:center;gap:.2rem 0;
  border:0;border-top:1px solid var(--line);border-radius:0;background:none;
  padding:var(--s-3) 0 0;margin:var(--s-4) 0;
  font-size:.8rem;color:var(--ink-3);
}
.tk-cover__facts span{display:inline-flex;align-items:center;gap:.4em;}
.tk-cover__facts > span:not(:last-child)::after{margin:0 .45em;}
.tk-cover__facts .ico{width:15px;height:15px;color:var(--sage);}
/* Four short facts read fine as a run-on line on a phone; stacking them the way
   the boxed .meta-bar does would cost 100px of the first screen for nothing. */
@media(max-width:560px){
  .tk-cover__facts{flex-direction:row;}
  .tk-cover__facts > span:not(:last-child)::after{content:"/";}
}
.tk-cover__art{width:100%;height:auto;}
@media(max-width:820px){.tk-cover__art{max-width:300px;margin-inline:auto;}}

/* saved-state note */
/* Not a flex row: as one, the icon and the reset button became flex items that
   each claimed their own line as soon as the sentence wrapped. Inline flow keeps
   the shield on the first word and the reset link on the last. */
.tk-saved{
  display:block;font-size:.8rem;line-height:1.6;color:var(--ink-3);
}
.tk-saved .ico{width:15px;height:15px;color:var(--sage);vertical-align:-.2em;margin-right:.35em;}
/* Clearing your work is a footnote to "saved on this device", not a third
   call to action — as a peer of the two buttons above it both wrapped the row
   and gave a destructive action the weight of the primary one. */
.tk-reset{
  appearance:none;background:none;border:0;margin-left:.5em;padding:.35rem 0;
  font:inherit;font-weight:600;color:var(--ink-3);cursor:pointer;
  text-decoration:underline;text-underline-offset:.22em;
  text-decoration-color:color-mix(in srgb,var(--ink-3) 40%,transparent);
}
.tk-reset:hover{color:var(--clay-deep);text-decoration-color:currentColor;}
@media(max-width:820px){.tk-reset{padding-block:.7rem;}}