/* Sale Lot Entry — shared styles
   Palette pulled from a sale-barn tag: kraft paper, ink stamp, orange crayon. */

:root{
  /* Three colors drive the whole look — change these to retune the brand. */
  --ink:#141210;          /* near-black, from the wordmark */
  --brand:#8A6A16;        /* TLC gold, darkened enough to carry white text */
  --paper:#F4F1EA;

  --card:#FFFDF9;
  --ink-2:#5A5348;
  --rule:#DBD3C3;
  --gold:#B08A2E;
  --ok:#2E6A4E;
  --bad:#9E2B1C;
  --shadow:0 1px 0 rgba(20,33,58,.06), 0 8px 24px -18px rgba(20,33,58,.5);
  --r:4px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper);
  color:var(--ink);
  font:16px/1.5 "IBM Plex Sans",system-ui,sans-serif;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3,.display{
  font-family:"Oswald",system-ui,sans-serif;
  font-weight:500; letter-spacing:.02em; text-transform:uppercase; margin:0;
}
h1{font-size:26px}
h2{font-size:19px}
h3{font-size:15px; letter-spacing:.08em; color:var(--ink-2)}
a{color:var(--brand)}
.wrap{max-width:940px; margin:0 auto; padding:0 16px 96px}
.narrow{max-width:520px; margin-left:auto; margin-right:auto}

/* The first screen a consignor sees sits centered, not stranded top-left. */
.stage{
  min-height:calc(100vh - 220px);
  display:flex; align-items:center; justify-content:center;
}
.stage > *{width:100%}
@media (max-width:620px){ .stage{min-height:0; display:block} }

/* masthead ------------------------------------------------ */
/* White bar: the wordmark's script type is black, so it needs a light
   background to read. The gold rule carries the brand instead. */
.masthead{
  background:#fff; color:var(--ink);
  border-bottom:4px solid var(--gold);
  box-shadow:0 1px 3px rgba(20,18,16,.08);
}
.masthead .wrap{display:flex; align-items:center; gap:16px; padding:12px 16px}
.masthead h1{color:var(--ink); font-size:21px}
.masthead .sub{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2)}
.masthead h1 + .sub{padding-left:16px; border-left:1px solid var(--rule)}
#brandLogo{line-height:0; flex:0 0 auto}
#brandLogo img{height:58px; width:auto; display:block}
@media (max-width:620px){
  #brandLogo img{height:44px}
  .masthead h1{font-size:18px}
  .masthead h1 + .sub{padding-left:0; border-left:none}
}
.masthead .spacer{margin-left:auto}

/* cards --------------------------------------------------- */
.card{
  background:var(--card); border:1px solid var(--rule); border-radius:var(--r);
  box-shadow:var(--shadow); padding:20px; margin-top:18px;
}
.card > h2{margin-bottom:4px}
.card .hint{color:var(--ink-2); font-size:14px; margin:0 0 16px}

/* the signature: a lot renders as a punched sale tag ------- */
.tag{
  position:relative; background:var(--card); border:1px solid var(--rule);
  border-left:none; border-radius:0 var(--r) var(--r) 0;
  box-shadow:var(--shadow); margin-top:12px; padding:14px 16px 14px 82px;
  display:block; width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer;
}
.tag::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:66px;
  background:var(--ink); border-radius:0;
}
.tag::after{ /* the punch hole */
  content:""; position:absolute; left:26px; top:14px; width:13px; height:13px;
  border-radius:50%; background:var(--paper); box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}
.tag .lotno{
  position:absolute; left:0; top:34px; width:66px; text-align:center;
  font-family:"Oswald",sans-serif; font-size:26px; color:#fff; line-height:1;
}
.tag .lotlabel{
  position:absolute; left:0; top:60px; width:66px; text-align:center;
  font-size:9px; letter-spacing:.16em; color:#A0977F; text-transform:uppercase;
}
.tag .name{font-family:"Oswald",sans-serif; font-size:19px; text-transform:uppercase; line-height:1.15}
.tag .meta{font-size:13px; color:var(--ink-2); margin-top:4px}
.tag:hover,.tag:focus-visible{border-color:var(--brand)}
.tag.incomplete{border-right:4px solid var(--gold)}

.chip{
  display:inline-block; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 7px; border:1px solid var(--rule); border-radius:2px; color:var(--ink-2);
  background:#fff; margin-right:6px;
}
.chip.warn{border-color:var(--gold); color:var(--gold)}
.chip.ok{border-color:var(--ok); color:var(--ok)}

/* forms --------------------------------------------------- */
label{display:block; font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-2); margin:14px 0 5px}
input,select,textarea{
  width:100%; font:16px/1.4 inherit; color:var(--ink); background:#fff;
  border:1px solid var(--rule); border-radius:var(--r); padding:11px 12px;
}
input:focus,select:focus,textarea:focus,button:focus-visible,.tag:focus-visible{
  outline:2px solid var(--brand); outline-offset:1px;
}
textarea{min-height:120px; resize:vertical}
.row{display:flex; gap:12px; flex-wrap:wrap}
.row > *{flex:1 1 160px; min-width:0}
.seg{display:flex; flex-wrap:wrap; gap:8px; margin-top:5px}
.seg button{
  flex:1 1 auto; padding:11px 10px; background:#fff; border:1px solid var(--rule);
  border-radius:var(--r); font:500 13px/1 "Oswald",sans-serif; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-2); cursor:pointer;
}
.seg button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.help{font-size:12.5px; color:var(--ink-2); margin-top:5px}

/* buttons ------------------------------------------------- */
button{font-family:inherit}
.btn{
  display:inline-block; padding:12px 18px; border-radius:var(--r); cursor:pointer;
  font:500 14px/1 "Oswald",sans-serif; letter-spacing:.07em; text-transform:uppercase;
  background:var(--brand); color:#fff; border:1px solid var(--brand);
}
.btn:hover{filter:brightness(1.07)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--rule)}
.btn.dark{background:var(--ink); border-color:var(--ink)}
.btn.danger{background:transparent; color:var(--bad); border-color:var(--rule)}
.btn[disabled]{opacity:.5; cursor:default}
.btn.sm{padding:8px 12px; font-size:12px}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; align-items:center}
.actions .spacer{margin-left:auto}

/* messages ------------------------------------------------ */
.msg{padding:11px 14px; border-radius:var(--r); font-size:14px; margin-top:14px; border:1px solid}
.msg.err{background:#FBEDEA; border-color:#E4B7AE; color:var(--bad)}
.msg.ok{background:#EAF2ED; border-color:#B4CEBF; color:var(--ok)}
.msg.info{background:#FAF5E6; border-color:#E3D4A6; color:#6C5510}
.empty{text-align:center; padding:34px 16px; color:var(--ink-2); border:1px dashed var(--rule);
  border-radius:var(--r); margin-top:16px}

/* tables (admin) ------------------------------------------ */
table{width:100%; border-collapse:collapse; font-size:14px}
th{font:500 11px/1 "Oswald",sans-serif; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); text-align:left; padding:9px 8px; border-bottom:2px solid var(--rule)}
td{padding:8px; border-bottom:1px solid var(--rule); vertical-align:middle}
tr:hover td{background:#FBF8F1}
td input,td select{padding:6px 8px; font-size:14px}
.scroll{overflow-x:auto; margin:0 -6px}
/* Wide grids scroll sideways; keep the action buttons pinned to the right
   edge so Edit and Delete are always reachable. */
.scroll th:last-child,
.scroll td:last-child{
  position:sticky; right:0; background:#FFFDF9;
  box-shadow:-8px 0 8px -8px rgba(20,18,16,.28);
}
.scroll th:last-child{background:var(--paper)}
.scroll tr:hover td:last-child{background:#FBF8F1}
.num{width:78px}
.tabs{display:flex; gap:2px; margin-top:18px; border-bottom:2px solid var(--rule)}
.tabs button{
  background:none; border:none; border-bottom:3px solid transparent; margin-bottom:-2px;
  padding:10px 14px; cursor:pointer; color:var(--ink-2);
  font:500 13px/1 "Oswald",sans-serif; letter-spacing:.08em; text-transform:uppercase;
}
.tabs button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--brand)}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13px}
.hidden{display:none !important}

@media (max-width:620px){
  .masthead .wrap{flex-wrap:wrap; gap:6px}
  .card{padding:16px}
  h1{font-size:22px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

/* media uploads ------------------------------------------- */
.drop{
  border:2px dashed var(--rule); border-radius:var(--r); background:#FFFDF8;
  padding:26px 18px; text-align:center; margin-top:8px;
}
.drop.over{border-color:var(--brand); background:#FDF3EC}
.drop p{margin:0 0 6px}
.thumbs{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.thumb{
  position:relative; width:118px; height:118px; border:1px solid var(--rule);
  border-radius:var(--r); overflow:hidden; background:var(--ink);
}
.thumb img,.thumb video{width:100%; height:100%; object-fit:cover; display:block}
.thumb .kill{
  position:absolute; top:4px; right:4px; width:24px; height:24px; line-height:1;
  border:none; border-radius:50%; background:rgba(20,33,58,.86); color:#fff;
  font-size:15px; cursor:pointer;
}
.thumb .badge{
  position:absolute; left:0; bottom:0; background:rgba(20,33,58,.86); color:#fff;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:2px 6px;
}
.uploading{font-size:13px; color:var(--ink-2); margin-top:10px}

/* sponsors + footer --------------------------------------- */
.rail{display:none}
.ad{
  display:block; width:100%; border:1px solid var(--rule); border-radius:var(--r);
  background:var(--card); overflow:hidden; text-decoration:none;
}
.ad img{width:100%; height:auto; display:block}
.ad--open{
  border-style:dashed; text-align:center; color:var(--ink-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:18px 10px;
}
.rail .ad--open{aspect-ratio:1/2}      /* skyscraper: 200x400 / 300x600 */
.adstrip .ad--open{aspect-ratio:6/5}   /* medium rectangle: 300x250 */
.ad--open:hover{border-color:var(--brand); color:var(--brand)}
.ad--broken{
  border-style:dashed; border-color:var(--bad); color:var(--bad);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:18px 10px; text-align:center; word-break:break-all;
}
.ad__label{display:block; font:500 15px/1.2 "Oswald",sans-serif;
  letter-spacing:.09em; text-transform:uppercase}
.ad__note{display:block; font-size:12.5px; margin-top:6px}

.sitefoot{border-top:1px solid var(--rule); background:#EFEBE1; margin-top:40px; padding:22px 0 30px}
.adstrip{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-bottom:20px}
.adstrip .ad{width:min(300px, 46%); flex:0 0 auto}
.adstrip .ad--open{padding:16px 10px}
.footrow{display:flex; gap:14px; flex-wrap:wrap; align-items:center;
  justify-content:space-between; border-top:1px solid var(--rule); padding-top:16px}
.footnote{font-size:13px; color:var(--ink-2)}
.footnote a{color:var(--ink-2)}

/* Rails only appear when there's genuinely room beside the content —
   otherwise the sponsors ride in the footer strip instead. */
/* Rails only appear where there's real room beside the 940px content column,
   and they grow to a full 300px slot on wider screens. */
@media (min-width:1400px){
  .rail{display:block; position:fixed; top:104px; width:200px; z-index:5}
  .rail .ad + .ad{margin-top:16px}
  .rail--left{left:calc(50% - 690px)}
  .rail--right{right:calc(50% - 690px)}
  .adstrip{display:none}
}
@media (min-width:1660px){
  .rail{width:300px}
  .rail--left{left:calc(50% - 810px)}
  .rail--right{right:calc(50% - 810px)}
}