/* =============================================================================
   THE SEARCH JOURNAL APP: page-scoped styles (app builder, assets/app/*).
   Built from the manual's own language: square corners, 3px ink rules, solid
   ink squares, orange only as a fill for "act now" (the record button) and
   "look here" (the warrant coach). Tokens only, so night reading just works.
   Nothing dashed here: dashes belong to printable sheets.
   Prefix: ap-
   ========================================================================== */

/* ---------- the working column ------------------------------------------- */
.is-app .page-body{max-width:var(--col)}
.ap{margin:0;padding-top:18px}
.ap-sec{margin:34px 0 0}
.ap-sec > .sh{margin-bottom:12px}
.ap-lede{font-size:18px;line-height:1.55;margin:0 0 14px;max-width:36em}
.ap-lede b,.ap-lede strong{font-weight:650}
.ap-small{font-size:16px;line-height:1.5;color:var(--graphite);margin:8px 0 0;max-width:38em}
.ap-small b{color:var(--ink);font-weight:650}
.ap-jsonly[hidden]{display:none!important}
.ap-nojs{border-left:6px solid var(--ink);padding:6px 0 6px 12px;font-size:16px;color:var(--graphite);margin:12px 0}

/* ---------- buttons: big, square, one job ----------------------------------- */
.ap-btn{
  display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:62px;padding:10px 18px;margin:0;
  border:2.5px solid var(--ink);background:var(--paper);color:var(--ink);text-decoration:none;cursor:pointer;
  font-family:var(--display);font-stretch:88%;font-weight:850;font-size:20px;line-height:1.15;text-align:center
}
.ap-btn .ico{width:22px;height:22px}
.ap-btn:hover{background:var(--band)}
.ap-btn.solid{background:var(--ink);color:var(--paper)}
.ap-btn.solid:hover{background:#2A2C30}
.ap-btn.now{background:var(--orange);color:var(--on-orange);border:3px solid var(--black)}
.ap-btn.now:hover{background:#F08A3C}
.ap-btn.now .ap-rec{width:20px;height:20px;background:var(--on-orange);flex:none}
.ap-btn[disabled]{opacity:.45;cursor:not-allowed}
.ap-btn.sm{min-height:48px;font-size:17px;width:auto;padding:0 16px}
.ap-btn.quiet{border-width:0 0 2.5px;width:auto;min-height:44px;padding:0 2px;background:none;font-size:17px;justify-content:flex-start}
.ap-btn.quiet:hover{background:none;border-bottom-width:4px}
.ap-btn.danger{border-width:3px;border-left-width:12px}
.ap-btns{display:grid;gap:10px;margin:14px 0 4px}
@media (min-width:600px){.ap-btns.two{grid-template-columns:1fr 1fr}}
.ap-btn-sub{display:block;font-family:var(--text);font-weight:400;font-size:15px;font-stretch:100%;margin-top:3px;opacity:.9}
.ap-btn.stack{flex-direction:column;gap:2px}
.ap-file{position:relative;overflow:hidden}
.ap-file input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.ap-file:focus-within{outline:3px solid var(--ink);outline-offset:3px}
@media (prefers-color-scheme:dark){.ap-btn.solid:hover{background:#D9D3CA}}

/* ---------- fields ------------------------------------------------------------ */
.ap-f{display:block;margin:0 0 16px}
.ap-l{display:block;font-family:var(--display);font-stretch:94%;font-weight:800;font-size:18px;line-height:1.25;margin:0 0 6px}
.ap-hint{display:block;font-size:15.5px;line-height:1.45;color:var(--graphite);margin:6px 0 0;max-width:38em}
.ap-in,.ap-ta,.ap-sel{
  display:block;width:100%;min-height:54px;padding:10px 12px;margin:0;border:2.5px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:19px;line-height:1.3;-webkit-appearance:none;appearance:none
}
.ap-in[type=date],.ap-in[type=time],.ap-in[type=datetime-local]{font-size:18px;max-width:260px}
.ap-ta{font-family:var(--text);font-weight:400;font-size:18px;line-height:1.5;min-height:120px;resize:vertical}
.ap-sel{padding-right:40px;font-size:17px;cursor:pointer;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23888' stroke-width='3'/%3E%3C/svg%3E") right 10px center/20px no-repeat}
.ap-in::placeholder,.ap-ta::placeholder{color:var(--graphite);opacity:.75;font-weight:500}
.ap-in:focus,.ap-ta:focus,.ap-sel:focus{outline:3px solid var(--ink);outline-offset:2px}
.ap-two{display:grid;gap:0 16px}
@media (min-width:560px){.ap-two{grid-template-columns:1fr 1fr}}
/* choices: the site's square segmented buttons, as real radios */
.ap-ch{border:0;padding:0;margin:0 0 16px;min-width:0}
.ap-ch legend{padding:0;float:left;width:100%}
.ap-ch legend + *{clear:both}
.ap-opts{display:grid;gap:0}
@media (min-width:520px){.ap-opts.c3{grid-template-columns:repeat(3,1fr)}.ap-opts.c2{grid-template-columns:1fr 1fr}}
.ap-c{position:relative;display:block;margin:0 -2px -2px 0;cursor:pointer}
.ap-c input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer;z-index:1}
.ap-c > span{display:flex;align-items:center;gap:10px;min-height:54px;padding:10px 14px;border:2px solid var(--ink);background:var(--paper);font-family:var(--display);font-weight:800;font-size:17px;line-height:1.2}
.ap-c > span::before{content:"";flex:none;width:18px;height:18px;border:2.5px solid currentColor;border-radius:0}
.ap-c input[type=radio] + span::before{border-radius:50%}
.ap-c input:hover + span{background:var(--band)}
.ap-c input:checked + span{background:var(--ink);color:var(--paper);position:relative;z-index:1}
.ap-c input:checked + span::before{background:currentColor;box-shadow:inset 0 0 0 3px var(--ink)}
.ap-c input:focus-visible + span{outline:3px solid var(--ink);outline-offset:2px;position:relative;z-index:2}
.ap-more{margin:10px 0 16px;padding:2px 0 2px 16px;border-left:3px solid var(--ink)}
/* the save state: quiet, always says where the data is */
.ap-saved{display:flex;align-items:center;gap:8px;min-height:30px;margin:6px 0 0;font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--graphite)}
.ap-saved::before{content:"";width:9px;height:9px;background:var(--ink);flex:none}
.ap-saved.is-busy::before{background:none;border:2px solid var(--ink)}

/* ---------- home: the order of things ------------------------------------- */
.ap-order{list-style:none;margin:10px 0 0;padding:0;border-top:var(--rule);counter-reset:none}
.ap-order li{margin:0;border-bottom:var(--hair)}
.ap-order a{display:grid;grid-template-columns:50px minmax(0,1fr) 22px;gap:14px;align-items:start;min-height:92px;padding:16px 0;text-decoration:none}
.ap-order a > .ico{align-self:center}
.ap-order .sq{width:48px;height:48px;font-size:26px}
.ap-order a:hover .sq{background:var(--ink);color:var(--paper)}
.ap-order a:hover strong{text-decoration:underline;text-decoration-thickness:2px}
.ap-order strong{display:block;font-family:var(--display);font-stretch:86%;font-weight:850;font-size:23px;line-height:1.1}
.ap-order .d{display:block;font-size:16.5px;line-height:1.4;color:var(--graphite);margin-top:3px}
.ap-order .st{display:inline-flex;align-items:center;gap:7px;margin-top:8px;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--ink)}
.ap-order .st:empty{display:none}
.ap-order .st::before{content:"";width:12px;height:12px;border:2px solid var(--ink);flex:none}
.ap-order .st.is-done::before{background:var(--ink)}
.ap-order .st.is-part::before{background:linear-gradient(90deg,var(--ink) 50%,transparent 50%)}
.ap-facts{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:0;border-top:var(--hair)}
.ap-facts li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;padding:10px 0;margin:0;border-bottom:var(--hair);font-size:17px;line-height:1.45}
.ap-facts .ico{width:22px;height:22px;margin-top:2px}
.ap-gate{margin:14px 0 4px;padding:14px 16px 6px;border:var(--rule);border-left-width:12px}
.ap-gate .ap-btns{margin-top:6px}
.ap-banner{margin:18px 0;padding:14px 16px;border:var(--rule);border-left-width:12px;background:var(--paper)}
.ap-banner p{margin:0 0 10px;font-size:17px}
.ap-banner .ap-l{margin-bottom:4px}

/* wide screens: a QR code beside the steps, to open the app on a phone */
.ap-side{display:none}
@media (min-width:1100px){
  .is-app.app-home .page-body{max-width:none}
  .is-app.app-home .page-body > *:not(.ap){max-width:var(--col)}
  .ap-home{display:grid;grid-template-columns:minmax(0,var(--col)) var(--note);gap:0 var(--gap);align-items:start}
  .ap-side{display:block;position:sticky;top:20px;margin-top:34px;padding:14px 0 0;border-top:var(--rule)}
  .ap-side .label{color:var(--graphite);margin:0 0 6px}
  .page-body .ap-side-h{font-size:24px;font-stretch:82%;line-height:1.1;margin:0 0 14px;padding:0;border:0}
  .ap-side p{font-size:15.5px;line-height:1.5;margin:12px 0 0;color:var(--graphite)}
  .ap-qr{margin:0;border:2.5px solid var(--ink);background:#FFFFFF}
  .ap-qr svg{display:block;width:100%;height:auto}
  .ap-qr figcaption{padding:8px 10px;border-top:2.5px solid var(--ink);background:var(--paper);font-family:var(--display);font-weight:800;font-size:14px;overflow-wrap:anywhere}
}
@media print{.ap-side{display:none!important}}

/* ---------- the evidence label: every saved file carries one ---------------- */
.ap-tags{display:grid;gap:16px;margin:14px 0 0}
.ap-tag{border:2.5px solid var(--ink);background:var(--paper);min-width:0}
.ap-tag-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 12px;padding:8px 12px;background:var(--ink);color:var(--paper)}
.ap-tag-h .label{color:inherit}
.ap-tag-h .n{font-family:var(--display);font-stretch:70%;font-weight:900;font-size:20px;line-height:1}
.ap-tag-body{padding:10px 12px 12px}
.ap-tag video{display:block;width:100%;max-height:52vh;background:var(--black);margin:0 0 10px}
.ap-kv{margin:0;border-top:var(--hair)}
.ap-kv > div{display:grid;grid-template-columns:minmax(92px,34%) minmax(0,1fr);gap:10px;padding:7px 0;border-bottom:var(--hair)}
.ap-kv dt{font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--graphite);line-height:1.35}
.ap-kv dd{margin:0;font-family:var(--display);font-weight:800;font-size:16px;line-height:1.35;overflow-wrap:anywhere}
/* the fingerprint: 64 characters in eight groups of eight, like a serial plate */
.ap-fp{margin:12px 0 0}
.ap-fp-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 6px}
.ap-fp-h .label{color:var(--graphite)}
.ap-fp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:2px solid var(--ink);margin:0;padding:0;list-style:none}
@media (min-width:640px){.ap-fp-grid{grid-template-columns:repeat(8,minmax(0,1fr))}}
.ap-fp-grid li{margin:0;padding:6px 0 5px;text-align:center;border-right:1px solid var(--silver);border-bottom:1px solid var(--silver);font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:14.5px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.ap-fp-grid li:nth-child(4n){border-right:0}
.ap-fp-grid li:nth-child(n+5){border-bottom:0}
@media (min-width:640px){.ap-fp-grid li:nth-child(4n){border-right:1px solid var(--silver)}.ap-fp-grid li:nth-child(8n){border-right:0}.ap-fp-grid li{border-bottom:0}}
.ap-fp-wait{font-family:var(--display);font-weight:700;font-size:15px;color:var(--graphite);padding:10px 0}
.ap-tag-act{display:flex;flex-wrap:wrap;gap:8px 10px;margin:12px 0 0}
.ap-tag-act .ap-btn{width:auto;min-height:48px;font-size:16.5px;padding:0 14px;flex:1 1 auto}
.ap-confirm{margin:12px 0 0;padding:10px 12px;border:2.5px solid var(--ink);border-left-width:10px}
.ap-confirm p{margin:0 0 8px;font-size:16.5px}
.ap-confirm .ap-tag-act{margin-top:6px}
.ap-meter{height:10px;border:2px solid var(--ink);margin:8px 0 0;position:relative;overflow:hidden}
.ap-meter i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(0);transition:transform .2s}

/* ---------- the script card (server HTML and the camera share it) ---------- */
.ap-script .script-text{font-size:21px;line-height:1.6}
.ap-script .v{font-family:var(--display);font-weight:800;border-bottom:2.5px solid var(--ink);padding:0 2px}
.ap-script .v.blank{font-size:14px}
.ap-rules{list-style:none;margin:6px 0 0;padding:0;border-top:var(--rule);counter-reset:r}
.ap-rules li{counter-increment:r;display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;padding:12px 0;margin:0;border-bottom:var(--hair);font-size:18px;line-height:1.45}
.ap-rules li::before{content:counter(r);display:grid;place-items:center;width:36px;height:36px;border:2.5px solid var(--ink);font-family:var(--display);font-stretch:70%;font-weight:900;font-size:21px;line-height:1}
.ap-rules b{font-family:var(--display);font-stretch:90%;font-weight:850;font-size:19px;display:block;line-height:1.2;margin-bottom:2px}

/* ---------- the camera: a full-screen slate over the live picture ------------ */
.ap-cam{position:fixed;inset:0;z-index:300;background:var(--black);color:var(--white);display:grid;grid-template-rows:auto minmax(0,1fr) auto;font-family:var(--display)}
.ap-cam[hidden]{display:none!important}
.ap-cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--black)}
.ap-cam-top,.ap-cam-bottom,.ap-cam-mid{position:relative;z-index:1}
.ap-cam-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 10px;background:var(--black);border-bottom:2px solid #3A3D42}
.ap-cam-rec{display:flex;align-items:center;gap:10px;font-weight:900;font-stretch:80%;font-size:22px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.ap-cam-rec i{width:16px;height:16px;border:2px solid var(--white);background:transparent}
.ap-cam.is-rec .ap-cam-rec i{background:var(--orange);border-color:var(--orange)}
@media (prefers-reduced-motion:no-preference){.ap-cam.is-rec .ap-cam-rec i{animation:apBlink 1.2s steps(1) infinite}}
@keyframes apBlink{50%{opacity:.25}}
.ap-cam-clock{text-align:right;font-weight:700;font-size:14px;line-height:1.25;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.ap-cam-clock b{display:block;font-weight:900;font-size:19px;font-stretch:84%}
.ap-cam-mid{display:flex;flex-direction:column;justify-content:flex-end;padding:12px 12px 10px;min-height:0;overflow:auto}
.ap-slate{background:var(--black);border:2.5px solid var(--white);max-width:640px;width:100%;margin:0 auto}
.ap-slate-h{display:flex;justify-content:space-between;gap:10px;padding:7px 12px;border-bottom:2px solid #3A3D42;font-stretch:112%;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#C9CDD0}
.ap-slate-t{margin:0;padding:10px 12px 12px;font-family:var(--text);font-size:clamp(19px,5.2vw,25px);line-height:1.45;color:var(--white)}
.ap-slate-t b{font-family:var(--display);font-weight:800;color:var(--white);border-bottom:2px solid var(--orange)}
.ap-slate-t.walk{font-family:var(--display);font-weight:800;font-stretch:88%;font-size:clamp(19px,5vw,24px);line-height:1.3}
.ap-slate ol{margin:0;padding:8px 12px 10px 34px;font-family:var(--display);font-weight:800;font-size:clamp(18px,4.8vw,22px);line-height:1.3}
.ap-slate ol li{margin:0 0 4px}
.ap-cam-msg{margin:0 auto 10px;max-width:640px;width:100%;padding:10px 12px;background:var(--black);border-left:8px solid var(--orange);font-weight:700;font-size:16px;line-height:1.4}
.ap-cam-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:12px 14px calc(env(safe-area-inset-bottom,0px) + 14px);background:var(--black);border-top:2px solid #3A3D42}
.ap-cam-side{display:flex;gap:8px;align-items:center;min-width:0}
.ap-cam-side.r{justify-content:flex-end}
.ap-cb{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:56px;min-height:56px;padding:0 12px;background:var(--black);color:var(--white);border:2px solid var(--white);font-family:var(--display);font-weight:800;font-size:16px;cursor:pointer}
.ap-cb .ico{width:22px;height:22px}
.ap-cb[aria-pressed="true"]{background:var(--white);color:var(--black)}
.ap-cb:focus-visible,.ap-shutter:focus-visible{outline:3px solid var(--white);outline-offset:3px}
.ap-shutter-w{display:grid;justify-items:center;gap:6px}
.ap-shutter-l{font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--white)}
.ap-shutter{display:grid;place-items:center;width:84px;height:84px;padding:0;background:var(--black);border:4px solid var(--white);cursor:pointer;color:var(--on-orange)}
.ap-shutter i{display:block;width:60px;height:60px;background:var(--orange);transition:transform .15s,width .15s,height .15s}
.ap-cam.is-rec .ap-shutter i{width:34px;height:34px;background:var(--white)}
.ap-shutter .vh{color:var(--white)}
.ap-cam-next{width:100%;margin:10px auto 0;max-width:640px;min-height:56px;background:var(--white);color:var(--black);border:0;font-family:var(--display);font-weight:850;font-stretch:88%;font-size:19px;cursor:pointer}
.ap-zoom{display:flex;align-items:center;gap:6px}
.ap-zoom output{min-width:44px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
@media (orientation:landscape) and (max-height:540px){
  .ap-cam{grid-template-columns:minmax(0,1fr) 120px;grid-template-rows:auto minmax(0,1fr)}
  .ap-cam-top{grid-column:1 / -1}
  .ap-cam-mid{grid-column:1;justify-content:flex-end}
  .ap-cam-bottom{grid-column:2;grid-row:2;grid-template-columns:1fr;grid-template-rows:1fr auto 1fr;border-top:0;border-left:2px solid #3A3D42;padding:10px}
  .ap-cam-side{flex-direction:column}
  .ap-slate{max-width:520px;margin:0}
  .ap-slate-t{font-size:18px}
}

/* ---------- papers: photos and the coach ------------------------------------ */
.ap-tips{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:0;border-top:var(--hair)}
.ap-tips li{position:relative;padding:9px 0 9px 26px;margin:0;border-bottom:var(--hair);font-size:17px;line-height:1.45}
.ap-tips li::before{content:"";position:absolute;left:2px;top:17px;width:10px;height:10px;background:var(--ink)}
.ap-pages{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:359px){.ap-pages{grid-template-columns:minmax(0,1fr)}}
@media (min-width:600px){.ap-pages{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ap-page{margin:0;border:2.5px solid var(--ink);background:var(--paper);display:flex;flex-direction:column;min-width:0}
.ap-page-h{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:6px 8px;background:var(--ink);color:var(--paper);font-family:var(--display);font-weight:800;font-size:15px}
.ap-page-img{aspect-ratio:3/4;background:var(--band);display:grid;place-items:center;overflow:hidden;border-bottom:2px solid var(--ink)}
.ap-page-img img{width:100%;height:100%;object-fit:contain}
.ap-page-img span{font-family:var(--display);font-size:14px;color:var(--graphite);padding:8px;text-align:center}
.ap-page-b{padding:8px;display:grid;gap:8px}
.ap-page-fp{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:13px;color:var(--graphite);overflow-wrap:anywhere;line-height:1.35}
.ap-page .ap-sel{min-height:46px;font-size:15px;padding:6px 34px 6px 8px;background-position:right 6px center;background-size:18px}
.ap-page-act{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0}
.ap-page-act button{min-width:0;min-height:46px;margin:0 -2px 0 0;border:2px solid var(--ink);background:var(--paper);font-family:var(--display);font-weight:800;font-size:14px;cursor:pointer;padding:0 4px}
.ap-page-act button:hover{background:var(--band)}
.ap-page-act button:disabled{opacity:.35;cursor:default}
.ap-page .ap-confirm{margin:0}
.ap-coach{border:2.5px solid var(--ink);background:var(--paper);margin:16px 0 0}
.ap-coach-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:2.5px solid var(--ink)}
.ap-coach-tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;padding:6px 4px;border:0;border-right:var(--hair);background:var(--paper);font-family:var(--display);font-weight:800;font-size:14px;line-height:1.15;cursor:pointer}
.ap-coach-tabs button:last-child{border-right:0}
.ap-coach-tabs button .n{display:grid;place-items:center;width:30px;height:30px;border:2.5px solid var(--ink);font-stretch:70%;font-weight:900;font-size:18px}
.ap-coach-tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.ap-coach-tabs button[aria-selected="true"] .n{background:var(--orange);color:var(--on-orange);border-color:var(--black)}
.ap-coach-tabs button.is-found .n::after{content:"";position:absolute}
.ap-coach-tabs .fd{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;opacity:.85}
.ap-coach-art{padding:12px;border-bottom:2.5px solid var(--ink);background:var(--paper)}
.ap-coach-art svg{display:block;width:100%;max-width:520px;height:auto;margin:0 auto}
.ap-coach-panel{padding:14px 14px 4px}
.ap-coach-panel h3{font-size:clamp(23px,5vw,27px);font-stretch:82%;margin:0 0 8px;line-height:1.1}
.ap-coach-panel p{font-size:17.5px;line-height:1.5;margin:0 0 .7em}
.ap-coach-cap{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:10px 12px;border-top:2.5px solid var(--ink);font-size:15px;line-height:1.45}
.ap-coach-cap b{font-family:var(--display);font-weight:800;white-space:nowrap}
.ap-coach-list{list-style:none;margin:0;padding:0}
.ap-coach-list > .cz-panel{margin:0;padding:14px 14px 4px;border-bottom:2.5px solid var(--ink)}
.ap-coach-list > .cz-panel:last-child{border-bottom:0}
.ap-coach-list h3{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:23px;font-stretch:82%;margin:0 0 8px;line-height:1.1}
.ap-coach-list h3 .n{display:grid;place-items:center;width:34px;height:34px;background:var(--ink);color:var(--paper);font-stretch:70%;font-weight:900;font-size:20px}
.ap-coach-list p{font-size:17.5px;line-height:1.5;margin:0 0 .7em}
.ap-found{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 14px}
.ap-found .ap-c{flex:1 1 220px;margin:0}
/* wide screens: the drawing and its explanation side by side, in the margin's width */
@media (min-width:1100px){
  .ap-coach{width:calc(var(--col) + var(--gap) + var(--note));display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"tabs tabs" "art list" "cap cap"}
  .ap-coach-tabs{grid-area:tabs}
  .ap-coach-art{grid-area:art;border-bottom:0;border-right:2.5px solid var(--ink);padding:18px}
  .ap-coach-list{grid-area:list}
  .ap-coach-list > .cz-panel{border-bottom:0;padding:20px 22px 8px}
  .ap-coach-cap{grid-area:cap}
}
/* the coach drawing: zones light up in orange (look here) */
.cz .cz-bg{fill:transparent;stroke:none}
.cz.on .cz-bg{fill:var(--orange);stroke:var(--black);stroke-width:2.5}
.cz.on text{fill:var(--on-orange)}
.cz.on .fg-hair{stroke:var(--on-orange)}
.cz.on .fg-check{fill:var(--orange);stroke:var(--on-orange)}
.cz{cursor:pointer}
.cz-tag rect{fill:var(--ink)}
.cz-tag text{fill:var(--paper);font-weight:900;font-size:16px;font-stretch:70%;font-family:var(--display)}
.cz-tag.on rect{fill:var(--orange);stroke:var(--black);stroke-width:2}
.cz-tag.on text{fill:var(--on-orange)}
.fg-hand{fill:var(--ink);font-family:var(--text)!important;font-style:italic;font-size:14px}
@media (prefers-reduced-motion:no-preference){.cz .cz-bg{transition:fill .2s}}

/* ---------- journal tables: one ruled card per item ---------------------------- */
.ap-rows{margin:10px 0 0;border-top:var(--rule)}
.ap-row{display:grid;grid-template-columns:minmax(0,1fr);gap:0 16px;padding:10px 0 4px;border-bottom:2px solid var(--ink)}
.ap-row-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 6px}
.ap-row-n{font-family:var(--display);font-stretch:112%;font-weight:700;font-size:14px;letter-spacing:.07em;text-transform:uppercase;color:var(--graphite)}
.ap-row-x{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;border:0;background:none;font-family:var(--display);font-weight:700;font-size:15px;color:var(--graphite);cursor:pointer}
.ap-row-x:hover{color:var(--ink);text-decoration:underline}
.ap-row-x .ico{width:16px;height:16px}
.ap-row .ap-f,.ap-row .ap-ch{margin:0 0 12px}
.ap-row .ap-l{font-size:15.5px;margin-bottom:5px}
.ap-row .ap-in{min-height:50px;font-size:17.5px}
.ap-row .ap-c > span{min-height:48px;font-size:16px;padding:8px 10px}
.ap-row .ap-opts.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ap-row [data-ap-confirm-slot]:empty{display:none}
.ap-row .ap-confirm{margin:0 0 12px}
@media (min-width:760px){
  .ap-row{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  .ap-row-h,.ap-row > .ap-ch,.ap-row [data-ap-confirm-slot]{grid-column:1 / -1}
  .ap-row > .ap-ch{order:3;max-width:460px}
  .ap-row > [data-ap-confirm-slot]{order:4}
}
.ap-print-only{display:none}
.ap-add{margin:12px 0 0}
/* the six steps, ticked with a time */
.ap-steps .step-body .ap-when{justify-self:start;width:fit-content;display:inline-block;margin:0 0 8px;font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--ink);border-bottom:2px solid var(--ink)}
.ap-steps .step-body .ap-when:empty{display:none}
.ap-steps .step-body .ap-f{margin:8px 0 6px;max-width:30em}
.ap-steps .step-body .ap-go{margin:0 0 8px}
.ap-steps p.why{font-size:16.5px}
.ap-go{justify-self:start;width:fit-content;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--display);font-weight:800;font-size:17px;text-decoration:none;border-bottom:3px solid var(--ink)}
.ap-go .ico{width:18px;height:18px}

/* ---------- the short CPR line, the packet, help ------------------------------ */
.ap-cpr{margin-top:34px}
.ap-packet{list-style:none;margin:10px 0 0;padding:0;border-top:var(--rule)}
.ap-packet li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:start;padding:12px 0;margin:0;border-bottom:var(--hair)}
.ap-packet li::after{content:"Not yet";display:inline-flex;align-items:center;gap:7px;margin-top:3px;font-family:var(--display);font-weight:700;font-size:14px;color:var(--graphite);white-space:nowrap}
.ap-packet li.is-done::after{content:"Ready";color:var(--ink)}
.ap-packet li > span{grid-column:1;grid-row:1}
.ap-packet b{display:block;font-family:var(--display);font-stretch:90%;font-weight:850;font-size:19px;line-height:1.2}
.ap-packet span{display:block;font-size:16px;line-height:1.45;color:var(--graphite);margin-top:2px}
.ap-statement{font-family:var(--text);font-size:18px;line-height:1.6}
.ap-kbd{display:inline-block;padding:1px 7px;border:2px solid var(--ink);font-family:var(--display);font-weight:800;font-size:.85em;letter-spacing:.06em}
.ap-store{display:grid;gap:4px;margin:10px 0 0}
.ap-store-bar{height:14px;border:2.5px solid var(--ink);position:relative;overflow:hidden;background:var(--paper)}
.ap-store-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink);min-width:3px}
.ap-store-t{font-family:var(--display);font-weight:700;font-size:15px;color:var(--graphite)}
.ap-state{display:flex;width:fit-content;max-width:100%;align-items:flex-start;gap:9px;margin:0 0 10px;padding:7px 12px;border:2px solid var(--ink);font-family:var(--display);font-weight:800;font-size:15px;line-height:1.35}
.ap-state::before{content:"";flex:none;width:11px;height:11px;margin-top:4px;border:2px solid var(--ink)}
.ap-state.is-on::before{background:var(--ink)}

/* ---------- the PIN lock ----------------------------------------------------- */
html.ap-locked,html.ap-locked body{overflow:hidden}
.ap-lock{position:fixed;inset:0;z-index:400;background:var(--paper);color:var(--ink);overflow:auto;display:flex;justify-content:center}
.ap-lock[hidden]{display:none!important}
.ap-lock-in{width:100%;max-width:420px;padding:calc(env(safe-area-inset-top,0px) + 24px) 16px 24px;display:flex;flex-direction:column}
.ap-lock-mark{display:flex;align-items:center;gap:10px;margin:0 0 20px;font-family:var(--display);font-stretch:112%;font-weight:700;font-size:14px;letter-spacing:.07em;text-transform:uppercase;color:var(--graphite)}
.ap-lock-mark svg{width:28px;height:auto;color:var(--ink)}
.ap-lock h2{font-size:clamp(30px,8vw,40px);font-stretch:76%;font-weight:900;line-height:1;margin:0 0 8px}
.ap-lock p{font-size:17px;margin:0 0 14px}
.ap-dots{display:flex;gap:10px;margin:6px 0 8px;min-height:24px}
.ap-dots i{width:20px;height:20px;border:2.5px solid var(--ink)}
.ap-dots i.on{background:var(--ink)}
.ap-lock-err{min-height:26px;font-family:var(--display);font-weight:800;font-size:16px;margin:0 0 6px}
.ap-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2.5px solid var(--ink);border-left:2.5px solid var(--ink)}
.ap-keys button{min-height:70px;border:0;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);background:var(--paper);font-family:var(--display);font-stretch:80%;font-weight:900;font-size:30px;cursor:pointer;color:var(--ink)}
.ap-keys button:hover{background:var(--band)}
.ap-keys button:active{background:var(--ink);color:var(--paper)}
.ap-keys button.sm{font-size:16px;font-stretch:100%;font-weight:800}
.ap-keys button:focus-visible{outline:3px solid var(--ink);outline-offset:-6px}
.ap-lock-foot{margin-top:18px}
.ap-lock-foot details summary{min-height:44px;display:flex;align-items:center;font-family:var(--display);font-weight:800;font-size:16px;cursor:pointer}

/* ---------- installed (standalone): the five tabs sit at the bottom, like an app.
   The media query covers Android; app.js adds html.ap-standalone for iPhones
   (navigator.standalone) and for testing. */
@media screen and (display-mode:standalone) and (max-width:1023px){
  .is-app .dock{display:none!important}
  .is-app .app-tabs{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--paper);padding:0 0 env(safe-area-inset-bottom,0px);border-top:var(--rule)}
  .is-app .app-tabs ol{margin:0;border:0;max-width:none}
  .is-app .app-tabs a{min-height:64px}
  body.is-app{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))!important}
  .is-app .foot{padding-bottom:80px}
}
@media screen and (max-width:1023px){
  html.ap-standalone .is-app .dock{display:none!important}
  html.ap-standalone .is-app .app-tabs{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--paper);padding:0 0 env(safe-area-inset-bottom,0px);border-top:var(--rule)}
  html.ap-standalone .is-app .app-tabs ol{margin:0;border:0;max-width:none}
  html.ap-standalone .is-app .app-tabs a{min-height:64px}
  html.ap-standalone body.is-app{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))!important}
  html.ap-standalone .is-app .foot{padding-bottom:80px}
}

/* ---------- the packet as it prints (Send screen) ----------------------------- */
.ap-print-packet{display:none}
.ap-pp-h{font-size:15pt;margin:10pt 0 4pt;padding-top:5pt;border-top:1.5pt solid #000}

/* ---------- print: the screen as a filled-in form, black on white ------------- */
@media print{
  .is-app .app-tabs{display:none!important}
  .ap-in::placeholder,.ap-ta::placeholder{color:transparent!important}
  .ap-in::-webkit-calendar-picker-indicator{display:none!important}
  .ap-in.is-empty::-webkit-datetime-edit{color:transparent!important}
  [data-ap="send"] > :not(.ap-print-packet):not(.ap-cpr):not(.ap-lede){display:none!important}
  [data-ap="send"] > .ap-small{display:none!important}
  .ap-print-packet{display:block}
  .ap-print-packet ol{margin:0 0 6pt;padding-left:16pt;font-size:11pt}
  .ap-print-packet .ap-statement{font-size:12pt;line-height:1.45}
  .ap-btn,.ap-btns,.ap-tag-act,.ap-confirm,.ap-cam,.ap-lock,.ap-add,.ap-row-x,.ap-saved,.ap-banner,.ap-page-act,.ap-coach-tabs,.ap-file,.ap-meter,.ap-store,.ap-noprint,.ap-tag video,.ap-page-img,.ap-go{display:none!important}
  html.ap-locked body>*{display:none!important}
  .ap-sec{margin:10pt 0 0}
  .ap-lede{font-size:11.5pt;margin:0 0 5pt}
  .ap-small,.ap-hint{font-size:10pt;color:#000}
  .ap-l{font-size:11pt;margin:0 0 2pt}
  .ap-f{margin:0 0 6pt;break-inside:avoid}
  .ap-in,.ap-ta,.ap-sel{border:0;border-bottom:1pt solid #000;min-height:0;padding:2pt 0 3pt;font-size:12pt;background:none;max-width:none!important;color:#000}
  .ap-ta{min-height:1.2in;border:1pt solid #000;padding:4pt}
  .ap-sel{background:none}
  .ap-c > span{min-height:0;padding:3pt 6pt;border:1pt solid #000;font-size:10.5pt;background:#fff!important;color:#000!important}
  .ap-c > span::before{width:9pt;height:9pt;border:1pt solid #000}
  .ap-c input:checked + span::before{background:#000;box-shadow:none}
  .ap-opts{grid-template-columns:repeat(3,1fr)!important}
  .ap-row{grid-template-columns:1.4fr 1fr!important;gap:0 10pt;padding:3pt 0;border-color:#000;break-inside:avoid}
  .ap-row-h,.ap-row > .ap-ch{grid-column:1 / -1}
  .ap-row-n{font-size:8.5pt;color:#000}
  .ap-row .ap-l{font-size:8.5pt}
  .ap-row .ap-c > span{min-height:0;padding:2pt 5pt;font-size:9.5pt}
  .ap-print-only{display:block}
  .ap-order a{min-height:0;padding:4pt 0}
  .ap-tag,.ap-page{border:1.2pt solid #000;break-inside:avoid}
  .ap-coach{border:1.2pt solid #000;display:grid;grid-template-columns:1.95in minmax(0,1fr);align-items:start}
  .ap-coach-art{break-inside:avoid;grid-row:1 / span 1;border-bottom:0!important;border-right:1pt solid #000;padding:6pt}
  .ap-coach-list{grid-column:2}
  .ap-coach-cap{grid-column:1 / -1}
  .ap-tag-h,.ap-page-h{background:#fff;color:#000;border-bottom:1pt solid #000;padding:3pt 6pt}
  .ap-pages{grid-template-columns:repeat(3,1fr)}
  .ap-fp-grid{grid-template-columns:repeat(8,1fr)!important;border:1pt solid #000}
  .ap-fp-grid li{font-size:9pt;padding:2pt 0;border-color:#000!important;border-bottom:0!important}
  .ap-kv dt,.ap-kv dd{font-size:10pt}
  .ap-coach-art{border-bottom:1pt solid #000}
  .ap-coach-art svg{max-width:none}
  .ap-coach-list > .cz-panel{border-bottom:1pt solid #000;break-inside:avoid;padding:5pt 6pt}
  .ap-coach-list h3{font-size:13pt}
  .ap-coach-list p{font-size:11pt}
  .ap-coach-panel{display:none}
  .ap-rules li{font-size:11.5pt;padding:4pt 0;grid-template-columns:22pt 1fr;break-inside:avoid}
  .ap-rules li::before{width:16pt;height:16pt;font-size:11pt;border:1pt solid #000}
  .ap-rules b{font-size:12pt}
  .ap-packet li{padding:4pt 0;break-inside:avoid}
  .ap-packet b{font-size:12pt}
  .ap-packet span{font-size:10.5pt;color:#000}
  .cz.on .cz-bg{fill:#fff;stroke:#000}
  .cz.on text{fill:#000}
  html.ap-print-blank .ap-in,html.ap-print-blank .ap-ta,html.ap-print-blank .ap-sel{color:transparent!important}
  html.ap-print-blank .ap-c input:checked + span::before{background:#fff}
  html.ap-print-blank .ap-when{display:none!important}
  html.ap-print-blank .step-k .sq{color:#000!important}
}