/* Generated by scripts/fetch-fonts.mjs from Google Fonts (SIL Open Font License). Do not edit by hand. */
/* arabic */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/amiri-v30-arabic-S7JNKIjk.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/amiri-v30-latin-ext-S7JNKIjk.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/amiri-v30-latin-tLMS7JNK.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;
}
/* arabic */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/amiri-v30-arabic-gGDAbnCA.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/amiri-v30-latin-ext-gGDAbnCA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/amiri-v30-latin-zp5gGDAb.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;
}
/* arabic */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/arefruqaa-v26-arabic-g61NfCHA.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/arefruqaa-v26-latin-ext-g61NfCHA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/arefruqaa-v26-latin-oVfg61Nc.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;
}
/* arabic */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/arefruqaa-v26-arabic-34Fdj3cQ.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/arefruqaa-v26-latin-ext-34Fdj3cQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/arefruqaa-v26-latin-Y2f34Fdg.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;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/cormorantgaramond-v21-latin-ext-n7B6DxjY.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/cormorantgaramond-v21-latin-mSqn7B6D.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;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/cormorantgaramond-v21-latin-ext-n7B6DxjY.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/cormorantgaramond-v21-latin-mSqn7B6D.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;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/cormorantgaramond-v21-latin-ext-ky2F7i6C.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/cormorantgaramond-v21-latin-tKky2F7g.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;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/cormorantgaramond-v21-latin-ext-ky2F7i6C.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/cormorantgaramond-v21-latin-tKky2F7g.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;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/cormorantgaramond-v21-latin-ext-ky2F7i6C.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/cormorantgaramond-v21-latin-tKky2F7g.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;
}
/* arabic */
@font-face {
  font-family: 'Gulzar';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/gulzar-v14-arabic-iAzcPDKo.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
  font-family: 'Gulzar';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/gulzar-v14-latin-ext-iAzcPDKo.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Gulzar';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/gulzar-v14-latin-YYiAzcPA.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;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibmplexmono-v20-latin-ext-1njotFQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibmplexmono-v20-latin-q131njo.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;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibmplexmono-v20-latin-ext-AXHNlYzg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibmplexmono-v20-latin-FgsAXHNk.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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-v20-latin-ext-W0Q5nwU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-v20-latin-L7W0Q5nw.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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-v20-latin-ext-W0Q5nwU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-v20-latin-L7W0Q5nw.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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-v20-latin-ext-W0Q5nwU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-v20-latin-L7W0Q5nw.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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-v20-latin-ext-W0Q5nwU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-v20-latin-L7W0Q5nw.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;
}
/* arabic */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/notonaskharabic-v44-arabic-mLXgzTrc.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/notonaskharabic-v44-latin-ext-mLXgzTrc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/notonaskharabic-v44-latin-HV2mLXgz.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;
}
/* arabic */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/notonaskharabic-v44-arabic-mLXgzTrc.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/notonaskharabic-v44-latin-ext-mLXgzTrc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/notonaskharabic-v44-latin-HV2mLXgz.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;
}
/* arabic */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/notonaskharabic-v44-arabic-mLXgzTrc.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/notonaskharabic-v44-latin-ext-mLXgzTrc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/notonaskharabic-v44-latin-HV2mLXgz.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;
}
/* arabic */
@font-face {
  font-family: 'Reem Kufi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/reemkufi-v28-arabic-Kb8VZBHR.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
  font-family: 'Reem Kufi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/reemkufi-v28-latin-ext-Kb8VZBHR.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Reem Kufi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/reemkufi-v28-latin-W5Kb8VZA.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;
}
/* arabic */
@font-face {
  font-family: 'Reem Kufi';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/reemkufi-v28-arabic-Kb8VZBHR.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
  font-family: 'Reem Kufi';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/reemkufi-v28-latin-ext-Kb8VZBHR.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Reem Kufi';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/reemkufi-v28-latin-W5Kb8VZA.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;
}
/* arabic */
@font-face {
  font-family: 'Reem Kufi';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/reemkufi-v28-arabic-Kb8VZBHR.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
  font-family: 'Reem Kufi';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/reemkufi-v28-latin-ext-Kb8VZBHR.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Reem Kufi';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/reemkufi-v28-latin-W5Kb8VZA.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;
}


/* ══ THEME TOKENS ══ */
:root{
  --r2:3px; --r4:8px; --r6:14px;
  /* Modular type scale, 1.25 ratio, fluid. Base is 17px, the previous 14px was
     below the 16px accessibility floor and everything derived from it was too small. */
  --t-xs:0.78rem;   /* 13.3px, labels only, never body */
  --t-sm:0.88rem;   /* 15px */
  --t-base:1rem;    /* 17px */
  --t-md:1.13rem;   /* 19px */
  --t-lg:clamp(1.3rem,1.1rem + 0.5vw,1.55rem);
  --t-xl:clamp(1.7rem,1.4rem + 1vw,2.3rem);
  --t-2xl:clamp(2.1rem,1.6rem + 1.8vw,3.1rem);
  /* 8px-based spacing scale for vertical rhythm */
  --s1:6px; --s2:12px; --s3:18px; --s4:26px; --s5:38px; --s6:56px; --s7:78px; --s8:112px;
  /* Layout */
  --content:1240px;   /* centred container */
  --prose:66ch;       /* Bringhurst measure */
  --wide:1080px;
  --ui:'IBM Plex Mono',monospace;
  --serif:'Cormorant Garamond',Georgia,serif;
  --arabic:'Noto Naskh Arabic',serif;
  --fscale:1; --arscale:1;
}
body[data-theme="sand"]{--warn:#E8A33D;--bg:#0D0B08;--bg2:#151209;--bg3:#1C160D;--bg4:#241C10;--gold:#C8922A;--gold2:#E8B84B;--gold-dim:#AF7D1E;--glow:rgba(200,146,42,0.12);--sand:#E2D5BB;--sand2:#BBA882;--muted:#988463;--ink:#251D10;--bd:rgba(200,146,42,0.18);--bd2:rgba(255,255,255,0.07);--cardbg:#F0E8D5;--cardink:#251D10;--cardsub:#7A6040;--ok:#4CAF50;--no:#EF5350}
body[data-theme="contrast"]{--warn:#FFC061;--bg:#000;--bg2:#0A0A0A;--bg3:#141414;--bg4:#1E1E1E;--gold:#FFD24A;--gold2:#FFE480;--gold-dim:#C9A227;--glow:rgba(255,210,74,0.16);--sand:#FFF;--sand2:#DEDEDE;--muted:#ABABAB;--ink:#000;--bd:rgba(255,210,74,0.38);--bd2:rgba(255,255,255,0.18);--cardbg:#FFF;--cardink:#000;--cardsub:#2A2A2A;--ok:#5FD463;--no:#FF7A75}
body[data-theme="paper"]{--warn:#8A4A00;--bg:#F4F0E6;--bg2:#EDE7DA;--bg3:#FFF;--bg4:#F8F5EE;--gold:#8A5A1C;--gold2:#A66E22;--gold-dim:#7F6940;--glow:rgba(138,90,28,0.08);--sand:#2C2415;--sand2:#5A4C35;--muted:#786A56;--ink:#FFF;--bd:rgba(138,90,28,0.24);--bd2:rgba(0,0,0,0.09);--cardbg:#2C2415;--cardink:#F4F0E6;--cardsub:#C8BFA8;--ok:#2E7D32;--no:#C62828}
body[data-theme="night"]{--warn:#E0A44A;--bg:#080B12;--bg2:#0D1220;--bg3:#131A2C;--bg4:#1A2438;--gold:#7FA8D9;--gold2:#A5C4E8;--gold-dim:#718FB1;--glow:rgba(127,168,217,0.12);--sand:#DCE5F0;--sand2:#A8B8CC;--muted:#7F8DA1;--ink:#0A0E16;--bd:rgba(127,168,217,0.2);--bd2:rgba(255,255,255,0.07);--cardbg:#E8EEF6;--cardink:#0A0E16;--cardsub:#4A5A70;--ok:#66BB6A;--no:#FF8A85}
body[data-theme="oasis"]{--warn:#DFA23F;--bg:#07110D;--bg2:#0C1A14;--bg3:#12241B;--bg4:#193024;--gold:#5FB88A;--gold2:#8AD4AC;--gold-dim:#52A379;--glow:rgba(95,184,138,0.12);--sand:#DCEDE3;--sand2:#A5C4B3;--muted:#7D9A89;--ink:#08120D;--bd:rgba(95,184,138,0.2);--bd2:rgba(255,255,255,0.07);--cardbg:#E4F2EA;--cardink:#08120D;--cardsub:#4A6555;--ok:#66BB6A;--no:#FF8A85}

/* ══ FONT SCALING, on html so rem actually responds ══ */
html{font-size:calc(17px * var(--fscale))}
body[data-uifont="mono"]{--ui:'IBM Plex Mono',monospace}
body[data-uifont="sans"]{--ui:'Inter',system-ui,sans-serif}
body[data-uifont="serif"]{--ui:'Lora',Georgia,serif}
body[data-uifont="grotesk"]{--ui:'Space Grotesk',system-ui,sans-serif}
body[data-uifont="humanist"]{--ui:'Source Sans 3',system-ui,sans-serif}
body[data-arfont="naskh"]{--arabic:'Noto Naskh Arabic',serif}
body[data-arfont="amiri"]{--arabic:'Amiri',serif}
body[data-arfont="scheherazade"]{--arabic:'Scheherazade New',serif}
body[data-arfont="kufi"]{--arabic:'Reem Kufi',sans-serif}
body[data-arfont="cairo"]{--arabic:'Cairo',sans-serif}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;max-width:100%;overflow-x:clip}
body{background:var(--bg);color:var(--sand);font-family:var(--ui);font-size:var(--t-base);line-height:1.65;min-height:100vh;min-height:100dvh;max-width:100%;overflow-x:clip;-webkit-font-smoothing:antialiased}
.ar{font-family:var(--arabic);direction:rtl;font-size:calc(1em * var(--arscale))}

/* ══ SHELL ══ */
.shell{display:grid;grid-template-columns:228px minmax(0,1fr);min-height:100vh;min-height:100dvh}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){.shell{grid-template-columns:1fr}}
.shell > aside{border-right:1px solid var(--bd);padding:22px 0 0;position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;display:flex;flex-direction:column;gap:2px;background:var(--bg)}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){.shell > aside{position:sticky;top:0;height:auto;overflow:visible;padding:0;border-right:none;border-bottom:1px solid var(--bd);z-index:60}}
.logo{padding:0 18px 16px;border-bottom:1px solid var(--bd);margin-bottom:10px}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){.logo{display:none}}
.logo-ar{font-family:var(--arabic);font-size:1.7rem;color:var(--gold);direction:rtl;line-height:1}
.logo-en{font-size:var(--t-xs);letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-top:3px}

.nav{display:flex;align-items:center;gap:10px;padding:10px 20px;color:var(--muted);cursor:pointer;
  font-size:var(--t-xs);letter-spacing:0.09em;text-transform:uppercase;border-left:2px solid transparent;
  transition:all .14s;width:100%;text-align:left;background:none;border-top:0;border-right:0;border-bottom:0;
  font-family:var(--ui);line-height:1.4}
.nav:hover{color:var(--sand);background:rgba(255,255,255,0.03)}
.nav.on{color:var(--gold);border-left-color:var(--gold);background:var(--glow)}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){.nav{flex-direction:column;gap:3px;padding:11px 12px;font-size:var(--t-xs);border-left:none;border-bottom:2px solid transparent}.nav.on{border-left:none;border-bottom-color:var(--gold)}}
.nav-i{width:17px;text-align:center;font-size:0.95rem}
/* flex:1 with min-height:0 let this column be squashed smaller than its own content, so the
   nav buttons spilled out of their box and painted over .side-foot (Known / Hard / Total)
   whenever enough groups were open. Measured: content 1159px inside a box as short as 250px,
   a 566-906px overlap at every desktop width. Taking the natural height instead lets the
   aside scroll as one column, and margin-top:auto on .side-foot still pins it to the bottom
   when there is spare room. Do not restore flex:1 or min-height:0 here. */
.nav-groups{display:flex;flex-direction:column;flex:0 0 auto}
.nav-group{border-bottom:1px solid var(--bd2)}
.nav-group summary{display:flex;align-items:center;justify-content:space-between;padding:8px 18px 6px;color:var(--muted);
  cursor:pointer;font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;list-style:none}
.nav-group summary::-webkit-details-marker{display:none}
.nav-group summary::after{content:'+';font-size:.82rem;color:var(--gold-dim);font-weight:400}
.nav-group[open] summary{color:var(--gold)}
.nav-group[open] summary::after{content:'−'}
.nav-group .nav{padding-left:22px}
.mobile-nav-bar{display:none}
.nav-sep{height:1px;background:var(--bd);margin:9px 18px}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){.nav-sep{display:none}}
.side-foot{margin-top:auto;padding:14px 18px;border-top:1px solid var(--bd)}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){.side-foot{display:none}}

.sf-row{display:flex;justify-content:space-between;font-size:var(--t-xs);padding:3px 0;color:var(--muted)}
.sf-row b{color:var(--gold);font-weight:600}
main{min-width:0;overflow-y:auto;height:100vh;height:100dvh;padding:var(--s4) var(--s5) 0}
.wrap{max-width:var(--content);margin-inline:auto;width:100%}
/* Reading text is capped at the optimal measure but CENTRED, not jammed left */
.prose{max-width:var(--prose);margin-inline:auto}
.prose-l{max-width:var(--prose)}
.band{max-width:var(--wide);margin-inline:auto}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){main{height:auto;padding:16px 14px 0}}
.panel{display:none;animation:fade .3s ease}
.panel.on{padding-bottom:var(--s7)}
.panel.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ══ SETTINGS ══ */

.settings{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap;padding-bottom:var(--s3);border-bottom:1px solid var(--bd2);margin-bottom:var(--s5);max-width:var(--content);margin-inline:auto}
.sg{display:flex;gap:4px;align-items:center}

.sl{font-size:var(--t-xs);letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);margin-right:3px}

.sb{padding:6px 11px;background:transparent;border:1px solid var(--bd2);color:var(--muted);font-size:var(--t-xs);cursor:pointer;border-radius:var(--r2);font-family:var(--ui);transition:all .14s}
.sb:hover{border-color:var(--gold);color:var(--gold)}
.sb.on{background:var(--glow);border-color:var(--gold);color:var(--gold)}
.sw{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;transition:all .14s}
.sw.on{border-color:var(--gold);transform:scale(1.16)}
select.sb{padding:4px 8px}

/* ══ HEADINGS ══ */
.eyebrow{font-size:var(--t-xs);letter-spacing:0.2em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.eyebrow::after{content:'';flex:1;height:1px;background:var(--bd)}

h2.pt{font-family:var(--serif);font-size:var(--t-xl);color:var(--sand);font-weight:600;margin-bottom:var(--s2);letter-spacing:-0.01em;line-height:1.2}

p.psub{font-size:var(--t-md);color:var(--sand2);max-width:var(--prose);line-height:1.75;margin-bottom:var(--s5)}

/* ══ BUTTONS ══ */

.btn{padding:12px 22px;border:none;cursor:pointer;font-family:var(--ui);font-size:var(--t-xs);font-weight:600;letter-spacing:0.1em;text-transform:uppercase;border-radius:var(--r2);transition:all .14s}
.btn-g{background:rgba(255,255,255,0.04);color:var(--muted);border:1px solid var(--bd2)}
.btn-g:hover{background:rgba(255,255,255,0.09);color:var(--sand);border-color:var(--bd)}
.btn-p{background:var(--gold);color:var(--ink)}
.btn-p:hover{background:var(--gold2)}
/* Known / Hard, one look everywhere (flashcards, sentence builder, expressions, filters):
   a soft green or red tint at rest, a stronger tint once chosen (.on, aria-pressed), never solid.
   `body` in the selectors keeps these ahead of the generic .pill.on / .band-view .pill rules. */
.btn-ok,.pill-ok{--tone:var(--ok)}
.btn-no,.pill-no{--tone:var(--no)}
body .btn-ok,body .btn-no,body .pill-ok,body .pill-no{color:var(--tone);border:1px solid var(--tone);background:transparent}
@supports (color:color-mix(in srgb,red,blue)){
  body .btn-ok,body .btn-no,body .pill-ok,body .pill-no{background:color-mix(in srgb,var(--tone) 11%,transparent);border-color:color-mix(in srgb,var(--tone) 34%,transparent)}
  body .btn-ok:hover,body .btn-no:hover,body .pill-ok:hover,body .pill-no:hover{background:color-mix(in srgb,var(--tone) 20%,transparent);border-color:color-mix(in srgb,var(--tone) 55%,transparent);color:var(--tone)}
  body .btn-ok.on,body .btn-no.on,body .pill.pill-ok.on,body .pill.pill-no.on{background:color-mix(in srgb,var(--tone) 34%,transparent);border-color:color-mix(in srgb,var(--tone) 85%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 45%,transparent);font-weight:700;color:var(--tone)}
}

.pill{padding:7px 15px;border:1px solid var(--bd2);background:transparent;color:var(--muted);font-size:var(--t-xs);letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;border-radius:20px;font-family:var(--ui);transition:all .14s}
.pill:hover{border-color:var(--gold);color:var(--sand)}
.pill.on{background:var(--glow);border-color:var(--gold);color:var(--gold)}

.row{display:flex;gap:var(--s1);flex-wrap:wrap;margin-bottom:var(--s3)}
.nb-search{width:100%;max-width:320px;padding:7px 15px;border:1px solid var(--bd2);background:transparent;color:var(--sand);font-size:var(--t-sm);border-radius:20px;font-family:var(--ui)}
.nb-search:focus{border-color:var(--gold);outline:none}

/* ══ TODAY ══ */
.today{max-width:var(--content);margin-inline:auto}
.today-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s6);align-items:center;
  overflow:hidden;padding:clamp(28px,5vw,64px);border:1px solid var(--bd);border-radius:var(--r6);
  background:radial-gradient(circle at 85% 15%,var(--glow),transparent 38%),linear-gradient(135deg,var(--bg3),var(--bg2));box-shadow:0 24px 70px rgba(0,0,0,.16)}
.today-hero::after{content:'دلّة';position:absolute;right:5%;bottom:-42px;font-family:var(--arabic);font-size:9rem;line-height:1;color:var(--gold);opacity:.035;pointer-events:none}
.today-hero-copy{position:relative;z-index:1;max-width:760px}
.today-kicker,.today-card-head span,.today-stat > span,.today-routes button > span{font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dim)}
.today-hero h2{max-width:17ch;margin:var(--s2) 0;font-family:var(--serif);font-size:var(--t-2xl);font-weight:600;line-height:1.03;letter-spacing:-.025em;text-wrap:balance}
.today-hero p{max-width:60ch;color:var(--sand2);font-size:var(--t-md);line-height:1.7;text-wrap:pretty}
.today-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.today-mark{position:relative;z-index:1;display:grid;place-items:center;align-content:center;width:152px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--bg2) 62%,transparent 63%),conic-gradient(var(--gold) var(--mastery),var(--bd2) 0);box-shadow:inset 0 0 0 1px var(--bd2)}
.today-mark span{font-family:var(--serif);font-size:2.15rem;line-height:1;color:var(--sand)}
.today-mark small{max-width:9ch;margin-top:7px;color:var(--muted);font-size:.65rem;line-height:1.35;text-align:center;text-transform:uppercase;letter-spacing:.1em}
.today-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);margin:var(--s3) 0}
.today-stat{display:grid;grid-template-columns:1fr auto;align-items:end;gap:2px var(--s2);padding:var(--s3);border:1px solid var(--bd2);border-radius:var(--r4);background:var(--bg2)}
.today-stat > span{grid-column:1/-1;color:var(--muted)}
.today-stat b{font-family:var(--serif);font-size:var(--t-xl);font-weight:600;line-height:1;color:var(--sand)}
.today-stat small{color:var(--muted);font-size:.7rem;line-height:1.3;text-align:right}
.today-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:var(--s3)}
.today-card{padding:var(--s4);border:1px solid var(--bd2);border-radius:var(--r4);background:var(--bg2)}
.today-card-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-bottom:var(--s2)}
.today-card-head strong{color:var(--gold);font-size:var(--t-sm)}
.today-card h3{font-family:var(--serif);font-size:var(--t-xl);font-weight:600;line-height:1.15;color:var(--sand)}
.today-card p{max-width:60ch;margin-top:8px;color:var(--sand2);font-size:var(--t-sm);line-height:1.7}
.today-progress{height:6px;margin:var(--s3) 0;background:var(--bd2);border-radius:10px;overflow:hidden}
.today-progress i{display:block;height:100%;min-width:2px;background:linear-gradient(90deg,var(--gold-dim),var(--gold2));border-radius:inherit}
.today-words{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.today-words span{display:flex;flex-direction:column;align-items:center;min-width:0;padding:10px 7px;border:1px solid var(--bd2);border-radius:var(--r2);background:var(--bg3);text-align:center}
.today-words b{font-family:var(--arabic);font-size:calc(1.2rem * var(--arscale));font-weight:600;color:var(--gold);line-height:1.5}
.today-words small{max-width:100%;overflow:hidden;color:var(--muted);font-size:.65rem;text-overflow:ellipsis;white-space:nowrap}
.today-routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin-top:var(--s3)}
.today-routes button{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:var(--s3);border:1px solid var(--bd2);border-radius:var(--r4);background:transparent;color:var(--sand);font-family:var(--ui);text-align:left;cursor:pointer;transition:.18s}
.today-routes button:hover{border-color:var(--gold);background:var(--glow);transform:translateY(-2px)}
.today-routes b{margin:4px 0;font-family:var(--serif);font-size:var(--t-lg);font-weight:600}
.today-routes small{color:var(--muted);font-size:.72rem;line-height:1.55}
.session-strip{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);max-width:var(--wide);margin:0 auto var(--s3);padding:var(--s2) var(--s3);border:1px solid var(--gold-dim);border-radius:var(--r4);background:var(--glow)}
.session-strip[hidden]{display:none}
.session-strip div{display:flex;flex-direction:column}.session-strip span{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold)}.session-strip b{font-size:var(--t-sm);font-weight:400;color:var(--sand)}

/* ══ FLASHCARD ══ */
.prog{margin-bottom:16px}
.prog-m{display:flex;justify-content:space-between;font-size:0.6rem;color:var(--muted);margin-bottom:4px;letter-spacing:0.08em}
.prog-b{height:2px;background:var(--bd2);border-radius:1px;overflow:hidden}
.prog-f{height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold));transition:width .4s}

.fcw{perspective:1500px;margin:0 auto var(--s3);cursor:pointer;max-width:820px}

.fc{width:100%;min-height:clamp(240px,34vh,320px);position:relative;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.fc.flip{transform:rotateY(180deg)}

.fcf{position:absolute;inset:0;backface-visibility:hidden;overflow:auto;border-radius:var(--r4);border:1px solid var(--bd);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 26px;gap:8px;text-align:center}
.fc-a{background:var(--bg3)}
.fc-b{background:var(--cardbg);transform:rotateY(180deg)}
.fc-cat{position:absolute;top:11px;left:14px;font-size:var(--t-xs);letter-spacing:0.16em;text-transform:uppercase;color:var(--gold-dim)}
.fc-n{position:absolute;top:11px;right:14px;font-size:var(--t-xs);color:var(--muted)}
.fc-st{position:absolute;bottom:11px;left:14px;font-size:var(--t-xs)}
.fc-h{position:absolute;bottom:11px;right:14px;font-size:var(--t-xs);color:var(--muted);letter-spacing:0.08em}

.w-ar{font-family:var(--arabic);font-size:calc(clamp(2.2rem,6vw,3.6rem) * var(--arscale));color:var(--gold);direction:rtl;line-height:1.35}

.w-tr{font-family:var(--serif);font-size:var(--t-lg);color:var(--sand);font-style:italic}

.w-ph{font-size:var(--t-base);color:var(--sand2);max-width:46ch;line-height:1.7;border-top:1px solid var(--bd);padding-top:10px;margin-top:4px;white-space:pre-line;overflow-wrap:anywhere}
.m-en{font-family:var(--serif);font-size:1.85rem;font-weight:700;color:var(--cardink)}

.m-use{font-size:var(--t-sm);color:var(--cardsub);max-width:48ch;line-height:1.7;border-top:1px solid rgba(0,0,0,0.1);padding-top:10px;margin-top:6px;font-style:italic}
.fc-ctl{display:flex;gap:7px;justify-content:center;margin-bottom:22px;flex-wrap:wrap}

/* ══ STUDY DECK ══ */

.deck{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);max-width:var(--wide);margin:0 auto var(--s6)}
@media(max-width:880px){.deck{grid-template-columns:1fr}}

.box{background:var(--bg3);border:1px solid var(--bd);border-radius:var(--r4);padding:var(--s4)}

.box-t{font-size:var(--t-xs);letter-spacing:0.16em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:var(--s3)}

.ex-q{font-size:var(--t-base);color:var(--sand);line-height:1.7;margin-bottom:var(--s3)}

.ex-opt{display:block;width:100%;text-align:left;padding:12px 16px;margin-bottom:8px;background:rgba(255,255,255,0.03);border:1px solid var(--bd2);color:var(--sand2);font-family:var(--ui);font-size:var(--t-sm);border-radius:var(--r4);cursor:pointer;transition:all .14s}
.ex-opt:hover:not(:disabled){border-color:var(--gold);color:var(--sand);background:var(--glow)}
.ex-opt.ok{background:rgba(76,175,80,0.16);border-color:var(--ok);color:var(--ok)}
.ex-opt.no{background:rgba(239,83,80,0.14);border-color:var(--no);color:var(--no)}
.ex-opt:disabled{cursor:default}
.ex-fb{font-size:var(--t-sm);line-height:1.65;margin-top:10px;padding-top:10px;border-top:1px solid var(--bd2);color:var(--sand2)}
.ctx-s{font-family:var(--arabic);font-size:calc(1.5rem * var(--arscale));color:var(--gold);direction:rtl;line-height:1.9;margin-bottom:8px}
.ctx-s .hl{background:var(--glow);border-radius:3px;padding:1px 5px;box-shadow:0 0 0 1px var(--bd)}
.snd-mark{background:var(--gold);color:var(--ink);border-radius:3px;padding:0 3px;font-style:normal}
.ctx-s .snd-mark{padding:0}
.ctx-t{font-family:var(--serif);font-style:italic;color:var(--sand2);font-size:0.92rem;margin-bottom:3px}

.ctx-e{font-size:var(--t-sm);color:var(--sand2);line-height:1.7}

.qr{display:flex;align-items:center;gap:12px;padding:8px 0;font-size:var(--t-sm);border-bottom:1px solid var(--bd2);cursor:pointer;transition:all .14s}
.qr:last-child{border-bottom:none}
.qr:hover{background:var(--glow)}
.qr.now{color:var(--gold)}
.qr.now .q-a{color:var(--gold2)}
.q-n{color:var(--muted);font-size:var(--t-xs);min-width:22px}
.q-a{font-family:var(--arabic);font-size:calc(1.05rem * var(--arscale));color:var(--sand2);direction:rtl;min-width:68px}
.q-t{font-family:var(--serif);font-style:italic;color:var(--muted);flex:1}

.st-r{display:flex;justify-content:space-between;font-size:var(--t-sm);padding:5px 0;color:var(--sand2)}
.st-r b{color:var(--gold);font-weight:600}

/* ══ QUIZ ══ */

.qz{background:var(--bg3);border:1px solid var(--bd);border-radius:var(--r6);padding:var(--s6) var(--s4);text-align:center;margin:0 auto var(--s3);max-width:820px}
.qz-l{font-size:var(--t-xs);letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.qz-a{font-family:var(--arabic);font-size:calc(3rem * var(--arscale));color:var(--gold);direction:rtl;line-height:1.4}
.qz-t{font-family:var(--serif);font-size:1.15rem;color:var(--muted);font-style:italic;margin-top:6px}

.qz-o{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin:0 auto var(--s3);max-width:820px}
@media(max-width:620px){.qz-o{grid-template-columns:1fr}}
.qo{padding:14px 16px;background:rgba(255,255,255,0.03);border:1px solid var(--bd);color:var(--sand);font-family:var(--ui);font-size:0.8rem;cursor:pointer;border-radius:var(--r2);text-align:left;transition:all .14s}
.qo:hover:not(:disabled){background:var(--glow);border-color:var(--gold)}
.qo.ok{background:rgba(76,175,80,0.18);border-color:var(--ok);color:var(--ok)}
.qo.no{background:rgba(239,83,80,0.16);border-color:var(--no);color:var(--no)}
.qo:disabled{cursor:default}

.fb{padding:var(--s3) var(--s4);border-radius:var(--r4);font-size:var(--t-sm);margin:0 auto var(--s3);max-width:820px;line-height:1.7}
.fb.ok{background:rgba(76,175,80,0.12);color:var(--ok);border:1px solid rgba(76,175,80,0.3)}
.fb.no{background:rgba(239,83,80,0.12);color:var(--no);border:1px solid rgba(239,83,80,0.28)}

/* ══ SENTENCE BUILDER ══ */
.sb-wrap{max-width:820px;margin:0 auto;text-align:center}

.sb-target{background:var(--bg3);border:1px solid var(--bd);border-radius:var(--r4);padding:26px 22px;margin-bottom:14px;min-height:120px;display:flex;align-items:center;justify-content:center;direction:rtl}
.sb-target .ar{font-family:var(--arabic);font-size:calc(2.4rem * var(--arscale));color:var(--gold);line-height:1.7}
.sb-goal{font-family:var(--serif);font-size:1.25rem;color:var(--sand2);font-style:italic;margin-bottom:22px}
.sb-slots{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;direction:rtl;margin-bottom:20px}
.slot{background:var(--bg3);border:1px dashed var(--muted);border-radius:var(--r2);min-width:96px;min-height:56px;display:flex;align-items:center;justify-content:center;font-family:var(--arabic);font-size:calc(1.5rem * var(--arscale));color:var(--gold);direction:rtl;cursor:pointer;transition:all .14s;padding:6px 14px}
.slot.filled{border-style:solid;border-color:var(--gold);background:var(--glow)}
.sb-bank{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;direction:rtl;margin-bottom:20px;min-height:56px}

.tok{background:var(--bg4);border:1px solid var(--bd);border-radius:var(--r2);padding:11px 18px;color:var(--sand);direction:rtl;cursor:pointer;transition:all .14s;text-align:center;font-family:var(--ui)}
.tok:hover{border-color:var(--gold);color:var(--gold);background:var(--glow);transform:translateY(-2px)}

/* ══ TABLES / NOTEBOOK ══ */
.tbl{width:100%;border-collapse:collapse;font-size:0.8rem}
.tbl th{font-size:var(--t-xs);letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);text-align:left;padding:9px 11px;border-bottom:1px solid var(--bd);position:sticky;top:0;background:var(--bg)}

.tbl td{padding:14px 12px;border-bottom:1px solid var(--bd2);vertical-align:top}
.tbl tr:hover td{background:var(--glow);cursor:pointer}
.t-ar{font-family:var(--arabic);font-size:calc(1.35rem * var(--arscale));color:var(--gold);direction:rtl}
.t-tr{font-family:var(--serif);font-style:italic;color:var(--sand)}
.t-ph{font-size:var(--t-sm);color:var(--muted);line-height:1.55;white-space:pre-line}
.tag{display:inline-block;padding:1px 7px;background:var(--glow);color:var(--gold);font-size:var(--t-xs);letter-spacing:0.1em;text-transform:uppercase;border-radius:10px;border:1px solid var(--bd)}
.tag-ok{background:rgba(76,175,80,0.14);color:var(--ok);border-color:rgba(76,175,80,0.3)}
.tag-no{background:rgba(239,83,80,0.12);color:var(--no);border-color:rgba(239,83,80,0.28)}

/* ══ CONTENT CARDS ══ */

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s3)}

.card{background:var(--bg3);border:1px solid var(--bd);border-radius:var(--r4);padding:var(--s4);transition:all .2s}
.card:hover{border-color:var(--gold);transform:translateY(-2px)}
.c-ar{font-family:var(--arabic);font-size:calc(1.9rem * var(--arscale));color:var(--gold);direction:rtl;line-height:1.5;margin-bottom:6px}
.c-tr{font-family:var(--serif);font-style:italic;color:var(--sand);font-size:1rem;margin-bottom:7px}
.c-lit{font-size:var(--t-sm);color:var(--gold-dim);font-style:italic;margin-bottom:8px}

.c-b{font-size:var(--t-sm);color:var(--sand2);line-height:1.75}

.c-h{font-family:var(--serif);font-size:var(--t-lg);color:var(--sand);margin-bottom:3px;font-weight:600}

.c-s{font-size:var(--t-xs);letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:var(--s2)}

/* ══ ALPHABET ══ */
.al-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:9px;margin-bottom:26px}
.al{background:var(--bg3);border:1px solid var(--bd);border-radius:var(--r4);padding:15px 10px;text-align:center;cursor:pointer;transition:all .18s}
.al:hover{border-color:var(--gold);background:var(--glow);transform:translateY(-2px)}
.al.on{border-color:var(--gold);background:var(--glow);box-shadow:0 0 0 1px var(--gold)}
.al-l{font-family:var(--arabic);font-size:calc(2.5rem * var(--arscale));color:var(--gold);direction:rtl;line-height:1.2}
.al-n{font-family:var(--serif);font-size:0.85rem;color:var(--sand);font-style:italic;margin-top:4px}
.al-s{font-size:var(--t-xs);color:var(--muted);line-height:1.45;margin-top:3px}
.trace{background:var(--bg3);border:1px solid var(--bd);border-radius:var(--r4);padding:24px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start}
@media(max-width:760px){.trace{grid-template-columns:1fr}}
.trace-svg{background:var(--bg2);border:1px solid var(--bd2);border-radius:var(--r4);width:280px;height:280px}
@media(max-width:760px){.trace-svg{width:100%;height:auto;aspect-ratio:1}}
.guide{stroke:var(--bd2);stroke-width:0.6;fill:none}
.ghost{fill:var(--gold);opacity:0.13;font-family:var(--arabic)}
.ink{fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.pen{fill:var(--gold2)}
.st-num{fill:var(--gold-dim);font-size:5px;font-family:var(--ui)}

/* ══ TIMELINE ══ */
.tline{position:relative;padding-left:30px;max-width:760px}
.tline::before{content:'';position:absolute;left:8px;top:8px;bottom:8px;width:1px;background:linear-gradient(180deg,transparent,var(--bd) 12%,var(--bd) 88%,transparent)}
.tl{position:relative;margin-bottom:30px}
.tl::before{content:'';position:absolute;left:-26px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:1px solid var(--gold)}
.tl-y{font-size:var(--t-xs);letter-spacing:0.15em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:2px}

.tl-h{font-family:var(--serif);font-size:var(--t-lg);color:var(--gold);margin-bottom:7px}

.tl-b{font-size:var(--t-base);color:var(--sand2);line-height:1.8;max-width:62ch}

/* ══ POETRY, book atmosphere ══ */
.folio{position:relative;background:linear-gradient(160deg,var(--bg3) 0%,var(--bg2) 100%);border:1px solid var(--bd);border-radius:var(--r4);padding:var(--s6) var(--s5) var(--s5);margin-bottom:var(--s4);max-width:var(--wide)}
.folio::before{content:'';position:absolute;inset:9px;border:1px solid var(--bd);border-radius:var(--r2);pointer-events:none;opacity:0.4}
.folio::after{content:'';position:absolute;top:-40%;right:-14%;width:58%;height:180%;background:radial-gradient(ellipse at center,var(--glow) 0%,transparent 62%);pointer-events:none}
.folio-orn{position:absolute;top:16px;left:50%;transform:translateX(-50%);color:var(--gold-dim);font-size:0.85rem;letter-spacing:0.5em;opacity:0.5}
.verse{font-family:var(--arabic);font-size:calc(2.1rem * var(--arscale));color:var(--gold);direction:rtl;line-height:2.1;text-align:center;margin:14px 0 18px;position:relative;text-shadow:0 0 40px var(--glow)}
.verse-tr{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--sand2);text-align:center;margin-bottom:10px}
.verse-en{font-family:var(--serif);font-size:1.2rem;color:var(--sand);text-align:center;margin-bottom:20px;line-height:1.7}
.verse-n{font-size:0.8rem;color:var(--muted);line-height:1.8;border-top:1px solid var(--bd2);padding-top:16px;max-width:62ch;margin:0 auto}
.verse-by{text-align:center;margin-top:16px;font-size:var(--t-xs);letter-spacing:0.2em;text-transform:uppercase;color:var(--gold-dim)}

/* ══ CALLIGRAPHY ══ */
.cal{position:relative;background:var(--bg3);border:1px solid var(--bd);border-radius:var(--r4);padding:0;overflow:hidden;transition:all .25s}
.cal:hover{border-color:var(--gold);transform:translateY(-3px)}
.cal-top{padding:36px 22px 26px;text-align:center;background:radial-gradient(ellipse at 50% 40%,var(--glow) 0%,transparent 68%);border-bottom:1px solid var(--bd2)}
.cal-ar{font-family:var(--arabic);font-size:calc(3.1rem * var(--arscale));color:var(--gold);direction:rtl;line-height:1.3;text-shadow:0 0 34px var(--glow)}
.cal-body{padding:18px 22px 22px}

/* ══ MAP ══ */
.mapbox{background:var(--bg3);border:1px solid var(--bd);border-radius:var(--r4);padding:18px;margin-bottom:18px}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:var(--t-sm);color:var(--muted)}
.legend span{display:flex;align-items:center;gap:6px}
.ld{width:8px;height:8px;border-radius:50%}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:7px;font-size:var(--t-sm);cursor:pointer}
.bar-row:hover .bar-f{filter:brightness(1.25)}
.bar-n{min-width:112px;color:var(--sand2)}

.bar-t{display:block;flex:1;height:15px;background:var(--bd2);border-radius:2px;overflow:hidden}

.bar-f{display:block;height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold));border-radius:2px;transition:width .7s cubic-bezier(.4,0,.2,1)}
.bar-v{min-width:52px;text-align:right;color:var(--gold);font-size:var(--t-sm)}

/* ══ AI ══ */
.chat{background:var(--bg3);border:1px solid var(--bd);border-radius:var(--r4);padding:18px;min-height:280px;max-height:440px;overflow-y:auto;margin-bottom:11px;display:flex;flex-direction:column;gap:13px}
.msg{max-width:86%;font-size:0.84rem;line-height:1.75}
.msg.u{align-self:flex-end;background:var(--glow);border:1px solid var(--bd);border-radius:var(--r4);padding:10px 14px;color:var(--sand)}
.msg.b{align-self:flex-start;color:var(--sand2)}
.msg.b strong{color:var(--gold)}
.inrow{display:flex;gap:8px}
.inp{flex:1;min-width:0;background:var(--bg3);border:1px solid var(--bd);color:var(--sand);padding:11px 14px;font-family:var(--ui);font-size:0.8rem;border-radius:var(--r2);outline:none;transition:border .14s}
.inp:focus{border-color:var(--gold)}
.inp::placeholder{color:var(--muted)}
.inp:disabled{opacity:.45;cursor:not-allowed}
.btn-p:disabled{opacity:.45;cursor:not-allowed}
.dots{display:flex;gap:4px;align-items:center;padding:4px 0}
.dot{width:5px;height:5px;border-radius:50%;background:var(--gold-dim);animation:bnc .9s infinite}
.dot:nth-child(2){animation-delay:.15s}.dot:nth-child(3){animation-delay:.3s}
@keyframes bnc{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.src{margin-top:12px;padding-top:11px;border-top:1px solid var(--bd2)}
.src-t{font-size:var(--t-xs);letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:7px}
.src a{display:block;font-size:var(--t-sm);color:var(--muted);text-decoration:none;padding:2px 0;line-height:1.5}
.src a:hover{color:var(--gold);text-decoration:underline}

/* ══ NOTICE ══ */

.note{background:var(--glow);border:1px solid var(--bd);border-left:2px solid var(--gold);border-radius:var(--r4);padding:var(--s3) var(--s4);font-size:var(--t-sm);line-height:1.8;color:var(--sand2);margin-bottom:var(--s4);max-width:72ch}
.note b{color:var(--gold)}

/* ══ ROADMAP / DAILY ══ */
.rm{max-width:900px}
.rm-hero{background:linear-gradient(135deg,var(--bg3),var(--bg2));border:1px solid var(--bd);border-radius:var(--r4);padding:26px 28px;margin-bottom:22px;position:relative;overflow:hidden}
.rm-hero::after{content:'';position:absolute;top:-50%;right:-8%;width:44%;height:200%;background:radial-gradient(ellipse,var(--glow),transparent 66%)}
.rm-stage{font-size:var(--t-xs);letter-spacing:0.2em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:6px}
.rm-title{font-family:var(--serif);font-size:1.6rem;color:var(--sand);margin-bottom:8px}
.rm-sub{font-size:0.84rem;color:var(--muted);line-height:1.7;max-width:56ch;margin-bottom:18px}
.rm-bar{height:5px;background:var(--bd2);border-radius:3px;overflow:hidden;margin-bottom:8px}
.rm-fill{height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold2));transition:width .8s cubic-bezier(.4,0,.2,1)}
.rm-meta{display:flex;justify-content:space-between;font-size:var(--t-sm);color:var(--muted)}
.rm-track{display:flex;gap:0;margin-bottom:26px;overflow-x:auto;padding-bottom:6px}
.rm-node{flex:1;min-width:110px;text-align:center;position:relative;padding-top:22px;cursor:pointer}
.rm-node::before{content:'';position:absolute;top:6px;left:0;right:0;height:1px;background:var(--bd)}
.rm-node:first-child::before{left:50%}
.rm-node:last-child::before{right:50%}
.rm-node::after{content:'';position:absolute;top:2px;left:50%;transform:translateX(-50%);width:9px;height:9px;border-radius:50%;background:var(--bg);border:1px solid var(--bd)}
.rm-node.done::after{background:var(--gold);border-color:var(--gold)}
.rm-node.now::after{background:var(--gold2);border-color:var(--gold2);box-shadow:0 0 0 4px var(--glow)}
.rm-nl{font-size:var(--t-xs);color:var(--muted);letter-spacing:0.08em;text-transform:uppercase}
.rm-node.now .rm-nl{color:var(--gold)}
.rm-nd{font-size:var(--t-sm);color:var(--muted);margin-top:2px}
.day{background:var(--bg3);border:1px solid var(--bd);border-radius:var(--r4);padding:18px;transition:all .2s}
.day.done{border-color:rgba(76,175,80,0.3)}
.day.now{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.day-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.day-n{font-size:var(--t-xs);letter-spacing:0.16em;text-transform:uppercase;color:var(--gold-dim)}
.day-t{font-family:var(--serif);font-size:1rem;color:var(--sand);font-style:italic;margin-bottom:12px}
.dw{display:flex;align-items:center;gap:9px;font-size:var(--t-sm);padding:4px 0;border-bottom:1px solid var(--bd2)}
.dw:last-child{border-bottom:none}
.tick{width:14px;height:14px;border-radius:50%;border:1px solid var(--muted);cursor:pointer;flex-shrink:0;transition:all .18s;display:flex;align-items:center;justify-content:center;font-size:8px;color:transparent}
.tick.on{background:var(--ok);border-color:var(--ok);color:var(--bg)}
.dw-a{font-family:var(--arabic);font-size:calc(1.1rem * var(--arscale));color:var(--gold);direction:rtl;min-width:64px}
.dw-t{font-family:var(--serif);font-style:italic;color:var(--sand2);min-width:76px}
.dw-e{color:var(--muted);font-size:var(--t-sm);flex:1}

/* ══ STUDY BOOK ══ */
.sbk-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;margin-bottom:24px}
.stat{background:var(--bg3);border:1px solid var(--bd);border-radius:var(--r4);padding:18px}
.stat-v{font-family:var(--serif);font-size:2rem;color:var(--gold);line-height:1}
.stat-l{font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.sheet{background:#fff;color:#111;padding:34px;border-radius:var(--r4);font-family:Georgia,serif}
.sheet h3{font-size:1.2rem;margin-bottom:4px;color:#111}
.sheet .meta{font-size:var(--t-sm);color:#666;margin-bottom:18px;border-bottom:1px solid #ddd;padding-bottom:10px}
.sheet table{width:100%;border-collapse:collapse;font-size:0.82rem}
.sheet th{text-align:left;padding:7px 9px;border-bottom:1.5px solid #333;font-size:var(--t-sm);text-transform:uppercase;letter-spacing:0.1em;color:#444}
.sheet td{padding:9px;border-bottom:1px solid #e2e2e2;vertical-align:top}
.sheet .sar{font-family:'Noto Naskh Arabic',serif;font-size:1.5rem;direction:rtl;color:#111}
.sheet .prac{border-bottom:1px dashed #bbb;height:26px}

/* ══ FOOTER ══ */
.deco{position:relative;height:104px;margin-top:52px;border-bottom:1px solid var(--bd);overflow:hidden}
.deco svg{position:absolute;inset:0;width:100%;height:100%}
footer{padding:24px 0 34px;font-size:var(--t-sm);color:var(--muted)}
.fq{text-align:center;padding:16px 0 20px;border-bottom:1px solid var(--bd2);margin-bottom:18px}
.fq-a{font-family:var(--arabic);font-size:calc(1.55rem * var(--arscale));color:var(--gold);direction:rtl;line-height:1.7;margin-bottom:5px}
.fq-t{font-family:var(--serif);font-style:italic;color:var(--sand2);font-size:0.85rem}
.fq-e{font-size:var(--t-sm);color:var(--muted);margin-top:3px}
.fq-s{font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-dim);margin-top:8px}
.fgrid{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap}
.fcol{display:flex;flex-direction:column;gap:5px}
.fcol b{color:var(--sand2);font-size:var(--t-xs);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:3px;font-weight:400}
.flink{color:var(--muted);cursor:pointer;text-decoration:none;font-size:var(--t-sm);transition:color .14s;
  background:none;border:none;padding:0;text-align:left;font-family:inherit;display:block}
.flink:hover{color:var(--gold)}
.fbot{margin-top:20px;padding-top:13px;border-top:1px solid var(--bd2);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:var(--t-sm)}
.fbot a{color:var(--gold);text-decoration:none}

.toast{position:fixed;bottom:24px;right:24px;background:var(--bg4);border:1px solid var(--gold);color:var(--gold);padding:10px 18px;border-radius:var(--r2);font-size:var(--t-sm);z-index:200;opacity:0;transform:translateY(8px);transition:all .25s;pointer-events:none}
.toast.on{opacity:1;transform:none}
@media print{.shell > aside,.settings,.deco,footer,.no-print{display:none!important}main{height:auto;padding:0}.sheet{padding:0}}

/* ══ REDUCED MOTION ══ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.001ms!important;animation-iteration-count:1!important;
    transition-duration:0.001ms!important;scroll-behavior:auto!important}
  .fc{transition:none!important}
  .deco svg animate,.deco svg animateTransform,.deco svg animateMotion{display:none}
}
/* Visible keyboard focus everywhere, was relying on the browser default, which
   is invisible against these dark backgrounds. */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px}
.fcw:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
.sw:focus-visible{outline:2px solid var(--sand);outline-offset:3px}

/* ══════════════════════════════════════════════════════════
   NAJDI ORNAMENT SYSTEM
   Vocabulary borrowed from Najdi mud-brick architecture:
   triangular wall perforations and stepped (crenellated) rooflines.
   ══════════════════════════════════════════════════════════ */
:root{
  --tri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 12 L6 0 L12 12 Z M12 12 L18 0 L24 12 Z' fill='%23C8922A' fill-opacity='0.25'/%3E%3C/svg%3E");
  --crenel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='10' viewBox='0 0 32 10'%3E%3Cpath d='M0 10 V6 H4 V3 H8 V0 H12 V3 H16 V6 H20 V3 H24 V0 H28 V3 H32 V10 Z' fill='%23C8922A' fill-opacity='0.18'/%3E%3C/svg%3E");
}
/* Triangle frieze, the signature Najdi wall band */
.frieze{height:12px;background-image:var(--tri);background-repeat:repeat-x;background-size:24px 12px;opacity:.85}
.frieze-t{border-top:1px solid var(--bd)}
/* Stepped roofline, used to cap major panels */
.crenel-top{position:relative}
.crenel-top::before{content:'';position:absolute;top:0;left:0;right:0;height:10px;
  background-image:var(--crenel);background-repeat:repeat-x;background-size:32px 10px;pointer-events:none;opacity:.9}

/* Cut-corner card, the single biggest change away from plain rectangles */
.cut{position:relative;background:var(--bg3);border:1px solid var(--bd);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  transition:border-color .2s,transform .2s}
.cut:hover{border-color:var(--gold);transform:translateY(-2px)}
/* the clip removes the border on the bevels, so draw them back in */
.cut::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,var(--bd) 0 1px,transparent 1px) top left/15px 15px no-repeat,
             linear-gradient(-45deg,var(--bd) 0 1px,transparent 1px) bottom right/15px 15px no-repeat}

/* Arch. Islamic pointed-arch silhouette for hero blocks */
.arch{border-radius:50% 50% var(--r4) var(--r4)/22% 22% var(--r4) var(--r4)}

/* Ornamental section rule */

.orn{display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s4)}
.orn::before,.orn::after{content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--bd),transparent)}
.orn span{font-size:var(--t-xs);letter-spacing:0.26em;text-transform:uppercase;color:var(--gold-dim)}
.orn-d{color:var(--gold-dim);opacity:.7;font-size:0.8rem;letter-spacing:0.4em}

/* Rosette / star-8 motif used as a section stamp */
.stamp{width:26px;height:26px;opacity:.55;flex-shrink:0}

/* Softer, less rigid surfaces overall */
.card,.box,.qz,.mapbox,.day,.stat,.rm-hero,.note{border-radius:var(--r4)}
.note{border-left-width:2px;position:relative;overflow:hidden}
.note::after{content:'';position:absolute;right:-10px;top:-10px;width:70px;height:70px;
  background-image:var(--tri);background-size:18px 9px;opacity:.35;transform:rotate(12deg);pointer-events:none}

/* ══ RESPONSIVE, was only handled at one breakpoint before ══ */
@media(max-width:1100px){
  main{padding:20px 22px 0}
  .deck{grid-template-columns:1fr 1fr}
}
@media(max-width:880px){
  .deck{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
  .qz-o{grid-template-columns:1fr}
  .rm-days{grid-template-columns:1fr 1fr!important}
}
@media(max-width:680px){
  main{padding:14px 12px 0}
  .settings{gap:8px}
  .sl{display:none}
  .grid{grid-template-columns:1fr}
  .rm-days{grid-template-columns:1fr!important}
  .folio{padding:30px 18px 24px}
  .verse{font-size:calc(1.5rem * var(--arscale))}
  h2.pt{font-size:1.35rem}
  .fgrid{gap:18px}
  .fcol{min-width:44%}
  .trace{grid-template-columns:1fr}
  .tbl{font-size:var(--t-sm)}
  .fc-ctl .btn{padding:8px 12px;font-size:var(--t-xs)}
}
@media(max-width:420px){
  .fcol{min-width:100%}
  .w-tr{font-size:1.1rem}
  .settings{justify-content:space-between}
}

/* ══ AI layout, was a narrow 760px column on a wide screen ══ */
.ai-layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:16px;align-items:start}
.ai-layout > *{min-width:0}
.ai-main .chat{min-height:min(58vh,540px);max-height:62vh}
.ai-side .pill{text-align:left;width:100%;border-radius:var(--r2)}
@media(max-width:900px){.ai-layout{grid-template-columns:1fr}.ai-side{order:2}}

/* ══ Map ══ */
.map-wrap{align-items:start}
@media(max-width:900px){.map-wrap{grid-template-columns:1fr!important}}
.ctry{transition:fill-opacity .15s,filter .15s;cursor:pointer;outline:none}
.ctry:hover,.ctry.hi,.ctry:focus-visible{fill-opacity:1;filter:drop-shadow(0 0 4px var(--glow))}
.ld{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:7px}
.bar-row{border-radius:var(--r2);padding:2px 4px}
.bar-row:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.bar-f{animation:grow .8s cubic-bezier(.4,0,.2,1) both}
@keyframes grow{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}

/* ══ Poetry: verse sits above, ornament bleeds behind and below ══ */
.folio{padding-bottom:64px}
.folio-base{position:absolute;left:0;right:0;bottom:0;height:56px;pointer-events:none;opacity:.5;z-index:0}
.folio > *:not(.folio-base){position:relative;z-index:1}

/* ══ Rotating cultural motif band ══ */
#motif-bar{height:14px;margin-bottom:16px;opacity:.5}
.trace-pane{display:flex;flex-direction:column}
.trace-svg{background:var(--bg2);border:1px solid var(--bd2);border-radius:var(--r4);width:100%;max-width:300px;height:auto;aspect-ratio:1}
.trace{display:grid;grid-template-columns:300px 1fr;gap:30px;align-items:start;background:var(--bg3);border:1px solid var(--bd);border-radius:var(--r4);padding:24px}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){.trace{grid-template-columns:1fr}.trace-svg{max-width:100%}}
/* ══ History track selector ══ */
.tracks{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.track{display:flex;align-items:center;gap:9px;padding:10px 16px;background:var(--bg3);
  border:1px solid var(--bd2);color:var(--muted);font-family:var(--ui);font-size:var(--t-sm);
  cursor:pointer;transition:all .16s;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.track:hover{color:var(--sand);border-color:var(--bd)}
.track.on{background:var(--glow);border-color:var(--gold);color:var(--gold)}
.track-i{font-size:1.1rem;font-family:var(--arabic)}
.tline{padding-left:32px}
.tl{background:var(--bg3);border:1px solid var(--bd2);border-radius:var(--r4);padding:18px 20px;margin-bottom:16px}
.tl::before{top:24px;left:-28px}
.tl:hover{border-color:var(--bd)}

/* ══ Dialect comparison ══ */
.cmp{border:1px solid var(--bd);border-radius:var(--r4);overflow:hidden}
.cmp-head,.cmp-row{display:grid;grid-template-columns:1.1fr 1.3fr 0.9fr;gap:16px;align-items:center;
  padding:13px 18px;width:100%;text-align:left}
.cmp-head{font-size:var(--t-xs);letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);
  background:var(--bg2);border-bottom:1px solid var(--bd)}
.cmp-row{background:transparent;border:none;border-bottom:1px solid var(--bd2);color:var(--sand);
  font-family:var(--ui);cursor:pointer;transition:background .14s}
.cmp-row:last-child{border-bottom:none}
.cmp-row:hover{background:var(--glow)}
.cmp-row.target{background:rgba(200,146,42,0.07)}
.cmp-n{display:flex;flex-direction:column;gap:2px;font-size:0.86rem}
.cmp-sub{font-size:var(--t-sm);color:var(--muted);font-style:normal}
.cmp-ar{display:flex;flex-direction:column;gap:3px;direction:rtl;text-align:right}
.cmp-ar b{font-family:var(--arabic);font-size:calc(1.4rem * var(--arscale));color:var(--gold);font-weight:400}
.cmp-ar em{direction:ltr;text-align:right;font-family:var(--serif);font-size:var(--t-sm);color:var(--sand2)}
.cmp-sp{display:flex;flex-direction:column;gap:5px;font-size:var(--t-sm);color:var(--muted)}
.spark{display:block;height:5px;background:var(--bd2);border-radius:3px;overflow:hidden}
.spark i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold))}
@media(max-width:760px){
  .cmp-head{display:none}
  .cmp-row{grid-template-columns:1fr;gap:8px}
  .cmp-ar{direction:rtl;text-align:right}
}

/* ══ Calligraphy specimens ══ */
#cal{display:flex;flex-direction:column;gap:18px}
.specimen{display:grid;grid-template-columns:300px 1fr;gap:0;background:var(--bg3);
  border:1px solid var(--bd);border-radius:var(--r4);overflow:hidden;transition:border-color .2s}
.specimen:hover{border-color:var(--gold)}
.spec-plate{padding:30px 22px;text-align:center;border-right:1px solid var(--bd2);
  background:radial-gradient(ellipse at 50% 40%,var(--glow) 0%,transparent 70%);
  display:flex;flex-direction:column;justify-content:center;gap:12px}
.spec-word{font-size:calc(3rem * var(--arscale));color:var(--gold);direction:rtl;line-height:1.4;
  text-shadow:0 0 34px var(--glow)}
.spec-alif{font-size:calc(1.5rem * var(--arscale));color:var(--gold-dim);direction:rtl;opacity:.75}
.spec-body{padding:22px 24px}
@media(max-width:760px){.specimen{grid-template-columns:1fr}
  .spec-plate{border-right:none;border-bottom:1px solid var(--bd2);padding:24px 16px}}

/* ══════════════════════════════════════════════════════════
   LAYOUT, centred containers. The previous build left-aligned
   narrow max-widths inside a wide main, which read as cramped.
   ══════════════════════════════════════════════════════════ */
.panel.on{max-width:var(--content);margin-inline:auto}
.panel > .orn,.panel > h2.pt,.panel > p.psub{max-width:var(--content)}
.psub{font-size:var(--t-md)}

/* ══ MAP labels ══ */
.map-lbl{font-family:var(--ui);font-size:3.1px;fill:var(--ink);opacity:.72;font-weight:600;letter-spacing:.02em}
body[data-theme="paper"] .map-lbl{fill:#fff;opacity:.9}
.map-lbl-sm{font-family:var(--ui);font-size:2.7px;fill:var(--sand2)}
.callout:hover .map-lbl-sm,.callout:focus-visible .map-lbl-sm{fill:var(--gold)}
.callout:hover line{stroke:var(--gold)}
.fact{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--bd2);
  display:grid;grid-template-columns:auto;gap:var(--s2)}
.fact dt{font-size:var(--t-xs);letter-spacing:0.13em;text-transform:uppercase;color:var(--gold-dim)}
.fact dd{margin:2px 0 0;font-size:var(--t-sm);color:var(--sand2);line-height:1.6}

/* ══════════════════════════════════════════════════════════
   POETRY, manuscript leaves
   ══════════════════════════════════════════════════════════ */
#po{display:flex;flex-direction:column;gap:var(--s7);max-width:var(--wide);margin-inline:auto}
.leaf{display:grid;grid-template-columns:56px 1fr;gap:var(--s4);position:relative;
  background:linear-gradient(168deg,var(--bg3) 0%,var(--bg2) 62%,var(--bg) 100%);
  border:1px solid var(--bd);border-radius:var(--r6);overflow:hidden}
.leaf-rule{border-right:1px solid var(--bd2);display:flex;align-items:flex-start;justify-content:center;
  padding-top:var(--s6);background:rgba(0,0,0,0.12)}
.leaf-rule span{font-family:var(--serif);font-size:var(--t-md);color:var(--gold-dim);
  writing-mode:vertical-rl;letter-spacing:0.3em}
.leaf-body{padding:var(--s7) var(--s6) var(--s6);text-align:center;position:relative}
.leaf-orn{color:var(--gold-dim);font-size:1.1rem;opacity:.65;margin-bottom:var(--s4)}
.verse{font-family:var(--arabic);font-size:calc(clamp(1.9rem,1.4rem + 1.6vw,2.7rem) * var(--arscale));
  color:var(--gold);direction:rtl;line-height:2.15;margin:0 auto var(--s4);max-width:22ch;
  text-shadow:0 0 46px var(--glow)}
.verse-tr{font-family:var(--serif);font-style:italic;font-size:var(--t-md);color:var(--sand2);margin-bottom:var(--s2)}
.verse-en{font-family:var(--serif);font-size:var(--t-lg);color:var(--sand);line-height:1.6;
  max-width:46ch;margin:0 auto var(--s4)}
.leaf-div{display:flex;align-items:center;gap:var(--s3);max-width:24ch;margin:var(--s4) auto}
.leaf-div i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--bd),transparent)}
.leaf-div span{color:var(--gold-dim);font-size:var(--t-sm);opacity:.7}
.verse-n{font-size:var(--t-sm);color:var(--sand2);line-height:1.85;max-width:62ch;margin:0 auto;text-align:left}
.colophon{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--bd2);
  display:flex;flex-direction:column;gap:3px;max-width:62ch;margin-inline:auto}
.colo-name{font-family:var(--serif);font-size:var(--t-md);color:var(--gold)}
.colo-dates{font-size:var(--t-xs);letter-spacing:0.18em;text-transform:uppercase;color:var(--muted)}
@media(max-width:760px){.leaf{grid-template-columns:1fr}.leaf-rule{display:none}
  .leaf-body{padding:var(--s5) var(--s4)}}

/* Separator between page content and the closing ornament, and the animation
   sits BELOW the poetry rather than colliding with it. */
.closing-rule{max-width:var(--content);margin:var(--s7) auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--bd),transparent)}
.deco{margin-top:0;border-bottom:1px solid var(--bd);height:120px}

/* ══════════════════════════════════════════════════════════
   HISTORY, a spine you travel along
   ══════════════════════════════════════════════════════════ */
.spine{position:relative;display:flex;gap:0;margin:var(--s5) 0 var(--s6);overflow-x:auto;padding-bottom:var(--s2)}
.spine-line{position:absolute;top:9px;left:4%;right:4%;height:1px;
  background:linear-gradient(90deg,transparent,var(--bd) 8%,var(--bd) 92%,transparent)}
.stop{flex:1;min-width:120px;background:none;border:none;cursor:pointer;padding:0 var(--s1);
  display:flex;flex-direction:column;align-items:center;gap:5px;font-family:var(--ui);position:relative}
.stop-dot{width:11px;height:11px;border-radius:50%;background:var(--bg);border:1px solid var(--bd);
  transition:all .2s;margin-top:4px}
.stop.past .stop-dot{background:var(--gold-dim);border-color:var(--gold-dim)}
.stop.on .stop-dot{background:var(--gold2);border-color:var(--gold2);box-shadow:0 0 0 5px var(--glow)}
.stop-y{font-size:var(--t-xs);color:var(--muted);margin-top:var(--s1)}
.stop-n{font-size:var(--t-xs);letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);text-align:center}
.stop.on .stop-n,.stop.on .stop-y{color:var(--gold)}
.stop:hover .stop-n{color:var(--sand)}
.chapter{display:grid;grid-template-columns:88px 1fr 120px;gap:0;background:var(--bg3);
  border:1px solid var(--bd);border-radius:var(--r6);overflow:hidden;min-height:300px}
.chap-num{font-family:var(--serif);font-size:var(--t-xl);color:var(--gold-dim);
  padding:var(--s5) 0 0;text-align:center;border-right:1px solid var(--bd2);background:rgba(0,0,0,0.12)}
.chap-num i{display:block;font-size:var(--t-xs);font-style:normal;opacity:.7;letter-spacing:.1em}
.chap-body{padding:var(--s6) var(--s6)}
.chap-era{font-size:var(--t-xs);letter-spacing:0.2em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:var(--s2)}
.chap-title{font-family:var(--serif);font-size:var(--t-xl);color:var(--gold);margin-bottom:var(--s4);line-height:1.15}
.chap-text{font-size:var(--t-md);line-height:1.85;color:var(--sand2);max-width:62ch}
.chap-orn{border-left:1px solid var(--bd2);overflow:hidden}
.chap-orn svg{width:100%;height:100%;display:block}
@media(max-width:900px){.chapter{grid-template-columns:1fr}.chap-num{border-right:none;
  border-bottom:1px solid var(--bd2);padding:var(--s3) 0;text-align:left;padding-left:var(--s4)}
  .chap-orn{display:none}.chap-body{padding:var(--s5) var(--s4)}}

/* ══════════════════════════════════════════════════════════
   CALLIGRAPHY specimens
   ══════════════════════════════════════════════════════════ */
#cal{display:flex;flex-direction:column;gap:var(--s4);max-width:var(--wide);margin-inline:auto}
.specimen{display:grid;grid-template-columns:340px 1fr;background:var(--bg3);
  border:1px solid var(--bd);border-radius:var(--r6);overflow:hidden;transition:border-color .2s}
.specimen:hover{border-color:var(--gold)}
.spec-plate{padding:var(--s6) var(--s4);text-align:center;border-right:1px solid var(--bd2);
  background:radial-gradient(ellipse at 50% 42%,var(--glow) 0%,transparent 72%);
  display:flex;flex-direction:column;justify-content:center;gap:var(--s3)}
.spec-word{font-size:calc(3.2rem * var(--arscale));color:var(--gold);direction:rtl;line-height:1.4;
  text-shadow:0 0 40px var(--glow)}
.spec-set{font-size:calc(1.5rem * var(--arscale));color:var(--gold-dim);direction:rtl;opacity:.8;letter-spacing:.1em}
.spec-flag{font-size:var(--t-xs);letter-spacing:0.12em;text-transform:uppercase;padding:4px 10px;
  border-radius:20px;align-self:center;border:1px solid}
.spec-flag.ok{color:var(--ok);border-color:rgba(76,175,80,0.4);background:rgba(76,175,80,0.1)}
.spec-flag.approx{color:var(--muted);border-color:var(--bd2)}
.spec-body{padding:var(--s5) var(--s5)}
.spec-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.spec-traits{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s1);margin:0 0 var(--s3)}
.spec-traits li{font-size:var(--t-xs);color:var(--sand2);background:var(--bg2);
  border:1px solid var(--bd2);border-radius:20px;padding:5px 12px}
.spec-use{font-size:var(--t-sm);color:var(--muted);border-top:1px solid var(--bd2);padding-top:var(--s3)}
.spec-use b{color:var(--gold-dim);margin-right:6px}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){.specimen{grid-template-columns:1fr}
  .spec-plate{border-right:none;border-bottom:1px solid var(--bd2);padding:var(--s5) var(--s4)}}

/* ══ Expressions: room to breathe ══ */
#ex-grid section{margin-bottom:var(--s7)}
#ex-grid .grid{gap:var(--s4)}
#ex-grid .cut{padding:var(--s5)}
.c-ar{font-size:calc(2.1rem * var(--arscale));line-height:1.6;margin-bottom:var(--s2)}
.c-tr{font-size:var(--t-md);margin-bottom:var(--s1)}
.c-lit{font-size:var(--t-sm);margin-bottom:var(--s3)}

/* ══ Word list: roomier cards ══ */
#nb .grid{gap:var(--s4)}
#nb .cut{padding:var(--s4)!important}
#nb section{margin-bottom:var(--s7)!important}

/* ══ Deck + flashcard breathing ══ */
.fcf{padding:var(--s6) var(--s5);gap:var(--s2)}
.fc-ctl{gap:var(--s2);margin-bottom:var(--s4)}
.study-note{text-align:center;font-size:var(--t-xs);color:var(--muted);margin:calc(-1 * var(--s2)) 0 var(--s6)}

/* Footer order: separator, proverb, animation, links. The proverb reads as the
   closing note of the page; the desert sits underneath it, not on top of it. */
.fq{text-align:center;padding:var(--s6) var(--s4) var(--s6);border-bottom:none;margin:0;
  max-width:var(--content);margin-inline:auto}
.fq-a{font-family:var(--arabic);font-size:calc(clamp(1.6rem,1.3rem + 1vw,2.2rem) * var(--arscale));
  color:var(--gold);direction:rtl;line-height:1.9;margin-bottom:var(--s3);text-shadow:0 0 40px var(--glow)}
.fq-t{font-family:var(--serif);font-style:italic;color:var(--sand2);font-size:var(--t-md)}
.fq-e{font-family:var(--serif);font-size:var(--t-lg);color:var(--sand);margin-top:var(--s2)}
.fq-s{font-size:var(--t-xs);letter-spacing:0.2em;text-transform:uppercase;color:var(--gold-dim);margin-top:var(--s3)}
footer{padding:var(--s6) 0 var(--s6);max-width:var(--content);margin-inline:auto}
.fgrid{gap:var(--s6)}
.fcol b{font-size:var(--t-xs);margin-bottom:var(--s2)}
.flink{font-size:var(--t-sm);padding:2px 0}
.fbot{margin-top:var(--s5);padding-top:var(--s3);font-size:var(--t-xs)}
.fattr{margin-top:var(--s3);font-size:var(--t-xs);color:var(--muted);opacity:.75}

/* ══════════════════════════════════════════════════════════
   PITFALLS, severity is carried by colour and a left edge,
   so the page can be triaged at a glance.
   ══════════════════════════════════════════════════════════ */
.sev-key{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s5);
  padding:var(--s3) var(--s4);background:var(--bg2);border:1px solid var(--bd2);border-radius:var(--r4)}
.sev-key em{font-style:normal;font-size:var(--t-xs);color:var(--muted);margin-right:var(--s3)}
.sev-tag{font-size:var(--t-xs);letter-spacing:0.11em;text-transform:uppercase;padding:4px 11px;
  border-radius:20px;border:1px solid}
.sev-tag.sev-awkward{color:var(--gold-dim);border-color:var(--bd);background:var(--glow)}
.sev-tag.sev-offensive{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 11%,transparent)}
.sev-tag.sev-legal{color:var(--no);border-color:rgba(239,83,80,0.45);background:rgba(239,83,80,0.11)}
.rule-card{background:var(--bg3);border:1px solid var(--bd2);border-left:3px solid var(--bd);
  border-radius:var(--r4);padding:var(--s4) var(--s4) var(--s4) var(--s5);transition:all .2s}
.rule-card:hover{border-color:var(--bd);transform:translateY(-2px)}
.rule-card.sev-offensive{border-left-color:var(--warn)}
.rule-card.sev-legal{border-left-color:var(--no)}
.rule-card.sev-awkward{border-left-color:var(--gold-dim)}
.rule-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.rule-ar{font-family:var(--arabic);font-size:calc(1.5rem * var(--arscale));color:var(--gold);direction:rtl}
.rule-t{font-family:var(--serif);font-size:var(--t-lg);color:var(--sand);margin-bottom:2px;line-height:1.25}
.rule-tr{font-family:var(--serif);font-style:italic;color:var(--gold-dim);font-size:var(--t-sm);margin-bottom:var(--s2)}
.rule-what{font-size:var(--t-base);color:var(--sand);line-height:1.7;margin-bottom:var(--s3)}
.rule-why,.rule-do{border-top:1px solid var(--bd2);padding-top:var(--s3);margin-bottom:var(--s2)}
.rule-why b,.rule-do b{display:block;font-size:var(--t-xs);letter-spacing:0.14em;text-transform:uppercase;
  color:var(--gold-dim);margin-bottom:5px}
.rule-why p,.rule-do p{font-size:var(--t-sm);color:var(--sand2);line-height:1.75}
.rule-do{border-top-color:var(--bd)}
.rule-do b{color:var(--ok)}

/* ══════════════════════════════════════════════════════════
   ETIQUETTE, a numbered manual, read top to bottom
   ══════════════════════════════════════════════════════════ */
.et-list{display:flex;flex-direction:column;gap:var(--s3);max-width:var(--wide)}
.et-item{display:grid;grid-template-columns:72px 1fr;background:var(--bg3);border:1px solid var(--bd2);
  border-radius:var(--r4);overflow:hidden;transition:border-color .2s}
.et-item:hover{border-color:var(--bd)}
.et-num{font-family:var(--serif);font-size:var(--t-xl);color:var(--gold-dim);display:flex;
  align-items:flex-start;justify-content:center;padding-top:var(--s4);
  background:rgba(0,0,0,0.14);border-right:1px solid var(--bd2)}
.et-body{padding:var(--s4) var(--s5)}
.et-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
  flex-wrap:wrap;margin-bottom:var(--s2)}
.et-t{font-family:var(--serif);font-size:var(--t-lg);color:var(--sand);line-height:1.25}
.et-ar{font-family:var(--arabic);font-size:calc(1.5rem * var(--arscale));color:var(--gold);
  direction:rtl;text-align:right;display:flex;flex-direction:column;gap:2px}
.et-ar em{direction:ltr;font-family:var(--serif);font-size:var(--t-sm);color:var(--gold-dim);font-style:italic}
.et-text{font-size:var(--t-base);color:var(--sand2);line-height:1.8;max-width:64ch}
.et-tip{display:flex;gap:var(--s3);margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--bd2)}
.et-tip span{font-size:var(--t-xs);letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);
  flex-shrink:0;padding-top:2px}
.et-tip p{font-size:var(--t-sm);color:var(--sand2);line-height:1.75;font-style:italic;max-width:60ch}
@media(max-width:760px){.et-item{grid-template-columns:1fr}
  .et-num{border-right:none;border-bottom:1px solid var(--bd2);padding:var(--s2) var(--s4);
    justify-content:flex-start;font-size:var(--t-lg)}
  .et-body{padding:var(--s4)}}

/* ══════════════════════════════════════════════════════════
   ACCESSIBILITY
   ══════════════════════════════════════════════════════════ */
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--gold);color:var(--ink);
  padding:12px 22px;font-family:var(--ui);font-size:var(--t-sm);border-radius:0 0 var(--r4) 0;text-decoration:none}
.skip:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
main:focus{outline:none}
main:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
.nav[aria-current="page"]{color:var(--gold);border-left-color:var(--gold);background:var(--glow)}
h1.logo{display:flex;flex-direction:column;gap:4px;font-weight:400;font-size:inherit;
  padding:0 20px var(--s3);border-bottom:1px solid var(--bd);margin-bottom:var(--s2)}
h1.logo .logo-ar{font-family:var(--arabic);font-size:1.8rem;color:var(--gold);line-height:1.1}
h1.logo .logo-en{font-size:var(--t-xs);letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);line-height:1.4}

/* WCAG 1.4.12, layout must survive user spacing overrides.
   No fixed heights on text containers, no clipping, everything min-content driven. */
.pill,.btn,.sb,.tag,.sev-tag,.spec-flag,.track,.stop{height:auto;min-height:0;overflow:visible}
.rule-card,.et-item,.card,.cut,.box,.leaf,.specimen,.chapter{overflow:visible}
.cut{clip-path:none;border-radius:var(--r4)}
.cut::after{display:none}
/* the cut corner is decorative, reinstate it only where it cannot clip text */
.cut{position:relative}
.cut::before{content:'';position:absolute;top:0;left:0;width:16px;height:16px;
  border-top:1px solid var(--bd);border-left:1px solid var(--bd);pointer-events:none;opacity:.9}

/* Larger hit targets. WCAG 2.5.8 asks for 24px minimum */
.pill,.sb,.tick,.sw{min-height:26px}
.tick{width:22px;height:22px}
.qopt,.qo,.ex-opt{min-height:44px}

/* Low-vision comfort control: user-adjustable line spacing */
body{line-height:calc(1.65 * var(--lead,1))}
.psub,.c-b,.rule-what,.rule-why p,.rule-do p,.et-text,.et-tip p,.chap-text,.tl-b,.verse-n,.note{
  line-height:calc(1.8 * var(--lead,1))}

/* Forced-colors (Windows High Contrast) */
@media (forced-colors: active){
  .cut::before,.frieze,.deco{display:none}
  .nav[aria-current="page"]{border-left-color:Highlight}
  .pill.on,.sb.on,.btn-ok.on,.btn-no.on{border-color:Highlight;color:Highlight}
}

/* ══════════════════════════════════════════════════════════
   CENTRE-FIRST. Reading columns are centred within the page,
   never flush left against a wide empty right-hand side.
   ══════════════════════════════════════════════════════════ */
.centre,.centre-head{text-align:center;margin-inline:auto}
h2.pt.centre{text-align:center}
p.psub.centre{text-align:center;margin-inline:auto}
.row.centred{justify-content:center}
.orn{justify-content:center}
.tl-b,.chap-text{margin-inline:auto}
.num-wrap{max-width:720px;margin-inline:auto;text-align:center}
.num-wrap .inrow{margin-inline:auto}

/* ══ TOP BAR, one fold-out panel instead of a wall of controls ══ */
.topbar{max-width:var(--content);margin:0 auto var(--s5);display:flex;justify-content:center}
.rd{width:100%;max-width:760px}
.rd-sum{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:11px 20px;border:1px solid var(--bd2);border-radius:var(--r4);background:var(--bg3);
  color:var(--muted);font-size:var(--t-xs);letter-spacing:0.16em;text-transform:uppercase;transition:all .16s}
.rd-sum::-webkit-details-marker{display:none}
.rd-sum:hover{color:var(--gold);border-color:var(--bd)}
.rd[open] .rd-sum{border-radius:var(--r4) var(--r4) 0 0;color:var(--gold);border-color:var(--bd)}
.rd-ico{font-size:1rem}
.rd-body{border:1px solid var(--bd);border-top:none;border-radius:0 0 var(--r4) var(--r4);
  background:var(--bg2);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.rd-row{display:grid;grid-template-columns:120px 1fr;gap:var(--s3);align-items:center}
.rd-l{font-size:var(--t-xs);letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-dim);text-align:right}
.stepper{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.sv{min-width:56px;text-align:center;font-size:var(--t-sm);color:var(--sand)}
.sb.ghost{opacity:.65}
@media(max-width:620px){.rd-row{grid-template-columns:1fr}.rd-l{text-align:left}}

/* Theme buttons: readable labels, not cryptic half-circles */
.sw-set{display:flex;gap:6px;flex-wrap:wrap}
.sw{display:flex;align-items:center;gap:7px;width:auto;height:auto;border-radius:var(--r4);
  padding:7px 13px;background:var(--bg3);border:1px solid var(--bd2);color:var(--muted);
  font-family:var(--ui);font-size:var(--t-xs);cursor:pointer;transition:all .16s}
.sw i{width:13px;height:13px;border-radius:50%;display:block;border:1px solid rgba(255,255,255,0.18)}
.sw[data-th="sand"] i{background:linear-gradient(135deg,#0D0B08 50%,#C8922A 50%)}
.sw[data-th="contrast"] i{background:linear-gradient(135deg,#000 50%,#FFD24A 50%)}
.sw[data-th="paper"] i{background:linear-gradient(135deg,#F4F0E6 50%,#8A5A1C 50%)}
.sw[data-th="night"] i{background:linear-gradient(135deg,#080B12 50%,#7FA8D9 50%)}
.sw[data-th="oasis"] i{background:linear-gradient(135deg,#07110D 50%,#5FB88A 50%)}
.sw:hover{color:var(--sand);border-color:var(--bd)}
.sw.on{border-color:var(--gold);color:var(--gold);background:var(--glow);transform:none}

/* ══ Two clearly distinct filter bands ══ */
.band-topic,.band-view{display:flex;align-items:center;gap:var(--s3);justify-content:center;
  padding:var(--s3) var(--s4);border-radius:var(--r4);margin-bottom:var(--s2);flex-wrap:wrap}
.band-topic{background:var(--bg2);border:1px solid var(--bd2)}
.band-view{background:transparent;border:1px dashed var(--bd2);margin-bottom:var(--s5)}
.band-l{font-size:var(--t-xs);letter-spacing:0.16em;text-transform:uppercase;color:var(--gold-dim);flex-shrink:0}
.band-topic .pill{background:var(--bg3);border-color:var(--bd2)}
.band-topic .pill.on{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.band-view .pill{background:transparent;font-style:italic}
.band-view .pill.on{background:var(--glow);color:var(--gold);border-color:var(--gold);font-style:normal}
.band-view .pill:disabled{opacity:.4;cursor:default}

/* ══ Even card rows, no orphan on its own line ══ */
#pf-grid .grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
#ex-grid .grid,#nb .grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.rule-card,.et-item,#ex-grid .cut{text-align:center}
.rule-card .rule-head{justify-content:center}
.rule-why,.rule-do,.rule-what,.et-text,.et-tip p{text-align:center;margin-inline:auto}
.et-tip{flex-direction:column;align-items:center;gap:var(--s1)}
.et-head{justify-content:center}
.et-item{grid-template-columns:1fr}
.et-num{border-right:none;border-bottom:1px solid var(--bd2);padding:var(--s2);justify-content:center;
  font-size:var(--t-lg)}
.rm-days{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s3)}

/* ══ AI panel: both columns start at the same y ══ */
.ai-layout{align-items:stretch}
.ai-side,.ai-main{display:flex;flex-direction:column}
.ai-side > *:first-child,.ai-main > *:first-child{margin-top:0}
.ai-main .chat{flex:1;margin-top:0}

/* ══ Alphabet: centred, no false stroke overlay ══ */
.trace{grid-template-columns:1fr;justify-items:center;text-align:center;gap:var(--s5)}
.trace-pane{display:flex;flex-direction:column;align-items:center}
.trace-svg{max-width:280px}
.trace-cap{font-size:var(--t-sm);color:var(--muted);margin-top:var(--s3);line-height:1.7}
.trace-info{max-width:640px;text-align:center}
.trace-glyph{font-family:var(--arabic);font-size:calc(4.2rem * var(--arscale));color:var(--gold);line-height:1.1}
.trace-sound{font-size:var(--t-md);color:var(--sand2);line-height:1.75;margin-bottom:var(--s4)}
.forms{display:grid;grid-template-columns:repeat(var(--form-cols,4),minmax(0,1fr));gap:var(--s2);max-width:560px;margin:0 auto}
.form-cell{background:var(--bg2);border:1px solid var(--bd2);border-radius:var(--r4);padding:var(--s3) var(--s2)}
.form-ar{font-family:var(--arabic);font-size:calc(1.9rem * var(--arscale));color:var(--gold)}
.form-l{font-size:.72rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);margin-top:var(--s1)}
.trace-nonjoin{font-size:var(--t-sm);color:var(--gold-dim);margin-top:var(--s3);max-width:52ch;margin-inline:auto}

/* ══════════════════════════════════════════════════════════
   TRIBES
   ══════════════════════════════════════════════════════════ */
.tr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s3);
  max-width:var(--wide);margin-inline:auto}
.tr-card{display:flex;flex-direction:column;align-items:center;gap:var(--s1);text-align:center;
  background:var(--bg3);border:1px solid var(--bd2);border-radius:var(--r4);padding:var(--s4) var(--s3);
  cursor:pointer;font-family:var(--ui);transition:all .2s}
.tr-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.tr-card.open{border-color:var(--gold);background:var(--glow)}
.tr-ar{font-family:var(--arabic);font-size:calc(1.9rem * var(--arscale));color:var(--gold);line-height:1.5}
.tr-n{font-family:var(--serif);font-size:var(--t-lg);color:var(--sand)}
.tr-br{font-size:var(--t-xs);letter-spacing:0.12em;text-transform:uppercase;color:var(--gold-dim)}
.tr-reg{font-size:var(--t-xs);color:var(--muted);line-height:1.5}
.tr-open{max-width:var(--wide);margin:var(--s5) auto 0;background:linear-gradient(168deg,var(--bg3),var(--bg2));
  border:1px solid var(--gold);border-radius:var(--r6);padding:var(--s6) var(--s5);text-align:center;
  animation:openUp .35s cubic-bezier(.2,.8,.3,1) both}
@keyframes openUp{from{opacity:0;transform:translateY(-10px) scale(.99)}to{opacity:1;transform:none}}
.tr-open-ar{font-family:var(--arabic);font-size:calc(3.4rem * var(--arscale));color:var(--gold);
  line-height:1.4;text-shadow:0 0 44px var(--glow)}
.tr-open-n{font-family:var(--serif);font-size:var(--t-2xl);color:var(--sand);margin:var(--s2) 0 var(--s1);line-height:1.1}
.tr-open-meta{font-size:var(--t-xs);letter-spacing:0.16em;text-transform:uppercase;color:var(--gold-dim)}
.tr-open-sum{font-size:var(--t-lg);color:var(--sand);line-height:1.65;max-width:58ch;margin:var(--s4) auto 0;
  font-family:var(--serif)}
.tr-open-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s4);
  margin-top:var(--s6);text-align:left}
.tr-open-grid section{background:var(--bg2);border:1px solid var(--bd2);border-radius:var(--r4);padding:var(--s4)}
.tr-open-grid h4{font-size:var(--t-xs);letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);
  margin-bottom:var(--s2);font-weight:400}
.tr-open-grid p{font-size:var(--t-sm);color:var(--sand2);line-height:1.85}
.tr-know{border-color:var(--bd)!important;background:var(--glow)!important}

/* ══ Dialect expanded card ══ */
.dl-open{max-width:var(--wide);margin:var(--s5) auto 0;background:linear-gradient(168deg,var(--bg3),var(--bg2));
  border:1px solid var(--gold);border-radius:var(--r6);padding:var(--s6) var(--s5);text-align:center;
  animation:openUp .35s cubic-bezier(.2,.8,.3,1) both}
.dl-open-name{font-family:var(--serif);font-size:var(--t-2xl);color:var(--sand);line-height:1.1}
.dl-open-meta{font-size:var(--t-xs);letter-spacing:0.16em;text-transform:uppercase;color:var(--gold-dim);margin-top:var(--s2)}
.dl-open-phrase{margin:var(--s6) 0}
.dl-open-ar{font-family:var(--arabic);font-size:calc(2.6rem * var(--arscale));color:var(--gold);
  line-height:1.7;text-shadow:0 0 44px var(--glow)}
.dl-open-tr{font-family:var(--serif);font-style:italic;font-size:var(--t-md);color:var(--sand2);margin-top:var(--s2)}
.dl-open-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s4);text-align:left}
.dl-open-grid section{background:var(--bg2);border:1px solid var(--bd2);border-radius:var(--r4);padding:var(--s4)}
.dl-open-grid h4{font-size:var(--t-xs);letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);
  margin-bottom:var(--s2);font-weight:400}
.dl-open-grid p{font-size:var(--t-sm);color:var(--sand2);line-height:1.85}

/* ══ Map readability ══ */
.map-lbl{font-size:3.4px;fill:#1a1408;opacity:.85;font-weight:600}
.map-lbl-sm{font-size:3px;fill:var(--sand)}
.bar-row{transition:background .15s}
.bar-row:hover{background:var(--glow)}
#map-bars{max-width:840px;margin-inline:auto}

/* ══════════════════════════════════════════════════════════
   v9 CORRECTIONS
   ══════════════════════════════════════════════════════════ */

/* Larger default reading size across the board. 17px was still too small
   in practice at these line lengths. */
html{font-size:calc(18.5px * var(--fscale))}
:root{--t-xs:0.8rem;--t-sm:0.92rem;--t-base:1.05rem;--t-md:1.18rem}

/* Readability control docks top right instead of spanning the page */
.topbar{position:sticky;top:0;z-index:80;max-width:var(--content);margin:0 auto var(--s4);
  display:flex;justify-content:flex-end;pointer-events:none}
.rd{width:auto;max-width:420px;pointer-events:auto}
.rd-sum{justify-content:flex-end;background:var(--bg2);white-space:normal}
.rd[open]{box-shadow:0 18px 44px rgba(0,0,0,0.5)}
.rd-body{position:absolute;right:0;width:420px;max-width:88vw;z-index:90;background:var(--bg2)}
.rd{position:relative}
@media(max-width:680px){.rd-body{width:min(92vw,420px)}}

/* The stray gold rule at the top of the shell */
.shell > aside{border-top:none}
.shell{border-top:none}
main{border-top:none}
body{border-top:none}

/* Sentence builder: room to breathe */
.sb-wrap{max-width:920px}
.sb-target{padding:10px 20px;min-height:102px}
.sb-slots{gap:var(--s3);margin-bottom:var(--s5)}
.slot{min-width:120px;min-height:74px;padding:var(--s2) var(--s4)}
.sb-bank{gap:var(--s3);margin-bottom:var(--s5)}
.tok{padding:var(--s3) var(--s4);min-width:120px}
.sb-goal{margin-bottom:var(--s5);font-size:var(--t-lg)}

/* Footer scene: the animal must never be clipped by a dune */
.deco{height:150px}
.deco svg{overflow:visible}

/* Equal, centred card rows everywhere. Fixed column counts stop the orphan row. */
#pf-grid .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
#ex-grid .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
#nb .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.tr-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.rm-days{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1500px){#pf-grid .grid,#ex-grid .grid,#nb .grid,.tr-grid,.rm-days{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){#pf-grid .grid,#ex-grid .grid,#nb .grid,.tr-grid,.rm-days{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){#pf-grid .grid,#ex-grid .grid,#nb .grid,.tr-grid,.rm-days{grid-template-columns:1fr}}

/* Etiquette: proper centred column, numbers inline not stacked */
.et-list{max-width:840px;margin-inline:auto}
.et-item{grid-template-columns:1fr;text-align:center;padding:var(--s5) var(--s5) var(--s4)}
.et-num{display:none}
.et-item::before{content:attr(data-n);display:block;font-family:var(--serif);
  font-size:var(--t-lg);color:var(--gold-dim);margin-bottom:var(--s2);letter-spacing:.2em}
.et-body{padding:0}
.et-head{flex-direction:column;align-items:center;gap:var(--s1)}
.et-text{max-width:60ch;margin-inline:auto}

/* Expressions rebuilt as a compact, scannable format */
.ex-sec{max-width:var(--wide);margin:0 auto var(--s7)}
.ex-card{background:var(--bg3);border:1px solid var(--bd2);border-radius:var(--r4);
  padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);text-align:center;
  transition:border-color .2s,transform .2s;min-height:0}
.ex-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.ex-card .c-ar{font-size:calc(1.7rem * var(--arscale));margin:0}
.ex-card .c-tr{font-size:var(--t-base);margin:0;color:var(--sand)}
.ex-card .c-lit{font-size:var(--t-xs);margin:0}
.ex-card .c-b{font-size:var(--t-sm);flex:1}
.ex-acts{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin-top:auto;padding-top:var(--s2)}
.ex-acts .pill{padding:5px 10px}

/* Situation coach: grouped presets */
.coach-groups{display:flex;flex-direction:column;gap:var(--s4)}
.coach-g h4{font-size:var(--t-xs);letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);
  margin-bottom:var(--s2);font-weight:400;overflow-wrap:anywhere;hyphens:auto}
.coach-g .pill{width:100%;text-align:left;margin-bottom:4px}

/* Islamic art */
.art-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--s4);
  max-width:var(--wide);margin-inline:auto}
.art-card{background:var(--bg3);border:1px solid var(--bd2);border-radius:var(--r6);overflow:hidden;
  transition:border-color .2s,transform .2s;text-align:center}
.art-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.art-fig{background:radial-gradient(ellipse at 50% 45%,var(--glow),transparent 72%);
  padding:var(--s5) var(--s3);border-bottom:1px solid var(--bd2)}
.art-fig svg{width:100%;max-width:230px;height:auto}
.art-body{padding:var(--s4) var(--s5) var(--s5)}
.art-t{font-family:var(--serif);font-size:var(--t-lg);color:var(--sand);margin-bottom:var(--s1)}
.art-ar{font-family:var(--arabic);font-size:calc(1.4rem * var(--arscale));color:var(--gold);margin-bottom:var(--s2)}
.art-b{font-size:var(--t-sm);color:var(--sand2);line-height:1.8;text-align:left}
.art-math{background:var(--bg2);border:1px solid var(--bd2);border-radius:var(--r4);
  padding:var(--s3);margin-top:var(--s3);font-size:var(--t-xs);color:var(--gold-dim);text-align:left}
.art-math b{color:var(--gold);display:block;margin-bottom:4px}

/* ══════════════════════════════════════════════════════════
   v10 CORRECTIONS
   ══════════════════════════════════════════════════════════ */

/* Readability panel stays at the top of the page, it no longer follows the scroll */
.topbar{position:static}

/* Text was clipping at descenders and in the Arabic line. Give glyphs room. */
.w-ar,.c-ar,.tr-ar,.verse,.spec-word,.fq-a,.dl-open-ar,.tr-open-ar,.trace-glyph,.qz-a{
  line-height:1.9;padding-block:0.12em;overflow:visible}
.al-l,.form-ar{line-height:1.7;padding-block:0.1em}
h2.pt,.tr-open-n,.dl-open-name,.chap-title,.art-t,.rule-t,.et-t{
  line-height:1.28;padding-bottom:0.08em;overflow:visible}

/* Pronunciation: the stress pattern and the sound-alikes are two different things
   and were reading as one run-on sentence. */
.w-ph{display:flex;flex-direction:column;gap:var(--s2);white-space:normal}
.ph-stress{font-family:var(--ui);font-size:var(--t-md);color:var(--sand);letter-spacing:0.06em}
.ph-like{font-size:var(--t-sm);color:var(--sand2);font-style:italic;line-height:1.7;
  padding-top:var(--s2);border-top:1px dashed var(--bd2);max-width:44ch;margin-inline:auto}

/* Sentence builder */
.sb-built{display:flex;gap:var(--s4);flex-wrap:wrap;justify-content:center;direction:rtl}
.sb-bw{display:flex;flex-direction:column;align-items:center;gap:2px}
.sb-bw b{font-family:var(--arabic);font-size:calc(1.9rem * var(--arscale));color:var(--gold);
  font-weight:400;line-height:1.6}
.sb-bw em{direction:ltr;font-family:var(--serif);font-style:italic;font-size:var(--t-sm);color:var(--sand2)}
.sb-empty{color:var(--muted);font-size:var(--t-sm);direction:ltr;unicode-bidi:isolate}
.sb-dirhint{font-size:var(--t-xs);color:var(--gold-dim);margin-bottom:var(--s3);text-align:center;direction:ltr;unicode-bidi:isolate}
.sb-slotrow{display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:center;direction:rtl}
.slot{position:relative}
.slot.over{border-color:var(--gold);background:var(--glow);transform:scale(1.04)}
.slot-n{color:var(--muted);font-size:var(--t-sm);direction:ltr}
.tok{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:grab}
.tok:active{cursor:grabbing}
.tok-ar{font-family:var(--arabic);font-size:calc(1.7rem * var(--arscale));line-height:1.7}
.tok-tr{direction:ltr;font-family:var(--serif);font-style:italic;font-size:var(--t-sm);color:var(--gold-dim)}
.tok-gl{direction:ltr;font-size:var(--t-xs);color:var(--muted)}
.sb-ok-tr{font-family:var(--serif);font-style:italic;font-size:var(--t-lg);color:var(--sand)}
.sb-ok-en{font-size:var(--t-base);margin-top:var(--s1)}
.sb-ok-note{font-size:var(--t-sm);opacity:.85;margin-top:var(--s2)}
.sb-ok-ctx{font-size:var(--t-sm);color:var(--sand2);margin-top:var(--s3);padding-top:var(--s3);
  border-top:1px solid var(--bd2);max-width:56ch;margin-inline:auto;line-height:1.75}

/* Expressions: readable columns, not squeezed square boxes */
#ex-grid .grid{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--s4)}
.ex-card{padding:var(--s5);gap:var(--s3);align-items:center}
.ex-card .c-ar{font-size:calc(2rem * var(--arscale));line-height:1.8}
.ex-card .c-b{max-width:42ch;margin-inline:auto}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){#ex-grid .grid{grid-template-columns:1fr}}

/* Daily plan */
.rm-hero{text-align:center;max-width:820px;margin-inline:auto}
.rm-sub{margin-inline:auto}
.rm-track{max-width:820px;margin-inline:auto}
.rm-days{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--s4);
  max-width:var(--wide);margin-inline:auto}
.day{text-align:left}
.dw{gap:var(--s3);padding:var(--s2) 0;align-items:flex-start;flex-wrap:wrap}
.dw-a{min-width:auto}
.dw-t{min-width:auto}
.dw-e{flex:1 1 100%;padding-left:calc(14px + var(--s3));font-size:var(--t-sm)}
.rm .note{margin-inline:auto}

/* Filter rows centred on every page */
#ex-filters,#pf-filters,#et-filters,#nb-filters,#tr-filters,#art-filters,#dl-views,#fc-cats,#qz-cats{
  justify-content:center}
.hist-tracks,.tracks{justify-content:center}

/* Sentences should break as whole clauses, not leave two words stranded */
p.psub,.tl-b,.chap-text,.rule-what,.et-text,.art-b,.verse-n,.note,.tr-open-grid p,.dl-open-grid p{
  text-wrap:pretty;hyphens:none}
h2.pt,.chap-title,.tr-open-n,.art-t,.rule-t,.et-t,.dl-open-name{text-wrap:balance}

/* Map full width */
.map-wrap{grid-template-columns:1fr;gap:var(--s4)}
.mapbox{padding:var(--s3)}
#map-svg{width:100%;height:auto;min-height:420px}
.map-side{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){.map-side{grid-template-columns:1fr}}
.map-lbl{font-size:3.1px}
.map-lbl-sm{font-size:2.9px}

/* ══ Commons image strips ══ */
.img-slot{margin-top:var(--s3)}
.img-loading{font-size:var(--t-xs);color:var(--muted);padding:var(--s3);text-align:center}

/* v12: primary study area and consistent page alignment */
.panel.on{width:100%;text-align:center}
.panel.on > *{margin-inline:auto}
.panel.on .eyebrow{max-width:var(--wide)}
.panel.on .row{justify-content:center}
.rm{margin-inline:auto}

/* Both faces share one grid cell, but still contribute their full content height.
   This removes the card's inner scrollbar and prevents large Arabic text clipping. */
.fcw{width:min(100%,1100px);max-width:1100px}
.fc{display:grid;min-height:0}
.fcf{
  position:relative;
  inset:auto;
  grid-area:1 / 1;
  min-height:clamp(380px,56svh,620px);
  overflow:visible;
  padding:clamp(68px,9vh,104px) clamp(24px,5vw,72px);
  gap:clamp(10px,1.8vh,22px)
}
.w-ar{max-width:100%;padding-block:.25em}

.sb-instruction{
  max-width:68ch;
  margin:0 auto var(--s4);
  color:var(--sand2);
  font-size:var(--t-base);
  line-height:1.75;
  text-align:center
}

@media(max-width:680px){
  .fcf{min-height:clamp(360px,58svh,520px);padding:58px 18px}
  .fc-cat,.fc-n{top:14px}
  .fc-st,.fc-h{bottom:14px}
}
.img-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s2)}
.img-fig{margin:0;background:var(--bg2);border:1px solid var(--bd2);border-radius:var(--r4);overflow:hidden}
.img-fig img{width:100%;height:120px;object-fit:cover;display:block;transition:transform .3s}
.img-fig:hover img{transform:scale(1.05)}
.img-fig figcaption{padding:var(--s2);font-size:var(--t-xs);color:var(--sand2);line-height:1.45;text-align:left}
.img-fig figcaption span{display:block;color:var(--muted);margin-top:3px;font-size:0.72rem}

/* ══ Dialect word lists ══ */
.dl-words{margin-top:var(--s6)}
.wordgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s2)}
.wordcell{background:var(--bg2);border:1px solid var(--bd2);border-radius:var(--r4);
  padding:var(--s3);display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center}
.wc-ar{font-family:var(--arabic);font-size:calc(1.5rem * var(--arscale));color:var(--gold);line-height:1.7}
.wc-tr{font-family:var(--serif);font-style:italic;font-size:var(--t-sm);color:var(--sand)}
.wc-en{font-size:var(--t-xs);color:var(--muted)}

/* ══ Calligraphy craft ══ */
.craft{margin:var(--s3) 0;display:flex;flex-direction:column;gap:var(--s3);text-align:left}
.craft dt{font-size:var(--t-xs);letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);margin-bottom:3px}
.craft dd{margin:0;font-size:var(--t-sm);color:var(--sand2);line-height:1.8}

/* ══ Tribes map ══ */
.tribemap{background:var(--bg3);border:1px solid var(--bd);border-radius:var(--r6);
  padding:var(--s4);margin-bottom:var(--s5);max-width:var(--wide);margin-inline:auto}
.tribemap svg{width:100%;height:auto;display:block}
.tr-blob{cursor:pointer;transition:opacity .2s,filter .2s}
.tr-blob:hover,.tr-blob.hi{opacity:.95;filter:drop-shadow(0 0 6px var(--glow))}
.tr-blob-l{font-family:var(--ui);font-size:3.4px;fill:var(--sand);pointer-events:none}
.tr-era{font-family:var(--ui);font-size:2.6px;fill:var(--gold-dim);pointer-events:none}
.tribemap-key{display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:center;
  margin-top:var(--s3);font-size:var(--t-xs);color:var(--muted)}

/* ══════════════════════════════════════════════════════════
   v12.1: geometric centring and regional discovery maps
   ══════════════════════════════════════════════════════════ */
.panel.on > :where(#nb,#ex-grid,#et-grid,#pf-grid,#art-grid,#tr-grid,#dl-grid,#dl-detail,#cal,#po,#bk,
  .ai-layout,.sb-wrap,.qz,.qz-o,.rm,.map-wrap,.sev-key,.tracks,.spine,.chapter,.al-grid,.trace){
  width:100%;margin-inline:auto
}
.panel.on > :where(#nb,#ex-grid,#et-grid,#pf-grid,#art-grid,#tr-grid,#dl-grid,#dl-detail,#cal,#po,#bk,
  .ai-layout,.sb-wrap,.rm,.al-grid,.trace){max-width:var(--wide)}
.al-grid{margin-inline:auto}
.ai-layout{margin-inline:auto}
.rm{max-width:var(--wide)}
.rm-hero,.rm-track{max-width:none}
.data-note{max-width:70ch;margin:var(--s3) auto 0;color:var(--muted);font-size:var(--t-xs);line-height:1.7;text-align:center}

/* Expressions are full-width category lanes, never columns of categories. */
.ex-sec{width:100%;margin:0 auto var(--s7);padding-top:var(--s2)}
.ex-head{display:flex;align-items:center;justify-content:center;gap:var(--s3);margin-bottom:var(--s4)}
.ex-head::before,.ex-head::after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--bd),transparent)}
.ex-head h3{font-size:var(--t-sm);font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);text-wrap:balance}
.ex-head > span{font-size:var(--t-xs);color:var(--gold-dim);letter-spacing:.16em;white-space:nowrap}
.ex-row{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:stretch;justify-content:center}
.ex-row > .ex-card{flex:1 1 calc(var(--ex-basis) - var(--s4));min-width:250px}
.ex-card{min-width:0;padding:var(--s5);align-items:center}
.ex-card .c-lit{display:flex;flex-direction:column;gap:3px;color:var(--gold-dim)}
.ex-card .c-lit span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ex-card .c-b{max-width:44ch;line-height:1.75;text-wrap:pretty}
.ex-acts{width:100%;align-items:center}
@media(max-width:700px){.ex-row{gap:var(--s3)}.ex-row > .ex-card{flex-basis:100%}.ex-card{padding:var(--s4)}}

/* Tribe atlas: one focused viewport per region with numbered, linked ranges. */
.tribemap-atlas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);width:100%;margin-inline:auto}
.tribemap-atlas > .tribemap:only-child{grid-column:1/-1;max-width:900px;justify-self:center;width:100%}
.tribemap{margin:0;max-width:none;padding:var(--s3);overflow:hidden}
.tribemap-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s2)}
.tribemap-head h3{font-family:var(--serif);font-size:var(--t-lg);font-weight:600;color:var(--sand)}
.tribemap-head span{font-size:var(--t-xs);color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.tribemap svg{min-height:220px;background:var(--bg2);border:1px solid var(--bd2);border-radius:var(--r4)}
.tr-pin{fill:var(--bg);stroke:var(--sand);stroke-width:.45;vector-effect:non-scaling-stroke}
.tr-code{font-family:var(--ui);font-size:2.4px;font-weight:700;fill:var(--sand);pointer-events:none}
.tribemap-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:var(--s2)}
.tribemap-item{display:grid;grid-template-columns:25px 1fr auto;align-items:center;gap:7px;border:1px solid var(--bd2);border-radius:var(--r2);
  background:transparent;color:var(--sand2);font-family:var(--ui);font-size:var(--t-xs);padding:7px 8px;text-align:left;cursor:pointer}
.tribemap-item:hover,.tribemap-item.on{border-color:var(--gold);background:var(--glow);color:var(--sand)}
.tribemap-item b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--bg2);color:var(--gold);font-size:.7rem}
.tribemap-item small.tr-era{position:static;font-size:.68rem;fill:unset;color:var(--muted);pointer-events:auto;text-align:right}
.tribemap-key{max-width:82ch;margin:var(--s4) auto var(--s5);line-height:1.7}
.tr-card.hi{border-color:var(--gold);background:var(--glow)}
@media(max-width:1050px){.tribemap-atlas{grid-template-columns:1fr}.tribemap-atlas > .tribemap:only-child{grid-column:auto}}
@media(max-width:620px){.tribemap-list{grid-template-columns:1fr}.tribemap svg{min-height:170px}}

/* Atlas overview plus readable regional insets. */
.map-wrap{max-width:var(--content);width:100%;margin-inline:auto}
.mapbox{width:100%;overflow:visible}
#map-svg{min-height:0;max-height:620px;margin-inline:auto}
.map-insets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin-top:var(--s4)}
.map-inset{background:var(--bg2);border:1px solid var(--bd2);border-radius:var(--r4);padding:var(--s3);overflow:hidden}
.map-inset h3{font-family:var(--serif);font-size:var(--t-lg);font-weight:600;color:var(--sand);margin-bottom:var(--s2);text-align:center}
.map-inset svg{display:block;width:100%;height:auto;min-height:220px;background:var(--bg3);border-radius:var(--r2)}
.map-lbl,.map-lbl-sm{fill:var(--sand);opacity:1;font-weight:600;paint-order:stroke;stroke:var(--bg);stroke-width:1.2px;stroke-linejoin:round}
.map-inset .map-lbl{font-size:1.8px;stroke-width:.75px}
.map-inset .map-lbl-sm{font-size:1.45px;stroke-width:.65px}
.map-inset-0 .map-lbl{font-size:2.6px;stroke-width:.9px}
.map-inset-0 .map-lbl-sm{font-size:2.2px;stroke-width:.8px}
.callout{cursor:pointer;outline:none}
.callout line{stroke:var(--gold-dim);stroke-width:.35;vector-effect:non-scaling-stroke}
.callout circle{fill:var(--gold)}
.callout:hover .map-lbl-sm,.callout.hi .map-lbl-sm,.callout:focus-visible .map-lbl-sm{fill:var(--gold2)}
.callout:hover line,.callout.hi line{stroke:var(--gold2)}
.map-caveat{max-width:82ch;margin:var(--s3) auto 0;color:var(--muted);font-size:var(--t-xs);line-height:1.65;text-align:center}
.map-side{margin-inline:auto;width:100%}
.map-prompt{display:grid;place-items:center;min-height:110px;color:var(--muted);font-size:var(--t-sm);text-align:center}
.country-head{display:flex;justify-content:center;align-items:center;gap:var(--s6);flex-wrap:wrap;text-align:center}
.country-name{font-family:var(--serif);font-size:var(--t-xl);color:var(--sand)}
.country-ar{font-family:var(--arabic);font-size:calc(1.7rem * var(--arscale));color:var(--gold);line-height:1.6}
.country-figure{font-family:var(--serif);font-size:var(--t-xl);color:var(--gold);line-height:1}
.country-status{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.country-reason{max-width:68ch;margin:var(--s3) auto 0;color:var(--sand2);font-size:var(--t-sm);line-height:1.75;text-align:center}
.country-ai{display:block;margin:var(--s4) auto 0}
.atlas-bars{display:flex;flex-direction:column;gap:4px}
.bar-row{display:grid;grid-template-columns:minmax(120px,200px) 1fr 70px;gap:var(--s3);align-items:center;width:100%;border:0;
  background:transparent;color:var(--sand);font-family:var(--ui);font-size:var(--t-sm);text-align:left;cursor:pointer;padding:7px var(--s2)}
.bar-row:hover{background:var(--glow)}
.atlas-wider{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--bd2);text-align:center}
.atlas-wider h3{font-family:var(--serif);font-size:var(--t-lg);color:var(--sand);margin-bottom:var(--s1)}
.atlas-wider p{max-width:70ch;margin:0 auto var(--s3);color:var(--muted);font-size:var(--t-xs);line-height:1.7}
.atlas-wider > div{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s1)}
.atlas-wider .pill small{display:block;font-size:.62rem;letter-spacing:.05em;margin-top:2px}
@media(max-width:900px){.map-insets{grid-template-columns:1fr}.map-inset svg{min-height:190px}}
@media(max-width:620px){.map-inset{padding:var(--s2)}.map-inset svg{min-height:160px}.bar-row{grid-template-columns:100px 1fr 52px;gap:8px;font-size:var(--t-xs)}}

/* ══ PHONE LAYOUT ══
   Keep the app as one document, but give small screens one compact navigation
   control, one scroll container, safe-area spacing, and full-width controls. */
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
  html{scroll-padding-top:72px}
  .shell{display:block;min-width:0}
  .shell > aside{width:100%;display:block;background:var(--bg2)}
  .shell > aside > .nav-groups,.shell > aside > .nav-sep,.shell > aside > .side-foot{display:none}
  .mobile-nav-bar{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s2);
    width:100%;padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}
  .mobile-brand{font-family:var(--arabic);font-size:1.65rem;line-height:1;color:var(--gold)}
  .mobile-nav-select{display:block;width:100%;min-width:0;min-height:44px;padding:8px 38px 8px 12px;
    border:1px solid var(--bd);border-radius:var(--r4);background:var(--bg3);color:var(--sand);
    font-family:var(--ui);font-size:16px;line-height:1.3}
  main{width:100%;height:auto;min-height:calc(100dvh - 61px);overflow:visible;
    padding:14px max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}
  .panel,.panel.on,.panel.on > *,.ai-layout > *,.map-side > *,.grid > *{min-width:0;max-width:100%}
  .panel.on{padding-bottom:max(var(--s6),calc(env(safe-area-inset-bottom) + 32px))}

  .topbar{width:100%;margin-bottom:var(--s4)}
  .rd{width:100%;max-width:none}
  .rd-sum{width:100%;justify-content:center}
  .rd-body{position:static;right:auto;width:100%;max-width:none;padding:var(--s3)}

  button,select,.flink,.al,.tr-card,.cmp-row,.bar-row{touch-action:manipulation}
  .pill,.sb,.btn,.tok,.slot,.tick,.sw{min-height:44px}
  .flink{display:flex;align-items:center;min-height:44px}
  .band-topic,.band-view{gap:8px;padding:var(--s2)}
  .band-l{flex-basis:100%;text-align:center}
  .qz{padding:var(--s5) var(--s3)}
  .sb-target{min-height:102px;padding:10px var(--s3)}
  .ex-card{padding:var(--s4)}
  .art-grid{grid-template-columns:minmax(0,1fr)}
  .folio{overflow:hidden}
  .country-head{gap:var(--s3)}
  #map-svg{min-height:240px}

  .sheet{padding:var(--s3);max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
  .sheet table{min-width:720px}
  .fc-ctl{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .fc-ctl .btn{width:100%;padding:10px 8px}
  .tick{min-width:44px}
  .nb-search{min-height:44px}
  .tribemap-item{min-height:44px}
  .toast{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));
    bottom:max(12px,env(safe-area-inset-bottom));text-align:center}

  .card,.box,.cut,.note,.day,.stat,.rule-card,.et-item,.ex-card,.art-card,.tr-card,
  .dl-open,.tr-open,.chapter,.leaf,.specimen,.msg,.btn,.pill{overflow-wrap:anywhere}

  .today-hero{grid-template-columns:1fr;gap:var(--s4);padding:var(--s5) var(--s4)}
  .today-hero h2{max-width:20ch}
  .today-mark{width:126px;grid-row:1;justify-self:start}
  .today-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .today-grid{grid-template-columns:1fr}
  .today-routes{grid-template-columns:1fr}
}

@media(max-width:560px){
  .inrow{flex-direction:column}
  .inrow .btn{width:100%}
  .tr-open-grid,.dl-open-grid,.wordgrid{grid-template-columns:minmax(0,1fr)}
  .fgrid{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .fcol{min-width:0}
  .today-hero{padding:var(--s4) var(--s3)}
  .today-hero h2{font-size:clamp(2rem,10vw,2.65rem)}
  .today-actions{display:grid;grid-template-columns:1fr;width:100%}
  .today-actions .btn{width:100%}
  .today-stats{gap:8px}
  .today-stat{padding:var(--s2)}
  .today-words{grid-template-columns:repeat(2,minmax(0,1fr))}
  .session-strip{align-items:flex-start}.session-strip .pill{flex:0 0 auto}
}

@media(max-width:420px){
  .forms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid{grid-template-columns:1fr}
  .fcf{padding-inline:14px}
  .bar-row{grid-template-columns:84px minmax(0,1fr) 46px;gap:6px;padding-inline:4px}
}

@media(hover:none){
  .card:hover,.cut:hover,.al:hover,.cal:hover,.ex-card:hover{transform:none}
  .tick{min-width:44px;min-height:44px}
  .nb-search{min-height:44px}
  .tribemap-item{min-height:44px}
}

/* Phones and touch devices have no space/K/H keys, and the icon-only card actions need a full tap target. */
@media(hover:none),(max-width:820px){
  [data-t="kbHint"]{display:none}
  .ex-acts .pill{min-width:44px;min-height:44px}
}

/* Shared Listen / Slow pair (listenButtons in 01-core.js). */
.listen-pair{display:inline-flex;gap:.4rem;flex-wrap:wrap;justify-content:center;align-items:center}
.listen-btn{font:inherit;font-size:.9rem;padding:.35rem .75rem;border-radius:999px;border:1px solid var(--line,#ddd);background:transparent;color:inherit;cursor:pointer;min-height:36px}
.listen-btn:hover{background:rgba(0,0,0,.04)}

/* Dallah v13: reading rhythm and interaction. Learning stays ahead of chrome. */
:root{--content:1180px;--wide:1040px;--prose:64ch;--r2:7px;--r4:12px;--r6:20px;--t-base:1rem;--t-sm:.94rem;--t-xs:.79rem;--t-md:1.08rem}
html{font-size:calc(17px * var(--fscale));scroll-behavior:auto}
body[data-theme="sand"]{--bg:#131511;--bg2:#1b1e18;--bg3:#23271f;--bg4:#2d3127;--sand:#f2efdf;--sand2:#cccdbf;--muted:#a4ad99;--gold:#ddb773;--gold2:#f0d39b;--gold-dim:#c4a66e;--bd:rgba(221,183,115,.22);--bd2:rgba(223,230,209,.13);--glow:rgba(221,183,115,.08);--ink:#1c2218;--cardbg:#eee8d9;--cardink:#23291e;--cardsub:#565b4e}
body{line-height:calc(1.65 * var(--lead));color-scheme:dark}
body[data-theme="paper"]{color-scheme:light;--muted:#625844;--gold2:#83541b}
button,input,select,textarea{font:inherit}
button:disabled{cursor:default;opacity:.58}
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible,[role="button"]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
main:focus:not(:focus-visible){outline:none}
main{padding:24px clamp(20px,3vw,48px) 0}
.shell{grid-template-columns:232px minmax(0,1fr)}
.shell > aside{padding-top:30px;background:var(--bg);border-right:1px solid var(--bd2)}
.logo{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:0 24px 26px}
.logo-ar{font-size:2.5rem;color:var(--gold);line-height:1.3}
.logo-en{font-family:var(--ui);font-size:.72rem;line-height:1.55;letter-spacing:.07em;max-width:19ch;color:var(--sand2)}
.nav-group summary{font-size:.7rem;letter-spacing:.12em;padding:14px 24px 9px;min-height:44px}
.nav-group .nav{padding:12px 20px 12px 24px;min-height:44px;text-transform:none;letter-spacing:0;font-size:.91rem;color:var(--sand2);line-height:1.3}
.nav-group .nav.on{color:var(--gold)}
.nav-i{opacity:.8;flex:0 0 20px}
.side-foot{padding:18px 24px}
.topbar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px;pointer-events:auto;z-index:70}
.app-context{display:grid;gap:4px;text-align:left;min-width:0}
.app-context span{font-size:.61rem;letter-spacing:.19em;color:var(--muted)}
.app-context b{font-size:.95rem;font-weight:500;color:var(--sand)}
.rd{flex:0 0 auto;max-width:none}
.rd-sum{min-height:44px;padding:10px 16px;gap:8px;font-size:.76rem;letter-spacing:.03em;text-transform:none;border:1px solid var(--bd2);border-radius:10px}
.rd-body{width:min(440px,calc(100vw - 40px));max-width:none;max-height:75dvh;overflow:auto;border:1px solid var(--bd);border-radius:12px;padding:20px;box-shadow:0 22px 60px #0006}
.rd:not([open]) .rd-body{display:none}
.rd-row{grid-template-columns:90px minmax(0,1fr);text-align:left;gap:12px}
.rd-l{font-size:.73rem;letter-spacing:.04em}
.stepper{flex-wrap:wrap;min-width:0;gap:6px}
select.sb{max-width:100%;min-width:0;min-height:40px;background:var(--bg2);color:var(--sand);font-size:.84rem}
.sb,.sw{min-height:36px}.sw{font-size:.8rem}
.panel.on{text-align:left;padding-bottom:56px}
.panel .centre-head,.panel>.eyebrow,.panel>.pt,.panel>.psub,.orn{text-align:center}
.today-hero{grid-template-columns:minmax(0,1fr) 160px;gap:32px;padding:36px 40px;background:radial-gradient(ellipse at 95% 0%,var(--glow),transparent 70%),var(--bg2);box-shadow:none}
.today-hero::after{font-size:14rem;opacity:.025;bottom:-70px}
.today-welcome{display:block;width:fit-content;font-family:var(--arabic);font-size:1.75rem;line-height:1.7;color:var(--gold);margin-top:12px}
.today-kicker{font-size:.68rem;letter-spacing:.12em}
.today-hero h2{max-width:24ch;margin:4px 0 14px;font-size:clamp(2rem,3.3vw,3.3rem);font-weight:500;line-height:1.08;text-align:left;text-wrap:balance}
.today-hero p{font-family:var(--ui);font-size:1rem;line-height:1.65;text-align:left;max-width:52ch}
.today-actions{margin-top:24px;gap:10px}
.btn{min-height:46px;padding:12px 18px;font-size:.84rem;letter-spacing:.015em;text-transform:none;line-height:1.4}
.pill{min-height:38px;letter-spacing:.02em;text-transform:none;font-size:.82rem;padding:8px 13px;line-height:1.35}
.today-mark{width:150px}.today-mark small{font-size:.68rem;letter-spacing:.06em;max-width:11ch}
.today-card-head span,.today-stat>span,.today-routes button>span{font-size:.69rem;letter-spacing:.11em}
.today-stat{padding:18px}.today-stat b{font-size:2rem}.today-stat small{font-size:.78rem}
.today-card{padding:26px}.today-card h3{font-size:1.8rem;text-align:left}.today-card p{text-align:left;font-size:.96rem}
.today-routes button{padding:22px;gap:4px;background:var(--bg2)}.today-routes small{font-size:.86rem}.today-routes b{font-size:1.6rem}
.today-words b{font-size:calc(1.4rem * var(--arscale))}.today-words small{font-size:.75rem}
.psub,.c-b,.art-b,.et-b,.rule-b,.tr-open-grid p,.dl-open-grid p,.chapter p,.msg,.craft dd{line-height:calc(1.75 * var(--lead))}
.ex-card .c-b,.art-body,.et-item,.rule-card,.chapter .leaf{text-align:left}
.qr{width:100%;background:transparent;color:var(--sand2);border-top:0;border-left:0;border-right:0;text-align:left;font-family:var(--ui)}
.al{font-family:var(--ui);color:var(--sand);background:var(--bg2);text-align:center}
.tick{flex:0 0 30px;display:grid;place-items:center;font:inherit;cursor:pointer;background:transparent;line-height:1}
.slot{font-family:var(--arabic);color:var(--sand);font-size:calc(1.5rem * var(--arscale));background:var(--bg2)}
.sheet [lang="ar"],.sar{font-family:var(--arabic)}
.fgrid{gap:20px}.flink{font-size:.85rem;line-height:1.5}
footer{margin-top:12px}.fq{padding-block:26px}
.ai-notice{margin:0 0 10px;font-size:.72rem;line-height:1.55;color:var(--muted)}
.ai-notice a,.fbot a{color:inherit;text-underline-offset:3px}
.feedback-link{margin-top:4px;color:var(--accent)!important}
@media(max-width:1050px){.today-hero{grid-template-columns:minmax(0,1fr) 116px;padding:28px;gap:20px}.today-mark{width:116px}.today-grid{grid-template-columns:minmax(0,1fr)}.today-routes{gap:12px}}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
  .shell{display:block}.shell > aside{padding:0;border-right:none;z-index:80}
  .shell > aside>.logo,.shell > aside>#lang{display:none}
  main{padding:18px max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
  .mobile-nav-bar{padding-block:10px;gap:16px}.mobile-brand{font-size:2rem}.mobile-nav-select{background:var(--bg);font-size:16px;border-color:var(--bd2)}
  .topbar{position:relative;gap:10px;margin-bottom:18px}.app-context span{display:none}.app-context b{font-size:.86rem}
  .rd{width:auto}.rd-sum{padding:9px 12px;font-size:.75rem}.rd-body{position:absolute;right:0;width:min(440px,calc(100vw - 32px));padding:18px}
  .today-hero{grid-template-columns:minmax(0,1fr);padding:24px;gap:22px}
  .today-hero h2{font-size:2.35rem;max-width:23ch}.today-hero p{font-size:.98rem}
  .today-welcome{font-size:1.6rem;margin-top:8px}
  .today-mark{grid-row:auto;width:94px;justify-self:start}.today-mark span{font-size:1.7rem}.today-mark small{font-size:.56rem}
  .today-actions{display:flex;flex-wrap:wrap}.today-actions .btn{width:auto;flex:1 1 auto}
  .today-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.today-stat{padding:16px}
  .today-card{padding:22px}.today-routes{grid-template-columns:1fr}.today-routes button{padding:18px 22px}
  .today-words{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rd-row{grid-template-columns:1fr;gap:7px}.rd-l{font-size:.72rem}.rd-body .stepper{justify-content:flex-start}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.flink{min-height:40px}.fquote{padding:30px 0}
  .ex-card{padding:22px}.ex-row>.ex-card{min-width:0}
  .sb,.sw,.pill{min-height:44px}.session-strip{gap:10px;flex-wrap:wrap}
}
@media(max-width:360px){.today-hero{padding:20px}.today-hero h2{font-size:2rem}.app-context b{font-size:.75rem}.rd-sum{font-size:.67rem;padding-inline:8px}.today-stat{padding:12px}.today-stat small{grid-column:1/-1;text-align:left}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.app-context{display:none}.panel.on{padding:0}.sheet{overflow:visible}.sheet table{min-width:0}}

main:focus { outline:none; }
.answer-meta {font-size:.82rem;color:var(--muted);line-height:1.6;margin:12px 0;}
.answer-error {border-inline-start:3px solid var(--no);}

.reading-notes{margin:1rem 0 1.6rem;border:1px solid var(--bd);border-radius:12px;padding:.7rem 1rem;font-size:.88rem;color:var(--sand2);max-width:76ch;text-align:left}
.reading-notes summary{cursor:pointer;font-weight:600;min-height:44px;color:var(--sand);display:flex;align-items:center}
.reading-notes p{line-height:1.6;margin:.7rem 0;overflow-wrap:anywhere}.content-source{font-size:.8rem;line-height:1.5;margin:.7rem 0}.content-source a{color:var(--gold);text-underline-offset:3px;overflow-wrap:anywhere}
.ex-card .c-b{overflow-wrap:anywhere}
.ai-side .box-t{overflow-wrap:anywhere}
.cmp-ar em{font-family:var(--ui);font-size:.84rem;direction:ltr;unicode-bidi:isolate}
.data-note{overflow-wrap:anywhere}.verse .data-note,.verse-n+.data-note{font-size:.75rem;opacity:.85}

/* Journal direction: quiet surfaces, useful Arabic, one primary next step. */
body[data-theme="paper"]{--bg:#f7f5ef;--bg2:#fffdf8;--bg3:#efeee5;--bg4:#e9ebdf;--sand:#28332d;--sand2:#515e55;--muted:#626d62;--gold:#526548;--gold2:#42543a;--gold-dim:#6b775f;--bd:rgba(67,84,58,.2);--bd2:rgba(40,51,45,.12);--glow:rgba(111,129,77,.06);--cardbg:#eceee3;--cardink:#28332d;--cardsub:#515e55;--ink:#fffdf8}
body{letter-spacing:0}.shell{grid-template-columns:212px minmax(0,1fr)}
.shell>aside{background:var(--bg)}.logo{gap:5px;padding-bottom:20px}.logo-en{font-size:.73rem;letter-spacing:.015em;max-width:22ch;text-transform:none}
.nav-group summary{letter-spacing:.02em;font-size:.85rem;text-transform:none;font-weight:600}
.nav-group .nav{font-size:.84rem;padding-block:10px}.nav-group .nav.on{background:var(--glow)}
main{max-width:1440px;width:100%;margin-inline:auto;padding-top:24px}
.app-context span{display:none}.app-context b{font-size:1rem}.rd-sum{border-color:transparent;background:transparent}
.today{max-width:1060px;margin-inline:auto}.today-hero{display:block;border:0;background:transparent;padding:12px 0 30px;border-radius:0;overflow:visible}
.today-hero::after{display:none}.today-hero-copy{max-width:none}.today-kicker{font-size:.72rem;letter-spacing:.025em;color:var(--muted)}
.today-hero h2{font-family:var(--ui);font-size:clamp(1.55rem,2.5vw,2.25rem);font-weight:500;letter-spacing:-.035em;max-width:none;margin:12px 0 8px}
.today-hero p{font-size:.94rem;max-width:58ch;margin:0;line-height:1.65}
.journal-phrase{margin-top:26px;padding:30px 24px;display:flex;align-items:center;flex-direction:column;gap:7px;background:var(--bg2);border:1px solid var(--bd2);border-radius:22px;text-align:center}
.journal-label{color:var(--muted);font-size:.72rem}.journal-phrase>b{font-family:var(--arabic);font-size:calc(clamp(2.1rem,4vw,3.5rem) * var(--arscale));line-height:1.65;font-weight:500;color:var(--gold);max-width:100%;overflow-wrap:anywhere}
.journal-translit{font-size:1rem;color:var(--sand);overflow-wrap:anywhere}.journal-meaning{font-size:.9rem;color:var(--muted)}
.pronunciation-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;justify-content:center}.pronunciation-actions .btn{border-radius:30px;min-width:95px;background:var(--bg);font-size:.8rem}
.today-actions{margin-top:18px;align-items:center}.today-start{border-radius:12px;background:var(--gold);color:var(--ink)}.journal-path{border-color:transparent}
.journal-progress{border-block:1px solid var(--bd2);margin:0 0 28px;padding:0 2px}.journal-progress>summary{cursor:pointer;padding:16px 0;font-size:.85rem}.journal-progress>summary span{float:right;font-size:.78rem;color:var(--muted)}
.today-stats{margin-bottom:18px;gap:12px}.today-stat{background:transparent;border:0;padding:10px}.today-stat>span{font-size:.68rem;letter-spacing:.02em}.today-stat b{font-size:1.5rem}
.today-card{background:transparent;border:0;padding:8px 0 24px}.today-card h3{font-size:1.45rem;font-weight:500}.today-card p{font-size:.9rem}.today-card-head span{font-size:.72rem;letter-spacing:.035em}.today-grid{gap:36px}.today-progress{height:3px;margin-block:18px}
.today-words{gap:8px}.word-listen{display:flex;flex-direction:column;gap:7px;align-items:flex-start;position:relative;border:0;border-radius:12px;background:var(--bg2);color:var(--sand);padding:14px;cursor:pointer;min-width:0;text-align:start}.word-listen small{white-space:normal;overflow-wrap:anywhere;font-size:.75rem}.word-listen>span{color:var(--muted)}.today-words b{font-weight:400;overflow-wrap:anywhere;max-width:100%}
.today-routes{gap:16px;border-top:1px solid var(--bd2);padding-top:22px}.today-routes button{border:0;background:transparent;padding:12px 0}.today-routes b{font-size:1.3rem}.today-routes button>span{letter-spacing:.025em}.today-routes small{font-size:.82rem}
.panel>.pt{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:500}.panel>.psub{max-width:58ch;margin-inline:auto;font-size:.94rem}.panel>.eyebrow{letter-spacing:.06em}.orn{opacity:.4}
.band-topic,.band-view{border:0;background:transparent;padding-block:10px}.band-l{letter-spacing:.035em}.fcw{max-width:760px;margin-inline:auto}.fcf{box-shadow:none;border-radius:22px}.fc-cat{letter-spacing:.04em}.fc-ctl{gap:10px}.box{background:transparent;border-color:var(--bd2)}
.pronunciation-dock{position:fixed;z-index:110;bottom:20px;left:50%;transform:translateX(-50%);width:min(680px,calc(100% - 32px));background:var(--bg2);color:var(--sand);border:1px solid var(--bd);border-radius:16px;padding:14px 18px;box-shadow:0 8px 30px #0002;display:flex;align-items:center;gap:12px}.pronunciation-dock[hidden]{display:none}.pronunciation-dock p{font-size:.82rem;line-height:1.5;margin:0;flex:1}.pronunciation-dock button{background:var(--bg);color:var(--sand);border:1px solid var(--bd);border-radius:8px;padding:10px;min-height:44px;cursor:pointer}.pronunciation-dock button[hidden]{display:none}
@media(max-width:1050px){.today-grid{gap:12px}.today-hero{padding:8px 0 24px}.today-words{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){.shell{display:block}.mobile-nav-bar{background:var(--bg);padding-inline:16px}.mobile-nav-select{border:0;background:var(--bg2);border-radius:10px}.topbar{margin-bottom:14px}.today-hero{padding-top:4px}.today-hero h2{font-size:1.65rem;margin-top:10px}.today-hero p{font-size:.88rem}.journal-phrase{margin-top:20px;padding:20px 14px;gap:5px;border-radius:18px}.journal-phrase>b{font-size:calc(2.4rem * var(--arscale))}.today-actions{gap:8px}.today-actions .btn{flex:1 1 auto}.journal-progress>summary span{float:none;display:block;margin-top:4px}.today-card{padding-bottom:14px}.today-routes{gap:2px}.pronunciation-dock{flex-wrap:wrap;bottom:12px}.pronunciation-dock p{flex-basis:100%}.today-last:has(.today-card-head strong){border-top:1px solid var(--bd2);padding-top:18px}}
@media print{.pronunciation-dock{display:none}}

/* 14 September: consistent reading axes, touch controls and visual stories. */
.panel.on>.centre-head,.panel.on>.psub,.panel.on>.pt,.panel.on>.reading-notes{margin-inline:auto;width:100%}
.centre-head{max-width:760px}.centre-head .psub{max-width:60ch;margin-inline:auto;font-size:.95rem;line-height:1.75}.panel.on>.row.centred{margin-inline:auto;max-width:var(--wide)}
.num-wrap{width:100%;max-width:880px}.number-note{max-width:65ch;margin:14px auto 24px;text-align:center;font-size:.8rem;line-height:1.65;color:var(--muted)}
#p-numbers .al-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;width:100%;max-width:none;align-items:stretch}
.number-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px 10px;min-width:0;min-height:0;border-radius:16px;clip-path:none}
.number-card .al-l{font-size:calc(2.15rem * var(--arscale));line-height:1.45}.number-card .al-n{font-style:normal;font-family:var(--ui);margin-block:7px}.number-listen{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:14px}.number-listen .pill{font-size:.74rem;padding:7px 10px;min-height:44px}
.pronunciation-dock{transition:opacity .25s,transform .25s;bottom:max(12px,env(safe-area-inset-bottom));max-height:45dvh;overflow:auto}.pronunciation-dock.is-fading{opacity:0;transform:translate(-50%,8px);pointer-events:none}
.atlas-toolbar{display:grid;grid-template-columns:auto minmax(180px,320px) 1fr;align-items:center;gap:14px;max-width:1100px;margin:20px auto;padding:16px;border:1px solid var(--bd2);border-radius:14px;background:var(--bg2)}
.atlas-toolbar label{font-size:.85rem}.atlas-toolbar select{min-height:46px;width:100%;min-width:0;padding:10px;border:1px solid var(--bd);border-radius:8px;background:var(--bg);color:var(--sand)}#atlas-selection{font-size:.85rem;margin:0;color:var(--gold)}
#map-svg{max-height:590px;background:var(--bg2);border-radius:16px;overflow:hidden}.mapbox{border:0;background:transparent;padding:0!important;clip-path:none;overflow:hidden;contain:layout paint}.map-side{display:block;max-width:900px}.map-side>.cut{border:0;clip-path:none}
#p-map .map-lbl{font-size:11px;stroke-width:2.5px;fill:var(--sand);stroke:var(--bg);paint-order:stroke;letter-spacing:0}
#p-map .map-inset .map-lbl{font-size:11px;stroke-width:2.2px}.map-inset svg{min-height:0!important;max-height:330px;height:auto;background:var(--bg3)}.map-inset{padding:16px;align-self:start;min-width:0}.map-inset summary{cursor:pointer;min-height:44px;font-size:.94rem;color:var(--sand)}
#p-map .ctry{cursor:pointer;transition:fill-opacity .18s,fill .18s}#p-map .ctry.hi{fill:var(--gold2);fill-opacity:1;stroke:var(--sand);stroke-width:2;filter:none}#p-map .ctry:focus-visible{outline:none;stroke:var(--sand);stroke-width:3}
.atlas-region-list{display:flex;flex-wrap:wrap;gap:8px;padding-top:14px}.atlas-region-list .pill{min-height:44px}.atlas-directory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:1100px;margin-inline:auto}
.atlas-country-button{display:flex;flex-direction:column;gap:5px;align-items:flex-start;padding:16px;background:var(--bg2);color:var(--sand);border:1px solid var(--bd2);border-radius:12px;cursor:pointer;text-align:left}.atlas-country-button span{font-family:var(--arabic);font-size:1.3rem;color:var(--gold)}.atlas-country-button small{font-size:.75rem;color:var(--muted)}
#atlas-dialog,#media-dialog{position:fixed;inset:0;margin:auto;width:min(680px,calc(100vw - 28px));max-height:85dvh;padding:24px;border:1px solid var(--bd);border-radius:20px;background:var(--bg2);color:var(--sand);overflow:auto;overscroll-behavior:contain;box-shadow:0 24px 90px #0005}
dialog::backdrop{background:#1119;backdrop-filter:blur(4px)}#atlas-dialog .country-head{justify-content:space-between;text-align:left;gap:12px;margin-top:18px}#atlas-dialog .country-name{font-family:var(--ui);font-size:1.6rem}#atlas-dialog .country-reason{text-align:left}#atlas-dialog .fact{font-size:.92rem}#atlas-close{position:sticky;top:0;background:var(--bg2)}
.atlas-regions{max-width:1100px;margin:34px auto 0}.atlas-regions-head{max-width:68ch;margin:0 auto 18px;text-align:center}.atlas-regions-head h3{font-family:var(--serif);font-size:1.55rem;color:var(--sand);margin-bottom:7px}.atlas-regions-head p{font-size:.84rem;line-height:1.7;color:var(--muted)}.atlas-study-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.atlas-study{margin:0;min-width:0;overflow:hidden;border:1px solid var(--bd2);border-radius:14px;background:var(--bg2)}.atlas-study img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}.atlas-study figcaption{padding:9px 11px;color:var(--muted);font-size:.68rem;line-height:1.5}.atlas-study.compact{margin-top:12px}.atlas-study.compact img{max-height:285px}.atlas-study.compact figcaption{font-size:.72rem}
.history-figure{margin:0 0 var(--s4);overflow:hidden;border:1px solid var(--bd2);border-radius:16px;background:var(--bg2);max-width:760px}.history-figure img{display:block;width:100%;aspect-ratio:3/2;max-height:340px;object-fit:cover}.history-figure figcaption{padding:9px 11px;color:var(--muted);font-size:.68rem;line-height:1.5}.chap-body .chap-text{margin-inline:0}
.museum-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:1040px;margin:26px auto}.museum-figure{margin:0;min-width:0;border:1px solid var(--bd2);border-radius:16px;overflow:hidden;background:var(--bg2)}.museum-open{display:block;width:100%;padding:0;border:0;background:#ede9df;cursor:zoom-in}.museum-figure img{display:block;width:100%;height:240px;object-fit:contain;padding:14px}.museum-figure figcaption{padding:14px;display:grid;gap:6px;font-size:.75rem;line-height:1.5;color:var(--muted)}.museum-figure figcaption b{color:var(--sand);font-size:.85rem}.museum-figure a{color:var(--gold);text-underline-offset:3px}.media-full>img{display:block;max-width:100%;max-height:65dvh;object-fit:contain;margin:16px auto}.media-full p{font-size:.9rem}
.specimen-intro{display:grid;gap:24px;max-width:var(--wide);margin:28px auto}.specimen-text{max-width:64ch;margin-inline:auto;text-align:center}.specimen-intro h3{font-size:1.6rem;line-height:1.3;margin-bottom:14px}.specimen-intro p{color:var(--sand2);font-size:.92rem;line-height:1.75}
.calligraphy-real-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.calligraphy-real-gallery .museum-figure img{height:clamp(300px,32vw,520px);padding:12px}.calligraphy-real-gallery .museum-figure figcaption{padding:14px;font-size:.78rem}.calligraphy-real-gallery .museum-figure figcaption b{font-size:.88rem}
.visual-story{margin:20px auto 28px;max-width:1040px;border-block:1px solid var(--bd2);padding:12px 0}.visual-story summary{font-size:.94rem;padding:10px 0;cursor:pointer}.visual-story summary span{color:var(--muted);font-size:.78rem;margin-left:12px}.visual-story>p{font-size:.92rem;line-height:1.75;max-width:70ch;margin:20px auto}.courtyard-figure{margin:14px 0 0}.courtyard-figure img{width:100%;max-height:410px;object-fit:cover;display:block;border-radius:18px}.courtyard-figure figcaption{font-size:.72rem;color:var(--muted);margin:8px 4px}
.art-deep summary{cursor:pointer;min-height:44px;padding-top:10px;font-size:.85rem;color:var(--gold)}.art-card{border-radius:18px;overflow:hidden}.art-fig{position:relative;overflow:hidden}.art-fig:after{content:'';position:absolute;inset:10%;border:1px solid var(--bd);transform:rotate(45deg);pointer-events:none;animation:pattern-breathe 4.5s ease-in-out 1}.art-fig svg{transition:transform .6s}.art-card:hover .art-fig svg{transform:scale(1.04)}
@keyframes pattern-breathe{0%,100%{opacity:.35;transform:rotate(45deg) scale(.93)}50%{opacity:.8;transform:rotate(50deg) scale(1)}}
@keyframes panel-arrive{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}
.panel.on{animation:panel-arrive .25s ease-out}.reading-notes{text-align:left}
@media(max-width:1100px){.atlas-toolbar{grid-template-columns:1fr 1.5fr}.atlas-toolbar p{grid-column:1/-1}.museum-gallery{gap:12px}.museum-figure img{height:210px}}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){#p-numbers .al-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.atlas-directory{grid-template-columns:repeat(2,minmax(0,1fr))}.atlas-study-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.museum-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.museum-gallery>.museum-figure:last-child{grid-column:1/-1}.museum-gallery>.museum-figure:last-child img{height:220px}.specimen-intro{grid-template-columns:1fr}.calligraphy-real-gallery{max-width:680px;margin-inline:auto}.map-insets{grid-template-columns:1fr}.centre-head .psub{font-size:.9rem}.visual-story summary span{display:block;margin:7px 0 0}}
@media(max-width:480px){#p-numbers .al-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.number-card{padding:16px 8px}.number-listen{gap:4px}.atlas-toolbar{grid-template-columns:1fr}.atlas-toolbar p{grid-column:auto}.atlas-study-grid,.calligraphy-real-gallery{grid-template-columns:1fr}.museum-gallery{grid-template-columns:1fr}.museum-gallery>.museum-figure:last-child{grid-column:auto}.museum-figure img{height:240px}.calligraphy-real-gallery .museum-figure img{height:220px}.atlas-directory{gap:8px}.atlas-country-button{padding:12px;font-size:.85rem}#atlas-dialog,#media-dialog{padding:18px}.courtyard-figure img{max-height:240px}.history-figure img{max-height:260px}}
@media(prefers-reduced-motion:reduce){.panel.on,.art-fig:after{animation:none}.pronunciation-dock,.art-fig svg,#p-map .ctry{transition:none}}

/* Keep the reading column centred independently of older page-specific rules. */
.panel .psub{max-width:66ch;margin-inline:auto;text-align:center}
#pf-grid .grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.rule-head{flex-wrap:wrap}.rule-card{min-width:0}.rule-ar{overflow-wrap:anywhere}
.rm-node{min-width:0;overflow-wrap:anywhere}.rm-nl{letter-spacing:.04em}
/* Every era stays visible; selection no longer depends on discovering a hidden rail. */
.spine{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:12px;overflow:visible}
.spine-line{display:none}.spine .stop{min-width:0;min-height:78px;border:1px solid var(--bd2);border-radius:12px;padding:12px 8px}
.spine .stop.on{border-color:var(--gold);background:var(--glow)}
@media(max-width:600px){.spine{grid-template-columns:repeat(2,minmax(0,1fr))}.rm-track{overflow:visible}.rm-node{padding-inline:3px}}

/* Labels scale with each map's extent, rather than reusing overview units. */
#p-map .map-lbl{opacity:1;fill:var(--sand)}
#p-map .map-inset-0 .map-lbl{font-size:17px;stroke-width:2.5px}
@media(max-width:1200px){#p-map #map-svg .map-lbl{font-size:16px}}
@media(max-width:600px){#p-map #map-svg .map-lbl{font-size:23px;stroke-width:3px}#p-map #map-svg .map-lbl:is([data-label="mr"],[data-label="td"],[data-label="ly"],[data-label="so"],[data-label="iq"],[data-label="ye"]){display:none}}

.pattern-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center;padding:18px 0}
.pattern-preview{aspect-ratio:1;max-width:340px;width:100%;margin:auto;color:var(--gold);overflow:hidden;border:1px solid var(--bd);border-radius:18px;background:radial-gradient(circle,var(--glow),transparent 70%)}
.pattern-preview svg{width:100%;display:block}.pattern-preview.moving svg{animation:pattern-orbit 36s linear infinite}
.pattern-controls{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0}.pattern-controls label{width:100%;font-size:.88rem}.pattern-controls output{float:right}.pattern-controls input{width:100%;min-height:44px;accent-color:var(--gold)}.pattern-controls p{font-size:.85rem;line-height:1.65}.pattern-controls .data-note{font-size:.76rem}
@keyframes pattern-orbit{to{transform:rotate(360deg)}}
@media(max-width:700px){.pattern-layout{grid-template-columns:1fr;gap:18px}.pattern-preview{max-width:280px}}
@media(prefers-reduced-motion:reduce){.pattern-preview.moving svg{animation:none}}
/* Read the script beside its explanation without a narrow tablet text column. */
.specimen{grid-template-columns:minmax(180px,.45fr) minmax(0,1fr);align-items:start}
.spec-plate{min-height:210px;padding:28px 18px;gap:12px}.spec-body{min-width:0;padding:26px}
.script-study summary{min-height:44px;cursor:pointer;color:var(--gold);font-size:.85rem;line-height:1.6;padding-block:10px}
@media(max-width:1100px){.specimen{grid-template-columns:1fr}.spec-plate{border-right:0;border-bottom:1px solid var(--bd2);min-height:180px}.spec-body{padding:22px}}

/* 20 September: Dallah identity and evidence-labelled editorial illustrations. */
.logo{flex-direction:row;align-items:center;gap:12px;padding-inline:18px}
.brand-home{display:flex;align-items:center;gap:12px;width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;border-radius:12px}
.brand-home:hover .logo-en b,.brand-home:focus-visible .logo-en b{color:var(--gold)}
.logo-mark{width:50px;height:50px;flex:0 0 auto;filter:drop-shadow(0 8px 18px #0003)}
.logo-copy{display:grid;min-width:0}.logo-ar{font-size:1.95rem;line-height:1.15}.logo-en{display:grid;gap:1px;margin:0;max-width:none;letter-spacing:0;text-transform:none}
.logo-en b{font-size:.86rem;color:var(--sand);font-weight:600}.logo-en small{font-size:.61rem;color:var(--muted);letter-spacing:.025em}
.today-intro-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(320px,1.15fr);gap:34px;align-items:center}
.today-intro-copy{min-width:0}.dallah-hero-figure,.study-figure,.poetry-figure{margin:0;min-width:0}
.dallah-hero-figure{overflow:hidden;border-radius:22px;background:var(--bg2);border:1px solid var(--bd2)}
.dallah-hero-figure img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.dallah-hero-figure figcaption,.study-figure figcaption,.poetry-figure figcaption{padding:9px 11px;color:var(--muted);font-size:.68rem;line-height:1.5;text-align:left}
.study-figure{background:var(--bg2);border-bottom:1px solid var(--bd2)}
.study-figure img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.art-visual{position:relative}.art-fig-overlay{position:absolute;right:12px;bottom:42px;width:74px;height:74px;display:grid;place-items:center;padding:10px;border:1px solid var(--bd);border-radius:50%;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(8px)}
.art-fig-overlay svg{width:100%;height:100%}
.art-fig-structural{display:grid;place-items:center;gap:12px;min-height:290px}
.art-fig-structural span{font-size:.68rem;color:var(--muted);letter-spacing:.035em}
.art-card:hover .study-figure img{transform:scale(1.012)}.study-figure img{transition:transform .45s ease}
.poetry-figure{max-width:780px;margin:0 auto 28px;overflow:hidden;border:1px solid var(--bd2);border-radius:16px;background:var(--bg)}
.poetry-figure img{display:block;width:100%;height:auto;aspect-ratio:3/2;max-height:330px;object-fit:cover}
@media(max-width:1050px){.today-intro-grid{grid-template-columns:minmax(0,.8fr) minmax(280px,1.2fr);gap:24px}}
@media(max-width:760px){.today-intro-grid{grid-template-columns:1fr}.dallah-hero-figure{border-radius:16px}.poetry-figure{margin-bottom:22px}.poetry-figure img{max-height:250px}}
@media(max-width:480px){.dallah-hero-figure figcaption,.study-figure figcaption,.poetry-figure figcaption{font-size:.64rem}.art-fig-structural{min-height:230px}.leaf-body{padding-inline:18px}}
@media(prefers-reduced-motion:reduce){.study-figure img{transition:none}}

/* Cloudflare Turnstile mount. Hidden until a tutor request needs it, then it
   holds the managed widget for that one surface. Kept narrow enough that the
   widget never forces horizontal scrolling at 320px. */
.ts-mount{margin:var(--s3) 0 0;display:flex;justify-content:flex-start;flex:none;scroll-margin-block:var(--s4)}
.ts-mount[hidden]{display:none}
.ts-mount iframe{max-width:100%}
@media (max-width:360px){.ts-mount{transform:scale(.92);transform-origin:left top}}

/* 28 September: contrast and touch polish from the phone audit.
   Paper is the default theme; its muted green and Hard/Know colours sat at 3.8 to 4.4:1 on the card tints. */
body[data-theme="paper"]{--gold-dim:#5f6b54;--ok:#256b29;--no:#b71c1c}
.map-inset summary{min-height:0;padding-block:11px}
.stat-l,.prog-m{font-size:.69rem}
.leaf[hidden]{display:none!important}
.nb-cat{margin-bottom:22px}
.nb-cat>summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:10px}
.nb-cat>summary::-webkit-details-marker{display:none}
.nb-cat>summary::before{content:"\25B8";color:var(--gold-dim);font-size:1rem;transition:transform .15s}
.nb-cat[open]>summary::before{transform:rotate(90deg)}
.nb-cat>summary .orn{flex:1;margin:0}
.nb-cat>summary .orn{min-width:0}
.nb-cat>summary .orn span:first-child{min-width:0;overflow-wrap:anywhere;letter-spacing:.12em}
.nb-cat>summary .orn-d{flex-shrink:0;letter-spacing:.1em}
.nb-cat>.grid{margin-top:var(--s3)}
@media(prefers-reduced-motion:reduce){.nb-cat>summary::before{transition:none}}
@media(hover:none),(max-width:820px){
  .ex-acts .pill:last-child{flex-basis:100%}
  .content-source a{display:inline-block;padding-block:12px}
  .src a{padding-block:11px}
}
.al,.spine .stop,.atlas-country-button,.rule-card h3,.et-item h3,.ex-head h3{min-width:0;overflow-wrap:anywhere}
.panel .psub,.rule-card p,.rule-card .rule-tr{min-width:0;overflow-wrap:anywhere}
.panel>.pt{min-width:0;overflow-wrap:anywhere;hyphens:auto}
#p-map{overflow:hidden}
.orn>span{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.tribemap-item small.tr-era{display:none}
@media(max-width:420px){
  .al-grid,.atlas-directory,.spine{grid-template-columns:1fr}
  .ex-head{flex-wrap:wrap}
  .ex-head::before,.ex-head::after{display:none}
  .ex-head h3{flex:1 1 100%;text-align:center}
}
/* Severity tags on the dark themes sat at 3.9 to 4.3:1; lift the text, leave the tint alone. */
body[data-theme="sand"] .sev-tag.sev-legal,body[data-theme="night"] .sev-tag.sev-legal,body[data-theme="oasis"] .sev-tag.sev-legal{color:#ff9b98}
body[data-theme="sand"] .sev-tag.sev-awkward,body[data-theme="night"] .sev-tag.sev-awkward,body[data-theme="oasis"] .sev-tag.sev-awkward{color:color-mix(in srgb,var(--gold-dim) 70%,#fff)}

/* Flashcard follow-up activities need to read as a separate working surface,
   especially in the light paper theme. Keep the lift deliberately quiet. */
.flashcard-support>.box{
  background:color-mix(in srgb,var(--bg2) 94%,var(--gold) 6%);
  border-color:color-mix(in srgb,var(--bd) 72%,var(--gold) 28%);
  box-shadow:0 3px 10px rgba(0,0,0,.07)
}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
  .fc-ctl{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8px;row-gap:10px}
  .fc-ctl>.btn{min-width:0;width:100%}
  .flashcard-support{gap:14px}
  .flashcard-support>.box{padding:20px 16px;box-shadow:0 2px 8px rgba(0,0,0,.065)}
}

/* 29 September: systemic composition and session-feedback pass. */
.topbar{align-items:center;gap:14px}
.local-save{display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding:7px 10px;border:1px solid var(--bd2);border-radius:999px;background:color-mix(in srgb,var(--bg2) 88%,transparent);color:var(--muted);font-size:.68rem;line-height:1.2;white-space:nowrap}
.local-save i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 14%,transparent)}
.local-save.save-error{color:var(--no);border-color:color-mix(in srgb,var(--no) 35%,var(--bd2))}.local-save.save-error i{background:var(--no)}
.reading-notes{margin-inline:auto}.reading-notes>summary{justify-content:center;text-align:center}
.reading-notes>p,.reading-notes>div{text-align:left}
.centre{margin-inline:auto;text-align:center}.psub.centre{max-width:78ch;text-wrap:pretty}
#access-content.free-access .pt{max-width:36ch;text-wrap:balance}
#access-content.free-access .psub{max-width:48ch;text-wrap:pretty}
#access-content.free-access .access-grid{grid-template-columns:minmax(0,1fr);max-width:52ch;margin-inline:auto}
#access-content.free-access article p{max-width:44ch;margin-inline:auto;text-wrap:pretty}
.panel>.psub,.centre-head>.psub,.sb-wrap>.psub{max-width:78ch;margin-inline:auto;text-wrap:pretty}

.today-routes button{padding:18px 20px;border:1px solid var(--bd2);border-radius:14px;background:color-mix(in srgb,var(--bg2) 92%,var(--gold) 8%);box-shadow:0 2px 8px #0000000a}
.today-routes button:hover,.today-routes button:focus-visible{border-color:var(--gold);background:var(--glow)}
.today-routes button>span{letter-spacing:.09em}

.plan-guide{max-width:none;margin-block:24px}.plan-guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--bd2)}
.rm-sub{max-width:78ch;text-wrap:pretty}
.plan-guide-grid>p,.plan-guide-grid>div{margin:0;padding:18px 22px;line-height:1.65}.plan-guide-grid>*+*{border-left:1px solid var(--bd2)}.plan-guide-grid p{margin:0}.plan-guide-grid .pill{margin-top:12px}

.sb-slots{display:grid;justify-items:center;direction:ltr}.sb-dirhint{width:min(100%,76ch);text-align:center;text-wrap:pretty}.sb-slotrow{width:100%;justify-content:center}
.fb{text-align:center;text-wrap:pretty}.fb>span{display:block}.feedback-detail{margin-top:4px;opacity:.85}.feedback-review{margin-top:7px;font-size:.82em;font-weight:600}

.alphabet-guide{max-width:920px}.alphabet-workspace{display:grid;grid-template-columns:minmax(520px,1.18fr) minmax(360px,.82fr);gap:24px;align-items:start;max-width:var(--wide);margin-inline:auto}
.alphabet-workspace>.al-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin:0}
.alphabet-workspace>.trace{position:sticky;top:18px;grid-template-columns:1fr;margin:0;padding:24px;text-align:center}
.alphabet-workspace .trace-pane{display:none}.alphabet-workspace .trace-info{min-width:0}.alphabet-workspace .note{text-align:left}

#p-numbers .al-grid{grid-template-columns:repeat(8,minmax(0,1fr))}.number-card{grid-column:span 2}
#p-numbers .number-card:nth-last-child(3):nth-child(4n+1){grid-column:2/span 2}

#pf-grid .grid,.tr-grid,.atlas-directory{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch}
#pf-grid .grid>*{flex:1 1 300px;max-width:390px}.tr-grid>*{flex:1 1 250px;max-width:330px}.atlas-directory>*{flex:1 1 260px;max-width:360px}
.et-ar em{font-size:calc(.98rem * var(--fscale));line-height:1.5}

footer{position:relative;overflow:hidden}.footer-pattern{position:absolute;z-index:0;inset:auto -3% 0;height:190px;color:color-mix(in srgb,var(--gold) 22%,transparent);pointer-events:none;opacity:.72}.footer-pattern svg{display:block;width:100%;height:100%}.footer-pattern-field{animation:footer-drift 28s ease-in-out infinite alternate;transform-origin:center}
footer>.fgrid,footer>.fbot,footer>.fattr{position:relative;z-index:1}@keyframes footer-drift{to{transform:translateX(14px)}}

@media(max-width:1100px){
  .alphabet-workspace{grid-template-columns:minmax(430px,1fr) minmax(330px,.8fr)}
  .alphabet-workspace>.al-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
  .local-save{font-size:.64rem;padding:6px 8px}.plan-guide-grid{grid-template-columns:1fr}.plan-guide-grid>*+*{border-left:0;border-top:1px solid var(--bd2)}
  .alphabet-workspace{display:flex;flex-direction:column}.alphabet-workspace>.trace{order:-1;position:static;width:100%}.alphabet-workspace>.al-grid{grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  #p-numbers .al-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.number-card{grid-column:span 2}#p-numbers .number-card:nth-last-child(3):nth-child(4n+1){grid-column:auto/span 2}
  .fc-ctl .fc-hard{grid-column:1;grid-row:1}.fc-ctl .fc-know{grid-column:2;grid-row:1}.fc-ctl .fc-prev{grid-column:1;grid-row:2}.fc-ctl .fc-next{grid-column:2;grid-row:2}
}
@media(max-width:520px){
  .topbar{flex-wrap:wrap}.local-save{order:3;margin-left:0;width:100%;justify-content:center}
  .alphabet-workspace>.al-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #p-numbers .al-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){.footer-pattern-field{animation:none}}
@media print{@page{size:A4 portrait;margin:12mm}.footer-pattern,.local-save{display:none!important}}

/* Master/detail browsers keep the learner anchored while the selected material changes. */
.tribe-browser,.dialect-browser{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);gap:24px;align-items:start;max-width:var(--wide);margin-inline:auto}
.tribe-browser #tr-detail,.dialect-browser #dl-detail{position:sticky;top:18px;min-width:0}
.tribe-browser .tr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tribe-browser .tr-grid>*{max-width:none}
.browser-placeholder{display:grid;place-items:center;min-height:220px;padding:32px;border:1px dashed var(--bd);border-radius:18px;color:var(--muted);text-align:center;text-wrap:pretty}
.tribe-browser .tr-open,.dialect-browser .dl-open{margin:0;animation:detail-open .22s ease-out}
.dialect-browser .cmp-head{grid-template-columns:minmax(0,1fr) minmax(180px,.9fr) auto}.dialect-browser .cmp-row{grid-template-columns:minmax(0,1fr) minmax(180px,.9fr) auto}
@keyframes detail-open{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.coach-groups{gap:8px}.coach-g{border:1px solid var(--bd2);border-radius:12px;background:var(--bg);overflow:hidden}.coach-g>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:10px 13px;color:var(--sand);font-size:.78rem;font-weight:600}.coach-g>summary::-webkit-details-marker{display:none}.coach-g>summary:after{content:"+";color:var(--gold-dim);font-size:1rem}.coach-g[open]>summary:after{content:"−"}.coach-g>summary span{margin-left:auto;color:var(--muted);font-size:.66rem;font-weight:400}.coach-g>div{display:grid;gap:6px;padding:0 8px 8px}.coach-g .pill{width:100%;justify-content:flex-start;text-align:left}

#atlas-dialog{opacity:0;transform:translateY(10px) scale(.985);transition:opacity .2s ease,transform .2s ease,overlay .2s allow-discrete,display .2s allow-discrete}#atlas-dialog[open]{opacity:1;transform:none}@starting-style{#atlas-dialog[open]{opacity:0;transform:translateY(10px) scale(.985)}}
#atlas-close.atlas-x{position:absolute;z-index:2;top:12px;right:12px;left:auto;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--bd);border-radius:50%;background:color-mix(in srgb,var(--bg) 90%,transparent);color:var(--sand);font:400 1.4rem/1 var(--ui);cursor:pointer}#atlas-close.atlas-x:hover,#atlas-close.atlas-x:focus-visible{border-color:var(--gold);background:var(--glow)}
.ld{background:var(--bd2)}.ld-official{background:var(--gold)}.ld-coofficial{background:transparent;border:3px solid var(--gold-dim)}.ld-working{background:repeating-linear-gradient(45deg,var(--muted) 0 2px,transparent 2px 4px);border:1px solid var(--muted)}.ld-minority{background:var(--sand2);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}.ld-neighbour{background:transparent;border:1px solid var(--bd)}

@media(max-width:1050px){.tribe-browser,.dialect-browser{grid-template-columns:1fr}.tribe-browser #tr-detail,.dialect-browser #dl-detail{position:static;order:-1}.tribe-browser,.dialect-browser{display:flex;flex-direction:column}.tribe-browser>*,.dialect-browser>*{width:100%}}
@media(max-width:560px){.tribe-browser .tr-grid{grid-template-columns:1fr}.browser-placeholder{min-height:120px}.dialect-browser .cmp-head{display:none}.dialect-browser .cmp-row{grid-template-columns:1fr auto}.dialect-browser .cmp-ar{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){.tribe-browser .tr-open,.dialect-browser .dl-open{animation:none}#atlas-dialog{transition:none}}

/* The editorial direction is centred throughout, including longer explanatory copy. */
.panel .psub,.panel .reading-notes>p,.panel .reading-notes>div,.panel .note,
.panel .c-b,.panel .art-b,.panel .art-body,.panel .et-b,.panel .et-item,
.panel .rule-b,.panel .rule-card,.panel .chapter .leaf,.panel .tr-open-grid p,
.panel .dl-open-grid p,.panel .specimen-intro p,.panel .country-reason,
.panel .fact,.panel .craft dd,.panel .rm-sub,.panel .atlas-regions-head p,
.today-hero h2,.today-hero p,.today-card h3,.today-card p{text-align:center}
.today-hero h2,.today-hero p{margin-inline:auto}.today-actions{justify-content:center}
.alphabet-workspace .note{text-align:center}

/* Phone navigation: a recognisable Home mark plus a labelled, grouped menu sheet. */
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
  .mobile-nav-bar{grid-template-columns:auto minmax(0,1fr);gap:10px;padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));background:var(--bg);box-shadow:0 8px 24px #00000012}
  .mobile-home{display:flex;align-items:center;gap:7px;min-height:48px;padding:3px 8px 3px 3px;border:0;border-radius:12px;background:transparent;color:var(--sand);cursor:pointer;font-size:.78rem;font-weight:600}
  .mobile-home img{display:block;width:42px;height:42px;filter:drop-shadow(0 5px 12px #0003)}
  .mobile-menu{position:relative;min-width:0}
  .mobile-menu>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:7px 12px 7px 15px;border:1px solid var(--bd);border-radius:12px;background:var(--bg2);color:var(--sand);cursor:pointer}
  .mobile-menu>summary::-webkit-details-marker{display:none}.mobile-menu-copy{display:grid;min-width:0;text-align:left}.mobile-menu-copy small{color:var(--muted);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase}.mobile-menu-copy b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem;font-weight:600}.mobile-menu-chevron{font-size:1.1rem;color:var(--gold);transition:transform .16s}.mobile-menu[open] .mobile-menu-chevron{transform:rotate(180deg)}
  .mobile-nav-panel{position:absolute;z-index:120;top:calc(100% + 8px);right:0;width:min(570px,calc(100vw - 24px));max-height:calc(100dvh - 84px);overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px;border:1px solid var(--bd);border-radius:16px;background:var(--bg);box-shadow:0 22px 60px #0007}
  .mobile-nav-group{min-width:0;padding:8px;border:1px solid var(--bd2);border-radius:12px;background:var(--bg2)}.mobile-nav-group h2{margin:0 0 7px;text-align:center;color:var(--gold-dim);font-size:.67rem;letter-spacing:.09em;text-transform:uppercase}.mobile-nav-group>div{display:grid;gap:5px}.mobile-nav-item{min-height:46px;width:100%;padding:9px 10px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--sand2);font-size:.79rem;line-height:1.25;text-align:center;cursor:pointer}.mobile-nav-item:hover,.mobile-nav-item:focus-visible{border-color:var(--bd);background:var(--glow)}.mobile-nav-item[aria-current="page"]{border-color:var(--gold-dim);background:var(--glow);color:var(--gold)}
  .app-context{display:none}
}
@media(max-width:520px){
  .mobile-home span{display:none}.mobile-home{padding-right:3px}.mobile-nav-panel{grid-template-columns:1fr;left:auto;right:0}.mobile-nav-group>div{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topbar{display:flex}.local-save{width:auto;flex:1 1 150px}.rd{flex:1 1 150px}.rd-sum{width:100%}
}
@media(max-width:380px){.mobile-nav-panel{padding:9px}.local-save,.rd{flex-basis:100%}}

/* Sentence flow: each sentence is one unit that moves whole to the next line (flowEl in 01-core.js) */
.sn{display:inline-block;max-width:100%;vertical-align:top;text-wrap:balance;hyphens:none;overflow-wrap:break-word}
.nw{white-space:nowrap}
.fd-line{display:block}
/* Note blocks that have a max-width must be centred, not pinned left, when their text is centred */
.reading-notes p,.data-note,.content-source{margin-inline:auto}
/* Left-aligned card text: avoid a lone word on the last line of a long sentence */
.et-item .sn,.rule-card .sn,.ex-card .sn,.art-body .sn,.art-math .sn,.chapter .sn,.tr-open-grid .sn,.dl-open-grid .sn{text-wrap:pretty}
/* Today: a note with a max-width sits in the middle of its card, not pinned left */
.today-card>p{margin-inline:auto}
/* Balanced card rows (balancedGrid in 03-culture.js): never a lone card under a full row */
.grid-rows{display:grid;gap:var(--s3)}
.grid-row{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:var(--s3)}
@media(max-width:1180px){.grid-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}}
/* Large laptops (16 inch and up): use more of the screen */
@media(min-width:1600px){:root{--content:1480px;--wide:1360px}}

/* ══════════ Media: figures, lightbox, carousel, footer banners, smooth details ══════════
   Kept in its own file so both branches share it without touching the differing tail of
   refinement.css. Loaded last, so it may refine earlier figure rules. */
.img-figure{margin:0;min-width:0}
.img-figure picture{display:block}
.img-figure img{display:block;width:100%;height:auto}
.lb-open{display:block;width:100%;padding:0;margin:0;border:0;background:none;color:inherit;cursor:zoom-in;border-radius:inherit}
.lb-open:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
.img-figure figcaption{display:grid;gap:3px}
.img-figure figcaption b{font-weight:600;color:var(--sand2)}
.img-figure figcaption span{color:var(--muted)}
.img-credit{display:block;color:var(--muted);opacity:.85;font-size:.92em;overflow-wrap:anywhere}
.img-kind{font-style:normal;text-transform:uppercase;letter-spacing:.08em;font-size:.8em;color:var(--gold)}
.dallah-hero-figure figcaption b,.study-figure figcaption b,.poetry-figure figcaption b,.atlas-study figcaption b,.history-figure figcaption b{font-weight:500;color:var(--muted)}

/* Lightbox */
#media-dialog.lightbox{width:min(1400px,calc(100vw - 28px));max-height:94dvh;padding:14px 16px 18px;border-radius:18px}
#media-dialog.lightbox::backdrop{background:rgba(6,5,3,.82);backdrop-filter:blur(3px)}
.lb-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:-14px;z-index:1;padding:4px 0 8px;background:var(--bg2)}
.lb-nav{display:flex;align-items:center;gap:10px}.lb-nav[hidden]{display:none}
.lb-count{font-size:.78rem;color:var(--muted);min-width:4.5em;text-align:center;font-variant-numeric:tabular-nums}
.lb-close{margin-left:auto}
.lb-figure{margin:0}
.lb-figure img{display:block;width:auto;max-width:100%;max-height:78dvh;height:auto;object-fit:contain;margin:6px auto 12px;border-radius:8px}
.lb-figure figcaption{display:grid;gap:4px;max-width:78ch;margin:0 auto;text-align:center;font-size:.86rem;line-height:1.55;color:var(--muted)}
.lb-figure figcaption b{color:var(--sand);font-weight:600;font-size:.95rem}
.lb-figure a{color:var(--gold);text-underline-offset:3px}

/* Carousel: slides share one grid cell and crossfade */
.carousel{position:relative;min-width:0}
.car-stage{display:grid;overflow:hidden;border-radius:inherit}
.car-slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s}
.car-slide.on{opacity:1;visibility:visible;transition:opacity .9s ease,visibility 0s}
.car-ctl{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 8px 8px}
.car-btn{appearance:none;border:1px solid var(--bd2);background:transparent;color:var(--sand2);width:30px;height:30px;border-radius:50%;font-size:1rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.car-btn:hover{border-color:var(--bd);color:var(--gold)}
.car-play{font-size:.62rem;letter-spacing:-.1em}
.car-dots{display:flex;gap:2px;align-items:center}
.car-dot{appearance:none;border:0;background:none;padding:8px 5px;cursor:pointer;display:grid;place-items:center}
.car-dot::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--bd);transition:background .3s,transform .3s}
.car-dot.on::before{background:var(--gold);transform:scale(1.25)}
.carousel .img-figure img{aspect-ratio:3/2;object-fit:cover}
.carousel.study-figure,.carousel.atlas-study{border-bottom:0}
.carousel.study-figure .car-ctl,.carousel.atlas-study .car-ctl{border-top:1px solid var(--bd2)}
.art-visual .carousel+.art-fig-overlay{bottom:auto;top:12px}
.atlas-study.carousel figcaption{padding:9px 11px 2px}
.country-photos{margin-bottom:6px}

/* Museum objects: whole object visible on a quiet ground */
.museum-figure .lb-open{background:#ede9df}
.museum-figure img{object-fit:contain}
.museum-figure figcaption{text-align:left}

/* Dialect and tribe photographs */
.dl-photos,.tr-photo{max-width:900px;margin:0 auto var(--s4);border:1px solid var(--bd2);border-radius:16px;overflow:hidden;background:var(--bg2)}
.dl-photos .img-figure img,.tr-photo img{aspect-ratio:16/9;object-fit:cover;max-height:420px}
.dl-photos figcaption,.tr-photo figcaption{padding:9px 12px;font-size:.72rem;line-height:1.5;color:var(--muted);text-align:center}

/* Poetry: every line centred, image closing the leaf */
#po .leaf-body{text-align:center}
#po .leaf-body .verse,#po .leaf-body .verse-tr,#po .leaf-body .verse-en,#po .leaf-body .verse-n,#po .leaf-body .data-note,#po .content-source{text-align:center;margin-inline:auto}
#po .colophon{justify-content:center;text-align:center}
#po .poetry-figure{margin:var(--s4) auto 0}
#po .poetry-figure figcaption{text-align:center}

/* Footer rotator: wide banners dissolving upwards into the page, shown as photographed (no tint) */
.footer-rotator{position:relative;z-index:1;margin:0 0 18px}
.footer-rotator[hidden]{display:none}
.fr-stage{display:grid;aspect-ratio:21/9;max-height:360px;width:100%;overflow:hidden;border-radius:0 0 18px 18px;-webkit-mask-image:linear-gradient(to top,#000 42%,transparent);mask-image:linear-gradient(to top,#000 42%,transparent);position:relative}
.fr-slide{grid-area:1/1;opacity:0;transition:opacity 2.4s ease}
.fr-slide.on{opacity:1}
.fr-slide picture,.fr-slide img{display:block;width:100%;height:100%}
.fr-slide img{object-fit:cover}
.fr-credit{margin:8px auto 0;max-width:var(--content,1200px);font-size:.66rem;line-height:1.5;color:var(--muted);text-align:center;opacity:.8}

/* Smooth open and close for every <details> card (Chromium 131+, including Brave 154).
   Other browsers simply open instantly, exactly as before. */
@supports (interpolate-size:allow-keywords){
 :root{interpolate-size:allow-keywords}
 details::details-content{block-size:0;opacity:0;overflow-y:clip;transition:block-size .38s cubic-bezier(.2,.7,.2,1),opacity .3s ease,content-visibility .38s allow-discrete}
 details[open]::details-content{block-size:auto;opacity:1}
}

@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){.fr-stage{aspect-ratio:16/9}.lb-figure img{max-height:68dvh}}
@media(max-width:480px){#media-dialog.lightbox{padding:10px 10px 14px}.car-btn{width:34px;height:34px}}
@media(prefers-reduced-motion:reduce){
 .car-slide,.car-slide.on,.fr-slide{transition:none}
 details::details-content{transition:none}
}

/* Dialects: one column, size chart first, each variety folds open under its own row */
#p-dialects .dialect-browser{display:block;max-width:var(--wide);margin-inline:auto}
#p-dialects .dialect-browser #dl-detail{position:static}
#p-dialects #dl-detail:empty{display:none}
#dl-grid #dl-detail{margin:0;padding:14px 14px 20px;border-bottom:1px solid var(--bd2);background:color-mix(in srgb,var(--glow) 60%,transparent)}
#dl-grid .grid #dl-detail{grid-column:1/-1;padding:0;background:none;border:0}
#dl-grid .dl-open{margin:0;max-width:none;animation:detail-open .3s ease-out}
.cmp-row.open{background:var(--glow)}
.dl-chart{max-width:900px;margin:8px auto 26px}
.dl-chart h3{font-family:var(--serif);font-size:1.4rem;color:var(--sand);text-align:center;margin-bottom:14px;font-weight:600}
.dl-bars{display:grid;gap:2px}
.dl-bar{appearance:none;display:grid;grid-template-columns:minmax(90px,150px) minmax(0,1fr) minmax(88px,auto);align-items:center;gap:14px;width:100%;padding:7px 10px;border:0;border-radius:10px;background:none;color:var(--sand2);font:inherit;font-size:.84rem;text-align:left;cursor:pointer}
.dl-bar:hover,.dl-bar.on{background:var(--glow)}
.dl-bar-n{color:var(--sand)}
.dl-bar-track{position:relative;height:12px;border-radius:0 4px 4px 0;background:color-mix(in srgb,var(--bd2) 70%,transparent)}
.dl-bar-fill{position:absolute;inset:0 auto 0 0;border-radius:0 4px 4px 0;background:var(--gold)}
.dl-bar.on .dl-bar-fill{background:var(--gold2)}
.dl-bar-range{position:absolute;top:3px;bottom:3px;border-radius:3px;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--gold) 55%,transparent) 0 2px,transparent 2px 5px);border:1px solid color-mix(in srgb,var(--gold) 60%,transparent)}
.dl-bar-v{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.dl-chart .data-note{text-align:center;max-width:72ch;margin:12px auto 0}
.dl-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s4);margin-top:var(--s4);text-align:left}
.dl-fact{background:var(--bg2);border:1px solid var(--bd2);border-radius:var(--r4);padding:var(--s4)}
.dl-fact h4{font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.dl-fact-n{display:block;font-family:var(--serif);font-size:1.6rem;color:var(--sand);font-weight:600;margin-bottom:6px}
.dl-fact p,.dl-fact li{font-size:var(--t-sm);color:var(--sand2);line-height:1.75}
.dl-fact ul{margin:0;padding-left:1.1em;display:grid;gap:6px}
.dl-open .content-source{text-align:center;margin-top:12px}
.wordcell{position:relative}.wc-say{position:absolute;top:6px;right:6px;padding:2px 8px;min-height:0;font-size:.75rem}
@media(max-width:560px){.dl-bar{grid-template-columns:88px minmax(0,1fr) auto;gap:8px;font-size:.78rem}}
.dl-fact{text-align:center}.dl-fact ul{list-style:none;padding:0;justify-items:center}

/* Tribes: maps take the full width; the explanation opens beneath the chosen card's row */
#p-tribes .tribe-browser{display:block;max-width:var(--wide);margin-inline:auto}
#p-tribes #tr-detail{position:static}
#p-tribes #tr-detail:empty{display:none}
#p-tribes .tr-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#p-tribes .tr-grid>*{max-width:none}
#p-tribes .tr-grid>#tr-detail{grid-column:1/-1;margin:6px 0 10px}
#p-tribes .tr-open{margin:0;animation:detail-open .3s ease-out}
#p-tribes .tribemap-atlas{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
#p-tribes .tribemap svg{min-height:320px}
.tr-photo-note{text-align:center;margin:-10px auto 18px}
@media(max-width:1100px){#p-tribes .tr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){#p-tribes .tr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#p-tribes .tribemap-atlas{grid-template-columns:1fr}}
@media(max-width:480px){#p-tribes .tr-grid{grid-template-columns:1fr}}

/* Calligraphy: real examples of each script, large and uncropped */
.cal-photos{margin-top:var(--s4);border:1px solid var(--bd2);border-radius:16px;overflow:hidden;background:var(--bg2)}
.cal-photos .img-figure img{aspect-ratio:auto;height:clamp(320px,34vw,560px);width:100%;object-fit:contain;padding:12px}
.cal-photos figcaption{padding:10px 14px;font-size:.74rem;line-height:1.5;color:var(--muted);text-align:center}

/* Atlas leader lines for countries too small to hold their own name */
#p-map .map-leader{stroke:var(--sand2);stroke-width:.6;opacity:.75;vector-effect:non-scaling-stroke}
#p-map .map-leader-dot{fill:var(--sand);stroke:var(--bg);stroke-width:.5}

/* History as a journey: banner per thread, pictures on the timeline, chapters that slide in */
.hist-hero{position:relative;max-width:var(--wide);margin:18px auto 0;border-radius:20px;overflow:hidden;border:1px solid var(--bd2)}
.hist-banner .lb-open{border-radius:0}
.hist-banner img{aspect-ratio:21/8;object-fit:cover;max-height:380px;width:100%}
.hist-hero-copy{position:absolute;inset:auto 0 0 0;padding:60px 28px 20px;background:linear-gradient(to top,rgba(10,8,5,.72),transparent);pointer-events:none}
.hist-hero-copy span{font-family:var(--serif);font-size:clamp(1.6rem,2.6vw,2.4rem);color:#f4ecdc;font-weight:600;letter-spacing:.01em}
.hist-hero-credit{max-width:var(--wide);margin:6px auto 0;font-size:.66rem;color:var(--muted);text-align:right;padding-inline:6px}
#hist-intro{margin-top:18px}
.spine{position:relative}
.spine-progress{position:absolute;left:0;top:0;height:2px;width:var(--p);background:var(--gold);border-radius:2px;transition:width .5s ease;z-index:1}
.stop-thumb{display:block;width:46px;height:46px;margin:0 auto 6px;border-radius:50%;overflow:hidden;border:2px solid var(--bd);transition:transform .3s ease,border-color .3s}
.stop-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.stop.on .stop-thumb{border-color:var(--gold);transform:scale(1.12)}
.stop:hover .stop-thumb{border-color:var(--gold-dim)}
.chapter.has-figure .chap-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.95fr);gap:var(--s5);align-items:start}
.chapter.has-figure .history-figure{margin:0;max-width:none}
.chapter.has-figure .history-figure img{max-height:none;aspect-ratio:4/3}
.chapter .history-figure figcaption{text-align:center}
.chap-actions,.chap-nav{margin-top:var(--s3);gap:8px;flex-wrap:wrap}
a.pill{text-decoration:none;display:inline-flex;align-items:center}
.chapter.enter-next .chap-body{animation:chap-in-next .45s ease-out}
.chapter.enter-prev .chap-body{animation:chap-in-prev .45s ease-out}
@keyframes chap-in-next{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes chap-in-prev{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@media(max-width:900px){.chapter.has-figure .chap-body{grid-template-columns:1fr}.hist-banner img{aspect-ratio:16/8}}
@media(prefers-reduced-motion:reduce){.chapter.enter-next .chap-body,.chapter.enter-prev .chap-body{animation:none}.spine-progress,.stop-thumb{transition:none}}

/* Tiny credit in the image corner; the full list lives in the Image credits dialog */
.lb-open{position:relative}
.img-corner{position:absolute;right:6px;bottom:6px;max-width:calc(100% - 12px);padding:2px 6px;border-radius:6px;background:rgba(10,8,5,.5);color:#f1e9d8;font-size:.56rem;line-height:1.35;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.72;pointer-events:none;transition:opacity .25s}
.lb-open:hover .img-corner,.lb-open:focus-visible .img-corner{opacity:1}
.stop-thumb .img-corner,.fr-slide .img-corner{display:none}
#credits-dialog{position:fixed;inset:0;margin:auto;width:min(980px,calc(100vw - 28px));max-height:90dvh;padding:22px 26px;border:1px solid var(--bd);border-radius:18px;background:var(--bg2);color:var(--sand);overflow:auto}
#credits-dialog::backdrop{background:rgba(6,5,3,.7)}
.credits-close{position:sticky;top:0;float:right}
.credits-body h2{font-family:var(--serif);font-size:1.6rem;margin-bottom:6px}
.credits-body>p{color:var(--muted);font-size:.85rem;margin-bottom:14px}
.credits-body h3{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:18px 0 8px}
.credits-body h3 small{color:var(--muted);letter-spacing:0}
.credits-body ol{margin:0;padding-left:1.4em;display:grid;gap:6px;font-size:.8rem;line-height:1.5}
.credits-body li span{color:var(--muted)}.credits-body li small{color:var(--muted)}
.credits-body a{color:var(--gold)}

/* Page banners: one wide picture on top of an app page */
.page-banner{max-width:var(--wide,1100px);margin:0 auto var(--s5,24px)}
.page-banner-figure{margin:0;overflow:hidden;border:1px solid var(--bd2);border-radius:16px;background:var(--bg)}
.page-banner-figure .lb-open{display:block;width:100%;border-radius:0}
.page-banner-figure img{display:block;width:100%;height:auto;aspect-ratio:21/7;max-height:300px;object-fit:cover}
.page-banner-figure figcaption{padding:8px 12px;color:var(--muted);font-size:.68rem;text-align:center}
.page-banner-figure figcaption b{font-weight:500;color:var(--muted)}
@media(max-width:760px){.page-banner-figure img{aspect-ratio:16/8;max-height:220px}}
/* Picture of the day on Today */
.today-photo{margin-top:var(--s5,24px);text-align:center}
.today-photo-figure{margin:0 auto 12px;max-width:720px;overflow:hidden;border-radius:14px;border:1px solid var(--bd2)}
.today-photo-figure .lb-open{display:block;width:100%;border-radius:0}
.today-photo-figure img{display:block;width:100%;height:auto;aspect-ratio:3/2;max-height:420px;object-fit:cover}
.today-photo-figure figcaption{padding:8px 12px;color:var(--muted);font-size:.7rem;text-align:center}
.today-photo-figure figcaption b{font-weight:500;color:var(--muted)}
.today-photo .today-card-head{justify-content:center;text-align:center}
.noscript-intro{max-width:720px;margin:40px auto;padding:0 20px;text-align:center;line-height:1.6}

/* Touch targets and readability, from the 1 October 2026 responsive review (seven widths, EN and NL).
   Every tappable control is at least 44 px; credits and notices stay readable. */
.car-btn{width:34px;height:34px;flex:0 0 34px}
.car-count{display:none;min-width:44px;text-align:center;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
/* Finger-sized targets only where people tap; a laptop keeps the compact layout (mouse precision). */
@media (pointer:coarse){
 .car-btn{width:44px;height:44px;flex:0 0 44px}
 .car-dots{gap:0}
 .car-dot{min-width:44px;min-height:44px;padding:0}
 .dl-bar{min-height:44px}
 .pill{min-height:44px}
 .tick{min-width:44px;min-height:44px}
 .src-link,.ai-notice a{display:inline-flex;align-items:center;min-height:44px;padding-inline:4px}
}
.ai-notice{font-size:.875rem}
.hist-hero-credit{font-size:.8rem}
@media(max-width:760px){
 /* Phones: a "2 / 3" counter replaces the row of dots so the arrows keep their full size. */
 .car-dots{display:none}
 .car-count{display:block}
 #p-art .museum-figure img{max-height:55dvh;object-fit:contain}
 /* On phones the credit sits under the picture and wraps instead of being cut off. */
 .img-corner{position:static;display:block;max-width:none;margin:0;padding:6px 10px 0;border-radius:0;background:none;color:var(--muted);font-size:.72rem;white-space:normal;overflow:visible;opacity:1;text-align:center}
}
@media(max-width:480px){
 .topbar{flex-wrap:wrap;justify-content:center;row-gap:8px}
 .rd-sum{white-space:nowrap}
 /* The wrapped bar puts Readability & theme on the left, so its panel would open off-screen when
    anchored to the button's right edge: anchor it to the full-width bar and centre it instead. */
 .rd{position:static}
 .rd-body{left:0;right:0;margin-inline:auto}
}
@media(max-width:360px){.rm-nl{letter-spacing:.01em;font-size:.62rem;overflow-wrap:normal}}
/* Until the app has started, the page frame keeps its full height and the footer stays hidden,
   so nothing jumps when the first page renders (this was a 0.93 layout shift on phones). */
.booting main{min-height:100dvh}
.booting .closing-rule,.booting footer,.booting #footer-rotator{visibility:hidden}
/* Pictures fade in once loaded, on a soft placeholder tint, instead of popping in. */
.img-figure .lb-open,.fr-slide,.lb-figure{background:color-mix(in srgb,var(--bd2) 45%,transparent)}
.img-figure img,.fr-slide img,.lb-figure img{opacity:0;transition:opacity .45s ease}
.img-figure img.is-loaded,.fr-slide img.is-loaded,.lb-figure img.is-loaded{opacity:1}
@media (prefers-reduced-motion:reduce){.img-figure img,.fr-slide img,.lb-figure img{transition:none}}
/* Footer pictures fill their wide box (the grid row used to grow to the picture's own height, so
   only the sky at the top showed) and focus slightly below the middle, where the landscape is. */
.fr-stage{grid-template:minmax(0,1fr)/minmax(0,1fr)}
.fr-slide{min-height:0;min-width:0;height:100%}
.fr-slide img{object-position:center 62%}
/* Poem pictures show their whole 3:2 frame instead of a thin centre strip. */
.poetry-figure img,#po .poetry-figure img{max-height:none;aspect-ratio:3/2;object-position:center 60%}
/* Card rows line up: every carousel caption has the same height (title up to 2 lines, place 1 line),
   so the controls and everything below them sit at the same height across a row. The full caption
   stays readable in the enlarged view. */
.carousel .car-slide figcaption{box-sizing:border-box;height:calc(4.5em + 18px);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;line-height:1.5}
.carousel .car-slide figcaption b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.carousel .car-slide figcaption span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* A slide never grows wider than its card (long captions used to push it past the right edge). */
.car-stage{grid-template-columns:minmax(0,1fr)}
.car-slide{min-width:0}
/* Atlas pictures share one 3:2 frame so cards in a row line up. */
.atlas-study .car-slide img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
/* Contrast: credits stay readable on the placeholder tint (WCAG 4.5:1). */
.fr-credit{opacity:1}
@media(max-width:760px){.img-corner{color:color-mix(in srgb,var(--muted) 80%,#000)}}
/* Atlas country card: people, languages and religion (CIA World Factbook) */
.country-facts{margin:18px 0 8px;padding:16px 18px;border:1px solid var(--bd2);border-radius:14px;background:var(--bg);text-align:left}
.country-facts h3{margin:0 0 10px;font-size:.95rem;text-align:center}
.cf-name{margin:12px 0 6px;font-size:.85rem}
.cf-pop{margin:0 0 10px;font-size:.85rem}.cf-pop span{color:var(--muted)}
.cf-group h4{margin:10px 0 6px;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cf-group h4 small{letter-spacing:0;text-transform:none;font-weight:400}
.cf-group ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cf-group li{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:10px;align-items:center;font-size:.82rem;line-height:1.45}
.cf-group li small{grid-column:2;color:var(--muted);font-size:.74rem}
.cf-text{grid-column:2}
.cf-bar{grid-column:1;grid-row:1;height:6px;border-radius:3px;background:color-mix(in srgb,var(--bd2) 70%,transparent);overflow:hidden}
.cf-bar i{display:block;height:100%;background:var(--gold);border-radius:3px}
.cf-source{margin:12px 0 0;font-size:.72rem;line-height:1.5;color:var(--muted);text-align:right}
.cf-source a{color:inherit}
.cf-plain li{display:block}

/* Owner's way in to the visit statistics (Vercel dashboard, behind Vercel login): a faint dot in the
   footer's bottom-right corner, with a full-size tap area. */
.owner-stats{position:absolute;right:0;bottom:0;z-index:2;width:28px;height:28px;display:grid;place-items:center}
.owner-stats span{width:5px;height:5px;border-radius:50%;background:var(--bd2);transition:background .2s}
.owner-stats:hover span,.owner-stats:focus-visible span{background:var(--muted)}
#stats-tog.on{border-color:var(--gold)}
.rd-note{font-size:.8em;color:var(--muted)}
.rd-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* Phone feedback round 1, group A (review/phone-feedback-20261004/TO_FIX.md). */

/* ── 16. Settings: a cog, not a bar. Same <details>, parked in the top bar (desktop) or the phone bar. ── */
.topbar{margin:0 auto 10px;min-height:0;gap:12px}
details.rd{position:relative;flex:0 0 auto;width:auto;max-width:none;margin-left:auto}
details.rd>summary.rd-sum{position:relative;display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:1px solid var(--bd2);border-radius:50%;background:var(--bg2);color:var(--sand2);list-style:none;cursor:pointer;white-space:nowrap;transition:color .14s,border-color .14s}
details.rd>summary.rd-sum::-webkit-details-marker{display:none}
details.rd>summary.rd-sum:hover,details.rd[open]>summary.rd-sum,details.rd>summary.rd-sum:focus-visible{color:var(--gold);border-color:var(--gold-dim);border-radius:50%}
details.rd[open]>summary.rd-sum .rd-cog{transform:rotate(45deg)}
.rd-cog{transition:transform .25s}
@media(prefers-reduced-motion:reduce){.rd-cog{transition:none}}
.rd-dot{position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 2px var(--bg2)}
.topbar:has(.local-save.save-error) .rd-dot,.mobile-nav-bar:has(.local-save.save-error) .rd-dot{background:var(--no)}
details.rd>.rd-body{position:absolute;top:calc(100% + 8px);right:0;left:auto;margin:0;z-index:130;width:min(420px,calc(100vw - 24px));max-width:none;max-height:min(75dvh,calc(100dvh - 96px));overflow:auto;overscroll-behavior:contain;background:var(--bg2);padding:16px 18px 14px;box-shadow:0 22px 60px #0007}
details.rd:not([open])>.rd-body{display:none}
.rd-title{margin:0 0 12px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dim)}
.rd-body .local-save{display:flex;width:fit-content;max-width:100%;order:0}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
  .topbar{display:none}
  .mobile-nav-bar{grid-template-columns:auto minmax(0,1fr) auto}
  details.rd{margin-left:0}
  details.rd>summary.rd-sum{width:48px;height:48px;min-height:48px;border-radius:12px;border-color:var(--bd)}
  details.rd>summary.rd-sum:hover,details.rd[open]>summary.rd-sum,details.rd>summary.rd-sum:focus-visible{border-radius:12px}
  details.rd>.rd-body{z-index:130}
}
@media(max-width:520px){
  .mobile-nav-bar{grid-template-columns:auto minmax(0,1fr) auto}
  .rd{flex:0 0 auto}.rd-sum{width:48px}
  .rd-row{grid-template-columns:1fr}
}

/* ── 7c. The Today group has one item: no label, it would be the third "Today" ── */
.mobile-nav-solo{grid-column:1/-1}
.mobile-nav-solo>div{grid-template-columns:1fr}

/* ── 1a. Floating feedback and share buttons ── */
.fab-dock{position:fixed;z-index:50;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:row;gap:8px;padding:4px;border-radius:999px;background:color-mix(in srgb,var(--bg,#f5f4ef) 70%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.fab{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--bd);border-radius:50%;background:var(--bg2);color:var(--sand2);cursor:pointer;box-shadow:0 4px 14px #0003;opacity:.9;touch-action:manipulation;transition:color .14s,border-color .14s,opacity .14s}
.fab:hover,.fab:focus-visible{opacity:1;color:var(--gold);border-color:var(--gold-dim)}
.fab:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
body[data-panel="contact"] #fab-feedback{display:none}
/* the toast and the footer clear the buttons */
.toast{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 52px)}
footer{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
.owner-stats{right:auto;left:0}
@media print{.fab-dock{display:none!important}}

/* ── 6. Footer sitemap: three aligned columns on every screen ── */
footer .fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px clamp(12px,3vw,40px);justify-content:normal;align-items:start;width:100%}
footer .fcol{min-width:0;gap:0}
footer .fcol b{margin-bottom:6px;font-size:.66rem;letter-spacing:.12em;overflow-wrap:anywhere}
footer .fcol .fcol-sub{margin-top:14px}
footer .flink{display:block;min-height:0;padding:5px 0;font-size:.8rem;line-height:1.3;text-align:left;overflow-wrap:anywhere}
footer .flink-inline{display:inline;min-height:0;padding:0;border:0;background:none;color:var(--gold);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left}
footer .flink-inline:hover{color:var(--gold2)}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
  footer .fgrid{gap:16px 12px}
  footer .flink{min-height:34px;display:flex;align-items:center;padding:3px 0;font-size:.74rem}
  footer .fcol b{font-size:.62rem}
}

/* ── 7a. Cookie, sources and disclaimer notes ── */
.fnotes{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px clamp(12px,3vw,40px);margin-top:24px;padding-top:16px;border-top:1px solid var(--bd2);font-size:.74rem;line-height:1.55;color:var(--muted)}
.fnote{min-width:0}
.fnote b{display:block;margin-bottom:6px;font-size:.66rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--sand2)}
.fnote p{margin:0 0 6px}
.fnote a{color:var(--gold);text-underline-offset:3px;overflow-wrap:anywhere}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){.fnotes{grid-template-columns:1fr;font-size:.72rem}}

/* ── 28. Banner source line: what, when, who, licence and source are all visible and linked ── */
.fr-credit{max-width:min(var(--content,1200px),calc(100% - 24px));padding-inline:12px;opacity:1;font-size:.7rem;line-height:1.55;overflow-wrap:anywhere}
.fr-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.fr-credit a:hover,.fr-credit a:focus-visible{color:var(--gold)}

/* ── 7b. Contact form ── */
.contact-form{display:grid;gap:6px;max-width:620px;margin:22px auto 8px;padding:0 2px}
.contact-form label{margin-top:10px;font-size:.78rem;font-weight:600;color:var(--sand2)}
.contact-form .inp{width:100%;font-size:16px;line-height:1.45;padding:12px 14px}
.contact-form textarea.inp{min-height:150px;resize:vertical}
.contact-form select.inp{min-height:48px}
.ct-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.ct-note{margin:12px 0 0;font-size:.74rem;line-height:1.55;color:var(--muted)}
.ct-note a{color:var(--gold);text-underline-offset:3px}
.ct-actions{margin-top:8px}
.ct-actions .btn{min-height:48px;width:100%}
.ct-status{min-height:1.4em;margin-top:8px;font-size:.85rem;line-height:1.5;color:var(--sand2);outline:none}
.ct-status[data-kind="ok"]{color:var(--ok);font-weight:600}
.ct-status[data-kind="error"]{color:var(--no)}
.ct-status .ct-mail{display:inline-block;margin-top:8px;text-decoration:none;text-align:center}
@media(min-width:600px){.ct-actions .btn{width:auto;min-width:200px}}
details.rd[open],details.rd{box-shadow:none;background:transparent;border:0}
.rd-title{margin-bottom:8px}
.rd-body .local-save{margin:0 0 14px}
footer button.flink,footer a.flink{margin:0;border:0;background:none;font-family:inherit;line-height:1.3;width:100%;appearance:none}

/* The menu sheet anchors to the whole phone bar (not the narrower menu button), so it can never
   open off-screen to the left now that the cog shares the bar. */
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
  .mobile-menu{position:static}
  .mobile-nav-panel{top:calc(100% + 8px);right:max(12px,env(safe-area-inset-right));left:auto;width:min(570px,calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)))}
  details.rd{position:static}
  details.rd>.rd-body{right:max(12px,env(safe-area-inset-right));left:auto;width:min(420px,calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)))}
}
/* Sidebar: the one-item Today group needs no label above its own item (7c). */
.nav-group[data-group="today"]>summary{display:none}

/* Cormorant Garamond draws old-style figures by default, so 1 reads as I and 0 as o ("IOO" for 100 on
   the stat tiles, "I O" for 01 on the poetry spine). Use full-height digits everywhere. */
:root{font-variant-numeric:lining-nums}

/* Phones in landscape get the phone layout (every "max-width:820px" query also matches a short touch
   screen in landscape). On a ~390 px tall screen the pinned bar is kept compact: no "Menu" label line. */
@media(max-height:500px) and (orientation:landscape) and (pointer:coarse){
 .mobile-nav-bar{padding-block:4px}
 .mobile-menu>summary{min-height:44px;padding-block:3px}
 .mobile-menu-copy small{display:none}
 /* Nothing should be taller than the screen: pictures are capped at one screen (keeping their shape),
    the tribe maps sit two per row, and the flashcard drops its portrait minimum height. */
 .img-figure .lb-open img,.car-slide img{max-height:calc(100dvh - 96px);width:auto;max-width:100%;margin-inline:auto}
 .tribemap-atlas{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tribemap svg{min-height:0;max-height:calc(100dvh - 120px)}
 .fcf{min-height:0;padding-block:14px}
}
/* 1a, follow-up: the floating buttons slide away while scrolling down (04-chrome.js). */
.fab-dock{transition:transform .25s ease,opacity .25s ease}
.fab-dock.fab-away{transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.fab-dock{transition:opacity .2s}.fab-dock.fab-away{transform:none}}

/* Text-flow wrappers (.sn sentence boxes, .nw no-wrap runs) are spans, so a label rule such as
   ".et-tip span" or ".c-lit span" also styled every sentence (the Etiquette tip became spaced italic
   capitals). The wrappers always take their text styling from the paragraph they sit in; the doubled
   class outranks those "parent span" label rules. Labels inside a wrapper keep their own style. */
.sn.sn,.nw.nw{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
/* Long Dutch words in narrow spots ("Beeldverantwoording" in the footer columns, the Daily plan stage
   names) were cut anywhere; the page language follows the interface, so let the browser hyphenate. */
footer .fcol a,footer .fcol button,.stepper,.stepper *{-webkit-hyphens:auto;hyphens:auto}
/* Daily plan roadmap: the longest stage name ("KORTE UITWISSELINGEN") broke mid-word on phones; the
   label scales with the screen so whole words fit (break-anywhere stays only as a last resort). */
@media(max-width:480px){.rm-nl{font-size:min(.84rem,2.85vw);letter-spacing:.02em}}
/* Section dividers (.orn): the 40% fade was meant for the ornamental lines but also faded the label text
   (page eyebrows, the tappable topic headers on Word list, Etiquette and Pitfalls) to about 1.6:1.
   Only the lines fade now; the label keeps its full colour (5.2:1). */
.orn{opacity:1}
.orn::before,.orn::after{opacity:.4}
.nb-cat>summary::before{font-size:1.15rem;color:var(--gold)}

/* Phone feedback round 1, group B (review/phone-feedback-20261004/TO_FIX.md). */

/* ── Items 15 + 4: page banners are full width on every device, height capped, fading softly into the page
   at the bottom (like the footer picture fades up). The caption and credit sit INSIDE the picture,
   bottom-right; 00-media.js (bannerTone) sets data-tone on the figure so the text is black on a light
   area and white on a dark one. To go back to the boxed banner: add class "banner-boxed" to <html>
   (or delete this whole section). Every rule below is scoped to :root:not(.banner-boxed). */
:root{--pb-bleed:16px;--pb-h-min:180px;--pb-h-max:380px;--pb-fade-from:60%}
@media(min-width:821px) and (min-height:501px),(min-width:821px) and (pointer:fine){:root{--pb-bleed:3vw}}
:root:not(.banner-boxed) .page-banner{max-width:none;width:calc(100% + 2*var(--pb-bleed));margin:0 calc(-1*var(--pb-bleed)) 10px}
:root:not(.banner-boxed) .page-banner-figure{position:relative;border:0;border-radius:0;background:transparent;overflow:hidden}
:root:not(.banner-boxed) .page-banner-figure .lb-open{height:clamp(var(--pb-h-min),26vw,var(--pb-h-max));background:transparent;
 -webkit-mask-image:linear-gradient(to bottom,#000 var(--pb-fade-from),transparent);mask-image:linear-gradient(to bottom,#000 var(--pb-fade-from),transparent)}
:root:not(.banner-boxed) .page-banner-figure picture{height:100%}
:root:not(.banner-boxed) .page-banner-figure img{height:100%;max-height:none;aspect-ratio:auto;object-fit:cover}
@media(max-height:500px) and (orientation:landscape){:root{--pb-h-min:96px}:root:not(.banner-boxed) .page-banner-figure .lb-open{height:clamp(var(--pb-h-min),30vh,150px)}}
/* The old corner credit is replaced by the caption block below. */
.page-banner-figure .img-corner{display:none!important}
.page-banner-figure figcaption.pb-cap{position:absolute;right:max(14px,var(--pb-bleed));bottom:10px;left:auto;max-width:min(78%,34rem);margin:0;padding:0;display:grid;gap:1px;justify-items:end;
 text-align:right;font-size:.68rem;line-height:1.35;pointer-events:none;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.65),0 0 8px rgba(0,0,0,.4)}
.page-banner-figure figcaption.pb-cap b,.page-banner-figure figcaption.pb-cap .img-credit,.page-banner-figure figcaption.pb-cap .img-kind{color:inherit;opacity:1;font-weight:500;text-align:right}
.page-banner-figure figcaption.pb-cap b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.page-banner-figure figcaption.pb-cap .img-credit{font-size:.92em;font-weight:400}
.page-banner-figure[data-tone="light"] figcaption.pb-cap{color:#111;text-shadow:0 0 5px rgba(255,255,255,.7),0 0 10px rgba(255,255,255,.45)}
.page-banner-figure[data-tone="light"] figcaption.pb-cap .img-credit{color:#111}
@media(max-width:760px){.page-banner-figure figcaption.pb-cap{font-size:.64rem;max-width:86%;bottom:8px}}

/* ── Item 8: "About this material & references" is a small, quiet pill straight under the title block
   instead of a big bordered box, so content is in view sooner. Finger-sized on touch screens. */
.reading-notes,.panel.on>.reading-notes{margin:2px auto 12px;padding:0 12px;border-radius:999px;font-size:.78rem;width:fit-content;max-width:min(76ch,100%)}
.reading-notes summary{min-height:32px;font-size:.78rem;font-weight:500;color:var(--muted)}
.reading-notes[open],.panel.on>.reading-notes[open]{border-radius:12px;padding:0 14px 6px;width:100%}
.reading-notes p{margin:.4rem 0}
@media(pointer:coarse){.reading-notes summary{min-height:44px}}
.panel.on>.orn{margin-top:0}
.panel.on>.pt,.panel.on>.centre-head{margin-top:6px}
.panel.on>.psub{margin-bottom:6px}

/* ── Item 11a: less empty space between the end of the page and the closing poem. */
.panel.on{padding-bottom:max(14px,env(safe-area-inset-bottom))}
.closing-rule{margin-top:6px}
.fq{padding-block:22px 18px}
.footer-rotator{margin-bottom:10px}

/* ── Item 2: the Today title greets in Arabic first, in the Arabic face, right to left. */
.today-hero h2 .today-ar{display:block;font-family:var(--arabic);font-size:calc(1.35em * var(--arscale,1));font-weight:500;line-height:1.5;color:var(--gold);letter-spacing:0;margin-bottom:2px}
.today-hero h2{text-wrap:balance}

/* ── Item 5: the card that "Find it in ..." lands on flashes a highlight so you can see where you are. */
@keyframes spot-flash{0%,60%{box-shadow:0 0 0 3px var(--gold),0 0 26px color-mix(in srgb,var(--gold) 45%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
.spot-hl{animation:spot-flash 3.2s ease-out;border-radius:14px}
@media(prefers-reduced-motion:reduce){.spot-hl{animation:none;outline:3px solid var(--gold);outline-offset:2px}}

/* ── Item 20: poetry pictures show as photographed, with no placeholder tint behind them. The footer
   rotator's gold multiply overlay and sepia filter (media.css) were removed for the same item. */
#po .poetry-figure .lb-open{background:transparent}
.page-banner-figure figcaption.pb-cap .img-kind{display:none}

/* History hero: the credit line under the picture already names the source, so the in-picture corner
   credit (which on phones fell under the title overlay) is hidden. */
.hist-hero .img-corner{display:none!important}
/* Carousel captions: the title is set larger than the caption, so a fixed 4.5em box cut its second
   line in half. A minimum height keeps rows even (the title is still clamped to two lines). */
.carousel .car-slide figcaption{height:auto;min-height:calc(4.5em + 18px)}
/* Item 4, follow-up: over busy pictures (handwriting, façades) the caption needs a soft backing to stay
   readable. Dark behind white text, light behind black text, chosen by the same brightness test. */
.page-banner-figure figcaption.pb-cap{padding:3px 8px 4px;border-radius:8px;background:rgba(12,10,8,.38);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.page-banner-figure[data-tone="light"] figcaption.pb-cap{background:rgba(250,248,242,.62)}
/* Islamic art, museum objects: every object gets the same picture frame (a later generic picture rule
   let tall objects grow, so the three cards were ragged and the credit badge stuck out past the image).
   The object is fitted inside the frame; the badge sits in the frame's corner. */
.museum-gallery .museum-figure img{width:100%;height:clamp(220px,22vw,300px);max-height:none;object-fit:contain;padding:14px;box-sizing:border-box}
.museum-gallery .museum-figure{display:flex;flex-direction:column}
.museum-gallery .museum-figure figcaption{flex:1}
/* Picture viewer on a short landscape phone: picture left, caption right (scrolls inside its column), nothing below the fold. */
@media(max-height:500px) and (orientation:landscape) and (pointer:coarse){
  #media-dialog.lightbox{padding:8px 12px 10px}
  .lb-bar{top:-8px;padding:2px 0 6px}
  .lb-figure{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;align-items:center}
  .lb-figure img{max-height:calc(94dvh - 64px);margin:0 auto}
  .lb-figure figcaption{margin:0;text-align:left;max-height:calc(94dvh - 64px);overflow-y:auto;font-size:.8rem;line-height:1.45}
}

/* Phone feedback round 1, group C (review/phone-feedback-20261004/TO_FIX.md). */

/* ---- Today: stat explanations, progress and story summaries ---- */
.today-stat-help{grid-column:1/-1;margin:4px 0 0;font-size:.74rem;line-height:1.4;color:var(--muted)}
.journal-progress>summary,.visual-story.today-story>summary{display:list-item}
.journal-progress>summary span{float:none;display:block;margin:2px 0 0;font-size:.78rem}
.visual-story>summary .sn,.visual-story>summary .nw,.journal-progress>summary .sn,.journal-progress>summary .nw{display:inline;margin:0;color:inherit;font-size:inherit}
.visual-story>summary>span:not(.sn):not(.nw){display:block;margin:2px 0 0}
.journal-progress{margin-bottom:0;border-bottom:0}
.journal-progress+.today-story{margin-top:0;border-top:1px solid var(--bd2)}
.journal-progress[open]>summary{padding-bottom:6px}
.today-words .word-listen{cursor:default}
.today-words .word-listen .listen-pair{justify-content:flex-start;margin-top:2px}
.today-words .word-listen .listen-btn{font-size:.8rem;padding:.25rem .6rem;min-height:36px}
.pronunciation-actions .listen-pair{justify-content:center}

/* ---- Flashcards: practice-set strip, deck selector, tighter bands ---- */
.session-strip small{font-size:.76rem;line-height:1.35;color:var(--muted);margin-top:2px;max-width:46ch}
.band-deck{display:flex;align-items:center;gap:var(--s3);justify-content:center;flex-wrap:wrap;max-width:var(--wide);margin:0 auto 4px;padding:6px 0}
.band-deck[hidden],#fc-topic-band[hidden],#fc-view-band[hidden]{display:none}
.band-deck .pill.on{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.band-topic,.band-view{margin-top:0;margin-bottom:4px;padding-block:6px}
.band-view{margin-bottom:var(--s3)}
.session-strip{margin-bottom:8px}
.fc-listen{margin:4px 0 2px;display:flex;justify-content:center}
.fc-listen:empty{display:none}
.qz-listen{margin-top:10px;display:flex;justify-content:center}
.qz-listen:empty{display:none}
@media(max-width:600px){.band-deck,.band-topic,.band-view{gap:6px}.band-l{flex-basis:100%;text-align:center;margin-bottom:-2px}}

/* ---- Sentences: listen, hint, tighter feedback ---- */
.sb-listen{display:flex;justify-content:center;margin:10px 0 6px}
.sb-listen:empty{display:none}
.sb-hint{margin:0 auto 8px}
.sb-hint:empty{display:none}
.sb-hintline{font-size:.88rem;color:var(--sand2);margin:2px 0}
.sb-wrap .sb-slots{margin-bottom:12px}
.sb-wrap .sb-bank{margin-bottom:8px;min-height:0}
.sb-wrap #sb-fb:empty{display:none}
.sb-wrap #sb-fb .fb{margin-bottom:8px}
.sb-fb-acts{margin-top:8px}
.sb-wrap .sb-goal{margin-bottom:12px}

/* ---- Hard words panel ---- */
.hard{max-width:820px;margin:0 auto}
.hard-auto{margin:var(--s4) 0;padding:var(--s3) var(--s4);border:1px solid var(--bd2);border-radius:var(--r4);background:var(--bg2);text-align:center}
.hard-auto h3{margin:0 0 8px;font-size:var(--t-sm);font-weight:600}
.hard-auto-help{margin:8px auto 0;max-width:60ch;font-size:.8rem;line-height:1.5;color:var(--muted)}
.hard-go{align-items:center;gap:var(--s3);margin:var(--s4) 0}
.hard-count{font-size:.85rem;color:var(--muted)}
.hard-empty{text-align:center;color:var(--muted);margin:var(--s5) auto;max-width:48ch}
.hard-group{margin:var(--s4) 0}
.hard-group h3{font-size:var(--t-sm);margin:0 0 6px;display:flex;gap:8px;align-items:baseline}
.hard-group h3 span{font-size:.78rem;color:var(--muted);font-weight:400}
.hard-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:10px 0;border-top:1px solid var(--bd2)}
.hard-ar{grid-column:1/-1;font-family:var(--arabic);font-size:calc(1.4rem * var(--arscale));color:var(--gold);line-height:1.6;text-align:right}
.hard-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.hard-main b{font-weight:600}
.hard-main span{font-size:.85rem;color:var(--muted)}
.hard-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
@media(max-width:600px){.hard-row{grid-template-columns:1fr}.hard-ar{text-align:start}.hard-acts{justify-content:flex-start}}
.today-words .listen-pair{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;padding:0;border:0;background:none;gap:6px;margin-top:2px}
.today-words .word-listen .listen-pair{justify-content:flex-start}
/* The chip group inside each band carried the generic .row bottom margin (18px), so the band centred its
   label against chips + margin and the PRACTISE / TOPIC / VIEW labels sat ~9px low. */
.band-deck>.row,.band-topic>.row,.band-view>.row{margin-bottom:0}

/* Today, Your progress: the unit sits right after its number ("0 reviews") instead of at the far edge,
   and every stat stacks from the top so the labels in a row line up. */
.today-stat{grid-template-columns:auto 1fr;align-content:start;column-gap:6px}
.today-stat small{grid-column:auto;text-align:left;align-self:end;padding-bottom:2px}
/* Daily plan rows on phones: the meaning sits under the Arabic, aligned with it (its old indent assumed a
   14px tick; the tick is a 44px touch target). */
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
 .dw{display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"k a t" "k e e";column-gap:var(--s3);row-gap:2px;align-items:center}
 .dw>.tick{grid-area:k}.dw>.dw-a{grid-area:a}.dw>.dw-t{grid-area:t}
 .dw>.dw-e{grid-area:e;padding-left:0}
}

/* Phone feedback round 1, group D (review/phone-feedback-20261004/TO_FIX.md). */

/* ---- Alphabet: single column wherever the two-column layout does not fit (phone landscape and
   small tablets kept the wide layout and cut the detail box off on the right). ---- */
@media(max-width:1000px){
  .alphabet-workspace{display:flex;flex-direction:column;max-width:100%}
  .alphabet-workspace>.trace{order:-1;position:static;width:100%;min-width:0}
  .alphabet-workspace>.al-grid{grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
}
@media(max-width:640px){.alphabet-workspace>.al-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:420px){.alphabet-workspace>.al-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
#al-trace{scroll-margin-top:12px}
/* On touch screens :hover sticks to whatever is under the last tap, which looked like a second
   selected letter when the layout moved. Only a real pointer gets the hover look. */
@media(hover:none){
  .al:not(.on):hover{border-color:var(--bd);background:var(--bg2);transform:none}
  .al.on:hover{transform:none}
}
.al-s{min-height:2.9em}
.trace-info .listen-pair{margin-inline:.25rem}

/* ---- Play all ---- */
.play-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s2) var(--s3);margin:0 auto var(--s4);max-width:var(--wide)}
.play-btn{min-height:44px;padding-inline:1.2rem}
.play-btn.on{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.play-slow{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--t-sm);cursor:pointer;min-height:44px}
.play-hint{flex:1 1 100%;text-align:center;font-size:var(--t-xs);color:var(--muted)}
.al.playing,.number-card.playing{border-color:var(--gold);background:var(--glow);box-shadow:0 0 0 2px var(--gold)}
@media(prefers-reduced-motion:no-preference){.al.playing,.number-card.playing{transition:box-shadow .2s,background .2s}}

/* ---- Numbers ---- */
.number-east{max-width:62ch;margin:0 auto var(--s3);text-align:center;font-size:var(--t-sm);line-height:1.65;color:var(--sand2);text-wrap:pretty}
.number-card .listen-btn{padding:.3rem .55rem;font-size:.8rem}
.number-card .number-listen{width:100%}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
  /* 20 tiles in rows of 3: centre the last two */
  #p-numbers .number-card:nth-last-child(2):nth-child(3n+1){grid-column:2/span 2}
}

/* ---- Word list ---- */
#p-notebook .psub{margin-bottom:var(--s4)}
#nb-searchrow{margin:0 0 var(--s3);justify-content:center}
#nb-searchrow .nb-search{max-width:420px}
.nb-listen{margin-top:var(--s3)}
.nb-listen .listen-pair{justify-content:flex-start}

/* ---- Study book: six tiles, aligned button grid, sheet that fits ---- */
.sbk-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:520px){.sbk-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{padding:14px}}
.bk-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);max-width:520px;margin:0 auto var(--s4)}
.bk-actions .btn{width:100%;min-height:48px;padding-inline:10px;white-space:normal;line-height:1.3;text-align:center}
.bk-actions .bk-wide{grid-column:1/-1}
.bk-warn{margin:0;text-align:center;font-size:var(--t-xs);color:var(--muted);line-height:1.5}
.bk-sheet-actions{margin-top:22px}
/* Sheet on screen: fill the width, no sideways scrolling. Printing is a separate layout below. */
@media screen{
  .sheet{max-width:100%;overflow:visible;padding:var(--s4)}
  .sheet table{width:100%;min-width:0;table-layout:fixed}
  .sheet th,.sheet td{overflow-wrap:anywhere}
}
@media screen and (max-width:640px){
  .sheet{padding:var(--s3)}
  .sheet table{font-size:.74rem}
  .sheet th{letter-spacing:.04em;padding:6px 4px;font-size:.62rem}
  .sheet td{padding:7px 4px}
  .sheet .sar{font-size:1.25rem}
  /* the writing boxes do not fit a phone screen; the printed page still has all three */
  .sheet .prac,.sheet thead th:nth-child(4){display:none}
  .sheet thead th:nth-child(1){width:34%!important}
  .sheet thead th:nth-child(2){width:28%!important}
  .sheet thead th:nth-child(3){width:38%!important}
  .sheet .sar{overflow-wrap:normal;word-break:normal}
}
@page{size:A4;margin:14mm}
@media print{
  html,body{background:#fff!important}
  #p-book:has(.sheet) #bk>:not(#sheet-out){display:none!important}
  .sheet{width:100%;max-width:none;padding:0;box-shadow:none;border-radius:0;overflow:visible}
  .sheet table{width:100%;min-width:0;table-layout:fixed;font-size:11pt}
  .sheet tr{break-inside:avoid}
  .sheet thead{display:table-header-group}
  .sheet .prac{height:9mm}
}

/* ---- Expressions ---- */
.ex-sec{margin-bottom:var(--s5);padding-top:0}
.ex-head{margin-bottom:var(--s3)}
.ex-listen{display:flex;justify-content:center;width:100%}
.ex-card .listen-btn{min-height:40px}

/* ---- Etiquette ---- */
.et-item{padding:var(--s3) var(--s5) var(--s4);gap:0;align-content:start}
.et-item::before{margin-bottom:var(--s1);line-height:1.2;font-size:var(--t-md)}
.et-item .et-body{padding:0}
.et-item .et-head{margin-top:0}
@media(max-width:520px){.et-item{padding:var(--s3) var(--s4) var(--s4)}}
@media screen and (max-width:640px){.sheet th{overflow-wrap:normal;word-break:normal;font-size:.56rem}}

/* Word list cards: the "Used in Saudi Arabia" tag used to squeeze a two-word Arabic phrase onto two
   lines on phones. The phrase keeps its width; the tag drops to its own line when there is no room. */
.nb-cat article.cut>div:first-child{flex-wrap:wrap}
.nb-cat article.cut .c-ar{flex:1 0 auto;max-width:100%}
.nb-cat article.cut .tag{flex:0 0 auto;margin-left:auto;white-space:nowrap}

/* Numbers grid: equal cards, and a short last row centres itself whatever the count (the old
   nth-child centring was written before the 12345 card and made that card wider). */
#p-numbers .al-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
#p-numbers .al-grid>.number-card{flex:0 0 calc((100% - 3*14px)/4);grid-column:auto;min-width:0}
#p-numbers .number-card .al-n{overflow-wrap:anywhere}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
 #p-numbers .al-grid>.number-card{flex-basis:calc((100% - 2*14px)/3)}
}
@media(max-width:480px){
 #p-numbers .al-grid{gap:10px}
 #p-numbers .al-grid>.number-card{flex-basis:calc((100% - 10px)/2)}
}
/* Expressions cards: ✓ and ✗ move as one pair (with a long region tag the ✗ used to drop alone). */
.ex-acts .ex-ticks{display:inline-flex;gap:5px;flex:0 0 auto}
/* Calligraphy script cards on phones: the two actions side by side, "Set as app font" full width below
   (it used to wrap alone onto its own row). */
@media(max-width:480px){
 .cal-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .cal-acts>:last-child{grid-column:1/-1}
}

/* ══════════ Round 2 (phone feedback 05.10.2026), loaded last ══════════ */

/* Listen / Slow: a quiet music note and a smaller label; the pressable area stays 40 px tall. */
.listen-btn{display:inline-flex;align-items:center;justify-content:center;gap:.3rem;min-height:40px;padding:.2rem .7rem;font-size:.76rem;letter-spacing:.01em;color:var(--sand2);border-color:var(--bd2)}
.listen-btn .lnote{font-style:normal;font-size:.95rem;line-height:1;opacity:.6;transition:opacity .15s}
.listen-btn:hover,.listen-btn:focus-visible{background:var(--glow);border-color:var(--bd)}
.listen-btn:hover .lnote,.listen-btn:focus-visible .lnote{opacity:1}

/* Today word cards: Arabic, pronunciation, buttons spread evenly top to bottom; both buttons on one row. */
.today-words .word-listen{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:10px;padding:16px 10px 14px;text-align:center}
.today-words .word-listen b,.today-words .word-listen small{display:block;width:100%;text-align:center}
.today-words .word-listen .listen-pair{justify-content:center;flex-wrap:nowrap;gap:5px;margin-top:0}
.today-words .word-listen .listen-btn{min-height:40px;padding:.2rem .5rem;font-size:.72rem}

/* Progress tiles: two of them turn over to show the words behind the number. */
.today-stats{gap:10px}
.today-stats .today-stat{border:0;background:none;padding:0}
.today-stats .today-stat-plain{border:1px solid var(--bd2);border-radius:14px;padding:12px 14px}
.stat-flip{perspective:900px}
.stat-inner{display:grid;transition:transform .6s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}
.stat-flip[data-flipped="true"] .stat-inner{transform:rotateY(180deg)}
.stat-face{grid-area:1/1;display:grid;grid-template-columns:auto 1fr;align-content:start;align-items:end;column-gap:6px;row-gap:2px;width:100%;min-width:0;margin:0;padding:12px 14px;border:1px solid var(--bd2);border-radius:14px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.stat-face:hover,.stat-face:focus-visible{border-color:var(--gold-dim)}
.stat-face>span{grid-column:1/-1;font-size:.68rem;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.today-stat-link .stat-face{width:100%;height:100%}
.stat-back{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:6px;transform:rotateY(180deg);cursor:default;background:var(--bg2)}
.stat-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.stat-head>span{font-size:.68rem;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.stat-words{display:grid;gap:2px}
.stat-words span{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
.stat-words b{flex:0 0 auto;font-family:var(--arabic);font-size:calc(1rem * var(--arscale,1));font-weight:600;line-height:1.5;color:var(--gold)}
.stat-words small{display:block;min-width:0;overflow:hidden;font-size:.62rem;text-align:right;text-overflow:ellipsis;white-space:nowrap}
.stat-empty{margin:0;font-size:.72rem;line-height:1.45;color:var(--muted)}
.stat-go{align-self:flex-start;min-height:36px;padding:.2rem .8rem;border:1px solid var(--gold-dim);border-radius:999px;background:transparent;color:var(--gold);font:inherit;font-size:.74rem;cursor:pointer}
.stat-x{min-height:36px;padding:0 .2rem;border:0;background:none;color:var(--muted);font:inherit;font-size:.72rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media(prefers-reduced-motion:reduce){.stat-inner{transition:none}}

/* The three practice buttons under Last session: a little air between them. */
.today-routes{row-gap:14px}

/* Hero picture and Picture of the day: credit (or "Illustration") inside the picture, lower right, white at 80%. */
.dallah-hero-figure .lb-open,.today-photo-figure .lb-open{position:relative}
.dallah-hero-figure .img-corner,.today-photo-figure .img-corner{position:absolute;right:10px;bottom:9px;left:auto;max-width:calc(100% - 20px);margin:0;padding:0;border-radius:0;background:none;color:#fff;opacity:.8;font-size:.62rem;line-height:1.3;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.7),0 0 2px rgba(0,0,0,.45)}

/* Footer: a thin ornament above the sitemap, notes tidy, sources folded away. */
footer>.forn{margin:38px 0 22px}
.fnotes{border-top:0;margin-top:26px;padding-top:0}
.fnotes{grid-template-columns:repeat(2,minmax(0,1fr))}
.fsrc{position:relative;z-index:1;margin-top:20px;font-size:.74rem;line-height:1.55;color:var(--muted)}
.fsrc>summary{display:block;list-style:none;cursor:pointer;padding:6px 0}
.fsrc>summary::-webkit-details-marker{display:none}
.fsrc>summary .orn{margin:0}
.fsrc>summary .orn-d{display:inline-block;transition:transform .2s}
.fsrc[open]>summary .orn-d{transform:rotate(180deg)}
.fsrc-body{padding-top:10px}
.fsrc-body p{margin:0 0 6px}
.fsrc-body a{color:var(--gold);text-underline-offset:3px;overflow-wrap:anywhere}
.fsrc-body .fattr{margin-top:12px;font-size:.7rem;opacity:.8}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){.fnotes{grid-template-columns:1fr;gap:14px}}

/* Settings panel (cog): quieter button, five theme dots on one row, example words next to the sizes and fonts. */
details.rd>summary.rd-sum{width:40px;height:40px;min-height:40px;color:var(--muted);border-color:var(--bd2);background:transparent}
details.rd>summary.rd-sum .rd-cog{width:19px;height:19px}
details.rd>summary.rd-sum:hover,details.rd[open]>summary.rd-sum,details.rd>summary.rd-sum:focus-visible{color:var(--sand2);border-color:var(--bd)}
.rd-lw{display:flex;align-items:baseline;gap:10px;min-width:0}
.rd-ex{font-size:1.05rem;line-height:1.3;color:var(--sand);letter-spacing:0;text-transform:none}
.rd-ex-ar{font-family:var(--arabic);font-size:calc(1.2rem * var(--arscale,1))}
.rd-cur{font-size:.74rem;color:var(--muted);letter-spacing:0;text-transform:none}
.sw-set{flex-wrap:nowrap;gap:10px}
.sw{flex:0 0 auto;width:40px;height:40px;min-height:40px;padding:0;justify-content:center;border-radius:50%;font-size:0;line-height:0;gap:0}
.sw i{width:22px;height:22px}
.sw.on{border-color:var(--gold);box-shadow:0 0 0 2px var(--bg2),0 0 0 3.5px var(--gold)}

/* Picture of the day: the button sits centred between the picture card and the line below it (22 px each side). */
.today-photo{padding-bottom:2px}
.today-photo-figure{margin-bottom:22px}

/* Footer picture sits closer to the proverb above it (the picture's own top fade keeps a soft gap). */
footer{padding-top:14px}
.fq{padding-bottom:12px}

/* Numbers: the intro paragraphs sit close together, the worked example is centred. */
#p-numbers .psub{margin-bottom:8px}
.number-eg{display:flex;flex-direction:column;align-items:center;gap:2px;max-width:46ch;margin:6px auto 10px;text-align:center}
.number-eg-ar{font-family:var(--arabic);font-size:calc(1.5rem * var(--arscale,1));line-height:1.5;color:var(--gold)}
.number-eg>span:last-child{font-size:var(--t-sm);line-height:1.5;color:var(--sand2);text-wrap:pretty}

/* Today title: "Marhaba!" large, one rotating line under it, smaller so even the longest line stays within three lines of the old space. */
.today-hi{display:block}
.today-line{display:block;margin-top:.3em;font-size:.58em;font-weight:400;line-height:1.25;letter-spacing:-.01em;color:var(--sand2)}

/* Flip and link tiles fill their grid cell (the old .today-stat template is "auto 1fr" and aligns to the bottom). */
.today-stats .stat-flip,.today-stats .today-stat-link{display:flex;align-items:stretch}
.stat-inner{flex:1 1 auto;min-width:0}
.today-stat-link .stat-face{flex:1 1 auto}

/* Reviewer fixes: hidden tile faces never take taps; settings labels wrap instead of spilling; press areas stay 44 px. */
.stat-flip:not([data-flipped="true"]) .stat-back,.stat-flip[data-flipped="true"] .stat-front{pointer-events:none}
.rd-lw{flex-wrap:wrap;column-gap:8px;row-gap:0}
/* Label above the control at every width, as on phones (a side-by-side label column cut off the theme dots). */
.rd-row{grid-template-columns:minmax(0,1fr);gap:6px}
.rd-lw,.rd-l{text-align:left}
details.rd>summary.rd-sum::after{content:'';position:absolute;inset:-2px}
@media(pointer:coarse){.sw{width:44px;height:44px;min-height:44px}}

/* lead 08.10.2026 ─ text flow: sentences flow as ordinary text again. The old inline-block sentence boxes
   (balanced) split a two-line sentence into two half lines and pushed the next sentence to a new line, which
   Grimm read as "sentences broken in weird places". Short words stay glued to the next word (.nw), and
   paragraphs avoid a lone word on the last line (text-wrap pretty). */
.sn{display:inline;max-width:none;vertical-align:baseline;text-wrap-style:inherit}
body{text-wrap-style:pretty}
h1,h2,h3,h4,.psub,figcaption,summary{text-wrap-style:balance}

/* lead 08.10.2026 ─ footer: the three notes fold away under the sitemap as quiet labels. */
.fnotes.ffolds{display:flex;flex-direction:column;align-items:stretch;gap:0;margin-top:22px;padding-top:0;border-top:0;font-size:.74rem}
.ffold{margin:0}
.ffold>summary{min-height:40px;display:flex;align-items:center;justify-content:center;padding:0}
.ffold>summary .orn{gap:8px;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sand2)}
.ffold>summary .orn::before,.ffold>summary .orn::after{display:none}
.ffold>.fsrc-body{max-width:62ch;margin:0 auto;padding:4px 0 14px;text-align:center}

/* lead 08.10.2026 ─ contact: email route first while the form cannot send; the fallback button on its own line. */
.ct-offline{max-width:620px;margin:18px auto 0;padding:14px 16px;border:1px solid var(--bd2);border-radius:12px;text-align:center;font-size:.86rem;line-height:1.5;color:var(--sand2)}
.ct-offline p{margin:0 0 10px}
.ct-offline .ct-mail{display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-decoration:none}
.ct-status[data-kind="error"]>span{display:block}
.ct-status .ct-mail{display:flex;width:fit-content;min-height:44px;align-items:center;margin:10px 0 0}

/* lead 08.10.2026 ─ auto-Hard: settings row and the one-time Flashcards tip. */
.rd-autohard{flex-wrap:wrap;gap:6px}
.rd-pills{display:inline-flex;gap:4px}
.rd-pills .sb{min-width:40px;min-height:40px}
.rd-pills .sb.on{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.fc-tip{max-width:620px;margin:0 auto 18px;padding:14px 16px;border:1px solid var(--bd2);border-radius:12px;background:var(--bg3);text-align:center;font-size:.86rem;line-height:1.5}
.fc-tip p{margin:0 0 10px}
.fc-tip .row{margin-bottom:10px}
.fc-tip .fc-tip-ok{min-height:40px}

/* lead 08.10.2026 ─ one-time privacy notice: a calm card above the bottom edge, never a full-screen wall. */
.privacy-notice{position:fixed;z-index:60;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));max-width:560px;margin:0 auto;padding:16px 18px 14px;border:1px solid var(--bd);border-radius:14px;background:var(--bg2);color:var(--sand);box-shadow:0 10px 36px rgba(0,0,0,.35);font-size:.84rem;line-height:1.5}
.privacy-notice[hidden]{display:none}
.privacy-notice{max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain}
.privacy-notice p{margin:0 0 8px}
.privacy-notice p.pn-lead{margin-bottom:0} /* reads as one block with the question below it */
.privacy-notice .pn-title{font-family:var(--serif);font-size:1.15rem;color:var(--gold2);margin-bottom:6px}
.privacy-notice .pn-more{font-size:.76rem;color:var(--muted)}
.privacy-notice a{color:var(--gold);text-underline-offset:3px}
.pn-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:10px}
.pn-actions .btn{min-height:44px}
body.pn-on .fab-dock{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:no-preference){.privacy-notice:not([hidden]){animation:pn-in .32s ease-out both}}
@keyframes pn-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media print{.privacy-notice{display:none!important}}

/* codex-polish 08.10.2026 */
/* Quiet carousel dots retain a generous target on tablets with any pointer type. */
.car-dot{min-width:40px;min-height:40px;padding:0;flex:0 0 40px}
.car-dots{flex-wrap:wrap;justify-content:center;min-width:0}
.car-ctl{flex-wrap:wrap}
/* Atlas: a close row precedes the photo instead of covering its corner. */
#atlas-close.atlas-x{position:relative;inset:auto;display:grid;margin:0 0 var(--s2) auto;background:var(--bg2);flex-shrink:0}
#atlas-close.atlas-x:hover,#atlas-close.atlas-x:focus-visible{background:var(--bg3)}
#map-info .country-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--s3);text-align:start;margin-top:var(--s3)}
#map-info .country-status{display:inline-block;margin-top:0;padding:var(--s1) var(--s2);border:1px solid var(--bd2);border-radius:var(--r4);line-height:1.4;text-align:center}
#p-map .map-inset .map-lbl{font-size:9px;stroke-width:1.6px}
#p-map .map-inset-0 .map-lbl{font-size:10px;stroke-width:1.6px}
/* The detail header should start near the card edge, with room for Arabic ascenders. */
#tr-detail .tr-open,#dl-detail .dl-open{padding:var(--s4);margin-top:0}
#tr-detail .tr-open-grid{margin-top:var(--s4)}
#dl-detail .dl-open-phrase{margin:var(--s4) 0}
/* Poetry is read as whole verses, so the browser can balance the final line. */
#po{gap:var(--s4)}
#po .leaf-body{padding:var(--s4) var(--s4)}
#po .leaf-rule{padding-top:var(--s4)}
#po .leaf-orn{margin-bottom:var(--s2)}
#po .verse{margin-bottom:var(--s3)}
#po .verse-tr,#po .verse-en{text-wrap:pretty;text-wrap:balance}
#po .leaf-div{margin:var(--s3) auto}
#po .colophon{margin-top:var(--s4);padding-top:var(--s2)}
#po .poetry-figure{margin-top:var(--s3)}
/* Native folding leaves the plan available without displacing quick prompts. */
#p-ai #ai-ctx{padding:0!important;margin-bottom:var(--s1)!important;border:0;background:none}
.ai-plan>summary{min-height:40px;display:list-item;align-content:center;padding:var(--s1) var(--s2);border:1px solid var(--bd2);border-radius:var(--r4);cursor:pointer;font-size:var(--t-sm);color:var(--sand2)}
.ai-plan>p{margin:var(--s2) 0;padding-inline:var(--s2);font-size:var(--t-sm);line-height:1.6;color:var(--muted)}
/* Photo text is independent of the page theme, per Grimm's white-at-80% rule. */
:root{--picture-credit:rgb(255 255 255);--picture-credit-shadow:rgb(10 8 5 / .7)}
.img-figure .lb-open .img-corner{position:absolute;display:block;right:10px;bottom:9px;left:auto;max-width:calc(100% - 20px);margin:0;padding:0;border-radius:0;background:none;color:var(--picture-credit);opacity:.8;font-size:.62rem;line-height:1.3;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;text-shadow:0 1px 3px var(--picture-credit-shadow);transition:none}
.page-banner-figure .lb-open .img-corner{display:block!important}
/* Put the existing banner fade on the picture, keeping the credit at full opacity. */
:root:not(.banner-boxed) .page-banner-figure .lb-open{-webkit-mask-image:none;mask-image:none}
:root:not(.banner-boxed) .page-banner-figure picture{-webkit-mask-image:linear-gradient(to bottom,var(--picture-credit) var(--pb-fade-from),transparent);mask-image:linear-gradient(to bottom,var(--picture-credit) var(--pb-fade-from),transparent)}
.page-banner-figure figcaption{position:static;display:grid;max-width:var(--wide);margin-inline:auto;padding:var(--s1) max(var(--s2),var(--pb-bleed));font-size:var(--t-xs);line-height:1.5;text-align:center}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
  /* The native checkbox owns the hit area; its label draws the small visible mark. */
  .play-slow{position:relative;min-height:40px;padding-inline-start:40px}
  .play-slow input{position:absolute;inset:0 auto auto 0;width:40px;height:40px;margin:0;opacity:0;cursor:pointer}
  .play-slow::before{content:'';position:absolute;left:13px;top:calc(50% - 7px);width:14px;height:14px;border:1px solid var(--bd);border-radius:var(--r2);background:var(--bg)}
  .play-slow:has(input:checked)::before{background:var(--gold);border-color:var(--gold)}
  .play-slow:has(input:checked)::after{content:'';position:absolute;left:17px;top:calc(50% - 4px);width:5px;height:8px;border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(45deg)}
  .play-slow:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px;border-radius:var(--r2)}
  .fattr a,.fsrc-body a,.fr-credit a,main a[href*="wiktionary.org"]{display:inline-flex;align-items:center;min-width:40px;min-height:40px;padding-inline:4px}
  #tr-detail .tr-open,#dl-detail .dl-open{padding:var(--s3)}
  #map-info .country-head{gap:var(--s2)}
  #map-info .country-status{max-width:16ch;font-size:.68rem;letter-spacing:.06em}
  #po .leaf-body{padding:var(--s3)}
  #p-ai .ai-layout{gap:var(--s2)}
  .alphabet-workspace{gap:var(--s3)}
  .alphabet-workspace>.al-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s1)}
  .alphabet-workspace>.al-grid>.al:last-child:nth-child(3n+1){grid-column:2}
  .alphabet-workspace>.al-grid>.al{padding:var(--s2) var(--s1);min-width:0}
  .alphabet-workspace>.trace{padding:var(--s3)}
  .alphabet-workspace .forms{gap:var(--s1)}
  .alphabet-workspace .form-cell{padding:var(--s2) var(--s1)}
  .alphabet-workspace .trace-sound{margin-bottom:var(--s2)}
  .alphabet-workspace .trace-info>.note,.alphabet-workspace .trace-info>.row{margin-top:var(--s2)!important}
}

/* codex-poetry 08.10.2026 */
#cal .spec-flag{padding:0;border:0;border-radius:0;background:none;color:var(--muted);font-size:var(--t-xs);letter-spacing:0;text-transform:none}
#po .leaf{min-width:0;background:var(--bg3);border-color:var(--bd2)}
#po .leaf-body{min-width:0;padding-top:var(--s4)}
#po .poetry-figure{margin:0 auto var(--s4);background:var(--bg3)}
#po .verse{overflow-wrap:normal;word-break:normal;max-width:100%}
#po .verse-en,#po .verse-tr{text-wrap:balance;overflow-wrap:normal;word-break:normal;max-width:var(--prose);margin-inline:auto}
#po .verse-en{margin-top:var(--s4)}
.po-poets{display:flex;flex-wrap:wrap;gap:var(--s1);max-width:var(--wide);min-width:0}
.po-poets .pill,.leaf-veil summary{min-height:40px}
.po-poets .pill{white-space:normal;overflow-wrap:normal}
.po-poets .pill-sa::before{content:"";display:inline-block;width:6px;height:6px;margin-inline-end:6px;border-radius:50%;background:var(--gold)}
#po .leaf-veil{margin:var(--s3) auto 0;max-width:var(--prose)}
#po .leaf-veil summary{display:flex;align-items:center;justify-content:center;width:fit-content;max-width:100%;margin:auto;padding:8px 18px;border:1px solid var(--bd2);border-radius:999px;color:var(--sand2);font-size:var(--t-sm);cursor:pointer;list-style:none}
#po .leaf-veil summary::-webkit-details-marker{display:none}
#po .leaf-veil summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
#po .po-actions,#po .po-listen,#po .po-more{justify-content:center;margin-top:var(--s3)}
#po .po-books{width:100%;max-width:none;margin:0;padding:0;border:0;border-radius:0}
.po-book-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.po-book{min-width:0;border-top:1px solid var(--bd2);padding:var(--s3) 0}
.po-book h4{font-family:var(--serif);font-size:var(--t-lg);line-height:1.3;color:var(--sand);margin:0 0 var(--s2)}
.po-book p{font-size:var(--t-sm);line-height:1.6;margin:var(--s2) 0;color:var(--sand2)}
.po-book .po-book-byline{color:var(--muted)}
#po .leaf-rule{background:var(--bg2)}
#po .leaf-rule span{font-variant-numeric:lining-nums;color:var(--muted);font-size:var(--t-sm)}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
 #po{gap:var(--s5)}
 #po .leaf{grid-template-columns:minmax(0,1fr);gap:0}
 #po .leaf-rule{display:none}
 #po .leaf-body{padding:var(--s3)}
 .po-book-grid{grid-template-columns:minmax(0,1fr)}
 .po-poets{flex-wrap:nowrap;overflow-x:auto;padding-bottom:var(--s2)}
 .po-poets .pill{flex:0 0 auto;white-space:nowrap}
}
@media print{
 #po .leaf[hidden]{display:grid!important}
 #po .leaf-veil::details-content,#po .leaf-veil:not([open])>*:not(summary){content-visibility:visible;display:block!important}
 #po .leaf-veil summary,#po-poets{display:none!important}
}
#cal .spec-plate{min-width:0}
.cal-hands-study{margin-bottom:var(--s5);min-width:0}
.cal-hands{display:flex;gap:var(--s2);overflow-x:auto;scroll-snap-type:x mandatory;max-width:100%;padding-bottom:var(--s2)}
.cal-hand{flex:0 0 150px;min-width:0;min-height:150px;scroll-snap-align:start;border:1px solid var(--bd2);border-radius:var(--r4);background:var(--bg3);padding:var(--s3);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--s2)}
.cal-hand div{font-size:calc(2.4rem * var(--arscale));line-height:1.6;height:calc(3.9rem * var(--arscale));color:var(--gold)}
.cal-hand span{font-size:var(--t-sm);color:var(--muted)}
.cal-watch{min-height:40px;font-family:var(--ui);font-size:var(--t-sm);direction:ltr;letter-spacing:0;opacity:1}
.cal-pen{width:100%;max-width:358px;min-width:0}
.cal-pen-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s1);direction:rtl}
.cal-pen svg{display:block;width:100%;height:auto;overflow:visible}
.cal-pen-path{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.cal-pen-dot{fill:var(--gold)}
.cal-pen-order{font-family:var(--ui);font-size:12px;fill:var(--sand);text-anchor:start}
.cal-pen .data-note{margin:var(--s2) 0 0;font-size:var(--t-xs);color:var(--muted);letter-spacing:0;line-height:1.6}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
 .cal-hands-study{max-width:100%}
 .cal-hand{flex-basis:138px}
}
@media(prefers-reduced-motion:no-preference){
 .cal-pen-path{animation:cal-pen-draw 700ms ease-out both;animation-delay:var(--pen-delay)}
 .cal-pen-dot{animation:cal-pen-dot 700ms step-end both;animation-delay:var(--pen-delay)}
 .cal-pen-order{display:none}
 @keyframes cal-pen-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
 @keyframes cal-pen-dot{from{opacity:0}to{opacity:1}}
}
@media(prefers-reduced-motion:reduce){
 .cal-pen-path{stroke-dashoffset:0;animation:none}
 .cal-pen-dot{opacity:1;animation:none}
 .cal-pen-order{display:block}
}
#po-books summary{min-height:40px}

/* codex-culture 08.10.2026 */
.dl-open-sub{margin-top:var(--s2);font-family:var(--ui);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dial-word-wheel{max-width:var(--wide);margin:var(--s4) auto}
.dial-word-wheel h3{font-family:var(--serif);font-size:var(--t-xl);color:var(--sand);text-align:center;margin-bottom:var(--s3)}
.dial-glosses{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--s1);margin-bottom:var(--s3)}
.dial-glosses .pill{min-height:40px}
.dial-wheel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.dial-wheel-grid .wordcell{min-width:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:var(--s2);border:1px solid var(--bd2);background:color-mix(in srgb,var(--bg3) 85%,var(--bg2));border-radius:var(--r4);gap:var(--s1)}
.dial-wheel-grid h4{font-family:var(--ui);font-size:var(--t-xs);font-weight:400;color:var(--muted);overflow-wrap:anywhere;text-align:center}
.dial-wheel-grid .wc-ar{font-size:calc(1.3rem * var(--arscale));white-space:nowrap}
.dial-wheel-grid .wc-tr,.wc-missing{font-size:var(--t-xs);color:var(--muted);text-align:center;overflow-wrap:anywhere}
.dial-wheel-grid .listen-pair{flex-wrap:wrap;justify-content:center;gap:2px;margin:0}
.dial-wheel-grid .listen-btn{min-height:40px;max-width:100%;padding:.2rem .4rem}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
 .dial-wheel-grid{gap:var(--s1)}
 .dial-wheel-grid .wordcell{padding:var(--s2) var(--s1)}
 .dial-wheel-grid .listen-pair{flex-direction:column;align-items:stretch}
 .dial-wheel-grid .listen-btn{width:100%}
}
@media(prefers-reduced-motion:no-preference){
 .dial-wheel-grid,.dialect-browser .dl-open{animation:culture-reveal 240ms ease-out}
 @keyframes culture-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}

#architecture-story[hidden]{display:none}
#architecture-story{max-width:var(--wide);margin:var(--s4) auto}
#chapter{touch-action:pan-y pinch-zoom}
.hist-spine-note{text-align:center;font-family:var(--ui);font-size:var(--t-xs);color:var(--muted);margin:var(--s3) 0 var(--s2)}
#spine{margin-top:var(--s2);max-width:100%;min-width:0}
.stop-sa{display:inline-flex;align-items:center;gap:4px;font-family:var(--ui);font-size:var(--t-xs);color:var(--sand);background:color-mix(in srgb,var(--bg3) 85%,var(--bg2));padding:3px 6px;border:1px solid var(--bd2);border-radius:var(--r4)}
.stop-sa::before{content:'';flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.chap-num{font-family:var(--serif);font-variant-numeric:lining-nums;font-size:var(--t-sm);color:var(--muted)}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
 #spine{display:flex;gap:var(--s2);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--s2);padding:var(--s2) 0;overscroll-behavior-x:contain}
 #spine .stop{flex:0 0 128px;min-width:128px;max-width:128px;scroll-snap-align:center;min-height:40px;background:color-mix(in srgb,var(--bg3) 85%,var(--bg2))}
 #spine .stop.on{background:var(--glow)}
 #spine .spine-line,#spine .spine-progress{display:none}
 #spine .stop-thumb{width:56px;height:56px}
}
@media(prefers-reduced-motion:no-preference){
 #chapter .chap-body{animation:culture-reveal 240ms ease-out}
 #spine .spine-progress{transition:width 750ms ease-out}
}
@media(prefers-reduced-motion:reduce){
 #chapter .chap-body,.dial-wheel-grid,.dialect-browser .dl-open{animation:none!important;transform:none}
 #spine .spine-progress{transition:none}
}

#art-museum-gallery .museum-open{background:var(--bg2)}
.art-vitrine-caption{display:none}
.art-photo-stage{position:relative}
.art-photo-stage .study-figure img{aspect-ratio:3/2;object-fit:cover;width:100%}
#p-art .art-photo-stage .art-fig-overlay{position:absolute;inset:0 0 auto;width:100%;height:auto;aspect-ratio:3/2;display:block;padding:0;border:0;border-radius:0;background:none;backdrop-filter:none;pointer-events:none;opacity:0;visibility:hidden}
#p-art .art-photo-stage .art-fig-overlay.on{visibility:visible;opacity:.7}
.art-geometry-halo,.art-geometry-lines{position:absolute;inset:12%;display:grid;place-items:center}
#p-art .art-photo-stage .art-fig-overlay svg{display:block;width:100%;height:100%;max-width:none}
.art-fig-overlay .art-geometry-halo svg *{fill:none;stroke:var(--bg);stroke-width:3.5px;stroke-linejoin:round;paint-order:stroke}
.art-fig-overlay .art-geometry-lines svg *{fill:none;stroke:var(--gold);stroke-width:1.5px;stroke-linejoin:round;paint-order:stroke}
.art-geometry-toggle{display:flex;min-height:40px;margin:var(--s2) auto}
#pattern-kinds{width:100%}
#pattern-kinds>span{display:block;margin-bottom:var(--s1);font-size:var(--t-xs);color:var(--muted)}
#pattern-kinds .row{flex-wrap:wrap;gap:var(--s1)}
#pattern-kinds .pill,#pattern-motion{min-height:40px}
#p-art .art-fig::after{animation:none}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
 #art-museum-gallery{display:flex;gap:var(--s2);max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--s1);overscroll-behavior-x:contain;margin-bottom:0;padding-bottom:var(--s2)}
 #art-museum-gallery>.museum-figure{flex:0 0 78vw;max-width:78vw;min-width:0;scroll-snap-align:center;grid-column:auto}
 #art-museum-gallery .museum-figure img{height:clamp(180px,42dvh,320px);max-height:55dvh;object-fit:contain}
 #art-museum-gallery .museum-figure figcaption{display:none}
 #art-vitrine-caption{display:block;max-width:var(--prose);min-height:5em;margin:var(--s2) auto var(--s4);font-size:var(--t-sm);color:var(--muted)}
 #art-vitrine-caption figcaption{display:grid;gap:var(--s1)}
 #art-vitrine-caption b{color:var(--sand);font-weight:400}
 .pattern-layout{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
 .pattern-preview{max-width:280px}
}
@media(prefers-reduced-motion:no-preference){
 #p-art .art-photo-stage .art-fig-overlay{transition:opacity 240ms ease-out,visibility 240ms}
}
@media(prefers-reduced-motion:reduce){
 #p-art .art-photo-stage .art-fig-overlay{transition:none}
}

:is(#p-art,#p-dialects,#p-history) .lb-open{position:relative}
:is(#p-art,#p-dialects,#p-history) .lb-open .img-corner{position:absolute;right:10px;bottom:9px;left:auto;max-width:calc(100% - 20px);margin:0;padding:0;background:none;color:var(--sand);opacity:.8;text-align:right;white-space:nowrap;font-size:var(--t-xs);overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px var(--bg);z-index:2}
body[data-theme="paper"] :is(#p-art,#p-dialects,#p-history) .lb-open .img-corner{color:var(--bg);text-shadow:0 1px 3px var(--sand)}

/* codex-system 08.10.2026 */
/* WCAG text 4.5:1 and essential UI 3:1 on bg through bg4, including alpha compositing.
   Keep the existing hues; lift the error red and border opacity only as far as needed. */
body[data-theme="sand"]{--ok:#5fb863;--no:#f6837f;--bd:rgba(221,183,115,.57);--bd2:rgba(223,230,209,.44)}
body[data-theme="contrast"]{--bg:#080808;--ink:#080808;--cardink:#080808;--sand:#fdfbf5;--cardbg:#fdfbf5;--no:#ff7e7a;--bd:rgba(255,210,74,.48);--bd2:rgba(255,255,255,.38)}
body[data-theme="paper"]{--muted:#5d685d;--gold-dim:#5d6953;--bd:rgba(67,84,58,.66);--bd2:rgba(40,51,45,.55)}
body[data-theme="night"]{--muted:#909dae;--gold-dim:#849ebb;--bd:rgba(127,168,217,.65);--bd2:rgba(255,255,255,.36)}
body[data-theme="oasis"]{--muted:#91aa9b;--gold-dim:#6db28e;--bd:rgba(95,184,138,.68);--bd2:rgba(255,255,255,.38)}
:root{--dur-1:120ms;--dur-2:240ms;--dur-3:600ms;--ease-out:cubic-bezier(.2,.7,.2,1);--prose:65ch;--focus-clearance:24px}
/* Global keyboard coverage includes sliders, SVG buttons and editable controls. The
   quiet inner ground separates the accent from a filled button or arbitrary photo. */
body :is(button,a[href],summary,input,select,textarea,[tabindex],[contenteditable="true"]):focus-visible{outline:2px solid var(--gold)!important;outline-offset:4px;box-shadow:0 0 0 2px var(--bg);scroll-margin-block:var(--focus-clearance) calc(112px + env(safe-area-inset-bottom));scroll-margin-inline:calc(8px + env(safe-area-inset-left)) calc(8px + env(safe-area-inset-right))}
html,main,.mobile-nav-panel,.media-full{scroll-padding-block:var(--focus-clearance) calc(112px + env(safe-area-inset-bottom));scroll-padding-inline:calc(8px + env(safe-area-inset-left)) calc(8px + env(safe-area-inset-right))}
/* Overflow-hidden picture cards need their two-tone ring inside the picture. */
.img-figure .lb-open:focus-visible{outline:none!important;box-shadow:none}
.img-figure .lb-open:focus-visible::after{content:'';position:absolute;inset:6px;z-index:2;border:2px solid var(--gold);border-radius:var(--r2);box-shadow:0 0 0 2px var(--bg);pointer-events:none}
/* Essential symbols remain at full opacity; placeholders use the readable muted token. */
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
.img-credit{opacity:1}
main :is(.img-credit,.data-note,.feedback-detail,.spec-alif,.chap-num i){opacity:1!important}
main .orn{opacity:1}
.car-btn{width:40px;height:40px;min-width:40px;min-height:40px;flex-basis:40px}
.car-play[hidden]{display:none}
main :is(.pill,.stat-go,.stat-x,summary,input[type="range"]){min-height:40px}
main :is(.tick,input[type="checkbox"],input[type="radio"]){min-width:40px;min-height:40px}
/* Old answer backgrounds were hard-coded translucent reds/greens. A theme surface
   keeps the feedback text at the audited contrast without altering its meaning. */
.ex-opt.ok,.ex-opt.no,.qo.ok,.qo.no,.fb.ok,.fb.no{background:var(--bg3)}
body :is(.btn-ok,.btn-no,.pill.pill-ok,.pill.pill-no),body :is(.btn-ok,.btn-no,.pill.pill-ok,.pill.pill-no):is(:hover,.on){background:var(--bg3);border-color:var(--tone)}
body :is(.btn-ok,.btn-no,.pill.pill-ok,.pill.pill-no).on{box-shadow:inset 0 0 0 1px var(--tone)}
/* Fixed media UI stays between all four safe edges, even after keyboard resizing. */
.toast{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(max(12px,env(safe-area-inset-bottom)) + 52px);top:auto;width:fit-content;max-width:calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));max-height:calc(100dvh - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom));margin-left:auto;overflow:auto;overflow-wrap:anywhere;transform:none;transition:none}
#media-dialog.lightbox,#credits-dialog{inset:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);width:min(1400px,calc(100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right)));max-height:calc(94dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));scroll-padding-block:64px 24px}
#credits-dialog{width:min(980px,calc(100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right)))}
/* Natural dimensions reserve uncropped figures. Existing crop frames remain stable
   and deliberately override the manifest ratio through --image-frame. */
.img-figure .lb-open{aspect-ratio:var(--image-frame,var(--image-ratio));background:var(--bg3)}
/* Older full-bleed and poem rules use transparent grounds at higher specificity.
   Override only the loading placeholder, then let the established banner fade return. */
.img-figure .lb-open:not(:has(img.is-loaded)){background:var(--bg3)!important}
.img-figure .lb-open picture{width:100%;height:100%}
.history-figure .lb-open{max-height:340px}
.chapter.has-figure .history-figure .lb-open{max-height:none}
.today-photo-figure .lb-open,.dl-photos .img-figure .lb-open,.tr-photo .lb-open{max-height:420px}
.img-figure .lb-open img{height:100%;aspect-ratio:var(--image-frame,var(--image-ratio));object-fit:cover}
.carousel .img-figure,.dallah-hero-figure,.today-photo-figure,.poetry-figure,.history-figure{--image-frame:3 / 2}
.hist-banner{--image-frame:21 / 8}
.page-banner-figure{--image-frame:21 / 7}
.dl-photos .img-figure,.tr-photo{--image-frame:16 / 9}
.chapter.has-figure .history-figure{--image-frame:4 / 3}
.img-figure.museum-figure .lb-open img,.cal-photos .img-figure .lb-open img{object-fit:contain}
/* These layouts have explicit height caps; retain those frames instead of expanding
   a tall manuscript to its uncropped natural ratio. Explicit heights reserve their
   established display size, while the manifest ratio stays available on every wrapper. */
.museum-figure .lb-open{height:240px;aspect-ratio:var(--image-ratio)}
.museum-gallery .museum-figure .lb-open{height:clamp(220px,22vw,300px)}
.cal-photos .img-figure .lb-open{height:clamp(320px,34vw,560px);aspect-ratio:var(--image-ratio)}
.museum-figure .lb-open img,.cal-photos .img-figure .lb-open img{height:100%;aspect-ratio:auto}
/* LCP pictures need no reveal delay. Other pictures use opacity only when motion is allowed. */
.img-figure img{opacity:1;transition:none}
.car-slide,.car-slide.on{transition:none}
/* Skip only static heavy descendants, never the active panel root. Auto retains DOM,
   find-in-page and accessibility content; targets and focused cards render immediately. */
@supports(content-visibility:auto){
  .panel :is(.leaf,.specimen,.art-card,.today-photo):not(:target):not(:has(:target)):not(:focus-within){content-visibility:auto;contain-intrinsic-size:auto 800px}
}
h1,h2,h3,h4,h5,h6,.pt,.verse-en{text-wrap:balance}
.psub,.chap-text,.art-b,.specimen-text,.reading-notes p,.verse-n,.c-b,.rule-b,.et-b{text-wrap:pretty;max-inline-size:var(--prose)}
main :is(p,li,blockquote)[lang="ar"],main :is(p,li,blockquote) [lang="ar"],main :is(.verse,.dl-open-phrase,.journal-phrase>b,.stat-words b){line-height:1.8}
.panel .eyebrow,.today-kicker,.chap-era,.spec-era{font-family:var(--ui);font-size:var(--t-xs);font-variant-caps:all-small-caps;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.car-count,.lb-count,.leaf-num{font-family:var(--serif);font-size:var(--t-sm);font-variant-numeric:lining-nums tabular-nums;color:var(--muted)}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
  :root{--focus-clearance:calc(96px + env(safe-area-inset-top))}
  .mobile-nav-bar{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-top:max(4px,env(safe-area-inset-top))}
  .mobile-nav-panel{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));top:calc(100% + 8px);width:auto;max-width:570px;margin-left:auto;max-height:calc(100dvh - 104px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding-bottom:max(12px,env(safe-area-inset-bottom));scroll-padding-block:12px}
  .car-dots{display:none}.car-count{display:block}
  .hist-banner{--image-frame:16 / 8}.page-banner-figure{--image-frame:16 / 8}
  .img-figure .lb-open,.img-figure .lb-open img{max-height:calc(100dvh - 104px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
  #p-art .museum-figure .lb-open,#p-art .museum-figure .lb-open img{max-height:55dvh}
  .calligraphy-real-gallery .museum-figure .lb-open{height:220px}
}
/* Final state is the default. All new movement is a no-preference enhancement. */
@media(prefers-reduced-motion:no-preference){
  .img-figure img:not([fetchpriority="high"]){opacity:0;transition:opacity var(--dur-2) var(--ease-out)}
  .img-figure img.is-loaded{opacity:1}
  .car-slide,.car-slide.on{transition:opacity var(--dur-3) var(--ease-out),visibility var(--dur-3) step-end}
  .car-slide.on{transition:opacity var(--dur-3) var(--ease-out),visibility 0s}
  main :is(.pill,.btn,.stop){transition:transform var(--dur-1) var(--ease-out)}
  main :is(.pill,.btn,.stop):active{transform:scale(.98)}
  .toast{transition:opacity var(--dur-2) var(--ease-out)}
}
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*){animation-duration:0s}
  .img-figure img,.car-slide.on{opacity:1}
}
/* codex-learning 08.10.2026 */
/* The learning family shares the existing folio tokens in every theme. */
:is(#p-today,#p-flashcards,#p-quiz,#p-sentences,#p-daily,#p-book,#p-notebook,#p-alphabet,#p-numbers,#p-expressions,#p-hard) :is(.today-card,.today-stat-plain,.stat-face,.fcf,.box,.qz,.qo,.sb-target,.cut,.day,.stat,.ex-card,.rm-hero,.al,.number-card,.hard-auto){border-radius:var(--r6)}
:is(#p-today,#p-flashcards,#p-quiz,#p-sentences,#p-daily,#p-book,#p-notebook,#p-alphabet,#p-numbers,#p-expressions,#p-hard) :is(.eyebrow,.box-t,.band-l,.fc-cat,.today-kicker,.rm-stage,.session-strip>div>span,.today-card-head>span,.today-routes button>span){font-family:'IBM Plex Mono',monospace;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
:is(#p-today,#p-flashcards,#p-quiz,#p-sentences,#p-daily,#p-book,#p-notebook,#p-alphabet,#p-numbers,#p-expressions,#p-hard) :is(.btn,.pill,.qo,.slot,.tok){min-height:40px}
.learning-bar{display:block;width:100%;height:3px;overflow:hidden;border-radius:var(--r4);background:var(--bd2);margin-top:var(--s2)}
.learning-bar>i{display:block;height:100%;background:var(--gold)}
.today-stat .learning-bar{grid-column:1/-1;margin-block:var(--s1)}
.session-strip>div{flex:1;min-width:0}
.learning-progress-copy{max-width:820px;margin:var(--s2) auto var(--s3);font-size:var(--t-sm);color:var(--sand2);text-align:center;font-variant-numeric:tabular-nums}
.learning-result{display:block;font:600 var(--t-sm)/1.5 var(--ui);color:var(--sand);margin-bottom:var(--s1)}
.learning-result>span[aria-hidden]{display:inline-block;width:1.3em;color:var(--gold)}
:is(#qz-fb,#sb-fb,#num-fb,#al-fb) .fb,.ex-fb{border-radius:var(--r6);padding:var(--s3);text-wrap:pretty}
.learning-complete{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--s2) var(--s3);align-items:center;max-width:820px;margin:var(--s3) auto;padding:var(--s4);border:1px solid var(--gold-dim);border-radius:var(--r6);background:var(--bg2);text-align:left;color:var(--sand)}
.learning-complete h3{font:400 var(--t-lg)/1.2 var(--serif);text-wrap:balance;margin:0 0 var(--s1)}
.learning-complete p{font-size:var(--t-sm);line-height:1.5;color:var(--sand2);margin:0;text-wrap:pretty}
.learning-complete>.btn{grid-column:2;justify-self:start}
.learning-star{width:56px;height:56px;stroke:var(--gold);stroke-width:1.2;vector-effect:non-scaling-stroke}
.learning-empty{padding:var(--s3);text-align:center;max-width:65ch;margin-inline:auto;color:var(--sand2)}
.learning-empty p{margin:0 0 var(--s3);line-height:1.5}
#sb-check[hidden],#sb-new[hidden],#ex-empty[hidden],#ex-grid[hidden]{display:none}
.learning-keyboard{text-align:center;font-size:var(--t-xs);color:var(--muted);margin:0 0 var(--s3)}
.learning-alpha-quiz{max-width:820px;margin:var(--s5) auto 0}
.learning-alpha-letter{font-family:var(--arabic);font-size:calc(3rem * var(--arscale));line-height:1.9;color:var(--gold);text-align:center;margin-bottom:var(--s3)}
#fc-hard,#fc-know{font-weight:600;min-height:44px;gap:var(--s1)}
#fcw .fcf[aria-hidden="true"]{pointer-events:none}
#fcw .fc{transition-duration:320ms}
.today-hero{margin-bottom:var(--s3)}
.today-hero h2{line-height:1.2;text-wrap:balance}
.today-hero-copy> .today-actions{margin-top:var(--s3);margin-bottom:0}
.today-intro-copy>p{max-width:44ch;line-height:1.5;text-wrap:pretty}
.today-stats .streak-value{font-size:var(--t-md);line-height:1.3}
.today-stats .today-stat-plain small{min-width:0}
.today-routes{gap:var(--s2)}
.today-stats .stat-go,.today-stats .stat-x{min-height:40px}
/* Only the copyright anchor hit area changes; its type and visual position stay. */
#fy{display:inline-flex;align-items:center;min-height:40px;margin-block:-9px;padding-block:9px;box-sizing:border-box}
@media(prefers-reduced-motion:no-preference){
 .learn-correct{animation:learn-correct 160ms ease-out}
 .learn-wrong{animation:learn-wrong 180ms ease-out}
 .learning-complete{animation:learn-complete 240ms ease-out both}
}
@keyframes learn-correct{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
@keyframes learn-wrong{0%,100%{transform:translateX(0)}25%,75%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
@keyframes learn-complete{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
 .learning-keyboard{display:none}
 .learning-complete{padding:var(--s3);grid-template-columns:44px minmax(0,1fr);gap:var(--s2)}
 .learning-star{width:44px;height:44px}
 .learning-complete>.btn{grid-column:1/-1;justify-self:center}
 .today-intro-grid{gap:var(--s3)}
 .today-hero .today-actions{gap:var(--s2)}
 .session-strip{flex-wrap:wrap}
 .session-strip>div{flex-basis:65%}
 .today-stats .streak-value{grid-column:1/-1;font-size:var(--t-base)}
}
@media(prefers-reduced-motion:reduce){
 #fcw{perspective:none}
 #fcw .fc,#fcw .fc.flip,#fcw .fc-b{transform:none;transform-style:flat;transition:none}
 #fcw .fcf{backface-visibility:visible;transition:opacity 0s}
 #fcw .fcf[aria-hidden="true"]{opacity:0;visibility:hidden}
 #fcw .fcf[aria-hidden="false"]{opacity:1;visibility:visible}
 .learn-correct,.learn-wrong,.learning-complete{animation:none;transform:none;opacity:1}
}

/* codex-fix-maps 09.10.2026 */
.dl-range-key{display:block;margin-top:var(--s1)}
#p-dialects .dl-photos.carousel .car-slide figcaption b{-webkit-line-clamp:3}
#p-dialects .dl-open p,#p-dialects .dl-open p .sn{text-align:left;text-wrap:pretty}
#p-dialects .cmp-row.open .cmp-ar:empty{display:none}
#p-dialects .cmp-row.open{grid-template-columns:minmax(0,1fr) auto}
.dial-wheel-controls{display:flex;justify-content:center;margin:var(--s2) 0 var(--s3)}
.dial-wheel-controls .pill{min-height:44px;gap:var(--s1)}
.dial-wheel-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:start;gap:var(--s3)}
.dial-hear-map{min-width:0;margin:0;text-align:center}
.dial-hear-map>figcaption{font-family:var(--serif);font-size:var(--t-lg);color:var(--sand);margin-bottom:var(--s2)}
.dial-map-frame{position:relative;width:100%;aspect-ratio:700 / 430;border:1px solid var(--bd2);border-radius:var(--r4);background:var(--bg2);overflow:hidden;isolation:isolate}
.dial-map-frame>svg{display:block;width:100%;height:100%}
.dial-map-land{fill:var(--bd);stroke:var(--bg2);stroke-width:1}
.dial-map-lines{fill:var(--gold);stroke:var(--muted);stroke-width:1.5}
.dial-map-pin{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid var(--gold-dim);border-radius:50%;background:var(--bg3);color:var(--sand);font:600 var(--t-sm)/1 var(--ui);cursor:pointer;touch-action:manipulation;transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
.dial-map-pin:hover,.dial-map-pin.on{background:var(--glow);border-color:var(--gold)}
.dial-map-pin.on{box-shadow:inset 0 0 0 2px var(--gold)}
.dial-map-pin[aria-disabled="true"]{color:var(--muted);border-style:dashed;cursor:default}
.dial-map-pin:focus-visible,.tr-card-open:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.dial-hear-map .data-note{margin:var(--s2) 0 0;font-size:var(--t-xs);text-wrap:pretty}
#p-dialects .dial-wheel-grid .listen-btn{min-height:44px;min-width:44px;width:100%;margin-top:auto}
.dial-wheel-grid .wordcell.on{border-color:var(--gold);background:var(--glow);box-shadow:inset 0 0 0 1px var(--gold)}
.dial-wheel-number{font-weight:600;color:var(--gold)}
.dial-wheel-audio-note{margin:var(--s3) auto 0;max-width:65ch;text-align:center;text-wrap:pretty}
#p-tribes .tr-card{cursor:default;transition:border-color var(--dur-1) var(--ease-out);transform:none}
#p-tribes .tr-card:hover{transform:none}
.tr-card-open{display:flex;flex-direction:column;align-items:center;gap:var(--s1);width:100%;min-height:44px;margin-top:auto;padding:var(--s2) var(--s1);border:0;background:none;color:var(--sand);font:inherit;text-align:center;cursor:pointer;border-radius:var(--r2)}
.tr-card-open:hover{background:var(--glow)}
#p-tribes .tr-card .listen-pair{flex-wrap:wrap;justify-content:center;margin:0}
#p-tribes .tr-card .listen-btn{min-height:44px}
.tribemap-head{flex-wrap:wrap}
.tribemap-photos{display:flex;gap:var(--s1);flex-basis:100%;width:100%;min-width:0}
#p-tribes .tribemap-thumb{flex:1 1 0;min-width:0;margin:0;overflow:hidden;border-radius:var(--r2)}
#p-tribes .tribemap-thumb .lb-open{width:100%;height:56px;min-height:44px;aspect-ratio:auto}
#p-tribes .tribemap-thumb .lb-open img{height:56px;aspect-ratio:auto;object-fit:cover}
/* The legacy .tribemap-head span rule would uppercase and letter-space image credits. */
#p-tribes .tribemap-thumb .img-corner{font-size:.56rem;letter-spacing:0;text-transform:none;right:var(--s1);bottom:var(--s1);max-width:calc(100% - var(--s2))}
#p-map .map-side>.cut::before{content:none;display:none}
#p-map .map-inset{padding:0}
#p-map .map-inset>summary{padding:var(--s3) var(--s4);min-height:44px;line-height:1.5}
.map-region-count{font-size:var(--t-xs);color:var(--muted);white-space:nowrap}
#p-map .map-inset>svg{width:calc(100% - var(--s4));margin:0 auto}
#p-map .map-inset .atlas-region-list{padding:var(--s2) var(--s2) var(--s3)}
#map-phone-note{display:none}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
 .dial-wheel-layout{grid-template-columns:minmax(0,1fr)}
 .dial-map-frame{max-width:358px;max-height:220px;margin-inline:auto}
 .dial-hear-map{width:100%}
 #p-map #map-svg .map-phone-small{display:none}
 #p-map #map-svg .map-lbl[data-label="sa"]{display:block}
 #map-phone-note{display:block;margin:var(--s2) 0;text-wrap:pretty;text-align:left}
 #p-dialects .cmp-row.open{grid-template-columns:minmax(0,1fr) auto}
}
@media(prefers-reduced-motion:reduce){
 .dial-map-pin,#p-tribes .tr-card{transition:none;animation:none}
 .dial-wheel-grid .wordcell{animation:none;transform:none}
}
/* codex-pages 09.10.2026 */
/* Shared centred explanatory copy across learning surfaces. */
#p-etiquette :is(.et-text,.et-tip p),
#p-pitfalls :is(.rule-what,.rule-why p,.rule-do p),
#p-expressions .ex-card .c-b,
#p-notebook :is(.nb-note,.nb-usage,.empty-saved p),
#p-hard .learning-empty p,
#p-flashcards :is(.m-use,.box p,.learning-empty p),
#p-daily :is(.plan-guide p,.rm-sub),
#p-book .bk-warn,
#p-today :is(.today-card p,.today-stat-help),
#p-alphabet .trace-info .note,
#p-numbers :is(.number-card .note,.number-note){
 text-align:center;text-wrap:pretty;
}
#p-etiquette .et-tip p{width:100%;max-width:none}
#p-pitfalls :is(.rule-why b,.rule-do b){display:block;text-align:center}
#p-pitfalls .rule-card>.row{justify-content:center}
#p-expressions :is(.c-ar,.c-tr,.c-lit){text-align:center}
#qz-mode-toggle[hidden]{display:none}

/* One notice under each centred intro, with inline legal links and no separator bullet. */
:is(#p-coach,#p-events) .guide-ai-notice{
 max-width:var(--wide);min-width:0;margin:0 auto var(--s4);padding:var(--s3);
 border:1px solid var(--bd);border-radius:var(--r6);background:var(--bg2);
 color:var(--sand2);text-align:left;text-wrap:pretty;
}
.guide-ai-notice :is(.answer-meta,.ai-notice){margin:0;font-size:var(--t-sm);line-height:1.6;text-align:left;text-wrap:pretty}
.guide-ai-notice .answer-meta{margin-bottom:var(--s2)}
.guide-ai-notice a{display:inline;color:inherit;text-underline-offset:3px}
:is(#p-coach,#p-events) .ai-main{min-width:0}
:is(#p-coach,#p-events) .chat.guide-ai-empty{
 min-height:0;max-height:none;flex:0 0 auto;padding:var(--s4);margin-bottom:var(--s3);
}
.guide-ai-empty-copy p{margin:0 0 var(--s3);text-align:left;text-wrap:pretty;line-height:1.6;color:var(--sand2)}
.guide-ai-empty-copy .btn{display:flex;width:fit-content;max-width:100%;min-height:40px;margin-inline:auto;white-space:normal}

/* The page's final photograph belongs to the proverb, not the footer navigation.
   Existing culture-page endings keep their layout and rotator. */
#proverb-ending.has-picture{max-width:820px;margin-inline:auto;min-width:0}
#proverb-ending.has-picture>.fq{max-width:none;padding-inline:var(--s3);padding-bottom:var(--s4)}
#proverb-picture[hidden]{display:none}
#proverb-picture .proverb-figure{width:100%;margin:0 0 var(--s4)}
#proverb-picture .lb-open{display:block;width:100%;border-radius:var(--r6);overflow:hidden}
#proverb-picture :is(picture,img){display:block;width:100%}
#proverb-picture img{height:auto;aspect-ratio:16/9;object-fit:cover}
#proverb-picture figcaption{padding:var(--s2) var(--s3) 0;text-align:center;text-wrap:pretty}

/* Token rhythm: a single primary action after the stage, progress and short guide. */
#p-daily .rm-hero{padding:var(--s4);margin-bottom:var(--s3)}
#p-daily .rm-sub{margin-top:var(--s2);margin-bottom:var(--s3)}
#p-daily .rm-track{margin-bottom:var(--s4);padding-bottom:0}
#p-daily .plan-guide{margin-block:0 var(--s3)}
#p-daily .plan-actions{gap:var(--s2);margin-block:0 var(--s4);justify-content:center}
#p-daily .plan-actions :is(.btn,.pill){min-height:40px;max-width:100%;white-space:normal}
#p-daily .rm-fill{transition:width var(--dur-3) var(--ease-out)}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
 :is(#p-coach,#p-events) .guide-ai-notice{width:100%;box-sizing:border-box}
 :is(#p-coach,#p-events) .chat.guide-ai-empty{padding:var(--s3)}
 #p-daily .rm-meta{gap:var(--s2);text-align:left}
 #p-daily .rm-meta>span:first-child{min-width:0;text-wrap:pretty}
 #p-daily .rm-meta>span:last-child{flex-shrink:0}
}
@media(prefers-reduced-motion:reduce){
 #p-daily .rm-fill{transition:none}
}
/* codex-fix-folio 09.10.2026 */
/* One opening follows the title on all seven culture pages. The band stays in flow;
   the legacy .folio-base absolute rule belongs only to the original folio cards. */
.culture-frontispiece{max-width:var(--wide);min-width:0;margin:var(--s3) auto var(--s4)}
.culture-frontispiece .hist-hero{margin:0}
.culture-frontispiece .hist-banner{margin:0;background:var(--bg3);--image-frame:16 / 9}
.culture-frontispiece .hist-banner .lb-open{aspect-ratio:16 / 9;background:var(--bg3)}
.culture-frontispiece .hist-banner img{width:100%;height:100%;aspect-ratio:auto;max-height:none;object-fit:cover;padding:0}
#p-calligraphy .culture-frontispiece .hist-banner img{object-fit:contain}
.culture-frontispiece .hist-hero-copy{inset:auto auto 42px var(--s3);padding:var(--s1) var(--s2);background:var(--bg2);border:1px solid var(--bd2);border-radius:var(--r4);max-width:calc(100% - var(--s5))}
.culture-frontispiece .hist-hero-copy span{color:var(--sand);font-family:var(--serif);font-weight:500}
.folio-running-head{font-family:'IBM Plex Mono',monospace;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2);text-align:left}
.culture-folio-band{position:relative;height:14px;margin-top:var(--s2);overflow:hidden;border-block:1px solid var(--bd2)}
.culture-folio-band .folio-base{display:block;width:100%;position:static;inset:auto;height:14px;opacity:.6}
/* The Poetry credit chip is now shared by culture heroes, leaves and museum plates.
   Full names and licence provenance remain in the Image credits dialog. */
.panel:is(#p-history,#p-art,#p-poetry,#p-calligraphy,#p-dialects,#p-tribes,#p-map) .img-figure .lb-open .img-corner,
.img-figure.museum-figure .lb-open .img-corner{display:block!important;position:absolute;inset:auto 10px 9px auto;max-width:calc(100% - 20px);margin:0;padding:3px var(--s1);border-radius:var(--r2);background:color-mix(in srgb,var(--cardink) 80%,transparent);color:var(--cardbg);opacity:1;font-size:var(--t-xs);line-height:1.4;text-align:right;white-space:normal;overflow:visible;text-overflow:clip;text-shadow:none;pointer-events:none;z-index:2}
#hist-tracks .track{clip-path:none;border-radius:var(--r4);min-height:40px}
#calligraphy-specimen h3{font-family:var(--serif);font-weight:500;font-size:var(--t-xl)}
#cal-hands-load{display:inline-flex;align-items:center;justify-content:center;min-height:40px;max-width:32ch;width:auto;padding:var(--s1) var(--s3);border-radius:999px;border:1px solid var(--bd);color:var(--sand);background:var(--bg2);text-align:center;line-height:1.5}
#cal-hands-load[hidden]{display:none}
.cal-hand-hint{font-family:var(--ui);font-size:var(--t-xs);line-height:1.4;color:var(--muted);text-align:center}
#cal .cal-watch{display:inline-flex;align-items:center;justify-content:center;align-self:center;gap:var(--s1);min-height:40px;color:var(--sand);border-color:var(--bd);font-size:var(--t-sm);letter-spacing:0;opacity:1}
.cal-watch svg{flex:none}
.spec-meta{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:var(--s2)}
.spec-counter,.carousel-count,.car-count{font-family:var(--serif);font-size:var(--t-sm);font-variant-numeric:lining-nums tabular-nums;color:var(--muted)}
#cal .spec-meta .spec-flag{color:var(--muted);background:none;border:0;border-radius:0;padding:0;font-family:var(--ui);letter-spacing:.06em}
#pattern-studio .pattern-preview{max-width:160px;transition:none}
#pattern-studio :is(.pill,input[type="range"],summary){min-height:40px}
:is(#p-art,#p-history,#p-poetry,#p-calligraphy,#p-tribes,#p-map) :is(.art-card p,.specimen-text p,.c-b,.craft dd,.reading-notes p,.verse-n,.visual-story p,.art-math){text-align:left;text-wrap:pretty}
:is(#p-art,#p-history,#p-poetry,#p-calligraphy)>.psub{text-align:left;text-wrap:pretty}
.leaf-attribution{font-family:var(--ui);font-size:var(--t-xs);line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center;margin:0 0 var(--s3)}
#po .poetry-figure[data-image-kind="museum-object"] :is(.lb-open,img){object-fit:contain;background:var(--bg3)}
#art-museum-gallery{scroll-padding-inline:var(--s2);padding-inline:var(--s2);box-sizing:border-box}
:is(#art-museum-gallery,.calligraphy-real-gallery) .museum-figure,
:is(#art-museum-gallery,.calligraphy-real-gallery) .museum-open{background:var(--bg3)}
.calligraphy-real-gallery{display:flex;gap:var(--s2);width:100%;max-width:var(--wide);min-width:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--s2);overscroll-behavior-x:contain;padding:0 var(--s2) var(--s2);box-sizing:border-box}
.calligraphy-real-gallery>.museum-figure{flex:0 0 72%;max-width:520px;min-width:0;scroll-snap-align:center}
.calligraphy-real-gallery .museum-figure .lb-open{height:clamp(220px,30vw,340px);aspect-ratio:auto}
.calligraphy-real-gallery .museum-figure .lb-open img{height:100%;object-fit:contain;padding:var(--s2)}
.calligraphy-real-gallery .museum-figure figcaption{text-align:left}
body[data-theme="night"] :is(.art-geometry-toggle,.cal-watch,.leaf-veil summary){border-color:var(--bd)}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
 #chapter .chap-num{background:none;border:0;padding:var(--s3) var(--s4) 0;text-align:left}
 .hist-spine-note,#p-poetry .po-more{padding-inline-end:96px;box-sizing:border-box}
 .calligraphy-real-gallery{max-width:100%;margin-inline:0}
 .calligraphy-real-gallery>.museum-figure{flex-basis:78vw;max-width:78vw}
 .calligraphy-real-gallery .museum-figure .lb-open{height:220px}
 #art-museum-gallery{scroll-padding-inline:var(--s2);padding-inline:var(--s2)}
}
@media(prefers-reduced-motion:reduce){
 #pattern-studio .pattern-preview,#pattern-studio .pattern-preview svg{transition:none;animation:none}
}
/* lead 09.10.2026: tribe thumbnails carry their credits in one line under the strip, not in corner chips */
#p-tribes .tribemap-photos .tribemap-thumb .lb-open .img-corner{display:none!important}
#p-tribes .tribemap-credits{flex-basis:100%;width:100%;margin:0;font-size:.68rem;line-height:1.4;color:var(--muted);text-align:left}

/* v14.0.0: shared caption, spacing, divider and menu system. */
body{--image-scrim:color-mix(in srgb,var(--sand) 72%,transparent);--divider:linear-gradient(90deg,transparent,color-mix(in srgb,var(--muted) 38%,transparent),transparent)}
.img-figure .lb-open{position:relative;overflow:hidden;isolation:isolate}
.img-figure .lb-open .img-corner,.panel .img-figure .lb-open .img-corner{display:grid!important;gap:2px;position:absolute!important;inset:auto 10px 10px auto!important;max-width:min(82%,54ch)!important;padding:5px 9px!important;border-radius:7px!important;background:var(--image-scrim)!important;color:var(--bg)!important;font-size:clamp(11px,.72rem,14px);line-height:1.35;text-align:right!important;white-space:normal!important;pointer-events:none}
.img-caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-weight:500}.img-attribution{font-size:.92em}
.museum-figure .lb-open,.calligraphy-real-gallery .museum-figure .lb-open{aspect-ratio:4/3;height:auto!important}
.museum-figure .lb-open img,.calligraphy-real-gallery .museum-figure .lb-open img,#p-calligraphy .culture-frontispiece .hist-banner img{height:100%!important;width:100%;object-fit:cover!important;padding:0!important}
.culture-frontispiece{margin-block:24px 32px}.folio-running-head{display:none}.hist-hero-copy{display:none}
.culture-folio-band,.orn,hr,.v14-divider{position:relative;display:block;height:1px!important;padding:0!important;border:0!important;background:var(--divider);overflow:visible!important;margin:24px auto!important;width:100%;max-width:var(--wide)}
.culture-folio-band>*,.orn>*{display:none}.culture-folio-band:after,.orn:after,hr:after,.v14-divider:after{content:'◇';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding-inline:9px;background:var(--bg);font-size:13px;line-height:1;color:var(--muted)}
.panel :is(.psub,.c-b,.art-card p,.specimen-text p,.craft dd,.reading-notes p,.verse-n,.visual-story p,.art-math,.et-tip p,.rule-why,.rule-do,.chap-body,.tr-open-grid p,.data-note,.hist-spine-note){text-align:center!important;text-wrap:pretty;margin-inline:auto}
.panel>.psub{max-width:66ch;margin-block:24px}.panel :is(.rule-card,.specimen,.leaf,.chapter){margin-block:24px;padding-block:24px}
.rule-card :is(.rule-label,.rule-ar,.rule-title,.rule-tr,.rule-bad){margin-block:12px!important}.rule-card :is(.rule-why,.rule-do){margin-block:20px!important}
.car-ctl{border-top:0!important;border-bottom:0!important;padding:10px;gap:8px}.car-btn{width:36px;height:36px;min-width:36px;position:relative}.car-btn:after{content:'';position:absolute;inset:-4px}.car-slide{transition:opacity 1.15s ease,visibility 0s linear 1.15s}.car-slide.on{transition:opacity 1.15s ease,visibility 0s}
#art-museum-gallery,.calligraphy-real-gallery,.cal-hands{scrollbar-width:thin;scrollbar-color:var(--bd) transparent;scroll-snap-type:x mandatory;padding-bottom:14px!important}
.gallery-controls{display:flex;justify-content:center;align-items:center;gap:12px;margin:12px 0 24px}.gallery-controls button{min-width:44px;min-height:44px}.gallery-controls small{color:var(--muted)}
:is(#po-filters,#poets,.po-filters,#art-filters,#hist-tracks){display:flex;flex-wrap:wrap!important;justify-content:center;overflow:visible!important;gap:8px;padding:0!important}
#chapter .chap-num{text-align:center!important;padding:0!important}#chapter .chap-num i{display:inline;font-style:normal}.hist-spine-note,#p-poetry .po-more{padding-inline:0!important}
#chapter :is(.chap-body,.chap-text,.chap-title){text-align:center!important}.chapter{animation:chapter-reveal .25s ease-out}@keyframes chapter-reveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
#cal .cal-watch,#cal .cal-pen{display:none!important}#cal .spec-plate{padding:24px!important}.spec-word{margin-block:20px!important}
.menu-release{display:grid;justify-items:center;gap:12px;padding:16px 0}.menu-release small,.release-info{color:var(--muted);font-size:.72rem;letter-spacing:.03em}.subtle-close{min-height:44px;font-size:.82rem;background:transparent}
.rd-row:has(.rd-ex){display:grid;grid-template-columns:1fr;gap:10px}.rd-row:has(.rd-ex) .rd-lw{display:contents}.rd-row:has(.rd-ex) .rd-l{grid-column:1}.rd-row:has(.rd-ex) .stepper{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.rd-row:has(.rd-ex) .rd-ex{font-size:1.05rem;order:-1;min-width:60px;text-align:center;margin:0 10px 0 0}
.chat{min-height:180px!important;max-height:58dvh}.chat:not(:has(.msg)){height:auto!important;min-height:180px!important}.ai-notice{font-size:.82rem;line-height:1.6}
#proverb-ending.has-picture>.fq{padding-block:24px}#proverb-picture .proverb-figure{margin-bottom:24px}.fq{padding-block:24px!important}footer{margin-top:24px!important;padding-top:24px!important}.fr-credit{position:absolute;bottom:10px;right:10px;max-width:80%;padding:5px 9px;border-radius:7px;background:var(--image-scrim);color:var(--bg);text-align:right}.fr-stage{mask-image:none!important;-webkit-mask-image:none!important;border-radius:16px!important}.fr-credit a{color:inherit}
#p-daily .rm-node-label{white-space:nowrap;font-size:.75rem}.rule-legend{display:grid;grid-template-columns:max-content 1fr;align-items:center;gap:10px 16px;padding:16px;font-size:.86rem}
@supports(interpolate-size:allow-keywords){details::details-content{transition:block-size .18s ease-out,opacity .15s ease-out,content-visibility .18s allow-discrete}}
@media(max-width:480px){.panel>.psub{font-size:.96rem;line-height:1.75}.culture-frontispiece{margin-block:20px 24px}.img-figure .lb-open .img-corner{max-width:86%!important;inset:auto 8px 8px auto!important}.rd-row:has(.rd-ex) .sb{padding:8px;min-width:36px}.rd-row:has(.rd-ex) .rd-ex{min-width:44px;margin-right:2px}.panel :is(.leaf,.chapter,.specimen){padding-inline:20px}}
@media(prefers-reduced-motion:reduce){.chapter,.car-slide,.car-slide.on{animation:none;transition:none}details::details-content{transition:none}}

.orn:has([data-t]),.orn:has(span:not(.orn-d)){height:auto!important;background:none}.orn:has([data-t])>span,.orn:has(span:not(.orn-d))>span:not(.orn-d){display:block}.orn:has([data-t]):after,.orn:has(span:not(.orn-d)):after{display:none}
.atlas-directory{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.atlas-country-button{padding:14px!important;min-height:108px;text-align:center}.atlas-country-button :is(b,span,small){font-size:.9rem}
.sev-key{display:grid!important;gap:10px;padding:16px!important}.sev-key>div{display:grid;grid-template-columns:minmax(125px,38%) 1fr;align-items:center;gap:12px;text-align:left}.sev-key :is(.sev-tag,span){font-size:.78rem;padding:5px 8px;margin:0}
.rule-what,.rule-t,.et-tip p,.chap-text,.tr-open-sum,.dl-open p,.dl-open p .sn{text-align:center!important}.rule-head{gap:12px}.rule-card :is(.rule-t,.rule-what,.rule-tr){margin-block:12px!important}
#nb-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}#nb-filters button:nth-child(4){margin-inline:calc(50% - 65px);min-width:130px}#nb-filters button:last-child{flex-basis:100%;max-width:250px;margin:auto}.nb-word{position:relative}.nb-word .tag{position:absolute;right:10px;top:10px;max-width:46%;font-size:.64rem;padding:3px 6px}

.img-figure .lb-open{aspect-ratio:var(--image-frame,3/2)}.img-figure .lb-open>picture{position:absolute;inset:0;width:100%;height:100%}.img-figure .lb-open>picture img{width:100%;height:100%;object-fit:cover}
.sev-key{grid-template-columns:minmax(125px,40%) 1fr;align-items:center}.sev-key em{font-size:.82rem;font-style:normal;text-align:left}
.nb-row{position:relative}.nb-row .tag{position:absolute;right:10px;top:10px;font-size:.64rem;padding:3px 6px}.nb-word .tag{position:static}
#nb-filters button:nth-child(4){margin-inline:calc(50% - 65px)}
#po-poets{display:flex;flex-wrap:wrap;overflow:visible;justify-content:center;gap:8px}.rd-body .release-info{display:block;text-align:center;margin-top:20px}

/* v14 study and cultural chapters */
.book-tabs{margin-bottom:24px}.book-tabs [aria-selected=true]{border-color:var(--gold);background:var(--bg3)}[data-book-pane][hidden]{display:none!important}.grammar-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.grammar-card,.tutor-note,.book-data{padding:16px;border:1px solid var(--bd2);border-radius:16px;background:var(--bg2);margin:12px 0;text-align:center}.grammar-card summary,.tutor-note summary,.book-data summary{cursor:pointer;min-height:44px;display:grid;align-items:center;color:var(--gold)}.grammar-ar{font-family:var(--arabic);font-size:1.8rem;color:var(--gold);margin:16px auto}.grammar-card p{font-size:.9rem;line-height:1.7}.tutor-answer{white-space:pre-wrap;overflow-wrap:anywhere;text-align:center;line-height:1.7}.tutor-question{font-weight:600}.book-data .btn{margin:8px}.hard-review-note{max-width:60ch}
.music-opening{padding:32px 24px;text-align:center;background:radial-gradient(ellipse at center,var(--bg3),transparent 70%);border-radius:24px}.music-opening>.music-diagram{max-width:240px;margin:auto}.music-diagram{width:100%;height:auto;max-height:220px;color:var(--gold)}.music-chapters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:32px auto}.music-card{position:relative;padding:28px 24px;border:1px solid var(--bd2);border-radius:24px;background:var(--bg2);text-align:center}.music-card h3{font-family:var(--serif);font-size:1.6rem}.music-card p{line-height:1.8}.chapter-index{position:absolute;top:18px;left:20px;color:var(--muted);font-family:var(--serif)}
#pattern-studio{margin-top:40px}#pattern-studio .pattern-preview{width:min(100%,440px);max-width:440px;aspect-ratio:1;margin:auto}#pattern-studio .pattern-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px}#pattern-studio .pattern-controls{text-align:center}#pattern-studio .row{justify-content:center}#pattern-studio .pattern-preview svg{width:100%;height:100%}
.footer-pattern{display:none}.fgrid{position:relative;isolation:isolate}.fgrid>.fcol{position:relative;z-index:1}.footer-scene{position:absolute;inset:0;opacity:.1;color:var(--gold);pointer-events:none;overflow:hidden;z-index:0}.footer-scene svg{width:100%;height:100%;min-height:200px}.scene-control{margin:20px auto 0;text-align:center;font-size:.75rem;color:var(--muted)}.scene-picker summary{min-height:44px;display:grid;align-items:center;cursor:pointer}.scene-picker select{color:var(--sand);background:var(--bg2);border:1px solid var(--bd);border-radius:8px;padding:10px;margin:10px;max-width:100%}.scene-control .pill{font-size:.75rem;min-height:44px}
.scene-travel{animation:scene-travel 75s linear infinite}.scene-float{animation:scene-float 16s ease-in-out infinite}.scene-steam{animation:scene-steam 8s ease-in-out infinite}.scene-leg{animation:scene-leg 1.4s ease-in-out infinite;transform-box:fill-box;transform-origin:top center}.scene-sway{animation:scene-sway 12s ease-in-out infinite;transform-origin:center}.scene-star{animation:scene-star 9s ease-in-out infinite}.scene-stream{animation:scene-star 6s ease-in-out infinite}.scene-weave{stroke-dasharray:120;animation:scene-weave 24s linear infinite}.scene-shadow{animation:scene-shadow 45s ease-in-out infinite}.scene-sail{animation:scene-sail 60s ease-in-out infinite}.scene-pour{animation:scene-pour 14s ease-in-out infinite;transform-box:fill-box;transform-origin:right center}
@keyframes scene-travel{from{transform:translateX(-350px)}to{transform:translateX(1050px)}}@keyframes scene-float{50%{transform:translate(12px,-8px)}}@keyframes scene-steam{0%{opacity:0;transform:translateY(8px)}50%{opacity:.8}100%{opacity:0;transform:translateY(-16px)}}@keyframes scene-leg{50%{transform:rotate(8deg)}}@keyframes scene-sway{50%{transform:rotate(1.5deg)}}@keyframes scene-star{50%{opacity:.3}}@keyframes scene-weave{to{stroke-dashoffset:-240}}@keyframes scene-shadow{50%{transform:translateX(16px)}}@keyframes scene-sail{50%{transform:translateX(70px)}}@keyframes scene-pour{50%{transform:rotate(-5deg)}}
.scene-paused *, .study-still *{animation-play-state:paused!important}
@media(max-width:820px){.music-chapters{grid-template-columns:1fr}.music-card{max-width:640px;margin-inline:auto}.grammar-grid{grid-template-columns:1fr}#pattern-studio .pattern-layout{grid-template-columns:1fr}.book-tabs{gap:8px}.book-tabs .pill{font-size:.8rem}.ai-layout{display:block}.ai-side{margin:16px 0}.ai-side #ai-sug{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ai-side #ai-sug .pill{font-size:.75rem;padding:8px}.chat{height:auto!important;min-height:180px!important}.footer-scene{opacity:.08}}
@media(prefers-reduced-motion:reduce){.footer-scene *{animation:none!important}}
@media print{.printing-pattern main .panel{display:none!important}.printing-pattern #p-art,.printing-pattern #pattern-studio{display:block!important}.printing-pattern #p-art>*:not(#pattern-studio){display:none!important}.printing-pattern #pattern-studio>*:not(.pattern-layout){display:none!important}.printing-pattern .pattern-controls,.printing-pattern footer{display:none!important}.printing-pattern #pattern-studio .pattern-layout{display:block}.printing-pattern #pattern-studio .pattern-preview{width:100%;max-width:none;border:0;background:none}.printing-pattern :is(main,.wrap,.panel,#pattern-studio,.pattern-preview){opacity:1!important;animation:none!important;transition:none!important;transform:none!important}.printing-pattern #pattern-studio{border:0;padding:0;margin:0}.printing-pattern .wrap{border:0!important;box-shadow:none!important}.printing-pattern #pattern-preview svg [stroke]{stroke:var(--cardink)!important}.printing-pattern #pattern-preview svg{max-height:250mm;width:100%;height:auto}}

#tr-detail{grid-column:1/-1;min-width:0;width:100%;text-align:center}.tr-card:has(#tr-detail){grid-column:1/-1}.tr-card #tr-detail{margin:16px 0 0}.tr-close{display:block;margin-left:auto}.tribe-ornament{width:100%;color:var(--gold);opacity:.65;padding:8px 0 0;position:relative}.tribe-ornament svg{width:100%;height:18px}.tribe-ornament a{display:flex;align-items:center;justify-content:center;width:max-content;min-height:28px;margin:0 auto;padding:0 8px;color:var(--muted);font-size:.62rem}.tr-open{animation:chapter-reveal .2s ease-out}.dl-bars #dl-detail{grid-column:1/-1;margin:12px 0 20px}.nb-row{position:relative}.nb-row .tag{position:absolute;right:10px;top:10px;font-size:.64rem;padding:3px 6px}

.culture-folio-band .folio-base{display:none!important}.music-opening>.music-diagram{max-width:180px}.music-opening{padding:24px 16px}.tr-open p{text-align:center}.v14-pattern-settings{display:grid;gap:12px}.v14-pattern-settings label{display:grid;gap:5px;color:var(--muted);font-size:.8rem}.v14-pattern-settings select,.v14-pattern-settings input{width:100%;max-width:280px;margin:auto}.v14-pattern-settings select{padding:10px;border:1px solid var(--bd);border-radius:8px;background:var(--bg2);color:var(--sand)}

#p-book>.page-banner,#p-hard>.page-banner{display:none}.culture-frontispiece .car-ctl{position:absolute;left:10px;bottom:10px;padding:0;border:0}.culture-frontispiece .car-ctl>:not(.car-play){display:none}.culture-frontispiece .car-play{background:var(--image-scrim);color:var(--bg);width:32px;height:32px;border:0;border-radius:7px}.culture-frontispiece .carousel .img-figure{--image-frame:16/9}
.po-book-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.po-book{margin:0;padding:18px;border:1px solid var(--bd2);border-radius:16px;text-align:center;background:var(--bg2)}.po-book summary{display:grid;gap:10px;cursor:pointer;min-height:100px;align-content:center;font-family:var(--serif);font-size:1.2rem}.po-book summary small{font-family:var(--ui);font-size:.75rem;line-height:1.5;color:var(--muted)}.book-spine-mark{color:var(--gold);font-size:1.5rem}.po-book p{font-size:.86rem;line-height:1.65}.po-book .pill{font-size:.75rem}.po-books{margin-top:40px}.po-books>h3{text-align:center;font-family:var(--serif);font-size:1.8rem}#p-poetry{position:relative;isolation:isolate}#p-poetry:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16;background:radial-gradient(ellipse at 20% 10%,color-mix(in srgb,var(--gold) 28%,transparent),transparent 40%),radial-gradient(ellipse at 80% 60%,color-mix(in srgb,var(--gold) 25%,transparent),transparent 38%);background-size:100% 900px;animation:poetry-light 40s ease-in-out infinite}#po .leaf{box-shadow:0 12px 30px color-mix(in srgb,var(--sand) 5%,transparent)}@keyframes poetry-light{50%{opacity:.3}}
.access-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-block:32px}.access-grid article{padding:28px 24px;border:1px solid var(--bd2);border-radius:24px;text-align:center;background:var(--bg2)}.access-grid h3{font-family:var(--serif);font-size:1.6rem}.access-grid small{color:var(--muted);font-size:.75rem}.access-grid p{line-height:1.8}.access-price{font-family:var(--serif);font-size:2rem;color:var(--gold)}.access-price span{display:block;font-family:var(--ui);font-size:.9rem}.cal-hand .museum-figure{width:100%;margin-bottom:12px}.cal-hand .museum-figure .lb-open{aspect-ratio:1}.cal-hand .img-corner{display:none!important}
@media(max-width:820px){.po-book-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.po-book{padding:14px}.po-book summary{font-size:1.1rem}.access-grid{grid-template-columns:1fr}.access-grid article{max-width:640px;margin:auto;width:100%}}
@media(prefers-reduced-motion:reduce){#p-poetry:before{animation:none}}

/* Resource lists and the recorded-audio-ready v14 polish. */
.font-resource-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:24px 0;text-align:center}
.font-resource-grid article{padding:20px 12px;border:1px solid var(--bd);border-radius:14px}
.font-resource-grid a{display:inline-flex;align-items:center;min-height:28px;margin:6px 4px}
.scene-travel{animation-delay:-24s}
#p-ai .ai-main>.ai-side{margin:16px 0;max-width:none}
#p-ai .ai-main>.ai-side #ai-sug{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important}
#p-ai .ai-main>.ai-side #ai-ctx{display:none}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){.font-resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

body[data-arfont="ruqaa"]{--arabic:'Aref Ruqaa',serif}body[data-arfont="nastaliq"]{--arabic:'Gulzar',serif}
.img-figure .lb-open .img-corner{opacity:1!important;text-shadow:none!important}
.panel .img-figure .lb-open picture img{object-fit:cover!important}
#p-ai .ai-layout:has(>.ai-main:only-child){grid-template-columns:minmax(0,1fr)}
#pattern-preview{max-width:min(100%,560px)!important;margin:24px auto}
.listen-btn,.pill,.car-play{min-height:44px}.culture-frontispiece .car-play{width:44px;height:44px}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){#art-museum-gallery>.img-figure,.calligraphy-real-gallery>.img-figure{flex:0 0 100%;min-width:0}.cal-hands>.cal-hand{flex-basis:calc(50% - 8px);min-width:0}.cal-hand-ar{font-size:2.5rem}.book-tabs{gap:6px}}

/* v14 audit fixes, 10.10.2026: requests R1-R14, R31, R41-R43 (Grimm's 09.10 list). */
/* R1: captions sit on a fainter box; images fill their frame instead of leaving a band. */
body{--image-scrim:color-mix(in srgb,var(--sand) 58%,transparent)}
.img-figure .lb-open .img-corner{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#proverb-picture{--image-frame:16 / 9}
#proverb-picture .lb-open img{height:100%;aspect-ratio:auto}
.courtyard-figure .lb-open{max-height:410px}
.courtyard-figure .lb-open img{height:100%;max-height:none}
@media(max-width:820px){.courtyard-figure .lb-open{max-height:240px}}
/* R5: stage names stay on one line (markup class is .rm-nl). */
#p-daily .rm-nl{white-space:nowrap;font-size:.75rem}
/* R6/R7: the closing rule and section eyebrows use the shared subtle divider. */
.closing-rule{height:1px;border:0;background:var(--divider);position:relative;overflow:visible}
.closing-rule:after{content:'◇';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding-inline:9px;background:var(--bg);font-size:13px;line-height:1;color:var(--muted)}
.eyebrow::after{background:var(--divider)}
/* R4/R13: severity key reads as three tidy lines. */
.sev-key .sev-tag{white-space:nowrap;justify-self:center;font-size:.7rem;padding:4px 8px}
.sev-key em{font-size:.78rem}
/* R14: every rule card opens the same way: tag, then Arabic. */
.rule-head{flex-direction:column;align-items:center;gap:8px}
/* R10/R11: word list tag top right, card content centred, quiet divider above the note. */
#nb .cut{position:relative;text-align:center}
#nb .cut:has(.nb-head .tag){padding-top:32px!important}
#nb .cut .nb-head{justify-content:center!important}
#nb .cut .nb-head .tag{position:absolute;top:10px;right:10px;font-size:.6rem;padding:2px 7px;max-width:46%}
#nb .cut .nb-note{background:var(--divider) top/100% 1px no-repeat}
#nb .cut .nb-listen{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
/* R8: grammar examples are readable Arabic, not body-size text. */
.grammar-card .grammar-ar{font-size:calc(1.7rem * var(--arscale,1));line-height:1.6}
.grammar-card h4,.grammar-card summary{text-align:center}
/* R31: opening one book no longer stretches its neighbour. */
.po-book-grid{align-items:start}
/* R41/R42: Tutor and Coach text centred like the rest of the site. */
#p-ai .ai-notice,#p-coach .ai-notice,#p-coach .answer-meta{text-align:center}
#ai-sug .pill,#p-coach .coach-g .pill{text-align:center;justify-content:center}
/* R43: settings close button and reset label. */
.rd-foot{display:flex;justify-content:center;padding-top:12px}
.rd-body .sb.ghost{font-family:var(--ui)}

/* v14 audit fixes, 10.10.2026: exploration requests R16-R39 (Grimm's 09.10 list). */
/* R39: images fill their box and are cropped rather than leaving white space;
   the lightbox still shows the whole object. Carousel slides share one frame. */
.carousel .img-figure .lb-open{aspect-ratio:var(--image-frame,3 / 2)}
.carousel .img-figure .lb-open img,.img-figure.museum-figure .lb-open img,.museum-gallery .museum-figure img,.calligraphy-real-gallery .museum-figure .lb-open img,.cal-photos .img-figure .lb-open img,#po .poetry-figure[data-image-kind="museum-object"] img,#p-art .museum-figure img{width:100%;height:100%!important;max-height:none!important;object-fit:cover!important;padding:0!important}
.museum-gallery .museum-figure,.calligraphy-real-gallery .museum-figure,.spec-plate .museum-figure,#po .poetry-figure[data-image-kind="museum-object"]{--image-frame:4 / 3}
.carousel .img-figure .lb-open img{aspect-ratio:auto}
.art-card .carousel,.art-card .car-ctl,.specimen .carousel,.specimen .car-ctl{background:transparent}
/* R16/R35: swipe galleries show exactly one item at a time on phone, no half card at the edge. */
@media(max-width:820px){
 #art-museum-gallery,.calligraphy-real-gallery{display:flex!important;gap:0!important;padding-inline:0!important;scroll-padding-inline:0;scroll-snap-type:x mandatory;overflow-x:auto;scrollbar-width:none}
 #art-museum-gallery>*,.calligraphy-real-gallery>*{flex:0 0 100%!important;max-width:none!important;scroll-snap-align:start;padding-inline:2px;box-sizing:border-box}
 .cal-hands{gap:0!important;scroll-snap-type:x mandatory;scrollbar-width:none}
 .cal-hands>.cal-hand{flex:0 0 50%!important;scroll-snap-align:start;padding-inline:4px;box-sizing:border-box}
}
#art-vitrine-caption,#art-vitrine-caption figcaption{text-align:center;justify-items:center}
/* R17: caption and credit share one line where they fit; long captions end in an ellipsis. */
.img-figure .lb-open .img-corner,.panel .img-figure .lb-open .img-corner{display:flex!important;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;column-gap:6px;max-width:min(78%,54ch)!important}
.img-figure .lb-open .img-corner .img-caption{display:block;-webkit-line-clamp:unset;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%}
.img-figure .lb-open .img-corner .img-attribution{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%}
/* R21: a tapped tribe opens below its own name, not above it. */
.tribe-browser .tr-card #tr-detail{order:1}
/* R23: dialect word chips in a tidy grid; space after the note icon. */
.dial-glosses{display:grid;grid-template-columns:repeat(3,minmax(0,max-content));justify-content:center}
.pill .lnote{margin-right:5px}
/* R25: compact atlas directory. */
.atlas-country-button{flex-direction:row!important;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:2px 8px;padding:8px 10px!important;text-align:center!important}
.atlas-country-button b{font-weight:500;font-size:.88rem}
.atlas-country-button span{font-size:1rem}
.atlas-country-button small{flex-basis:100%;font-size:.68rem}
/* R30: poet chooser folds; inside it the chips simply wrap. */
.po-poet-fold{max-width:var(--wide);margin:0 auto var(--s4);text-align:center}
.po-poet-fold>summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;cursor:pointer;color:var(--sand2);font-size:.9rem}
.po-poet-fold>summary span{color:var(--muted)}
.po-poet-fold .po-poets{flex-wrap:wrap!important;overflow:visible!important;justify-content:center;padding-top:var(--s2)}
/* R34: six-hands pointer to the specimen card for scripts without a faithful typeface. */
.cal-hand-ref{display:grid;place-items:center;min-height:120px;padding:12px;border:1px dashed var(--bd2);border-radius:12px;color:var(--muted);font-size:.78rem;line-height:1.5;text-align:center;text-decoration:none}
/* R38/R16: centre the remaining left-aligned blocks on exploration pages. */
.spec-head{justify-content:center;flex-wrap:wrap;gap:4px 12px;text-align:center}
.spec-traits{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:0}
.spec-use,.script-study>summary{text-align:center}
.script-study>summary{justify-content:center}
.pattern-controls{align-items:center}
/* R40: resources section is a plain section, not a pill-shaped fold. */
#cal-resources{border:0;border-radius:0;padding:0;width:100%;max-width:var(--wide)}

/* v14 audit fixes, 10.10.2026: shared lines, footer, atlas card and spacing (R3, R7, R18, R24, R32). */
/* R7/R18: remaining content-splitting rules use the same soft gradient line as the dividers. */
.et-tip,.rule-why,.rule-do,.spec-use,.today-routes,.fbot{border-image:var(--divider) 1}
.spec-plate{border-image:var(--divider) 1}
/* R3: footer bottom row centred like the rest of the site. */
.fbot{justify-content:center;text-align:center}
/* R24: the country card opens gently and reads centred. */
#atlas-dialog{transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1),overlay .45s allow-discrete,display .45s allow-discrete}
#atlas-dialog::backdrop{background:color-mix(in srgb,var(--bg) 0%,transparent);transition:background .45s ease,overlay .45s allow-discrete,display .45s allow-discrete}
#atlas-dialog[open]::backdrop{background:color-mix(in srgb,var(--sand) 18%,transparent)}
@starting-style{#atlas-dialog[open]::backdrop{background:color-mix(in srgb,var(--bg) 0%,transparent)}}
#atlas-dialog .country-head{justify-content:center;text-align:center}
#atlas-dialog p{text-align:center}
/* R32: the "About this material" fold breathes under the intro text. */
.panel.on>details.reading-notes{margin-top:var(--s3)}
@media(prefers-reduced-motion:reduce){#atlas-dialog,#atlas-dialog::backdrop{transition:none}}
/* R22: dialect detail keeps facts and the word list folded, so a tap opens a short card. */
.dl-fold{margin:var(--s3) auto;max-width:var(--wide);text-align:center}
.dl-fold>summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;cursor:pointer;color:var(--sand2);font-size:.9rem}
.dl-fold>summary span{color:var(--muted)}
.dl-fold .dl-words>.orn{display:none}
/* R27: on phones the timeline shows exactly three eras at a time, no half card at the edge. */
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
 #spine{scroll-padding-inline:0}
 #spine .stop{flex:0 0 calc((100% - 2 * var(--s2)) / 3);min-width:0;max-width:none;scroll-snap-align:start}
}
/* R36: even 24px above and below the "One line, six hands" divider. */
#calligraphy-specimen{margin-bottom:0}

/* Study lane: controls stay with the Arabic they read. */
.study-sentence-line,.hard-line{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 16px;width:100%}
#p-expressions .study-sentence-line .ex-listen{position:static;margin:0;display:flex;gap:6px;justify-content:center;flex-shrink:0}
#p-expressions .study-sentence-line .listen-btn,.hard-line .listen-btn{min-height:44px}
#p-expressions .ex-card{transform:none}
.hard-review-list{max-width:760px;margin:auto}
.hard-review-list .hard-row{grid-template-columns:minmax(0,1fr) auto;padding:16px 0;gap:12px}
.hard-line{grid-column:1/-1}
.hard-line .hard-ar{grid-column:auto;text-align:center;overflow-wrap:anywhere}
.hard-main small{color:var(--muted);font-size:var(--t-xs);line-height:1.5}
#p-hard .hard-review-list .pill,#p-hard .hard-go .btn{min-height:44px}
.po-cover-link{display:block;width:110px;margin:12px auto}
.po-cover-link img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:var(--r2)}
.po-cover-credit{text-align:center;color:var(--muted);font-size:var(--t-xs)}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
 .study-sentence-line{gap:4px 12px}
 .hard-review-list .hard-row{grid-template-columns:minmax(0,1fr)}
 .hard-review-list .hard-row>.pill{justify-self:center}
}
#p-sentences #sb-tg+#sb-listen{margin:8px auto 12px;display:flex;justify-content:center;flex-wrap:wrap;gap:6px}
#p-sentences #sb-listen .listen-btn{min-height:44px}

/* r1-g.css: journeys lane (Art, History, Poetry, Calligraphy). Added 11.10.2026 so parallel lanes never edit the same file. */

/* journeys: art 11.10.2026 */
#p-art .art-journey-spine{position:sticky;top:0;z-index:8;display:flex;justify-content:center;gap:4px;padding:8px 0;margin:24px 0;background:var(--bg);border-block:1px solid var(--bd);overflow-x:auto}
#p-art .art-journey-spine button{flex:1;min-width:0;min-height:44px;padding:8px;color:var(--muted);background:transparent;border:0;border-bottom:2px solid transparent;cursor:pointer;font:inherit;font-size:var(--t-sm);line-height:1.3}
#p-art .art-journey-spine button span{display:block;margin-bottom:4px;color:var(--gold);font-size:var(--t-xs)}
#p-art .art-journey-spine button.on{color:var(--sand);border-bottom-color:var(--gold)}
#p-art :is(.art-journey-spine button,.art-chapter h2):focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#p-art :is(button,a,summary):focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#p-art :is(button,summary){min-height:44px}
#p-art #art-museum-gallery[hidden],#p-art #art-vitrine-caption[hidden]{display:none}
#p-art #art-filters{margin:16px auto 32px}
#p-art .art-chapter{scroll-margin-top:120px;margin:0 0 64px}
#p-art .art-chapter-intro{max-width:640px;margin:0 auto 32px;text-align:center}
#p-art .art-chapter-number{display:flex;align-items:center;justify-content:center;gap:16px;color:var(--gold);font-size:var(--t-sm);letter-spacing:.12em}
#p-art .art-chapter-number:before,#p-art .art-chapter-number:after{content:'';width:64px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim),transparent)}
#p-art .art-chapter h2{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:400;margin:12px auto}
#p-art .art-chapter-intro p{color:var(--muted);text-align:center;line-height:1.7;margin:0 auto}
#p-art .art-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
#p-art .art-grid>.art-card:only-child{grid-column:1/-1;max-width:760px;width:100%;margin-inline:auto}
#p-art .art-card{content-visibility:visible;transition:border-color .25s;background:var(--bg3)}
#p-art .art-card:hover{transform:none}
#p-art .art-card .art-body{padding:24px}
#p-art .art-chapter .museum-gallery{margin:32px auto 0}
#p-art .art-chapter .art-vitrine-caption{margin-bottom:0}
#p-art .art-next{text-align:center;margin:32px auto 16px;padding:24px 0;border-top:1px solid var(--bd)}
#p-art .art-next p{color:var(--muted);margin:0 auto 16px}
#p-art #pattern-studio{margin:16px 0 0;padding:24px;border:1px solid var(--bd);border-radius:var(--r6);background:var(--bg3)}
#p-art #pattern-studio .pattern-layout{align-items:center;margin:24px 0}
#p-art #pattern-studio :is(input,select,button,summary){min-height:44px}
#p-art #pattern-studio .v14-pattern-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#p-art #pattern-studio .v14-pattern-settings label{display:flex;flex-direction:column;gap:8px;min-width:0}
#p-art #pattern-studio select{max-width:100%;width:100%;background:var(--bg);color:var(--sand);border:1px solid var(--bd);border-radius:var(--r4);padding:8px;font:inherit;font-size:var(--t-sm)}
#p-art #pattern-studio .pattern-preview{background:var(--bg);border:1px solid var(--bd);border-radius:var(--r4);color:var(--gold)}
@media(prefers-reduced-motion:no-preference){
 #p-art .art-arrived .art-chapter-intro{animation:art-chapter-arrival .55s ease-out both}
 @keyframes art-chapter-arrival{from{opacity:.35;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
 #p-art .art-journey-spine{top:0;justify-content:flex-start;gap:0;margin-inline:-8px;padding:4px 0}
 #p-art .art-journey-spine button{font-size:.75rem;padding:6px 4px;min-width:64px}
 #p-art .art-journey-spine button span{margin-bottom:2px}
 #p-art .art-grid{grid-template-columns:minmax(0,1fr);gap:20px}
 #p-art .art-chapter{margin-bottom:48px;scroll-margin-top:92px}
 #p-art .art-chapter-intro{margin-bottom:24px}
 #p-art .art-card .art-body{padding:20px}
 #p-art #pattern-studio{padding:16px}
 #p-art #pattern-studio .pattern-layout{grid-template-columns:minmax(0,1fr)}
}
@media print{
 .printing-pattern #p-art>#art-workshop{display:block!important}
 .printing-pattern #art-workshop>#art-next{display:none}
 .printing-pattern #p-art #pattern-studio{border:0;background:none;padding:0;margin:0}
 .printing-pattern #p-art #pattern-studio .pattern-preview{border:0;background:none}
}


/* journeys: history 11.10.2026 */
#p-history #hist-tracks{gap:8px;margin:24px auto 16px}
#p-history #hist-tracks .track{min-height:44px}
#p-history #hist-intro{margin:16px auto 24px}
#p-history .hist-position{font-size:var(--t-sm);color:var(--gold);text-align:center;margin:16px auto 8px}
#p-history .hist-spine-note{font-size:var(--t-xs);color:var(--muted);max-width:64ch;margin:8px auto 16px;line-height:1.6}
#p-history #spine{display:flex;position:relative;isolation:isolate;overflow-x:auto;gap:0;padding:8px 0 12px;margin:0 auto 24px;scroll-snap-type:x mandatory;scroll-padding-inline:8px}
#p-history #spine .spine-line,#p-history #spine .spine-progress{display:none}
#p-history #spine .stop{position:relative;flex:1 0 0;min-width:0;max-width:none;min-height:128px;padding:0 4px 8px;border:0;border-radius:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;scroll-snap-align:center;font:inherit}
#p-history #spine .stop:before{content:'';position:absolute;z-index:-1;top:18px;left:0;right:0;height:1px;background:var(--bd)}
#p-history #spine .stop:first-of-type:before{left:50%}
#p-history #spine .stop:last-of-type:before{right:50%}
#p-history #spine .stop.past:before,#p-history #spine .stop.on:before{background:var(--gold-dim)}
#p-history #spine .stop-dot{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;margin:0;border:1px solid var(--bd);border-radius:50%;background:var(--bg);color:var(--muted);box-shadow:none}
#p-history #spine .stop-dot span{font-size:var(--t-xs);line-height:1}
#p-history #spine .stop.on .stop-dot{background:var(--gold);color:var(--bg);border-color:var(--gold);box-shadow:0 0 0 4px var(--glow)}
#p-history #spine .stop.past .stop-dot{border-color:var(--gold-dim);color:var(--gold)}
#p-history #spine .stop-y,#p-history #spine .stop-n{margin:0;letter-spacing:0;text-transform:none;font-size:var(--t-xs);line-height:1.4;white-space:normal;overflow-wrap:anywhere;text-align:center}
#p-history #spine .stop.on .stop-n{color:var(--sand);font-weight:600}
#p-history #spine .stop-sa{font-size:var(--t-xs);margin:0}
#p-history :is(.stop,.track,.pill):focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#p-history #chapter{display:block;position:relative;margin:24px auto;padding:24px;border:1px solid var(--bd);border-radius:var(--r6);background:var(--bg3);overflow:hidden}
#p-history #chapter .chap-num{display:table;width:auto;padding:0;margin:0 auto 20px;border:0;background:none;font-size:var(--t-sm);letter-spacing:.12em;color:var(--muted);text-align:center}
#p-history #chapter .chap-num i{display:inline;font:inherit;color:var(--muted)}
#p-history #chapter .chap-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;padding:0;align-items:center;animation:none}
#p-history #chapter .chap-title{font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.2;margin:16px auto}
#p-history .hist-key-dates{color:var(--gold);font-size:var(--t-sm);margin:8px auto 0;line-height:1.6}
#p-history .hist-key-dates span{display:block;color:var(--muted);font-size:var(--t-xs)}
#p-history #chapter .chap-text{font-size:var(--t-base);line-height:1.8;margin:16px auto;text-align:center}
#p-history .hist-today{margin:24px auto;padding:16px;border-block:1px solid var(--bd);text-align:center}
#p-history .hist-today h4{font-size:var(--t-sm);font-weight:500;color:var(--gold);margin:0 0 8px}
#p-history .hist-today p{font-size:var(--t-sm);line-height:1.7;color:var(--sand2);margin:0}
#p-history #chapter .history-figure{margin:0;--image-frame:4 / 3}
#p-history #chapter .history-figure img{object-fit:cover}
#p-history #chapter .chap-orn{display:none}
#p-history #chapter .chap-actions{display:flex;justify-content:center;flex-wrap:wrap;margin:16px 0 0;gap:8px}
#p-history #chapter .chap-actions .pill{min-width:44px;max-width:100%;white-space:normal;text-align:center}
#p-history #hist-chapter-title:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
#p-history #chapter .pill,#p-history .hist-journey-next .pill{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
#p-history .hist-journey-next{margin:24px auto;text-align:center}
#p-history .hist-journey-next p{font-size:var(--t-sm);color:var(--muted);margin:0 auto 16px}
@media(prefers-reduced-motion:no-preference){
 #p-history #chapter.enter-next .chap-body,#p-history #chapter.enter-prev .chap-body{animation:hist-chapter-arrival .24s ease-out both}
 @keyframes hist-chapter-arrival{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
 #p-history #spine .stop{flex:0 0 calc(100% / 3);min-width:0;min-height:136px;padding-inline:6px}
 #p-history #chapter{padding:20px 16px}
 #p-history #chapter .chap-body{grid-template-columns:minmax(0,1fr);gap:24px}
 #p-history #chapter .chap-title{font-size:1.7rem}
 #p-history #chapter .chap-text-col{min-width:0}
}

/* journeys: poetry 11.10.2026 */
#p-poetry.po-motion-paused:before{animation-play-state:paused}
#p-poetry .po-motion-control{text-align:center;margin:16px auto}
#p-poetry :is(.po-motion-control button,.po-poets button,.leaf-veil summary,.po-actions button){min-height:44px}
#p-poetry :is(button,summary):focus-visible{outline:2px solid var(--gold);outline-offset:4px}
#p-poetry .leaf-attribution:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
#p-poetry #po .leaf{display:block;padding:0;margin:32px auto 48px;border-radius:var(--r4);content-visibility:visible;max-width:100%;background:linear-gradient(90deg,var(--bg3),var(--bg2) 50%,var(--bg3));box-shadow:0 12px 30px color-mix(in srgb,var(--sand) 5%,transparent)}
#p-poetry #po .leaf-rule{display:flex;padding:16px;border-right:0;border-bottom:1px solid var(--bd);background:transparent}
#p-poetry #po .leaf-rule span{writing-mode:horizontal-tb;letter-spacing:.12em;font-size:var(--t-xs)}
#p-poetry #po .leaf-body{padding:32px;min-width:0}
#p-poetry .poetry-figure{max-width:640px;margin:0 auto 24px;--image-frame:2 / 1}
#p-poetry .poetry-figure img{object-fit:cover}
#p-poetry .po-story{max-width:64ch;margin:24px auto;text-align:center}
#p-poetry .po-story p{font-size:var(--t-sm);line-height:1.7;color:var(--muted);margin:8px auto}
#p-poetry .po-story .po-story-era{color:var(--gold);font-size:var(--t-xs)}
#p-poetry .leaf-attribution{font-weight:500;letter-spacing:0;text-transform:none;margin:24px auto;font-size:var(--t-sm)}
#p-poetry .po-spread{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;align-items:start}
#p-poetry .po-arabic-page{min-width:0;padding:16px 8px}
#p-poetry #po .leaf-veil{min-width:0;max-width:none;width:100%;margin:0;padding:16px 8px 16px 32px;border-left:1px solid var(--bd)}
#p-poetry #po .verse{font-size:calc(clamp(1.7rem,2.4vw,2.4rem) * var(--arscale));line-height:2;max-width:100%;text-shadow:none;margin:0 auto 24px}
#p-poetry #po .verse-tr{font-size:var(--t-base);line-height:1.7;max-width:100%;margin:0 auto 24px}
#p-poetry #po .verse-en{font-size:var(--t-md);line-height:1.8;margin:24px auto}
#p-poetry .verse-n{text-align:center}
#p-poetry .po-listen{justify-content:center;margin:24px auto 0}
#p-poetry .po-actions{justify-content:center}
#p-poetry .colophon{margin-top:24px}
@media(prefers-reduced-motion:no-preference){
 #p-poetry #po .leaf:not([hidden]){animation:po-leaf-arrival .24s ease-out both}
 @keyframes po-leaf-arrival{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
}
@media(prefers-reduced-motion:reduce){
 #p-poetry:before{animation:none}
 #p-poetry .po-motion-control{display:none}
}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
 #p-poetry #po .leaf{margin:24px auto 32px}
 #p-poetry #po .leaf-body{padding:24px 16px}
 #p-poetry .po-spread{grid-template-columns:minmax(0,1fr);gap:24px}
 #p-poetry #po .leaf-veil{padding:24px 0 0;border-left:0;border-top:1px solid var(--bd)}
 #p-poetry .po-arabic-page{padding:8px 0}
}
@media print{
 #p-poetry:before{animation:none}
 #p-poetry #po .leaf{animation:none;box-shadow:none}
 #p-poetry .po-spread{display:block}
 #p-poetry #po .leaf-veil{border:0;padding:0}
}

/* journeys: calligraphy 11.10.2026 */
#p-calligraphy .cal-comparison{margin:24px auto;max-width:var(--wide);text-align:center}
#p-calligraphy .cal-comparison>p{max-width:64ch;margin:16px auto;line-height:1.7}
#p-calligraphy #cal-hands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible;margin:24px auto 16px;scroll-snap-type:none}
#p-calligraphy #cal-hands .cal-hand{width:100%;min-width:0;min-height:168px;margin:0;padding:16px 8px;gap:8px;font:inherit;cursor:pointer;color:var(--sand);background:var(--bg3);border:1px solid var(--bd);border-radius:var(--r4)}
#p-calligraphy #cal-hands .cal-hand[aria-pressed="true"]{border-color:var(--gold);background:var(--bg2);box-shadow:inset 0 -3px var(--gold)}
#p-calligraphy #cal-hands .cal-hand-word{font-size:calc(2.4rem * var(--arscale));line-height:1.8;color:var(--gold);min-height:80px;display:block;max-width:100%;overflow-wrap:anywhere}
#p-calligraphy #cal-hands .cal-hand small{font-size:var(--t-xs);line-height:1.5;color:var(--muted);max-width:24ch}
#p-calligraphy .cal-spec-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:16px auto}
#p-calligraphy .cal-hand-ref{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 16px;border:1px solid var(--bd);border-radius:var(--r4);color:var(--sand2);font-size:var(--t-sm)}
#p-calligraphy .cal-position{color:var(--gold);font-size:var(--t-sm)}
#p-calligraphy #cal .specimen{content-visibility:visible;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);margin:24px auto;padding:0;border:1px solid var(--bd);border-radius:var(--r6);background:var(--bg3);overflow:hidden;max-width:100%;align-items:start}
#p-calligraphy #cal .specimen[hidden]{display:none}
#p-calligraphy #cal .spec-plate{padding:24px;min-width:0;border-right:1px solid var(--bd);border-bottom:0}
#p-calligraphy #cal .spec-body{padding:24px;min-width:0}
#p-calligraphy .spec-head{justify-content:center;flex-direction:column;align-items:center;gap:8px;text-align:center}
#p-calligraphy .spec-head h3{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.2;margin:0}
#p-calligraphy .spec-word{font-size:calc(clamp(2.4rem,5vw,4rem) * var(--arscale));overflow-wrap:anywhere}
#p-calligraphy .spec-traits{list-style:none;padding:0;text-align:center}
#p-calligraphy .spec-traits li{padding:8px 0;line-height:1.6}
#p-calligraphy .spec-use{line-height:1.7;text-align:center;margin:16px auto}
#p-calligraphy .specimen .museum-figure{width:100%;margin:16px auto;--image-frame:4 / 3}
#p-calligraphy .specimen .museum-figure img{object-fit:cover}
#p-calligraphy .cal-acts{justify-content:center;gap:8px}
#p-calligraphy :is(button,summary,.pill){min-height:44px}
#p-calligraphy :is(button,a,summary,.c-h):focus-visible{outline:2px solid var(--gold);outline-offset:4px}
#p-calligraphy #cal-video{max-width:720px;margin:24px auto 32px;padding:24px;border:1px solid var(--bd);border-radius:var(--r6);background:var(--bg3);text-align:center}
#p-calligraphy .cal-video-still{display:grid;place-items:center;aspect-ratio:2 / 1;max-width:400px;margin:0 auto 24px;background:var(--bg2);border-radius:var(--r4);color:var(--gold)}
#p-calligraphy .cal-video-still svg{width:80%;height:auto}
#p-calligraphy .cal-video-channel{font-size:var(--t-sm);color:var(--gold);margin:8px auto 16px}
#p-calligraphy #cal-video p{line-height:1.7;max-width:64ch;margin:16px auto}
#p-calligraphy #cal-video .pill{display:inline-flex;align-items:center;justify-content:center;white-space:normal;max-width:100%;line-height:1.5}
#p-calligraphy #cal-fonts-title{margin:24px auto 16px;text-align:center}
#p-calligraphy .font-resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px auto}
#p-calligraphy .font-resource-grid article{min-width:0;text-align:center;padding:24px 16px}
#p-calligraphy .font-resource-grid a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;line-height:1.5;max-width:100%}
@media(max-width:820px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
 #p-calligraphy #cal-hands{grid-template-columns:repeat(2,minmax(0,1fr))}
 #p-calligraphy #cal .specimen{grid-template-columns:minmax(0,1fr)}
 #p-calligraphy #cal .spec-plate{border-right:0;border-bottom:1px solid var(--bd);padding:24px 16px}
 #p-calligraphy #cal .spec-body{padding:24px 16px}
 #p-calligraphy #cal-video{padding:24px 16px}
 #p-calligraphy .font-resource-grid{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
 #p-calligraphy .specimen{animation:none;transition:none}
}
@media print{
 #p-calligraphy #cal .specimen[hidden]{display:grid}
 #p-calligraphy .cal-spec-links,#p-calligraphy #cal-hands{display:none}
}

/* r1-h.css: platform lane (cache, performance, security, sharing, SEO). Added 11.10.2026 so parallel lanes never edit the same file. */

/* Each short intro sentence gets its own balanced line block, without orphan words. */
.book-intro .psub .sn{display:block;text-wrap:balance}

/* Repeat pronunciation stays quiet while its Stop control remains available. */
.pronunciation-dock.is-compact{width:fit-content;max-width:calc(100% - 32px)}
.pronunciation-dock p{white-space:pre-line;text-wrap:pretty}

/* A reduced deck keeps its remaining support panel centred and its recovery sentences whole. */
.flashcard-support:has(> .box[hidden]) > .box:last-child{grid-column:1/-1;justify-self:center;width:min(100%,65ch)}
#fc-empty .sn{display:block;text-wrap:balance}

/* Current short-copy rule supersedes ordinary inline flow only for short display prose. */
.flow-display>.sn,[data-t="aiNotice"]>.sn,[data-t="contactNote"]>.sn{display:block;max-width:100%;text-wrap:pretty}
:is(h1,h2,h3,h4,.psub,figcaption).flow-display>.sn{text-wrap:balance}
.f-project-copy p{margin:0 auto;text-wrap:pretty;max-width:65ch}
.f-project-copy a{white-space:nowrap}

/* Phone feedback, 17.10.2026: the next learning action leads; reference stays available on demand. */
.today-intro-grid{display:block}
.today-hero .today-actions{margin-block:var(--s3)}
.today-actions .journal-path{flex:0 1 auto;background:transparent;border-color:transparent;font-size:var(--t-sm)}
.today-story .dallah-hero-figure{max-width:720px;margin:var(--s4) auto}
.today-routes{margin-top:0;margin-bottom:var(--s4)}
.study-options{max-width:820px;margin:0 auto var(--s3);border-bottom:1px solid var(--bd2)}
.study-options>summary,.flashcard-support>.box>summary{cursor:pointer;min-height:44px;padding-block:var(--s2);color:var(--sand2);font-size:var(--t-sm);text-wrap:pretty}
.study-options>summary{max-width:65ch;margin-inline:auto;text-align:center}
.flashcard-support{align-items:start}
.flashcard-support>.box{padding-block:var(--s2)}
.flashcard-support>.box>summary{margin:0;text-transform:none;letter-spacing:0}
.flashcard-support>.box[open]>summary{margin-bottom:var(--s2)}
#p-daily .rm-days{display:flex;flex-direction:column;align-items:stretch;max-width:820px;margin-inline:auto}
#p-daily .day>summary{cursor:pointer;min-height:44px;align-items:center;gap:var(--s2);margin:0}
#p-daily .day>summary::marker{color:var(--gold-dim)}
#p-daily .day>summary::after{content:'+';color:var(--gold-dim);font-size:1rem}
#p-daily .day[open]>summary::after{content:'−'}
#p-daily .day-t{display:block;margin:var(--s1) 0 0;text-wrap:pretty}
#p-daily .day-words{padding-top:var(--s3)}
@media(max-width:820px){
 .today-hero h2 .today-ar{display:inline;font-size:1em;margin:0 .2em 0 0}
 .today-hero .today-line{font-size:.64em;margin-top:var(--s2)}
 .today-actions .today-start{flex-basis:100%}
 .today-routes{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
 .today-routes button{padding:var(--s2);align-items:center;text-align:center}
 .today-routes button>span,.today-routes small{display:none}
 .today-routes b{font-family:var(--ui);font-size:var(--t-sm);line-height:1.5;text-wrap:balance}
 .flashcard-support{grid-template-columns:1fr;gap:var(--s2)}
 #fc-session{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s2);padding:var(--s2)}
 #fc-session[hidden]{display:none}
 #fc-session small{display:none}
 #fc-session>.pill{font-size:var(--t-xs);padding-inline:var(--s2)}
}

/* Phone chat screens (AI Tutor, Situation coach, Region): the conversation is the page.
   No banner, quick prompts as one swipeable row on top, chat fills the screen,
   input and send stay in view above the keyboard. The legal notice stays, small, under the input. */
@media(max-width:900px){
  :is(#p-ai,#p-coach,#p-events).on{display:flex;flex-direction:column;height:calc(100dvh - 84px);min-height:420px;padding-bottom:var(--s2)}
  :is(#p-ai,#p-coach,#p-events) > :is(.page-banner,.orn,.eyebrow,.pt,.psub){display:none}
  #p-ai .ai-layout{display:flex;flex-direction:column;flex:1;min-height:0;gap:var(--s2)}
  #p-ai .ai-side{order:-1;flex:none}
  #p-ai .ai-side .box-t{display:none}
  #p-ai #ai-sug,#p-ai .ai-main>.ai-side #ai-sug{display:flex!important;flex-wrap:nowrap!important;flex-direction:row!important;overflow-x:auto;gap:var(--s2)!important;padding-bottom:4px;scrollbar-width:none}
  #p-ai #ai-sug .pill{width:auto;flex:none;white-space:nowrap;border-radius:20px}
  #p-ai .ai-main{flex:1;min-height:0}
  #p-ai .ai-main .chat{flex:1;min-height:0;max-height:none;margin-bottom:var(--s2)}
  #p-ai .ai-main > .answer-meta{display:none}
  #p-ai .ai-main > .ai-notice{order:9;margin:var(--s2) 0 0;font-size:var(--t-xs);line-height:1.5;color:var(--muted)}
  #p-ai .ai-main > .inrow{order:5}
  #p-ai #ai-in,#p-coach #coach-in,#p-events #ev-in{font-size:16px}
}

/* Phone: the privacy notice is a slim bar (choice buttons first); the detail stays in the linked notice. */
@media(max-width:900px){
  .privacy-notice{padding:12px 14px}
  .privacy-notice .pn-title{display:none}
  .privacy-notice .pn-more{font-size:0;margin:0}
  .privacy-notice .pn-more a{font-size:.8rem}
  .pn-actions{margin-top:8px}
}

/* Foldable groups on long list pages (Expressions, Pitfalls): the summary is the group heading. */
details.fold>summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:center}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::after{content:'+';margin-inline-start:var(--s2);color:var(--gold);font-size:1.2rem;line-height:1}
details.fold[open]>summary::after{content:'\2212'}
details.fold>summary.ex-head{display:flex;margin-bottom:var(--s3)}
details.fold>summary .orn{flex:1;margin:0}
/* Phone folds for Art works, Tribes maps and the poetry library: desktop shows them open with no toggle row. */
@media(min-width:821px){details.fold:is(.art-works,.tr-maps,.po-books-fold)>summary{display:none}}
details.fold:is(.tr-region,.et-sec)>summary{margin-bottom:var(--s3)}
@media(max-width:820px){
  .ex-card .c-lit{display:none}
}

/* Phone tab bar: the four places a learner returns to, plus the full menu. */
.tabbar{display:none}
@media(max-width:820px){
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;z-index:55;left:0;right:0;bottom:0;padding:4px max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));background:var(--bg);border-top:1px solid var(--bd2)}
  .tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;padding:4px 2px;border:0;background:transparent;color:var(--muted);font-family:var(--ui);font-size:.68rem;letter-spacing:.02em;cursor:pointer;border-radius:12px;min-width:0}
  .tabbar button span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabbar .tab-i{font-size:1.15rem;line-height:1}
  .tabbar button.on{color:var(--gold);font-weight:600}
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
  .fab-dock{bottom:calc(68px + env(safe-area-inset-bottom))}
  .privacy-notice{bottom:calc(68px + env(safe-area-inset-bottom))}
  :is(#p-ai,#p-coach,#p-events).on{height:calc(100dvh - 84px - 60px)}
}

/* Arrival cards */
.arrival-card{max-width:var(--content);margin:0 auto var(--s3);padding:var(--s3);border:1px solid var(--bd2);border-radius:16px;background:var(--bg2);text-align:left}
.arrival-card>summary.ex-head{margin-bottom:0}
.arrival-card>summary h3{font-size:var(--t-md,1.05rem);letter-spacing:.04em;text-transform:none;color:var(--gold)}
.arrival-goal{margin:var(--s2) 0;color:var(--muted)}
.arrival-steps{padding-inline-start:1.3em;margin:var(--s2) 0}
.arrival-steps li{margin:0 0 var(--s2);line-height:1.6}
.arrival-phrases{display:grid;gap:var(--s2);margin:var(--s2) 0}
.arrival-phrase{padding:var(--s2) var(--s3);border:1px solid var(--bd);border-radius:12px;background:var(--bg);text-align:center}
.arrival-phrase .c-ar{font-family:var(--arabic);font-size:1.6rem;color:var(--gold)}
.arrival-traps{padding-inline-start:1.2em;margin:var(--s2) 0}
.arrival-traps li{margin:0 0 var(--s2);line-height:1.6}
.arrival-card .row{margin-top:var(--s3)}