:root {
  --sigma-good:    #60c080;
  --sigma-warn:    #d0a060;
  --sigma-bad:     #d06060;
  --sigma-unknown: #707070;
}
html, body { margin: 0; min-height: 100%; height: auto; overflow: visible;
              background: #111; color: #fff; font: 14px monospace; }
.session-host { position: fixed; top: 16px; right: 16px; z-index: 1000; }
.session-widget { display: inline-flex; gap: 8px; align-items: center;
                  padding: 8px 12px; background: rgba(0,0,0,0.7);
                  border: 1px solid rgba(255,255,255,0.4); color: #fff;
                  font: 12px monospace; }
.session-widget .btn { padding: 8px 14px; background: rgba(0,0,0,0.5);
                       color: #fff; border: 1px solid #fff;
                       font: 12px monospace; cursor: pointer; }
.session-widget .btn[hidden] { display: none; }
.session-widget .btn:disabled { opacity: 0.4; cursor: not-allowed; }
.session-widget .btn.danger { color: #ff8080; border-color: #ff8080;
                              background: rgba(0,0,0,0.5); }
.session-widget .btn.danger:hover:not(:disabled) { background: rgba(255,80,80,0.2); }
.site-badge { position: fixed; top: 8px; left: 10px; z-index: 1200;
              padding: 5px 9px; background: rgba(0,0,0,0.5);
              border: 1px solid rgba(255,255,255,0.4); color: #cccccc;
              font: 700 16px Helvetica, Arial, sans-serif; letter-spacing: 0.03em;
              text-decoration: none; }
.site-badge:hover { border-color: #fff; }
main { max-width: 640px; margin: 0 auto; padding: 56px 32px 32px; }
.back { color: #5080ff; text-decoration: none; font-size: 12px; }
.back:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 16px 0 24px; word-break: break-word; }
h1.editable { cursor: text; border-radius: 3px;
              padding: 2px 6px; margin-left: -6px; margin-right: -6px; }
h1.editable:hover { background: rgba(255,255,255,0.06); }
h1 input.name-edit { font: inherit; color: inherit; background: #000;
                     border: 1px solid #5080ff; border-radius: 3px;
                     padding: 1px 5px; width: 100%; box-sizing: border-box;
                     outline: none; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px;
     font-size: 12px; margin: 0; }
dt { color: #aaa; margin: 0; }
dt.lifespan-label { cursor: pointer; user-select: none; padding: 1px 4px;
                    margin-left: -4px; border-radius: 3px; }
dt.lifespan-label:hover { background: rgba(255,255,255,0.06); color: #ddd; }
dd { margin: 0; display: flex; align-items: baseline; gap: 12px;
     flex-wrap: wrap; }
dd.empty, .value.empty { color: #888; font-style: italic; }
dd.editable, .value.editable { cursor: text; padding: 1px 4px;
                               margin-left: -4px; border-radius: 3px; }
dd.editable:hover, .value.editable:hover { background: rgba(255,255,255,0.06); }
dd input.date-edit { font: inherit; color: inherit; background: #000;
                     border: 1px solid #5080ff; border-radius: 3px;
                     padding: 0 4px; outline: none; color-scheme: dark; }
dd input.num-edit { font: inherit; color: inherit; background: #000;
                    border: 1px solid #5080ff; border-radius: 3px;
                    padding: 0 4px; outline: none; width: 12em; }
.lock { color: #aaa; cursor: pointer; user-select: none; }
.lock input { vertical-align: middle; margin: 0 4px 0 0; }
.sep { color: #aaa; margin: 0 -8px; }
h2 { font-size: 14px; color: #aaa; margin: 32px 0 8px; font-weight: normal;
     text-transform: uppercase; letter-spacing: 0.05em; }
.notes { font: inherit; line-height: 1.5; white-space: pre-wrap;
         word-break: break-word; padding: 8px; border-radius: 3px;
         background: rgba(255,255,255,0.04); cursor: text;
         min-height: 1.5em; }
.notes:hover { background: rgba(255,255,255,0.08); }
.notes.empty { color: #888; font-style: italic; }
.notes textarea { font: inherit; color: inherit; background: #000;
                  border: 1px solid #5080ff; border-radius: 3px;
                  padding: 6px 8px; width: 100%; box-sizing: border-box;
                  outline: none; resize: vertical; min-height: 6em; }
.observations { list-style: none; margin: 0; padding: 0;
                display: flex; flex-direction: column; gap: 4px; }
.observations li { display: flex; gap: 12px; padding: 6px 8px;
                   background: rgba(255,255,255,0.04); font-size: 12px; }
.observations a { color: #5080ff; text-decoration: none; }
.observations a:hover { text-decoration: underline; }
.observations .meta { color: #888; }
.observations .captured-at { color: #ddd; }
.observations .empty { color: #888; font-style: italic; padding: 6px 8px; }
.observations .clip { position: relative; flex: 0 0 auto;
                      width: 96px; height: 96px; overflow: hidden;
                      background: #000; border-radius: 3px;
                      align-self: center; }
.observations .clip img { position: absolute; max-width: none;
                          user-select: none; pointer-events: none; }
.observations .clip::after { content: ""; position: absolute;
                             left: 50%; top: 50%; width: 12px; height: 12px;
                             margin: -6px 0 0 -6px;
                             border: 1px solid rgba(255,255,255,0.6);
                             border-radius: 50%;
                             pointer-events: none; }
.cp-list, .photos-list, .visible-photos-grid, .commits-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 4px 16px; font-size: 12px; }
.cp-list { grid-template-columns: 1fr auto auto; }
.cp-list-with-fit { grid-template-columns: 1fr auto auto auto auto; }
.photos-list { grid-template-columns: 1fr repeat(7, auto); }
.visible-photos-grid { grid-template-columns: auto 1fr auto; }
.commits-list { grid-template-columns: 1fr auto auto auto auto auto; align-items: center; }
.commits-list .errors-bad { color: var(--sigma-bad); }
.cp-list li, .photos-list li, .visible-photos-grid li, .commits-list li {
    display: grid; grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: baseline; padding: 6px 8px;
    background: rgba(255,255,255,0.04); }
.commits-list li { align-items: center; }
.commits-pager { display: flex; gap: 8px; margin-top: 16px; }
.commits-pager a[hidden] { display: none; }
.changes-btn { font: inherit; padding: 0 4px; }
.changes-panel { width: min(90vw, 720px); max-height: 80vh; }
.changes-dump { font: 11px monospace; color: #ddd;
                background: rgba(0,0,0,0.4); padding: 8px;
                border: 1px solid #444; margin: 0;
                max-height: 60vh; overflow: auto;
                white-space: pre; }
.cp-list a.desc, .photos-list a.desc { color: #5080ff; text-decoration: none;
                                        word-break: break-word; }
.cp-list a.desc:hover, .photos-list a.desc:hover { text-decoration: underline; }
.visible-photos-grid a { color: #5080ff; text-decoration: none; }
.visible-photos-grid a:hover { text-decoration: underline; }
.cp-list .col, .photos-list .col, .visible-photos-grid .col {
    display: flex; align-items: baseline; gap: 6px; color: #888; }
.cp-list .col .val.unlocated { font-style: italic; }
.cp-list .empty, .photos-list .empty, .visible-photos-grid .empty {
    grid-column: 1 / -1; color: #888;
    font-style: italic; padding: 6px 8px;
    background: rgba(255,255,255,0.04); }
.cp-list li.header, .photos-list li.header, .visible-photos-grid li.header,
.commits-list li.header {
    background: transparent; padding: 4px 8px;
    color: #aaa; font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.05em; }
.cp-list .hdr, .visible-photos-grid .hdr {
    font: inherit; color: inherit; background: transparent;
    border: 0; padding: 0; cursor: pointer; text-align: left;
    letter-spacing: inherit; text-transform: inherit; }
.cp-list .hdr:hover, .visible-photos-grid .hdr:hover { color: #fff; }
.cp-list .hdr.active, .visible-photos-grid .hdr.active { color: #fff; }
.cp-list .sort-arrow, .visible-photos-grid .sort-arrow {
    display: inline-block; width: 1ch; }
.visible-photos-grid .col-distance { justify-self: end; }
.visible-photos-grid .col-station .status {
    margin-left: 8px; padding: 1px 6px; border-radius: 3px;
    font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.05em; white-space: nowrap; }
.visible-photos-grid .col-station .status.missing {
    background: rgba(208,160,96,0.18); color: #d0a060; }
.visible-photos-grid .col-station .status.cant_see {
    background: rgba(208,96,96,0.18); color: #d06060; }
main.wide { max-width: 960px; }
.lock-mark { font-size: 11px; line-height: 1; color: var(--sigma-warn); }
.lock-mark::before { content: "\1F512"; }
.sigma { font-size: 10px; margin-left: 0.4em; opacity: 0.85; }
.sigma-good    { color: var(--sigma-good); }
.sigma-warn    { color: var(--sigma-warn); }
.sigma-bad     { color: var(--sigma-bad); }
.sigma-unknown { color: var(--sigma-unknown); font-style: italic; }
.actions { margin-top: 32px; }
button.btn { font: inherit; color: #5080ff; background: transparent;
             border: 1px solid #5080ff; border-radius: 3px;
             padding: 2px 8px; cursor: pointer; }
button.btn:hover:not(:disabled) { background: rgba(80,128,255,0.12); }
button.btn:disabled { opacity: 0.5; cursor: default; }
button.danger { font: inherit; color: #ff8080; background: transparent;
                border: 1px solid #ff8080; border-radius: 3px;
                padding: 6px 12px; cursor: pointer; }
button.danger:hover:not(:disabled) { background: rgba(255,128,128,0.12); }
button.danger:disabled { opacity: 0.5; cursor: default; }

/* Touch devices: scale text up roughly 1.6×. Layout stays the same. */
@media (pointer: coarse) {
  html, body { font-size: 22px; }
  main { padding: 24px; }
  .back { font-size: 18px; }
  h1 { font-size: 32px; }
  dl { font-size: 18px; gap: 10px 20px; }
  .observations li { font-size: 18px; padding: 10px 12px; }
  .cp-list li, .photos-list li { font-size: 18px; padding: 10px 12px; }
  .cp-list li.header, .photos-list li.header { font-size: 14px; padding: 6px 10px; }
  .actions { margin-top: 40px; }
  button.danger { padding: 12px 20px; }
}