/* The sign-in page and home (FR-SUR-015; design/mockups Signin, Home and Home-Phone). Signed out, the sign-in form on
   white with the logo and the language above it; signed in, the shell around the person's tasks and apps, with a
   side column for invitations, notifications and joining a flat. */

/* Signed out. */
.signin-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 32px 0}
.signin-top:empty{display:none}
.signin-top .lang{display:inline-flex;align-items:center;gap:8px}
.signin-top .lang label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.signin-top .lang select{font-weight:600}
#app:has(.signin){min-height:calc(100vh - 64px);display:flex;align-items:stretch;background:var(--surface)}
/* The form on the left, centred in its column; the photograph on the right (design/mockups Signin), a wide screen only. */
.signin-page{flex:1;display:flex;flex-wrap:wrap;align-items:stretch}
.signin-page>.signin{flex:0 1 440px;margin:auto;padding:40px 20px}
.signin-photo{flex:0 1 60%;min-height:560px;display:flex;padding:16px}
.signin-frame{position:relative;flex:1;overflow:hidden;border-radius:24px;background:var(--night)}
.signin-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.signin-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--night) 88%,transparent),color-mix(in srgb,var(--night) 30%,transparent) 70%)}
.signin-words{position:absolute;left:48px;right:48px;bottom:48px;z-index:1;color:#FFFFFF;max-width:560px}
.signin-words .eyebrow{font:500 13px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--signal)}
.signin-words .headline{margin-top:14px;font:700 52px/1.04 var(--display);letter-spacing:-.03em;text-wrap:balance}
.signin-words p:last-child{margin-top:16px;font-size:17px;line-height:1.5;max-width:480px}
body:has(.signin){background:var(--surface)}
.signin{width:100%;max-width:440px;display:flex;flex-direction:column;gap:20px}
.signin h1{font-size:44px;line-height:1.04;letter-spacing:-.03em}
.signin .field input{min-height:52px;font-size:17px}
.signin button,.signin .button{min-height:52px;font-size:16px}
.signin .said:empty{display:none}
.signin .or{display:flex;align-items:center;gap:14px;color:var(--ink-3);font-size:13px}
.signin .or::before,.signin .or::after{content:"";flex:1;height:1px;background:var(--rule)}
.signin .ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.signin .ways>*{min-height:48px}

/* Signed in. */
.home-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.panel-head{padding:16px 20px 12px}
.panel-head .muted{font-size:14px;margin-top:2px}
.tasks .row{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 20px}
.tasks .pill{min-width:72px;justify-content:center}
.tasks .subject{flex:1;min-width:0;font-weight:500}
.tasks li.urgent .subject{font-weight:600}
.tasks .icon{color:var(--ink-3)}
/* My requests: what the person sent, where it stands, and the quote one waits on. */
.requests>li{padding:12px 20px;display:flex;flex-direction:column;gap:6px}
.requests .row{display:flex;align-items:flex-start;gap:12px}
.requests .subject{flex:1;min-width:0;font-weight:500}
.requests .pill{flex:none}
.requests .faint{font-size:13px}
.requests .faint:empty,.requests .actions:empty{display:none}
.requests .quote{font-size:14px}
.requests .actions{display:flex;flex-wrap:wrap;gap:8px}
.find{display:flex;align-items:center;gap:10px;min-width:220px;flex:0 1 300px;padding:0 12px;border:1px solid var(--rule-strong);
  border-radius:var(--r-control);color:var(--ink-3)}
.find:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.find input{flex:1;min-width:0;border:0;padding:0;box-shadow:none !important;outline:none}
.screens{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));border-top:1px solid var(--rule)}
/* The apps by kind (design/mockups Home): a heading with its count above each kind's grid. */
.screens-by-kind .kind h3{display:flex;align-items:center;gap:8px;padding:16px 20px 8px;border-top:1px solid var(--rule);
  font:600 12px/1.3 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.screens-by-kind .kind h3 .n{font:500 12px var(--mono)}
.screens-by-kind .screens{border-top:0}
.screen{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 20px;border-bottom:1px solid var(--rule);
  color:var(--ink);text-decoration:none;font-size:14px;font-weight:500}
.screen:hover{background:var(--hover);color:var(--ink)}
.screen span{flex:1;min-width:0}
.screen .icon{color:var(--ink-2)}
.screen .icon:last-child{color:var(--ink-3)}
.rail .panel h2{font-size:16px}
.rail .row-gap:empty{display:none}
.join>summary{font:700 16px var(--display)}
.join .field input{width:100%}
.rail-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:0 4px}
.rail-end .lang{display:flex;align-items:center;gap:8px}
@media (max-width:1100px){.home-grid{grid-template-columns:minmax(0,1fr)}.signin-photo{display:none}}
@media (max-width:760px){
  .signin-top{padding:16px 20px 0}
  .signin h1{font-size:34px}
  .find{flex:1 1 100%}
}
/* On a phone the form sits under the bar, where a thumb and the keyboard both reach it. */
@media (max-width:600px){#app:has(.signin){align-items:flex-start;padding-top:48px}.signin h1{font-size:36px}}