/* take-in.css — "How you take things in" (take-in.js): the page-wide helpers each choice adds, and the picker
   on /how-you-take-things-in.html. Dark mode needs nothing here: site.css turns the whole page around softly. */

/* ---------- the small lines at the top of a page (Carry on where you were, reassurance, reading time). Their classes never share a name with the html ti-<choice> classes. ---------- */
.ti-top{ display:grid; gap:.5rem; margin:0 0 1.1rem !important; padding:0 !important; background:none !important; box-shadow:none !important; border:0 !important; max-width:none !important; }
.ti-top > *{ margin:0 !important; }
.ti-top :is(.ti-back, .ti-calm, .ti-time){ font:400 .97rem/1.5 "Lora", Georgia, serif; padding:.55rem .9rem !important; border-radius:14px; background:#F2F6FA !important; border:1px solid #C6D6E6; color:var(--ink, #2B2620); max-width:none !important; box-shadow:none !important; }
.ti-top .ti-back a{ font-weight:600; }
.ti-top .ti-back small{ color:var(--ink-soft, #5A5346); }
.ti-top .ti-calm{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .8rem; background:#F1F7F2 !important; border-color:#BCD8C3; }
.ti-top .ti-calm > span{ flex:1 1 16rem; }
.ti-exit{ font:600 .9rem/1.2 "Lora", Georgia, serif; min-height:44px; padding:.4rem 1rem; border-radius:999px; border:1.5px solid #96412B; background:#FFFDF7; color:#7A2F1C; cursor:pointer; }
.ti-exit:focus-visible{ outline:3px solid var(--focus, #2B5B8C); outline-offset:2px; }
.ti-time p{ margin:0 !important; padding:0 !important; background:none !important; box-shadow:none !important; max-width:none !important; }
.ti-time details{ margin:.35rem 0 0; }
.ti-time summary{ cursor:pointer; font-weight:600; min-height:32px; }
.ti-time ol{ margin:.35rem 0 .1rem !important; padding-left:1.4rem !important; background:none !important; box-shadow:none !important; }
.ti-time li{ margin:.15rem 0 !important; }

/* ---------- Plain and literal: no jokey helper lines ---------- */
html.ti-literal :is(.tol-cheer, .tpv, .tpv-bub, .tol-fbs-wrap){ display:none !important; }

/* ---------- No surprises: nothing pops in or up ---------- */
html.ti-nosurprise :is(.tpv, .tpv-bub, .tr-toast, .tr-card, .tol-join-pop, .tol-invite, .tol-offer, .tol-puddles-hi, .tol-cheer){ display:none !important; }

/* ---------- Fewer extras: the main text stands alone ---------- */
html.ti-fewer main :is(.tol-read-host, .tol-fbs-wrap, .tol-fp-note, .lp-trail, .lp-card, .tol-pillars, .tol-tip, .tol-book-audio, .tol-mp, .tol-pud-card, .tol-cheer, .tol-quiet-extras){ display:none !important; }
html.ti-fewer :is(.tpv, .tpv-bub){ display:none !important; }

/* ---------- No timers or countdowns ---------- */
/* the Quick checks pause clock, the calm visualizer's clock, the game breaks' "About N seconds", the Breathe progress bar */
html.ti-notimer :is(#pause-clock, .pause-clock, .cv-clock, #pp-wd-left, .tol-breathe .br-progress){ display:none !important; }
.ti-notimer-note{ display:none; }
html.ti-notimer #pause-clock:not([hidden]) + .ti-notimer-note{ display:block; font-size:1.05rem; margin:.3rem 0 .5rem; }

/* ---------- Reassurance: no counts of what's done or not done ---------- */
html.ti-reassure .tol-mine{ display:none !important; }

/* ---------- Listen instead of read: the Listen buttons are the first thing you see ---------- */
html.ti-listen .tol-listen .tol-listen-go{ min-height:56px !important; padding:.55rem 1.4rem !important; font-size:1.12rem !important; box-shadow:0 0 0 4px #D6E4F1; }
html.ti-listen .tol-listen-mini{ min-height:44px; font-size:.98rem; padding:.35rem .95rem; border-width:2px; }
html.ti-listen .tol-listen-go svg{ width:24px; height:24px; }

/* ---------- Easier-to-read text: a clear font the device already has (no download), roomy, left-aligned, upright ---------- */
html.ti-readable{ --ti-sans:Verdana, Tahoma, "Segoe UI", "Trebuchet MS", Arial, sans-serif; }
html.ti-readable:not(.tol-font-easy) body, html.ti-readable:not(.tol-font-easy) body :not(svg):not(svg *):not(code):not(pre):not(kbd):not(.tol-keep-font){ font-family:var(--ti-sans) !important; }
html.ti-readable main :is(p, li, dd, blockquote, h1, h2, h3, h4, figcaption){ text-align:left !important; hyphens:none !important; }
html.ti-readable main p{ max-width:62ch; }
html.ti-readable main :is(em, i, cite){ font-style:normal !important; font-weight:600; }

/* ---------- Bigger buttons ---------- */
html.ti-targets main :is(button:not(.tol-listen-mini), select, summary, input[type=text], input[type=email], input[type=search], input[type=number], textarea){ min-height:48px !important; }
html.ti-targets main input:is([type=checkbox], [type=radio]){ width:1.45rem; height:1.45rem; }
html.ti-targets main :is(ul, ol) > li > a:only-child{ display:inline-block; padding:.35rem 0; min-height:44px; box-sizing:border-box; }
html.ti-targets .tol-bar button{ min-height:48px; }

/* ---------- One thing at a time ---------- */
.read ol.ideas.ti-one, ol.ideas.ti-one{ grid-template-columns:1fr !important; }
ol.ideas.ti-one > li.ti-one-off{ display:none !important; }
ol.ideas.ti-one > li:last-child:nth-child(odd){ grid-column:auto !important; }
html.ti-printing ol.ideas.ti-one > li.ti-one-off{ display:flex !important; }
@media print{ ol.ideas.ti-one > li.ti-one-off{ display:flex !important; } .ti-one-nav, .ti-one-top, .ti-top, .ti-pic{ display:none !important; } }
.ti-one-top, .ti-one-nav{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; margin:1.2rem 0 -.6rem !important; padding:0 !important; background:none !important; box-shadow:none !important; border:0 !important; max-width:none !important; font:600 .95rem/1.3 "Lora", Georgia, serif; }
.ti-one-nav{ justify-content:space-between; margin:-1rem 0 2rem !important; }
.ti-one-nav[hidden]{ display:none !important; }
.ti-one-count{ color:var(--ink-soft, #5A5346); }
.ti-one-top button, .ti-one-nav button{ font:600 .98rem/1.2 "Lora", Georgia, serif; min-height:48px; padding:.5rem 1.25rem; border-radius:999px; border:1.5px solid #2F5F8A; background:#FFFDF7; color:#2F5F8A; cursor:pointer; }
.ti-one-top button{ min-height:44px; padding:.35rem 1rem; border-color:var(--line, #D9CBA3); color:var(--ink, #2B2620); }
.ti-one-nav .ti-one-next:not(:disabled){ background:#2F5F8A; color:#fff; }
.ti-one-nav button:disabled{ opacity:.5; cursor:default; }
.ti-one-top button:focus-visible, .ti-one-nav button:focus-visible{ outline:3px solid var(--focus, #2B5B8C); outline-offset:2px; }

/* ---------- Tick off steps ---------- */
.ti-tick{ width:1.35rem; height:1.35rem; margin:0 .55rem 0 0; vertical-align:-.25rem; accent-color:#3E6B4C; cursor:pointer; flex:none; }
ol.ti-ticked > li.ti-done{ color:var(--ink-soft, #5A5346); }

/* ---------- Pictures and summaries ---------- */
.ti-pic{ margin:-.4rem 0 1.3rem !important; padding:0 !important; background:none !important; box-shadow:none !important; border:0 !important; max-width:none !important; }
.ti-pic-go{ font:600 .95rem/1.2 "Lora", Georgia, serif; min-height:44px; padding:.4rem 1.05rem; border-radius:999px; border:1.5px solid #A8792F; background:#FFF8E8; color:#6B4A16; cursor:pointer; }
.ti-pic-go:focus-visible{ outline:3px solid var(--focus, #2B5B8C); outline-offset:2px; }
.ti-pic-host{ margin-top:.7rem; }
.ti-pic-host[hidden]{ display:none !important; }
.ti-pic-wait{ font-style:italic; color:var(--ink-soft, #5A5346); }
.ti-piccard{ margin:0; padding:1.1rem 1.2rem 1rem; border-radius:22px; background:linear-gradient(160deg, #FFF8EE, #F2F6FA); border:1.5px solid #D9CBA3; max-width:40rem; }
.ti-piccard figcaption{ font:600 1.25rem/1.3 "Fraunces", Georgia, serif; margin:0 0 .6rem; }
.ti-piccard figcaption span{ display:block; font:500 .72rem/1 "IBM Plex Mono", monospace; letter-spacing:.12em; text-transform:uppercase; color:#8A6D3F; margin-bottom:.35rem; }
.ti-piccard ol{ list-style:none; counter-reset:ti; margin:0 !important; padding:0 !important; display:grid; gap:.55rem; }
.ti-piccard li{ counter-increment:ti; display:grid; grid-template-columns:2.4rem 1fr; gap:.7rem; align-items:center; margin:0 !important; padding:.6rem .8rem; border-radius:16px; background:#FFFDF7; border:1px solid #E6D9B8; font-size:1.02rem; line-height:1.45; max-width:none !important; }
.ti-piccard li::before{ content:counter(ti); display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50%; background:#2F5F8A; color:#fff; font:600 1.1rem/1 "Fraunces", Georgia, serif; }

/* ---------- Simpler English: the tip on the Ask page ---------- */
.ti-hint{ margin:0 0 .9rem !important; padding:.55rem .9rem !important; border-radius:14px; background:#F2F6FA !important; border:1px solid #C6D6E6; font-size:.97rem; box-shadow:none !important; max-width:none !important; }

/* =====================================================================
   The picker page (/how-you-take-things-in.html)
   ===================================================================== */
.ti-pick h2{ scroll-margin-top:5rem; }
.ti-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap:.7rem; margin:.8rem 0 1rem !important; padding:0 !important; list-style:none; max-width:none !important; background:none !important; box-shadow:none !important; border:0 !important; }
.ti-grid > *{ margin:0 !important; max-width:none !important; }
.ti-type{ border:1.5px solid var(--line, #D9CBA3); border-radius:18px; background:#FFFDF7; overflow:hidden; }
.ti-type.is-on{ border-color:#2F5F8A; box-shadow:0 0 0 2px #2F5F8A inset; }
.ti-type-btn{ display:flex; align-items:center; gap:.7rem; width:100%; min-height:60px; padding:.7rem 1rem; text-align:left; font:600 1.05rem/1.3 "Lora", Georgia, serif; color:var(--ink, #2B2620); background:none; border:0; cursor:pointer; }
.ti-type-btn:focus-visible, .ti-opt:focus-within{ outline:3px solid var(--focus, #2B5B8C); outline-offset:-3px; }
.ti-box{ flex:none; display:grid; place-items:center; width:1.6rem; height:1.6rem; border-radius:8px; border:2px solid #8A7A5A; background:#fff; }
.ti-type-btn[aria-pressed="true"] .ti-box{ background:#2F5F8A; border-color:#2F5F8A; }
.ti-type-btn[aria-pressed="true"] .ti-box::after{ content:""; width:.45rem; height:.85rem; border:solid #fff; border-width:0 3px 3px 0; transform:translateY(-2px) rotate(45deg); }
.ti-type-on{ padding:.1rem 1rem .8rem; border-top:1px dashed var(--line, #D9CBA3); }
.ti-type-on[hidden]{ display:none !important; }
.ti-type-on p{ margin:.5rem 0 .3rem !important; font-size:.92rem; color:var(--ink-soft, #5A5346); max-width:none !important; padding:0 !important; background:none !important; box-shadow:none !important; }
.ti-type-on ul{ list-style:none; margin:0 !important; padding:0 !important; display:grid; gap:.15rem; background:none !important; box-shadow:none !important; }
.ti-type-on li{ margin:0 !important; max-width:none !important; }
.ti-type-on label{ display:flex; align-items:center; gap:.55rem; min-height:44px; font-size:.97rem; cursor:pointer; }
.ti-type-on input, .ti-opt input{ width:1.35rem; height:1.35rem; flex:none; accent-color:#2F5F8A; margin:0; }
.ti-opt{ display:flex; gap:.75rem; align-items:flex-start; min-height:60px; padding:.75rem 1rem; border:1.5px solid var(--line, #D9CBA3); border-radius:18px; background:#FFFDF7; cursor:pointer; box-sizing:border-box; }
.ti-opt:has(input:checked){ border-color:#2F5F8A; box-shadow:0 0 0 2px #2F5F8A inset; }
.ti-opt input{ margin-top:.15rem; }
.ti-opt strong{ display:block; font:600 1.05rem/1.3 "Lora", Georgia, serif; }
.ti-opt small{ display:block; margin-top:.2rem; font-size:.9rem; line-height:1.45; color:var(--ink-soft, #5A5346); }
.ti-more{ margin:.4rem 0 1.4rem; }
.ti-more > summary{ cursor:pointer; font:600 1.02rem/1.3 "Lora", Georgia, serif; min-height:44px; display:flex; align-items:center; }
.ti-changes{ margin:.6rem 0 1.2rem !important; padding:.9rem 1.1rem !important; border-radius:18px; background:#F2F6FA !important; border:1px solid #C6D6E6; max-width:none !important; box-shadow:none !important; }
.ti-changes > p{ margin:0 0 .4rem !important; padding:0 !important; background:none !important; box-shadow:none !important; max-width:none !important; }
.ti-changes ul{ margin:.2rem 0 .3rem !important; padding-left:1.2rem !important; background:none !important; box-shadow:none !important; }
.ti-changes li{ margin:.3rem 0 !important; max-width:none !important; }
.ti-changes .ti-from{ color:var(--ink-soft, #5A5346); font-size:.9rem; }
.ti-actions{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:1rem 0 .5rem !important; padding:0 !important; background:none !important; box-shadow:none !important; max-width:none !important; }
.ti-actions button{ font:600 1.02rem/1.2 "Lora", Georgia, serif; min-height:52px; padding:.55rem 1.4rem; border-radius:999px; cursor:pointer; border:1.5px solid #2F5F8A; background:#FFFDF7; color:#2F5F8A; }
.ti-actions .ti-save{ background:#2F5F8A; color:#fff; }
.ti-actions button:focus-visible{ outline:3px solid var(--focus, #2B5B8C); outline-offset:2px; }
.ti-msg{ min-height:1.5em; font-weight:600; color:#3E6B4C; margin:.2rem 0 1rem !important; padding:0 !important; background:none !important; box-shadow:none !important; }
.ti-msg:empty{ min-height:0; margin:0 !important; }
.ti-links{ list-style:none; padding:0 !important; margin:.75rem 0 1.5rem !important; display:grid; gap:.5rem; background:none !important; box-shadow:none !important; }
.ti-links li{ margin:0; max-width:none !important; }
.ti-links a{ display:block; min-height:44px; padding:.7rem 1rem; background:var(--paper, #F5EFDE); border:1px solid var(--line, #D9CBA3); border-radius:12px; text-decoration:none; }
.ti-links a strong{ font-family:"Fraunces", Georgia, serif; text-decoration:underline; text-underline-offset:.15em; }
.ti-links a span{ display:block; color:var(--ink-soft, #5A5346); font-size:.95rem; margin-top:.15rem; }

/* ---------- the sample that changes as you pick ---------- */
.ti-prev{ position:relative; margin:.6rem 0 1.2rem !important; padding:1rem 1.15rem 1.1rem !important; border-radius:20px; background:#FFFDF7 !important; border:1.5px dashed #B9A8D6; max-width:none !important; box-shadow:none !important; overflow:hidden; transition:font-size .2s ease; }
.ti-prev *{ max-width:none !important; }
.ti-prev [hidden]{ display:none !important; }
.ti-prev p, .ti-prev ul, .ti-prev ol{ margin:.45rem 0 !important; padding-top:0 !important; padding-bottom:0 !important; background:none !important; box-shadow:none !important; }
.ti-prev .ti-s-k{ font:500 .72rem/1 "IBM Plex Mono", monospace; letter-spacing:.12em; text-transform:uppercase; color:#7A5FA8; margin:0 0 .3rem !important; }
.ti-prev h3{ margin:.1rem 0 .4rem !important; font:600 1.2rem/1.3 "Fraunces", Georgia, serif; }
.ti-prev .ti-s-line{ padding:.4rem .7rem !important; border-radius:12px; background:#F2F6FA !important; border:1px solid #C6D6E6; font-size:.93em; }
.ti-prev .ti-s-calm{ background:#F1F7F2 !important; border-color:#BCD8C3; }
.ti-prev .ti-s-short{ padding:.5rem .8rem !important; border-radius:14px; background:#FFF8E8 !important; border:1.5px solid #E6CD92; }
.ti-prev .ti-s-short ul{ padding-left:1.2rem !important; }
.ti-prev .ti-s-cheer{ display:inline-block; padding:.35rem .8rem !important; border-radius:999px; background:#FBE3EA !important; font-size:.92em; }
.ti-prev .ti-s-extra{ padding:.45rem .8rem !important; border-radius:12px; border:1px solid #E6D9B8; background:#FDF6E8 !important; font-size:.9em; }
.ti-prev .ti-s-pop{ position:absolute; right:.8rem; top:.7rem; padding:.35rem .8rem !important; margin:0 !important; border-radius:999px; background:#2F5F8A !important; color:#fff; font-size:.85rem; box-shadow:0 6px 18px rgba(0,0,0,.18) !important; }
.ti-prev .ti-s-timer{ font:600 1.05em/1.2 "IBM Plex Mono", monospace; }
.ti-prev .ti-s-listen button, .ti-prev .ti-s-btn{ font:600 .92rem/1.2 "Lora", Georgia, serif; min-height:40px; padding:.3rem .95rem; border-radius:999px; border:1.5px solid #2F5F8A; background:#2F5F8A; color:#fff; cursor:pointer; }
.ti-prev .ti-s-btn.is-quiet{ background:#FFFDF7; color:#2F5F8A; }
.ti-prev .ti-s-exit{ border-color:#96412B; background:#FFFDF7; color:#7A2F1C; }
.ti-prev .ti-s-steps{ padding-left:1.4rem !important; }
.ti-prev .ti-s-steps li{ margin:.25rem 0 !important; }
.ti-prev .ti-s-cards{ list-style:none; padding:0 !important; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap:.5rem; }
.ti-prev .ti-s-cards li{ margin:0 !important; padding:.55rem .75rem; border-radius:14px; border:1px solid var(--line, #D9CBA3); background:var(--paper, #F5EFDE); font-size:.93em; }
.ti-prev .ti-s-cards li b{ display:block; font:500 .7rem/1 "IBM Plex Mono", monospace; color:#7A5620; margin-bottom:.25rem; }
.ti-prev .ti-s-onenav{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; }
.ti-prev .ti-s-onenav span{ font-weight:600; color:var(--ink-soft, #5A5346); }
.ti-prev .ti-s-bubble{ position:absolute; right:-14px; bottom:-14px; width:70px; height:70px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #fff, #EFE6FA 60%, #D9C8F0); opacity:.8; pointer-events:none; }
@media (prefers-reduced-motion: no-preference){ .ti-prev .ti-s-bubble{ animation:ti-bob 5s ease-in-out infinite; } }
@keyframes ti-bob{ 50%{ transform:translateY(-10px); } }
.ti-prev .ti-s-ruler{ position:absolute; left:0; right:0; height:2.2em; top:7.2em; border-top:2px solid rgba(47,95,138,.45); border-bottom:2px solid rgba(47,95,138,.45); background:rgba(47,95,138,.06); pointer-events:none; }
.ti-prev .ti-s-tick{ width:1.2rem; height:1.2rem; vertical-align:-.2rem; margin-right:.45rem; accent-color:#3E6B4C; }
/* the look each choice gives the sample */
.ti-prev.p-big{ font-size:1.3em; }
.ti-prev.p-contrast{ font-size:1.5em; background:#fff !important; color:#000; border:3px solid #000; }
.ti-prev.p-contrast :is(.ti-s-line, .ti-s-short, .ti-s-extra, .ti-s-cards li){ background:#fff !important; border:2px solid #000 !important; color:#000; }
.ti-prev.p-readable, .ti-prev.p-readable *{ font-family:Verdana, Tahoma, "Segoe UI", Arial, sans-serif !important; }
.ti-prev.p-readable :is(p, li){ letter-spacing:.04em; word-spacing:.16em; line-height:1.9; text-align:left; }
.ti-prev.p-readable em{ font-style:normal; font-weight:600; }
.ti-prev.p-listen .ti-s-listen button{ min-height:56px; padding:.55rem 1.4rem; font-size:1.1rem; box-shadow:0 0 0 4px #D6E4F1 !important; }
.ti-prev.p-targets :is(button, .ti-s-btn){ min-height:52px; }
.ti-prev.p-targets .ti-s-tick{ width:1.5rem; height:1.5rem; }
@media (max-width:520px){
  .ti-prev .ti-s-pop{ position:static; display:inline-block; }
  .ti-actions button{ flex:1 1 100%; }
}
/* the sample sits outside the site's text bubbles: plain lines, so the changes are what you notice */
.ti-prev :is(p, ul, ol, li, h3){ border:0 !important; box-shadow:none !important; width:auto !important; }
.ti-prev .ti-s-short li, .ti-prev .ti-s-steps li{ background:none !important; padding:0 !important; border-radius:0 !important; }
.ti-prev .ti-s-line{ border:1px solid #C6D6E6 !important; }
.ti-prev .ti-s-calm{ border-color:#BCD8C3 !important; }
.ti-prev .ti-s-cards li{ border:1px solid var(--line, #D9CBA3) !important; padding:.55rem .75rem !important; background:var(--paper, #F5EFDE) !important; }
.ti-prev .ti-s-btn{ display:inline-block; white-space:nowrap; line-height:1.9; margin:.15rem 0; }
.ti-prev.p-contrast :is(.ti-s-line, .ti-s-short, .ti-s-extra, .ti-s-cards li){ border:2px solid #000 !important; background:#fff !important; }
.ti-piccard li{ background:#FFFDF7 !important; border:1px solid #E6D9B8 !important; box-shadow:none !important; padding:.6rem .8rem !important; border-radius:16px !important; }