/* Behavioral Activation, mybehavioralactivation.com. Shares its system with the
   sister sites. Started from mysleeptoolbox.com on October 23, 2026, with the
   sleep tools' own rules taken out. brand.css, loaded next, sets the family
   colors, fonts, header, and footer. The activity planner's own pieces are
   at the end. */
:root{
  --teal:#19536b;--teal-deep:#0d3646;--sea:#19536b;--sea-tint:#eef1f2;
  --ink:#0d3646;--ink-soft:#486470;--rule:#d0d8dc;
  --sand:#fdfcf7;--sand-deep:#f4f2ea;--cream:#fdfcf7;
  --max:72rem;--read:44rem;
  /* One type scale for every page. Body text is about 16px on a phone, 17px on a
     laptop, and 18px on a large monitor, and the rest steps from it. */
  --body-size:max(1rem,.85rem + .25vw);--small-size:max(.9375rem,var(--body-size) * .92);
  --lede-size:clamp(1.125rem,1.5vw,1.25rem);--h1-size:clamp(2.375rem,5vw,3.875rem);
  --h2-size:clamp(1.75rem,2.8vw,2.25rem);--h3-size:clamp(1.3rem,2vw,1.5rem);
  --measure:clamp(40rem,58vw,58rem);--tap:2.75rem;
  --serif:Literata,Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){--teal:#90c0d5;--teal-deep:#0c2632;--sea:#90c0d5;--sea-tint:#16394a;--ink:#fdfcf7;--ink-soft:#c3d3da;--rule:#2a5a70;--sand:#0c2632;--sand-deep:#1b4455;--cream:#16394a;}
}
:root[data-theme=dark]{--teal:#90c0d5;--teal-deep:#0c2632;--sea:#90c0d5;--sea-tint:#16394a;--ink:#fdfcf7;--ink-soft:#c3d3da;--rule:#2a5a70;--sand:#0c2632;--sand-deep:#1b4455;--cream:#16394a;}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--sans);font-size:var(--body-size);line-height:1.6;overflow-wrap:break-word}
/* brand.css loads next and sets the body at 18px, so the scale is set again here at a higher weight. */
html body{font-size:var(--body-size)}
a{color:var(--sea);text-underline-offset:.15em}
a:hover{color:var(--ink)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.15;margin:0 0 .5em;color:var(--ink)}
h1{font-size:var(--h1-size);line-height:1.06}
h2{font-size:var(--h2-size);line-height:1.18;margin-top:2.2em}
h3{font-size:var(--h3-size);line-height:1.3;margin-top:1.6em}
p,ul,ol{margin:0 0 1.1em}
li{margin:.3em 0}
strong{font-weight:600}
hr{border:0;border-top:1px solid var(--rule);margin:2.5rem 0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}
.read>*{max-width:46rem}
.read>.hero{max-width:none}
.skip-link{position:absolute;left:-999px;top:0;background:var(--cream);color:var(--ink);padding:.6rem 1rem;border:2px solid var(--sea);border-radius:0 0 8px 8px;font-weight:600}
.skip-link:focus{left:1rem;z-index:20}
:focus-visible{outline:2px solid var(--sea);outline-offset:2px}
a:focus-visible,summary:focus-visible{border-radius:3px}
.btn:focus-visible,.choice input:focus-visible+span{outline-offset:3px}
main:focus{outline:none}

/* page openings */
.hero{padding:3.5rem 0 2.5rem}
.hero h1{max-width:18ch}
.hero .lede{font-size:var(--lede-size);line-height:1.55;max-width:36rem;color:var(--ink-soft)}
.btn{display:inline-block;min-height:var(--tap);padding:.75rem 1.25rem;border-radius:10px;text-decoration:none;border:1.5px solid var(--teal);color:var(--teal);background:transparent;font:inherit;font-weight:600;cursor:pointer;line-height:1.3}
.btn.primary{background:var(--teal);color:var(--sand)}
.btn.primary:hover{background:var(--teal-deep);color:var(--sand)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.note{font-size:var(--small-size);color:var(--ink-soft)}
.meta{color:var(--ink-soft);font-size:var(--small-size)}
.kicker{font-size:var(--small-size);color:var(--ink-soft);font-weight:600;margin-bottom:.4rem}
.linkbtn{font:inherit;font-weight:600;color:var(--sea);background:none;border:0;padding:.35rem 0;min-height:var(--tap);cursor:pointer;text-decoration:underline;text-underline-offset:.2em;text-align:left}
.linkbtn:hover{color:var(--ink)}
.linkbtn.warn{color:var(--brick)}

/* sections */
.section{padding:2.5rem 0}
.section.tint{background:var(--sand-deep)}
.section.deep{background:var(--petrol);color:var(--paper)}
.section.deep h2,.section.deep h3,.section.deep a{color:var(--paper)}
.section.deep p,.section.deep .kicker{color:var(--mist)}
/* Lists in the petrol band read in the band's own light tones. */
.section.deep .ruled li{color:var(--mist);border-color:rgba(253,252,247,.22)}
.section.deep .ruled strong{color:var(--paper)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
@media (max-width:820px){.two{grid-template-columns:1fr}}

/* numbered steps, small petrol circles with paper numerals */
.steps{counter-reset:step;list-style:none;padding:0;margin:0}
.steps>li{counter-increment:step;position:relative;padding-left:3rem;margin:0 0 1.5rem}
.steps>li::before{content:counter(step);position:absolute;left:0;top:.1rem;width:2rem;height:2rem;border-radius:50%;background:var(--teal);color:var(--sand);font:600 .95rem/2rem var(--sans);text-align:center}
.steps>li>h2{font-size:var(--h3-size);line-height:1.25;margin:0 0 .35rem}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .steps>li::before{color:#0c2632}}
:root[data-theme=dark] .steps>li::before{color:#0c2632}

/* articles */
.refs{list-style:none;padding:0;font-size:var(--small-size)}
.refs li{padding-left:2rem;text-indent:-2rem;margin:.6em 0;color:var(--ink-soft)}
.refs li a{overflow-wrap:anywhere}
.article-list{list-style:none;padding:0;margin:0 0 1rem}
.article-list li{border-top:1px solid var(--rule);padding:1.1rem 0;margin:0}
.article-list li:last-child{border-bottom:1px solid var(--rule)}
.article-list a{font-family:var(--serif);font-size:1.3rem;text-decoration:none;color:var(--ink)}
.article-list a:hover{color:var(--sea);text-decoration:underline}
.article-list p{margin:.25rem 0 0;color:var(--ink-soft)}
.crumbs{font-size:var(--small-size);color:var(--ink-soft);margin:0 0 1.5rem}
.crumbs a{color:var(--ink-soft)}
.next-read{margin:2rem 0 0;padding:1.1rem 0 0;border-top:1px solid var(--rule)}
.next-read .kicker{display:block;margin:0 0 .2rem}
.next-read>a{font-family:var(--serif);font-size:1.25rem;font-weight:500;text-decoration:none}
.next-read .meta{display:block;margin-top:.2rem}
.plain-list{padding-left:1.2rem}
.group-sub{color:var(--ink-soft);margin:-.2rem 0 1rem}
.try{margin:2rem 0 0}

/* open and close rows */
details{border-top:1px solid var(--rule);padding:.6rem 0}
details:last-of-type{border-bottom:1px solid var(--rule)}
summary{cursor:pointer;font-weight:600;padding:.4rem 0;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";display:inline-block;width:1.4rem;color:var(--sea);font-weight:700}
details[open] summary::before{content:"\2212"}
details>:not(summary){margin-left:1.4rem}

/* downloads */
.downloads{list-style:none;padding:0;margin:0 0 1.5rem}
.downloads>li{border-top:1px solid var(--rule);padding:1rem 0;margin:0}
.downloads>li:last-child{border-bottom:1px solid var(--rule)}
.downloads h3{margin:0 0 .2rem;font-size:var(--h3-size)}
.downloads p{margin:0 0 .45rem;color:var(--ink-soft)}
.dl-links{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin:0;padding:0;list-style:none}
.dl-links li{margin:0}
.dl-links a{font-weight:600}
.dl-soon{color:var(--ink-soft);font-style:italic}
.chip{display:inline-block;border:1.5px solid var(--rule);border-radius:9px;padding:.05rem .55rem;font-size:.85rem;font-weight:600;color:var(--ink-soft);margin-left:.4rem;vertical-align:.12em}

.section h2:first-child,.section .kicker+h2{margin-top:0}
blockquote.quiet{margin:0 0 1.1em;padding:0}
.checkline{display:inline-flex;align-items:center;gap:.6rem;min-height:var(--tap);font-weight:600;cursor:pointer}
.checkline input{width:1.2rem;height:1.2rem;accent-color:var(--teal)}

/* forms */
.form-row{margin:0 0 1.6rem}
/* Questions in regular weight, as the app sets them, so a long form isn't a wall of bold. */
.form-row>label{display:block;font-weight:400;font-size:var(--body-size);color:var(--ink);margin:0 0 .4rem;line-height:1.4}
.q{display:block;font-weight:400;font-size:var(--body-size);color:var(--ink);margin:0 0 .4rem;line-height:1.4}
.cap{display:block;font-size:var(--small-size);color:var(--ink-soft);margin:-.15rem 0 .5rem;font-weight:400}
input[type=time],input[type=number],input[type=text],input[type=date],textarea,select.field{font:inherit;color:var(--ink);background:var(--cream);border:1px solid var(--ink-soft);border-radius:8px;padding:.3rem .6rem;min-height:var(--tap)}
input[type=time]{min-width:9.5rem}
input[type=number]{width:7rem}
textarea{width:100%;min-height:6rem;resize:vertical}
input[type=text]{width:100%}
.unit{margin-left:.5rem;color:var(--ink-soft)}
.choices{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;border:0}
.choices.form-row{margin-bottom:1.6rem}
.choices legend{font-weight:400;font-size:var(--body-size);color:var(--ink);margin:0 0 .45rem;padding:0;line-height:1.4}
.choice{position:relative;display:inline-flex}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice span{display:inline-flex;align-items:center;min-height:var(--tap);min-width:var(--tap);justify-content:center;border:1.5px solid var(--ink-soft);border-radius:9px;padding:.3rem .6rem;cursor:pointer;background:transparent;color:var(--ink);font-size:var(--small-size);line-height:1.3}
.choice input:checked+span{background:var(--teal);border-color:var(--teal);color:var(--sand)}
.choice input:focus-visible+span{outline:2px solid var(--sea)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .choice input:checked+span{color:#0c2632}}
:root[data-theme=dark] .choice input:checked+span{color:#0c2632}
fieldset.choices{min-width:0}
.linkbtn.small{font-size:var(--small-size)}
.sub{margin:.9rem 0 0}
.opt{font-size:var(--small-size);font-weight:400;color:var(--ink-soft);margin-left:.5rem}
.toolbar{display:flex;gap:.8rem 1.4rem;flex-wrap:wrap;align-items:center;margin:1.5rem 0}
.status{font-size:var(--small-size);color:var(--ink-soft);min-height:1.5em}

/* the tools */
.tool-section{border-top:1px solid var(--rule);padding-top:1.6rem;margin-top:2.2rem}
.tool-section>h2{margin-top:0;font-size:var(--h2-size);line-height:1.18}
.numbers{margin:0 0 .5rem;padding:0}
.numbers div{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--rule);padding:.6rem 0}
.numbers div:first-child{border-top:1px solid var(--rule)}
.numbers dt{margin:0}
.numbers dd{margin:0;font-family:var(--serif);font-weight:500;font-size:1.25rem;font-variant-numeric:lining-nums tabular-nums}
.big{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,4vw,2.2rem);line-height:1.2;margin:.2rem 0 .6rem}
.ruled{list-style:none;padding:0;margin:0 0 1rem}
.ruled li{border-top:1px solid var(--rule);padding:.7rem 0;margin:0}
.ruled li:last-child{border-bottom:1px solid var(--rule)}
.crisis{margin:1rem 0;padding:1rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.crisis p{margin:0 0 .5rem}
.crisis p:last-child{margin:0}
.table-scroll{overflow-x:auto}
/* print: only the generated report prints. It wraps words as the app's
   print does, so a heading in a column align() sized to its longest word
   never splits that word. */
.printout{display:none;overflow-wrap:normal}
/* A section's closing note and the report's closing note go over whole,
   with what comes before them, so a last page never holds only notes. */
.printout .stp .blk>p.small:last-child,.printout .stp .method{break-inside:avoid;page-break-inside:avoid;break-before:avoid;page-break-before:avoid;orphans:3;widows:3}
/* Laid out as it prints, off screen, while STPrint.align measures the split
   tables' columns: the page's width less its margins, and the frame's table
   as print sets it, with its header and footer, which hold no tables, left out. */
.printout.measuring{display:block;position:absolute;left:-10000px;top:0;width:7.5in;visibility:hidden}
.printout.measuring .hz-doc{width:100%;border-collapse:collapse;border-spacing:0}
.printout.measuring .hz-doc>thead,.printout.measuring .hz-doc>tfoot{display:none}
.printout.measuring .hz-doc>tbody>tr>td{padding:0;border:0}
@media print{
  .site-top,.foot,main>*:not(.printout),.skip-link{display:none!important}
  .printout{display:block!important}
  main{padding:0!important}
  body{background:transparent}
  @page{size:Letter;margin:.5in}
}

/* printables, laid out like myvaluescardsort.com's */
.sheets{display:grid;grid-template-columns:1fr;gap:2rem;margin:1.6rem 0 2rem}
.sheet{margin:0;display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:1.4rem;align-items:start;scroll-margin-top:24px}
.sheet img{width:100%;height:auto;border:1px solid var(--rule);border-radius:6px;background:#fff;box-shadow:0 8px 22px rgba(8,30,40,.12)}
.sheet h2{margin:0 0 .4rem}
.sheet figcaption,.sheet a{overflow-wrap:anywhere}
.dlinks{list-style:none;padding:0;margin:.6rem 0 0;font-size:var(--small-size);line-height:1.5}
.dlinks li{margin:0 0 .35rem}
.dlinks b{display:block;font-weight:600;color:var(--ink)}
.dlinks a{font-weight:600}
.sheet.mini{grid-template-columns:96px 1fr;gap:1rem;align-items:center;margin:1.4rem 0 1.8rem}
.sheet.mini img{box-shadow:0 4px 12px rgba(8,30,40,.12)}
.sheet.mini p{margin:0}
.hpage{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:2rem;align-items:start;margin:0 0 2.2rem}
.hpage h1{margin-top:0;font-size:clamp(2.3rem,4.4vw,3.3rem);line-height:1.08}
.hpage img{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:6px;background:#fff;box-shadow:0 10px 26px rgba(8,30,40,.14)}
.hpage .acts{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;margin:1.4rem 0 .7rem}
.handout h3{margin-top:1.6rem}
@media (max-width:620px){.sheet{grid-template-columns:1fr}.sheet img{max-width:240px}.sheet.mini{grid-template-columns:72px 1fr}.hpage{grid-template-columns:1fr;gap:1.4rem}.hpage>a{order:2}.hpage img{max-width:260px}}

/* readability: about 70 characters a line for running text, with room between paragraphs */
.read>p,.read>ul,.read>ol,.read>h2,.read>h3,.read>h4,.read>.refs,.read>blockquote,.read>dl,.read>.note,.read>.meta,.read>.sheet.mini,.read>hr{max-width:36rem}
.article>p,.article>ul,.article>ol{margin-bottom:1.3em}
.article li{margin:.55em 0}
.article h2{margin-top:2.3em;margin-bottom:.55em}

.legal p{max-width:46rem}

/* type hierarchy: headings a clear step above the text, body a shade softer than headings */
:root{--body:#28464f}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--body:#d9e3e7}}
:root[data-theme=dark]{--body:#d9e3e7}
.read p,.read li,.read dd{color:var(--body)}
.read strong,.read b{color:var(--ink);font-weight:600}
.read .note,.read .meta,.read .refs li,.read p.kicker{color:var(--ink-soft)}
.read>h2{font-weight:500;letter-spacing:-.012em;line-height:1.18;font-size:var(--h2-size);margin:3.25rem 0 .7rem}
.read>h3{font-family:var(--serif);font-weight:500;font-size:var(--h3-size);line-height:1.3;margin:2.3rem 0 .55rem}
.read>h2+h3{margin-top:1.6rem}

/* reading pages: one centered column, text at about 70 characters, wider pieces centered on the same line */
.read>.hero{max-width:36rem}
.wrap.read>*{margin-inline:auto}
.wrap.read>.hpage,.wrap.read>.sheets{max-width:46rem}
.wrap.read>h1,.wrap.read>.crumbs,.wrap.read>.next-read,.wrap.read>.try{max-width:36rem}
.wrap.read.handout>.crumbs{max-width:46rem}

/* reading pages grow with the screen: on wide screens the text gets larger and the column wider together, so a line stays about 70 to 78 characters */
.wrap.read{--measure:36rem;--wide:46rem}
.wrap.read>p,.wrap.read>ul,.wrap.read>ol,.wrap.read>dl,.wrap.read>h1,.wrap.read>h2,.wrap.read>h3,.wrap.read>h4,.wrap.read>.refs,.wrap.read>blockquote,.wrap.read>.note,.wrap.read>.meta,.wrap.read>.sheet.mini,.wrap.read>hr,.wrap.read>.hero,.wrap.read>.crumbs,.wrap.read>.next-read,.wrap.read>.try{max-width:var(--measure)}
.wrap.read>.hero .lede{max-width:none}
.wrap.read>.hpage,.wrap.read>.sheets,.wrap.read.handout>.crumbs{max-width:var(--wide)}
@media (min-width:1100px){.wrap.read>.hpage{grid-template-columns:minmax(0,360px) 1fr;gap:2.75rem}}

/* Every page reads like the other Everyday Insight sites: the column is
   58vw between 40rem and 58rem, and body text is about 17px on a laptop and
   18px on a large monitor. The text pages, the home page, and the tools share
   the column and the type scale. The tools' own tables and figures keep their
   sizes. The selectors start at body so they outrank brand.css, which loads
   after this file. */
body .wrap.read{--measure:clamp(40rem,58vw,58rem);--wide:var(--measure)}
body .wrap.read>*{max-width:var(--measure)}
body .wrap.read p,body .wrap.read li,body .wrap.read dd{line-height:1.6}
body .wrap.read .lede,body .hb .lead{font-size:var(--lede-size);line-height:1.55;color:var(--ink-soft)}
body .wrap.read>.sheets,body .wrap.read>.sheet.mini,body .wrap.read .dlinks{max-width:44rem}
body .wrap.read>.sheets,body .wrap.read>.sheet.mini{margin-left:calc((100% - min(100%, var(--measure))) / 2);margin-right:auto}
/* brand.css sets the page titles and the home page's lines at sizes of its own. */
body .hero h1{font-size:var(--h1-size)}
body .hero .lede{font-size:var(--lede-size)}
body .ways span{font-size:var(--small-size)}

/* ------------------------------------------------------------------
   The planner's forms, on one set of
   spacing steps. A question, its help, and its field sit close,
   questions a clear step apart, and sections a step more. On a phone
   the steps are a little smaller. Every control keeps a 44px tap
   target, and every question keeps its help under it.
   ------------------------------------------------------------------ */
:root{--sec-gap:1.35rem;--sec-pad:1rem;--group-head:.5rem;--q-gap:.95rem;--label-gap:.2rem;--help-gap:.3rem;--chip-gap:.3rem}
@media (max-width:40rem){:root{--sec-gap:1.1rem;--sec-pad:.85rem;--group-head:.4rem;--q-gap:.8rem}}
.form-row,.choices.form-row{margin-bottom:var(--q-gap)}
.form-row>label,.q,.choices legend{margin-bottom:var(--label-gap)}
.cap{margin:-.05rem 0 var(--help-gap)}
.tool-section{margin-top:var(--sec-gap);padding-top:var(--sec-pad)}
.choices{gap:var(--chip-gap)}
.toolbar{margin:var(--sec-pad) 0}
/* The header's menu takes over at the same widths as before, counted in the
   reader's own text size, so a larger browser text setting gets the menu
   before the links run off the bar. */
@media (max-width:87.5em){html[lang=es] body .nl{display:none}html[lang=es] body .menu{display:block}html[lang=es] body .site-top nav{gap:10px}}
@media (max-width:65em){body .nl{display:none}body .menu,body .menu:last-of-type{display:block}body .site-top nav{gap:10px}}

/* ------------------------------------------------------------------
   The activity planner. Plain rows with hairlines, as the app lists
   things. Examples open into a soft panel with rounded corners, the way
   the company site opens an answer, never a bordered box or a side rule.
   ------------------------------------------------------------------ */
.planner .hero{padding-bottom:1rem}
.jump{font-size:var(--small-size);color:var(--ink-soft);margin:1rem 0 0}
.jump span{font-weight:600}
.jump a{white-space:nowrap}
.notice{margin:0 0 1rem;padding:.7rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-weight:600}
.notice .linkbtn{margin-left:.6rem;min-height:0;padding:0;font-weight:600}
.planner .tool-section{margin-top:2.6rem;padding-top:1.6rem;scroll-margin-top:1rem}
.planner .tool-section>h2{margin-bottom:.4rem}
.planner .tool-section>h3{font-size:var(--h3-size);margin:2rem 0 .3rem;scroll-margin-top:1rem}
.planner .toolbar{margin:1.2rem 0 1rem}
.wday{border-top:1px solid var(--rule);padding:.9rem 0 .7rem}
.wday:last-of-type{border-bottom:1px solid var(--rule)}
.day-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.day-head h3{font-family:var(--sans);font-weight:600;font-size:var(--body-size);margin:0}
.day-head .linkbtn{min-height:0;padding:.2rem 0}
.wday .none{margin:.2rem 0 0;color:var(--ink-soft);font-size:var(--small-size)}
.plan{margin:.55rem 0 0}
.p-title{margin:0;color:var(--ink);line-height:1.4}
.p-line{margin:.1rem 0 0;color:var(--ink-soft);font-size:var(--small-size)}
.p-acts{display:flex;flex-wrap:wrap;gap:0 1.1rem;margin:.1rem 0 0}
.p-acts .linkbtn{min-height:2.2rem;padding:.2rem 0}
.moved{margin:.25rem 0 0}
.group-label{font-weight:600;color:var(--ink-soft);font-size:var(--small-size);margin:1.2rem 0 .3rem}
.act-rows,.idea-rows,.lb-rows,.value-rows{list-style:none;padding:0;margin:0}
.act-rows{border-top:1px solid var(--rule)}
.act-rows>li{border-bottom:1px solid var(--rule);padding:.8rem 0;margin:0}
.act-rows .cap{margin:.15rem 0 .45rem}
.hard-pick{position:relative;display:inline-flex}
.hard-pick .linkbtn{display:inline-flex;align-items:center}
.hard-pick select{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer;font-size:16px}
.hard-pick:focus-within .linkbtn{outline:2px solid var(--sea);outline-offset:2px}
.add-row{margin-top:1.4rem}
.inline-add{display:flex;gap:.7rem;align-items:center}
.inline-add input{flex:1;min-width:0}
.idea-groups{margin:.6rem 0 0}
.idea-groups details{padding:.2rem 0}
.idea-groups summary{font-weight:600}
.idea-rows li{display:flex;justify-content:space-between;align-items:center;gap:1rem;border-top:1px solid var(--rule);padding:.35rem 0;margin:0;min-height:2.9rem}
.idea-rows li:first-child{border-top:0}
.idea-rows .added{color:var(--ink-soft);font-size:var(--small-size);white-space:nowrap}
.idea-rows .linkbtn{min-height:2.2rem;padding:.2rem 0;white-space:nowrap}
.area-row textarea{min-height:4.2rem}
.area-row .linkbtn{display:block;min-height:2.4rem}
.ex-text{margin:.1rem 0 .5rem;padding:.7rem .9rem;border-radius:10px;background:var(--sand-deep);color:var(--body)}

/* "See an example" and the other small reveals: a link, and a soft panel when open */
details.ex,details.more{border:0;padding:0;margin:.35rem 0 0}
details.ex:last-of-type{border-bottom:0}
details.ex>summary{display:inline-block;font-weight:600;font-size:var(--small-size);color:var(--sea);text-decoration:underline;text-underline-offset:.2em;padding:.35rem 0;min-height:var(--tap);line-height:2}
details.ex>summary::before{content:none}
details.ex>:not(summary){margin-left:0}
details.ex[open]>:not(summary){background:var(--sand-deep);margin:0;padding:.7rem .9rem}
details.ex[open]>:not(summary):nth-child(2){border-radius:10px 10px 0 0;padding-top:.8rem}
details.ex[open]>:last-child{border-radius:0 0 10px 10px;padding-bottom:.85rem}
details.ex[open]>:nth-child(2):last-child{border-radius:10px}
details.ex p,details.ex li,details.ex dd{font-size:var(--small-size);line-height:1.5;color:var(--body)}
.ex-list{padding-left:1.1rem}
.ex-list li{margin:.2rem 0}
dl.terms{margin:0}
dl.terms dt{font-weight:600;font-size:var(--small-size);color:var(--ink);margin:.4rem 0 0}
dl.terms dt:first-child{margin-top:0}
dl.terms dd{margin:0}
details.more{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:1.4rem 0 0;padding:.5rem 0}
details.more>summary{font-weight:600}
details.more>:not(summary){margin-left:0}
details.more>.cap{margin:.4rem 0 1rem}
details.repeat{margin-top:.9rem}
details.other{margin-top:.3rem}

/* the dialog the forms open in, full screen on a phone */
dialog.sheet-dlg{border:0;padding:0;width:min(46rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);border-radius:14px;background:var(--sand);color:var(--ink);box-shadow:0 24px 60px rgba(8,30,40,.3)}
dialog.sheet-dlg::backdrop{background:rgba(8,30,40,.5)}
dialog.sheet-dlg form{padding:1.6rem clamp(1rem,4vw,2rem) 0}
dialog.sheet-dlg h2{font-size:var(--h3-size);margin:0 0 1.1rem}
dialog.sheet-dlg h2:focus{outline:none}
.dlg-acts{position:sticky;bottom:0;display:flex;gap:1.4rem;align-items:center;background:var(--sand);border-top:1px solid var(--rule);margin:1.4rem calc(-1 * clamp(1rem,4vw,2rem)) 0;padding:.9rem clamp(1rem,4vw,2rem) 1rem}
@media (max-width:40rem){dialog.sheet-dlg{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}}
fieldset{border:0;padding:0;margin:0;min-width:0}
fieldset.when{margin:1.6rem 0 0;border-top:1px solid var(--rule);padding-top:1rem}
legend.sub-head{float:left;width:100%;font-family:var(--serif);font-weight:500;font-size:var(--h3-size);padding:0;margin:0 0 .2rem}
legend.sub-head+*{clear:both}
fieldset.when>.q{font-weight:600;font-size:var(--small-size);margin:1rem 0 .4rem}
.radio-rows{border-top:1px solid var(--rule)}
.radio-row{display:flex;gap:.8rem;align-items:baseline;border-bottom:1px solid var(--rule);padding:.65rem 0;cursor:pointer;min-height:var(--tap)}
.radio-row input{flex:none;width:1.15rem;height:1.15rem;margin:0;accent-color:var(--teal);position:relative;top:.15rem}
.radio-row small{display:block;color:var(--ink-soft);font-size:var(--small-size);line-height:1.4;margin-top:.1rem}
.timing-ctl{padding:.7rem 0 .9rem 2rem;border-bottom:1px solid var(--rule)}
.timing-ctl .choices{margin:.2rem 0 .4rem}
.timing-ctl .q{margin:.8rem 0 .3rem;font-size:var(--small-size);font-weight:600}
.timing-ctl .cap{margin:.2rem 0 .3rem}
.choices.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.35rem}
.choice.day span{flex-direction:column;width:100%;min-width:0;padding:.35rem .1rem;gap:.05rem}
.choice.day small{font-size:.78rem;font-weight:600;line-height:1.1}
.choice.day .tm-day{display:none}
@media (max-width:34rem){.choice.day .tm-word{display:none}.choice.day .tm-day{display:inline}}
.choice.day b{font:500 1.05rem/1.2 var(--serif);font-variant-numeric:lining-nums tabular-nums}
.choices .idea{margin:0}
.went-title{font:500 var(--h3-size)/1.3 var(--serif);margin:0 0 .2rem;color:var(--ink)}

/* ratings that start empty, as the app's do */
.rating .r-line{display:flex;align-items:center;gap:1rem}
.rating input[type=range]{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:var(--tap);margin:0;background:transparent;cursor:pointer}
.rating input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--track)}
.rating input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--track)}
.rating input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;background:var(--teal);border:3px solid var(--sand)}
.rating input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--teal);border:3px solid var(--sand)}
.rating input[type=range]:focus-visible{outline:2px solid var(--sea);outline-offset:2px;border-radius:6px}
.rating input.unrated::-webkit-slider-thumb{opacity:0}
.rating input.unrated::-moz-range-thumb{opacity:0}
.rating output{min-width:5.5rem;text-align:right;font:500 1.15rem/1.2 var(--serif);font-variant-numeric:lining-nums tabular-nums}
.rating input.unrated+output{font:400 var(--small-size)/1.3 var(--sans);color:var(--ink-soft)}
.r-ends{display:flex;justify-content:space-between;font-size:.85rem;color:var(--ink-soft);margin:-.2rem 6.5rem 0 0}
.rating .r-clear{min-height:2rem;padding:0}
.next-row{display:block;width:100%;text-align:left;font:inherit;background:none;border:0;border-bottom:1px solid var(--rule);padding:.7rem 0;cursor:pointer;color:var(--ink)}
#wNext{border-top:1px solid var(--rule);margin-top:.3rem}
.next-row b{display:block;font-weight:600;color:var(--sea);text-decoration:underline;text-underline-offset:.2em}
.next-row span{display:block;font-size:var(--small-size);color:var(--ink-soft);line-height:1.45;margin-top:.1rem}
.next-row:hover b{color:var(--ink)}
.value-rows{border-top:1px solid var(--rule)}
.value-rows li{margin:0;border-bottom:1px solid var(--rule)}
.value-rows button{display:block;width:100%;text-align:left;font:inherit;background:none;border:0;padding:.6rem 0;cursor:pointer;color:var(--ink)}
.value-rows b{display:block;font-weight:600}
.value-rows span{display:block;font-size:var(--small-size);color:var(--ink-soft)}
.value-rows button:hover b{color:var(--sea);text-decoration:underline}

/* looking back at the week */
dl.counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem 1.2rem;margin:1rem 0 .4rem}
dl.counts div{display:flex;flex-direction:column-reverse}
dl.counts dt{font-size:var(--small-size);color:var(--ink-soft);line-height:1.3}
dl.counts dd{margin:0;font:500 2rem/1.1 var(--serif);font-variant-numeric:lining-nums tabular-nums}
.lb-rows{border-top:1px solid var(--rule)}
.lb-rows li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-bottom:1px solid var(--rule);padding:.6rem 0;margin:0}
.lb-rows small{display:block;color:var(--ink-soft);font-size:var(--small-size)}
.lb-rows b{font-weight:400;font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.lb-rows .linkbtn{min-height:2rem;padding:0;white-space:nowrap}
.line-row{margin-top:1.8rem}
.checks .checkline{display:flex;font-weight:400}
.linkbtn.warn{color:var(--brick)}

/* a printable without its PDF yet: a blank sheet in the Horizon frame's outline */
.sheet-blank{display:block;aspect-ratio:8.5/11;width:100%;border:1px solid var(--rule);border-radius:6px;background:#fff;padding:9% 9%;box-shadow:0 8px 22px rgba(8,30,40,.12)}
.sb-head{display:flex;align-items:flex-end;gap:6%;position:relative;border-bottom:1.6px solid #0d3646;padding-bottom:4%;margin-bottom:10%}
.sb-head img{width:16%;height:auto}
.sb-head i{position:absolute;right:6%;bottom:0;width:14%;aspect-ratio:2/1;border-radius:999px 999px 0 0;background:#f3cf48}
.sb-rule{display:block;border-bottom:1px solid #d0d8dc;height:0;margin:0 0 11%}
.hpage .sheet-blank{max-width:360px}

/* small choices that fill in a field: from your list, after cues */
.idea{font:inherit;font-size:var(--small-size);min-height:var(--tap);line-height:1.3;color:var(--ink);background:transparent;border:1.5px solid var(--rule);border-radius:9px;padding:.3rem .7rem;cursor:pointer;text-align:left}
.idea:hover{border-color:var(--ink-soft)}
.idea:focus-visible{outline:2px solid var(--sea);outline-offset:2px}
.choices>legend,.choices>.cap,.choices>details{flex-basis:100%}
.choices>legend{float:left;width:100%}
.choices>.cap{margin:-.1rem 0 .35rem}
.went-sub{margin:0 0 1.4rem}
.r-ends{margin-right:6.5rem}
.steps>li{margin-bottom:2.6rem}
@media (max-width:620px){.hpage .sheet-blank,.sheet .sheet-blank{max-width:240px}}