/* Inlogscherm: links het slot, rechts het formulier. De grendel schuift open bij een geslaagde inlog. */
.login { display: grid; grid-template-columns: minmax(340px, 42%) 1fr; min-height: 100dvh; }
.brand { background: var(--lood); color: #e6ecef; padding: 44px 44px 36px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.wordmark { font-family: var(--f-display); font-weight: 800; font-size: 46px; letter-spacing: -.02em; line-height: 1; }
.tagline { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 23px; line-height: 1.3; color: #c9d4db; margin-top: 12px; max-width: 18ch; }
.brand .bolt { width: 100%; max-width: 400px; height: auto; align-self: center; }
.brand-foot { font-size: 13.5px; line-height: 1.5; color: #9fb0ba; max-width: 38ch; }
.panel { display: grid; align-content: center; justify-items: center; padding: 40px 28px; }
.card { width: 100%; max-width: 26rem; }
.card h1 { font-size: 36px; font-weight: 700; }
.lead { margin-top: 8px; font-size: 15px; font-weight: 600; }
.sub { margin-top: 3px; color: var(--ink-3); font-size: 14px; }
.card form { margin-top: 24px; }
.pw-row { position: relative; }
.pw-row .field { padding-right: 46px; }
.pw-row .eye { position: absolute; right: 4px; top: 4px; }
.card .btn-primary { width: 100%; margin-top: 20px; min-height: 46px; font-size: 15.5px; }
.links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; font-size: 14px; }
.links button { background: none; border: 0; padding: 0; color: var(--acc-text); text-decoration: underline; text-underline-offset: 2px; }
.status { margin-top: 10px; font-size: 13.5px; color: var(--ink-3); min-height: 1.4em; }
.notes { list-style: none; padding: 0; margin: 28px 0 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.5; border-top: 1px solid var(--line); padding-top: 16px; }
.notes li { margin: 0 0 6px; }
.notes strong { color: var(--ink-2); font-weight: 600; }
.meter { display: flex; gap: 4px; margin-top: 8px; }
.meter i { flex: 1; height: 5px; border-radius: 3px; background: var(--line); }
.meter[data-s="0"] i:nth-child(-n+1), .meter[data-s="1"] i:nth-child(-n+2) { background: var(--danger); }
.meter[data-s="2"] i:nth-child(-n+3) { background: var(--acc); }
.meter[data-s="3"] i:nth-child(-n+4), .meter[data-s="4"] i:nth-child(-n+5) { background: var(--ok); }
.meter-label { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; display: flex; justify-content: space-between; gap: 12px; }
.recovery { margin: 18px 0 6px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--raise); display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 12px; font-family: var(--f-mono); font-size: 17px; letter-spacing: .04em; text-align: center; }
.check { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 14px; line-height: 1.4; }
.check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--acc); }
.row2 { display: flex; gap: 8px; margin-top: 12px; }
.row2 .btn { flex: 1; }
.nojs { padding: 24px; }

/* de grendel zelf */
.bolt .plate { fill: #27343d; stroke: #3c4e5a; stroke-width: 2; }
.bolt .hole { fill: #141d23; stroke: #3c4e5a; stroke-width: 1.5; }
.bolt .screw { fill: #3c4e5a; }
.bolt .brass { fill: #c79a3a; stroke: #8e6a1c; stroke-width: 2; }
.bolt .shine { stroke: #e7c97f; stroke-width: 3; fill: none; stroke-linecap: round; }
.bolt .knob { fill: #b98a2b; stroke: #7b5a14; stroke-width: 2; }
.bolt .grip { stroke: #7b5a14; stroke-width: 3; stroke-linecap: round; }
.bolt .bar { transition: transform .6s cubic-bezier(.25, 1.25, .35, 1); }
.bolt.open .bar { transform: translateX(-104px); }
.bolt.denied .bar { animation: denied .34s ease-in-out; }
.bolt.working .bar { animation: creep .9s ease-in-out infinite alternate; }
@keyframes denied { 0%, 100% { transform: translateX(0); } 22% { transform: translateX(8px); } 55% { transform: translateX(-6px); } 80% { transform: translateX(3px); } }
@keyframes creep { from { transform: translateX(0); } to { transform: translateX(-9px); } }
@media (prefers-reduced-motion: reduce) { .bolt .bar { transition: none; animation: none !important; } }

@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; }
  .brand { padding: 24px 22px 20px; flex-direction: row; align-items: center; gap: 18px; }
  .brand .bolt { display: none; }
  .brand-foot { display: none; }
  .wordmark { font-size: 34px; }
  .tagline { font-size: 17px; margin-top: 4px; max-width: none; }
  .panel { padding: 26px 20px 40px; align-content: start; }
  .card h1 { font-size: 30px; }
  .recovery { grid-template-columns: repeat(2, 1fr); font-size: 16px; }
}

/* sleepbaar */
.bolt .grab { cursor: grab; touch-action: none; }
.bolt.dragging .bar { transition: none; }
.bolt.dragging .grab { cursor: grabbing; }
.bolt .knob:focus-visible { outline: none; stroke: #f3d98f; stroke-width: 3; }
@media (max-width: 860px) { .brand .bolt { display: block; width: 130px; max-width: 130px; margin-left: auto; align-self: center; } }
.off-panel { min-height: 100dvh; }