@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/montserrat-latin-400-normal.6e2658ad73.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/montserrat-latin-600-normal.a4f64ab8a0.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/montserrat-latin-700-normal.ae5da15d66.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cairo";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/cairo-arabic-700-normal.2d843a01ca.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Cairo";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/cairo-latin-700-normal.c93f95f05c.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/tajawal-arabic-400-normal.86dcc0150b.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/tajawal-latin-400-normal.a9e8e937c5.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/tajawal-arabic-700-normal.18fca0c18f.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/tajawal-latin-700-normal.aba40d14b5.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--wm:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22228%22%20height%3D%22176%22%3E%3Csvg%20x%3D%2260%22%20y%3D%2244%22%20width%3D%22108%22%20height%3D%2269%22%20opacity%3D%22.055%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20407%20260%22%3E%3Cpath%20fill%3D%22%23221D1E%22%20d%3D%22M27.649%2C41.375L30.448%2C43.194A15.400%2C15.400%200%200%201%2029.202%2C45.692L26.065%2C44.552A12.150%2C12.150%200%200%201%2024.214%2C46.643L25.729%2C49.619A15.400%2C15.400%200%200%201%2023.401%2C51.159L21.254%2C48.603A12.150%2C12.150%200%200%201%2018.605%2C49.489L18.429%2C52.823A15.400%2C15.400%200%200%201%2015.643%2C52.993L15.062%2C49.706A12.150%2C12.150%200%200%201%2012.325%2C49.149L10.506%2C51.948A15.400%2C15.400%200%200%201%208.008%2C50.702L9.148%2C47.565A12.150%2C12.150%200%200%201%207.057%2C45.714L4.081%2C47.229A15.400%2C15.400%200%200%201%202.541%2C44.901L5.097%2C42.754A12.150%2C12.150%200%200%201%204.211%2C40.105L0.877%2C39.929A15.400%2C15.400%200%200%201%200.707%2C37.143L3.994%2C36.562A12.150%2C12.150%200%200%201%204.551%2C33.825L1.752%2C32.006A15.400%2C15.400%200%200%201%202.998%2C29.508L6.135%2C30.648A12.150%2C12.150%200%200%201%207.986%2C28.557L6.471%2C25.581A15.400%2C15.400%200%200%201%208.799%2C24.041L10.946%2C26.597A12.150%2C12.150%200%200%201%2013.595%2C25.711L13.771%2C22.377A15.400%2C15.400%200%200%201%2016.557%2C22.207L17.138%2C25.494A12.150%2C12.150%200%200%201%2019.875%2C26.051L21.694%2C23.252A15.400%2C15.400%200%200%201%2024.192%2C24.498L23.052%2C27.635A12.150%2C12.150%200%200%201%2025.143%2C29.486L28.119%2C27.971A15.400%2C15.400%200%200%201%2029.659%2C30.299L27.103%2C32.446A12.150%2C12.150%200%200%201%2027.989%2C35.095L31.323%2C35.271A15.400%2C15.400%200%200%201%2031.493%2C38.057L28.206%2C38.638A12.150%2C12.150%200%200%201%2027.649%2C41.375ZM25.420%2C37.600A9.320%2C9.320%200%201%200%206.780%2C37.600A9.320%2C9.320%200%201%200%2025.420%2C37.600Z%22%20fill-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22%23861C40%22%20d%3D%22M21.886%2C38.275L22.704%2C38.857A6.850%2C6.850%200%200%201%2022.188%2C40.445L21.184%2C40.435A5.950%2C5.950%200%200%201%2020.332%2C41.608L20.652%2C42.560A6.850%2C6.850%200%200%201%2019.301%2C43.541L18.495%2C42.943A5.950%2C5.950%200%200%201%2017.115%2C43.391L16.815%2C44.349A6.850%2C6.850%200%200%201%2015.145%2C44.349L14.845%2C43.391A5.950%2C5.950%200%200%201%2013.465%2C42.943L12.659%2C43.541A6.850%2C6.850%200%200%201%2011.308%2C42.560L11.628%2C41.608A5.950%2C5.950%200%200%201%2010.776%2C40.435L9.772%2C40.445A6.850%2C6.850%200%200%201%209.256%2C38.857L10.074%2C38.275A5.950%2C5.950%200%200%201%2010.074%2C36.825L9.256%2C36.243A6.850%2C6.850%200%200%201%209.772%2C34.655L10.776%2C34.665A5.950%2C5.950%200%200%201%2011.628%2C33.492L11.308%2C32.540A6.850%2C6.850%200%200%201%2012.659%2C31.559L13.465%2C32.157A5.950%2C5.950%200%200%201%2014.845%2C31.709L15.145%2C30.751A6.850%2C6.850%200%200%201%2016.815%2C30.751L17.115%2C31.709A5.950%2C5.950%200%200%201%2018.495%2C32.157L19.301%2C31.559A6.850%2C6.850%200%200%201%2020.652%2C32.540L20.332%2C33.492A5.950%2C5.950%200%200%201%2021.184%2C34.665L22.188%2C34.655A6.850%2C6.850%200%200%201%2022.704%2C36.243L21.886%2C36.825A5.950%2C5.950%200%200%201%2021.886%2C38.275ZM19.180%2C37.550A3.200%2C3.200%200%201%200%2012.780%2C37.550A3.200%2C3.200%200%201%200%2019.180%2C37.550Z%22%20fill-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22%23861C40%22%20d%3D%22M53.765%2C22.732L56.654%2C24.891A17.450%2C17.450%200%200%201%2055.096%2C27.644L51.758%2C26.279A13.950%2C13.950%200%200%201%2049.510%2C28.566L50.933%2C31.881A17.450%2C17.450%200%200%201%2048.207%2C33.486L45.998%2C30.635A13.950%2C13.950%200%200%201%2042.908%2C31.492L42.483%2C35.074A17.450%2C17.450%200%200%201%2039.320%2C35.101L38.833%2C31.528A13.950%2C13.950%200%200%201%2035.728%2C30.725L33.569%2C33.614A17.450%2C17.450%200%200%201%2030.816%2C32.056L32.181%2C28.718A13.950%2C13.950%200%200%201%2029.894%2C26.470L26.579%2C27.893A17.450%2C17.450%200%200%201%2024.974%2C25.167L27.825%2C22.958A13.950%2C13.950%200%200%201%2026.968%2C19.868L23.386%2C19.443A17.450%2C17.450%200%200%201%2023.359%2C16.280L26.932%2C15.793A13.950%2C13.950%200%200%201%2027.735%2C12.688L24.846%2C10.529A17.450%2C17.450%200%200%201%2026.404%2C7.776L29.742%2C9.141A13.950%2C13.950%200%200%201%2031.990%2C6.854L30.567%2C3.539A17.450%2C17.450%200%200%201%2033.293%2C1.934L35.502%2C4.785A13.950%2C13.950%200%200%201%2038.592%2C3.928L39.017%2C0.346A17.450%2C17.450%200%200%201%2042.180%2C0.319L42.667%2C3.892A13.950%2C13.950%200%200%201%2045.772%2C4.695L47.931%2C1.806A17.450%2C17.450%200%200%201%2050.684%2C3.364L49.319%2C6.702A13.950%2C13.950%200%200%201%2051.606%2C8.950L54.921%2C7.527A17.450%2C17.450%200%200%201%2056.526%2C10.253L53.675%2C12.462A13.950%2C13.950%200%200%201%2054.532%2C15.552L58.114%2C15.977A17.450%2C17.450%200%200%201%2058.141%2C19.140L54.568%2C19.627A13.950%2C13.950%200%200%201%2053.765%2C22.732ZM51.230%2C17.710A10.480%2C10.480%200%201%200%2030.270%2C17.710A10.480%2C10.480%200%201%200%2051.230%2C17.710Z%22%20fill-rule%3D%22evenodd%22%2F%3E%3Crect%20x%3D%226.88%22%20y%3D%2264.8%22%20width%3D%2218.0%22%20height%3D%22124.0%22%20fill%3D%22%23221D1E%22%2F%3E%3Cpath%20fill%3D%22%23221D1E%22%20d%3D%22M75.50%2C190.05C75.40%2C190.03%2074.54%2C189.95%2073.59%2C189.88C71.02%2C189.69%2065.97%2C188.66%2063.38%2C187.79C56.18%2C185.38%2047.37%2C180.52%2046.62%2C178.55C46.35%2C177.84%2046.37%2C158.28%2046.65%2C157.94C47.16%2C157.29%2047.82%2C157.58%2048.84%2C158.91C50.66%2C161.30%2054.72%2C165.05%2058.12%2C167.48C63.20%2C171.11%2069.36%2C173.51%2075.19%2C174.13C82.27%2C174.89%2087.37%2C173.97%2091.62%2C171.16C99.38%2C166.03%20101.16%2C156.89%2095.94%2C148.88C93.55%2C145.19%2088.71%2C140.65%2084.44%2C138.07C83.89%2C137.73%2082.59%2C136.96%2081.56%2C136.34C80.53%2C135.72%2079.10%2C134.85%2078.38%2C134.40C75.05%2C132.34%2074.30%2C131.87%2072.19%2C130.59C70.95%2C129.83%2069.54%2C128.98%2069.06%2C128.69C56.39%2C121.06%2049.03%2C113.01%2046.90%2C104.44C46.08%2C101.14%2046.06%2C101.01%2046.06%2C96.12C46.06%2C88.89%2047.14%2C84.51%2050.10%2C79.64C53.95%2C73.33%2061.34%2C67.41%2067.56%2C65.67C68.18%2C65.50%2069.25%2C65.17%2069.94%2C64.94C70.62%2C64.71%2071.78%2C64.43%2072.50%2C64.32C73.22%2C64.21%2074.38%2C64.01%2075.06%2C63.87C79.37%2C63.02%2086.61%2C63.05%2090.47%2C63.93C91.21%2C64.11%2092.39%2C64.33%2093.08%2C64.43C93.78%2C64.53%2095.05%2C64.84%2095.90%2C65.11C96.74%2C65.38%2097.69%2C65.67%2098.00%2C65.75C100.15%2C66.31%20106.87%2C69.44%20109.01%2C70.88C110.16%2C71.65%20110.51%2C72.03%20110.72%2C72.75C110.87%2C73.23%20111.05%2C89.48%20110.92%2C90.27C110.72%2C91.48%20109.98%2C91.56%20108.78%2C90.50C102.18%2C84.67%2095.13%2C81.14%2087.50%2C79.86C84.64%2C79.38%2078.99%2C79.44%2076.43%2C79.97C67.66%2C81.80%2062.44%2C86.85%2062.46%2C93.50C62.47%2C97.91%2064.01%2C101.39%2067.74%2C105.42C69.61%2C107.44%2075.27%2C111.62%2079.44%2C114.06C80.12%2C114.46%2081.11%2C115.04%2081.62%2C115.35C83.57%2C116.50%2084.75%2C117.20%2086.88%2C118.44C89.71%2C120.09%2093.12%2C122.17%2096.16%2C124.13C101.21%2C127.38%20107.11%2C132.95%20109.35%2C136.59C109.69%2C137.12%20110.29%2C138.01%20110.69%2C138.56C111.38%2C139.52%20112.79%2C142.26%20113.12%2C143.31C113.21%2C143.59%20113.52%2C144.40%20113.81%2C145.12C114.10%2C145.85%20114.44%2C146.89%20114.56%2C147.44C114.67%2C147.99%20114.90%2C148.94%20115.07%2C149.56C115.92%2C152.78%20116.07%2C159.67%20115.36%2C162.78C115.22%2C163.42%20114.94%2C164.67%20114.75%2C165.56C114.37%2C167.32%20113.35%2C170.26%20112.77%2C171.29C112.57%2C171.65%20112.28%2C172.25%20112.12%2C172.62C110.83%2C175.66%20106.76%2C180.39%20103.08%2C183.12C97.60%2C187.19%2092.11%2C189.26%2085.01%2C189.94C83.30%2C190.10%2076.10%2C190.19%2075.50%2C190.05Z%22%20fill-rule%3D%22evenodd%22%2F%3E%3Ccircle%20cx%3D%22194.677%22%20cy%3D%22126.58%22%20r%3D%2256.177%22%20fill%3D%22none%22%20stroke%3D%22%23861C40%22%20stroke-width%3D%226.55%22%2F%3E%3Cpath%20d%3D%22M125.580%2C129.114A69.143%2C69.143%200%201%200%20197.814%2C57.508%22%20fill%3D%22none%22%20stroke%3D%22%23861C40%22%20stroke-width%3D%225.7%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M254.014%2C183.086A81.938%2C81.938%200%200%200%20255.088%2C71.223%22%20fill%3D%22none%22%20stroke%3D%22%23861C40%22%20stroke-width%3D%226.0%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20fill%3D%22%23221D1E%22%20d%3D%22M290.5%2C64.8H307.28L348.06%2C115.0L388.84%2C64.8H405.62V188.8H387.75V92.8L348.06%2C141.5L308.12%2C92.6V188.8H290.5Z%22%2F%3E%3Cpath%20fill%3D%22%23861C40%22%20d%3D%22M313.88%2C258.49C308.14%2C258.09%20302.72%2C255.29%20299.61%2C251.12C297.96%2C248.91%20297.70%2C248.51%20297.23%2C247.59C295.66%2C244.47%20295.07%2C241.79%20295.07%2C237.88C295.07%2C236.27%20295.39%2C233.27%20295.67%2C232.31C296.82%2C228.31%20299.95%2C223.75%20302.91%2C221.79C303.41%2C221.46%20304.15%2C220.92%20304.56%2C220.59C305.51%2C219.82%20308.22%2C218.48%20309.66%2C218.07C313.23%2C217.05%20319.84%2C216.99%20323.44%2C217.95C324.06%2C218.11%20325.15%2C218.40%20325.87%2C218.58C328.20%2C219.16%20330.02%2C220.09%20330.47%2C220.91C330.79%2C221.50%20330.79%2C224.79%20330.47%2C225.28C329.98%2C226.03%20328.81%2C225.84%20326.89%2C224.68C323.82%2C222.83%20316.41%2C222.18%20311.56%2C223.35C309.18%2C223.92%20305.98%2C226.27%20303.98%2C228.92C300.15%2C234.00%20300.10%2C242.13%20303.87%2C247.19C304.12%2C247.53%20304.48%2C248.05%20304.66%2C248.33C304.98%2C248.84%20305.31%2C249.09%20308.10%2C250.94C309.60%2C251.94%20310.21%2C252.21%20311.78%2C252.62C316.61%2C253.86%20321.98%2C253.33%20326.44%2C251.19C329.41%2C249.75%20329.51%2C249.73%20330.41%2C250.11C331.26%2C250.48%20331.38%2C250.72%20331.38%2C252.15C331.38%2C254.71%20331.08%2C255.18%20328.81%2C256.26C325.07%2C258.04%20319.44%2C258.88%20313.88%2C258.49Z%20M386.66%2C258.50C383.13%2C258.16%20380.78%2C257.25%20380.09%2C255.95C379.70%2C255.23%20379.72%2C219.30%20380.11%2C218.75C380.83%2C217.73%20382.81%2C217.37%20384.06%2C218.02C385.28%2C218.66%20385.19%2C218.07%20385.19%2C224.92C385.19%2C230.40%20385.21%2C230.98%20385.41%2C231.42C385.85%2C232.40%20386.47%2C232.49%20387.91%2C231.81C390.00%2C230.81%20392.99%2C230.61%20395.47%2C231.30C397.45%2C231.85%20397.97%2C232.18%20400.01%2C234.23C402.18%2C236.41%20402.56%2C236.94%20402.81%2C238.08C402.91%2C238.55%20403.14%2C239.50%20403.33%2C240.19C403.73%2C241.62%20403.85%2C246.39%20403.53%2C247.91C402.83%2C251.30%20402.22%2C252.46%20400.01%2C254.69C396.94%2C257.78%20392.46%2C259.06%20386.66%2C258.50Z%20M357.03%2C258.32C355.59%2C257.97%20354.54%2C257.31%20353.05%2C255.82C351.25%2C254.02%20350.93%2C253.41%20350.75%2C251.38C350.67%2C250.58%20350.57%2C249.57%20350.51%2C249.12C350.45%2C248.68%20350.38%2C244.88%20350.35%2C240.68C350.31%2C232.21%20350.28%2C232.43%20351.39%2C231.76C352.28%2C231.22%20354.51%2C231.29%20355.18%2C231.89C355.88%2C232.50%20355.88%2C232.55%20355.87%2C240.90C355.85%2C250.61%20355.96%2C251.33%20357.58%2C252.89C359.76%2C254.99%20363.30%2C254.63%20365.88%2C252.06C367.39%2C250.57%20367.31%2C251.14%20367.33%2C241.62C367.34%2C231.73%20367.29%2C232.86%20367.77%2C232.31C368.38%2C231.62%20368.73%2C231.49%20370.12%2C231.46C371.50%2C231.43%20372.06%2C231.70%20372.53%2C232.63C372.87%2C233.30%20372.87%2C256.33%20372.53%2C257.00C371.87%2C258.30%20368.88%2C258.41%20367.51%2C257.17C366.40%2C256.17%20366.28%2C256.18%20363.97%2C257.33C363.09%2C257.77%20362.02%2C258.21%20361.59%2C258.31C360.63%2C258.54%20357.95%2C258.54%20357.03%2C258.32Z%20M339.00%2C257.72C337.72%2C257.07%20337.82%2C258.74%20337.77%2C238.25C337.72%2C219.26%20337.71%2C219.59%20338.28%2C218.74C339.34%2C217.18%20342.19%2C217.37%20342.98%2C219.05C343.25%2C219.62%20343.25%2C219.62%20343.25%2C237.34C343.25%2C256.73%20343.26%2C256.38%20342.52%2C257.37C342.02%2C258.05%20340.03%2C258.24%20339.00%2C257.72Z%20M391.61%2C253.62C395.79%2C253.10%20398.44%2C249.62%20398.43%2C244.69C398.43%2C241.69%20397.76%2C239.75%20396.10%2C237.94C394.39%2C236.07%20391.32%2C235.33%20389.03%2C236.24C388.67%2C236.38%20387.96%2C236.59%20387.47%2C236.70C386.28%2C236.96%20386.04%2C237.13%20385.64%2C237.98C385.18%2C238.97%20385.11%2C251.31%20385.57%2C252.18C386.22%2C253.41%20388.65%2C253.99%20391.61%2C253.62Z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E%3C%2Fsvg%3E")}
/* ISOM Club website. One stylesheet for every page.
   The look comes from the club's own posts: the pale grey ground with the
   tiled mark, the thin wine frame with square corners, the line-dot divider,
   and the rings of the O. English on top, Arabic under it at the same size.
   Figures are Latin digits in both languages. */

/* ---------- tokens ---------- */
:root {
  --paper: #E7E5E5;
  --paper-2: #F2F1F1;
  --card: #FFFFFF;
  --ink: #221D1E;
  --ink-2: #565051;
  --ink-3: #6B6365;
  --wine: #861C40;
  --wine-2: #6A1433;
  --wine-3: #3F0B1F;
  --logo-wine: #950E33;
  --rose: #EAD3DA;
  --rose-2: #F6ECEF;
  --hair: rgba(34, 29, 30, .13);
  --hair-2: rgba(34, 29, 30, .22);
  --line: rgba(134, 28, 64, .55);
  --ok: #17654A;
  --ok-bg: #E2F1EA;
  --warn: #8A5510;
  --warn-bg: #F8ECD9;
  --bad: #A3232F;
  --bad-bg: #F9E3E5;
  /* course colours, the guide's own (yellow taken darker on screen for contrast) */
  --c-core: #660000; --c-lang: #1F4E79; --c-math: #0E6E63; --c-acct: #8A5E14;
  --c-econ: #9C4614; --c-biz: #5B3A72; --c-elective: #8F6316; --c-support: #55632B;
  --c-analytics: #0E6E63; --c-appdev: #1F4E79; --c-technical: #55632B;

  --f-en: "Montserrat", "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-ar: "Tajawal", "Montserrat", sans-serif;
  --f-ar-h: "Cairo", "Tajawal", sans-serif;

  --gut: 16px;
  --wrap: 1440px;
  --r: 10px;
  --r-s: 6px;
  --shadow: 0 1px 2px rgba(34, 29, 30, .06), 0 8px 24px -12px rgba(34, 29, 30, .18);
  --head-h: 60px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: light;
}
@media (min-width: 700px) { :root { --gut: 28px; --head-h: 68px; } }
@media (min-width: 1100px) { :root { --gut: 40px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 12px); }
body {
  margin: 0; min-height: 100vh; min-height: 100svh;
  font-family: var(--f-en); font-size: 16px; line-height: 1.6; font-weight: 400;
  color: var(--ink); background-color: var(--paper);
  background-image: var(--wm); background-size: 228px 176px; background-position: 50% -24px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: lining-nums;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
img.is-broken { visibility: hidden; }
a { color: var(--wine); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--wine-2); }
:focus-visible { outline: 3px solid var(--wine); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--rose); color: var(--ink); }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--wine); color: #fff; padding: 10px 14px; border-radius: var(--r-s); }
.skip:focus { top: 12px; }

/* Arabic: its own fonts, its own direction, never letter-spaced */
[lang="ar"] { font-family: var(--f-ar); direction: rtl; letter-spacing: 0; }
h1 [lang="ar"], h2 [lang="ar"], h3 [lang="ar"], .ar-h { font-family: var(--f-ar-h); font-weight: 700; line-height: 1.7; }
.bi { display: block; }
.bi > [lang="ar"] { display: block; text-align: right; }
.c .bi > [lang="ar"], .bi.c > [lang="ar"], .c > [lang="ar"] { text-align: center; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.nowrap { white-space: nowrap; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: calc(780px + 2 * var(--gut)); }
.sec { padding-block: 64px; }
@media (min-width: 900px) { .sec { padding-block: 96px; } }
.sec--tight { padding-block: 40px; }
.stack > * + * { margin-top: var(--s, 16px); }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.grid { display: grid; gap: 16px; }
.grid > *, .row > * { min-width: 0; }
.c { text-align: center; }
.muted { color: var(--ink-2); }
.small { font-size: 14px; }
.tiny { font-size: 13px; }

/* section heading: English over Arabic, the club's divider under */
.sh { display: grid; gap: 4px; margin-bottom: 28px; }
.sh h2 { font-size: clamp(25px, 3.4vw, 34px); color: var(--wine); }
.sh h2 [lang="ar"] { display: block; font-size: inherit; text-align: left; }
.sh p { color: var(--ink-2); max-width: 64ch; }
.sh p [lang="ar"] { display: block; }
.sh.c { justify-items: center; }
.sh.c p { margin-inline: auto; }
.sh.c p [lang="ar"], .sh.c h2 [lang="ar"] { text-align: center; }

/* the club's divider: line, three dots, line */
.orn { display: flex; align-items: center; gap: 10px; width: min(300px, 70%); margin: 14px auto; color: var(--wine); }
.orn::before, .orn::after { content: ""; flex: 1; height: 1.5px; background: currentColor; }
.orn i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.orn--start { margin-inline: 0; }

/* the frame from the posts: a thin wine line with a filled square at each corner */
.frame { position: relative; --fi: 6px; --fs: 11px; padding: calc(var(--fi) + 20px); }
.frame::before {
  content: ""; position: absolute; inset: var(--fi); border: 1.5px solid var(--wine); pointer-events: none;
}
.frame::after {
  content: ""; position: absolute; inset: calc(var(--fi) - var(--fs) / 2 + .75px); pointer-events: none;
  background:
    linear-gradient(var(--wine), var(--wine)) left top / var(--fs) var(--fs) no-repeat,
    linear-gradient(var(--wine), var(--wine)) right top / var(--fs) var(--fs) no-repeat,
    linear-gradient(var(--wine), var(--wine)) left bottom / var(--fs) var(--fs) no-repeat,
    linear-gradient(var(--wine), var(--wine)) right bottom / var(--fs) var(--fs) no-repeat;
}

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 40; height: var(--head-h);
  background: rgba(231, 229, 229, .86); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .2s, background-color .2s;
}
.top.is-stuck { border-bottom-color: var(--hair); }
.top .wrap { height: 100%; display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; margin-inline-end: auto; min-width: 0; min-height: 44px; }
.brand > svg, .brand > .mark { height: 38px; width: auto; flex: none; }
@media (min-width: 700px) { .brand > svg, .brand > .mark { height: 44px; } }
.brand__t { display: none; font-size: 12px; line-height: 1.25; font-weight: 600; color: var(--ink-2); }
.brand__t [lang="ar"] { display: block; font-weight: 500; }
@media (min-width: 1320px) { .brand__t { display: block; } }
.nav { display: none; gap: 2px; }
.nav a {
  display: grid; justify-items: center; padding: 6px 12px; border-radius: var(--r-s);
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; line-height: 1.2;
}
.nav a [lang="ar"] { font-size: 14px; font-weight: 500; color: var(--ink-2); line-height: 1.5; }
.nav a:hover { background: rgba(134, 28, 64, .07); color: var(--wine); }
.nav a[aria-current="page"] { color: var(--wine); box-shadow: inset 0 -2px 0 var(--wine); border-radius: 0; }
.menu-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1.5px solid var(--hair-2); border-radius: var(--r-s); background: var(--card); cursor: pointer; font-weight: 600; font-size: 14px;
}
.menu-btn svg { width: 18px; height: 18px; }

/* full-screen menu on phones */
.sheet {
  position: fixed; inset: 0; z-index: 60; background: var(--paper); background-image: var(--wm); background-size: 228px 176px;
  display: flex; flex-direction: column; padding: 14px var(--gut) 24px; overflow-y: auto;
}
.sheet[hidden] { display: none; }
.sheet__top { display: flex; align-items: center; justify-content: space-between; height: 48px; }
.sheet__top svg.logo { height: 38px; width: auto; }
.sheet nav { display: grid; gap: 4px; margin-top: 20px; }
.sheet nav a {
  display: grid; padding: 12px 14px; border-radius: var(--r-s); text-decoration: none; color: var(--ink);
  font-size: 22px; font-weight: 700; line-height: 1.3; background: rgba(255, 255, 255, .55); border: 1px solid var(--hair);
}
.sheet nav a [lang="ar"] { font-family: var(--f-ar-h); font-size: 22px; color: var(--ink-2); text-align: right; line-height: 1.7; }
.sheet nav a[aria-current="page"] { border-color: var(--wine); color: var(--wine); }
.sheet__foot { margin-top: auto; padding-top: 24px; display: grid; gap: 10px; }

/* ---------- buttons, fields ---------- */
.btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  min-height: 52px; padding: 8px 22px; border-radius: var(--r-s); border: 1.5px solid var(--wine);
  background: var(--wine); color: #fff; text-decoration: none; font-weight: 700; font-size: 16px; line-height: 1.25; cursor: pointer;
  transition: background-color .15s, color .15s, transform .15s var(--ease);
}
.btn [lang="ar"] { font-weight: 700; font-size: 16px; line-height: 1.5; }
.btn:hover { background: var(--wine-2); border-color: var(--wine-2); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--wine); }
.btn--ghost:hover { background: rgba(134, 28, 64, .08); color: var(--wine-2); }
.btn--light { background: #fff; color: var(--wine); border-color: #fff; }
.btn--light:hover { background: var(--rose-2); color: var(--wine-2); border-color: var(--rose-2); }
.btn--sm { min-height: 44px; padding: 6px 14px; font-size: 14px; }
.btn--sm [lang="ar"] { font-size: 14px; }
.btn--wide { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn--row { flex-direction: row; gap: 10px; }
.btn svg { width: 20px; height: 20px; flex: none; }

/* align-content: start keeps a field's label and box at their own height when the field beside it is taller (a hint under
   one box, Eisa 6 Oct 2026: the Name box sat lower than the KU ID box beside it) */
.field { display: grid; gap: 6px; align-content: start; }
/* Fields side by side share their rows (from 700px, where .two and .three stand them side by side): each label takes the
   height of the tallest one beside it, so the boxes under them line up even when one label runs to two lines ("Registration
   stays open after it starts"). The gaps inside a field become margins, and the row's own gap goes, so a field with no hint
   or message still ends where its box ends. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 700px) {
    .two:has(> .field), .three:has(> .field) { row-gap: 0; }
    .two > .field, .three > .field { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
    .two > .field > * + *, .three > .field > * + * { margin-top: 6px; }
    .two > .field:nth-child(n+3), .three > .field:nth-child(n+4) { margin-top: 14px; }
  }
}

.field label, .field .lab { font-weight: 600; font-size: 15px; line-height: 1.3; }
.field label [lang="ar"], .field .lab [lang="ar"] { display: block; font-weight: 500; text-align: right; }
.inp {
  width: 100%; min-height: 52px; padding: 12px 14px; border-radius: var(--r-s);
  border: 1.5px solid var(--hair-2); background: #fff; color: var(--ink); font: inherit; font-size: 17px;
}
.inp:focus { outline: none; border-color: var(--wine); box-shadow: 0 0 0 3px rgba(134, 28, 64, .18); }
.inp[aria-invalid="true"] { border-color: var(--bad); }
textarea.inp { min-height: 110px; resize: vertical; }
select.inp { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.hint { font-size: 14px; color: var(--ink-2); max-width: 64ch; }
.hint [lang="ar"] { display: block; text-align: right; }
.err { display: flex; gap: 8px; align-items: flex-start; color: var(--bad); font-size: 14px; font-weight: 600; }
.err [lang="ar"] { display: block; text-align: right; font-weight: 600; }
.err svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }

/* search */
.search { position: relative; }
.search .inp { padding-left: 46px; min-height: 56px; font-size: 17px; border-color: var(--wine); }
.search > svg { position: absolute; left: 15px; top: 18px; width: 20px; height: 20px; color: var(--wine); pointer-events: none; }
.results { margin-top: 8px; display: grid; gap: 8px; }
.results:empty { display: none; }

/* ---------- notes, pills ---------- */
.note {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-s);
  background: rgba(255, 255, 255, .65); border: 1px solid var(--hair); font-size: 14px; color: var(--ink-2);
}
.note svg { width: 18px; height: 18px; flex: none; color: var(--wine); margin-top: 2px; }
.note--warn { background: var(--warn-bg); border-color: rgba(138, 85, 16, .25); color: #5a3a0d; }
.note--warn svg { color: var(--warn); }
.note--ok { background: var(--ok-bg); border-color: rgba(23, 101, 74, .25); color: #0f4a35; }
.note--ok svg { color: var(--ok); }
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; line-height: 1.5; background: rgba(134, 28, 64, .09); color: var(--wine-2); white-space: nowrap;
}
.pill [lang="ar"] { font-size: 13px; }
.pill--ok { background: var(--ok-bg); color: var(--ok); }
.pill--warn { background: var(--warn-bg); color: var(--warn); }
.pill--bad { background: var(--bad-bg); color: var(--bad); }
.pill--sample { background: #2b2526; color: #fff; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; flex: none; }

/* ---------- the front page: the story cover that opens ---------- */

.hero { position: relative; padding: 10px; min-height: calc(100svh - var(--head-h)); display: flex; }
/* the ring's two arcs are square layers that turn: at 45 degrees their corners (empty) stick out past the screen's edge
   on a phone and the page could slide sideways by 3 or 4px. The hero clips what goes past its sides (Round 7) */
.hero { overflow-x: clip; }
@media (min-width: 700px) { .hero { padding: 16px; } }
.hero__frame { position: absolute; inset: 10px; pointer-events: none; }
@media (min-width: 700px) { .hero__frame { inset: 16px; } }
.hero__frame .ln { position: absolute; background: var(--wine); }
.hero__frame .ln--t { left: 6px; right: 6px; top: 5px; height: 1.5px; transform-origin: left; }
.hero__frame .ln--r { top: 6px; bottom: 6px; right: 5px; width: 1.5px; transform-origin: top; }
.hero__frame .ln--b { left: 6px; right: 6px; bottom: 5px; height: 1.5px; transform-origin: right; }
.hero__frame .ln--l { top: 6px; bottom: 6px; left: 5px; width: 1.5px; transform-origin: bottom; }
.hero__frame .sq { position: absolute; width: 12px; height: 12px; background: var(--wine); }
.hero__frame .sq--tl { left: 0; top: 0; } .hero__frame .sq--tr { right: 0; top: 0; }
.hero__frame .sq--bl { left: 0; bottom: 0; } .hero__frame .sq--br { right: 0; bottom: 0; }

.hero__in {
  position: relative; flex: 1; display: grid; justify-items: center; align-content: center; text-align: center;
  gap: 18px; padding: 26px 18px 30px;
}
.hero__logo { width: clamp(118px, 34vw, 168px); height: auto; }
.hero__title { font-size: clamp(21px, 5.6vw, 30px); color: var(--wine); line-height: 1.18; max-width: 22ch; }
.hero__title [lang="ar"] { display: block; margin-top: 6px; font-size: inherit; line-height: 1.6; color: var(--ink); }
.hero__line { font-size: 16px; color: var(--ink-2); max-width: 34ch; }
.hero__line [lang="ar"] { display: block; text-align: center; }
.hero__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(100%, 420px); }
.hero__cta .btn { padding-inline: 10px; }
/* the way in for a new student: a small button under the two main ones, which it must not compete with */
.hero__cta .hero__new { grid-column: 1 / -1; justify-self: center; padding-inline: 16px; }
/* Join the club, while applications are open: the whole width under the two main buttons */
.hero__cta .hero__join { grid-column: 1 / -1; }
.hero .orn { margin: 0 auto; width: min(240px, 60%); }

.ring { --ring: min(72vw, 330px, 38svh); position: relative; width: var(--ring); aspect-ratio: 1; margin: 0; }
.ring__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring__svg circle, .ring__svg path { fill: none; stroke: var(--logo-wine); }
.ring__win { position: absolute; left: 20.6%; top: 20.6%; width: 58.8%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #d9d3d4; isolation: isolate; }
.ring__win img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.ring__win img.is-on { opacity: 1; animation: drift 9s linear both; }
@keyframes drift { from { transform: scale(1.04); } to { transform: scale(1.13); } }
.ring__cap { position: absolute; left: 50%; bottom: -6px; translate: -50% 100%; width: max-content; max-width: 90vw; font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.ring__cap [lang="ar"] { display: block; text-align: center; font-size: 13px; }
.hero__ringbox { padding-bottom: 38px; }
.hero__more { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: none; color: var(--wine); }
.hero__more svg { width: 26px; height: 26px; }

@media (min-width: 700px) and (max-width: 979px) {
  .ring { --ring: min(56vw, 440px, 40svh); }
  .hero__title { font-size: 32px; }
}
@media (min-width: 980px) {
  .hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); justify-items: start; text-align: start; gap: 24px 56px; padding: 40px 64px; align-items: center; }
  .hero__text { display: grid; gap: 20px; justify-items: start; }
  .hero__logo { width: 210px; }
  .hero__title { font-size: clamp(32px, 3vw, 44px); max-width: 18ch; }
  .hero__title [lang="ar"] { text-align: start; direction: rtl; }
  .hero__line { font-size: 18px; max-width: 38ch; }
  .hero__line [lang="ar"] { text-align: start; }
  .hero .orn { margin: 0; width: 220px; }
  .hero__cta { width: 440px; }
  .hero__cta .hero__new { justify-self: start; }
  .hero__ringbox { justify-self: center; }
  .ring { --ring: min(40vw, 540px, 64svh); }
  .hero__more { display: block; }
}
@media (min-width: 980px) { .hero__title [lang="ar"] { text-align: left; } }
.hero__text { display: contents; }
@media (min-width: 980px) { .hero__text { display: grid; } }

/* the one orchestrated moment: the frame draws in from its corners, the O opens */
@media (prefers-reduced-motion: no-preference) {
  .js .hero .sq { animation: pop .35s var(--ease) both; }
  .js .hero .ln--t { animation: grow-x .7s .15s var(--ease) both; }
  .js .hero .ln--r { animation: grow-y .7s .3s var(--ease) both; }
  .js .hero .ln--b { animation: grow-x .7s .45s var(--ease) both; }
  .js .hero .ln--l { animation: grow-y .7s .6s var(--ease) both; }
  .js .hero__logo { animation: rise .7s .2s var(--ease) both; }
  /* the rings draw themselves with round ends; the O's own ring closes without a seam (its two round ends meet and overlap at
     the top). The gap is longer than a ring, so not even a dot shows before a ring starts. */
  .js .ring__svg .r1 { stroke-dasharray: 1 1.05; stroke-linecap: round; animation: draw-round 1.1s .35s var(--ease) both; }
  .js .ring__svg .r2 { stroke-dasharray: 1 1.05; animation: draw-round 1.1s .6s var(--ease) both; }
  .js .ring__svg .r3 { stroke-dasharray: 1 1.05; animation: draw-round .9s .85s var(--ease) both; }
  .js .ring__win { animation: open 1s .55s var(--ease) both; }
  .js .hero__title, .js .hero .orn, .js .hero__line, .js .hero__cta, .js .ring__cap { animation: rise .8s var(--d, .9s) var(--ease) both; }
  /* speed pass (9 Oct 2026): the words rise sooner, while the frame still draws (the title from .3 s, not .75 s): the title is what a
     phone counts as the page being there, and it waited for the animation (2.7 s on a slow phone, where 2.5 s is "good") */
  .js .hero__title { --d: .3s; } .js .hero .orn { --d: .45s; } .js .hero__line { --d: .55s; } .js .hero__cta { --d: .65s; } .js .ring__cap { --d: .85s; }
}
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes draw-round { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
@keyframes open { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(50% at 50% 50%); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- the club's mark, alive (liveLogo in layout.mjs) ----------
   The still mark, with each moving part laid over it as a picture of its own: three gears turning about their own centres, each
   the other way from the next, and the two red arcs circling the O, the long one one way in 22 s, the short one the other way in
   18 s. Whole layers turn, nothing is redrawn, so an older phone keeps up. The front page's photo ring turns its arcs the same way. */
.mark { position: relative; display: inline-block; flex: none; aspect-ratio: 407 / 260; line-height: 0; vertical-align: middle; }
.mark > svg { position: absolute; overflow: visible; }
.mark > .mark__base, .mark > .mark__a1, .mark > .mark__a2 { inset: 0; width: 100%; height: 100%; }
.mark__g1, .mark__g2, .mark__g3 { transform-origin: 50% 50%; }
.mark__a1, .mark__a2 { transform-origin: 47.832% 48.685%; } /* the O's centre, 194.677 and 126.58 in the mark's 407 x 260 box */
@media (prefers-reduced-motion: no-preference) {
  .mark__p { will-change: transform; animation: mark-turn 10s linear infinite; }
  .mark__g2 { animation-direction: reverse; }
  .mark__g3 { animation-duration: 11.3s; animation-direction: reverse; }
  .mark__a1 { animation-duration: 22s; }
  .mark__a2 { animation-duration: 18s; animation-direction: reverse; }
  .ring__arc { will-change: transform; transform-origin: 50% 50%; }
  .js .ring__arc--2 { animation: mark-turn 22s linear infinite; }
  .js .ring__arc--3 { animation: mark-turn 18s linear infinite reverse; }
  /* off the screen, they rest; site.js sets every one of them by one clock, so all stand at the same angle (syncTurns) */
  .is-still .mark__p, .ring.is-still .ring__arc { animation-play-state: paused; }
}
@keyframes mark-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .ring__win img.is-on { animation: none; transform: scale(1.04); }
}

/* ---------- panels and cards ---------- */
.panel { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r); box-shadow: var(--shadow); }
.panel p { max-width: 64ch; }
.panel--fit { max-width: 880px; } /* a card with a few lines in it does not run the width of a wide page */
.panel--pad { padding: 20px; }
@media (min-width: 700px) { .panel--pad { padding: 28px; } }
.panel--wine { background: var(--wine-3); color: #fff; border-color: transparent; }
.panel--wine a { color: #fff; }

/* the guide's course card: a coloured bar with the number you type, then the names */
.cc { --cc: var(--c-core); display: grid; text-decoration: none; color: var(--ink); background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid var(--hair); box-shadow: 0 1px 2px rgba(34,29,30,.06); transition: transform .15s var(--ease), box-shadow .15s; }
a.cc:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--ink); }
.cc__bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 12px; background: var(--cc); color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.cc__bar .num { font-size: 16px; }
.cc__bar small { font-weight: 600; font-size: 12px; opacity: .92; letter-spacing: 0; }
.cc__body { padding: 9px 12px 11px; display: grid; gap: 2px; }
.cc__en { font-weight: 600; font-size: 15px; line-height: 1.35; }
.cc__ar { font-family: var(--f-ar); font-size: 15px; line-height: 1.6; text-align: right; direction: rtl; color: var(--ink-2); }
.cc__meta { margin-top: 4px; font-size: 13px; color: var(--ink-2); display: flex; gap: 6px; flex-wrap: wrap; }
.cc--core { --cc: var(--c-core); } .cc--lang { --cc: var(--c-lang); } .cc--math { --cc: var(--c-math); } .cc--acct { --cc: var(--c-acct); }
.cc--econ { --cc: var(--c-econ); } .cc--biz { --cc: var(--c-biz); } .cc--elective { --cc: var(--c-elective); } .cc--support { --cc: var(--c-support); }
.cc--analytics { --cc: var(--c-analytics); } .cc--appdev { --cc: var(--c-appdev); } .cc--technical { --cc: var(--c-technical); }
.cc--ghost { background: transparent; border-style: dashed; box-shadow: none; }
.cc--here { outline: 3px solid var(--wine); outline-offset: 2px; }

/* the guide section on the front page */
.guide { position: relative; overflow: hidden; background: var(--wine-3); color: #fff; }
.guide .sh h2 { color: #fff; }
.guide .sh p, .guide .muted { color: rgba(255,255,255,.82); }
.guide__net { position: absolute; inset: 0; opacity: .5; pointer-events: none; }
.guide__net svg { width: 100%; height: 100%; }
.guide__net path { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.2; }
.guide__net circle { fill: #fff; }
.guide .wrap { position: relative; }
.guide .search .inp { border-color: #fff; }
.guide .results .cc { box-shadow: none; }
.tiles { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tile {
  display: grid; align-content: start; gap: 4px; padding: 14px 14px 16px; min-height: 112px; border-radius: 8px; text-decoration: none;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); color: #fff; transition: background-color .15s;
}
.tile:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.tile b { font-size: 13px; letter-spacing: .06em; color: var(--rose); }
.tile span { font-weight: 700; line-height: 1.25; }
.tile [lang="ar"] { font-weight: 500; font-size: 15px; text-align: right; color: rgba(255,255,255,.88); line-height: 1.5; }
.tool { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 8px; background: #fff; color: var(--ink); text-decoration: none; }
.tool:hover { color: var(--ink); background: var(--rose-2); }
.tool svg { width: 40px; height: 40px; flex: none; color: var(--wine); }
.tool b { display: block; font-size: 17px; line-height: 1.3; }
.tool [lang="ar"] { display: block; text-align: right; font-weight: 600; }
.tool small { display: block; color: var(--ink-2); font-size: 14px; line-height: 1.45; margin-top: 2px; }

/* "Next event" strip on the front page */
.next { display: grid; gap: 16px; align-items: center; }
@media (min-width: 760px) { .next { grid-template-columns: 220px minmax(0, 1fr); } }
.poster { aspect-ratio: 4/5; border-radius: 8px; overflow: hidden; background: var(--card); border: 1px solid var(--hair); position: relative; }
.poster img { width: 100%; height: 100%; object-fit: cover; }
.poster__gen { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 14px; text-align: center; background: var(--paper-2); background-image: var(--wm); background-size: 150px 116px; }
.poster__gen::before { content: ""; position: absolute; inset: 6px; border: 1.2px solid var(--wine); pointer-events: none; }
.poster__gen svg { width: 56%; }
.poster__gen b { color: var(--wine); font-size: 15px; line-height: 1.25; }
.poster__gen span { font-size: 12px; color: var(--ink-2); }

/* event cards */
.events { display: grid; gap: 14px; }
@media (min-width: 700px) { .events { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .events { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ev { display: grid; grid-template-rows: auto 1fr; background: #fff; border-radius: var(--r); overflow: hidden; border: 1px solid var(--hair); text-decoration: none; color: var(--ink); transition: transform .15s var(--ease), box-shadow .15s; }
a.ev:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--ink); }
.ev__img { aspect-ratio: 16/10; background: var(--paper-2); position: relative; overflow: hidden; }
.ev__img img { width: 100%; height: 100%; object-fit: cover; }
.ev__img .poster__gen svg { width: 34%; }
.ev__body { padding: 14px 16px 16px; display: grid; gap: 6px; align-content: start; }
.ev__when { font-size: 13px; font-weight: 600; color: var(--wine); display: flex; gap: 4px 8px; flex-wrap: wrap; align-items: center; }
.ev__when .num { flex-basis: 100%; }
.ev__t { font-size: 18px; line-height: 1.3; }
.ev__t [lang="ar"] { display: block; text-align: right; font-size: 18px; line-height: 1.6; }
.ev__s { font-size: 14px; color: var(--ink-2); }

/* what we do: the mission's three goals */
.goals { display: grid; gap: 16px; counter-reset: g; }
@media (min-width: 900px) { .goals { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.goal { display: grid; grid-template-rows: auto 1fr; background: #fff; border-radius: var(--r); overflow: hidden; border: 1px solid var(--hair); }
.goal__img { aspect-ratio: 4/3; position: relative; overflow: hidden; background: var(--paper-2); }
.goal__img img { width: 100%; height: 100%; object-fit: cover; }
.goal__n { position: absolute; left: 12px; top: 12px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--wine); color: #fff; font-weight: 700; font-size: 17px; }
.goal__body { padding: 16px 18px 20px; display: grid; gap: 8px; align-content: start; }
.goal h3 { font-size: 20px; color: var(--wine); }
.goal h3 [lang="ar"] { display: block; text-align: right; font-size: 20px; color: var(--ink); }
.goal p { font-size: 15px; color: var(--ink-2); }
.goal p [lang="ar"] { display: block; text-align: right; }
.goal ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.goal li { font-size: 14px; padding-left: 14px; position: relative; line-height: 1.45; }
.goal li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--wine); }
.goal li [lang="ar"] { display: block; text-align: right; }

/* people, in the same frame the club uses for its posts */
.people { display: grid; gap: 16px; }
@media (min-width: 900px) { .people { grid-template-columns: 1.2fr 1fr; } }
.roster { background: var(--paper-2); background-image: var(--wm); background-size: 190px 147px; text-align: center; }
.roster h3 { color: var(--wine); font-size: 24px; }
.roster h3 [lang="ar"] { display: block; font-size: 24px; color: var(--wine); }
.roster .yr { font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: .04em; }
.roles { display: grid; gap: 14px 22px; margin-top: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.roles > :first-child { grid-column: 1 / -1; }
.role b { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--wine); }
.role b [lang="ar"] { display: block; text-transform: none; letter-spacing: 0; font-size: 13px; }
.role span { display: block; font-weight: 600; font-size: 16px; line-height: 1.35; margin-top: 2px; }
.names { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 4px; font-size: 18px; }
.names li { line-height: 1.5; }
.sup { display: grid; gap: 10px; margin-top: 14px; }
.sup div { font-weight: 600; font-size: 17px; }
.sup [lang="ar"] { display: block; text-align: center; font-weight: 500; }
.src { font-size: 12px; color: var(--ink-2); margin-top: 14px; }
.src a { color: inherit; }

/* history teaser + page */
.chart { display: grid; gap: 6px; }
.chart__bars { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); align-items: end; gap: 4px; height: 190px; position: relative; padding-top: 24px; }
@media (min-width: 700px) { .chart__bars { gap: 8px; height: 240px; } }
.bar { position: relative; height: var(--h); min-height: 3px; background: var(--wine); border-radius: 4px 4px 0 0; max-width: 24px; justify-self: center; width: 100%; cursor: default; }
.bar--low { background: color-mix(in srgb, var(--wine) 45%, #fff); }
.bar b { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -4px); font-size: 11px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
@media (max-width: 699px) { .bar b { display: none; } .bar.is-lab b { display: block; } }
.chart__yrs { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 4px; font-size: 11px; color: var(--ink-2); text-align: center; font-weight: 600; }
@media (min-width: 700px) { .chart__yrs { gap: 8px; font-size: 12px; } }
.chart__yrs span:nth-child(odd) { visibility: visible; }
@media (max-width: 699px) { .chart__yrs span:nth-child(even) { visibility: hidden; } }
.chart__names { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
@media (min-width: 700px) { .chart__names { gap: 8px; } }
.nm { border-top: 3px solid var(--wine); padding-top: 4px; font-size: 12px; font-weight: 700; color: var(--wine); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nm--q { border-color: #3B4A6B; color: #3B4A6B; } .nm--m { border-color: #6B6365; color: #6B6365; }
.tip { position: absolute; z-index: 5; pointer-events: none; background: var(--ink); color: #fff; font-size: 13px; padding: 6px 10px; border-radius: 6px; white-space: nowrap; transform: translate(-50%, -100%); }

.tl { position: relative; display: grid; gap: 0; }
.yr { display: grid; gap: 10px; padding: 0 0 34px 28px; position: relative; }
.yr::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 0; width: 2px; background: var(--rose); }
.yr:last-child::before { bottom: auto; height: 20px; }
.yr__h { display: flex; align-items: center; gap: 10px; margin-left: -28px; }
.yr__h i { width: 16px; height: 16px; border-radius: 50%; background: var(--wine); box-shadow: 0 0 0 4px var(--paper); flex: none; }
.yr__h h3 { font-size: 28px; color: var(--wine); font-variant-numeric: tabular-nums; }
.yr__h .pill { margin-left: 4px; }
.it { display: grid; gap: 2px; padding: 12px 14px; background: #fff; border: 1px solid var(--hair); border-radius: 8px; }
.it__d { font-size: 12px; font-weight: 700; color: var(--wine); letter-spacing: .03em; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.it p { font-size: 15px; line-height: 1.5; }
.it p [lang="ar"] { display: block; text-align: right; color: var(--ink-2); }
.it a.src2 { font-size: 13px; font-weight: 600; justify-self: start; }
.it__ph { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.it__ph img { aspect-ratio: 1; object-fit: cover; border-radius: 4px; width: 100%; }
@media (min-width: 900px) {
  .tl--2 { grid-template-columns: 1fr; }
  .yr { grid-template-columns: 1fr 1fr; column-gap: 12px; padding-left: 40px; }
  .yr__h { grid-column: 1 / -1; margin-left: -40px; }
  .yr::before { left: 7px; }
}

/* footer */
.foot { background: var(--wine-3); color: rgba(255,255,255,.9); padding: 48px 0 28px; margin-top: 0; }
.foot a { color: #fff; }
.foot__grid { display: grid; gap: 28px 20px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.foot__grid > :first-child { grid-column: 1 / -1; }
@media (min-width: 900px) { .foot__grid { grid-template-columns: 1.3fr 1fr 1fr; } .foot__grid > :first-child { grid-column: auto; } }
.foot svg.logo { width: 150px; height: auto; }
.foot h4 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--rose); margin-bottom: 10px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot__base { margin-top: 32px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); font-size: 13px; color: rgba(255,255,255,.75); display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; }
.soc { display: grid; gap: 8px; }
.soc a { display: flex; gap: 10px; align-items: center; text-decoration: none; padding: 8px 0; }
.soc svg { width: 22px; height: 22px; flex: none; }
.soc small { display: block; color: rgba(255,255,255,.7); font-size: 13px; }

/* follow block on the front page */
.follow { display: grid; gap: 10px; }
@media (min-width: 760px) { .follow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* as many columns as there are tiles, up to four: three tiles fill the row, with no empty quarter after them */
@media (min-width: 1100px) { .follow { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } }
.fl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; padding: 16px; background: #fff; border: 1px solid var(--hair); border-radius: var(--r); text-decoration: none; color: var(--ink); }
a.fl:hover { border-color: var(--wine); color: var(--ink); }
.fl svg { width: 32px; height: 32px; color: var(--wine); grid-row: span 2; }
.fl b { font-size: 16px; }
.fl small { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.fl small [lang="ar"] { display: block; text-align: right; }

/* ---------- inner pages ---------- */
.h2 { font-size: clamp(24px, 3.2vw, 32px); color: var(--wine); }
.h2 [lang="ar"] { display: block; font-size: inherit; }
.h3 { font-size: 19px; color: var(--wine); line-height: 1.3; }
.h3 [lang="ar"] { display: block; font-size: 19px; text-align: right; }
.ph { padding: 28px 0 8px; }
@media (min-width: 900px) { .ph { padding: 48px 0 12px; } }
.ph h1 { font-size: clamp(28px, 4.6vw, 46px); color: var(--wine); max-width: 24ch; }
.ph h1 [lang="ar"] { display: block; font-size: inherit; color: var(--ink); text-align: left; margin-top: 4px; }
.ph .orn { margin-top: 18px; margin-bottom: 18px; width: 180px; }
.ph__lead { font-size: 17px; color: var(--ink-2); max-width: 62ch; }
.ph__lead [lang="ar"] { display: block; margin-top: 4px; }
.ph__chips { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.crumbs { font-size: 14px; font-weight: 600; display: flex; flex-wrap: wrap; gap: 8px; color: var(--ink-2); margin-bottom: 14px; }
.crumbs a { color: var(--ink-2); }
.crumbs [aria-current] { color: var(--ink); }
.codechip { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 14px; border-radius: 8px; background: var(--cc, var(--c-core)); color: #fff; font-weight: 700; font-size: 22px; letter-spacing: .02em; }
.codechip small { font-size: 13px; opacity: .9; letter-spacing: 0; }
.lead { font-size: 18px; line-height: 1.65; }
.prose p { max-width: 68ch; }
.pv { display: grid; gap: 28px; }
@media (min-width: 1000px) { .pv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 56px; align-items: start; } }
.prose [lang="ar"] { text-align: right; }
.pill--plain { background: rgba(34, 29, 30, .06); color: var(--ink-2); }
.pill--it { background: var(--wine); color: #fff; }
.hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.btn--big { min-height: 60px; font-size: 18px; }
.btn--big [lang="ar"] { font-size: 18px; }
.two, .three { display: grid; gap: 14px; }
@media (min-width: 700px) { .two { grid-template-columns: 1fr 1fr; } .three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fs { border: 1px solid var(--hair); border-radius: var(--r); padding: 14px 16px 16px; margin: 0; display: grid; gap: 12px; min-width: 0; }
.fs legend { font-weight: 700; padding: 0 6px; font-size: 15px; }
.fs legend [lang="ar"] { font-weight: 600; margin-inline-start: 8px; }
/* a long question as the heading of the box, inside it rather than on its border, so it can take two lines (Round 7) */
.fs--in > legend { float: inline-start; width: 100%; padding: 0; line-height: 1.35; }
.fs.fs--in > legend [lang="ar"] { display: block; margin: 2px 0 0; text-align: right; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--wine); }
.check [lang="ar"] { display: block; text-align: right; margin-top: 2px; }
.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.plain [lang="ar"] { display: block; text-align: right; }
.note > span > [lang="ar"], .note > span [lang="ar"]:only-child { display: block; text-align: right; }
.note [lang="ar"] { display: block; text-align: right; }
/* Speed pass (9 Oct 2026): a page that fills itself in (an event, its form, a ticket, Join, the team area) shows what comes after
   its content only once the content is there, so nothing on the screen is pushed down when it comes. On a phone those pushes
   scored 0.3 to 0.8 (layout shift; 0.1 is the line for "good"). The events to come keep their room instead (below), since the
   past events under them are the page. */
.js body:has(.note--wait:not([hidden])) .foot, .js .join:has(.note--wait:not([hidden])) .join__privacy { display: none; }
[data-upcoming] { --up-wait: 440px; }
[data-upcoming]:has(> .note--wait) { min-height: var(--up-wait); }
.up-none { display: grid; align-content: center; justify-items: center; gap: 14px; min-height: var(--up-wait); padding: 24px; text-align: center; border: 1.5px dashed var(--hair-2); border-radius: var(--r); color: var(--ink-2); }
.up-none > svg { width: 32px; height: 32px; color: var(--wine); }
.up-none p { max-width: 34ch; margin: 0; }
.up-none p [lang="ar"] { display: block; margin-top: 4px; }

/* search with results in a grid */
.search--big .inp { min-height: 60px; font-size: 18px; }
.search--big > svg { top: 20px; }
.results--grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }

/* the six sheets */
.sheets { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
/* six sheets: three across and two down on a wide screen, so the last row is never one lonely sheet */
@media (min-width: 900px) { .sheets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sheetcard { display: grid; background: #fff; border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--ink); transition: transform .15s var(--ease), box-shadow .15s; }
.sheetcard:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--ink); }
.sheetcard__img { aspect-ratio: 1.414; background: var(--paper-2); border-bottom: 1px solid var(--hair); overflow: hidden; }
.sheetcard__img img { width: 100%; height: 100%; object-fit: cover; }
.sheetcard__t { padding: 12px 14px 4px; display: grid; gap: 2px; font-weight: 700; line-height: 1.3; }
.sheetcard__t b { color: var(--wine); font-size: 13px; letter-spacing: .06em; }
.sheetcard__t [lang="ar"] { font-weight: 500; text-align: right; color: var(--ink-2); }
.sheetcard__n { padding: 0 14px 12px; font-size: 13px; color: var(--ink-2); }
.tool--line { border: 1px solid var(--hair); }

/* every course, sheet by sheet */
.azs { display: grid; gap: 10px; }
.az { background: #fff; border: 1px solid var(--hair); border-radius: var(--r); }
.az summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; font-weight: 700; list-style: none; min-height: 52px; }
.az summary::-webkit-details-marker { display: none; }
.az summary b { color: var(--wine); margin-inline-end: 6px; }
.az summary [lang="ar"] { display: block; font-weight: 500; color: var(--ink-2); text-align: right; }
.az summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--wine); border-bottom: 2px solid var(--wine); transform: rotate(45deg); flex: none; margin-top: -4px; }
.az[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
.az__list { list-style: none; margin: 0; padding: 0 8px 8px; display: grid; gap: 2px; }
@media (min-width: 900px) { .az__list { grid-template-columns: 1fr 1fr; column-gap: 12px; } }
@media (min-width: 1360px) { .az__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.az__list a { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 8px; border-radius: 6px; text-decoration: none; color: var(--ink); font-size: 15px; line-height: 1.4; }
.az__list a:hover { background: var(--rose-2); }
.az__list .num { font-weight: 700; color: var(--wine); }
.az__list [lang="ar"] { display: block; color: var(--ink-2); text-align: right; }

/* one course */
.course { display: grid; gap: 22px; }
@media (min-width: 960px) { .course { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }
.course__map .h3 { margin-bottom: 14px; }
.course__side { display: grid; gap: 14px; }
.wheres { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 14px; }
.where { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--hair); }
.where:first-child { border-top: 0; padding-top: 0; }
.where__s { font-weight: 700; text-decoration: none; }
.where__s [lang="ar"] { display: block; text-align: right; font-weight: 600; }
.where__d { display: flex; flex-wrap: wrap; gap: 6px; }
.where p { font-size: 15px; }
.where p [lang="ar"] { display: block; text-align: right; }
.notes { margin: 10px 0 0; padding-inline-start: 20px; display: grid; gap: 8px; font-size: 15px; }
.notes [lang="ar"] { display: block; text-align: right; color: var(--ink-2); }

/* the map: each prerequisite has its own line into one rail on the right, which
   turns into the course; the course's own rail on the left feeds what it opens.
   The two rails never meet, and no two lines cross. */
.bus { display: grid; gap: 10px; --rail: var(--wine); }
.bus__lab { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.bus__lab [lang="ar"] { display: block; text-align: right; font-weight: 600; }
.bus__row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 26px; align-items: stretch; }
.bus__row > .cc { grid-column: 2; grid-row: 1; }
.bus__row--lab > span { grid-column: 2; font-size: 14px; font-weight: 700; color: var(--ink-2); padding: 4px 0; }
.bus__row--lab [lang="ar"] { display: block; text-align: right; font-weight: 600; }
.rail { position: relative; grid-row: 1; }
.rail--r { grid-column: 3; } .rail--l { grid-column: 1; }
.rail::before, .rail::after { content: ""; position: absolute; background: var(--rail); }
.rail::after { left: calc(50% - 1px); width: 2px; top: 0; bottom: -10px; }
.bus__row--in .rail::before { top: calc(50% - 1px); height: 2px; left: 0; right: 50%; }
.bus__row--in.is-first .rail::after { top: calc(50% - 1px); }
.bus__row--here .rail--r::after { bottom: calc(50% - 1px); }
.bus__row--here .rail--r::before { top: calc(50% - 1px); height: 2px; left: 6px; right: 50%; }
.bus__row--here .rail--l::after { top: calc(50% - 1px); }
.bus__row--here .rail--l::before { top: calc(50% - 1px); height: 2px; left: 50%; right: 0; }
.bus__row--lab .rail::before { display: none; }
.bus__row--out .rail::before { top: calc(50% - 1px); height: 2px; left: 50%; right: 6px; }
.bus__row--out.is-last .rail::after { bottom: calc(50% - 1px); }
.ah { position: absolute; top: calc(50% - 6px); width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.ah--l { left: -1px; border-right: 9px solid var(--rail); }
.ah--r { right: -1px; border-left: 9px solid var(--rail); }
.bus__row--here .cc { box-shadow: var(--shadow); }
.bus__row--here .cc__en { font-size: 17px; }
.cc--here { outline: 3px solid var(--wine); outline-offset: 2px; }

/* one sheet */
.sheetview { display: grid; gap: 18px; align-items: start; }
@media (min-width: 1000px) { .sheetview { grid-template-columns: 560px minmax(0, 1fr); gap: 28px; } }
.sheetview__img { display: block; border-radius: var(--r); overflow: hidden; border: 1px solid var(--hair); box-shadow: var(--shadow); background: #fff; }
.rules { margin: 0; padding-inline-start: 22px; display: grid; gap: 10px; font-weight: 600; }
.rules [lang="ar"] { display: block; text-align: right; font-weight: 500; color: var(--ink-2); }
.sheetbody { display: grid; gap: 18px; margin-top: 26px; }
.lvs { display: grid; gap: 22px; }
.lv { display: grid; gap: 10px; }
.lv__h { display: flex; align-items: center; gap: 12px; font-size: 19px; color: var(--wine); }
.lv__h [lang="ar"] { font-size: 17px; margin-inline-start: 6px; color: var(--ink-2); }
.lv__n { width: 34px; height: 34px; border-radius: 50%; background: var(--wine); color: #fff; display: grid; place-items: center; font-size: 16px; flex: none; }
.lv--extra { padding-top: 16px; border-top: 1px solid var(--hair); }
.cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.tboxes { display: grid; gap: 14px; }
@media (min-width: 900px) { .tboxes { grid-template-columns: 1fr 1fr; } }
.tcol { display: grid; gap: 14px; align-content: start; min-width: 0; }
.tbox__tag { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--ink-3); }
.tbox > .note, .tbox .cards { margin-top: 12px; }
.tbox .cards .note { margin-top: 8px; }
.tbox h3, .panel > h3 { font-size: 18px; color: var(--wine); margin-bottom: 6px; }
.tbox h3 [lang="ar"], .panel > h3 [lang="ar"] { display: block; text-align: right; font-size: 18px; }
.chips { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.chips li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 15px; }
.chips [lang="ar"] { display: block; text-align: right; color: var(--ink-2); }
.chips li > span:not(.chip) { max-width: 64ch; }
.chip { min-width: 74px; padding: 4px 10px; border-radius: 6px; background: var(--wine); color: #fff; font-weight: 700; text-align: center; white-space: nowrap; }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th { text-align: start; font-size: 13px; color: var(--ink-2); font-weight: 700; padding: 8px 10px; border-bottom: 1.5px solid var(--hair-2); }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.tbl td [lang="ar"] { display: block; text-align: right; color: var(--ink-2); }
.tbl tr.is-ours td { background: var(--rose-2); }
.anat__code { display: flex; justify-content: center; gap: 6px; font-size: clamp(30px, 8vw, 46px); font-weight: 700; margin: 14px 0 6px; }
.anat__code span { padding: 2px 10px; border-radius: 8px; background: var(--cc); color: #fff; }
.anat__parts { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 10px; }
.anat__parts li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start; font-size: 15px; }
.anat__parts [lang="ar"] { display: block; text-align: right; color: var(--ink-2); }
.anat__d { padding: 3px 0; border-radius: 6px; background: var(--cc); color: #fff; text-align: center; font-weight: 700; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 30px; }
.pager a { display: grid; gap: 2px; padding: 14px 16px; background: #fff; border: 1px solid var(--hair); border-radius: var(--r); text-decoration: none; color: var(--ink); }
.pager a:hover { border-color: var(--wine); }
.pager small { color: var(--ink-2); font-size: 13px; }
.pager small [lang="ar"] { margin-inline-start: 6px; }
.pager__next { text-align: end; grid-column: 2; }

.x { width: 44px; height: 52px; border: 1.5px solid var(--hair-2); border-radius: var(--r-s); background: #fff; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink-2); }
.x:hover { border-color: var(--bad); color: var(--bad); }

/* events */
.ev__go { display: inline-flex; gap: 8px; align-items: center; margin-top: 6px; font-weight: 700; color: var(--wine); font-size: 15px; }
.ev__go svg { width: 20px; height: 20px; }
.ev__go [lang="ar"] { margin-inline-start: 6px; }
/* when registration opens, on an event's card (Round 9) */
.ev__soon { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; font-weight: 600; color: var(--wine); font-size: 14px; }
.ev__soon > .ic { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.ev__soon [lang="ar"] { display: block; }
.ev__count { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.ev__count [lang="ar"] { margin-inline-start: 6px; }
.evp { display: grid; gap: 22px; align-items: start; }
@media (min-width: 900px) { .evp { grid-template-columns: 420px minmax(0, 1fr); gap: 36px; } }
.evp__img { border-radius: var(--r); overflow: hidden; background: var(--paper-2); aspect-ratio: 4/5; position: relative; border: 1px solid var(--hair); box-shadow: var(--shadow); }
.evp__img img { width: 100%; height: 100%; object-fit: cover; }
.evp__body { display: grid; gap: 14px; align-content: start; }
.evp__body > p [lang="ar"], .evp__body > p[lang="ar"] { text-align: right; }
.evp__t { font-size: clamp(26px, 4vw, 38px); color: var(--wine); }
.evp__t [lang="ar"] { display: block; font-size: inherit; color: var(--ink); }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.facts li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.facts svg { width: 22px; height: 22px; color: var(--wine); flex: none; margin-top: 2px; }
.facts [lang="ar"] { display: block; text-align: right; font-weight: 500; color: var(--ink-2); }
.facts__lines > span { white-space: pre-line; } /* the days of a workshop over several days, one a line */
.evp__act { display: grid; gap: 8px; }
.evp__act .hint [lang="ar"] { display: block; }
.evp__state { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: var(--r-s); background: #fff; border: 1px solid var(--hair); }
.evp__state svg { width: 20px; height: 20px; flex: none; color: var(--wine); }
.evp__state [lang="ar"] { display: block; text-align: right; }
.evp__state--warn { background: var(--warn-bg); }
.gal { display: grid; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 26px; }
@media (min-width: 900px) { .gal { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.gal__a { aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--paper-2); }
.gal__a img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease); }
.gal__a:hover img { transform: scale(1.04); }
.regtop { display: grid; gap: 6px; margin-bottom: 18px; }
.back { font-weight: 600; text-decoration: none; font-size: 15px; }
.regtop .muted [lang="ar"] { display: block; }
.opts { display: grid; gap: 8px; }
.opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--hair-2); border-radius: var(--r-s); background: #fff; cursor: pointer; line-height: 1.4; }
.opt:has(input:checked) { border-color: var(--wine); background: var(--rose-2); }
.opt input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--wine); }
.opt small { display: block; color: var(--ink-2); font-size: 14px; margin-top: 2px; }
.opt small [lang="ar"] { display: block; text-align: right; }
.opt b [lang="ar"] { display: block; text-align: right; font-weight: 600; }
/* the registration form's classes under their doctors (Round 7): a doctor is a row that opens the list of their classes; the
   number beside the name says how many are ticked, so a closed row still shows the choice */
.regdocs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.rdoc { border: 1.5px solid var(--hair-2); border-radius: var(--r-s); background: #fff; }
.rdoc[open], .rdoc:has(input:checked) { border-color: var(--wine); }
.rdoc__s { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 12px 14px; cursor: pointer; list-style: none; font-weight: 700; }
.rdoc__s::-webkit-details-marker { display: none; }
.rdoc__s:focus-visible { outline: 3px solid var(--wine); outline-offset: 2px; border-radius: var(--r-s); }
.rdoc__n { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rdoc__c { flex: none; background: var(--wine); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 700; }
.rdoc__s .ic { flex: none; width: 20px; height: 20px; color: var(--ink-2); transition: transform .2s var(--ease); }
.rdoc[open] > .rdoc__s .ic { transform: rotate(180deg); }
.rdoc__opts { padding: 0 10px 10px; }
.rdoc__opts .opt { border-color: var(--hair); }
.opt__at { display: block; color: var(--ink-2); font-size: 14px; margin-top: 2px; }
.opt--none { border-style: dashed; }

/* the ticket */
.ticket { margin-top: 18px; background: #fff; border-radius: 18px; box-shadow: var(--shadow); border: 1px solid var(--hair); overflow: hidden; text-align: center; position: relative; }
.ticket__top { padding: 22px 20px 18px; background: var(--wine-3); color: #fff; display: grid; gap: 6px; }
.ticket__top .ev__when { justify-content: center; color: var(--rose); }
.ticket__t { font-size: 22px; line-height: 1.3; }
.ticket__t [lang="ar"] { display: block; font-size: 22px; }
.ticket__when { font-size: 15px; color: rgba(255, 255, 255, .85); }
.ticket__when [lang="ar"] { display: block; }
.ticket__cut { height: 0; border-top: 2px dashed var(--hair-2); margin: 0 18px; position: relative; }
.ticket__cut::before, .ticket__cut::after { content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); }
.ticket__cut::before { left: -31px; } .ticket__cut::after { right: -31px; }
.ticket__qr { padding: 20px 20px 6px; display: grid; justify-items: center; }
.qr { width: min(280px, 72vw); height: auto; }
.ticket__code { font-size: 28px; font-weight: 700; letter-spacing: .12em; }
.ticket__name { font-weight: 700; font-size: 18px; }
.ticket__name small { display: block; font-weight: 500; color: var(--ink-2); font-size: 14px; }
.ticket__state { margin: 14px 0 0; padding: 12px; background: var(--paper-2); font-weight: 600; color: var(--ink-2); display: flex; gap: 8px; justify-content: center; align-items: center; }
.ticket__state [lang="ar"] { margin-inline-start: 8px; }
.ticket__state.is-in { background: var(--ok-bg); color: var(--ok); }
.ticket__state svg { width: 20px; height: 20px; }
.ticket__act { margin-top: 14px; }
.lab { font-weight: 700; font-size: 15px; }
.lab [lang="ar"] { margin-inline-start: 8px; color: var(--ink-2); }
.mytk { display: flex; gap: 12px; align-items: center; padding: 14px; background: #fff; border: 1px solid var(--hair); border-radius: var(--r); text-decoration: none; color: var(--ink); }
.mytk:hover { border-color: var(--wine); color: var(--ink); }
.mytk svg { width: 26px; height: 26px; color: var(--wine); flex: none; }
.mytk [lang="ar"] { display: block; text-align: right; color: var(--ink-2); }
.mytk small { display: block; color: var(--ink-2); }
.done { display: grid; gap: 10px; justify-items: start; }
.done > svg { width: 32px; height: 32px; color: var(--ok); }
.done p [lang="ar"] { display: block; text-align: right; }

/* about */
.about { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .about { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; } }
.about__who { display: grid; gap: 14px; }
.about__who p[lang="ar"] { text-align: right; }
.obj__img figcaption { font-size: 13px; color: var(--ink-2); margin-top: 8px; }
.obj__img figcaption [lang="ar"] { display: block; text-align: right; }
.mission { background: var(--wine-3); color: #fff; }
.mission .frame::before { border-color: rgba(255, 255, 255, .55); }
.mission .frame::after { --wine: rgba(255, 255, 255, .85); }
.mission__card { max-width: 860px; margin-inline: auto; text-align: center; padding: 40px 28px; }
@media (min-width: 700px) { .mission__card { padding: 56px 64px; } }
.mission__k { font-weight: 700; letter-spacing: .08em; color: var(--rose); font-size: 14px; }
.mission__k [lang="ar"] { display: block; letter-spacing: 0; font-size: 16px; }
.mission__t { font-size: clamp(19px, 2.4vw, 25px); line-height: 1.55; font-weight: 500; margin-top: 16px; }
.mission__t[lang="ar"] { font-family: var(--f-ar); line-height: 1.8; }
.mission .orn { color: var(--rose); }
.mission .src { color: rgba(255, 255, 255, .7); margin-top: 22px; }
.mission .src [lang="ar"] { display: block; }
.objs { display: grid; gap: 18px; }
.obj { display: grid; gap: 18px; background: #fff; border: 1px solid var(--hair); border-radius: var(--r); padding: 14px; }
@media (min-width: 900px) { .obj { grid-template-columns: 400px minmax(0, 1fr); gap: 30px; padding: 18px; align-items: center; } .obj:nth-child(even) { grid-template-columns: minmax(0, 1fr) 400px; } .obj:nth-child(even) .obj__img { order: 2; } }
/* on a wide screen the three goals stand side by side, each with its picture on top: no line of text runs across the whole page */
@media (min-width: 1100px) {
  .objs { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .obj, .obj:nth-child(even) { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; gap: 18px; }
  .obj:nth-child(even) .obj__img { order: 0; }
  /* two lines kept for every caption, so the numbers and titles under the pictures line up */
  .obj__img figcaption { min-height: 3.3em; }
}
.obj__img { margin: 0; }
.obj__img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; }
.obj__body { display: grid; gap: 10px; align-content: start; }
.obj__body p { max-width: 64ch; }
.obj__n { width: 44px; height: 44px; border-radius: 50%; background: var(--wine); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 19px; }
.obj h3 { font-size: 24px; color: var(--wine); }
.obj h3 [lang="ar"] { display: block; text-align: right; color: var(--ink); font-size: 24px; }
.obj p[lang="ar"] { text-align: right; color: var(--ink-2); }
.majors { display: grid; gap: 14px; }
@media (min-width: 800px) { .majors { grid-template-columns: 1fr 1fr; } }
.major { display: grid; gap: 6px; padding: 20px; background: #fff; border: 1px solid var(--hair); border-radius: var(--r); text-decoration: none; color: var(--ink); border-top: 4px solid var(--wine); }
.major:hover { box-shadow: var(--shadow); color: var(--ink); }
.major__no { font-size: 13px; font-weight: 700; color: var(--wine); letter-spacing: .06em; }
.major b { font-size: 20px; line-height: 1.3; }
.major b [lang="ar"] { display: block; text-align: right; font-size: 19px; }
.major small { color: var(--ink-2); font-size: 14px; }
.major small [lang="ar"] { display: block; text-align: right; }

/* history */
.names3 { display: grid; gap: 12px; }
@media (min-width: 900px) { .names3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nm3 { padding: 16px 18px; background: #fff; border-radius: var(--r); border: 1px solid var(--hair); border-top: 4px solid var(--wine); display: grid; gap: 4px; align-content: start; }
.nm3--0 { border-top-color: #6B6365; } .nm3--1 { border-top-color: #3B4A6B; }
.nm3 > span { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.nm3 b { font-size: 22px; }
.nm3 b [lang="ar"] { display: block; text-align: right; font-size: 20px; }
.nm3 p { font-size: 14px; color: var(--ink-2); }
.nm3 p [lang="ar"] { display: block; text-align: right; }
.pres { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 800px) { .pres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pres { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pres li { display: grid; padding: 12px 14px; background: var(--paper-2); border-radius: 8px; }
.pres [lang="ar"] { text-align: right; }
.pres small { color: var(--ink-2); font-size: 13px; }
.yr__h h3 { display: inline; }

/* join */
/* the form alone, under the page's heading and as wide as a form reads well (the wrap keeps the page's own width and edge) */
.join > div { max-width: 760px; }
.join__privacy { margin-top: 14px; }
.why { display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: #fff; border: 1px solid var(--hair); border-radius: var(--r); }
.why > .num { width: 38px; height: 38px; border-radius: 50%; background: var(--wine); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.why [lang="ar"] { display: block; text-align: right; font-weight: 600; }

/* ---------- the team area ---------- */
/* Speed pass (9 Oct 2026): at least a screen tall, so the footer is never on the first screen: the area fills itself in a tab at a
   time, and each time it pushed the footer away (a layout shift of 0.12 to 0.24 on a phone) */
.teamapp { min-height: 100svh; }
.login { text-align: center; display: grid; justify-items: center; }
.login > svg { width: 40px; height: 40px; color: var(--wine); margin-bottom: 8px; }
.login form { width: 100%; text-align: start; }
.login .muted [lang="ar"] { display: block; }
.tbar { background: #fff; border-bottom: 1px solid var(--hair); position: sticky; top: var(--head-h); z-index: 30; }
.tbar__in { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 8px; }
.tbar__who { font-weight: 600; display: flex; gap: 8px; align-items: center; min-width: 0; }
/* View as (Round 17c): the IT team's menu at the top, on the reading side's far end, and the strip while looking */
.tbar__as { display: flex; justify-content: flex-end; padding-bottom: 8px; }
.viewas { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.viewas .ic { width: 18px; height: 18px; flex: none; color: var(--wine); }
.viewas__l { white-space: nowrap; }
.viewas__s { width: auto; min-width: 0; max-width: 64vw; min-height: 40px; padding-block: 6px; }
.viewas-note { align-items: center; flex-wrap: wrap; }
.viewas-note > span { flex: 1 1 220px; min-width: 0; }
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-bottom: 0; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; border: 0; background: none; padding: 10px 12px 12px; font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--ink-2); cursor: pointer; border-bottom: 3px solid transparent; min-height: 48px; display: grid; justify-items: center; }
.tab [lang="ar"] { font-size: 13px; font-weight: 500; }
.tab.is-on { color: var(--wine); border-bottom-color: var(--wine); }
.picker { max-width: 560px; margin-bottom: 16px; }
.door { display: grid; gap: 14px; max-width: 640px; }
.door__count { display: flex; gap: 12px; align-items: baseline; }
.door__count > b { font-size: 48px; color: var(--wine); line-height: 1; }
.door__count span { font-weight: 600; color: var(--ink-2); }
.door__count [lang="ar"] { display: block; }
.scan { position: relative; display: grid; gap: 10px; }
.scan video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); background: #000; }
.scan__res { position: absolute; inset: 0; bottom: 70px; display: grid; place-content: center; text-align: center; gap: 6px; border-radius: var(--r); color: #fff; padding: 20px; font-size: 18px; animation: rise .2s var(--ease) both; }
.scan__res b { font-size: 28px; line-height: 1.2; }
.scan__res [lang="ar"] { font-size: 22px; font-weight: 700; }
.scan__res small { font-size: 16px; opacity: .92; }
.scan__res--ok { background: rgba(23, 101, 74, .94); }
.scan__res--warn { background: rgba(138, 85, 16, .95); }
.scan__res--bad { background: rgba(163, 35, 47, .95); }
.scan video[hidden] + .scan__res { position: static; min-height: 160px; }
.codeform { flex-wrap: nowrap; }
.codeform .inp { flex: 1; letter-spacing: .08em; text-transform: uppercase; }
details.panel summary { cursor: pointer; font-weight: 700; min-height: 28px; }
details.panel summary [lang="ar"] { display: block; font-weight: 600; text-align: right; }
.plist { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.prow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--paper-2); }
.prow.is-in { background: var(--ok-bg); }
.prow small { display: block; color: var(--ink-2); }
.elist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.erow { display: grid; gap: 8px; padding: 14px 16px; background: #fff; border: 1px solid var(--hair); border-radius: var(--r); }
@media (min-width: 900px) { .erow { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; } }
.erow [lang="ar"] { display: block; color: var(--ink-2); }
.erow small { display: block; color: var(--ink-2); font-size: 13px; }
.erow__s, .erow__a { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.eform { max-width: 900px; }
.crows { display: grid; gap: 10px; }
.crow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; background: var(--paper-2); border-radius: 8px; }
.crow .inp { min-height: 44px; font-size: 16px; padding: 8px 10px; }
.crow .x { height: 44px; justify-self: end; }
@media (min-width: 900px) { .crow { grid-template-columns: 1.2fr .5fr 1.2fr .6fr 1.4fr 1.4fr 44px; align-items: center; } }
.crow--3 { grid-template-columns: 1fr 1fr; }
/* the Sponsors tab's rows (Round 7): name, Arabic name, kind, years, the club's post, remove */
.crow--ptr { grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .crow.crow--ptr { grid-template-columns: 1.4fr 1.2fr 1fr .8fr 1.6fr 44px; } }
/* the Sponsors page: who the club has worked with, by kind; each card opens the club's post */
.ptrs-all { display: grid; gap: 22px; margin-top: 8px; }
.ptrs__h { font-size: 15px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
html.l-ar .ptrs__h { text-transform: none; letter-spacing: 0; }
.ptrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.ptr { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; align-content: center; align-items: center; min-height: 84px; padding: 14px 16px; background: #fff; border: 1px solid var(--hair); border-radius: var(--r); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
/* the partner's logo before its name (Round 8), in a white square; one the club has no logo for shows its initials there */
.ptr__logo { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 10px; background: #fff; border: 1px solid var(--hair); }
.ptr__logo img { width: 100%; height: 100%; object-fit: contain; }
.ptr__logo--none { background: var(--rose-2); border-color: transparent; color: var(--wine); font-size: 15px; font-weight: 800; letter-spacing: .02em; }
.ptr__n, .ptr__y { grid-column: 2; min-width: 0; }
a.ptr:hover { border-color: var(--wine); }
.ptr__n { font-size: 16px; line-height: 1.3; }
.ptr__y { font-size: 14px; font-weight: 700; color: var(--wine); }
.spform { max-width: 820px; }
@media (min-width: 700px) { .crow--3 { grid-template-columns: 1fr 1fr 1.4fr 44px; } }
.danger { border-color: rgba(163, 35, 47, .35); background: var(--bad-bg); display: grid; gap: 10px; }
.danger-t { color: var(--bad); border-color: var(--bad); }
.seg { display: inline-flex; border: 1.5px solid var(--hair-2); border-radius: var(--r-s); overflow: hidden; flex-wrap: wrap; }
.seg button { border: 0; background: #fff; padding: 10px 12px; font-weight: 600; font-size: 14px; cursor: pointer; min-height: 44px; }
.seg button.is-on { background: var(--wine); color: #fff; }
.tablewrap { overflow-x: auto; margin-top: 12px; background: #fff; border: 1px solid var(--hair); border-radius: var(--r); }
.tbl--list { min-width: 760px; font-size: 14px; }
.tbl--list tr.is-in td { background: rgba(23, 101, 74, .06); }
.tbl--list small { display: block; color: var(--ink-2); font-size: 12px; }
.tbl--list .flag { color: var(--warn); font-weight: 600; }
.tbl--list .why { max-width: 260px; }
.tact { white-space: nowrap; }
.tact .btn { margin-inline-end: 4px; }
/* the desk (Round 12, Eisa 7 Oct 2026): one search box and the doctor beside it; on a phone each booking is a card */
.deskfind { gap: 8px; flex-wrap: nowrap; margin-bottom: 10px; }
.deskfind .inp[data-lq] { flex: 1 1 auto; min-width: 0; }
.deskfind select { flex: 0 1 auto; max-width: 45%; }
.tbl--list .regnote { color: var(--wine); }
.reglog { font-size: 14px; color: var(--ink-2); }
.reglog summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.reglog ul { margin: 8px 0 0; padding-inline-start: 18px; display: grid; gap: 4px; }
@media (max-width: 699px) {
  .tbl--list { min-width: 0; }
  .tbl--list thead { display: none; }
  .tbl--list, .tbl--list tbody, .tbl--list tr, .tbl--list td { display: block; width: 100%; }
  .tbl--list tr { border: 1px solid var(--hair); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: #fff; }
  .tbl--list td { border: 0; padding: 2px 0; }
  .tbl--list td[data-th]:not([data-th="Name"]):not(:empty)::before { content: attr(data-th) ": "; color: var(--ink-2); font-size: 12px; }
  .tbl--list .tact { white-space: normal; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
  .tbl--list .tact .btn { margin: 0; }
}
.inp--sm { min-height: 40px; padding: 6px 10px; font-size: 15px; }
.modal { position: fixed; inset: 0; z-index: 80; background: rgba(34, 29, 30, .45); display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.modal form { width: min(520px, 100%); }
.kit { display: grid; gap: 16px; }
@media (min-width: 900px) { .kit { grid-template-columns: 1fr 1fr; align-items: start; } }
.kit__url { word-break: break-all; font-weight: 600; padding: 10px 12px; background: var(--paper-2); border-radius: 6px; }
.kit__qr .qr { width: 220px; }
.kit__poster { max-width: 220px; border-radius: 8px; border: 1px solid var(--hair); }
.mgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 10px; }
.mgrid figure { margin: 0; background: #fff; border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; }
.mgrid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.mgrid figcaption { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; }
.mgrid .btn { min-height: 36px; font-size: 12px; padding: 4px 8px; }
.log { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.log li { padding: 8px 12px; background: #fff; border: 1px solid var(--hair); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.log small { color: var(--ink-2); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-weight: 600; }
.checks .ok { color: var(--ok); } .checks .bad { color: var(--bad); }
.toast { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 90; max-width: min(92vw, 520px); padding: 12px 16px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 600; box-shadow: var(--shadow); }
.toast [lang="ar"] { display: block; text-align: right; }
.toast--bad { background: var(--bad); } .toast--warn { background: var(--warn); }

.foot__links { display: flex; flex-wrap: wrap; gap: 6px 18px; }

.foot__links a, .foot__links span { display: inline-flex; align-items: center; min-height: 44px; }
.team-link { min-height: 44px; display: none; align-items: center; }
@media (min-width: 980px) { .team-link { display: inline-flex; } }
.hero__more { width: 44px; height: 44px; display: none; place-items: center; }
@media (min-width: 980px) { .hero__more { display: grid; } }
.back { display: inline-flex; align-items: center; min-height: 44px; }

.btn--row > span > [lang="ar"] { display: block; }
.btn--row > span { display: grid; text-align: center; }
.check a { display: inline-block; padding: 10px 4px; margin: -10px 0; }

.evp__img:has(.poster__gen) { aspect-ratio: 16/10; }
@media (min-width: 900px) { .evp__img:has(.poster__gen) { aspect-ratio: 4/5; } }
.next { padding: 14px; text-decoration: none; color: inherit; }
a.next:hover { color: inherit; box-shadow: 0 1px 2px rgba(34, 29, 30, .06), 0 14px 30px -14px rgba(34, 29, 30, .3); }
.next__body { display: grid; gap: 10px; align-content: center; }
.next__t { font-size: 22px; }
.next__t [lang="ar"] { font-size: 22px; }
.next__go { justify-self: start; width: max-content; }
@media (max-width: 759px) { .next .poster:has(.poster__gen) { aspect-ratio: 16/10; } }
/* a workshop over several days, and its certificate (Round 12, src/js/team-cert.js) */
.dayrow { display: grid; grid-template-columns: auto 1fr 1fr auto; gap: 8px; align-items: center; }
.dayrow b { font-size: 14px; min-width: 52px; }
.dayrow b [lang="ar"] { display: block; font-weight: 600; font-size: 12px; }
.dayrow .inp { min-width: 0; width: 100%; } /* a date box may shrink with the screen, so the form never runs off a phone's edge */
@media (max-width: 520px) { .dayrow { grid-template-columns: 1fr 1fr; } .dayrow b { grid-column: 1; grid-row: 1; } .dayrow [data-rmday] { grid-column: 2; grid-row: 1; justify-self: end; } .dayrow [data-dd] { grid-column: 1; grid-row: 2; } .dayrow [data-dt] { grid-column: 2; grid-row: 2; } }
.inp[type=range] { accent-color: var(--wine); }
.filebtn { cursor: pointer; align-self: flex-start; }
.certstage { position: relative; max-width: 760px; border: 1px solid var(--hair-2); border-radius: 8px; overflow: hidden; user-select: none; }
.certstage img { display: block; width: 100%; height: auto; cursor: crosshair; }
.certname { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-family: var(--f-en); font-weight: 700; line-height: 1; padding: 2px 6px; border: 1.5px dashed rgba(134, 28, 64, .7); border-radius: 4px; cursor: grab; background: rgba(255, 255, 255, .25); touch-action: none; }
.certname:active { cursor: grabbing; }
.certqr { position: absolute; right: 3.5%; bottom: 3.5%; width: 12%; aspect-ratio: 1; background: #fff repeating-conic-gradient(#221D1E 0 25%, #fff 0 50%) 0 0 / 25% 25%; border: 3px solid #fff; opacity: .85; pointer-events: none; }
.daydot { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px; padding: 0 6px; margin: 0 4px 4px 0; border: 1.5px solid var(--hair-2); border-radius: 13px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.daydot.is-in { background: rgba(23, 101, 74, .1); border-color: rgba(23, 101, 74, .5); color: #17654A; }
.daydot.is-ex { border-style: dashed; color: var(--wine); }
.dayedit { display: grid; gap: 6px; margin-bottom: 10px; }

/* The notice across the top, the past events, and the
   team area's sign-in, doctors, analytics and faculty pages. Same tokens as site.css. */
:root { --c-mis: #6B6365; --c-qmis: #3B4A6B; --c-isom: #861C40; }

/* the page itself takes the focus after a jump to it (the skip link), and needs no ring */
#main:focus { outline: none; }

/* ---------- the notice across the top ---------- */
.banner { position: relative; z-index: 41; font-size: 14px; }
.banner--info { background: var(--wine); color: #fff; }
.banner--urgent { background: #F2C14E; color: #3A2A05; }
.banner__in { display: flex; align-items: center; gap: 8px 14px; padding-block: 8px; }
.banner__in p { flex: 1; min-width: 0; font-weight: 600; line-height: 1.4; }
.banner__in p [lang="ar"] { display: block; text-align: right; font-weight: 500; }
.banner .banner__go { color: inherit; font-weight: 700; display: inline-grid; justify-items: center; line-height: 1.3; text-underline-offset: 3px; }
.banner__x { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.banner--urgent .banner__x { background: rgba(0, 0, 0, .08); }
/* the test copy's band (site.js adds it at the test copy's address only): quiet, but on every page */
.testcopy { padding: 6px var(--gut); background: var(--warn-bg); color: var(--ink); border-bottom: 1px solid var(--warn); font-size: 13px; font-weight: 600; line-height: 1.4; text-align: center; }

/* ---------- the footer's way in for members ---------- */
.foot__member { display: inline-flex; gap: 10px; align-items: center; margin-top: 10px; padding: 8px 0; font-size: 14px; text-decoration: none; color: rgba(255, 255, 255, .78); }
.foot a.foot__member { color: rgba(255, 255, 255, .78); }
.foot a.foot__member:hover { color: #fff; }
.foot__member svg { width: 18px; height: 18px; flex: none; }
.foot__member [lang="ar"] { display: block; }

/* a link inside a sentence, as on the registration form: a finger-sized target without moving the text */
.check a { display: inline-block; padding: 13px 4px; margin: -13px -2px; }

/* an Arabic run after English on the same line: the gap sits on its left. (Its own
   inline-start is its right, so the logical margin would land on the wrong side.) */
.fs legend [lang="ar"] { margin-right: 0; margin-left: 8px; }

/* ---------- team area: signing in ---------- */
.spare { width: 100%; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--hair); text-align: start; }
.spare summary { cursor: pointer; padding-block: 10px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.spare summary [lang="ar"] { display: block; text-align: right; }
.inp.pin { font-size: 22px; letter-spacing: .3em; }
/* boxes over the page */
.dlg { width: min(560px, calc(100vw - 24px)); max-height: calc(100svh - 24px); overflow-y: auto; padding: 20px; border: 0; border-radius: var(--r); background: #fff; color: var(--ink); box-shadow: 0 24px 60px -18px rgba(34, 29, 30, .55); }
.dlg::backdrop { background: rgba(34, 29, 30, .5); }
.dlg .x { flex: none; }
.pinbig { padding: 12px; border-radius: var(--r-s); background: var(--rose-2); color: var(--wine); font-size: 44px; font-weight: 700; letter-spacing: .08em; text-align: center; }
.pinbig span { display: inline-block; width: .45em; }
/* the 1-2-3 */
.wz__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.wz__steps li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-s); background: var(--paper-2); color: var(--ink-2); font-size: 13px; font-weight: 700; line-height: 1.2; }
.wz__steps li b { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid currentColor; border-radius: 50%; background: #fff; font-size: 14px; }
.wz__steps li [lang="ar"] { display: block; font-weight: 500; }
.wz__steps li.is-on { background: var(--wine); color: #fff; }
.wz__steps li.is-on b { border-color: #fff; color: var(--wine); }
.wz__steps li.is-done { color: var(--ok); }
.wz__q { font-size: 20px; color: var(--ink); }
.wz__q [lang="ar"] { display: block; }
.wz__docs { display: grid; gap: 6px; max-height: 36svh; overflow-y: auto; padding: 2px; }
.wz__nav { justify-content: space-between; }
.wz__nav .btn:last-child { margin-inline-start: auto; }
.opt--sm { padding: 9px 12px; }
.dpick { display: flex; flex-wrap: wrap; gap: 8px; }
.dchip { position: relative; }
.dchip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.dchip > span { display: grid; justify-items: center; min-width: 62px; padding: 8px 10px; border: 1.5px solid var(--hair-2); border-radius: var(--r-s); background: #fff; font-size: 14px; font-weight: 700; line-height: 1.25; }
.dchip > span [lang="ar"] { font-size: 13px; font-weight: 500; }
.dchip input:checked + span { border-color: var(--wine); background: var(--wine); color: #fff; }
.dchip input:focus-visible + span { outline: 3px solid rgba(134, 28, 64, .35); outline-offset: 2px; }
/* doctors and their classes */
.docs { display: grid; gap: 12px; margin-top: 16px; }
@media (min-width: 900px) { .docs { grid-template-columns: 1fr 1fr; align-items: start; } }
.doc { display: grid; gap: 10px; padding: 14px; background: #fff; border: 1px solid var(--hair); border-radius: var(--r); }
.doc__h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; }
.doc__h b { font-size: 17px; }
.doc__h [lang="ar"] { display: block; text-align: right; color: var(--ink-2); }
.doc__cls { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.doc__cls li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--paper-2); font-size: 14px; }
.doc__cls .x { width: 40px; height: 40px; }
.empty { display: grid; justify-items: center; gap: 10px; text-align: center; }
.empty p [lang="ar"] { display: block; }
.cpick { display: grid; gap: 12px; margin-top: 8px; }
.cpick__g { display: grid; gap: 6px; }
.cpick__d { font-size: 14px; }
.cpick__d [lang="ar"] { margin-left: 8px; color: var(--ink-2); }
/* the team list */
.ro { display: grid; gap: 22px; }
@media (min-width: 1000px) { .ro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; } }
.ro .tbl--list { min-width: 640px; }
/* a wide table scrolls inside its own box; it never widens the page */
.ro > *, .docs > *, .tiles2 > *, .wz__steps > *, .cpick > *, .doc__cls li > :first-child, .mine__cls li > :first-child { min-width: 0; }
/* analytics: one number per row, its bar under it, the rest in words */
.tiles2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
@media (min-width: 800px) { .tiles2 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tile2 { display: grid; gap: 2px; padding: 12px 14px; background: #fff; border: 1px solid var(--hair); border-radius: var(--r); }
.tile2 b { font-size: 28px; line-height: 1.1; color: var(--ink); }
.tile2 span { font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.tile2 span [lang="ar"] { display: block; }
.lb { list-style: none; margin: 12px 0 0; padding: 0; }
.lb__r { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "n who v" ". bar bar"; align-items: center; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.lb__r:last-child { border-bottom: 0; }
.lb__n { grid-area: n; font-weight: 700; color: var(--ink-2); text-align: center; }
.lb__r:first-child .lb__n { color: var(--wine); }
.lb__who { grid-area: who; min-width: 0; }
.lb__who b { display: block; }
.lb__who [lang="ar"] { display: block; text-align: right; font-size: 14px; color: var(--ink-2); }
.lb__who small { display: block; font-size: 13px; color: var(--ink-2); }
.lb__v { grid-area: v; text-align: end; line-height: 1.1; }
.lb__v b { display: block; font-size: 22px; }
.lb__v small { font-size: 12px; color: var(--ink-2); }
.lb__v small [lang="ar"] { display: block; }
.lb__bar { grid-area: bar; height: 8px; }
.lb__bar i { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--wine); }
/* faculty */
.mine small { display: block; font-size: 13px; color: var(--ink-2); }
.mine__sum [lang="ar"] { display: block; }
.mine > .row [lang="ar"] { display: block; }
.mine__cls { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.mine__cls li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 10px; padding: 8px 10px; border-radius: 8px; background: var(--paper-2); font-size: 14px; }
.mine__who { margin-top: 10px; }
.mine__who summary { cursor: pointer; font-weight: 700; color: var(--wine); }
.mine__who summary [lang="ar"] { display: block; text-align: right; }
/* ---------- faculty's dashboard (9 Oct 2026): the club in numbers, two charts with their tables, this year ---------- */
.dash { margin-bottom: 22px; }
.dash__k { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wine); }
.dash__k [lang="ar"] { display: block; letter-spacing: 0; text-transform: none; }
.dash__hero { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 16px 18px; background: var(--wine-3); color: #fff; border-radius: var(--r); }
.dash__hero b { font-size: 56px; line-height: 1; font-weight: 700; }
.dash__hero span { font-size: 17px; font-weight: 600; }
.dash__hero span [lang="ar"] { display: block; }
/* a row of the dashboard's tiles fills its width on a laptop: four tiles in four columns, never four and a gap */
@media (min-width: 800px) { .tiles2--n { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); } }
.tile2.is-top { border-color: var(--wine); }
.tile2.is-top b { color: var(--wine); }
.dash__figs { display: grid; gap: 14px; margin-top: 14px; }
@media (min-width: 900px) { .dash__figs { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }
.dfig { margin: 0; padding: 14px 16px; background: #fff; border: 1px solid var(--hair); border-radius: var(--r); min-width: 0; }
.dfig__t { font-weight: 700; margin-bottom: 14px; }
.dfig__t [lang="ar"] { display: block; font-weight: 600; }
/* the years, left to right in both languages: the busiest in wine, the rest a lighter wine that still reads 3:1 on white */
.ycols { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 2px; height: 170px; direction: ltr; border-bottom: 1px solid var(--hair-2); }
.ycol { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
.ycol i { display: block; width: min(16px, 80%); height: var(--h); min-height: 2px; background: #BC8296; border-radius: 4px 4px 0 0; }
.ycol.is-top i { background: var(--wine); }
.ycol__v { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.ycol__y { position: absolute; top: calc(100% + 5px); font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.dfig__note { margin: 28px 0 0; font-size: 13px; color: var(--ink-2); }
.dfig__note [lang="ar"] { display: block; }
.dfig__tbl { margin-top: 8px; font-size: 13px; }
.dfig__tbl summary { cursor: pointer; color: var(--wine); font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 8px; }
.dfig__tbl .is-top td { font-weight: 700; }
/* the kinds: a bar each, the most first */
.kbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kbars li { display: grid; grid-template-columns: minmax(7em, 36%) minmax(0, 1fr) 2.2em; align-items: center; gap: 10px; font-size: 14px; }
.kbars__l [lang="ar"] { display: block; font-size: 13px; color: var(--ink-2); }
.kbars__b { height: 12px; }
.kbars__b i { display: block; height: 100%; width: var(--w); background: var(--wine); border-radius: 0 4px 4px 0; }
[dir="rtl"] .kbars__b i { border-radius: 4px 0 0 4px; }
.kbars b { text-align: end; }

/* ---------- Round 6: the team area ----------
   The area in four sections (Round 7; before, four groups of tabs); the door's two ways to finish; classes as tick boxes, each with its
   colour from the doctors' Excel; the lists for the doctors; the team as rows; the applications switch and link; the quick
   add on an event; "How it works". */
/* the team area's four sections (Round 7): big buttons, an icon over the name; the open section's tabs under them. The bar
   scrolls away with the page: with the sections in it, it would take a phone's screen if it stayed */
.teamapp .tbar { position: static; }
.secs { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; padding-block: 4px 10px; }
.secb { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 64px; padding: 8px 6px; border: 1.5px solid var(--hair-2); border-radius: 12px; background: #fff; color: var(--ink); font-weight: 700; font-size: 14px; line-height: 1.15; text-align: center; cursor: pointer; }
.secb .ic { width: 22px; height: 22px; color: var(--wine); }
.secb [lang="ar"] { font-weight: 600; }
.secb.is-on { background: var(--wine); border-color: var(--wine); color: #fff; }
.secb.is-on .ic { color: #fff; }
@media (hover: hover) { .secb:not(.is-on):hover { border-color: var(--wine); color: var(--wine); } }
@media (min-width: 700px) { .secb { grid-auto-flow: column; justify-content: center; gap: 10px; min-height: 52px; font-size: 15px; } }
.tabs--sub { border-top: 1px solid var(--hair); }
/* the events list opens with the two jobs people come for */
.bigacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 12px 0 18px; }
.bigact { min-height: 56px; justify-content: center; font-size: 16px; }
.door__go { gap: 10px; }
.door__go .btn { flex: 1 1 220px; justify-content: center; }
.ticks { margin: 0; }
.ticks__list { gap: 6px; }
.tick-c { border-inline-start: 6px solid var(--c, var(--hair-2)); }
.ticks .opt span { min-width: 0; overflow-wrap: anywhere; }
/* the lists for the doctors */
.dlists { display: grid; gap: 12px; margin-bottom: 16px; }
.dlists > p.hint [lang="ar"] { display: block; }
.dlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dlist__r { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--hair); border-radius: var(--r-s); background: var(--paper-2); }
@media (min-width: 760px) { .dlist__r { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.dlist__who { display: grid; gap: 2px; min-width: 0; }
.dlist__who [lang="ar"] { color: var(--ink-2); }
.dlist__who small { color: var(--ink-2); font-size: 13px; }
.dlist__cls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dlist__c { display: inline-block; max-width: 100%; padding: 3px 8px; border-radius: 6px; background: var(--c); color: var(--ink); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.dlist__go { gap: 8px; }
/* the team, one row a person: the name and the KU ID on one line */
.mlist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.mrow { display: grid; gap: 8px; padding: 12px 14px; background: #fff; border: 1px solid var(--hair); border-radius: var(--r-s); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .mrow { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; grid-template-areas: "who role act" "last role act"; align-items: center; column-gap: 14px; } .mrow__who { grid-area: who; } .mrow__role { grid-area: role; } .mrow__last { grid-area: last; } .mrow__act { grid-area: act; } }
.mrow__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.mrow__who b { font-size: 16px; }
.mrow__id { color: var(--ink-2); font-weight: 600; }
.mrow__role { display: grid; gap: 4px; }
.mrow__role small { color: var(--ink-2); font-size: 13px; }
.mrow__last { margin: 0; color: var(--ink-2); }
.mrow__act { display: flex; flex-wrap: wrap; gap: 6px; }
.linkbtn { border: 0; background: none; padding: 10px 2px; margin: -10px 0; color: var(--wine); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* applications: the switch and the link */
.jswitch__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.jswitch__row .hint [lang="ar"] { display: block; }
.jtoggle { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 16px 6px 6px; border: 2px solid var(--hair-2); border-radius: 999px; background: #fff; font: inherit; font-weight: 800; font-size: 16px; color: var(--ink-2); cursor: pointer; }
.jtoggle__k { width: 52px; height: 32px; border-radius: 999px; background: var(--hair-2); position: relative; transition: background .2s; }
.jtoggle__k::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: inset-inline-start .2s var(--ease); }
.jtoggle[aria-checked="true"] { border-color: var(--ok); color: var(--ok); }
.jtoggle[aria-checked="true"] .jtoggle__k { background: var(--ok); }
.jtoggle[aria-checked="true"] .jtoggle__k::after { inset-inline-start: 23px; }
.jswitch.is-open { border-color: rgba(23, 101, 74, .45); }
.jlink { display: grid; gap: 14px; padding-top: 12px; border-top: 1px solid var(--hair); }
@media (min-width: 760px) { .jlink { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.jlink .hint [lang="ar"] { display: block; }
.jlink .kit__qr .qr { width: 180px; }
/* quick add: a doctor and a class onto the event */
.qadd { display: grid; gap: 10px; margin-top: 14px; padding: 12px; border: 1.5px dashed var(--hair-2); border-radius: var(--r-s); background: var(--paper-2); }
.qadd__grid { display: grid; gap: 10px; }
@media (min-width: 760px) { .qadd__grid { grid-template-columns: 1fr 1fr; } }
.qadd__two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qadd [data-qa-newdoc][hidden] { display: none; }
/* how it works */
.how { margin: 12px 0 4px; max-width: 760px; }
.how summary { cursor: pointer; display: inline-flex; gap: 8px; align-items: baseline; min-height: 44px; padding-block: 10px; font-weight: 700; color: var(--wine); }
.how summary [lang="ar"] { font-weight: 600; }
.how__list { margin: 4px 0 0; padding-inline-start: 22px; display: grid; gap: 8px; color: var(--ink-2); font-size: 15px; }
.how__list [lang="ar"] { display: block; }
/* Round 9 (Eisa, 6 Oct 2026) */
/* the days a class meets: KU's two weeks, as two big chips */
.dpick--wk { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; max-width: 420px; }
.dchip--wk { display: grid; }
.dchip--wk > span { min-width: 0; padding: 11px 10px; font-size: 15px; text-align: center; align-content: center; } /* the two chips the same height when one runs to two lines */
.dchip--wk [lang="ar"] { text-align: center; }
.qadd__days { grid-column: 1 / -1; }
/* an event's name opens it; when its registration opens */
.erow__t { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; min-height: 44px; }
.erow__t b { text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 4px; }
.erow__t:hover b, .erow__t:focus-visible b { text-decoration-color: var(--wine); color: var(--wine); }
.erow__soon { display: flex !important; gap: 6px; align-items: center; color: var(--wine) !important; font-weight: 600; }
.erow__soon .ic { width: 16px; height: 16px; flex: none; }
/* a picture to send: the whole button is the file picker */
.upbtn { position: relative; overflow: hidden; justify-content: center; }
.upbtn__in { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.upbtn:focus-within { outline: 3px solid rgba(134, 28, 64, .35); outline-offset: 2px; }
.upbtn:has(.upbtn__in:disabled) { opacity: .6; }
/* the poster in the event form */
.ppick { display: grid; gap: 14px; align-items: start; }
@media (min-width: 560px) { .ppick { grid-template-columns: 160px minmax(0, 1fr); } }
.ppick__img { display: grid; place-items: center; min-height: 120px; padding: 6px; border: 1.5px dashed var(--hair-2); border-radius: var(--r-s); background: var(--paper-2); text-align: center; font-size: 14px; }
.ppick__img img { width: 100%; height: auto; max-height: 240px; object-fit: contain; border-radius: 6px; }
.ppick__img [lang="ar"] { display: block; }
/* the event's sponsors and partners */
/* on a phone each name has the whole width (a sponsor's name is long), then the kind and the ×; on a laptop one line */
.crow--eptr { grid-template-columns: minmax(0, 1fr) 44px; }
.crow--eptr [data-ep="en"], .crow--eptr [data-ep="ar"] { grid-column: 1 / -1; }
@media (min-width: 900px) { .crow.crow--eptr { grid-template-columns: 1.4fr 1.2fr 1fr 44px; align-items: center; } .crow--eptr [data-ep="en"], .crow--eptr [data-ep="ar"] { grid-column: auto; } }
/* Photos: the events and their pictures */
.phadd { align-items: end; }
.phev { margin-top: 18px; }
.phev .h3 small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.phev .h3 small [lang="ar"] { display: block; }
.mgrid figure.is-poster { border-color: var(--wine); }
.mgrid figure.is-poster img { object-fit: contain; background: var(--paper-2); }
.mgrid figcaption .pill { align-self: center; }
/* the practice event's strip, its button at the end (More → Storage starts and ends it) */
.practice-note { align-items: center; flex-wrap: wrap; }
.practice-note > span { flex: 1 1 240px; }
.practice-note .btn { flex: none; }
.practice-note [lang="ar"] { display: block; }
.panel.practice.is-on { border-color: rgba(138, 85, 16, .45); }

/* the Turnstile check above a form's button (Round 12, src/js/guard.js): nothing shows while it is off or not needed */
.ts { display: flex; justify-content: center; }
.ts:empty { display: none; }
.ts .err { color: var(--bad, #A1242C); font-size: 14px; }

/* a certificate of attendance on its page (Round 12, src/js/cert.js) */
.certcv { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 6px 24px -8px rgba(34, 29, 30, .35); }

/* More → IT vault (9 Oct 2026): the pages of docs/vault, readable on a phone. A code block or a table that is wider than the
   phone scrolls inside its own box; the page itself never does. */
.vault__nav { flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; scroll-margin-top: calc(var(--head-h, 64px) + 12px); }
.vault { min-width: 0; line-height: 1.6; overflow-wrap: break-word; }
.vault h3 { font-size: 20px; margin: 26px 0 8px; }
.vault h4 { font-size: 17px; margin: 20px 0 6px; }
.vault h5 { font-size: 15px; margin: 16px 0 4px; }
.vault p, .vault li { max-width: 80ch; }
.vault p { margin: 0 0 12px; }
.vault ul, .vault ol { margin: 0 0 12px; padding-inline-start: 22px; }
.vault li { margin: 4px 0; }
.vault code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em; background: var(--paper-2); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.vault a { color: var(--wine); }
.vault__code { margin: 0 0 14px; padding: 12px 14px; background: var(--paper-2); border: 1px solid var(--hair); border-radius: var(--r); overflow-x: auto; font-size: 13px; line-height: 1.5; }
.vault__code code { background: none; padding: 0; font-size: inherit; overflow-wrap: normal; white-space: pre; }
.vault__dia figcaption { font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.vault .tablewrap { margin: 0 0 14px; }
.vault .tbl td, .vault .tbl th { min-width: 9ch; }
.vault__src { margin-top: 22px; }
.vault__dia { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--rose-2); }
.vault__dk { margin: 10px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wine); }
.vault__parts, .vault__flow { margin: 0 0 8px; }
.vault__parts ul { margin: 2px 0 4px; }
.vault__src2 summary { cursor: pointer; color: var(--wine); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.vault__src2 .vault__code { margin-bottom: 4px; }

/* Help (9 Oct 2026): the team area's user manual. Each position's part opens first; a question opens to its numbered steps;
   the bold words are the buttons as the screen shows them, in the club's wine. */
.help { display: grid; gap: 14px; }
.help__part > summary { cursor: pointer; font-size: 18px; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.help__first { margin: 12px 0 14px; padding: 12px 14px; background: var(--rose-2); border-radius: var(--r); }
.help__h { margin: 0; font-size: 15px; font-weight: 700; }
.help__steps { margin: 6px 0 0; padding-inline-start: 22px; display: grid; gap: 6px; line-height: 1.55; }
.help__steps b, .help .hint b { color: var(--wine); }
.help__qa { display: grid; gap: 8px; }
.help__q { padding: 0 14px; background: #fff; border: 1px solid var(--hair); border-radius: var(--r); }
.help__q > summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; padding: 10px 0; font-weight: 600; }
.help__q[open] { padding-bottom: 12px; border-color: var(--hair-2); }
.help__q .hint { margin: 10px 0 0; }
.tbar .btn.is-on { background: var(--rose-2); }
.help__part > summary, .help__q > summary { list-style: none; gap: 10px; }
.help__part > summary::-webkit-details-marker, .help__q > summary::-webkit-details-marker { display: none; }
.help__part > summary::after, .help__q > summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-inline-start: auto; border: solid var(--wine); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s; }
.help__part[open] > summary::after, .help__q[open] > summary::after { transform: rotate(-135deg); }
/* the top bar with Help beside My PIN and Sign out (9 Oct 2026): on a phone the buttons go to a line of their own under a long
   name, instead of squeezing it until it runs into them */
.tbar__in { flex-wrap: wrap; row-gap: 8px; }
.tbar__in > .row { margin-inline-start: auto; }

/* Sponsors and partners with their logos (9 Oct 2026). In the Sponsors tab, each row starts with its logo's square and the
   button to upload one; on an event's page and its registration page, the event's own sponsors and partners in the Sponsors
   page's squares. */
.ptrlogo { position: relative; display: flex; align-items: center; gap: 8px; grid-column: 1 / -1; }
.ptrlogo .ptr__logo { flex: none; grid-row: auto; }
/* the x that takes an uploaded logo off sits on the logo's corner: it takes no room of its own, so every row's boxes line up;
   it can be tapped 44 pixels wide */
.ptrlogo .x { position: absolute; top: -9px; inset-inline-start: 31px; width: 24px; height: 24px; border-radius: 50%; font-size: 15px; }
.ptrlogo .x::after { content: ""; position: absolute; inset: -10px; }
@media (min-width: 900px) { .crow.crow--ptr { grid-template-columns: 236px 1.4fr 1.2fr 1fr .8fr 1.6fr 44px; } .ptrlogo { grid-column: auto; } }
.btn.is-due { box-shadow: 0 0 0 3px var(--rose); }
.evsp { margin-top: 26px; }
.evsp__h { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wine); }
.evsp__h [lang="ar"] { letter-spacing: 0; text-transform: none; }
/* an event's sponsors have no years under their names: one line, the name beside its logo, two to a row on a phone */
.evsp .ptrs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 8px; }
.evsp .ptr { min-height: 0; padding: 10px 12px; }
.evsp .ptr__logo { grid-row: auto; }
.evsp .ptr__n { font-size: 15px; }

/* One language at a time; the top bar; the moving posters; the carousel; the course maps;
   the board; the tools; the history line's events; and the page turned right to left for
   Arabic. Same tokens as site.css. */

/* ---------- one language at a time ----------
   English unless the visitor picks Arabic. The logo block, the language button and the
   course maps (.both) keep both languages, as the guide prints them. */
html:not(.l-ar) [lang="ar"]:not(.both, .both *, input, textarea, select) { display: none !important; }
html.l-ar [lang="en"]:not(.both, .both *) { display: none !important; }
/* an Arabic visitor sees nothing until the page has marked its English, then the page */
html.l-wait body { opacity: 0; animation: l-show .01s 1.2s forwards; }
@keyframes l-show { to { opacity: 1; } }
/* In Arabic the Arabic line is the line: it takes the colour and the weight its English had */
html.l-ar [lang="ar"]:not(.both, .both *, input, textarea, select) { color: inherit; font-weight: inherit; }
html.l-ar .ph h1 [lang="ar"], html.l-ar .hero__title [lang="ar"], html.l-ar .ph__lead [lang="ar"], html.l-ar .evp__t [lang="ar"] { margin-top: 0; }
/* Arabic set on its own takes the start of its line, which is the right; the phone's hero stays centred */
html.l-ar .sh h2 [lang="ar"], html.l-ar .ph h1 [lang="ar"] { text-align: start; }
html.l-ar .hero__title [lang="ar"] { text-align: center; }
@media (min-width: 980px) { html.l-ar .hero__title [lang="ar"], html.l-ar .hero__line [lang="ar"] { text-align: start; } }
html.l-ar .sh.c h2 [lang="ar"], html.l-ar .sh.c p [lang="ar"] { text-align: center; }
/* a folding panel's title: in Arabic its line is the Arabic alone, so it stays beside the arrow (app.css sets it on its own line
   under the English, from when both showed) */
html.l-ar details.panel summary [lang="ar"] { display: inline; }
.foot__ar { display: block; }
.poster__gen b [lang="ar"] { font-size: inherit; color: inherit; }

/* ---------- the top bar: one row, Courses in the middle ---------- */
.brand__en { display: block; }
[dir="rtl"] .brand__en { text-align: right; }
.top .wrap { gap: 10px; }
.brand { margin-inline-end: 0; flex: none; }
.nav { display: none; flex: 1; justify-content: center; min-width: 0; }
.nav a { white-space: nowrap; padding: 6px 11px; }
@media (min-width: 1060px) { .nav { display: flex; } }
.top__end { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; flex: none; }
@media (min-width: 1060px) { .top__end { margin-inline-start: 0; } .menu-btn { display: none; } }
.lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px; min-height: 44px; border: 1.5px solid var(--hair-2); border-radius: 999px; background: var(--card); cursor: pointer; }
.lang__o { display: grid; place-items: center; min-width: 36px; height: 34px; padding: 0 6px; border-radius: 999px; font-weight: 700; font-size: 14px; line-height: 1; color: var(--ink-2); }
.lang__o--ar { font-family: var(--f-ar-h); font-size: 19px; padding-bottom: 3px; }
/* read in English, the one Arabic letter on the button takes the phone's own Arabic face: the site's Arabic fonts are fetched
   only for a reader who reads in Arabic (Round 7, for a slow connection) */
html:not(.l-ar) .lang__o--ar { font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif; }
html:not(.l-ar) .lang__o--en, html.l-ar .lang__o--ar { background: var(--wine); color: #fff; }
.lang:hover { border-color: var(--wine); }
.top__join { min-height: 44px; padding: 6px 16px; }
.top__join [lang="ar"] { line-height: 1.2; }
@media (max-width: 439px) {
  .top .wrap { gap: 6px; }
  .menu-btn { padding: 0 11px; }
  .menu-btn > span { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .top__join { padding: 6px 12px; }
}
.sheet nav a { justify-items: start; }

/* ---------- the moving posters ---------- */
.tick { position: relative; display: flex; flex-direction: column; padding: 6px 0 16px; background: var(--wine-3); overflow: hidden; }
/* the window's own padding leaves room for a poster's lift (3px) and its white focus ring (6px), which its overflow would cut off */
.tick__win { order: 1; overflow: hidden; padding-block: 10px; }
.tick__run { display: flex; width: max-content; animation: tick var(--tick-s, 170s) linear infinite; }
.tick__row { display: flex; gap: 12px; margin: 0; padding: 0 6px; list-style: none; }
.tk { flex: none; }
.tk__a { position: relative; display: block; height: 196px; border-radius: 8px; overflow: hidden; background: var(--paper-2); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6); transition: transform .2s var(--ease); }
@media (min-width: 900px) { .tk__a { height: 232px; } }
.tk__a:hover, .tk__a:focus-visible { transform: translateY(-3px); }
.tick :focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.tk__a img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tk__gen { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 14px 12px; text-align: center; background: var(--paper-2) var(--wm); background-size: 150px 116px; }
.tk__gen::before { content: ""; position: absolute; inset: 6px; border: 1.2px solid var(--wine); pointer-events: none; }
.tk__gen svg { width: 34%; }
.tk__gen b { font-size: 12px; line-height: 1.35; color: var(--wine); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tk__gen b [lang="ar"] { display: block; font-size: 12px; line-height: 1.6; }
.tk__gen small { font-size: 11px; color: var(--ink-2); }
/* The strip rests when the Pause button says so, when it is off the screen, under a finger (the script sets "is-held" on a touch), and under
   the mouse or the keyboard, so a poster can be read and opened. Only a real pointer holds it: on a phone a tap leaves ":hover" on, and plain
   focus (":focus-within") stays on a button after a tap, and between them "Play" played nothing until the visitor touched something else.
   A poster reached with the keyboard is ":focus-visible". */
.tick.is-paused .tick__run, .tick.is-off .tick__run, .tick.is-held .tick__run { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) { .tick:hover .tick__run { animation-play-state: paused; } }
.tick:has(:focus-visible) .tick__run { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }
[dir="rtl"] .tick__run { animation-name: tick-rtl; }
@keyframes tick-rtl { to { transform: translateX(50%); } }
/* under the strip: the way to every past event, and the hand controls (the script shows the controls: they do nothing without it) */
.tick__bar { order: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-top: 4px; }
.tick__ctl { display: flex; align-items: center; gap: 8px; }
.tick__go, .tick__btn { min-height: 44px; border: 1px solid rgba(255, 255, 255, .45); background: transparent; color: #fff; cursor: pointer; }
.tick__go:hover, .tick__btn:hover { background: rgba(255, 255, 255, .12); }
.tick__go { display: grid; place-items: center; width: 44px; padding: 0; border-radius: 50%; }
.tick__go svg { width: 20px; height: 20px; }
.tick__go--back svg, [dir="rtl"] .tick__go svg { transform: scaleX(-1); }
[dir="rtl"] .tick__go--back svg { transform: none; }
.tick__btn { min-width: 64px; padding: 2px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.tick__btn [lang="ar"] { font-size: 12px; }
.tick__g, .tick.is-paused .tick__p { display: none; }
.tick.is-paused .tick__g { display: inline; }
/* Under reduced motion nothing moves by itself: the strip is a row to scroll, with its own arrows (Pause has nothing to stop). */
@media (prefers-reduced-motion: reduce) {
  .tick__run { animation: none; }
  .tick__win { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .tick__row[aria-hidden] { display: none; }
  .tick__btn { display: none; }
}

/* ---------- the course maps ---------- */
:root { --m-sel: #861C40; --m-pre: #B45309; --m-open: #0F766E; }
.mapsec { padding-top: 24px; }
.mapx { position: relative; }
.mapx__bar { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.mapx__chips { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.mapx__chips::-webkit-scrollbar { display: none; }
.mchip-l { flex: none; min-height: 44px; padding: 4px 12px; border-radius: 10px; border: 1.5px solid var(--hair-2); background: #fff; color: var(--ink); font-weight: 700; font-size: 14px; line-height: 1.2; cursor: pointer; white-space: nowrap; }
.mchip-l [lang="ar"] { font-weight: 600; }
.mchip-l[aria-pressed="true"] { border-color: var(--wine); box-shadow: inset 0 0 0 1.5px var(--wine); color: var(--wine); }
.mapx__zoom { flex: none; display: flex; gap: 6px; }
.zb { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid var(--hair-2); background: #fff; color: var(--wine); font-size: 24px; font-weight: 700; line-height: 1; cursor: pointer; }
.zb:hover { border-color: var(--wine); }
.zb svg { width: 20px; height: 20px; }
.mapx__hint { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; font-size: 14px; color: var(--ink-2); }
.mapx__hint svg { width: 18px; height: 18px; flex: none; color: var(--wine); margin-top: 2px; }
.mapx__view { position: relative; }
.stage { position: relative; direction: ltr; height: min(74svh, 780px); overflow: auto; background: #E9E5E4; border: 1px solid var(--hair); border-radius: var(--r); overscroll-behavior: contain; cursor: grab; }
.stage.is-drag { cursor: grabbing; user-select: none; }
.stage .sizer { position: relative; }
.stage .page { position: absolute; left: 0; top: 0; margin: 0; transform-origin: 0 0; box-shadow: 0 2px 14px rgba(0, 0, 0, .14); }
/* ---- the clean map (Round 7, Eisa 5 Oct 2026: "just keep the main courses and the levels") ----
   The build leaves out the sheet's title block, side panels, footer, watermark, notes and the small labels on the cards
   (cleanSheet in src/lib/map.mjs). Here: the sheet is as tall as its levels, with room between them for the lines; every course
   looks the same, its number big and white on the club's colour and its name under it, in the page's language; the levels are
   labelled big; the lines are grey until a course is tapped; the site's own fonts, so the sheet's are not fetched.
   (".mapx" is in front of each selector so these win over the sheet's own stylesheet, which loads after this one.) */
.mapx .stage .page { height: auto; padding: 9mm 9mm 11mm; background: #FBFAFA; }
.mapx .stage .body { display: block; }
.mapx .stage .canvas, .mapx .stage .canvas--stack { display: block; }
.mapx .stage .grid, .mapx .stage .canvas--stack > .grid { height: auto; row-gap: 17mm; align-content: start; }
.mapx .stage .grid--snug, .mapx .stage .grid--roomy { grid-auto-rows: minmax(28mm, auto); }
.mapx .stage .page, .mapx .stage .page * { font-family: var(--f-en) !important; }
.mapx .stage .page [lang="ar"], .mapx .stage :is(.crd__ar, .crd__arname, .band__ar, .ztag__ar, .gtag__ar, .orbox__a, .freebox__ar, .gatelead__ha, .x-ar) { font-family: var(--f-ar) !important; }
html:not(.l-ar) .mapx .stage :is(.crd__ar, .crd__arname, .band__ar, .ztag__ar, .gtag__ar, .orbox__a, .freebox__ar, .gatelead__ha, .x-ar) { display: none; }
html.l-ar .mapx .stage :is(.crd__en, .crd__tr, .band__l, .ztag__en, .gtag__en, .orbox__t, .freebox__en, .gatelead__h, .x-en) { display: none; }
.mapx .stage .crd { background: #fff; border: .3mm solid rgba(34, 29, 30, .16); box-shadow: 0 .4mm 1.2mm rgba(0, 0, 0, .08); }
.mapx .stage .crd__top { background: var(--wine) !important; justify-content: flex-start; padding: 2.2mm 2.5mm; }
/* seven digits fit the narrowest card (General's thirteen columns) */
.mapx .stage .crd__code { font-size: 20pt; letter-spacing: 0; color: #fff; font-weight: 700; }
.mapx .stage .crd__body { background: #fff; padding: 2.4mm 2.5mm 3mm; justify-content: flex-start; }
.mapx .stage :is(.crd__en, .crd__ar, .crd__tr, .crd__arname) { font-size: 14.5pt; line-height: 1.22; font-weight: 600; color: var(--ink); margin: 0; direction: inherit; text-align: start; hyphens: manual; overflow-wrap: break-word; }
html.l-ar .mapx .stage :is(.crd__ar, .crd__arname) { direction: rtl; text-align: right; }
.mapx .stage .crd--gate { border-style: dashed; }
.mapx .stage .band { background: #EFE9EA !important; }
.mapx .stage :is(.band__l, .band__ar) { font-size: 10pt; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2) !important; line-height: 1.2; }
.mapx .stage .band__n { font-size: 34pt; font-weight: 800; color: var(--wine) !important; line-height: 1; }
.mapx .stage .stripe { background: rgba(134, 28, 64, .035) !important; mix-blend-mode: normal; }
.mapx .stage .zone { border-color: rgba(34, 29, 30, .3) !important; box-shadow: none !important; background: rgba(255, 255, 255, .55); }
.mapx .stage :is(.ztag__n, .gtag__n) { background: var(--wine) !important; color: #fff !important; }
.mapx .stage :is(.ztag__en, .ztag__ar, .gtag__en, .gtag__ar) { color: var(--wine) !important; font-size: 14pt; font-weight: 700; }
.mapx .stage :is(.ztag__sub, .gtag__sub, .gatelead__h, .gatelead__ha) { font-size: 11.5pt; color: var(--ink-2) !important; }
.mapx .stage .gwrap { --cat: var(--wine); }
.mapx .stage .crd__tr { font-style: normal; }
.mapx .stage :is(.ztag__n, .gtag__n) { font-size: 9pt; padding: .8mm 2mm; }
.mapx .stage :is(.orbox__t, .orbox__a, .freebox__en, .freebox__ar) { font-size: 12pt; line-height: 1.35; color: var(--ink) !important; }
.mapx .stage .crd__need { font-size: 11pt; font-weight: 700; color: var(--wine); margin-top: 1.5mm; }
html:not(.l-ar) .mapx .stage .crd__need span, html.l-ar .mapx .stage .crd__need b { display: none; }
.mapx .stage #wires path:not(.w-in):not(.w-out) { stroke: #8E8789 !important; }
.mapx .stage #wires marker * { fill: #8E8789 !important; stroke: none; }
.mapx .stage #wires circle { fill: #8E8789 !important; }
/* ---- end of the clean map: the planner's page takes the rules above too, all but the ones that hide a language (cleanPlanner in src/lib/map.mjs) ---- */
.stage .crd[data-code] { cursor: pointer; transition: opacity .2s, box-shadow .15s; }
.stage .crd[data-code]:focus-visible { outline: 1.2mm solid var(--wine); outline-offset: .6mm; }
.mapx.is-focus .stage .crd { opacity: .24; }
.mapx.is-focus .stage .crd.is-sel, .mapx.is-focus .stage .crd.is-pre, .mapx.is-focus .stage .crd.is-open { opacity: 1; }
.stage .crd.is-sel { box-shadow: 0 0 0 1.3mm var(--m-sel), 0 2mm 5mm rgba(0, 0, 0, .25); }
.stage .crd.is-pre { box-shadow: 0 0 0 1.1mm var(--m-pre); }
.stage .crd.is-open { box-shadow: 0 0 0 1.1mm var(--m-open); }
.mapx.is-focus .stage #wires path, .mapx.is-focus .stage #wires circle { opacity: .14; transition: opacity .2s; }
.mapx.is-focus .stage #wires path.w-in, .mapx.is-focus .stage #wires path.w-out { opacity: 1; stroke-width: 2.4px; }
.mapx.is-focus .stage #wires path.w-in { stroke: var(--m-pre) !important; }
.mapx.is-focus .stage #wires path.w-out { stroke: var(--m-open) !important; }
.mapx__key { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink-2); }
.mapx__key li { display: flex; gap: 8px; align-items: center; }
.k { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 3px var(--kc); }
.k--sel { --kc: var(--m-sel); } .k--pre { --kc: var(--m-pre); } .k--open { --kc: var(--m-open); }
.mapx__pdf { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font-size: 14px; font-weight: 600; }
.mapx__pdf a { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; }
.mapx__pdf svg { width: 18px; height: 18px; flex: none; }
.sheetlist { margin-top: 22px; }
.sheetlist .sheetbody { padding: 0 16px 16px; }
/* the card that says it in words */
.mcard { position: fixed; z-index: 45; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); max-height: 58svh; overflow: auto; display: grid; gap: 10px; padding: 16px 16px 14px; background: #fff; border: 1px solid var(--hair-2); border-radius: 14px; box-shadow: 0 18px 50px -14px rgba(34, 29, 30, .55); }
.mcard[hidden] { display: none; }
/* on a laptop the clean map is often taller than the screen (it shows whole): the card stays in the screen's corner */
@media (min-width: 900px) { .mcard { position: fixed; left: auto; right: auto; inset-inline-end: 24px; bottom: 24px; width: 380px; max-height: calc(100svh - 150px); } }
/* on a phone the card is a sheet over the bottom half, so the map stays in sight above it */
@media (max-width: 899px) {
  .mcard { max-height: 46svh; gap: 8px; padding: 12px 14px; }
  .mcard__code b { font-size: 22px; }
  .mcard__t, .mcard__t [lang="ar"] { font-size: 17px; }
}
.mcard__x { position: absolute; inset-inline-end: 8px; top: 8px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--paper-2); font-size: 22px; line-height: 1; cursor: pointer; }
.mcard__code { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-inline-end: 44px; }
.mcard__code b { font-size: 26px; line-height: 1.1; color: var(--wine); }
.mcard__code small { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.mcard__copy { min-height: 36px; padding: 2px 12px; border: 1.5px solid var(--hair-2); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; color: var(--wine); cursor: pointer; }
.mcard__t { font-size: 19px; line-height: 1.3; }
.mcard__t [lang="ar"] { display: block; font-size: 19px; text-align: right; }
html.l-ar .mcard__t [lang="ar"] { text-align: start; }
.mcard__h { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.mcard__none, .mcard__note { font-size: 14px; color: var(--ink-2); }
.mcard__none [lang="ar"], .mcard__note [lang="ar"] { display: block; }
.mchips { display: grid; gap: 6px; margin-top: 6px; }
.mchip { display: flex; gap: 10px; align-items: baseline; width: 100%; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--hair-2); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; line-height: 1.35; text-align: start; text-decoration: none; cursor: pointer; }
.mcard__sec--pre .mchip { border-color: color-mix(in srgb, var(--m-pre) 45%, #fff); }
.mcard__sec--open .mchip { border-color: color-mix(in srgb, var(--m-open) 45%, #fff); }
.mchip b { flex: none; color: var(--ink); }
.mchip:hover { background: var(--paper-2); color: var(--ink); }
.mchip--off > span::after { content: " ↗"; color: var(--ink-2); }
.mcard__go { justify-self: start; }

/* ---------- the board ---------- */
.board { padding: 34px 22px 26px; background: var(--paper-2); background-image: var(--wm); background-size: 190px 147px; text-align: center; border-radius: var(--r); }
.board__yr { font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: .04em; }
.board__t { margin-top: 4px; font-size: 26px; color: var(--wine); }
.board__t [lang="ar"] { display: block; font-size: 26px; color: var(--wine); text-align: center; }
.board__list { list-style: none; margin: 22px auto 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
@media (min-width: 900px) { .board__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bm { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 22px 10px 18px; background: #fff; border: 1px solid var(--hair); border-radius: 12px; }
.bm--lead { grid-column: 1 / -1; padding: 26px 12px 22px; }
.bm__role { font-size: 14px; font-weight: 700; color: var(--wine); line-height: 1.3; }
.bm__role [lang="ar"] { display: block; font-size: 15px; }
.bm__name { font-size: 18px; line-height: 1.3; }
.bm--lead .bm__name { font-size: 24px; }
.board .src { margin-top: 18px; }

/* ---------- wide screens: the front page's Next event card ---------- */
/* the card holds its picture and its words as one group in the middle, not stretched from side to side */
@media (min-width: 1100px) {
  .next { grid-template-columns: 280px minmax(0, 62ch); justify-content: center; column-gap: 40px; padding: 24px; }
  .next__t, .next__t [lang="ar"] { font-size: 28px; }
  .next__body .ev__s { font-size: 16px; }
}

/* ---------- events: the whole archive, a row each, with the kind filter above it ---------- */
/* the filter: one row of chips that slides sideways on a phone and sits whole on a wide screen */
.kinds { display: flex; gap: 8px; margin: 0 calc(var(--gut) * -1) 4px; padding: 2px var(--gut) 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: var(--gut); }
.kinds::-webkit-scrollbar { display: none; }
.kind { flex: none; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; padding: 4px 8px 4px 14px; border: 1.5px solid var(--hair-2); border-radius: 999px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer; white-space: nowrap; }
.kind [lang="ar"] { font-weight: 600; }
.kind b { min-width: 28px; padding: 2px 8px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); font-size: 13px; font-weight: 700; text-align: center; }
.kind:hover { border-color: var(--wine); }
.kind[aria-pressed="true"] { border-color: var(--wine); background: var(--wine); color: #fff; }
.kind[aria-pressed="true"] b { background: rgba(255, 255, 255, .22); color: #fff; }
[dir="rtl"] .kind { padding: 4px 14px 4px 8px; }
/* on a laptop the nine chips sit whole in the one row; if a window is too narrow for that, the row slides, as on a phone */
@media (min-width: 1100px) { .kinds { gap: 6px; } .kind { gap: 6px; padding: 4px 6px 4px 12px; font-size: 13px; } .kind b { min-width: 24px; padding: 2px 6px; font-size: 12px; } [dir="rtl"] .kind { padding: 4px 12px 4px 6px; } }
.kinds__n { margin: 6px 0 14px; font-size: 14px; color: var(--ink-2); }
.kinds__n b { color: var(--ink); }
/* the list: the page's own event card, picture on top: a square picture, the title (two lines at most), then the date and the kind.
   Two cards across on a phone, three on an iPad held upright, four on an iPad held sideways and on a laptop, five on a big screen. */
.events--rows { list-style: none; margin: 0; padding: 0; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .events--rows { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1024px) { .events--rows { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .events--rows { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.events--rows > li { min-width: 0; }
/* Speed pass (9 Oct 2026): the long parts below the first screen are laid out only when they come near it (the moving posters on
   Home, 2,100 elements; the 89 past events, 2,500). Switching the language, which lays out the whole page again, took 0.6 to 0.7
   s on a slow phone; the sizes given are what a part measures on a phone, kept once it has been drawn ("auto") */
.tick { content-visibility: auto; contain-intrinsic-size: auto none auto 286px; }
.events--rows > li { content-visibility: auto; contain-intrinsic-size: auto none auto 280px; }
@media (min-width: 600px) { .events--rows > li { contain-intrinsic-size: auto none auto 320px; } }
@media (min-width: 1024px) { .events--rows > li { contain-intrinsic-size: auto none auto 340px; } }
@media (min-width: 1280px) { .events--rows > li { contain-intrinsic-size: auto none auto 400px; } }
.ev--row { height: 100%; }
.ev--row .ev__img { aspect-ratio: 1; }
.ev--row .ev__img img { position: absolute; inset: 0; }
/* under the picture sits the club's O: a picture that does not load leaves the mark, never an empty frame */
.ev__ph { position: absolute; inset: 0; display: grid; place-items: center; background: var(--paper-2) var(--wm); background-size: 110px 85px; }
.ev__ph svg { width: 46%; }
/* a card that opens the club's post on Instagram wears the mark on its picture */
.ev__igb { position: absolute; inset-inline-end: 8px; bottom: 8px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--wine); box-shadow: 0 1px 4px rgba(34, 29, 30, .28); }
.ev__igb svg { width: 17px; height: 17px; }
.ev--row .ev__body { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; }
.ev--row .ev__t { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev--row .ev__t [lang="ar"] { font-size: 14px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 600px) { .ev--row .ev__t, .ev--row .ev__t [lang="ar"] { font-size: 15px; } }
/* the date and the kind sit at the foot of the card, so they line up along a row of cards whatever the title takes */
.ev--row .ev__when { margin-top: auto; font-size: 13px; gap: 0 10px; }
.ev--row .ev__when .num { flex-basis: auto; color: var(--ink-2); font-weight: 600; }
.ev--row .ev__count { font-size: 13px; }

/* the course finder's rows: a sheet, or the planner, above the courses, drawn as a course card in its own colour */
.cc--sheet { --cc: var(--wine); }
.cc--tool { --cc: var(--ink); }

/* ---------- right to left, for Arabic ---------- */
[dir="rtl"] .search .inp { padding-left: 14px; padding-right: 46px; }
[dir="rtl"] .search > svg { left: auto; right: 15px; }
[dir="rtl"] select.inp { background-position: 14px 50%, 20px 50%; padding-right: 14px; padding-left: 40px; }
[dir="rtl"] .goal__n { left: auto; right: 12px; }
[dir="rtl"] .goal li { padding-left: 0; padding-right: 14px; }
[dir="rtl"] .goal li::before { left: auto; right: 0; }
[dir="rtl"] .bus { direction: ltr; }
[dir="rtl"] .ic--next { transform: scaleX(-1); }
[dir="rtl"] .skip { left: auto; right: 12px; }
[dir="rtl"] .tool [lang="ar"], [dir="rtl"] .cc__ar { text-align: start; }

/* ---------- taps stay 44px now that each control shows one language, not two lines ---------- */
.nav a { min-height: 44px; align-content: center; }
.menu-btn { min-width: 44px; justify-content: center; }
.foot__member { min-height: 44px; padding: 0; }
.foot__links a { min-width: 44px; justify-content: center; }
details.panel summary, .spare summary, .mine__who summary { min-height: 44px; padding-block: 10px; }

/* ---------- .mj and .steps came with the first Start here page; the planner page and the sheets still use them (the page itself is styled in start.css now). Then the term dates. ---------- */
.mj { display: grid; gap: 12px; align-content: start; border-top: 4px solid var(--wine); }
.mj > h3 { margin-bottom: 0; }
.mj p { font-size: 16px; }
.mj .hint { margin: 0; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* the term dates: the three terms of one academic year, one under another on a phone and side by side, at the same
   size, from 740px. Every card has the same eight rows in the same order, the date first and what it is under it.
   A date that has passed is grey, with a tick; a row the term has no date for says so, in the same grey. */
.tgroups { display: grid; gap: 14px; }
.tgroup { min-width: 0; padding: 16px 18px 6px; background: #fff; border: 1px solid var(--hair); border-radius: var(--r); }
.tgroup[hidden] { display: none; }
.tgroup__h { padding-bottom: 8px; border-bottom: 1.5px solid var(--wine); font-size: 18px; color: var(--wine); }
.dlist { list-style: none; margin: 0; padding: 0; }
.dlist li { display: grid; align-content: start; gap: 1px 14px; padding: 10px 0; border-top: 1px solid var(--hair); }
.dlist li:first-child { border-top: 0; }
.dlist .d__when { order: -1; font-size: 17px; color: var(--wine); }
.dlist .d__what { font-size: 15px; }
.dlist .is-past .d__when, .dlist .is-past .d__what, .dlist .is-none .d__when, .dlist .is-none .d__what { color: var(--ink-3); }
.dlist .is-none .d__when { font-size: 15px; font-weight: 400; }
.d__tick { display: none; margin-inline-start: 6px; }
.dlist .is-past .d__tick { display: inline; }
.dtick { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.2em; color: var(--ok); }
@media (min-width: 740px) { .tgroups { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0; } }
/* where the browser can, the three cards share their rows: a heading and eight rows each, so row 5 of one card
   sits level with row 5 of the others whatever the words wrap to */
@media (min-width: 740px) {
  @supports (grid-template-rows: subgrid) {
    .tgroup { display: grid; grid-template-rows: subgrid; grid-row: span 9; row-gap: 0; }
    .tgroup__h { grid-row: 1; }
    .tgroup .dlist { display: grid; grid-template-rows: subgrid; grid-row: 2 / span 8; row-gap: 0; }
  }
}
/* the strip under "Next event": the next one or two dates, the note, and the two links */
.dstrip { display: grid; gap: 6px; margin-top: 16px; padding: 14px 16px 4px; background: rgba(255, 255, 255, .7); border: 1px solid var(--hair); border-inline-start: 4px solid var(--wine); border-radius: var(--r-s); }
.dstrip__k { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--wine); }
.dstrip__k svg { width: 18px; height: 18px; flex: none; }
.dstrip__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px 32px; }
@media (min-width: 760px) { .dstrip__list { grid-auto-flow: column; justify-content: start; } }
.dstrip__list li { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: baseline; font-size: 16px; }
.dstrip__list .d__when { color: var(--wine); }
.dstrip__n { font-size: 14px; color: var(--ink-2); }
.dstrip__go { display: flex; flex-wrap: wrap; gap: 0 22px; font-size: 14px; font-weight: 600; }
.dstrip__go a { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; }
.dstrip__go svg { width: 16px; height: 16px; flex: none; }
/* the college's own page, with its link and the line that it has the last word */
.official { display: grid; gap: 10px; margin-top: 12px; }
.official > p, .official .hint { margin: 0; }
.official > .btn { justify-self: start; }

/* The Courses page (/courses): the title; under it the course finder and the two buttons together; then a row of sheet tabs that sticks
   under the site's bar, and the one sheet on show (Round 8, Eisa 6 Oct 2026: "It's not together", "I press MIS. It switches to the
   MIS course"). Without the script the six sheets stand one under another. Loaded after site, app, feat and extra, so a rule here
   wins over theirs at the same weight.
   Every rule starts with this page's own classes (.ph--c, .ctools, .csheets, .csheet), so the IT dashboard's tabs (.tbar, .tabs,
   .tab) and the other pages stay as they were. Logical properties only (inline-start, inline-end), so Arabic mirrors by itself. */

/* ---------- the header: the title, then the finder and the two buttons in one row (one under the other on a phone) ---------- */
.ph--c { padding-block: 20px 24px; }
@media (min-width: 900px) { .ph--c { padding-block: 32px 34px; } }
.ctools { display: grid; gap: 12px; margin-top: 16px; }
.ctools__search { min-width: 0; }
/* side by side where both fit on one line, one under the other on a phone; each as tall as the search box */
.ctools__acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.ctools__acts .btn { min-height: 60px; justify-content: center; text-align: center; }
@media (min-width: 900px) {
  .ctools { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }
  .ctools__acts { display: flex; gap: 12px; }
}

/* ---------- the sheets ---------- */
/* overflow-anchor: the browser's scroll anchoring is off for the sheets: js/courses.js keeps the page's place itself when a sheet comes in
   above it, the same in every browser (anchoring loses its place when the sheet it anchored to is the one being replaced, and Safari has none) */
.csheets { --tabs-h: 56px; border-bottom: 1px solid var(--hair); overflow-anchor: none; }

/* The row of tabs. It sticks under the site's bar (--head-h tall) and slides sideways inside itself when the six do not fit,
   so the page never does. The tab you are in is filled; the edge that still has tabs behind it fades (the script sets data-more). */
.csheets__bar { position: sticky; top: var(--head-h); z-index: 30; height: var(--tabs-h); background: var(--card); border-bottom: 1px solid var(--hair); }
.csheets__bar::before, .csheets__bar::after { content: ""; position: absolute; top: 0; bottom: 0; width: 32px; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .15s; }
.csheets__bar::before { inset-inline-start: 0; background: linear-gradient(to right, var(--card) 20%, transparent); }
.csheets__bar::after { inset-inline-end: 0; background: linear-gradient(to left, var(--card) 20%, transparent); }
[dir="rtl"] .csheets__bar::before { background: linear-gradient(to left, var(--card) 20%, transparent); }
[dir="rtl"] .csheets__bar::after { background: linear-gradient(to right, var(--card) 20%, transparent); }
.csheets__bar[data-more~="start"]::before, .csheets__bar[data-more~="end"]::after { opacity: 1; }
.csheets__bar .tabs { height: 100%; align-items: center; gap: 8px; padding-block: 0; overscroll-behavior-x: contain; scroll-padding-inline: var(--gut); }
.csheets__bar .tab {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--hair-2); border-radius: 999px; background: var(--card); color: var(--ink);
  font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.csheets__bar .tab [lang="ar"] { font-size: inherit; }
/* the row is 56px tall and the tab 44px: the site's ring (3px wide, 3px away) would touch the row's edge, so it stands 1px closer */
.csheets__bar .tab:focus-visible { outline-offset: 2px; }
@media (hover: hover) { .csheets__bar .tab:hover { border-color: var(--wine); background: var(--rose-2); color: var(--wine); } }
.csheets__bar .tab[aria-current="true"] { border-color: var(--wine); background: var(--wine); color: #fff; }

/* One sheet. A tap on its tab (or a link ending in #sheet-general) carries the page here: scroll-margin leaves room for the tab row
   under the site's bar (html's scroll-padding-top already leaves --head-h and 12px), so the heading lands just below the two. */
/* With the script the sheet on show stands right under the tabs, whichever it is: the same space above every one */
.csheet { padding-block: 32px 36px; border-top: 1px solid var(--hair); scroll-margin-top: calc(var(--tabs-h) - 12px); }
.csheets__bar + .csheet, .csheets.is-tabs .csheet { padding-top: 28px; border-top: 0; }
@media (min-width: 900px) { .csheet { padding-block: 48px 52px; } .csheets__bar + .csheet, .csheets.is-tabs .csheet { padding-top: 36px; } }
.csheet__h { margin-bottom: 18px; }
.csheet__body { min-width: 0; }

/* What stands where a sheet has not come in yet: only the line that fits the sheet's state. */
.csheet__wait { display: grid; align-content: center; justify-items: start; gap: 14px; min-height: min(52svh, 420px); padding: 20px; border: 1.5px dashed var(--hair-2); border-radius: var(--r); background: rgba(255, 255, 255, .55); }
.csheet__msg { display: flex; align-items: flex-start; gap: 10px; margin: 0; max-width: 56ch; font-weight: 600; line-height: 1.5; color: var(--ink-2); }
.csheet__msg svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--wine); }
.csheet__msg [lang="ar"] { display: block; }
.csheet__msg--err { color: var(--bad); }
.csheet__msg--err svg { color: var(--bad); }
.csheet__msg--err, .csheet__wait .row { display: none; }
.csheet[data-state="error"] .csheet__msg--wait { display: none; }
.csheet[data-state="error"] .csheet__msg--err, .csheet[data-state="error"] .csheet__wait .row { display: flex; }
/* without the script a sheet cannot come in: no waiting line, only the way to its own page */
.no-js .csheet__msg--wait, .no-js .csheet__retry { display: none; }
.no-js .csheet__wait .row { display: flex; }
.no-js .csheet__wait { min-height: 0; }
@media (prefers-reduced-motion: no-preference) {
  .csheet[data-state="loading"] .csheet__wait { animation: csheet-wait 1.1s ease-in-out infinite alternate; }
}
@keyframes csheet-wait { from { opacity: 1; } to { opacity: .55; } }

/* ---------- the maps on this page ---------- */
/* a map's card sits under the sticky bars (30 and 40), not over them; extra.css gives it 45 */
.csheet .mcard { z-index: 25; }
/* four maps stand one under another: a swipe or the wheel that reaches the end of one carries on to the page (extra.css keeps it in the map) */
.csheet .stage { overscroll-behavior: auto; }
@media (max-width: 899px) {
  /* the toolbar: the levels get a whole row of their own, the zoom buttons the one above */
  .csheet .mapx__bar { flex-wrap: wrap; gap: 8px 10px; }
  .csheet .mapx__zoom { order: 1; margin-inline-start: auto; }
  .csheet .mapx__chips { order: 2; flex: 1 1 100%; }
}
@media (min-width: 600px) and (max-width: 899px) {
  /* a tablet held upright: the card is a sheet as wide as a page of text, in the middle, not the width of the screen */
  .csheet .mcard { max-width: 560px; margin-inline: auto; }
}

/* The Start here page (/start). Loaded last of all, so a rule here wins over the others at the same weight.
   What it is made of, top to bottom: the tiles under the title (each jumps to a part of the page), the two majors side by
   side with their rows level, the chooser on a dark band, the first-term steps on a rail, the jobs and the term dates (drawn
   by extra.css and left as they are). Phone first. The cards go two across from 740px, the width the
   term-date cards already use (an iPad mini upright is 744). Logical properties only, so Arabic mirrors by itself.
   The two majors are drawn alike everywhere they appear: the same name block, the same rows, the same list shapes.
   The sticky bar is --head-h tall and html already keeps 12px more clear of it (site.css, scroll-padding-top), so a tile
   lands a heading 12px under the bar without anything added here; a section that has padding of its own says how much in
   --start-pad, and scroll-margin-top takes it back off. */

/* ---------- the page ---------- */
/* smooth scrolling for the tiles: on this page only, and only for a reader who has not asked for less motion */
@media (prefers-reduced-motion: no-preference) {
  html:has(.start-tiles) { scroll-behavior: smooth; }
}
.start-sec { --start-pad: 0px; margin-top: 48px; scroll-margin-top: calc(var(--start-pad) * -1); }
.start-sec--first { margin-top: 36px; }
/* the footer sits flush under the page, so the last part keeps the gap before it (the dates, or the jobs once the dates are over) */
.start-sec:last-child { margin-bottom: 56px; }
@media (min-width: 900px) {
  .start-sec { margin-top: 72px; }
  .start-sec--first { margin-top: 52px; }
  .start-sec:last-child { margin-bottom: 80px; }
}
/* the icons come from layout.mjs with no size of their own: each is given one where it is drawn below, and none may shrink in a row */
.start-sec .ic, .start-tiles .ic { flex: none; }

/* the name of a major, the same in every card that names one (the majors, the chooser, the jobs): its full name, which wraps at its
   spaces, English or Arabic, and balances its lines (no sheet number since Round 8) */
.start-name { display: flex; align-items: center; gap: 12px; font-size: 18px; line-height: 1.3; color: var(--wine-3); }
.start-name__t { min-width: 0; }

/* ---------- the tiles: five (four when the dates are over) jump links in a compact grid ---------- */
.start-tiles { margin-top: 24px; }
.start-tiles ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.start-tiles li { display: flex; grid-column: span 2; min-width: 0; }
/* three across, then what is left shares the second row: five tiles are 3 + 2, four are two rows of two, so the last row is never short */
.start-tiles li:first-child:nth-last-child(5) ~ li:nth-child(n+4),
.start-tiles li:first-child:nth-last-child(4), .start-tiles li:first-child:nth-last-child(4) ~ li,
.start-tiles li:first-child:nth-last-child(2), .start-tiles li:first-child:nth-last-child(2) ~ li { grid-column: span 3; }
.start-tiles li:only-child { grid-column: 1 / -1; }
.start-tile {
  position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-height: 104px; padding: 12px 8px; text-align: center; text-decoration: none; color: var(--ink);
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--r);
  font-size: 14px; font-weight: 600; line-height: 1.3; text-wrap: balance;
  transition: border-color .15s, background-color .15s;
}
/* the icon sits in a ring, as the O of the club's mark does; the icon itself is 28px */
.start-tile__i {
  box-sizing: content-box; width: 28px; height: 28px; padding: 8px; border: 1.5px solid var(--wine); border-radius: 50%;
  color: var(--wine); transition: background-color .15s, color .15s;
}
.start-tile__t [lang="ar"] { line-height: 1.5; }
.start-tile__g { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; width: 14px; height: 14px; color: var(--wine); opacity: .55; }
.start-tile:hover { border-color: var(--wine); background: var(--rose-2); color: var(--ink); }
.start-tile:hover .start-tile__i { background: var(--wine); color: #fff; }
/* site.css gives every focused element a 4px corner: a card keeps its own */
.start-tile:focus-visible { border-radius: var(--r); }
@media (min-width: 700px) {
  .start-tiles ul { display: flex; gap: 10px; }
  .start-tiles li { flex: 1 1 0; }
}
/* a very narrow phone (a 320px screen): the names are a size smaller, and the arrows leave so they do not touch the rings */
@media (max-width: 359px) {
  .start-tile { padding-inline: 4px; font-size: 13px; }
  .start-tile__g { display: none; }
}
/* on a laptop the tile lies down: ring, name, and the arrow at the end */
@media (min-width: 1100px) {
  .start-tile { flex-direction: row; gap: 14px; min-height: 76px; padding: 10px 16px; text-align: start; font-size: 15px; }
  .start-tile__t { flex: 1; min-width: 0; }
  .start-tile__g { position: static; opacity: .8; }
}

/* ---------- the two majors: side by side, the rows of one level with the rows of the other ---------- */
.start-majors { display: grid; gap: 16px; }
.start-major { display: grid; align-content: start; background: var(--card); border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; }
.start-major__h { padding: 14px 16px; background: var(--rose-2); border-bottom: 1.5px solid var(--wine); }
.start-major__r { padding: 16px; border-top: 1px solid var(--hair); }
.start-major__h + .start-major__r { border-top: 0; }
.start-major__r h4 { margin-bottom: 8px; font-size: 15px; line-height: 1.4; color: var(--wine); }
.start-major__r h4 [lang="ar"] { font-family: var(--f-ar-h); font-weight: 700; line-height: 1.6; }
.start-major__r p { font-size: 16px; line-height: 1.55; }
.start-major__r p + p { margin-top: 10px; }
/* what you study: the line for the sheet, then what you take and what you pick, one to a line. Both majors use this list; a major with
   fewer choices simply has fewer lines. */
.start-major__r .start-major__n { margin-bottom: 10px; font-weight: 600; }
.start-study { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.start-study li { position: relative; padding-inline-start: 18px; font-size: 15px; line-height: 1.5; }
.start-study li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--wine); }
.start-study b { color: var(--wine-2); font-weight: 700; }
/* the first four courses of the major's own core, drawn as the guide draws a core course: the number on a maroon plate */
.start-courses { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.start-course {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 56px; padding: 8px 12px; border: 1px solid var(--hair-2); border-radius: 8px; background: var(--card);
  color: var(--ink); text-decoration: none; transition: border-color .15s, background-color .15s;
}
.start-course:hover { border-color: var(--wine); background: var(--rose-2); color: var(--ink); }
.start-course:focus-visible { border-radius: 8px; }
.start-course__n { padding: 3px 8px; border-radius: 5px; background: var(--c-core); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: .02em; }
.start-course__t { font-size: 15px; font-weight: 600; line-height: 1.35; }
.start-course__t [lang="ar"] { display: block; font-weight: 500; color: var(--ink-2); }
.start-course__t small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.start-course__t small [lang="ar"] { display: inline; }
.start-course .ic { width: 18px; height: 18px; color: var(--wine); }
/* a very narrow phone (a 320px screen): the number plate and the gaps are a little smaller, so the longest word of a title keeps its box */
@media (max-width: 359px) {
  .start-course { gap: 8px; padding-inline: 10px; }
  .start-course__n { padding-inline: 6px; font-size: 13px; }
}
/* the six jobs of a major, as pills under the line that introduces them */
.start-pills { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.start-pills li { padding: 5px 12px; border-radius: 999px; background: rgba(134, 28, 64, .09); color: var(--wine-2); font-size: 14px; font-weight: 600; line-height: 1.4; }
@media (min-width: 740px) {
  .start-majors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .start-major__h, .start-major__r { padding-inline: 20px; }
  .start-major { grid-row: span 4; }
  /* where the browser can, the two cards share four rows (name, what you study, example courses, jobs) */
  @supports (grid-template-rows: subgrid) {
    .start-major { grid-template-rows: subgrid; row-gap: 0; }
  }
}

/* ---------- which one fits me: the page's one dark band ---------- */
.start-sec--band { --start-pad: 44px; position: relative; overflow: hidden; padding-block: var(--start-pad); background: var(--wine-3); color: #fff; }
.start-sec--band > .wrap { position: relative; }
/* the rings of the O, cut by the corner of the band */
.start-sec--band::before {
  content: ""; position: absolute; inset-block-start: -170px; inset-inline-end: -170px; width: 420px; height: 420px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 420' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='210' cy='210' r='96' stroke-opacity='.12'/%3E%3Ccircle cx='210' cy='210' r='150' stroke-opacity='.09'/%3E%3Ccircle cx='210' cy='210' r='204' stroke-opacity='.06'/%3E%3C/svg%3E") center / contain no-repeat;
}
.start-sec--band .sh h2 { color: #fff; }
.start-sec--band .sh { margin-bottom: 24px; }
.start-fit { display: grid; gap: 16px; }
.start-fit__c { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 18px 16px 16px; border-radius: var(--r); background: var(--card); color: var(--ink); }
.start-fit__q { list-style: none; margin: 0; padding: 0; }
.start-fit__q li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hair); font-size: 16px; font-weight: 500; line-height: 1.45; }
.start-fit__a { width: 22px; height: 22px; margin-top: 1px; color: var(--wine); }
/* the answer, on a rose strip with the wine edge the dates strip on the front page has */
.start-fit__v {
  display: flex; align-items: flex-start; gap: 10px; margin-top: auto; padding: 12px 14px; border-radius: var(--r-s);
  border-inline-start: 4px solid var(--wine); background: var(--rose-2); color: var(--wine-3); font-size: 16px; font-weight: 700; line-height: 1.4;
}
.start-fit__s { width: 20px; height: 20px; margin-top: 1px; color: var(--wine); }
@media (min-width: 740px) {
  .start-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
  .start-fit__c { padding: 22px 20px 20px; }
  /* where the browser can, the two cards share three rows (name, questions, answer): the two answer strips are level and as tall as the taller one */
  @supports (grid-template-rows: subgrid) {
    .start-fit__c { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
    .start-fit__v { margin-top: 0; }
  }
}
@media (min-width: 900px) { .start-sec--band { --start-pad: 64px; } }

/* ---------- my first term: the steps on a rail ---------- */
.start-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; }
.start-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; }
/* the rail runs from under one ring to over the next */
.start-step::before { content: ""; position: absolute; inset-inline-start: 21px; top: 50px; bottom: -24px; width: 2px; background: var(--line); }
.start-step:last-child::before { display: none; }
.start-step__n {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--card); border: 2px solid var(--wine);
  color: var(--wine); font-size: 19px; font-weight: 700; line-height: 1;
}
.start-step__b { display: grid; align-content: start; gap: 14px; min-width: 0; padding-top: 6px; }
.start-step__t h3 { font-size: 20px; line-height: 1.3; color: var(--wine); }
.start-step__t p { margin-top: 6px; max-width: 62ch; font-size: 16px; line-height: 1.55; }
.start-step__go { display: flex; flex-wrap: wrap; gap: 10px; }
/* a button that names a major in full may take two lines on a phone: the lines are centred */
.start-step__go .btn { min-height: 48px; text-align: center; }
/* the two maps: when the second drops under the first (a phone, or the iPad), both take the whole line, so the two majors look equal */
.start-step__go--pair .btn { flex: 1 1 auto; }
/* on a laptop the heading takes the first third and the steps the rest, so the list is not stretched over the whole line */
@media (min-width: 1100px) {
  .start-first { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 56px; align-items: start; }
  .start-first .sh { position: sticky; top: calc(var(--head-h) + 24px); margin-bottom: 0; }
}

/* ---------- jobs ---------- */
.start-jobs { display: grid; gap: 16px; }
.start-jobs__c { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 18px 16px 16px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--card); }
.start-jobs__c p { font-size: 16px; line-height: 1.55; }
.start-list { list-style: none; margin: 0; padding: 0; }
.start-list li { position: relative; padding: 10px 0; padding-inline-start: 26px; border-top: 1px solid var(--hair); font-size: 16px; font-weight: 600; line-height: 1.4; }
.start-list li::before { content: ""; position: absolute; inset-inline-start: 6px; top: 1.05rem; width: 8px; height: 8px; border-radius: 50%; background: var(--wine); }
@media (min-width: 740px) {
  /* both cards hold the same shape (the name, the line, six jobs), so they sit side by side at one height */
  .start-jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
  .start-jobs__c { padding: 22px 20px 20px; }
  /* where the browser can, the two cards share three rows (name, line, jobs), so the first job of one is level with the first job of the other */
  @supports (grid-template-rows: subgrid) {
    .start-jobs__c { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  }
}

/* The About page (src/pages/about.mjs): the club's mark beside the opening text, and the board with a sign for each role.
   Ships last but one in the site's stylesheet (build.mjs). */

/* ---------- the club's mark, beside the opening text ---------- */
/* On a phone the mark comes first, above the text, 200 to 240px wide (280px from 600px). From 900px the text takes the
   first column and the mark the second, 300 to 360px wide; a grid reads from the right in Arabic, so the two swap sides
   by themselves. */
.about__mark { display: grid; justify-items: center; }
.about-logo { width: clamp(200px, 56vw, 240px); height: auto; }
@media (min-width: 600px) { .about-logo { width: 280px; } }
@media (min-width: 900px) {
  .about__who { grid-column: 1; grid-row: 1; align-self: center; }
  .about__mark { grid-column: 2; grid-row: 1; align-self: center; }
  .about-logo { width: clamp(300px, 26vw, 360px); }
}

/* The mark is the site's moving mark (liveLogo in layout.mjs, turning in site.css), the same as in the top bar and on the front
   page. Here it also draws itself once when the page opens: the O, then its two arcs. For a reader who has asked for less
   motion it stands whole and still. */
@media (prefers-reduced-motion: no-preference) {
  .about-logo .mark__base circle { stroke-dasharray: 400; animation: about-draw 1.3s .4s var(--ease) both; }
  .about-logo .mark__a1 path, .about-logo .mark__a2 path { stroke-dasharray: 400; animation: about-draw 1.3s .7s var(--ease) both; }
  /* the arcs draw themselves while they already turn with every other mark on the site (one clock: syncTurns in site.js) */
}
@keyframes about-draw { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }

/* ---------- the board: a sign for each position, in the ring the initials had ---------- */
.bm__ic { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: #fff; color: var(--wine); box-shadow: inset 0 0 0 4px var(--logo-wine), 0 0 0 5px #fff, 0 0 0 8px rgba(149, 14, 51, .28); margin-bottom: 4px; }
.bm__ic svg { width: 36px; height: 36px; }
.bm--lead .bm__ic { width: 84px; height: 84px; }
.bm--lead .bm__ic svg { width: 48px; height: 48px; }

/* The History page (src/pages/history.mjs). Ships last in the site's stylesheet (build.mjs).
   Every rule starts with this page's own prefix, hx-, so no other page changes. Logical properties only (inline-start,
   inline-end), so Arabic mirrors by itself. Colours, radii, shadows and easing are the tokens of site.css; the three names'
   colours are --c-mis, --c-qmis and --c-isom (feat.css).

   What is drawn, top to bottom: the three names and the key to the stops; a row of year buttons that sticks under the site's
   bar; the line from "You are here" down to the first post. The line is a column of its own in every stop (.hx-rail): a piece
   of track above the stop's dot in the colour of its own name, and one below it in the colour of the name before. Because every
   stop draws its own two pieces and they meet edge to edge, the line is one line whose colour changes only where the club's name did.

   Phone: one column. The line runs down the inline-start edge and each card sits beside it, joined to its dot by a short stub.
   iPad and up (740px, the width the Start page's cards go two across at): the line runs down the middle and the cards take the
   two sides in turn (lane a on the inline-start side, lane b on the other). */

/* ---------- the numbers this page is built on ---------- */
.hx {
  --hx-line: 6px;    /* the line's width */
  --hx-sy: 25px;     /* a stop's dot sits this far under the top of its card, level with the date */
  --hx-rail: 40px;   /* phone: the column the line runs in */
  --hx-cg: 8px;      /* phone: the space between that column and the cards */
  --hx-gap: 14px;    /* the space under a card */
  --hx-ph: 84px;     /* a picture's tile: history.mjs (SIZES) says the same */
  --hx-bar: 56px;    /* the row of year buttons */
  --hx-yp: 24px;     /* the space over a year's figures: a year lands with its figures --hx-land under the rows */
  --hx-land: 20px;
  --hx-mid: 64px;    /* iPad and up: the column the line runs in, between the two lanes */
  --hx-ov: 64px;     /* iPad and up: how far a card climbs beside the one before it */
  --hx-min: 112px;   /* iPad and up: the shortest a card may be (see the note by .hx-st + .hx-st) */
  --hx-lane: 560px;  /* the widest a card grows */
}
@media (min-width: 740px) { .hx { --hx-ph: 96px; --hx-gap: 16px; --hx-yp: 34px; } }
@media (min-width: 1000px) { .hx { --hx-ph: 112px; --hx-mid: 72px; } }

/* the three names: --e is a stop's own, --w the one before it */
.hx-e-mis { --e: var(--c-mis); } .hx-e-qmis { --e: var(--c-qmis); } .hx-e-isom { --e: var(--c-isom); }
.hx-w-mis { --w: var(--c-mis); } .hx-w-qmis { --w: var(--c-qmis); } .hx-w-isom { --w: var(--c-isom); }

/* ---------- the three names ---------- */
.hx-names { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
@media (min-width: 740px) { .hx-names { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hx-name { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--card); border: 1px solid var(--hair); border-radius: var(--r); }
/* the swatch is a piece of the line itself: as wide as the line, in the name's colour */
.hx-name > i { flex: none; align-self: stretch; width: var(--hx-line); min-height: 28px; border-radius: 3px; background: var(--e); }
.hx-name b { display: block; color: var(--e); line-height: 1.35; }
.hx-name small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }

/* ---------- the key to the stops ---------- */
.hx-key { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.hx-key li { display: flex; gap: 10px; align-items: center; min-height: 28px; font-size: 13px; color: var(--ink-2); }
.hx-key .hx-pt--xch { width: 36px; height: 24px; border-radius: 12px; }

/* ---------- the stops' dots: the same drawings in the key and on the line ---------- */
.hx-pt { display: block; flex: none; background: #fff; border: 3px solid var(--e, var(--ink)); }
.hx-pt--dot { width: 14px; height: 14px; border-radius: 50%; }
.hx-pt--big { width: 22px; height: 22px; border-radius: 50%; border-width: 4px; }
/* a new name: the ring outside is the name the club took, the one inside the name it left */
.hx-pt--xch { width: 44px; height: 28px; border-radius: 14px; border-width: 4px; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px var(--w, var(--e, var(--ink))); }
/* a year, on a phone (iPad and up the year's own marker sits on the line) and today: a filled disc */
.hx-pt--yr, .hx-pt--here { width: 22px; height: 22px; border-radius: 50%; border: 4px solid #fff; background: var(--e); box-shadow: 0 0 0 3px var(--e); }
.hx-pt--here { position: relative; }
.hx-pt--here::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--e); }
@media (prefers-reduced-motion: no-preference) { .hx-pt--here::after { animation: hx-ping 1.8s var(--ease) infinite; } }
@keyframes hx-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }

/* ---------- the row of year buttons ---------- */
/* It sticks under the site's bar (--head-h tall) and slides sideways inside itself when the years do not fit, so the page never does.
   The year you are in is filled (the script sets aria-current); the edge that still has years behind it fades (the script sets data-more).
   It is a child of .hx-trip, which holds the whole line, so it lets go when the line ends. */
.hx-trip { margin-top: 6px; }
.hx-yrs { position: sticky; top: var(--head-h); z-index: 30; height: var(--hx-bar); background: var(--card); border-block: 1px solid var(--hair); }
.hx-yrs::before, .hx-yrs::after { content: ""; position: absolute; top: 0; bottom: 0; width: 32px; z-index: 1; pointer-events: none; opacity: 0; }
.hx-yrs::before { inset-inline-start: 0; background: linear-gradient(to right, var(--card) 20%, transparent); }
.hx-yrs::after { inset-inline-end: 0; background: linear-gradient(to left, var(--card) 20%, transparent); }
[dir="rtl"] .hx-yrs::before { background: linear-gradient(to left, var(--card) 20%, transparent); }
[dir="rtl"] .hx-yrs::after { background: linear-gradient(to right, var(--card) 20%, transparent); }
.hx-yrs[data-more~="start"]::before, .hx-yrs[data-more~="end"]::after { opacity: 1; }
.hx-yrs__row { display: flex; align-items: center; gap: 8px; height: 100%; padding-inline: var(--gut); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: var(--gut); }
.hx-yrs__row::-webkit-scrollbar { display: none; }
/* when all the years fit they sit in the middle; when they do not, the auto margins are nothing and the row starts at its start */
.hx-y:first-child { margin-inline-start: auto; }
.hx-y:last-child { margin-inline-end: auto; }
.hx-y {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px;
  border: 1.5px solid var(--hair-2); border-radius: 999px; background: var(--card); color: var(--ink);
  font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
/* the row is 56px tall and the button 44px: the site's ring (3px wide, 3px away) would touch the row's edge, so it stands 1px closer */
.hx-y:focus-visible { outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .hx-y { transition: background-color .15s, border-color .15s, color .15s; } }
@media (hover: hover) { .hx-y:hover { border-color: var(--wine); background: var(--rose-2); color: var(--wine); } }
.hx-y[aria-current], .hx-y[aria-current]:hover { border-color: var(--wine); background: var(--wine); color: #fff; }

/* ---------- the line ---------- */
.hx-line, .hx-stops { list-style: none; margin: 0; padding: 0; }

/* one stop's piece of the line: a column the dot sits in. Its two pieces meet at the dot. */
.hx-rail { position: relative; z-index: 1; align-self: stretch; }
.hx-rail__t, .hx-rail__b { position: absolute; inset-inline: 0; margin-inline: auto; width: var(--hx-line); }
.hx-rail__t { top: 0; height: var(--hx-sy); background: var(--e); }
.hx-rail__b { top: var(--hx-sy); bottom: 0; background: var(--w); }
/* a dot is centred on the line whatever its width (the ring of a new name is 44px, wider than the 40px column of a phone) */
.hx-rail > .hx-pt { position: absolute; inset-inline-start: 50%; top: var(--hx-sy); translate: -50% -50%; }
[dir="rtl"] .hx-rail > .hx-pt { translate: 50% -50%; }

/* ---------- today, at the top of the line ---------- */
.hx-here { display: grid; grid-template-columns: var(--hx-rail) minmax(0, 1fr); column-gap: var(--hx-cg); padding-top: 26px; }
.hx-here > .hx-rail { grid-column: 1; grid-row: 1; }
.hx-here > .hx-card { grid-column: 2; grid-row: 1; margin-bottom: 18px; }
.hx-now { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.hx-card--here .hx-title--big { font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--wine); }
.hx-card--here .hx-title--big [lang="ar"] { font-family: var(--f-ar-h); line-height: 1.6; color: var(--wine); }
.hx-lede { margin-top: 8px; }
.hx-card--here .btn { justify-self: start; margin-top: 14px; }

/* ---------- a year ---------- */
/* A tap on a year button (or a link ending in #y2024) carries the page to the year: scroll-margin leaves room for the button row under the
   site's bar (html's scroll-padding-top already leaves --head-h and 12px), so the year's figures land --hx-land under the two. */
.hx-year { scroll-margin-top: calc(var(--hx-bar) + var(--hx-land) - var(--hx-yp) - 12px); }
/* Where the browser has :has(), the room html's scroll-padding-top leaves for the site's bar grows by the row of years (56px, as --hx-bar), so a link the
   keyboard brings into view is not left under the row either; a year then needs only the rest. The two ways land a year in the same place. */
@supports selector(:has(a)) {
  html:has(.hx-trip) { scroll-padding-top: calc(var(--head-h) + 56px + 12px); }
  .hx-year { scroll-margin-top: calc(var(--hx-land) - var(--hx-yp) - 12px); }
}
/* The marker holds the year in large figures with its counts beside it. On a phone the figures sit beside the line, joined to it by a stub
   and a disc; from 740px they sit on the line itself, the posts to one side and the events to the other. */
.hx-ymark { --hx-sy: calc(var(--hx-yp) + 24px); position: relative; padding-block: var(--hx-yp) 8px; padding-inline-start: calc(var(--hx-rail) + var(--hx-cg)); }
.hx-ymark > .hx-rail { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--hx-rail); }
.hx-ymark .hx-rail__t { top: 0; bottom: 0; height: auto; }
.hx-ymark__in { display: grid; justify-items: start; gap: 8px; }
.hx-ymark__c { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.hx-ymark__y {
  position: relative; display: inline-flex; align-items: center; height: 48px; padding: 0 20px 2px; border-radius: 999px; background: var(--e); color: #fff;
  font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: 0;
}
.hx-ymark__y::before { content: ""; position: absolute; top: 50%; height: 3px; margin-top: -1.5px; inset-inline-end: 100%; width: calc(var(--hx-rail) / 2 + var(--hx-cg)); background: var(--e); }
.hx-ymark__p, .hx-ymark__e { display: inline-flex; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--ink-2); }
.hx-cnt { display: inline-flex; gap: 4px; }
.hx-bar { width: 90px; height: 8px; overflow: hidden; border-radius: 4px; background: rgba(134, 28, 64, .1); }
.hx-bar i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: color-mix(in srgb, var(--wine) 62%, #fff); }
[dir="rtl"] .hx-bar i { border-radius: 4px 0 0 4px; }

/* ---------- a stop ---------- */
.hx-st { display: grid; grid-template-columns: var(--hx-rail) minmax(0, 1fr); column-gap: var(--hx-cg); pointer-events: none; }
.hx-st > .hx-rail { grid-column: 1; grid-row: 1; }
.hx-st > .hx-card { grid-column: 2; grid-row: 1; }

/* the card */
.hx-card {
  position: relative; display: grid; align-content: start; column-gap: 12px; margin-bottom: var(--hx-gap); padding: 12px 14px 6px;
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--r); box-shadow: var(--shadow); pointer-events: auto;
}
.hx-card--ph { grid-template-columns: var(--hx-ph) minmax(0, 1fr); }
/* the stub that joins the card to its dot (on a phone the line is at the inline-start edge, always) */
.hx-card::before {
  content: ""; position: absolute; top: var(--hx-sy); height: 3px; margin-top: -1.5px; background: var(--e);
  inset-inline-end: 100%; width: calc(var(--hx-rail) / 2 + var(--hx-cg) + 1px);
}
.hx-ph { position: relative; display: block; width: var(--hx-ph); height: var(--hx-ph); margin-top: 2px; border-radius: 8px; overflow: hidden; background: var(--paper-2) var(--wm); background-size: 110px 85px; }
.hx-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hx-body { min-width: 0; }
.hx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 26px; font-size: 13px; font-weight: 700; line-height: 22px; color: var(--ink-2); }
/* the chips take the site's own pill metrics (site.css, .pill): Arabic sits in the middle of them only at this line height */
.hx-kind { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: rgba(34, 29, 30, .06); color: var(--ink-2); font-size: 13px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.hx-title { margin-top: 4px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.hx-title [lang="ar"] { line-height: 1.65; }
.hx-links { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 2px; }
.hx-links a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 4px; font-size: 14px; font-weight: 600; }

/* a milestone and a new name stand out: a tint of their colour, and the kind filled with it */
.hx-st--milestone .hx-card, .hx-st--name .hx-card { background: color-mix(in srgb, var(--e) 6%, var(--card)); border-color: color-mix(in srgb, var(--e) 40%, transparent); }
.hx-st--milestone .hx-card { box-shadow: inset 0 3px 0 var(--e), var(--shadow); }
.hx-st--milestone .hx-title, .hx-st--name .hx-title { font-size: 16px; font-weight: 600; }
.hx-st--milestone .hx-kind, .hx-st--name .hx-kind { background: var(--e); color: #fff; }
.hx-st--name .hx-card { border-width: 2px; border-color: var(--e); }
.hx-st--name .hx-title { font-weight: 700; }

/* ---------- iPad and up: the line in the middle, the cards on both sides ---------- */
@media (min-width: 740px) {
  .hx-st { grid-template-columns: minmax(0, 1fr) var(--hx-mid) minmax(0, 1fr); column-gap: 0; }
  .hx-st > .hx-rail { grid-column: 2; }
  .hx-st--a > .hx-card { grid-column: 1; justify-self: end; }
  .hx-st--b > .hx-card { grid-column: 3; justify-self: start; }
  .hx-card { width: min(100%, var(--hx-lane)); min-height: var(--hx-min); }
  .hx-st--a > .hx-card::before { inset-inline-end: calc(var(--hx-mid) / -2 - 1px); width: calc(var(--hx-mid) / 2 + 1px); }
  .hx-st--b > .hx-card::before { inset-inline-end: auto; inset-inline-start: calc(var(--hx-mid) / -2 - 1px); width: calc(var(--hx-mid) / 2 + 1px); }
  /* The next stop climbs --hx-ov beside this one, so the two sides interleave and the page is not twice as long. The cards of one side
     still never touch: a card under the one before it on the same side starts (its own height) + (the gap) - (the climb) under it,
     twice, and that is never less than the gap while a card is at least --hx-min tall: 112 + 2 x 16 - 2 x 64 = 16. */
  .hx-st + .hx-st { margin-top: calc(var(--hx-ov) * -1); }

  /* today: a card in the middle, and the line starts under it */
  .hx-here { --hx-sy: 28px; grid-template-columns: minmax(0, 1fr); justify-items: center; padding-top: 28px; }
  .hx-here > .hx-rail { grid-column: 1; grid-row: 2; width: var(--hx-mid); height: 56px; }
  .hx-here > .hx-card { grid-column: 1; grid-row: 1; width: min(100%, 520px); min-height: 0; margin-bottom: 0; text-align: center; }
  .hx-here > .hx-card::before { display: none; }
  .hx-card--here .hx-meta { justify-content: center; }
  .hx-card--here .btn { justify-self: center; }

  /* a year: the figures in the middle, on the line, the counts at their sides */
  .hx-ymark { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 22px; padding-block: var(--hx-yp) 14px; padding-inline-start: 0; }
  .hx-ymark > .hx-rail { inset-inline: 0; width: auto; }
  .hx-ymark .hx-pt--yr, .hx-ymark__y::before { display: none; }
  .hx-ymark__in, .hx-ymark__c { display: contents; }
  .hx-ymark__y { grid-column: 2; grid-row: 1; z-index: 2; height: 64px; padding: 0 30px 3px; font-size: clamp(40px, 4.4vw, 54px); box-shadow: 0 0 0 6px var(--paper); }
  .hx-ymark__p { grid-column: 1; grid-row: 1; justify-self: end; flex-direction: row-reverse; text-align: end; }
  .hx-ymark__e { grid-column: 3; grid-row: 1; justify-self: start; }
  .hx-bar { width: 120px; }
}

/* ---------- the end of the line ---------- */
.hx-pres { margin-top: 48px; }
/* the link under each president's name is a small line of text: its tap area grows to 44px without moving the text */
.hx-pres .pres a { display: inline-block; min-width: 44px; padding-block: 13px; margin-block: -13px; }

/* ---------- the club's logos over the years ----------
   In each name card, its logo above the name; at the stops where the logo changed, the logo, or the old one beside the new one.
   The old logos are pictures cut from the club's posts, the ISOM one is the club's own mark. */
.hx-logo { display: block; height: auto; width: auto; max-width: 100%; }
.hx-logo--name { height: 40px; margin-bottom: 8px; }
.hx-logo--isom > svg { display: block; height: 100%; width: auto; }
.hx-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.hx-logo--stop { height: 52px; }
.hx-logos__to { font-size: 20px; line-height: 1; color: var(--ink-3, var(--ink-2)); }
[dir="rtl"] .hx-logos__to { transform: scaleX(-1); }
@media (min-width: 740px) { .hx-logo--name { height: 46px; } .hx-logo--stop { height: 60px; } }

/* Round 16: Operations (its activities and papers, Today's run, the paper steps), tasks, and the calendar for heads and IT.
   Phone first: one column, big tap targets, long Arabic names allowed to wrap. */

.pill--head { background: var(--rose); color: var(--wine-3); }
.pill--plain [lang="ar"], .pill--ok [lang="ar"], .pill--warn [lang="ar"], .pill--bad [lang="ar"] { margin-inline-start: 4px; }

/* the filter and the paper tabs: a row of buttons that wraps */
.opfilt { margin: 4px 0 14px; }
.opfilt button { padding-inline: 10px; }
.opfilt button, .optabs button { display: inline-flex; align-items: baseline; gap: 4px 5px; flex-wrap: wrap; justify-content: center; }
.opfilt button [lang="ar"], .optabs button [lang="ar"] { font-weight: 600; }
.opfilt b, .optabs b { font-size: 13px; opacity: .8; }
.optabs { display: flex; width: 100%; margin: 16px 0 12px; }
.optabs button { flex: 1 1 140px; text-align: center; }

/* what everyone is waiting on */
.opwait { margin-bottom: 16px; }
.opwait h3 { display: flex; align-items: center; gap: 8px; }
.opwait h3 [lang="ar"] { display: inline; margin-inline-start: 6px; }
.opwait ul, .oprun__list, .opc__papers, .oprows, .opsteps, .tasks, .calc__l { list-style: none; margin: 0; padding: 0; }
.opwait ul { display: grid; gap: 8px; margin-top: 8px; }
.opwait__b, .oprun__list button, .opc__papers button { display: grid; gap: 2px; width: 100%; padding: 10px 12px; border: 1px solid var(--hair); border-radius: var(--r-s); background: #fff; color: var(--ink); font: inherit; text-align: start; cursor: pointer; min-width: 0; }
.opwait__b small, .oprun__list small { color: var(--ink-3); }
.opwait li.is-late .opwait__b, .oprun__list li.is-late button { border-color: var(--bad); box-shadow: inset 3px 0 0 var(--bad); }
.opwait__b [lang="ar"], .oprun__list [lang="ar"] { display: block; }
@media (hover: hover) { .opwait__b:hover, .oprun__list button:hover, .opc__papers button:hover { border-color: var(--wine); } }

/* an activity's card */
.opcards { display: grid; gap: 12px; }
@media (min-width: 760px) { .opcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.opc { display: grid; gap: 10px; padding: 14px; background: #fff; border: 1px solid var(--hair); border-inline-start: 4px solid var(--warn); border-radius: var(--r); min-width: 0; }
.opc--done { border-inline-start-color: var(--ok); }
.opc--late { border-inline-start-color: var(--bad); }
.opc__t { border: 0; background: none; padding: 0; font: inherit; font-size: 17px; text-align: start; color: var(--ink); cursor: pointer; overflow-wrap: anywhere; }
.opc__t [lang="ar"], .calc__t [lang="ar"], .ophead h2 [lang="ar"] { display: block; font-family: var(--f-ar-h); }
.opc__when { margin: 0; color: var(--ink-2); }
.opc__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.opc__prog { display: flex; align-items: center; gap: 10px; }
.opc__prog b { white-space: nowrap; font-size: 14px; }
.opbar { position: relative; flex: 1; height: 8px; border-radius: 99px; background: var(--paper-2); overflow: hidden; }
.opbar > span { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: inherit; background: var(--wine); transition: width .4s var(--ease); }
.opc__papers { display: grid; gap: 6px; }
.opc__papers button { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; }
.opc__papers button > .ic { color: var(--wine); }
.opc__papers button > span { display: grid; min-width: 0; }
.opc__papers small { color: var(--ink-3); overflow-wrap: anywhere; }

/* how far off a day is */
.cd { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; font-size: 13px; font-weight: 700; background: var(--paper-2); color: var(--ink-2); }
.cd [lang="ar"] { font-weight: 600; }
.cd--now, .cd--soon { background: var(--rose); color: var(--wine-3); }
.cd--late { background: var(--bad-bg); color: var(--bad); }

/* one activity */
.ophead { display: grid; gap: 10px; margin: 14px 0; }
.ophead h2 { overflow-wrap: anywhere; }
.opfacts { display: grid; gap: 10px; margin: 12px 0 0; }
@media (min-width: 640px) { .opfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.opfacts dt { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.opfacts dt [lang="ar"] { margin-inline-start: 6px; }
.opfacts dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.opfacts dd [lang="ar"] { display: block; font-weight: 500; }
.opneeds { display: flex; flex-wrap: wrap; gap: 6px; }
.opneeds .chip { min-width: 0; background: var(--rose-2); color: var(--wine-3); white-space: normal; text-align: start; font-weight: 600; }
.opneeds .chip [lang="ar"] { display: block; font-weight: 500; }
.opsub { font-size: 15px; margin: 14px 0 6px; color: var(--wine); }
.opsub [lang="ar"] { display: block; }
.opprog { white-space: pre-line; margin: 0; line-height: 1.7; overflow-wrap: anywhere; }

/* a paper: its tip, its steps in order, the next one to confirm */
.oppaper { display: grid; gap: 12px; }
.optip { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: var(--r-s); background: var(--warn-bg); color: var(--ink); font-size: 14px; line-height: 1.6; }
.optip .ic { flex: none; color: var(--warn); margin-top: 2px; }
.optip [lang="ar"] { display: block; margin-top: 6px; }
.opsteps { display: grid; gap: 4px; }
.opst { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 10px; border-radius: var(--r-s); }
.opst.is-next { background: var(--rose-2); box-shadow: inset 0 0 0 1.5px var(--wine); }
.opst__n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--hair-2); font-weight: 700; font-size: 14px; color: var(--ink-3); background: #fff; }
.opst.is-next .opst__n { border-color: var(--wine); color: var(--wine); }
.opst.is-done .opst__n { border-color: var(--ok); background: var(--ok); color: #fff; }
.opst.is-done .opst__n .ic { width: 16px; height: 16px; }
.opst__b { display: grid; gap: 4px; min-width: 0; }
.opst__t { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.opst.is-done .opst__t { color: var(--ink-2); font-weight: 600; }
.opst:not(.is-done):not(.is-next) .opst__t { color: var(--ink-3); font-weight: 600; }
.opst__t [lang="ar"] { display: block; font-weight: 600; }
.opst__l { display: flex; gap: 6px; align-items: flex-start; font-size: 14px; color: var(--ink-2); min-width: 0; }
.opst__l .ic { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--wine); }
.opst__l > span { min-width: 0; overflow-wrap: anywhere; }
.opst__l [lang="ar"] { display: block; }
.opst__rec { margin: 0; color: var(--ok); font-weight: 600; overflow-wrap: anywhere; }
.opst__ph { gap: 8px; align-items: center; }
.opthumb { display: inline-block; width: 64px; height: 64px; padding: 0; border: 1px solid var(--hair-2); border-radius: var(--r-s); overflow: hidden; background: var(--paper-2); cursor: pointer; flex: none; }
.opthumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.opphoto__big { display: block; width: 100%; max-height: 70svh; object-fit: contain; border-radius: var(--r-s); background: var(--paper-2); }
.opconfirm { padding-top: 12px; border-top: 1px solid var(--hair); }
.opconfirm__ph { gap: 10px; align-items: center; }
.upbtn.is-busy { opacity: .6; pointer-events: none; }

/* Today's run */
.oprun__share { gap: 10px; margin: 12px 0 6px; }
.oprun { margin-top: 18px; }
.oprun h3 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.oprun h3 [lang="ar"] { font-size: 16px; }
.oprun__list { display: grid; gap: 8px; margin-top: 8px; }
.oprun__list button { gap: 4px; }
/* Round 17b: the events the IT team added, first on Activities for a head: choose their papers, then give out the steps */
.opnew { display: grid; gap: 8px; border: 1.5px solid var(--wine); box-shadow: 0 10px 22px -16px rgba(134, 28, 64, .55); }
.opnew > h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.opnew > h3 .ic { width: 22px; height: 22px; flex: none; color: var(--wine); }
.opnew > .hint { margin: 0; }
.opnew .oprows { margin-top: 2px; }
.opnew .oprows li { border-color: var(--hair-2); }
.opnew .oprows .btn { flex: none; }
/* the short form for a new activity: what the forms ask for folds away under one line; its boxes keep their space one under
   another (.fs sets its own margin to nothing, and their headings are inside them now, not on their edge) */
.opform > * + .fs, .opstart > * + .fs { margin-top: var(--s, 16px); }
.opedit { margin-top: 14px; }
.opmore > :not(summary) { margin-top: 14px; }
.opmore > summary { color: var(--wine); }
.opmore > .hint { margin-bottom: 0; }
/* giving out every step of an activity in one list: a paper's steps under its name */
.awlist { display: grid; gap: 12px; }
.awp { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--paper-2); min-width: 0; }
.awp__t { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 16px; line-height: 1.35; color: var(--wine); }
.awp__t > span { min-width: 0; overflow-wrap: anywhere; }
.awp__t .ic { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.oprows { display: grid; gap: 8px; margin-top: 10px; }
.oprows li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--hair); border-radius: var(--r-s); background: #fff; }
.oprows li > span { display: grid; min-width: 0; }
.oprows li [lang="ar"] { display: block; }

/* the paper steps, for the head: each paper a card with its name inside it (Round 17b: the name sat on the card's edge, "floating
   over the panel"); its own details and each step fold away, so the list reads on a phone */
.opedit__paper { display: grid; gap: 10px; padding: 14px 16px 16px; border: 1px solid var(--hair-2); border-radius: var(--r); background: #fff; min-width: 0; box-shadow: 0 8px 18px -16px rgba(34, 29, 30, .55); }
.opedit__ptitle { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--hair); font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--wine); }
.opedit__ptitle > span { min-width: 0; overflow-wrap: anywhere; }
.opedit__ptitle .ic { margin-top: 2px; }
.opedit__pd > summary, .opedit__step > summary { cursor: pointer; list-style: none; }
.opedit__pd > summary::-webkit-details-marker, .opedit__step > summary::-webkit-details-marker { display: none; }
.opedit__pd > summary { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 10px 12px; border: 1px dashed var(--hair-2); border-radius: var(--r-s); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.opedit__pd > summary [lang="ar"] { flex-basis: 100%; font-weight: 500; }
.opedit__pd[open] > summary { color: var(--wine); border-style: solid; }
.opedit__body { display: grid; gap: 10px; padding: 12px 2px 4px; }
.opedit__f { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); min-width: 0; }
.opedit__f [lang="ar"] { display: block; font-weight: 500; }
/* a box in one language only (9 Oct 2026): its label keeps the labels' weight and colour (the switch resets them on an Arabic part) */
.opedit__f[lang] > span { font-weight: 600; color: var(--ink-2); }
.opedit__steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.opedit__step { border: 1px solid var(--hair); border-radius: var(--r-s); background: var(--paper-2); }
.opedit__step > summary { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; min-height: 52px; }
.opedit__step > summary > b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--wine); color: #fff; }
.opedit__sum { display: grid; min-width: 0; }
.opedit__sum > span { font-weight: 700; overflow-wrap: anywhere; }
.opedit__sum small { color: var(--ink-3); overflow-wrap: anywhere; }
.opedit__step[open] { background: #fff; box-shadow: inset 0 0 0 1.5px var(--wine); }
.opedit__step > .opedit__body { padding: 0 12px 12px; }
.opedit__sh { gap: 6px; }
.opedit__save { position: sticky; bottom: 0; z-index: 2; display: flex; gap: 8px; margin-inline: calc(var(--gut) * -1); padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--paper); box-shadow: 0 -8px 18px -12px rgba(34, 29, 30, .35); }
.opedit__save .btn { flex: 1 1 0; min-width: 0; min-height: 48px; padding-inline: 10px; }

/* tasks */
.tasks { display: grid; gap: 8px; }
.task { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; background: #fff; border: 1px solid var(--hair); border-radius: var(--r); }
.task.is-late { border-color: var(--bad); box-shadow: inset 3px 0 0 var(--bad); }
.task__tick { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--wine); border-radius: 10px; background: #fff; color: #fff; cursor: pointer; }
.task__tick .ic { width: 22px; height: 22px; }
.task.is-done .task__tick { background: var(--ok); border-color: var(--ok); }
.task__tick:disabled { border-color: var(--hair-2); cursor: default; }
.task__b { display: grid; gap: 4px; min-width: 0; }
.task__t { margin: 0; font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
.task.is-done .task__t { text-decoration: line-through; color: var(--ink-3); }
.task__m { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; color: var(--ink-2); }
.task__m [lang="ar"] { margin-inline-start: 6px; }
.task__n { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.task__a { gap: 8px; margin-top: 4px; }
.tasks__done { margin-top: 16px; }
.tasks__done .tasks { margin-top: 10px; }

/* the calendar */
.calhead { justify-content: space-between; align-items: flex-end; gap: 10px; margin-bottom: 12px; }
.calgroup { display: grid; gap: 10px; margin-top: 18px; }
.calgroup__h { margin: 0; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--wine); }
.calgroup__h [lang="ar"] { margin-inline-start: 8px; text-transform: none; letter-spacing: 0; }
.calc { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: 12px; background: #fff; border: 1px solid var(--hair); border-radius: var(--r); }
.calc.is-past { opacity: .75; }
.calc__date { display: grid; justify-items: center; align-content: start; gap: 0; padding: 8px 4px; border-radius: var(--r-s); background: var(--wine); color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.calc__date b { font-size: 24px; line-height: 1.1; }
.calc__b { display: grid; gap: 8px; min-width: 0; }
.calc__t { margin: 0; border: 0; background: none; padding: 0; font: inherit; font-size: 17px; text-align: start; color: var(--ink); overflow-wrap: anywhere; }
button.calc__t { cursor: pointer; }
@media (hover: hover) { button.calc__t:hover, .opc__t:hover { color: var(--wine); } }
.calc__l { display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.calc__l li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; }
.calc__l .ic { width: 16px; height: 16px; margin-top: 3px; color: var(--wine); }
.calc__l li > span { min-width: 0; overflow-wrap: anywhere; }
.calc__l [lang="ar"] { display: inline; }
.calterm { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 8px 12px; border-radius: var(--r-s); font-size: 14px; background: var(--paper-2); color: var(--ink-2); }
.calterm .ic { flex: none; width: 16px; height: 16px; margin-top: 3px; }
.calterm [lang="ar"] { display: block; }
.calterm--exam { background: var(--bad-bg); color: var(--bad); }
.calterm--off { background: var(--ok-bg); color: var(--ok); }
.calmonth__nav { justify-content: space-between; align-items: center; gap: 8px; }
.calmonth__nav h3 { text-align: center; }
.calmonth__nav h3 [lang="ar"] { display: block; font-size: 15px; }
.calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin-top: 10px; }
.calgrid__wd { display: grid; justify-items: center; font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; }
.calgrid__wd [lang="ar"] { font-size: 10px; font-weight: 500; text-transform: none; }
.calday { display: grid; align-content: start; gap: 2px; min-width: 0; min-height: 58px; padding: 4px 3px; border: 1px solid var(--hair); border-radius: 6px; background: #fff; color: var(--ink); font: inherit; text-align: start; cursor: pointer; overflow: hidden; }
.calday.is-out { background: transparent; color: var(--ink-3); border-color: transparent; }
.calday.is-today .calday__n { background: var(--wine); color: #fff; }
.calday.is-on { box-shadow: inset 0 0 0 2px var(--wine); }
.calday--exam { background: var(--bad-bg); }
.calday--off { background: var(--ok-bg); }
.calday--note { background: var(--paper-2); }
.calday__n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700; }
.calday__e { display: block; padding: 1px 3px; border-radius: 3px; background: var(--wine); color: #fff; font-size: 10px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calday__e.is-draft { background: var(--rose); color: var(--wine-3); }
.calday__more { font-size: 10px; font-weight: 700; color: var(--wine); }
@media (min-width: 700px) { .calday { min-height: 84px; padding: 6px; } .calday__e { font-size: 11px; } }
.calkey { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 10px 0 0; color: var(--ink-2); }
.calkey [lang="ar"] { margin-inline-end: 10px; }
.calkey__k { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--hair-2); }
.calkey__k--exam { background: var(--bad-bg); }
.calkey__k--off { background: var(--ok-bg); }
.calkey__k--note { background: var(--paper-2); }
/* a paper's tab with a long name wraps inside its button, never past the screen */
.optabs button { min-width: 0; white-space: normal; }
.optabs button > span { min-width: 0; overflow-wrap: anywhere; }
.calc__date [lang="ar"] { font-size: 11px; font-weight: 600; }
/* the icons in these parts: the site sizes an icon by where it sits */
.optip .ic, .opwait .ic, .opc__papers .ic, .opedit__ptitle .ic, .opsub .ic { width: 18px; height: 18px; flex: none; }
.opwait h3 .ic { color: var(--wine); }

/* a paper's tab: its name over its count */
.optabs button { flex-direction: column; align-items: center; justify-content: center; }
.calc__date { align-self: start; }
.task__m .linkbtn { text-align: start; }
/* the site shows one language at a time: a line made of several parts keeps its Arabic parts on the line */
.oprows small [lang="ar"], .oprun__list small [lang="ar"], .opwait__b small [lang="ar"] { display: inline; }

/* ---------- Round 17: whose turn, where a paper is, the board, the archive ---------- */
/* the count on the Operations button and its tabs */
.tbadge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--wine); color: #fff; font-size: 12px; font-weight: 800; line-height: 1; }
.secb, .tab { position: relative; }
.secb .tbadge { position: absolute; top: 6px; inset-inline-end: 8px; }
.secb.is-on .tbadge { background: #fff; color: var(--wine); }
.tab:has(.tbadge) { padding-inline-end: 24px; }
.tab .tbadge { position: absolute; top: 6px; inset-inline-end: 2px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; }

/* Your turn: what waits for me, then what nobody has taken */
.opturn { display: grid; gap: 10px; margin: 8px 0 16px; }
.opturn__h { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; color: var(--wine); }
.opturn__h .ic { width: 22px; height: 22px; }
.opturn__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 760px) { .opturn__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.opturn__i { position: relative; display: grid; gap: 6px; align-content: start; padding: 14px 14px 12px; padding-inline-start: 18px; background: #fff; border: 1.5px solid var(--hair-2); border-radius: var(--r); min-width: 0; overflow: hidden; }
.opturn__i::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 6px; background: var(--hair-2); }
.opturn__i.is-mine { border-color: var(--wine); box-shadow: 0 10px 22px -16px rgba(134, 28, 64, .55); }
.opturn__i.is-mine::before { background: var(--wine); }
.opturn__t { margin: 0; font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.opturn__t [lang="ar"] { display: block; }
.opturn__s { margin: 0; color: var(--ink-3); overflow-wrap: anywhere; }
.opturn__l { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 14px; color: var(--ink-2); min-width: 0; }
.opturn__l .ic { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--wine); }
.opturn__l > span { min-width: 0; overflow-wrap: anywhere; }
.opturn__a { gap: 8px; margin-top: 4px; }
.opfree { padding: 10px 12px; border: 1.5px dashed var(--hair-2); border-radius: var(--r); background: #fff; }
.opfree > summary { cursor: pointer; font-weight: 700; color: var(--ink-2); min-height: 32px; }
.opfree .opturn__list { margin-top: 10px; }
.opfree .opturn__i { box-shadow: none; }

/* the list or the board */
.opview button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; min-height: 40px; }
.opview .ic { width: 16px; height: 16px; }
.opboard { display: grid; gap: 12px; margin-top: 8px; }
@media (min-width: 640px) { .opboard { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
@media (min-width: 1100px) { .opboard { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.opcol { display: grid; gap: 8px; padding: 10px; border-radius: var(--r); background: var(--paper-2); border-top: 4px solid var(--ink-3); min-width: 0; }
.opcol--club { border-top-color: var(--wine); }
.opcol--with { border-top-color: var(--wine-2); }
.opcol--office { border-top-color: var(--warn); }
.opcol--done { border-top-color: var(--ok); }
.opcol__h { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; color: var(--ink-2); }
.opcol__h .ic { width: 18px; height: 18px; flex: none; color: var(--wine); }
.opcol__h b { margin-inline-start: auto; }
.opcol__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.opcol__none { margin: 0; }
.opbc { display: grid; gap: 3px; width: 100%; padding: 10px 12px; border: 1px solid var(--hair); border-radius: var(--r-s); background: #fff; color: var(--ink); font: inherit; text-align: start; cursor: pointer; min-width: 0; }
.opbc.is-stuck { border-color: var(--warn); box-shadow: inset 4px 0 0 var(--warn); }
.opbc__t { overflow-wrap: anywhere; }
.opbc small { color: var(--ink-3); overflow-wrap: anywhere; }
.opbc__n { color: var(--ink-2) !important; }
.opbc__w [lang="ar"] { display: inline; }
.opbc__p { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
@media (hover: hover) { .opbc:hover { border-color: var(--wine); } }

/* where a paper is now */
.oploc { display: inline-flex; align-items: flex-start; gap: 8px; padding: 6px 10px; border-radius: var(--r-s); background: var(--paper-2); color: var(--ink); font-size: 14px; min-width: 0; max-width: 100%; text-align: start; }
.oploc .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--wine); }
.oploc > span { display: grid; min-width: 0; }
.oploc b { overflow-wrap: anywhere; }
.oploc small { color: var(--ink-3); font-weight: 400; }
.oploc small b { color: var(--warn); }
.oploc--with { background: var(--rose-2); }
.oploc--office, .oploc.is-stuck { background: var(--warn-bg); }
.oploc.is-stuck { box-shadow: inset 0 0 0 1.5px var(--warn); }
.opwhere { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--hair); border-radius: var(--r-s); background: #fff; }
.opwhere__l { flex-basis: 100%; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.opwhere__l [lang="ar"] { letter-spacing: 0; text-transform: none; }
.opwhere__a { gap: 6px; margin-inline-start: auto; }
.opwait__b .oploc { justify-self: start; margin-top: 4px; }
.oprun__who { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; }

/* who does a step; how long it usually takes */
.opst__m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 2px; }
.opwho { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; background: var(--paper-2); font-size: 13px; font-weight: 700; color: var(--ink-2); max-width: 100%; }
.opwho .ic { flex: none; width: 14px; height: 14px; }
.opwho > span { min-width: 0; overflow-wrap: anywhere; }
.opwho.is-me { background: var(--wine); color: #fff; }
.opwho--any { font-weight: 600; color: var(--ink-3); }
.opst__u { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-3); }
.opst__u .ic { width: 14px; height: 14px; }
.oppaper__tools { gap: 6px; }
.oppaper__tools .btn { min-height: 40px; }
.opaddx { margin-top: 8px; }

/* a paper's steps as a route: a line from station to station, green where it was signed, dashed to the next one */
.oproute { gap: 0; }
.oproute .opst { position: relative; padding-block: 12px; }
.oproute .opst + .opst { margin-top: 4px; }
.oproute .opst::before { content: ''; position: absolute; inset-inline-start: 23.5px; top: 46px; bottom: -16px; border-inline-start: 3px solid var(--hair-2); }
.oproute .opst:last-child::before { display: none; }
.oproute .opst.is-done::before { border-inline-start-color: var(--ok); }
.oproute .opst.is-next::before { border-inline-start-style: dashed; }
.oproute .opst__n { position: relative; z-index: 1; }
.opst__stamp { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin: 2px 0; padding: 2px 10px; border: 2px solid var(--ok); border-radius: 6px; color: var(--ok); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-2.5deg); }
.opst__stamp [lang="ar"] { letter-spacing: 0; text-transform: none; font-size: 13px; }
.opst__stamp .num { letter-spacing: .02em; }
:root[dir="rtl"] .opst__stamp { transform: rotate(2.5deg); }

/* where the paper goes once a step is signed */
.opplaces { margin-top: 2px; }
.opplaces__g { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.opplace { position: relative; display: block; cursor: pointer; min-width: 0; }
.opplace input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opplace > span { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 12px; border: 1.5px solid var(--hair-2); border-radius: var(--r-s); background: #fff; font-size: 14px; font-weight: 600; }
.opplace > span > span { min-width: 0; overflow-wrap: anywhere; }
.opplace .ic { flex: none; width: 18px; height: 18px; color: var(--wine); }
.opplace input:checked + span { border-color: var(--wine); background: var(--rose-2); color: var(--wine-3); }
.opplace input:focus-visible + span { outline: 3px solid rgba(134, 28, 64, .35); outline-offset: 2px; }
.opplaces__at { margin-top: 10px; }

/* the pages kept for the archive, and a blank form's pages */
.opcopies { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--hair); }
.opcopies .opsub, .arch { display: flex; align-items: center; gap: 8px; }
.opcopies .opsub b { margin-inline-start: auto; color: var(--ink-3); }
.opcopies__g { display: flex; flex-wrap: wrap; gap: 12px; }
.opcopy { position: relative; display: grid; gap: 4px; justify-items: center; margin: 0; width: 84px; }
.opcopy .opthumb { width: 84px; height: 110px; }
.opcopy figcaption { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); }
.opcopy__x { position: absolute; top: -8px; inset-inline-end: -8px; width: 30px; height: 30px; padding: 0; border-radius: 50%; font-size: 18px; box-shadow: 0 2px 6px rgba(34, 29, 30, .2); }
.opcopy--add { display: grid; place-items: center; align-content: center; gap: 6px; height: 110px; padding: 6px; border: 1.5px dashed var(--wine); border-radius: var(--r-s); background: #fff; color: var(--wine); font-size: 12px; font-weight: 700; text-align: center; cursor: pointer; }
.opcopy--add .ic { width: 24px; height: 24px; }
.opblank { display: grid; gap: 8px; padding: 10px 12px; border: 1px dashed var(--hair-2); border-radius: var(--r-s); }

/* the boxes: who does each step, a paper for one activity, the hand-off */
.owlist, .oxsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.owlist label [lang="ar"] { display: inline; }
.oxrow { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--hair); border-radius: var(--r-s); background: var(--paper-2); }
.oxrow > .btn { justify-self: start; }
.ophand__h { display: flex; align-items: center; gap: 8px; color: var(--ok); }
.ophand__h .ic { width: 24px; height: 24px; }
.ophand .oploc { justify-self: start; }

/* the Papers tab */
.arcq { margin: 14px 0 12px; }
.arcblank { margin-top: 12px; }
.arch .ic { width: 18px; height: 18px; color: var(--wine); }
.arclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 900px) { .arclist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.arcc { display: grid; gap: 6px; width: 100%; height: 100%; align-content: start; padding: 12px 14px; border: 1px solid var(--hair); border-radius: var(--r); background: #fff; color: var(--ink); font: inherit; text-align: start; cursor: pointer; min-width: 0; }
@media (hover: hover) { .arcc:hover { border-color: var(--wine); } }
.arcc__d { color: var(--ink-3); }
.arcc__t { font-size: 16px; overflow-wrap: anywhere; }
.arcc__t [lang="ar"] { display: block; font-family: var(--f-ar-h); }
.arcc__p { display: flex; flex-wrap: wrap; gap: 6px; }
.arcc__p .chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; background: var(--paper-2); color: var(--ink-2); white-space: normal; text-align: start; font-weight: 600; font-size: 13px; }
.arcc__p .chip--ok { background: var(--ok-bg); color: var(--ok); }
.arcc__p .ic { width: 14px; height: 14px; }
.arcp { display: grid; gap: 10px; margin-top: 14px; }
.arcp__a { gap: 8px; }
.arctl { list-style: none; margin: 0 0 0 0; margin-inline-start: 8px; padding: 0; display: grid; border-inline-start: 3px solid var(--hair-2); }
.arctl__i { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding-block: 8px; padding-inline: 18px 0; }
.arctl__i::before { content: ''; position: absolute; inset-inline-start: -9.5px; top: 12px; width: 10px; height: 10px; border-radius: 50%; border: 3px solid var(--hair-2); background: #fff; }
.arctl__i.is-sign::before { border-color: var(--ok); background: var(--ok); }
.arctl__i.is-move::before { border-color: var(--wine); }
.arctl__t { grid-column: 1 / -1; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.arctl__b { display: grid; gap: 2px; min-width: 0; }
.arctl__b b { overflow-wrap: anywhere; }
.arctl__b small { color: var(--ink-3); overflow-wrap: anywhere; }
.arctl__b small [lang="ar"], .arctl__t [lang="ar"] { display: inline; }
.arctl__ph { width: 52px; height: 52px; }