/* One local paper texture, reused on surfaces only; controls and photos stay crisp. */
:root {
  --archive-texture: url('/paper-texture.png');
}

body {
  background-image:
    linear-gradient(rgba(250, 250, 246, .80), rgba(250, 250, 246, .80)),
    var(--archive-texture);
  background-size: auto, 640px 640px;
}

#canvas {
  background-color: #f0f3e9;
  background-image:
    radial-gradient(rgba(112, 139, 101, .20) .85px, transparent .85px),
    linear-gradient(120deg, rgba(243, 246, 236, .56), rgba(238, 243, 229, .38)),
    var(--archive-texture);
  background-size: 23px 23px, auto, 640px 640px;
  box-shadow: inset 0 2px 16px rgba(45, 65, 37, .035);
}

.node,
.node:hover,
#list .list-person,
#list .list-person:hover {
  background-image:
    linear-gradient(rgba(255, 255, 252, .70), rgba(255, 255, 252, .70)),
    var(--archive-texture);
  background-size: auto, 400px 400px;
}

.detail-head,
.login-card {
  background-image:
    linear-gradient(rgba(250, 252, 246, .76), rgba(250, 252, 246, .76)),
    var(--archive-texture);
  background-size: auto, 520px 520px;
}

.story {
  background-image:
    linear-gradient(rgba(247, 247, 237, .64), rgba(247, 247, 237, .64)),
    var(--archive-texture);
  background-size: auto, 420px 420px;
  box-shadow: 0 1px 2px rgba(52, 66, 44, .05);
}

span.avatar {
  background-image: var(--archive-texture);
  background-size: 240px 240px;
  background-blend-mode: multiply;
}

/* Album-style borders are interface geometry, not an overlay on family photos. */
.node,
#list .list-person {
  --frame-ink: #ab9065;
  position: relative;
  border-color: #c7c3ab;
  border-radius: 7px;
  box-shadow:
    0 3px 0 -1px #f7f4e9,
    0 4px 0 -1px #c9c5b4,
    0 8px 15px rgba(45, 61, 37, .10);
}

/* Tree cards must remain positioned by their saved coordinates. */
.node {
  position: absolute;
}

.node::before,
#list .list-person::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(171, 144, 101, .30);
  border-radius: 3px;
  pointer-events: none;
}

.node::after,
#list .list-person::after {
  content: '';
  position: absolute;
  inset: 5px;
  background:
    linear-gradient(var(--frame-ink), var(--frame-ink)) left top / 12px 2px,
    linear-gradient(var(--frame-ink), var(--frame-ink)) left top / 2px 12px,
    linear-gradient(var(--frame-ink), var(--frame-ink)) right top / 12px 2px,
    linear-gradient(var(--frame-ink), var(--frame-ink)) right top / 2px 12px,
    linear-gradient(var(--frame-ink), var(--frame-ink)) left bottom / 12px 2px,
    linear-gradient(var(--frame-ink), var(--frame-ink)) left bottom / 2px 12px,
    linear-gradient(var(--frame-ink), var(--frame-ink)) right bottom / 12px 2px,
    linear-gradient(var(--frame-ink), var(--frame-ink)) right bottom / 2px 12px;
  background-repeat: no-repeat;
  opacity: .72;
  pointer-events: none;
}

.node:hover,
#list .list-person:hover {
  border-color: #a9a087;
  box-shadow:
    0 3px 0 -1px #f7f4e9,
    0 4px 0 -1px #b4b09b,
    0 10px 20px rgba(45, 61, 37, .16);
}

.node.selected {
  --frame-ink: #315a48;
  border-color: var(--green);
  box-shadow:
    0 0 0 3px rgba(36, 78, 66, .10),
    0 3px 0 -1px #f7f4e9,
    0 5px 0 -1px #899d83,
    0 10px 20px rgba(45, 61, 37, .14);
}

.node.selected::before,
.node.selected::after {
  inset: 4px;
}

.node.selected::before {
  border-color: rgba(49, 90, 72, .32);
}

.node .avatar,
#list .list-person .avatar {
  border: 2px solid #fffdf7;
  outline: 1px solid rgba(157, 139, 104, .38);
  box-shadow: 0 2px 3px rgba(60, 49, 32, .08);
}

.detail-head {
  position: relative;
}

.detail-head::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(171, 144, 101, .26);
  border-radius: 4px;
  pointer-events: none;
}

.detail-head .portrait {
  border: 5px solid #fffdf7;
  outline: 1px solid rgba(157, 139, 104, .42);
  box-shadow: 2px 4px 0 #e8e3d5, 3px 6px 9px rgba(60, 49, 32, .11);
}

.story {
  border: 1px solid #ded9c8;
  border-left: 3px solid #bcab86;
  border-radius: 3px 7px 7px 3px;
  box-shadow: 0 2px 0 #f0eee2, 0 3px 0 #dedacb;
}

@media (prefers-contrast: more), (forced-colors: active) {
  body,
  #canvas,
  .node,
  .node:hover,
  #list .list-person,
  #list .list-person:hover,
  .detail-head,
  .login-card,
  .story,
  span.avatar {
    background-image: none;
  }

  .node::before, .node::after,
  #list .list-person::before, #list .list-person::after,
  .detail-head::before {
    display: none;
  }

  .node, #list .list-person, .detail-head .portrait, .story {
    box-shadow: none;
  }
}

@media print {
  body, #canvas, .node, .detail-head, .story, span.avatar {
    background-image: none;
  }
}