/* Settings → Control → Blocking (routines/blocked.js), thing first.
   Every target is 44px or more; the big button and the rows are bigger,
   because "my brain doesnt find where to press struff very easy". */
/* The gap at the foot keeps the corner help button off the last fold. */
#routineLocks{display:flex;flex-direction:column;gap:14px;padding-bottom:72px}
#routineLocks p{margin:0}
.lk-state{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;gap:6px}
.lk-state-top{display:flex;align-items:center;gap:10px}
.lk-state-top b{font-size:19px;font-weight:600}
.lk-dot{width:10px;height:10px;border-radius:50%;background:var(--grey);flex:none}
.lk-dot.on{background:var(--gold)}
.lk-state-sub{font-size:14px;color:var(--grey);line-height:1.45}
.lk-state-done{font-size:14px;color:var(--gold)}
.lk-gap{display:flex;align-items:center;gap:12px;border:1px solid rgba(228,160,160,.35);background:rgba(228,160,160,.08);border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.4}
.lk-gap span{flex:1}
.lk-gap-fix{min-height:44px;padding:0 14px;background:none;border:1px solid rgba(228,160,160,.5);border-radius:10px;color:var(--warn);font:inherit;cursor:pointer}
.lk-big{min-height:56px;width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--gold);color:#0B0B0B;border:0;border-radius:12px;font:inherit;font-size:17px;font-weight:600;cursor:pointer}
.lk-big.quiet{background:none;color:var(--gold);border:1px solid var(--gold)}
.lk-big:disabled{opacity:.45;cursor:default}
.lk-plus{font-size:24px;font-weight:400;line-height:1}
.lk-eye{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);padding-bottom:6px}
.lk-list{display:flex;flex-direction:column}
.lk-item{border-bottom:1px solid var(--line)}
.lk-item:first-of-type{border-top:1px solid var(--line)}
.lk-item.open{background:var(--panel);border:1px solid rgba(var(--gold-rgb),.45);border-radius:14px;margin:8px 0}
.lk-row{width:100%;min-height:60px;display:flex;align-items:center;gap:12px;background:none;border:0;padding:8px 0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.lk-item.open .lk-row{padding:8px 12px}
.lk-mono{width:36px;height:36px;border-radius:50%;background:var(--well);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:14px;flex:none}
.lk-txt{flex:1;min-width:0;display:grid;gap:2px}
.lk-txt b{font-size:16px;font-weight:500;overflow-wrap:anywhere}
.lk-txt span{font-size:13px;color:var(--grey);overflow-wrap:anywhere}
.lk-st{font-size:12px;flex:none}
.lk-st.on{color:var(--gold)}
.lk-st.off{color:var(--grey)}
.lk-st.warn{color:var(--warn)}
.lk-chev{color:var(--grey);font-size:20px;flex:none}
.lk-pad{width:16px;height:16px;fill:none;stroke:var(--grey);stroke-width:2;stroke-linecap:round;flex:none}
.lk-code-top .lk-pad{width:26px;height:26px;stroke:var(--gold);stroke-width:1.8}
.lk-open{display:grid;gap:12px;padding:0 12px 14px}
.lk-sub{font-size:13px;color:var(--grey)}
.lk-lab{font-size:15px;font-weight:500}
.lk-when{display:flex;flex-wrap:wrap;gap:8px}
.lk-chip{min-height:44px;padding:0 16px;background:none;border:1px solid rgba(var(--gold-rgb),.45);border-radius:100px;color:inherit;font:inherit;font-size:15px;cursor:pointer}
.lk-chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#0B0B0B;font-weight:500}
.lk-said{font-size:14px;color:var(--grey);min-height:0}
.lk-said:empty{display:none}
.lk-warn{display:grid;gap:10px;border:1px solid rgba(228,160,160,.35);background:rgba(228,160,160,.08);border-radius:10px;padding:12px;font-size:14px;line-height:1.45}
.lk-wider{display:flex;flex-wrap:wrap;gap:8px}
.lk-wider .btn-s{min-height:44px}
.lk-acts{display:flex;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.lk-acts .btn-s{min-height:48px;flex:1}
.lk-ask{flex-basis:100%;font-size:15px}
.lk-red{color:var(--warn);border-color:rgba(228,160,160,.6)}
.lk-foot{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:6px}
.lk-fold{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:none;border:0;border-bottom:1px solid var(--line);color:inherit;font:inherit;font-size:16px;padding:0;text-align:left;cursor:pointer}
.lk-fold-st{font-size:13px;color:var(--grey);text-align:right}
.lk-times{padding:4px 0 12px}
.lk-code{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 0}
.lk-code p{flex-basis:100%}
.lk-code input{flex:1;min-width:0;min-height:48px}
.lk-code.held{background:var(--panel);border:1px solid rgba(var(--gold-rgb),.55);border-radius:14px;padding:16px}
.lk-code-top{flex-basis:100%;display:flex;align-items:center;gap:12px;font-size:18px}
.lk-code .set-name{flex-basis:100%}
#lkCode input,.lk-sheet input{background:var(--well);color:var(--white);border:1px solid var(--line);border-radius:10px;font:inherit;padding:0 14px}

/* The sheet: from the bottom on the phone, centred on the computer. */
#lkScrim{align-items:flex-end;padding:0}
#lkScrim .lk-sheet{width:100%;max-width:560px;max-height:92vh;overflow-y:auto;box-sizing:border-box;background:#141310;border-top:1px solid rgba(var(--gold-rgb),.45);border-radius:18px 18px 0 0;padding:16px 16px calc(24px + var(--inset-bottom,0px));display:flex;flex-direction:column;gap:12px}
@media (min-width:881px){ #lkScrim{align-items:center} #lkScrim .lk-sheet{border:1px solid rgba(var(--gold-rgb),.45);border-radius:18px} }
.lk-sheet-top{display:flex;align-items:center;justify-content:space-between}
.lk-sheet-top b{font-size:18px}
.lk-x{min-width:44px;min-height:44px;background:none;border:0;color:var(--grey);font-size:24px;cursor:pointer}
#lkWhat{min-height:48px;font-size:17px;border-color:var(--gold)}
.lk-matches{display:flex;flex-direction:column;gap:8px}
.lk-matches:empty{display:none}
.lk-match{min-height:52px;display:flex;align-items:center;gap:12px;background:none;border:1px solid var(--line);border-radius:10px;padding:0 12px;color:inherit;font:inherit;text-align:left;cursor:pointer}
.lk-match[aria-pressed="true"]{background:rgba(var(--gold-rgb),.14);border-color:var(--gold)}
.lk-match .lk-mono{width:32px;height:32px;font-size:13px}
.lk-match-nm{flex:1;font-size:16px;overflow-wrap:anywhere}
.lk-match-what{font-size:13px;color:var(--grey)}
.lk-note{font-size:13px;color:var(--grey);text-align:center}