/* ---------- paste image ---------- */

/* The drop area leads with the keyboard shortcut rather than with "drop a
   file here", because pressing Ctrl+V is the whole reason anybody is on this
   page -- there is no file to drop yet. */
.pi-keys{
  display:inline-flex;align-items:center;gap:7px;
  margin-bottom:6px;font-family:var(--f-mono);
}
.pi-keys kbd{
  display:inline-block;min-width:34px;padding:7px 10px;
  background:var(--surface);border:1px solid var(--rule-2);
  border-bottom-width:2px;border-radius:6px;
  font-family:inherit;font-size:.92rem;color:var(--ink);line-height:1;
}
.pi-keys span{color:var(--ink-3);font-size:.9rem;}

/* ---- the pictures ---- */

.pi-stage{padding:20px;}

.pi-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:14px;
}
.pi-count{font-size:.82rem;color:var(--ink-3);margin-right:auto;}

/* On a phone the three housekeeping buttons wrap onto two rows, 94px of them,
   and the picture that was just pasted starts below all that. The picture is
   the point, so on a narrow screen it goes first and the buttons follow it. */
@media (max-width:560px){
  .pi-stage{display:flex;flex-direction:column;}
  .pi-cards{order:1;}
  .pi-head{order:2;margin:14px 0 0;}
}

.pi-cards{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));
  gap:16px;
}
/* One picture is the subject of the page, not a thumbnail in a grid of one. */
.pi-stage.one .pi-cards{grid-template-columns:minmax(0,1fr);max-width:520px;margin-inline:auto;}

.pi-card{
  border:1px solid var(--rule);border-radius:var(--radius-sm);
  background:var(--surface-2);overflow:hidden;
}

.pi-shot{
  position:relative;
  background:
    linear-gradient(45deg,var(--rule) 25%,transparent 25%,transparent 75%,var(--rule) 75%),
    linear-gradient(45deg,var(--rule) 25%,transparent 25%,transparent 75%,var(--rule) 75%);
  background-size:16px 16px;background-position:0 0,8px 8px;
  display:flex;align-items:center;justify-content:center;
  min-height:120px;
}
.pi-stage.one .pi-shot{min-height:200px;}
.pi-shot img{
  display:block;max-width:100%;max-height:300px;height:auto;
  object-fit:contain;
}
.pi-stage.one .pi-shot img{max-height:440px;}

.pi-foot{padding:12px 13px;display:flex;flex-direction:column;gap:9px;}

.pi-name{
  display:flex;align-items:stretch;
  border:1px solid var(--rule-2);border-radius:var(--radius-sm);
  background:var(--surface);overflow:hidden;
}
.pi-name input{
  flex:1;min-width:0;border:none;background:transparent;
  padding:9px 11px;color:var(--ink);
  font-family:var(--f-ui);font-size:.9rem;
}
.pi-name input:focus{outline:none;}
.pi-name:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.pi-ext{
  display:flex;align-items:center;padding:0 11px;
  background:var(--surface-2);border-left:1px solid var(--rule-2);
  font-family:var(--f-mono);font-size:.82rem;color:var(--ink-3);
}

.pi-meta{font-family:var(--f-mono);font-size:.78rem;color:var(--ink-3);}

.pi-save{width:100%;justify-content:center;}

.pi-hint{font-size:.84rem;color:var(--ink-3);margin:10px 0 0;line-height:1.6;}