/* Sign-in and collection pages */
.auth { width: 100%; box-sizing: border-box; max-width: 460px; margin: 14vh auto 0; padding: 0 var(--gutter) 120px; }
.auth h1 { font-size: 34px; font-weight: 500; letter-spacing: -0.035em; line-height: 1.1; margin: 0 0 14px; }
.auth-note { font-size: 13px; line-height: 1.45; color: #444; margin: 0 0 16px; }
.auth-url { display: inline-block; word-break: break-all; }
.auth-form { display: grid; gap: 8px; margin: 0 0 12px; }
.auth-form input, .auth-form textarea { border: 1px solid var(--line); border-radius: 0; padding: 11px 12px; font: inherit; font-size: 16px; background: #fff; }
.auth-btn { border: 1px solid #000; background: #000; color: #fff; padding: 11px 14px; font: inherit; font-size: 13px; cursor: pointer; border-radius: 0; }
.auth-btn:disabled { opacity: 0.35; cursor: default; }
.auth-link { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; color: #444; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.auth-link:hover { color: #000; }
.auth-error { color: #b00020; font-size: 13px; margin: 0 0 12px; }
.auth-alt { font-size: 12px; margin: 16px 0 0; }

.profile-page main { padding-top: 0; }
.p-head { margin: 30px 0 0; max-width: 760px; }
.p-head h1 { font-size: 46px; font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; margin: 0 0 12px; }
.p-user { font-size: 11.5px; color: #777; margin: 0 0 14px; }
.p-bio { font-size: 15px; line-height: 1.4; margin: 0 0 14px; max-width: 34em; }
.p-owner { font-size: 12px; margin: 12px 0 0; }
.p-edit { margin-top: 14px; max-width: 420px; }
.p-empty, .p-loading { font-size: 13px; color: #777; margin: 60px 0; }
.p-pending { font-size: 10px; font-style: normal; color: #b36b00; padding-left: 8px; }
#items { margin-top: 40px; }
@media (max-width: 760px) {
  .auth { margin-top: 8vh; }
  .p-head h1 { font-size: 30px; }
}
.acct-h { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; margin: 30px 0 8px; }
.p-file { display: grid; gap: 6px; font-size: 12px; color: #444; }
.p-file input { font-size: 13px; }
#add-form select { border: 1px solid var(--line); border-radius: 0; padding: 11px 12px; font: inherit; font-size: 16px; background: #fff; }
.list .row { position: relative; }
.p-x { position: absolute; right: 0; top: 50%; transform: translateY(-50%); border: 0; background: #fff; color: #8c8c8c; font: inherit; font-size: 10px; padding: 2px 6px; cursor: pointer; opacity: 0; }
.row:hover .p-x, .touch .p-x { opacity: 1; }
.row.on .p-x { background: #000; color: #fff; }
.u-list { margin: 30px var(--gutter) 0; max-width: 760px; }
.u-row { display: grid; grid-template-columns: 2fr 1.4fr 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; }
.u-row:hover { background: #000; color: #fff; padding-left: 10px; padding-right: 10px; margin: 0 -10px; }
.profile-page .p-head { margin-left: 0; }
.s-tabs { font-size: 13px; margin: 0 0 16px; }
.s-tabs .on { text-decoration: none; font-weight: 500; color: #000; }
.auth-form textarea { font: inherit; resize: vertical; }
#ad-fields { display: contents; }
.auth-form[hidden], .p-edit[hidden] { display: none; }
.profile-page .p-head { margin: 22px 0 0; }
.p-user { margin: 0 0 18px; }
.ed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin: 14px 0 40px; }
.ed-card { border: 1px solid var(--line); padding: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 11.5px; line-height: 1.35; }
.ed-img { height: 200px; display: flex; align-items: center; justify-content: center; color: #bbb; }
.ed-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ed-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.ed-btn { border: 1px solid #000; background: #fff; color: #000; padding: 3px 8px; font: inherit; cursor: pointer; border-radius: 0; }
.ed-btn:hover { background: #000; color: #fff; }
.ed-file { display: none; }

/* editable list (owner) */
.el-list { min-width: 0; }
.el-row { display: grid; grid-template-columns: 40px var(--cols) 72px; align-items: center; gap: 0; min-height: 49px; }
.el-fields { display: contents; }
.el-head { min-height: 0; padding-bottom: 14px; border-bottom: 1px solid #000; font-family: "Areal Mono", ui-monospace, monospace; font-size: 7.5px; text-transform: uppercase; letter-spacing: 0.02em; align-items: end; }
.el-row.divide { border-top: 1px solid var(--line); }
.el-thumb { display: flex; align-items: center; justify-content: center; width: 32px; height: 40px; cursor: pointer; color: #8c8c8c; border: 1px dashed transparent; }
.el-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.el-new .el-thumb { border-color: #bbb; }
.el-in { border: 1px solid transparent; background: transparent; font: inherit; font-size: 11.5px; padding: 7px 8px; margin-right: 8px; min-width: 0; border-radius: 0; }
.el-in:hover { border-color: var(--line); }
.el-in:focus { outline: 0; border-color: #000; background: #fff; }
.el-x { border: 0; background: none; font: inherit; font-size: 14px; cursor: pointer; color: #8c8c8c; }
.el-x:hover { color: #000; }
.el-add { margin-top: 14px; align-self: start; justify-self: start; }
.el-list { display: block; }
.profile-page .p-head { margin: 60px 0 50px; }
#items { margin-top: 30px; }
.list.is-empty .row.head, .list.is-empty .el-head { border-bottom-color: var(--line); }
.auth-google { width: 100%; margin: 0 0 4px; background: #fff; color: #000; }
.auth-google:hover { background: #000; color: #fff; }
.auth-or { margin: 10px 0 6px; color: #777; }

/* Users page */
.users-page .list-section { margin-top: 10px; }
.users-page { padding-bottom: 80px; }
.u-table .row { text-decoration: none; color: inherit; }
.u-table .row:not(.head):hover { background: #000; color: #fff; }
.u-table .row:not(.head):hover span:first-child { padding-left: 14px; }
.u-tag { font-style: normal; color: #8c8c8c; padding-left: 8px; }
.u-table .row:hover .u-tag { color: #bbb; }
.u-table .row:not(.head) { border-top: 1px solid var(--line); }
.u-table .row.head + .row { border-top: 0; }
.u-table .row:last-child { border-bottom: 1px solid var(--line); }

/* status messages show at the top of the screen, where they can be seen while editing */
#owner-msg:not(:empty) { position: fixed; left: var(--gutter); right: var(--gutter); top: calc(var(--bar-h) + 10px); z-index: 60; background: #000; color: #fff; padding: 10px 14px; margin: 0; font-size: 12px; }
.el-new .el-in { border-color: var(--line); }
.el-new .el-save { margin-left: 4px; align-self: center; }
.el-new { grid-template-columns: 40px var(--cols) 56px; }
@media (max-width: 760px) { .el-new { grid-template-columns: 40px 1fr 56px; } }

/* editable list: same layout as desktop on a phone, just fitted: thumbnail | columns | x, text wraps instead of being cut off */
.el-f { display: contents; }
.el-in { display: block; width: 100%; box-sizing: border-box; margin: 0; font: inherit; font-size: 11.5px; line-height: 1.3; padding: 7px 8px; border: 1px solid transparent; background: transparent; border-radius: 0; min-width: 0; }
.el-in:hover { border-color: var(--line); }
.el-in:focus { outline: 0; border-color: #000; background: #fff; }
@media (max-width: 760px) {
  /* full-size text (16px) so the phone never zooms in on a box, one line per box: the table scrolls sideways instead of squeezing */
  .el-list { min-width: 660px; }
  .el-row { grid-template-columns: 34px 250px 170px 170px 104px; align-items: center; padding: 4px 0; min-height: 0; gap: 0; }
  .el-n4 .el-row { grid-template-columns: 34px 200px 170px 130px 90px 104px; }
  .el-head { display: grid; padding: 0 0 10px; }
  .el-thumb { width: 28px; height: 40px; }
  .el-in { font-size: 16px; padding: 10px 8px; min-height: 44px; border-color: #ececec; }
  .el-x { width: 30px; height: 44px; font-size: 22px; }
  .el-new, .el-n3 .el-new { grid-template-columns: 34px 250px 170px 170px; }
  .el-n4 .el-new { grid-template-columns: 34px 200px 170px 130px 90px; }
  /* the Add buttons stay in view while the table is scrolled sideways */
  .el-new .el-save, .el-add { position: sticky; left: 0; width: calc(100vw - 2 * var(--gutter)); min-height: 46px; margin: 12px 0 0; font-size: 15px; }
  .el-new .el-save { grid-column: 1 / -1; background: #000; color: #fff; }
  .el-add { margin-top: 14px; }
}
.el-tip { font-size: 10px; line-height: 1.4; color: #9a9a9a; margin: 0 0 6px; }

/* editor: move up / move down / remove */
.el-acts { display: flex; justify-content: flex-end; align-items: center; gap: 2px; }
.el-mv { border: 0; background: none; font: inherit; font-size: 12px; color: #8c8c8c; cursor: pointer; padding: 2px 5px; }
.el-mv:hover { color: #000; }
@media (max-width: 760px) { .el-mv { width: 32px; height: 44px; font-size: 18px; padding: 0; } .el-list { min-width: 740px; } }