:root{--logo:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAACeCAYAAAAMq4e4AAA+IElEQVR42u19d3hsVbn++649Za1JcgLn0EGKFJHeq4DXrlhQRAUFEa5dUK8o6k+xAPaKt4hy7YIFQZSieFEEBKlKLwpI7wdyTjJ7z8ze6/v9MWslK/vMJJOclEnOrOfJk3OSya7r/fr3fsSas+i+q9z/AUAAZJP8fam/v39QRDbIsmwXktuIyLoktwWwrohkANYDoEg+CeAWa+1FJC9JkuT+3LGU+xIA1n3vrd6a9qZe6PfA3P2E9+UBMhlIokqlsm6apkuiKNoOwMYANgWwPoDNAGwsIoMk1wZQ7PTiRGQIwJ0AriT5J6XU1SMjI4/lz+2u2bqv3uqtRQ9g5a4/6/Re+/v718mybDNr7VKSGzrtub6IrEVyOwCbAKiQZA6E+WOFWpNtnqd1/1cAQNIfZwjAdSJysYhcW6vVrgewogWg0dPOvbUYAexB4YFbKJVKWxYKhb4sy9aOoqiUZdkGJJeRXCoi2wLYiOQSEVmf5FIPqAlAmuWAwzaaviMlHJjK9OD0gBaRRwBcJSK/KxQKV46MjNzaxtzuaefeWtAA9ps/BYByubyVUupoAIcC2DrQWpOBU3JfqwvQqa7Q71XOZ/bXKSJyA8m/kTw3iqKrV65c+VTu7ws937m3FhqAvQbCwMDAskajcRLJY0n25cBpcyDN+8XswnuW4Lrz2nk5yesBnJdl2SX1ev2OHph7a6EBuOC0br/W+p0kjye5qQNuGvjCiyEgF5rbPrDlAV0TkZtJ/tFa+7tarXY1gGrPb+4BuJu1rgAQY8xeAL5DcmcH3CwA7mJeoXYthNoZwL9E5DdKqYur1eplAFb2wNwDcLdpXWWMOQnAxwCU3M+iNQC4k2nnUd/Zgfl+EblQRM6t1WqXA4hzYA7N9N7qAXhOtO4eAL5C8iC3Sf3G7a0x7doKzPeKyCUA/hhF0SUjIyOP94DcA/Bcal1qrT9I8rMuSLUma91pgxkArLWPk/wRyZ9Uq9UbAyCv6aY1J7F0egCe4jUQgC2Xy1sqpf6H5IsDXzfq4XNaYCaAyGnmDMDZAL4Wx/E1gcDMFjGQWwU3O43YL5hS12iegVvwD6hSqRxL8iySOzqty57JPO3nGm7ADECB5A4A3looFOppmt4AoB4AGQscyP5+vaUmuZiBzQFRAegDUAagBwcHjdba1Go1OCtQWnw+6sbnxHl84BYAlixZsrRer39fKfXqntad1ZU6IENE7hCR75bL5e8PDQ09nXNjOq0dn2+LzX+1tCK01puKyNYklwHYhuRWIjIIYAOSa4nIWhjf4BKRXCEiK0k+ISI3AfhlkiS3oln+Gp4/QpdUxnEegOsfetEY804Ax5Pc2pl5a0JqaD7XaI6ZJKy1DwH4JcmfxnF8XQvrrFuCXqE5nOZ/WS6XtyS5EYDnkdxVRJ5DcmsAZpKqvPbAGCumeZjk3wBcHEXR/w0PD9+We0bzamJzjl+CBYC+vr6drLUnkjyip3XnzU+WwEeGiFxL8ocAro7j+BYASU4zz6U/yJywH1eXXiqVto2iaHsR2R/AviR3BVAKSlLz99muKq9dAMv/TdTE8uhxMwCXi8hFInJ2rVa7J7+3FyuAFQBbLBZ3KBQKXwPwQvezNPBfemt+NHKGVYtE/kHyhyTPGxkZuaWFZuYMm9r5Mtcsp2G3ILmPi4+8jOTOGJ86C++FmNmy2XbFNCtF5CckPxfH8YOB773oABwByMrl8ouVUr8iOdDL63a1VlZe64hIJiJ/I3mxiFycJMkNGF/xhTaBI+lg36ng7/ItoUZrvYdS6gUi8hIAu3pzOACs18ycQ9drHJjd9TwhIq9PkuQyv9cXE4D98Qe01reS3ARAA1NoiO+t+TWxc/7ggyT/AuByANfEcXw7gOFJfFbkTNhWgGVfX98OWZbtSPLVAPYGsHkbwHZL7bsAaJAsiciVcRwfEDy7RQPgCEBmjHktyXOcD9HzdReWiT2uuSLnZz4A4E+uyeIKkrVqtXonxjdZtFoDxpjtnWbdQ0T2ILlT7tihSdytwU1/fZfEcfxyzEPQrzBHAmI9dHdqorcm9k29q2OliS6vnZ9F8qhAQ8MYcz+A+wDcLSK3k6wB8MGePUVkZwC7A9i4RYQ4y5nYhS5/PkIyEpFfB7GERQVg/2JWONHdSxEt7JWPWVgRsTlfeFMAm5I8IB8VJhkGyiQArNewC8k6EwAFEUlE5Pz5MJ/nAsACAEqple6l9QC8+ACtWvnPMj7hSo/YnFYvLOB7z0gWROS3jnV0zgNYcwbgLMtuV0qlQRCjB+Q1R0svZvcCAH6R+/+8XMRsv1Crtf6tUuqVvUBWby2ClQGIROTvSZLsjs7jOxPlqEPF1nHRTDSDgiAsKM+H+pmm6a8LhYIGsH+LC15Ifk/+AYfdP/nPtiqk77kSC38JSSUi/5Gm6c1YNXjFFlgA2jdZ5PeS5OIKMtMaOPRjOi3qNgCU1vp4kp9EsxNEdREokQtEyGT+XhhFbVVjO0Edbgj6Xv33whPiFJFnoih6zsjIyPIAZBNiYWBgYFmWZZtmWbaWUmobx0deEZEB12AxRPJeNHPsNwMYCYDcMkU11Y0TBSZEuLQxZh0R2RzNKOSzST5XRJYBWNtd5FoABgEMO27m8hw+8FYVQm3BkwdeDnwrADwD4D4ReRzAkyRvE5EbAFilVM1aa0SkoJRax3FTbyoi25PcBsDmaJLHh8ddCDnP3hoTvkpErk2SZK82n9HGmB3RnOixI4BtRWQLAFuQXKfdHsvttftE5Bxr7Rn1ev22AH/jrLnJNkqYAxxHf1qpVHYUkQNE5KUkt0dzBMm0uz9mU1pOohEtmjXZdREZJnlP0FK2nOQ91tpqFEUPkbwPwJMjIyPPAKhNx3LRWj/Ltbnt4dyJPdyUiHZVR71y0+7UwE+RvFBEnvHC1ymt9UmuBWCzCSy0yazW0aIZEakDOCvLslPr9fo/wrjSZABeJSxujDkMwGucNtmlRfdH3vnmJN/nYjUAPArgfjSZHEcA3KmUekZEbs2y7BmSjSiKqtVqtYpVx5xMJtzYwj9udZ/tBqgNGmOeKyLPJ/lCEdmN5NIA0ONqlHv46Z7VgbLKcliYyjv0IPc118MAvhrH8aluT0cAslYHU6G5aYw5jOQLrbWbkDy4haYAuo80PXMVMj+31v6/Wq32GFrX7E4lUpg3w6djWuSPvQqo+/v7182y7AAArwDwYjSLIhC0XaIH5q7RxFmb94sZtJzyPdx/tdYeXa/X7wQQsZ3W1VofTvIEALvlNO1CIFP3fsotSZLs6q45dAfyUUGsJjBXS5AHzzNvWvVXKpWDRORIETlIKbVB8B4y9GiH1jiB4YpHlltrD6vVan9kHryOzvXTJA8OTLiFGDG1AJS19sW1Wu0SjB+I1tWWWQDK0et1I2VeCuBQki9yw9p6JvaaB+IUzbTVsLX2NWE6KDPGHAfgqySLruBiIUv41JnRH4jj+DSM0dYuKDerFZi11psCOJLkWwBsmzOxe1p5ca1xLKOh/y0iK0ZzuVrrDymlvuKK07PcJsiby1wgAC5Ya09KkuTkBQrgycCsy+XyAUqpwwEcRrK/p5UXvIYN3brRfmznOtXRbOG8Bs2g7GNEc3zJT0gePoWUTxhd61Z/OCMZWWvPTpLkMMxTsfksLZ9eSgOtvBmAN5J8qxtWHsYsesT4q4LEojvSdC2nUwbv73YAFwK4Ksuym+r1+r/QjEI3pbrW+uNKqVNFpOFyWnWSI+7ffjpen4hsSLKAJp+uakMg1k2mm6+5vjyO4wMxT5xF86GVjTGvBHAMgJe6kr813bxuO8K1G/ZtjjTvPhG5UUQujKLo2mq1elsI2OAe6AF8AIDMWrvcGPPo0NBQA80ihdDcZH9//zJrbSFN07WiKNoawMYA9gRwIIBnd+HG8JHoG5Ik2ROLn1BgFa1cqVR2s9YeA+BQpdQGuaqvxa6Vx4E2AMmIiNzlxrT+Xil1OoAt5gHIviDkSQBXADi7UChcPzw8/C+MZwQFxlhBV6ko5CTSPTxZ2+XMtw+RfE8X+V0+F/zFOI4/ugh84Klq5dEN3N/fv4619nXW2rc5dsd8XjlaZKANSefgQHI5gPMAXJokyX0AsGzZsoFqtfoogArmtrlGADRE5PRKpfKJ5cuXr2ijYSdl/syzA0ob0OYDWL77Ii2VStsppT5DckcAW3eZJrYAhkXk5CRJvoJ55O+dR61MjI9gH0DySBE5RCm1buACLWRfeRzPNQBYa58k+QcAv4qi6LLh4eEnchoNWuvXKaV+Pk8troImw+cV1tqv1Gq1PwXX1rGi4TQ3hXW+1kdF5H1KqWXzXPM8oZmCZkR602q1+sgi9YU7ec9RzrzeQEQOAXAEgAMWYLVXGIjydcMrRORiklcqpc4cGRl5LKfV/N8pAKnW+ptKqePdLK55YQdx1y0kvwPg084i6DjgOp1upMwYs5eI/KdSas/gpXfrCxcAluTubsTmmqaFW73DEKgwxuwtIkcCeI2j/g21cjdxVbU0kQHcISI/IvljR7Kev9dW/dhFrfX1bujbfAayMjSDwrTWPkjyuDiOf41Va+xXG8BFAA1jzPEkvyYi0QIwu/zN14vF4kYrVqxYvoZq4Im0cpgSHDDGvBjAvwN4kSvoCQNfc50yDFM+o4LET0YAcIG19oxarXZpzp9vO/TM37PWej/Hcd0txBKhFfDVOI5PCN7Tajf0RwCySqWym4hcgWZzfrdT44RjQz4Tx/Gne9p3QrdoXAS7VCo9N4qiNwF4EYD9ck0sKWa+tDbUrgw1aBhBBnAlgPNE5HwfjAo+2wkvcwFAaoz5HMmPOv+3W8j1LBxVrbX23CRJjsBY26pMF8DebN4TwAUA1kX3j0UR5/cWReRrcRx/CIurkGM2tbLKA0FrfRDJV4jIC0juMcGIE6B1F9dEQdJVSgQdWAEgFpG7SV4tIpcD+JNjgJzMRJ5MWMEYcynJA7qUo61BsmitvTBJktdgAo4sdnCztlKpbGCtvYHkhgsAvKNzcK215yVJcggW/zT62dTK455bX1/fTlmWvdQBeleSgy2KeiYN3Iyi2P2NiDxK8k4RuUREHlRKLbfW3lir1f7V5rqmM59XAbB9fX3bW2tvnmYcaK5BfHqSJO9Cm+j0ZHlgBUC01hcppV4yn9G6Ds0v3zP5qFLqk9Vq9YfBBuyBd/UCX6vM5nWR7P1E5HkkNxKRLV099jokDZrE508C0CSHRORxV+U3DOABkv8E8CDJe6rV6j+x6uC0/PlXd6i2N5/fT/IbXbyf8yB+Y5Ikv2hlRXKGb7ZVtUirKGYrJsepkAKsUvTtzLoGgJ9Yaz/bQnL31ixq5vD3g4ODg/V6vSIiUZIkywcHB4tDQ0NVTE5DFO6VqUw7nBKAtdb/rZR6V5f5v+18YojIE6VSabsVK1Y8nfeHCxO8pKxUKm0D4ORJ/IR8nSk7oBpRQY1uq+MBrdkhGUhjBr7YiIhcppT66MjIyE2h797D26xsKpuz0saxMg4NDT0NwG82DA0NtRLSbAPUWa+WIzmCmc9GdMrYMhWlpQCkSqn1G43G+wF8Km9Kc6LAldb6fKXUwW0AnIXazwG1LiL/AHAvyadEJCHZh2axgPdblIj8neTfRWQjNy+Yjq1vAwD9rXylUBg4+s0nANxF8tfW2t8lSfLAFKORvTV7gTCgdR5zvt0YH9PZXUSu82YqxvibOwEpW+Agaufjtz3QeOUV0vO0HM0qIk+Wy+VthoaGngmFD9uB1xjzKpK/aQFeG57A+TiXkjwry7Kb6/X63TnwlLTWj5Jc29v0IvKFOI4/ljdvtNYbktzIade1rbVrK6X6rLVLSfaTfADAtSQfdny8jRbSrAfc3poUxOVy+Wil1H+TNEGuOy/4J+W4CqzAGoDHROQxAE+RXA7gYRFZ4j5XEJEEwEbOAu0H8Cz3pdt09/mAsXW97W9OkuTMUAsXWkhPAVASkc+3CxS5/19B8nvFYvE8VyDRKujgrp1PA1g7+P1m7txhYCR1WvSBKb6M0HzrBap6qxMXQNVqtR/09fVdm2XZe0i+BMBWbq+qCTTlM2hymwPNTqIVIvKeKIpuStN0uFarPQognopPrrXeEMDmIrInyZ1FZCeS2zpQezdToZkWfSmAMzFBN5J38o9USv3IaV9v+voI77UkT4nj+DdtgJQPYIkx5i8A9gNQB1ACcGkcx/+G8YUVrfwBtnkB80VA11uLZ4UxEl2pVLbLsmxQKbWjiBRctHyFUmrIWjvivg+QvCwwm6+K43i/FkpQTbB/pUXsaNwql8vPjqLoOdbalwJ4PsnNSK5lrX0sSZJNHY4IQAotwFEB8IGAWidyXyMickKSJKdjPF3LRKF9X255N8n9RMTf0LPRJAYYaQP83uqt2V5haWhSrVZvcD//U7s/MMa815nMqauWujrARxrs4U6Dpy1phmu12j1oDkW/yJ13Y2vtgQAOHBgYGFi5cuVTocYdp30rlcrzAewmIiBZEpH7AXzeWnuxO3BeenWynsj9fz1jzNpxHM9GNLC3emsq5nQrILUKXGUi8pbAfAbJPwc4mE7spZ3SCktUsziOHwJwFoCzkiQZp8kL+ZsRkROcQz0kIt8tFApfCBDvZ7NMNT3zr7yPTXJ9AA+ix9XUW/O/JrL+CEAGBwfXqtVqWwQ4gLV2xSwLlvAaolbavRBG5ly98/4i8gtr7cdrtdrdweemA1xxN3qLUgqhPw1gw96+6a0FsBSArNFoPNspHYvmbODltVrt76uhfaeKo5b58VAD01q7NIqivVzfbKhx09U4MQqFwpPWWv8wUqfh15nA0e+t3uq2tUHOd74Xzaj0vLqAhVCC1Gq13wdSB1j9SqbRJLSb+DcQaOUNenuit2ZAO862BvT1Di90AazM1TJc5s47r1xrqsX/p9vp0Q7AdFQ2d4egRjOB3Vu9tbq+op2CFcdpnoMAdg9ysgBwdTdJsPwDmY3lC9npHsRuM6Tle2vNWh6EA1rr35bL5RdgLK3ZkUU4xXPZwcHBQRHZyf2sKCINa+0Nc+T/TgnAs/nAnwlrREkuxVhkrecH99aU9lOpVNpIKfVKkj9ae+21ByfQsKOpob6+vvWmc640TZ9Fckmgje92JcPTEQoLDsDK+RCP5n7eG/fRW9N1y6C1fsJa+4hSauMkSU5Ca6KJsKf9O1mW3TEwMLBsCua0B/C6br/6AOyNGMumLHoAN0+k1H25H22otd54mr6Jr37prTXDXM4DmK7+/iFXMfhuY8wmORCPkttprb+llHo7gPrKlSvTKZ6fSqmXOuB6sF6+Gj71ggOwOJP5miAIkAGoKKV2mOaDyLDqBMXeWpzaNmphrXmyu5sxVhf86cAd83vMGmPOIPk+NMnifgpgCGOjSjo5vwB4ntu7kft+XTeYz3MKYACPBucUksiybL0pApjOfPpIuVw+Ft3Pz9Vbq7cKgbCWPJDdjCPt9sBR5XJ5C/c5W6lUdjXG/BbAsSLyiAs8fcv9qe303MaYLwDY2/u/LpW01ZqkgZtPzNon0YxEM9DK607LriKPjaLoDGPMIRjf4pi/N9UD+IIELYwxH6hUKrdXKpXTjTGvRZPoIQSyIvmPoN2vSPLLbj+sZa39PclXAqgqpdYTkR84mqUIHVLPaq3fTPJEjG82gGs/XGM0sPeB61h1TOLG0/GJRORe9xK+gWb3VCt+LYvZTYv11uxabPcB2EpE3gHgHGPMTcaY9wNY4hSBjaLoNg9eNJveD9Van6C1/jHJZdbaRwEYEYG19ivorGoqQpMLbg+S33MttSGAZRIffU7XnAWCGo1GUiwW3wpgmXvYkYg8mqbpz9B5OVoEwBaLxV0A7A9grVKpdH+j0bgeY/XaCoBUKpXdC4XC9wuFwgZpml6JMb7j3loAfm+aprcVCoUlAPYVkYdIbkryZYVC4fBisajK5fJIlmVfJrk1xvLAQvIlJLdBM2Js3EzrH9dqte91oH19T8AmIvIHxyKDYO8oNOsY3pem6f3ogk46zuF5RGv9V5J7O01cFJFbkiTZcYoCJ3Mm1S8ArBSRh5Ik2RW5UZnGmL8rpba31v4ljuPnoTeVYSEtr/EKWuvLSe6FVec0tYt/5AeZD1trd6zVavdhYsol/zcFY8wlJPcP6KRG+3xF5NgkSX7cLftJzfF5HnfheC84NuogL6ewatroQffzQZI7GGN2d7/Xzvz5HIDtrbWZiJwz1+5Cb82IFiaAepZlxziBzwA0PgORtRHyYdPM15zvOxngPJHjFxx40wC81tHbvNWBN0KXKIO53tRhDk5ILk3T9NmTXIt/YaOSNYqie91wK+Wigke5Y8flcvllAE5Ac8p5Zq39bXCc3up+zasCYV1uNBq3AvgqySjQulEQzGoLSBGxSqmzO7A0PQf660h+IMeBnjp37zNJkpzl/O2uKf+dq0qsrFQqbU3yYJ9PA5A5Cbk7WjMhRACgtT5Ka3221no/B1I7PDwck3zKBbQEwBu11icaY45TSv3CvdyiiNxRr9fvbWM6hZulp527R/OGArsGAHEcf0xE/o7xTDCTgTIjqbIse9kkn48ApOVy+dkAvpszzT2L6s/ccLx57TxqJ3nmUliUAvPINzUcAeDbbQAGks8neaiIvEZr/V0R+ZIzie5Hk1vLklxG8gsO0OGD/4t74EWMj1T3xq1034qWLl3aNzw8vH6hUNhKRIrW2gRAPYqiIWvtj5VSu0xhkLwK9pdPL/lAZziIwALoI3kOgKUBgP1wvJ/Hcfw2rDqKtWtMlrkCL7XWV5DcB2NkeeL8nF3q9fqdOU3pI4J7APgrHOWntfYJAOcCOMxFCaVF8MJHud8Qx/Gv2pjPkUv8bwHgHsc+0uPnmgfgOt/zQJJ/xNiYnPznqmimDKeyPBjfFcfx6a3OC4DGmB+QPCownVPH43xRHMevDgJoXbc3OJcvyYHRp3SUM3MKIvL9OI6PwapkeQqA1Vqfq5Q6RERqAMptXnA+APJMHMeboMl8ubbWelul1I7W2kGSrxSRdUluTtJYa89JkuRQ9MaxzNcelCVLlixtNBpHuLa9fUhuh/ER5+kOFvf74XIAv7DWXujJGcvl8uYk/0cp9bIAvJnzn69JkuQFTnB07cCAuUxEe0n7TaXU8UGI3gLIlFK7jYyM3JqLLkZojoPcwVp7Y85PatfNJM48fwbATwFsDmAvkusG7PcrXHsYrLW/BvD+JEke7JnV3ePaVSqVHay1rwDwJpI7TiK0OwKxO0YiIrcAeAzAAUGboAq+31QqlZ7vZjx1dfqRc3wuDg4ODtZqtTtcGaXATSQXkf+L4/jFGJvYIIH0TI0xPyV5xFRGQubGVfjASMn9+l8kT65Wq98LNUEPO/O6F73GTXNgfomIvAHAWzCecnUqy/uvBb83gn0xmhYSkccB7JMkyX0LwSKb65Y8VavVqsVisUry4ECTZiS3KhaL0mg0/hQEGgSA7e/vX0dEXkRy58C07kTqZhiLahbcuW4Ska+XSqV3Dg8PX4lcnWtvzesKKXJ8hiBtNBr/SNP014VC4VUkN8bUaHRCd0xh/AwkBj8jSUXyjXEcXxeY010v9eb6fHQBratJ7haA2E8uPMcFrZQLMO0CYAuS62Ga7B1O2t5rrT25Vqv9OJDwPZ93YWjmAoCGMeZKAPuixUTA1TCtbeB2HZ0kyU8W0r6Yj2LsCEBWLpdfoJS6JPcyRn2V0Sc8flqbmuLLIYBhAN+JougLw8PDfkJEAV2YEuitCWMnB5D8E8aXSXa6D7IW2nj0uxPwPlLddbnebgNw+FLOVkodmvNrQ2CFox2n0/QfAbgijuMDehp3wWpfBaBijLkGwLZTFOSrKIScUqgBuN5a+91arfaDhQZeYG4LOVo92PeLyIvQbBFLAz91Rs5BUkTkKoxVWzV6mFhw2jfVWn+N5LZtBs1PuMdE5AkA5wN4HECd5AMk7ydpG43GffV6/a5AWKQL7QFxnl9OZox5PclfOqmYD2JwdYUEgL3iOL62p30X3Co6v/e1JM+ZBngFwFCWZfvX6/XbO9DyC3JvzGcNcAYgiuP4bBF5HYCb0WxO8FrYR4bTafiqGZvq91cuoqh64F144K1UKrsC+IkjrpvKXvXdQ19y4C07664QWHneKpOFvDfYJULEotn7uSfJPQG8SkR2J7n2NBP43kTfo1qtXr8Ga99whrMskP2onGW2h4j8huSGU/R7fdHFA3Ec74hmJd6iLdDphi4cn0ZKkyS5Ko7j0+I4frFSajsROSDLss+gWc42lZfgZzJthDWbe9rnwGUBANczRWZa6yMA/HEa4A2172kAVmKRM7F0C7ey91dHG/cbjcbKNE3vz7Ls0mKxuJLkK6bwMjOSCkCapum5WPPodBQAMca8qlgs/r++vr4/12q1WgfCzANpLgtb/LuxlUplgyiKPquU+rIze6cMXjRrCa5NkuS9WAM40bqpD9b7IinGAlkFAJEx5ofW2uXonAk/EhGIyCv6+vrWx/QqdxbDe32dUuqoer3+NUw+PyiMOcyFu+EFtgWgtdYft9beTPKDzueVaexPcbGPE9EkdFj0FXbd3Mg+OtR4+fLlKwBc5vJ5WYebI1VKLbPWvgmTszcsyiUit7sc+xF9fX07oH0FU4TmFPq1tdb/rbU+HWM147Mh+KLAXN7fGHONUupUkutgjC5nqn5rRjKy1v6uVqtdvqbEPRYCE4Ufb3HBVO/NsXW8z23GxaiFOYkr9KiIFACUsiz7dBgfCJavSivU6/ULoih6N4ADg+clM7zffEagVKlUPkXyUgA7OkEjwe+nkkb0Od80iqKPYA2qslsIALYAJMuy/3P9wJ2OxfCN/VsZY7w/VFxsStZrH4wvMfQE5NVAOx3S39+/Xc6v9ATmmxpjLgawr7UWJD/hrJ9oBgXNKBtGX1/fi7TWV6A5DsX/fLTB3vFf/TMYiDfZ+/aBq9NHRkZuRheRzvUA7Daco9G5MvhZp1rYAvhsqVR6LppzdAqL4L15vrDnGWNurFQqb8dYYX4h0Fx19z0lGWVZ9uYAuJ4L6mUA/hJo3UviOL4AM5c79+ZyWi6Xn621Ptda+weSe7rijNG2UVcD8LSI/EccxzsAuM65TXYSIaastU+XSqWT0MXN92sqgEevU0QuzE2J69TE7I+i6IJKpbI7xko2F4UGJrkTgO9orc+pVCo7B0EoJSJPesC6XPqbnRVSRzPXerJS6iKSm6BZZpoqpT4wQwEgbwJnlUplQ2PMB0herpQ6BGPR4VH6IwB1ETmF5PZxHH/dXeeewUC8ibQvReQ3bmLhGtUaupACO1Iul1eKyDun6B95ibwUwOFRFF2XZdk/A9NtoZrOUZqm90VRtAnJXUhuJyJHF4vFSpqmVwOoKaUqSql3eT+X5NpRFCVRFD1QLBZPUkqd6J5Bg2RZRH4Qx/EZWP1e2FETVmv9FhE5Ryl1KIABjOdD8z7xVSJyZJIkP2w0GsMAIq313m6q4ESpJJ9+rInIG7IsG1rTALxQNLAFwJGRkVtF5OZpmEneHBxQSp2vtX7TItLE3xMRJSIJAE3y48aY67XWB7lC/btHd7uIkDxVKXVnkK4ZZcJQSp2zmoE+f6ysXC5vboy5iOSPSa4fBKki9+wVgBGSx8ZxvF+SJFe49+F5lzftwHyGC17F5XJ5CGsgJdJC4kP2Uv3cDl9sKKVD0oAiybOMMcctMBCHLBXecoqSJLkOwB3u96mI1AFsQPJ3Wuu/okm965+f104ljOeBiqy111ar1Ysxva6cVSqplFLXkXwZclQ2zhIoAPgHgBc4SiOvidMgALdDp0E8kk+tWLFiBGvgWkgA9i/rApceiqa48UNTLCN5mtb64wGI2aXvJ8oJoiz31QDwTZJldw+lgL1zL6waeSdyRRIkQfLUQDNOK0gFYEBrfZobpL0s6CAatZgc/9lZpVJp7ziOr8GqXM1+PavDGABE5C40e3tL7voLbb7CJgb/bMPmmQW3uMCuVQCUjTF3Adi0Q//oHhF5Rim1W0AcIF4TWGtPTJLkS+hylo7BwcG10jR9VpZlSwE0siwbKhQKz8RxvAJN/uwbAWyJ8cUak5Ui+t/fHcfxdhjrl5YpCBgLYMAYczSA40luFZjmfn+lAVCPj+P4vwLwZ632pNb6GpJ7THIPvnTyuiRJ9pwhK29BFX8U5llwcAp+izfDai4o8oFJ2sw8QM9PkuQE54+9UEQaTitFIpKR/KLWOkqS5PM5bT3fmtdqrfcl+RkAm9VqtaUk13I13iwUCgQwrLUeJvmMiCx1roUKhNdk2tQ6svzvYizFlk7h/Vmt9ZEkP0VyS1e+mqdIguP+vtVa+75arXZp4M5kbYS0AbBRB0rGjxTdw3GHX2StHQGwIZqzp7W/Fme2GxFZQrLPnf9xAJcBuD6O45vRbJpBD8ATBzjC/l4JXoTKmYrSzoxWSl0iIh/oxIJw5XmNUqn0+nq9/jOSLw00sUKTk/pzWusNkyT5YKDB5lMS+0HmhmQ/mlHidUjCWvswyWGnbfvd7zcIaGOmYlVRRKCUunEKmpeBgPkvpdR7HHDTnMk/KlxF5EtxHPuusomeLQGgVCptHpAYdvSsSB4C4BCl1GT7YbQ91T2zN4oIjDH3ish/J0nyFUyvlHNR+8Aq8JMAYKBSqWxgjNkIY3OLUozlMCUIjHigjWrtLMtqU9isDwDg0NDQijiOX2Gt/ZaTxqPk8SKSKqWOM8ZcuGTJkqUYo6Gdr5UBQK1W+2Mcx/vFcbyDUmpna+2nHHi3cblTD5QGgBXT2XBOKKzb4fMM+3W/58Drm08KYYzB/fspkq+I4/jEDsA7uk+iKHpr8I46FUiZiKQi4r+3+xqNHwT/FwBbKKW+bIz5KqbeBbWofWCFZvnc+lmWnYhmxc/GzoxRAB4G8LCI3K6U+pu19vYkSf6OZi9nfhUBNLTWb1JKnTUJyXvmqo/e5gjLSk5AWK31x5RSn3MvzwsHPw/ndpJvrlarf8P8k5wRq6bMIjcP+ZUAXgNgJ6dVhgH0TfGdemvjkDiOz+sAYJ4G6WSSnwjckXD5d/IkyRdVq9UbO4wvEAAGBgaWNhqNO5zlJDO4RyWnVfO1BNbtmaK19sAkSRZEQwTnArzlcnlLpdTvXICjrSZw5hZE5BGS95C8FcCVbmrDQ+6jZa31WUqp107Ck+S7U96cJMmZwSaK0Jz0cDzJb+ZB7D63UkTe6ebBRugORosw1eJXub+/f8ssy44C8JFpvFMPkL0d9RAn2LBFNMshj46i6HstwBsGBh8ieYg7ZhGdkQkWWryX1S00CjnWohZmdF5ApG7PnJckyWsXAoALcyAcKiTPceD1gRLmJaOMITtyTAwbAtgfwDtcsOY+kk8DWB/A1sGc4fa7UwQkG7lzpQCKcRyfprXWSqkvBprcR0oHlFJnViqVrarV6sk5/3y+VrgZfTlkLcuyCoDdsCoVb0fHdKb4TgCucVZK1kZwNFz84ZgWJuZoLbOIXCUib0mS5B73fhod7pXMBa8+6PYCp/F8Qg1bQJNjzY8ZHQLwKID7rLUrALyY5GAOxJGIEMC/DQwMLFu5cuVT6PLKrtkEsPeVPkZyJyexSy3MLeSCH6OBrOBF9pPcvoXm6MTvvjd4wX41ABSTJPmSMWYtkh8LNIpyAsWS/KzWet0kSY7H/KeZQg1c7+vrWy/LsncDOMlt0ulsev93X9Ba35UkyWUYP4HeA8uWy+UtSH4VwL454RkS6H8ljuPPuec7Fe2l0Kze2gfNYXRT8UG9plb5gQAicoOIXEXyzwD+EsfxI/79GWP2chHoYt5dITlYr9d3AXAJupwQcbYATACZ83uPD4IcebO54B92EH1WeZMn5790kh7xnxsh+VCbz6QACnEcf1xrvbZS6l0BiOk2d0MpdZzWWpIkeb83I2cZxMx9+U06qoG11m/MsuzrSqkN3EadbtDFa5dlJC82xhwex/G54QfK5fIWURS9RUROILkkJyisE7TPWGsPqNfrd4SAnKq1ppR6uePy7pg6Kdgnt1pr/wXgLqXUrQBudFVqrYRFIY7ja4wx3yT5kZy5bt2MJA/grq6VmC0ARwBSa+3hSqkluWDTqKlnrf06gCGSR/jIajAxblzkeZoPMrLWFicAeYZmOeK7tdZlpdTbgmslgKKLUB+vtX4sSZLPYWZzxXmwSjstr7XeDM1Rm0c4kxeB/65W8xosmhxUP9Vaf0Ip9WdHBPAGAG9HswkBuZGw1rk7BRE5y4G35LTvVJ+N7546oEMBbZ3JHllrf0Pyc3EcX98m4FgIlEMYtVeVSuWUarV6OJpVX+OEhguidf2aLQD7h/X6nMSW4MW/3XW+AMAXy+Xy/kqpdwI4hGTRATkNgMwpbkpBs7h/QwD3o/0sYQtAJUlyjNbaKqWOzQmcSEQypdSpWuv1kiT58BRMxFbaVHLnbgXWZ4nIlgC2VEptCeAgALuQrAQE+MTMdZN5d8Mopb6aDzQGgsJft/ctY2vt95Mk+Vjg78o0BIj09fWtZ63dvgM/flRbBlV0oeJgLmaQtnnv0VNPPbVSa/0bpdR7W2j9wpoKYKKZNlrPWrtzTqJap2U/U61Wz8BYUX1Sq9UuAXBJX1/fjiLyHgBvIdkfbKYMUxtslTntsDuAqyfYFKNphSRJ/r1SqdRIvieniT2I32+M2SvLsqNdp0+U8xfRwvSdaEMP9PX1bS4im4jIpi5otwuALUlWcvONPZCmOtyrndDKH4fe98dYfbPNWUJeYNwmIudZa79Xq9X+OQP7RQCsA6C/Q5P5CQDvSpLknOCasima7T7wdrGIvDe/P0REr6kAVgCyNE13UUr1B5sgcybtX5Mk+Yw7dyPv1zpKlHeXy+WvRlH0JhF5DcndcuZ1x5pHRHbr8GUCQFStVt9rjCmR/PecbxSJSEpyX6XUpaVS6QXObCzmNE8I2EhrvQmATdAckboTgI1FZND9zb7W2vUQDOAKpzE6MAHjO5FWZ/n7iXJaKrRyohbmtf/ZhdbarzjSuHBE6+qk2XzV2WbB+VQbgRxZa89WSh1XrVYfxeqlefw1Xw8gdhHw8B6KayqAfUBif5dvCzeIJfl+rJpUD8dbKAB0kv0UAKf09/dvZ63dX0SOIblPh1FKOjDsHGzeTjSTiuP4PVrrHUnunRMYBecTb0jy12imb6oA0N/fv461tpim6dpKqV0AHEpyOxdV1WGEtAVYM+dqtEoFzYSpLN76sdY+QfJmNJtBtgrSLHmLYTSy61JDH0qS5KqcuToTY0nozOFlSilI60KBzAnQi5MkOSw4/2pHh+M4ftwY8yCArXMAljUVwNZtzr3cRmUgPS9IkuSaSR6+DYCsAKTDw8O3AbgNwBnGmE+TPGmSKiwEAN/YmWbDmDyn59vsGoVC4W1Zlt2I8c0BHsQZgOdorX8KYDmAPdI03YRkMYqifq9Og70oAdcx2lxHIRehD62IGdG6IvITkifGcfwwgHKpVHqBUurVAJ5HcrugPNOnYa4Rkf9MkuRnPvATaMkZTa2QXNYGOF5Y3xrH8SGYuWFk/p02RGR5nqqJ5Mo1GcAF350SmEhQSv3nFIJRtgWYbRzHnzLGFF3udtKGfJLrlsvl9Wu1WicAHt3ww8PDtxtjTiT5tRZVR5HTaIe0mt3kAJ73h1XO1CzktbHjsHqQ5GMi8pCI3EnydhH5DskNMPXSQv98EgAfjeP4m8G11Or1+kUALgKgisXic6MoejnJXUTkFpKXJkny15xAnI0uLT8G53n5Ob7Bs7JRFL3BmbozWR1FNLuZnm7hevWviQCOAEipVNoCwBZhgEhEHovj+IpcSB9TBDMxlrvdWSn1iglK7kY1ZqFQMM3JIlPSWoU4jr9ujNmE5H84EBdygPSmb76uNspFmUf96ACwIwDuFZG/icj/KaVuKpVK9w0NDY3bTJVK5WAAy6bo+3uTuSAil6Zpelyj0bglDCZi/AjXtNFo3NpoNG5t805na0SJLxRZG8ALW1TXWWc5fNRZYTNd2uiF0hNOEIvbqyB5UO5ZyWIHsN8QDaXUB9zmybyWEZGrnRm7OpJ8NIJaKpWObDQa16JJGTOZTzydqK0ff/ohrXVRKXVcC1M2anN9/neRu/e6aza42w0cvw7ApUmSPDDBe1Fa6/VF5CcY69iakslsrf1GkiQnonWvr+Qi6My5CzKNyO60Ap6VSmU/AGvlUjmpq6s+N0mSL2LuGkuUc/m2q1Qqb6tWq9/H/De1zDqA/QZoGGOOB/CeIB2ROhBfOkOmmAUQrVixYrnW+q3BcfPm5ehGbDQatdUQFipJkuO11v8ieQrGyi3ZIvIcgrYB4E/W2h9Za68tlUrLh4eHn2yj4cIRoP5YdTTLJNfqxFXImczPAHh7kiRnB888neReBXNLZDCaqxeRL7Tye621j4jIRzDLJAsiUs2Z755P/Ft9fX3Xj4yM3ITuIHqYEc3U9hiuzeybGD/GxKd/rpjB6F4GoOCYDL/ogi+2zcsZKpVKy6d57lGy9CRJvgbgq678UwUaS5GM3DWsBHCVtfbDURTtEsfxS5Mk+Wm9Xr8rAK/nYAp7Z9OcuZ0aY/YhebSzYjoBr897X5tl2f5xHJ8dmPzdSJ8bodnaeYgjsAtnIvlJC2912YjZvoekjfvVZ639KZoppulWA3a1BvY5UG2MuZDkv+Xa87xJdL+jLMEMvghv4p5sjHkDmgwVoQnmE/VPDg8PPz0TAiOO41OMMZsBOMT9/CkReVJE7gdwHoA/5czicAKf13LpJFrJC73/yhEPTKg9nQA5PUmSE5yr0rVmXy66fEIudeRbEj9Rq9X+MI/3oZwZv4PW+htJkrwTc1MLPycA9sGERqVS2cBa+x0H3ryp52/0NiflZtIM8SZyIiKfUUr9OCh8CDXwcLABZDXOlQJI4zg+qlKpbCgijOP4KTTZEFvFArz2Tqf4Phpa6086Er7JAlejZn6WZcfWarXvdWgyd8O+S7XWb1RK7R7cpydVuChJklOx+gTzndnyZL3ddbrinXcYY26J4/hb6J7+8Gmb0D5yWCyXy8dYa69VSr2qjZ8mzre4fgZN9rxmZJIkvxSRe9BiqBVJE4BgdU0gAlDVavURl0utBVq2EAA3m4ag8mwjB7g8d4bOSOkiEfl/DrxFdP9sIH99BsAng1p56wBzv1Lqbbm4wGyvegfK6jSt9YcxnvJpQQF4tGNGa3241vraKIr+l+QmE/hpvhrqmhn0f/MaKEKTqfKMVoTvIjKAZqfNTJ0vn4LJDyafrkZq9PX17UTyV0Fgi5P4vJG19reOUbPrzLtJfN9dXY93GPWukXzdyMjIY3McNHp0MqENwCqlvqS1/iWaY3q6AsRqip8VY8yXlFJnktw5IASLJgDXCMlrZwnAo1o4iqL/tdY+g7EcrGcrXL9UKm02Qxo4D+SZuB9vTu5vrb0EwLrobDo9RaRO8uQ51lYzoX0rjkh+NC7gLIlTqtXq9XNlOocAlonL3Xx/eKqUer3W+kI0q/vmPbClpvjgCwAOcymSOiZmtLckLYCrq9XqI5jdSh41MjLyOIAfuTJG37WTkoyUUi+fJRN+RsBbLpdfQvJ3aHbkdFLn7QnN747j+Fqs2rLYreD12vdHJJ8fCNqiiFzhLIm55KGyAGCt/RvGWFAbaN1F5ivG6iT3LpfL66ELhsarKYAkQnP2zv+QLGKM5TGc8eordrxJqQD8eg7AI2gSBPynEy5Rzg/ecxYtgNUxJdNyufwSpdR5TqJnHT4n3xiyudb6LUGwzGvubhwVotz9flopdah7T77y6YY4jg8O9o/MIYBVrVa7G8C7AVTd3g5z8+NojkmWROQ7bl71vOeGo6nebJqmVxUKhSKAXUlqjG9FG63ocdHE2+I4Pt5pa5llAKssy54qFAp7KqWeg/GsHqU0Tf+ri4I7Cs1xKHuQvAhABePb9joBMNAc1Pa6QqGwY6FQKJRKpScajcZK5Oqtu0RYZVrro6Io+kZuxI0F8OY0Te/C/Ix8FQBM0/Q6N53xMZLWTbowwR5aCeAGAJ9PkuRT3WTWTGs5rqQjReRFIvJc95Kq7gE8DeBvSqmvuIDEXNSS+rGW/6aU+mPOvMmUUrt3SUWNAoD+/v5lWZZdjyady+pQqErQ/bRcRC4leWYcx78DMJIz1+083Lvnkt7TBTP9e/H53guSJHkl5j9vPc507+vrWz9N0+cqpdZCs8HkIecKdp1fsto3OzAwsExEODw8nKBZRJA/h8whOKwx5jIAB3jzp8UQs3nfKMaYn5N8wxTKJCcL5AHjmyXuBfArAL9yfnIWnH+uzFQC4JIlS9ZqNBrXYHyxje/xfb5jw+wG9kcVCHjbLpiFLmKp5AzcbCuHf6LfzYWpdoCjEh3tyrHWXpgkycHzrIEjNIv3DwZw/gyBN28O2hDMrk3xJgA/A/DTJEnun0PB6iPsJyqlvhDcb8Pxnp0Sx/En0Z0E6iHlUJ6AAosBwO2OM9836UF8vlLq4GDT1ERkG7eB5wPEfkMUjTF/A/AcdJYu8nnmMMps0ZowLx+zGKXzdWB+huSXq9XqFzB+wPesad+lS5f2V6vV210/s88MFK21v0mS5DXo8rGu3b5mKjLcdRKK5GeD9rSUZJnkq2b4vqeqjTKt9ZdJbovJZxv7Vj6SLLhaZ988Ef7fp81SjB8Qh8Cvtk6QrQXgVGPM7/v6+tbH7KZBIjQJGL6llNoIYzXbRWvtNSLyfqxKctBb86SBu1EwWa3175VSL/GMGiJyW5IkO89DMKeIZt34O0TkdIy1/bXSmpIzfx9z7sClInKziPQrpbYWkQMB7EtyIwSkeM7/zR8zNAVTZ77eUiqVDhwaGhqaBeHrA4r/HkXRdwM2TQK4v1Ao7O7GlnRli14PwPO/Ci5QdCjJX/oN5FrUOp3EN1PPtwCgUS6X36mU+h+M5RTZwnf1wF0hIn8A8KtisXix2+ytVl+lUtkKwLNEZHM02S83dMGiddBkRSlh1bK/ustnnhzH8UkzHNhTaJbbbkryFjRTZOF97h/H8dXo/m6pHoDn+b4EwBKt9V0k13ebJUKTHG13jBU+zJb5Njok2hhzHMnTnEmfB28WAPdOAKeLyNm5tsQoF3QKa7Dbav1SqbR5FEWnAjgsp4m91rsjjuNdsPrdWqtoX2PMD0ke5Ux3P0Xh20mSvLsH3h6Ap7KRfkHy9YEWjkTki3Ecf3QWtbA/bqS1/hrJ43OBp1Fz2V3PkIh8PkmSb8HR1GI8d7NMFCjCqpMfPEClXC5voZS6C+M7sgTNWuqHkyR5Djpj7OzYdSmVSltHUXQrxoo1ICLLkyTZwt1fV0Z01+QgVjcLp18GGzxyQP5wpVLZBatXQDGh+V4ul59tjPmjUioPXq85FZq8Vb/OsmxPx/tUxRiLhg9iTUaDa3NBrPBvVK1WewTAQzmAeoA/PIPgHd1PSqnXuCBbhmbBhiJ5+gyfq7cWOYAzAIzj+Dxr7Q0IChicL/zhGbZAvL+bViqV3ZRSF5E80AXQQoYSus39dwCHJEny2nq9/o8AuDPVEujBnYjIM/nfkYQjeMcsCLHROgAXMLs7juPP94JWPQBPdQMrAHWl1NsxxpxBF919LmaGyI2BqZhWKpVXisilALZx/l8x0IoKTWaSk+I43scF08K5v7OhmdjCTVAiYkXkf2fQ9x0VmlEU/cBa+1eSZaflj8BYWWdP+/bWlE1aaK2/XalUxBjTMMZYY8xIuVx+NqY/LMyzcMAd/1mVSuXbxhhxX6kxJjPGWHdeMcbcVKlUdssdY7ZdCGWMudOdP3P3LlrrxzEWIeYsnLdgjNm7r69vvTVAWfQ08CwuCzeLWER8D3Pmpv99EFNnVmCg1dKBgYFljkr3rwDeGWh1klRO4/9CRA6I43j3arXqzXliDsoHK5XK+gA2CrWx69O+Cs1JB2qGtaJ/nmkcx1e7Pu2e6dwD8OoBuF6v3ykiv3cVD+IYGA7v7+9fF2Olip08LwEglUrlZVrr0xqNxo0kv0lyIxcg8+kaJSKXAXh1HMdvdBS43h+ei9JBLzz2IdmP8eWYCsDP0Vkp5+qAOOyr7a0egFdvM5M8IzBdM6XUsjRNj+nQnPXTEQrGmB8BuEgpdRzJjQPgWhegeprkq+I4PiiO499ifJP9XG1mH+3dOxfUUtba65MkOR+z21kj6NU49wA8g8EVieP4DyJyn79vp4WPDgJNbcEPoLF06dIlxpgzSR4pIqkLUo3mXF3E9c9KqYOq1er5AXDtHG9mb573A3idK61U7hqplPo2gBWzYD73Vg/As6YNCgBiEfkdyXCM5LbGmF3QmpzPg49a68PjOL6S5GEOuF6jKqd1I2vtt+I4frEbUl7ALIzh7HBFAKC1fh3JrQPhEYnIFdVq9Ux0Zwtfb/UAPCGIoZQ6PzAvUwfmzVt8vgAgK5VKz3EFGWcC2D6cPOGAWxWRXwJ4bZIkxwd+bjrP9yoA3hRoWCEJa+3/olkw0iuoWASrsAbdqwXAarV6iTHmbj+/2M0tviMEuQdgqVR6eRRFPya5zGldFfxeHIneaW5+T6ix5zNo40tI9wHwonD8qYjYQqFwQ61W6wWWehp4QWpgopk6eYuI3ArgThE52pm8PtXhWxHfEEXRBQCWhSNOnNa9DcChSZIc78AbBSZpV2g1EfmYY1gMe36ViEQ9zdtbC3mFA7rzI1cIAIODg2trrZ8OCjLSoEDjFAA6sGC6SQgqADDG7OEKVrLguhuVSkXK5fIxa6D11dPAi0wTe23rNWvYpodarTZActD5sX7y33IReXMcx59AsxzSzz62Xfg+3+EmG65ybUqpg3LuQm/1ALww/WGsWg3lB3o/JCK/ciAoiMj51tq9kyTx0ds5qaKahmWRotnA/5IgdYTAfIaI7IxeccWiMyd7a/wzETQLNl4LIHHFGEB3p148jc2xURSd0WI0qe8BXlEoFLZ0A8d7kegFvnp+UGsTG2jW8v4yADWxAPKmJF/ZxkQmmtVnS7IsOxDAOYEb0Fs9E3pRauJC4CN3+8xdT83z3ICNc1Xp1DStT0CvwaAH4DVAE6dYGNVKYWDuHtcFlbYzs0nuq7U+AlObx9RbPQD31qwjWeRdInIDST89chVTWkSE5KcxNlStFwvpAbi35nlZAEiS5P44jg8UkZ+7KHo4JtODNQWwZblc3g+z11LYWz0A99Y0TemROI7fJCLvFpGHMVa04mu4iwBGCoXC4+hFohf06plOi/e9EoDt6+tbT0QOsdbuCmAfB+J/AvhqkiRXohfMWtDr/wPjbbQHDX3y7gAAAABJRU5ErkJggg==)}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}body{margin:0;padding:0}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* Layout: CNS house system. A dark ink sidebar on desktop holds the studio mark, the sections and the running timer;
   the working column carries a sticky search bar and one ruled page at a time. On phones the sidebar folds into a top bar
   with a scrolling section strip. Paper, ink and Helvetica, uppercase tracked labels, /// markers, 2px ink rules. */
:root {
  --paper: #F4F4EF; --surface: #FFFFFF; --ink: #090909; --text: #1E1E1C; --muted: #5B5B54; --line: #D6D6CE; --soft: #EAEAE3;
  --on-ink: #F4F4EF; --side: #0E0E0D; --side-text: #CFCFC7; --side-mute: #85857D; --side-line: #262624; --side-hi: #F4F4EF;
  --paid: #1F6B3A; --paid-bg: #E2EFE5; --due: #7A5000; --due-bg: #F7ECD2; --stop: #A12B1C; --stop-bg: #F6E1DD;
  --info: #2F5F94; --info-bg: #E1EAF4; --scrim: rgba(9, 9, 9, 0.42);
  --doc-paper: #FFFFFF; --doc-ink: #090909; --doc-text: #222222; --doc-muted: #555555; --doc-rule: #CCCCCC; --doc-box: #F4F4EF; --doc-shadow: rgba(9, 9, 9, 0.12);
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --sidew: 224px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #0F0F0E; --surface: #181816; --ink: #F4F4EF; --text: #E4E4DE; --muted: #A2A29A; --line: #30302B; --soft: #222220;
  --on-ink: #0F0F0E; --side: #070707; --side-text: #CFCFC7; --side-mute: #7A7A73; --side-line: #1F1F1D; --side-hi: #F4F4EF;
  --paid: #86D39F; --paid-bg: #16301F; --due: #E8BC63; --due-bg: #33270F; --stop: #F08C7C; --stop-bg: #3A1A15;
  --info: #8DB4E2; --info-bg: #182536; --scrim: rgba(0, 0, 0, 0.62);
  --doc-shadow: rgba(0, 0, 0, 0.5); color-scheme: dark; } }
:root[data-theme="dark"] {
  --paper: #0F0F0E; --surface: #181816; --ink: #F4F4EF; --text: #E4E4DE; --muted: #A2A29A; --line: #30302B; --soft: #222220;
  --on-ink: #0F0F0E; --side: #070707; --side-text: #CFCFC7; --side-mute: #7A7A73; --side-line: #1F1F1D; --side-hi: #F4F4EF;
  --paid: #86D39F; --paid-bg: #16301F; --due: #E8BC63; --due-bg: #33270F; --stop: #F08C7C; --stop-bg: #3A1A15;
  --info: #8DB4E2; --info-bg: #182536; --scrim: rgba(0, 0, 0, 0.62);
  --doc-shadow: rgba(0, 0, 0, 0.5); color-scheme: dark; }

* { box-sizing: border-box; }
html, body { background: var(--paper); }
body { color: var(--text); font-family: var(--sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.num, .tab-nums { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- app frame ---------- */
.app { display: grid; grid-template-columns: var(--sidew) minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: env(safe-area-inset-top, 0px); height: calc(100vh - env(safe-area-inset-top, 0px)); background: var(--side); color: var(--side-text);
  display: flex; flex-direction: column; padding: 16px 12px 14px; gap: 18px; overflow-y: auto; z-index: 30; }
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px; color: var(--side-hi); text-decoration: none; border: 0; background: none; text-align: left; }
.mark { flex: none; width: 46px; height: 30px; background: var(--side-hi); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.brand-t { font-weight: 700; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.15; }
.brand-t small { display: block; font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--side-mute); font-size: 11.5px; }
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav-h { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--side-mute); padding: 10px 10px 4px; font-weight: 700; }
.nav a, .nav button { display: flex; align-items: center; gap: 10px; border: 0; background: none; color: var(--side-text); text-decoration: none;
  padding: 7px 10px; border-radius: 2px; font-size: 13.5px; font-weight: 600; text-align: left; width: 100%; }
.nav a:hover, .nav button:hover { background: var(--side-line); color: var(--side-hi); }
.nav [aria-current="page"] { background: var(--side-hi); color: #090909; }
.nav svg { width: 16px; height: 16px; flex: none; }
.nav .cnt { margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--side-mute); font-weight: 700; }
.nav [aria-current="page"] .cnt { color: #55554F; }
.nav .lock { margin-left: auto; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--side-mute); }
.side-foot { margin-top: auto; display: grid; gap: 10px; }
.me { display: flex; align-items: center; gap: 9px; padding: 8px 6px 0; border-top: 1px solid var(--side-line); font-size: 12.5px; }
.me b { color: var(--side-hi); display: block; font-size: 13px; }
.me span { color: var(--side-mute); font-size: 11.5px; }
.timer { display: flex; align-items: center; gap: 8px; background: var(--side-line); border-radius: 2px; padding: 8px 10px; font-size: 12px; color: var(--side-hi); }
.timer .t { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; }
.timer .w { min-width: 0; flex: 1; }
.timer .w span { display: block; color: var(--side-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timer button { border: 1px solid var(--side-mute); background: none; color: var(--side-hi); border-radius: 2px; padding: 3px 8px; font-size: 11px; font-weight: 700; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: #E0503C; flex: none; }
@media (prefers-reduced-motion: no-preference) { .pulse { animation: pulse 1.6s ease-in-out infinite; } }
@keyframes pulse { 50% { opacity: .35; } }

.col { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--paper); border-bottom: 2px solid var(--ink); }
.top-in { display: flex; align-items: center; gap: 10px; padding: 10px 24px; max-width: 1400px; margin: 0 auto; width: 100%; }
.top .mob { display: none; }
.search { position: relative; flex: 1; max-width: 460px; }
.top .search input { width: 100%; padding: 8px 10px 8px 32px; background: var(--surface); border: 1px solid var(--line); border-radius: 2px; }
.search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); }
.results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--ink); border-radius: 2px; z-index: 50; max-height: 60vh; overflow: auto; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.results button { display: flex; width: 100%; gap: 10px; align-items: baseline; border: 0; background: none; text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.results button:hover, .results button:focus { background: var(--soft); }
.results .rk { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 700; width: 64px; flex: none; }
.top .sp { flex: 1; }
.iconbtn { flex: none; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); color: var(--ink); }
.iconbtn:hover { border-color: var(--ink); }
.iconbtn svg { width: 17px; height: 17px; }
.menu { position: absolute; right: 0; top: calc(100% + 4px); min-width: 200px; background: var(--surface); border: 1px solid var(--ink); border-radius: 2px; z-index: 50; padding: 4px 0; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.menu button { display: flex; gap: 10px; align-items: center; width: 100%; border: 0; background: none; padding: 8px 14px; text-align: left; font-weight: 600; font-size: 13px; }
.menu button:hover { background: var(--soft); }
.menu svg { width: 15px; height: 15px; }
.rel { position: relative; }

main#view { padding: 24px 24px 64px; max-width: 1400px; margin: 0 auto; width: 100%; min-width: 0; }

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; }
  .sidebar { position: sticky; height: auto; flex-direction: row; align-items: center; padding: 8px 12px; gap: 10px; overflow: visible; }
  .sidebar .nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; flex: 1; gap: 2px; }
  .sidebar .nav::-webkit-scrollbar { display: none; }
  .nav-h, .brand-t, .side-foot .me { display: none; }
  .nav a, .nav button { width: auto; white-space: nowrap; padding: 7px 10px; font-size: 13px; }
  .nav .cnt, .nav .lock { display: none; }
  .side-foot { margin: 0; display: flex; }
  .side-foot .timer { padding: 5px 8px; }
  .side-foot .timer .w { display: none; }
  .top { top: calc(env(safe-area-inset-top, 0px) + 50px); }
  .top-in { padding: 8px 16px; }
  main#view { padding: 18px 16px 56px; }
}

/* ---------- page heads ---------- */
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); }
.head > div:first-child { min-width: 0; }
h1.ttl { font-size: clamp(28px, 4.6vw, 44px); line-height: 0.95; font-weight: 700; letter-spacing: -0.03em; text-transform: uppercase; margin: 0; text-wrap: balance; color: var(--ink); }
.lede { color: var(--muted); margin: 8px 0 0; max-width: 64ch; }
.crumb { font-size: 12px; color: var(--muted); margin-bottom: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.crumb button { border: 0; background: none; padding: 0; color: var(--muted); text-decoration: underline; }
h2.sec { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0; color: var(--ink); display: flex; gap: 10px; align-items: baseline; font-weight: 700; }
h2.sec small { font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--muted); font-size: 12px; }
.sec-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 2px solid var(--ink); padding-top: 10px; margin-bottom: 10px; }
.block { margin-bottom: var(--s6); }
.kind { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; }
.kind::before { content: "///"; letter-spacing: -0.1em; margin-right: 6px; color: var(--muted); font-weight: 400; }
.k { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.sub { font-size: 12px; color: var(--muted); }
.code { font-weight: 700; letter-spacing: 0.08em; color: var(--ink); font-size: 10.5px; border: 1px solid var(--ink); padding: 0 5px; border-radius: 2px; font-family: var(--sans); white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.ref { font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- buttons, chips, segmented ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ink); background: var(--surface); color: var(--ink); padding: 7px 13px; font-weight: 700; font-size: 13px; border-radius: 2px; white-space: nowrap; text-decoration: none; }
.btn svg { width: 15px; height: 15px; }
.btn.primary { background: var(--ink); color: var(--on-ink); }
.btn.quiet { border-color: var(--line); background: transparent; color: var(--text); font-weight: 600; }
.btn.quiet:hover { border-color: var(--ink); }
.btn.danger { border-color: var(--stop); color: var(--stop); background: transparent; }
.btn.sm { padding: 4px 9px; font-size: 12px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); padding: 4px 9px; font-size: 12px; border-radius: 2px; font-variant-numeric: tabular-nums; color: var(--text); }
button.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.seg { display: inline-flex; border: 1px solid var(--ink); border-radius: 2px; overflow: hidden; flex-wrap: wrap; }
.seg button { border: 0; border-right: 1px solid var(--line); background: var(--surface); padding: 6px 12px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.seg .n { font-weight: 400; margin-left: 5px; font-variant-numeric: tabular-nums; }
.tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: var(--s4); }
.tabs button { border: 0; background: none; padding: 8px 12px; font-weight: 700; font-size: 13px; color: var(--muted); box-shadow: inset 0 -2px 0 transparent; }
.tabs button[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.tabs .n { font-weight: 400; margin-left: 4px; font-variant-numeric: tabular-nums; }
.x { border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; padding: 4px; }
.x:hover { color: var(--stop); }
.add { border: 1px dashed var(--line); background: none; padding: 7px; font-size: 12px; font-weight: 700; color: var(--muted); border-radius: 2px; }
.add:hover { border-color: var(--ink); color: var(--ink); }
.linkbtn { border: 0; background: none; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: inherit; text-align: left; }

/* ---------- pills, dots, avatars, bars ---------- */
.pill { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 2px; white-space: nowrap; border: 1px solid transparent; line-height: 1.5; }
.pill.paid, .pill.good { color: var(--paid); background: var(--paid-bg); }
.pill.unpaid, .pill.due, .pill.warn { color: var(--due); background: var(--due-bg); }
.pill.stop, .pill.bad { color: var(--stop); background: var(--stop-bg); }
.pill.info { color: var(--info); background: var(--info-bg); }
.pill.ink, .pill.active { color: var(--on-ink); background: var(--ink); }
.pill.line, .pill.proposal, .pill.rec { color: var(--muted); border-color: var(--line); }
.pill.soft, .pill.complete { color: var(--muted); background: var(--soft); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.sq { display: inline-block; width: 9px; height: 9px; border-radius: 2px; flex: none; }
.av { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 10px; font-weight: 700; color: #FFFFFF; flex: none; letter-spacing: 0.02em; overflow: hidden; border: 2px solid var(--surface); }
.av img { width: 100%; height: 100%; object-fit: cover; }
.av.lg { width: 36px; height: 36px; font-size: 13px; }
.av.xs { width: 18px; height: 18px; font-size: 8px; border-width: 1px; }
.avs { display: inline-flex; }
.avs .av + .av { margin-left: -7px; }
.bar { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--ink); border-radius: 3px; }
.bar.good > i { background: var(--paid); } .bar.warn > i { background: var(--due); } .bar.bad > i { background: var(--stop); }

/* ---------- summary strip ---------- */
.sum { display: flex; flex-wrap: wrap; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); margin-bottom: var(--s5); }
.sum > div { padding: 12px 20px 12px 0; margin-right: 20px; border-right: 1px solid var(--line); min-width: 0; }
.sum > div:last-child { border-right: 0; margin-right: 0; }
.sum .v { font-size: 21px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1.25; }
.sum .v.bad { color: var(--stop); }
.sum .n { font-size: 12px; color: var(--muted); }

/* ---------- forms ---------- */
.fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fld label, .lab { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
input[type=text], input[type=number], input[type=date], input[type=month], input[type=time], input[type=search], input[type=url], input[type=email], input:not([type]), select, textarea {
  background: var(--surface); border: 1px solid var(--line); border-radius: 2px; padding: 8px 10px; width: 100%; min-width: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 1px var(--ink); }
textarea { resize: vertical; line-height: 1.5; min-height: 80px; }
input[type=checkbox], input[type=radio] { accent-color: var(--ink); }
.hint { font-size: 12px; color: var(--muted); }
.form { display: grid; gap: var(--s3); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.checks { display: flex; gap: var(--s3); flex-wrap: wrap; font-size: 13px; }
.checks label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.picks { display: flex; flex-wrap: wrap; gap: 6px; }
.picks label { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); background: var(--surface); padding: 5px 10px 5px 6px; border-radius: 20px; cursor: pointer; font-size: 12.5px; font-weight: 600; }
.picks input { position: absolute; opacity: 0; pointer-events: none; }
.picks label:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.picks label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.status { font-size: 12.5px; color: var(--muted); min-height: 1.2em; }
.status.bad { color: var(--stop); }

/* ---------- notes, panels, empties ---------- */
.note { background: var(--soft); border-left: 3px solid var(--ink); padding: 10px 14px; font-size: 13px; color: var(--text); margin-bottom: var(--s4); }
.note.warn { border-left-color: var(--due); background: var(--due-bg); }
.note.bad { border-left-color: var(--stop); background: var(--stop-bg); }
.note.good { border-left-color: var(--paid); background: var(--paid-bg); }
.note .btn-row { margin-top: 8px; }
.panel { background: var(--surface); border: 1px solid var(--line); padding: var(--s4); border-radius: 2px; min-width: 0; }
.empty { border: 1px dashed var(--line); border-radius: 2px; padding: 26px 18px; text-align: center; color: var(--muted); font-size: 13px; }
.empty b { display: block; color: var(--ink); font-size: 14px; margin-bottom: 4px; }
.empty .btn-row { justify-content: center; margin-top: 12px; }
.cols2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.cols-side { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s5); align-items: start; }
@media (max-width: 1080px) { .cols-side { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .cols2, .grid2, .grid3, .grid4 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- lists and tables ---------- */
.scroll-x { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--ink); white-space: nowrap; }
.tbl td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr.row { cursor: pointer; }
.tbl tr.row:hover td { background: var(--soft); }
.tbl td.r, .tbl th.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rows { display: grid; border-top: 1px solid var(--ink); }
.rw { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.rw.click { cursor: pointer; }
.rw.click:hover { background: var(--soft); }
.rw .main { flex: 1; min-width: 0; }
.rw .t { font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw .m { font-size: 12px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.done .t, .t.done { text-decoration: line-through; color: var(--muted); }

/* ---------- cards and kanban ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s3); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 2px; padding: 14px; min-width: 0; display: grid; gap: 6px; align-content: start; }
button.card { text-align: left; }
.card:hover { border-color: var(--ink); }
.card h3 { margin: 0; font-size: 15.5px; letter-spacing: -0.01em; color: var(--ink); }
.kb { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.kb-col { background: var(--soft); border-radius: 2px; padding: 8px; min-height: 120px; display: grid; gap: 8px; align-content: start; }
.kb-col.over { outline: 2px dashed var(--ink); outline-offset: -2px; }
.kb-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 4px 4px; }
.kb-h b { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); display: flex; gap: 7px; align-items: center; }
.kb-h span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.kb-card { background: var(--surface); border: 1px solid var(--line); border-radius: 2px; padding: 10px; display: grid; gap: 6px; cursor: grab; text-align: left; }
.kb-card:hover { border-color: var(--ink); }
.kb-card.dragging { opacity: .45; }
.kb-card .t { font-weight: 700; color: var(--ink); font-size: 13.5px; line-height: 1.3; }
.kb-card .m { font-size: 11.5px; color: var(--muted); display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }

/* ---------- modal and drawer ---------- */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.scrim.side { justify-content: flex-end; padding: 0; align-items: stretch; }
.dlg { background: var(--paper); border: 1px solid var(--ink); border-radius: 2px; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.dlg.wide { max-width: 860px; }
.scrim.side .dlg { max-width: 640px; max-height: none; height: 100%; border-width: 0 0 0 2px; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.dlg-h { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; border-bottom: 2px solid var(--ink); }
.dlg-h h3 { margin: 0; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); line-height: 1.2; flex: 1; min-width: 0; }
.dlg-h .k { display: block; margin-bottom: 3px; }
.dlg-b { padding: 16px 18px; overflow-y: auto; flex: 1; min-height: 0; }
.dlg-f { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.dlg-f .sp { flex: 1; }
@media (max-width: 640px) { .scrim { padding: 0; align-items: stretch; } .dlg { max-height: none; height: 100%; border-width: 0; } }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); transform: translateX(-50%); background: var(--ink); color: var(--on-ink); padding: 10px 16px; font-weight: 700; font-size: 13px; border-radius: 2px; z-index: 200; max-width: calc(100vw - 32px); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.toast.bad { background: var(--stop); color: #FFFFFF; }

/* ---------- skeleton ---------- */
.skel { background: var(--soft); border-radius: 2px; height: 14px; }
@media (prefers-reduced-motion: no-preference) { .skel { animation: pulse 1.4s ease-in-out infinite; } }

/* ---------- the A4 sheet (shared by Jobs) ---------- */
.sheetwrap { position: relative; width: 100%; overflow: hidden; }
.sheet { width: 794px; transform-origin: top left; background: var(--doc-paper); box-shadow: 0 1px 2px var(--doc-shadow), 0 10px 30px var(--doc-shadow); color-scheme: light; }

/* ---------- synced copies (two-app split) ---------- */
.ro-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--line); border-left: 3px solid var(--ink); background: var(--surface);
  padding: 9px 12px; margin: 0 0 var(--s4); font-size: 13px; color: var(--muted); border-radius: 2px; }
.ro-bar svg { width: 16px; height: 16px; flex: none; color: var(--ink); }
.ro-bar span { flex: 1; min-width: 200px; }
.ro-bar b { color: var(--ink); }
.ro-inert { cursor: default !important; }
.ro-off, .ro-form input:disabled, .ro-form select:disabled, .ro-form textarea:disabled { opacity: 1; cursor: default; }
.sync-l { display: flex; align-items: flex-start; gap: 7px; font-size: 11.5px; color: var(--side-mute); padding: 0 6px; line-height: 1.4; }
.sync-l svg { width: 13px; height: 13px; flex: none; margin-top: 1px; }
.sync-l span { flex: 1; min-width: 0; }
.sync-l a { display: block; color: var(--side-hi); font-weight: 700; text-decoration: none; white-space: nowrap; margin-top: 2px; }
.sync-l a:hover { text-decoration: underline; }
@media (max-width: 900px) { .sync-l { display: none; } }
.ro-form.wk-qa, .ro-form.wk-ckadd, .ro-form.wk-log { display: none !important; }
.ro-off:disabled, .ro-form input:disabled, .ro-form select:disabled, .ro-form textarea:disabled { background: transparent !important; color: var(--text) !important; -webkit-text-fill-color: var(--text); }

/* ===== home ===== */
/* Home: greeting, money strip, my work, the studio's next seven days */
.hm-skel { display: grid; gap: 12px; }
.hm-skel .h1 { width: 320px; max-width: 80%; height: 40px; }
.hm-skel .l { width: 420px; max-width: 90%; margin-bottom: 16px; }
.hm-skel .row { height: 40px; margin-bottom: 6px; }
.hm-skel .box { height: 150px; }
.hm-skg { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s5); margin-bottom: 18px; }
.hm-skw { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.hm-skw .col, .hm-skcol { height: 150px; }
.hm-skl { display: grid; gap: 8px; padding: 6px 0; }
.hm-skl .skel:nth-child(2) { width: 80%; }
.hm-skl .skel:nth-child(3) { width: 60%; }
.skel.hm-sk { display: block; width: 110px; height: 22px; margin: 2px 0; }
@media (max-width: 1080px) { .hm-skg { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .hm-skw { grid-template-columns: minmax(0, 1fr); } .hm-skw .col { height: 56px; } }

.hm-date { color: var(--ink); font-weight: 700; }

/* money strip */
.hm-money { margin-bottom: var(--s5); }
.hm-money .sum { margin-bottom: 0; }
.hm-money .sum .v { font-size: 19px; }
.hm-mv { display: block; white-space: nowrap; }
.hm-fwait { font-size: 13px; font-weight: 400; white-space: nowrap; }
.hm-mfoot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; padding: 6px 0 0; }
.hm-mfoot > .sub { display: inline-flex; gap: 5px; align-items: center; }
.hm-mfoot svg { width: 12px; height: 12px; }
.hm-links { display: inline-flex; gap: 14px; font-size: 12.5px; font-weight: 700; color: var(--ink); }

/* my work */
.hm-top { margin-bottom: var(--s2); }
@media (max-width: 1080px) { .hm-top > .hm-side { order: -1; margin-bottom: var(--s4); } }
.hm-side { display: grid; gap: var(--s3); }
.hm-bk { display: flex; gap: 8px; align-items: baseline; padding: 10px 0 4px; }
.hm-bk .k.bad { color: var(--stop); }
.hm-tl { display: grid; border-top: 1px solid var(--line); }
.hm-tr { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.hm-tr .main { flex: 1; min-width: 0; cursor: pointer; }
.hm-tr .main:hover .t { text-decoration: underline; }
.hm-tr .t { font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.hm-tr .m { font-size: 12px; color: var(--muted); display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-top: 1px; }
.hm-tr .m > span:not(.code):not(.pill) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.hm-tr .code { font-size: 9.5px; }
.hm-tr.done .t { text-decoration: line-through; color: var(--muted); }
.hm-due { flex: none; text-align: right; }
.hm-chk { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.5px solid var(--muted); background: var(--surface); display: grid; place-items: center; padding: 0; color: transparent; }
.hm-chk:hover { border-color: var(--ink); color: var(--muted); }
.hm-chk[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.hm-chk svg { width: 13px; height: 13px; }
.hm-quiet { margin: 10px 0 0; }
.hm-more { display: inline-block; margin-top: 8px; font-weight: 700; color: var(--ink); }
.hm-later { margin: 10px 0 0; }

/* timer and hours */
.hm-timer { display: grid; gap: 10px; }
.hm-timer.run { border-color: var(--ink); }
.hm-trun { display: flex; align-items: baseline; gap: 8px; }
.hm-trun .pulse { align-self: center; }
.hm-trun b { font-size: 28px; color: var(--ink); letter-spacing: -0.02em; line-height: 1; }
.hm-twhat { font-weight: 700; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.hm-twhat .linkbtn { text-decoration: none; }
.hm-twhat .linkbtn:hover { text-decoration: underline; }
.hm-hours { display: grid; gap: 10px; }
.hm-hh { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.hm-big { font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1.15; }
.hm-hbars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.hm-hb { display: grid; gap: 4px; justify-items: center; }
.hm-hb span { font-size: 10.5px; color: var(--muted); font-weight: 700; letter-spacing: 0.04em; }
.hm-hb.today span { color: var(--ink); }
.hm-hbt { width: 100%; height: 56px; background: var(--soft); border-radius: 2px; display: flex; align-items: flex-end; overflow: hidden; }
.hm-hbt i { display: block; width: 100%; background: var(--ink); min-height: 0; }
.hm-hb.rest .hm-hbt { background: transparent; border: 1px dashed var(--line); }
.hm-hb.today .hm-hbt { box-shadow: inset 0 0 0 1px var(--ink); }

/* studio week */
.hm-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
.hm-day { background: var(--surface); border: 1px solid var(--line); border-radius: 2px; padding: 9px; min-width: 0; display: grid; gap: 8px; align-content: start; }
.hm-day.today { border-color: var(--ink); box-shadow: inset 0 2px 0 var(--ink); }
.hm-dh { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.hm-dh b { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.hm-db { display: grid; gap: 10px; min-width: 0; align-content: start; }
.hm-ds { display: grid; gap: 4px; min-width: 0; }
.hm-ds > .k { font-size: 10px; }
.hm-ds > .k .num { color: var(--ink); margin-left: 3px; }
.hm-post { display: flex; align-items: center; gap: 5px; border: 0; background: none; padding: 1px 0; text-align: left; min-width: 0; font-size: 12px; color: var(--text); }
.hm-post .sq { width: 7px; height: 7px; }
.hm-pc { font-weight: 700; font-size: 10.5px; letter-spacing: 0.04em; color: var(--ink); white-space: nowrap; flex: none; }
.hm-pt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; color: var(--muted); }
.hm-post:hover .hm-pt { color: var(--ink); text-decoration: underline; }
.hm-load { display: grid; grid-template-columns: auto auto minmax(20px, 1fr); gap: 5px; align-items: center; font-size: 11.5px; color: var(--muted); }
.hm-load b { color: var(--ink); }
.hm-dl { border: 0; background: none; padding: 0; text-align: left; font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hm-dl:hover { color: var(--ink); text-decoration: underline; }
.hm-off { display: flex; align-items: center; gap: 5px; font-size: 12px; min-width: 0; flex-wrap: wrap; }
.hm-calm { font-size: 11.5px; }
@media (max-width: 1100px) and (min-width: 761px) { .hm-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .hm-week { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .hm-day { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 8px 10px; }
  .hm-dh { flex-direction: column; align-items: flex-start; justify-content: flex-start; align-self: start; gap: 0; border-bottom: 0; padding-bottom: 0; }
}

/* pitches and who is off */
.hm-when { width: 74px; flex: none; display: grid; line-height: 1.25; }
.hm-when b { color: var(--ink); }
@media (max-width: 760px) {
  .hm-money .sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  .hm-money .sum > div { margin-right: 0; padding: 10px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .hm-money .sum > div:last-child { border-bottom: 0; }
  .hm-money .sum > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hm-money .sum > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}
/* office: hours this week */
.hm-ths { display: grid; gap: 8px; }
.hm-th { display: grid; grid-template-columns: minmax(110px, 1.3fr) minmax(60px, 2fr) auto auto; align-items: center; gap: 10px; font-size: 13px; }
.hm-thn { display: flex; align-items: center; gap: 7px; min-width: 0; }
.hm-thn span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-th b { text-align: right; min-width: 52px; }
.hm-th .sub { text-align: right; min-width: 70px; }
.hm-thf { margin: 10px 0 0; }
/* office: sync button next to the greeting */
.of-syncl { align-self: center; font-size: 12.5px; max-width: 260px; text-align: right; }
@media (max-width: 760px) { .of-syncl { text-align: left; max-width: none; flex-basis: 100%; } }

/* ===== clients ===== */
/* Clients: account groups with brand rows aligned to stat columns; brand and account pages. */
.cl-tools { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: var(--s5); }
.cl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-chips .chip { font-weight: 600; }
.cl-chips .chip .n { color: var(--muted); font-weight: 400; margin-left: 2px; }
.cl-chips .chip[aria-pressed="true"] .n { color: inherit; opacity: .7; }
.cl-q { position: relative; flex: 1 1 220px; max-width: 340px; margin-left: auto; }
.cl-q svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.cl-q input { padding-left: 32px; }

.cl-grp { margin-bottom: var(--s6); }
.cl-gh, .cl-row { display: grid; grid-template-columns: minmax(0, 1fr) 118px 84px 104px 84px; gap: 12px; align-items: center; padding-left: 8px; padding-right: 8px; }
.cl-gh { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); padding-top: 10px; padding-bottom: 8px; padding-left: 0; padding-right: 8px; }
.cl-gn { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.cl-an { border: 0; background: none; padding: 0; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--ink); text-align: left; }
button.cl-an:hover { text-decoration: underline; text-underline-offset: 3px; }
.cl-ghb { align-self: center; }
.cl-ch { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; white-space: nowrap; }
.cl-ch.r { text-align: right; }
.cl-row { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); cursor: pointer; }
.cl-row:hover { background: var(--soft); }
.cl-bn { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cl-bn b { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cl-hdl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cl-stats { display: contents; }
.cl-n { text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; }
.cl-n b { color: var(--ink); }
.cl-n i { display: none; font-style: normal; color: var(--muted); }
.cl-n.z b { color: var(--muted); font-weight: 400; }
.cl-owe { font-size: 12px; color: var(--due); font-weight: 700; font-variant-numeric: tabular-nums; }
.cl-none { color: var(--muted); font-size: 13px; margin: 0; padding: 10px 0; }
.cl-pad { padding-left: 8px; }

/* brand and account pages */
.cl-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 12px; font-size: 13px; }
.cl-meta a { color: var(--ink); font-weight: 600; text-underline-offset: 2px; }
.cl-acc { display: inline-flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.cl-al { font-weight: 600; color: var(--ink); }
.cl-st select.pill { width: auto; min-width: 0; padding: 3px 24px 3px 8px; font-size: 10.5px; line-height: 1.5; cursor: pointer;
  -webkit-appearance: none; appearance: none; border: 1px solid transparent;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 12px) 52%, calc(100% - 8px) 52%; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; }
.cl-st select.pill.line { border-color: var(--line); background-color: var(--surface); }
.cl-st select.pill:focus { border-color: var(--ink); box-shadow: none; outline: 2px solid var(--ink); outline-offset: 1px; }
.cl-st select option { color: var(--text); background: var(--surface); text-transform: none; letter-spacing: 0; font-weight: 400; }
.cl-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.6; color: var(--text); }
.cl-gen { margin-top: 12px; }
.cl-list { display: grid; }
.cl-list .rw { padding: 9px 4px; }
.cl-list .rw .m { margin-top: 2px; }
.cl-list .ref { font-size: 13px; }
.cl-who { display: inline-flex; gap: 5px; align-items: center; }
.cl-date { flex: none; width: 92px; font-size: 12px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.cl-dl { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 9px 14px; margin: 0; font-size: 13.5px; }
.cl-dl dt { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding-top: 2px; }
.cl-dl dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.cl-dl a { color: var(--ink); }
.cl-swv { display: inline-flex; align-items: center; gap: 7px; }
.cl-tot { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 4px 0 10px; border-bottom: 1px solid var(--line); }
.cl-tot > div { display: grid; gap: 1px; }
.cl-tot b { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.cl-tot b.bad { color: var(--stop); }

/* colour swatches in the brand form */
.cl-sws { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-sw { position: relative; display: inline-grid; place-items: center; min-width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 2px; cursor: pointer; background: var(--surface); }
.cl-sw input { position: absolute; opacity: 0; pointer-events: none; }
.cl-sw i { width: 18px; height: 18px; border-radius: 2px; display: block; }
.cl-sw .cl-auto { font-size: 11.5px; font-weight: 700; padding: 0 8px; color: var(--muted); }
.cl-sw:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cl-sw:has(input:checked) .cl-auto { color: var(--ink); }
.cl-sw:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.cl-codein { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }

@media (max-width: 760px) {
  .cl-gh { grid-template-columns: minmax(0, 1fr); }
  .cl-gh .cl-ch { display: none; }
  .cl-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .cl-stats { display: flex; flex-wrap: wrap; gap: 2px 12px; grid-column: 1 / -1; padding-left: 17px; }
  .cl-n { text-align: left; font-size: 12px; }
  .cl-n i { display: inline; }
  .cl-n.z { display: none; }
  .cl-q { max-width: none; margin-left: 0; flex-basis: 100%; }
  .cl-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cl-dl dd { margin-bottom: 8px; }
  .cl-date { width: 76px; }
}

/* ===== pipeline ===== */
/* Pipeline: kanban by deal stage (scrolls inside its own strip), sortable list, deal modal. */
.pl-kb { grid-auto-columns: minmax(214px, 1fr); gap: 10px; padding-bottom: 12px; overscroll-behavior-x: contain; }
.pl-col { min-height: 180px; align-content: start; }
.pl-col .kb-h b { gap: 7px; }
.pl-tone { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: none; border: 1px solid var(--muted); }
.pl-tone.info { background: var(--info); border-color: var(--info); }
.pl-tone.warn { background: var(--due); border-color: var(--due); }
.pl-tone.good { background: var(--paid); border-color: var(--paid); }
.pl-tone.soft { background: var(--line); border-color: var(--line); }
.pl-card { gap: 7px; }
.pl-card .m { gap: 6px 10px; }
.pl-card .chip { padding: 2px 7px; font-size: 11.5px; }
.pl-pros .k { font-size: 9.5px; letter-spacing: .1em; margin-right: 2px; }
.pl-pd { display: inline-flex; align-items: center; gap: 4px; }
.pl-pd svg { width: 13px; height: 13px; flex: none; }
.pl-pd.soon { color: var(--ink); font-weight: 700; }
.pl-pd.late { color: var(--stop); font-weight: 700; }
.pl-next { font-size: 12px; color: var(--text); border-left: 2px solid var(--line); padding-left: 7px; line-height: 1.4; overflow-wrap: anywhere; }
.pl-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.pl-own { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-val { font-weight: 700; font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-drop { font-size: 12px; color: var(--muted); padding: 14px 6px; border: 1px dashed var(--line); border-radius: 2px; text-align: center; }
.pl-more { border: 0; background: none; padding: 2px 4px; font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; text-align: left; }
.pl-add { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.pl-add svg { width: 13px; height: 13px; }
.pl-closed { padding: 6px 11px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.pl-closed[aria-pressed="true"] { color: var(--on-ink); }
.pl-closed svg { width: 13px; height: 13px; }

/* list */
.pl-tbl { min-width: 760px; }
.pl-sort { border: 0; background: none; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; font-weight: inherit; }
.pl-sort:hover { color: var(--ink); }
th[aria-sort="ascending"] .pl-sort, th[aria-sort="descending"] .pl-sort { color: var(--ink); }
.pl-tt { min-width: 220px; }
.pl-tl { font-weight: 700; color: var(--ink); text-decoration: none; }
.pl-tl:hover { text-decoration: underline; }
.pl-tw { margin-top: 4px; }
.pl-tw .chip { padding: 2px 7px; font-size: 11.5px; }
.pl-nw { white-space: nowrap; }
.pl-ns { max-width: 280px; font-size: 13px; }

/* deal modal */
.pl-dm { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px 26px; align-items: start; }
.pl-prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.pl-prow > .btn { margin-top: 21px; }
.fld .pl-svc label { padding: 5px 10px; font-size: 12.5px; text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 600; }
.fld .pl-svc label:has(input:checked) { color: var(--on-ink); }
.pl-sec { border-top: 2px solid var(--ink); padding-top: 8px; display: grid; gap: 8px; margin-bottom: 18px; min-width: 0; }
.pl-sec h4 { margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 26px; }
.pl-sec h4 .sub { margin-right: auto; letter-spacing: 0; text-transform: none; font-weight: 400; }
.pl-none { margin: 0; font-size: 12.5px; color: var(--muted); }
.pl-deck { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.pl-deck .main { flex: 1; min-width: 0; }
.pl-deck a, .pl-deck b { display: block; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-underline-offset: 2px; }
.pl-deck .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-dki { color: var(--muted); display: inline-grid; }
.pl-dki svg { width: 16px; height: 16px; }
.pl-ib { flex: none; width: 30px; height: 30px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); color: var(--ink); padding: 0; }
.pl-ib:hover { border-color: var(--ink); }
.pl-ib.x { color: var(--muted); }
.pl-ib.x:hover { color: var(--stop); border-color: var(--stop); }
.pl-ib svg { width: 15px; height: 15px; }
.pl-addlink { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.pl-addlink [data-dk="label"] { grid-column: 1 / -1; }
.pl-v { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 8px; }
.pl-chk { display: inline-flex; gap: 7px; align-items: center; font-size: 13px; cursor: pointer; }
.pl-rw { padding: 7px 0; gap: 8px; }
.pl-rw .m .k { font-size: 10px; }
.pl-saved { font-size: 12px; }
.pl-wns { display: grid; border-top: 1px solid var(--ink); }
.pl-wn { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pl-wn .main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.pl-wn b { color: var(--ink); }

@media (max-width: 760px) {
  .pl-dm { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .pl-kb { grid-template-columns: none !important; grid-auto-columns: minmax(232px, 78vw); }
  .pl-prow { grid-template-columns: minmax(0, 1fr); }
  .pl-prow > .btn { margin-top: 0; justify-self: start; }
  .dlg-f .pl-saved { display: none; }
}

/* ===== work ===== */
/* Work: monday-style tables, board, calendar, projects and the task drawer, in the CNS house style.
   Groups carry a coloured left rule; rows sit on surface paper; everything collapses to two lines in narrow containers. */
.wk { min-width: 0; }
.wk-tabrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: var(--s3); }
.wk-tabrow .tabs { border-bottom: 0; margin-bottom: 0; }
.wk-tabx { padding-bottom: 6px; }
@media (max-width: 760px) {
  .wk-tabrow { flex-wrap: nowrap; }
  .wk-tabrow .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; }
  .wk-tabrow .tabs::-webkit-scrollbar { display: none; }
  .wk-tabrow .tabs button { white-space: nowrap; padding: 8px 10px; }
}
.wk-skel { display: grid; gap: 10px; max-width: 720px; }

/* ---------- toolbar ---------- */
.wk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--s4); }
.wk-search { position: relative; flex: 1 1 160px; min-width: 140px; max-width: 300px; }
.wk-search svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--muted); pointer-events: none; }
.wk-search input[type=search] { padding: 6px 10px 6px 29px; font-size: 13px; }
.wk-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 0 1 auto; min-width: 0; }
select.wk-fs { width: auto; max-width: 150px; padding: 5px 26px 5px 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
select.wk-fs.on { border-color: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.wk-gb { display: inline-flex; align-items: center; gap: 6px; }
.wk-gb-m { display: none; }
.wk-gb > span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; white-space: nowrap; }
.wk-gb select.wk-fs { color: var(--ink); }
.wk-clear { font-size: 12.5px; color: var(--muted); }
.wk-ftog { display: none; }
.wk-fn { display: inline-grid; place-items: center; min-width: 17px; height: 17px; border-radius: 9px; background: var(--ink); color: var(--on-ink); font-size: 10.5px; margin-left: 2px; }
@media (max-width: 760px) {
  .wk-search { flex: 1 1 160px; }
  .wk-ftog { display: inline-flex; }
  .wk-filters { display: none; flex-basis: 100%; }
  .wk-filters.open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-filters select.wk-fs { max-width: none; width: 100%; }
  .wk-gb-d { display: none; }
  .wk-gb-m { display: flex; grid-column: 1 / -1; }
  .wk-gb-m select.wk-fs { flex: 1; }
  .wk-clear { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- grouped task table ---------- */
.wk-tbl { container: wktbl / inline-size; --wk-cols: 28px minmax(170px, 1fr) 118px 66px 82px 72px minmax(84px, 128px) 60px 40px; }
.wk-hr, .wk-row { display: grid; grid-template-columns: var(--wk-cols); column-gap: 10px; align-items: center; }
.wk-hr { padding: 0 0 6px 6px; border-bottom: 2px solid var(--ink); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.wk-hr .r, .wk-row .wk-c-h, .wk-row .wk-c-f { text-align: right; }
.wk-g { margin-top: 14px; }
.wk-gh { display: flex; align-items: center; gap: 10px; padding: 4px 0 6px; flex-wrap: wrap; }
.wk-gt { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 2px 0; color: var(--ink); text-align: left; }
.wk-gl { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.wk-gh > .wk-gl { padding-left: 2px; border-left: 3px solid var(--gc); padding-left: 8px; }
.wk-car { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--gc, var(--ink)); transition: transform .12s; }
.wk-gt[aria-expanded="false"] .wk-car { transform: rotate(-90deg); }
.wk-gn { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wk-gk { font-size: 12px; color: var(--muted); }
.wk-rows { border-left: 3px solid var(--gc, var(--line)); background: var(--surface); border-top: 1px solid var(--line); }
.wk-row { padding: 5px 8px 5px 6px; border-bottom: 1px solid var(--line); min-height: 44px; cursor: pointer; }
.wk-row:hover { background: var(--soft); }
.wk-row > *, .wk-meta > * { min-width: 0; }
.wk-meta { display: contents; }
.wk-c-title { min-width: 0; }
.wk-tl { display: block; max-width: 100%; border: 0; background: none; padding: 0; text-align: left; font-weight: 700; color: var(--ink); font-size: 13.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-tl:hover { text-decoration: underline; text-underline-offset: 2px; }
.wk-sub { display: flex; flex-wrap: wrap; gap: 4px 9px; align-items: center; font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.wk-sub .code { font-size: 9.5px; padding: 0 4px; }
.wk-sub svg, .wk-c-h svg, .wk-c-f svg, .wk-card .m svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 3px; }
.wk-ck.all { color: var(--paid); }
.wk-c-h, .wk-c-f { font-size: 12px; color: var(--muted); white-space: nowrap; }
.wk-c-br .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; padding: 2px 7px; font-size: 11.5px; }
.wk-c-ppl .sub { font-size: 11.5px; }
.wk-row.is-done .wk-tl { text-decoration: line-through; color: var(--muted); font-weight: 600; }
.wk-tick { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--muted); background: var(--surface); display: grid; place-items: center; padding: 0; color: transparent; }
.wk-tick svg { width: 12px; height: 12px; stroke-width: 3; }
.wk-tick:hover { border-color: var(--paid); color: var(--paid); }
.wk-tick[aria-pressed="true"] { background: var(--paid); border-color: var(--paid); color: var(--on-ink); }

/* status as a filled cell, calmer than monday */
select.wk-st { appearance: none; -webkit-appearance: none; width: 100%; padding: 4px 6px; border: 1px solid transparent; border-radius: 2px; text-align: center; text-align-last: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; line-height: 1.5; }
select.wk-st:focus { box-shadow: 0 0 0 1px var(--ink); border-color: var(--ink); }
select.wk-st.t-line { color: var(--muted); border-color: var(--line); background: var(--surface); }
select.wk-st.t-info { color: var(--info); background: var(--info-bg); }
select.wk-st.t-warn { color: var(--due); background: var(--due-bg); }
select.wk-st.t-bad { color: var(--stop); background: var(--stop-bg); }
select.wk-st.t-good { color: var(--paid); background: var(--paid-bg); }
select.wk-st option { background: var(--surface); color: var(--text); text-transform: none; letter-spacing: 0; font-weight: 400; }

/* quick add row */
.wk-qa { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 10px; border-bottom: 1px solid var(--line); }
.wk-qa-i { width: 16px; height: 16px; color: var(--muted); flex: none; display: grid; place-items: center; }
.wk-qa-i svg { width: 14px; height: 14px; }
.wk-qa input[type=text] { border: 1px solid transparent; background: transparent; padding: 6px 8px; font-size: 13px; flex: 1; }
.wk-qa input[type=text]:hover { border-color: var(--line); }
.wk-qa input[type=text]:focus { background: var(--surface); }
.wk-qa .wk-qa-go { visibility: hidden; }
.wk-qa:focus-within .wk-qa-go { visibility: visible; }

@container wktbl (max-width: 820px) {
  .wk-hr { display: none; }
  .wk-row { grid-template-columns: 28px minmax(0, 1fr); row-gap: 6px; padding: 8px 8px 8px 6px; }
  .wk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; grid-column: 2; }
  .wk-c-st { width: 112px; }
  .wk-c-pr:empty, .wk-c-br:empty, .wk-c-h:empty, .wk-c-f:empty { display: none; }
  .wk-c-br { max-width: 150px; }
  .wk-tl { white-space: normal; }
}

/* ---------- board ---------- */
.wk-board .kb { grid-auto-columns: minmax(180px, 1fr); align-items: stretch; }
.wk-col { align-content: start; }
.wk-col .wk-qa { border: 1px dashed var(--line); background: transparent; padding: 0 6px; border-radius: 2px; }
.wk-col .wk-qa input[type=text] { font-size: 12.5px; padding: 6px 4px; }
.wk-card { gap: 5px; }
.wk-card .m { align-items: center; }
.wk-card .m .sp { flex: 1; }
.wk-card .m .chip { padding: 1px 6px; font-size: 11px; }
.wk-card .m .code { font-size: 9.5px; padding: 0 4px; }
.wk-card.is-done .t { text-decoration: line-through; color: var(--muted); }
.wk-hint { margin: 8px 0 0; }
@media (hover: none) { .wk-board .wk-hint { display: none; } }

/* ---------- calendar ---------- */
.wk-calnav { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.wk-calnav h2 { margin: 0 4px; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); min-width: 9.5em; text-align: center; }
.wk-calnav .iconbtn { width: 32px; height: 32px; font-size: 20px; line-height: 1; }
.wk-calnav .sub { margin-left: auto; }
.wk-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 2px solid var(--ink); border-left: 1px solid var(--line); background: var(--surface); }
.wk-dow { padding: 6px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.wk-day { min-height: 112px; padding: 4px; display: flex; flex-direction: column; gap: 3px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; min-width: 0; }
.wk-day:hover { background: var(--soft); }
.wk-day.out { background: var(--paper); }
.wk-day.out .wk-dn { color: var(--muted); font-weight: 600; }
.wk-day.sel { box-shadow: inset 0 0 0 2px var(--ink); }
.wk-day.over { outline: 2px dashed var(--ink); outline-offset: -4px; background: var(--soft); }
.wk-dn { align-self: flex-start; border: 0; background: none; padding: 1px 6px; font-size: 12px; font-weight: 700; color: var(--ink); border-radius: 2px; font-variant-numeric: tabular-nums; }
.wk-day.today .wk-dn { background: var(--ink); color: var(--on-ink); }
.wk-chip { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--bc); background: var(--soft); color: var(--text); padding: 2px 6px; font-size: 11.5px; font-weight: 600; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 2px; cursor: grab; }
.wk-day:hover .wk-chip { background: var(--surface); }
.wk-chip:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.wk-chip.is-done { text-decoration: line-through; color: var(--muted); }
.wk-chip.is-late { color: var(--stop); }
.wk-chip.dragging { opacity: .45; }
.wk-more-n { font-size: 11px; color: var(--muted); padding-left: 6px; }
.wk-dots { display: none; }
.wk-dayp { margin-top: var(--s5); }
.wk-dayp .wk-g { margin-top: 0; }
@media (max-width: 760px) {
  .wk-day { min-height: 56px; padding: 3px 2px; align-items: center; }
  .wk-dn { align-self: center; padding: 1px 4px; }
  .wk-chip, .wk-more-n { display: none; }
  .wk-dots { display: flex; gap: 2px; align-items: center; justify-content: center; flex-wrap: wrap; }
  .wk-dots i { width: 6px; height: 6px; border-radius: 50%; }
  .wk-dots b { font-size: 10px; color: var(--muted); margin-left: 1px; }
  .wk-dots.late b { color: var(--stop); }
  .wk-dow { padding: 5px 2px; text-align: center; font-size: 9.5px; letter-spacing: .04em; }
  .wk-calnav h2 { min-width: 0; font-size: 14px; }
  .wk-calnav .sub { flex-basis: 100%; margin-left: 0; }
}

/* ---------- projects list ---------- */
.wk-ptbl { container: wkp / inline-size; --wk-pcols: minmax(190px, 1.5fr) minmax(96px, 1fr) 96px minmax(96px, 130px) 132px minmax(120px, 1fr) 66px; border-bottom: 0; }
.wk-phr, .wk-prow { display: grid; grid-template-columns: var(--wk-pcols); column-gap: 12px; align-items: center; }
.wk-phr { padding: 0 0 6px 9px; border-bottom: 2px solid var(--ink); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.wk-phr .r, .wk-pc-h { text-align: right; }
.wk-prow { padding: 10px 8px 10px 6px; border-bottom: 1px solid var(--line); border-left: 3px solid var(--gc); background: var(--surface); cursor: pointer; }
.wk-prow:hover { background: var(--soft); }
.wk-pmeta { display: contents; }
.wk-prow > *, .wk-pmeta > * { min-width: 0; }
.wk-pc-name .wk-tl { font-size: 14px; }
.wk-pc-br .chip { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-flex; }
.wk-pc-pg { display: grid; gap: 4px; }
.wk-pc-pg .sub { font-size: 11.5px; }
.wk-pc-h { font-size: 13px; font-weight: 700; color: var(--ink); }
.wk-late { color: var(--stop); font-weight: 700; }
.wk-lead { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@container wkp (max-width: 820px) {
  .wk-phr { display: none; }
  .wk-prow { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .wk-pmeta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
  .wk-pc-pg { flex: 1 1 160px; max-width: 260px; }
  .wk-pc-name .wk-tl { white-space: normal; }
}

/* ---------- project page ---------- */
.wk-plede { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 4px; color: var(--muted); font-size: 13px; }
.wk-desc { max-width: 72ch; margin: calc(var(--s3) * -1) 0 var(--s4); color: var(--text); white-space: pre-wrap; }
.wk-prof b { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 2px; color: var(--ink); }
.wk-na { color: var(--muted); font-weight: 400; font-size: 14px; }
.wk-psec .sec-h { margin-bottom: var(--s3); }
.wk-psec .sec-h .btn-row { gap: 12px; }
.wk-plede .k { margin-right: 2px; }
.wk-hours { display: grid; border-top: 1px solid var(--ink); }
.wk-hp { display: grid; grid-template-columns: 22px minmax(90px, 180px) minmax(60px, 1fr) 70px auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.wk-hn { font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-hp b { text-align: right; color: var(--ink); }
.wk-hc { text-align: right; font-size: 12.5px; color: var(--muted); min-width: 90px; }
@media (max-width: 560px) { .wk-hp { grid-template-columns: 22px minmax(0, 1fr) auto; } .wk-hb { grid-column: 2 / -1; grid-row: 2; } .wk-hc { grid-column: 2 / -1; text-align: left; } }

/* ---------- task drawer ---------- */
/* core's sidebar rule `.side` also matches `.scrim.side` (column flow, sidebar text colour, gap); undo it for this drawer */
.scrim.side.wk-drawer { flex-direction: row; color: var(--text); gap: 0; padding: 0; overflow: hidden; }
.wk-drawer .dlg { color: var(--text); }
.wk-drawer .dlg-h h3 { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.wk-drawer .dlg-h .dlg-t { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.wk-drawer .dlg-h .k { color: var(--ink); font-weight: 700; }
.wk-dw { display: grid; gap: 14px; }
.wk-dmeta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12.5px; color: var(--muted); }
.wk-dmeta .linkbtn { color: var(--muted); }
.wk-dmeta:empty { display: none; }
textarea.wk-title { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--ink); border: 1px solid transparent; background: transparent; padding: 4px 6px; margin: -4px -6px 0; width: calc(100% + 12px);
  min-height: 0; resize: none; field-sizing: content; overflow: hidden; }
textarea.wk-title:hover { border-color: var(--line); }
textarea.wk-title:focus { background: var(--surface); }
.wk-sseg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--ink); border-radius: 2px; overflow: hidden; }
.wk-sseg button { border: 0; border-right: 1px solid var(--line); background: var(--surface); color: var(--muted); padding: 7px 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.25; }
.wk-sseg button:last-child { border-right: 0; }
.wk-sseg button:hover { color: var(--ink); }
.wk-sseg button[aria-pressed="true"].t-line { background: var(--ink); color: var(--on-ink); }
.wk-sseg button[aria-pressed="true"].t-info { background: var(--info-bg); color: var(--info); box-shadow: inset 0 -3px 0 var(--info); }
.wk-sseg button[aria-pressed="true"].t-warn { background: var(--due-bg); color: var(--due); box-shadow: inset 0 -3px 0 var(--due); }
.wk-sseg button[aria-pressed="true"].t-bad { background: var(--stop-bg); color: var(--stop); box-shadow: inset 0 -3px 0 var(--stop); }
.wk-sseg button[aria-pressed="true"].t-good { background: var(--paid-bg); color: var(--paid); box-shadow: inset 0 -3px 0 var(--paid); }
.wk-props { display: grid; border-top: 1px solid var(--line); }
.wk-prop { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); min-height: 42px; }
.wk-pl { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.wk-pv { min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wk-pv select, .wk-pv input[type=date] { border-color: transparent; background: transparent; padding: 5px 8px; width: auto; max-width: 100%; font-weight: 600; color: var(--ink); }
.wk-pv select:hover, .wk-pv input[type=date]:hover { border-color: var(--line); background: var(--surface); }
.wk-pv select:focus, .wk-pv input[type=date]:focus { background: var(--surface); }
.wk-picks { gap: 5px; }
.wk-picks label { padding: 3px 9px 3px 4px; font-size: 12px; }
.wk-ro { font-size: 13px; color: var(--text); padding: 5px 0; }
.wk-pv .wk-ro { padding: 5px 8px; }
.wk-rel { font-size: 12px; }
input.wk-late-in { color: var(--stop) !important; }
.wk-ds { display: grid; gap: 8px; }
.wk-dsec { margin: 4px 0 0; padding-top: 8px; }
.wk-dsec .btn-row { gap: 6px; }
.wk-dates { gap: 10px; }
.wk-dh { margin-top: -2px; }
.wk-dh .pill { margin-right: 4px; }
.wk-warn { color: var(--stop); font-weight: 600; }
.wk-ph { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; }
.wk-posts { display: grid; max-height: 248px; overflow-y: auto; border: 1px solid var(--line); background: var(--surface); border-radius: 2px; }
.wk-post { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13px; min-width: 0; }
.wk-post input { flex: none; }
.wk-post:last-child { border-bottom: 0; }
.wk-post:hover { background: var(--soft); }
.wk-post.on { background: var(--soft); }
.wk-post.on .wk-ptt { font-weight: 700; color: var(--ink); }
.wk-post .code:empty { display: none; }
.wk-pd { font-size: 12px; color: var(--muted); white-space: nowrap; flex: none; width: 46px; }
.wk-ptt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; color: var(--text); }
.wk-pf { white-space: nowrap; font-size: 11.5px; flex: none; }
.wk-post .code { flex: none; min-width: 68px; text-align: center; }
.wk-none { font-size: 13px; color: var(--muted); padding: 10px 12px; border: 1px dashed var(--line); border-radius: 2px; }
textarea.wk-brief { min-height: 96px; }
.wk-cl { display: grid; }
.wk-cl:empty { display: none; }
.wk-ci { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); padding: 3px 0; }
.wk-ci label { display: flex; align-items: flex-start; gap: 9px; flex: 1; min-width: 0; cursor: pointer; padding: 4px 0; font-size: 13.5px; }
.wk-ci input { margin-top: 3px; flex: none; width: 15px; height: 15px; }
.wk-ci .t { min-width: 0; overflow-wrap: anywhere; }
.wk-ci.done .t { text-decoration: line-through; color: var(--muted); }
.wk-ckadd { display: flex; gap: 6px; }
.wk-ckadd input[type=text] { padding: 6px 9px; font-size: 13px; }
.wk-ib { border: 0; background: none; padding: 4px; color: var(--muted); display: inline-grid; place-items: center; border-radius: 2px; flex: none; }
.wk-ib svg { width: 15px; height: 15px; }
.wk-ib:hover { color: var(--ink); background: var(--soft); }
.wk-ci .wk-ib:hover, .wk-te .wk-ib:hover { color: var(--stop); }
.wk-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.wk-file { margin: 0; border: 1px solid var(--line); background: var(--surface); border-radius: 2px; overflow: hidden; display: grid; grid-template-rows: 104px auto; min-width: 0; }
.wk-fimg { display: block; background: var(--soft); color: var(--muted); font-size: 11px; text-decoration: none; overflow: hidden; }
.wk-fimg img { width: 100%; height: 104px; object-fit: cover; display: block; }
.wk-fext { display: grid; place-items: center; background: var(--soft); color: var(--muted); font-weight: 700; letter-spacing: .1em; font-size: 12px; text-decoration: none; }
.wk-file figcaption { padding: 6px 4px 4px 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2px; align-items: center; }
.wk-fnm { font-size: 11.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; grid-column: 1; }
.wk-file .sub { font-size: 10.5px; grid-column: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-fa { grid-column: 2; grid-row: 1 / span 2; display: flex; }
.wk-fa .wk-ib { padding: 3px; }
.wk-fa .wk-ib svg { width: 14px; height: 14px; }
.wk-run { display: flex; gap: 8px; align-items: center; margin: 0; }
.wk-runelse { margin-top: -2px; }
.wk-est { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wk-est input[type=number] { width: 92px; padding: 5px 8px; }
.wk-eb { display: flex; align-items: center; gap: 8px; flex: 1 1 160px; }
.wk-eb .bar { flex: 1; }
.wk-log { display: grid; grid-template-columns: 130px 150px minmax(0, 1fr); gap: 8px; align-items: end; padding: 10px; background: var(--soft); border-radius: 2px; }
.wk-log .btn-row { grid-column: 1 / -1; }
.wk-log input { padding: 6px 8px; }
.wk-tes { display: grid; border-top: 1px solid var(--line); }
.wk-te { display: grid; grid-template-columns: 18px minmax(60px, auto) auto minmax(0, 1fr) auto 24px; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.wk-tw { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-tn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-te b { color: var(--ink); }
.wk-te .wk-ib { padding: 2px; }
.wk-drawer .dlg-f { justify-content: flex-start; }
.wk-fi { font-size: 12px; min-width: 0; }
.wk-create .picks { margin-top: 2px; }
.wk-create .picks label { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--text); font-weight: 600; }
.wk-create .picks label:has(input:checked) { color: var(--on-ink); }
.wk-cposts { margin: 0; font-size: 12.5px; }
.wk-cposts b { margin-right: 4px; }
@media (max-width: 560px) {
  .wk-prop { grid-template-columns: 74px minmax(0, 1fr); gap: 6px; }
  .wk-sseg button { font-size: 10px; letter-spacing: .02em; padding: 6px 2px; }
  .wk-post { flex-wrap: wrap; row-gap: 2px; }
  .wk-post .wk-ptt { flex-basis: calc(100% - 90px); }
  .wk-post .wk-pf { margin-left: 26px; }
  .wk-log { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wk-l-note { grid-column: 1 / -1; }
  .wk-te { grid-template-columns: 18px minmax(0, 1fr) auto auto 24px; }
  .wk-te .wk-tn { grid-column: 2 / -2; grid-row: 2; }
  textarea.wk-title { font-size: 19px; }
}

/* ---------- Studio: the task as Office set it ---------- */
.wk-title-ro { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--ink); margin: 0; overflow-wrap: anywhere; }
.wk-brief-ro { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.55; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--ink); padding: 10px 12px; border-radius: 2px; }
.wk-dw-ro .wk-pv .wk-ro { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.wk-dw-ro .wk-ro b { color: var(--ink); }
.wk-ro-note { display: flex; align-items: center; gap: 6px; margin: 0; }
.wk-ro-note svg { width: 13px; height: 13px; flex: none; }
.wk-est b { color: var(--ink); }
@media (max-width: 560px) { .wk-title-ro { font-size: 19px; } }

/* ---------- Recently finished (Office) ---------- */
.wk-recent { margin-bottom: var(--s5); }
.wk-recent .sec .wk-gt { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; padding: 0; }
.wk-rd { gap: 10px; padding: 8px 0; }
.wk-rd-i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--paid-bg); color: var(--paid); }
.wk-rd-i svg { width: 13px; height: 13px; }
.wk-rd .m svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 3px; }
.wk-rd-w { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); white-space: nowrap; flex: none; }
.wk-rd-a { flex: none; min-width: 84px; text-align: right; white-space: nowrap; }
.wk-nofile { color: var(--due); font-weight: 600; }
.wk-rd-more { margin-top: 8px; display: inline-block; }
@media (max-width: 560px) { .wk-rd-w span { display: none; } .wk-rd-a { min-width: 0; } }

/* ---------- Delete project ---------- */
.wk-pdel-ch { display: grid; gap: 8px; }
.wk-pdel-o, .wk-pdel-x { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); background: var(--surface); border-radius: 2px; padding: 10px 12px; cursor: pointer; font-size: 13px; }
.wk-pdel-o input, .wk-pdel-x input { margin-top: 3px; flex: none; }
.wk-pdel-o span { display: grid; gap: 2px; }
.wk-pdel-o b { color: var(--ink); }
.wk-pdel-o:has(input:checked) { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--stop); }
.wk-pdel-x { border-style: dashed; }
.wk-pdel-x.off { opacity: .5; cursor: not-allowed; }

/* ===== social ===== */
/* Social: content calendar, captions, readiness, design queue, finished designs.
   Format colours (.soc-f-*) and deliverable type colours (.soc-ty-*) are data colours from the original planner;
   --fc is the line/swatch colour (lifted in dark mode), --fb the fill behind white text. Everything else uses tokens. */
.soc-f-reel { --fc: #6B4BA8; --fb: #6B4BA8; }
.soc-f-static { --fc: #5C0A0A; --fb: #5C0A0A; }
.soc-f-carousel { --fc: #3A6EA5; --fb: #3A6EA5; }
.soc-f-ugc { --fc: #1F7A68; --fb: #1F7A68; }
.soc-f-repost { --fc: #8A8A93; --fb: #74747C; }
.soc-f-other { --fc: #B07A1E; --fb: #8F6418; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .soc-f-reel { --fc: #9A80D6; }
  :root:not([data-theme="light"]) .soc-f-static { --fc: #C8605A; }
  :root:not([data-theme="light"]) .soc-f-carousel { --fc: #6E9CD0; }
  :root:not([data-theme="light"]) .soc-f-ugc { --fc: #4AAE98; }
  :root:not([data-theme="light"]) .soc-f-repost { --fc: #9A9AA3; }
  :root:not([data-theme="light"]) .soc-f-other { --fc: #D29B3E; } }
:root[data-theme="dark"] .soc-f-reel { --fc: #9A80D6; }
:root[data-theme="dark"] .soc-f-static { --fc: #C8605A; }
:root[data-theme="dark"] .soc-f-carousel { --fc: #6E9CD0; }
:root[data-theme="dark"] .soc-f-ugc { --fc: #4AAE98; }
:root[data-theme="dark"] .soc-f-repost { --fc: #9A9AA3; }
:root[data-theme="dark"] .soc-f-other { --fc: #D29B3E; }
.soc-ty-STA { --tc: #5C0A0A; } .soc-ty-STR { --tc: #8A8A93; } .soc-ty-CRSL { --tc: #3A6EA5; } .soc-ty-FRM { --tc: #6B4BA8; } .soc-ty-AI { --tc: #1F7A68; }

/* ---------- page furniture ---------- */
.soc-brandsel { width: auto; min-width: 160px; max-width: 100%; }
.soc-handle { color: var(--muted); }
.soc-gap { margin-top: var(--s3); }
.soc-line { margin: 0 0 var(--s3); max-width: 80ch; }
.soc-bad { color: var(--stop); }
.soc-h { margin: 0; }
.soc-mbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.soc-mnav { display: flex; align-items: center; gap: var(--s2); }
.soc-mnav .iconbtn { width: 32px; height: 32px; }
.soc-mt { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; color: var(--ink); min-width: 9.5em; text-align: center; white-space: nowrap; }
.soc-mx { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.soc-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: var(--s2); }
.soc-legend .chip svg { width: 13px; height: 13px; }
.soc-legend .chip .sq { width: 10px; height: 10px; }
.soc-sw { background: var(--fc); }
.soc-inl { display: inline-flex; align-items: center; gap: 8px; margin-right: 6px; }
.soc-inl select { width: auto; min-width: 140px; padding: 5px 8px; }
.soc-key { margin-bottom: var(--s3); }
.soc-key > .k { margin-bottom: 10px; }
.soc-kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 7px 18px; }
.soc-kr { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.4; }
.soc-kr b { color: var(--ink); }
.soc-ks { flex: 0 0 30px; display: flex; align-items: center; min-height: 17px; }
.soc-kev { display: inline-block; width: 22px; height: 12px; border-left: 3px solid var(--fc); background: var(--soft); }
.soc-kev.story { border-left-style: dashed; background: transparent; }
.soc-kev.task { border-left: 3px dotted var(--ink); }
.soc-kthumb { display: inline-block; width: 14px; height: 14px; border-radius: 2px; border: 1px solid var(--line); background: var(--soft); }
.soc-ktoday { display: inline-block; width: 22px; height: 13px; box-shadow: inset 0 0 0 2px var(--ink); }
.soc-ks .soc-load { width: 24px; margin: 0; }
.soc-ks .soc-sq { cursor: default; }

/* ---------- calendar ---------- */
.soc-calwrap { margin: 0 0 4px; }
.soc-cal { width: 100%; min-width: 700px; border-collapse: collapse; table-layout: fixed; }
.soc-cal th { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-align: left; font-weight: 700; padding: 0 0 6px 6px; border-bottom: 2px solid var(--ink); }
.soc-cal td { border: 1px solid var(--line); vertical-align: top; padding: 5px; height: 108px; background: var(--surface); cursor: pointer; overflow: hidden; }
.soc-cal td:hover { background: var(--soft); }
.soc-cal td.out { background: transparent; cursor: default; }
.soc-cal td.out .soc-dn { opacity: .45; }
.soc-cal td.wk { background: var(--soft); }
.soc-cal td.today { box-shadow: inset 0 0 0 2px var(--ink); }
.soc-cal td.over { outline: 2px dashed var(--ink); outline-offset: -3px; background: var(--soft); }
.soc-dn { display: flex; align-items: center; gap: 5px; width: 100%; border: 0; background: none; padding: 0; margin: 0 0 4px; text-align: left; font-size: 11px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; cursor: pointer; }
td.today .soc-dn { color: var(--ink); }
.soc-wd { color: var(--paid); font-weight: 700; font-size: 10.5px; letter-spacing: 0.04em; }
.soc-ev { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--fc, var(--line)); background: var(--soft); border-radius: 2px; padding: 3px 5px; margin: 0 0 3px; font-size: 11px; line-height: 1.3; color: var(--text); cursor: grab; overflow: hidden; }
.soc-cal td.wk .soc-ev, .soc-cal td:hover .soc-ev { background: var(--paper); }
.soc-ev:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.soc-ev b { display: flex; align-items: center; gap: 3px; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-ev .t { display: block; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.soc-ev .m { display: block; color: var(--muted); font-size: 10.5px; margin-top: 1px; }
.soc-ev.story { background: transparent; border-left-style: dashed; }
.soc-ev.task { border-left: 3px dotted var(--ink); }
.soc-ev.task.ld-good { border-left: 3px solid var(--paid); }
.soc-ev.task.ld-warn { border-left: 3px solid var(--due); }
.soc-ev.task.ld-bad { border-left: 3px solid var(--stop); }
.soc-ev.task.late:not(.is-done) b { color: var(--stop); }
.soc-ev.is-sched { opacity: .6; filter: grayscale(.9); }
.soc-ev.is-done { opacity: .45; filter: grayscale(1); }
.soc-ev.is-sched .t, .soc-ev.is-done .t { text-decoration: line-through; }
.soc-ev.soc-dragging, .soc-sq.soc-dragging { opacity: .35; }
.soc-tick { display: inline-flex; flex: none; }
.soc-tick svg { width: 10px; height: 10px; stroke-width: 2.6; }
.soc-mini { float: right; width: 14px; height: 14px; object-fit: cover; border-radius: 2px; border: 1px solid var(--line); margin: 0 0 2px 4px; }
.soc-sqs { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 4px; }
.soc-sq { display: inline-block; width: 13px; height: 13px; border-radius: 2px; padding: 0; border: 0; background: var(--fc); cursor: grab; flex: none; }
.soc-sq:hover { outline: 1px solid var(--ink); outline-offset: 1px; }
.soc-sq.story { background: transparent; border: 1.5px dashed var(--fc); }
.soc-sq.fin { background: linear-gradient(to top right, transparent 42%, var(--ink) 42%, var(--ink) 58%, transparent 58%), var(--fc); filter: grayscale(.8); opacity: .7; }
.soc-sq.story.fin { background: linear-gradient(to top right, transparent 42%, var(--ink) 42%, var(--ink) 58%, transparent 58%); border-color: var(--muted); }
.soc-sq.pub { opacity: .45; }
.soc-cnt { font-size: 10.5px; color: var(--muted); line-height: 1.35; }
.soc-cnt.due { color: var(--ink); font-weight: 700; }
.soc-cap { font-size: 11px; color: var(--text); font-variant-numeric: tabular-nums; margin-bottom: 3px; }
.soc-load { display: block; height: 4px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.soc-load.big { height: 5px; margin: 0 0 5px; }
.soc-load i { display: block; height: 100%; background: var(--paid); border-radius: 3px; }
.soc-load.warn i { background: var(--due); }
.soc-load.bad i { background: var(--stop); }
.soc-off { font-size: 10.5px; color: var(--due); font-weight: 700; margin-top: 2px; overflow-wrap: anywhere; }

/* ---------- day modal and post modal pieces ---------- */
.soc-dayline { margin: 0 0 6px; }
.soc-dsec { border-top: 2px solid var(--ink); padding-top: 8px; margin: 14px 0 8px; }
.soc-di { border-left: 3px solid var(--fc, var(--line)); background: var(--surface); padding: 8px 10px; margin-bottom: 8px; display: grid; gap: 4px; }
.soc-di.story { border-left-style: dashed; }
.soc-di.task { border-left: 3px dotted var(--ink); }
.soc-di .t { font-weight: 700; color: var(--ink); display: flex; gap: 5px; align-items: center; }
.soc-dih { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.soc-acts { margin-top: 4px; gap: 6px; }
.soc-donebtn svg { width: 13px; height: 13px; }
.soc-donebtn.on { background: var(--paid-bg); color: var(--paid); border-color: var(--paid); }
.soc-capbtn { margin-top: 6px; gap: 10px; }
.soc-pmh { margin: 18px 0 8px; }
.soc-pmt { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.soc-pmb { flex: 1; min-width: 0; display: grid; gap: 4px; }
.soc-pmb .t { font-weight: 700; color: var(--ink); }
.soc-pmb .m { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.soc-pm-design .btn-row { margin-top: 10px; }
.soc-pmt .soc-tw, .soc-pmt .soc-tile { flex-basis: 38px; width: 38px; height: 38px; font-size: 10px; }
.soc-brief { margin: 0 0 12px; white-space: pre-wrap; line-height: 1.6; }

/* proof thumbnails */
.soc-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; padding: 4px 0 2px; }
.soc-th { position: relative; display: inline-block; }
.soc-th a { display: block; }
.soc-th img { font-size: 0; color: transparent; }
.soc-th img, .soc-ext { width: 36px; height: 36px; object-fit: cover; border-radius: 2px; border: 1px solid var(--line); background: var(--soft); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; }
.soc-ext.big { width: 100%; height: 110px; border: 0; border-radius: 0; font-size: 13px; }
.soc-thb { position: absolute; top: -6px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--surface); padding: 0; display: grid; place-items: center; background: var(--ink); color: var(--on-ink); }
.soc-thb svg { width: 10px; height: 10px; stroke-width: 2.4; }
.soc-thb.dl { left: -6px; background: var(--paid); color: #FFFFFF; }
.soc-thb.rm { right: -6px; }

/* ---------- captions and readiness lists ---------- */
.soc-list { border-top: 2px solid var(--ink); }
.soc-item { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.soc-when { display: flex; flex-direction: column; gap: 2px; font-size: 12px; min-width: 0; }
.soc-when b { font-size: 13px; color: var(--ink); }
.soc-when > span { color: var(--muted); }
.soc-when .code { align-self: flex-start; }
.soc-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 3px; }
.soc-ftag { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #FFFFFF; background: var(--fb); padding: 1px 6px; border-radius: 2px; white-space: nowrap; }
.soc-ptag { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); padding: 0 5px; border-radius: 2px; }
.soc-body { min-width: 0; }
.soc-body h4 { margin: 0 0 4px; font-size: 14px; color: var(--ink); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.soc-body h4 .sub { font-weight: 400; }
.soc-cap-t { margin: 0; font-size: 13px; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 78ch; }
.soc-stsel { width: auto; padding: 4px 8px; font-size: 12px; }
.soc-item.is-sched .soc-ttl, .soc-item.is-done .soc-ttl { text-decoration: line-through; }
.soc-item.is-sched { opacity: .72; }
.soc-item.is-done { opacity: .55; }
.soc-item.is-sched .soc-ftag, .soc-item.is-done .soc-ftag { filter: grayscale(.9); }
.soc-covers { display: grid; gap: 4px; margin: 2px 0 4px; }
.soc-cov { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border: 0; border-left: 3px dotted var(--ink); background: var(--surface); padding: 6px 9px; text-align: left; font-size: 12.5px; }
.soc-cov:hover { background: var(--soft); }
.soc-cov .soc-ttl { font-weight: 600; color: var(--ink); }

/* ---------- design queue ---------- */
.soc-qbar { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-bottom: var(--s3); }
.soc-sp { flex: 1; }
.soc-srch { position: relative; flex: 1 1 280px; max-width: 420px; }
.soc-srch svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); }
.soc-srch input { padding-left: 32px; }
.soc-sched { margin-bottom: var(--s4); display: grid; gap: 8px; }
.soc-srow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.soc-srow .seg button { padding: 4px 11px; }
.soc-caps { display: grid; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.soc-mn { color: var(--ink); min-width: 90px; }
.soc-inlsel { width: auto; min-width: 160px; padding: 5px 8px; }
.soc-heavy { margin: 0; color: var(--due); font-weight: 700; }
.soc-dg { margin-bottom: 18px; }
.soc-dh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 0 7px; margin-bottom: 8px; border-bottom: 2px solid var(--ink); }
.soc-dh .d { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.soc-dh .d.late { color: var(--stop); }
.soc-dots { display: flex; gap: 12px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.soc-dotset { display: inline-flex; gap: 3px; align-items: center; }
.soc-dotset > i { width: 9px; height: 9px; border-radius: 50%; display: block; background: var(--line); }
.soc-dotset > i.f { background: var(--paid); }
.soc-dotset > i.o { background: var(--stop); }
.soc-dotset .sub { margin-left: 4px; font-variant-numeric: tabular-nums; }
.soc-dotset .av { margin-right: 3px; }
.soc-tc { display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-left-width: 4px; border-radius: 2px; padding: 9px 11px; margin-bottom: 7px; min-width: 0; }
.soc-tc.late { border-top-color: var(--stop); border-right-color: var(--stop); border-bottom-color: var(--stop); }
.soc-tc.is-done { opacity: .6; }
.soc-tw { position: relative; flex: 0 0 46px; display: inline-block; }
.soc-tile { width: 46px; height: 46px; border-radius: 2px; flex: 0 0 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #FFFFFF; background: var(--tc); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.1; object-fit: cover; }
img.soc-tile { background: var(--soft); border: 1px solid var(--line); font-size: 0; color: transparent; }
.soc-tile.dim { opacity: .5; }
.soc-tile small { font-size: 7.5px; font-weight: 600; opacity: .75; letter-spacing: 0.06em; margin-top: 2px; }
.soc-tyb { position: absolute; bottom: -3px; right: -3px; font-size: 8px; font-weight: 700; letter-spacing: 0.04em; color: #FFFFFF; background: var(--tc); padding: 1px 4px; border-radius: 2px; border: 1.5px solid var(--surface); }
.soc-tb { flex: 1; min-width: 0; cursor: pointer; }
.soc-tb .t { font-weight: 700; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-tb:hover .t { text-decoration: underline; text-underline-offset: 2px; }
.soc-tb .m { font-size: 11.5px; color: var(--muted); margin-top: 3px; display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.soc-pip { width: 4px; height: 4px; border-radius: 50%; background: var(--line); display: inline-block; flex: none; }
.soc-ta { display: flex; gap: 6px; align-items: center; flex: none; }
@media (max-width: 720px) {
  .soc-tc { flex-wrap: wrap; }
  .soc-tb { flex-basis: calc(100% - 60px); }
  .soc-ta { width: 100%; padding-left: 58px; }
  .soc-item { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .soc-when { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .soc-tags { margin-top: 0; }
  .soc-mt { min-width: 0; font-size: 17px; }
  .soc-dots { margin-left: 0; }
  .soc-cal td { height: 86px; }
}

/* ---------- finished designs ---------- */
.soc-fd { margin-bottom: var(--s4); }
.soc-fdh { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.soc-fdt { min-width: 0; }
.soc-fdt h3 { margin: 0 0 3px; font-size: 15px; color: var(--ink); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.soc-fdt h3 .linkbtn { text-decoration: none; color: var(--ink); }
.soc-fdt h3 .linkbtn:hover { text-decoration: underline; }
.soc-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 10px; margin-top: 12px; }
.soc-file { border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: var(--paper); min-width: 0; display: flex; flex-direction: column; }
.soc-fimg { display: block; background: var(--soft); }
.soc-fimg img { width: 100%; height: 110px; object-fit: cover; display: block; font-size: 0; color: transparent; }
.soc-fi { padding: 7px 8px; display: grid; gap: 2px; }
.soc-fn { font-size: 11.5px; line-height: 1.3; overflow-wrap: anywhere; color: var(--text); }
.soc-fi .btn-row { margin-top: 5px; gap: 5px; }
.soc-fi .btn.sm { padding: 3px 8px; font-size: 11.5px; }
.soc-delivers { margin-top: 11px; }

/* ===== team ===== */
/* Team: people list, member page, hours grid, availability grid */
.tm-skel { display: grid; gap: 10px; max-width: 900px; }
.tm-skel .h1 { width: 200px; height: 38px; }
.tm-skel .l { width: 340px; margin-bottom: 18px; }
.tm-skel .row { height: 48px; }

/* claim banner */
.tm-claim .btn-row { margin-top: 10px; }
.tm-claimer { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface); border-radius: 2px; padding: 3px 3px 3px 7px; font-weight: 700; font-size: 12.5px; color: var(--ink); }

/* people list */
.tm-ppl { display: grid; border-top: 2px solid var(--ink); }
.tm-pr { display: grid; grid-template-columns: minmax(170px, 1.6fr) minmax(110px, 1fr) minmax(120px, 1fr) 76px 120px 96px 36px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; min-width: 0; }
.tm-ppl.adm .tm-pr { grid-template-columns: minmax(170px, 1.6fr) minmax(110px, 1fr) minmax(120px, 1fr) 76px 120px 96px 92px 36px; }
.tm-pr:not(.h):hover { background: var(--soft); }
.tm-pr.h { cursor: default; white-space: nowrap; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 7px 0; border-bottom: 1px solid var(--ink); }
.tm-pr .r { text-align: right; }
.tm-pr.off { opacity: 0.72; }
.tm-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tm-who .main { min-width: 0; }
.tm-nm { font-weight: 700; color: var(--ink); text-decoration: none; font-size: 14.5px; display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-nm:hover { text-decoration: underline; }
.tm-c { display: flex; flex-direction: column; min-width: 0; font-size: 13px; gap: 1px; }
.tm-c.r { align-items: flex-end; }
.tm-lab { display: none; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.tm-lk { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-lk svg { width: 13px; height: 13px; flex: none; color: var(--muted); }
.tm-acc { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 3px; }
.tm-acc .linkbtn { font-size: 11.5px; }
.tm-act { display: flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.iconbtn.tm-ib { width: 30px; height: 30px; }
.iconbtn.tm-ib svg { width: 15px; height: 15px; }
.tm-ld { display: grid; gap: 4px; min-width: 0; }
.tm-ld .bar { max-width: 110px; }
.tm-none { padding: 14px 0; }
.tm-more { margin-top: 18px; }
.tm-more > summary { cursor: pointer; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--ink); padding: 6px 0 10px; }
.tm-more > summary .sub { letter-spacing: 0; text-transform: none; font-weight: 400; margin-left: 4px; }
@media (max-width: 1180px) {
  .tm-pr, .tm-ppl.adm .tm-pr { display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 12px 0; align-items: flex-start; }
  .tm-ppl .tm-pr.h, .tm-ppl.adm .tm-pr.h { display: none; }
  .tm-who { flex: 1 1 calc(100% - 60px); }
  .tm-act { flex: none; order: 2; }
  .tm-c { flex: 1 1 calc(25% - 16px); min-width: 130px; order: 3; }
  .tm-c.r { align-items: flex-start; }
  .tm-lab { display: block; }
}
@media (max-width: 480px) { .tm-c { flex-basis: calc(50% - 16px); min-width: 0; } }

/* member page */
.tm-mh { align-items: flex-end; }
.tm-mh-l { display: flex; gap: 16px; align-items: flex-end; min-width: 0; }
.tm-mh-l > div { min-width: 0; }
.av.tm-xl { width: 64px; height: 64px; font-size: 22px; border-width: 0; }
.tm-lede-lk { margin-left: 10px; display: inline-flex; vertical-align: baseline; }
.tm-wkg { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.tm-wd { border: 1px solid var(--line); background: var(--surface); border-radius: 2px; padding: 8px; min-height: 104px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.tm-wd.off { background: var(--stop-bg); border-color: transparent; }
.tm-wd.nw { background: transparent; border-style: dashed; }
.tm-wd.today { border-color: var(--ink); box-shadow: inset 0 2px 0 var(--ink); }
.tm-wdh { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; white-space: nowrap; }
.tm-wdh b { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.tm-wdb { display: grid; gap: 4px; min-width: 0; align-content: start; }
.tm-offl { font-size: 12px; font-weight: 700; color: var(--stop); line-height: 1.3; overflow-wrap: anywhere; }
.tm-offl.warn { color: var(--due); font-weight: 600; }
.tm-tl { border: 0; background: none; padding: 0; text-align: left; font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tm-tl:hover { color: var(--ink); text-decoration: underline; }
.tm-trw .t { font-size: 13.5px; }
.tm-trw .code { font-size: 9.5px; }
.tm-dts { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 2px; background: var(--surface); margin-bottom: 12px; }
.tm-dt { padding: 7px 8px; border-right: 1px solid var(--line); display: grid; gap: 1px; min-width: 0; }
.tm-dt:last-child { border-right: 0; }
.tm-dt .k { font-size: 10px; }
.tm-dt b { font-size: 13px; color: var(--ink); white-space: nowrap; }
.tm-dt.today { box-shadow: inset 0 2px 0 var(--ink); }
.tm-dt.tot { background: var(--soft); }
.tm-ts { min-width: 560px; }
.tm-nw { white-space: nowrap; }
.tm-what { min-width: 160px; }
.tm-et { font-weight: 700; color: var(--ink); text-decoration: none; text-align: left; }
button.tm-et:hover { text-decoration: underline; }
.tm-note { color: var(--muted); font-size: 12.5px; max-width: 280px; }
.tm-ea { white-space: nowrap; }
.tm-ea .iconbtn { display: inline-grid; margin-left: 4px; border-color: transparent; background: transparent; }
.tm-ea .iconbtn:hover { border-color: var(--line); }
.tbl tfoot td, .tbl tfoot th { border-bottom: 0; border-top: 1px solid var(--ink); }
@media (max-width: 760px) {
  .tm-mh-l { align-items: center; }
  .av.tm-xl { width: 48px; height: 48px; font-size: 17px; }
  .tm-wkg { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tm-wd { min-height: 0; grid-template-columns: 88px minmax(0, 1fr); align-items: center; padding: 7px 10px; }
  .tm-wdh { justify-content: flex-start; gap: 6px; }
  .tm-dts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tm-dt:nth-child(4n) { border-right: 0; }
  .tm-dt:nth-child(-n+4) { border-bottom: 1px solid var(--line); }
}

/* week nav and controls */
.tm-ctrl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.tm-ctrl .sp { flex: 1; }
.tm-wk { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tm-wk .iconbtn { width: 30px; height: 30px; }
.tm-wk b { font-size: 13.5px; color: var(--ink); min-width: 120px; text-align: center; }
.sec-h .tm-wk b { min-width: 0; }
.tm-after { margin-top: 10px; }

/* hours grid */
.tm-hg { min-width: 760px; }
.tm-hg th.tm-rh, .tm-hg tbody th { text-align: left; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--text); font-weight: 600; border-bottom: 1px solid var(--line); padding: 6px 10px 6px 0; white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.tm-hg tfoot th { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 8px 10px 8px 0; }
.tm-hg td { padding: 4px 6px 4px 0; }
.tm-hg td, .tm-hg th.r { width: 74px; }
.tm-hg .tm-tod { background: var(--soft); }
.tm-hg td.tm-offc { background: var(--stop-bg); }
.tm-hg .tm-cc { width: 118px; white-space: nowrap; }
.tm-hf { display: inline-block; padding-right: 7px; }
.tm-hc { border: 1px solid transparent; background: none; width: 100%; text-align: right; padding: 4px 6px; border-radius: 2px; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
.tm-hc:hover { border-color: var(--ink); background: var(--surface); }
.tm-hc.z { color: transparent; font-weight: 400; }
.tm-hc.z:hover, .tm-hc.z:focus-visible { color: var(--muted); }
.tm-who2 { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; min-width: 0; max-width: 100%; }
.tm-who2 > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
button.tm-who2:hover span b, button.tm-who2:hover > span { text-decoration: underline; }
.tm-sq0 { background: var(--line); }

/* availability */
.tm-leg { display: inline-flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); align-items: center; }
.tm-leg span { display: inline-flex; gap: 5px; align-items: center; }
.tm-sw3 { display: inline-block; width: 14px; height: 14px; border-radius: 2px; }
.tm-sw3.w { background: var(--soft); box-shadow: inset 0 -3px 0 var(--muted); }
.tm-sw3.o { background: var(--stop-bg); box-shadow: inset 0 0 0 1px var(--stop); }
.tm-sw3.n { border: 1px dashed var(--line); }
.tm-avwrap { border-top: 2px solid var(--ink); padding-top: 4px; }
.tm-av { border-collapse: separate; border-spacing: 2px 3px; }
.tm-av th, .tm-av td { padding: 0; }
.tm-av .tm-avn { position: sticky; left: 0; z-index: 2; background: var(--paper); text-align: left; min-width: 170px; max-width: 200px; padding-right: 10px; font-weight: 400; }
.tm-av .tm-avn b { display: block; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-av .tm-avn .sub { display: block; font-size: 11px; white-space: nowrap; }
.tm-avw { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 700; text-align: left; padding: 4px 0 2px 2px !important; border-left: 1px solid var(--line); }
.tm-avd { font-weight: 400; min-width: 26px; }
.tm-avd span { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.tm-avd b { display: block; font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
.tm-avd.today b { background: var(--ink); color: var(--on-ink); border-radius: 2px; }
.tm-av td.wk0, .tm-av th.wk0 { padding-left: 6px; }
.tm-c3 { display: block; width: 26px; height: 26px; border: 0; padding: 0; border-radius: 2px; background: transparent; cursor: pointer; }
.tm-c3.w { background: var(--soft); box-shadow: inset 0 -3px 0 var(--mc, var(--muted)); }
.tm-c3.o { background: var(--stop-bg); box-shadow: inset 0 0 0 1px var(--stop); }
.tm-c3.n { border: 1px dashed var(--line); }
.tm-c3.e { border: 1px dashed transparent; }
.tm-c3.e:hover { border-color: var(--line); }
.tm-c3.today { outline: 1px solid var(--ink); outline-offset: 1px; }
.tm-c3:hover { filter: brightness(0.94); }
.tm-avs th, .tm-avs td { padding-top: 6px; }
.tm-stu { width: 18px; height: 18px; display: inline-grid; place-items: center; color: var(--muted); flex: none; }
.tm-stu svg { width: 15px; height: 15px; }
.tm-offs { margin-top: 28px; }
.tm-orw { align-items: center; }
.tm-od { width: 76px; flex: none; display: grid; line-height: 1.25; }
.tm-od b { color: var(--ink); }
.tm-orw .m .tm-who2 { gap: 5px; }

/* member editor */
.tm-sw { display: flex; gap: 6px; flex-wrap: wrap; }
.tm-sw label { position: relative; cursor: pointer; }
.tm-sw input { position: absolute; opacity: 0; pointer-events: none; }
.tm-sw i { display: block; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--line); }
.tm-sw label:has(input:checked) i { box-shadow: 0 0 0 2px var(--ink); }
.tm-sw label:has(input:focus-visible) i { outline: 2px solid var(--ink); outline-offset: 3px; }
.tm-days label { padding: 5px 12px; }
.tm-tog { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 13px; }
.tm-tog input { margin-top: 3px; }
.tm-tog b { display: block; color: var(--ink); }
.tm-adm { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 10px; }
.tm-adm > .k { display: flex; gap: 6px; align-items: center; }
.tm-adm > .k svg { width: 13px; height: 13px; }
.tm-oprev { margin: 0; }
.tm-whofix { display: flex; align-items: center; gap: 8px; padding: 6px 0; color: var(--ink); }

/* link account */
.tm-hits { display: grid; margin-top: 10px; border-top: 1px solid var(--line); max-height: 320px; overflow-y: auto; }
.tm-hit { display: flex; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 9px 4px; text-align: left; width: 100%; }
.tm-hit:hover:not(:disabled), .tm-hit:focus-visible { background: var(--soft); }
.tm-hit:disabled { cursor: default; opacity: 0.6; }
.tm-hit .w { display: grid; min-width: 0; }
.tm-hit b { color: var(--ink); }
.tm-hit0 { padding: 10px 4px; margin: 0; }
@media (max-width: 760px) {
  .tm-av .tm-avn { min-width: 112px; max-width: 124px; padding-right: 6px; }
  .tm-av .tm-avn .sub { display: none; }
  .tm-av .tm-avn .av { display: none; }
  .tm-ctrl .tm-leg { order: 5; width: 100%; }
}

/* ===== jobs ===== */
/* Jobs: the ledger groups every term sheet and invoice by month; the intake and the job page split into a working
   column and a live A4 sheet that writes itself. Ported from the CNS Job Desk, classes prefixed jb-. */
.jb-split [hidden] { display: none !important; }

/* ---------- ledger ---------- */
.jb-money > span { display: block; }
.jb-money > span + span { font-size: 15px; }
.jb-filters { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: end; margin-bottom: var(--s4); }
.jb-filters .fld { flex: 0 1 220px; min-width: 160px; }
.jb-fclear { padding-bottom: 4px; }
.jb-client { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: flex-end; margin-bottom: var(--s5); }
.jb-client-main { flex: 1 1 240px; min-width: 0; }
.jb-client-n { font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.jb-month { margin-bottom: var(--s5); }
.jb-month h2 { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 6px; color: var(--ink); display: flex; gap: 10px; align-items: baseline; }
.jb-month h2 small { font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--muted); font-size: 12px; }
table.jb-led { width: 100%; border-collapse: collapse; min-width: 720px; }
.jb-led th { text-align: left; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--ink); }
.jb-led td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.jb-led tr.row { cursor: pointer; }
.jb-led tr.row:hover td { background: var(--soft); }
.jb-led td.amt, .jb-led th.amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jb-refbtn { border: 0; background: none; padding: 0; text-align: left; font: inherit; font-weight: 700; color: var(--ink); }
.jb-refbtn:hover { text-decoration: underline; text-underline-offset: 2px; }
.jb-led .linkbtn { color: var(--muted); }

/* ---------- split: working column + sticky A4 preview ---------- */
.jb-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s5); align-items: start; }
.jb-col { min-width: 0; container-type: inline-size; }
.jb-stick { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 76px); min-width: 0; }
.jb-doc-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: var(--s3); }
.jb-doc-tabs button { border: 1px solid var(--line); background: var(--surface); padding: 6px 10px; font-size: 12px; font-weight: 700; border-radius: 2px; font-variant-numeric: tabular-nums; color: var(--text); }
.jb-doc-tabs button:hover { border-color: var(--ink); }
.jb-doc-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.jb-prev-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: var(--s3); }
.jb-docs { display: flex; flex-wrap: wrap; gap: 6px; }
.jb-brief { margin: 0; white-space: pre-wrap; }
.jb-status { width: auto; padding: 6px 8px; }
.jb-paidon { margin-top: 12px; max-width: 220px; }
.jb-hint { margin: 0; }
.jb-links { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px 12px; margin: 0; align-items: baseline; }
.jb-links dt { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.jb-links dd { margin: 0; min-width: 0; line-height: 1.9; }
.jb-links .chip { vertical-align: middle; }
.jb-prof .sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
.jb-prof .sum > div { margin-right: 0; padding: 10px 12px 10px 0; border-right: 0; }
.jb-prof .sum > div:nth-child(odd) { border-right: 1px solid var(--line); }
.jb-prof .sum > div:nth-child(even) { padding-left: 14px; }
.jb-prof .sum > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.jb-col .note { margin-bottom: 0; }
.jb-from { margin-bottom: 0; }

/* ---------- intake steps ---------- */
.jb-step { border-top: 2px solid var(--ink); padding: var(--s4) 0 var(--s5); }
.jb-step-h { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s3); }
.jb-step-n { background: var(--ink); color: var(--on-ink); font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 1px; font-variant-numeric: tabular-nums; }
.jb-step-t { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.jb-step-b { display: grid; gap: var(--s3); min-width: 0; }
.jb-newc { padding: var(--s3); background: var(--soft); border-radius: 2px; }
.jb-svc { display: flex; flex-wrap: wrap; gap: 6px; }
.jb-svc label { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); background: var(--surface); padding: 7px 11px; border-radius: 2px; cursor: pointer; font-size: 13px; font-weight: 600; }
.jb-svc input { accent-color: var(--ink); margin: 0; }
.jb-svc label:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.jb-svc label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.jb-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.jb-presets button { border: 1px solid var(--line); background: var(--surface); padding: 5px 9px; font-size: 12px; font-weight: 600; border-radius: 2px; color: var(--text); }
.jb-presets button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.jb-rows { display: grid; gap: 6px; }
.jb-lrow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) 56px minmax(0, 1.1fr) minmax(0, 1fr) 30px; gap: 6px; align-items: center; }
.jb-srow { display: grid; grid-template-columns: minmax(0, 1.3fr) 64px minmax(0, 1.3fr) minmax(0, 2fr) 30px; gap: 6px; align-items: center; }
.jb-irow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) 30px; gap: 6px; align-items: center; }
.jb-rows .hdr { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.jb-rows input { padding: 7px 8px; }
.jb-tot { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--ink); color: var(--on-ink); padding: 10px 14px; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: 1px; }
.jb-tot span { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.jb-tot strong { font-size: 18px; text-align: right; }
.jb-tot-sm { margin-top: 10px; padding: 8px 12px; }
.jb-tot-sm strong { font-size: 15px; }

@media (max-width: 1040px) {
  .jb-split { grid-template-columns: minmax(0, 1fr); }
  .jb-stick { position: static; }
}
/* narrow working column (phones, or a squeezed split): line editors stack */
@container (max-width: 440px) {
  .jb-lrow { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr) 30px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .jb-lrow > :nth-child(1) { grid-column: 1 / 4; grid-row: 1; } .jb-lrow > :nth-child(6) { grid-column: 4; grid-row: 1; }
  .jb-lrow > :nth-child(2) { grid-column: 1 / 5; grid-row: 2; }
  .jb-lrow > :nth-child(3) { grid-column: 1; grid-row: 3; } .jb-lrow > :nth-child(4) { grid-column: 2; grid-row: 3; } .jb-lrow > :nth-child(5) { grid-column: 3 / 5; grid-row: 3; }
  .jb-srow { grid-template-columns: 64px minmax(0, 1fr) 30px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .jb-srow > :nth-child(1) { grid-column: 1 / 3; grid-row: 1; } .jb-srow > :nth-child(5) { grid-column: 3; grid-row: 1; }
  .jb-srow > :nth-child(2) { grid-column: 1; grid-row: 2; } .jb-srow > :nth-child(3) { grid-column: 2 / 4; grid-row: 2; } .jb-srow > :nth-child(4) { grid-column: 1 / 4; grid-row: 3; }
  .jb-irow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .jb-irow > :nth-child(1) { grid-column: 1 / 3; grid-row: 1; } .jb-irow > :nth-child(5) { grid-column: 3; grid-row: 1; }
  .jb-irow > :nth-child(2) { grid-column: 1 / 4; grid-row: 2; } .jb-irow > :nth-child(3) { grid-column: 1; grid-row: 3; } .jb-irow > :nth-child(4) { grid-column: 2 / 4; grid-row: 3; }
  .jb-rows .hdr { display: none; }
}
@container (max-width: 340px) {
  .jb-links { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .jb-links dd { margin-bottom: 8px; }
}
@media (max-width: 640px) {
  .jb-filters .fld { flex: 1 1 140px; }
  /* ledger rows become two-line cards: reference and amount, client and job, then date, document and status */
  table.jb-led, .jb-led tbody { display: block; min-width: 0; }
  .jb-led thead { display: none; }
  .jb-led tbody { border-top: 1px solid var(--ink); }
  .jb-led tr.row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 3px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
  .jb-led td { display: block; padding: 0; border: 0; min-width: 0; }
  .jb-led td:nth-child(2) { grid-column: 1 / 3; grid-row: 1; }
  .jb-led td:nth-child(5) { grid-column: 3; grid-row: 1; }
  .jb-led td:nth-child(3) { grid-column: 1 / 4; grid-row: 2; }
  .jb-led td:nth-child(1) { grid-column: 1; grid-row: 3; font-size: 12px; color: var(--muted); }
  .jb-led td:nth-child(4) { grid-column: 2; grid-row: 3; }
  .jb-led td:nth-child(6) { grid-column: 3; grid-row: 3; text-align: right; white-space: nowrap; }
  .jb-led .jb-refbtn { white-space: normal; word-break: break-all; }
  .jb-tot strong { font-size: 16px; }
}

/* ---------- the A4 sheet: mirrors the PDF the engine writes, so it stays as the Job Desk drew it ---------- */
.jb-sheet { color: var(--doc-text); }
@media (prefers-reduced-motion: no-preference) { .jb-sheet { transition: box-shadow 160ms ease; } }
.jb-sheet .doc { padding: 56px 66px 40px; font-size: 11.6px; line-height: 1.55; color: var(--doc-text); }
.jb-sheet .doc .dh { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--doc-ink); padding-bottom: 14px; }
.jb-sheet .doc .dkind, .jb-sheet .doc .dk { font-size: 7.8px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--doc-muted); }
.jb-sheet .doc h1 { font-size: 41px; font-weight: 700; letter-spacing: -0.035em; text-transform: uppercase; line-height: 1; margin: 10px 0 6px; color: var(--doc-ink); }
.jb-sheet .doc .dsub { font-size: 11.4px; color: var(--doc-text); max-width: 520px; }
.jb-sheet .doc .dhr { text-align: right; }
.jb-sheet .doc .dhr img { width: 86px; display: block; margin-left: auto; }
.jb-sheet .doc .dref { font-weight: 700; font-size: 11.4px; color: var(--doc-ink); margin-top: 8px; font-variant-numeric: tabular-nums; }
.jb-sheet .doc .dmeta { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid #999999; padding: 12px 0; margin-bottom: 8px; }
.jb-sheet .doc .dmeta > div { border-left: 1px solid var(--doc-rule); padding-left: 10px; display: grid; gap: 3px; }
.jb-sheet .doc .dmeta > div:first-child { border-left: 0; padding-left: 0; }
.jb-sheet .doc .dv { font-weight: 700; font-size: 12.2px; color: var(--doc-ink); font-variant-numeric: tabular-nums; }
.jb-sheet .doc .ds { padding-top: 12px; }
.jb-sheet .doc .dsh { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.jb-sheet .doc .dn { background: var(--doc-ink); color: #FFFFFF; font-size: 9.3px; font-weight: 700; padding: 1px 6px; font-variant-numeric: tabular-nums; }
.jb-sheet .doc .dt { font-size: 10.9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--doc-ink); white-space: nowrap; }
.jb-sheet .doc .dr { flex: 1; height: 1px; background: var(--doc-ink); }
.jb-sheet .doc p { margin: 0 0 6px; }
.jb-sheet .doc b { color: var(--doc-ink); }
.jb-sheet .doc ul { list-style: none; padding: 0; margin: 0 0 6px; }
.jb-sheet .doc li { position: relative; padding: 1px 0 1px 18px; margin-bottom: 2px; }
.jb-sheet .doc li::before { content: "///"; position: absolute; left: 0; top: 4px; font-size: 7.4px; color: #858585; letter-spacing: -0.04em; }
.jb-sheet .doc .dsubh { font-size: 9.8px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--doc-ink); margin: 4px 0 4px; }
.jb-sheet .doc .dcols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.jb-sheet .doc .dpar { display: grid; grid-template-columns: 1fr 1fr; }
.jb-sheet .doc .dpar > div { display: grid; gap: 2px; align-content: start; }
.jb-sheet .doc .dpar > div:first-child { border-right: 1px solid var(--doc-rule); margin-right: 20px; }
.jb-sheet .doc .dpar .dk { margin-bottom: 8px; }
.jb-sheet .doc .dpn { font-size: 13.8px; font-weight: 700; color: var(--doc-ink); }
.jb-sheet .doc .dpd { font-size: 10.6px; color: var(--doc-muted); }
.jb-sheet .doc .dtw { overflow: visible; }
.jb-sheet .doc .dtab { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.jb-sheet .doc .dtab th { font-size: 7.8px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--doc-muted); font-weight: 400; padding: 5px 0; border-bottom: 1px solid #858585; }
.jb-sheet .doc .dtab td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--doc-rule); vertical-align: top; font-variant-numeric: tabular-nums; }
.jb-sheet .doc .dtab td:last-child { padding-right: 0; }
.jb-sheet .doc .dtab td.b { font-weight: 700; color: var(--doc-ink); }
.jb-sheet .doc .dtab s { color: #858585; font-size: 10.4px; margin-right: 6px; font-weight: 400; }
.jb-sheet .doc .dtsub { font-weight: 400; color: var(--doc-muted); font-size: 10.1px; margin-top: 2px; }
.jb-sheet .doc .dtot { background: var(--doc-ink); color: #FFFFFF; display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; margin: 4px 0 8px; }
.jb-sheet .doc .dtot span { font-size: 9.8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.jb-sheet .doc .dtot strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.jb-sheet .doc .dbox { background: var(--doc-box); border-left: 3px solid var(--doc-ink); padding: 11px 16px; margin: 6px 0 8px; }
.jb-sheet .doc .dbox p { margin: 6px 0 0; }
.jb-sheet .doc .drow { display: grid; grid-template-columns: 150px 1fr; font-size: 10.6px; line-height: 1.75; }
.jb-sheet .doc .drow span { color: var(--doc-muted); }
.jb-sheet .doc .dsig { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 8px; }
.jb-sheet .doc .dsl { border-top: 1px solid var(--doc-ink); margin-top: 40px; padding-top: 6px; font-weight: 700; color: var(--doc-ink); }
.jb-sheet .doc .dsig .dpd { margin-top: 4px; }
.jb-sheet .doc .df { margin-top: 26px; border-top: 1px solid #858585; padding-top: 10px; display: flex; justify-content: space-between; gap: 12px; font-size: 7.6px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--doc-muted); }

/* ===== finance ===== */
/* Finances: the CNS Finances sheet inside the OS frame, in the standalone app's ruled language: a 1px ink rule over every
   block, uppercase tracked section titles with a running rule, big tabular numbers, hatched ink for money out.
   Layout follows the module's own width (container queries): one column on phones, two side by side when wide,
   job and payment lists turn into aligned rows with a header. Module tokens derive from the house ones. */
.fin { container: fin / inline-size; --fin-c2: var(--muted); }
@supports (color: color-mix(in srgb, red 50%, blue)) { .fin { --fin-c2: color-mix(in srgb, var(--ink) 45%, var(--paper)); } }
.fin-body { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.fin-intro { margin: 0; color: var(--muted); max-width: 72ch; }
.fin .tabs { margin-bottom: var(--s5); }
.fin-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5) var(--s6); align-items: start; }
.fin-col { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.fin-col:empty { display: none; }
.fin-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5) var(--s6); align-items: start; }
@container fin (min-width: 720px) {
  .fin-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fin-col:empty { display: flex; }
  /* the second row is flexible so a long attention list grows it instead of pushing the figures away from the hero */
  .fin-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "hero att" "sum att"; }
  .fin-top > .fin-hero { grid-area: hero; } .fin-top > .fin-sec { grid-area: att; } .fin-top > .fin-sum { grid-area: sum; }
}

/* sync line in the page head */
.fin-sync { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.fin-sync-f::before { content: "·"; margin-right: 7px; }
.fin-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.fin-dot.good { background: var(--paid); } .fin-dot.warn { background: var(--due); } .fin-dot.info { background: var(--ink); }
@media (prefers-reduced-motion: no-preference) { .fin-spin svg { animation: fin-rot 0.9s linear infinite; } }
@keyframes fin-rot { to { transform: rotate(360deg); } }

.fin-banner { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin: 0; }
.fin-banner > div { flex: 1 1 260px; min-width: 0; }
.fin-banner b { color: var(--ink); }
.fin-banner p { margin: 2px 0 0; }
.fin-keepnote { margin: 0 0 var(--s2); }

/* hero number */
.fin-hero { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--ink); padding-top: var(--s3); min-width: 0; }
.fin-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; margin: 2px 0 0; font-size: clamp(44px, 14vw, 64px); line-height: 0.95; font-weight: 700; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@container fin (min-width: 720px) { .fin-big { font-size: clamp(44px, 7.2cqi, 64px); } }
.fin-big small { white-space: nowrap; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--muted); }
.fin-big.neg { color: var(--stop); }
.fin-hero .fin-sub { margin: 6px 0 0; color: var(--text); }
.fin-hero .pill { align-self: flex-start; margin-top: 8px; white-space: normal; }
.fin-hero .fin-meter { height: 6px; margin-top: 10px; }

/* summary strip: cells ruled on the left; the strip clips the first column's rule so any column count lines up */
.fin-sum { overflow: hidden; border-top: 1px solid var(--ink); min-width: 0; }
.fin-sum-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: -13px; }
.fin-sum.n3 .fin-sum-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fin-sum-in > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fin-sum .v { font-size: 21px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fin-sum.n3 .v { font-size: 18px; }
.fin-sum .s { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.fin-sum .bad .v { color: var(--stop); }
@container fin (max-width: 340px) { .fin-sum.n3 .fin-sum-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the six Overview figures: 2 across on phones, 3 when full width, back to 2 while they share a half column, 3 again when it is wide */
@container fin (min-width: 560px) { .fin-sum.n6 .fin-sum-in { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fin-sum.n3 .v { font-size: 21px; } }
@container fin (min-width: 720px) { .fin-sum.n6 .fin-sum-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container fin (min-width: 1000px) { .fin-sum.n6 .fin-sum-in { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* sections: title, running ink rule, aside */
.fin-sec { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.fin-sh { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fin-st { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); line-height: 1.3; }
.fin-rule { flex: 1; height: 1px; background: var(--ink); min-width: 16px; }
.fin-sa { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin-foot { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.fin-src { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-src::before { content: "///"; letter-spacing: -0.1em; margin-right: 6px; font-weight: 400; }

/* ledger lines and totals */
.fin-lines { margin: 0; }
.fin-lines > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.fin-lines dt { min-width: 0; color: var(--text); }
.fin-lines dd { margin: 0; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }
.fin-lines dd small { display: inline-block; min-width: 48px; margin-left: 8px; color: var(--muted); font-size: 12px; }
.fin-lines .subl dt { padding-left: 14px; color: var(--muted); font-size: 13px; }
.fin-lines .subl dt::before { content: "///"; letter-spacing: -0.1em; margin-right: 6px; font-size: 10px; }
.fin-lines .subl dd { color: var(--muted); font-size: 13px; }
.fin-lines .bold dt, .fin-lines .bold dd { font-weight: 700; color: var(--ink); }
.fin-tot { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--ink); color: var(--on-ink); padding: 10px 14px; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: 1px; }
.fin-tot span { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.fin-tot strong { font-size: 18px; white-space: nowrap; }
.fin-tot small { margin-left: 8px; font-size: 12px; font-weight: 400; opacity: 0.75; }

/* needs attention */
.fin-att { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.fin-att button { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; }
.fin-att button:hover b { text-decoration: underline; }
.fin-att b { display: block; color: var(--ink); }
.fin-att small { color: var(--muted); font-size: 12px; }
.fin-chev { color: var(--muted); font-size: 18px; line-height: 1; }
.fin-none { margin: 0; padding: 11px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }

/* splits, legends, hatch */
.fin-split { display: flex; gap: 2px; height: 12px; }
.fin-split i { display: block; min-width: 3px; }
.fin-hatch { background: repeating-linear-gradient(135deg, var(--ink) 0 1.5px, var(--surface) 1.5px 4.5px); box-shadow: inset 0 0 0 1px var(--ink); }
.fin-sw { display: inline-block; flex: none; width: 12px; height: 12px; }
.fin-leg { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.fin-leg b { color: var(--ink); }
.fin-leg .r { text-align: right; font-variant-numeric: tabular-nums; }
.fin-leg .r strong { color: var(--ink); }
.fin-leg small { display: block; font-size: 12px; color: var(--muted); }

/* tables */
table.fin-led { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.fin-led th { text-align: right; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 6px 0 6px 8px; border-bottom: 1px solid var(--ink); white-space: nowrap; }
.fin-led td { text-align: right; padding: 9px 0 9px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; color: var(--text); }
.fin-led th:first-child, .fin-led td:first-child { text-align: left; padding-left: 0; }
.fin-led td b, .fin-led tr.bold td { color: var(--ink); font-weight: 700; }

/* rows: keep aside, expenses */
.fin-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.fin-rows li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.fin-rows li > div { min-width: 0; }
.fin-rows b { display: block; color: var(--ink); overflow-wrap: anywhere; }
.fin-rows small { color: var(--muted); font-size: 12px; }
.fin-rows .num { font-weight: 700; color: var(--ink); white-space: nowrap; }
.fin-rows li.dim b, .fin-rows li.dim .num { color: var(--muted); font-weight: 400; }

/* filters */
.fin-filters { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; }
.fin-q { flex: 1 1 240px; min-width: 0; max-width: 420px; }
.fin-q input { font-size: 16px; }
@container fin (min-width: 720px) { .fin-q input { font-size: 14px; } }

/* job and payment lists: three-line cards on phones, aligned two-line rows with a header when wide */
.fin-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.fin-lh { display: none; }
.fin-row { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.fin-r1 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fin-r1 h3 { margin: 0; min-width: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; }
.fin-amt { font-size: 16px; font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin-r2 { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--text); }
.fin-proj { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-left { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin-r3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; color: var(--muted); }
.fin-gp, .fin-hist { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
.fin-empty { padding: var(--s5) 0; color: var(--muted); border-bottom: 1px solid var(--line); }
.fin-meter { height: 4px; background: var(--soft); }
.fin-meter i { display: block; height: 100%; background: var(--ink); }
.fin-meter.stop i { background: var(--stop); }
@container fin (min-width: 820px) {
  .fin-list { border-top: 0; }
  .fin-lh, .fin-row { display: grid; grid-template-columns: 96px minmax(0, 1.6fr) minmax(124px, 0.8fr) minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 16px; }
  .fin-lh { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 6px 0; border-bottom: 1px solid var(--ink); }
  .fin-lh span:last-child { text-align: right; }
  .fin-row { row-gap: 3px; align-items: center; padding: 10px 0; grid-template-areas: "id cl st dt amt" "id pj st dt gp"; }
  .fin-row.pay { grid-template-areas: "id cl st dt amt" "id pj mt hs lf"; }
  .fin-r1, .fin-r2, .fin-r3 { display: contents; }
  .fin-row .code { grid-area: id; justify-self: start; }
  .fin-r1 h3 { grid-area: cl; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fin-amt { grid-area: amt; text-align: right; font-size: 14.5px; }
  .fin-proj { grid-area: pj; font-size: 12.5px; color: var(--muted); }
  .fin-r3 .pill { grid-area: st; justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .fin-dt { grid-area: dt; font-size: 12.5px; color: var(--text); }
  .fin-gp { grid-area: gp; text-align: right; margin-left: 0; color: var(--muted); }
  .fin-row.pay .fin-meter { grid-area: mt; align-self: center; }
  .fin-hist { grid-area: hs; margin-left: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fin-left { grid-area: lf; text-align: right; }
}

/* charts */
.fin-chart { min-height: 160px; }
.fin-chart svg { display: block; overflow: visible; }
.fin-chart .fin-grid { stroke: var(--line); stroke-width: 1; }
.fin-chart .fin-base { stroke: var(--ink); stroke-width: 1; }
.fin-chart .fin-ax { fill: var(--muted); font: 10.5px var(--sans); }
.fin-chart .fin-lab { fill: var(--ink); font: 700 11px var(--sans); }
.fin-chart .fin-hit { cursor: pointer; outline: none; }
.fin-chart .fin-hit:focus-visible { stroke: var(--ink); stroke-width: 1.5; }
.fin-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--text); }
.fin-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fin-legend i { display: inline-block; width: 12px; height: 12px; }
.fin-legend i.ln { height: 2px; width: 16px; }
.fin-nums summary { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); cursor: pointer; padding-block: 4px; }
.fin-nums[open] summary { margin-bottom: 6px; }
.fin-hbars { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.fin-hb { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.fin-hb-l span, .fin-hb-l small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-hb-l span { color: var(--ink); font-weight: 700; font-size: 13px; }
.fin-hb-l small { font-size: 11.5px; color: var(--muted); }
.fin-hb-t { height: 10px; }
.fin-hb-t i { display: block; height: 100%; }
.fin-hb-v { min-width: 52px; text-align: right; font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.fin-tip { position: fixed; z-index: 150; max-width: 240px; padding: 8px 10px; border-radius: 2px; background: var(--ink); color: var(--on-ink); font-size: 12.5px; line-height: 1.45; font-variant-numeric: tabular-nums; pointer-events: none; }
.fin-tip b { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }

/* loading */
.fin-load { display: flex; flex-direction: column; gap: var(--s4); }
.fin-load .skel.b { height: 58px; width: 75%; }

/* sheet settings modal (rendered outside .fin) */
.fin-file { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); margin-bottom: var(--s4); }
.fin-file b { color: var(--ink); font-size: 15px; }
.fin-id { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.fin-link { color: var(--ink); font-weight: 700; align-self: flex-start; }
.fin-frow { display: flex; gap: 8px; }
.fin-frow input { flex: 1; min-width: 0; }
.fin-msg { margin: 4px 0 0; min-height: 1.2em; font-size: 12.5px; color: var(--stop); }
.fin-reset { margin: 0 0 var(--s4); color: var(--ink); font-weight: 700; }
.fin-notes { list-style: none; margin: var(--s2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.fin-notes li { position: relative; padding-left: 22px; }
.fin-notes li::before { content: "///"; position: absolute; left: 0; top: 0; color: var(--muted); letter-spacing: -0.1em; }

/* ===== users ===== */
/* Users page */
.us .rows { margin-bottom: var(--s5); }
.us-row .av { flex: none; }
.us-off .t { color: var(--muted); }
.us-warn { color: var(--due); font-weight: 600; }
.us-hint { margin: -12px 0 var(--s5); }
.us-sec { margin-top: var(--s5); max-width: 720px; }
.us-sec .sec-h { justify-content: flex-start; }
.us-p { margin: 0 0 10px; color: var(--muted); }
.us-role { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.us-role legend { margin-bottom: 6px; padding: 0; }
.us-opt { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); padding: 10px 12px; border-radius: 2px; cursor: pointer; }
.us-opt:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.us-opt input { margin-top: 3px; }
.us-opt > span { display: grid; gap: 2px; }
.us-opt .sub { font-size: 12.5px; }
.us-perms { display: grid; gap: 8px; padding-left: 2px; }
.us-newm { display: flex; gap: 8px; align-items: center; margin-top: 6px; font-size: 13px; }
.us-more { margin-top: var(--s5); }
.us-imp { max-width: 640px; display: grid; gap: 12px; }
.us-imp p { margin: 0; }
.us-imp-l { margin: 0; padding-left: 18px; display: grid; gap: 2px; }

/* ===== shell: sign in, owner setup, account menu ===== */
#boot[hidden] { display: none; }
.sh-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--paper); }
.sh-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--ink); padding: 28px 26px 22px; }
.sh-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11.5px; color: var(--ink); margin-bottom: 22px; }
.sh-brand .mark { background: var(--ink); width: 40px; height: 26px; }
.sh-h { font-size: 22px; line-height: 1.2; margin: 0 0 8px; color: var(--ink); letter-spacing: -0.01em; }
.sh-p { margin: 0 0 18px; color: var(--muted); }
.sh-wait { margin: 0; }
.sh-go { justify-content: center; padding: 10px 14px; }
.sh-card .form { gap: 14px; }
.sh-card input { width: 100%; padding: 9px 10px; border: 1px solid var(--line); background: var(--surface); border-radius: 2px; font-size: 15px; }
.sh-card input:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 1px var(--ink); }
.sh-foot { margin: 16px 0 0; font-size: 12.5px; color: var(--muted); }
/* account block in the sidebar */
.acct { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 0 0; font-size: 12px; color: var(--side-mute); }
.acct b { color: var(--side-text); font-weight: 600; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct button { background: none; border: 0; padding: 0; color: var(--side-text); text-decoration: underline; text-underline-offset: 2px; font-size: 12px; }
.acct button:hover { color: var(--side-hi); }
/* phones: the sidebar is a strip of sections, so the account lives behind a button in the top bar */
.acct-btn { display: none; }
@media (max-width: 900px) { .side-foot .acct { display: none; } .acct-btn { display: inline-flex; } }