/*
  The open market: the only part of Renta a person can read without an
  account. It sits on top of auth.css and borrows its palette, because a
  stranger arriving from a shared link should feel they are somewhere that
  belongs to the same place as the sign-in screen behind it.

  Dark by default, like the rest of the signed-out app, and laid out for a
  phone first: a search that reaches with one thumb, then a plain column of
  flats.

  ONE RULE ABOUT COLOUR HERE: every button on these pages paints its own
  background AND its own text, in literal ink rather than a token. These
  pages load auth.css as well, and a rule there that sets a background
  without this file setting the text (or the other way round) is how a gold
  word ends up sat on a gold pill, invisible.

  ONE RULE ABOUT WIDTH: nothing on these pages may be wider than the phone
  holding it. A swipeable rail of photographs is the classic way to break
  that - a grid or flex item is allowed to grow to its content by default,
  so six pictures quietly push the whole page out to several screens wide
  and every line of text goes with it. Every track and every item that can
  hold a rail therefore says `min-width: 0`, which is what lets the rail
  scroll inside the column instead of stretching it.
*/

body.market {
  margin: 0;
  min-height: 100dvh;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  /* last line of defence: clip rather than hidden, so a sticky panel or a
     sticky top bar still sticks to the viewport */
  overflow-x: clip;
}

/* ---- the bar across the top ---- */
.mk-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  padding-top: max(16px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(15, 18, 21, 0.86);
  backdrop-filter: saturate(140%) blur(14px);
}
.mk-nav .brand { display: flex; align-items: center; gap: 9px; font-family: var(--serif); font-size: 18px; }
.mk-nav .spacer { margin-left: auto; }
.mk-nav a.plain { color: var(--fg-dim); font-size: 14px; }
.mk-nav a.plain:hover { color: var(--fg); }

/* The one door, in the market's own bar. auth.css paints this pill with a
   gold gradient; a smaller pill here is fine, but the word on it has to be
   the dark ink that gold is readable against - so both are stated. */
.mk-nav .btn-access {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(150deg, #e9c078 0%, #d3a458 58%, #b9873c 100%);
  color: #17120a;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.mk-nav .btn-access:hover { filter: brightness(1.05); }

/* ---- the page ---- */
.mk-wrap { max-width: 1080px; margin: 0 auto; padding: 26px 20px 60px; }
.mk-hero h1 { font-family: var(--serif); font-size: clamp(26px, 5vw, 40px); margin: 0 0 8px; font-weight: 500; }
.mk-hero h1 em { color: var(--accent); font-style: italic; }
.mk-hero p { color: var(--fg-dim); margin: 0; max-width: 60ch; font-size: 15px; line-height: 1.55; }

/* ---- the search ---- */
.mk-search {
  margin: 22px 0 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}
.mk-search .big { display: flex; gap: 10px; }
.mk-search input, .mk-search select {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(0, 0, 0, 0.22);
  color: var(--fg); font: inherit; font-size: 15px;
}
.mk-search input::placeholder { color: var(--fg-dim); }
.mk-search button.go {
  flex: none; padding: 12px 20px; border-radius: 12px; border: 0; cursor: pointer;
  background: #d3a458; color: #17120a; font: inherit; font-weight: 600;
}
.mk-search .fine {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px; margin-top: 10px;
}
.mk-search label { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 5px; }
.mk-count { color: var(--fg-dim); font-size: 13px; margin: 18px 0 12px; }

/* ---- results ---- */
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.mk-card {
  display: block; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: var(--panel-solid); transition: transform .18s ease, border-color .18s ease;
}
.mk-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.mk-card .shot { aspect-ratio: 4 / 3; background: #10141a; display: block; width: 100%; object-fit: cover; }
.mk-card .shot.none { display: grid; place-items: center; color: var(--fg-dim); font-size: 34px; }
.mk-card .text { padding: 14px 16px 16px; }
.mk-card h3 { margin: 0 0 4px; font-family: var(--serif); font-size: 18px; font-weight: 500; }
.mk-card .where { color: var(--fg-dim); font-size: 13px; }
.mk-card .price { margin-top: 10px; font-family: var(--serif); font-size: 19px; color: var(--accent); }
.mk-card .by { color: var(--fg-dim); font-size: 12px; margin-top: 6px; }

/* how many pictures there are, sat on the corner of the photograph -
   a card with three shots behind it is worth opening */
.mk-card .frame { position: relative; }
.mk-card .frame .shots {
  position: absolute; right: 10px; bottom: 10px;
  display: flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px; font-size: 11.5px;
  background: rgba(0, 0, 0, .62); color: #fff; backdrop-filter: blur(4px);
}
.mk-card .frame .shots svg { width: 12px; height: 12px; }

.mk-empty { border: 1px dashed var(--line); border-radius: 16px; padding: 44px 22px; text-align: center; color: var(--fg-dim); }
.mk-empty .big { font-size: 40px; margin-bottom: 10px; }

/* ---- one listing ---- */
.mk-back { color: var(--fg-dim); font-size: 13px; display: inline-block; margin-bottom: 16px; }
.mk-listing { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 26px; align-items: start; }
/* both columns, and everything sat directly in them, are allowed to be
   narrower than their contents - see the rule about width at the top */
.mk-listing > * { min-width: 0; }
.mk-listing > * > * { max-width: 100%; }
@media (max-width: 900px) { .mk-listing { grid-template-columns: minmax(0, 1fr); } }
.mk-shot { width: 100%; border-radius: 18px; aspect-ratio: 16 / 10; object-fit: cover; background: #10141a; }
.mk-shot.none { display: grid; place-items: center; font-size: 54px; color: var(--fg-dim); }
.mk-listing h1 {
  font-family: var(--serif); font-size: clamp(24px, 4vw, 34px); font-weight: 500; margin: 18px 0 6px;
  overflow-wrap: anywhere;
}
.mk-listing .where { color: var(--fg-dim); font-size: 15px; overflow-wrap: anywhere; }
.mk-facts { display: flex; gap: 22px; flex-wrap: wrap; margin: 18px 0; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mk-facts div b { display: block; font-family: var(--serif); font-size: 20px; }
.mk-facts div span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dim); }
.mk-words { line-height: 1.65; color: var(--fg-dim); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- the wall of pictures ----
   one photograph sells nothing. The rail is swiped on a phone and dragged
   on a desktop; the thumbnails under it jump straight to a shot.

   The rail is the one thing on this page that is deliberately longer than
   the screen, so it is nailed down: it may never be wider than its column,
   and a swipe that runs off the end of it stays in the rail rather than
   dragging the page (or triggering the browser's back gesture). */
.mk-gallery { position: relative; min-width: 0; max-width: 100%; }
.mk-gallery .rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  gap: 0; overflow-x: auto; scroll-snap-type: x mandatory;
  border-radius: 18px; background: #10141a;
  scrollbar-width: none;
  min-width: 0; max-width: 100%;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.mk-gallery .rail::-webkit-scrollbar { display: none; }
.mk-gallery .rail img {
  width: 100%; min-width: 0; aspect-ratio: 16 / 10; object-fit: cover; scroll-snap-align: start; display: block;
}
.mk-gallery .count {
  position: absolute; right: 12px; top: 12px; padding: 5px 11px; border-radius: 999px;
  background: rgba(0, 0, 0, .62); color: #fff; font-size: 12px; backdrop-filter: blur(4px);
}
.mk-gallery .thumbs {
  display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none;
  min-width: 0; max-width: 100%; overscroll-behavior-x: contain;
}
.mk-gallery .thumbs::-webkit-scrollbar { display: none; }
.mk-gallery .thumb {
  flex: none; width: 84px; height: 60px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); opacity: .55; transition: opacity .15s ease, border-color .15s ease;
}
.mk-gallery .thumb.on { opacity: 1; border-color: var(--accent); }
.mk-gallery .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mk-panel { border: 1px solid var(--line); border-radius: 18px; padding: 20px; background: var(--panel-solid); position: sticky; top: 88px; }
.mk-panel .price { font-family: var(--serif); font-size: 30px; color: var(--accent); overflow-wrap: anywhere; }
.mk-panel .by { color: var(--fg-dim); font-size: 13px; margin-top: 4px; }
.mk-panel label.field { display: block; margin-top: 14px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-dim); }
.mk-panel input[type=date], .mk-panel textarea {
  width: 100%; margin-top: 6px; padding: 11px 13px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(0,0,0,.22); color: var(--fg); font: inherit; font-size: 15px;
}
/* the same button whether it submits or only walks you down to the form.
   Literal gold and literal ink: nothing about it is inherited, so it
   cannot come out gold on gold wherever it is dropped. */
.mk-panel .apply,
.mk-panel a.apply,
.mk-apply button.apply {
  display: block; width: 100%; margin-top: 16px; padding: 14px;
  border: 1px solid #b9873c; border-radius: 12px; cursor: pointer;
  background: linear-gradient(150deg, #e9c078 0%, #d3a458 58%, #b9873c 100%);
  color: #17120a !important;
  font: inherit; font-size: 15px; font-weight: 700; text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.mk-panel .apply:hover, .mk-apply button.apply:hover { filter: brightness(1.05); }
.mk-panel .apply.ghost {
  background: transparent; background-image: none; border: 1px solid var(--line);
  color: var(--fg-dim) !important; font-weight: 400; box-shadow: none;
}
.mk-panel .note { font-size: 12px; color: var(--fg-dim); margin-top: 10px; line-height: 1.5; }

/* ---- the application itself ----
   a long form, so it is given the width of the page rather than squeezed
   into the panel: sections a person can answer one at a time. */
.mk-apply {
  margin-top: 40px; border: 1px solid var(--line); border-radius: 18px;
  padding: 26px 24px 28px; background: var(--panel-solid); scroll-margin-top: 90px;
}
.mk-apply h2 { font-family: var(--serif); font-size: 24px; font-weight: 500; margin: 0 0 6px; }
.mk-apply .lede { color: var(--fg-dim); font-size: 14px; line-height: 1.6; margin: 0 0 8px; max-width: 68ch; }
.mk-apply fieldset { border: 0; border-top: 1px solid var(--line); padding: 20px 0 4px; margin: 18px 0 0; min-width: 0; }
.mk-apply legend {
  padding: 0 10px 0 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim);
}
.mk-apply label {
  display: block; margin-top: 14px; font-size: 12.5px; color: var(--fg-dim);
}
.mk-apply label.bare { margin-top: 4px; }
.mk-apply input, .mk-apply select, .mk-apply textarea {
  display: block; width: 100%; max-width: 100%; margin-top: 6px; padding: 11px 13px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(0, 0, 0, .22); color: var(--fg);
  font: inherit; font-size: 15px;
}
.mk-apply textarea { resize: vertical; }
.mk-apply input:focus, .mk-apply select:focus, .mk-apply textarea:focus { outline: none; border-color: var(--accent); }
.mk-apply small { display: block; margin-top: 6px; font-size: 11.5px; color: var(--fg-dim); line-height: 1.5; }
.mk-apply .row { display: grid; gap: 14px; }
.mk-apply .row.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mk-apply .row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .mk-apply .row.two, .mk-apply .row.three { grid-template-columns: minmax(0, 1fr); }
  .mk-apply { padding: 20px 16px 24px; }
}
/* money reads as one thing: currency, figure, how often */
.mk-apply .money-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 130px; gap: 10px; }
@media (max-width: 520px) { .mk-apply .money-row { grid-template-columns: minmax(0, 1fr); } }
.mk-apply .money-row input, .mk-apply .money-row select { margin-top: 0; }
.mk-apply .ticks { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 16px; }
.mk-apply .ticks label { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 13.5px; cursor: pointer; }
.mk-apply .ticks input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); }
.mk-apply .mk-consent label { margin-top: 0; color: var(--fg); }
.mk-apply .mk-consent input { width: 17px; height: 17px; margin-top: 3px; }
.mk-apply .mk-consent.declare { border-color: var(--line); background: rgba(0, 0, 0, .18); }
.mk-apply .note { font-size: 12px; color: var(--fg-dim); margin-top: 12px; line-height: 1.6; max-width: 74ch; }

/* ---- the papers ----
   a rental application is not only answers: it is the ID and the payslip
   behind them. Each one is its own card so what is required reads at a
   glance, and a file already chosen says so rather than looking empty. */
.mk-papers { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 14px; }
.mk-paper {
  border: 1px solid var(--line); border-radius: 14px; padding: 14px; min-width: 0;
  background: rgba(0, 0, 0, .16);
}
.mk-paper.must { border-color: rgba(211, 164, 88, .55); }
.mk-paper .head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mk-paper .head b { font-size: 14px; color: var(--fg); font-weight: 600; }
.mk-paper .need { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.mk-paper .need.opt { color: var(--fg-dim); }
.mk-paper p { margin: 6px 0 0; font-size: 12px; color: var(--fg-dim); line-height: 1.5; }
.mk-paper input[type=file] {
  margin-top: 10px; padding: 9px; font-size: 12.5px; background: rgba(0, 0, 0, .3);
  border: 1px dashed var(--line); border-radius: 10px; color: var(--fg-dim);
}
.mk-paper input[type=file]::file-selector-button {
  margin-right: 10px; padding: 6px 12px; border: 0; border-radius: 8px; cursor: pointer;
  background: #d3a458; color: #17120a; font: inherit; font-size: 12px; font-weight: 600;
}

/* the consent box: deliberately the loudest thing in the form */
.mk-consent {
  margin-top: 16px; padding: 14px; border-radius: 14px;
  border: 1px solid var(--accent); background: var(--accent-soft);
}
.mk-consent label { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; cursor: pointer; }
.mk-consent input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--accent); }
.mk-consent .small { font-size: 12px; color: var(--fg-dim); margin: 8px 0 0 27px; line-height: 1.5; }

.mk-alert { padding: 12px 14px; border-radius: 12px; margin-bottom: 16px; font-size: 14px; border: 1px solid var(--line); }
.mk-alert.bad { border-color: #e0685c; color: #ffb9b1; background: rgba(224, 104, 92, .1); }
.mk-alert.good { border-color: #5fbe8b; color: #b7ecd0; background: rgba(95, 190, 139, .1); }

.mk-also { margin-top: 34px; }
.mk-also h2 { font-family: var(--serif); font-size: 20px; font-weight: 500; margin: 0 0 14px; }

/* ---- a person's own applications ---- */
.mk-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 16px 0; border-bottom: 1px solid var(--line); }
.mk-row .shot { width: 74px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; background: #10141a; }
.mk-row h3 { margin: 0; font-family: var(--serif); font-size: 17px; font-weight: 500; }
.mk-row .where { color: var(--fg-dim); font-size: 13px; margin-top: 2px; }
.mk-row .right { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.mk-tag { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg-dim); }
.mk-tag.on { border-color: var(--accent); color: var(--accent); }
.mk-tag.yes { border-color: #5fbe8b; color: #5fbe8b; }
.mk-tag.no { border-color: #e0685c; color: #e0685c; }
.mk-linky { background: none; border: 0; color: var(--fg-dim); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; padding: 0; }

.mk-foot { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--fg-dim); font-size: 12px; line-height: 1.6; }

/* ---- on a phone ----
   the listing page carries more than the search does - a rail of pictures,
   a price panel, a long form - so it gets its own breathing room rather
   than the desktop's. Narrower gutters, smaller thumbnails, and a price
   that does not need three lines to say itself. */
@media (max-width: 560px) {
  .mk-wrap { padding: 18px 14px 48px; }
  .mk-nav { padding-left: 14px; padding-right: 14px; gap: 10px; }
  .mk-gallery .rail { border-radius: 14px; }
  .mk-gallery .thumb { width: 64px; height: 46px; border-radius: 8px; }
  .mk-gallery .thumbs { gap: 6px; }
  .mk-facts { gap: 14px 20px; margin: 16px 0; padding: 14px 0; }
  .mk-facts div b { font-size: 18px; }
  .mk-panel { padding: 16px; border-radius: 16px; }
  .mk-panel .price { font-size: 26px; }
  .mk-apply { margin-top: 28px; border-radius: 16px; }
  .mk-apply h2 { font-size: 21px; }
  .mk-papers { grid-template-columns: minmax(0, 1fr); }
  .mk-paper input[type=file] { width: 100%; }
}