/* Build log: per-step notes / photos panels, account modal and photo lightbox */

/* the step's text area toggles done; the notes panel below it doesn't */
.steps li { cursor: default; padding-bottom: .6rem; }
.steps li .step-main { cursor: pointer; outline: none; }
.steps li .step-main:focus-visible { box-shadow: 0 0 0 3px var(--orange); border-radius: 6px; }
.steps li.done { opacity: 1; }
.steps li.done .step-main { opacity: .55; text-decoration: line-through; text-decoration-thickness: 1px; }
.steps li.done::before { opacity: 1; }

.log-toggle {
  margin-top: .45rem; font-family: inherit; font-size: .8rem; font-weight: 700; cursor: pointer;
  background: none; border: 1.5px dashed var(--line); color: var(--muted); border-radius: 999px; padding: .2rem .7rem;
}
.log-toggle:hover, .log-toggle[aria-expanded="true"] { border-style: solid; border-color: var(--text); color: var(--text); }
.log-badge { background: var(--mustard); color: #3B2418; border-radius: 999px; padding: 0 .45rem; margin-left: .3rem; font-size: .72rem; }

.step-log { margin-top: .6rem; display: grid; gap: .5rem; }
.step-log textarea { width: 100%; resize: vertical; min-height: 4.5rem; font-size: .92rem; line-height: 1.45; }
.log-tools { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.log-tools .btn.small { box-shadow: 2px 2px 0 var(--text); }
.log-tools .mic.rec { background: var(--red); color: #fff; animation: pulse 1.2s infinite; }
.log-tools .mic[disabled] { opacity: .45; cursor: not-allowed; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(181, 64, 42, .25); } }
.save-state { font-size: .78rem; color: var(--muted); }
.thumbs { display: flex; gap: .5rem; flex-wrap: wrap; }
.thumbs:empty { display: none; }
.thumbs figure { position: relative; margin: 0; width: 92px; height: 92px; border-radius: 10px; overflow: hidden; border: 2px solid var(--text); background: var(--card2); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.thumbs .del {
  position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(30, 20, 14, .75); color: #fff; font-size: 14px; line-height: 22px; padding: 0;
}

.sync-status { margin: -.6rem 0 1.2rem; font-size: .88rem; color: var(--muted); }
.sync-status.err { color: var(--red); }
.linkish { background: none; border: none; padding: 0; font: inherit; color: var(--link); text-decoration: underline; cursor: pointer; }

/* nav account button */
.acct-btn {
  font-family: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; margin-left: .35rem;
  background: var(--card); color: var(--text); border: 2px solid var(--text); border-radius: 999px; padding: .3rem .8rem;
}
.acct-btn:hover { background: var(--orange); color: #2a160c; }

/* account modal */
.acct-modal {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem;
  background: rgba(30, 20, 14, .55); backdrop-filter: blur(3px);
}
.acct-modal[hidden] { display: none; }
.acct-card {
  position: relative; width: min(420px, 100%); background: var(--card); color: var(--text); border: 2px solid var(--text);
  border-radius: 18px; padding: 1.6rem 1.5rem 1.2rem; box-shadow: 6px 6px 0 var(--orange); overflow: hidden;
}
.acct-stripes { position: absolute; left: 0; right: 0; top: 0; height: 12px; }
.acct-card h3 { font-family: var(--display); font-weight: 400; font-size: 1.6rem; margin: .4rem 0 .3rem; }
.acct-lede { color: var(--muted); font-size: .92rem; margin: 0 0 1rem; }
.acct-close { position: absolute; top: 18px; right: 12px; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text); }
.acct-tabs { display: flex; gap: .4rem; margin-bottom: .9rem; }
.acct-tabs[hidden] { display: none; }
.acct-tabs button { flex: 1; font-family: inherit; font-weight: 700; padding: .45rem; border-radius: 999px; border: 2px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; }
.acct-tabs button.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.acct-form { display: grid; gap: .65rem; }
.acct-form label { display: grid; gap: .25rem; font-size: .82rem; font-weight: 700; }
.acct-form label[hidden] { display: none; }
.acct-form input { font-size: 1rem; padding: .55rem .7rem; }
.acct-hint { margin: 0; font-size: .78rem; color: var(--muted); min-height: 1em; }
.acct-err { margin: 0; font-size: .85rem; color: var(--red); font-weight: 700; min-height: 1em; }
.acct-submit { width: 100%; margin-top: .2rem; }
.acct-forgot, .acct-later { display: block; margin: .8rem auto 0; font-size: .85rem; }
.acct-forgot[hidden], .acct-later[hidden] { display: none; }

/* photo lightbox */
.lightbox { position: fixed; inset: 0; z-index: 110; background: rgba(10, 8, 6, .9); display: grid; place-items: center; cursor: zoom-out; }
.lightbox img { max-width: 94vw; max-height: 90vh; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.lightbox button { position: absolute; top: 14px; right: 18px; background: none; border: none; color: #fff; font-size: 2.2rem; cursor: pointer; }