/* The bar, the lone cards (sign in, the password cards, no client assigned yet), and the
   Platform's own pieces. Every colour and size is a token from the top of css/styles.css. */

/* ---------- The bar ---------- */
.apphdr{background:var(--surface);border-bottom:1px solid var(--line)}
.apphdr-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;max-width:1280px;margin:0 auto;padding:8px 32px}
.apphdr-brand{display:flex;align-items:center}
/* The lockup (js/auth.js, Lockup): the LTHi mark on its ink tile, then the product's name. */
.lockup{display:inline-flex;align-items:center;gap:8px}
.brand-mark{display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border:1px solid var(--brand-edge);border-radius:var(--radius-control);background:var(--brand-field)}
.brand-mark img{display:block;width:auto;max-width:none;height:18px}
.wordmark{font:var(--weight-strong) var(--t-body);white-space:nowrap}
/* No grow and no zero basis, as the demo's switcher: the select keeps its own width, so the
   Platform link and the account button wrap to a second row before the client's name is
   squeezed. */
.apphdr-ws{display:flex;align-items:center;min-width:0}
.apphdr-ws select{width:auto;max-width:100%}
.apphdr-wsname{font:var(--weight-regular) var(--t-ui)}
.apphdr-user{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-left:auto}
.navlink{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:var(--text-secondary);font:var(--weight-medium) var(--t-ui);box-shadow:inset 0 -2px 0 transparent;cursor:pointer;transition:color var(--motion-fast) ease}
.navlink:hover{color:var(--ink)}
.navlink[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
/* The account menu (spec 6.3): a secondary button with the person's name and a drawn
   caret, opening a raised menu under its right edge. A long name (the email, when there
   is no name) wraps inside the button rather than pushing the bar past the screen. */
.menuwrap{position:relative;min-width:0;max-width:100%}
.btn.acct{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.menu{position:absolute;top:calc(100% + 4px);right:0;z-index:20;min-width:240px;max-width:calc(100vw - 32px);padding:6px;border:1px solid var(--line);border-radius:var(--radius-container);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-raised)}
.menu-h{margin-bottom:6px;padding:8px 10px 10px;border-bottom:1px solid var(--line);font-weight:var(--weight-medium);overflow-wrap:anywhere}
.menu-h span{display:block;font:var(--weight-regular) var(--t-label);color:var(--text-secondary)}
.menu button{display:block;width:100%;min-height:44px;padding:0 10px;border:0;border-radius:var(--radius-control);background:none;color:var(--ink);font:var(--weight-regular) var(--t-ui);text-align:left}
.menu button:hover{background:var(--surface-subtle)}
.menu button:active{background:var(--surface-pressed)}

/* ---------- Sign in, the password cards, no client assigned yet: a lone card on the canvas ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:48px 16px;background:var(--canvas)}
.login-card{display:grid;gap:16px;width:100%;max-width:400px;padding:40px;border:1px solid var(--line);border-radius:var(--radius-container);background:var(--surface)}
.login-brand{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px}
.login-card h1{margin:0;font:var(--weight-medium) var(--t-section);text-align:center}
.login-card .sub{margin:0 0 12px;color:var(--text-secondary);font:var(--weight-regular) var(--t-ui);text-align:center}
.login-brand+.sub{margin-top:-16px}
.login-card h1+.sub{margin-top:-12px}
.login-card .field{margin:0}
.login-card .flabel{font-weight:var(--weight-medium)}
.login-card .err{padding:10px 12px;border:1px solid var(--error);border-radius:var(--radius-control)}
.login-submit{width:100%;margin-top:4px}
.login-help{display:flex;justify-content:center;margin-top:4px}
.noaccess-card h2{font:var(--weight-medium) var(--t-section);text-align:center}
.noaccess-card p{margin:0;color:var(--text-secondary);text-align:center}
.noaccess-card .btn{justify-self:center}

/* ---------- Platform (LTH only) ---------- */
.newclient{flex:1 1 240px;max-width:340px;margin:0}
/* The rest of the add-client row lines up with the field, not with its label. */
.newclient~*{align-self:flex-end}
/* Client and team names: plain words until pointed at. */
input.inline{margin-left:-12px;border-color:transparent;background-color:transparent;font-size:var(--size-body)}
input.inline:hover:not(:disabled),input.inline:focus{border-color:var(--control-border);background-color:var(--surface)}
table.libtable tbody tr.on>td,table.libtable tbody tr.on:hover>td,table.libtable tbody tr.on:active>td{background:var(--accent-soft);box-shadow:inset 0 -2px 0 var(--ink)}
/* The temporary password, shown once. Monospace (the one face exception) so l, 1, O and 0 differ. */
.tmp-pw{display:inline-flex;align-items:center;gap:12px;margin:8px 0 10px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--surface-subtle)}
.tmp-pw code{font:var(--weight-medium) var(--size-body)/24px ui-monospace,Consolas,monospace;user-select:all}

/* A client's detail on Platform is one column at every width: in two, People with access
   (five columns, two actions) never fit its half, and Remove was out of sight. A
   departure from spec section 5's two columns above 1100px, for Brandon's step 7. */
.cols.roomy{grid-template-columns:minmax(0,1fr)}
/* Its venue rows and the Add a person form keep the 720px measure the LTH team form has. */
.cols.roomy .secrow,.cols.roomy form{max-width:720px}

/* ---------- Narrower screens (screen only) ---------- */
@media screen and (max-width:720px){
  .apphdr-in{padding:8px 16px}
  .apphdr-user{gap:4px 12px}
  .login{padding:24px 16px}
  .login-card{padding:28px}
}