/* Inlogscherm: links het slot, rechts het formulier. De kroniek 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 .book { width: 100%; max-width: 300px; 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; }

/* het boek */
.book { overflow: visible; }
.book .board { fill: #2c3c47; stroke: #43586a; stroke-width: 2; }
.book .spine { fill: #1f2b34; stroke: #43586a; stroke-width: 1.5; }
.book .label { fill: #e9eef0; stroke: #b3862a; stroke-width: 2; }
.book .label-line { stroke: #9fb0ba; stroke-width: 3; stroke-linecap: round; }
.book .corner { fill: #c79a3a; stroke: #8e6a1c; stroke-width: 1.5; }
.book .elastic { fill: #121a20; stroke: #05090c; stroke-width: 1; }
.book .elastic-hi { stroke: #2d3b46; stroke-width: 2; }
.book .sheet { fill: #f5f7f8; stroke: #b7c4cc; stroke-width: 1.5; }
.book .rule { stroke: #c9d8e4; stroke-width: 1.5; }
.book .margin { stroke: #c9604f; stroke-width: 1.6; opacity: .75; }
.book .rib { fill: #c79a3a; stroke: #8e6a1c; stroke-width: 2; stroke-linejoin: round; }
.book .rib-hi { stroke: #e7c97f; stroke-width: 3; stroke-linecap: round; fill: none; }
.book .cover { transform-box: fill-box; transform-origin: 0% 50%; transition: transform .75s cubic-bezier(.3, 1.2, .35, 1); }
.book .band { transition: transform .5s ease-in, opacity .4s ease-in; }
.book.open .cover { transform: scaleX(.2); }
.book.open .band { transform: translateX(26px); opacity: 0; }
.book.denied { animation: denied .34s ease-in-out; }
.book.working .cover { animation: breathe 1.2s 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 breathe { from { transform: scaleX(1); } to { transform: scaleX(.985); } }
@media (prefers-reduced-motion: reduce) { .book .cover, .book .band { transition: none; } .book.denied, .book.working .cover { animation: none !important; } }
.book .grab { cursor: grab; touch-action: none; }
.book.dragging .grab { cursor: grabbing; }
.book .grab:focus-visible { outline: none; }
.book .grab:focus-visible .rib { stroke: #f3d98f; stroke-width: 3; }

@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; }
  .brand { padding: 24px 22px 20px; flex-direction: row; align-items: center; gap: 18px; }
  .brand .book { 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; }
}

@media (max-width: 860px) { .brand .book { display: block; width: 78px; max-width: 78px; margin-left: auto; align-self: center; } }
.off-panel { min-height: 100dvh; }