.shiplog-proof { display:grid; gap:16px; margin:0 0 24px; border:1px solid #b9cec4; border-left:5px solid #315f50; border-radius:12px; padding:clamp(16px,3vw,22px); background:#eef6f2; }
.shiplog-proof:target { outline:3px solid var(--focus-ring); outline-offset:3px; }
.shiplog-demo { border-style:dashed; border-left-style:solid; }
.shiplog-real { border-color:#9aa8c4; border-left-color:#1f3a6e; background:#eef2fb; }
.shiplog-real .shiplog-proof-share { border-top-color:#c7d1e6; }
.badge-real { background:#1f3a6e; color:#fff; }
.shiplog-real-link { color:#14568f; font-size:13px; font-weight:700; overflow-wrap:anywhere; }
.shiplog-proof-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px 24px; }
.shiplog-proof-heading h2 { margin:4px 0 0; font-size:clamp(20px,3vw,25px); }
.shiplog-proof-note { max-width:68ch; margin:0; color:#3f4b45; font-size:14px; line-height:1.5; }
.shiplog-proof-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px 22px; margin:0; }
.shiplog-proof-facts div { min-width:0; }
.shiplog-proof-facts dt { color:#4c5650; font:700 9px/1.4 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.shiplog-proof-facts dd { margin:4px 0 0; font-size:14px; font-weight:700; line-height:1.45; overflow-wrap:anywhere; }
.shiplog-proof-facts a,.shiplog-proof-link { color:#14568f; }
.shiplog-proof-share { display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; padding-top:14px; border-top:1px solid #cbdcd3; }
.shiplog-proof-link { font-size:13px; font-weight:700; }
/* The recorder's success region is a `.share-control`, which is a centred flex
 * row. A sentence introducing the link has to break the row and drop its
 * default block margins, or it reads inline with the link and the storage hint
 * as one run-on line and the row grows an em of dead space above and below.
 * No new hue and no new type scale — the site's own body ink. */
#release-record-next>p { flex:1 1 100%; margin:0; font-size:14px; line-height:1.5; }
/* The log's empty, no-match and error panels at a phone width: a long heading
 * wraps inside its panel instead of widening the page, and an action's label
 * may break onto a second line rather than overflow. */
#release-list .list-state { min-width:0; overflow-wrap:anywhere; }
#release-list .empty-action { max-width:100%; line-height:1.3; }
@media(max-width:760px) { .shiplog-proof-facts{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:520px) { .shiplog-proof-heading{align-items:stretch;flex-direction:column}.shiplog-proof-facts{grid-template-columns:1fr}.shiplog-proof-share{align-items:stretch;flex-direction:column}.shiplog-proof-share .share-button{width:100%} }