/* Phone layout only. Loaded with media="(max-width:700px)", so desktop never sees it. */
a{color:var(--pri)}.nav a{color:var(--fg)}.btn,button{display:inline-block}
 input[type=date],input[type=time],input[type=month]{min-width:0;max-width:100%;-webkit-appearance:none;appearance:none;text-align:left}
 label input,label select{min-width:0;max-width:100%}
 .row>label,.row>.inline,.row>input,.row>select{flex:1 1 100%}
 .card input:not([type=checkbox]):not([type=radio]),.card select{width:100%}
 .card table{font-size:14px}.card th,.card td{padding:8px 6px}
 .emp,.emplist.pay .emp{grid-template-columns:1fr 1fr;gap:10px 12px;border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:12px;align-items:start}
 .emp:last-child{border-bottom:1px solid var(--line)}
 .emp>label:first-of-type,.emp .acts{grid-column:1/-1}
 .emp .acts .btn,.emp .acts button{flex:1 1 auto;text-align:center}.emp .ro{min-height:58px}
/* the menu collapses behind one button */
.nav{padding:10px 14px}.nav .sp{display:none}
.menu-btn{display:inline-block;margin-left:auto;font-weight:600}
.nav>a,.nav>span:not(.sp){display:none}
.nav.open>a,.nav.open>span:not(.sp){display:block;flex:1 1 100%;padding:11px 4px;border-top:1px solid var(--line)}
.wfhgrid{grid-template-columns:1fr}.wfhbox{padding:12px}