/* The screen the hotel works on. Same tokens as the report it produces, so the
 * thing being edited and the thing being sent look like one product. */
@import url("/static/fonts.css");

:root{
  --color-ink:#1D1D1F; --color-creme:#F1F0EB; --color-light:#F6F5EF;
  --color-hairline:#DBDAD5; --color-taupe:#9F9287;
  --sage-tint:#E2EBE0; --sage-tone:#466C3D;
  --amber-tint:#EDE2D4; --amber-tone:#79572A;
  --clay-tint:#ECD9D5; --clay-tone:#8A4838;
  --text-2:rgb(29 29 31 / .65);
}
*{box-sizing:border-box}
html{font:400 15px/1.5 'Montserrat',ui-sans-serif,system-ui,sans-serif;
     color:var(--color-ink); background:var(--color-creme);}
body{margin:0}
a{color:inherit}

.top{border-bottom:2px solid var(--color-taupe); background:var(--color-creme)}
.top__in{max-width:900px; margin:0 auto; padding:18px 24px;
         display:flex; align-items:baseline; gap:16px; flex-wrap:wrap}
.wordmark{font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:13px}
.top__doc{color:var(--text-2); font-size:13px; flex:1}
.top__period{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}

.wrap{max-width:900px; margin:0 auto; padding:28px 24px 80px}
.head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:24px}
h1{font-family:'Lora',Georgia,serif; font-weight:500; font-size:28px; margin:0}
h2{font-size:15px; letter-spacing:.11em; text-transform:uppercase; margin:0 0 6px;
   display:flex; align-items:center; gap:10px}
h3{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2);
   margin:26px 0 8px; font-weight:500}
.step{border-top:1px solid var(--color-hairline); padding:26px 0 30px}
.step__n{display:inline-flex; width:22px; height:22px; align-items:center; justify-content:center;
         border:1px solid var(--color-taupe); border-radius:2px; font-size:11px; color:var(--color-taupe)}
.lede{color:var(--text-2); max-width:62ch; margin:0 0 18px}
.status{margin:14px 0 0; font-size:14px; color:var(--text-2)}
.note{font-size:13px; color:var(--text-2); margin:14px 0 0}

.flash{background:var(--sage-tint); color:var(--sage-tone); border-left:3px solid var(--sage-tone);
       padding:10px 14px; border-radius:2px; margin:0 0 22px; font-size:14px}
.warn{background:var(--amber-tint); color:var(--amber-tone); border-left:3px solid var(--amber-tone);
      padding:12px 16px; border-radius:2px; margin:0 0 18px; font-size:14px; max-width:70ch}

/* ---- upload boxes --------------------------------------------------------
 * One box per file the report expects, after the night audit's Import Center.
 * The shape of the month is legible before anything is read: what is here,
 * what is missing, and what each one is for.
 *
 * Dashed means empty and is the only state that asks to be acted on. Filled
 * turns solid and quiet. Required-but-missing is the one thing that raises its
 * voice, in amber, and says what it costs the report — an optional file that
 * never arrives is not a problem to solve today. */
.slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
       gap:14px; align-content:start}

.slot{position:relative; display:flex; flex-direction:column; align-items:center;
      justify-content:flex-start; text-align:center; gap:7px;
      min-height:212px; padding:30px 16px 14px;
      border:1px dashed var(--color-hairline); border-radius:3px;
      background:var(--color-light); cursor:pointer;
      transition:background .15s, border-color .15s}
@media (hover:hover){.slot:hover{background:var(--color-creme); border-color:var(--color-taupe)}}
.slot:focus-visible{outline:2px solid var(--color-ink); outline-offset:2px}
.slot.over{background:var(--amber-tint); border-color:var(--color-ink)}

.slot--have{border-style:solid; border-color:var(--sage-tone); background:var(--color-light)}
.slot--need{border-color:var(--amber-tone)}
.slot--bad {border-style:solid; border-color:var(--clay-tone)}
.slot--busy{border-style:solid; border-color:var(--color-taupe); cursor:progress}
/* Optional and absent: dashed like every empty box, but visibly quieter. */
.slot--opt{opacity:.74}
@media (hover:hover){.slot--opt:hover{opacity:1}}

.slot__state{position:absolute; top:10px; right:12px;
             font-size:10px; letter-spacing:.09em; text-transform:uppercase;
             color:var(--text-2)}
.slot--have .slot__state{color:var(--sage-tone)}
.slot--need .slot__state{color:var(--amber-tone)}

.slot__t{font-family:'Lora',Georgia,serif; font-size:15px; line-height:1.25;
         max-width:26ch; margin-top:4px}

.ico{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5;
     stroke-linecap:round; stroke-linejoin:round; flex:none}
.slot__ico{width:28px; height:28px; stroke-width:1.25; margin:4px 0 2px;
           color:var(--color-taupe)}
.slot--have .slot__ico{color:var(--sage-tone)}
.slot--need .slot__ico{color:var(--amber-tone)}
.slot--bad  .slot__ico{color:var(--clay-tone)}
/* Line markers: same family and weight, tertiary, sized to find the line
   rather than compete with the big mark above it. */
.ico--mini{width:12px; height:12px; color:var(--color-taupe); margin-right:6px;
           vertical-align:-2px}

.slot__file,.slot__meta,.slot__msg{display:flex; align-items:flex-start;
  justify-content:center; max-width:32ch; line-height:1.45}
.slot__file{font-size:13px; word-break:break-word}
.slot--have .slot__file{font-variant-numeric:tabular-nums}
.slot--have .slot__file span{font-weight:500}
.slot:not(.slot--have) .slot__file{color:var(--text-2)}
.slot__meta{font-size:11.5px; color:var(--text-2); letter-spacing:.01em}
.slot__msg{font-size:12px; color:var(--amber-tone); margin-top:2px}
.slot__msg .ico--mini{color:var(--amber-tone)}

.slot__act{margin-top:auto; padding-top:10px; display:flex; gap:14px;
           font-size:10px; letter-spacing:.09em; text-transform:uppercase;
           color:var(--text-2)}
.linklike{background:none; border:0; padding:0; font:inherit; cursor:pointer;
          color:var(--text-2); display:inline-flex; align-items:center}
.linklike:hover{color:var(--color-ink)}
.linklike .ico--mini{margin-right:4px}

/* Known percentage while the bytes go up, then an indeterminate stripe while
   the server reads the file — it reports no progress, so the bar must not
   pretend to any. */
.slot__bar{width:100%; height:3px; margin-top:10px; border-radius:2px;
           background:var(--color-hairline); overflow:hidden; visibility:hidden}
.slot__bar.on{visibility:visible}
.slot__bar i{display:block; height:100%; width:0; background:var(--color-ink);
             border-radius:2px; transition:width .12s linear}
.slot__bar.reading i{width:100% !important; background:linear-gradient(90deg,
  var(--color-hairline) 0%, var(--color-ink) 50%, var(--color-hairline) 100%);
  background-size:220% 100%; animation:slotpulse 1.3s linear infinite}
@keyframes slotpulse{from{background-position:120% 0} to{background-position:-120% 0}}
@media(prefers-reduced-motion:reduce){
  .slot__bar.reading i{animation:none; background:var(--color-taupe)}
}

.files{margin-top:20px; font-size:14px}
.files summary{cursor:pointer; color:var(--text-2)}
.files ul{list-style:none; padding:0; margin:12px 0 0}
.files li{display:flex; align-items:center; gap:12px; padding:6px 0;
          border-top:1px solid var(--color-hairline)}
.files li span:first-child{flex:1}
.files__size{color:var(--text-2); font-size:12px}
.files form{margin:0}

.button{display:inline-block; border:0; border-radius:2px; cursor:pointer;
        background:var(--color-ink); color:var(--color-creme); font:inherit; font-size:14px;
        padding:11px 20px; text-decoration:none}
.button--off{background:var(--color-hairline); color:var(--text-2); cursor:not-allowed}
.link{background:none; border:0; padding:0; font:inherit; font-size:inherit; cursor:pointer;
      color:var(--color-ink); text-decoration:underline; text-underline-offset:3px}
.pill{font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:2px 8px;
      border-radius:2px; margin-left:8px}
.pill--on{background:var(--sage-tint); color:var(--sage-tone)}
.pill--warn{background:var(--amber-tint); color:var(--amber-tone)}

/* ---- the form the hotel types in ----------------------------------------
 * Everything here is about the typing. Inputs are large enough to read what is
 * in them, the measure is capped where prose stops being comfortable, and a
 * field that holds a list is a list of inputs rather than a textarea that has
 * to be parsed on newlines. */
input,textarea,select{font:inherit; color:inherit; background:var(--color-light);
  border:1px solid var(--color-hairline); border-radius:2px;
  padding:11px 13px; width:100%; line-height:1.55}
input:focus,textarea:focus{outline:2px solid var(--color-ink); outline-offset:-1px;
  background:#fff}
input::placeholder,textarea::placeholder{color:var(--color-taupe); opacity:.75}
select{width:auto; padding:7px 10px; line-height:normal}
.switch{display:flex; gap:8px}

.entries .field{margin-bottom:30px}
.entries .field label{display:block; font-family:'Lora',Georgia,serif;
  font-size:17px; font-weight:500; margin-bottom:2px}
.field__hint{margin:0 0 10px; font-size:13px; color:var(--text-2); max-width:70ch;
  line-height:1.55}
/* A comfortable line is about 75 characters. Wider and the eye loses the
   return; the box may be the width of the page but the text should not be. */
.entries textarea{max-width:74ch}
textarea{resize:vertical; min-height:44px; overflow:hidden}

/* ---- list fields --------------------------------------------------------- */
.items{list-style:none; margin:0; padding:0; counter-reset:item}
.item{display:flex; align-items:flex-start; gap:8px; margin-bottom:8px;
      max-width:calc(74ch + 30px)}
.item::before{counter-increment:item; content:counter(item);
  flex:none; width:18px; text-align:right; padding-top:11px;
  font-size:11px; color:var(--color-taupe); font-variant-numeric:tabular-nums}
.item textarea{flex:1; min-height:0; padding:9px 12px}
.item__x{flex:none; padding:11px 6px; color:var(--color-hairline)}
.item:hover .item__x,.item__x:focus-visible{color:var(--color-taupe)}
.item__x:hover{color:var(--clay-tone)}
.item__add{margin-left:26px; font-size:12px; letter-spacing:.04em;
  text-transform:none; color:var(--text-2)}

/* ---- theme rows ---------------------------------------------------------- */
/* Three columns that keep their proportions: the theme is the sentence, the two
   figures are read against each other and stay the same narrow width. */
.theads,.trow{display:grid; grid-template-columns:18px minmax(0,1fr) 148px 148px;
  gap:10px; align-items:center}
.theads{margin-bottom:5px; font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-2)}
.theads span:first-child{grid-column:2}
.trow{margin-bottom:8px}
.trow__n{font-size:11px; color:var(--color-taupe); text-align:right;
  font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}

.step--confirm{border-top:2px solid var(--color-taupe)}
.tick{display:flex; gap:10px; align-items:flex-start; margin:16px 0 22px; cursor:pointer}
.tick input{width:auto; margin-top:3px}
.actions{display:flex; align-items:center; gap:18px}

/* ---- sign in ------------------------------------------------------------
 * One card on the ground, no navigation: there is nowhere else to go until
 * the caller is known. The one place in the product where a raised surface
 * carries a shadow is the login card, and this is not that surface — it sits
 * on the page, not over a photograph. */
.signin{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px}
.card{width:100%; max-width:400px; background:var(--color-light);
      border:1px solid var(--color-hairline); border-radius:3px; padding:34px 32px}
.card__eyebrow{font-size:11px; letter-spacing:.1em; text-transform:uppercase;
               color:var(--text-2); margin:0 0 14px; line-height:1.5}
.card h1{font-family:'Lora',Georgia,serif; font-weight:500; font-size:24px; margin:0 0 22px}
.card label{display:block; font-size:13px; margin:0 0 6px; font-weight:500}
.card input{margin-bottom:18px}
.card .button{width:100%; text-align:center}
.card__foot{font-size:12px; color:var(--text-2); margin:22px 0 0; line-height:1.6}

/* ---- who is signed in ---------------------------------------------------- */
.who{margin-left:auto; font-size:12px; color:var(--text-2); display:flex; gap:12px;
     align-items:baseline}

/* ---- accounts ------------------------------------------------------------ */
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.row input[type=email]{max-width:280px}
.row--tight{gap:0}
.users{width:100%; border-collapse:collapse; margin-top:6px}
.users td{padding:12px 10px 12px 0; border-top:1px solid var(--color-hairline);
          vertical-align:middle}
.users__email{margin:0; font-weight:500}
.users__meta{margin:2px 0 0; font-size:12px; color:var(--text-2)}
.users__act{text-align:right; white-space:nowrap}
.users__act form{display:inline; margin-left:14px}
.amber{color:var(--amber-tone)}
.issued{background:var(--sage-tint); border-left:3px solid var(--sage-tone);
        border-radius:2px; padding:18px 22px; margin-bottom:26px}
.issued h2{color:var(--sage-tone); margin-bottom:8px}
.issued p{margin:0 0 12px; font-size:14px; max-width:60ch}
.cred{border-collapse:collapse; font-size:14px}
.cred th{text-align:left; font-weight:500; padding:3px 18px 3px 0; color:var(--text-2)}
.cred td{padding:3px 0}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:15px;
      background:var(--color-light); padding:2px 8px; border-radius:2px;
      border:1px solid var(--color-hairline)}