/* The own-Kroger-app guide: paper, taped-down screens and one brick accent for the marks. */
.kguide{max-width:none;margin-top:18px;border-top:1px solid var(--line);padding-top:6px}
.kguide>summary{font-size:14px;color:var(--muted);font-weight:400}
.kguide[open]>summary{color:var(--ink);font-weight:600}
.kg-saved-line{margin:0 0 8px;font-size:14px;color:var(--green);font-weight:600}
.kg-intro{display:flex;align-items:center;gap:14px;margin:6px 0 16px}
.kg-intro p{margin:0;max-width:52ch}
.kg-doodle{flex:none;width:92px;height:auto}
.kg-count{margin:0 0 2px;font-size:13px;color:var(--red);font-weight:600}
.kg-title{margin:0 0 14px;font-size:clamp(21px,3vw,25px);line-height:1.2;scroll-margin-top:72px}
.kg-title:focus{outline:none}
.kg-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.kg-layout.is-form{grid-template-columns:minmax(0,480px)}
.kg-figure{position:relative;margin:0;min-width:0}
.kg-figure::before{content:"";position:absolute;z-index:1;top:-8px;left:50%;width:74px;height:18px;margin-left:-37px;background:var(--ochre);opacity:.85;transform:rotate(-1.6deg);border-radius:2px;pointer-events:none}
.kg-figure.is-sketch::before{background:var(--blue);opacity:1}
.kg-shot{display:block;background:var(--white);border:1.5px solid var(--ink);border-radius:var(--panel-radius);overflow:hidden;line-height:0}
.kg-shot img{display:block;width:100%;height:auto}
.kg-shot:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.kg-source{margin-top:7px;font-size:13px;line-height:1.35;color:var(--muted)}
.kg-figure.is-sketch .kg-source{color:var(--ink);font-weight:600}
.kg-marks{list-style:none;counter-reset:mark;margin:0 0 14px;padding:0}
.kg-marks li{counter-increment:mark;position:relative;min-height:28px;padding-left:38px;margin:0 0 12px;line-height:1.45}
.kg-marks li::before{content:counter(mark);position:absolute;left:0;top:-1px;width:27px;height:27px;border-radius:50%;background:var(--red);color:var(--white);display:grid;place-items:center;font-size:14px;font-weight:700}
.kg-words code{overflow-wrap:anywhere}
.kg-open{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;text-decoration:none}
.kg-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center;margin:0 0 14px}
.kg-copy-label{grid-column:1/-1;font-size:13px;color:var(--muted)}
.kg-copy-value{display:block;padding:10px 12px;background:var(--blue);border-radius:var(--button-radius);font:13px/1.45 ui-monospace,Menlo,monospace;color:var(--ink);overflow-wrap:anywhere;user-select:all;min-width:0}
.kg-copy-button{min-height:44px;padding:8px 14px}
.kg-copy-status{grid-column:1/-1;min-height:18px;font-size:13px;color:var(--muted)}
.kg-note,.kg-lede{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
.kg-lede{margin:0 0 14px;font-size:15px;color:var(--ink)}
.kg-form{gap:14px}
.kg-form input:not([type=checkbox]){width:100%;box-sizing:border-box;font-size:16px}
.kg-show{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px;cursor:pointer}
.kg-show input{margin:0;width:18px;height:18px;accent-color:var(--green)}
.kg-form-actions{display:flex;gap:10px}
.kg-error{margin:6px 0 0;color:var(--red);font-size:15px;line-height:1.45}
.kg-error:focus{outline:none}
.kg-error .text-button,.kg-check.is-bad .text-button{color:var(--red);font:inherit;text-decoration:underline;min-height:44px;vertical-align:baseline}
.kg-checks{margin:14px 0 0}
.kg-check{margin:0 0 6px;font-size:15px;line-height:1.45;color:var(--green)}
.kg-check.is-bad{color:var(--red)}
.kg-connect-row{margin:4px 0 0}
.kg-nav{display:flex;justify-content:space-between;gap:10px;margin:22px 0 8px}
.kg-nav .kg-next,.kg-nav .kg-done{margin-left:auto}
.kg-nav button{min-height:44px}
.store-block-note{margin:10px 0 0;color:var(--red);line-height:1.45}
.store-block-note:focus{outline:none}
.gmail-note{margin:6px 0 12px;font-size:14px;line-height:1.5;color:var(--red)}
.gmail-note summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
.gmail-note p{margin:0 0 8px;color:var(--ink)}
.gmail-note a{color:var(--red)}
@media (max-width:760px){
 .kg-layout{grid-template-columns:minmax(0,1fr);gap:16px}
 .kg-intro{align-items:flex-start}
 .kg-doodle{width:72px}
 .kg-nav{margin-bottom:64px}
}
@media (forced-colors:active){
 .kg-marks li::before{background:Highlight;color:HighlightText;forced-color-adjust:none}
 .kg-figure::before{display:none}
 .kg-shot{border-color:CanvasText}
 .kg-copy-value{border:1px solid CanvasText}
}

#app .kguide>summary { display:list-item; list-style:disclosure-closed inside; min-height:44px; padding:12px 0; cursor:pointer; }
#app .kguide[open]>summary { list-style-type:disclosure-open; }
#app .kguide>summary::-webkit-details-marker { display:inline; }