.check-in{margin:16px 0 22px;padding:24px;border:1px solid #5776a36b;border-radius:14px;background:radial-gradient(ellipse at 95% 0%,#6375c22e,transparent 50%),linear-gradient(140deg,#111c31f7,#10182bf7);box-shadow:0 18px 50px #0003;color:#e8efff}
.check-in-head{display:flex;align-items:start;justify-content:space-between;gap:20px}.check-in-kicker{color:#b8d8ff;font:700 10px/1.5 ui-monospace,monospace;letter-spacing:.13em}.check-in h3{font-size:21px;margin:8px 0}.check-in-intro,.check-in-how,.check-in-caution{font-size:13px;line-height:1.65;color:#bbcbe0}.check-in-intro{margin:0}.check-in-how{margin:17px 0;color:#cfddf2}.check-in-private{font-size:11px;line-height:1.5;color:#a9c6e7;text-align:right}.check-in-form{display:grid;grid-template-columns:minmax(140px,.8fr) minmax(170px,1fr) auto;gap:14px;align-items:start}.check-in-form label{display:grid;gap:7px;font-size:12px;font-weight:700;color:#d9e7ff}.check-in select,.check-in input{width:100%;height:42px;border:1px solid #607a9b;border-radius:7px;background:#0c1728;color:#f4f8ff;padding:8px 12px;font:inherit}.check-in-input{position:relative}.check-in-input span{position:absolute;right:12px;top:10px}.check-in-input input{padding-right:30px}.check-in-hint{font-size:11px;font-weight:400;line-height:1.5;color:#aabbd1}.check-in-save,.check-in-clear{font:inherit;font-size:12px;font-weight:700;line-height:1.3;cursor:pointer;border-radius:7px;padding:11px 15px}.check-in-save{margin-top:22px;background:#bedcff;color:#102039;border:1px solid #bedcff}.check-in-clear{background:transparent;border:1px solid #718caf;color:#dbeaff}.check-in :is(button,input,select,a):focus-visible{outline:3px solid #d9c7ff;outline-offset:3px}.check-in-results{margin-top:16px}.check-in-results>p{font-size:13px;color:#bacbe0}.check-in-snapshots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.check-in-snapshots>div{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:3px 12px;padding:12px;border:1px solid #708ab94a;border-radius:9px;background:#0c1424a8}.check-in-snapshots span,.check-in-snapshots time{font-size:11px;color:#b4c8e3}.check-in-snapshots strong{font-size:20px;color:#d5e9ff}.check-in-snapshots time{grid-column:1/-1}.check-in-diff{font-weight:700;color:#d3e8ff!important}.check-in-caution{padding:11px 13px;background:#c3ceff0b;border-left:2px solid #92b9e6;margin:12px 0}.check-in-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.check-in-actions a{font-size:12px;font-weight:700;color:#c0dfff}.check-in-message{min-height:1em;font-size:12px;color:#c0dfff;margin:8px 0 0}@media(max-width:600px){.check-in{padding:18px}.check-in-head{display:block}.check-in-private{display:block;text-align:left;margin-top:8px}.check-in-form{grid-template-columns:1fr}.check-in-save{margin-top:0}.check-in-actions{align-items:start;flex-direction:column}.check-in-snapshots{grid-template-columns:1fr 1fr}}
/* Optional schedule provides context for the manual comparison. */
.check-in-form{grid-template-columns:minmax(125px,.8fr) minmax(145px,.9fr) minmax(190px,1fr) auto}
.check-in-schedule-hint,.check-in-recorded-schedule{font-size:11px;font-weight:400;line-height:1.5;color:#b6cae1}
.check-in-recorded-schedule{grid-column:1/-1}
.check-in-context{font-size:12px;line-height:1.6;color:#c4d8f1!important}
@media(max-width:850px){.check-in-form{grid-template-columns:1fr 1fr}.check-in-save{margin-top:22px}}
@media(max-width:600px){.check-in-form{grid-template-columns:1fr}.check-in-save{margin-top:0}}

/* Keep the manual check form legible and comfortable to use on touch screens. */
.check-in-form label{min-width:0;font-size:13px;line-height:1.45}
.check-in select,.check-in input{min-width:0;min-height:44px}
.check-in-save,.check-in-clear{min-height:44px}
.check-in-save{margin-top:26px}
.check-in-hint,.check-in-schedule-hint,.check-in-recorded-schedule{font-size:12px;line-height:1.6}
.check-in-snapshots>div{min-width:0;overflow-wrap:anywhere}
.check-in-actions a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:850px){.check-in-save{margin-top:26px}}
@media(max-width:600px){
  .check-in select,.check-in input{font-size:16px}
  .check-in-save{margin-top:0}
  .check-in-actions{gap:4px}
}