/* Goal100 Learning · home kit pages (job homekit, Nov 13-14, 2026): dinner question, conference kit (family and teacher),
   teach it back, newsletter insert. Uses the site's colors (assets/site.css variables), so dark mode follows the site.
   Phone first: one column, big tap targets (44 px or more), inputs 16 px or more, nothing wider than the screen. */
.hk{max-width:860px;margin:0 auto}
.hk-crumb{font-size:.95rem;margin:0 0 10px}
.hk-crumb a{display:inline-block;padding:10px 0}
.hk h1{font-size:clamp(1.9rem,6vw,3rem);margin:4px 0 8px}
.hk .lead{font-size:1.08rem;color:var(--ink2);margin:0 0 16px;max-width:60ch}
.hk-app{display:flex;flex-direction:column;gap:16px;min-width:0}
.hk-step{font:800 1.05rem var(--display);color:var(--brand);margin:0}
.hk-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.hk-tiles.c5{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.hk-tiles.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:520px){.hk-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hk-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:76px;padding:10px 8px;border:2px solid var(--line);border-radius:18px;background:var(--card);color:var(--ink);font:800 1.05rem/1.15 var(--display);text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hk-tile small{font:600 .82rem/1.2 var(--body);color:var(--ink2)}
.hk-tile .i{font-size:1.6rem;line-height:1}
.hk-tile[aria-pressed="true"],.hk-tile[aria-checked="true"]{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px var(--brand) inset}
.hk-tile:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.hk-card{background:var(--card);border:2px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow,0 10px 30px rgba(30,29,107,.08));min-width:0}
.hk-card.gold{border-color:var(--gold)}
.hk-meta{font-weight:700;color:var(--ink2);font-size:.95rem;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.hk-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-weight:800;font-size:.85rem}
.hk-chip.off{background:var(--gold-soft);color:var(--gold-deep)}
.hk-chip.pog{background:var(--teal-soft);color:var(--teal)}
.hk-big{font:800 clamp(1.45rem,5.2vw,2.15rem)/1.18 var(--display);margin:10px 0 8px;overflow-wrap:anywhere}
.hk-next{font-size:1.08rem;margin:0 0 8px}
.hk-tip{margin-top:10px;border-top:2px dashed var(--line);padding-top:8px}
.hk-tip summary{cursor:pointer;font-weight:800;color:var(--brand);min-height:44px;display:flex;align-items:center;gap:6px;list-style:none}
.hk-tip summary::-webkit-details-marker{display:none}
.hk-tip summary::before{content:"▸";display:inline-block;transition:transform .15s}
.hk-tip[open] summary::before{transform:rotate(90deg)}
.hk-tip p{margin:6px 0}
.hk-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.hk-row .btn{flex:0 1 auto}
.hk .btn{min-height:48px}
.hk .btn.small,.hk-small{min-height:44px;padding:8px 14px;font-size:.98rem;border-radius:14px}
.hk-main{width:100%;font-size:1.15rem!important;min-height:56px}
.hk-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}
.hk-nav .btn{width:100%;padding-left:8px;padding-right:8px}
.hk-nav input[type=date]{font-size:16px;min-height:44px;border:2px solid var(--line);border-radius:12px;padding:6px 8px;background:var(--card);color:var(--ink);max-width:100%}
.hk-panel{background:var(--bg2);border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.hk-panel h2{font-size:clamp(1.3rem,4.4vw,1.7rem)}
.hk-seg{display:flex;flex-wrap:wrap;gap:8px;border:0;margin:0;padding:0;min-width:0}
.hk-seg legend{font-weight:800;margin-bottom:6px;padding:0}
.hk-seg label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;border:2px solid var(--line);border-radius:999px;background:var(--card);cursor:pointer;font-weight:700}
.hk-seg input{width:20px;height:20px;accent-color:var(--brand);margin:0}
.hk-seg label:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.hk-canvas{display:block;width:100%;max-width:440px;height:auto;margin:0 auto;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.25);background:#2B2A8C}
.hk-say{min-height:1.4em;font-weight:700;color:var(--good)}
.hk-note{font-size:.95rem;color:var(--ink2)}
.hk-week{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.hk-week li{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:12px 14px}
.hk-week li.today{border-color:var(--gold)}
.hk-week .d{font:800 1rem var(--display);color:var(--brand)}
.hk-week .q{font-weight:700;margin:2px 0}
.hk-week .n{color:var(--ink2);font-size:.95rem}
.hk-check{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:700;cursor:pointer}
.hk-check input{width:22px;height:22px;accent-color:var(--brand);flex:none}
.hk-list{display:flex;flex-direction:column;gap:10px;padding-left:1.3em}
.hk-list li{padding-left:2px}
.hk-field{display:flex;flex-direction:column;gap:6px;font-weight:700}
.hk-field input,.hk-field select,.hk-field textarea{font:400 16px/1.4 var(--body);min-height:46px;border:2px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--card);color:var(--ink);width:100%;max-width:100%}
.hk-field textarea{min-height:110px}
.hk-msg{white-space:pre-wrap;background:var(--card);border:2px dashed var(--line);border-radius:14px;padding:14px;font-size:1rem;overflow-wrap:anywhere}
.hk-private{font-size:.95rem;color:var(--ink2);border-left:4px solid var(--teal);padding:6px 0 6px 12px}
.hk-stars{display:flex;gap:6px;font-size:2.2rem;line-height:1}
.hk-pop{animation:hk-pop .5s ease-out}
@keyframes hk-pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.hk-pop{animation:none}}
.hk-prompt{display:flex;gap:12px;align-items:flex-start}
.hk-prompt .num{flex:none;width:44px;height:44px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:flex;align-items:center;justify-content:center;font:800 1.2rem var(--display)}
.hk-prompt b{display:block;font:800 1.15rem var(--display)}
.hk-dots{display:flex;gap:8px;justify-content:center}
.hk-dots span{width:12px;height:12px;border-radius:50%;background:var(--line)}
.hk-dots span.on{background:var(--brand)}
.hk-insert{background:#fff;color:#16163A;border:2px solid #C9C8E6;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.hk-insert h3{color:#2B2A8C;font-size:1.25rem}
.hk-insert .pz{border:1px solid #C9C8E6;border-radius:12px;overflow:hidden;line-height:0;background:#fff;max-width:420px}
.hk-insert .pz svg{display:block;width:100%;height:auto}
.hk-insert p{margin:0}
.hk-insert .small{font-size:.9rem;color:#55577A}
.hk-insert a{color:#2B2A8C}
.hk-loading{color:var(--ink2);font-weight:700}
/* print: only the chosen block (G100HK.printOnly) */
#hk-printzone{display:none}
@media print{
  body.hk-printing > *:not(#hk-printzone){display:none!important}
  body.hk-printing #hk-printzone{display:block!important}
  .hk-noprint{display:none!important}
}
.hkp{color:#16163A;background:#fff;font:10.5pt/1.32 'Atkinson Hyperlegible',Arial,sans-serif}
.hkp h1{font:800 20pt/1.1 'Baloo 2',Arial,sans-serif;color:#2B2A8C;margin:0 0 2pt}
.hkp h2{font:800 13pt/1.15 'Baloo 2',Arial,sans-serif;color:#2B2A8C;margin:8pt 0 3pt}
.hkp .sub{font-weight:700;color:#55577A;margin:0 0 8pt}
.hkp table{width:100%;border-collapse:collapse}
.hkp th,.hkp td{border:1pt solid #C9C8E6;padding:4pt 6pt;vertical-align:top;text-align:left}
.hkp th{background:#E6E5FA;color:#2B2A8C}
.hkp td.day{font-weight:800;white-space:nowrap;color:#2B2A8C;width:1in}
.hkp .es{color:#55577A;font-style:italic;display:block;margin-top:2pt}
.hkp .foot{margin-top:8pt;border-top:2pt solid #2B2A8C;padding-top:4pt;font-size:9pt;color:#55577A;display:flex;justify-content:space-between;gap:10pt}
.hkp .box{border:1pt solid #C9C8E6;border-radius:6pt;padding:6pt;margin:0 0 6pt;break-inside:avoid}
.hkp .box b{color:#2B2A8C}
.hkp .lines{display:block;height:auto}
.hkp .ln{border-bottom:1pt solid #9A9BB5;height:16pt}
.hkp ol,.hkp ul{display:block;margin:2pt 0 2pt 0;padding-left:16pt}
.hkp li{margin:0 0 3pt}
.hkp .two{display:grid;grid-template-columns:1fr 1fr;gap:8pt}
.hkp .pz{max-width:3.4in;border:1pt solid #C9C8E6;border-radius:6pt;overflow:hidden;line-height:0}
.hkp .pz svg{width:100%;height:auto;display:block}
@media screen{ #hk-printzone .hkp{max-width:7.5in} }
@page{size:letter;margin:.5in}
/* site.css makes every label a column and every input full width: undo that for the round choices and check boxes here */
.hk-seg label,.hk-check{flex-direction:row!important}
.hk-seg input,.hk-check input{width:22px!important;height:22px!important;min-height:0!important;padding:0!important;flex:none}
.hk-nav{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.hk-nav .btn{white-space:normal;line-height:1.15;min-width:0}
.hk-nav input[type=date]{width:9.6em;min-width:0}
.hk,.hk-app,.hk-card,.hk-panel{min-width:0;max-width:100%}
.hkp.tight{font-size:9.6pt;line-height:1.25}.hkp.tight .ln{height:12pt}.hkp.tight h2{margin:5pt 0 2pt}.hkp.tight .box{margin-bottom:4pt;padding:4pt 6pt}