/* ManaFolio — a personal card archive. Shared by the collection and journal. */
:root {
  color-scheme:dark;
  --bg:#0b0e12;
  --surface:#12161d;
  --surface-raised:#191e27;
  --text:#eeeae3;
  --muted:#a2a5ae;
  --faint:#777e8b;
  --border:#2a2f38;
  --primary:#dfb778;
  --primary-dark:#edc994;
  --danger:#f19d9a;
  --serif:"DM Serif Display",Georgia,serif;
  --sans:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px;
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body:has(#app-modal:not([hidden])),body:has(#image-modal:not([hidden])) {
  overflow:hidden;
}
[hidden] {
  display:none!important;
}
h1,h2,h3,p {
  margin-top:0;
}
h1,h2,h3 {
  line-height:1.1;
  font-weight:400;
}
h1,h2 {
  font-family:var(--serif);
  letter-spacing:-.025em;
}
p {
  color:var(--muted);
}
a {
  color:inherit;
  text-decoration:none;
}
button,input,select {
  font:inherit;
}
button,a,input,select,summary {
  -webkit-tap-highlight-color:transparent;
}
button,a {
  touch-action:manipulation;
}
button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:44px;
  padding:11px 19px;
  border:1px solid transparent;
  border-radius:5px;
  background:var(--primary);
  color:#17140e;
  cursor:pointer;
  font-weight:650;
  font-size:.875rem;
  transition:background .18s,border-color .18s,transform .18s;
}
button:hover {
  background:var(--primary-dark);
}
button:active:not(:disabled) {
  transform:translateY(1px);
}
button:disabled {
  opacity:.5;
  cursor:not-allowed;
}
a:hover {
  color:var(--primary);
}
:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:4px;
}
input,select {
  width:100%;
  min-width:0;
  min-height:46px;
  padding:11px 13px;
  border:1px solid #363b45;
  border-radius:5px;
  background:#0e1218;
  color:var(--text);
  font-size:1rem;
  transition:border-color .15s;
}
input::placeholder {
  color:#7f8592;
  opacity:1;
}
input:hover,select:hover {
  border-color:#63636b;
}
input:focus,select:focus {
  outline:2px solid #dfb77825;
  outline-offset:1px;
  border-color:var(--primary);
}
input[type=checkbox] {
  width:17px!important;
  min-height:17px;
  height:17px;
  margin:0 6px 0 0!important;
  accent-color:var(--primary);
  vertical-align:middle;
}
input[type=search]::-webkit-search-cancel-button {
  cursor:pointer;
}
label {
  font-size:.875rem;
  color:#c2c4cb;
}
hr {
  border:0;
  border-top:1px solid var(--border);
}
.icon {
  width:19px;
  height:19px;
  flex-shrink:0;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.skip-link {
  position:fixed;
  top:-80px;
  left:18px;
  padding:12px 20px;
  background:var(--primary);
  color:#17140e;
  z-index:2000;
}
.skip-link:focus {
  top:12px;
}
.site-header,main,.site-footer,.journal-heading {
  width:min(1360px,calc(100% - 112px));
  margin-inline:auto;
}
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:110px;
  border-bottom:1px solid var(--border);
  gap:24px;
}
.brand {
  display:block;
  position:relative;
  flex-shrink:0;
  width:270px;
  height:54px;
  overflow:hidden;
}
.brand img {
  position:absolute;
  width:365px;
  height:auto;
  max-width:none;
  left:-66px;
  top:-33px;
  mix-blend-mode:lighten;
}
.header-nav {
  display:flex;
  align-items:center;
  gap:38px;
  font-size:.875rem;
}
.header-nav a {
  padding:10px 0;
}
.header-nav a span {
  margin-left:9px;
  color:var(--primary);
}
.header-nav .nav-account {
  padding:10px 17px;
  border:1px solid #47413a;
  border-radius:4px;
}
.is-authenticated .nav-account {
  display:none;
}
.eyebrow {
  font-family:var(--sans);
  font-size:.6875rem;
  letter-spacing:.16em;
  font-weight:550;
  line-height:1.6;
  color:#a5a3a7;
}
.fine-line {
  display:inline-block;
  width:30px;
  height:1px;
  background:var(--primary);
  vertical-align:middle;
  margin-right:12px;
}
.welcome {
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(350px,1fr);
  min-height:720px;
}
.welcome-story {
  position:relative;
  min-width:0;
  padding:54px 32px 38px 0;
  overflow:hidden;
}
.welcome-story .eyebrow {
  position:relative;
  z-index:1;
}
.welcome h1 {
  position:relative;
  z-index:1;
  font-size:clamp(3.4rem,5.4vw,5.25rem);
  line-height:1.03;
  margin:32px 0 23px;
  letter-spacing:-.025em;
}
.welcome h1 em,.journal-heading h1 em {
  font-weight:400;
  color:var(--primary);
}
.welcome-description {
  position:relative;
  z-index:1;
  line-height:1.8;
  font-size:.9375rem;
  max-width:400px;
  margin:0;
}
.brand-art {
  position:relative;
  width:320px;
  height:240px;
  margin:-10px 0 0 auto;
}
.brand-art img {
  position:absolute;
  width:410px;
  max-width:none;
  height:auto;
  top:-80px;
  left:-48px;
  mix-blend-mode:lighten;
  transform:rotate(-8deg);
}
.welcome-bottom {
  position:absolute;
  inset:auto 36px 24px 0;
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--faint);
  font-size:.625rem;
  letter-spacing:.14em;
}
.welcome-bottom::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-20px;
  height:1px;
  background:var(--border);
}
#auth {
  position:relative;
  margin:48px 0 50px 30px;
  align-self:start;
  padding:36px 38px 28px;
  background:var(--surface);
  border:1px solid #30323a;
  border-radius:8px;
  box-shadow:0 20px 70px #00000018;
}
.auth-topline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-bottom:32px;
}
.auth-topline .eyebrow {
  font-size:.625rem;
  letter-spacing:.12em;
}
.edition-tag {
  font-size:.625rem;
  color:var(--primary);
  border:1px solid #5d4d37;
  border-radius:3px;
  padding:2px 7px;
  white-space:nowrap;
}
.auth-panel h2 {
  font-size:2.5rem;
  line-height:1.13;
  margin-bottom:12px;
}
.auth-intro {
  font-size:.875rem;
  margin-bottom:27px;
}
.auth-panel>label {
  display:block;
  margin:16px 0 8px;
}
.auth-panel input {
  height:48px;
}
.password-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:15px;
  margin-bottom:8px;
}
.password-label button {
  min-height:30px;
  padding:0;
  background:transparent;
  color:#b9b2a6;
  font-size:.75rem;
  font-weight:400;
  text-align:right;
}
.password-label button:hover {
  color:var(--primary);
}
.auth-submit {
  margin-top:22px;
  width:100%;
  justify-content:space-between;
  min-height:48px;
}
.auth-switch {
  text-align:center;
  font-size:.8125rem;
  margin:20px 0 0;
}
.auth-switch-button {
  background:none;
  border:0;
  color:var(--primary);
  min-height:32px;
  padding:0 4px;
  font-size:inherit;
}
.auth-switch-button:hover {
  background:none;
  color:var(--primary-dark);
  text-decoration:underline;
}
.captcha-area {
  border-top:1px solid var(--border);
  padding-top:19px;
  margin-top:24px;
}
.captcha-area>p {
  font-size:.75rem;
  margin-bottom:12px;
  color:var(--faint);
}
.h-captcha {
  min-height:78px;
  max-width:100%;
}
.h-captcha iframe {
  max-width:100%;
}
.field-hint {
  font-size:.75rem;
  color:var(--muted);
  line-height:1.6;
  margin:7px 0 12px;
}
.status-message {
  font-size:.875rem;
  line-height:1.6;
  margin:16px 0;
  color:var(--primary);
  overflow-wrap:anywhere;
}
.status-message:empty,#reset-message:empty,#auth-message:empty {
  display:none;
}
.site-footer {
  padding:26px 0 30px;
  border-top:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
}
.footer-signature {
  font-family:var(--serif);
  font-style:italic;
  color:#9d9ba3;
  font-size:1rem;
  margin:0;
}
.footer-links {
  display:flex;
  gap:28px;
  flex-wrap:wrap;
  font-size:.75rem;
  color:#a5a7b0;
}
.footer-links a:hover {
  color:var(--text);
}
.footer-links span {
  margin-left:5px;
  color:#6f7683;
}
/* The authenticated archive */
#app {
  position:relative;
  padding-bottom:72px;
  min-height:calc(100vh - 200px);
}
.workspace-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:28px 0 14px;
  gap:12px;
}
.workspace-bar>.eyebrow {
  margin:0;
}
.profile-bar {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.profile-bar button {
  background:none;
  color:var(--muted);
}
#profile-toggle {
  padding:4px 8px;
  min-width:0;
  max-width:300px;
  font-size:.875rem;
  gap:10px;
}
#profile-toggle strong {
  font-weight:450;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#profile-toggle:hover,#profile-toggle[aria-expanded=true] {
  background:var(--surface);
}
.profile-avatar {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:30px;
  height:30px;
  overflow:hidden;
  border:1px solid #6a593e;
  border-radius:50%;
  color:var(--primary);
  font-family:var(--serif);
  background:#211e1b;
}
.profile-avatar img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
#logout {
  padding:8px 12px;
  border-left:1px solid var(--border);
  border-radius:0;
  font-weight:400;
  font-size:.8125rem;
}
#logout:hover {
  color:var(--text);
}
.workspace-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  margin:12px 0 35px;
}
.workspace-heading h1 {
  font-size:clamp(2.6rem,4.5vw,4rem);
  margin:0 0 9px;
}
.workspace-heading h1 span {
  color:var(--primary);
}
.workspace-heading p {
  font-size:.875rem;
  margin:0;
}
.collection-stats {
  display:flex;
  gap:0;
  margin:0;
}
.collection-stats>div {
  display:flex;
  flex-direction:column-reverse;
  min-width:100px;
  padding:0 28px;
  border-left:1px solid var(--border);
}
.collection-stats>div:last-child {
  padding-right:0;
}
.collection-stats dt {
  color:var(--muted);
  font-size:.75rem;
  margin-top:4px;
}
.collection-stats dd {
  font-family:var(--serif);
  font-size:2.25rem;
  margin:0;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.workspace-tabs {
  display:flex;
  gap:32px;
  border-bottom:1px solid var(--border);
  margin-bottom:28px;
}
.workspace-tabs button {
  background:none;
  color:var(--muted);
  padding:13px 0 17px;
  border:0;
  border-bottom:2px solid transparent;
  border-radius:0;
  font-weight:500;
}
.workspace-tabs button[aria-selected=true] {
  color:var(--primary);
  border-bottom-color:var(--primary);
}
.workspace-tabs button:hover {
  color:var(--text);
}
.workspace-tabs button span {
  font-size:1.3rem;
  line-height:1;
}
.collection-toolbar {
  display:flex;
  gap:10px;
  align-items:center;
}
.search-field {
  display:flex;
  gap:11px;
  align-items:center;
  flex:1;
  padding:0 14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:5px;
  color:var(--faint);
}
.search-field:focus-within {
  outline:2px solid #dfb77825;
  border-color:var(--primary);
}
.search-field input {
  border:0;
  padding-left:0;
  background:transparent;
  outline:0;
  box-shadow:none;
  font-size:.875rem;
  min-height:46px;
}
.search-field input:focus {
  outline:0;
}
.secondary-button,#clear-collection-filters,.show-printings,.more-printings {
  background:var(--surface);
  color:var(--text);
  border-color:var(--border);
  font-weight:450;
}
.secondary-button:hover,#clear-collection-filters:hover,.show-printings:hover,.more-printings:hover {
  background:var(--surface-raised);
  border-color:#55545b;
}
#filter-count {
  display:grid;
  place-items:center;
  background:var(--primary);
  color:var(--bg);
  border-radius:50%;
  min-width:18px;
  height:18px;
  font-size:.6875rem;
  font-weight:700;
}
.collection-toolbar button {
  min-height:48px;
}
#refresh>span:first-child {
  font-size:1.25rem;
  line-height:1;
}
#filter-panel {
  margin-top:12px;
}
#collection-filters {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:5px;
  padding:20px;
  margin:0;
  min-width:0;
}
#collection-filters label {
  display:grid;
  gap:7px;
  font-size:.8125rem;
}
#collection-filters select {
  font-size:.8125rem;
}
#clear-collection-filters {
  align-self:end;
}
.collection-caption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin:22px 0 18px;
  min-height:20px;
}
.collection-caption p {
  font-size:.8125rem;
  margin:0;
}
.collection-caption>span {
  font-size:.625rem;
  letter-spacing:.16em;
  color:var(--faint);
  white-space:nowrap;
}
#results,#collection {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:30px 24px;
  align-items:start;
}
#results:empty,#collection:empty {
  display:none;
}
#results article,#collection article {
  min-width:0;
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:7px;
  padding:12px;
  transition:border-color .2s;
}
#results article:hover,#collection article:hover {
  border-color:#675845;
}
#results article h3 {
  font-family:var(--sans);
  font-weight:600;
  font-size:1rem;
  line-height:1.4;
  margin:14px 0 6px;
}
#collection article>p {
  font-size:.75rem;
  line-height:1.65;
  margin:13px 1px 12px;
}
#collection article strong {
  font-size:.9375rem;
  font-weight:550;
  color:var(--text);
  line-height:1.5;
  display:inline-block;
  margin-bottom:3px;
}
.image-button {
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:transparent!important;
  cursor:zoom-in;
  overflow:hidden;
  border-radius:9px;
}
.image-button img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:488/680;
  object-fit:contain;
  border-radius:9px;
  transition:transform .28s;
  box-shadow:0 5px 15px #0003;
}
.image-button:hover img {
  transform:scale(1.015);
}
.card-tags {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin:10px 0 15px;
}
.card-tags span {
  font-size:.625rem;
  letter-spacing:.015em;
  border:1px solid #333844;
  color:var(--muted);
  padding:3px 7px;
  border-radius:3px;
}
.card-tags .foil-tag {
  color:#d5bddf;
  border-color:#574461;
  background:#322638;
}
.card-editor {
  border-top:1px solid var(--border);
}
.card-editor summary {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:42px;
  list-style:none;
  cursor:pointer;
  font-size:.75rem;
  color:var(--muted);
}
.card-editor summary::-webkit-details-marker {
  display:none;
}
.card-editor summary span {
  font-size:1.125rem;
  color:var(--primary);
  transition:transform .2s;
}
.card-editor[open] summary span {
  transform:rotate(45deg);
}
.card-editor[open] summary {
  color:var(--text);
}
.card-fields {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 9px;
}
.card-fields label {
  display:grid;
  gap:6px;
  font-size:.75rem;
  align-content:start;
}
.card-fields label:has(input[type=checkbox]) {
  display:flex;
  align-items:center;
  align-self:end;
  min-height:44px;
  gap:3px;
  line-height:1.4;
}
.card-fields input,.card-fields select {
  font-size:.8125rem;
  min-height:42px;
  padding:8px;
  width:100%;
}
.card-actions {
  display:flex;
  gap:8px;
  margin-top:13px;
}
.card-actions button {
  flex:1;
  font-size:.8125rem;
  padding:8px;
}
.delete-card {
  background:transparent;
  color:#f19d9a;
  border-color:#594043;
}
.delete-card:hover {
  background:#43282b;
}
.item-message,.printing-message {
  font-size:.75rem;
  line-height:1.6;
  color:var(--primary);
  overflow-wrap:anywhere;
  margin:10px 0 0;
}
.item-message:empty,.printing-message:empty,.original-name:empty {
  display:none;
}
.empty-state {
  text-align:center;
  padding:30px 20px 54px;
}
.empty-state img {
  mix-blend-mode:lighten;
  display:block;
  margin:0 auto 10px;
  object-fit:cover;
}
.empty-state h2 {
  font-size:2rem;
  margin-bottom:13px;
}
.empty-state p {
  font-size:.875rem;
  margin-bottom:24px;
}
.loading-state {
  grid-column:1/-1;
  text-align:center;
  padding:50px 20px;
  font-size:.875rem;
}
.section-intro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin:33px 0 26px;
}
.section-intro .eyebrow {
  margin-bottom:11px;
}
.section-intro h2 {
  font-size:2.5rem;
  margin:0;
}
.section-intro>p {
  font-size:.8125rem;
  line-height:1.8;
  margin:0;
}
.search-console {
  padding:22px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:7px;
}
.search-modes {
  display:flex;
  gap:23px;
  margin-bottom:20px;
}
.search-modes button {
  min-height:32px;
  padding:0 0 8px;
  border-radius:0;
  border:0;
  border-bottom:1px solid transparent;
  background:none;
  color:var(--muted);
  font-size:.8125rem;
  font-weight:450;
}
.search-modes button[aria-selected=true] {
  color:var(--primary);
  border-bottom-color:var(--primary);
}
.name-search {
  display:flex;
  gap:10px;
}
.name-search input {
  flex:1;
}
.name-search button {
  flex-shrink:0;
}
.code-search {
  display:grid;
  grid-template-columns:1fr 1fr auto;
  align-items:end;
  gap:14px;
}
.code-search label {
  display:grid;
  gap:7px;
}
.code-search button {
  min-height:48px;
}
#results {
  margin-top:28px;
}
#results .original-name {
  font-size:.75rem;
  line-height:1.5;
  margin-bottom:7px;
}
#results .printing-summary {
  font-size:.75rem;
  margin-bottom:18px;
  line-height:1.6;
}
#results .show-printings,#results .add-card,#results .more-printings {
  width:100%;
  margin-top:13px;
  font-size:.8125rem;
}
#results .printings-panel {
  margin-top:14px;
  border-top:1px solid var(--border);
  padding-top:12px;
}
.printings-panel label {
  display:grid;
  gap:6px;
  font-size:.75rem;
  margin:8px 0;
}
.printings-panel select {
  font-size:.8125rem;
}
.printings-panel:empty {
  display:none;
}

.collection-manager {
  margin:4px 0 22px;
  padding:18px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:7px;
}
.collection-switch {
  display:flex;
  align-items:end;
  gap:10px;
}
.collection-switch label {
  display:grid;
  gap:6px;
  flex:1;
}
.collection-switch select {
  width:100%;
}
.new-collection-form {
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--border);
}
.new-collection-form > label {
  display:block;
  margin-bottom:7px;
}
.new-collection-form > div {
  display:flex;
  gap:9px;
}
.new-collection-form input {
  flex:1;
}
.collection-settings-row {
  display:grid;
  grid-template-columns:minmax(130px,.75fr) minmax(180px,1fr) auto auto auto;
  align-items:end;
  gap:10px;
  margin-top:14px;
}
.collection-settings-row label {
  display:grid;
  gap:6px;
}
.collection-settings-row button {
  white-space:nowrap;
}
.danger-text {
  color:#e7aaa6 !important;
}
.add-target-note {
  display:inline-block;
  margin-top:8px;
  color:var(--faint);
  font-size:.75rem;
}
.add-target-note strong {
  color:var(--primary);
  font-weight:600;
}
.move-card-field {
  grid-column:1/-1;
}
.move-card-field select {
  width:100%;
}
.friend-search {
  display:flex;
  gap:10px;
  max-width:720px;
  margin:8px 0 4px;
}
.friend-search input {
  flex:1;
}
#friend-search-result {
  max-width:760px;
  margin:12px 0 30px;
}
.friends-columns {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:18px;
  margin:24px 0 34px;
}
.friends-columns > section {
  min-width:0;
  padding:18px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:7px;
}
.friends-columns h3,
.friend-collections-panel h3 {
  margin:0 0 14px;
  font-family:var(--sans);
  font-size:1rem;
}
.friend-list {
  display:grid;
  gap:9px;
}
.friend-card {
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
  padding:11px;
  background:#18181d;
  border:1px solid #34323a;
  border-radius:6px;
}
.friend-avatar {
  display:grid;
  place-items:center;
  flex:0 0 42px;
  width:42px;
  height:42px;
  overflow:hidden;
  border:1px solid #675a47;
  border-radius:50%;
  background:#211e1b;
  color:var(--primary);
  font-family:var(--serif);
  font-size:1.1rem;
}
.friend-avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.friend-card-copy {
  display:grid;
  min-width:0;
  flex:1;
  gap:3px;
}
.friend-card-copy strong {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.friend-card-copy span {
  color:var(--muted);
  font-size:.72rem;
}
.friend-card-actions {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}
.friend-card-actions button {
  padding:7px 9px;
  min-height:0;
  font-size:.7rem;
}
.friend-empty,
.readonly-empty {
  margin:0;
  color:var(--muted);
  font-size:.8rem;
}
.friend-collections-panel {
  margin:30px 0 8px;
  padding:22px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
}
.friend-collections-head,
.shared-view-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
}
.friend-collection-lists {
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:4px 0 16px;
}
.friend-collection-button {
  display:grid;
  gap:2px;
  min-width:145px;
  text-align:left;
  background:#1a191f;
  color:var(--text);
  border:1px solid #393641;
}
.friend-collection-button span {
  color:var(--muted);
  font-size:.7rem;
}
.friend-collection-button.active {
  border-color:var(--primary);
  background:#272119;
}
.shared-copy-tools {
  display:flex;
  align-items:end;
  gap:10px;
  margin:12px 0 18px;
}
.shared-copy-tools label {
  display:grid;
  flex:1;
  gap:6px;
  max-width:360px;
}
.readonly-collection {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:18px;
  margin-top:18px;
}
.readonly-collection article {
  min-width:0;
  padding:10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:6px;
}
.readonly-collection .image-button {
  width:100%;
}
.readonly-collection img {
  width:100%;
  height:auto;
}
.shared-view {
  padding:46px 0 72px;
}

.chat-tab-badge {
  display:inline-grid !important;
  place-items:center;
  min-width:19px;
  height:19px;
  margin-left:3px;
  padding:0 5px;
  border-radius:999px;
  background:var(--primary);
  color:var(--bg);
  font-family:var(--sans);
  font-size:.65rem !important;
  font-weight:700;
  line-height:1;
}
.chat-layout {
  display:grid;
  grid-template-columns:minmax(220px,300px) minmax(0,1fr);
  min-height:590px;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
}
.chat-sidebar {
  min-width:0;
  padding:17px;
  border-right:1px solid var(--border);
  background:#121217;
}
.chat-sidebar-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:13px;
}
.chat-sidebar-head h3 {
  margin:0;
  font-family:var(--sans);
  font-size:.92rem;
}
.chat-sidebar-head button {
  min-height:0;
  padding:6px 9px;
}
.chat-friend-list {
  display:grid;
  gap:7px;
}
.chat-friend-button {
  display:flex;
  align-items:center;
  width:100%;
  min-width:0;
  gap:10px;
  padding:10px;
  border:1px solid transparent;
  border-radius:6px;
  background:transparent;
  color:var(--text);
  text-align:left;
}
.chat-friend-button:hover {
  background:#1d1c22;
  border-color:#333139;
}
.chat-friend-button.active {
  background:#272119;
  border-color:#675a47;
}
.chat-friend-button .friend-avatar {
  flex-basis:38px;
  width:38px;
  height:38px;
}
.chat-friend-copy {
  display:grid;
  min-width:0;
  flex:1;
  gap:2px;
}
.chat-friend-copy strong,
.chat-friend-copy span {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chat-friend-copy strong {
  font-size:.82rem;
}
.chat-friend-copy span {
  color:var(--muted);
  font-size:.68rem;
  font-weight:400;
}
.chat-unread-count {
  display:grid;
  place-items:center;
  flex:0 0 auto;
  min-width:20px;
  height:20px;
  padding:0 5px;
  border-radius:999px;
  background:var(--primary);
  color:var(--bg);
  font-size:.65rem;
  font-weight:700;
}
.chat-panel {
  position:relative;
  display:flex;
  min-width:0;
  min-height:590px;
}
.chat-empty {
  display:grid;
  place-content:center;
  justify-items:center;
  width:100%;
  padding:50px 24px;
  color:var(--muted);
  text-align:center;
}
.chat-empty>span {
  color:var(--primary);
  font-size:2.4rem;
}
.chat-empty h3 {
  margin:14px 0 6px;
  color:var(--text);
  font-family:var(--serif);
  font-size:1.65rem;
  font-weight:400;
}
.chat-empty p {
  margin:0;
}
.chat-active {
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto auto;
  width:100%;
  min-width:0;
  max-height:690px;
}
.chat-header {
  display:flex;
  align-items:center;
  gap:11px;
  min-height:70px;
  padding:12px 18px;
  border-bottom:1px solid var(--border);
  background:#17161b;
}
.chat-header>div:nth-child(2) {
  display:grid;
  min-width:0;
  flex:1;
  gap:2px;
}
.chat-header strong {
  font-size:.9rem;
}
.chat-header span {
  color:var(--muted);
  font-size:.7rem;
}
.chat-header .friend-avatar {
  flex-basis:42px;
}
.chat-messages {
  display:flex;
  flex-direction:column;
  gap:7px;
  min-height:0;
  overflow-y:auto;
  padding:20px;
  background:
    radial-gradient(circle at top right,#32271822,transparent 34%),
    #101014;
}
.chat-message {
  display:flex;
  width:100%;
}
.chat-message.own {
  justify-content:flex-end;
}
.chat-message.other {
  justify-content:flex-start;
}
.chat-message-bubble {
  max-width:min(76%,560px);
  padding:9px 11px 6px;
  border:1px solid #37353d;
  border-radius:11px 11px 11px 3px;
  background:#1d1c22;
}
.chat-message.own .chat-message-bubble {
  border-color:#66563d;
  border-radius:11px 11px 3px 11px;
  background:#2d261d;
}
.chat-message-bubble p {
  margin:0;
  color:var(--text);
  font-size:.84rem;
  line-height:1.45;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.chat-message-bubble time {
  display:block;
  margin-top:4px;
  color:var(--faint);
  font-size:.6rem;
  text-align:right;
}
.chat-loading,
.chat-start {
  margin:auto;
  color:var(--muted);
  font-size:.78rem;
}
.chat-composer {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
  align-items:end;
  padding:12px 14px;
  border-top:1px solid var(--border);
  background:#17161b;
}
.chat-composer textarea {
  min-height:44px;
  max-height:132px;
  resize:none;
  line-height:1.4;
}
.chat-composer button {
  min-height:44px;
}
#chat-message-status {
  min-height:0;
  margin:0;
  padding:0 14px 10px;
  background:#17161b;
}
.shared-view-head {
  padding-bottom:22px;
  border-bottom:1px solid var(--border);
}
.shared-view-head h1 {
  margin:5px 0 7px;
  font-size:clamp(2.6rem,5vw,4.4rem);
}
.shared-view-head p {
  margin:0;
}

#profile-settings {
  position:absolute;
  top:84px;
  right:0;
  z-index:50;
  width:min(480px,calc(100vw - 40px));
  max-height:calc(100dvh - 130px);
  overflow:auto;
  overscroll-behavior:contain;
  padding:28px;
  background:var(--surface-raised);
  border:1px solid #4c4650;
  border-radius:8px;
  box-shadow:0 20px 80px #0009;
}
#profile-settings h2 {
  font-size:2rem;
  margin-bottom:10px;
}
#profile-settings p {
  font-size:.875rem;
  overflow-wrap:anywhere;
}
#profile-settings input {
  margin:7px 0 12px;
}
#profile-settings h3 {
  font-family:var(--sans);
  font-size:1rem;
  font-weight:600;
}

.avatar-settings {
  margin:20px 0 24px;
  padding:18px 0 22px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.avatar-settings h3 {
  margin:0 0 5px;
}
.avatar-settings > p {
  margin:0 0 14px;
}
.avatar-picker {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
  margin:0 0 12px;
}
.avatar-option {
  display:block;
  width:100%;
  min-height:0;
  aspect-ratio:1;
  padding:3px;
  overflow:hidden;
  border:1px solid #4b4650;
  border-radius:50%;
  background:#1d1b20;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.avatar-option:hover {
  background:#242128;
  border-color:#8d7755;
  transform:translateY(-1px);
}
.avatar-option[aria-pressed="true"] {
  border-color:var(--primary);
  box-shadow:0 0 0 2px #dfb77835;
}
.avatar-option img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}
.avatar-reset {
  padding:0;
  min-height:0;
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:.75rem;
  font-weight:500;
}
.avatar-reset:hover {
  background:transparent;
  color:var(--text);
  text-decoration:underline;
}
#avatar-message {
  min-height:18px;
  margin:8px 0 0;
}
.danger-zone {
  border-top:1px solid var(--border);
  padding-top:22px;
  margin-top:22px;
}
.danger-button {
  background:#783d3b;
  color:#fff;
}
.danger-button:hover {
  background:#97504d;
}
/* Dialogs share the archive's palette. */
#app-modal,#image-modal{position:fixed;inset:0;z-index:1200;width:100%;display:flex;align-items:center;justify-content:center;padding:24px;background:#050709cf;backdrop-filter:blur(8px);animation:modalIn .16s ease-out}.app-modal-card{width:min(440px,100%);max-height:calc(100dvh - 48px);overflow:auto;background:var(--surface-raised);border:1px solid #4a4240;border-radius:10px;padding:30px;box-shadow:0 30px 100px #0009}.app-modal-icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:19px;background:#3c3227;color:var(--primary);border:1px solid #64523b;border-radius:50%;font-family:var(--serif);font-size:1.4rem}.app-modal-icon.danger,.app-modal-icon.error{background:#442c2c;border-color:#784747;color:#f7aeaa}.app-modal-icon.success{background:#263b34;border-color:#436d5c;color:#a7d8c2}#app-modal-title{font-size:1.8rem;margin:0 0 13px}#app-modal-message{font-size:.9375rem;margin:0;white-space:pre-line}.app-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}.modal-secondary{background:transparent;color:var(--text);border-color:#48464b}.modal-secondary:hover{background:#33333c}.modal-danger{background:#853d39;color:#fff}.modal-danger:hover{background:#a9514c}#image-modal{z-index:1100;cursor:zoom-out;padding:72px 20px 25px;background:#050609ed}#image-modal img{max-width:min(92vw,820px);max-height:calc(100dvh - 110px);width:auto;height:auto;border-radius:16px;box-shadow:0 30px 100px #0009;cursor:default}#image-modal p{position:absolute;top:20px;left:60px;right:60px;margin:0;text-align:center;font-size:.8125rem;color:#d8d5cf}#image-modal-close{position:absolute;top:14px;right:16px;width:42px;height:42px;padding:0;border:1px solid #57545a;border-radius:50%;background:var(--surface-raised);color:var(--text);font-size:1.5rem}#photo-tools{padding:20px;border:1px solid var(--border)}#photo-preview{max-width:180px;max-height:250px}.auth-panel{animation:modalIn .25s ease-out}@keyframes modalIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
/* The project journal */
.journal-heading{display:flex;justify-content:space-between;align-items:end;padding:63px 0 53px;gap:30px}.journal-heading h1{font-size:clamp(3.5rem,7vw,6rem);line-height:1.04;margin:17px 0 0}.journal-heading>p{font-size:.9375rem;line-height:1.8;margin:0 0 6px}.journal{display:grid;grid-template-columns:minmax(200px,.6fr) minmax(0,1.4fr);column-gap:70px;row-gap:0}.journal article{padding:34px 0;border-top:1px solid var(--border);min-width:0}.journal article:nth-child(2){grid-column:2;grid-row:1/span 3}.journal article:nth-child(3),.journal article:nth-child(4){grid-column:1}.journal h2{font-size:2rem;margin:17px 0 20px;line-height:1.2}.journal p,.journal li{font-size:.875rem;line-height:1.85}.journal .eyebrow{font-size:.625rem}.journal ul{padding-left:16px;color:var(--muted)}.journal li+li{margin-top:8px}.journal .updates{list-style:none;padding:0;margin:0}.updates li{display:grid;grid-template-columns:1fr auto;gap:28px;padding:20px 0;border-top:1px solid var(--border);color:var(--muted)}.updates strong{color:var(--text);font-weight:550}.updates time{font-size:.6875rem;color:#b4a48c;white-space:nowrap;padding-top:3px;font-variant-numeric:tabular-nums}.journal a{color:var(--primary)}.journal hr{display:none}.history-more{margin:18px 0}.history-more summary{font-size:.8125rem;color:var(--primary);cursor:pointer;width:fit-content;padding:10px 0}.blog-page .site-footer{margin-top:40px}
@media(min-width:1550px){.welcome h1{font-size:5.3rem}.welcome{grid-template-columns:1.35fr 1fr}.brand-art{margin-right:65px}}
@media(max-width:1100px){.site-header,main,.site-footer,.journal-heading{width:calc(100% - 64px)}.welcome{grid-template-columns:minmax(0,1fr) minmax(340px,.95fr)}#auth{padding:30px 25px;margin-left:20px}.welcome h1{font-size:4rem}.brand-art{width:275px}.brand-art img{width:355px;left:-40px;top:-45px}.welcome-bottom{font-size:.5625rem}.desktop-break{display:none}.collection-stats>div{min-width:80px;padding:0 20px}.journal{column-gap:40px}}
@media(max-width:800px){.site-header{min-height:90px}.welcome{grid-template-columns:minmax(0,1fr) minmax(320px,1fr);min-height:660px}.welcome-story{padding-top:43px;padding-right:16px}.welcome h1{font-size:3.15rem;margin-top:28px}.welcome-description{font-size:.875rem}.welcome-bottom{flex-direction:column;gap:4px}.welcome-story .eyebrow{font-size:.5625rem}.fine-line{width:18px;margin-right:6px}.brand-art{margin-top:30px;width:240px}.brand-art img{width:330px}.auth-panel h2{font-size:2rem}#auth{padding:25px 19px;margin-top:36px;margin-left:14px}.auth-topline{gap:8px;margin-bottom:26px}.auth-topline .eyebrow{font-size:.5625rem}.header-nav{gap:22px}.collection-stats>div{padding:0 14px;min-width:65px}.collection-stats dd{font-size:1.9rem}.workspace-heading h1{font-size:3rem}.journal{grid-template-columns:1fr}.journal article:nth-child(n){grid-column:auto;grid-row:auto}.journal article:nth-child(2){order:-1}}
@media(max-width:960px){.friends-columns{grid-template-columns:1fr 1fr}.collection-settings-row{grid-template-columns:1fr 1fr}.collection-settings-row button{width:100%}}
@media(max-width:700px){.site-header,main,.site-footer,.journal-heading{width:calc(100% - 40px)}.collection-switch{align-items:stretch;flex-wrap:wrap}.collection-switch label{flex-basis:100%}.collection-switch button{flex:1}.new-collection-form>div{display:grid}.collection-settings-row{grid-template-columns:1fr}.friend-search{display:grid}.friends-columns{grid-template-columns:1fr}.friend-card{align-items:flex-start}.friend-card-actions{justify-content:flex-start}.friend-collections-head,.shared-view-head{display:grid}.shared-copy-tools{display:grid}.shared-copy-tools label{max-width:none}.readonly-collection{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}.brand{width:215px;height:44px}.brand img{width:305px;left:-55px;top:-29px}.header-nav .nav-account{display:none}.header-nav{font-size:.8125rem}.welcome{display:flex;flex-direction:column;min-height:0}.welcome-story{padding:32px 0 16px;overflow:hidden;min-height:235px}.welcome h1{font-size:2.8rem;line-height:1.03;margin:21px 0 16px}.welcome h1 br:nth-child(2){display:none}.welcome h1 em{display:block}.welcome-description{font-size:.875rem;max-width:70%;margin-bottom:6px}.welcome-story .eyebrow{font-size:.5625rem}.brand-art{position:absolute;right:-12px;bottom:5px;width:165px;height:180px;margin:0;z-index:-1}.brand-art img{width:240px;left:-37px;top:-30px;opacity:.36;transform:rotate(-10deg)}.welcome-story{isolation:isolate}.welcome-bottom{display:none}#auth{margin:12px 0 32px;padding:27px 24px 23px;width:100%;border-radius:7px}.auth-topline{margin-bottom:23px}.auth-topline .eyebrow{font-size:.625rem}.auth-panel h2{font-size:2.15rem}.auth-panel h2 br{display:none}.auth-intro{margin-bottom:22px}.auth-panel input{font-size:1rem}.captcha-area{margin-top:20px}.site-footer{align-items:flex-start;gap:18px;flex-direction:column;padding:24px 0 28px}.footer-links{gap:24px;font-size:.75rem}.workspace-bar{padding:19px 0 13px}.workspace-bar>.eyebrow{font-size:.5625rem}.profile-bar{gap:4px;max-width:65%}#profile-toggle{font-size:.75rem;padding-right:3px}.profile-avatar{width:26px;height:26px}#logout{font-size:.75rem;padding:7px 9px}.workspace-heading{display:block;margin:13px 0 22px}.workspace-heading h1{font-size:2.6rem}.collection-stats{margin-top:26px;width:100%;padding:17px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.collection-stats>div{flex:1;padding:0 24px}.collection-stats>div:first-child{border-left:0;padding-left:0}.collection-stats dd{font-size:1.9rem}.collection-stats dt{font-size:.75rem}.workspace-tabs{gap:27px;margin-bottom:21px}.workspace-tabs button{font-size:.8125rem;padding:10px 0 14px}.collection-toolbar{gap:7px}.collection-toolbar button{padding:11px 13px;font-size:.8125rem}.search-field{padding:0 10px;gap:8px}.search-field input{font-size:1rem}.search-field input::placeholder{font-size:.8125rem}.refresh-label{display:none}.collection-caption{margin:19px 0 14px}.collection-caption>span{display:none}.collection-caption p{font-size:.75rem}#collection-filters{grid-template-columns:1fr 1fr;padding:15px;gap:14px 10px}#results,#collection{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}#results article,#collection article{padding:9px}.card-fields{grid-template-columns:1fr}.card-fields label{font-size:.75rem}.card-fields input,.card-fields select{font-size:1rem}#collection article strong{font-size:.8125rem}.card-tags{gap:4px}.card-tags span{font-size:.5625rem;padding:3px 5px}.card-actions{flex-direction:column}.section-intro{margin-top:27px;display:block}.section-intro h2{font-size:2.1rem}.section-intro>p{margin-top:12px}.section-intro>p br{display:none}.search-console{padding:17px}.name-search{display:block}.name-search button{width:100%;margin-top:12px;justify-content:space-between}.code-search{grid-template-columns:1fr 1fr}.code-search button{grid-column:1/-1}.search-modes{gap:20px}.search-modes button{font-size:.8125rem}.empty-state{padding:22px 8px 30px}.empty-state h2{font-size:1.8rem}.empty-state img{width:100px;height:100px}.journal-heading{padding:37px 0 32px;display:block}.journal-heading h1{font-size:4rem}.journal-heading>p{margin-top:22px;font-size:.875rem}.journal-heading>p br{display:none}.journal article{padding:26px 0}.journal h2{font-size:1.8rem}.updates li{grid-template-columns:1fr;gap:9px}.updates time{grid-row:1;font-size:.6875rem}.updates li{padding:17px 0}#profile-settings{top:68px;width:100%;padding:22px}.app-modal-card{padding:25px}.app-modal-actions{flex-direction:column-reverse}.app-modal-actions button{width:100%}#app{padding-bottom:45px}}
@media(max-width:380px){.site-header,main,.site-footer,.journal-heading{width:calc(100% - 28px)}.brand{width:190px}.brand img{width:277px;left:-51px;top:-25px}.site-header{gap:10px}.header-nav{font-size:.75rem}#auth{padding:23px 15px}.welcome h1{font-size:2.55rem}.auth-panel h2{font-size:1.9rem}.footer-links{gap:17px}.collection-toolbar .secondary-button{padding:10px}.collection-toolbar .secondary-button .icon{display:none}.workspace-bar>.eyebrow{max-width:75px}.workspace-tabs{gap:24px}.card-tags span{font-size:.5625rem}.captcha-area{margin-left:-4px;margin-right:-4px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* The supplied artwork keeps its original colors and merges into the canvas. */
@media (max-width: 700px) {
  .welcome-story {
    isolation: isolate;
    background: var(--bg);
  }
}
@media (max-width: 700px) {
  .brand-art {
    right: -8px;
    bottom: 0;
    width: 100px;
    height: 105px;
  }
  .brand-art img {
    width: 155px;
    left: -28px;
    top: -25px;
    opacity: .35;
  }
}

@media(max-width:820px){.chat-layout{grid-template-columns:1fr;min-height:0}.chat-sidebar{border-right:0;border-bottom:1px solid var(--border)}.chat-friend-list{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}.chat-friend-button{min-width:190px}.chat-panel{min-height:520px}.chat-active{max-height:620px}}
@media(max-width:700px){.workspace-tabs{gap:22px;overflow-x:auto;scrollbar-width:none}.workspace-tabs::-webkit-scrollbar{display:none}.workspace-tabs button{flex:0 0 auto}.chat-layout{margin-left:-2px;margin-right:-2px}.chat-sidebar{padding:12px}.chat-panel{min-height:500px}.chat-header{min-height:62px;padding:10px 13px}.chat-messages{padding:14px 11px}.chat-message-bubble{max-width:86%}.chat-composer{padding:10px}.chat-composer button{padding-left:14px;padding-right:14px}}


/* Keep names readable and conversation controls available on narrow screens. */
.chat-header strong { overflow-wrap:anywhere; }
#chat-minimize { flex:0 0 auto; min-height:44px; padding:8px 10px; font-size:.75rem; }
.chat-active.is-minimized { display:block; align-self:flex-start; }
.conversation-minimized, .conversation-minimized .chat-panel { min-height:0; }
.friend-card-copy strong, .chat-friend-copy strong { white-space:normal; overflow-wrap:anywhere; }
@media(max-width:700px) {
  .friend-card { display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; }
  .friend-card-actions { grid-column:1 / -1; width:100%; justify-content:flex-start; }
  .friend-card-actions button { min-height:44px; flex:1 1 auto; }
  .chat-friend-list { display:grid; max-height:240px; overflow-y:auto; overflow-x:hidden; }
  .chat-friend-button { min-width:0; }
  .chat-header { flex-wrap:wrap; }
}

/* Photo lookup */
#search-by-photo {
  margin-top: 2px;
}
#photo-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 0;
  border: 0;
}
.photo-picker {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 16px;
  border: 1px dashed #55505a;
  border-radius: 6px;
  background: #0e1218;
  cursor: pointer;
  transition: border-color .18s, background .18s;
}
.photo-picker:hover {
  border-color: var(--primary);
  background: #15171d;
}
.photo-picker-icon {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border: 1px solid #5d4d37;
  border-radius: 50%;
  color: var(--primary);
  font-size: 1.6rem;
}
.photo-picker > span:nth-child(2) {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.photo-picker strong {
  color: var(--text);
  font-size: .875rem;
  font-weight: 600;
}
.photo-picker small {
  color: var(--muted);
  font-size: .75rem;
}
.photo-picker-action {
  margin-left: auto;
  color: var(--primary);
  font-size: .8125rem;
  white-space: nowrap;
}
.photo-review {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
#photo-preview {
  width: 62px;
  height: 82px;
  max-width: none;
  max-height: none;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.photo-review > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.photo-review strong {
  font-size: .8125rem;
}
.photo-review span {
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.5;
}
#recognize-photo {
  min-width: 180px;
}
#photo-message {
  grid-column: 1 / -1;
  margin: 0;
}
@media (max-width: 700px) {
  .search-modes {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .search-modes::-webkit-scrollbar {
    display: none;
  }
  .search-modes button {
    flex: 0 0 auto;
  }
  #photo-tools {
    grid-template-columns: 1fr;
  }
  .photo-picker {
    align-items: flex-start;
  }
  .photo-picker-action {
    display: none;
  }
  #recognize-photo {
    width: 100%;
  }
}

.profile-sale-settings {
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid var(--border);
}
.profile-sale-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.profile-sale-heading h3 {
  margin:0 0 5px;
}
.profile-sale-heading p {
  margin:0;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.45;
}
.profile-link-button {
  flex:0 0 auto;
  padding:8px 10px;
  min-height:0;
  font-size:.7rem;
  text-decoration:none;
}
.profile-sale-slots {
  display:grid;
  gap:10px;
}
.profile-sale-slot {
  position:relative;
  display:grid;
  grid-template-columns:44px 58px minmax(0,1fr);
  gap:11px;
  align-items:center;
  padding:11px;
  background:#17161b;
  border:1px solid #34323a;
  border-radius:7px;
}
.profile-sale-slot-number {
  color:var(--faint);
  font-family:var(--serif);
  font-size:1.1rem;
}
.profile-sale-preview {
  display:grid;
  place-items:center;
  width:52px;
  aspect-ratio:5/7;
  overflow:hidden;
  border:1px solid #4d4652;
  border-radius:5px;
  color:var(--primary);
  background:#211e1b;
}
.profile-sale-preview img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.profile-sale-fields {
  display:grid;
  grid-template-columns:minmax(0,1fr) 104px;
  gap:9px;
}
.profile-sale-fields label {
  display:grid;
  gap:5px;
  min-width:0;
  color:var(--muted);
  font-size:.68rem;
}
.profile-sale-fields select,
.profile-sale-fields input {
  min-width:0;
  width:100%;
  font-size:.74rem;
}
.profile-sale-actions {
  grid-column:2/-1;
  display:flex;
  gap:7px;
  justify-content:flex-end;
}
.profile-sale-actions button {
  min-height:0;
  padding:7px 9px;
  font-size:.68rem;
}
.profile-sale-empty {
  margin:0;
  color:var(--muted);
  font-size:.78rem;
}
.public-profile-main,
.store-main {
  padding:54px 0 80px;
}
.public-profile-hero {
  display:flex;
  align-items:center;
  gap:24px;
  padding:20px 0 34px;
  border-bottom:1px solid var(--border);
}
.public-profile-avatar {
  display:grid;
  place-items:center;
  flex:0 0 112px;
  width:112px;
  height:112px;
  overflow:hidden;
  border:1px solid #6a593e;
  border-radius:50%;
  background:#211e1b;
  color:var(--primary);
  font-family:var(--serif);
  font-size:3rem;
}
.public-profile-avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.public-profile-hero h1,
.store-hero h1,
.profile-public-loading h1 {
  margin:4px 0 8px;
  font-size:clamp(2.8rem,6vw,5rem);
  line-height:.95;
}
.public-profile-bio {
  margin:0;
  color:var(--muted);
}
.public-sale-section {
  padding:38px 0 0;
}
.public-sale-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.public-sale-card {
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
}
.public-sale-image {
  display:grid;
  place-items:center;
  aspect-ratio:5/7;
  overflow:hidden;
  background:#17161b;
  color:var(--primary);
  font-size:2rem;
}
.public-sale-image img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.public-sale-copy {
  padding:15px;
}
.public-sale-copy h3 {
  margin:5px 0 5px;
  font-family:var(--serif);
  font-size:1.3rem;
  font-weight:400;
}
.public-sale-edition {
  min-height:34px;
  margin:0 0 10px;
  color:var(--muted);
  font-size:.73rem;
}
.public-sale-price {
  display:block;
  margin-top:14px;
  color:var(--primary);
  font-family:var(--serif);
  font-size:1.55rem;
  font-weight:400;
}
.public-sale-empty {
  padding:38px 20px;
  text-align:center;
  color:var(--muted);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
}
.profile-public-loading {
  min-height:52vh;
  display:grid;
  align-content:center;
  justify-items:start;
}
.profile-public-loading p {
  max-width:540px;
}
.store-hero {
  padding:32px 0 42px;
  border-bottom:1px solid var(--border);
}
.store-hero h1 span {
  color:var(--primary);
}
.store-hero>p:last-child {
  margin:0;
  color:var(--muted);
}
.store-empty {
  display:grid;
  justify-items:center;
  padding:84px 20px 110px;
  text-align:center;
}
.store-empty h2 {
  margin:8px 0 0;
  font-family:var(--serif);
  font-size:clamp(1.8rem,4vw,3rem);
  font-weight:400;
}
@media(max-width:760px){
  .profile-sale-heading{display:grid}
  .profile-link-button{justify-self:start}
  .profile-sale-slot{grid-template-columns:34px 52px minmax(0,1fr)}
  .profile-sale-fields{grid-template-columns:1fr}
  .public-profile-main,.store-main{padding:30px 0 58px}
  .public-profile-hero{align-items:flex-start;gap:16px}
  .public-profile-avatar{flex-basis:76px;width:76px;height:76px;font-size:2rem}
  .public-profile-hero h1,.store-hero h1,.profile-public-loading h1{font-size:2.65rem}
  .public-sale-grid{grid-template-columns:1fr}
}
@media(max-width:430px){
  .profile-sale-slot{grid-template-columns:32px 48px minmax(0,1fr);padding:9px;gap:8px}
  .profile-sale-preview{width:46px}
  .profile-sale-actions{grid-column:1/-1}
}

.sale-settings-shortcut {
  border-color:#6d5a3f;
}
.collection-sale-settings {
  margin:0 0 22px;
  padding:18px;
  background:var(--surface);
  border:1px solid #4b4030;
  border-radius:7px;
}
.collection-sale-settings .profile-sale-heading {
  margin-bottom:16px;
}
.collection-sale-settings .profile-sale-heading h3 {
  margin:4px 0 5px;
  font-family:var(--serif);
  font-size:1.55rem;
  font-weight:400;
}

.public-collection-section {
  padding:42px 0 0;
}
.public-collection-heading {
  margin-bottom:18px;
}
.public-collection-tabs {
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:0 0 16px;
  scrollbar-width:thin;
}
.public-collection-tab {
  display:grid;
  gap:2px;
  min-width:145px;
  padding:10px 13px;
  text-align:left;
  color:var(--text);
  background:#17161b;
  border:1px solid #393641;
  border-radius:6px;
}
.public-collection-tab strong {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.8rem;
}
.public-collection-tab span {
  color:var(--muted);
  font-size:.67rem;
  font-weight:400;
}
.public-collection-tab[aria-selected="true"] {
  background:#292218;
  border-color:#745f41;
}
.public-collection-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:18px;
}
.public-collection-card {
  overflow:hidden;
  min-width:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:7px;
}
.public-collection-card-image {
  display:grid;
  place-items:center;
  aspect-ratio:5/7;
  overflow:hidden;
  color:var(--primary);
  background:#17161b;
  font-size:1.7rem;
}
.public-collection-card-image img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.public-collection-card-body {
  padding:12px;
}
.public-collection-card-body h3 {
  margin:0 0 5px;
  font-family:var(--serif);
  font-size:1rem;
  font-weight:400;
  line-height:1.18;
}
.public-collection-card-body>p {
  min-height:30px;
  margin:0 0 9px;
  color:var(--muted);
  font-size:.68rem;
  line-height:1.4;
}
.public-collection-empty {
  display:grid;
  justify-items:center;
  padding:56px 20px;
  text-align:center;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
}
.public-collection-empty img {
  width:70px;
  height:70px;
  opacity:.55;
  margin-bottom:14px;
}
.public-collection-empty h3 {
  margin:0 0 6px;
  font-family:var(--serif);
  font-size:1.4rem;
  font-weight:400;
}
.public-collection-empty p,
.public-collection-list-empty {
  color:var(--muted);
}
.public-collection-list-empty {
  grid-column:1/-1;
  margin:0;
  padding:38px 20px;
  text-align:center;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:7px;
}
@media(max-width:700px){
  .collection-switch .sale-settings-shortcut{flex:1}
  .collection-sale-settings{padding:14px}
  .public-collection-section{padding-top:30px}
  .public-collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 9px}
  .public-collection-card-body{padding:9px}
  .public-collection-card-body h3{font-size:.9rem}
  .public-collection-card-body>p{font-size:.62rem}
}

.estimated-price {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin:10px 0 0;
  padding-top:9px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:.7rem;
}
.estimated-price strong {
  color:var(--primary);
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:400;
}
.estimated-price-total {
  text-align:right;
  white-space:nowrap;
}
.estimated-price-unavailable {
  justify-content:flex-start;
  color:var(--faint);
  font-size:.66rem;
}
.public-collection-card .estimated-price {
  margin-top:10px;
}
@media(max-width:700px){
  .estimated-price{display:grid;gap:2px}
  .estimated-price-total{text-align:left}
}

.wishlist-toolbar {
  display:flex;
  align-items:end;
  gap:10px;
  flex-wrap:wrap;
  margin:6px 0 8px;
  padding:16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:7px;
}
.wishlist-toolbar label {
  display:grid;
  gap:6px;
  min-width:180px;
}
.wishlist-counter {
  margin-left:auto;
  align-self:center;
  color:var(--muted);
  font-size:.78rem;
}
.wishlist-counter strong {
  color:var(--text);
  font-size:1rem;
}
.wishlist-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:18px;
  margin-top:22px;
}
.wishlist-card {
  overflow:hidden;
  min-width:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:7px;
}
.wishlist-card-image {
  display:grid;
  place-items:center;
  aspect-ratio:5/7;
  overflow:hidden;
  background:#111218;
  color:var(--muted);
  font-size:2rem;
}
.wishlist-card-image img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.wishlist-card-body {
  display:grid;
  gap:8px;
  padding:12px;
}
.wishlist-card-body h3 {
  margin:0;
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:400;
  line-height:1.2;
}
.wishlist-card-body p {
  margin:0;
  color:var(--muted);
  font-size:.72rem;
  line-height:1.45;
}
.wishlist-remove {
  width:100%;
  margin-top:4px;
}
.wishlist-empty {
  margin-top:24px;
  padding:54px 20px;
  text-align:center;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:7px;
}
.wishlist-empty h3 {
  margin:0 0 8px;
  font-family:var(--serif);
  font-size:1.55rem;
  font-weight:400;
}
.wishlist-empty p {
  margin:0 0 18px;
  color:var(--muted);
}
#results .wishlist-card.secondary-button {
  width:100%;
  margin-top:8px;
}
.public-wishlist-section {
  margin-top:54px;
}
.public-wishlist-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:18px;
}
.public-wishlist-card {
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:7px;
}
.public-wishlist-card-image {
  aspect-ratio:5/7;
  overflow:hidden;
  background:#111218;
}
.public-wishlist-card-image img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.public-wishlist-card-body {
  padding:12px;
}
.public-wishlist-card-body h3 {
  margin:0 0 7px;
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:400;
  line-height:1.2;
}
.public-wishlist-card-body p {
  margin:0;
  color:var(--muted);
  font-size:.72rem;
}
@media(max-width:700px){
  .wishlist-toolbar {
    align-items:stretch;
  }
  .wishlist-toolbar label,
  .wishlist-toolbar button {
    width:100%;
  }
  .wishlist-counter {
    margin-left:0;
  }
  .wishlist-grid,
  .public-wishlist-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
}