/* =====================================================================
   Harbor Log save pages (Agent L) — the title's sign-in page turns into the log of your journeys.
   Built on setpieces.css materials (.sp-paper, .sp-tape, ink tokens). JS: client/ui/saves.js
   ===================================================================== */
body.at-title #ui, body.at-title #plates { visibility: hidden; }

/* while the log is open the mark steps back so the wider page fits */
#login.is-slots .ts-log:not(.ts-slots) { display: none; }
#login.is-slots .ts-mark { transform: translateY(-58%) scale(0.78); transform-origin: left center; transition: transform 0.6s var(--ease-out); }
#login.is-slots .ts-hint { display: none; }

.ts-slots.ts-log { width: min(36rem, 50vw); max-height: calc(100vh - 5rem); display: flex; flex-direction: column; transform: translateY(-50%) rotate(0.6deg); padding: 1.3rem 1.4rem 1rem 2.6rem; animation: ts-log-in 0.9s var(--ease-out) both; }
.ts-slots.ts-log::after { background-position: 0 3.1rem; }
.ts-slots h2 { margin: 0; }
.ts-slots .sl-sub { font-family: var(--font-hand); font-size: 1.22rem; color: var(--ink-blue); line-height: 1.3; margin: 0.05rem 0 0.4rem; }
.ts-slots .sl-list { display: flex; flex-direction: column; gap: 0.15rem; overflow-y: auto; min-height: 0; margin-right: -0.6rem; padding-right: 0.6rem; scrollbar-color: var(--paper-edge) transparent; }

.sl-entry { position: relative; display: grid; grid-template-columns: 3.6rem 1fr auto; grid-template-areas: 'photo body acts'; align-items: center; gap: 0.2rem 0.9rem; padding: 0.55rem 0.4rem 0.6rem 0.3rem; border-bottom: 1px dashed rgba(31, 42, 74, 0.217); }
.sl-entry:last-child { border-bottom: 0; }
.sl-entry .sl-no { position: absolute; left: -2.15rem; top: 0.7rem; width: 1.4rem; text-align: center; font-family: var(--font-print); font-size: 0.95rem; color: var(--ink-red); opacity: 0.8; }
.sl-photo { grid-area: photo; position: relative; width: 3.4rem; height: 3.4rem; padding: 0.18rem; background: #fbf6ea; box-shadow: 0 2px 4px rgba(15, 30, 70, 0.24), 0 0 0 1px rgba(31, 42, 74, 0.093); transform: rotate(-2.5deg); }
.sl-entry:nth-child(2n) .sl-photo { transform: rotate(1.8deg); }
.sl-photo img { width: 100%; height: 100%; display: block; image-rendering: pixelated; filter: none; background: #e9dfc7; }
.sl-entry:hover .sl-photo img, .sl-entry:focus-within .sl-photo img { filter: none; }
.sl-photo .sp-tape { width: 2.2rem; height: 0.75rem; top: -0.35rem; left: 0.6rem; transform: rotate(-6deg); }
.sl-photo.is-blank { display: grid; place-items: center; font-family: var(--font-print); font-size: 1.6rem; color: var(--ink-soft); background: repeating-linear-gradient(45deg, #f4ecd8 0 6px, #ebe0c6 6px 12px); }
.sl-body { grid-area: body; min-width: 0; }
.sl-name { font-family: var(--font-hand); font-weight: 700; font-size: 1.62rem; line-height: 1.05; color: var(--ink); display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; }
.sl-name small { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-2xs); letter-spacing: 0.14em; color: var(--ink-soft); }
.sl-lastmark { font-family: var(--font-hand); font-size: 1.05rem; color: var(--ink-red); transform: rotate(-3deg); display: inline-block; }
.sl-line { font-family: var(--font-print-lc); font-size: 1.02rem; color: var(--ink); margin-top: 0.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-meta { display: flex; flex-wrap: wrap; gap: 0.1rem 0.75rem; margin-top: 0.12rem; font-family: var(--font-ui); font-size: var(--fs-2xs); color: var(--ink-soft); letter-spacing: 0.02em; }
/* ghost buttons are drawn for dark panels; on paper they need ink */
.ts-slots .ui-btn--ghost { --b-line: rgba(31, 42, 74, 0.279); --b-fill: rgba(255, 250, 235, 0.55); --b-c: var(--ink); color: var(--ink); }
.ts-slots .ui-btn--ghost:hover, .ts-slots .ui-btn--ghost:focus-visible { --b-fill: rgba(255, 245, 215, 0.95); --b-c: var(--ink); color: var(--ink); filter: none; }
.sl-tag { font-family: var(--font-hand); font-size: 1rem; line-height: 1; color: var(--ink-blue); border: 1px solid currentColor; border-radius: var(--r-sm); padding: 0 0.3rem; transform: rotate(-2deg); }
.sl-tag--red { color: var(--ink-red); }
.sl-acts { grid-area: acts; display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.sl-small { display: flex; gap: 0.55rem; }
.ts-slots button.sl-link { all: unset; cursor: pointer; font-family: var(--font-hand); font-size: 1.08rem; color: var(--ink-blue); border-bottom: 1px solid transparent; line-height: 1.1; }
.ts-slots button.sl-link:hover, .ts-slots button.sl-link:focus-visible { border-bottom-color: currentColor; }
.ts-slots button.sl-link:focus-visible { outline: 2px solid rgba(44, 74, 99, 0.35); outline-offset: 2px; }
.ts-slots button.sl-link--red { color: var(--ink-red); }
.sl-entry.is-last::before { content: ''; position: absolute; inset: 0.2rem -0.3rem 0.2rem -0.5rem; background: rgba(255, 240, 190, 0.32); border-radius: var(--r-sm); pointer-events: none; }
.sl-entry.is-empty { grid-template-columns: 1fr auto; grid-template-areas: 'body acts'; min-height: 3.4rem; }
.sl-blank { grid-area: body; font-family: var(--font-hand); font-size: 1.3rem; color: rgba(31, 42, 74, 0.341); padding-left: 0.4rem; }
.sl-entry.is-empty .sl-acts { flex-direction: row; align-items: center; }
.sl-entry.is-confirm { background: rgba(168, 50, 31, 0.07); grid-template-columns: 1fr auto; grid-template-areas: 'body acts'; }
.sl-ask { font-family: var(--font-hand); font-size: 1.4rem; color: var(--ink-red); line-height: 1.1; }
.sl-ask b { color: var(--ink); }
.ts-slots .sl-note { min-height: 1.4rem; margin-top: 0.35rem; font-family: var(--font-hand); font-size: 1.2rem; line-height: 1.15; color: var(--ink-blue); }
.ts-slots .sl-note.is-bad { color: var(--ink-red); }
.ts-slots .sl-note.is-good { color: var(--ink-green); }
.ts-slots .sl-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 0.3rem; padding-top: 0.45rem; border-top: 1px solid rgba(31, 42, 74, 0.155); font-family: var(--font-prose); font-style: italic; font-size: 0.9rem; color: var(--ink-soft); }
.ts-slots .sl-foot span { text-align: right; }

/* ---------- in-game Harbor Log menu (G) */
.sl-menu { display: flex; flex-direction: column; gap: var(--sp-3); min-width: min(28rem, 80vw); }
.sl-menu__who { display: flex; gap: var(--sp-3); align-items: center; }
.sl-menu__who img { width: 3.6rem; height: 3.6rem; image-rendering: pixelated; border-radius: var(--r-sm); box-shadow: 0 0 0 1px var(--frame-soft); }
.sl-menu__name { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-lg, 1.15rem); letter-spacing: 0.02em; }
.sl-menu__name small { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--text-dim); letter-spacing: 0.08em; }
.sl-menu__acts { display: flex; flex-direction: column; gap: var(--sp-2); }

@media (max-width: 820px), (orientation: portrait) {
  #login.is-slots .ts-mark { transform: translateX(-50%) scale(0.7); transform-origin: center top; }
  .ts-slots.ts-log { right: 50%; top: auto; bottom: 4rem; transform: translateX(50%) rotate(0.4deg); width: calc(100vw - 2rem); max-height: calc(100vh - 13.5rem); padding-left: 2.2rem; }
  .sl-entry { grid-template-columns: 3rem 1fr; grid-template-areas: 'photo body' 'acts acts'; }
  .sl-entry.is-empty, .sl-entry.is-confirm { grid-template-areas: 'body' 'acts'; grid-template-columns: 1fr; }
  .sl-acts { flex-direction: row; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
  .sl-photo { width: 2.9rem; height: 2.9rem; }
  .ts-slots .sl-foot { flex-direction: column; }
}